From 9260b8181b06910a405ef23a214bc9d4b5331d5c Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 09:32:40 -0600
Subject: [PATCH 1/7] [24.2] Fix inconsistent tab handling in invocation view

Fixes https://github.com/galaxyproject/galaxy/issues/19286
---
 .../WorkflowInvocationState.vue               | 29 +++++++++++++------
 1 file changed, 20 insertions(+), 9 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 83248eec6e61..8c59c416c789 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/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;
     }

From 8838d2c8bb9f836fec3e447a781d103deeae8454 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 10:26:55 -0600
Subject: [PATCH 2/7] add `terminal` prop to workflow metrics for a running
 workflow

---
 .../WorkflowInvocationMetrics.vue             | 24 ++++++++++++-------
 .../WorkflowInvocationState.vue               |  4 +++-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 40f46da6db23..5a140c16e62e 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/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>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 8c59c416c789..5904de674543 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -360,7 +360,9 @@ async function onCancel() {
                     </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" />

From 2c5dcb9dce991b35713dea29ec53afcf63116e11 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 10:27:59 -0600
Subject: [PATCH 3/7] add is disabled check for export tab in jest as well

---
 .../WorkflowInvocationState.test.ts                   | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index 84abb4dd163e..16eeb0808b6b 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/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();
     });
 });
 

From 45324642d6126019157832d3b2138cc987da4eec Mon Sep 17 00:00:00 2001
From: Ahmed Hamid Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 10:38:36 -0600
Subject: [PATCH 4/7] Update
 client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue

Co-authored-by: Marius van den Beek <m.vandenbeek@gmail.com>
---
 .../WorkflowInvocationState/WorkflowInvocationMetrics.vue      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index 5a140c16e62e..f1b74f006b29 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -385,8 +385,7 @@ 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." />
+            <LoadingSpan message="Metrics will update and change as the workflow progresses." />
         </BAlert>
         <BContainer>
             <BRow align-h="end" class="mb-2">

From 67f47bf1494fabf4d6fa4fa2be8a4f9e00d0b84a Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 11:08:34 -0600
Subject: [PATCH 5/7] fix prop provided to wrong component, removing redundant
 loading span
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: David López <46503462+davelopez@users.noreply.github.com>
---
 .../WorkflowInvocationMetrics.vue                        | 4 ++--
 .../WorkflowInvocationState/WorkflowInvocationState.vue  | 9 ++-------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
index f1b74f006b29..ff06ca1adf7d 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationMetrics.vue
@@ -15,7 +15,7 @@ const VegaWrapper = () => import("./VegaWrapper.vue");
 
 interface Props {
     invocationId: string;
-    terminal?: boolean;
+    notTerminal?: boolean;
 }
 const props = defineProps<Props>();
 
@@ -384,7 +384,7 @@ const groupByInTitles = computed(() => {
 
 <template>
     <div>
-        <BAlert v-if="!props.terminal" variant="warning" show>
+        <BAlert v-if="props.notTerminal" variant="warning" show>
             <LoadingSpan message="Metrics will update and change as the workflow progresses." />
         </BAlert>
         <BContainer>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 5904de674543..facd043fdffd 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -360,16 +360,11 @@ async function onCancel() {
                     </BBadge>
                 </template>
                 <div v-if="invocationAndJobTerminal">
-                    <WorkflowInvocationExportOptions
-                        :invocation-id="invocation.id"
-                        :terminal="invocationAndJobTerminal" />
+                    <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
                 </div>
-                <BAlert v-else variant="info" show>
-                    <LoadingSpan message="Waiting to complete invocation" />
-                </BAlert>
             </BTab>
             <BTab title="Metrics" :lazy="true">
-                <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
+                <WorkflowInvocationMetrics :invocation-id="invocation.id" :not-terminal="!invocationAndJobTerminal" />
             </BTab>
             <template v-slot:tabs-end>
                 <BButton

From 9d2b25cc3964faf906899e298b99acf9217e2512 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 11:38:34 -0600
Subject: [PATCH 6/7] add bg color to disabled tabs and move badge out to
 tabs-end slot

---
 .../WorkflowInvocationState.vue               | 63 ++++++++-----------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index facd043fdffd..741702b1cdc2 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -78,11 +78,11 @@ const tabsDisabled = computed(
 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.`;
+        return `This workflow is not currently scheduled. The current state is ${state}. Once the workflow is fully scheduled and jobs have complete any disabled tabs 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.`;
+        return `The workflow invocation still contains ${runningCount.value} running job(s). Once these jobs have completed any disabled tabs will become available.`;
     } else {
-        return "Steps for this workflow are still running. This option will be available once complete.";
+        return "Steps for this workflow are still running. Any disabled tabs will be available once complete.";
     }
 });
 
@@ -332,33 +332,14 @@ async function onCancel() {
             </BTab> -->
             <BTab
                 v-if="!props.isSubworkflow"
+                title="Report"
                 title-item-class="invocation-report-tab"
                 :disabled="tabsDisabled"
                 :lazy="reportLazy"
                 :active.sync="reportActive">
-                <template v-slot:title>
-                    <span>Report</span>
-                    <BBadge
-                        v-if="tabsDisabled"
-                        v-b-tooltip.hover.noninteractive
-                        :title="disabledTabTooltip"
-                        variant="warning">
-                        <FontAwesomeIcon :icon="faExclamation" />
-                    </BBadge>
-                </template>
                 <InvocationReport v-if="invocationStateSuccess" :invocation-id="invocation.id" />
             </BTab>
-            <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>
+            <BTab title="Export" title-item-class="invocation-export-tab" :disabled="tabsDisabled" lazy>
                 <div v-if="invocationAndJobTerminal">
                     <WorkflowInvocationExportOptions :invocation-id="invocation.id" />
                 </div>
@@ -367,17 +348,27 @@ async function onCancel() {
                 <WorkflowInvocationMetrics :invocation-id="invocation.id" :not-terminal="!invocationAndJobTerminal" />
             </BTab>
             <template v-slot:tabs-end>
-                <BButton
-                    v-if="!props.isFullPage && !invocationAndJobTerminal"
-                    v-b-tooltip.noninteractive.hover
-                    class="ml-auto my-1"
-                    title="Cancel scheduling of workflow invocation"
-                    data-description="cancel invocation button"
-                    size="sm"
-                    @click="onCancel">
-                    <FontAwesomeIcon :icon="faTimes" fixed-width />
-                    Cancel Workflow
-                </BButton>
+                <div class="ml-auto d-flex align-items-center">
+                    <BBadge
+                        v-if="tabsDisabled"
+                        v-b-tooltip.hover.noninteractive
+                        class="mr-1"
+                        :title="disabledTabTooltip"
+                        variant="primary">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
+                    <BButton
+                        v-if="!props.isFullPage && !invocationAndJobTerminal"
+                        v-b-tooltip.noninteractive.hover
+                        class="my-1"
+                        title="Cancel scheduling of workflow invocation"
+                        data-description="cancel invocation button"
+                        size="sm"
+                        @click="onCancel">
+                        <FontAwesomeIcon :icon="faTimes" fixed-width />
+                        Cancel Workflow
+                    </BButton>
+                </div>
             </template>
         </BTabs>
     </div>
@@ -397,7 +388,7 @@ async function onCancel() {
 .invocation-report-tab,
 .invocation-export-tab {
     .nav-link.disabled {
-        pointer-events: auto !important;
+        background-color: #e9edf0;
     }
 }
 </style>

From eade161ca221e5f99ea22ef636f351a5d5954538 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 10 Dec 2024 19:01:52 -0600
Subject: [PATCH 7/7] fix seleniums to wait for disabled tabs in invocation
 view

---
 lib/galaxy_test/selenium/test_workflow_run.py | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/galaxy_test/selenium/test_workflow_run.py b/lib/galaxy_test/selenium/test_workflow_run.py
index c47b835f47c3..36a4a60af080 100644
--- a/lib/galaxy_test/selenium/test_workflow_run.py
+++ b/lib/galaxy_test/selenium/test_workflow_run.py
@@ -37,6 +37,7 @@ class TestWorkflowRun(SeleniumTestCase, UsesHistoryItemAssertions, RunsWorkflows
     def test_workflow_export_file_rocrate(self):
         self._setup_simple_invocation_for_export_testing()
         invocations = self.components.invocations
+        self.workflow_run_wait_for_ok(hid=2)
         invocations.export_tab.wait_for_and_click()
         self.screenshot("invocation_export_formats")
         invocations.export_output_format(type="ro-crate").wait_for_and_click()
@@ -60,6 +61,7 @@ def test_workflow_export_file_rocrate(self):
     def test_workflow_export_file_native(self):
         self._setup_simple_invocation_for_export_testing()
         invocations = self.components.invocations
+        self.workflow_run_wait_for_ok(hid=2)
         invocations.export_tab.wait_for_and_click()
         self.screenshot("invocation_export_formats")
         invocations.export_output_format(type="default-file").wait_for_and_click()