feat: step titles are now clickable

Signed-off-by: Federico Morreale <frc.morreale@gmail.com>

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