Support workflow modes when viewing and starting a workflow

#63

src/components/workflows/WorkflowCard.vue

@@ -42,6 +42,9 @@ onMounted(() => {
               workflowId: workflow.workflow_id,
               versionId: latestVersion?.git_commit_hash,
             },
+            query: {
+              workflowModeId: latestVersion?.modes?.[0] ?? undefined,
+            },
           }"
           >{{ props.workflow.name }}
         </router-link>
@@ -77,6 +80,9 @@ onMounted(() => {
               workflowId: workflow.workflow_id,
               versionId: latestVersion?.git_commit_hash,
             },
+            query: {
+              workflowModeId: latestVersion?.modes?.[0] ?? undefined,
+            },
           }"
           class="btn btn-outline-success"
           role="button"

src/components/workflows/WorkflowWithVersionsCard.vue

@@ -178,6 +178,9 @@ onMounted(() => {
                         workflowId: props.workflow.workflow_id,
                         versionId: version.git_commit_hash,
                       },
+                      query: {
+                        workflowModeId: version.modes?.[0] ?? undefined,
+                      },
                     }"
                     >View
                   </router-link>
@@ -216,6 +219,7 @@ td > img {
 .add-icon-hover:hover {
   color: var(--bs-success) !important;
 }
+
 .text-align-center {
   text-align: center;
 }

src/router/index.ts

@@ -67,7 +67,11 @@ const router = createRouter({
           path: "workflows/:workflowId",
           name: "workflow",
           component: () => import("../views/workflows/WorkflowView.vue"),
-          props: true,
+          props: (route) => ({
+            versionId: route.params.versionId ?? undefined,
+            workflowId: route.params.workflowId,
+            workflowModeId: route.query.workflowModeId ?? undefined,
+          }),
           children: [
             {
               path: "version/:versionId",
@@ -78,6 +82,7 @@ const router = createRouter({
                 versionId: route.params.versionId,
                 workflowId: route.params.workflowId,
                 activeTab: route.query.tab ?? "description",
+                workflowModeId: route.query.workflowModeId ?? undefined,
               }),
             },
             {
@@ -85,7 +90,11 @@ const router = createRouter({
               name: "workflow-start",
               component: () =>
                 import("../views/workflows/StartWorkflowView.vue"),
-              props: true,
+              props: (route) => ({
+                versionId: route.params.versionId,
+                workflowId: route.params.workflowId,
+                workflowModeId: route.query.workflowModeId ?? undefined,
+              }),
             },
           ],
         },

src/views/workflows/StartWorkflowView.vue

@@ -7,13 +7,14 @@ import {
   WorkflowExecutionService,
   WorkflowVersionService,
 } from "@/client/workflow";
-import { onMounted, ref, reactive } from "vue";
+import { onMounted, ref, reactive, watch } from "vue";
 import { useRouter } from "vue-router";
 import { Toast } from "bootstrap";
 
 const props = defineProps<{
   versionId: string;
   workflowId: string;
+  workflowModeId?: string;
 }>();
 
 const parameterSchema = ref(undefined);
@@ -33,26 +34,29 @@ const versionState = reactive<{
   workflowExecutionError: undefined,
 });
 
-function downloadVersion() {
-  WorkflowVersionService.workflowVersionGetWorkflowVersion(
-    props.versionId,
-    props.workflowId,
-  )
-    .then((version) => {
-      versionState.workflowVersion = version;
-      return version;
-    })
-    .then(downloadVersionFiles);
-}
+watch(
+  () => props.workflowModeId,
+  (newModeId, oldModeId) => {
+    if (newModeId !== oldModeId) {
+      downloadVersionFiles();
+    }
+  },
+);
 
-function downloadVersionFiles(version: WorkflowVersion) {
+function downloadVersionFiles() {
+  versionState.loading = true;
   WorkflowVersionService.workflowVersionDownloadWorkflowDocumentation(
-    version.workflow_id,
-    version.git_commit_hash,
+    props.workflowId,
+    props.versionId,
     DocumentationEnum.PARAMETER_SCHEMA,
-  ).then((markdown) => {
-    parameterSchema.value = markdown;
-  });
+    props.workflowModeId,
+  )
+    .then((markdown) => {
+      parameterSchema.value = markdown;
+    })
+    .finally(() => {
+      versionState.loading = false;
+    });
 }
 
 function startWorkflow(
@@ -90,7 +94,7 @@ function startWorkflow(
 
 onMounted(() => {
   errorToast = new Toast("#workflowExecutionViewErrorToast");
-  downloadVersion();
+  downloadVersionFiles();
 });
 </script>
 

src/views/workflows/WorkflowVersionView.vue

@@ -7,6 +7,7 @@ import WorkflowDocumentationTabs from "@/components/workflows/WorkflowDocumentat
 const props = defineProps<{
   versionId: string;
   workflowId: string;
+  workflowModeId?: string;
 }>();
 
 const versionState = reactive<{
@@ -41,6 +42,22 @@ watch(
   },
 );
 
+watch(
+  () => props.workflowModeId,
+  (newModeId, oldModeId) => {
+    if (newModeId !== oldModeId) {
+      WorkflowVersionService.workflowVersionDownloadWorkflowDocumentation(
+        props.workflowId,
+        props.versionId,
+        DocumentationEnum.PARAMETER_SCHEMA,
+        newModeId,
+      ).then((schema) => {
+        versionState.parameterSchema = schema;
+      });
+    }
+  },
+);
+
 function updateVersion(versionId: string, workflowId: string) {
   versionState.loading = true;
   versionState.fileLoading = true;
@@ -84,8 +101,9 @@ function downloadVersionFiles(version: WorkflowVersion) {
       version.workflow_id,
       version.git_commit_hash,
       DocumentationEnum.PARAMETER_SCHEMA,
-    ).then((markdown) => {
-      versionState.parameterSchema = markdown;
+      props.workflowModeId,
+    ).then((schema) => {
+      versionState.parameterSchema = schema;
     });
   const usagePromise =
     WorkflowVersionService.workflowVersionDownloadWorkflowDocumentation(

src/views/workflows/WorkflowView.vue

@@ -4,10 +4,12 @@ import type {
   WorkflowOut,
   WorkflowStatistic,
   WorkflowVersion,
+  WorkflowModeOut,
 } from "@/client/workflow";
 import WorkflowStatisticsChart from "@/components/workflows/WorkflowStatisticsChart.vue";
 import {
   Status,
+  WorkflowModeService,
   WorkflowService,
   WorkflowVersionService,
 } from "@/client/workflow";
@@ -27,6 +29,7 @@ const userRepository = useAuthStore();
 const props = defineProps<{
   workflowId: string;
   versionId?: string;
+  workflowModeId?: string;
 }>();
 
 // Constants
@@ -42,12 +45,16 @@ const workflowState = reactive<{
   activeVersionId: string;
   initialOpen: boolean;
   stats: WorkflowStatistic[];
+  modeMapping: Record<string, WorkflowModeOut>;
+  activeModeId?: string;
 }>({
   loading: true,
   workflow: undefined,
-  activeVersionId: "",
+  activeVersionId: props.versionId ?? "",
   initialOpen: true,
   stats: [],
+  modeMapping: {},
+  activeModeId: props.workflowModeId,
 });
 
 // Watchers
@@ -68,6 +75,15 @@ watch(
   },
 );
 
+watch(
+  () => props.workflowModeId,
+  (newModeId) => {
+    if (newModeId) {
+      workflowState.activeModeId = newModeId;
+    }
+  },
+);
+
 watch(
   () => workflowState.activeVersionId,
   (newVersionId, oldVersionId) => {
@@ -76,10 +92,38 @@ watch(
       newVersionId !== oldVersionId &&
       route.name !== "workflow-start"
     ) {
+      // If mode does not exist in other version, select another mode
+      if (
+        activeVersionModeIds.value.length > 0 &&
+        activeVersionModeIds.value.findIndex(
+          (modeId) => modeId === workflowState.activeModeId,
+        ) == -1
+      ) {
+        workflowState.activeModeId = activeVersionModeIds.value[0];
+      } else if (activeVersionModeIds.value.length == 0) {
+        // If new version does not has any modes, then set mode id to none
+        workflowState.activeModeId = undefined;
+      }
       router.push({
         name: "workflow-version",
         params: { versionId: newVersionId },
-        query: { tab: route.query.tab },
+        query: {
+          tab: route.query.tab,
+          workflowModeId: workflowState.activeModeId,
+        },
+      });
+    }
+  },
+);
+
+watch(
+  () => workflowState.activeModeId,
+  (newModeId, oldModeId) => {
+    if (newModeId != oldModeId) {
+      router.push({
+        name: route.name ?? undefined,
+        params: { versionId: workflowState.activeVersionId },
+        query: { tab: route.query.tab, workflowModeId: newModeId },
       });
     }
   },
@@ -101,6 +145,10 @@ const activeVersion = computed<WorkflowVersion | undefined>(
     ),
 );
 
+const activeVersionModeIds = computed<string[]>(
+  () => activeVersion.value?.modes ?? [],
+);
+
 const activeVersionString = computed<string>(
   () => activeVersion.value?.version ?? "",
 );
@@ -144,6 +192,35 @@ function updateWorkflow(workflowId: string) {
       } else {
         workflowState.activeVersionId = route.params.versionId as string;
       }
+      workflowState.activeModeId = activeVersionModeIds.value[0] ?? undefined;
+      return workflow;
+    })
+    .then((workflow) =>
+      workflow.versions.map((version) => version.modes).flat(),
+    )
+    .then((modeIds) =>
+      modeIds
+        .filter((modeId) => modeId != null) // filter null modes
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        .filter((modeId) => !workflowState.modeMapping[modeId!])
+        .filter(
+          // filter unique workflow versions
+          (modeId, index, array) =>
+            array.findIndex((val) => val === modeId) === index,
+        ),
+    )
+    .then((modeIds) =>
+      Promise.all(
+        modeIds.map((modeId) =>
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          WorkflowModeService.workflowModeGetWorkflowMode(modeId!),
+        ),
+      ),
+    )
+    .then((modes) => {
+      for (const mode of modes) {
+        workflowState.modeMapping[mode.mode_id] = mode;
+      }
     })
     .catch(() => {
       workflowState.workflow = undefined;
@@ -214,7 +291,24 @@ onMounted(() => {
         alt="Workflow icon"
       />
     </div>
-    <p class="fs-4 mb-5 mt-3">{{ workflowState.workflow.short_description }}</p>
+    <p class="fs-4 mt-3">{{ workflowState.workflow.short_description }}</p>
+    <div
+      v-if="activeVersionModeIds.length > 0"
+      class="row align-items-center mb-3 fs-5"
+    >
+      <label class="col-sm-1 col-form-label">Mode:</label>
+      <div class="col-sm-11">
+        <select class="form-select w-fit" v-model="workflowState.activeModeId">
+          <option
+            v-for="modeId of activeVersionModeIds"
+            :key="modeId"
+            :value="modeId"
+          >
+            {{ workflowState.modeMapping[modeId].name }}
+          </option>
+        </select>
+      </div>
+    </div>
     <template v-if="route.name !== 'workflow-start'">
       <div
         v-if="!versionLaunchable"
@@ -256,6 +350,9 @@ onMounted(() => {
               versionId: props.versionId,
               workflowId: props.workflowId,
             },
+            query: {
+              workflowModeId: workflowState.activeModeId,
+            },
           }"
         >
           <font-awesome-icon icon="fa-solid fa-rocket" class="me-2" />