🐛 [Frontend] Reload folder after deleting file (#6025)

Author: odeimaiz

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

@@ -108,7 +108,13 @@ qx.Class.define("osparc.dashboard.CardBase", {
           } else if (sharedWith === "shared-with-me") {
             return totalAccess;
           } else if (sharedWith === "shared-with-everyone") {
-            return !Object.keys(checks).includes("1");
+            const store = osparc.store.Store.getInstance();
+            const everyoneGroupIds = [
+              store.getEveryoneProductGroup()["gid"],
+              store.getEveryoneGroup()["gid"]
+            ];
+            const found = Object.keys(checks).some(gId => everyoneGroupIds.includes(parseInt(gId)));
+            return !found;
           }
           return false;
         }

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

@@ -39,57 +39,15 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
   },
 
   members: {
-    __filesTree: null,
-    __folderViewer: null,
-    __selectedFileLayout: null,
-
     _createChildControlImpl: function(id) {
       let control;
       switch (id) {
-        case "reload-button":
-          control = new qx.ui.form.Button().set({
-            label: this.tr("Reload"),
-            font: "text-14",
-            icon: "@FontAwesome5Solid/sync-alt/14",
-            allowGrowX: false
-          });
-          this._addToLayout(control);
-          break;
-        case "tree-folder-layout":
-          control = new qx.ui.splitpane.Pane("horizontal");
-          control.getChildControl("splitter").set({
-            width: 2,
-            backgroundColor: "scrollbar-passive"
-          });
+        case "tree-folder-view":
+          control = new osparc.file.TreeFolderView();
           this._addToLayout(control, {
             flex: 1
           });
           break;
-        case "files-tree": {
-          const treeFolderLayout = this.getChildControl("tree-folder-layout");
-          control = new osparc.file.FilesTree().set({
-            showLeafs: false,
-            minWidth: 150,
-            width: 250
-          });
-          treeFolderLayout.add(control, 0);
-          break;
-        }
-        case "folder-viewer": {
-          const treeFolderLayout = this.getChildControl("tree-folder-layout");
-          control = new osparc.file.FolderViewer();
-          treeFolderLayout.add(control, 1);
-          break;
-        }
-        case "selected-file-layout":
-          control = new osparc.file.FileLabelWithActions().set({
-            alignY: "middle"
-          });
-          break;
-        case "actions-toolbar":
-          control = new qx.ui.toolbar.ToolBar();
-          this._addToLayout(control);
-          break;
       }
 
       return control || this.base(arguments, id);
@@ -101,8 +59,9 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
       this.__buildLayout();
 
       this.addListener("appear", () => {
-        this.getChildControl("files-tree").populateTree();
-        this.getChildControl("folder-viewer").setFolder(this.getChildControl("files-tree").getModel());
+        const treeFolderView = this.getChildControl("tree-folder-view");
+        treeFolderView.getChildControl("folder-tree").populateTree();
+        treeFolderView.getChildControl("folder-viewer").setFolder(treeFolderView.getChildControl("folder-tree").getModel());
       }, this);
     },
 
@@ -111,64 +70,53 @@ qx.Class.define("osparc.dashboard.DataBrowser", {
         marginTop: 20
       });
 
-      // button for refetching data
-      const reloadBtn = this.getChildControl("reload-button");
-      reloadBtn.addListener("execute", () => {
-        this.getChildControl("files-tree").resetCache();
-        this.getChildControl("files-tree").populateTree();
-      }, this);
+      const treeFolderView = this.getChildControl("tree-folder-view");
 
-      const filesTree = this.getChildControl("files-tree");
-      const folderViewer = this.getChildControl("folder-viewer");
+      const reloadButton = treeFolderView.getChildControl("reload-button");
+      reloadButton.addListener("execute", () => this.__reloadTree(), this);
 
-      const actionsToolbar = this.getChildControl("actions-toolbar");
-      const fileActions = new qx.ui.toolbar.Part();
-      const addFile = new qx.ui.toolbar.Part();
-      actionsToolbar.add(fileActions);
-      actionsToolbar.addSpacer();
-      actionsToolbar.add(addFile);
+      const selectedFileLayout = treeFolderView.getChildControl("selected-file-layout");
+      selectedFileLayout.addListener("fileDeleted", e => this.__fileDeleted(e.getData()), this);
+    },
 
-      const selectedFileLayout = this.__selectedFileLayout = this.getChildControl("selected-file-layout");
+    __reloadTree: function() {
+      const treeFolderView = this.getChildControl("tree-folder-view");
 
-      filesTree.addListener("selectionChanged", () => {
-        const selectionData = filesTree.getSelectedItem();
-        this.__selectionChanged(selectionData);
-        if (osparc.file.FilesTree.isDir(selectionData) || (selectionData.getChildren && selectionData.getChildren().length)) {
-          folderViewer.setFolder(selectionData);
-        }
-      }, this);
+      const foldersTree = treeFolderView.getChildControl("folder-tree");
+      foldersTree.resetCache();
+      foldersTree.populateTree();
 
-      folderViewer.addListener("selectionChanged", e => {
-        const selectionData = e.getData();
-        this.__selectionChanged(selectionData);
-      }, this);
-      folderViewer.addListener("itemSelected", e => {
-        const data = e.getData();
-        filesTree.openNodeAndParents(data);
-        filesTree.setSelection(new qx.data.Array([data]));
-      }, this);
-      folderViewer.addListener("folderUp", e => {
-        const currentFolder = e.getData();
-        const parent = filesTree.getParent(currentFolder);
-        if (parent) {
-          filesTree.setSelection(new qx.data.Array([parent]));
-          folderViewer.setFolder(parent);
-        }
-      }, this);
-      folderViewer.addListener("requestDatasetFiles", e => {
-        const data = e.getData();
-        filesTree.requestDatasetFiles(data.locationId, data.datasetId);
-      }, this);
-
-      selectedFileLayout.addListener("fileDeleted", e => {
-        const fileMetadata = e.getData();
-        this.getChildControl("files-tree").populateTree(fileMetadata["locationId"]);
-      }, this);
-      fileActions.add(selectedFileLayout);
+      const folderViewer = treeFolderView.getChildControl("folder-viewer");
+      folderViewer.resetFolder();
     },
 
-    __selectionChanged: function(selectedItem) {
-      this.__selectedFileLayout.setItemSelected(selectedItem);
+    __fileDeleted: function(fileMetadata) {
+      // After deleting a file, try to keep the user in the same folder.
+      // If the folder doesn't longer exist, open the closest available parent
+
+      const path = fileMetadata["fileUuid"].split("/");
+
+      const treeFolderView = this.getChildControl("tree-folder-view");
+      const foldersTree = treeFolderView.getChildControl("folder-tree");
+      const folderViewer = treeFolderView.getChildControl("folder-viewer");
+
+      const openSameFolder = () => {
+        // drop last, which is the file
+        path.pop();
+        treeFolderView.openPath(path);
+      };
+
+      folderViewer.resetFolder();
+      const locationId = fileMetadata["locationId"];
+      const datasetId = path[0];
+      foldersTree.resetCache();
+      foldersTree.populateTree()
+        .then(datasetPromises => {
+          Promise.all(datasetPromises)
+            .then(() => foldersTree.requestDatasetFiles(locationId, datasetId))
+            .then(() => openSameFolder());
+        })
+        .catch(err => console.error(err));
     }
   }
 });

services/static-webserver/client/source/class/osparc/file/FilesTree.js

@@ -145,24 +145,61 @@ qx.Class.define("osparc.file.FilesTree", {
       dataStore.resetCache();
     },
 
-    populateStudyTree(studyId) {
-      if (studyId) {
-        this.__populateStudyFiles(studyId);
-      }
+    populateStudyTree: function(studyId) {
+      const treeName = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Files";
+      this.__resetTree(treeName);
+      let studyModel = this.getModel();
+      this.self().addLoadingChild(studyModel);
+
+      const dataStore = osparc.store.Data.getInstance();
+      return dataStore.getFilesByLocationAndDataset("0", studyId)
+        .then(data => {
+          const {
+            files
+          } = data;
+
+          if (files.length && "project_name" in files[0]) {
+            this.__resetTree(files[0]["project_name"]);
+          }
+          studyModel = this.getModel();
+          this.__filesToDataset("0", studyId, files, studyModel);
+        });
     },
 
     populateNodeTree(nodeId) {
-      if (nodeId) {
-        this.__populateNodeFiles(nodeId);
-      }
+      const treeName = "Node Files";
+      this.__resetTree(treeName);
+      const rootModel = this.getModel();
+      this.self().addLoadingChild(rootModel);
+
+      const dataStore = osparc.store.Data.getInstance();
+      return dataStore.getNodeFiles(nodeId)
+        .then(files => {
+          const newChildren = osparc.data.Converters.fromDSMToVirtualTreeModel(null, files);
+          if (newChildren.length && // location
+            newChildren[0].children.length && // study
+            newChildren[0].children[0].children.length) { // node
+            const nodeData = newChildren[0].children[0].children[0];
+            const nodeTreeName = nodeData.label;
+            this.__resetTree(nodeTreeName);
+            const rootNodeModel = this.getModel();
+            if (nodeData.children.length) {
+              const nodeItemsOnly = nodeData.children;
+              this.__itemsToNode(nodeItemsOnly);
+            }
+            this.openNode(rootNodeModel);
+
+            const selected = new qx.data.Array([rootNodeModel]);
+            this.setSelection(selected);
+            this.__selectionChanged();
+          } else {
+            rootModel.getChildren().removeAll();
+          }
+        });
     },
 
-    populateTree: function(locationId = null) {
-      if (locationId) {
-        this.__populateLocation(locationId);
-      } else {
-        this.__populateLocations();
-      }
+    populateTree: function() {
+      return this.__populateLocations();
     },
 
     loadFilePath: function(outFileVal) {
@@ -275,16 +312,18 @@ qx.Class.define("osparc.file.FilesTree", {
         hideRoot: true
       });
       const dataStore = osparc.store.Data.getInstance();
-      dataStore.getLocations()
+      return dataStore.getLocations()
         .then(locations => {
+          const datasetPromises = [];
           if (this.__locations.size === 0) {
             this.resetChecks();
             this.__locationsToRoot(locations);
             for (let i=0; i<locations.length; i++) {
               const locationId = locations[i]["id"];
-              this.__populateLocation(locationId);
+              datasetPromises.push(this.__populateLocation(locationId));
             }
           }
+          return datasetPromises;
         });
     },
 
@@ -321,7 +360,7 @@ qx.Class.define("osparc.file.FilesTree", {
       }
 
       const dataStore = osparc.store.Data.getInstance();
-      dataStore.getDatasetsByLocation(locationId)
+      return dataStore.getDatasetsByLocation(locationId)
         .then(data => {
           const {
             location,
@@ -333,66 +372,13 @@ qx.Class.define("osparc.file.FilesTree", {
         });
     },
 
-    __populateStudyFiles: function(studyId) {
-      const treeName = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + " Files";
-      this.__resetTree(treeName);
-      let studyModel = this.getModel();
-      this.self().addLoadingChild(studyModel);
-
-      const dataStore = osparc.store.Data.getInstance();
-      dataStore.getFilesByLocationAndDataset("0", studyId)
-        .then(data => {
-          const {
-            files
-          } = data;
-
-          if (files.length && "project_name" in files[0]) {
-            this.__resetTree(files[0]["project_name"]);
-          }
-          studyModel = this.getModel();
-          this.__filesToDataset("0", studyId, files, studyModel);
-        });
-    },
-
-    __populateNodeFiles: function(nodeId) {
-      const treeName = "Node Files";
-      this.__resetTree(treeName);
-      const rootModel = this.getModel();
-      this.self().addLoadingChild(rootModel);
-
-      const dataStore = osparc.store.Data.getInstance();
-      dataStore.getNodeFiles(nodeId)
-        .then(files => {
-          const newChildren = osparc.data.Converters.fromDSMToVirtualTreeModel(null, files);
-          if (newChildren.length && // location
-            newChildren[0].children.length && // study
-            newChildren[0].children[0].children.length) { // node
-            const nodeData = newChildren[0].children[0].children[0];
-            const nodeTreeName = nodeData.label;
-            this.__resetTree(nodeTreeName);
-            const rootNodeModel = this.getModel();
-            if (nodeData.children.length) {
-              const nodeItemsOnly = nodeData.children;
-              this.__itemsToNode(nodeItemsOnly);
-            }
-            this.openNode(rootNodeModel);
-
-            const selected = new qx.data.Array([rootNodeModel]);
-            this.setSelection(selected);
-            this.__selectionChanged();
-          } else {
-            rootModel.getChildren().removeAll();
-          }
-        });
-    },
-
     requestDatasetFiles: function(locationId, datasetId) {
       if (this.__datasets.has(datasetId)) {
-        return;
+        return null;
       }
 
       const dataStore = osparc.store.Data.getInstance();
-      dataStore.getFilesByLocationAndDataset(locationId, datasetId)
+      return dataStore.getFilesByLocationAndDataset(locationId, datasetId)
         .then(data => {
           const {
             location,
@@ -531,6 +517,13 @@ qx.Class.define("osparc.file.FilesTree", {
       return list.find(element => element.getChildren && element.getChildren().contains(childItem));
     },
 
+    findItemId: function(itemId) {
+      const root = this.getModel();
+      const items = [];
+      this.__getItemsInTree(root, items);
+      return items.find(element => "getItemId" in element && element.getItemId() === itemId);
+    },
+
     __getItemsInTree: function(item, items) {
       items.push(item);
       if (item.getChildren) {