🎨 [Frontend] Hypertools in menu (ITISFoundation#7570)

Author: odeimaiz

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

@@ -161,6 +161,7 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
     __addItems: function() {
       this.__addUIConfigItems();
       if (osparc.store.StaticInfo.getInstance().isDevFeaturesEnabled()) {
+        this.__addHypertools();
         this.__addOtherTabsAccess();
       }
       this.getChildControl("new-folder");
@@ -187,6 +188,31 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       }
     },
 
+    __addHypertools: function() {
+      const hypertools = osparc.store.Templates.getInstance().getTemplatesByType(osparc.data.model.StudyUI.HYPERTOOL_TYPE);
+      if (hypertools.length) {
+        const hypertoolsMenuButton = this.self().createMenuButton("@FontAwesome5Solid/star/16", this.tr("Hypertools"));
+        this.addAt(hypertoolsMenuButton, this.__itemIdx);
+        this.__itemIdx++;
+
+        const hypertoolsMenu = new qx.ui.menu.Menu().set({
+          appearance: "menu-wider",
+        });
+        hypertoolsMenuButton.setMenu(hypertoolsMenu);
+
+        hypertools.forEach(templateData => {
+          const hypertoolButton = this.self().createMenuButton(templateData["icon"], templateData["name"]);
+          hypertoolButton.addListener("tap", () => {
+            this.fireDataEvent("newStudyFromTemplateClicked", {
+              templateData,
+              newStudyLabel: templateData["name"],
+            });
+          });
+          hypertoolsMenu.add(hypertoolButton);
+        });
+      }
+    },
+
     __addOtherTabsAccess: function() {
       const moreMenuButton = this.self().createMenuButton("@FontAwesome5Solid/star/16", this.tr("More"));
       this.addAt(moreMenuButton, this.__itemIdx);
@@ -195,30 +221,21 @@ qx.Class.define("osparc.dashboard.NewPlusMenu", {
       const moreMenu = new qx.ui.menu.Menu().set({
         appearance: "menu-wider",
       });
+      moreMenuButton.setMenu(moreMenu);
 
       const permissions = osparc.data.Permissions.getInstance();
       if (permissions.canDo("dashboard.templates.read")) {
         const templatesButton = this.self().createMenuButton("@FontAwesome5Solid/copy/16", this.tr("Tutorials..."));
         templatesButton.addListener("execute", () => this.fireDataEvent("changeTab", "templatesTab"), this);
         moreMenu.add(templatesButton);
-
-        const hypertoolsButton = this.self().createMenuButton("@FontAwesome5Solid/copy/16", this.tr("Hypertools..."));
-        hypertoolsButton.addListener("execute", () => this.fireDataEvent("changeTab", "hypertoolsTab"), this);
-        const hypertools = osparc.store.Templates.getInstance().getTemplatesByType(osparc.data.model.StudyUI.HYPERTOOL_TYPE);
-        if (hypertools.length) {
-          moreMenu.add(hypertoolsButton);
-        }
       }
 
       if (permissions.canDo("dashboard.services.read")) {
         const servicesButton = this.self().createMenuButton("@FontAwesome5Solid/cog/16", this.tr("Services..."));
         servicesButton.addListener("execute", () => this.fireDataEvent("changeTab", "servicesTab"), this);
         moreMenu.add(servicesButton);
       }
-
       moreMenuButton.setVisibility(moreMenu.getChildren().length ? "visible" : "excluded");
-
-      moreMenuButton.setMenu(moreMenu);
     },
 
     __getLastIdxFromCategory: function(categoryId) {

services/static-webserver/client/source/resource/osparc/ui_config.json

@@ -116,7 +116,7 @@
         "newStudyLabel": "Segmentation"
       }, {
         "resourceType": "study",
-        "title": "Empty Pipeline",
+        "title": "Pipeline",
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]
@@ -142,7 +142,7 @@
         "newStudyLabel": "Segmentation"
       }, {
         "resourceType": "study",
-        "title": "Empty Pipeline",
+        "title": "Pipeline",
         "newStudyLabel": "New Pipeline",
         "idToWidget": "emptyStudyBtn"
       }]