From 283c7fd139a76f205b98e8fb17f11327d0a994bd Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 19 Nov 2024 20:28:56 -0600
Subject: [PATCH 01/10] Move invocation view controls and loading indicator

Used to be in the `tabs-end` slot. Here, we remove it from there and the BAlert and instead:
- The icon on the top left is a loading one when workflow is running
- The cancel button is next to the progress bars
- We remove the "Generate PDF" button entirely

Fixes https://github.com/galaxyproject/galaxy/issues/19158
---
 .../Workflow/WorkflowNavigationTitle.vue      |  6 +-
 .../WorkflowInvocationState.vue               | 88 +++++++++----------
 2 files changed, 47 insertions(+), 47 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index 4a5b9a413716..37c338c1ded2 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faEdit, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faSitemap, faSpinner, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -28,6 +28,7 @@ interface Props {
     workflowId: string;
     runDisabled?: boolean;
     runWaiting?: boolean;
+    invocationRunning?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -102,7 +103,8 @@ const workflowImportTitle = computed(() => {
                 <div class="d-flex portlet-header align-items-center">
                     <div class="flex-grow-1" data-description="workflow heading">
                         <div class="px-1">
-                            <FontAwesomeIcon :icon="faSitemap" />
+                            <FontAwesomeIcon v-if="props.invocationRunning" :icon="faSpinner" spin />
+                            <FontAwesomeIcon v-else :icon="faSitemap" />
                             <b class="mx-1">
                                 {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }}
                             </b>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 299b1227a9a1..2752a2fc63d0 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { faDownload, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BButton, BNavItem, BTab, BTabs } from "bootstrap-vue";
+import { BAlert, BBadge, BButton, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { type InvocationJobsSummary, type InvocationStep, type WorkflowInvocationElementView } from "@/api/invocations";
 import { useAnimationFrameResizeObserver } from "@/composables/sensors/animationFrameResizeObserver";
-import { getRootFromIndexLink } from "@/onload";
 import { useInvocationStore } from "@/stores/invocationStore";
 import { useWorkflowStore } from "@/stores/workflowStore";
 import { errorMessageAsString } from "@/utils/simple-error";
@@ -67,11 +66,15 @@ watch(
     }
 );
 
-// Report and PDF generation
-const generatePdfTooltip = "Generate PDF report for this workflow invocation";
-const invocationPdfLink = computed<string | null>(
-    () => getRootFromIndexLink() + `api/invocations/${props.invocationId}/report.pdf`
+const workflowStore = useWorkflowStore();
+const reportTabDisabled = computed(
+    () =>
+        !invocationStateSuccess.value ||
+        !invocation.value ||
+        !workflowStore.getStoredWorkflowByInstanceId(invocation.value.workflow_id)
 );
+
+/** Tooltip message for the report tab when it is disabled */
 const disabledReportTooltip = computed(() => {
     const state = invocationState.value;
     if (state != "scheduled") {
@@ -175,8 +178,6 @@ const jobStatesStr = computed(() => {
     return `${jobStr}.`;
 });
 
-const workflowStore = useWorkflowStore();
-
 watch(
     () => props.invocationId,
     async (id) => {
@@ -231,7 +232,8 @@ function cancelWorkflowSchedulingLocal() {
         <WorkflowNavigationTitle
             v-if="props.isFullPage && !props.success"
             :invocation="invocation"
-            :workflow-id="invocation.workflow_id" />
+            :workflow-id="invocation.workflow_id"
+            :invocation-running="!invocationAndJobTerminal" />
         <WorkflowAnnotation
             v-if="props.isFullPage"
             :workflow-id="invocation.workflow_id"
@@ -272,6 +274,17 @@ function cancelWorkflowSchedulingLocal() {
                         :loading="!invocationAndJobTerminal"
                         class="jobs-progress" />
                 </div>
+                <BButton
+                    v-if="!invocationAndJobTerminal"
+                    v-b-tooltip.noninteractive.hover
+                    title="Cancel scheduling of workflow invocation"
+                    data-description="cancel invocation button"
+                    size="sm"
+                    pill
+                    variant="outline-danger"
+                    @click="onCancel">
+                    <FontAwesomeIcon :icon="faTimes" fixed-width />
+                </BButton>
             </template>
         </WorkflowAnnotation>
         <BTabs
@@ -301,13 +314,20 @@ function cancelWorkflowSchedulingLocal() {
             </BTab> -->
             <BTab
                 v-if="!props.isSubworkflow"
-                title="Report"
                 title-item-class="invocation-report-tab"
-                :disabled="
-                    !invocationStateSuccess || !workflowStore.getStoredWorkflowByInstanceId(invocation.workflow_id)
-                "
+                :disabled="reportTabDisabled"
                 :lazy="reportLazy"
                 :active.sync="reportActive">
+                <template v-slot:title>
+                    <span>Report</span>
+                    <BBadge
+                        v-if="reportTabDisabled"
+                        v-b-tooltip.hover.noninteractive
+                        :title="disabledReportTooltip"
+                        variant="warning">
+                        <FontAwesomeIcon :icon="faExclamation" />
+                    </BBadge>
+                </template>
                 <InvocationReport v-if="invocationStateSuccess" :invocation-id="invocation.id" />
             </BTab>
             <BTab title="Export" lazy>
@@ -321,37 +341,6 @@ function cancelWorkflowSchedulingLocal() {
             <BTab title="Metrics" :lazy="true">
                 <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
             </BTab>
-            <template v-slot:tabs-end>
-                <BNavItem v-if="!invocationAndJobTerminal" class="ml-auto alert-info mr-1">
-                    <LoadingSpan message="Waiting to complete invocation" />
-                    <BButton
-                        v-b-tooltip.noninteractive.hover
-                        title="Cancel scheduling of workflow invocation"
-                        data-description="cancel invocation button"
-                        size="sm"
-                        variant="danger"
-                        @click="onCancel">
-                        <FontAwesomeIcon :icon="faTimes" fixed-width />
-                        Cancel Workflow
-                    </BButton>
-                </BNavItem>
-                <li
-                    role="presentation"
-                    class="nav-item align-self-center mr-2"
-                    :class="{ 'ml-auto': invocationAndJobTerminal }"
-                    data-description="generate pdf report button">
-                    <BButton
-                        v-b-tooltip.hover.bottom.noninteractive
-                        :title="invocationStateSuccess ? generatePdfTooltip : disabledReportTooltip"
-                        :disabled="!invocationStateSuccess"
-                        :href="invocationPdfLink"
-                        size="sm"
-                        target="_blank">
-                        <FontAwesomeIcon :icon="faDownload" fixed-width />
-                        Generate PDF
-                    </BButton>
-                </li>
-            </template>
         </BTabs>
     </div>
     <BAlert v-else-if="errorMessage" variant="danger" show>
@@ -365,6 +354,15 @@ function cancelWorkflowSchedulingLocal() {
     </BAlert>
 </template>
 
+<style lang="scss">
+// To show the tooltip on the disabled report tab badge
+.invocation-report-tab {
+    .nav-link.disabled {
+        pointer-events: auto !important;
+    }
+}
+</style>
+
 <style scoped lang="scss">
 .progress-bars {
     // progress bar shrinks to fit divs on either side

From 35bb5ff02bfeb16249105b962127ddb5ff435ae2 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 10:58:44 -0600
Subject: [PATCH 02/10] reintroduce `tabs-end` slot just for the invocation
 grid for cancel run

In the grid version, we don't have the `WorkflowNavigationTitle` and `WorkflowAnnotation` components, and one of those has the workflow cancel button, which could be useful in the grid as well.
---
 .../WorkflowInvocationState.vue                     | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 2752a2fc63d0..0ec871b3e410 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -341,6 +341,19 @@ function cancelWorkflowSchedulingLocal() {
             <BTab title="Metrics" :lazy="true">
                 <WorkflowInvocationMetrics :invocation-id="invocation.id"></WorkflowInvocationMetrics>
             </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>
+            </template>
         </BTabs>
     </div>
     <BAlert v-else-if="errorMessage" variant="danger" show>

From 6dd5f7c4c76b97c27f650d920839ab9deed02e5d Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 13:22:23 -0600
Subject: [PATCH 03/10] only show `SwitchToHistoryLink` in invocation view

This reverts the change in commit 632955ab5d118f0c8862b225e3d4648b08ff04a3
We realized (in https://github.com/galaxyproject/galaxy/issues/19157) we didn't really need this in the run form version of `WorkflowAnnotation` because there this acts as an indicator of whatever the "input" history is; which is just your current history and users can see that anyways.
---
 client/src/components/Workflow/WorkflowAnnotation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowAnnotation.vue b/client/src/components/Workflow/WorkflowAnnotation.vue
index 28559a7313d8..96d787ddc133 100644
--- a/client/src/components/Workflow/WorkflowAnnotation.vue
+++ b/client/src/components/Workflow/WorkflowAnnotation.vue
@@ -69,8 +69,8 @@ const workflowTags = computed(() => {
                     </span>
                     <UtcDate :date="timeElapsed" mode="elapsed" data-description="workflow annotation date" />
                 </i>
-                <span class="d-flex flex-gapx-1 align-items-center">
-                    <FontAwesomeIcon :icon="faHdd" />Input History:
+                <span v-if="invocationUpdateTime" class="d-flex flex-gapx-1 align-items-center">
+                    <FontAwesomeIcon :icon="faHdd" />History:
                     <SwitchToHistoryLink :history-id="props.historyId" />
                     <BBadge
                         v-if="props.newHistoryTarget && useHistoryStore().currentHistoryId !== props.historyId"

From 76fbe94365521ad5e52b413e2a45cd034430d9e7 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 13:35:11 -0600
Subject: [PATCH 04/10] move cancel invocation button to
 `workflow-title-actions`

---
 .../Workflow/Run/WorkflowRunFormSimple.vue    |  2 +-
 .../Workflow/WorkflowNavigationTitle.vue      |  2 +-
 .../WorkflowInvocationState.vue               | 30 +++++++++++--------
 3 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
index 802ebac376a4..ab4f42fa16b7 100644
--- a/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunFormSimple.vue
@@ -12,7 +12,7 @@
                 :run-disabled="hasValidationErrors || !canRunOnHistory"
                 :run-waiting="waitingForRequest"
                 @on-execute="onExecute">
-                <template v-slot:workflow-run-actions>
+                <template v-slot:workflow-title-actions>
                     <b-dropdown
                         v-if="showRuntimeSettings(currentUser)"
                         id="dropdown-form"
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index 37c338c1ded2..3c7683cc39ed 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -138,7 +138,7 @@ const workflowImportTitle = computed(() => {
                             :action="onImport">
                         </AsyncButton>
 
-                        <slot name="workflow-run-actions" />
+                        <slot name="workflow-title-actions" />
 
                         <ButtonSpinner
                             v-if="!props.invocation"
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 0ec871b3e410..58fb6cb74f88 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faExclamation, faSquare, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BBadge, BButton, BTab, BTabs } from "bootstrap-vue";
 import { computed, onUnmounted, ref, watch } from "vue";
@@ -233,7 +233,22 @@ function cancelWorkflowSchedulingLocal() {
             v-if="props.isFullPage && !props.success"
             :invocation="invocation"
             :workflow-id="invocation.workflow_id"
-            :invocation-running="!invocationAndJobTerminal" />
+            :invocation-running="!invocationAndJobTerminal">
+            <template v-slot:workflow-title-actions>
+                <BButton
+                    v-if="!invocationAndJobTerminal"
+                    v-b-tooltip.noninteractive.hover
+                    title="Cancel scheduling of workflow invocation"
+                    data-description="header cancel invocation button"
+                    size="sm"
+                    class="text-decoration-none"
+                    variant="link"
+                    @click="onCancel">
+                    <FontAwesomeIcon :icon="faSquare" fixed-width />
+                    Cancel
+                </BButton>
+            </template>
+        </WorkflowNavigationTitle>
         <WorkflowAnnotation
             v-if="props.isFullPage"
             :workflow-id="invocation.workflow_id"
@@ -274,17 +289,6 @@ function cancelWorkflowSchedulingLocal() {
                         :loading="!invocationAndJobTerminal"
                         class="jobs-progress" />
                 </div>
-                <BButton
-                    v-if="!invocationAndJobTerminal"
-                    v-b-tooltip.noninteractive.hover
-                    title="Cancel scheduling of workflow invocation"
-                    data-description="cancel invocation button"
-                    size="sm"
-                    pill
-                    variant="outline-danger"
-                    @click="onCancel">
-                    <FontAwesomeIcon :icon="faTimes" fixed-width />
-                </BButton>
             </template>
         </WorkflowAnnotation>
         <BTabs

From dd653eee023df21d2bbe1e19e2419c86ed38d670 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 14:24:39 -0600
Subject: [PATCH 05/10] fix `TextSummary` so if `one-line-summary="true"`,
 expansion works

---
 client/src/components/Common/TextSummary.vue | 22 ++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/TextSummary.vue b/client/src/components/Common/TextSummary.vue
index 19b7f40e98c7..6ef4b607402d 100644
--- a/client/src/components/Common/TextSummary.vue
+++ b/client/src/components/Common/TextSummary.vue
@@ -11,7 +11,8 @@ interface Props {
     maxLength?: number;
     /** The text to summarize */
     description: string;
-    /** If `true`, doesn't let unexpanded text go beyond height of one line */
+    /** If `true`, doesn't let unexpanded text go beyond height of one line
+     * and ignores `maxLength` */
     oneLineSummary?: boolean;
     /** If `true`, doesn't show expand/collapse buttons */
     noExpand?: boolean;
@@ -25,8 +26,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const showDetails = ref(false);
+const refOneLineSummary = ref<HTMLElement | null>(null);
 
-const textTooLong = computed(() => props.description.length > props.maxLength);
+const textTooLong = computed(() => {
+    if (!props.oneLineSummary) {
+        return props.description.length > props.maxLength;
+    } else if (refOneLineSummary.value) {
+        return refOneLineSummary.value.scrollWidth > refOneLineSummary.value.clientWidth;
+    } else {
+        return false;
+    }
+});
 const text = computed(() =>
     textTooLong.value && !showDetails.value
         ? props.description.slice(0, Math.round(props.maxLength - props.maxLength / 2)) + "..."
@@ -35,8 +45,12 @@ const text = computed(() =>
 </script>
 
 <template>
-    <div>
-        <component :is="props.component" v-if="props.oneLineSummary" class="one-line-summary">
+    <div :class="{ 'd-flex': props.oneLineSummary && !noExpand }">
+        <component
+            :is="props.component"
+            v-if="props.oneLineSummary"
+            ref="refOneLineSummary"
+            :class="{ 'one-line-summary': !showDetails }">
             {{ props.description }}
         </component>
         <span v-else>{{ text }}</span>

From f74204e83a2e920c32408949522d363849f0f2ae Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 14:31:06 -0600
Subject: [PATCH 06/10] use `one-line-summary` version of `TextSummary` and
 adds an `<hr>`

Fixes https://github.com/galaxyproject/galaxy/issues/19157 where we notice that the description could be full width instead of truncated half way, as well as the need for a visual distinction between the run form and the header annotation.
---
 client/src/components/Workflow/WorkflowAnnotation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/WorkflowAnnotation.vue b/client/src/components/Workflow/WorkflowAnnotation.vue
index 96d787ddc133..ab4738b35161 100644
--- a/client/src/components/Workflow/WorkflowAnnotation.vue
+++ b/client/src/components/Workflow/WorkflowAnnotation.vue
@@ -92,8 +92,9 @@ const workflowTags = computed(() => {
             </div>
         </div>
         <div v-if="props.showDetails">
-            <TextSummary v-if="description" class="my-1" :description="description" />
+            <TextSummary v-if="description" class="my-1" :description="description" one-line-summary component="span" />
             <StatelessTags v-if="workflowTags.length" :value="workflowTags" :disabled="true" />
+            <hr class="mb-0 mt-2" />
         </div>
     </div>
 </template>

From 72b590a7f3ad74a61cdf1d05c73eed0540cd580e Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 18:26:10 -0600
Subject: [PATCH 07/10] remove success message from `WorkflowRunSuccess` in
 case of 1 run

and add it to `WorkflowNavigationTitle` where it fades out to reveal the title and actions
---
 .../Workflow/Run/WorkflowRunSuccess.vue       |  4 +-
 .../Workflow/WorkflowNavigationTitle.vue      | 53 ++++++++++++++-----
 .../WorkflowInvocationState.vue               |  5 +-
 3 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
index c51868e53705..f5d71a820167 100644
--- a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
+++ b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -39,9 +39,9 @@ const wasNewHistoryTarget =
 
 <template>
     <div>
-        <div class="donemessagelarge">
+        <div v-if="props.invocations.length > 1" class="donemessagelarge">
             Successfully invoked workflow <b>{{ props.workflowName }}</b>
-            <em v-if="props.invocations.length > 1"> - {{ props.invocations.length }} times</em>.
+            <em> - {{ props.invocations.length }} times</em>.
             <span v-if="targetHistories.length > 1">
                 This workflow will generate results in multiple histories. You can observe progress in the
                 <router-link to="/histories/view_multiple">history multi-view</router-link>.
diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index 3c7683cc39ed..da1826d36f8f 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -29,6 +29,7 @@ interface Props {
     runDisabled?: boolean;
     runWaiting?: boolean;
     invocationRunning?: boolean;
+    success?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -85,20 +86,20 @@ const workflowImportTitle = computed(() => {
 
 <template>
     <div>
-        <div>
-            <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
-                {{ importErrorMessage }}
-            </BAlert>
-            <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
-                <span>
-                    Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
-                </span>
-                <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
-                list.
-            </BAlert>
-
-            <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
-
+        <BAlert v-if="importErrorMessage" variant="danger" dismissible show @dismissed="importErrorMessage = null">
+            {{ importErrorMessage }}
+        </BAlert>
+        <BAlert v-else-if="importedWorkflow" variant="info" dismissible show @dismissed="importedWorkflow = null">
+            <span>
+                Workflow <b>{{ importedWorkflow.name }}</b> imported successfully.
+            </span>
+            <RouterLink to="/workflows/list">Click here</RouterLink> to view the imported workflow in the workflows
+            list.
+        </BAlert>
+
+        <BAlert v-if="error" variant="danger" show>{{ error }}</BAlert>
+
+        <div class="position-relative">
             <div v-if="workflow" class="ui-portlet-section">
                 <div class="d-flex portlet-header align-items-center">
                     <div class="flex-grow-1" data-description="workflow heading">
@@ -165,6 +166,30 @@ const workflowImportTitle = computed(() => {
                     </BButtonGroup>
                 </div>
             </div>
+            <div v-if="props.success" class="donemessagelarge">
+                Successfully invoked workflow
+                <b>{{ getWorkflowName() }}</b>
+            </div>
         </div>
     </div>
 </template>
+
+<style scoped lang="scss">
+@keyframes fadeOut {
+    0% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+        display: none;
+        pointer-events: none;
+    }
+}
+
+.donemessagelarge {
+    top: 0;
+    position: absolute;
+    width: 100%;
+    animation: fadeOut 3s forwards;
+}
+</style>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index 58fb6cb74f88..b9244d8e0f0c 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -230,10 +230,11 @@ function cancelWorkflowSchedulingLocal() {
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100" data-description="workflow invocation state">
         <WorkflowNavigationTitle
-            v-if="props.isFullPage && !props.success"
+            v-if="props.isFullPage"
             :invocation="invocation"
             :workflow-id="invocation.workflow_id"
-            :invocation-running="!invocationAndJobTerminal">
+            :invocation-running="!invocationAndJobTerminal"
+            :success="props.success">
             <template v-slot:workflow-title-actions>
                 <BButton
                     v-if="!invocationAndJobTerminal"

From 07fb4c11dd204e811babd113a0ab50851cf30ebc Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 18:33:12 -0600
Subject: [PATCH 08/10] fix selector for report tab in jest for invocation view

---
 .../WorkflowInvocationState/WorkflowInvocationState.test.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
index f16536249e3e..84abb4dd163e 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.test.ts
@@ -15,7 +15,7 @@ const selectors = {
     invocationSummary: ".invocation-overview",
     bAlertStub: "balert-stub",
     spanElement: "span",
-    invocationReportTab: "btab-stub[title='Report']",
+    invocationReportTab: '[titleitemclass="invocation-report-tab"]',
     fullPageHeading: "anonymous-stub[h1='true']",
 };
 

From 5a17e0c08031610e6f1b719d01eba3f7649f399b Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Wed, 20 Nov 2024 18:36:08 -0600
Subject: [PATCH 09/10] jest checks for `SwitchToHistoryLink`'s conditional
 existence

which is based on whether it is the run form or invocation view

Tests changes from commit 6dd5f7c4c76b97c27f650d920839ab9deed02e5d
---
 client/src/components/Workflow/WorkflowAnnotation.test.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowAnnotation.test.ts b/client/src/components/Workflow/WorkflowAnnotation.test.ts
index abb7a4f5c062..c4830ffe1735 100644
--- a/client/src/components/Workflow/WorkflowAnnotation.test.ts
+++ b/client/src/components/Workflow/WorkflowAnnotation.test.ts
@@ -116,7 +116,7 @@ async function mountWorkflowAnnotation(version: "run_form" | "invocation", ownsW
 }
 
 describe("WorkflowAnnotation renders", () => {
-    it("(always) the run count and history, not indicators if owned not published", async () => {
+    it("the run count and history, not indicators if owned not published", async () => {
         async function checkHasRunCount(version: "run_form" | "invocation") {
             const { wrapper } = await mountWorkflowAnnotation(version);
 
@@ -124,7 +124,11 @@ describe("WorkflowAnnotation renders", () => {
             expect(runCount.text()).toContain("workflow runs:");
             expect(runCount.text()).toContain(SAMPLE_RUN_COUNT.toString());
 
-            expect(wrapper.find(SELECTORS.SWITCH_TO_HISTORY_LINK).text()).toBe(TEST_HISTORY.name);
+            if (version === "run_form") {
+                expect(wrapper.find(SELECTORS.SWITCH_TO_HISTORY_LINK).exists()).toBe(false);
+            } else {
+                expect(wrapper.find(SELECTORS.SWITCH_TO_HISTORY_LINK).text()).toBe(TEST_HISTORY.name);
+            }
 
             // Since this is the user's own workflow, the indicators link
             // (to view all published workflows by the owner) should not be present

From b04aa3a3fd5618019e33dec74639306e91ad7602 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Thu, 21 Nov 2024 10:48:24 -0600
Subject: [PATCH 10/10] remove workflow running spinner from invocation view

since the progress bars already indicate that
---
 client/src/components/Workflow/WorkflowNavigationTitle.vue  | 6 ++----
 .../WorkflowInvocationState/WorkflowInvocationState.vue     | 1 -
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowNavigationTitle.vue b/client/src/components/Workflow/WorkflowNavigationTitle.vue
index da1826d36f8f..5237d61e7e12 100644
--- a/client/src/components/Workflow/WorkflowNavigationTitle.vue
+++ b/client/src/components/Workflow/WorkflowNavigationTitle.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { faEdit, faSitemap, faSpinner, faUpload } from "@fortawesome/free-solid-svg-icons";
+import { faEdit, faSitemap, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BButtonGroup } from "bootstrap-vue";
 import { storeToRefs } from "pinia";
@@ -28,7 +28,6 @@ interface Props {
     workflowId: string;
     runDisabled?: boolean;
     runWaiting?: boolean;
-    invocationRunning?: boolean;
     success?: boolean;
 }
 
@@ -104,8 +103,7 @@ const workflowImportTitle = computed(() => {
                 <div class="d-flex portlet-header align-items-center">
                     <div class="flex-grow-1" data-description="workflow heading">
                         <div class="px-1">
-                            <FontAwesomeIcon v-if="props.invocationRunning" :icon="faSpinner" spin />
-                            <FontAwesomeIcon v-else :icon="faSitemap" />
+                            <FontAwesomeIcon :icon="faSitemap" />
                             <b class="mx-1">
                                 {{ props.invocation ? "Invoked " : "" }}Workflow: {{ getWorkflowName() }}
                             </b>
diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
index b9244d8e0f0c..839dda0cf7bb 100644
--- a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
+++ b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -233,7 +233,6 @@ function cancelWorkflowSchedulingLocal() {
             v-if="props.isFullPage"
             :invocation="invocation"
             :workflow-id="invocation.workflow_id"
-            :invocation-running="!invocationAndJobTerminal"
             :success="props.success">
             <template v-slot:workflow-title-actions>
                 <BButton