Merge pull request #21261 from fedy97/feature/steps-clickable

feat: step titles are now clickable

.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.

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,

plugins/scaffolder-react/src/next/components/Stepper/Stepper.tsx

@@ -191,11 +191,22 @@ 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 isAllowedLabelClick = activeStep > index;
+          return (
+            <MuiStep key={index}>
+              <MuiStepLabel
+                aria-label={`Step ${index + 1}`}
+                style={{ cursor: isAllowedLabelClick ? 'pointer' : 'default' }}
+                onClick={() => {
+                  if (isAllowedLabelClick) setActiveStep(index);
+                }}
+              >
+                {step.title}
+              </MuiStepLabel>
+            </MuiStep>
+          );
+        })}
         <MuiStep>
           <MuiStepLabel>Review</MuiStepLabel>
         </MuiStep>