only show overview tab for subworkflow steps in invocation view

This was initially to fix the bug where for a subworkflow (and expandable workflow runs in the invocation grid), we were showing all tabs/nav items and clicking them was changing the route to the subworkflow's (or expanded run's) detailed view on that tab (unexpected behavior when on the parent invocation view or the grid).

However, this actually makes sense to only show the overview tab because if a user wishes to view other items such as Report, Export etc, they would be better off viewing that workflow's detailed view in another tab (as guided by the overview tab via the link in `SubworkflowAlert.vue` added here).

Author: ahmedhamidawan

client/src/api/invocations.ts

@@ -7,6 +7,7 @@ export type InvocationInputParameter = components["schemas"]["InvocationInputPar
 export type InvocationOutput = components["schemas"]["InvocationOutput"];
 export type InvocationOutputCollection = components["schemas"]["InvocationOutputCollection"];
 export type InvocationJobsSummary = components["schemas"]["InvocationJobsResponse"];
+export type InvocationState = components["schemas"]["InvocationState"];
 export type InvocationStep = components["schemas"]["InvocationStep"];
 export type InvocationMessage = components["schemas"]["InvocationMessageResponseUnion"];
 export type WorkflowInvocationRequest = components["schemas"]["WorkflowInvocationRequestModel"];

client/src/components/WorkflowInvocationState/SubworkflowAlert.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { BAlert } from "bootstrap-vue";
+
+import type { InvocationState } from "@/api/invocations";
+import { withPrefix } from "@/utils/redirect";
+
+import ExternalLink from "../ExternalLink.vue";
+import HelpText from "../Help/HelpText.vue";
+
+const props = defineProps<{
+    invocationId: string;
+    state?: InvocationState;
+}>();
+</script>
+
+<template>
+    <BAlert variant="secondary" show>
+        <span v-if="props.state">
+            This subworkflow is
+            <HelpText :uri="`galaxy.invocations.states.${props.state}`" :text="props.state" />.
+        </span>
+        <ExternalLink :href="withPrefix(`/workflows/invocations/${props.invocationId}`)"> Click here </ExternalLink>
+        to view this subworkflow in graph view.
+    </BAlert>
+</template>

client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue

@@ -6,11 +6,9 @@ import { computed, nextTick, ref } from "vue";
 import type { InvocationMessage, StepJobSummary, WorkflowInvocationElementView } from "@/api/invocations";
 import { useWorkflowInstance } from "@/composables/useWorkflowInstance";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
-import { withPrefix } from "@/utils/redirect";
 
-import ExternalLink from "../ExternalLink.vue";
-import HelpText from "../Help/HelpText.vue";
 import InvocationGraph from "../Workflow/Invocation/Graph/InvocationGraph.vue";
+import SubworkflowAlert from "./SubworkflowAlert.vue";
 import WorkflowInvocationError from "./WorkflowInvocationError.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
 
@@ -46,12 +44,7 @@ async function showStep(stepId: number) {
 
 <template>
     <div class="mb-3 workflow-invocation-state-component">
-        <BAlert v-if="isSubworkflow" variant="secondary" show>
-            This subworkflow is
-            <HelpText :uri="`galaxy.invocations.states.${invocation.state}`" :text="invocation.state" />.
-            <ExternalLink :href="withPrefix(`/workflows/invocations/${invocation.id}`)"> Click here </ExternalLink>
-            to view this subworkflow in graph view.
-        </BAlert>
+        <SubworkflowAlert v-if="isSubworkflow" :invocation-id="props.invocation.id" :state="props.invocation.state" />
         <div v-if="props.invocationMessages?.length" class="d-flex align-items-center">
             <WorkflowInvocationError
                 v-for="message in props.invocationMessages"

client/src/components/WorkflowInvocationState/WorkflowInvocationState.vue

@@ -338,7 +338,7 @@ async function onCancel() {
             </template>
         </WorkflowAnnotation>
 
-        <BNav pills class="mb-2 p-2 bg-light border-bottom">
+        <BNav v-if="props.isFullPage" pills class="mb-2 p-2 bg-light border-bottom">
             <BNavItem title="Overview" :active="!props.tab" :to="`/workflows/invocations/${props.invocationId}`">
                 Overview
             </BNavItem>

client/src/components/WorkflowInvocationState/WorkflowInvocationStep.vue

@@ -10,7 +10,7 @@ import { useInvocationStore } from "@/stores/invocationStore";
 import Heading from "../Common/Heading.vue";
 import JobStep from "./JobStep.vue";
 import ParameterStep from "./ParameterStep.vue";
-import WorkflowInvocationState from "./WorkflowInvocationState.vue";
+import SubworkflowAlert from "./SubworkflowAlert.vue";
 import WorkflowInvocationStepHeader from "./WorkflowInvocationStepHeader.vue";
 import WorkflowStepTitle from "./WorkflowStepTitle.vue";
 import GenericHistoryItem from "@/components/History/Content/GenericItem.vue";
@@ -240,10 +240,7 @@ onUnmounted(() => {
                                         </template>
                                     </div>
 
-                                    <WorkflowInvocationState
-                                        v-else
-                                        is-subworkflow
-                                        :invocation-id="stepDetails.subworkflow_invocation_id" />
+                                    <SubworkflowAlert v-else :invocation-id="stepDetails.subworkflow_invocation_id" />
                                 </div>
                             </div>
                         </div>