🎨 [Frontend] UI/UX Data handling: Larger window and list view by default (#7160)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/DownloadLinkTracker.js

@@ -33,9 +33,10 @@ qx.Class.define("osparc.DownloadLinkTracker", {
       downloadAnchorNode.setAttribute("href", url);
       downloadAnchorNode.setAttribute("download", fileName);
       downloadAnchorNode.setAttribute("osparc", "downloadFile");
+      document.body.appendChild(downloadAnchorNode);
       this.setDownloading(true);
       downloadAnchorNode.click();
-      downloadAnchorNode.remove();
+      document.body.removeChild(downloadAnchorNode);
       // This is needed to make it work in Firefox
       setTimeout(() => this.setDownloading(false), 100);
     }

services/static-webserver/client/source/class/osparc/admin/AdminCenter.js

@@ -24,7 +24,7 @@ qx.Class.define("osparc.admin.AdminCenter", {
     const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
       paddingRight: 10
     });
-    this.addWidgetOnTopOfTheTabs(miniProfile);
+    this.addWidgetToTabs(miniProfile);
 
     this.__addPricingPlansPage();
     this.__addMaintenancePage();

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

@@ -963,8 +963,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     openData: function() {
-      const moreOpts = this.__openMoreOptions();
-      moreOpts.openData();
+      const resourceData = this.getResourceData();
+      osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"]);
     },
 
     openBilling: function() {

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

@@ -93,7 +93,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     __resourceData: null,
     __resourceModel: null,
     __infoPage: null,
-    __dataPage: null,
     __servicesUpdatePage: null,
     __permissionsPage: null,
     __tagsPage: null,
@@ -216,10 +215,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       this._openPage(this.__infoPage);
     },
 
-    openData: function() {
-      this._openPage(this.__dataPage);
-    },
-
     openUpdateServices: function() {
       this._openPage(this.__servicesUpdatePage);
     },
@@ -306,7 +301,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         this.__getBillingPage,
         this.__getServicesUpdatePage,
         this.__getServicesBootOptionsPage,
-        this.__getDataPage,
         this.__getCommentsPage,
         this.__getPermissionsPage,
         this.__getSaveAsTemplatePage,
@@ -323,6 +317,28 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         }
       });
 
+      const resourceData = this.__resourceData;
+      if (!osparc.utils.Resources.isService(resourceData)) {
+        const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(" Files...");
+        const iconSrc = "@FontAwesome5Solid/file/22";
+        const dataAccess = new qx.ui.basic.Atom().set({
+          label: title,
+          icon: iconSrc,
+          font: "text-14",
+          padding: 8,
+          paddingLeft: 12,
+          gap: 14,
+          cursor: "pointer",
+        });
+        dataAccess.addListener("tap", () => osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"]));
+        this.addWidgetToTabs(dataAccess);
+
+        if (resourceData["resourceType"] === "study") {
+          const canShowData = osparc.study.Utils.canShowStudyData(resourceData);
+          dataAccess.setEnabled(canShowData);
+        }
+      }
+
       if (selectedTabId) {
         const pageFound = tabsView.getChildren().find(page => page.tabId === selectedTabId);
         if (pageFound) {
@@ -486,33 +502,6 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       return page;
     },
 
-    __getDataPage: function() {
-      const resourceData = this.__resourceData;
-      if (osparc.utils.Resources.isService(resourceData)) {
-        return null;
-      }
-
-      const id = "Data";
-      const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(" Files");
-      const iconSrc = "@FontAwesome5Solid/file/22";
-      const page = this.__dataPage = new osparc.dashboard.resources.pages.BasePage(title, iconSrc, id);
-      this.__addOpenButton(page);
-
-      if (this.__resourceData["resourceType"] === "study") {
-        const studyData = this.__resourceData;
-        const canBeOpened = osparc.study.Utils.canShowStudyData(studyData);
-        page.setEnabled(canBeOpened);
-      }
-
-      const lazyLoadContent = () => {
-        const studyDataManager = new osparc.widget.NodeDataManager(resourceData["uuid"]);
-        page.addToContent(studyDataManager);
-      }
-      page.addListenerOnce("appear", lazyLoadContent, this);
-
-      return page;
-    },
-
     __getPermissionsPage: function() {
       const id = "Permissions";
       const title = this.tr("Sharing");

services/static-webserver/client/source/class/osparc/desktop/StudyEditor.js

@@ -722,7 +722,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
             this.__workbenchView.showPipeline();
           } else {
             const currentNodeId = this.getStudy().getUi().getCurrentNodeId();
-            if (currentNodeId) {
+            if (currentNodeId && this.getStudy().getWorkbench().getNode(currentNodeId)) {
               const node = this.getStudy().getWorkbench().getNode(currentNodeId);
               if (node && node.isDynamic()) {
                 this.__workbenchView.fullscreenNode(currentNodeId);

services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js

@@ -54,11 +54,8 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
       });
     },
 
-    openNodeDataManager: function(node) {
-      const nodeDataManager = new osparc.widget.NodeDataManager(null, node.getNodeId());
-      const win = osparc.ui.window.Window.popUpInWindow(nodeDataManager, node.getLabel(), 900, 600).set({
-        appearance: "service-window"
-      });
+    openStudyDataManager: function(node) {
+      const win = osparc.widget.StudyDataManager.popUpInWindow(null, node.getNodeId(), node.getLabel());
       const closeBtn = win.getChildControl("close-button");
       osparc.utils.Utils.setIdToWidget(closeBtn, "nodeDataManagerCloseBtn");
     }
@@ -1049,7 +1046,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
         allowGrowY: false
       });
       osparc.utils.Utils.setIdToWidget(nodeFilesBtn, "nodeFilesBtn");
-      nodeFilesBtn.addListener("execute", () => this.self().openNodeDataManager(node));
+      nodeFilesBtn.addListener("execute", () => this.self().openStudyDataManager(node));
       outputsBox.add(nodeFilesBtn);
 
       const outputs = new osparc.desktop.PanelView(this.tr("Outputs"), outputsBox);

services/static-webserver/client/source/class/osparc/desktop/account/MyAccount.js

@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.account.MyAccount", {
     const miniProfile = osparc.desktop.account.MyAccount.createMiniProfileView().set({
       paddingRight: 10
     });
-    this.addWidgetOnTopOfTheTabs(miniProfile);
+    this.addWidgetToTabs(miniProfile);
 
     this.__profilePage = this.__addProfilePage();
 

services/static-webserver/client/source/class/osparc/desktop/credits/BillingCenter.js

@@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.credits.BillingCenter", {
     const miniWallet = this.self().createMiniWalletView().set({
       paddingRight: 10
     });
-    this.addWidgetOnTopOfTheTabs(miniWallet);
+    this.addWidgetToTabs(miniWallet);
 
     this.__walletsPage = this.__addWalletsPage();
     this.__paymentMethodsPage = this.__addPaymentMethodsPage();

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

@@ -108,23 +108,11 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
 
     setItemSelected: function(selectedItem) {
       if (selectedItem) {
+        this.__selection = [selectedItem];
         const isFile = osparc.file.FilesTree.isFile(selectedItem);
         this.getChildControl("download-button").setEnabled(isFile);
-        this.getChildControl("delete-button").setEnabled(isFile);
-        const selectedLabel = this.getChildControl("selected-label");
-        if (isFile) {
-          this.__selection = [selectedItem];
-          selectedLabel.set({
-            value: selectedItem.getLabel(),
-            toolTipText: selectedItem.getFileId()
-          });
-        } else {
-          this.__selection = [];
-          selectedLabel.set({
-            value: "",
-            toolTipText: ""
-          });
-        }
+        this.getChildControl("delete-button").setEnabled(true); // folders can also be deleted
+        this.getChildControl("selected-label").setValue(selectedItem.getLabel());
       } else {
         this.resetSelection();
       }
@@ -138,7 +126,7 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
         } else {
           const selectedLabel = this.getChildControl("selected-label");
           selectedLabel.set({
-            value: multiSelectionData.length + " files"
+            value: multiSelectionData.length + " items"
           });
         }
       } else {
@@ -168,60 +156,86 @@ qx.Class.define("osparc.file.FileLabelWithActions", {
       }
     },
 
+    __retrieveURLAndDownloadFile: function(file) {
+      const fileId = file.getFileId();
+      const locationId = file.getLocation();
+      osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
+        .then(data => {
+          if (data) {
+            osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
+          }
+        });
+    },
+
     __deleteSelected: function() {
+      const toBeDeleted = [];
+      let isFolderSelected = false;
       if (this.isMultiSelect()) {
-        const requests = [];
         this.__selection.forEach(selection => {
-          if (selection && osparc.file.FilesTree.isFile(selection)) {
-            const request = this.__deleteFile(selection);
-            if (request) {
-              requests.push(request);
+          if (selection) {
+            toBeDeleted.push(selection);
+            if (osparc.file.FilesTree.isDir(selection)) {
+              isFolderSelected = true;
             }
           }
         });
-        Promise.all(requests)
-          .then(datas => {
-            if (datas.length) {
-              this.fireDataEvent("fileDeleted", datas[0]);
-              osparc.FlashMessenger.getInstance().logAs(this.tr("Files successfully deleted"), "INFO");
-            }
-          });
-        requests
       } else if (this.__selection.length) {
         const selection = this.__selection[0];
-        if (selection && osparc.file.FilesTree.isFile(selection)) {
-          const request = this.__deleteFile(selection);
-          if (request) {
-            request
-              .then(data => {
-                this.fireDataEvent("fileDeleted", data);
-                osparc.FlashMessenger.getInstance().logAs(this.tr("File successfully deleted"), "INFO");
-              });
+        if (selection) {
+          if (osparc.file.FilesTree.isDir(selection)) {
+            isFolderSelected = true;
           }
         }
       }
+
+      let msg = this.tr("This operation cannot be undone.");
+      msg += isFolderSelected ? ("<br>"+this.tr("All the content of the folders will be deleted.")) : "";
+      msg += "<br>" + this.tr("Do you want to proceed?");
+      const confirmationWin = new osparc.ui.window.Confirmation(msg).set({
+        caption: this.tr("Delete"),
+        confirmText: this.tr("Delete"),
+        confirmAction: "delete"
+      });
+      confirmationWin.center();
+      confirmationWin.open();
+      confirmationWin.addListener("close", () => {
+        if (confirmationWin.getConfirmed()) {
+          this.__doDeleteSelected(toBeDeleted);
+        }
+      }, this);
     },
 
-    __retrieveURLAndDownloadFile: function(file) {
-      const fileId = file.getFileId();
-      const locationId = file.getLocation();
-      osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId)
-        .then(data => {
-          if (data) {
-            osparc.DownloadLinkTracker.getInstance().downloadLinkUnattended(data.link, data.fileName);
+    __doDeleteSelected: function(toBeDeleted) {
+      const requests = [];
+      toBeDeleted.forEach(selection => {
+        if (selection) {
+          let request = null;
+          if (osparc.file.FilesTree.isFile(selection)) {
+            request = this.__deleteItem(selection.getFileId(), selection.getLocation());
+          } else {
+            request = this.__deleteItem(selection.getPath(), selection.getLocation());
+          }
+          if (request) {
+            requests.push(request);
+          }
+        }
+      });
+      Promise.all(requests)
+        .then(datas => {
+          if (datas.length) {
+            this.fireDataEvent("fileDeleted", datas[0]);
+            osparc.FlashMessenger.getInstance().logAs(this.tr("Items successfully deleted"), "INFO");
           }
         });
     },
 
-    __deleteFile: function(file) {
-      const fileId = file.getFileId();
-      const locationId = file.getLocation();
+    __deleteItem: function(itemId, locationId) {
       if (locationId !== 0 && locationId !== "0") {
-        osparc.FlashMessenger.getInstance().logAs(this.tr("Only files in simcore.s3 can be deleted"));
+        osparc.FlashMessenger.getInstance().logAs(this.tr("Only items in simcore.s3 can be deleted"));
         return null;
       }
       const dataStore = osparc.store.Data.getInstance();
-      return dataStore.deleteFile(locationId, fileId);
+      return dataStore.deleteFile(locationId, itemId);
     },
   }
 });

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

@@ -79,7 +79,7 @@ qx.Class.define("osparc.file.FileTreeItem", {
     itemId: {
       check: "String",
       event: "changeItemId",
-      apply: "_applyItemId",
+      apply: "__applyItemId",
       nullable: true
     },
 
@@ -144,7 +144,6 @@ qx.Class.define("osparc.file.FileTreeItem", {
 
       // Add lastModified
       const lastModifiedWidget = new qx.ui.basic.Label().set({
-        width: 140,
         maxWidth: 140,
         textAlign: "right"
       });
@@ -162,7 +161,6 @@ qx.Class.define("osparc.file.FileTreeItem", {
 
       // Add size
       const sizeWidget = new qx.ui.basic.Label().set({
-        width: 70,
         maxWidth: 70,
         textAlign: "right"
       });
@@ -175,39 +173,13 @@ qx.Class.define("osparc.file.FileTreeItem", {
         }
       });
       this.addWidget(sizeWidget);
-
-
-      const permissions = osparc.data.Permissions.getInstance();
-      // Add Path
-      const pathWidget = new qx.ui.basic.Label().set({
-        width: 300,
-        maxWidth: 300,
-        textAlign: "right"
-      });
-      this.bind("path", pathWidget, "value");
-      this.addWidget(pathWidget);
-      permissions.bind("role", pathWidget, "visibility", {
-        converter: () => permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded"
-      });
-
-      // Add NodeId
-      const fileIdWidget = new qx.ui.basic.Label().set({
-        width: 300,
-        maxWidth: 300,
-        textAlign: "right"
-      });
-      this.bind("fileId", fileIdWidget, "value");
-      this.addWidget(fileIdWidget);
-      permissions.bind("role", fileIdWidget, "visibility", {
-        converter: () => permissions.canDo("study.nodestree.uuid.read") ? "visible" : "excluded"
-      });
     },
 
-    // override
-    _applyItemId: function(value, old) {
+    __applyItemId: function(value, old) {
       osparc.utils.Utils.setIdToWidget(this, "fileTreeItem_" + value);
     },
 
+    // override
     _applyIcon: function(value, old) {
       this.base(arguments, value, old);
       const icon = this.getChildControl("icon", true);