Merge pull request #28887 from lexGPT/lexGPT/Bug/SimpleStepper

fix(core-components): SimpleStepper back button works with activeStep set higher than 0

.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

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();
+  });
 });

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);