diff --git a/.changeset/green-tools-arrive.md b/.changeset/green-tools-arrive.md new file mode 100644 index 0000000000..78eed180d4 --- /dev/null +++ b/.changeset/green-tools-arrive.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Fix issue with form state not refreshing when updating diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index ba81ee4bd5..809291a9f7 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -124,16 +124,15 @@ export const Stepper = (stepperProps: StepperProps) => { const apiHolder = useApiHolder(); const [activeStep, setActiveStep] = useState(0); const [isValidating, setIsValidating] = useState(false); + const [initialState] = useFormDataFromQuery(props.initialState); - const [formState, setFormState] = useState<{ - [step: string]: Record; - }>(); + const [stepsState, setStepsState] = useState[]>( + steps.map(() => initialState), + ); const [errors, setErrors] = useState(); const styles = useStyles(); - const makeStepKey = (step: string | number) => `step-${step}`; - const backLabel = presentation?.buttonLabels?.backButtonText ?? backButtonText; const createLabel = @@ -168,15 +167,15 @@ export const Stepper = (stepperProps: StepperProps) => { setActiveStep(prevActiveStep => prevActiveStep - 1); }; - const handleChange = useCallback( - (e: IChangeEvent) => { - setFormState(current => ({ - ...current, - [makeStepKey(activeStep)]: e.formData, - })); - }, - [setFormState, activeStep], - ); + const handleChange = (e: IChangeEvent) => { + setStepsState(current => { + const newState = [...current]; + newState[activeStep] = { + ...e.formData, + }; + return newState; + }); + }; const currentStep = useTransformSchemaToProps(steps[activeStep], { layouts }); @@ -197,6 +196,13 @@ export const Stepper = (stepperProps: StepperProps) => { if (hasErrors(returnedValidation)) { setErrors(returnedValidation); } else { + setStepsState(current => { + const newState = [...current]; + newState[activeStep] = { + ...formData, + }; + return newState; + }); setErrors(undefined); setActiveStep(prevActiveStep => { const stepNum = prevActiveStep + 1; @@ -204,10 +210,6 @@ export const Stepper = (stepperProps: StepperProps) => { return stepNum; }); } - setFormState(current => ({ - ...current, - [makeStepKey(activeStep)]: formData, - })); }; const { @@ -218,23 +220,14 @@ export const Stepper = (stepperProps: StepperProps) => { const mergedUiSchema = merge({}, propUiSchema, currentStep?.uiSchema); - const mergedState = useMemo(() => { - if (!formState) { - return initialState; - } - const { [makeStepKey(activeStep)]: activeState, ...historicalState } = - formState; - const chronologicalState = { - ...historicalState, - [makeStepKey(activeStep)]: activeState, - }; - return merge({}, ...Object.values(chronologicalState)); - }, [formState, activeStep, initialState]); + const formState = stepsState.reduce((acc, step) => { + return { ...acc, ...step }; + }, {}); const handleCreate = useCallback(() => { - props.onCreate(mergedState); + props.onCreate(formState); analytics.captureEvent('click', `${createLabel}`); - }, [props, mergedState, analytics, createLabel]); + }, [props, formState, analytics, createLabel]); return ( <> @@ -269,12 +262,15 @@ export const Stepper = (stepperProps: StepperProps) => { {/* eslint-disable-next-line no-nested-ternary */} {activeStep < steps.length ? (
{ ReviewStepComponent ? ( {}} steps={steps} @@ -316,7 +312,7 @@ export const Stepper = (stepperProps: StepperProps) => { /> ) : ( <> - +