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