route to invocation view instead of expanding within invocation list

This allows users to directly go back and forth between dedicated full-center-panel invocation summaries and the invocations list.
galaxyproject · Apr 16, 2024 · 3249751 · 3249751
1 parent 5360a7c
commit 3249751
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/client/src/components/Workflow/InvocationsList.vue b/client/src/components/Workflow/InvocationsList.vue
@@ -50,13 +50,13 @@
                     @click.stop="swapRowDetails(data)" />
             </template>
             <template v-slot:cell(workflow_id)="data">
-                <div
-                    v-b-tooltip.hover.top
-                    :title="getStoredWorkflowNameByInstanceId(data.item.workflow_id)"
-                    class="truncate">
-                    <b-link href="#" @click.stop="swapRowDetails(data)">
+                <div class="truncate">
+                    <router-link
+                        v-b-tooltip.hover.top
+                        :title="`Go to detailed view for '${getStoredWorkflowNameByInstanceId(data.item.workflow_id)}'`"
+                        :to="invocationLink(data.item)">
                         {{ getStoredWorkflowNameByInstanceId(data.item.workflow_id) }}
-                    </b-link>
+                    </router-link>
                 </div>
             </template>
             <template v-slot:cell(history_id)="data">

diff --git a/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue b/client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-tabs v-if="invocation">
+    <b-tabs v-if="invocation" :class="{ 'position-relative': isInvocationRoute }">
         <b-tab title="Summary" active>
             <WorkflowInvocationSummary
                 class="invocation-summary"
@@ -25,6 +25,12 @@
                 <LoadingSpan message="Waiting to complete invocation" />
             </b-alert>
         </b-tab>
+        <router-link to="/workflows/invocations">
+            <b-button v-if="isInvocationRoute" class="position-absolute text-decoration-none" style="top: 0; right: 0">
+                <i class="fa fa-arrow-left mr-1" />
+                Go to Invocations List
+            </b-button>
+        </router-link>
     </b-tabs>
     <b-alert v-else variant="info" show>
         <LoadingSpan message="Loading invocation" />
@@ -104,6 +110,9 @@ export default {
             const jobsSummary = this.invocationStore.getInvocationJobsSummaryById(this.invocationId);
             return !jobsSummary ? null : jobsSummary;
         },
+        isInvocationRoute() {
+            return this.$route.path.includes(`/workflows/invocations/${this.invocationId}`);
+        },
     },
     created: function () {
         this.pollStepStatesUntilTerminal();