diff --git a/.changeset/beige-chairs-suffer.md b/.changeset/beige-chairs-suffer.md new file mode 100644 index 0000000000..c642b70cbb --- /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( + + +
step0
+
+ +
step1
+
+ +
step2
+
+
, + ); + + 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({ stepperLength: 0, stepIndex: 0, @@ -50,7 +51,17 @@ export interface StepperProps { export function SimpleStepper(props: PropsWithChildren) { const { children, elevated, onStepChange, activeStep = 0 } = props; const [stepIndex, setStepIndex] = useState(activeStep); - const [stepHistory, setStepHistory] = useState([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( + inOrderRecreatedStepHistory, + ); useEffect(() => { setStepIndex(activeStep);