From 2bff457506c79696dae1e549b52f43b9bf38938f Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 12:10:07 +0100
Subject: [PATCH 01/13] Remove unused store map getters from summary

---
 .../WorkflowInvocationSummary.test.js         | 21 -------------------
 .../WorkflowInvocationSummary.vue             |  2 --
 2 files changed, 23 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
index a5e95500ef40..e98d77fbc96b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
@@ -1,20 +1,9 @@
 import { shallowMount } from "@vue/test-utils";
 import { getLocalVue } from "tests/jest/helpers";
-import Vuex from "vuex";
 
 import invocationData from "../Workflow/test/json/invocation.json";
 import WorkflowInvocationSummary from "./WorkflowInvocationSummary";
 
-const invocationJobsSummaryById = {
-    id: "d9833097445452b0",
-    model: "WorkflowInvocation",
-    states: {},
-    populated_state: "ok",
-};
-
-const mockComputed = {
-    getInvocationJobsSummaryById: () => () => invocationJobsSummaryById,
-};
 
 const localVue = getLocalVue();
 
@@ -30,7 +19,6 @@ describe("WorkflowInvocationSummary.vue with terminal invocation", () => {
         };
         wrapper = shallowMount(WorkflowInvocationSummary, {
             propsData,
-            computed: mockComputed,
             localVue,
         });
     });
@@ -49,16 +37,8 @@ describe("WorkflowInvocationSummary.vue with invocation scheduling running", ()
     let wrapper;
     let propsData;
     let store;
-    let actions;
 
     beforeEach(async () => {
-        actions = {
-            fetchInvocationForId: jest.fn(),
-            fetchInvocationJobsSummaryForId: jest.fn(),
-        };
-        store = new Vuex.Store({
-            actions,
-        });
         propsData = {
             invocation: invocationData,
             invocationAndJobTerminal: false,
@@ -67,7 +47,6 @@ describe("WorkflowInvocationSummary.vue with invocation scheduling running", ()
         wrapper = shallowMount(WorkflowInvocationSummary, {
             store,
             propsData,
-            computed: mockComputed,
             localVue,
         });
     });
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
index 3b30faf87d73..4b90ce1b5f2b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.vue
@@ -68,7 +68,6 @@ import mixin from "components/JobStates/mixin";
 import LoadingSpan from "components/LoadingSpan";
 import ProgressBar from "components/ProgressBar";
 import { getRootFromIndexLink } from "onload";
-import { mapGetters } from "vuex";
 
 import InvocationMessage from "@/components/WorkflowInvocationState/InvocationMessage.vue";
 
@@ -112,7 +111,6 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["getInvocationById", "getInvocationJobsSummaryById"]),
         invocationId() {
             return this.invocation?.id;
         },

From 37cbe3563e9f74810fba15585846cc486d856c66 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 12:19:09 +0100
Subject: [PATCH 02/13] Remove unused vuex references from step component

---
 .../WorkflowInvocationState/WorkflowInvocationStep.vue         | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
index ea5da90e8b45..d37e6fa1580b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue
@@ -95,7 +95,6 @@ import WorkflowIcons from "components/Workflow/icons";
 import { mapActions, mapState } from "pinia";
 import { useToolStore } from "stores/toolStore";
 import { useWorkflowStore } from "stores/workflowStore";
-import { mapActions as vuexMapActions, mapGetters } from "vuex";
 
 import JobStep from "./JobStep";
 import ParameterStep from "./ParameterStep";
@@ -126,7 +125,6 @@ export default {
     computed: {
         ...mapState(useWorkflowStore, ["getStoredWorkflowByInstanceId"]),
         ...mapState(useToolStore, ["getToolForId", "getToolNameById"]),
-        ...mapGetters(["getInvocationStepById"]),
         isReady() {
             return this.invocation.steps.length > 0;
         },
@@ -156,7 +154,6 @@ export default {
     methods: {
         ...mapActions(useWorkflowStore, ["fetchWorkflowForInstanceId"]),
         ...mapActions(useToolStore, ["fetchToolForId"]),
-        ...vuexMapActions(["fetchInvocationStepById"]),
         fetchTool() {
             if (this.workflowStep.tool_id && !this.getToolForId(this.workflowStep.tool_id)) {
                 this.fetchToolForId(this.workflowStep.tool_id);

From 0894623ffe444470b396a7daaddedb62438fcd62 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:01:52 +0100
Subject: [PATCH 03/13] Add provisional invocation API types and fetchers

The interfaces should be replaced by the generated schema models and the fetch functions with the generated schema fetchers.
---
 client/src/api/invocations.ts | 42 +++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 client/src/api/invocations.ts

diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
new file mode 100644
index 000000000000..75cf94a1455a
--- /dev/null
+++ b/client/src/api/invocations.ts
@@ -0,0 +1,42 @@
+import axios from "axios";
+
+import { getAppRoot } from "@/onload";
+
+import { ApiResponse } from "./schema";
+
+// TODO: Replace these interfaces with real schema models after https://github.com/galaxyproject/galaxy/pull/16707 is merged
+export interface WorkflowInvocationDetails {
+    id: string;
+}
+
+export interface WorkflowInvocationJobsSummary {
+    id: string;
+}
+
+export interface WorkflowInvocationStep {
+    id: string;
+}
+
+// TODO: Replace these provisional functions with fetchers after https://github.com/galaxyproject/galaxy/pull/16707 is merged
+export async function fetchInvocationDetails(params: { id: string }): Promise<ApiResponse<WorkflowInvocationDetails>> {
+    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}`);
+    return {
+        data,
+    } as ApiResponse<WorkflowInvocationDetails>;
+}
+
+export async function fetchInvocationJobsSummary(params: {
+    id: string;
+}): Promise<ApiResponse<WorkflowInvocationJobsSummary>> {
+    const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}/jobs_summary`);
+    return {
+        data,
+    } as ApiResponse<WorkflowInvocationJobsSummary>;
+}
+
+export async function fetchInvocationStep(params: { id: string }): Promise<ApiResponse<WorkflowInvocationStep>> {
+    const { data } = await axios.get(`${getAppRoot()}api/invocations//any/steps/${params.id}`);
+    return {
+        data,
+    } as ApiResponse<WorkflowInvocationStep>;
+}

From 2ce57b3bc78672522ff97010ad457a573526ed6e Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:03:39 +0100
Subject: [PATCH 04/13] Add Pinia store for workflow invocations

---
 client/src/stores/invocationStore.ts | 31 ++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)
 create mode 100644 client/src/stores/invocationStore.ts

diff --git a/client/src/stores/invocationStore.ts b/client/src/stores/invocationStore.ts
new file mode 100644
index 000000000000..2726781ade2c
--- /dev/null
+++ b/client/src/stores/invocationStore.ts
@@ -0,0 +1,31 @@
+import { defineStore } from "pinia";
+
+import {
+    fetchInvocationDetails,
+    fetchInvocationJobsSummary,
+    fetchInvocationStep,
+    type WorkflowInvocationDetails,
+    type WorkflowInvocationJobsSummary,
+    type WorkflowInvocationStep,
+} from "@/api/invocations";
+import { useKeyedCache } from "@/composables/keyedCache";
+
+export const useInvocationStore = defineStore("invocationStore", () => {
+    const { getItemById: getInvocationById, fetchItemById: fetchInvocationForId } =
+        useKeyedCache<WorkflowInvocationDetails>(fetchInvocationDetails);
+
+    const { getItemById: getInvocationJobsSummaryById, fetchItemById: fetchInvocationJobsSummaryForId } =
+        useKeyedCache<WorkflowInvocationJobsSummary>(fetchInvocationJobsSummary);
+
+    const { getItemById: getInvocationStepById, fetchItemById: fetchInvocationStepById } =
+        useKeyedCache<WorkflowInvocationStep>(fetchInvocationStep);
+
+    return {
+        getInvocationById,
+        fetchInvocationForId,
+        getInvocationJobsSummaryById,
+        fetchInvocationJobsSummaryForId,
+        getInvocationStepById,
+        fetchInvocationStepById,
+    };
+});

From 989028dcd263095c752424829210efdb0be2259a Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:04:20 +0100
Subject: [PATCH 05/13] Refactor WorkflowInvocationState.vue to use
 invocationStore

---
 .../WorkflowInvocationState.vue               | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index bb26b0769cd8..4da47b48b157 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -34,7 +34,8 @@
 import mixin from "components/JobStates/mixin";
 import LoadingSpan from "components/LoadingSpan";
 import JOB_STATES_MODEL from "utils/job-states-model";
-import { mapActions, mapGetters } from "vuex";
+
+import { useInvocationStore } from "@/stores/invocationStore";
 
 import { cancelWorkflowScheduling } from "./services";
 
@@ -61,6 +62,12 @@ export default {
             default: null,
         },
     },
+    setup() {
+        const invocationStore = useInvocationStore();
+        return {
+            invocationStore,
+        };
+    },
     data() {
         return {
             stepStatesInterval: null,
@@ -68,9 +75,8 @@ export default {
         };
     },
     computed: {
-        ...mapGetters(["getInvocationById", "getInvocationJobsSummaryById"]),
         invocation: function () {
-            return this.getInvocationById(this.invocationId);
+            return this.invocationStore.getInvocationById(this.invocationId);
         },
         invocationState: function () {
             return this.invocation?.state || "new";
@@ -93,7 +99,7 @@ export default {
             return this.jobStatesSummary && this.jobStatesSummary.terminal();
         },
         jobStatesSummary() {
-            const jobsSummary = this.getInvocationJobsSummaryById(this.invocationId);
+            const jobsSummary = this.invocationStore.getInvocationJobsSummaryById(this.invocationId);
             return !jobsSummary ? null : new JOB_STATES_MODEL.JobStatesSummary(jobsSummary);
         },
     },
@@ -106,17 +112,16 @@ export default {
         clearTimeout(this.stepStatesInterval);
     },
     methods: {
-        ...mapActions(["fetchInvocationForId", "fetchInvocationJobsSummaryForId"]),
         pollStepStatesUntilTerminal: function () {
             if (!this.invocation || !this.invocationSchedulingTerminal) {
-                this.fetchInvocationForId(this.invocationId).then((response) => {
+                this.invocationStore.fetchInvocationForId({ id: this.invocationId }).then((response) => {
                     this.stepStatesInterval = setTimeout(this.pollStepStatesUntilTerminal, 3000);
                 });
             }
         },
         pollJobStatesUntilTerminal: function () {
             if (!this.jobStatesTerminal) {
-                this.fetchInvocationJobsSummaryForId(this.invocationId).then((response) => {
+                this.invocationStore.fetchInvocationJobsSummaryForId({ id: this.invocationId }).then((response) => {
                     this.jobStatesInterval = setTimeout(this.pollJobStatesUntilTerminal, 3000);
                 });
             }

From cf2cc5d0c6a98fecee3975a63b231a28f2be2754 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Fri, 15 Dec 2023 13:05:08 +0100
Subject: [PATCH 06/13] Remove unused Vuex invocationStore from store
 configuration

---
 client/src/store/index.js           |  2 --
 client/src/store/invocationStore.js | 55 -----------------------------
 2 files changed, 57 deletions(-)
 delete mode 100644 client/src/store/invocationStore.js

diff --git a/client/src/store/index.js b/client/src/store/index.js
index 050cc5a929c0..0c7efe1a28e6 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -10,7 +10,6 @@ import createCache from "vuex-cache";
 import VuexPersistence from "vuex-persist";
 
 import { gridSearchStore } from "./gridSearchStore";
-import { invocationStore } from "./invocationStore";
 import { syncVuextoGalaxy } from "./syncVuextoGalaxy";
 import { tagStore } from "./tagStore";
 
@@ -39,7 +38,6 @@ export function createStore() {
     const storeConfig = {
         plugins: [createCache(), panelsPersistence.plugin],
         modules: {
-            invocations: invocationStore,
             gridSearch: gridSearchStore,
             tags: tagStore,
         },
diff --git a/client/src/store/invocationStore.js b/client/src/store/invocationStore.js
deleted file mode 100644
index 348b43aa3e96..000000000000
--- a/client/src/store/invocationStore.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import axios from "axios";
-import { getAppRoot } from "onload/loadConfig";
-import Vue from "vue";
-
-export const state = {
-    invocationDetailsById: {},
-    invocationJobsSummaryById: {},
-    invocationStepById: {},
-};
-
-const getters = {
-    getInvocationById: (state) => (invocationId) => {
-        return state.invocationDetailsById[invocationId];
-    },
-    getInvocationJobsSummaryById: (state) => (invocationId) => {
-        return state.invocationJobsSummaryById[invocationId];
-    },
-    getInvocationStepById: (state) => (invocationStepId) => {
-        return state.invocationStepById[invocationStepId];
-    },
-};
-
-const actions = {
-    fetchInvocationForId: async ({ commit }, invocationId) => {
-        const { data } = await axios.get(`${getAppRoot()}api/invocations/${invocationId}`);
-        commit("saveInvocationForId", { invocationId, invocationData: data });
-    },
-    fetchInvocationJobsSummaryForId: async ({ commit }, invocationId) => {
-        const { data } = await axios.get(`${getAppRoot()}api/invocations/${invocationId}/jobs_summary`);
-        commit("saveInvocationJobsSummaryForId", { invocationId, jobsSummary: data });
-    },
-    fetchInvocationStepById: async ({ commit }, invocationStepId) => {
-        const { data } = await axios.get(`${getAppRoot()}api/invocations/any/steps/${invocationStepId}`);
-        commit("saveInvocationStepById", { invocationStepId, invocationStepData: data });
-    },
-};
-
-const mutations = {
-    saveInvocationForId: (state, { invocationId, invocationData }) => {
-        Vue.set(state.invocationDetailsById, invocationId, invocationData);
-    },
-    saveInvocationJobsSummaryForId: (state, { invocationId, jobsSummary }) => {
-        Vue.set(state.invocationJobsSummaryById, invocationId, jobsSummary);
-    },
-    saveInvocationStepById: (state, { invocationStepId, invocationStepData }) => {
-        Vue.set(state.invocationStepById, invocationStepId, invocationStepData);
-    },
-};
-
-export const invocationStore = {
-    state,
-    getters,
-    actions,
-    mutations,
-};

From 64563b3914d307f75ea78988494222f8d599d290 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 11:57:10 +0100
Subject: [PATCH 07/13] Use async/await when polling invocation state

---
 .../WorkflowInvocationState.vue                    | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 4da47b48b157..0182824417d2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -112,18 +112,16 @@ export default {
         clearTimeout(this.stepStatesInterval);
     },
     methods: {
-        pollStepStatesUntilTerminal: function () {
+        pollStepStatesUntilTerminal: async function () {
             if (!this.invocation || !this.invocationSchedulingTerminal) {
-                this.invocationStore.fetchInvocationForId({ id: this.invocationId }).then((response) => {
-                    this.stepStatesInterval = setTimeout(this.pollStepStatesUntilTerminal, 3000);
-                });
+                await this.invocationStore.fetchInvocationForId({ id: this.invocationId });
+                this.stepStatesInterval = setTimeout(this.pollStepStatesUntilTerminal, 3000);
             }
         },
-        pollJobStatesUntilTerminal: function () {
+        pollJobStatesUntilTerminal: async function () {
             if (!this.jobStatesTerminal) {
-                this.invocationStore.fetchInvocationJobsSummaryForId({ id: this.invocationId }).then((response) => {
-                    this.jobStatesInterval = setTimeout(this.pollJobStatesUntilTerminal, 3000);
-                });
+                await this.invocationStore.fetchInvocationJobsSummaryForId({ id: this.invocationId });
+                this.jobStatesInterval = setTimeout(this.pollJobStatesUntilTerminal, 3000);
             }
         },
         onError: function (e) {

From 98f99c0a227e6e7c1548468f0a2c824349355bb1 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 11:59:28 +0100
Subject: [PATCH 08/13] Remove unused prop argument in
 WorkflowInvocationDetails

---
 .../WorkflowInvocationState/WorkflowInvocationState.vue       | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 0182824417d2..1d7adff5e90f 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -10,9 +10,7 @@
                 @invocation-cancelled="cancelWorkflowScheduling" />
         </b-tab>
         <b-tab title="Details">
-            <WorkflowInvocationDetails
-                :invocation="invocation"
-                :invocation-and-job-terminal="invocationAndJobTerminal" />
+            <WorkflowInvocationDetails :invocation="invocation" />
         </b-tab>
         <!-- <b-tab title="Workflow Overview">
             <p>TODO: Insert readonly version of workflow editor here</p>

From 80f82dc65ea27130c0dbb62f69b8d882e689952d Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:03:42 +0100
Subject: [PATCH 09/13] Rename WorkflowInvocationDetails interface to
 WorkflowInvocation

---
 client/src/api/invocations.ts        | 6 +++---
 client/src/stores/invocationStore.ts | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/api/invocations.ts b/client/src/api/invocations.ts
index 75cf94a1455a..50b6eace1558 100644
--- a/client/src/api/invocations.ts
+++ b/client/src/api/invocations.ts
@@ -5,7 +5,7 @@ import { getAppRoot } from "@/onload";
 import { ApiResponse } from "./schema";
 
 // TODO: Replace these interfaces with real schema models after https://github.com/galaxyproject/galaxy/pull/16707 is merged
-export interface WorkflowInvocationDetails {
+export interface WorkflowInvocation {
     id: string;
 }
 
@@ -18,11 +18,11 @@ export interface WorkflowInvocationStep {
 }
 
 // TODO: Replace these provisional functions with fetchers after https://github.com/galaxyproject/galaxy/pull/16707 is merged
-export async function fetchInvocationDetails(params: { id: string }): Promise<ApiResponse<WorkflowInvocationDetails>> {
+export async function fetchInvocationDetails(params: { id: string }): Promise<ApiResponse<WorkflowInvocation>> {
     const { data } = await axios.get(`${getAppRoot()}api/invocations/${params.id}`);
     return {
         data,
-    } as ApiResponse<WorkflowInvocationDetails>;
+    } as ApiResponse<WorkflowInvocation>;
 }
 
 export async function fetchInvocationJobsSummary(params: {
diff --git a/client/src/stores/invocationStore.ts b/client/src/stores/invocationStore.ts
index 2726781ade2c..ceac2109f459 100644
--- a/client/src/stores/invocationStore.ts
+++ b/client/src/stores/invocationStore.ts
@@ -4,7 +4,7 @@ import {
     fetchInvocationDetails,
     fetchInvocationJobsSummary,
     fetchInvocationStep,
-    type WorkflowInvocationDetails,
+    type WorkflowInvocation,
     type WorkflowInvocationJobsSummary,
     type WorkflowInvocationStep,
 } from "@/api/invocations";
@@ -12,7 +12,7 @@ import { useKeyedCache } from "@/composables/keyedCache";
 
 export const useInvocationStore = defineStore("invocationStore", () => {
     const { getItemById: getInvocationById, fetchItemById: fetchInvocationForId } =
-        useKeyedCache<WorkflowInvocationDetails>(fetchInvocationDetails);
+        useKeyedCache<WorkflowInvocation>(fetchInvocationDetails);
 
     const { getItemById: getInvocationJobsSummaryById, fetchItemById: fetchInvocationJobsSummaryForId } =
         useKeyedCache<WorkflowInvocationJobsSummary>(fetchInvocationJobsSummary);

From 9188adbb1b1c6eafb0e7cd2226a165c9103a0902 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:35:12 +0100
Subject: [PATCH 10/13] Refactor WorkflowInvocationState tests

Avoid exposing internals
---
 .../WorkflowInvocationState.test.js           | 80 -------------------
 .../WorkflowInvocationState.test.ts           | 64 +++++++++++++++
 .../WorkflowInvocationState.vue               |  1 +
 3 files changed, 65 insertions(+), 80 deletions(-)
 delete mode 100644 client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.js
 create mode 100644 client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.js
deleted file mode 100644
index 8425829db8f4..000000000000
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import { shallowMount } from "@vue/test-utils";
-import { useConfig } from "composables/config";
-import { getLocalVue } from "tests/jest/helpers";
-import Vuex from "vuex";
-
-import invocationData from "../Workflow/test/json/invocation.json";
-import WorkflowInvocationState from "./WorkflowInvocationState";
-
-jest.mock("composables/config");
-useConfig.mockReturnValue({
-    config: {
-        enable_celery_tasks: true,
-    },
-    isConfigLoaded: true,
-});
-
-const invocationJobsSummaryById = {
-    id: "d9833097445452b0",
-    model: "WorkflowInvocation",
-    states: {},
-    populated_state: "ok",
-};
-
-const localVue = getLocalVue();
-
-describe("WorkflowInvocationState.vue with terminal invocation", () => {
-    let wrapper;
-    let propsData;
-
-    beforeEach(async () => {
-        propsData = {
-            invocationId: invocationData.id,
-        };
-        wrapper = shallowMount(WorkflowInvocationState, {
-            propsData,
-            computed: {
-                invocation: () => invocationData,
-                getInvocationJobsSummaryById: () => () => invocationJobsSummaryById,
-            },
-            localVue,
-        });
-    });
-
-    it("determines that invocation and job states are terminal", async () => {
-        expect(wrapper.vm.invocationAndJobTerminal).toBeTruthy();
-    });
-});
-
-describe("WorkflowInvocationState.vue with no invocation", () => {
-    let wrapper;
-    let propsData;
-    let store;
-    let actions;
-
-    beforeEach(async () => {
-        actions = {
-            fetchInvocationForId: jest.fn(),
-            fetchInvocationJobsSummaryForId: jest.fn(),
-        };
-        store = new Vuex.Store({
-            actions,
-        });
-        propsData = {
-            invocationId: invocationData.id,
-        };
-        wrapper = shallowMount(WorkflowInvocationState, {
-            store,
-            propsData,
-            computed: {
-                invocation: () => null,
-                getInvocationJobsSummaryById: () => () => invocationJobsSummaryById,
-            },
-            localVue,
-        });
-    });
-
-    it("determines that invocation and job states are not terminal", async () => {
-        expect(wrapper.vm.invocationAndJobTerminal).toBeFalsy();
-    });
-});
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
new file mode 100644
index 000000000000..8b25bbb36c36
--- /dev/null
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -0,0 +1,64 @@
+import { createTestingPinia } from "@pinia/testing";
+import { shallowMount, Wrapper } from "@vue/test-utils";
+import flushPromises from "flush-promises";
+import { setActivePinia } from "pinia";
+import { getLocalVue } from "tests/jest/helpers";
+
+import type { WorkflowInvocation } from "@/api/invocations";
+import JOB_STATES_MODEL from "@/utils/job-states-model";
+
+import invocationData from "../Workflow/test/json/invocation.json";
+
+import WorkflowInvocationState from "./WorkflowInvocationState.vue";
+
+const localVue = getLocalVue();
+
+const selectors = {
+    invocationSummary: ".invocation-summary",
+};
+
+const invocationJobsSummaryById = {
+    id: "d9833097445452b0",
+    model: "WorkflowInvocation",
+    states: {},
+    populated_state: "ok",
+};
+
+async function mountWorkflowInvocationState(invocation: WorkflowInvocation | null) {
+    const pinia = createTestingPinia();
+    setActivePinia(pinia);
+
+    const wrapper = shallowMount(WorkflowInvocationState, {
+        propsData: {
+            invocationId: invocationData.id,
+        },
+        computed: {
+            invocation: () => invocation,
+            jobStatesSummary: () => new JOB_STATES_MODEL.JobStatesSummary(invocationJobsSummaryById),
+        },
+        pinia,
+        localVue,
+    });
+    await flushPromises();
+    return wrapper;
+}
+
+describe("WorkflowInvocationState.vue", () => {
+    it("determines that invocation and job states are terminal with terminal invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState(invocationData);
+        expect(isInvocationAndJobTerminal(wrapper)).toBe(true);
+    });
+
+    it("determines that invocation and job states are not terminal with no invocation", async () => {
+        const wrapper = await mountWorkflowInvocationState(null);
+        expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+    });
+});
+
+function isInvocationAndJobTerminal(wrapper: Wrapper<Vue>): boolean {
+    const invocationSummary = wrapper.find(selectors.invocationSummary);
+    // This is a somewhat hacky way to determine if the invocation and job states are terminal without
+    // exposing the internals of the component. This is just to restore the previous behavior of the test
+    // but it would be better to test this in a more appropriate way.
+    return invocationSummary.exists() && invocationSummary.html().includes('invocationandjobterminal="true"');
+}
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 1d7adff5e90f..3230d485af21 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -2,6 +2,7 @@
     <b-tabs v-if="invocation">
         <b-tab title="Summary" active>
             <WorkflowInvocationSummary
+                class="invocation-summary"
                 :invocation="invocation"
                 :index="index"
                 :invocation-and-job-terminal="invocationAndJobTerminal"

From 1de6df0721745eddf91ef15f48fa70d0884a2821 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 12:35:31 +0100
Subject: [PATCH 11/13] Add test for non-terminal invocation

---
 .../WorkflowInvocationState.test.ts                      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index 8b25bbb36c36..cae244c78bd3 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -53,6 +53,15 @@ describe("WorkflowInvocationState.vue", () => {
         const wrapper = await mountWorkflowInvocationState(null);
         expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
     });
+
+    it("determines that invocation and job states are not terminal with non-terminal invocation", async () => {
+        const invocation = {
+            ...invocationData,
+            state: "new",
+        };
+        const wrapper = await mountWorkflowInvocationState(invocation);
+        expect(isInvocationAndJobTerminal(wrapper)).toBe(false);
+    });
 });
 
 function isInvocationAndJobTerminal(wrapper: Wrapper<Vue>): boolean {

From b73e7480cc4177ab21f070d5ecf0587506e67725 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:29:31 +0100
Subject: [PATCH 12/13] Avoid possible double fetch in keyed cache

---
 client/src/composables/keyedCache.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/src/composables/keyedCache.ts b/client/src/composables/keyedCache.ts
index ac8999dbaf7e..7abd3f652c5d 100644
--- a/client/src/composables/keyedCache.ts
+++ b/client/src/composables/keyedCache.ts
@@ -49,7 +49,7 @@ export function useKeyedCache<T>(
     const getItemById = computed(() => {
         return (id: string) => {
             const item = storedItems.value[id];
-            if (!loadingItem.value[id] && shouldFetch(item)) {
+            if (shouldFetch(item)) {
                 fetchItemById({ id: id });
             }
             return item ?? null;
@@ -71,6 +71,10 @@ export function useKeyedCache<T>(
 
     async function fetchItemById(params: FetchParams) {
         const itemId = params.id;
+        const isAlreadyLoading = loadingItem.value[itemId] ?? false;
+        if (isAlreadyLoading) {
+            return;
+        }
         set(loadingItem.value, itemId, true);
         try {
             const fetchItem = unref(fetchItemHandler);

From 635fe41f16c7969ac673ba3a92bc2e0144847dc3 Mon Sep 17 00:00:00 2001
From: davelopez <46503462+davelopez@users.noreply.github.com>
Date: Mon, 18 Dec 2023 17:39:36 +0100
Subject: [PATCH 13/13] Add mocked API calls

Since InvocationsList component is mounted using `mount` it will use the real children components and requires their API calls to be mocked too.
---
 client/src/components/Workflow/InvocationsList.test.js          | 2 ++
 .../WorkflowInvocationState/WorkflowInvocationSummary.test.js   | 1 -
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/InvocationsList.test.js b/client/src/components/Workflow/InvocationsList.test.js
index d2f230303a08..9799dbbb17c3 100644
--- a/client/src/components/Workflow/InvocationsList.test.js
+++ b/client/src/components/Workflow/InvocationsList.test.js
@@ -23,6 +23,8 @@ describe("InvocationsList.vue", () => {
 
     beforeEach(async () => {
         axiosMock = new MockAdapter(axios);
+        axiosMock.onGet(`api/invocations/${mockInvocationData.id}`).reply(200, mockInvocationData);
+        axiosMock.onGet(`api/invocations/${mockInvocationData.id}/jobs_summary`).reply(200, {});
     });
 
     afterEach(() => {
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
index e98d77fbc96b..eafa5a84b1a0 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationSummary.test.js
@@ -4,7 +4,6 @@ import { getLocalVue } from "tests/jest/helpers";
 import invocationData from "../Workflow/test/json/invocation.json";
 import WorkflowInvocationSummary from "./WorkflowInvocationSummary";
 
-
 const localVue = getLocalVue();
 
 describe("WorkflowInvocationSummary.vue with terminal invocation", () => {