🎨 [Frontend] Card Menu: Template menu on template, tutorial and hypertool cards

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

@@ -165,6 +165,16 @@ qx.Class.define("osparc.dashboard.AppBrowser", {
     },
 
     _populateCardMenu: function(card) {
+      const studyData = card.getResourceData();
+      if (studyData["resourceType"] === "hypertool") {
+        // The App Browser can also list templates (hypertools)
+        this._populateTemplateCardMenu(card);
+      } else {
+        this._populateServiceCardMenu(card);
+      }
+    },
+
+    _populateServiceCardMenu: function(card) {
       const menu = card.getMenu();
       const appData = card.getResourceData();
 

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

@@ -40,6 +40,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
   events: {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
+    "updateTutorial": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -325,8 +326,9 @@ qx.Class.define("osparc.dashboard.CardBase", {
       check: [
         "study",
         "template",
-        "service",
+        "tutorial",
         "hypertool",
+        "service",
       ],
       init: true,
       nullable: true,
@@ -519,6 +521,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       switch (resourceData["resourceType"]) {
         case "study":
         case "template":
+        case "tutorial":
         case "hypertool":
           uuid = resourceData.uuid ? resourceData.uuid : null;
           owner = resourceData.prjOwner ? resourceData.prjOwner : "";
@@ -552,7 +555,12 @@ qx.Class.define("osparc.dashboard.CardBase", {
         workbench
       });
 
-      if (["study", "template", "hypertool"].includes(resourceData["resourceType"])) {
+      if ([
+        "study",
+        "template",
+        "tutorial",
+        "hypertool"
+      ].includes(resourceData["resourceType"])) {
         osparc.store.Services.getStudyServices(resourceData.uuid)
           .then(resp => {
             const services = resp["services"];
@@ -1002,6 +1010,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
       [
         "updateStudy",
         "updateTemplate",
+        "updateTutorial",
         "updateService",
         "updateHypertool",
       ].forEach(ev => {
@@ -1055,6 +1064,8 @@ qx.Class.define("osparc.dashboard.CardBase", {
         toolTipText += osparc.product.Utils.getStudyAlias();
       } else if (this.isResourceType("template")) {
         toolTipText += osparc.product.Utils.getTemplateAlias();
+      } else if (this.isResourceType("tutorial")) {
+        toolTipText += osparc.product.Utils.getTutorialAlias();
       } else if (this.isResourceType("hypertool")) {
         toolTipText += osparc.product.Utils.getAppAlias();
       }

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

@@ -185,7 +185,12 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
     // overridden
     _applyLastChangeDate: function(value, old) {
       if (value) {
-        if (["study", "template", "hypertool"].includes(this.getResourceType())) {
+        if ([
+          "study",
+          "template",
+          "tutorial",
+          "hypertool",
+        ].includes(this.getResourceType())) {
           const dateBy = this.getChildControl("date-by");
           dateBy.set({
             date: value,

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

@@ -186,7 +186,12 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
     // overridden
     _applyLastChangeDate: function(value, old) {
       if (value) {
-        if (["study", "template", "hypertool"].includes(this.getResourceType())) {
+        if ([
+          "study",
+          "template",
+          "tutorial",
+          "hypertool",
+        ].includes(this.getResourceType())) {
           const dateBy = this.getChildControl("date-by");
           dateBy.set({
             date: value,

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

@@ -287,6 +287,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
       resourcesContainer.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourcesContainer.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
+      resourcesContainer.addListener("updateTutorial", e => this._updateTutorialData(e.getData()));
       resourcesContainer.addListener("updateService", e => this._updateServiceData(e.getData()));
       resourcesContainer.addListener("updateHypertool", e => this._updateHypertoolData(e.getData()));
       resourcesContainer.addListener("publishTemplate", e => this.fireDataEvent("publishTemplate", e.getData()));
@@ -579,6 +580,111 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       throw new Error("Abstract method called!");
     },
 
+    _populateTemplateCardMenu: function(card) {
+      const menu = card.getMenu();
+      const templateData = card.getResourceData();
+
+      const editButton = this.__getEditTemplateMenuButton(templateData);
+      if (editButton) {
+        menu.add(editButton);
+        menu.addSeparator();
+      }
+
+      const openButton = this._getOpenMenuButton(templateData);
+      if (openButton) {
+        menu.add(openButton);
+      }
+
+      const shareButton = this._getShareMenuButton(card);
+      if (shareButton) {
+        menu.add(shareButton);
+      }
+
+      const tagsButton = this._getTagsMenuButton(card);
+      if (tagsButton) {
+        menu.add(tagsButton);
+      }
+
+      const deleteButton = this.__getDeleteTemplateMenuButton(templateData);
+      if (deleteButton && editButton) {
+        menu.addSeparator();
+        menu.add(deleteButton);
+      }
+    },
+
+    __getEditTemplateMenuButton: function(templateData) {
+      const isCurrentUserOwner = osparc.data.model.Study.canIWrite(templateData["accessRights"]);
+      if (!isCurrentUserOwner) {
+        return null;
+      }
+
+      const editButton = new qx.ui.menu.Button(this.tr("Open"));
+      editButton.addListener("execute", () => {
+        const isStudyCreation = false;
+        this._startStudyById(templateData["uuid"], null, null, isStudyCreation);
+      }, this);
+      return editButton;
+    },
+
+    __getDeleteTemplateMenuButton: function(templateData) {
+      const isCurrentUserOwner = osparc.data.model.Study.canIDelete(templateData["accessRights"]);
+      if (!isCurrentUserOwner) {
+        return null;
+      }
+
+      const deleteButton = new qx.ui.menu.Button(this.tr("Delete"), "@FontAwesome5Solid/trash/12");
+      deleteButton.set({
+        appearance: "menu-button"
+      });
+      deleteButton.addListener("execute", () => this._deleteTemplateRequested(templateData), this);
+      return deleteButton;
+    },
+
+    _deleteTemplateRequested: function(templateData) {
+      const rUSure = this.tr("Are you sure you want to delete ");
+      const msg = rUSure + "<b>" + templateData.name + "</b>?";
+      const win = new osparc.ui.window.Confirmation(msg).set({
+        caption: this.tr("Delete"),
+        confirmText: this.tr("Delete"),
+        confirmAction: "delete"
+      });
+      win.center();
+      win.open();
+      win.addListener("close", () => {
+        if (win.getConfirmed()) {
+          this.__doDeleteTemplate(templateData);
+        }
+      }, this);
+    },
+
+    __doDeleteTemplate: function(templateData) {
+      const myGid = osparc.auth.Data.getInstance().getGroupId();
+      const collabGids = Object.keys(templateData["accessRights"]);
+      const amICollaborator = collabGids.indexOf(myGid) > -1;
+
+      let operationPromise = null;
+      if (collabGids.length > 1 && amICollaborator) {
+        const arCopy = osparc.utils.Utils.deepCloneObject(templateData["accessRights"]);
+        // remove collaborator
+        delete arCopy[myGid];
+        operationPromise = osparc.store.Study.patchStudyData(templateData, "accessRights", arCopy);
+      } else {
+        // delete study
+        operationPromise = osparc.store.Store.getInstance().deleteStudy(templateData.uuid);
+      }
+      operationPromise
+        .then(() => this.__removeFromTemplateList(templateData.uuid))
+        .catch(err => osparc.FlashMessenger.logError(err));
+    },
+
+    __removeFromTemplateList: function(templateId) {
+      const idx = this._resourcesList.findIndex(study => study["uuid"] === templateId);
+      if (idx > -1) {
+        this._resourcesList.splice(idx, 1);
+      }
+      this._resourcesContainer.removeCard(templateId);
+    },
+
     _updateTemplateData: function(templateData) {
       const templatesList = this._resourcesList;
       const index = templatesList.findIndex(template => template["uuid"] === templateData["uuid"]);
@@ -588,6 +694,10 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       }
     },
 
+    updateTutorialData: function(tutorialData) {
+      throw new Error("Abstract method called!");
+    },
+
     _updateServiceData: function(serviceData) {
       throw new Error("Abstract method called!");
     },
@@ -811,6 +921,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
             break;
           }
           case "template":
+          case "tutorial":
           case "hypertool":
             this._createStudyFromTemplate(resourceData);
             break;
@@ -827,6 +938,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
       const win = osparc.dashboard.ResourceDetails.popUpInWindow(resourceDetails);
       resourceDetails.addListener("updateStudy", e => this._updateStudyData(e.getData()));
       resourceDetails.addListener("updateTemplate", e => this._updateTemplateData(e.getData()));
+      resourceDetails.addListener("updateTutorial", e => this._updateTutorialData(e.getData()));
       resourceDetails.addListener("updateService", e => this._updateServiceData(e.getData()));
       resourceDetails.addListener("updateHypertool", e => this._updateHypertoolData(e.getData()));
       resourceDetails.addListener("publishTemplate", e => {
@@ -839,15 +951,16 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {
         const isStudyCreation = false;
         this._startStudyById(studyId, openCB, null, isStudyCreation);
       });
-      resourceDetails.addListener("openTemplate", e => {
-        win.close();
-        const templateData = e.getData();
-        this._createStudyFromTemplate(templateData);
-      });
-      resourceDetails.addListener("openHypertool", e => {
-        win.close();
-        const templateData = e.getData();
-        this._createStudyFromTemplate(templateData);
+      [
+        "openTemplate",
+        "openTutorial",
+        "openHypertool",
+      ].forEach(eventName => {
+        resourceDetails.addListener(eventName, e => {
+          win.close();
+          const templateData = e.getData();
+          this._createStudyFromTemplate(templateData);
+        });
       });
       resourceDetails.addListener("openService", e => {
         win.close();

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

@@ -67,6 +67,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
   events: {
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
+    "updateTutorial": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -240,6 +241,7 @@ qx.Class.define("osparc.dashboard.ResourceContainerManager", {
       [
         "updateStudy",
         "updateTemplate",
+        "updateTutorial",
         "updateService",
         "updateHypertool",
         "publishTemplate",

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

@@ -27,6 +27,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     switch (resourceData["resourceType"]) {
       case "study":
       case "template":
+      case "tutorial":
       case "hypertool": {
         const params = {
           url: {
@@ -54,6 +55,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         switch (resourceData["resourceType"]) {
           case "study":
           case "template":
+          case "tutorial":
           case "hypertool":
             osparc.store.Services.getStudyServicesMetadata(latestResourceData)
               .finally(() => {
@@ -76,11 +78,14 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
 
   events: {
     "pagesAdded": "qx.event.type.Event",
+    "openStudy": "qx.event.type.Data",
     "openTemplate": "qx.event.type.Data",
+    "openTutorial": "qx.event.type.Data",
     "openHypertool": "qx.event.type.Data",
     "openService": "qx.event.type.Data",
     "updateStudy": "qx.event.type.Data",
     "updateTemplate": "qx.event.type.Data",
+    "updateTutorial": "qx.event.type.Data",
     "updateService": "qx.event.type.Data",
     "updateHypertool": "qx.event.type.Data",
     "publishTemplate": "qx.event.type.Data",
@@ -248,6 +253,9 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         case "template":
           this.fireDataEvent("openTemplate", this.__resourceData);
           break;
+        case "tutorial":
+          this.fireDataEvent("openTutorial", this.__resourceData);
+          break;
         case "hypertool":
           this.fireDataEvent("openHypertool", this.__resourceData);
           break;
@@ -384,6 +392,9 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         case "template":
           this.fireDataEvent("updateTemplate", updatedData);
           break;
+        case "tutorial":
+          this.fireDataEvent("updateTutorial", updatedData);
+          break;
         case "hypertool":
           this.fireDataEvent("updateHypertool", updatedData);
           break;
@@ -558,6 +569,8 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
             collaboratorsView.getChildControl("study-link").show();
           } else if (osparc.utils.Resources.isTemplate(resourceData)) {
             collaboratorsView.getChildControl("template-link").show();
+          } else if (osparc.utils.Resources.isTutorial(resourceData)) {
+            collaboratorsView.getChildControl("template-link").show();
           }
           collaboratorsView.addListener("updateAccessRights", e => {
             const updatedData = e.getData();
@@ -726,7 +739,12 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
         });
         page.addToContent(servicesBootOpts);
 
-        if (osparc.utils.Resources.isStudy(resourceData) || osparc.utils.Resources.isTemplate(resourceData)) {
+        if (
+          osparc.utils.Resources.isStudy(resourceData) ||
+          osparc.utils.Resources.isTemplate(resourceData) ||
+          osparc.utils.Resources.isTutorial(resourceData) ||
+          osparc.utils.Resources.isHypertool(resourceData)
+        ) {
           if (osparc.product.Utils.showDisableServiceAutoStart()) {
             const study = new osparc.data.model.Study(resourceData);
             const autoStartButton = osparc.info.StudyUtils.createDisableServiceAutoStart(study).set({
@@ -846,18 +864,18 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
     __getProjectFilesPopUp: function() {
       const resourceData = this.__resourceData;
       if (!osparc.utils.Resources.isService(resourceData)) {
-        const title = osparc.product.Utils.getStudyAlias({firstUpperCase: true}) + this.tr(" Files...");
+        const title = osparc.product.Utils.resourceTypeToAlias(resourceData["resourceType"], {firstUpperCase: true}) + this.tr(" Files");
         const iconSrc = "@FontAwesome5Solid/file/22";
         const dataAccess = new qx.ui.basic.Atom().set({
-          label: title,
+          label: title + "...",
           icon: iconSrc,
           font: "text-14",
           padding: 8,
           paddingLeft: 12,
           gap: 14,
           cursor: "pointer",
         });
-        dataAccess.addListener("tap", () => osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"]));
+        dataAccess.addListener("tap", () => osparc.widget.StudyDataManager.popUpInWindow(resourceData["uuid"], null, title));
         this.addWidgetToTabs(dataAccess);
 
         if (resourceData["resourceType"] === "study") {