🎨 [Frontend] Enhanced Support Center (#8353)

Author: odeimaiz

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

@@ -73,7 +73,7 @@ qx.Class.define("osparc.NewRelease", {
       const releaseTag = osparc.utils.Utils.getReleaseTag();
       const releaseLink = osparc.utils.Utils.getReleaseLink();
       const linkLabel = new osparc.ui.basic.LinkLabel().set({
-        value: this.tr("What's new in ") + releaseTag,
+        value: this.tr("What's New in ") + releaseTag,
         url: releaseLink,
         font: "link-label-14"
       });

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

@@ -54,16 +54,12 @@ qx.Class.define("osparc.dashboard.Dashboard", {
     osparc.wrapper.JsonTreeViewer.getInstance().init();
     osparc.wrapper.JsonFormatter.getInstance().init();
     osparc.wrapper.DOMPurify.getInstance().init();
-    osparc.wrapper.RadialMenu.getInstance().init()
-      .then(loaded => {
-        if (loaded) {
-          // hack to trigger fonts loading
-          const menu = osparc.wrapper.RadialMenu.getInstance().createMenu();
-          menu.show();
-          menu.hide();
-        }
-      });
+    osparc.wrapper.RadialMenu.getInstance().init();
+
     this.__createMainViewLayout();
+
+
+    qx.event.message.Bus.getInstance().subscribe("showTab", msg => this.showTab(msg.getData()), this);
   },
 
   properties: {
@@ -99,6 +95,13 @@ qx.Class.define("osparc.dashboard.Dashboard", {
       return this.__appBrowser;
     },
 
+    showTab: function(tabId) {
+      const tabFound = this.getSelectables().find(s => s.id === tabId);
+      if (tabFound) {
+        this.setSelection([tabFound]);
+      }
+    },
+
     __createMainViewLayout: function() {
       const permissions = osparc.data.Permissions.getInstance();
       const tabIconSize = 20;

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

@@ -356,20 +356,24 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
             }
           }
 
-          // Show Quick Start if there are no studies in the root folder of the personal workspace
-          const quickStartInfo = osparc.product.quickStart.Utils.getQuickStart();
-          if (quickStartInfo) {
-            const dontShowQuickStart = osparc.utils.Utils.localCache.getLocalStorageItem(quickStartInfo.localStorageStr);
-            if (dontShowQuickStart === "true" || this.__dontQuickStart) {
-              return;
-            }
-            const nStudies = "_meta" in resp ? resp["_meta"]["total"] : 0;
-            if (
-              nStudies === 0 &&
-              this.getCurrentContext() === osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS &&
-              this.getCurrentWorkspaceId() === null &&
-              this.getCurrentFolderId() === null
-            ) {
+          // Check if this is the first time the user logged in
+          const nStudies = "_meta" in resp ? resp["_meta"]["total"] : 0;
+          if (
+            nStudies === 0 &&
+            this.getCurrentContext() === osparc.dashboard.StudyBrowser.CONTEXT.PROJECTS &&
+            this.getCurrentWorkspaceId() === null &&
+            this.getCurrentFolderId() === null
+          ) {
+            // It is!
+            // Open Support Center
+            osparc.support.SupportCenter.openWindow();
+            // and open the Introductory Quick Start if any
+            const quickStartInfo = osparc.product.quickStart.Utils.getQuickStart();
+            if (quickStartInfo) {
+              const dontShowQuickStart = osparc.utils.Utils.localCache.getLocalStorageItem(quickStartInfo.localStorageStr);
+              if (dontShowQuickStart === "true" || this.__dontQuickStart) {
+                return;
+              }
               const quickStartWindow = quickStartInfo.tutorial();
               quickStartWindow.center();
               quickStartWindow.open();

services/static-webserver/client/source/class/osparc/desktop/account/ProfilePage.js

@@ -58,7 +58,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
     },
 
     createSectionBox: function(title) {
-      const box = osparc.ui.window.TabbedView.createSectionBox(title).set({
+      const box = new osparc.widget.SectionBox(title).set({
         alignX: "left",
         maxWidth: 500
       });
@@ -337,9 +337,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
       const privacyModel = this.__userPrivacyModel = qx.data.marshal.Json.createModel(defaultModel, true);
 
       const box = this.self().createSectionBox(this.tr("Privacy"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Choose what others see."));
-      box.add(label);
+      box.addHelper(this.tr("Choose what others see."));
 
       const hideUserName = new qx.ui.form.CheckBox().set({
         value: defaultModel.hideUserName
@@ -453,9 +451,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
 
     __create2FASection: function() {
       const box = this.self().createSectionBox(this.tr("Two-Factor Authentication"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Set your preferred method to use for two-factor authentication when signing in:"));
-      box.add(label);
+      box.addHelper(this.tr("Set your preferred method to use for two-factor authentication when signing in:"));
 
       const form = new qx.ui.form.Form();
 
@@ -659,9 +655,7 @@ qx.Class.define("osparc.desktop.account.ProfilePage", {
     __createDeleteAccount: function() {
       // layout
       const box = this.self().createSectionBox(this.tr("Delete Account"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Request the deletion of your account."));
-      box.add(label);
+      box.addHelper(this.tr("Request the deletion of your account."));
 
       const deleteBtn = new qx.ui.form.Button(this.tr("Delete Account")).set({
         appearance: "danger-button",

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/ConfirmationsPage.js

@@ -39,7 +39,9 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
   members: {
     __createConfirmationsSettings: function() {
       // layout
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Ask for confirmation for the following actions:"));
+      const label = new qx.ui.basic.Label(this.tr("Ask for confirmation for the following actions:")).set({
+        font: "text-13",
+      });
       this._add(label);
 
       this._add(new qx.ui.core.Spacer(null, 10));
@@ -125,12 +127,8 @@ qx.Class.define("osparc.desktop.preferences.pages.ConfirmationsPage", {
 
     __createExperimentalSettings: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox("Experimental preferences");
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(
-        "This is a list of experimental preferences"
-      ));
-      box.add(label);
+      const box = new osparc.widget.SectionBox("Experimental preferences");
+      box.addHelper(this.tr("This is a list of experimental preferences"));
 
       const preferencesSettings = osparc.Preferences.getInstance();
 

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/GeneralPage.js

@@ -46,7 +46,7 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
 
   members: {
     __addCreditsIndicatorSettings: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Credits Indicator"));
+      const box = new osparc.widget.SectionBox(this.tr("Credits Indicator"));
 
       const form = new qx.ui.form.Form();
 
@@ -93,10 +93,9 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addInactivitySetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Automatic Shutdown of Idle Instances"));
+      const box = new osparc.widget.SectionBox(this.tr("Automatic Shutdown of Idle Instances"));
 
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Enter 0 to disable this function"), "text-13-italic");
-      box.add(label);
+      box.addHelper(this.tr("Enter 0 to disable this function"));
 
       const form = new qx.ui.form.Form();
       const inactivitySpinner = new qx.ui.form.Spinner().set({
@@ -118,7 +117,7 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addJobConcurrencySetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Job Concurrency"));
+      const box = new osparc.widget.SectionBox(this.tr("Job Concurrency"));
       const form = new qx.ui.form.Form();
       const jobConcurrencySpinner = new qx.ui.form.Spinner().set({
         minimum: 1,
@@ -136,9 +135,9 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addLowDiskSpaceSetting: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("Low Disk Space Threshold"));
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Set the warning Threshold for Low Disk Space availability"), "text-13-italic");
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("Low Disk Space Threshold"));
+      box.addHelper(this.tr("Set the warning Threshold for Low Disk Space availability"));
+
       const form = new qx.ui.form.Form();
       const diskUsageSpinner = new qx.ui.form.Spinner().set({
         minimum: 1,
@@ -157,10 +156,8 @@ qx.Class.define("osparc.desktop.preferences.pages.GeneralPage", {
     },
 
     __addS4LUserPrivacySettings: function() {
-      const box = osparc.ui.window.TabbedView.createSectionBox("Privacy Settings");
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Help us improve Sim4Life user experience"), "text-13-italic");
-      box.add(label);
+      const box = new osparc.widget.SectionBox("Privacy Settings");
+      box.addHelper(this.tr("Help us improve Sim4Life user experience"));
 
       const preferencesSettings = osparc.Preferences.getInstance();
 

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TagsPage.js

@@ -21,7 +21,9 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
     const msg = this.tr("\
     Tags help you organize the ") + studiesLabel + this.tr(" in the Dashboard by categorizing topics, making it easier to search and filter. \
     Once the tags are created, they can be assigned to the ") + studyLabel + this.tr("  via 'More options...' on the ") + studyLabel + this.tr(" cards.");
-    const intro = osparc.ui.window.TabbedView.createHelpLabel(msg);
+    const intro = new qx.ui.basic.Label(msg).set({
+      font: "text-13",
+    });
     this._add(intro);
 
     this.__renderLayout();

services/static-webserver/client/source/class/osparc/desktop/preferences/pages/TokensPage.js

@@ -43,12 +43,8 @@ qx.Class.define("osparc.desktop.preferences.pages.TokensPage", {
 
     __createAPIKeysSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("API Keys"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr(
-        "List API keys associated to your account."
-      ));
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("API Keys"));
+      box.addHelper(this.tr("List API keys associated to your account."));
 
       const apiKeysList = this.__apiKeysList = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
       box.add(apiKeysList);
@@ -173,10 +169,8 @@ qx.Class.define("osparc.desktop.preferences.pages.TokensPage", {
 
     __createTokensSection: function() {
       // layout
-      const box = osparc.ui.window.TabbedView.createSectionBox(this.tr("API Tokens for External Services"));
-
-      const label = osparc.ui.window.TabbedView.createHelpLabel(this.tr("Provide the API tokens needed to access external services."));
-      box.add(label);
+      const box = new osparc.widget.SectionBox(this.tr("API Tokens for External Services"));
+      box.addHelper(this.tr("Provide the API tokens needed to access external services."));
 
       const validTokensGB = this.__validTokensGB = osparc.ui.window.TabbedView.createSectionBox(this.tr("Current Tokens"));
       box.add(validTokensGB);

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

@@ -375,15 +375,6 @@ qx.Class.define("osparc.navigation.NavigationBar", {
       // add support conversations
       osparc.store.Support.addSupportConversationsToMenu(menu);
 
-      // quick starts and manuals
-      osparc.store.Support.addQuickStartToMenu(menu);
-      osparc.store.Support.addGuidedToursToMenu(menu);
-      osparc.store.Support.addManualsToMenu(menu);
-      menu.addSeparator();
-
-      // feedback
-      osparc.store.Support.addSupportButtonsToMenu(menu);
-      osparc.store.Support.addReleaseNotesToMenu(menu);
 
       return menuButton;
     },

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

@@ -213,14 +213,7 @@ qx.Class.define("osparc.navigation.UserMenu", {
       this.addSeparator();
 
       // quick starts and manuals
-      osparc.store.Support.addQuickStartToMenu(this);
-      osparc.store.Support.addGuidedToursToMenu(this);
-      osparc.store.Support.addManualsToMenu(this);
-      this.addSeparator();
-
-      // feedbacks
-      osparc.store.Support.addSupportButtonsToMenu(this);
-      osparc.store.Support.addReleaseNotesToMenu(this);
+      osparc.store.Support.addSupportConversationsToMenu(this);
       this.addSeparator();
 
       this.getChildControl("theme-switcher");