fix(orchestrator): multiple bug fixes related to execution form (#2573)

Author: batzionb

.changeset/warm-clouds-compete.md

@@ -0,0 +1,6 @@
+---
+"@janus-idp/backstage-plugin-orchestrator-form-react": patch
+"@janus-idp/backstage-plugin-orchestrator": patch
+---
+
+multiple bug fixes related to execution form

plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx

@@ -24,15 +24,22 @@ const getNumSteps = (schema: JSONSchema7): number | undefined => {
 
 const SingleStepForm = ({
   schema,
-  formData,
-  onChange,
+  initialFormData,
+  onSubmit,
   uiSchema,
 }: {
   schema: JSONSchema7;
-  formData: JsonObject;
-  onChange: (formData: JsonObject) => void;
+  initialFormData?: JsonObject;
+  onSubmit: (formData: JsonObject) => void;
   uiSchema: UiSchema<JsonObject>;
 }) => {
+  const [_initialFormData, setInitialFormData]  = React.useState<JsonObject | undefined>(initialFormData) 
+  const _onSubmit = (formData: JsonObject) => {    
+    // Since the review step is outside of the MuiForm component in SingleStepForm, we need to load the current values when navigating back.    
+    setInitialFormData(formData);
+    onSubmit(formData);
+  }
+
   const steps = React.useMemo<OrchestratorFormStep[]>(() => {
     return [
       {
@@ -41,16 +48,16 @@ const SingleStepForm = ({
         content: (
           <OrchestratorFormWrapper
             schema={{ ...schema, title: '' }}
-            formData={formData}
-            onChange={onChange}
+            initialFormData={_initialFormData}
+            onSubmit={_onSubmit}
             uiSchema={uiSchema}
           >
             <OrchestratorFormToolbar />
           </OrchestratorFormWrapper>
         ),
       },
     ];
-  }, [schema, formData, onChange, uiSchema]);
+  }, [schema, _initialFormData, onSubmit, uiSchema]);
   return <OrchestratorFormStepper steps={steps} />;
 };
 
@@ -59,7 +66,7 @@ type OrchestratorFormProps = {
   isExecuting: boolean;
   handleExecute: (parameters: JsonObject) => Promise<void>;
   data?: JsonObject;
-  isDataReadonly?: boolean;
+  isDataReadonly?: boolean;  
 };
 
 const OrchestratorForm = ({
@@ -80,7 +87,7 @@ const OrchestratorForm = ({
     handleExecute(formData || {});
   }, [formData, handleExecute]);
 
-  const onChange = React.useCallback(
+  const onSubmit = React.useCallback(
     (_formData: JsonObject) => {
       setFormData(_formData);
     },
@@ -113,17 +120,17 @@ const OrchestratorForm = ({
         <OrchestratorFormWrapper
           schema={schema}
           numStepsInMultiStepSchema={numStepsInMultiStepSchema}
-          formData={formData}
-          onChange={onChange}
+          onSubmit={onSubmit}
           uiSchema={uiSchema}
+          initialFormData={data}
         >
           <Fragment />
         </OrchestratorFormWrapper> // it is required to pass the fragment so rjsf won't generate a Submit button
       ) : (
         <SingleStepForm
           schema={schema}
-          onChange={onChange}
-          formData={formData}
+          onSubmit={onSubmit}
+          initialFormData={data}          
           uiSchema={uiSchema}
         />
       )}

plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx

@@ -26,10 +26,10 @@ const MuiForm = withTheme<JsonObject, JSONSchema7>(MuiTheme);
 type OrchestratorFormWrapperProps = {
   schema: JSONSchema7;
   numStepsInMultiStepSchema?: number;
-  children: React.ReactNode;
-  formData: JsonObject;
-  onChange: (formData: JsonObject) => void;
+  children: React.ReactNode;  
+  onSubmit: (formData: JsonObject) => void;
   uiSchema: UiSchema<JsonObject, JSONSchema7>;
+  initialFormData?: JsonObject;
 };
 
 const WrapperFormPropsContext =
@@ -49,13 +49,15 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
     numStepsInMultiStepSchema,
     uiSchema,
     schema,
-    onChange,
-    formData,
+    onSubmit: _onSubmit,
+    initialFormData,
     children,
   } = props;
   const [extraErrors, setExtraErrors] = React.useState<
     ErrorSchema<JsonObject> | undefined
   >();
+  // make this form a controlled component so state will remain when moving between steps. see https://rjsf-team.github.io/react-jsonschema-form/docs/quickstart#controlled-component
+  const [formData, setFormData] = React.useState<JsonObject>(initialFormData || {});
   const isMultiStep = numStepsInMultiStepSchema !== undefined;
   const { handleNext, activeStep, handleValidateStarted, handleValidateEnded } =
     useStepperContext();
@@ -96,8 +98,10 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
       !_validationError &&
       activeStep < (numStepsInMultiStepSchema || 1)
     ) {
+      _onSubmit(_formData);
       handleNext();
-    }
+      
+    }    
   };
 
   return (
@@ -109,7 +113,7 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
       )}
       <Grid item>
         <MuiForm
-          {...omit(decoratorProps, 'extra')}
+          {...omit(decoratorProps, 'getExtraErrors')}
           fields={isMultiStep ? { ObjectField: StepperObjectField } : {}}
           uiSchema={uiSchema}
           validator={validator}
@@ -119,7 +123,7 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
           extraErrors={extraErrors}
           onSubmit={e => onSubmit(e.formData || {})}
           onChange={e => {
-            onChange(e.formData || {});
+            setFormData(e.formData || {});
             if (decoratorProps.onChange) {
               decoratorProps.onChange(e);
             }
@@ -135,17 +139,18 @@ const FormComponent = (decoratorProps: FormDecoratorProps) => {
 const OrchestratorFormWrapper = ({
   schema,
   uiSchema,
-  formData,
+  initialFormData,
   ...props
 }: OrchestratorFormWrapperProps) => {
   const formApi =
     useApiHolder().get(orchestratorFormApiRef) || defaultFormExtensionsApi;
   const NewComponent = React.useMemo(() => {
-    const formDecorator = formApi.getFormDecorator(schema, uiSchema, formData);
+    const formDecorator = formApi.getFormDecorator(schema, uiSchema, initialFormData);
     return formDecorator(FormComponent);
-  }, [schema, formApi, uiSchema, formData]);
+  }, [schema, uiSchema, formApi, initialFormData]);
+  console.log({initialFormData})
   return (
-    <WrapperFormPropsContext.Provider value={{ schema, uiSchema, formData, ...props }}>
+    <WrapperFormPropsContext.Provider value={{ schema, uiSchema, initialFormData, ...props }}>
       <NewComponent />
     </WrapperFormPropsContext.Provider>
   );

plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx

@@ -75,7 +75,7 @@ export const ExecuteWorkflowPage = () => {
         const response = await orchestratorApi.executeWorkflow({
           workflowId,
           parameters,
-          businessKey: effectiveInstanceId,
+          businessKey: assessmentInstanceId,
         });
         navigate(instanceLink({ instanceId: response.data.id }));
       } catch (err) {
@@ -84,7 +84,7 @@ export const ExecuteWorkflowPage = () => {
         setIsExecuting(false);
       }
     },
-    [orchestratorApi, workflowId, navigate, instanceLink, effectiveInstanceId],
+    [orchestratorApi, workflowId, navigate, instanceLink, assessmentInstanceId],
   );
 
   const error = responseError || workflowNameError;