🐛🎨 [Frontend] Sim4Life.lite: Fix and add guided tours (#6541)

Author: odeimaiz

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

@@ -94,7 +94,7 @@ qx.Class.define("osparc.utils.Utils", {
     replaceTokens: function(str, key, value) {
       // `str` might be a a localized string, get the string first
       str = str.toString ? str.toString() : str;
-      const regex = new RegExp("${"+key+"}", "g");
+      const regex = new RegExp("\\${"+key+"\\}", "g");
       return str.replace(regex, value);
     },
 

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

@@ -21,7 +21,7 @@
         "selector": "osparc-test-id=templatesTabBtn"
       },
       "anchorEl": "osparc-test-id=templatesTabBtn",
-      "text": "Clicking on a Tutorial will create a copy of that Study, which will appear in your own Project ts tab with thee same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.",
+      "text": "Clicking on a Tutorial will create a copy of that Project, which will appear in your own Projects tab with the same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.",
       "placement": "bottom"
     }, {
       "beforeClick": {
@@ -30,13 +30,6 @@
       "anchorEl": "osparc-test-id=servicesTabBtn",
       "text": "Every Project in Sim4Life is composed of at lease one so-called Service.<br>Services 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 Project.",
       "placement": "bottom"
-    }, {
-      "beforeClick": {
-        "selector": "osparc-test-id=dataTabBtn"
-      },
-      "anchorEl": "osparc-test-id=dataTabBtn",
-      "text": "The Data tab allow you to browse the output files of all of your active pipelines in one place. This is most useful for downloading the data created on the online platform.",
-      "placement": "bottom"
     }]
   },
   "navbar": {
@@ -50,7 +43,7 @@
         "event": "tap"
       },
       "anchorEl": "osparc-test-id=notificationsContainer",
-      "text": "By clicking on the Bell, you will you see notifications about what Studies, Credits and Organizations.",
+      "text": "By clicking on the Bell, you will you see notifications about which Projects, Credits and Organizations have been shared with you.",
       "placement": "bottom"
     }, {
       "beforeClick": {

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

@@ -2,22 +2,88 @@
   "dashboard": {
     "id": "dashboard",
     "name": "Dashboard",
-    "description": "Introduction to Dashboard tabs",
+    "description": "Introduction to the Dashboard tabs",
+    "context": "osparc-test-id=dashboardTabs",
     "steps": [{
-      "anchorEl": "osparc-test-id=studiesTabBtn",
       "beforeClick": {
         "selector": "osparc-test-id=studiesTabBtn"
       },
+      "anchorEl": "osparc-test-id=studiesTabBtn",
       "title": "Projects",
-      "text": "Existing projects can be accessed and managed, and new projects can be created. Each project is represented by a card.",
+      "text": "Any Project is accessible via the Dashboard. The Projects, which belong to or are shared with you, can be found here.",
       "placement": "bottom"
     }, {
-      "anchorEl": "osparc-test-id=templatesTabBtn",
       "beforeClick": {
         "selector": "osparc-test-id=templatesTabBtn"
       },
+      "anchorEl": "osparc-test-id=templatesTabBtn",
       "title": "Tutorials",
-      "text": "A set of pre-built tutorial projects with results is available to all users. When a tutorial is selected, a copy is automatically created and added to the user’s Projects tab. This new copy is editable.",
+      "text": "Clicking on a Tutorial will create a copy of that Project, which will appear in your own Projects tab with the same name as the Tutorial. Any changes you make to this copy will not affect the original Tutorial.",
+      "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 Projects 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 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, Preferences, Organizations and more.",
+      "placement": "left"
+    }]
+  },
+  "projects": {
+    "id": "projects",
+    "name": "Projects",
+    "description": "All you need to know about Project handling",
+    "context": "osparc-test-id=studiesTabBtn",
+    "steps": [{
+      "beforeClick": {
+        "selector": "osparc-test-id=studiesTabBtn"
+      },
+      "anchorEl": "osparc-test-id=startS4LButton",
+      "title": "Start Sim4Life.lite",
+      "text": "Clicking on this (+) Start Sim4Life.lite button, allows you to create and open a new Sim4Life.lite project",
+      "placement": "right"
+    }, {
+      "anchorEl": "osparc-test-id=searchBarFilter-textField-study",
+      "title": "Filter and Search",
+      "text": "This tool allows you to filter Projects and Tutorials.<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 Project card, you can use the three dots button to access more information and operation on the Project.",
+      "placement": "left"
+    }, {
+      "anchorEl": "osparc-test-id=updateStudyBtn",
+      "title": "Update Services",
+      "text": "On the Project card, you can use the Update button to update the corresponding service to the latest version.",
       "placement": "bottom"
     }]
   }

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

@@ -10,7 +10,7 @@
         "event": "tap"
       },
       "anchorEl": "osparc-test-id=notificationsContainer",
-      "text": "By clicking on the Bell, you will you see notifications about what Studies, Credits and Organizations.",
+      "text": "By clicking on the Bell, you will you see notifications about which Studies and Organizations have been shared with you.",
       "placement": "bottom"
     }, {
       "beforeClick": {
@@ -26,7 +26,7 @@
         "action": "open"
       },
       "anchorEl": "osparc-test-id=userMenuMenu",
-      "text": "The User Menu gives you access to Your Account, Billing Center, Preferences, Organizations and more.",
+      "text": "The User Menu gives you access to Your Account, Preferences, Organizations and more.",
       "placement": "left"
     }]
   },

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

@@ -10,7 +10,7 @@
         "event": "tap"
       },
       "anchorEl": "osparc-test-id=notificationsContainer",
-      "text": "By clicking on the Bell, you will you see notifications about what Studies, Credits and Organizations.",
+      "text": "By clicking on the Bell, you will you see notifications about which Studies, Credits and Organizations have been shared with you.",
       "placement": "bottom"
     }, {
       "beforeClick": {