fix: fix workflows with options

Author: OliverDudgeon

src/components/runCards/JobCard/JobModal.tsx

@@ -69,15 +69,17 @@ export const JobModal = ({
   const queryClient = useQueryClient();
   const { enqueueError, enqueueSnackbar } = useEnqueueError<DmError>();
 
-  const [nameState, setNameState] = useState(instance?.name ?? "");
   const [debug, setDebug] = useState<DebugValue>("0");
 
   const { mutateAsync: createInstance } = useCreateInstance();
   // Get extra details about the job
   const { data: job } = useGetJob(jobId, undefined, {
     query: { retry: jobId === TEST_JOB_ID ? 1 : 3 },
   });
-  const name = nameState || (job?.job ?? "");
+  const [nameState, setNameState] = useState(instance?.name ?? "");
+  useEffect(() => {
+    job?.name && setNameState(job.name);
+  }, [job?.name]);
 
   const spec = instance?.application_specification;
   const specVariables = useMemo(
@@ -136,7 +138,7 @@ export const JobModal = ({
             debug,
             application_id: job.application.application_id,
             // application_version: job.application.latest_version,
-            as_name: name,
+            as_name: nameState,
             project_id: projectId,
             specification: JSON.stringify(specification),
           },
@@ -174,7 +176,7 @@ export const JobModal = ({
             <TextField
               fullWidth
               label="Job name"
-              value={name} // Give a default instance name of job.job
+              value={nameState} // Give a default instance name of job.job
               onChange={(event) => setNameState(event.target.value)}
             />
           </Box>

src/components/runCards/WorkflowCard/RunWorkflowButton.tsx

@@ -7,6 +7,7 @@ import dynamic from "next/dynamic";
 
 export interface RunWorkflowButtonProps {
   workflowId: WorkflowSummary["id"];
+  name: WorkflowSummary["name"];
   projectId: string;
   onLaunch?: (instanceId: string) => void;
   disabled?: boolean;
@@ -22,6 +23,7 @@ const WorkflowModal = dynamic<any>(
  */
 export const RunWorkflowButton = ({
   workflowId,
+  name,
   projectId,
   onLaunch,
   disabled,
@@ -47,6 +49,7 @@ export const RunWorkflowButton = ({
       </Tooltip>
       {!!hasOpened && (
         <WorkflowModal
+          name={name}
           open={open}
           projectId={projectId}
           workflowId={workflowId}

src/components/runCards/WorkflowCard/WorkflowCard.tsx

@@ -20,6 +20,7 @@ export const WorkflowCard = ({ workflow }: WorkflowCardProps) => {
       actions={() => (
         <RunWorkflowButton
           disabled={!projectId}
+          name={workflow.workflow_name ?? workflow.name}
           projectId={projectId ?? ""}
           workflowId={workflow.id}
         />

src/components/runCards/WorkflowCard/WorkflowModal.tsx

@@ -1,9 +1,11 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
+import { type DmError } from "@squonk/data-manager-client";
 import { useGetWorkflow, useRunWorkflow } from "@squonk/data-manager-client/workflow";
 
 import { Box, TextField } from "@mui/material";
 
+import { useEnqueueError } from "../../../hooks/useEnqueueStackError";
 import { ModalWrapper } from "../../modals/ModalWrapper";
 import { DebugCheckbox, type DebugValue } from "../DebugCheckbox";
 import { JobInputsAndOptionsForm } from "../JobCard/JobInputsAndOptionsForm";
@@ -21,10 +23,17 @@ export interface WorkflowModalProps {
  * Modal for running a workflow instance. Fetches workflow details and displays the correct form.
  */
 export const WorkflowModal = ({ workflowId, projectId, open, onClose }: WorkflowModalProps) => {
+  const { enqueueError } = useEnqueueError<DmError>();
+
   const { data: workflow } = useGetWorkflow(workflowId);
   const specVariables = workflow?.variables;
 
   const [nameState, setNameState] = useState("");
+
+  useEffect(() => {
+    workflow?.workflow_name && setNameState(workflow.workflow_name);
+  }, [workflow?.workflow_name]);
+
   const [debug, setDebug] = useState<DebugValue>("0");
 
   const [inputsData, setInputsData] = useState<InputData>({});
@@ -34,21 +43,23 @@ export const WorkflowModal = ({ workflowId, projectId, open, onClose }: Workflow
 
   const { mutateAsync: runWorkflow } = useRunWorkflow();
 
-  console.log(specVariables);
-  console.log(inputsData);
-
   const handleSubmit = async () => {
-    workflow?.id &&
-      (await runWorkflow({
-        workflowId: workflow.id,
-        data: {
-          as_name: nameState,
-          debug,
-          project_id: projectId,
-          variables: JSON.stringify({ ...optionsFormData, ...inputsData }),
-        },
-      }));
-    onClose();
+    try {
+      workflow?.id &&
+        (await runWorkflow({
+          workflowId: workflow.id,
+          data: {
+            as_name: nameState,
+            debug,
+            project_id: projectId,
+            variables: JSON.stringify({ ...optionsFormData, ...inputsData }),
+          },
+        }));
+    } catch (error) {
+      enqueueError(error);
+    } finally {
+      onClose();
+    }
   };
 
   return (
@@ -67,7 +78,10 @@ export const WorkflowModal = ({ workflowId, projectId, open, onClose }: Workflow
           fullWidth
           label="Workflow name"
           value={nameState}
-          onChange={(event) => setNameState(event.target.value)}
+          onChange={(event) => {
+            console.log(event.target.value);
+            return setNameState(event.target.value);
+          }}
         />
       </Box>
 
@@ -79,7 +93,7 @@ export const WorkflowModal = ({ workflowId, projectId, open, onClose }: Workflow
           inputsData={inputsData}
           options={specVariables?.options}
           optionsFormData={optionsFormData}
-          order={[]}
+          order={(specVariables?.options as any).properties}
           projectId={projectId}
           setInputsData={setInputsData}
           setOptionsFormData={setOptionsFormData}