🎨 [Frontend] Improve blocked card's UX

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

@@ -41,8 +41,8 @@ qx.Class.define("osparc.MaintenanceTracker", {
 
   statics: {
     CHECK_INTERVAL: 15*60*1000, // Check every 15'
-    CLOSABLE_WARN_IN_ADVANCE: 24*60*60*1000, // Show Ribbon Closable Message 24h in advance
-    PERMANENT_WARN_IN_ADVANCE: 30*60*1000 // Show Ribbon Permanent Message 30' in advance
+    CLOSABLE_WARN_IN_ADVANCE: 48*60*60*1000, // Show Closable Ribbon Message 48h in advance
+    PERMANENT_WARN_IN_ADVANCE: 60*60*1000 // Show Permanent Ribbon Message 60' in advance
   },
 
   members: {

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

@@ -349,7 +349,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
     state: {
       check: "Object",
       nullable: false,
-      apply: "_applyState"
+      apply: "__applyState"
     },
 
     projectState: {
@@ -359,11 +359,11 @@ qx.Class.define("osparc.dashboard.CardBase", {
       apply: "_applyProjectState"
     },
 
-    locked: {
-      check: "Boolean",
+    blocked: {
+      check: [true, "UNKNOWN_SERVICES", "IN_USE", false],
       init: false,
       nullable: false,
-      apply: "_applyLocked"
+      apply: "__applyBlocked"
     },
 
     menu: {
@@ -515,7 +515,6 @@ qx.Class.define("osparc.dashboard.CardBase", {
         uiModeIcon.set({
           source,
           toolTipText,
-          alignY: "bottom"
         });
       }
     },
@@ -552,7 +551,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       // Block card
       const unaccessibleServices = osparc.study.Utils.getInaccessibleServices(workbench)
       if (unaccessibleServices.length) {
-        this.__enableCard(false);
+        this.setBlocked("UNKNOWN_SERVICES");
         const image = "@FontAwesome5Solid/ban/";
         let toolTipText = this.tr("Service info missing");
         unaccessibleServices.forEach(unSrv => {
@@ -600,16 +599,17 @@ qx.Class.define("osparc.dashboard.CardBase", {
       }
     },
 
-    _applyState: function(state) {
+    __applyState: function(state) {
       const locked = ("locked" in state) ? state["locked"]["value"] : false;
-      const projectState = ("state" in state) ? state["state"]["value"] : undefined;
+      this.setBlocked(locked ? "IN_USE" : false);
       if (locked) {
         this.__showBlockedCardFromStatus(state["locked"]);
       }
+
+      const projectState = ("state" in state) ? state["state"]["value"] : undefined;
       if (projectState) {
         this._applyProjectState(state["state"]);
       }
-      this.setLocked(locked);
     },
 
     _applyProjectState: function(projectStatus) {
@@ -722,46 +722,70 @@ qx.Class.define("osparc.dashboard.CardBase", {
       }
     },
 
-    _applyLocked: function(locked) {
-      this.__enableCard(!locked);
+    __applyBlocked: function(blocked) {
+      const enabled = !blocked;
+      if (enabled) {
+        this.resetToolTipText();
+      }
+
+      this._getChildren().forEach(item => {
+        if (item) {
+          item.setOpacity(enabled ? 1.0 : 0.7);
+        }
+      });
+
       this.getChildControl("lock-status").set({
         appearance: "form-button-outlined/disabled",
         textColor: "text-disabled",
         opacity: 1.0,
-        visibility: locked ? "visible" : "excluded"
+        visibility: enabled ? "excluded" : "visible"
       });
 
+      // let the "pointer" cursor for IN_USE or UNKNOWN_SERVICE
       this.set({
-        cursor: locked ? "not-allowed" : "pointer"
+        cursor: blocked === true ? "not-allowed" : "pointer"
       });
 
       [
         "tick-selected",
         "tick-unselected",
-        "menu-button"
+        // "menu-button"
       ].forEach(childName => {
         const child = this.getChildControl(childName);
-        child.set({
-          enabled: !locked
-        });
+        child.setEnabled(enabled);
       });
+
+      this.evaluateMenuButtons();
     },
 
-    __enableCard: function(enabled) {
-      if (enabled) {
-        this.resetToolTipText();
-      }
+    evaluateMenuButtons: function() {
+      if (this.getMenu()) {
+        const menuButtons = this.getMenu().getChildren();
+        const resourceData = this.getResourceData();
 
-      this._getChildren().forEach(item => {
-        if (item) {
-          item.setOpacity(enabled ? 1.0 : 0.7);
-        }
-      });
-
-      if (this.getMenu() && this.getMenu().getChildren()) {
-        const openButton = this.getMenu().getChildren().find(menuBtn => "openResource" in menuBtn);
+        const openButton = menuButtons.find(menuBtn => "openResourceButton" in menuBtn);
         if (openButton) {
-          openButton.setEnabled(enabled);
+          openButton.setEnabled(osparc.study.Utils.canBeOpened(resourceData));
+        }
+        const duplicateButton = menuButtons.find(menuBtn => "duplicateButton" in menuBtn);
+        if (duplicateButton) {
+          duplicateButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
+        }
+        const exportCMISButton = menuButtons.find(menuBtn => "exportCMISButton" in menuBtn);
+        if (exportCMISButton) {
+          exportCMISButton.setEnabled(osparc.study.Utils.canBeExported(resourceData));
+        }
+        const studyDataButton = menuButtons.find(menuBtn => "studyDataButton" in menuBtn);
+        if (studyDataButton) {
+          studyDataButton.setEnabled(osparc.study.Utils.canShowStudyData(resourceData));
+        }
+        const moveToFolderButton = menuButtons.find(menuBtn => "moveToFolderButton" in menuBtn);
+        if (moveToFolderButton) {
+          moveToFolderButton.setEnabled(osparc.study.Utils.canMoveToFolder(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/GridButtonItem.js

@@ -187,7 +187,8 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     },
 
     __itemSelected: function() {
-      if (this.isLocked()) {
+      // It could be blocked by IN_USE or UNKNOWN_SERVICE
+      if (this.getBlocked() === true) {
         this.setValue(false);
         return;
       }
@@ -279,6 +280,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
         menu.setPosition("top-left");
         osparc.utils.Utils.prettifyMenu(menu);
         osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu");
+        this.evaluateMenuButtons();
       }
       menuButton.setVisibility(menu ? "visible" : "excluded");
     }

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

@@ -118,7 +118,7 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
       });
     },
 
-    isLocked: function() {
+    getBlocked: function() {
       return true;
     },
 

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

@@ -49,9 +49,9 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
       TITLE: 2,
       PROGRESS: 3,
       DESCRIPTION: 4,
-      UPDATES: 5,
-      UI_MODE: 6,
-      TAGS: 7,
+      TAGS: 5,
+      UPDATES: 6,
+      UI_MODE: 7,
       STATUS: 8,
       PERMISSION: 9,
       TSR: 10,

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

@@ -273,16 +273,20 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
     },
 
     __itemSelected: function() {
+      // It could be blocked by IN_USE or UNKNOWN_SERVICE
+      if (this.getBlocked() === true) {
+        this.setValue(false);
+        return;
+      }
+
       if (this.isResourceType("study") && this.isMultiSelectionMode()) {
         const selected = this.getValue();
 
-        if (this.isLocked() && selected) {
-          this.setValue(false);
-        }
-
         const tick = this.getChildControl("tick-selected");
+        tick.setVisibility(selected ? "visible" : "excluded");
+
         const untick = this.getChildControl("tick-unselected");
-        this.getChildControl("menu-selection-stack").setSelection([selected ? tick : untick]);
+        untick.setVisibility(selected ? "excluded" : "visible");
       } else {
         this.__showMenuOnly();
       }

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

@@ -104,7 +104,7 @@ qx.Class.define("osparc.dashboard.ListButtonPlaceholder", {
       });
     },
 
-    isLocked: function() {
+    getBlocked: function() {
       return true;
     },
 

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

@@ -462,7 +462,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
 
     _getOpenMenuButton: function(resourceData) {
       const openButton = new qx.ui.menu.Button(this.tr("Open"));
-      openButton.openResource = true;
+      openButton["openResourceButton"] = true;
       openButton.addListener("execute", () => {
         switch (resourceData["resourceType"]) {
           case "study": {