🐛🎨 [Frontend] add border to Disk Indicator (#6022)

Author: odeimaiz

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

@@ -21,6 +21,8 @@ qx.Class.define("osparc.desktop.credits.CreditsIndicatorButton", {
   construct: function() {
     this.base(arguments);
 
+    osparc.utils.Utils.setIdToWidget(this, "creditsIndicatorButton");
+
     this.set({
       cursor: "pointer",
       padding: [3, 8]

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

@@ -57,6 +57,7 @@ qx.Class.define("osparc.desktop.credits.CreditsNavBarContainer", {
       osparc.desktop.credits.BillingCenterWindow.openWindow();
       this.exclude();
     });
+    osparc.utils.Utils.setIdToWidget(billingCenterButton, "billingCenterButton");
     layout.add(billingCenterButton);
 
     this._add(layout);

services/static-webserver/client/source/class/osparc/navigation/NavigationBar.js

@@ -240,7 +240,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
         }
         case "credits-button":
           control = new osparc.desktop.credits.CreditsIndicatorButton();
-          osparc.utils.Utils.setIdToWidget(control, "creditsNavigationBtn");
           this.getChildControl("right-items").add(control);
           break;
         case "tasks-button":

services/static-webserver/client/source/class/osparc/theme/Decoration.js

@@ -35,7 +35,9 @@ qx.Theme.define("osparc.theme.Decoration", {
     "indicator-border": {
       include: "material-button",
       style: {
-        radius: 2
+        radius: 2,
+        width: 1,
+        color: "text"
       }
     },
 

services/static-webserver/client/source/class/osparc/viewer/NodeViewer.js

@@ -39,6 +39,13 @@ qx.Class.define("osparc.viewer.NodeViewer", {
           // create node
           const node = new osparc.data.model.Node(study, key, version, nodeId);
           this.setNode(node);
+
+          node.addListener("retrieveInputs", e => {
+            const data = e.getData();
+            const portKey = data["portKey"];
+            node.retrieveInputs(portKey);
+          }, this);
+
           node.initIframeHandler();
 
           const iframeHandler = node.getIframeHandler();

services/static-webserver/client/source/class/osparc/workbench/DiskUsageIndicator.js

@@ -157,15 +157,15 @@ qx.Class.define("osparc.workbench.DiskUsageIndicator", {
       }
 
       const usage = diskUsage["usage"]["/"]
-      const warningColor = this.__getIndicatorColor(usage.free);
+      const color1 = this.__getIndicatorColor(usage.free);
       const progress = `${usage["used_percent"]}%`;
       const labelDiskSize = osparc.utils.Utils.bytesToSize(usage.free);
-      const color1 = warningColor;
       const bgColor = qx.theme.manager.Color.getInstance().resolve("tab_navigation_bar_background_color");
       const color2 = qx.theme.manager.Color.getInstance().resolve("progressive-progressbar-background");
       indicator.getContentElement().setStyles({
         "background-color": bgColor,
         "background": `linear-gradient(90deg, ${color1} ${progress}, ${color2} ${progress})`,
+        "border-color": color1
       });
 
       const indicatorLabel = this.getChildControl("disk-indicator-label");

services/static-webserver/client/source/resource/osparc/tours/tis_tours.json

@@ -95,21 +95,21 @@
     "id": "credits",
     "name": "Buy Credits",
     "description": "Buy Credits for Personalization",
-    "context": "osparc-test-id=userMenuBtn",
+    "context": "osparc-test-id=creditsIndicatorButton",
     "steps": [{
       "title": "Credits",
       "text": "In order to run Personalized TI Plans, credits are required.<br>In the next Guided Tour you will learn how to purchase them."
     }, {
       "beforeClick": {
-        "selector": "osparc-test-id=userMenuBtn",
-        "action": "open"
+        "selector": "osparc-test-id=creditsIndicatorButton",
+        "event": "tap"
       },
-      "anchorEl": "osparc-test-id=userMenuBillingCenterBtn",
-      "text": "From the User Menu you can access the Billing Center.",
+      "anchorEl": "osparc-test-id=creditsNavBarContainer",
+      "text": "By clicking on the Credits Indicator, you will you see the available Credits. Tap the three dots to access the Billing Center.",
       "placement": "left"
     }, {
       "beforeClick": {
-        "selector": "osparc-test-id=userMenuBillingCenterBtn",
+        "selector": "osparc-test-id=billingCenterButton",
         "action": "execute"
       },
       "anchorEl": "osparc-test-id=walletsList",