🎨🐛 [Frontend] Folders tree: improvements II (#6364)

On behalf of @odeimaiz

Author: odeimaiz

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

@@ -780,6 +780,10 @@ qx.Class.define("osparc.dashboard.CardBase", {
         if (studyDataButton) {
           studyDataButton.setEnabled(osparc.study.Utils.canShowStudyData(resourceData));
         }
+        const billingSettingsButton = menuButtons.find(menuBtn => "billingSettingsButton" in menuBtn);
+        if (billingSettingsButton) {
+          billingSettingsButton.setEnabled(osparc.study.Utils.canShowBillingOptions(resourceData));
+        }
         const moveToFolderButton = menuButtons.find(menuBtn => "moveToFolderButton" in menuBtn);
         if (moveToFolderButton) {
           moveToFolderButton.setEnabled(osparc.study.Utils.canMoveToFolder(resourceData));

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

@@ -38,7 +38,6 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
 
 
     const workspacesContainer = this.__workspacesContainer = new osparc.dashboard.ToggleButtonContainer();
-    this._add(workspacesContainer);
     workspacesContainer.setVisibility(osparc.utils.DisabledPlugins.isFoldersEnabled() ? "visible" : "excluded");
 
 

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

@@ -165,7 +165,7 @@ qx.Class.define("osparc.dashboard.ResourceFilter", {
       this.__tagButtons = [];
       layout.removeAll();
       osparc.store.Store.getInstance().getTags().forEach((tag, idx) => {
-        const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/20");
+        const button = new qx.ui.form.ToggleButton(tag.name, "@FontAwesome5Solid/tag/18");
         button.id = tag.id;
         button.set({
           appearance: "filter-toggle-button",

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

@@ -444,7 +444,10 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
         .then(() => {
           this.__reloadWorkspaces();
         })
-        .catch(err => console.error(err));
+        .catch(err => {
+          console.error(err);
+          osparc.FlashMessenger.logAs(err.message, "ERROR");
+        })
     },
     // /WORKSPACES
 
@@ -480,15 +483,16 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
           // If user can't write in workspace, do not show plus button
           return;
         }
-        const newFolderCard = new osparc.dashboard.FolderButtonNew();
-        newFolderCard.setCardKey("new-folder");
-        newFolderCard.subscribeToFilterGroup("searchBarFilter");
-        newFolderCard.addListener("createFolder", e => {
-          const data = e.getData();
-          this.__createFolder(data);
-        }, this);
-        this._resourcesContainer.addNewFolderCard(newFolderCard);
       }
+
+      const newFolderCard = new osparc.dashboard.FolderButtonNew();
+      newFolderCard.setCardKey("new-folder");
+      newFolderCard.subscribeToFilterGroup("searchBarFilter");
+      newFolderCard.addListener("createFolder", e => {
+        const data = e.getData();
+        this.__createFolder(data);
+      }, this);
+      this._resourcesContainer.addNewFolderCard(newFolderCard);
     },
 
     __createFolder: function(data) {
@@ -1328,6 +1332,7 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     __getBillingMenuButton: function(card) {
       const text = osparc.utils.Utils.capitalize(this.tr("Billing Settings..."));
       const studyBillingSettingsButton = new qx.ui.menu.Button(text);
+      studyBillingSettingsButton["billingSettingsButton"] = true;
       studyBillingSettingsButton.addListener("tap", () => card.openBilling(), this);
       return studyBillingSettingsButton;
     },

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

@@ -122,16 +122,6 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
           }));
           this._add(control);
           break;
-        case "share-icon": {
-          control = new qx.ui.basic.Image().set({
-            alignY: "middle",
-            allowGrowX: false,
-            allowShrinkX: false
-          });
-          const layout = this.getChildControl("share-layout");
-          layout.addAt(control, 0);
-          break;
-        }
         case "share-text": {
           control = new qx.ui.basic.Label().set({
             font: "text-14"
@@ -227,8 +217,24 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       this.__spacers.forEach(spacer => spacer.setVisibility(show ? "visible" : "excluded"));
     },
 
+    __getShareIcon: function() {
+      // reset previous
+      const layout = this.getChildControl("share-layout");
+      if (this.__shareIcon) {
+        layout.remove(this.__shareIcon);
+      }
+
+      const shareIcon = this.__shareIcon = new qx.ui.basic.Image().set({
+        alignY: "middle",
+        allowGrowX: false,
+        allowShrinkX: false
+      });
+      layout.addAt(shareIcon, 0);
+      return shareIcon;
+    },
+
     __applyAccessRights: function(accessRights) {
-      const shareIcon = this.getChildControl("share-icon");
+      const shareIcon = this.__getShareIcon();
       const shareText = this.getChildControl("share-text");
       if (accessRights && Object.keys(accessRights).length) {
         osparc.dashboard.CardBase.populateShareIcon(shareIcon, accessRights);
@@ -248,7 +254,7 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
       const roleText = this.getChildControl("role-text");
       const roleIcon = this.getChildControl("role-icon");
       if (value && Object.keys(value).length) {
-        editButton.show();
+        editButton.setVisibility(value["delete"] ? "visible" : "excluded");
         const menu = new qx.ui.menu.Menu().set({
           position: "bottom-right"
         });

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

@@ -36,7 +36,9 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
       decorator: "no-border",
       font: "text-14",
       hideRoot: true,
-      paddingLeft: -10,
+      // paddingLeft: -10,
+      contentPadding: 0,
+      padding: 0,
     });
 
     this.__addMyWorkspace(rootModel);
@@ -102,6 +104,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
     __initTree: function() {
       const that = this;
       this.setDelegate({
+        createItem: () => new osparc.dashboard.WorkspacesAndFoldersTreeItem(),
         bindItem: (c, item, id) => {
           c.bindDefaultProperties(item, id);
           c.bindProperty("", "open", {
@@ -115,12 +118,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTree", {
               return isOpen;
             },
           }, item, id);
-        },
-        configureItem: item => {
-          item.set({
-            indent: 12, // defaults to 19
-          });
-        },
+        }
       });
 
       this.setIconPath("icon");

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

@@ -0,0 +1,54 @@
+/* ************************************************************************
+
+   osparc - the simcore frontend
+
+   https://osparc.io
+
+   Copyright:
+     2024 IT'IS Foundation, https://itis.swiss
+
+   License:
+     MIT: https://opensource.org/licenses/MIT
+
+   Authors:
+     * Odei Maiz (odeimaiz)
+
+************************************************************************ */
+
+qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
+  extend: qx.ui.tree.VirtualTreeItem,
+
+  construct: function() {
+    this.base(arguments);
+
+    this.set({
+      indent: 12, // defaults to 19,
+    });
+
+    this.getContentElement().setStyles({
+      "border-radius": "8px"
+    });
+
+    this.setNotHoveredStyle();
+    this.__attachEventHandlers();
+  },
+
+  members: {
+    __attachEventHandlers: function() {
+      this.addListener("mouseover", () => {
+        this.setHoveredStyle();
+      });
+      this.addListener("mouseout", () => {
+        this.setNotHoveredStyle();
+      });
+    },
+
+    setHoveredStyle: function() {
+      osparc.utils.Utils.addBorder(this, 1, qx.theme.manager.Color.getInstance().resolve("text"));
+    },
+
+    setNotHoveredStyle: function() {
+      osparc.utils.Utils.hideBorder(this);
+    }
+  },
+});

services/static-webserver/client/source/class/osparc/editor/WorkspaceEditor.js

@@ -178,7 +178,10 @@ qx.Class.define("osparc.editor.WorkspaceEditor", {
       };
       osparc.store.Workspaces.getInstance().postWorkspace(newWorkspaceData)
         .then(newWorkspace => this.fireDataEvent("workspaceCreated", newWorkspace))
-        .catch(console.error)
+        .catch(err => {
+          console.error(err);
+          osparc.FlashMessenger.logAs(err.message, "ERROR");
+        })
         .finally(() => createButton.setFetching(false));
     },
 
@@ -191,7 +194,10 @@ qx.Class.define("osparc.editor.WorkspaceEditor", {
       };
       osparc.store.Workspaces.getInstance().putWorkspace(this.__workspaceId, updateData)
         .then(() => this.fireEvent("workspaceUpdated"))
-        .catch(console.error)
+        .catch(err => {
+          console.error(err);
+          osparc.FlashMessenger.logAs(err.message, "ERROR");
+        })
         .finally(() => editButton.setFetching(false));
     },