🎨 [Frontend] Workspaces and Folders: Sync tree

services/static-webserver/client/source/class/osparc/dashboard/ContainerHeader.js

@@ -102,49 +102,54 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
       return this.__createFolderButton(currentFolder);
     },
 
-    __createRootButton: function(workspaceId) {
+    __changeContext: function(workspaceId, folderId) {
+      this.set({
+        currentWorkspaceId: workspaceId,
+        currentFolderId: folderId,
+      });
+      this.fireDataEvent("changeContext", {
+        workspaceId,
+        folderId,
+      });
+    },
+
+    __createRootButton: function() {
+      const workspaceId = this.getCurrentWorkspaceId();
       let rootButton = null;
       if (workspaceId) {
         if (workspaceId === -1) {
           rootButton = new qx.ui.form.Button(this.tr("Shared Workspaces"), osparc.store.Workspaces.iconPath());
         } else {
           const workspace = osparc.store.Workspaces.getInstance().getWorkspace(workspaceId);
-          rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath());
+          rootButton = new qx.ui.form.Button(workspace.getName(), osparc.store.Workspaces.iconPath()).set({
+            maxWidth: 200
+          });
+          workspace.bind("name", rootButton, "label");
         }
       } else {
         rootButton = new qx.ui.form.Button(this.tr("My Workspace"), "@FontAwesome5Solid/home/14");
       }
       rootButton.addListener("execute", () => {
         const folderId = null;
-        this.set({
-          currentFolderId: null,
-        });
-        this.fireDataEvent("changeContext", {
-          workspaceId,
-          folderId,
-        });
+        this.__changeContext(workspaceId, folderId);
       });
       return rootButton;
     },
 
     __createFolderButton: function(folder) {
       let folderButton = null;
       if (folder) {
-        folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14");
+        folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({
+          maxWidth: 200
+        });
+        folder.bind("name", folderButton, "label");
         folderButton.addListener("execute", () => {
           const workspaceId = this.getCurrentWorkspaceId();
           const folderId = folder ? folder.getFolderId() : null;
-          this.set({
-            currentFolderId: folderId,
-          });
-          this.fireDataEvent("changeContext", {
-            workspaceId,
-            folderId,
-          });
+          this.__changeContext(workspaceId, folderId);
         }, this);
       } else {
-        const workspaceId = this.getCurrentWorkspaceId();
-        folderButton = this.__createRootButton(workspaceId);
+        folderButton = this.__createRootButton();
       }
       folderButton.set({
         backgroundColor: "transparent",

services/static-webserver/client/source/class/osparc/dashboard/FolderButtonBase.js

@@ -83,7 +83,7 @@ qx.Class.define("osparc.dashboard.FolderButtonBase", {
         row: 0,
         rowSpan: 2
       }
-    }
+    },
   },
 
   members: { // eslint-disable-line qx-rules/no-refs-in-members

services/static-webserver/client/source/class/osparc/dashboard/FolderButtonItem.js

@@ -105,7 +105,6 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
           control = new qx.ui.basic.Label().set({
             anonymous: true,
             font: "text-14",
-            rich: true,
           });
           this._add(control, osparc.dashboard.FolderButtonBase.POS.TITLE);
           break;
@@ -169,6 +168,8 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
     __applyTitle: function(value) {
       const label = this.getChildControl("title");
       label.setValue(value);
+
+      this.setToolTipText(value);
     },
 
     __applyLastModified: function(value) {

services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js

@@ -251,18 +251,32 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData()));
       resourcesContainer.addListener("tagClicked", e => this._searchBarFilter.addTagActiveFilter(e.getData()));
       resourcesContainer.addListener("emptyStudyClicked", e => this._deleteResourceRequested(e.getData()));
-      resourcesContainer.addListener("folderSelected", e => this._folderSelected(e.getData()));
       resourcesContainer.addListener("folderUpdated", e => this._folderUpdated(e.getData()));
       resourcesContainer.addListener("moveFolderToFolderRequested", e => this._moveFolderToFolderRequested(e.getData()));
       resourcesContainer.addListener("moveFolderToWorkspaceRequested", e => this._moveFolderToWorkspaceRequested(e.getData()));
       resourcesContainer.addListener("deleteFolderRequested", e => this._deleteFolderRequested(e.getData()));
+      resourcesContainer.addListener("folderSelected", e => {
+        const folderId = e.getData();
+        this._folderSelected(folderId);
+        this._resourceFilter.folderSelected(folderId);
+      }, this);
       resourcesContainer.addListener("workspaceSelected", e => {
         const workspaceId = e.getData();
         this._workspaceSelected(workspaceId);
         this._resourceFilter.workspaceSelected(workspaceId);
-      });
+      }, this);
       resourcesContainer.addListener("workspaceUpdated", e => this._workspaceUpdated(e.getData()));
       resourcesContainer.addListener("deleteWorkspaceRequested", e => this._deleteWorkspaceRequested(e.getData()));
+
+      const containerHeader = this._resourcesContainer.getContainerHeader();
+      containerHeader.addListener("changeContext", e => {
+        const {
+          workspaceId,
+          folderId,
+        } = e.getData();
+        this._resourceFilter.contextChanged(workspaceId, folderId);
+      }, this);
+
       this._addToLayout(resourcesContainer);
     },
 

services/static-webserver/client/source/class/osparc/dashboard/ResourceFilter.js

@@ -62,6 +62,8 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       }
     },
 
+
+    /* WORKSPACES AND FOLDERS */
     __createWorkspacesAndFoldersTree: function() {
       const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
       // Height needs to be calculated manually to make it flexible
@@ -82,6 +84,32 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       return this.__workspacesAndFoldersTree;
     },
 
+    contextChanged: function(workspaceId, folderId) {
+      this.__workspacesAndFoldersTree.set({
+        currentWorkspaceId: workspaceId,
+        currentFolderId: folderId,
+      });
+      this.__workspacesAndFoldersTree.contextChanged();
+    },
+
+    workspaceSelected: function(workspaceId) {
+      this.__workspacesAndFoldersTree.set({
+        currentWorkspaceId: workspaceId,
+        currentFolderId: null,
+      });
+      this.__workspacesAndFoldersTree.contextChanged();
+    },
+
+    folderSelected: function(folderId) {
+      const workspaceId = this.__workspacesAndFoldersTree.getCurrentWorkspaceId();
+      this.__workspacesAndFoldersTree.set({
+        currentWorkspaceId: workspaceId,
+        currentFolderId: folderId,
+      });
+      this.__workspacesAndFoldersTree.contextChanged();
+    },
+    /* /WORKSPACES AND FOLDERS */
+
     /* SHARED WITH */
     __createSharedWithFilterLayout: function() {
       const sharedWithLayout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));
@@ -137,12 +165,6 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     },
     /* /SHARED WITH */
 
-    /* WORKSPACES */
-    workspaceSelected: function(workspaceId) {
-      // OM: select folder
-    },
-    /* /WORKSPACES */
-
     /* TAGS */
     __createTagsFilterLayout: function() {
       const layout = new qx.ui.container.Composite(new qx.ui.layout.VBox(5));

services/static-webserver/client/source/class/osparc/dashboard/StudyBrowser.js

@@ -882,15 +882,17 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
       const containerHeader = this._resourcesContainer.getContainerHeader();
       if (containerHeader) {
-        this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId", {
-          onUpdate: () => containerHeader.setCurrentFolderId(null)
-        });
+        this.bind("currentWorkspaceId", containerHeader, "currentWorkspaceId");
         this.bind("currentFolderId", containerHeader, "currentFolderId");
         containerHeader.addListener("changeContext", e => {
           const {
             workspaceId,
             folderId,
           } = e.getData();
+          this.set({
+            currentWorkspaceId: workspaceId,
+            currentFolderId: folderId,
+          })
           this._changeContext(workspaceId, folderId);
         });
       }

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTree.js

@@ -46,6 +46,9 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
 
     this.__initTree();
 
+    // preselect "My Workspace"
+    this.contextChanged(null, null);
+
     osparc.store.Folders.getInstance().addListener("folderAdded", e => {
       const folder = e.getData();
       this.__folderAdded(folder);
@@ -249,5 +252,17 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
         }
       }
     },
+
+    contextChanged: function() {
+      const workspaceId = this.getCurrentWorkspaceId();
+      const folderId = this.getCurrentFolderId();
+
+      const contextModel = this.__getModel(workspaceId, folderId);
+      if (contextModel) {
+        const selection = this.getSelection();
+        selection.removeAll();
+        selection.push(contextModel);
+      }
+    },
   }
 });

services/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js

@@ -29,6 +29,10 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
       "border-radius": "8px"
     });
 
+    this.set({
+      maxWidth: 200 - 10
+    });
+
     this.setNotHoveredStyle();
     this.__attachEventHandlers();
   },