task(settings): Full production rollout of react email-first

Because:

* We want to route all traffic to the react app version of the email-first pages

This commit:

* remove these pages from the experiment
* Set fullProdRollout to true for email first routes
* Update navigation to stay in react app (no hard navigation)
* Update tests

Closes #FXA-11221

Author: vpomerleau

packages/functional-tests/pages/signin.ts

@@ -38,12 +38,14 @@ export class SigninPage extends BaseLayout {
     return this.page.getByRole('button', { name: 'Confirm' });
   }
 
+  // Use /Continue with.*Apple/ because of hidden bidi Unicode characters around "Apple" in its accessible name.
   get continueWithAppleButton() {
-    return this.page.getByRole('button', { name: 'Continue with Apple' });
+    return this.page.getByRole('button', { name: /Continue with .*Apple/ });
   }
 
+  // Use /Continue with.*Google/ because of hidden bidi Unicode characters around "Google" in its accessible name.
   get continueWithGoogleButton() {
-    return this.page.getByRole('button', { name: 'Continue with Google' });
+    return this.page.getByRole('button', { name: /Continue with .*Google/ });
   }
 
   get emailFirstHeading() {

packages/functional-tests/tests/signin/redirect.spec.ts

@@ -27,22 +27,21 @@ test.describe('severity-2 #smoke', () => {
       target,
       page,
       pages: { signin },
-      testAccountTracker,
     }) => {
-      const credentials = await testAccountTracker.signUp();
-
       await page.goto(
         `${target.contentServerUrl}/?redirect_to=javascript:alert(1)`
       );
-      await signin.fillOutEmailFirstForm(credentials.email);
 
-      await expect(page).toHaveURL(/signin/);
-      await expect(signin.badRequestHeading).toBeVisible();
+      // only error message shown on screen in case of xss redirect_to
+      await expect(
+        page.getByRole('heading', { name: /Bad Request/ })
+      ).toBeVisible();
+      await expect(signin.emailFirstHeading).toBeHidden();
     });
 
     test('does not allow bogus redirect_to parameter', async ({
       target,
-      pages: { page, signin },
+      pages: { page, settings, signin },
       testAccountTracker,
     }) => {
       const credentials = await testAccountTracker.signUp();
@@ -54,11 +53,12 @@ test.describe('severity-2 #smoke', () => {
       await signin.fillOutPasswordForm(credentials.password);
 
       await expect(page).not.toHaveURL(redirectTo);
+      await expect(settings.settingsHeading).toBeVisible();
     });
 
     test('allows valid redirect_to parameter', async ({
       target,
-      pages: { page, signin },
+      pages: { page, changePassword, signin },
       testAccountTracker,
     }) => {
       const credentials = await testAccountTracker.signUp();
@@ -70,6 +70,7 @@ test.describe('severity-2 #smoke', () => {
       await signin.fillOutPasswordForm(credentials.password);
 
       await expect(page).toHaveURL(redirectTo);
+      await expect(changePassword.changePasswordHeading).toBeVisible();
     });
   });
 });

packages/functional-tests/tests/syncV3/signinCached.spec.ts

@@ -9,7 +9,7 @@ import { SigninPage } from '../../pages/signin';
 
 test.describe('severity-2 #smoke', () => {
   test.describe('sync signin cached', () => {
-    test('sign in on desktop then specify a different email on query parameter continues to cache desktop signin', async ({
+    test('sign in on desktop then specify a different email on query parameter', async ({
       target,
       syncBrowserPages: { page, settings, signin, connectAnotherDevice },
       testAccountTracker,
@@ -23,30 +23,34 @@ test.describe('severity-2 #smoke', () => {
       );
       const query = { email: credentials.email };
       const queryParam = new URLSearchParams(query);
-      await page.goto(
-        `${
-          target.contentServerUrl
-        }?context=fx_desktop_v3&service=sync&action=email&${queryParam.toString()}`
-      );
+      await page.goto(`${target.contentServerUrl}?${queryParam.toString()}`);
 
       //Check prefilled email
       await expect(signin.passwordFormHeading).toBeVisible();
       await expect(page.getByText(credentials.email)).toBeVisible();
       await signin.fillOutPasswordForm(credentials.password);
-      await expect(page).toHaveURL(/pair/);
-      await connectAnotherDevice.clickNotNowPair();
-      await page.waitForURL(/settings/);
 
       //Verify logged in on Settings page
       await expect(settings.settingsHeading).toBeVisible();
 
-      //Reset prefill and context
-      await signin.clearSessionStorage();
+      // verify that if we directly go to the index page,
+      // the most recently signed in account is suggested
 
-      //Testing to make sure cached signin comes back after a refresh
-      await page.goto(target.contentServerUrl, {
-        waitUntil: 'load',
-      });
+      // however (not tested here because Playwright tests can't access browser menu)
+      // if we instead clicked on "manage settings" from the Sync browser menu
+      // the account settings would be loaded for the sync credential account
+
+      await page.goto(target.contentServerUrl);
+      await expect(signin.cachedSigninHeading).toBeVisible();
+      // suggests most recently signed in account
+      await expect(page.getByText(credentials.email)).toBeVisible();
+      await signin.signInButton.click();
+      await expect(settings.settingsHeading).toBeVisible();
+
+      await settings.signOut();
+
+      // falls back to suggesting the account signed in to the browser
+      await expect(signin.cachedSigninHeading).toBeVisible();
       await expect(page.getByText(syncCredentials.email)).toBeVisible();
       await signin.useDifferentAccountLink.click();
       await expect(signin.emailFirstHeading).toBeVisible();
@@ -63,30 +67,12 @@ test.describe('severity-2 #smoke', () => {
         signin,
         testAccountTracker
       );
-      const credentials = await testAccountTracker.signUp();
-
-      await page.goto(target.contentServerUrl, {
-        waitUntil: 'load',
-      });
-      await expect(page.getByText(syncCredentials.email)).toBeVisible();
-      await signin.useDifferentAccountLink.click();
-      await expect(signin.emailFirstHeading).toBeVisible();
-      await signin.fillOutEmailFirstForm(credentials.email);
-      await signin.fillOutPasswordForm(credentials.password);
 
-      //Verify logged in on Settings page
-      await expect(settings.settingsHeading).toBeVisible();
-
-      //Reset prefill and context
-      await signin.clearSessionStorage();
-
-      //Testing to make sure cached signin comes back after a refresh
       await page.goto(target.contentServerUrl, {
         waitUntil: 'load',
       });
+      // signed in sync account suggested
       await expect(page.getByText(syncCredentials.email)).toBeVisible();
-      await signin.useDifferentAccountLink.click();
-      await expect(signin.emailFirstHeading).toBeVisible();
     });
   });
 });

packages/fxa-content-server/server/config/local.json-dist

@@ -71,6 +71,6 @@
   },
   "rolloutRates": {
     "keyStretchV2": 1,
-    "generalizedReactApp": 1
+    "generalizedReactApp": 0
   }
 }

packages/fxa-content-server/server/lib/routes/react-app/index.js

@@ -25,10 +25,10 @@ const getReactRouteGroups = (showReactApp, reactRoute) => {
   return {
     emailFirstRoutes: {
       featureFlagOn: showReactApp.emailFirstRoutes,
-      // the order of the routes in teh array is important.  do not put '/'
+      // the order of the routes in the array is important.  do not put '/'
       // first.
       routes: reactRoute.getRoutes(['authorization', 'oauth', '/']),
-      fullProdRollout: false,
+      fullProdRollout: true,
     },
     simpleRoutes: {
       featureFlagOn: showReactApp.simpleRoutes,

packages/fxa-react/lib/test-utils/localizationProvider.tsx

@@ -1,3 +1,7 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
 import React from 'react';
 import { render } from '@testing-library/react';
 import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';

packages/fxa-react/lib/test-utils/mockWindowLocation.ts

@@ -0,0 +1,26 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+export function mockWindowLocation({
+  pathname = '/',
+  search = '',
+  hash = '',
+}: {
+  pathname?: string;
+  search?: string;
+  hash?: string;
+}) {
+  delete (window as any).location;
+
+  (window as any).location = {
+    ...window.location,
+    assign: jest.fn(),
+    reload: jest.fn(),
+    replace: jest.fn(),
+    pathname,
+    search,
+    hash,
+    href: `http://localhost${pathname}${search}${hash}`,
+  };
+}

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

@@ -356,7 +356,7 @@ describe('SettingsRoutes', () => {
     (useSession as jest.Mock).mockRestore();
   });
 
-  it('redirects to /signin if isSignedIn is false', async () => {
+  it('redirects to email-first if isSignedIn is false', async () => {
     (firefox.requestSignedInUser as jest.Mock).mockResolvedValue(null);
     (currentAccount as jest.Mock).mockReturnValue(null);
     (useIntegration as jest.Mock).mockReturnValue({
@@ -436,6 +436,14 @@ describe('SettingsRoutes', () => {
   });
 
   it('restores sync user when session is valid', async () => {
+    // we only send a webChannel message to check for a sync user
+    // if the userAgent is a version of Firefox
+    Object.defineProperty(window.navigator, 'userAgent', {
+      value:
+        'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:118.0) Gecko/20100101 Firefox/118.0',
+      configurable: true,
+    });
+
     (useIntegration as jest.Mock).mockReturnValue({
       isSync: () => true,
       isDesktopRelay: () => false,