Merge pull request #18180 from ahmedhamidawan/enhance_invocations_panel

Improve Invocations panel
galaxyproject · May 20, 2024 · f3cb81d · f3cb81d
2 parents 2f43c32 + d44cc92
commit f3cb81d
Showing 1 changed file with 18 additions and 6 deletions.
diff --git a/client/src/components/Workflow/Invocation/InvocationScrollList.vue b/client/src/components/Workflow/Invocation/InvocationScrollList.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faEye } from "@fortawesome/free-regular-svg-icons";
-import { faArrowDown } from "@fortawesome/free-solid-svg-icons";
+import { faArrowDown, faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { useInfiniteScroll } from "@vueuse/core";
 import { BAlert, BBadge, BButton, BListGroup, BListGroupItem } from "bootstrap-vue";
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<Props>(), {
     limit: 20,
 });
 
-library.add(faEye, faArrowDown);
+library.add(faEye, faArrowDown, faInfoCircle);
 
 const stateClasses: Record<string, string> = {
     ready: "waiting",
@@ -156,17 +156,29 @@ function workflowName(workflowId: string) {
 
 <template>
     <div :class="props.inPanel ? 'unified-panel' : 'flex-column-overflow'">
+        <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
+        <BAlert v-else-if="initDataLoading" variant="info" show>
+            <LoadingSpan message="Loading invocations" />
+        </BAlert>
+        <BAlert v-else-if="totalInvocationCount === 0" show>
+            <h4>
+                <FontAwesomeIcon :icon="faInfoCircle" />
+                <span v-localize>No invocations yet.</span>
+            </h4>
+
+            <p>
+                <span v-localize>Run </span>
+                <router-link to="/workflows/list">workflows</router-link>
+                <span v-localize> to see invocations here.</span>
+            </p>
+        </BAlert>
         <div
             class="scroll-list-container"
             :class="{
                 'in-panel': props.inPanel,
                 'scrolled-top': scrolledTop,
                 'scrolled-bottom': scrolledBottom,
             }">
-            <BAlert v-if="errorMessage" variant="danger" show>{{ errorMessage }}</BAlert>
-            <BAlert v-else-if="initDataLoading" variant="info" show>
-                <LoadingSpan message="Loading invocations" />
-            </BAlert>
             <div
                 ref="scrollableDiv"
                 class="scroll-list"