✨ [Frontend] Convert To Pipeline (#7522)

Author: odeimaiz

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

@@ -384,7 +384,12 @@ qx.Class.define("osparc.dashboard.CardBase", {
     },
 
     uiMode: {
-      check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
+      check: [
+        "workbench", // =auto, the frontend decides the icon and default view
+        "app", "guided", // "guided" is no longer used
+        "standalone",
+        "pipeline",
+      ],
       nullable: true,
       apply: "__applyUiMode"
     },

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

@@ -481,7 +481,7 @@ qx.Class.define("osparc.dashboard.ResourceDetails", {
       if (
         osparc.utils.Resources.isService(resourceData) ||
         !osparc.product.Utils.showStudyPreview() ||
-        !(osparc.study.Utils.getUiMode(resourceData) === "workbench")
+        ["app", "guided", "standalone"].includes(osparc.study.Utils.getUiMode(resourceData))
       ) {
         // there is no pipelining or don't show it
         return null;

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

@@ -1789,17 +1789,52 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
       convertToPipelineButton["convertToPipelineButton"] = true;
       const uiMode = osparc.study.Utils.getUiMode(studyData);
       convertToPipelineButton.setVisibility(uiMode === "standalone" ? "visible" : "excluded");
-      convertToPipelineButton.addListener("execute", () => {
-        this.__updateUIMode(studyData, "workbench")
-          .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while converting to pipeline")));
-      }, this);
+      convertToPipelineButton.addListener("execute", () => this.__convertToPipelineClicked(studyData), this);
       return convertToPipelineButton;
     },
 
+    __convertToPipelineClicked: function(studyData) {
+      let message = this.tr("Would you like to convert this project to a pipeline?");
+      message += "<br>" + this.tr("Alternatively, you can create a copy of the project and convert the copy instead.");
+      const confirmationWin = new osparc.ui.window.Confirmation();
+      confirmationWin.set({
+        caption: this.tr("Convert to Pipeline"),
+        confirmText: this.tr("Convert"),
+        confirmAction: "create",
+        message,
+      });
+      confirmationWin.getChildControl("cancel-button").exclude();
+      const copyOptionButton = new qx.ui.form.Button().set({
+        appearance: "form-button-text",
+        label: this.tr("Create a copy and convert it"),
+      });
+      confirmationWin.getChildControl("buttons-layout").addAt(copyOptionButton, 0);
+      confirmationWin.addListener("close", () => {
+        if (confirmationWin.getConfirmed()) {
+          this.__updateUIMode(studyData, "pipeline")
+            .then(() => osparc.FlashMessenger.logAs(this.tr("Project converted to pipeline"), "INFO"))
+            .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while converting to pipeline")));
+        }
+      });
+      copyOptionButton.addListener("execute", () => {
+        confirmationWin.close();
+        this.__duplicateStudy(studyData)
+          .then(task => {
+            task.addListener("resultReceived", e => {
+              const copiedStudy = e.getData();
+              this.__updateUIMode(copiedStudy, "pipeline")
+                .then(() => osparc.FlashMessenger.logAs(this.tr("Project's copy converted to pipeline"), "INFO"))
+                .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while converting the copy to pipeline")));
+            }, this);
+          });
+      }, this);
+      confirmationWin.open();
+    },
+
     __updateUIMode: function(studyData, uiMode) {
       const studyUI = osparc.utils.Utils.deepCloneObject(studyData["ui"]);
       studyUI["mode"] = uiMode;
-      return osparc.info.StudyUtils.patchStudyData(studyData, "ui", studyUI)
+      return osparc.store.Study.patchStudyData(studyData, "ui", studyUI)
         .then(() => this._updateStudyData(studyData))
     },
 
@@ -1889,21 +1924,11 @@ qx.Class.define("osparc.dashboard.StudyBrowser", {
     },
 
     __duplicateStudy: function(studyData) {
-      const text = this.tr("Duplicate process started and added to the background tasks");
-      osparc.FlashMessenger.logAs(text, "INFO");
-
-      const params = {
-        url: {
-          "studyId": studyData["uuid"]
-        }
-      };
-      const options = {
-        pollTask: true
-      };
-      const fetchPromise = osparc.data.Resources.fetch("studies", "duplicate", params, options);
-      const pollTasks = osparc.store.PollTasks.getInstance();
-      pollTasks.createPollingTask(fetchPromise)
-        .then(task => this.__taskDuplicateReceived(task, studyData["name"]))
+      osparc.study.Utils.duplicateStudy(studyData)
+        .then(task => {
+          this.__taskDuplicateReceived(task, studyData["name"]);
+          return task;
+        })
         .catch(err => osparc.FlashMessenger.logError(err, this.tr("Something went wrong while duplicating")));
     },
 

services/static-webserver/client/source/class/osparc/data/PollTask.js

@@ -102,9 +102,13 @@ qx.Class.define("osparc.data.PollTask", {
     },
 
     extractProgress: function(updateData) {
+      const toNumberWithMaxTwoDecimals = value => {
+        return Math.round(Number(value) * 100) / 100;
+      };
+
       if ("task_progress" in updateData) {
         const taskProgress = updateData["task_progress"];
-        const percent = taskProgress["percent"] ? parseFloat(taskProgress["percent"].toFixed(3)) : taskProgress["percent"];
+        const percent = taskProgress["percent"] ? toNumberWithMaxTwoDecimals(taskProgress["percent"]) : taskProgress["percent"];
         return percent;
       }
       return 0;

services/static-webserver/client/source/class/osparc/data/model/StudyUI.js

@@ -63,7 +63,12 @@ qx.Class.define("osparc.data.model.StudyUI", {
     },
 
     mode: {
-      check: ["workbench", "guided", "app", "standalone"], // "guided" is no longer used
+      check: [
+        "workbench", // =auto, the frontend decides the icon and default view
+        "app", "guided", // "guided" is no longer used
+        "standalone",
+        "pipeline",
+      ],
       init: "workbench",
       nullable: true,
       event: "changeMode",

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

@@ -72,7 +72,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
       const nodeId = e.getData();
       this.__hideNode(nodeId);
     }, this);
-    slideshowToolbar.addListener("slidesStop", () => this.getStudy().getUi().setMode("workbench"), this);
+    slideshowToolbar.addListener("slidesStop", () => this.getStudy().getUi().setMode("pipeline"), this);
     this._add(slideshowToolbar);
 
     const mainView = this.__mainView = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({

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

@@ -707,14 +707,19 @@ qx.Class.define("osparc.desktop.StudyEditor", {
           this.__viewsStack.setSelection([this.__slideshowView]);
           this.__slideshowView.startSlides();
           break;
-        case "standalone": {
+        case "standalone":
           this.__viewsStack.setSelection([this.__workbenchView]);
           this.__workbenchView.openFirstNode();
           break;
-        }
+        case "pipeline":
+          this.__viewsStack.setSelection([this.__workbenchView]);
+          this.__workbenchView.setMaximized(false);
+          this.__workbenchView.showPipeline();
+          break;
         case "workbench":
         default: {
           this.__viewsStack.setSelection([this.__workbenchView]);
+          // OM: Is this needed?
           if (oldUIMode === "standalone") {
             // in this transition, show workbenchUI
             this.__workbenchView.setMaximized(false);

services/static-webserver/client/source/class/osparc/jobs/JobsButton.js

@@ -72,7 +72,7 @@ qx.Class.define("osparc.jobs.JobsButton", {
     },
 
     __updateJobsButton: function() {
-      this._createChildControlImpl("icon");
+      this.getChildControl("icon");
       const number = this.getChildControl("number");
 
       const jobsStore = osparc.store.Jobs.getInstance();

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

@@ -80,18 +80,7 @@ qx.Class.define("osparc.navigation.StudyTitleWOptions", {
             label: this.tr("Convert to Pipeline"),
             icon: null,
           });
-          control.addListener("execute", () => {
-            this.getStudy().getUi().setMode("workbench");
-          });
-          break;
-        case "study-menu-convert-to-standalone":
-          control = new qx.ui.menu.Button().set({
-            label: this.tr("Convert to Standalone"),
-            icon: null,
-          });
-          control.addListener("execute", () => {
-            this.getStudy().getUi().setMode("standalone");
-          });
+          control.addListener("execute", () => this.__convertToPipelineClicked(), this);
           break;
         case "study-menu-restore":
           control = new qx.ui.menu.Button().set({
@@ -114,8 +103,9 @@ qx.Class.define("osparc.navigation.StudyTitleWOptions", {
           optionsMenu.setAppearance("menu-wider");
           optionsMenu.add(this.getChildControl("study-menu-info"));
           optionsMenu.add(this.getChildControl("study-menu-reload"));
-          optionsMenu.add(this.getChildControl("study-menu-convert-to-pipeline"));
-          optionsMenu.add(this.getChildControl("study-menu-convert-to-standalone"));
+          if (osparc.product.Utils.hasConvertToPipelineEnabled()) {
+            optionsMenu.add(this.getChildControl("study-menu-convert-to-pipeline"));
+          }
           optionsMenu.add(this.getChildControl("study-menu-restore"));
           optionsMenu.add(this.getChildControl("study-menu-open-logger"));
           control = new qx.ui.form.MenuButton().set({
@@ -161,22 +151,11 @@ qx.Class.define("osparc.navigation.StudyTitleWOptions", {
           converter: mode => mode === "standalone" ? "visible" : "excluded"
         });
 
-        const convertToPipelineButton = this.getChildControl("study-menu-convert-to-pipeline");
-        const convertToStandaloneButton = this.getChildControl("study-menu-convert-to-standalone");
         if (osparc.product.Utils.hasConvertToPipelineEnabled()) {
+          const convertToPipelineButton = this.getChildControl("study-menu-convert-to-pipeline");
           study.getUi().bind("mode", convertToPipelineButton, "visibility", {
             converter: mode => mode === "standalone" ? "visible" : "excluded"
           });
-
-          const evaluateConvertToStandaloneButton = () => {
-            // exclude until we have the export to standalone backend functionality
-            convertToStandaloneButton.exclude();
-          };
-          study.getWorkbench().addListener("pipelineChanged", () => evaluateConvertToStandaloneButton());
-          study.getUi().addListener("changeMode", () => evaluateConvertToStandaloneButton());
-        } else {
-          convertToPipelineButton.exclude();
-          convertToStandaloneButton.exclude();
         }
 
         const restoreButton = this.getChildControl("study-menu-restore");
@@ -191,6 +170,25 @@ qx.Class.define("osparc.navigation.StudyTitleWOptions", {
       } else {
         this.exclude();
       }
-    }
+    },
+
+    __convertToPipelineClicked: function() {
+      let message = this.tr("Would you like to convert this project to a pipeline?");
+      message += "<br>" + this.tr("If you want to create a copy of the project and convert the copy instead, please close the project first.");
+      const confirmationWin = new osparc.ui.window.Confirmation();
+      confirmationWin.set({
+        caption: this.tr("Convert to Pipeline"),
+        confirmText: this.tr("Convert"),
+        confirmAction: "create",
+        message,
+      });
+      confirmationWin.addListener("close", () => {
+        if (confirmationWin.getConfirmed()) {
+          this.getStudy().getUi().setMode("pipeline");
+          osparc.FlashMessenger.logAs(this.tr("Project converted to pipeline"), "INFO");
+        }
+      });
+      confirmationWin.open();
+    },
   }
 });

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

@@ -189,7 +189,7 @@ qx.Class.define("osparc.product.Utils", {
     },
 
     hasConvertToPipelineEnabled: function() {
-      return false;
+      return osparc.store.StaticInfo.getInstance().isDevFeaturesEnabled();
     },
 
     // oSPARC only