♻️ [Frontend] Context property for the StudyBrowser

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

@@ -27,10 +27,18 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
   },
 
   events: {
-    "contextChanged": "qx.event.type.Data",
+    "locationChanged": "qx.event.type.Data",
   },
 
   properties: {
+    currentContext: {
+      check: ["studiesAndFolders", "workspaces", "search"],
+      nullable: false,
+      init: "studiesAndFolders",
+      event: "changeCurrentContext",
+      apply: "__rebuild"
+    },
+
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
@@ -52,7 +60,7 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
     __rebuild: function() {
       this._removeAll();
 
-      if (this.getCurrentWorkspaceId() === -2) {
+      if (this.getCurrentContext() !== "studiesAndFolders") {
         return;
       }
 
@@ -73,12 +81,12 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
         if (parentFolder) {
           this._addAt(this.__createArrow(), 0);
           const upstreamButton = this.__createFolderButton(parentFolder);
-          this._addAt(upstreamButton, 0);
+          if (upstreamButton) {
+            this._addAt(upstreamButton, 0);
+          }
           this.__createUpstreamButtons(parentFolder);
         } else {
           this._addAt(this.__createArrow(), 0);
-          const homeButton = this.__createFolderButton();
-          this._addAt(homeButton, 0);
         }
       }
     },
@@ -94,59 +102,30 @@ qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
         currentWorkspaceId: workspaceId,
         currentFolderId: folderId,
       });
-      this.fireDataEvent("contextChanged", {
+      this.fireDataEvent("locationChanged", {
         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()).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.__changeFolder(folderId);
-      });
-      return rootButton;
-    },
-
     __createFolderButton: function(folder) {
-      let folderButton = null;
       if (folder) {
-        folderButton = new qx.ui.form.Button(folder.getName()).set({
+        const folderButton = new qx.ui.form.Button(folder.getName()).set({
           maxWidth: 200
         });
         folder.bind("name", folderButton, "label");
         folderButton.addListener("execute", () => {
           const folderId = folder ? folder.getFolderId() : null;
           this.__changeFolder(folderId);
         }, this);
-      } else {
-        folderButton = this.__createRootButton();
-        // Do not show root folder
         folderButton.set({
-          visibility: "excluded"
+          backgroundColor: "transparent",
+          textColor: "text",
+          gap: 5
         });
+        return folderButton;
       }
-      folderButton.set({
-        backgroundColor: "transparent",
-        textColor: "text",
-        gap: 5
-      });
-      return folderButton;
+      return null;
     },
 
     __createArrow: function() {

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

@@ -29,7 +29,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
     this.__tagButtons = [];
     this.__serviceTypeButtons = [];
 
-    this._setLayout(new qx.ui.layout.VBox(30));
+    this._setLayout(new qx.ui.layout.VBox(20));
     this.__buildLayout();
   },
 
@@ -62,15 +62,14 @@ 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
       workspacesAndFoldersTree.set({
-        minHeight: 100,
+        minHeight: 60,
         maxHeight: 400,
-        height: 100,
+        height: 60,
       });
       workspacesAndFoldersTree.addListener("openChanged", () => {
         const rowConfig = workspacesAndFoldersTree.getPane().getRowConfig();

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

@@ -49,6 +49,13 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
   },
 
   properties: {
+    currentContext: {
+      check: ["studiesAndFolders", "workspaces", "search"],
+      nullable: false,
+      init: "studiesAndFolders",
+      event: "changeCurrentContext"
+    },
+
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
@@ -101,7 +108,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
   members: {
     __dontShowTutorial: null,
-    __workspaceHeader: null,
+    __header: null,
     __workspacesList: null,
     __foldersList: null,
     __loadingFolders: null,
@@ -174,17 +181,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       if (
         !osparc.auth.Manager.getInstance().isLoggedIn() ||
         !osparc.utils.DisabledPlugins.isFoldersEnabled() ||
-        this.__loadingFolders) {
-        return;
-      }
-      const workspaceId = this.getCurrentWorkspaceId();
-      if (workspaceId === -1 || workspaceId === -2) {
+        this.getCurrentContext() !== "studiesAndFolders" ||
+        this.__loadingFolders
+      ) {
         return;
       }
 
+      const workspaceId = this.getCurrentWorkspaceId();
+      const folderId = this.getCurrentFolderId();
       this.__loadingFolders = true;
       this.__setFoldersToList([]);
-      const folderId = this.getCurrentFolderId();
       osparc.store.Folders.getInstance().fetchFolders(folderId, workspaceId, this.getOrderBy())
         .then(folders => {
           this.__setFoldersToList(folders);
@@ -194,10 +200,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __reloadStudies: function() {
-      const workspaceId = this.getCurrentWorkspaceId();
       if (
         !osparc.auth.Manager.getInstance().isLoggedIn() ||
-        workspaceId === -1 || // listing workspaces
+        this.getCurrentContext() === "workspaces" ||
         this._loadingResourcesBtn.isFetching()
       ) {
         return;
@@ -388,7 +393,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _workspaceSelected: function(workspaceId) {
-      this.__changeContext(workspaceId, null);
+      this.__changeContext("studiesAndFolders", workspaceId, null);
     },
 
     _workspaceUpdated: function() {
@@ -418,7 +423,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __addNewFolderButton: function() {
       const currentWorkspaceId = this.getCurrentWorkspaceId();
       if (currentWorkspaceId) {
-        if (currentWorkspaceId === -1 || currentWorkspaceId === -2) {
+        if (this.getCurrentContext() !== "studiesAndFolders") {
           return;
         }
         const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(this.getCurrentWorkspaceId());
@@ -448,7 +453,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _folderSelected: function(folderId) {
-      this.__changeContext(this.getCurrentWorkspaceId(), folderId);
+      this.__changeContext("studiesAndFolders", this.getCurrentWorkspaceId(), folderId);
     },
 
     _folderUpdated: function() {
@@ -705,11 +710,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __addNewStudyButtons: function() {
+      if (this.getCurrentContext() !== "studiesAndFolders") {
+        return;
+      }
       const currentWorkspaceId = this.getCurrentWorkspaceId();
       if (currentWorkspaceId) {
-        if (currentWorkspaceId === -2) {
-          return;
-        }
         const currentWorkspace = osparc.store.Workspaces.getInstance().getWorkspace(currentWorkspaceId);
         if (currentWorkspace && !currentWorkspace.getMyAccessRights()["write"]) {
           // If user can't write in workspace, do not show plus buttons
@@ -835,8 +840,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       this._createSearchBar();
 
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const workspaceHeader = this.__workspaceHeader = new osparc.dashboard.WorkspaceHeader();
-        this._addToLayout(workspaceHeader);
+        const header = this.__header = new osparc.dashboard.StudyBrowserHeader();
+        this._addToLayout(header);
       }
 
       this._createResourcesLayout();
@@ -908,72 +913,76 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     __connectContexts: function() {
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const workspaceHeader = this.__workspaceHeader;
-        workspaceHeader.addListener("contextChanged", () => {
-          const workspaceId = workspaceHeader.getCurrentWorkspaceId();
-          const folderId = workspaceHeader.getCurrentFolderId();
-          this.__changeContext(workspaceId, folderId);
+        const header = this.__header;
+        header.addListener("locationChanged", () => {
+          const workspaceId = header.getCurrentWorkspaceId();
+          const folderId = header.getCurrentFolderId();
+          this.__changeContext("studiesAndFolders", workspaceId, folderId);
         }, this);
 
         const workspacesAndFoldersTree = this._resourceFilter.getWorkspacesAndFoldersTree();
-        workspacesAndFoldersTree.addListener("contextChanged", e => {
+        workspacesAndFoldersTree.addListener("locationChanged", e => {
           const context = e.getData();
           const workspaceId = context["workspaceId"];
-          const folderId = context["folderId"];
-          this.__changeContext(workspaceId, folderId);
+          if (workspaceId === -1) {
+            this.__changeContext("workspaces");
+          } else {
+            const folderId = context["folderId"];
+            this.__changeContext("studiesAndFolders", workspaceId, folderId);
+          }
         }, this);
 
         this._searchBarFilter.addListener("filterChanged", e => {
           const filterData = e.getData();
           if (filterData.text) {
-            this.__changeContext(-2, null);
+            this.__changeContext("search");
           } else {
             // Back to My Workspace
-            this.__changeContext(null, null);
+            this.__changeContext("studiesAndFolders", null, null);
           }
         });
       }
     },
 
-    __changeContext: function(workspaceId, folderId) {
+    __changeContext: function(context, workspaceId = null, folderId = null) {
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
         if (
-          workspaceId !== -2 && // reload studies for a new search
+          context !== "search" && // reload studies for a new search
+          context === this.getCurrentContext() &&
           workspaceId === this.getCurrentWorkspaceId() &&
           folderId === this.getCurrentFolderId()
         ) {
           // didn't really change
           return;
         }
 
-        this._loadingResourcesBtn.setFetching(false);
-        this.resetSelection();
-        this.setMultiSelection(false);
         this.set({
+          currentContext: context,
           currentWorkspaceId: workspaceId,
           currentFolderId: folderId,
         });
+        this._loadingResourcesBtn.setFetching(false);
+        this.resetSelection();
+        this.setMultiSelection(false);
         this.invalidateStudies();
         this._resourcesContainer.setResourcesToList([]);
 
-        if (workspaceId === -2) {
-          // Search result: no folders, just studies
+        if (context === "search") {
           this.__setFoldersToList([]);
           this.__reloadStudies();
-        } else if (workspaceId === -1) {
-          // Workspaces
+        } else if (context === "workspaces") {
           this._searchBarFilter.resetFilters();
           this.__reloadWorkspaces();
-        } else {
-          // Actual workspace
+        } else if (context === "studiesAndFolders") {
           this._searchBarFilter.resetFilters();
           this.__reloadFolders();
           this.__reloadStudies();
         }
 
-        // notify workspaceHeader
-        const workspaceHeader = this.__workspaceHeader;
-        workspaceHeader.set({
+        // notify header
+        const header = this.__header;
+        header.set({
+          currentContext: context,
           currentWorkspaceId: workspaceId,
           currentFolderId: folderId,
         });
@@ -984,7 +993,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           currentWorkspaceId: workspaceId,
           currentFolderId: folderId,
         });
-        workspacesAndFoldersTree.contextChanged(workspaceId, folderId);
+        workspacesAndFoldersTree.contextChanged(context);
       }
     },
 
@@ -1130,8 +1139,8 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         }))
       });
       this.bind("multiSelection", selectButton, "value");
-      this.bind("currentWorkspaceId", selectButton, "visibility", {
-        converter: currentWorkspaceId => [-2, -1].includes(currentWorkspaceId) ? "excluded" : "visible"
+      this.bind("currentContext", selectButton, "visibility", {
+        converter: currentContext => currentContext === "studiesAndFolders" ? "visible" : "excluded"
       });
       return selectButton;
     },