add isFullPage prop instead of checking route

ahmedhamidawan · Apr 25, 2024 · 6c4cd8e · 6c4cd8e
1 parent 9672fcd
commit 6c4cd8e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/client/src/components/Workflow/Run/WorkflowRunSuccess.vue b/client/src/components/Workflow/Run/WorkflowRunSuccess.vue
@@ -15,12 +15,17 @@
                 <a class="workflow-new-history-target-link" :href="newHistoryTarget">Switch to that history now</a>.
             </p>
             <p v-else>You can check the status of queued jobs and view the resulting data the History panel.</p>
+            <p>
+                View all of your workflow invocations in the
+                <router-link to="/workflows/invocations">Invocations List</router-link>.
+            </p>
         </div>
         <WorkflowInvocationState
             v-for="(invocation, index) in invocations"
             :key="invocation.id"
             :index="index"
-            :invocation-id="invocation.id" />
+            :invocation-id="invocation.id"
+            full-page />
         <div id="webhook-view"></div>
     </div>
 </template>

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -4,7 +4,6 @@ import { faArrowLeft, faClock, faEdit, faEye, faHdd, faSitemap } from "@fortawes
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BAlert, BButton, BCard, BTab, BTabs } from "bootstrap-vue";
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useRoute } from "vue-router/composables";
 
 import { InvocationJobsSummary, WorkflowInvocationElementView } from "@/api/invocations";
 import { components } from "@/api/schema";
@@ -37,6 +36,7 @@ interface Props {
     invocationId: string;
     index?: number;
     isSubworkflow?: boolean;
+    isFullPage?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -48,8 +48,6 @@ const emit = defineEmits<{
     (e: "invocation-cancelled"): void;
 }>();
 
-const route = useRoute();
-
 const invocationStore = useInvocationStore();
 
 const stepStatesInterval = ref<any>(undefined);
@@ -79,7 +77,6 @@ const jobStatesSummary = computed(() => {
     const jobsSummary = invocationStore.getInvocationJobsSummaryById(props.invocationId);
     return (!jobsSummary ? null : jobsSummary) as InvocationJobsSummary;
 });
-const isInvocationRoute = computed(() => route.path.includes(`/workflows/invocations/${props.invocationId}`));
 
 const workflowStore = useWorkflowStore();
 
@@ -139,7 +136,7 @@ function getWorkflowName() {
 
 <template>
     <div v-if="invocation" class="d-flex flex-column w-100">
-        <div v-if="isInvocationRoute" class="d-flex flex-gapx-1">
+        <div v-if="props.isFullPage" class="d-flex flex-gapx-1">
             <Heading h1 separator inline truncate size="xl" class="flex-grow-1">
                 Invoked Workflow: "{{ getWorkflowName() }}"
             </Heading>
@@ -157,7 +154,7 @@ function getWorkflowName() {
                 </BButton>
             </div>
         </div>
-        <BCard v-if="isInvocationRoute" class="py-2 px-3" no-body>
+        <BCard v-if="props.isFullPage" class="py-2 px-3" no-body>
             <div class="d-flex justify-content-between align-items-center">
                 <span class="d-flex flex-gapx-1 align-items-center">
                     <FontAwesomeIcon :icon="faHdd" />History:
@@ -195,12 +192,11 @@ function getWorkflowName() {
                     class="invocation-summary"
                     :invocation="invocation"
                     :index="index"
-                    :is-invocation-route="isInvocationRoute"
+                    :is-invocation-route="props.isFullPage"
                     :invocation-and-job-terminal="invocationAndJobTerminal"
                     :invocation-scheduling-terminal="invocationSchedulingTerminal"
                     :job-states-summary="jobStatesSummary"
                     :is-subworkflow="isSubworkflow"
-                    :visible="activeTab === TABS.SUMMARY"
                     @invocation-cancelled="cancelWorkflowSchedulingLocal" />
             </BTab>
             <BTab title="Details">

diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
@@ -545,7 +545,10 @@ export function getRouter(Galaxy) {
                     {
                         path: "workflows/invocations/:invocationId",
                         component: WorkflowInvocationState,
-                        props: true,
+                        props: (route) => ({
+                            invocationId: route.params.invocationId,
+                            isFullPage: true,
+                        }),
                     },
                     {
                         path: "workflows/list",