[24.2] Fix inconsistent tab handling in invocation view

client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
+import { BAlert, BButtonGroup, BCol, BContainer, BRow } from "bootstrap-vue";
 import type { VisualizationSpec } from "vega-embed";
 import { computed, ref, watch } from "vue";
 import { type ComputedRef } from "vue";
@@ -8,16 +8,16 @@ import { type components, GalaxyApi } from "@/api";
 import { getAppRoot } from "@/onload/loadConfig";
 import { errorMessageAsString } from "@/utils/simple-error";
 
+import LoadingSpan from "../LoadingSpan.vue";
 import HelpText from "@/components/Help/HelpText.vue";
 
 const VegaWrapper = () => import("./VegaWrapper.vue");
 
-const props = defineProps({
-    invocationId: {
-        type: String,
-        required: true,
-    },
-});
+interface Props {
+    invocationId: string;
+    terminal?: boolean;
+}
+const props = defineProps<Props>();
 
 const groupBy = ref<"tool_id" | "step_id">("tool_id");
 const timing = ref<"seconds" | "minutes" | "hours">("seconds");
@@ -44,7 +44,11 @@ async function fetchMetrics() {
     }
 }
 
-watch(props, () => fetchMetrics(), { immediate: true });
+watch(
+    () => props.invocationId,
+    () => fetchMetrics(),
+    { immediate: true }
+);
 
 function itemToX(item: components["schemas"]["WorkflowJobMetric"]) {
     if (groupBy.value === "tool_id") {
@@ -380,6 +384,10 @@ const groupByInTitles = computed(() => {
 
 <template>
     <div>
+        <BAlert v-if="!props.terminal" variant="warning" show>
+            <LoadingSpan
+                message="The workflow might still be running. Metrics will update and change as the workflow progresses." />
+        </BAlert>
         <BContainer>
             <BRow align-h="end" class="mb-2">
                 <BButtonGroup>

client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts

@@ -16,6 +16,7 @@ const selectors = {
     bAlertStub: "balert-stub",
     spanElement: "span",
     invocationReportTab: '[titleitemclass="invocation-report-tab"]',
+    invocationExportTab: '[titleitemclass="invocation-export-tab"]',
     fullPageHeading: "anonymous-stub[h1='true']",
 };
 
@@ -177,16 +178,20 @@ describe("WorkflowInvocationState check invocation and job terminal states", ()
     });
 });
 
-describe("WorkflowInvocationState check 'Report' tab disabled state and header", () => {
-    it("determines that 'Report' tab is disabled for non-terminal invocation", async () => {
+describe("WorkflowInvocationState check 'Report' and 'Export' tab disabled state and header", () => {
+    it("for non-terminal invocation", async () => {
         const wrapper = await mountWorkflowInvocationState("non-terminal-id");
         const reportTab = wrapper.find(selectors.invocationReportTab);
         expect(reportTab.attributes("disabled")).toBe("true");
+        const exportTab = wrapper.find(selectors.invocationExportTab);
+        expect(exportTab.attributes("disabled")).toBe("true");
     });
-    it("determines that 'Report' tab is not disabled for terminal invocation", async () => {
+    it("for terminal invocation", async () => {
         const wrapper = await mountWorkflowInvocationState(invocationData.id);
         const reportTab = wrapper.find(selectors.invocationReportTab);
         expect(reportTab.attributes("disabled")).toBeUndefined();
+        const exportTab = wrapper.find(selectors.invocationExportTab);
+        expect(exportTab.attributes("disabled")).toBeUndefined();
     });
 });
 

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -67,22 +67,22 @@ watch(
 );
 
 const workflowStore = useWorkflowStore();
-const reportTabDisabled = computed(
+const tabsDisabled = computed(
     () =>
         !invocationStateSuccess.value ||
         !invocation.value ||
         !workflowStore.getStoredWorkflowByInstanceId(invocation.value.workflow_id)
 );
 
-/** Tooltip message for the report tab when it is disabled */
-const disabledReportTooltip = computed(() => {
+/** Tooltip message for the a tab when it is disabled */
+const disabledTabTooltip = computed(() => {
     const state = invocationState.value;
     if (state != "scheduled") {
         return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete this option will become available.`;
     } else if (runningCount.value != 0) {
         return `The workflow invocation still contains ${runningCount.value} running job(s). Once these jobs have completed this option will become available.`;
     } else {
-        return "Steps for this workflow are still running. A report will be available once complete.";
+        return "Steps for this workflow are still running. This option will be available once complete.";
     }
 });
 
@@ -333,24 +333,36 @@ async function onCancel() {
             <BTab
                 v-if="!props.isSubworkflow"
                 title-item-class="invocation-report-tab"
-                :disabled="reportTabDisabled"
+                :disabled="tabsDisabled"
                 :lazy="reportLazy"
                 :active.sync="reportActive">
                 <template v-slot:title>
                     <span>Report</span>
                     <BBadge
-                        v-if="reportTabDisabled"
+                        v-if="tabsDisabled"
                         v-b-tooltip.hover.noninteractive
-                        :title="disabledReportTooltip"
+                        :title="disabledTabTooltip"
                         variant="warning">
                         <FontAwesomeIcon :icon="faExclamation" />
                     </BBadge>
                 </template>
                 <InvocationReport v-if="invocationStateSuccess" :invocation-id="invocation.id" />
             </BTab>
-            <BTab title="Export" title-item-class="invocation-export-tab" lazy>
+            <BTab title-item-class="invocation-export-tab" :disabled="tabsDisabled" lazy>
+                <template v-slot:title>
+                    <span>Export</span>
+                    <BBadge
+                        v-if="tabsDisabled"
+                        v-b-tooltip.hover.noninteractive
+                        :title="disabledTabTooltip"
+                        variant="warning">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
+                </template>
                 <div v-if="invocationAndJobTerminal">
-                    <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
+                    <WorkflowInvocationExportOptions
+                        :invocation-id="invocation.id"
+                        :terminal="invocationAndJobTerminal" />
                 </div>
                 <BAlert v-else variant="info" show>
                     <LoadingSpan message="Waiting to complete invocation" />
@@ -387,7 +399,8 @@ async function onCancel() {
 
 <style lang="scss">
 // To show the tooltip on the disabled report tab badge
-.invocation-report-tab {
+.invocation-report-tab,
+.invocation-export-tab {
     .nav-link.disabled {
         pointer-events: auto !important;
     }