From e516bf4da85d9650afa1353f7a8f0e00bf34e33f Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Mon, 13 Nov 2023 18:34:00 +0100
Subject: [PATCH 1/2] feat: step titles are now clickable

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .changeset/hot-wolves-flash.md                |  5 +++++
 .../src/next/components/Stepper/Stepper.tsx   | 20 ++++++++++++++-----
 2 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/hot-wolves-flash.md

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.tsx b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
index 9a333944b9..ccb97829dc 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -191,11 +191,21 @@ export const Stepper = (stepperProps: StepperProps) => {
     <>
       {isValidating && <LinearProgress variant="indeterminate" />}
       <MuiStepper activeStep={activeStep} alternativeLabel variant="elevation">
-        {steps.map((step, index) => (
-          <MuiStep key={index}>
-            <MuiStepLabel>{step.title}</MuiStepLabel>
-          </MuiStep>
-        ))}
+        {steps.map((step, index) => {
+          const isAllowedTitleClick = activeStep > index;
+          return (
+            <MuiStep key={step.title}>
+              <MuiStepLabel
+                style={{ cursor: isAllowedTitleClick ? 'pointer' : 'text' }}
+                onClick={() => {
+                  if (isAllowedTitleClick) setActiveStep(index);
+                }}
+              >
+                {step.title}
+              </MuiStepLabel>
+            </MuiStep>
+          );
+        })}
         <MuiStep>
           <MuiStepLabel>Review</MuiStepLabel>
         </MuiStep>

From 64358b0980f9cd603fc1121254988d238343e2e5 Mon Sep 17 00:00:00 2001
From: Federico Morreale <frc.morreale@gmail.com>
Date: Tue, 14 Nov 2023 10:32:59 +0100
Subject: [PATCH 2/2] fix: review changes

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>
---
 .../next/components/Stepper/Stepper.test.tsx  | 48 +++++++++++++++++++
 .../src/next/components/Stepper/Stepper.tsx   |  9 ++--
 2 files changed, 53 insertions(+), 4 deletions(-)

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(
+      <Stepper manifest={manifest} extensions={[]} onCreate={jest.fn()} />,
+    );
+
+    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 ccb97829dc..5aaf76316c 100644
--- a/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
+++ b/plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx
@@ -192,13 +192,14 @@ export const Stepper = (stepperProps: StepperProps) => {
       {isValidating && <LinearProgress variant="indeterminate" />}
       <MuiStepper activeStep={activeStep} alternativeLabel variant="elevation">
         {steps.map((step, index) => {
-          const isAllowedTitleClick = activeStep > index;
+          const isAllowedLabelClick = activeStep > index;
           return (
-            <MuiStep key={step.title}>
+            <MuiStep key={index}>
               <MuiStepLabel
-                style={{ cursor: isAllowedTitleClick ? 'pointer' : 'text' }}
+                aria-label={`Step ${index + 1}`}
+                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}
                 onClick={() => {
-                  if (isAllowedTitleClick) setActiveStep(index);
+                  if (isAllowedLabelClick) setActiveStep(index);
                 }}
               >
                 {step.title}