From 63136980b7cecd27584ebcc7bbf2fd3de384d618 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Mon, 17 Mar 2025 15:31:10 -0500
Subject: [PATCH] add `changingCurrentHistory` store flag, use in run form and
 navigation

---
 .../CurrentHistory/HistoryNavigation.vue      | 10 +++++--
 .../Workflow/Run/WorkflowRunFormSimple.vue    | 29 ++++++++++++-------
 client/src/stores/historyStore.ts             | 19 ++++++++----
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/client/src/components/History/CurrentHistory/HistoryNavigation.vue b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
index ef9dc11ae0c..00ad0af59c0 100644
--- a/client/src/components/History/CurrentHistory/HistoryNavigation.vue
+++ b/client/src/components/History/CurrentHistory/HistoryNavigation.vue
@@ -14,6 +14,7 @@ import {
     faPlay,
     faPlus,
     faShareAlt,
+    faSpinner,
     faStream,
     faTrash,
     faUserLock,
@@ -91,7 +92,7 @@ const userStore = useUserStore();
 const historyStore = useHistoryStore();
 
 const { isAnonymous } = storeToRefs(userStore);
-const { totalHistoryCount } = storeToRefs(historyStore);
+const { totalHistoryCount, changingCurrentHistory } = storeToRefs(historyStore);
 
 const canEditHistory = computed(() => {
     return canMutateHistory(props.history);
@@ -167,10 +168,13 @@ async function resumePausedJobs() {
                     data-description="switch to another history"
                     size="sm"
                     variant="link"
-                    :disabled="isAnonymous"
+                    :disabled="isAnonymous || changingCurrentHistory"
                     :title="userTitle('Switch to history')"
                     @click="showSwitchModal = !showSwitchModal">
-                    <FontAwesomeIcon fixed-width :icon="faExchangeAlt" />
+                    <FontAwesomeIcon
+                        fixed-width
+                        :icon="changingCurrentHistory ? faSpinner : faExchangeAlt"
+                        :spin="changingCurrentHistory" />
                 </BButton>
 
                 <BDropdown
diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 17b14b6f754..1ec047456d8 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { faSitemap } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BDropdown, BDropdownForm, BFormCheckbox } from "bootstrap-vue";
+import { BAlert, BButton, BDropdown, BDropdownForm, BFormCheckbox, BOverlay } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
 import { computed, ref, watch } from "vue";
 
@@ -10,6 +10,7 @@ import { isWorkflowInput } from "@/components/Workflow/constants";
 import { useConfig } from "@/composables/config";
 import { usePanels } from "@/composables/usePanels";
 import { provideScopedWorkflowStores } from "@/composables/workflowStores";
+import { useHistoryStore } from "@/stores/historyStore";
 import { useUserStore } from "@/stores/userStore";
 import { errorMessageAsString } from "@/utils/simple-error";
 
@@ -21,6 +22,7 @@ import WorkflowRunGraph from "./WorkflowRunGraph.vue";
 import WorkflowStorageConfiguration from "./WorkflowStorageConfiguration.vue";
 import Heading from "@/components/Common/Heading.vue";
 import FormDisplay from "@/components/Form/FormDisplay.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
 
 interface Props {
     model: Record<string, any>;
@@ -63,6 +65,8 @@ const waitingForRequest = ref(false);
 //       readme/help exists, it will be `false`.
 const showGraph = ref(!showPanels.value);
 
+const { changingCurrentHistory } = storeToRefs(useHistoryStore());
+
 watch(
     () => showGraph.value,
     (show) => {
@@ -278,15 +282,20 @@ async function onExecute() {
                     :style="{ 'overflow-y': 'auto', 'overflow-x': 'hidden' }">
                     <div v-if="showGraph" class="ui-form-header-underlay sticky-top" />
                     <Heading v-if="showGraph" class="sticky-top" h2 separator bold size="sm"> Parameters </Heading>
-                    <FormDisplay
-                        :inputs="formInputs"
-                        :allow-empty-value-on-required-input="true"
-                        :sync-with-graph="showGraph"
-                        :active-node-id="computedActiveNodeId"
-                        workflow-run
-                        @onChange="onChange"
-                        @onValidation="onValidation"
-                        @update:active-node-id="($event) => (activeNodeId = $event)" />
+                    <BOverlay :show="changingCurrentHistory" no-fade rounded="sm" opacity="0.5">
+                        <template v-slot:overlay>
+                            <LoadingSpan message="Changing your current history" />
+                        </template>
+                        <FormDisplay
+                            :inputs="formInputs"
+                            :allow-empty-value-on-required-input="true"
+                            :sync-with-graph="showGraph"
+                            :active-node-id="computedActiveNodeId"
+                            workflow-run
+                            @onChange="onChange"
+                            @onValidation="onValidation"
+                            @update:active-node-id="($event) => (activeNodeId = $event)" />
+                    </BOverlay>
                 </div>
                 <div v-if="showGraph" class="h-100 w-50 d-flex flex-shrink-0">
                     <WorkflowRunGraph
diff --git a/client/src/stores/historyStore.ts b/client/src/stores/historyStore.ts
index f9ba0c5c664..84f2b5412a1 100644
--- a/client/src/stores/historyStore.ts
+++ b/client/src/stores/historyStore.ts
@@ -37,6 +37,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
     const storedCurrentHistoryId = ref<string | null>(null);
     const storedFilterTexts = ref<{ [key: string]: string }>({});
     const storedHistories = ref<{ [key: string]: AnyHistory }>({});
+    const changingCurrentHistory = ref(false);
 
     const histories = computed(() => {
         return Object.values(storedHistories.value)
@@ -96,12 +97,17 @@ export const useHistoryStore = defineStore("historyStore", () => {
     });
 
     async function setCurrentHistory(historyId: string) {
-        try {
-            const currentHistory = (await setCurrentHistoryOnServer(historyId)) as HistoryDevDetailed;
-            selectHistory(currentHistory);
-            setFilterText(historyId, "");
-        } catch (error) {
-            rethrowSimple(error);
+        if (!changingCurrentHistory.value) {
+            try {
+                changingCurrentHistory.value = true;
+                const currentHistory = (await setCurrentHistoryOnServer(historyId)) as HistoryDevDetailed;
+                selectHistory(currentHistory);
+                setFilterText(historyId, "");
+            } catch (error) {
+                rethrowSimple(error);
+            } finally {
+                changingCurrentHistory.value = false;
+            }
         }
     }
 
@@ -440,6 +446,7 @@ export const useHistoryStore = defineStore("historyStore", () => {
 
     return {
         histories,
+        changingCurrentHistory,
         currentHistory,
         currentHistoryId,
         currentFilterText,