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] 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">