From 25300cb802ca482790619be5980166bf6c98d2a4 Mon Sep 17 00:00:00 2001
From: Lex Felix <112618115+lexfelixpost@users.noreply.github.com>
Date: Tue, 18 Feb 2025 11:15:44 +0100
Subject: [PATCH 1/2] fix(core-components): SimpleStepper back button works
 with activeStep set higher than 0

Signed-off-by: Lex Felix <112618115+lexfelixpost@users.noreply.github.com>
---
 .changeset/beige-chairs-suffer.md             |  5 ++++
 .../SimpleStepper/SimpleStepper.test.tsx      | 28 +++++++++++++++++++
 .../SimpleStepper/SimpleStepper.tsx           | 13 ++++++++-
 3 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/beige-chairs-suffer.md

diff --git a/.changeset/beige-chairs-suffer.md b/.changeset/beige-chairs-suffer.md
new file mode 100644
index 0000000000..8989921373
--- /dev/null
+++ b/.changeset/beige-chairs-suffer.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': minor
+---
+
+SimpleStepper back button now works with activeStep property set higher than 0
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
index 73baff8db2..e4093f07d2 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.test.tsx
@@ -173,4 +173,32 @@ describe('Stepper', () => {
     fireEvent.click(getTextInSlide(rendered, 2)('Back') as Node);
     expect(rendered.getByText('step1')).toBeInTheDocument();
   });
+
+  it('Handles onBack action properly when activeStep is higher than 0', async () => {
+    const rendered = await renderInTestApp(
+      <Stepper activeStep={2}>
+        <Step title="Step 0" data-testid="step0">
+          <div>step0</div>
+        </Step>
+        <Step title="Step 1" data-testid="step1">
+          <div>step1</div>
+        </Step>
+        <Step title="Step 2" data-testid="step2">
+          <div>step2</div>
+        </Step>
+      </Stepper>,
+    );
+
+    fireEvent.click(getTextInSlide(rendered, 2)('Back') as Node);
+    expect(rendered.getByText('step1')).toBeInTheDocument();
+
+    fireEvent.click(getTextInSlide(rendered, 1)('Back') as Node);
+    expect(rendered.getByText('step0')).toBeInTheDocument();
+
+    fireEvent.click(getTextInSlide(rendered, 0)('Next') as Node);
+    expect(rendered.getByText('step1')).toBeInTheDocument();
+
+    fireEvent.click(getTextInSlide(rendered, 1)('Next') as Node);
+    expect(rendered.getByText('step2')).toBeInTheDocument();
+  });
 });
diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
index 4a1a4ab919..b0b6c1afd0 100644
--- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
+++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx
@@ -32,6 +32,7 @@ type InternalState = {
 };
 
 const noop = () => {};
+
 export const VerticalStepperContext = React.createContext<InternalState>({
   stepperLength: 0,
   stepIndex: 0,
@@ -50,7 +51,17 @@ export interface StepperProps {
 export function SimpleStepper(props: PropsWithChildren<StepperProps>) {
   const { children, elevated, onStepChange, activeStep = 0 } = props;
   const [stepIndex, setStepIndex] = useState<number>(activeStep);
-  const [stepHistory, setStepHistory] = useState<number[]>([0]);
+  /*
+  Recreates the stepHistory array based on the activeStep
+  to make sure the handleBack function of the Footer works when activeStep is higher than 0
+  */
+  const inOrderRecreatedStepHistory = Array.from(
+    { length: activeStep + 1 },
+    (_, i) => i,
+  );
+  const [stepHistory, setStepHistory] = useState<number[]>(
+    inOrderRecreatedStepHistory,
+  );
 
   useEffect(() => {
     setStepIndex(activeStep);

From b03c46fe052aedbc2ea10621f4edb71e86a17d96 Mon Sep 17 00:00:00 2001
From: Lex Felix <112618115+lexGPT@users.noreply.github.com>
Date: Fri, 7 Mar 2025 14:09:19 +0100
Subject: [PATCH 2/2] Update .changeset/beige-chairs-suffer.md

Co-authored-by: Ben Lambert <ben@blam.sh>
Signed-off-by: Lex Felix <112618115+lexGPT@users.noreply.github.com>
---
 .changeset/beige-chairs-suffer.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/beige-chairs-suffer.md b/.changeset/beige-chairs-suffer.md
index 8989921373..c642b70cbb 100644
--- a/.changeset/beige-chairs-suffer.md
+++ b/.changeset/beige-chairs-suffer.md
@@ -2,4 +2,4 @@
 '@backstage/core-components': minor
 ---
 
-SimpleStepper back button now works with activeStep property set higher than 0
+`SimpleStepper` back button now works with `activeStep` property set higher than 0