🎨 [Frontend] Guided Tours: update to latest frontend (ITISFoundation#7311)

Author: odeimaiz

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

@@ -70,6 +70,8 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       spacingX: 20,
     });
 
+    osparc.utils.Utils.setIdToWidget(this, "newPlusMenu");
+
     this.getContentElement().setStyles({
       "border-color": qx.theme.manager.Color.getInstance().resolve("strong-main"),
     });
@@ -207,17 +209,9 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
     __addIcon: function(menuButton, resourceInfo, resourceMetadata) {
       let source = null;
       if (resourceInfo && resourceInfo["icon"]) {
-        // first the one set in the ui_config
         source = resourceInfo["icon"];
-      } else if (resourceMetadata && resourceMetadata["icon"]) {
-        // second the icon from the resource
-        source = resourceMetadata["icon"];
-      } else if (resourceMetadata && resourceMetadata["thumbnail"]) {
-        // third the thumbnail from the resource
-        source = resourceMetadata["thumbnail"];
       } else {
-        // finally product icon
-        source = osparc.dashboard.CardBase.PRODUCT_ICON;
+        source = osparc.utils.Utils.getIconFromResource(resourceMetadata);
       }
 
       if (source) {

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

@@ -188,12 +188,13 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       });
       win.center();
       win.open();
-      win.addListenerOnce("close", () => {
+      win.addListener("changeConfirmed", e => {
         if (win.getConfirmed()) {
           this.openUpdateServices();
         } else {
           this.__openResource();
         }
+        win.close();
       });
     },
 

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

@@ -37,7 +37,6 @@ qx.Class.define("osparc.dashboard.ResourceUpgradeHelper", {
     this.bind("secondaryText", secondaryButton, "label");
     secondaryButton.addListener("execute", () => {
       this.setConfirmed(false);
-      this.close(1);
     }, this);
     this.addButton(secondaryButton);
 
@@ -50,7 +49,6 @@ qx.Class.define("osparc.dashboard.ResourceUpgradeHelper", {
     this.bind("primaryText", primaryButton, "label");
     primaryButton.addListener("execute", () => {
       this.setConfirmed(true);
-      this.close(1);
     }, this);
     const command = new qx.ui.command.Command("Enter");
     primaryButton.setCommand(command);
@@ -86,7 +84,8 @@ qx.Class.define("osparc.dashboard.ResourceUpgradeHelper", {
 
     confirmed: {
       check: "Boolean",
-      init: false
+      init: null,
+      event: "changeConfirmed"
     }
   },
 

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

@@ -33,7 +33,8 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
     const name = this.getChildControl("title");
     const serviceMetadata = osparc.service.Utils.getLatest(serviceKey);
     if (serviceMetadata) {
-      icon.setSource(serviceMetadata["thumbnail"] ? serviceMetadata["thumbnail"] : osparc.dashboard.CardBase.PRODUCT_THUMBNAIL);
+      const source = osparc.utils.Utils.getIconFromResource(serviceMetadata);
+      icon.setSource(source);
       name.setValue(serviceMetadata["name"]);
     } else {
       icon.setSource(osparc.dashboard.CardBase.PRODUCT_THUMBNAIL);

services/static-webserver/client/source/class/osparc/product/tours/Tours.js

@@ -26,12 +26,18 @@ qx.Class.define("osparc.product.tours.Tours", {
 
   statics: {
     TOURS: {
-      "s4llite": {
-        fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/s4llite_tours.json")
+      "osparc": {
+        fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/osparc_tours.json")
       },
       "s4l": {
         fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/s4l_tours.json")
       },
+      "s4lacad": {
+        fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/s4l_tours.json")
+      },
+      "s4llite": {
+        fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/s4llite_tours.json")
+      },
       "tis": {
         fetchTours: () => osparc.product.tours.Tours.fetchTours("/resource/osparc/tours/tis_tours.json")
       },

services/static-webserver/client/source/class/osparc/service/StatusUI.js

@@ -235,7 +235,7 @@ qx.Class.define("osparc.service.StatusUI", {
       const chip = new osparc.ui.basic.Chip().set({
         label: osparc.service.Utils.DEPRECATED_SERVICE_TEXT,
         icon: osparc.service.StatusUI.getIconSource("deprecated"),
-        textColor: "contrasted-text-dark",
+        textColor: "text-on-warning",
         backgroundColor: osparc.service.StatusUI.getColor("deprecated"),
         allowGrowX: false
       });
@@ -246,7 +246,7 @@ qx.Class.define("osparc.service.StatusUI", {
       const chip = new osparc.ui.basic.Chip().set({
         label: osparc.service.Utils.RETIRED_SERVICE_TEXT,
         icon: osparc.service.StatusUI.getIconSource("retired"),
-        textColor: "contrasted-text-dark",
+        textColor: "text-on-warning",
         backgroundColor: osparc.service.StatusUI.getColor("retired"),
         allowGrowX: false
       });

services/static-webserver/client/source/class/osparc/service/Utils.js

@@ -234,25 +234,25 @@ qx.Class.define("osparc.service.Utils", {
     },
 
     isDeprecated: function(metadata) {
-      if (metadata && "deprecated" in metadata && ![null, undefined].includes(metadata["deprecated"])) {
-        const deprecationTime = new Date(metadata["deprecated"]);
+      if (metadata && "retired" in metadata && ![null, undefined].includes(metadata["retired"])) {
+        const deprecationTime = new Date(metadata["retired"]);
         const now = new Date();
         return deprecationTime.getTime() > now.getTime();
       }
       return false;
     },
 
     isRetired: function(metadata) {
-      if (metadata && "deprecated" in metadata && ![null, undefined].includes(metadata["deprecated"])) {
-        const deprecationTime = new Date(metadata["deprecated"]);
+      if (metadata && "retired" in metadata && ![null, undefined].includes(metadata["retired"])) {
+        const deprecationTime = new Date(metadata["retired"]);
         const now = new Date();
         return deprecationTime.getTime() < now.getTime();
       }
       return false;
     },
 
     getDeprecationDateText: function(metadata) {
-      const deprecationTime = new Date(metadata["deprecated"]);
+      const deprecationTime = new Date(metadata["retired"]);
       return qx.locale.Manager.tr("It will be Retired: ") + osparc.utils.Utils.formatDate(deprecationTime);
     },
 

services/static-webserver/client/source/class/osparc/tours/Manager.js

@@ -66,7 +66,7 @@ qx.Class.define("osparc.tours.Manager", {
       switch (id) {
         case "intro-text":
           control = new qx.ui.basic.Label().set({
-            value: this.tr("This collection of Guided Tours will show you how to use the framework:"),
+            value: this.tr("This collection of Guided Tours will show you how to use the platform:"),
             rich: true,
             wrap: true,
             font: "text-14"

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -111,6 +111,18 @@ qx.Class.define("osparc.utils.Utils", {
       return newName;
     },
 
+    getIconFromResource: function(resourceMetadata) {
+      if (resourceMetadata) {
+        if (resourceMetadata["icon"]) {
+          return resourceMetadata["icon"];
+        }
+        if (resourceMetadata["thumbnail"]) {
+          return resourceMetadata["thumbnail"];
+        }
+      }
+      return osparc.dashboard.CardBase.PRODUCT_ICON;
+    },
+
     isEmail: function(value) {
       const reg = /^([A-Za-z0-9_\-.+])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,})$/;
       return reg.test(value);

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

@@ -0,0 +1,108 @@
+{
+  "studies": {
+    "id": "studies",
+    "name": "Studies",
+    "description": "All you need to know about Study handling",
+    "context": "osparc-test-id=newPlusBtn",
+    "steps": [{
+      "beforeClick": {
+        "selector": "osparc-test-id=newPlusBtn",
+        "action": "open"
+      },
+      "anchorEl": "osparc-test-id=newPlusMenu",
+      "title": "Create Studies",
+      "text": "Clicking on the (+) New button, allows you to create new Studies or new Folders to organize the studies",
+      "placement": "right"
+    }, {
+      "anchorEl": "osparc-test-id=searchBarFilter-textField-study",
+      "title": "Filter and Search",
+      "text": "This tool allows you to search Studies, Tutorials and Services.<br>You can search and filter by:<br>- Title, description, owner, id...<br>- Tags<br>- Shared with",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=studyItemMenuButton",
+        "action": "open"
+      },
+      "anchorEl": "osparc-test-id=studyItemMenuMenu",
+      "title": "More options button",
+      "text": "On the Study card, you can use the three dots button to access more information and operation on the Study.",
+      "placement": "left"
+    }, {
+      "anchorEl": "osparc-test-id=updateStudyBtn",
+      "title": "Update Services",
+      "text": "On the Study card, you can use the Update button to update the corresponding service to the latest version.",
+      "placement": "bottom"
+    }]
+  },
+  "dashboard": {
+    "id": "dashboard",
+    "name": "Dashboard",
+    "description": "Introduction to the Dashboard tabs",
+    "context": "osparc-test-id=dashboardTabs",
+    "steps": [{
+      "anchorEl": "osparc-test-id=dashboardTabs",
+      "title": "Dashboard Menu",
+      "text": "The menu tabs give you quick access to a set of core elements of the platform, namely Studies, Templates, Services and Data.",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=studiesTabBtn"
+      },
+      "anchorEl": "osparc-test-id=studiesTabBtn",
+      "text": "Any Study is accessible via the Dashboard. The Studies, which belong to or are shared with you, can be found here. You can also create Folders to help you organize the Studies",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=templatesTabBtn"
+      },
+      "anchorEl": "osparc-test-id=templatesTabBtn",
+      "text": "Clicking on a Template will create a copy of that Study, which will appear in your own Studies tab with the same name as the Template. Any changes you make to this copy will not affect the original Template.",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=servicesTabBtn"
+      },
+      "anchorEl": "osparc-test-id=servicesTabBtn",
+      "text": "Every Study in oSparc is composed of so-called Services.<br>These are building blocks for Studies and can provide data/files, visualize results (2D, 3D), implement code in Jupyter notebooks or perform computations to execute simulations within a Study.",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=dataTabBtn"
+      },
+      "anchorEl": "osparc-test-id=dataTabBtn",
+      "text": "All the Data of the Studies you have access to can bre explored here.",
+      "placement": "bottom"
+    }]
+  },
+  "navbar": {
+    "id": "navbar",
+    "name": "Navigation Bar",
+    "description": "Introduction to the Navigation Bar",
+    "context": "osparc-test-id=navigationBar",
+    "steps": [{
+      "beforeClick": {
+        "selector": "osparc-test-id=notificationsButton",
+        "event": "tap"
+      },
+      "anchorEl": "osparc-test-id=notificationsContainer",
+      "text": "By clicking on the Bell, you will you see notifications about which Studies, Templates and Organizations have been shared with you.",
+      "placement": "bottom"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=helpNavigationBtn",
+        "action": "open"
+      },
+      "anchorEl": "osparc-test-id=helpNavigationMenu",
+      "text": "Under the question mark, you will find Manuals, Support and ways to give us Feedback. It also provides quick access to other Guided Tours.",
+      "placement": "left"
+    }, {
+      "beforeClick": {
+        "selector": "osparc-test-id=userMenuBtn",
+        "action": "open"
+      },
+      "anchorEl": "osparc-test-id=userMenuMenu",
+      "text": "The User Menu gives you access to Your Account, Organizations and more.",
+      "placement": "left"
+    }]
+  }
+}