🎨 [Frontend] Workspaces: Prettify tree I (#6349)

Author: odeimaiz

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

@@ -784,6 +784,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
         if (moveToFolderButton) {
           moveToFolderButton.setEnabled(osparc.study.Utils.canMoveToFolder(resourceData));
         }
+        const moveToWorkspaceButton = menuButtons.find(menuBtn => "moveToWorkspaceButton" in menuBtn);
+        if (moveToWorkspaceButton) {
+          moveToWorkspaceButton.setEnabled(osparc.study.Utils.canMoveToWorkspace(resourceData));
+        }
         const deleteButton = menuButtons.find(menuBtn => "deleteButton" in menuBtn);
         if (deleteButton) {
           deleteButton.setEnabled(osparc.study.Utils.canBeDeleted(resourceData));

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

@@ -81,7 +81,7 @@ qx.Class.define("osparc.dashboard.ContainerHeader", {
     __createUpstreamButtons: function(childFolder) {
       if (childFolder) {
         const breadcrumbsLayout = this.getChildControl("breadcrumbs-layout");
-        const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentId());
+        const parentFolder = osparc.store.Folders.getInstance().getFolder(childFolder.getParentFolderId());
         if (parentFolder) {
           breadcrumbsLayout.addAt(this.__createArrow(), 0);
           const upstreamButton = this.__createFolderButton(parentFolder);

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

@@ -143,7 +143,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
       });
       folder.bind("workspaceId", this, "workspaceId");
       folder.bind("folderId", this, "folderId");
-      folder.bind("parentId", this, "parentFolderId");
+      folder.bind("parentFolderId", this, "parentFolderId");
       folder.bind("name", this, "title");
       folder.bind("lastModified", this, "lastModified");
 
@@ -227,7 +227,7 @@ qx.Class.define("osparc.dashboard.FolderButtonItem", {
         const updateData = {
           "name": newName,
         };
-        osparc.data.model.Folder.putFolder(this.getFolderId(), updateData)
+        osparc.store.Folders.getInstance().putFolder(this.getFolderId(), updateData)
           .then(() => {
             folder.set({
               name: newName,

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

@@ -374,8 +374,13 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
       if (this._resourceType === "study") {
         const workspacesAndFoldersTree = resourceFilter.getWorkspacesAndFoldersTree();
-        workspacesAndFoldersTree.bind("currentWorkspaceId", this, "currentWorkspaceId");
-        workspacesAndFoldersTree.bind("currentFolderId", this, "currentFolderId");
+        workspacesAndFoldersTree.addListener("changeContext", e => {
+          const {
+            workspaceId,
+            folderId,
+          } = e.getData();
+          this._changeContext(workspaceId, folderId);
+        });
         this.bind("currentWorkspaceId", workspacesAndFoldersTree, "currentWorkspaceId");
         this.bind("currentFolderId", workspacesAndFoldersTree, "currentFolderId");
       }
@@ -478,6 +483,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
+    _changeContext: function(workspaceId, folderId) {
+      throw new Error("Abstract method called!");
+    },
+
     _folderSelected: function(folderId) {
       throw new Error("Abstract method called!");
     },

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

@@ -68,10 +68,17 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
 
     __createWorkspacesAndFoldersTree: function() {
       const workspacesAndFoldersTree = this.__workspacesAndFoldersTree = new osparc.dashboard.WorkspacesAndFoldersTree();
-      // play with the height of:
-      // osparc.dashboard.WorkspacesAndFoldersTree
-      //   Pane
-      //     1st child
+      // Height needs to be calculated manually to make it flexible
+      workspacesAndFoldersTree.set({
+        minHeight: 100,
+        maxHeight: 400,
+        height: 100,
+      });
+      workspacesAndFoldersTree.addListener("openChanged", () => {
+        const rowConfig = workspacesAndFoldersTree.getPane().getRowConfig();
+        const totalHeight = rowConfig.itemCount * rowConfig.defaultItemSize;
+        workspacesAndFoldersTree.setHeight(totalHeight + 10);
+      });
       return workspacesAndFoldersTree;
     },
 

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

@@ -53,16 +53,14 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       check: "Number",
       nullable: true,
       init: null,
-      event: "changeCurrentWorkspaceId",
-      apply: "__applyCurrentWorkspaceId"
+      event: "changeCurrentWorkspaceId"
     },
 
     currentFolderId: {
       check: "Number",
       nullable: true,
       init: null,
-      event: "changeCurrentFolderId",
-      apply: "__resetAndReloadAll"
+      event: "changeCurrentFolderId"
     },
 
     multiSelection: {
@@ -105,7 +103,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __currentRequest: null,
     __workspacesList: null,
     __foldersList: null,
-    __reloadFoldersAndStudiesTimeout: null,
 
     // overridden
     initResources: function() {
@@ -121,6 +118,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
             const isStudyCreation = false;
             this._startStudyById(loadStudyId, null, cancelCB, isStudyCreation);
           } else {
+            this.__reloadFolders();
             this.reloadResources();
           }
           // "Starting..." page
@@ -400,18 +398,6 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       osparc.filter.UIFilterController.dispatch("searchBarFilter");
     },
 
-    __applyCurrentWorkspaceId: function(workspaceId) {
-      if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        if (workspaceId === -1) {
-          this._resourcesContainer.setResourcesToList([]);
-          this._resourcesList = [];
-          this.__reloadWorkspaces();
-        } else {
-          this.__resetAndReloadAll();
-        }
-      }
-    },
-
     // WORKSPACES
     __reloadWorkspaceCards: function() {
       this._resourcesContainer.setWorkspacesToList(this.__workspacesList);
@@ -450,26 +436,21 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
     // /WORKSPACES
 
-    __resetAndReloadAll: function() {
+    _changeContext: function(workspaceId, folderId) {
       if (osparc.utils.DisabledPlugins.isFoldersEnabled()) {
-        const workspaceId = this.getCurrentWorkspaceId();
-        if (workspaceId === -1) {
-          return;
-        }
-
+        this.set({
+          currentWorkspaceId: workspaceId,
+          currentFolderId: folderId,
+        });
         this._resourcesContainer.setResourcesToList([]);
         this._resourcesList = [];
-        this.invalidateStudies();
 
-        // It can be triggered by a change of context: workspace and folder,
-        // delay it to make just one call
-        if (this.__reloadFoldersAndStudiesTimeout) {
-          clearTimeout(this.__reloadFoldersAndStudiesTimeout);
-        }
-        this.__reloadFoldersAndStudiesTimeout = setTimeout(() => {
-          this.__reloadFoldersAndStudiesTimeout = null;
+        if (workspaceId === -1) {
+          this.__reloadWorkspaces();
+        } else {
+          this.invalidateStudies();
           this.__reloadFoldersAndStudies();
-        }, 50);
+        }
       }
     },
 
@@ -502,6 +483,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
 
     _folderSelected: function(folderId) {
       this.setCurrentFolderId(folderId);
+      this._changeContext(this.getCurrentWorkspaceId(), folderId);
     },
 
     _folderUpdated: function() {
@@ -543,6 +525,12 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _moveFolderToWorkspaceRequested: function(folderId) {
+      const folderToWorkspaceRequested = false;
+      if (!folderToWorkspaceRequested) {
+        const msg = this.tr("Coming soon");
+        osparc.FlashMessenger.getInstance().logAs(msg, "WARNING");
+        return;
+      }
       const moveFolderToWorkspace = new osparc.dashboard.MoveResourceToWorkspace(this.getCurrentWorkspaceId());
       const title = "Move to Workspace";
       const win = osparc.ui.window.Window.popUpInWindow(moveFolderToWorkspace, title, 350, 280);
@@ -573,7 +561,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     _deleteFolderRequested: function(folderId) {
-      osparc.store.Folders.getInstance().deleteFolder(folderId)
+      osparc.store.Folders.getInstance().deleteFolder(folderId, this.getCurrentWorkspaceId())
         .then(() => this.__reloadFolders())
         .catch(err => console.error(err));
     },
@@ -882,7 +870,9 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           onUpdate: () => containerHeader.setCurrentFolderId(null)
         });
         this.bind("currentFolderId", containerHeader, "currentFolderId");
-        containerHeader.bind("currentFolderId", this, "currentFolderId");
+        containerHeader.bind("currentFolderId", this, "currentFolderId", {
+          onUpdate: () => this._changeContext(this.getCurrentWorkspaceId(), this.getCurrentFolderId())
+        });
       }
       const list = this._resourcesContainer.getFlatList();
       if (list) {