Avoid using component internal eventbus, use regular parent props ins…

…tead to show/hide spinner

client/src/components/Form/Elements/FormData/FormData.vue

@@ -4,7 +4,7 @@ import { faCopy, faFile, faFolder } from "@fortawesome/free-regular-svg-icons";
 import { faExclamation, faLink, faUnlink } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BFormCheckbox } from "bootstrap-vue";
-import Vue, { computed, onMounted, type Ref, ref, watch } from "vue";
+import { computed, onMounted, type Ref, ref, watch } from "vue";
 
 import { getGalaxyInstance } from "@/app";
 import { type EventData, useEventStore } from "@/stores/eventStore";
@@ -23,6 +23,7 @@ interface SelectOption {
 
 const props = withDefaults(
     defineProps<{
+        loading?: boolean;
         multiple?: boolean;
         optional?: boolean;
         options: Record<string, Array<DataOption>>;
@@ -35,6 +36,7 @@ const props = withDefaults(
         tag?: string;
     }>(),
     {
+        loading: false,
         multiple: false,
         optional: false,
         value: null,
@@ -45,8 +47,6 @@ const props = withDefaults(
     }
 );
 
-const eventBus = new Vue();
-
 const eventStore = useEventStore();
 
 const $emit = defineEmits(["input"]);
@@ -67,9 +67,6 @@ const dragTarget: Ref<EventTarget | null> = ref(null);
 /** Store options which need to be preserved **/
 const keepOptions: Record<string, SelectOption> = {};
 
-/** Displays a wait indicator between setting a value and receiving an update */
-const waiting = ref(false);
-
 /**
  * Determine whether the file dialog can be used or not
  */
@@ -85,11 +82,33 @@ const currentSource = computed(() => (currentVariant.value ? currentVariant.valu
  */
 const currentValue = computed({
     get: () => {
-        eventBus.$emit("waiting", false);
-        return getValue();
+        const value: Array<DataOption> = [];
+        if (props.value) {
+            for (const v of props.value.values) {
+                const foundEntry = formattedOptions.value.find(
+                    (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
+                );
+                if (foundEntry && foundEntry.value) {
+                    value.push(foundEntry.value);
+                    if (!currentVariant.value?.multiple) {
+                        break;
+                    }
+                }
+            }
+            if (value.length > 0) {
+                return value;
+            }
+        }
+        if (!props.optional && formattedOptions.value.length > 0) {
+            const firstEntry = formattedOptions.value && formattedOptions.value[0];
+            if (firstEntry && firstEntry.value) {
+                value.push(firstEntry.value);
+                return value;
+            }
+        }
+        return null;
     },
     set: (val) => {
-        eventBus.$emit("waiting", true);
         $emit("input", createValue(val));
     },
 });
@@ -265,37 +284,6 @@ function getSourceType(val: DataOption) {
     }
 }
 
-/**
- * Parse incoming value for select field
- */
-function getValue() {
-    const value: Array<DataOption> = [];
-    if (props.value) {
-        for (const v of props.value.values) {
-            const foundEntry = formattedOptions.value.find(
-                (entry) => entry.value && entry.value.id === v.id && entry.value.src === v.src
-            );
-            if (foundEntry && foundEntry.value) {
-                value.push(foundEntry.value);
-                if (!currentVariant.value?.multiple) {
-                    break;
-                }
-            }
-        }
-        if (value.length > 0) {
-            return value;
-        }
-    }
-    if (!props.optional && formattedOptions.value.length > 0) {
-        const firstEntry = formattedOptions.value && formattedOptions.value[0];
-        if (firstEntry && firstEntry.value) {
-            value.push(firstEntry.value);
-            return value;
-        }
-    }
-    return null;
-}
-
 /** Add values from drag/drop or data dialog sources */
 function handleIncoming(incoming: Record<string, unknown>, partial = true) {
     if (incoming) {
@@ -422,9 +410,6 @@ const matchedValues = computed(() => {
 });
 
 onMounted(() => {
-    eventBus.$on("waiting", (value: boolean) => {
-        waiting.value = value;
-    });
     if (props.value) {
         $emit("input", createValue(matchedValues.value));
     } else {
@@ -467,7 +452,7 @@ watch(
                         v-b-tooltip.hover.bottom
                         title="Browse or Upload Datasets"
                         @click="onBrowse">
-                        <FontAwesomeIcon v-if="waiting" icon="fa-spinner" spin />
+                        <FontAwesomeIcon v-if="loading" icon="fa-spinner" spin />
                         <span v-else class="font-weight-bold">...</span>
                     </BButton>
                 </BButtonGroup>

client/src/components/Form/FormDisplay.vue

@@ -2,6 +2,7 @@
     <FormInputs
         :key="id"
         :inputs="formInputs"
+        :loading="loading"
         :prefix="prefix"
         :sustain-repeats="sustainRepeats"
         :sustain-conditionals="sustainConditionals"
@@ -37,6 +38,10 @@ export default {
             type: Object,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
         prefix: {
             type: String,
             default: "",

client/src/components/Form/FormElement.vue

@@ -35,6 +35,7 @@ interface FormElementProps {
     error?: string;
     warning?: string;
     disabled?: boolean;
+    loading?: boolean;
     attributes?: FormParameterAttributes;
     collapsedEnableText?: string;
     collapsedDisableText?: string;
@@ -276,6 +277,7 @@ const isOptional = computed(() => !isRequired.value && attrs.value["optional"] !
                 v-else-if="['data', 'data_collection'].includes(props.type)"
                 :id="id"
                 v-model="currentValue"
+                :loading="loading"
                 :extension="attrs.extension"
                 :flavor="attrs.flavor"
                 :multiple="attrs.multiple"

client/src/components/Form/FormInputs.vue

@@ -57,6 +57,7 @@
                 :collapsed-enable-icon="collapsedEnableIcon"
                 :collapsed-disable-text="collapsedDisableText"
                 :collapsed-disable-icon="collapsedDisableIcon"
+                :loading="loading"
                 :workflow-building-mode="workflowBuildingMode"
                 @change="onChange" />
         </div>
@@ -84,6 +85,10 @@ export default {
             type: Array,
             default: null,
         },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
         prefix: {
             type: String,
             default: "",

client/src/components/Tool/ToolForm.vue

@@ -43,6 +43,7 @@
                         :id="toolId"
                         :inputs="formConfig.inputs"
                         :errors="formConfig.errors"
+                        :loading="loading"
                         :validation-scroll-to="validationScrollTo"
                         :warnings="formConfig.warnings"
                         @onChange="onChange"
@@ -155,6 +156,7 @@ export default {
     data() {
         return {
             disabled: false,
+            loading: false,
             showLoading: true,
             showForm: false,
             showEntryPoints: false,
@@ -271,6 +273,7 @@ export default {
         requestTool(newVersion) {
             this.currentVersion = newVersion || this.currentVersion;
             this.disabled = true;
+            this.loading = true;
             console.debug("ToolForm - Requesting tool.", this.id);
             return getToolFormData(this.id, this.currentVersion, this.job_id, this.history_id)
                 .then((data) => {
@@ -290,6 +293,7 @@ export default {
                 })
                 .finally(() => {
                     this.disabled = false;
+                    this.loading = false;
                     this.showLoading = false;
                 });
         },