Merge pull request #20361 from mozilla/FXA-13245

fix(split-layout): Pass setCurrentSplitLayout to ResetPassword to prevent navigation split layout blips

Author: LZoog

packages/fxa-settings/src/components/App/index.tsx

@@ -585,7 +585,7 @@ const AuthAndAccountSetupRoutes = ({
         {/* Reset password */}
         <ResetPasswordContainer
           path="/reset_password/*"
-          {...{ flowQueryParams, serviceName }}
+          {...{ flowQueryParams, serviceName, setCurrentSplitLayout }}
         />
         <ConfirmResetPasswordContainer
           path="/confirm_reset_password/*"

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/container.tsx

@@ -15,6 +15,7 @@ import { getLocalizedErrorMessage } from '../../../lib/error-utils';
 const ResetPasswordContainer = ({
   flowQueryParams = {},
   serviceName,
+  setCurrentSplitLayout,
 }: ResetPasswordContainerProps & RouteComponentProps) => {
   const authClient = useAuthClient();
   const ftlMsgResolver = useFtlMsgResolver();
@@ -49,6 +50,7 @@ const ResetPasswordContainer = ({
         requestResetPasswordCode,
         serviceName,
         setErrorMessage,
+        setCurrentSplitLayout,
       }}
     />
   );

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/index.tsx

@@ -25,6 +25,7 @@ const ResetPassword = ({
   requestResetPasswordCode,
   serviceName,
   setErrorMessage,
+  setCurrentSplitLayout,
 }: ResetPasswordProps & RouteComponentProps) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
 
@@ -81,7 +82,7 @@ const ResetPassword = ({
   };
 
   return (
-    <AppLayout>
+    <AppLayout {...{ setCurrentSplitLayout }}>
       <FtlMsg id="password-reset-flow-heading">
         <h1 className="card-header">Reset your password</h1>
       </FtlMsg>

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/interfaces.ts

@@ -8,13 +8,21 @@ import { MozServices } from '../../../lib/types';
 export interface ResetPasswordContainerProps {
   flowQueryParams?: QueryParams;
   serviceName: MozServices;
+  setCurrentSplitLayout: (value: boolean) => void;
 }
 
 export interface ResetPasswordProps {
   errorMessage?: string;
   requestResetPasswordCode: (email: string) => Promise<void>;
   serviceName: MozServices;
   setErrorMessage: React.Dispatch<React.SetStateAction<string>>;
+  /**
+   * Although Reset Password does not use the split layout, navigating from
+   * a page that does (like signin) causes split layout to be shown during
+   * page transitions. We "reset" the layout by passing this value in on
+   * the first reset PW screen (/reset_password).
+   */
+  setCurrentSplitLayout: (value: boolean) => void;
 }
 
 export interface ResetPasswordFormData {

packages/fxa-settings/src/pages/ResetPassword/ResetPassword/mocks.tsx

@@ -24,6 +24,7 @@ export const Subject = ({
           serviceName,
           requestResetPasswordCode,
           setErrorMessage,
+          setCurrentSplitLayout: () => {},
         }}
       />
     </LocationProvider>