From 8b462d91512866fa04222befa9fb93966c0ddc8f Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 08:19:10 -0400
Subject: [PATCH 01/21] Initial pinia addition

---
 client/package.json |  1 +
 client/yarn.lock    | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/client/package.json b/client/package.json
index bac4e937718..2d9ef77b1ac 100644
--- a/client/package.json
+++ b/client/package.json
@@ -66,6 +66,7 @@
     "markdown-it": "^12.3.2",
     "markdown-it-regexp": "^0.4.0",
     "object-hash": "^3.0.0",
+    "pinia": "^2.0.17",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.0.0",
     "pyre-to-regexp": "^0.0.5",
diff --git a/client/yarn.lock b/client/yarn.lock
index 2a9e06df4fb..06b3267b929 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1981,6 +1981,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/devtools-api@^6.2.1":
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
+  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
+
 "@vue/test-utils@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.0.tgz#d563decdcd9c68a7bca151d4179a2bfd6d5c3e15"
@@ -7737,6 +7742,14 @@ pikaday@1.5.1:
   optionalDependencies:
     moment "2.x"
 
+pinia@^2.0.17:
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.17.tgz#f925e5e4f73c15e16dfb4838176a9ca50752f26b"
+  integrity sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==
+  dependencies:
+    "@vue/devtools-api" "^6.2.1"
+    vue-demi "*"
+
 pinkie-promise@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pinkie-promise/-/pinkie-promise-2.0.1.tgz#2135d6dfa7a358c069ac9b178776288228450ffa"
@@ -9935,6 +9948,11 @@ void-elements@^2.0.0:
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung==
 
+vue-demi@*:
+  version "0.13.6"
+  resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.13.6.tgz#f9433cbd75e68a970dec066647f4ba6c08ced48f"
+  integrity sha512-02NYpxgyGE2kKGegRPYlNQSL1UWfA/+JqvzhGCOYjhfbLWXU5QQX0+9pAm/R2sCOPKr5NBxVIab7fvFU0B1RxQ==
+
 vue-eslint-parser@^9.0.1:
   version "9.0.3"
   resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz#0c17a89e0932cc94fa6a79f0726697e13bfe3c96"

From 2e59be6befa06e4243af89607f3abf19481c1dab Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 15:18:15 -0400
Subject: [PATCH 02/21] Add @vue/composition-api

---
 client/package.json | 1 +
 client/yarn.lock    | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/client/package.json b/client/package.json
index 2d9ef77b1ac..5e1fb4d912c 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,6 +33,7 @@
     "@johmun/vue-tags-input": "^2.1.0",
     "@popperjs/core": "^2.11.5",
     "@sentry/browser": "^6.17.4",
+    "@vue/composition-api": "^1.7.0",
     "assert": "^2.0.0",
     "axios": "^0.25.0",
     "babel-runtime": "^6.26.0",
diff --git a/client/yarn.lock b/client/yarn.lock
index 06b3267b929..7d045cd07c9 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1981,6 +1981,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.0.tgz#26fae79e5023fc6c9dfd99ca5d3d357e1c5b9c60"
+  integrity sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==
+
 "@vue/devtools-api@^6.2.1":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"

From e394cdf65ecb3d115eb21d539777778c3cde9e1c Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 15:18:30 -0400
Subject: [PATCH 03/21] Test conversion of dbKeyStore to pinia

---
 .../components/providers/storeProviders.js    | 11 +++---
 client/src/store/dbKeyStore.js                | 34 -------------------
 client/src/store/index.js                     |  2 --
 client/src/stores/dbKeyStore.js               | 23 +++++++++++++
 4 files changed, 30 insertions(+), 40 deletions(-)
 delete mode 100644 client/src/store/dbKeyStore.js
 create mode 100644 client/src/stores/dbKeyStore.js

diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index 441daa77272..3cc1c2f2b64 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -1,10 +1,13 @@
 // Simple dataset provider, looks at api for result, renders to slot prop
 import axios from "axios";
 import { prependPath } from "utils/redirect";
-import { mapActions, mapGetters } from "vuex";
+import { mapActions as vuexMapActions, mapGetters } from "vuex";
 import { mapCacheActions } from "vuex-cache";
 import { HasAttributesMixin } from "./utils";
 
+import { useDbKeyStore } from "stores/dbKeyStore";
+import { mapActions, mapState } from "pinia";
+
 export const SimpleProviderMixin = {
     props: {
         id: { type: String, required: true },
@@ -57,7 +60,7 @@ export const DbKeyProvider = {
         await this.load();
     },
     methods: {
-        ...mapCacheActions(["fetchUploadDbKeys"]),
+        ...mapActions(useDbKeyStore, ["fetchUploadDbKeys"]),
         async load() {
             this.loading = true;
             let dbKeys = this.getUploadDbKeys();
@@ -70,7 +73,7 @@ export const DbKeyProvider = {
         },
     },
     computed: {
-        ...mapGetters(["getUploadDbKeys"]),
+        ...mapState(useDbKeyStore, ["uploadDbKeys"]),
     },
 };
 
@@ -171,7 +174,7 @@ export const StoreProvider = (storeAction, storeGetter, storeCountGetter = undef
             });
         },
         methods: {
-            ...mapActions([storeAction]),
+            ...vuexMapActions([storeAction]),
             async load() {
                 this.loading = true;
                 try {
diff --git a/client/src/store/dbKeyStore.js b/client/src/store/dbKeyStore.js
deleted file mode 100644
index b6882ee5b92..00000000000
--- a/client/src/store/dbKeyStore.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const state = {
-    uploadDbKeys: [],
-};
-import UploadUtils from "mvc/upload/upload-utils";
-
-const getters = {
-    getUploadDbKeys: (state) => () => {
-        return state.uploadDbKeys;
-    },
-};
-
-const actions = {
-    fetchUploadDbKeys: async ({ commit }) => {
-        try {
-            const data = await UploadUtils.getUploadDbKeys(UploadUtils.DEFAULT_DBKEY);
-            commit("saveUploadDbKeys", { dbKeys: data });
-        } catch (err) {
-            console.log("Error: unable to load Database/Builds", err);
-        }
-    },
-};
-
-const mutations = {
-    saveUploadDbKeys: (state, { dbKeys }) => {
-        state.uploadDbKeys = dbKeys;
-    },
-};
-
-export const dbKeyStore = {
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/client/src/store/index.js b/client/src/store/index.js
index bb9dc60f12e..e3174cbbe51 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -24,7 +24,6 @@ import { datasetPathDestinationStore } from "./datasetPathDestinationStore";
 import { datasetExtFilesStore } from "./datasetExtFilesStore";
 import { jobStore } from "./jobStore";
 import { collectionAttributesStore } from "./collectionAttributesStore";
-import { dbKeyStore } from "./dbKeyStore";
 import { datatypeStore } from "./datatypeStore";
 import { panelStore } from "./panelStore";
 
@@ -69,7 +68,6 @@ export function createStore() {
             informationStore: jobStore,
             invocations: invocationStore,
             jobMetrics: jobMetricsStore,
-            dbkeyStore: dbKeyStore,
             gridSearch: gridSearchStore,
             history: historyStore,
             historyItems: historyItemsStore,
diff --git a/client/src/stores/dbKeyStore.js b/client/src/stores/dbKeyStore.js
new file mode 100644
index 00000000000..ef1c53143e5
--- /dev/null
+++ b/client/src/stores/dbKeyStore.js
@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import UploadUtils from "mvc/upload/upload-utils";
+
+export const useDbKeyStore = defineStore(" dbKeyStore", {
+    state: () => ({
+        uploadDbKeys: [],
+    }),
+    getters: {
+        getUploadDbKeys: (state) => {
+            return state.uploadDbKeys;
+        },
+    },
+    actions: {
+        async fetchUploadDbKeys() {
+            try {
+                const data = await UploadUtils.getUploadDbKeys(UploadUtils.DEFAULT_DBKEY);
+                this.uploadDbKeys = data;
+            } catch (err) {
+                console.log("Error: unable to load Database/Builds", err);
+            }
+        },
+    },
+});

From eb9fce81d92ce3574c924eb0e0f7a54db625add5 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 15:37:24 -0400
Subject: [PATCH 04/21] Strap pinia onto app entrypoint

---
 client/src/entry/analysis/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/src/entry/analysis/index.js b/client/src/entry/analysis/index.js
index 31d03a70596..29a8f2ea5d4 100644
--- a/client/src/entry/analysis/index.js
+++ b/client/src/entry/analysis/index.js
@@ -4,6 +4,10 @@ import Vue, { provide } from "vue";
 import App from "./App.vue";
 import store from "store";
 import { getRouter } from "./router";
+import { createPinia, PiniaVuePlugin } from "pinia";
+
+Vue.use(PiniaVuePlugin);
+const pinia = createPinia();
 
 addInitialization((Galaxy) => {
     console.log("App setup");
@@ -16,6 +20,7 @@ addInitialization((Galaxy) => {
         },
         router: router,
         store: store,
+        pinia: pinia,
     });
 });
 

From 76b46a9b5660bf57308274611f8cd140fa2c16b7 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 15:39:05 -0400
Subject: [PATCH 05/21] Adjust access to state from DbKeyProvider

---
 client/src/components/providers/storeProviders.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index 3cc1c2f2b64..72c9441de08 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -63,17 +63,17 @@ export const DbKeyProvider = {
         ...mapActions(useDbKeyStore, ["fetchUploadDbKeys"]),
         async load() {
             this.loading = true;
-            let dbKeys = this.getUploadDbKeys();
+            let dbKeys = this.getUploadDbKeys;
             if (dbKeys == null || dbKeys.length == 0) {
                 await this.fetchUploadDbKeys();
-                dbKeys = this.getUploadDbKeys();
+                dbKeys = this.getUploadDbKeys;
             }
             this.item = dbKeys;
             this.loading = false;
         },
     },
     computed: {
-        ...mapState(useDbKeyStore, ["uploadDbKeys"]),
+        ...mapState(useDbKeyStore, ["getUploadDbKeys"]),
     },
 };
 

From 7594581cb72219567ad68cd5fca8437bbb643e84 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 15:49:28 -0400
Subject: [PATCH 06/21] Typo in store name

---
 client/src/stores/dbKeyStore.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/stores/dbKeyStore.js b/client/src/stores/dbKeyStore.js
index ef1c53143e5..1dadf6d0c28 100644
--- a/client/src/stores/dbKeyStore.js
+++ b/client/src/stores/dbKeyStore.js
@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import UploadUtils from "mvc/upload/upload-utils";
 
-export const useDbKeyStore = defineStore(" dbKeyStore", {
+export const useDbKeyStore = defineStore("dbKeyStore", {
     state: () => ({
         uploadDbKeys: [],
     }),

From 87f1f9547e9a835859bd0b8c5c6280bb36a88faa Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 27 Jul 2022 16:13:17 -0400
Subject: [PATCH 07/21] Convert datatypeStore over to pinia

---
 .../components/providers/storeProviders.js    |  9 ++---
 client/src/store/datatypeStore.js             | 34 -------------------
 client/src/store/index.js                     |  2 --
 client/src/stores/datatypeStore.js            | 23 +++++++++++++
 4 files changed, 28 insertions(+), 40 deletions(-)
 delete mode 100644 client/src/store/datatypeStore.js
 create mode 100644 client/src/stores/datatypeStore.js

diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index 72c9441de08..a35255b2006 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -7,6 +7,7 @@ import { HasAttributesMixin } from "./utils";
 
 import { useDbKeyStore } from "stores/dbKeyStore";
 import { mapActions, mapState } from "pinia";
+import { useDatatypeStore } from "../../stores/datatypeStore";
 
 export const SimpleProviderMixin = {
     props: {
@@ -86,20 +87,20 @@ export const DatatypesProvider = {
         await this.load();
     },
     methods: {
-        ...mapCacheActions(["fetchUploadDatatypes"]),
+        ...mapActions(useDatatypeStore, ["fetchUploadDatatypes"]),
         async load() {
             this.loading = true;
-            let datatypes = this.getUploadDatatypes();
+            let datatypes = this.getUploadDatatypes;
             if (datatypes == null || datatypes.length == 0) {
                 await this.fetchUploadDatatypes();
-                datatypes = this.getUploadDatatypes();
+                datatypes = this.getUploadDatatypes;
             }
             this.item = datatypes;
             this.loading = false;
         },
     },
     computed: {
-        ...mapGetters(["getUploadDatatypes"]),
+        ...mapState(useDatatypeStore, ["getUploadDatatypes"]),
     },
 };
 
diff --git a/client/src/store/datatypeStore.js b/client/src/store/datatypeStore.js
deleted file mode 100644
index 85dadbd4e3d..00000000000
--- a/client/src/store/datatypeStore.js
+++ /dev/null
@@ -1,34 +0,0 @@
-export const state = {
-    uploadDatatypes: [],
-};
-import UploadUtils from "mvc/upload/upload-utils";
-
-const getters = {
-    getUploadDatatypes: (state) => () => {
-        return state.uploadDatatypes;
-    },
-};
-
-const actions = {
-    fetchUploadDatatypes: async ({ commit }) => {
-        try {
-            const data = await UploadUtils.getUploadDatatypes(false, UploadUtils.AUTO_EXTENSION);
-            commit("saveUploadDatatypes", { datatypes: data });
-        } catch (err) {
-            console.log("Error: unable to load datatypes", err);
-        }
-    },
-};
-
-const mutations = {
-    saveUploadDatatypes: (state, { datatypes }) => {
-        state.uploadDatatypes = datatypes;
-    },
-};
-
-export const datatypeStore = {
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/client/src/store/index.js b/client/src/store/index.js
index e3174cbbe51..d121a7065da 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -24,7 +24,6 @@ import { datasetPathDestinationStore } from "./datasetPathDestinationStore";
 import { datasetExtFilesStore } from "./datasetExtFilesStore";
 import { jobStore } from "./jobStore";
 import { collectionAttributesStore } from "./collectionAttributesStore";
-import { datatypeStore } from "./datatypeStore";
 import { panelStore } from "./panelStore";
 
 // Syncs vuex to Galaxy store until Galaxy vals to not exist
@@ -64,7 +63,6 @@ export function createStore() {
             dataset: datasetStore,
             datasetExtFiles: datasetExtFilesStore,
             datasetPathDestination: datasetPathDestinationStore,
-            datatypeStore: datatypeStore,
             informationStore: jobStore,
             invocations: invocationStore,
             jobMetrics: jobMetricsStore,
diff --git a/client/src/stores/datatypeStore.js b/client/src/stores/datatypeStore.js
new file mode 100644
index 00000000000..e785e35f848
--- /dev/null
+++ b/client/src/stores/datatypeStore.js
@@ -0,0 +1,23 @@
+import { defineStore } from "pinia";
+import UploadUtils from "mvc/upload/upload-utils";
+
+export const useDatatypeStore = defineStore("datatypeStore", {
+    state: () => ({
+        uploadDatatypes: [],
+    }),
+    getters: {
+        getUploadDatatypes: (state) => {
+            return state.uploadDatatypes;
+        },
+    },
+    actions: {
+        async fetchUploadDatatypes() {
+            try {
+                const data = await UploadUtils.getUploadDatatypes(false, UploadUtils.AUTO_EXTENSION);
+                this.uploadDatatypes = data;
+            } catch (err) {
+                console.log("Error: unable to load datatypes", err);
+            }
+        },
+    },
+});

From 3bf4ff89f40832e230c812e60f2b529b7a649bcf Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 28 Jul 2022 10:43:24 -0400
Subject: [PATCH 08/21] First pass at pinia workflow store; need to fix getters
 still

---
 .../src/components/Workflow/Invocations.vue   | 11 +++--
 .../WorkflowInvocationDetails.vue             |  8 ++--
 .../components/providers/storeProviders.js    |  1 -
 client/src/store/index.js                     |  2 -
 client/src/store/workflowStore.js             | 46 -------------------
 client/src/stores/workflowStore.js            | 38 +++++++++++++++
 6 files changed, 49 insertions(+), 57 deletions(-)
 delete mode 100644 client/src/store/workflowStore.js
 create mode 100644 client/src/stores/workflowStore.js

diff --git a/client/src/components/Workflow/Invocations.vue b/client/src/components/Workflow/Invocations.vue
index 6b010de3d4d..429f7fdcfa1 100644
--- a/client/src/components/Workflow/Invocations.vue
+++ b/client/src/components/Workflow/Invocations.vue
@@ -80,14 +80,17 @@
 </template>
 
 <script>
+import { mapCacheActions } from "vuex-cache";
+import { mapGetters } from "vuex";
+import { mapActions, mapState } from "pinia";
 import { getAppRoot } from "onload/loadConfig";
+
 import { getGalaxyInstance } from "app";
 import { invocationsProvider } from "components/providers/InvocationsProvider";
 import WorkflowInvocationState from "components/WorkflowInvocationState/WorkflowInvocationState";
 import WorkflowRunButton from "./WorkflowRunButton.vue";
 import UtcDate from "components/UtcDate";
-import { mapCacheActions } from "vuex-cache";
-import { mapGetters } from "vuex";
+import { useWorkflowStore } from "stores/workflowStore";
 import paginationMixin from "./paginationMixin";
 
 export default {
@@ -125,7 +128,7 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["getWorkflowNameByInstanceId", "getWorkflowByInstanceId", "getStoredWorkflowIdByInstanceId"]),
+        ...mapState(useWorkflowStore, ["getWorkflowNameByInstanceId", "getWorkflowByInstanceId", "getStoredWorkflowIdByInstanceId"]),
         ...mapGetters("history", ["getHistoryById", "getHistoryNameById"]),
         title() {
             let title = `Workflow Invocations`;
@@ -160,7 +163,7 @@ export default {
         },
     },
     methods: {
-        ...mapCacheActions(["fetchWorkflowForInstanceId"]),
+        ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
         ...mapCacheActions("history", ["loadHistoryById"]),
         async provider(ctx) {
             ctx.root = this.root;
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index d6af91920ad..64515cd3d09 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -41,8 +41,8 @@ import ParameterStep from "./ParameterStep";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import WorkflowInvocationStep from "./WorkflowInvocationStep";
 
-import { mapGetters } from "vuex";
-import { mapCacheActions } from "vuex-cache";
+import { mapActions, mapState } from "pinia";
+import { useWorkflowStore } from "stores/workflowStore";
 
 export default {
     components: {
@@ -57,7 +57,7 @@ export default {
         },
     },
     computed: {
-        ...mapGetters(["getWorkflowByInstanceId"]),
+        ...mapState(useWorkflowStore, ["getWorkflowByInstanceId"]),
         workflow() {
             return this.getWorkflowByInstanceId(this.invocation.workflow_id);
         },
@@ -66,7 +66,7 @@ export default {
         this.fetchWorkflowForInstanceId(this.invocation.workflow_id);
     },
     methods: {
-        ...mapCacheActions(["fetchWorkflowForInstanceId"]),
+        ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
         dataInputStepLabel(key, input) {
             const invocationStep = this.invocation.steps[key];
             let label = invocationStep && invocationStep.workflow_step_label;
diff --git a/client/src/components/providers/storeProviders.js b/client/src/components/providers/storeProviders.js
index a35255b2006..f4df9359fd2 100644
--- a/client/src/components/providers/storeProviders.js
+++ b/client/src/components/providers/storeProviders.js
@@ -2,7 +2,6 @@
 import axios from "axios";
 import { prependPath } from "utils/redirect";
 import { mapActions as vuexMapActions, mapGetters } from "vuex";
-import { mapCacheActions } from "vuex-cache";
 import { HasAttributesMixin } from "./utils";
 
 import { useDbKeyStore } from "stores/dbKeyStore";
diff --git a/client/src/store/index.js b/client/src/store/index.js
index d121a7065da..c65b03a90bd 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -18,7 +18,6 @@ import { invocationStore } from "./invocationStore";
 import { collectionElementsStore, datasetStore, historyItemsStore, historyStore } from "./historyStore";
 import { userStore, userFlagsStore } from "./userStore";
 import { configStore } from "./configStore";
-import { workflowStore } from "./workflowStore";
 import { toolStore } from "./toolStore";
 import { datasetPathDestinationStore } from "./datasetPathDestinationStore";
 import { datasetExtFilesStore } from "./datasetExtFilesStore";
@@ -74,7 +73,6 @@ export function createStore() {
             tools: toolStore,
             user: userStore,
             userFlags: userFlagsStore,
-            workflows: workflowStore,
         },
     };
 
diff --git a/client/src/store/workflowStore.js b/client/src/store/workflowStore.js
deleted file mode 100644
index 9bec25bf9a1..00000000000
--- a/client/src/store/workflowStore.js
+++ /dev/null
@@ -1,46 +0,0 @@
-export const state = {
-    workflowsByInstanceId: {},
-};
-
-import Vue from "vue";
-import { getAppRoot } from "onload/loadConfig";
-import axios from "axios";
-
-const getters = {
-    getWorkflowByInstanceId: (state) => (workflowId) => {
-        return state.workflowsByInstanceId[workflowId];
-    },
-    getWorkflowNameByInstanceId: (state) => (workflowId) => {
-        const details = state.workflowsByInstanceId[workflowId];
-        if (details && details.name) {
-            return details.name;
-        } else {
-            return "...";
-        }
-    },
-    getStoredWorkflowIdByInstanceId: (state) => (workflowId) => {
-        const storedWorkflow = state.workflowsByInstanceId[workflowId];
-        return storedWorkflow?.id;
-    },
-};
-
-const actions = {
-    fetchWorkflowForInstanceId: async ({ commit }, workflowId) => {
-        const params = { instance: "true" };
-        const { data } = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`, { params });
-        commit("saveWorkflowForInstanceId", { workflowId, workflowData: data });
-    },
-};
-
-const mutations = {
-    saveWorkflowForInstanceId: (state, { workflowId, workflowData }) => {
-        Vue.set(state.workflowsByInstanceId, workflowId, workflowData);
-    },
-};
-
-export const workflowStore = {
-    state,
-    getters,
-    actions,
-    mutations,
-};
diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
new file mode 100644
index 00000000000..dc52030de24
--- /dev/null
+++ b/client/src/stores/workflowStore.js
@@ -0,0 +1,38 @@
+import { defineStore } from "pinia";
+import axios from "axios";
+
+import { getAppRoot } from "onload/loadConfig";
+
+export const useWorkflowStore = defineStore("workflowStore", {
+    state: () => ({
+        workflowsByInstanceId: {},
+    }),
+    getters: {
+        getWorkflowByInstanceId: (state) => {
+            return (workflowId) => state.workflowsByInstanceId[workflowId];
+        },
+        getWorkflowNameByInstanceId: (state) => {
+            return (workflowId) => {
+                const details = state.workflowsByInstanceId[workflowId];
+                if (details && details.name) {
+                    return details.name;
+                } else {
+                    return "...";
+                }
+            };
+        },
+        getStoredWorkflowIdByInstanceId: (state) => {
+            return (workflowId) => {
+                const storedWorkflow = state.workflowsByInstanceId[workflowId];
+                return storedWorkflow?.id;
+            };
+        },
+    },
+    actions: {
+        async fetchWorkflowForInstanceId(workflowId) {
+            const params = { instance: "true" };
+            const { data } = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`, { params });
+            this.$patch({ workflowId: data });
+        },
+    },
+});

From da34015c94695800f366e2c75f81c26be3be254e Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 28 Jul 2022 12:23:17 -0400
Subject: [PATCH 09/21] Rename 'Invocations' component to 'InvocationsList'
 component to satify multi-word component name

---
 .../{Invocations.test.js => InvocationsList.test.js} | 12 ++++++------
 .../{Invocations.vue => InvocationsList.vue}         |  0
 .../Workflow/StoredWorkflowInvocations.vue           |  6 +++---
 client/src/components/Workflow/UserInvocations.vue   |  6 +++---
 client/src/components/admin/ActiveInvocations.vue    |  8 ++++----
 5 files changed, 16 insertions(+), 16 deletions(-)
 rename client/src/components/Workflow/{Invocations.test.js => InvocationsList.test.js} (95%)
 rename client/src/components/Workflow/{Invocations.vue => InvocationsList.vue} (100%)

diff --git a/client/src/components/Workflow/Invocations.test.js b/client/src/components/Workflow/InvocationsList.test.js
similarity index 95%
rename from client/src/components/Workflow/Invocations.test.js
rename to client/src/components/Workflow/InvocationsList.test.js
index ebe93e2bdf8..1e73a6fe40e 100644
--- a/client/src/components/Workflow/Invocations.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -1,4 +1,4 @@
-import Invocations from "./Invocations";
+import InvocationsList from "./InvocationsList";
 import { mount } from "@vue/test-utils";
 import axios from "axios";
 import MockAdapter from "axios-mock-adapter";
@@ -10,7 +10,7 @@ import "jest-location-mock";
 
 const localVue = getLocalVue();
 
-describe("Invocations.vue", () => {
+describe("InvocationsList.vue", () => {
     let axiosMock;
     let wrapper;
 
@@ -28,7 +28,7 @@ describe("Invocations.vue", () => {
             const propsData = {
                 ownerGrid: false,
             };
-            wrapper = mount(Invocations, {
+            wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
             });
@@ -49,7 +49,7 @@ describe("Invocations.vue", () => {
             const propsData = {
                 ownerGrid: false,
             };
-            wrapper = mount(Invocations, {
+            wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
             });
@@ -68,7 +68,7 @@ describe("Invocations.vue", () => {
                 storedWorkflowName: "My Workflow",
                 storedWorkflowId: "abcde145678",
             };
-            wrapper = mount(Invocations, {
+            wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
             });
@@ -92,7 +92,7 @@ describe("Invocations.vue", () => {
                 ownerGrid: false,
                 loading: false,
             };
-            wrapper = mount(Invocations, {
+            wrapper = mount(InvocationsList, {
                 propsData,
                 computed: {
                     getWorkflowNameByInstanceId: (state) => (id) => "workflow name",
diff --git a/client/src/components/Workflow/Invocations.vue b/client/src/components/Workflow/InvocationsList.vue
similarity index 100%
rename from client/src/components/Workflow/Invocations.vue
rename to client/src/components/Workflow/InvocationsList.vue
diff --git a/client/src/components/Workflow/StoredWorkflowInvocations.vue b/client/src/components/Workflow/StoredWorkflowInvocations.vue
index 131ac5eb81d..5e48a832cc3 100644
--- a/client/src/components/Workflow/StoredWorkflowInvocations.vue
+++ b/client/src/components/Workflow/StoredWorkflowInvocations.vue
@@ -1,7 +1,7 @@
 <template>
     <CurrentUser v-slot="{ user }">
         <StoredWorkflowDetailsProvider v-slot="{ result: item, loading }" :stored-workflow-id="storedWorkflowId">
-            <Invocations
+            <InvocationsList
                 v-if="!loading && user.id"
                 :user-id="user.id"
                 :stored-workflow-id="item.id"
@@ -10,14 +10,14 @@
     </CurrentUser>
 </template>
 <script>
-import Invocations from "components/Workflow/Invocations";
+import InvocationsList from "components/Workflow/InvocationsList";
 import CurrentUser from "components/providers/CurrentUser";
 import { StoredWorkflowDetailsProvider } from "components/providers/StoredWorkflowsProvider";
 
 export default {
     components: {
         CurrentUser,
-        Invocations,
+        InvocationsList,
         StoredWorkflowDetailsProvider,
     },
     props: {
diff --git a/client/src/components/Workflow/UserInvocations.vue b/client/src/components/Workflow/UserInvocations.vue
index f95819e3013..99cc63bfc4f 100644
--- a/client/src/components/Workflow/UserInvocations.vue
+++ b/client/src/components/Workflow/UserInvocations.vue
@@ -1,15 +1,15 @@
 <template>
     <!-- Bit of an odd component, but the API returns all invocations for admins if no user id is included in request-->
-    <CurrentUser v-slot="{ user }"> <Invocations v-if="user.id" :user-id="user.id" /> </CurrentUser>
+    <CurrentUser v-slot="{ user }"> <InvocationsList v-if="user.id" :user-id="user.id" /> </CurrentUser>
 </template>
 <script>
-import Invocations from "components/Workflow/Invocations";
+import InvocationsList from "components/Workflow/InvocationsList";
 import CurrentUser from "components/providers/CurrentUser";
 
 export default {
     components: {
         CurrentUser,
-        Invocations,
+        InvocationsList,
     },
 };
 </script>
diff --git a/client/src/components/admin/ActiveInvocations.vue b/client/src/components/admin/ActiveInvocations.vue
index eedb0558e59..6da88975276 100644
--- a/client/src/components/admin/ActiveInvocations.vue
+++ b/client/src/components/admin/ActiveInvocations.vue
@@ -1,17 +1,17 @@
 <template>
-    <invocations
+    <invocations-list
         header-message="Workflow invocations that are still being scheduled are displayed on this page."
         no-invocations-message="There are no scheduling workflow invocations to show currently."
         :owner-grid="false">
-    </invocations>
+    </invocations-list>
 </template>
 
 <script>
-import Invocations from "../Workflow/Invocations";
+import InvocationsList from "../Workflow/InvocationsList";
 
 export default {
     components: {
-        Invocations,
+        InvocationsList,
     },
 };
 </script>

From 4f0894768fb8fa06bb3d115c4d65efa33451ed00 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 28 Jul 2022 12:30:59 -0400
Subject: [PATCH 10/21] Standardize InvocationsList PascalCase usage.

---
 client/src/components/admin/ActiveInvocations.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/admin/ActiveInvocations.vue b/client/src/components/admin/ActiveInvocations.vue
index 6da88975276..c94b30fbf2e 100644
--- a/client/src/components/admin/ActiveInvocations.vue
+++ b/client/src/components/admin/ActiveInvocations.vue
@@ -1,9 +1,9 @@
 <template>
-    <invocations-list
+    <InvocationsList
         header-message="Workflow invocations that are still being scheduled are displayed on this page."
         no-invocations-message="There are no scheduling workflow invocations to show currently."
         :owner-grid="false">
-    </invocations-list>
+    </InvocationsList>
 </template>
 
 <script>

From 088453b26e25829777f38821d56f915f0ea08818 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 5 Aug 2022 21:27:14 -0400
Subject: [PATCH 11/21] One more usage of workflowStore that needed to be
 swapped over

---
 .../WorkflowInvocationStep.vue                       | 12 ++++++++----
 client/src/stores/workflowStore.js                   |  1 +
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index 0336f4f9cc1..67f338450cc 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -84,8 +84,10 @@
     </div>
 </template>
 <script>
+import { useWorkflowStore } from "stores/workflowStore";
 import { mapCacheActions } from "vuex-cache";
-import { mapGetters, mapActions } from "vuex";
+import { mapGetters, mapActions as vuexMapActions } from "vuex";
+import { mapState, mapActions } from "pinia";
 import WorkflowIcons from "components/Workflow/icons";
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
@@ -114,7 +116,8 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["getToolForId", "getToolNameById", "getWorkflowByInstanceId", "getInvocationStepById"]),
+        ...mapState(useWorkflowStore, ["getWorkflowByInstanceId"]),
+        ...mapGetters(["getToolForId", "getToolNameById", "getInvocationStepById"]),
         isReady() {
             return this.invocation.steps.length > 0;
         },
@@ -142,8 +145,9 @@ export default {
         this.fetchSubworkflow();
     },
     methods: {
-        ...mapCacheActions(["fetchToolForId", "fetchWorkflowForInstanceId"]),
-        ...mapActions(["fetchInvocationStepById"]),
+        ...mapCacheActions(["fetchToolForId"]),
+        ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
+        ...vuexMapActions(["fetchInvocationStepById"]),
         fetchTool() {
             if (this.workflowStep.tool_id && !this.getToolForId(this.workflowStep.tool_id)) {
                 this.fetchToolForId(this.workflowStep.tool_id);
diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
index dc52030de24..981c15c1c5f 100644
--- a/client/src/stores/workflowStore.js
+++ b/client/src/stores/workflowStore.js
@@ -30,6 +30,7 @@ export const useWorkflowStore = defineStore("workflowStore", {
     },
     actions: {
         async fetchWorkflowForInstanceId(workflowId) {
+            console.debug("Fetching workflow details for", workflowId);
             const params = { instance: "true" };
             const { data } = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`, { params });
             this.$patch({ workflowId: data });

From 93e3d66c1fdcbf0142e23b70d37ae21152fa8b9b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 6 Aug 2022 09:33:03 -0400
Subject: [PATCH 12/21] Add getWorkflowIdByInstanceId getter

---
 client/src/stores/workflowStore.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
index 981c15c1c5f..9f3078a5146 100644
--- a/client/src/stores/workflowStore.js
+++ b/client/src/stores/workflowStore.js
@@ -9,7 +9,14 @@ export const useWorkflowStore = defineStore("workflowStore", {
     }),
     getters: {
         getWorkflowByInstanceId: (state) => {
-            return (workflowId) => state.workflowsByInstanceId[workflowId];
+            return (workflowId) => {
+                state.workflowsByInstanceId[workflowId];
+            };
+        },
+        getWorkflowIdByInstanceId: (state) => {
+            return (workflowId) => {
+                return state.workflowsByInstanceId[workflowId]?.id || '';
+            };
         },
         getWorkflowNameByInstanceId: (state) => {
             return (workflowId) => {

From f8dc07a741910e92dca6e8b7f95596b0a001bc92 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 6 Aug 2022 09:33:30 -0400
Subject: [PATCH 13/21] Use a patch function for updating state correctly

---
 client/src/stores/workflowStore.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
index 9f3078a5146..e577c37f2b2 100644
--- a/client/src/stores/workflowStore.js
+++ b/client/src/stores/workflowStore.js
@@ -40,7 +40,9 @@ export const useWorkflowStore = defineStore("workflowStore", {
             console.debug("Fetching workflow details for", workflowId);
             const params = { instance: "true" };
             const { data } = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`, { params });
-            this.$patch({ workflowId: data });
+            this.$patch(state => {
+                state.workflowsByInstanceId[workflowId] = data;
+            });
         },
     },
 });

From 4bdd1005691352eb5cd30db123209dd6ad55169b Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sat, 6 Aug 2022 22:56:23 -0400
Subject: [PATCH 14/21] Strap pinia into getLocalVue test helper, and use it
 for workflow invocation tests.

---
 client/src/components/Workflow/InvocationsList.test.js | 6 ++++++
 client/tests/jest/helpers.js                           | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index 1e73a6fe40e..8291821de81 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -6,10 +6,13 @@ import { getLocalVue } from "jest/helpers";
 import mockInvocationData from "./test/json/invocation.json";
 import { parseISO, formatDistanceToNow } from "date-fns";
 
+import { createPinia }from "pinia";
+
 import "jest-location-mock";
 
 const localVue = getLocalVue();
 
+const pinia = createPinia();
 describe("InvocationsList.vue", () => {
     let axiosMock;
     let wrapper;
@@ -52,6 +55,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia
             });
         });
 
@@ -71,6 +75,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
+                pinia
             });
         });
 
@@ -113,6 +118,7 @@ describe("InvocationsList.vue", () => {
                     },
                 },
                 localVue,
+                pinia
             });
         });
 
diff --git a/client/tests/jest/helpers.js b/client/tests/jest/helpers.js
index 27f42d756f4..429f3702e9d 100644
--- a/client/tests/jest/helpers.js
+++ b/client/tests/jest/helpers.js
@@ -11,6 +11,7 @@ import { iconPlugin } from "components/plugins/icons";
 import BootstrapVue from "bootstrap-vue";
 import Vuex from "vuex";
 import _l from "utils/localization";
+import { PiniaVuePlugin } from "pinia";
 
 const defaultComparator = (a, b) => a == b;
 
@@ -153,6 +154,7 @@ export function getLocalVue(instrumentLocalization = false) {
     const mockedDirective = {
         bind() {},
     };
+    localVue.use(PiniaVuePlugin);
     localVue.use(Vuex);
     localVue.use(BootstrapVue);
     const l = instrumentLocalization ? testLocalize : _l;

From adfc402168c76c3421ac7bc64bf390a6c483cc84 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Fri, 12 Aug 2022 15:30:54 -0400
Subject: [PATCH 15/21] Drop getWorkflowIdByInstanceId -- use 'stored' naming

---
 client/src/stores/workflowStore.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
index e577c37f2b2..6393244b4e0 100644
--- a/client/src/stores/workflowStore.js
+++ b/client/src/stores/workflowStore.js
@@ -13,11 +13,6 @@ export const useWorkflowStore = defineStore("workflowStore", {
                 state.workflowsByInstanceId[workflowId];
             };
         },
-        getWorkflowIdByInstanceId: (state) => {
-            return (workflowId) => {
-                return state.workflowsByInstanceId[workflowId]?.id || '';
-            };
-        },
         getWorkflowNameByInstanceId: (state) => {
             return (workflowId) => {
                 const details = state.workflowsByInstanceId[workflowId];

From 7894f37b67e8e6c2109487684d745188a2ec5efe Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Sun, 14 Aug 2022 06:03:29 -0400
Subject: [PATCH 16/21] We should no longer need @vue/composition-api with the
 upgrade to 2.7 now.

---
 client/package.json | 1 -
 client/yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/client/package.json b/client/package.json
index 5e1fb4d912c..2d9ef77b1ac 100644
--- a/client/package.json
+++ b/client/package.json
@@ -33,7 +33,6 @@
     "@johmun/vue-tags-input": "^2.1.0",
     "@popperjs/core": "^2.11.5",
     "@sentry/browser": "^6.17.4",
-    "@vue/composition-api": "^1.7.0",
     "assert": "^2.0.0",
     "axios": "^0.25.0",
     "babel-runtime": "^6.26.0",
diff --git a/client/yarn.lock b/client/yarn.lock
index 7d045cd07c9..06b3267b929 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1981,11 +1981,6 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/composition-api@^1.7.0":
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-1.7.0.tgz#26fae79e5023fc6c9dfd99ca5d3d357e1c5b9c60"
-  integrity sha512-hxOgLYR+wjuPX9bkP2pAPlqUs98XxBoa9DSLyp1z6+YR92wC42PZcZKs4d+VRtcv4udOv041Kss+F6ap5nj8YA==
-
 "@vue/devtools-api@^6.2.1":
   version "6.2.1"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"

From 3defea66b9887bf43cbf7d574543414a0cbab40c Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Thu, 15 Sep 2022 10:42:44 -0400
Subject: [PATCH 17/21] Pinia upgrade, cleanup.

---
 client/package.json                            |  2 +-
 .../Workflow/InvocationsList.test.js           |  8 ++++----
 .../components/Workflow/InvocationsList.vue    |  6 +++++-
 client/src/stores/workflowStore.js             |  2 +-
 client/yarn.lock                               | 18 +++++++++---------
 5 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/client/package.json b/client/package.json
index 2d9ef77b1ac..509f0468153 100644
--- a/client/package.json
+++ b/client/package.json
@@ -66,7 +66,7 @@
     "markdown-it": "^12.3.2",
     "markdown-it-regexp": "^0.4.0",
     "object-hash": "^3.0.0",
-    "pinia": "^2.0.17",
+    "pinia": "^2.0.23",
     "popper.js": "^1.16.1",
     "pretty-bytes": "^6.0.0",
     "pyre-to-regexp": "^0.0.5",
diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index 8291821de81..eba495d7806 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -6,7 +6,7 @@ import { getLocalVue } from "jest/helpers";
 import mockInvocationData from "./test/json/invocation.json";
 import { parseISO, formatDistanceToNow } from "date-fns";
 
-import { createPinia }from "pinia";
+import { createPinia } from "pinia";
 
 import "jest-location-mock";
 
@@ -55,7 +55,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
-                pinia
+                pinia,
             });
         });
 
@@ -75,7 +75,7 @@ describe("InvocationsList.vue", () => {
             wrapper = mount(InvocationsList, {
                 propsData,
                 localVue,
-                pinia
+                pinia,
             });
         });
 
@@ -118,7 +118,7 @@ describe("InvocationsList.vue", () => {
                     },
                 },
                 localVue,
-                pinia
+                pinia,
             });
         });
 
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
index 429f7fdcfa1..ed1cd2fc9ad 100644
--- a/client/src/components/Workflow/InvocationsList.vue
+++ b/client/src/components/Workflow/InvocationsList.vue
@@ -128,7 +128,11 @@ export default {
         };
     },
     computed: {
-        ...mapState(useWorkflowStore, ["getWorkflowNameByInstanceId", "getWorkflowByInstanceId", "getStoredWorkflowIdByInstanceId"]),
+        ...mapState(useWorkflowStore, [
+            "getWorkflowNameByInstanceId",
+            "getWorkflowByInstanceId",
+            "getStoredWorkflowIdByInstanceId",
+        ]),
         ...mapGetters("history", ["getHistoryById", "getHistoryNameById"]),
         title() {
             let title = `Workflow Invocations`;
diff --git a/client/src/stores/workflowStore.js b/client/src/stores/workflowStore.js
index 6393244b4e0..5ba6400e1fe 100644
--- a/client/src/stores/workflowStore.js
+++ b/client/src/stores/workflowStore.js
@@ -35,7 +35,7 @@ export const useWorkflowStore = defineStore("workflowStore", {
             console.debug("Fetching workflow details for", workflowId);
             const params = { instance: "true" };
             const { data } = await axios.get(`${getAppRoot()}api/workflows/${workflowId}`, { params });
-            this.$patch(state => {
+            this.$patch((state) => {
                 state.workflowsByInstanceId[workflowId] = data;
             });
         },
diff --git a/client/yarn.lock b/client/yarn.lock
index 06b3267b929..2b98dbf74bf 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -1981,10 +1981,10 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
-"@vue/devtools-api@^6.2.1":
-  version "6.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.2.1.tgz#6f2948ff002ec46df01420dfeff91de16c5b4092"
-  integrity sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ==
+"@vue/devtools-api@^6.4.4":
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.4.4.tgz#0b024fc8ca91bb4b6035abaf53c5aecc17119b3b"
+  integrity sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw==
 
 "@vue/test-utils@^1.3.0":
   version "1.3.0"
@@ -7742,12 +7742,12 @@ pikaday@1.5.1:
   optionalDependencies:
     moment "2.x"
 
-pinia@^2.0.17:
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.17.tgz#f925e5e4f73c15e16dfb4838176a9ca50752f26b"
-  integrity sha512-AtwLwEWQgIjofjgeFT+nxbnK5lT2QwQjaHNEDqpsi2AiCwf/NY78uWTeHUyEhiiJy8+sBmw0ujgQMoQbWiZDfA==
+pinia@^2.0.23:
+  version "2.0.23"
+  resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.0.23.tgz#570f5f82160b656b412602789683faa95502d227"
+  integrity sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==
   dependencies:
-    "@vue/devtools-api" "^6.2.1"
+    "@vue/devtools-api" "^6.4.4"
     vue-demi "*"
 
 pinkie-promise@^2.0.0:

From 6862135683fa4e387f3442c4209249fedac621d8 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 16 Nov 2022 09:16:18 -0500
Subject: [PATCH 18/21] Minor linting (mostly attr ordering)

---
 .../Collections/common/ChangeDatatypeTab.vue         |  2 +-
 .../Collections/common/DatabaseEditTab.vue           |  2 +-
 client/src/components/Common/Heading.vue             |  2 +-
 .../DatasetInformation/DatasetAttributes.vue         |  2 +-
 .../History/CurrentCollection/CollectionDetails.vue  |  2 +-
 client/src/components/Panels/ToolBox.vue             |  4 ++--
 client/src/components/User/APIKey/APIKey.vue         |  2 +-
 client/src/components/User/CloudAuth/CloudAuth.vue   |  2 +-
 .../User/DiskUsage/Quota/QuotaUsageSummary.vue       |  4 ++--
 client/src/components/User/UserPreferences.vue       |  2 +-
 client/src/entry/analysis/App.vue                    | 12 ++++++------
 client/src/entry/analysis/index.js                   |  2 +-
 client/src/entry/analysis/modules/Analysis.vue       |  2 +-
 13 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Collections/common/ChangeDatatypeTab.vue b/client/src/components/Collections/common/ChangeDatatypeTab.vue
index c547c2daf28..c6d2c2d22d6 100644
--- a/client/src/components/Collections/common/ChangeDatatypeTab.vue
+++ b/client/src/components/Collections/common/ChangeDatatypeTab.vue
@@ -13,8 +13,8 @@
         </div>
         <b>{{ l("New Type") }}: </b>
         <multiselect
-            class="datatype-dropdown"
             v-model="selectedDatatype"
+            class="datatype-dropdown"
             deselect-label="Can't remove this value"
             track-by="id"
             label="text"
diff --git a/client/src/components/Collections/common/DatabaseEditTab.vue b/client/src/components/Collections/common/DatabaseEditTab.vue
index 0817a05223c..1296b0c64eb 100644
--- a/client/src/components/Collections/common/DatabaseEditTab.vue
+++ b/client/src/components/Collections/common/DatabaseEditTab.vue
@@ -13,8 +13,8 @@
         </div>
         <b>{{ l("Database/Build") }}: </b>
         <multiselect
-            class="database-dropdown"
             v-model="selectedGenome"
+            class="database-dropdown"
             deselect-label="Can't remove this value"
             track-by="id"
             label="text"
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index cc65a441075..811965c8b45 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -42,8 +42,8 @@ if (props.size) {
         <div class="stripe"></div>
     </div>
     <component
-        v-else
         :is="element"
+        v-else
         class="heading"
         :class="[sizeClass, props.bold ? 'font-weight-bold' : '', props.inline ? 'inline' : '']">
         <FontAwesomeIcon v-if="props.icon" :icon="props.icon" />
diff --git a/client/src/components/DatasetInformation/DatasetAttributes.vue b/client/src/components/DatasetInformation/DatasetAttributes.vue
index a0ba1641290..dd942966dd0 100644
--- a/client/src/components/DatasetInformation/DatasetAttributes.vue
+++ b/client/src/components/DatasetInformation/DatasetAttributes.vue
@@ -1,6 +1,6 @@
 <template>
     <div aria-labelledby="dataset-attributes-heading">
-        <h1 id="dataset-attributes-heading" class="h-lg" v-localize>Edit Dataset Attributes</h1>
+        <h1 id="dataset-attributes-heading" v-localize class="h-lg">Edit Dataset Attributes</h1>
         <b-alert v-if="messageText" :variant="messageVariant" show>
             {{ messageText | l }}
         </b-alert>
diff --git a/client/src/components/History/CurrentCollection/CollectionDetails.vue b/client/src/components/History/CurrentCollection/CollectionDetails.vue
index 58c077a777b..704e870a519 100644
--- a/client/src/components/History/CurrentCollection/CollectionDetails.vue
+++ b/client/src/components/History/CurrentCollection/CollectionDetails.vue
@@ -7,7 +7,7 @@
         @save="$emit('update:dsc', $event)">
         <template v-slot:name>
             <!-- eslint-disable-next-line vuejs-accessibility/heading-has-content -->
-            <h2 class="h-md" v-short="dsc.name || 'Collection'" data-description="collection name display" />
+            <h2 v-short="dsc.name || 'Collection'" class="h-md" data-description="collection name display" />
             <CollectionDescription
                 :job-state-summary="jobState"
                 :collection-type="dsc.collection_type"
diff --git a/client/src/components/Panels/ToolBox.vue b/client/src/components/Panels/ToolBox.vue
index b99cfcb4581..ae250416af5 100644
--- a/client/src/components/Panels/ToolBox.vue
+++ b/client/src/components/Panels/ToolBox.vue
@@ -3,8 +3,8 @@
         <div unselectable="on">
             <div class="unified-panel-header-inner">
                 <nav class="d-flex justify-content-between mx-3 my-2">
-                    <h2 v-if="!showAdvanced" v-localize id="toolbox-heading" class="m-1 h-sm">Tools</h2>
-                    <h2 v-else v-localize id="toolbox-heading" class="m-1 h-sm">Advanced Tool Search</h2>
+                    <h2 v-if="!showAdvanced" id="toolbox-heading" v-localize class="m-1 h-sm">Tools</h2>
+                    <h2 v-else id="toolbox-heading" v-localize class="m-1 h-sm">Advanced Tool Search</h2>
 
                     <div class="panel-header-buttons">
                         <b-button-group>
diff --git a/client/src/components/User/APIKey/APIKey.vue b/client/src/components/User/APIKey/APIKey.vue
index 557de33be38..073c7172225 100644
--- a/client/src/components/User/APIKey/APIKey.vue
+++ b/client/src/components/User/APIKey/APIKey.vue
@@ -32,7 +32,7 @@ getAPIKey();
 
 <template>
     <section class="api-key d-flex flex-column">
-        <h1 class="h-lg" v-localize>Manage API Key</h1>
+        <h1 v-localize class="h-lg">Manage API Key</h1>
 
         <span v-localize class="mb-2">
             An API key will allow you to access via web API. Please note that this key acts as an alternate means to
diff --git a/client/src/components/User/CloudAuth/CloudAuth.vue b/client/src/components/User/CloudAuth/CloudAuth.vue
index cb2541c858c..4235458ea8e 100644
--- a/client/src/components/User/CloudAuth/CloudAuth.vue
+++ b/client/src/components/User/CloudAuth/CloudAuth.vue
@@ -6,7 +6,7 @@
             </b-alert>
 
             <hgroup class="cloud-auth-title">
-                <h1 class="h-lg" v-localize>Manage Cloud Authorization</h1>
+                <h1 v-localize class="h-lg">Manage Cloud Authorization</h1>
                 <nav class="operations">
                     <ul>
                         <li class="cloudKeyHelp">
diff --git a/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue b/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
index f77f2c5bedb..f6badcf2414 100644
--- a/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
+++ b/client/src/components/User/DiskUsage/Quota/QuotaUsageSummary.vue
@@ -3,13 +3,13 @@
         <div class="text-center my-5">
             <div v-if="allSourcesUnlimited">
                 <h2>You've got <b>unlimited</b> disk quota</h2>
-                <h3 class="h-sm" v-localize>All your storage sources have unlimited disk space. Enjoy!</h3>
+                <h3 v-localize class="h-sm">All your storage sources have unlimited disk space. Enjoy!</h3>
             </div>
             <div v-else>
                 <h2>
                     You've got <b> {{ niceTotalQuota }} </b> of total disk quota
                 </h2>
-                <h3 class="h-sm" v-localize>
+                <h3 v-localize class="h-sm">
                     This is the maximum disk space that you can use across all your storage sources. Unlimited storage
                     sources are not taken into account
                 </h3>
diff --git a/client/src/components/User/UserPreferences.vue b/client/src/components/User/UserPreferences.vue
index 6c156e34fad..aab37c9cac4 100644
--- a/client/src/components/User/UserPreferences.vue
+++ b/client/src/components/User/UserPreferences.vue
@@ -1,6 +1,6 @@
 <template>
     <b-container fluid class="p-0">
-        <h1 class="h-lg" v-localize>User preferences</h1>
+        <h1 v-localize class="h-lg">User preferences</h1>
         <b-alert :variant="messageVariant" :show="!!message">
             {{ message }}
         </b-alert>
diff --git a/client/src/entry/analysis/App.vue b/client/src/entry/analysis/App.vue
index 6fdf6275f3c..53f412848b9 100644
--- a/client/src/entry/analysis/App.vue
+++ b/client/src/entry/analysis/App.vue
@@ -56,6 +56,12 @@ export default {
         Masthead,
         Toast,
     },
+    setup() {
+        const toastRef = ref(null);
+        setToastComponentRef(toastRef);
+
+        return { toastRef };
+    },
     data() {
         return {
             config: getGalaxyInstance().config,
@@ -64,12 +70,6 @@ export default {
             windowManager: new WindowManager(),
         };
     },
-    setup() {
-        const toastRef = ref(null);
-        setToastComponentRef(toastRef);
-
-        return { toastRef };
-    },
     computed: {
         tabs() {
             return fetchMenu(this.config);
diff --git a/client/src/entry/analysis/index.js b/client/src/entry/analysis/index.js
index 29a8f2ea5d4..175a61e15a8 100644
--- a/client/src/entry/analysis/index.js
+++ b/client/src/entry/analysis/index.js
@@ -14,10 +14,10 @@ addInitialization((Galaxy) => {
     const router = getRouter(Galaxy);
     new Vue({
         el: "#app",
-        render: (h) => h(App),
         setup() {
             provide("store", store);
         },
+        render: (h) => h(App),
         router: router,
         store: store,
         pinia: pinia,
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index e441a6d713c..36b1a8af328 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -9,7 +9,7 @@
             <div class="center-container">
                 <CenterFrame v-show="showCenter" id="galaxy_main" @load="onLoad" />
                 <div v-show="!showCenter" class="center-panel" style="display: block">
-                    <router-view class="h-100" :key="$route.fullPath" />
+                    <router-view :key="$route.fullPath" class="h-100" />
                 </div>
             </div>
         </div>

From 3410b6f08742aa42037c95b31102d03c7ef41b0e Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 16 Nov 2022 16:56:40 -0500
Subject: [PATCH 19/21] Swap workflow details to composition while debugging

---
 .../WorkflowInvocationDetails.vue             | 71 ++++++++-----------
 1 file changed, 31 insertions(+), 40 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 64515cd3d09..2b7802eb07c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -36,49 +36,40 @@
         </b-tabs>
     </div>
 </template>
-<script>
+<script setup>
+import { computed, onMounted } from "vue";
+
+import { useWorkflowStore } from "stores/workflowStore";
+
 import ParameterStep from "./ParameterStep";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import WorkflowInvocationStep from "./WorkflowInvocationStep";
 
-import { mapActions, mapState } from "pinia";
-import { useWorkflowStore } from "stores/workflowStore";
+const props = defineProps({
+    invocation: {
+        type: Object,
+        required: true,
+    },
+});
 
-export default {
-    components: {
-        GenericHistoryItem,
-        WorkflowInvocationStep,
-        ParameterStep,
-    },
-    props: {
-        invocation: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        ...mapState(useWorkflowStore, ["getWorkflowByInstanceId"]),
-        workflow() {
-            return this.getWorkflowByInstanceId(this.invocation.workflow_id);
-        },
-    },
-    created: function () {
-        this.fetchWorkflowForInstanceId(this.invocation.workflow_id);
-    },
-    methods: {
-        ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
-        dataInputStepLabel(key, input) {
-            const invocationStep = this.invocation.steps[key];
-            let label = invocationStep && invocationStep.workflow_step_label;
-            if (!label) {
-                if (input.src === "hda" || input.src === "ldda") {
-                    label = "Input dataset";
-                } else if (input.src === "hdca") {
-                    label = "Input dataset collection";
-                }
-            }
-            return label;
-        },
-    },
-};
+const workflowStore = useWorkflowStore();
+
+const workflow = computed(() => workflowStore.getWorkflowByInstanceId(props.invocation.workflow_id));
+
+onMounted(() => {
+    workflowStore.fetchWorkflowForInstanceId(props.invocation.workflow_id);
+});
+
+function dataInputStepLabel(key, input) {
+    const invocationStep = props.invocation.steps[key];
+    let label = invocationStep && invocationStep.workflow_step_label;
+    if (!label) {
+        if (input.src === "hda" || input.src === "ldda") {
+            label = "Input dataset";
+        } else if (input.src === "hdca") {
+            label = "Input dataset collection";
+        }
+    }
+    return label;
+}
 </script>

From 70ace727f9dee94925ca8c872a2dfb1292de72ad Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 16 Nov 2022 16:56:59 -0500
Subject: [PATCH 20/21] Fix computed access

---
 .../WorkflowInvocationDetails.vue             | 79 ++++++++++---------
 1 file changed, 42 insertions(+), 37 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 2b7802eb07c..35667b4c6ed 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -1,3 +1,45 @@
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { storeToRefs } from "pinia";
+
+import { useWorkflowStore } from "stores/workflowStore";
+
+import ParameterStep from "./ParameterStep";
+import GenericHistoryItem from "components/History/Content/GenericItem";
+import WorkflowInvocationStep from "./WorkflowInvocationStep";
+
+const workflow = ref(null);
+
+const props = defineProps({
+    invocation: {
+        type: Object,
+        required: true,
+    },
+});
+
+const workflowStore = useWorkflowStore();
+
+const { getWorkflowByInstanceId } = storeToRefs(workflowStore);
+
+function dataInputStepLabel(key, input) {
+    const invocationStep = props.invocation.steps[key];
+    let label = invocationStep && invocationStep.workflow_step_label;
+    if (!label) {
+        if (input.src === "hda" || input.src === "ldda") {
+            label = "Input dataset";
+        } else if (input.src === "hdca") {
+            label = "Input dataset collection";
+        }
+    }
+    return label;
+}
+
+onMounted(async () => {
+    await workflowStore.fetchWorkflowForInstanceId(props.invocation.workflow_id);
+    workflow.value = getWorkflowByInstanceId(props.invocation.workflow_id);
+});
+
+</script>
 <template>
     <div v-if="invocation">
         <b-tabs lazy>
@@ -36,40 +78,3 @@
         </b-tabs>
     </div>
 </template>
-<script setup>
-import { computed, onMounted } from "vue";
-
-import { useWorkflowStore } from "stores/workflowStore";
-
-import ParameterStep from "./ParameterStep";
-import GenericHistoryItem from "components/History/Content/GenericItem";
-import WorkflowInvocationStep from "./WorkflowInvocationStep";
-
-const props = defineProps({
-    invocation: {
-        type: Object,
-        required: true,
-    },
-});
-
-const workflowStore = useWorkflowStore();
-
-const workflow = computed(() => workflowStore.getWorkflowByInstanceId(props.invocation.workflow_id));
-
-onMounted(() => {
-    workflowStore.fetchWorkflowForInstanceId(props.invocation.workflow_id);
-});
-
-function dataInputStepLabel(key, input) {
-    const invocationStep = props.invocation.steps[key];
-    let label = invocationStep && invocationStep.workflow_step_label;
-    if (!label) {
-        if (input.src === "hda" || input.src === "ldda") {
-            label = "Input dataset";
-        } else if (input.src === "hdca") {
-            label = "Input dataset collection";
-        }
-    }
-    return label;
-}
-</script>

From edf7588d7d96f244a3e828b8e9744cd5d2dec361 Mon Sep 17 00:00:00 2001
From: Dannon Baker <dannon.baker@gmail.com>
Date: Wed, 16 Nov 2022 20:27:39 -0500
Subject: [PATCH 21/21] Fix reactivity in WorkflowInvocationState, only fetch
 on mounted if it's not already in the store.

---
 .../WorkflowInvocationDetails.vue                 | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
index 35667b4c6ed..fcf9af8baba 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationDetails.vue
@@ -1,6 +1,5 @@
 <script setup>
-import { computed, onMounted, ref } from "vue";
-import { storeToRefs } from "pinia";
+import { computed, onMounted } from "vue";
 
 import { useWorkflowStore } from "stores/workflowStore";
 
@@ -8,8 +7,6 @@ import ParameterStep from "./ParameterStep";
 import GenericHistoryItem from "components/History/Content/GenericItem";
 import WorkflowInvocationStep from "./WorkflowInvocationStep";
 
-const workflow = ref(null);
-
 const props = defineProps({
     invocation: {
         type: Object,
@@ -19,7 +16,9 @@ const props = defineProps({
 
 const workflowStore = useWorkflowStore();
 
-const { getWorkflowByInstanceId } = storeToRefs(workflowStore);
+const workflow = computed(() => {
+    return workflowStore.workflowsByInstanceId[props.invocation.workflow_id];
+});
 
 function dataInputStepLabel(key, input) {
     const invocationStep = props.invocation.steps[key];
@@ -35,10 +34,10 @@ function dataInputStepLabel(key, input) {
 }
 
 onMounted(async () => {
-    await workflowStore.fetchWorkflowForInstanceId(props.invocation.workflow_id);
-    workflow.value = getWorkflowByInstanceId(props.invocation.workflow_id);
+    if (!workflowStore.workflowsByInstanceId[props.invocation.workflow_id]) {
+        workflowStore.fetchWorkflowForInstanceId(props.invocation.workflow_id);
+    }
 });
-
 </script>
 <template>
     <div v-if="invocation">