diff --git a/.changeset/warm-clouds-compete.md b/.changeset/warm-clouds-compete.md new file mode 100644 index 0000000000..db933faab2 --- /dev/null +++ b/.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 diff --git a/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx b/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx index a689511425..b99dc72a42 100644 --- a/plugins/orchestrator-form-react/src/components/OrchestratorForm.tsx +++ b/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; }) => { + const [_initialFormData, setInitialFormData] = React.useState(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(() => { return [ { @@ -41,8 +48,8 @@ const SingleStepForm = ({ content: ( @@ -50,7 +57,7 @@ const SingleStepForm = ({ ), }, ]; - }, [schema, formData, onChange, uiSchema]); + }, [schema, _initialFormData, onSubmit, uiSchema]); return ; }; @@ -59,7 +66,7 @@ type OrchestratorFormProps = { isExecuting: boolean; handleExecute: (parameters: JsonObject) => Promise; 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 = ({ // it is required to pass the fragment so rjsf won't generate a Submit button ) : ( )} diff --git a/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx b/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx index b7e0b59be8..4e445baaf7 100644 --- a/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx +++ b/plugins/orchestrator-form-react/src/components/OrchestratorFormWrapper.tsx @@ -26,10 +26,10 @@ const MuiForm = withTheme(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; + 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 | 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(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) => { )} { 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 ( - + ); diff --git a/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx b/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx index ecb91d07ee..f7370997fe 100644 --- a/plugins/orchestrator/src/components/ExecuteWorkflowPage/ExecuteWorkflowPage.tsx +++ b/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;