Stepper: Remove steps param from useStepNavigation (#94328)

client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/index.ts

@@ -19,20 +19,14 @@ interface Params< FlowSteps extends StepperStep[] > {
 	flow: Flow;
 	currentStepRoute: string;
 	navigate: Navigate< FlowSteps >;
-	steps: StepperStep[];
 }
 
 export const useStepNavigationWithTracking = ( {
 	flow,
 	currentStepRoute,
 	navigate,
-	steps,
 }: Params< ReturnType< Flow[ 'useSteps' ] > > ) => {
-	const stepNavigation = flow.useStepNavigation(
-		currentStepRoute,
-		navigate,
-		steps.map( ( step ) => step.slug )
-	);
+	const stepNavigation = flow.useStepNavigation( currentStepRoute, navigate );
 	const intent =
 		useSelect( ( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(), [] ) ?? '';
 	const tracksEventPropsFromFlow = flow.useTracksEventProps?.();

client/landing/stepper/declarative-flow/internals/hooks/use-step-navigation-with-tracking/test/index.tsx

@@ -22,27 +22,26 @@ jest.mock( '../../../analytics/record-step-navigation', () => ( {
 	recordStepNavigation: jest.fn(),
 } ) );
 
-describe( 'useStepNavigationWithTracking', () => {
-	const stepNavControls = {
-		submit: jest.fn(),
-		exitFlow: jest.fn(),
-		goBack: jest.fn(),
-		goNext: jest.fn(),
-		goToStep: jest.fn(),
-	};
-
-	const mockParams = {
-		flow: {
-			name: 'mock-flow',
-			isSignupFlow: false,
-			useSteps: () => [],
-			useStepNavigation: () => stepNavControls,
-		},
-		currentStepRoute: 'mock-step',
-		navigate: () => {},
-		steps: [],
-	};
+const stepNavControls = {
+	submit: jest.fn(),
+	exitFlow: jest.fn(),
+	goBack: jest.fn(),
+	goNext: jest.fn(),
+	goToStep: jest.fn(),
+};
+
+const mockParams = {
+	flow: {
+		name: 'mock-flow',
+		isSignupFlow: false,
+		useSteps: () => [],
+		useStepNavigation: () => stepNavControls,
+	},
+	currentStepRoute: 'mock-step',
+	navigate: () => {},
+};
 
+describe( 'useStepNavigationWithTracking', () => {
 	beforeEach( () => {
 		jest.clearAllMocks();
 	} );
@@ -57,6 +56,20 @@ describe( 'useStepNavigationWithTracking', () => {
 		expect( result.current ).toHaveProperty( 'goToStep' );
 	} );
 
+	it( 'ensures reference equality given same input', () => {
+		const { result, rerender } = renderHook(
+			( params ) => useStepNavigationWithTracking( params ),
+			{
+				initialProps: mockParams,
+			}
+		);
+
+		const previous = result.current;
+
+		rerender( mockParams );
+		expect( result.current ).toBe( previous );
+	} );
+
 	it( 'calls the wrapped submit control with correct parameters and records the respective event', () => {
 		const { result } = renderHook( () => useStepNavigationWithTracking( mockParams ) );
 		const providedDependencies = { foo: 'foo' };

client/landing/stepper/declarative-flow/internals/index.tsx

@@ -108,7 +108,6 @@ export const FlowRenderer: React.FC< { flow: Flow } > = ( { flow } ) => {
 		flow,
 		currentStepRoute,
 		navigate,
-		steps: flowSteps,
 	} );
 
 	// Retrieve any extra step data from the stepper-internal store. This will be passed as a prop to the current step.

client/landing/stepper/declarative-flow/internals/types.ts

@@ -101,8 +101,7 @@ export type UseStepsHook = () => StepperStep[];
 
 export type UseStepNavigationHook< FlowSteps extends StepperStep[] > = (
 	currentStepSlug: FlowSteps[ number ][ 'slug' ],
-	navigate: Navigate< FlowSteps >,
-	steps?: FlowSteps[ number ][ 'slug' ][]
+	navigate: Navigate< FlowSteps >
 ) => NavigationControls;
 
 export type UseAssertConditionsHook< FlowSteps extends StepperStep[] > = (

client/landing/stepper/declarative-flow/plugin-bundle-flow.ts

@@ -27,9 +27,10 @@ import {
 } from './plugin-bundle-data';
 import type { OnboardSelect, SiteSelect, UserSelect } from '@automattic/data-stores';
 
-const getNextStep = ( currentStep: string, steps: string[] ): string | undefined => {
-	const currentStepIndex = steps.indexOf( currentStep );
-	const nextStep = steps[ currentStepIndex + 1 ];
+const getNextStep = ( currentStep: string, steps: StepperStep[] ): string | undefined => {
+	const stepsIndex = steps.map( ( step ) => step.slug );
+	const currentStepIndex = stepsIndex.indexOf( currentStep );
+	const nextStep = stepsIndex[ currentStepIndex + 1 ];
 
 	return nextStep;
 };
@@ -54,7 +55,8 @@ const pluginBundleFlow: Flow = {
 		}
 		return [ ...initialBundleSteps, ...bundlePluginSteps ];
 	},
-	useStepNavigation( currentStep, navigate, steps = [] ) {
+	useStepNavigation( currentStep, navigate ) {
+		const steps = this.useSteps();
 		const intent = useSelect(
 			( select ) => ( select( ONBOARD_STORE ) as OnboardSelect ).getIntent(),
 			[]