diff --git a/.changeset/hot-wolves-flash.md b/.changeset/hot-wolves-flash.md new file mode 100644 index 0000000000..84c4d34f37 --- /dev/null +++ b/.changeset/hot-wolves-flash.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-scaffolder-react': patch +--- + +Step titles in the Stepper are now clickable and redirect the user to the corresponding step, as an alternative to using the back buttons. diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx index 34243e232d..2bb66fd782 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.test.tsx @@ -112,6 +112,54 @@ describe('Stepper', () => { ); }); + it('should remember the state of the form when cycling through the pages by directly clicking on the step labels', async () => { + const manifest: TemplateParameterSchema = { + steps: [ + { + title: 'Step 1', + schema: { + properties: { + name: { + type: 'string', + }, + }, + }, + }, + { + title: 'Step 2', + schema: { + properties: { + description: { + type: 'string', + }, + }, + }, + }, + ], + title: 'React JSON Schema Form Test', + }; + + const { getByRole, getByLabelText } = await renderInTestApp( + , + ); + + await fireEvent.change(getByRole('textbox', { name: 'name' }), { + target: { value: 'im a test value' }, + }); + + await act(async () => { + await fireEvent.click(getByRole('button', { name: 'Next' })); + }); + + await act(async () => { + await fireEvent.click(getByLabelText('Step 1')); + }); + + expect(getByRole('textbox', { name: 'name' })).toHaveValue( + 'im a test value', + ); + }); + it('should merge nested formData correctly in multiple steps', async () => { const Repo = ({ onChange, diff --git a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx index 9a333944b9..5aaf76316c 100644 --- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx +++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx @@ -191,11 +191,22 @@ export const Stepper = (stepperProps: StepperProps) => { <> {isValidating && } - {steps.map((step, index) => ( - - {step.title} - - ))} + {steps.map((step, index) => { + const isAllowedLabelClick = activeStep > index; + return ( + + { + if (isAllowedLabelClick) setActiveStep(index); + }} + > + {step.title} + + + ); + })} Review