[24.2] Fix inconsistent tab handling in invocation view

Fixes #19286

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,22 +333,32 @@ 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" />
                 </div>
@@ -387,7 +397,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;
     }