From d99672afee1022ad5facac87e1172aaeb771deea Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Wed, 3 Jul 2024 16:06:47 +0200
Subject: [PATCH 01/17] Add TypeScript support to Invocation Export related
 files

---
 .../Invocation/Export/ActionButton.vue        | 12 +--
 ....js => InvocationExportPluginCard.test.ts} | 23 +++---
 .../Export/InvocationExportPluginCard.vue     | 41 +++++++----
 ...gin.js => BioComputeObjectExportPlugin.ts} | 11 +--
 ...rtPlugin.js => DefaultFileExportPlugin.ts} |  5 +-
 ...ExportPlugin.js => ROCrateExportPlugin.ts} |  6 +-
 .../Export/Plugins/{index.js => index.ts}     |  0
 .../Workflow/Invocation/Export/model.js       | 73 -------------------
 .../Workflow/Invocation/Export/model.ts       | 36 +++++++++
 9 files changed, 96 insertions(+), 111 deletions(-)
 rename client/src/components/Workflow/Invocation/Export/{InvocationExportPluginCard.test.js => InvocationExportPluginCard.test.ts} (87%)
 rename client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/{BioComputeObjectExportPlugin.js => BioComputeObjectExportPlugin.ts} (84%)
 rename client/src/components/Workflow/Invocation/Export/Plugins/{DefaultFileExportPlugin.js => DefaultFileExportPlugin.ts} (79%)
 rename client/src/components/Workflow/Invocation/Export/Plugins/{ROCrateExportPlugin.js => ROCrateExportPlugin.ts} (87%)
 rename client/src/components/Workflow/Invocation/Export/Plugins/{index.js => index.ts} (100%)
 delete mode 100644 client/src/components/Workflow/Invocation/Export/model.js
 create mode 100644 client/src/components/Workflow/Invocation/Export/model.ts

diff --git a/client/src/components/Workflow/Invocation/Export/ActionButton.vue b/client/src/components/Workflow/Invocation/Export/ActionButton.vue
index b622320680b9..5b0604cfcbe6 100644
--- a/client/src/components/Workflow/Invocation/Export/ActionButton.vue
+++ b/client/src/components/Workflow/Invocation/Export/ActionButton.vue
@@ -1,14 +1,16 @@
-<script setup>
+<script setup lang="ts">
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { ref } from "vue";
 
 import { InvocationExportPluginAction } from "./model";
 
-const modal = ref(null);
+const modal = ref();
 
-const props = defineProps({
-    action: { type: InvocationExportPluginAction, required: true },
-});
+interface Props {
+    action: InvocationExportPluginAction;
+}
+
+const props = defineProps<Props>();
 </script>
 
 <template>
diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.js b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
similarity index 87%
rename from client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.js
rename to client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
index bffb2b9129af..4ee9832c2b50 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.js
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
@@ -4,14 +4,15 @@ import MockAdapter from "axios-mock-adapter";
 import flushPromises from "flush-promises";
 import { getLocalVue } from "tests/jest/helpers";
 
-import { InvocationExportPlugin, InvocationExportPluginAction } from "./model";
+import { InvocationExportPlugin } from "./model";
 
 import InvocationExportPluginCard from "./InvocationExportPluginCard.vue";
 
 const localVue = getLocalVue();
 
 const FAKE_INVOCATION_ID = "fake-invocation-id";
-const FAKE_EXPORT_PLUGIN = new InvocationExportPlugin({
+const FAKE_EXPORT_PLUGIN: InvocationExportPlugin = {
+    id: "fake-plugin-id",
     title: "Plugin Title",
     markdownDescription: `some **markdown** description`,
     exportParams: {
@@ -21,24 +22,26 @@ const FAKE_EXPORT_PLUGIN = new InvocationExportPlugin({
         includeHidden: false,
     },
     additionalActions: [
-        new InvocationExportPluginAction({
+        {
             id: "fake-action-1",
             title: "Fake export action 1",
-        }),
-        new InvocationExportPluginAction({
+            run: jest.fn(),
+        },
+        {
             id: "fake-action-2",
             title: "Fake export action 2",
-        }),
+            run: jest.fn(),
+        },
     ],
-});
+};
 
 describe("InvocationExportPluginCard", () => {
-    let wrapper;
-    let axiosMock;
+    let wrapper: any;
+    let axiosMock: MockAdapter;
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
-        wrapper = shallowMount(InvocationExportPluginCard, {
+        wrapper = shallowMount(InvocationExportPluginCard as object, {
             propsData: { exportPlugin: FAKE_EXPORT_PLUGIN, invocationId: FAKE_INVOCATION_ID },
             localVue,
         });
diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
index 030bcdae97c2..d0ae7ca3922a 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
@@ -1,26 +1,29 @@
-<script setup>
+<script setup lang="ts">
 import axios from "axios";
 import { BButtonGroup, BButtonToolbar, BCard, BCardTitle } from "bootstrap-vue";
-import { useMarkdown } from "composables/markdown";
-import { Toast } from "composables/toast";
 import { computed, provide, ref } from "vue";
 
+import { useMarkdown } from "@/composables/markdown";
+import { Toast } from "@/composables/toast";
+
 import { InvocationExportPlugin } from "./model";
 
 import ActionButton from "./ActionButton.vue";
-import StsDownloadButton from "components/StsDownloadButton.vue";
-import ExportToRemoteButton from "components/Workflow/Invocation/Export/ExportToRemoteButton.vue";
-import ExportToRemoteModal from "components/Workflow/Invocation/Export/ExportToRemoteModal.vue";
+import StsDownloadButton from "@/components/StsDownloadButton.vue";
+import ExportToRemoteButton from "@/components/Workflow/Invocation/Export/ExportToRemoteButton.vue";
+import ExportToRemoteModal from "@/components/Workflow/Invocation/Export/ExportToRemoteModal.vue";
 
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
-const exportRemoteModal = ref(null);
-const exportToRemoteTaskId = ref(null);
+const exportRemoteModal = ref();
+const exportToRemoteTaskId = ref();
 
-const props = defineProps({
-    exportPlugin: { type: InvocationExportPlugin, required: true },
-    invocationId: { type: String, required: true },
-});
+interface Props {
+    exportPlugin: InvocationExportPlugin;
+    invocationId: string;
+}
+
+const props = defineProps<Props>();
 
 // Make `invocationId` available to child components via `inject`
 provide("invocationId", props.invocationId);
@@ -29,6 +32,9 @@ const descriptionRendered = computed(() => renderMarkdown(props.exportPlugin.mar
 const invocationDownloadUrl = computed(() => `/api/invocations/${props.invocationId}/prepare_store_download`);
 const downloadParams = computed(() => {
     const exportParams = props.exportPlugin.exportParams;
+    if (!exportParams) {
+        return undefined;
+    }
     return {
         model_store_format: exportParams.modelStoreFormat,
         include_files: exportParams.includeFiles,
@@ -41,7 +47,14 @@ function openRemoteExportDialog() {
     exportRemoteModal.value.showModal();
 }
 
-function exportToFileSource(exportDirectory, fileName) {
+function closeRemoteExportDialog() {
+    exportRemoteModal.value.hideModal();
+}
+
+function exportToFileSource(exportDirectory: string, fileName: string) {
+    if (!props.exportPlugin.exportParams) {
+        throw new Error("Export parameters are not defined");
+    }
     const exportFormat = props.exportPlugin.exportParams.modelStoreFormat;
     const exportDirectoryUri = `${exportDirectory}/${fileName}.${exportFormat}`;
     const writeStoreParams = {
@@ -56,7 +69,7 @@ function exportToFileSource(exportDirectory, fileName) {
         .catch((err) => {
             Toast.error(`Failed to export to remote source. ${err}`);
         });
-    exportRemoteModal.value.hideModal();
+    closeRemoteExportDialog();
 }
 
 function onExportToFileSourceSuccess() {
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.js b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.ts
similarity index 84%
rename from client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.js
rename to client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.ts
index db2bff4b076d..98327df96f03 100644
--- a/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.js
+++ b/client/src/components/Workflow/Invocation/Export/Plugins/BioComputeObject/BioComputeObjectExportPlugin.ts
@@ -1,13 +1,14 @@
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faDatabase } from "@fortawesome/free-solid-svg-icons";
 
-import { InvocationExportPlugin, InvocationExportPluginAction } from "../../model";
+import { InvocationExportPlugin } from "../../model";
 
 import SendForm from "./SendForm.vue";
 
 library.add(faDatabase);
 
-export const BIO_COMPUTE_OBJ_EXPORT_PLUGIN = new InvocationExportPlugin({
+export const BIO_COMPUTE_OBJ_EXPORT_PLUGIN: InvocationExportPlugin = {
+    id: "bco",
     title: "BioCompute Object",
     markdownDescription: `
 A BioCompute Object (BCO) is the unofficial name for a JSON object that adheres to the [IEEE-2791-2020 standard](https://standards.ieee.org/ieee/2791/7337/).
@@ -23,7 +24,7 @@ Instructions for [creating a BCO using Galaxy](https://w3id.org/biocompute/tutor
         includeHidden: false,
     },
     additionalActions: [
-        new InvocationExportPluginAction({
+        {
             id: "send-to-bco-db",
             title: "Send to BCODB",
             icon: faDatabase,
@@ -31,6 +32,6 @@ Instructions for [creating a BCO using Galaxy](https://w3id.org/biocompute/tutor
                 modal.showModal();
             },
             modal: SendForm,
-        }),
+        },
     ],
-});
+};
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.js b/client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.ts
similarity index 79%
rename from client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.js
rename to client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.ts
index 648aa489b44d..13d67b11766b 100644
--- a/client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.js
+++ b/client/src/components/Workflow/Invocation/Export/Plugins/DefaultFileExportPlugin.ts
@@ -1,6 +1,7 @@
 import { InvocationExportPlugin } from "../model";
 
-export const DEFAULT_FILE_EXPORT_PLUGIN = new InvocationExportPlugin({
+export const DEFAULT_FILE_EXPORT_PLUGIN: InvocationExportPlugin = {
+    id: "default-file",
     title: "File",
     markdownDescription: `Export the invocation to a compressed File containing the invocation data in Galaxy native format.`,
     exportParams: {
@@ -10,4 +11,4 @@ export const DEFAULT_FILE_EXPORT_PLUGIN = new InvocationExportPlugin({
         includeHidden: false,
     },
     additionalActions: [],
-});
+};
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.js b/client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.ts
similarity index 87%
rename from client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.js
rename to client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.ts
index ea8f93261755..697a17a4fb7b 100644
--- a/client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.js
+++ b/client/src/components/Workflow/Invocation/Export/Plugins/ROCrateExportPlugin.ts
@@ -1,6 +1,7 @@
 import { InvocationExportPlugin } from "../model";
 
-export const RO_CRATE_EXPORT_PLUGIN = new InvocationExportPlugin({
+export const RO_CRATE_EXPORT_PLUGIN: InvocationExportPlugin = {
+    id: "ro-crate",
     title: "Research Object Crate (RO-Crate)",
     markdownDescription: `
 RO-Crate is a community effort to establish a lightweight approach to packaging research data with their metadata. It is based on schema.org annotations in JSON-LD, and aims to make best-practice in formal metadata description accessible and practical for use in a wider variety of situations, from an individual researcher working with a folder of data, to large data-intensive computational research environments.
@@ -12,4 +13,5 @@ Learn more about [RO Crate](https://www.researchobject.org/ro-crate/).`,
         includeDeleted: false,
         includeHidden: false,
     },
-});
+    additionalActions: [],
+};
diff --git a/client/src/components/Workflow/Invocation/Export/Plugins/index.js b/client/src/components/Workflow/Invocation/Export/Plugins/index.ts
similarity index 100%
rename from client/src/components/Workflow/Invocation/Export/Plugins/index.js
rename to client/src/components/Workflow/Invocation/Export/Plugins/index.ts
diff --git a/client/src/components/Workflow/Invocation/Export/model.js b/client/src/components/Workflow/Invocation/Export/model.js
deleted file mode 100644
index a9197d94fb89..000000000000
--- a/client/src/components/Workflow/Invocation/Export/model.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Defines a UI plugin that can export a workflow invocation to a particular format.
- */
-export class InvocationExportPlugin {
-    constructor(props = {}) {
-        /**
-         * The unique ID for this plugin.
-         * @type {string}
-         */
-        this.id = props.id ?? "undefined-plugin";
-
-        /**
-         * The display title for this plugin.
-         * @type {string}
-         */
-        this.title = props.title ?? "Unknown Plugin";
-
-        /**
-         * A detailed description of the format in Markdown.
-         * @type {string}
-         */
-        this.markdownDescription = props.markdownDescription ?? "No description provided";
-
-        /**
-         * An object with parameters for the Galaxy export store that handles the download format in the backend.
-         * Check lib/galaxy/model/store/__init__.py::get_export_store_factory for more info.
-         * @type {Object}
-         */
-        this.exportParams = props.exportParams ?? null;
-
-        /**
-         * A list of additional actions that this plugin can do with the exported invocation in addition
-         * to direct downloading the exported file or exporting it to a remote file source.
-         * @type {InvocationExportPluginAction[]}
-         */
-        this.additionalActions = props.additionalActions ?? [];
-    }
-}
-
-export class InvocationExportPluginAction {
-    constructor(props = {}) {
-        /**
-         * The unique ID for this action.
-         * @type {string}
-         */
-        this.id = props.id ?? "undefined-action";
-
-        /**
-         * The display title of the button for this action.
-         * @type {string}
-         */
-        this.title = props.title ?? "Untitled action";
-
-        /** An optional (fontawesome) icon definition for the action button. */
-        this.icon = props.icon ?? null;
-
-        /**
-         * The function that will run when the action button is pressed.
-         * @type {function}
-         */
-        this.run =
-            props.run ??
-            (() => {
-                alert("Undefined 'run' function in InvocationExportPluginAction");
-            });
-
-        /**
-         * The optional modal dialog (component) that can be displayed when running this action.
-         * @type {string}
-         */
-        this.modal = props.modal ?? null;
-    }
-}
diff --git a/client/src/components/Workflow/Invocation/Export/model.ts b/client/src/components/Workflow/Invocation/Export/model.ts
new file mode 100644
index 000000000000..3e9af8b9c9d2
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/Export/model.ts
@@ -0,0 +1,36 @@
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+import type { ExportParams } from "@/components/Common/models/exportRecordModel";
+/**
+ * Defines a UI plugin that can export a workflow invocation to a particular format.
+ */
+export interface InvocationExportPlugin {
+    /** The unique identifier for the plugin. */
+    id: string;
+    /** The title of the plugin. */
+    title: string;
+    /** A markdown description of the plugin. */
+    markdownDescription: string;
+    /** The parameters to use when exporting the invocation. */
+    exportParams: ExportParams;
+    /** Any additional actions that can be taken in addition to the main export action. */
+    additionalActions: InvocationExportPluginAction[];
+}
+
+/**
+ * Defines an action that can be taken in addition to the main export action.
+ */
+export interface InvocationExportPluginAction {
+    /** The unique identifier for the action. */
+    id: string;
+    /** The title of the action. */
+    title: string;
+    /** The icon to display in the button for the action. */
+    icon?: IconDefinition | string;
+    /** The function to run when the action is triggered.
+     * @param modal - The modal dialog to show when the action is run.
+     */
+    run: (modal: any) => void;
+    /** The Vue component to render in a modal dialog when the action is run. */
+    modal?: any;
+}

From 87f203e8c56ecf32cf605e8f730725c2f73c3ad6 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:29:48 +0200
Subject: [PATCH 02/17] Convert ExportToRemoteButton to Typescript

---
 .../Invocation/Export/ExportToRemoteButton.vue  | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue b/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue
index ab91dac82295..b7a1c56e698a 100644
--- a/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue
+++ b/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue
@@ -1,26 +1,29 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faCheckCircle, faCloudUploadAlt, faExclamationCircle, faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
-import { useTaskMonitor } from "composables/taskMonitor";
 import { watch } from "vue";
 
+import { useTaskMonitor } from "@/composables/taskMonitor";
+
 library.add(faCloudUploadAlt, faSpinner, faCheckCircle, faExclamationCircle);
 
 const { isRunning, isCompleted, hasFailed, requestHasFailed, waitForTask } = useTaskMonitor();
 
-const props = defineProps({
-    title: { type: String, required: true },
-    taskId: { type: String, default: null },
-});
+interface Props {
+    title: string;
+    taskId?: string;
+}
+
+const props = defineProps<Props>();
 
 const emit = defineEmits(["onClick", "onSuccess", "onFailure"]);
 
 watch(
     () => props.taskId,
     (newTaskId, oldTaskId) => {
-        if (newTaskId !== oldTaskId) {
+        if (newTaskId && newTaskId !== oldTaskId) {
             waitForTask(newTaskId);
         }
     }

From 58268bb2d5b7b6ab19715c62f31863488c9aaa22 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:25:50 +0200
Subject: [PATCH 03/17] Expose status property in useTaskMonitor

---
 client/src/composables/taskMonitor.test.ts | 14 ++++++++++----
 client/src/composables/taskMonitor.ts      |  4 ++++
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/composables/taskMonitor.test.ts b/client/src/composables/taskMonitor.test.ts
index 3a7db833b6c1..13af327107d1 100644
--- a/client/src/composables/taskMonitor.test.ts
+++ b/client/src/composables/taskMonitor.test.ts
@@ -33,40 +33,46 @@ mockFetcher.path("/api/tasks/{task_id}/state").method("get").mock(getMockedTaskS
 
 describe("useTaskMonitor", () => {
     it("should indicate the task is running when it is still pending", async () => {
-        const { waitForTask, isRunning } = useTaskMonitor();
+        const { waitForTask, isRunning, status } = useTaskMonitor();
 
         expect(isRunning.value).toBe(false);
         waitForTask(PENDING_TASK_ID);
         await flushPromises();
         expect(isRunning.value).toBe(true);
+        expect(status.value).toBe("PENDING");
     });
 
     it("should indicate the task is successfully completed when the state is SUCCESS", async () => {
-        const { waitForTask, isRunning, isCompleted } = useTaskMonitor();
+        const { waitForTask, isRunning, isCompleted, status } = useTaskMonitor();
 
         expect(isCompleted.value).toBe(false);
         waitForTask(COMPLETED_TASK_ID);
         await flushPromises();
         expect(isCompleted.value).toBe(true);
         expect(isRunning.value).toBe(false);
+        expect(status.value).toBe("SUCCESS");
     });
 
     it("should indicate the task has failed when the state is FAILED", async () => {
-        const { waitForTask, isRunning, hasFailed } = useTaskMonitor();
+        const { waitForTask, isRunning, hasFailed, status } = useTaskMonitor();
 
         expect(hasFailed.value).toBe(false);
         waitForTask(FAILED_TASK_ID);
         await flushPromises();
         expect(hasFailed.value).toBe(true);
         expect(isRunning.value).toBe(false);
+        expect(status.value).toBe("FAILURE");
     });
 
     it("should indicate the task status request failed when the request failed", async () => {
-        const { waitForTask, requestHasFailed } = useTaskMonitor();
+        const { waitForTask, requestHasFailed, isRunning, isCompleted, status } = useTaskMonitor();
 
         expect(requestHasFailed.value).toBe(false);
         waitForTask(REQUEST_FAILED_TASK_ID);
         await flushPromises();
         expect(requestHasFailed.value).toBe(true);
+        expect(isRunning.value).toBe(false);
+        expect(isCompleted.value).toBe(false);
+        expect(status.value).toBe("Request failed");
     });
 });
diff --git a/client/src/composables/taskMonitor.ts b/client/src/composables/taskMonitor.ts
index 8f05470504a8..d3919dd84325 100644
--- a/client/src/composables/taskMonitor.ts
+++ b/client/src/composables/taskMonitor.ts
@@ -97,5 +97,9 @@ export function useTaskMonitor() {
          * If true, the status of the task cannot be determined because of a request error.
          */
         requestHasFailed: readonly(requestHasFailed),
+        /**
+         * The current status of the task.
+         */
+        status: readonly(status),
     };
 }

From 7c5818cf770704f1f2b15093a7c899249feea95e Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:28:27 +0200
Subject: [PATCH 04/17] Add short-term storage monitor composable and tests

---
 .../shortTermStorageMonitor.test.ts           | 63 ++++++++++++++
 .../composables/shortTermStorageMonitor.ts    | 87 +++++++++++++++++++
 2 files changed, 150 insertions(+)
 create mode 100644 client/src/composables/shortTermStorageMonitor.test.ts
 create mode 100644 client/src/composables/shortTermStorageMonitor.ts

diff --git a/client/src/composables/shortTermStorageMonitor.test.ts b/client/src/composables/shortTermStorageMonitor.test.ts
new file mode 100644
index 000000000000..68b7700563df
--- /dev/null
+++ b/client/src/composables/shortTermStorageMonitor.test.ts
@@ -0,0 +1,63 @@
+import flushPromises from "flush-promises";
+
+import { mockFetcher } from "@/api/schema/__mocks__";
+import { useShortTermStorageMonitor } from "@/composables/shortTermStorageMonitor";
+
+jest.mock("@/api/schema");
+
+const PENDING_TASK_ID = "pending-fake-task-id";
+const COMPLETED_TASK_ID = "completed-fake-task-id";
+const REQUEST_FAILED_TASK_ID = "request-failed-fake-task-id";
+
+function getMockedTaskStatus({ storage_request_id }: { storage_request_id: string }) {
+    switch (storage_request_id) {
+        case PENDING_TASK_ID:
+            return { data: false, status: 200 };
+
+        case COMPLETED_TASK_ID:
+            return { data: true, status: 200 };
+
+        case REQUEST_FAILED_TASK_ID:
+            throw new Error("Request failed");
+
+        default:
+            return { data: "UNKNOWN", status: 404 };
+    }
+}
+
+mockFetcher.path("/api/short_term_storage/{storage_request_id}/ready").method("get").mock(getMockedTaskStatus);
+
+describe("useShortTermStorageMonitor", () => {
+    it("should indicate the task is running when it is still not ready", async () => {
+        const { waitForTask, isRunning, status } = useShortTermStorageMonitor();
+
+        expect(isRunning.value).toBe(false);
+        waitForTask(PENDING_TASK_ID);
+        await flushPromises();
+        expect(isRunning.value).toBe(true);
+        expect(status.value).toBe("PENDING");
+    });
+
+    it("should indicate the task is successfully completed when the state is ready", async () => {
+        const { waitForTask, isRunning, isCompleted, status } = useShortTermStorageMonitor();
+
+        expect(isCompleted.value).toBe(false);
+        waitForTask(COMPLETED_TASK_ID);
+        await flushPromises();
+        expect(isCompleted.value).toBe(true);
+        expect(isRunning.value).toBe(false);
+        expect(status.value).toBe("READY");
+    });
+
+    it("should indicate the task status request failed when the request failed", async () => {
+        const { waitForTask, requestHasFailed, isRunning, isCompleted, status } = useShortTermStorageMonitor();
+
+        expect(requestHasFailed.value).toBe(false);
+        waitForTask(REQUEST_FAILED_TASK_ID);
+        await flushPromises();
+        expect(requestHasFailed.value).toBe(true);
+        expect(isRunning.value).toBe(false);
+        expect(isCompleted.value).toBe(false);
+        expect(status.value).toBe("Request failed");
+    });
+});
diff --git a/client/src/composables/shortTermStorageMonitor.ts b/client/src/composables/shortTermStorageMonitor.ts
new file mode 100644
index 000000000000..0c56b19c9515
--- /dev/null
+++ b/client/src/composables/shortTermStorageMonitor.ts
@@ -0,0 +1,87 @@
+import { computed, readonly, ref } from "vue";
+
+import { fetcher } from "@/api/schema";
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const DEFAULT_POLL_DELAY = 10000;
+
+const getTempStorageRequestReady = fetcher
+    .path("/api/short_term_storage/{storage_request_id}/ready")
+    .method("get")
+    .create();
+
+const READY_STATE = "READY";
+const PENDING_STATE = "PENDING";
+const VALID_STATES = [READY_STATE, PENDING_STATE];
+
+export function useShortTermStorageMonitor() {
+    let timeout: NodeJS.Timeout | null = null;
+    let pollDelay = DEFAULT_POLL_DELAY;
+
+    const isRunning = ref(false);
+    const status = ref<string>();
+    const currentStorageRequestId = ref<string>();
+    const requestHasFailed = ref(false);
+
+    const isCompleted = computed(() => status.value === READY_STATE);
+    const hasFailed = computed(() => {
+        return typeof status.value === "string" && !VALID_STATES.includes(status.value);
+    });
+
+    async function waitForTask(storageRequestId: string, pollDelayInMs = DEFAULT_POLL_DELAY) {
+        pollDelay = pollDelayInMs;
+        resetState();
+        currentStorageRequestId.value = storageRequestId;
+        isRunning.value = true;
+        return fetchTaskStatus(storageRequestId);
+    }
+
+    async function fetchTaskStatus(storageRequestId: string) {
+        try {
+            const { data: isReady } = await getTempStorageRequestReady({ storage_request_id: storageRequestId });
+            status.value = isReady ? READY_STATE : PENDING_STATE;
+
+            if (isReady) {
+                isRunning.value = false;
+            } else {
+                pollAfterDelay(storageRequestId);
+            }
+        } catch (err) {
+            handleError(errorMessageAsString(err));
+        }
+    }
+
+    function pollAfterDelay(taskId: string) {
+        resetTimeout();
+        timeout = setTimeout(() => {
+            fetchTaskStatus(taskId);
+        }, pollDelay);
+    }
+
+    function handleError(err: string) {
+        status.value = err;
+        requestHasFailed.value = true;
+        isRunning.value = false;
+        resetTimeout();
+    }
+
+    function resetTimeout() {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+    }
+
+    function resetState() {
+        resetTimeout();
+        status.value = undefined;
+    }
+
+    return {
+        waitForTask,
+        isRunning: readonly(isRunning),
+        isCompleted: readonly(isCompleted),
+        hasFailed: readonly(hasFailed),
+        requestHasFailed: readonly(requestHasFailed),
+        status: readonly(status),
+    };
+}

From be02dbff7304982c50c6c0f1602d3ec3c475fee8 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:50:31 +0200
Subject: [PATCH 05/17] Update short-term storage poll frequency to 3 seconds

---
 client/src/composables/shortTermStorage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/composables/shortTermStorage.ts b/client/src/composables/shortTermStorage.ts
index fb6cd45eccd6..a4dd1bf060ea 100644
--- a/client/src/composables/shortTermStorage.ts
+++ b/client/src/composables/shortTermStorage.ts
@@ -22,7 +22,7 @@ interface StorageRequestResponse {
 
 type StartPreparingDownloadCallback = (objectId: string, params: StoreExportPayload) => Promise<StorageRequestResponse>;
 
-const DEFAULT_POLL_DELAY = 1000;
+const DEFAULT_POLL_DELAY = 3000;
 const DEFAULT_OPTIONS: Options = { exportParams: DEFAULT_EXPORT_PARAMS, pollDelayInMs: DEFAULT_POLL_DELAY };
 
 const startPreparingHistoryDownload = fetcher

From eab4f1cbf09c617c9e6eafd5760e7b55bef71161 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 15:51:39 +0200
Subject: [PATCH 06/17] refactor: Simplify short-term storage composable and
 reuse monitor

---
 client/src/composables/shortTermStorage.ts | 83 ++++------------------
 1 file changed, 15 insertions(+), 68 deletions(-)

diff --git a/client/src/composables/shortTermStorage.ts b/client/src/composables/shortTermStorage.ts
index a4dd1bf060ea..d1889463cac9 100644
--- a/client/src/composables/shortTermStorage.ts
+++ b/client/src/composables/shortTermStorage.ts
@@ -1,9 +1,11 @@
-import { readonly, ref } from "vue";
+import { readonly, ref, watch } from "vue";
 
 import { fetcher } from "@/api/schema";
 import { ExportParams, StoreExportPayload } from "@/components/Common/models/exportRecordModel";
 import { withPrefix } from "@/utils/redirect";
 
+import { useShortTermStorageMonitor } from "./shortTermStorageMonitor";
+
 export const DEFAULT_EXPORT_PARAMS: ExportParams = {
     modelStoreFormat: "rocrate.zip",
     includeFiles: true,
@@ -33,20 +35,21 @@ const startPreparingInvocationDownload = fetcher
     .path("/api/invocations/{invocation_id}/prepare_store_download")
     .method("post")
     .create();
-const getTempStorageRequestReady = fetcher
-    .path("/api/short_term_storage/{storage_request_id}/ready")
-    .method("get")
-    .create();
 
 /**
  * Composable to simplify and reuse the logic for downloading objects using Galaxy's Short Term Storage system.
  */
 export function useShortTermStorage() {
-    let timeout: NodeJS.Timeout | null = null;
-    let pollDelay = DEFAULT_POLL_DELAY;
+    const { waitForTask, isRunning } = useShortTermStorageMonitor();
 
     const isPreparing = ref(false);
 
+    watch(isRunning, (running) => {
+        if (!running) {
+            isPreparing.value = false;
+        }
+    });
+
     const forHistory: StartPreparingDownloadCallback = async (id: string, params: StoreExportPayload) => {
         const { data } = await startPreparingHistoryDownload({ history_id: id, ...params });
         return data;
@@ -58,18 +61,11 @@ export function useShortTermStorage() {
     };
 
     async function prepareHistoryDownload(historyId: string, options = DEFAULT_OPTIONS) {
-        return prepareObjectDownload(forHistory, historyId, options, false);
-    }
-    async function downloadHistory(historyId: string, options = DEFAULT_OPTIONS) {
-        return prepareObjectDownload(forHistory, historyId, options, true);
+        return prepareObjectDownload(forHistory, historyId, options);
     }
 
     async function prepareWorkflowInvocationDownload(invocationId: string, options = DEFAULT_OPTIONS) {
-        return prepareObjectDownload(forInvocation, invocationId, options, false);
-    }
-
-    async function downloadWorkflowInvocation(invocationId: string, options = DEFAULT_OPTIONS) {
-        return prepareObjectDownload(forInvocation, invocationId, options, true);
+        return prepareObjectDownload(forInvocation, invocationId, options);
     }
 
     function getDownloadObjectUrl(storageRequestId: string) {
@@ -85,13 +81,10 @@ export function useShortTermStorage() {
     async function prepareObjectDownload(
         startPreparingDownloadAsync: StartPreparingDownloadCallback,
         objectId: string,
-        options = DEFAULT_OPTIONS,
-        downloadWhenReady = true
+        options = DEFAULT_OPTIONS
     ) {
-        resetTimeout();
         isPreparing.value = true;
         const finalOptions = Object.assign(DEFAULT_OPTIONS, options);
-        pollDelay = finalOptions.pollDelayInMs;
         const exportParams: StoreExportPayload = {
             model_store_format: finalOptions.exportParams.modelStoreFormat,
             include_files: finalOptions.exportParams.includeFiles,
@@ -102,43 +95,9 @@ export function useShortTermStorage() {
         try {
             const response = await startPreparingDownloadAsync(objectId, exportParams);
             const storageRequestId = response.storage_request_id;
-            pollStorageRequestId(storageRequestId, downloadWhenReady);
+            waitForTask(storageRequestId, finalOptions.pollDelayInMs);
         } catch (err) {
-            stopPreparing();
-        }
-    }
-
-    async function pollStorageRequestId(storageRequestId: string, downloadWhenReady: boolean) {
-        try {
-            const { data: ready } = await getTempStorageRequestReady({ storage_request_id: storageRequestId });
-            if (ready) {
-                isPreparing.value = false;
-                if (downloadWhenReady) {
-                    downloadObjectByRequestId(storageRequestId);
-                }
-            } else {
-                pollAfterDelay(storageRequestId, downloadWhenReady);
-            }
-        } catch (err) {
-            stopPreparing();
-        }
-    }
-
-    function stopPreparing() {
-        isPreparing.value = false;
-    }
-
-    function pollAfterDelay(storageRequestId: string, downloadWhenReady: boolean) {
-        resetTimeout();
-        timeout = setTimeout(() => {
-            pollStorageRequestId(storageRequestId, downloadWhenReady);
-        }, pollDelay);
-    }
-
-    function resetTimeout() {
-        if (timeout) {
-            clearTimeout(timeout);
-            timeout = null;
+            isPreparing.value = false;
         }
     }
 
@@ -149,24 +108,12 @@ export function useShortTermStorage() {
          * @param {Object} options Options for the download preparation
          */
         prepareHistoryDownload,
-        /**
-         * Prepares a history download file in the short term storage and starts the download when ready.
-         * @param {String} historyId The ID of the history to be downloaded
-         * @param {Object} options Options for the download preparation
-         */
-        downloadHistory,
         /**
          * Starts preparing a workflow invocation download file in the short term storage.
          * @param {String} invocationId The ID of the workflow invocation to be prepared for download
          * @param {Object} options Options for the download preparation
          */
         prepareWorkflowInvocationDownload,
-        /**
-         * Starts preparing a workflow invocation download file in the short term storage and starts the download when ready.
-         * @param {String} invocationId The ID of the workflow invocation to be downloaded
-         * @param {Object} options Options for the download preparation
-         */
-        downloadWorkflowInvocation,
         /**
          * Starts a direct download of the object associated with the given `storageRequestId`.
          * For the download to succeed, the associated `storageRequestId` must be `ready` and not in failure state.

From 5964179c3848c8f8bfa2a7f4aac700dc18492f3b Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:56:58 +0200
Subject: [PATCH 07/17] Add generic task monitor composable

---
 client/src/composables/genericTaskMonitor.ts | 119 +++++++++++++++++++
 1 file changed, 119 insertions(+)
 create mode 100644 client/src/composables/genericTaskMonitor.ts

diff --git a/client/src/composables/genericTaskMonitor.ts b/client/src/composables/genericTaskMonitor.ts
new file mode 100644
index 000000000000..05f47d7d07ec
--- /dev/null
+++ b/client/src/composables/genericTaskMonitor.ts
@@ -0,0 +1,119 @@
+import { computed, readonly, ref } from "vue";
+
+import { errorMessageAsString } from "@/utils/simple-error";
+
+const DEFAULT_POLL_DELAY = 10000;
+
+/**
+ * Composable for waiting (polling) on generic background tasks or processes.
+ */
+export function useGenericMonitor(options: {
+    /** Function to fetch the status of a task or process.
+     * The function should return a string representing the current status of the task.
+     * The meaning of the status string is determined by the `completedCondition` and `failedCondition` functions.
+     */
+    fetchStatus: (taskId: string) => Promise<string>;
+
+    /** Function to determine if the task has finished. */
+    completedCondition: (status?: string) => boolean;
+
+    /** Function to determine if the task has failed. */
+    failedCondition: (status?: string) => boolean;
+
+    /** Default delay between polling requests in milliseconds.
+     * By default, this is set to 10 seconds.
+     * The delay can be overridden when calling `waitForTask`.
+     */
+    defaultPollDelay?: number;
+}) {
+    let timeout: NodeJS.Timeout | null = null;
+    let pollDelay = options.defaultPollDelay ?? DEFAULT_POLL_DELAY;
+
+    const isRunning = ref(false);
+    const status = ref<string>();
+    const requestId = ref<string>();
+    const requestHasFailed = ref(false);
+
+    const isCompleted = computed(() => options.completedCondition(status.value));
+    const hasFailed = computed(() => options.failedCondition(status.value));
+
+    async function waitForTask(taskId: string, pollDelayInMs?: number) {
+        pollDelay = pollDelayInMs ?? pollDelay;
+        resetState();
+        requestId.value = taskId;
+        isRunning.value = true;
+        return fetchTaskStatus(taskId);
+    }
+
+    async function fetchTaskStatus(taskId: string) {
+        try {
+            const result = await options.fetchStatus(taskId);
+            status.value = result;
+            if (isCompleted.value || hasFailed.value) {
+                isRunning.value = false;
+            } else {
+                pollAfterDelay(taskId);
+            }
+        } catch (err) {
+            handleError(errorMessageAsString(err));
+        }
+    }
+
+    function pollAfterDelay(id: string) {
+        resetTimeout();
+        timeout = setTimeout(() => {
+            fetchTaskStatus(id);
+        }, pollDelay);
+    }
+
+    function handleError(err: string) {
+        status.value = err.toString();
+        requestHasFailed.value = true;
+        isRunning.value = false;
+        resetTimeout();
+    }
+
+    function resetTimeout() {
+        if (timeout) {
+            clearTimeout(timeout);
+            timeout = null;
+        }
+    }
+
+    function resetState() {
+        resetTimeout();
+        status.value = undefined;
+        requestHasFailed.value = false;
+        isRunning.value = false;
+    }
+
+    return {
+        /**
+         * Waits for a particular task ID to be completed.
+         * While the task is pending, the state will be updated every `pollDelayInMs` by polling the server.
+         * @param taskId The task ID
+         * @param pollDelayInMs The time (milliseconds) between poll requests to update the task state.
+         */
+        waitForTask,
+        /**
+         * Whether the task is currently running.
+         */
+        isRunning: readonly(isRunning),
+        /**
+         * Whether the task has been completed successfully.
+         */
+        isCompleted: readonly(isCompleted),
+        /**
+         * Indicates the task has failed and will not yield results.
+         */
+        hasFailed: readonly(hasFailed),
+        /**
+         * If true, the status of the task cannot be determined because of a request error.
+         */
+        requestHasFailed: readonly(requestHasFailed),
+        /**
+         * The current status of the task.
+         */
+        status: readonly(status),
+    };
+}

From 40ace8ccbba933a573b5560c15b99c3f046745ff Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:57:25 +0200
Subject: [PATCH 08/17] Refactor task monitor to use generic composable

---
 client/src/composables/taskMonitor.ts | 102 +++-----------------------
 1 file changed, 11 insertions(+), 91 deletions(-)

diff --git a/client/src/composables/taskMonitor.ts b/client/src/composables/taskMonitor.ts
index d3919dd84325..4f2aad634ea3 100644
--- a/client/src/composables/taskMonitor.ts
+++ b/client/src/composables/taskMonitor.ts
@@ -1,11 +1,9 @@
-import { computed, readonly, ref } from "vue";
-
 import { fetcher } from "@/api/schema";
-import { errorMessageAsString } from "@/utils/simple-error";
+
+import { useGenericMonitor } from "./genericTaskMonitor";
 
 const SUCCESS_STATE = "SUCCESS";
 const FAILURE_STATE = "FAILURE";
-const TASK_READY_STATES = [SUCCESS_STATE, FAILURE_STATE];
 const DEFAULT_POLL_DELAY = 10000;
 
 const getTaskStatus = fetcher.path("/api/tasks/{task_id}/state").method("get").create();
@@ -14,92 +12,14 @@ const getTaskStatus = fetcher.path("/api/tasks/{task_id}/state").method("get").c
  * Composable for waiting on Galaxy background tasks.
  */
 export function useTaskMonitor() {
-    let timeout: NodeJS.Timeout | null = null;
-    let pollDelay = DEFAULT_POLL_DELAY;
-
-    const isRunning = ref(false);
-    const status = ref<string>();
-    const currentTaskId = ref<string>();
-    const requestHasFailed = ref(false);
-
-    const isCompleted = computed(() => status.value === SUCCESS_STATE);
-    const hasFailed = computed(() => status.value === FAILURE_STATE);
-
-    async function waitForTask(taskId: string, pollDelayInMs = DEFAULT_POLL_DELAY) {
-        pollDelay = pollDelayInMs;
-        resetState();
-        currentTaskId.value = taskId;
-        isRunning.value = true;
-        return fetchTaskStatus(taskId);
-    }
-
-    async function fetchTaskStatus(taskId: string) {
-        try {
-            const { data } = await getTaskStatus({ task_id: taskId });
-            status.value = data;
-            const isReady = TASK_READY_STATES.includes(status.value);
-            if (isReady) {
-                isRunning.value = false;
-            } else {
-                pollAfterDelay(taskId);
-            }
-        } catch (err) {
-            handleError(errorMessageAsString(err));
-        }
-    }
-
-    function pollAfterDelay(taskId: string) {
-        resetTimeout();
-        timeout = setTimeout(() => {
-            fetchTaskStatus(taskId);
-        }, pollDelay);
-    }
-
-    function handleError(err: string) {
-        status.value = err;
-        requestHasFailed.value = true;
-        isRunning.value = false;
-        resetTimeout();
-    }
-
-    function resetTimeout() {
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-    }
-
-    function resetState() {
-        resetTimeout();
-        status.value = undefined;
-    }
-
-    return {
-        /**
-         * Waits for a particular task ID to be completed.
-         * While the task is pending, the state will be updated every `pollDelayInMs` by polling the server.
-         * @param {string} taskId The task ID
-         * @param {Number} pollDelayInMs The time (milliseconds) between poll requests to update the task state.
-         */
-        waitForTask,
-        /**
-         * Whether the task is currently running.
-         */
-        isRunning: readonly(isRunning),
-        /**
-         * Whether the task has been completed successfully.
-         */
-        isCompleted: readonly(isCompleted),
-        /**
-         * Indicates the task has failed and will not yield results.
-         */
-        hasFailed: readonly(hasFailed),
-        /**
-         * If true, the status of the task cannot be determined because of a request error.
-         */
-        requestHasFailed: readonly(requestHasFailed),
-        /**
-         * The current status of the task.
-         */
-        status: readonly(status),
+    const fetchStatus = async (taskId: string) => {
+        const { data } = await getTaskStatus({ task_id: taskId });
+        return data;
     };
+    return useGenericMonitor({
+        fetchStatus,
+        completedCondition: (status?: string) => status === SUCCESS_STATE,
+        failedCondition: (status?: string) => status === FAILURE_STATE,
+        defaultPollDelay: DEFAULT_POLL_DELAY,
+    });
 }

From 4f173c50bf5df239e9f9a7419c0ecf041f3a6ae0 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Thu, 4 Jul 2024 16:57:47 +0200
Subject: [PATCH 09/17] Refactor short-term storage monitor to use generic
 composable

---
 .../composables/shortTermStorageMonitor.ts    | 84 ++++---------------
 1 file changed, 14 insertions(+), 70 deletions(-)

diff --git a/client/src/composables/shortTermStorageMonitor.ts b/client/src/composables/shortTermStorageMonitor.ts
index 0c56b19c9515..a229737204f0 100644
--- a/client/src/composables/shortTermStorageMonitor.ts
+++ b/client/src/composables/shortTermStorageMonitor.ts
@@ -1,7 +1,6 @@
-import { computed, readonly, ref } from "vue";
-
 import { fetcher } from "@/api/schema";
-import { errorMessageAsString } from "@/utils/simple-error";
+
+import { useGenericMonitor } from "./genericTaskMonitor";
 
 const DEFAULT_POLL_DELAY = 10000;
 
@@ -14,74 +13,19 @@ const READY_STATE = "READY";
 const PENDING_STATE = "PENDING";
 const VALID_STATES = [READY_STATE, PENDING_STATE];
 
+/**
+ * Composable for waiting on Galaxy Short Term Storage requests.
+ */
 export function useShortTermStorageMonitor() {
-    let timeout: NodeJS.Timeout | null = null;
-    let pollDelay = DEFAULT_POLL_DELAY;
-
-    const isRunning = ref(false);
-    const status = ref<string>();
-    const currentStorageRequestId = ref<string>();
-    const requestHasFailed = ref(false);
+    const fetchStatus = async (taskId: string) => {
+        const { data } = await getTempStorageRequestReady({ storage_request_id: taskId });
+        return data ? READY_STATE : PENDING_STATE;
+    };
 
-    const isCompleted = computed(() => status.value === READY_STATE);
-    const hasFailed = computed(() => {
-        return typeof status.value === "string" && !VALID_STATES.includes(status.value);
+    return useGenericMonitor({
+        fetchStatus,
+        completedCondition: (status?: string) => status === READY_STATE,
+        failedCondition: (status?: string) => typeof status === "string" && !VALID_STATES.includes(status),
+        defaultPollDelay: DEFAULT_POLL_DELAY,
     });
-
-    async function waitForTask(storageRequestId: string, pollDelayInMs = DEFAULT_POLL_DELAY) {
-        pollDelay = pollDelayInMs;
-        resetState();
-        currentStorageRequestId.value = storageRequestId;
-        isRunning.value = true;
-        return fetchTaskStatus(storageRequestId);
-    }
-
-    async function fetchTaskStatus(storageRequestId: string) {
-        try {
-            const { data: isReady } = await getTempStorageRequestReady({ storage_request_id: storageRequestId });
-            status.value = isReady ? READY_STATE : PENDING_STATE;
-
-            if (isReady) {
-                isRunning.value = false;
-            } else {
-                pollAfterDelay(storageRequestId);
-            }
-        } catch (err) {
-            handleError(errorMessageAsString(err));
-        }
-    }
-
-    function pollAfterDelay(taskId: string) {
-        resetTimeout();
-        timeout = setTimeout(() => {
-            fetchTaskStatus(taskId);
-        }, pollDelay);
-    }
-
-    function handleError(err: string) {
-        status.value = err;
-        requestHasFailed.value = true;
-        isRunning.value = false;
-        resetTimeout();
-    }
-
-    function resetTimeout() {
-        if (timeout) {
-            clearTimeout(timeout);
-        }
-    }
-
-    function resetState() {
-        resetTimeout();
-        status.value = undefined;
-    }
-
-    return {
-        waitForTask,
-        isRunning: readonly(isRunning),
-        isCompleted: readonly(isCompleted),
-        hasFailed: readonly(hasFailed),
-        requestHasFailed: readonly(requestHasFailed),
-        status: readonly(status),
-    };
 }

From 99759d403ca9a4cbc2bee66b2466ff52f47a9c17 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:04:00 +0200
Subject: [PATCH 10/17] Add TaskMonitor interface for generic task monitor

---
 client/src/composables/genericTaskMonitor.ts | 62 ++++++++++++--------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/client/src/composables/genericTaskMonitor.ts b/client/src/composables/genericTaskMonitor.ts
index 05f47d7d07ec..c549b09f9ba7 100644
--- a/client/src/composables/genericTaskMonitor.ts
+++ b/client/src/composables/genericTaskMonitor.ts
@@ -1,9 +1,46 @@
-import { computed, readonly, ref } from "vue";
+import { computed, readonly, type Ref, ref } from "vue";
 
 import { errorMessageAsString } from "@/utils/simple-error";
 
 const DEFAULT_POLL_DELAY = 10000;
 
+export interface TaskMonitor {
+    /**
+     * Waits for a particular task ID to be completed.
+     * While the task is pending, the state will be updated every `pollDelayInMs` by polling the server.
+     * @param taskId The task ID
+     * @param pollDelayInMs The time (milliseconds) between poll requests to update the task state.
+     */
+    waitForTask: (taskId: string, pollDelayInMs?: number) => Promise<void>;
+
+    /**
+     * Whether the task is currently running.
+     */
+    isRunning: Readonly<Ref<boolean>>;
+
+    /**
+     * Whether the task has been completed successfully.
+     */
+    isCompleted: Readonly<Ref<boolean>>;
+
+    /**
+     * Indicates the task has failed and will not yield results.
+     */
+    hasFailed: Readonly<Ref<boolean>>;
+
+    /**
+     * If true, the status of the task cannot be determined because of a request error.
+     */
+    requestHasFailed: Readonly<Ref<boolean>>;
+
+    /**
+     * The current status of the task.
+     * The meaning of the status string is up to the monitor implementation.
+     * In case of an error, this will be the error message.
+     */
+    status: Readonly<Ref<string | undefined>>;
+}
+
 /**
  * Composable for waiting (polling) on generic background tasks or processes.
  */
@@ -25,7 +62,7 @@ export function useGenericMonitor(options: {
      * The delay can be overridden when calling `waitForTask`.
      */
     defaultPollDelay?: number;
-}) {
+}): TaskMonitor {
     let timeout: NodeJS.Timeout | null = null;
     let pollDelay = options.defaultPollDelay ?? DEFAULT_POLL_DELAY;
 
@@ -88,32 +125,11 @@ export function useGenericMonitor(options: {
     }
 
     return {
-        /**
-         * Waits for a particular task ID to be completed.
-         * While the task is pending, the state will be updated every `pollDelayInMs` by polling the server.
-         * @param taskId The task ID
-         * @param pollDelayInMs The time (milliseconds) between poll requests to update the task state.
-         */
         waitForTask,
-        /**
-         * Whether the task is currently running.
-         */
         isRunning: readonly(isRunning),
-        /**
-         * Whether the task has been completed successfully.
-         */
         isCompleted: readonly(isCompleted),
-        /**
-         * Indicates the task has failed and will not yield results.
-         */
         hasFailed: readonly(hasFailed),
-        /**
-         * If true, the status of the task cannot be determined because of a request error.
-         */
         requestHasFailed: readonly(requestHasFailed),
-        /**
-         * The current status of the task.
-         */
         status: readonly(status),
     };
 }

From 980e4133591ef3e83fd31493044c69e84d4a0257 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 5 Jul 2024 13:09:20 +0200
Subject: [PATCH 11/17] Add persistentProgressMonitor composable

It allows to keep track of the progress of a long-running operation
even if the user navigates away from the page.
---
 .../composables/persistentProgressMonitor.ts  | 146 ++++++++++++++++++
 1 file changed, 146 insertions(+)
 create mode 100644 client/src/composables/persistentProgressMonitor.ts

diff --git a/client/src/composables/persistentProgressMonitor.ts b/client/src/composables/persistentProgressMonitor.ts
new file mode 100644
index 000000000000..82765a1bfa1b
--- /dev/null
+++ b/client/src/composables/persistentProgressMonitor.ts
@@ -0,0 +1,146 @@
+import { StorageSerializers, useLocalStorage } from "@vueuse/core";
+import { computed } from "vue";
+
+import type { TaskMonitor } from "./genericTaskMonitor";
+
+type TaskType = "task" | "short_term_storage";
+
+/**
+ * Represents an object that is being processed in the background.
+ * Used to provide more context to the user when displaying the progress.
+ */
+interface ProcessedObject {
+    /** The ID of the object. */
+    id: string;
+
+    /**
+     * The type of the object.
+     * For example, "history", "dataset", "workflow", "invocation", etc.
+     */
+    type: string;
+
+    /**
+     * The name of the object.
+     * If the name is not provided, the ID will be used instead.
+     */
+    name?: string;
+}
+
+/**
+ * Provides information about a long-running asynchronous process that persists across page navigation or refresh.
+ * This information can be used to display progress to the user.
+ */
+export interface MonitoringRequest {
+    /**
+     * The component that initiated the task.
+     * This can be used to provide more context to the user when displaying the progress.
+     */
+    source: string;
+
+    /**
+     * The action of the task.
+     * This can be used to provide more context to the user when displaying the progress.
+     * For example, "import", "export", "delete", etc.
+     */
+    action: string;
+
+    /**
+     * The type of the task to monitor.
+     * This can be either a task or a short-term storage request.
+     */
+    taskType: TaskType;
+
+    /**
+     * The object being processed by the task.
+     * This can be used to provide more context to the user when displaying the progress.
+     */
+    object: ProcessedObject;
+
+    /**
+     * A human-readable description of the task.
+     * This is optional and can be used to provide more context to the user
+     * when displaying the progress.
+     */
+    description?: string;
+}
+
+interface MonitoringData {
+    /**
+     * The ID of the task or short-term storage request to monitor.
+     */
+    taskId: string;
+
+    /**
+     * The type of the task to monitor.
+     * This can be either a task or a short-term storage request.
+     */
+    taskType: TaskType;
+
+    /**
+     * The information about the task.
+     */
+    request: MonitoringRequest;
+}
+
+/**
+ * This composable is used to store the information about a long-running asynchronous process
+ * that persists across page navigation or refresh.
+ *
+ * It supports both task and short-term storage monitoring. The actual monitoring is done by the provided `useMonitor` composable.
+ */
+export function usePersistentProgressTaskMonitor(
+    request: MonitoringRequest,
+    useMonitor: TaskMonitor,
+    monitoringData: MonitoringData | null = null
+) {
+    const localStorageKey = getPersistentKey(request);
+
+    const currentMonitoringData = useLocalStorage<MonitoringData | null>(localStorageKey, monitoringData, {
+        serializer: StorageSerializers.object,
+    });
+
+    const hasMonitoringData = computed(() => {
+        return Boolean(currentMonitoringData.value);
+    });
+
+    const { waitForTask, isRunning, isCompleted, hasFailed, requestHasFailed } = useMonitor;
+
+    async function start(monitoringData?: MonitoringData) {
+        if (monitoringData) {
+            currentMonitoringData.value = monitoringData;
+        }
+
+        if (!currentMonitoringData.value) {
+            throw new Error("No monitoring data provided or stored. Cannot start monitoring progress.");
+        }
+
+        return waitForTask(currentMonitoringData.value.taskId);
+    }
+
+    function reset() {
+        currentMonitoringData.value = null;
+    }
+
+    function getPersistentKey(request: MonitoringRequest) {
+        return `persistent-progress-${request.taskType}-${request.source}-${request.action}-${request.object.type}-${request.object.id}`;
+    }
+
+    return {
+        /**
+         * Start monitoring the background process.
+         * If no monitoring data is provided, it will use the stored one.
+         * @param monitoringData Optional monitoring data to override the stored one.
+         */
+        start,
+
+        /**
+         * Clears the monitoring data in the local storage.
+         */
+        reset,
+        isRunning,
+        isCompleted,
+        hasFailed,
+        requestHasFailed,
+        hasMonitoringData,
+    };
+}

From e7febbc379c57deacd18ecaf8a3adae8be06f3e5 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 5 Jul 2024 17:24:32 +0200
Subject: [PATCH 12/17] Add status and stored task ID to persistent progress
 monitor

---
 client/src/composables/persistentProgressMonitor.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/composables/persistentProgressMonitor.ts b/client/src/composables/persistentProgressMonitor.ts
index 82765a1bfa1b..4065e26514d9 100644
--- a/client/src/composables/persistentProgressMonitor.ts
+++ b/client/src/composables/persistentProgressMonitor.ts
@@ -103,7 +103,7 @@ export function usePersistentProgressTaskMonitor(
         return Boolean(currentMonitoringData.value);
     });
 
-    const { waitForTask, isRunning, isCompleted, hasFailed, requestHasFailed } = useMonitor;
+    const { waitForTask, isRunning, isCompleted, hasFailed, requestHasFailed, status } = useMonitor;
 
     async function start(monitoringData?: MonitoringData) {
         if (monitoringData) {
@@ -142,5 +142,7 @@ export function usePersistentProgressTaskMonitor(
         hasFailed,
         requestHasFailed,
         hasMonitoringData,
+        storedTaskId: currentMonitoringData.value?.taskId,
+        status,
     };
 }

From eda9a218868b741446521e8724e2abfb40a85415 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 5 Jul 2024 18:36:16 +0200
Subject: [PATCH 13/17] Add unit tests for usePersistentProgressTaskMonitor

---
 .../persistentProgressMonitor.test.ts         | 89 +++++++++++++++++++
 .../composables/persistentProgressMonitor.ts  |  2 +-
 2 files changed, 90 insertions(+), 1 deletion(-)
 create mode 100644 client/src/composables/persistentProgressMonitor.test.ts

diff --git a/client/src/composables/persistentProgressMonitor.test.ts b/client/src/composables/persistentProgressMonitor.test.ts
new file mode 100644
index 000000000000..29c5f4eed3e9
--- /dev/null
+++ b/client/src/composables/persistentProgressMonitor.test.ts
@@ -0,0 +1,89 @@
+import { ref } from "vue";
+
+import { TaskMonitor } from "@/composables/genericTaskMonitor";
+import {
+    MonitoringData,
+    MonitoringRequest,
+    usePersistentProgressTaskMonitor,
+} from "@/composables/persistentProgressMonitor";
+
+// Mocks for dependencies
+jest.mock("@vueuse/core", () => ({
+    useLocalStorage: jest.fn().mockImplementation((key, initialValue) => ref(initialValue)),
+    StorageSerializers: {
+        object: {
+            read: (value: string) => JSON.parse(value),
+            write: (value: any) => JSON.stringify(value),
+        },
+    },
+}));
+
+function useMonitorMock(): TaskMonitor {
+    const isRunning = ref(false);
+    return {
+        waitForTask: jest.fn().mockImplementation(() => {
+            isRunning.value = true;
+        }),
+        isRunning,
+        isCompleted: ref(false),
+        hasFailed: ref(false),
+        requestHasFailed: ref(false),
+        status: ref(""),
+    };
+}
+const mockUseMonitor = useMonitorMock();
+
+const MOCK_REQUEST: MonitoringRequest = {
+    source: "testSource",
+    action: "export",
+    taskType: "task",
+    object: {
+        id: "1",
+        type: "dataset",
+    },
+    description: "Test description",
+};
+
+describe("usePersistentProgressTaskMonitor", () => {
+    it("should initialize with no monitoring data if none is provided or stored", () => {
+        const { hasMonitoringData } = usePersistentProgressTaskMonitor(MOCK_REQUEST, mockUseMonitor);
+        expect(hasMonitoringData.value).toBeFalsy();
+    });
+
+    it("should start monitoring with provided monitoring data", async () => {
+        const monitoringData: MonitoringData = {
+            taskId: "123",
+            taskType: "task",
+            request: MOCK_REQUEST,
+        };
+
+        const { start, isRunning } = usePersistentProgressTaskMonitor(MOCK_REQUEST, mockUseMonitor, monitoringData);
+
+        await start();
+        expect(isRunning.value).toBeTruthy();
+    });
+
+    it("should throw an error if trying to start monitoring without monitoring data", async () => {
+        const { start } = usePersistentProgressTaskMonitor(MOCK_REQUEST, mockUseMonitor);
+        await expect(start()).rejects.toThrow(
+            "No monitoring data provided or stored. Cannot start monitoring progress."
+        );
+    });
+
+    it("should reset monitoring data", () => {
+        const monitoringData: MonitoringData = {
+            taskId: "123",
+            taskType: "task",
+            request: MOCK_REQUEST,
+        };
+
+        const { reset, hasMonitoringData } = usePersistentProgressTaskMonitor(
+            MOCK_REQUEST,
+            mockUseMonitor,
+            monitoringData
+        );
+        expect(hasMonitoringData.value).toBeTruthy();
+        reset();
+        expect(hasMonitoringData.value).toBeFalsy();
+    });
+});
diff --git a/client/src/composables/persistentProgressMonitor.ts b/client/src/composables/persistentProgressMonitor.ts
index 4065e26514d9..f339cac411b4 100644
--- a/client/src/composables/persistentProgressMonitor.ts
+++ b/client/src/composables/persistentProgressMonitor.ts
@@ -64,7 +64,7 @@ export interface MonitoringRequest {
     description?: string;
 }
 
-interface MonitoringData {
+export interface MonitoringData {
     /**
      * The ID of the task or short-term storage request to monitor.
      */

From 7c8adb0a6baf9361027938547b574eb0de09e290 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:58:47 +0200
Subject: [PATCH 14/17] Add some docs to TaskMonitor interface

---
 client/src/composables/genericTaskMonitor.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/composables/genericTaskMonitor.ts b/client/src/composables/genericTaskMonitor.ts
index c549b09f9ba7..69236f44dab8 100644
--- a/client/src/composables/genericTaskMonitor.ts
+++ b/client/src/composables/genericTaskMonitor.ts
@@ -4,6 +4,10 @@ import { errorMessageAsString } from "@/utils/simple-error";
 
 const DEFAULT_POLL_DELAY = 10000;
 
+/**
+ * Represents a task monitor that can be used to wait for a background task to complete or
+ * check its status.
+ */
 export interface TaskMonitor {
     /**
      * Waits for a particular task ID to be completed.

From 696a674397859f31938cbba2c4c01bd6ca0cf2af Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 8 Jul 2024 14:59:57 +0200
Subject: [PATCH 15/17] Add PersistentTaskProgressMonitorAlert component

The PersistentTaskProgressMonitorAlert component is added to provide a visual representation of the progress of a long-running operation. It includes different alert messages for different states of the task, such as in progress, completed, failed, and request failed. The component also supports automatic download of the task result when it is completed, if enabled.
---
 ...PersistentTaskProgressMonitorAlert.test.ts | 183 ++++++++++++++++++
 .../PersistentTaskProgressMonitorAlert.vue    | 112 +++++++++++
 2 files changed, 295 insertions(+)
 create mode 100644 client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
 create mode 100644 client/src/components/Common/PersistentTaskProgressMonitorAlert.vue

diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
new file mode 100644
index 000000000000..30be2201aace
--- /dev/null
+++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.test.ts
@@ -0,0 +1,183 @@
+import { shallowMount } from "@vue/test-utils";
+import { type PropType, ref } from "vue";
+
+import { TaskMonitor } from "@/composables/genericTaskMonitor";
+import {
+    type MonitoringData,
+    MonitoringRequest,
+    usePersistentProgressTaskMonitor,
+} from "@/composables/persistentProgressMonitor";
+
+import PersistentTaskProgressMonitorAlert from "@/components/Common/PersistentTaskProgressMonitorAlert.vue";
+
+type ComponentUnderTestProps = Partial<PropType<typeof PersistentTaskProgressMonitorAlert>>;
+
+const FAKE_MONITOR_REQUEST: MonitoringRequest = {
+    source: "test",
+    action: "testing",
+    taskType: "task",
+    object: { id: "1", type: "dataset" },
+    description: "Test description",
+};
+
+const FAKE_MONITOR: TaskMonitor = {
+    waitForTask: jest.fn(),
+    isRunning: ref(false),
+    isCompleted: ref(false),
+    hasFailed: ref(false),
+    requestHasFailed: ref(false),
+    status: ref(""),
+};
+
+const mountComponent = (
+    props: ComponentUnderTestProps = {
+        monitorRequest: FAKE_MONITOR_REQUEST,
+        useMonitor: FAKE_MONITOR,
+    }
+) => {
+    return shallowMount(PersistentTaskProgressMonitorAlert as object, {
+        propsData: {
+            ...props,
+        },
+    });
+};
+
+describe("PersistentTaskProgressMonitorAlert.vue", () => {
+    beforeEach(() => {
+        usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, FAKE_MONITOR).reset();
+    });
+
+    it("does not render when no monitoring data is available", () => {
+        const wrapper = mountComponent();
+        expect(wrapper.find(".d-flex").exists()).toBe(false);
+    });
+
+    it("renders in progress when monitoring data is available and in progress", () => {
+        const useMonitor = {
+            ...FAKE_MONITOR,
+            isRunning: ref(true),
+        };
+        const existingMonitoringData: MonitoringData = {
+            taskId: "1",
+            taskType: "task",
+            request: FAKE_MONITOR_REQUEST,
+        };
+        usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData);
+
+        const wrapper = mountComponent({
+            monitorRequest: FAKE_MONITOR_REQUEST,
+            useMonitor,
+        });
+
+        expect(wrapper.find(".d-flex").exists()).toBe(true);
+
+        const inProgressAlert = wrapper.find('[variant="info"]');
+        expect(inProgressAlert.exists()).toBe(true);
+        expect(inProgressAlert.text()).toContain("Task is in progress");
+    });
+
+    it("renders completed when monitoring data is available and completed", () => {
+        const useMonitor = {
+            ...FAKE_MONITOR,
+            isCompleted: ref(true),
+        };
+        const existingMonitoringData: MonitoringData = {
+            taskId: "1",
+            taskType: "task",
+            request: FAKE_MONITOR_REQUEST,
+        };
+        usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData);
+
+        const wrapper = mountComponent({
+            monitorRequest: FAKE_MONITOR_REQUEST,
+            useMonitor,
+        });
+
+        expect(wrapper.find(".d-flex").exists()).toBe(true);
+
+        const completedAlert = wrapper.find('[variant="success"]');
+        expect(completedAlert.exists()).toBe(true);
+        expect(completedAlert.text()).toContain("Task completed");
+    });
+
+    it("renders failed when monitoring data is available and failed", () => {
+        const useMonitor = {
+            ...FAKE_MONITOR,
+            hasFailed: ref(true),
+        };
+        const existingMonitoringData: MonitoringData = {
+            taskId: "1",
+            taskType: "task",
+            request: FAKE_MONITOR_REQUEST,
+        };
+        usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData);
+
+        const wrapper = mountComponent({
+            monitorRequest: FAKE_MONITOR_REQUEST,
+            useMonitor,
+        });
+
+        expect(wrapper.find(".d-flex").exists()).toBe(true);
+
+        const failedAlert = wrapper.find('[variant="danger"]');
+        expect(failedAlert.exists()).toBe(true);
+        expect(failedAlert.text()).toContain("Task failed");
+    });
+
+    it("renders a link to download the task result when completed and task type is 'short_term_storage'", () => {
+        const taskId = "fake-task-id";
+        const monitoringRequest: MonitoringRequest = {
+            ...FAKE_MONITOR_REQUEST,
+            taskType: "short_term_storage",
+        };
+        const useMonitor = {
+            ...FAKE_MONITOR,
+            isCompleted: ref(true),
+        };
+        const existingMonitoringData: MonitoringData = {
+            taskId: taskId,
+            taskType: "short_term_storage",
+            request: monitoringRequest,
+        };
+        usePersistentProgressTaskMonitor(monitoringRequest, useMonitor, existingMonitoringData);
+
+        const wrapper = mountComponent({
+            monitorRequest: monitoringRequest,
+            useMonitor,
+        });
+
+        expect(wrapper.find(".d-flex").exists()).toBe(true);
+
+        const completedAlert = wrapper.find('[variant="success"]');
+        expect(completedAlert.exists()).toBe(true);
+
+        const downloadLink = wrapper.find(".download-link");
+        expect(downloadLink.exists()).toBe(true);
+        expect(downloadLink.text()).toContain("Download here");
+        expect(downloadLink.attributes("href")).toBe(`/api/short_term_storage/${taskId}`);
+    });
+
+    it("does not render a link to download the task result when completed and task type is 'task'", () => {
+        const useMonitor = {
+            ...FAKE_MONITOR,
+            isCompleted: ref(true),
+        };
+        const existingMonitoringData: MonitoringData = {
+            taskId: "1",
+            taskType: "task",
+            request: FAKE_MONITOR_REQUEST,
+        };
+        usePersistentProgressTaskMonitor(FAKE_MONITOR_REQUEST, useMonitor, existingMonitoringData);
+
+        const wrapper = mountComponent({
+            monitorRequest: FAKE_MONITOR_REQUEST,
+            useMonitor,
+        });
+
+        expect(wrapper.find(".d-flex").exists()).toBe(true);
+
+        const completedAlert = wrapper.find('[variant="success"]');
+        expect(completedAlert.exists()).toBe(true);
+        expect(completedAlert.text()).not.toContain("Download here");
+    });
+});
diff --git a/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue
new file mode 100644
index 000000000000..10af39cedcdb
--- /dev/null
+++ b/client/src/components/Common/PersistentTaskProgressMonitorAlert.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BAlert, BLink } from "bootstrap-vue";
+import { computed, watch } from "vue";
+
+import { TaskMonitor } from "@/composables/genericTaskMonitor";
+import { MonitoringRequest, usePersistentProgressTaskMonitor } from "@/composables/persistentProgressMonitor";
+import { useShortTermStorage } from "@/composables/shortTermStorage";
+
+library.add(faSpinner);
+
+interface Props {
+    monitorRequest: MonitoringRequest;
+    useMonitor: TaskMonitor;
+
+    /**
+     * The task ID to monitor. Can be a task ID or a short-term storage request ID.
+     * If provided, the component will start monitoring the task with the given ID.
+     */
+    taskId?: string;
+
+    /**
+     * If true, the download link will be automatically opened when the task is completed if the user
+     * remains on the page.
+     *
+     * Automatic download will only be possible if the task is completed and the task type is `short_term_storage`.
+     */
+    enableAutoDownload?: boolean;
+
+    inProgressMessage?: string;
+    completedMessage?: string;
+    failedMessage?: string;
+    requestFailedMessage?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    taskId: undefined,
+    enableAutoDownload: false,
+    inProgressMessage: `Task is in progress. Please wait...`,
+    completedMessage: "Task completed successfully.",
+    failedMessage: "Task failed.",
+    requestFailedMessage: "Request failed.",
+});
+
+const { getDownloadObjectUrl } = useShortTermStorage();
+
+const { hasMonitoringData, isRunning, isCompleted, hasFailed, requestHasFailed, storedTaskId, status, start, reset } =
+    usePersistentProgressTaskMonitor(props.monitorRequest, props.useMonitor);
+
+const downloadUrl = computed(() => {
+    // We can only download the result if the task is completed and the task type is short_term_storage.
+    const requestId = props.taskId || storedTaskId;
+    if (requestId && props.monitorRequest.taskType === "short_term_storage") {
+        return getDownloadObjectUrl(requestId);
+    }
+    return undefined;
+});
+
+if (hasMonitoringData.value) {
+    start();
+}
+
+watch(
+    () => props.taskId,
+    (newTaskId, oldTaskId) => {
+        if (newTaskId && newTaskId !== oldTaskId) {
+            start({ taskId: newTaskId, taskType: props.monitorRequest.taskType, request: props.monitorRequest });
+        }
+    }
+);
+
+watch(
+    () => isCompleted.value,
+    (completed) => {
+        // We check for props.taskId to be defined to avoid auto-downloading when the task is completed and
+        // the component is first mounted like when refreshing the page.
+        if (completed && props.enableAutoDownload && downloadUrl.value && props.taskId) {
+            window.open(downloadUrl.value, "_blank");
+        }
+    }
+);
+
+function dismissAlert() {
+    reset();
+}
+</script>
+
+<template>
+    <div v-if="hasMonitoringData" class="d-flex justify-content-end">
+        <BAlert v-if="isRunning" variant="info" show>
+            <b>{{ inProgressMessage }}</b>
+            <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
+        </BAlert>
+        <BAlert v-else-if="isCompleted" variant="success" show dismissible @dismissed="dismissAlert">
+            <span>{{ completedMessage }}</span>
+            <BLink v-if="downloadUrl" class="download-link" :href="downloadUrl">
+                <b>Download here</b>
+            </BLink>
+        </BAlert>
+        <BAlert v-else-if="hasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
+            <span>{{ failedMessage }}</span>
+            <span v-if="status">
+                Reason: <b>{{ status }}</b>
+            </span>
+        </BAlert>
+        <BAlert v-else-if="requestHasFailed" variant="danger" show dismissible @dismissed="dismissAlert">
+            <b>{{ requestFailedMessage }}</b>
+        </BAlert>
+    </div>
+</template>

From e3cfa01a89165c89021383ff0f79df5aeb051ea5 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 8 Jul 2024 15:06:48 +0200
Subject: [PATCH 16/17] Replace export logic in InvocationExportPluginCard

This will improve the export experience when the process is long so the
user can navigate away from the page and still see the progress of the
export or be able to download the result when it's ready.

- Remove the ExportToRemoteButton and the StsDownloadButton and replace them with a simpler ExportButton that only reacts to the busy state.
- Add 2 persistent progress trackers (alert) one for each type of export task.
---
 .../Invocation/Export/ExportButton.vue        |  32 ++++++
 .../Export/ExportToRemoteButton.vue           |  49 ---------
 .../Export/InvocationExportPluginCard.vue     | 100 ++++++++++++++----
 3 files changed, 110 insertions(+), 71 deletions(-)
 create mode 100644 client/src/components/Workflow/Invocation/Export/ExportButton.vue
 delete mode 100644 client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue

diff --git a/client/src/components/Workflow/Invocation/Export/ExportButton.vue b/client/src/components/Workflow/Invocation/Export/ExportButton.vue
new file mode 100644
index 000000000000..fd1199c2f739
--- /dev/null
+++ b/client/src/components/Workflow/Invocation/Export/ExportButton.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { IconDefinition, library } from "@fortawesome/fontawesome-svg-core";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+import { computed } from "vue";
+
+library.add(faSpinner);
+
+interface Props {
+    title: string;
+    idleIcon: IconDefinition;
+    isBusy?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    isBusy: false,
+});
+
+const disabled = computed(() => props.isBusy);
+
+const emit = defineEmits(["onClick"]);
+</script>
+
+<template>
+    <span v-b-tooltip.hover.bottom :title="title">
+        <BButton :disabled="disabled" @click="() => emit('onClick')">
+            <FontAwesomeIcon v-if="isBusy" :icon="faSpinner" spin />
+            <FontAwesomeIcon v-else :icon="idleIcon" />
+        </BButton>
+    </span>
+</template>
diff --git a/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue b/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue
deleted file mode 100644
index b7a1c56e698a..000000000000
--- a/client/src/components/Workflow/Invocation/Export/ExportToRemoteButton.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<script setup lang="ts">
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faCheckCircle, faCloudUploadAlt, faExclamationCircle, faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BButton } from "bootstrap-vue";
-import { watch } from "vue";
-
-import { useTaskMonitor } from "@/composables/taskMonitor";
-
-library.add(faCloudUploadAlt, faSpinner, faCheckCircle, faExclamationCircle);
-
-const { isRunning, isCompleted, hasFailed, requestHasFailed, waitForTask } = useTaskMonitor();
-
-interface Props {
-    title: string;
-    taskId?: string;
-}
-
-const props = defineProps<Props>();
-
-const emit = defineEmits(["onClick", "onSuccess", "onFailure"]);
-
-watch(
-    () => props.taskId,
-    (newTaskId, oldTaskId) => {
-        if (newTaskId && newTaskId !== oldTaskId) {
-            waitForTask(newTaskId);
-        }
-    }
-);
-
-watch([isCompleted, hasFailed, requestHasFailed], ([newIsCompleted, newHasFailed, newRequestHasFailed]) => {
-    if (newIsCompleted) {
-        emit("onSuccess");
-    }
-    if (newHasFailed || newRequestHasFailed) {
-        emit("onFailure");
-    }
-});
-</script>
-
-<template>
-    <BButton v-b-tooltip.hover.bottom :title="props.title" @click="() => emit('onClick')">
-        <FontAwesomeIcon v-if="isRunning" icon="spinner" spin />
-        <FontAwesomeIcon v-else-if="hasFailed || requestHasFailed" icon="exclamation-circle" />
-        <FontAwesomeIcon v-else-if="isCompleted" icon="check-circle" />
-        <FontAwesomeIcon v-else icon="cloud-upload-alt" />
-    </BButton>
-</template>
diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
index d0ae7ca3922a..2d5dfef23141 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.vue
@@ -1,35 +1,46 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faCloudUploadAlt, faDownload } from "@fortawesome/free-solid-svg-icons";
 import axios from "axios";
 import { BButtonGroup, BButtonToolbar, BCard, BCardTitle } from "bootstrap-vue";
 import { computed, provide, ref } from "vue";
 
 import { useMarkdown } from "@/composables/markdown";
+import { MonitoringRequest } from "@/composables/persistentProgressMonitor";
+import { useShortTermStorageMonitor } from "@/composables/shortTermStorageMonitor";
+import { useTaskMonitor } from "@/composables/taskMonitor";
 import { Toast } from "@/composables/toast";
 
 import { InvocationExportPlugin } from "./model";
 
 import ActionButton from "./ActionButton.vue";
-import StsDownloadButton from "@/components/StsDownloadButton.vue";
-import ExportToRemoteButton from "@/components/Workflow/Invocation/Export/ExportToRemoteButton.vue";
+import PersistentTaskProgressMonitorAlert from "@/components/Common/PersistentTaskProgressMonitorAlert.vue";
+import ExportButton from "@/components/Workflow/Invocation/Export/ExportButton.vue";
 import ExportToRemoteModal from "@/components/Workflow/Invocation/Export/ExportToRemoteModal.vue";
 
+library.add(faCloudUploadAlt, faDownload);
+
 const { renderMarkdown } = useMarkdown({ openLinksInNewPage: true });
 
 const exportRemoteModal = ref();
 const exportToRemoteTaskId = ref();
+const exportToStsRequestId = ref();
 
 interface Props {
     exportPlugin: InvocationExportPlugin;
     invocationId: string;
 }
 
+const taskMonitor = useTaskMonitor();
+const stsMonitor = useShortTermStorageMonitor();
+
 const props = defineProps<Props>();
 
 // Make `invocationId` available to child components via `inject`
 provide("invocationId", props.invocationId);
 
 const descriptionRendered = computed(() => renderMarkdown(props.exportPlugin.markdownDescription));
-const invocationDownloadUrl = computed(() => `/api/invocations/${props.invocationId}/prepare_store_download`);
+const preparedDownloadUrl = computed(() => `/api/invocations/${props.invocationId}/prepare_store_download`);
 const downloadParams = computed(() => {
     const exportParams = props.exportPlugin.exportParams;
     if (!exportParams) {
@@ -43,6 +54,28 @@ const downloadParams = computed(() => {
     };
 });
 
+const exportToStsRequest = computed<MonitoringRequest>(() => ({
+    source: props.exportPlugin.id,
+    action: "export",
+    taskType: "short_term_storage",
+    object: {
+        id: props.invocationId,
+        type: "invocation",
+    },
+    description: `Exporting invocation ${props.invocationId} to Short Term Storage in preparation for download`,
+}));
+
+const exportToRemoteRequest = computed<MonitoringRequest>(() => ({
+    source: props.exportPlugin.id,
+    action: "export",
+    taskType: "task",
+    object: {
+        id: props.invocationId,
+        type: "invocation",
+    },
+    description: `Exporting invocation ${props.invocationId} to remote source`,
+}));
+
 function openRemoteExportDialog() {
     exportRemoteModal.value.showModal();
 }
@@ -51,6 +84,15 @@ function closeRemoteExportDialog() {
     exportRemoteModal.value.hideModal();
 }
 
+async function exportToSts() {
+    try {
+        const response = await axios.post(preparedDownloadUrl.value, downloadParams.value);
+        exportToStsRequestId.value = response.data.storage_request_id;
+    } catch (err) {
+        Toast.error(`Failed to export invocation. ${err}`);
+    }
+}
+
 function exportToFileSource(exportDirectory: string, fileName: string) {
     if (!props.exportPlugin.exportParams) {
         throw new Error("Export parameters are not defined");
@@ -71,14 +113,6 @@ function exportToFileSource(exportDirectory: string, fileName: string) {
         });
     closeRemoteExportDialog();
 }
-
-function onExportToFileSourceSuccess() {
-    Toast.success(`Invocation successfully exported to remote source`);
-}
-
-function onExportToFileSourceFailure() {
-    Toast.error(`Failed to export to remote source`);
-}
 </script>
 
 <template>
@@ -88,18 +122,19 @@ function onExportToFileSourceFailure() {
                 {{ exportPlugin.title }}
                 <BButtonToolbar aria-label="Export Options">
                     <BButtonGroup>
-                        <StsDownloadButton
-                            :title="'Download Invocation as ' + exportPlugin.title"
-                            :download-endpoint="invocationDownloadUrl"
-                            :post-parameters="downloadParams"
-                            class="download-button" />
-                        <ExportToRemoteButton
-                            :title="'Export Invocation as ' + exportPlugin.title + ' and upload to remote source'"
-                            :task-id="exportToRemoteTaskId"
+                        <ExportButton
+                            :title="`Download Invocation as ${exportPlugin.title}`"
+                            :idle-icon="faDownload"
+                            :is-busy="stsMonitor.isRunning.value"
+                            class="download-button"
+                            @onClick="exportToSts">
+                        </ExportButton>
+                        <ExportButton
+                            :title="`Export Invocation as ${exportPlugin.title} and upload to Remote Source`"
+                            :idle-icon="faCloudUploadAlt"
+                            :is-busy="taskMonitor.isRunning.value"
                             class="remote-export-button"
-                            @onClick="openRemoteExportDialog"
-                            @onSuccess="onExportToFileSourceSuccess"
-                            @onFailure="onExportToFileSourceFailure" />
+                            @onClick="openRemoteExportDialog" />
                         <ActionButton
                             v-for="action in exportPlugin.additionalActions"
                             :key="action.id"
@@ -110,6 +145,27 @@ function onExportToFileSourceFailure() {
             </BCardTitle>
 
             <div class="markdown-description" v-html="descriptionRendered" />
+
+            <PersistentTaskProgressMonitorAlert
+                class="sts-export-monitor"
+                :monitor-request="exportToStsRequest"
+                :use-monitor="stsMonitor"
+                :task-id="exportToStsRequestId"
+                :enable-auto-download="true"
+                in-progress-message="Preparing your export package. Please wait..."
+                completed-message="Your export is ready! It will start downloading shortly. If it does not start automatically..."
+                failed-message="Your export has failed."
+                request-failed-message="Failed to check export progress. Try again later." />
+
+            <PersistentTaskProgressMonitorAlert
+                class="task-export-monitor"
+                :monitor-request="exportToRemoteRequest"
+                :use-monitor="taskMonitor"
+                :task-id="exportToRemoteTaskId"
+                in-progress-message="Exporting to remote source. It may take a while..."
+                completed-message="Export to remote source is complete!"
+                failed-message="Export to remote source has failed."
+                request-failed-message="Failed to check export progress. Try again later." />
         </BCard>
         <ExportToRemoteModal
             ref="exportRemoteModal"

From 286e805ef36befa0aa300af25247622451a3a9cb Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 8 Jul 2024 15:11:07 +0200
Subject: [PATCH 17/17] Drop unnecessary test

This is now tested in the PersistentTaskProgressMonitorAlert component
---
 .../Invocation/Export/InvocationExportPluginCard.test.ts   | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
index 4ee9832c2b50..a55c978a82f0 100644
--- a/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
+++ b/client/src/components/Workflow/Invocation/Export/InvocationExportPluginCard.test.ts
@@ -74,13 +74,6 @@ describe("InvocationExportPluginCard", () => {
         expect(remoteExportButton.exists()).toBeTruthy();
     });
 
-    it("should generate the expected download URL for the invocation", () => {
-        const downloadButton = wrapper.find(".download-button");
-        expect(downloadButton.attributes("downloadendpoint")).toBe(
-            `/api/invocations/${FAKE_INVOCATION_ID}/prepare_store_download`
-        );
-    });
-
     it("should display a button for each additional action", () => {
         const actionButtons = wrapper.findAll(".action-button");
         expect(actionButtons.length).toBe(FAKE_EXPORT_PLUGIN.additionalActions.length);