✨ [Frontend] Workspaces & Folders: Merge Workspace header and Folder breadcrumbs (ITISFoundation#6414)

Author: odeimaiz

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

@@ -15,59 +15,38 @@
 
 ************************************************************************ */
 
-/**
- * Widget used for displaying a New Folder in the Study Browser
- *
- */
-
-qx.Class.define("osparc.dashboard.ContainerHeader", {
+qx.Class.define("osparc.dashboard.ContextBreadcrumbs", {
   extend: qx.ui.core.Widget,
 
   construct: function() {
     this.base(arguments);
 
-    this._setLayout(new qx.ui.layout.HBox(20).set({
+    this._setLayout(new qx.ui.layout.HBox(5).set({
       alignY: "middle"
     }));
   },
 
-  events: {
-    "changeContext": "qx.event.type.Data",
-  },
-
   properties: {
     currentWorkspaceId: {
       check: "Number",
       nullable: true,
       init: null,
-      apply: "__buildBreadcrumbs"
+      event: "changeCurrentWorkspaceId",
+      apply: "__rebuild"
     },
 
     currentFolderId: {
       check: "Number",
       nullable: true,
       init: null,
-      apply: "__buildBreadcrumbs"
+      event: "changeCurrentFolderId",
+      apply: "__rebuild"
     }
   },
 
   members: {
-    _createChildControlImpl: function(id) {
-      let control;
-      switch (id) {
-        case "breadcrumbs-layout":
-          control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5).set({
-            alignY: "middle"
-          }));
-          this._addAt(control, 0, {flex: 1});
-          break;
-      }
-      return control || this.base(arguments, id);
-    },
-
-    __buildBreadcrumbs: function() {
-      const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
-      breadcrumbsLayout.removeAll();
+    __rebuild: function() {
+      this._removeAll();
 
       if (this.getCurrentFolderId()) {
         const currentFolder = osparc.store.Folders.getInstance().getFolder(this.getCurrentFolderId());
@@ -76,23 +55,22 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
 
       const currentFolderButton = this.__createCurrentFolderButton();
       if (currentFolderButton) {
-        breadcrumbsLayout.add(currentFolderButton);
+        this._add(currentFolderButton);
       }
     },
 
     __createUpstreamButtons: function(childFolder) {
       if (childFolder) {
-        const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
         const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());
         if (parentFolder) {
-          breadcrumbsLayout.addAt(this.__createArrow(), 0);
+          this._addAt(this.__createArrow(), 0);
           const upstreamButton = this.__createFolderButton(parentFolder);
-          breadcrumbsLayout.addAt(upstreamButton, 0);
+          this._addAt(upstreamButton, 0);
           this.__createUpstreamButtons(parentFolder);
         } else {
-          breadcrumbsLayout.addAt(this.__createArrow(), 0);
+          this._addAt(this.__createArrow(), 0);
           const homeButton = this.__createFolderButton();
-          breadcrumbsLayout.addAt(homeButton, 0);
+          this._addAt(homeButton, 0);
         }
       }
     },
@@ -102,15 +80,12 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
       return this.__createFolderButton(currentFolder);
     },
 
-    __changeContext: function(workspaceId, folderId) {
+    __changeFolder: function(folderId) {
+      const workspaceId = this.getCurrentWorkspaceId();
       this.set({
         currentWorkspaceId: workspaceId,
         currentFolderId: folderId,
       });
-      this.fireDataEvent("changeContext", {
-        workspaceId,
-        folderId,
-      });
     },
 
     __createRootButton: function() {
@@ -131,25 +106,28 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
       }
       rootButton.addListener("execute", () => {
         const folderId = null;
-        this.__changeContext(workspaceId, folderId);
+        this.__changeFolder(folderId);
       });
       return rootButton;
     },
 
     __createFolderButton: function(folder) {
       let folderButton = null;
       if (folder) {
-        folderButton = new qx.ui.form.Button(folder.getName(), "@FontAwesome5Solid/folder/14").set({
+        folderButton = new qx.ui.form.Button(folder.getName()).set({
           maxWidth: 200
         });
         folder.bind("name", folderButton, "label");
         folderButton.addListener("execute", () => {
-          const workspaceId = this.getCurrentWorkspaceId();
           const folderId = folder ? folder.getFolderId() : null;
-          this.__changeContext(workspaceId, folderId);
+          this.__changeFolder(folderId);
         }, this);
       } else {
         folderButton = this.__createRootButton();
+        // Do not show root folder
+        folderButton.set({
+          visibility: "excluded"
+        });
       }
       folderButton.set({
         backgroundColor: "transparent",

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

@@ -230,10 +230,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
-    _createResourcesLayout: function() {
-      const topBar = this.__createTopBar();
-      this._addToLayout(topBar);
+    _createSearchBar: function() {
+      const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType).set({
+        marginRight: 22
+      });
+      const textField = searchBarFilter.getChildControl("text-field");
+      osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType);
+      this._addToLayout(searchBarFilter);
+    },
 
+    _createResourcesLayout: function() {
       const toolbar = this._toolbar = new qx.ui.toolbar.ToolBar().set({
         backgroundColor: "transparent",
         spacing: 10,
@@ -268,34 +274,9 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       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);
     },
 
-    __createTopBar: function() {
-      const topBar = new qx.ui.container.Composite(new qx.ui.layout.HBox(10)).set({
-        paddingRight: 22,
-        alignY: "middle"
-      });
-
-      const searchBarFilter = this._searchBarFilter = new osparc.dashboard.SearchBarFilter(this._resourceType);
-      const textField = searchBarFilter.getChildControl("text-field");
-      osparc.utils.Utils.setIdToWidget(textField, "searchBarFilter-textField-"+this._resourceType);
-      topBar.add(searchBarFilter, {
-        flex: 1
-      });
-
-      return topBar;
-    },
-
     _groupByChanged: function(groupBy) {
       // if cards are grouped they need to be in grid mode
       this._resourcesContainer.setMode("grid");
@@ -373,7 +354,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
     _addResourceFilter: function() {
       const resourceFilter = this._resourceFilter = new osparc.dashboard.ResourceFilter(this._resourceType).set({
-        marginTop: osparc.dashboard.SearchBarFilter.HEIGHT,
+        marginTop: osparc.dashboard.SearchBarFilter.HEIGHT + 10,
         maxWidth: this.self().SIDE_SPACER_WIDTH,
         width: this.self().SIDE_SPACER_WIDTH
       });

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

@@ -32,7 +32,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
     this.__resourcesList = [];
     this.__groupedContainersList = [];
 
-    const containerHeader = this.__containerHeader = new osparc.dashboard.ContainerHeader();
+    const containerHeader = this.__containerHeader = new osparc.dashboard.ContextBreadcrumbs();
     this._add(containerHeader);
     containerHeader.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
 

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

@@ -145,6 +145,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
 
     // LAYOUT //
     _createLayout: function() {
+      this._createSearchBar();
       this._createResourcesLayout();
       const list = this._resourcesContainer.getFlatList();
       if (list) {

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

@@ -872,30 +872,29 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     // LAYOUT //
     _createLayout: function() {
+      this._createSearchBar();
+
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
         const workspaceHeader = new osparc.dashboard.WorkspaceHeader();
         this.bind("currentWorkspaceId", workspaceHeader, "currentWorkspaceId");
+        this.bind("currentFolderId", workspaceHeader, "currentFolderId");
+        [
+          "changeCurrentWorkspaceId",
+          "changeCurrentFolderId",
+        ].forEach(ev => {
+          workspaceHeader.addListener(ev, () => {
+            const workspaceId = workspaceHeader.getCurrentWorkspaceId();
+            const folderId = workspaceHeader.getCurrentFolderId();
+            this._changeContext(workspaceId, folderId);
+            this._resourceFilter.contextChanged(workspaceId, folderId);
+          }, this);
+        });
+
         this._addToLayout(workspaceHeader);
       }
 
       this._createResourcesLayout();
 
-      const containerHeader = this._resourcesContainer.getContainerHeader();
-      if (containerHeader) {
-        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);
-        });
-      }
       const list = this._resourcesContainer.getFlatList();
       if (list) {
         osparc.utils.Utils.setIdToWidget(list, "studiesList");

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

@@ -162,6 +162,7 @@ qx.Class.define("osparc.dashboard.TemplateBrowser", {
 
     // LAYOUT //
     _createLayout: function() {
+      this._createSearchBar();
       this._createResourcesLayout();
       const list = this._resourcesContainer.getFlatList();
       if (list) {

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

@@ -52,6 +52,13 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       apply: "__buildLayout"
     },
 
+    currentFolderId: {
+      check: "Number",
+      nullable: true,
+      init: null,
+      event: "changeCurrentFolderId",
+    },
+
     accessRights: {
       check: "Object",
       nullable: false,
@@ -98,6 +105,14 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
           });
           this._add(control);
           break;
+        case "breadcrumbs":
+          control = new osparc.dashboard.ContextBreadcrumbs();
+          this.bind("currentWorkspaceId", control, "currentWorkspaceId");
+          this.bind("currentFolderId", control, "currentFolderId");
+          control.bind("currentWorkspaceId", this, "currentWorkspaceId");
+          control.bind("currentFolderId", this, "currentFolderId");
+          this._add(control);
+          break;
         case "edit-button":
           control = new qx.ui.form.MenuButton().set({
             appearance: "form-button-outlined",
@@ -158,7 +173,15 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
 
     __buildLayout: function(workspaceId) {
       this.getChildControl("icon");
-      const title = this.getChildControl("title");
+      const title = this.getChildControl("title").set({
+        cursor: "pointer"
+      });
+      title.addListener("tap", () => {
+        const folderId = null;
+        this.setCurrentFolderId(folderId);
+      });
+
+      this.getChildControl("breadcrumbs");
 
       this.getChildControl("edit-button").exclude();
       this.resetAccessRights();

services/static-webserver/client/source/class/osparc/node/TierSelectionView.js

@@ -72,7 +72,11 @@ qx.Class.define("osparc.node.TierSelectionView", {
               .then(preselectedPricingUnit => {
                 if (preselectedPricingUnit && preselectedPricingUnit["pricingUnitId"]) {
                   const tierFound = tierBox.getSelectables().find(t => t.getModel() === preselectedPricingUnit["pricingUnitId"]);
-                  tierBox.setSelection([tierFound]);
+                  if (tierFound) {
+                    tierBox.setSelection([tierFound]);
+                  } else {
+                    console.error("Tier not found");
+                  }
                 }
               })
               .finally(() => {