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
ahmedhamidawan · Nov 21, 2024 · 72b590a · 72b590a
1 parent f74204e
commit 72b590a
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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"