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