Download button in File Picker (#2689)

Author: odeimaiz

services/web/client/source/class/osparc/desktop/WorkbenchView.js

@@ -248,7 +248,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
 
     __createTabPage: function(icon, tooltip, widget, backgroundColor = "background-main") {
       const tabPage = new qx.ui.tabview.Page().set({
-        layout: new qx.ui.layout.VBox(5),
+        layout: new qx.ui.layout.VBox(10),
         backgroundColor,
         icon: icon+"/24"
       });
@@ -894,7 +894,14 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
 
         const view = osparc.file.FilePicker.buildInfoView(filePicker);
         view.setEnabled(false);
+
         this.__infoPage.add(view);
+
+        const downloadFileBtn = new qx.ui.form.Button(this.tr("Download"), "@FontAwesome5Solid/cloud-download-alt/14").set({
+          allowGrowX: false
+        });
+        downloadFileBtn.addListener("execute", () => osparc.file.FilePicker.downloadOutput(filePicker));
+        this.__infoPage.add(downloadFileBtn);
       } else {
         // empty File Picker
         const tabViewLeftPanel = this.getChildControl("side-panel-left-tabs");

services/web/client/source/class/osparc/file/FilePicker.js

@@ -139,24 +139,36 @@ qx.Class.define("osparc.file.FilePicker", {
       }
     },
 
+    getOutputFileMetadata: function(node) {
+      return new Promise((resolve, reject) => {
+        const outValue = osparc.file.FilePicker.getOutput(node.getOutputs());
+        const params = {
+          url: {
+            locationId: outValue.store,
+            datasetId: outValue.dataset
+          }
+        };
+        osparc.data.Resources.fetch("storageFiles", "getByLocationAndDataset", params)
+          .then(files => {
+            const fileMetadata = files.find(file => file.file_id === outValue.path);
+            if (fileMetadata) {
+              resolve(fileMetadata);
+            } else {
+              reject();
+            }
+          })
+          .catch(() => reject());
+      });
+    },
+
     buildFileFromStoreInfoView: function(node, form) {
-      const outValue = osparc.file.FilePicker.getOutput(node.getOutputs());
-      const params = {
-        url: {
-          locationId: outValue.store,
-          datasetId: outValue.dataset
-        }
-      };
-      osparc.data.Resources.fetch("storageFiles", "getByLocationAndDataset", params)
-        .then(files => {
-          const fileMetadata = files.find(file => file.file_uuid === outValue.path);
-          if (fileMetadata) {
-            for (let [key, value] of Object.entries(fileMetadata)) {
-              const entry = new qx.ui.form.TextField();
-              form.add(entry, key, null, key);
-              if (value) {
-                entry.setValue(value.toString());
-              }
+      this.self().getOutputFileMetadata(node)
+        .then(fileMetadata => {
+          for (let [key, value] of Object.entries(fileMetadata)) {
+            const entry = new qx.ui.form.TextField();
+            form.add(entry, key, null, key);
+            if (value) {
+              entry.setValue(value.toString());
             }
           }
         });
@@ -191,6 +203,17 @@ qx.Class.define("osparc.file.FilePicker", {
       return new qx.ui.form.renderer.Single(form);
     },
 
+    downloadOutput: function(node) {
+      this.self().getOutputFileMetadata(node)
+        .then(fileMetadata => {
+          if ("location_id" in fileMetadata && "file_id" in fileMetadata) {
+            const locationId = fileMetadata["location_id"];
+            const fileId = fileMetadata["file_id"];
+            osparc.utils.Utils.retrieveURLAndDownload(locationId, fileId);
+          }
+        });
+    },
+
     serializeOutput: function(outputs) {
       let output = {};
       const outFileValue = osparc.file.FilePicker.getOutput(outputs);

tests/e2e/utils/utils.js

@@ -304,7 +304,9 @@ async function getStudyState(page, studyId) {
   const resp = await makeRequest(page, endPoint);
 
   if (resp !== null && "state" in resp && "value" in resp["state"]) {
-    return resp["state"]["value"];
+    const state = resp["state"]["value"];
+    console.log("-----> study state", state);
+    return state;
   }
   console.log("Unable to parse Pipeline Status:", JSON.stringify(resp));
   return null;