Merge pull request #14356 from mozilla/FXA-6163

refactor(context): Remove new Context for flow query params
2022-11-07 11:10:46 -06:00 · 2022-11-07 11:10:46 -06:00 · 01e4522439
--- a/packages/fxa-settings/src/components/App/index.tsx
+++ b/packages/fxa-settings/src/components/App/index.tsx
@ -7,14 +7,17 @@ import { RouteComponentProps, Router } from '@reach/router';
 import Head from 'fxa-react/components/Head';
 import { ScrollToTop } from '../Settings/ScrollToTop';
 import Settings from '../Settings';
+import { QueryParams } from '../..';

-export const App = (props: RouteComponentProps) => {
+export const App = ({
+  flowQueryParams,
+}: { flowQueryParams: QueryParams } & RouteComponentProps) => {
  return (
    <>
      <Head />
      <Router basepath={'/'}>
        <ScrollToTop default>
-          <Settings path="/settings/*" />
+          <Settings path="/settings/*" {...{ flowQueryParams }} />
        </ScrollToTop>
      </Router>
    </>
--- a/packages/fxa-settings/src/components/Settings/index.test.tsx
+++ b/packages/fxa-settings/src/components/Settings/index.test.tsx
@ -8,12 +8,10 @@ import { History } from '@reach/router';
 import App from '.';
 import * as Metrics from '../../lib/metrics';
 import { Account, AppContext, useInitialState } from '../../models';
-import { FlowContext } from '../../models/FlowContext';
 import {
  mockAppContext,
  MOCK_ACCOUNT,
  renderWithRouter,
-  mockFlowContext,
 } from '../../models/mocks';
 import { Config } from '../../lib/config';
 import * as NavTiming from 'fxa-shared/metrics/navigation-timing';
@ -38,7 +36,7 @@ jest.mock('./ScrollToTop', () => ({
  ),
 }));

-const initialFlowContextValue = {
+const flowQueryParams = {
  deviceId: 'x',
  flowBeginTime: 1,
  flowId: 'x',
@ -60,18 +58,14 @@ describe('metrics', () => {
    const BEGIN_TIME = 123456;
    const FLOW_ID = 'abc123';
    const flowInit = jest.spyOn(Metrics, 'init');
-    const updatedFlowContextValue = {
+    const updatedFlowQueryParams = {
      deviceId: DEVICE_ID,
      flowBeginTime: BEGIN_TIME,
      flowId: FLOW_ID,
    };

    await act(async () => {
-      render(
-        <FlowContext.Provider value={mockFlowContext(updatedFlowContextValue)}>
-          <App />
-        </FlowContext.Provider>
-      );
+      render(<App flowQueryParams={updatedFlowQueryParams} />);
    });

    expect(flowInit).toHaveBeenCalledWith(true, {
@ -106,9 +100,7 @@ describe('performance metrics', () => {
    } as unknown as Account;
    render(
      <AppContext.Provider value={mockAppContext({ account, config })}>
-        <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-          <App />
-        </FlowContext.Provider>
+        <App {...{ flowQueryParams }} />
      </AppContext.Provider>
    );
    expect(NavTiming.observeNavigationTiming).toHaveBeenCalledWith('/foobar');
@ -123,11 +115,7 @@ describe('performance metrics', () => {
    render(
      <AppContext.Provider value={mockAppContext({ account, config })}>
        <AppContext.Provider value={mockAppContext({ account, config })}>
-          <FlowContext.Provider
-            value={mockFlowContext(initialFlowContextValue)}
-          >
-            <App />
-          </FlowContext.Provider>
+          <App {...{ flowQueryParams }} />
        </AppContext.Provider>
      </AppContext.Provider>
    );
@ -144,9 +132,7 @@ describe('App component', () => {
  it('renders `LoadingSpinner` component when loading initial state is true', () => {
    (useInitialState as jest.Mock).mockReturnValueOnce({ loading: true });
    const { getByLabelText } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>
+      <App {...{ flowQueryParams }} />
    );

    expect(getByLabelText('Loading...')).toBeInTheDocument();
@ -157,9 +143,7 @@ describe('App component', () => {
      error: { message: 'Invalid token' },
    });
    const { getByLabelText } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>
+      <App {...{ flowQueryParams }} />
    );

    expect(getByLabelText('Loading...')).toBeInTheDocument();
@ -169,11 +153,7 @@ describe('App component', () => {
    (useInitialState as jest.Mock).mockReturnValueOnce({
      error: { message: 'Error' },
    });
-    const { getByRole } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>
-    );
+    const { getByRole } = renderWithRouter(<App {...{ flowQueryParams }} />);

    expect(getByRole('heading', { level: 2 })).toHaveTextContent(
      'General application error'
@ -186,12 +166,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath);

@ -202,12 +177,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/display_name');

@ -218,12 +188,7 @@ describe('App component', () => {
    const {
      getAllByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/avatar');

@ -234,12 +199,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/change_password');

@ -250,12 +210,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/account_recovery');

@ -266,12 +221,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/emails');

@ -282,12 +232,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/emails/verify');

@ -298,12 +243,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/two_step_authentication');

@ -314,12 +254,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/two_step_authentication/replace_codes');

@ -330,12 +265,7 @@ describe('App component', () => {
    const {
      getByTestId,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/delete_account');

@ -346,12 +276,7 @@ describe('App component', () => {
    const {
      history,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/clients');

@ -362,12 +287,7 @@ describe('App component', () => {
    const {
      history,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/avatar/change');

@ -378,12 +298,7 @@ describe('App component', () => {
    const {
      history,
      history: { navigate },
-    } = renderWithRouter(
-      <FlowContext.Provider value={mockFlowContext(initialFlowContextValue)}>
-        <App />
-      </FlowContext.Provider>,
-      { route: HomePath }
-    );
+    } = renderWithRouter(<App {...{ flowQueryParams }} />, { route: HomePath });

    await navigate(HomePath + '/create_password');
    expect(history.location.pathname).toBe('/settings/change_password');
@ -404,11 +319,7 @@ describe('App component', () => {

      ({ history } = renderWithRouter(
        <AppContext.Provider value={mockAppContext({ account, config })}>
-          <FlowContext.Provider
-            value={mockFlowContext(initialFlowContextValue)}
-          >
-            <App />
-          </FlowContext.Provider>
+          <App {...{ flowQueryParams }} />
        </AppContext.Provider>,
        { route: HomePath }
      ));
--- a/packages/fxa-settings/src/components/Settings/index.tsx
+++ b/packages/fxa-settings/src/components/Settings/index.tsx
@ -2,13 +2,12 @@
 * 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, { useContext, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import AppLayout from './AppLayout';
 import LoadingSpinner from 'fxa-react/components/LoadingSpinner';
 import AppErrorDialog from 'fxa-react/components/AppErrorDialog';
 import * as Metrics from '../../lib/metrics';
 import { useAccount, useConfig, useInitialState } from '../../models';
-import { FlowContext } from '../../models/FlowContext';
 import { Redirect, Router, RouteComponentProps } from '@reach/router';
 import Head from 'fxa-react/components/Head';
 import PageSettings from './PageSettings';
@ -26,8 +25,11 @@ import { HomePath } from '../../constants';
 import { observeNavigationTiming } from 'fxa-shared/metrics/navigation-timing';
 import sentryMetrics from 'fxa-shared/lib/sentry';
 import PageAvatar from './PageAvatar';
+import { QueryParams } from '../..';

-export const Settings = (props: RouteComponentProps) => {
+export const Settings = ({
+  flowQueryParams,
+}: { flowQueryParams: QueryParams } & RouteComponentProps) => {
  const config = useConfig();
  const { metricsEnabled, hasPassword } = useAccount();

@ -41,8 +43,6 @@ export const Settings = (props: RouteComponentProps) => {
    config.metrics.navTiming.endpoint,
  ]);

-  const flowQueryParams = useContext(FlowContext);
-
  const { loading, error } = useInitialState();
  useEffect(() => {
    Metrics.init(metricsEnabled, flowQueryParams);
--- a/packages/fxa-settings/src/index.tsx
+++ b/packages/fxa-settings/src/index.tsx
@ -15,25 +15,28 @@ import config, { readConfigMeta } from './lib/config';
 import { searchParams } from './lib/utilities';
 import { AppContext, initializeAppContext } from './models';
 import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
-import { FlowContext } from './models/FlowContext';
 import './styles/tailwind.out.css';

+interface FlowQueryParams {
+  broker?: string;
+  context?: string;
+  deviceId?: string;
+  flowBeginTime?: number;
+  flowId?: string;
+  isSampledUser?: boolean;
+  service?: string;
+  uniqueUserId?: string;
+}
+
+// temporary until we can safely direct all users to all routes currently in content-server
+export interface QueryParams extends FlowQueryParams {
+  showNewReactApp?: boolean;
+}
+
 try {
-  const queryParams = searchParams(window.location.search) as FlowQueryParams &
-    ExperimentStatusParams;
+  const flowQueryParams = searchParams(window.location.search) as QueryParams;

-  const flowQueryParams = {
-    broker: queryParams.broker,
-    context: queryParams.context,
-    deviceId: queryParams.deviceId,
-    flowBeginTime: queryParams.flowBeginTime,
-    flowId: queryParams.flowId,
-    isSampledUser: queryParams.isSampledUser,
-    service: queryParams.service,
-    uniqueUserId: queryParams.uniqueUserId,
-  };
-
-  const { showNewReactApp } = queryParams;
+  const { showNewReactApp } = flowQueryParams;

  // Populate config
  readConfigMeta((name: string) => {
@ -54,19 +57,21 @@ try {

  render(
    <React.StrictMode>
-      <AppContext.Provider value={appContext}>
-        <FlowContext.Provider value={flowQueryParams}>
+      <AppErrorBoundary>
+        <AppContext.Provider value={appContext}>
          <AppLocalizationProvider
            baseDir="/settings/locales"
            bundles={['settings']}
            userLocales={navigator.languages}
          >
-            <AppErrorBoundary>
-              {showNewReactApp ? <App /> : <Settings />}
-            </AppErrorBoundary>
+            {showNewReactApp ? (
+              <App {...{ flowQueryParams }} />
+            ) : (
+              <Settings {...{ flowQueryParams }} />
+            )}
          </AppLocalizationProvider>
-        </FlowContext.Provider>
-      </AppContext.Provider>
+        </AppContext.Provider>
+      </AppErrorBoundary>
    </React.StrictMode>,
    document.getElementById('root')
  );
--- a/packages/fxa-settings/src/lib/metrics.ts
+++ b/packages/fxa-settings/src/lib/metrics.ts
@ -7,6 +7,7 @@ import { useEffect, useRef } from 'react';
 import { useAccount } from '../models';
 import { window } from './window';
 import { v4 as uuid } from 'uuid';
+import { QueryParams } from '..';

 export const settingsViewName = 'settings';

@ -51,7 +52,7 @@ type ConfigurableProperties = {
  utm_term: Optional<string>;
 };

-type EventData = FlowQueryParams &
+type EventData = QueryParams &
  ConfigurableProperties & {
    duration: number;
    events: EventSet[];
@ -64,7 +65,7 @@ type EventData = FlowQueryParams &
 let initialized = false;
 let metricsEnabled = false;
 let viewNamePrefix: string | null;
-let flowEventData: FlowQueryParams;
+let flowEventData: QueryParams;
 let configurableProperties: ConfigurableProperties = defaultConfigProps();

 function defaultConfigProps(): ConfigurableProperties {
@ -164,7 +165,7 @@ export function reset() {
 *
 * @param flowQueryParams - Flow data sent via query params from the content-server
 */
-export async function init(enabled: boolean, flowQueryParams: FlowQueryParams) {
+export async function init(enabled: boolean, flowQueryParams: QueryParams) {
  setEnabled(enabled);

  if (!initialized) {
--- a/packages/fxa-settings/src/models/FlowContext.ts
+++ b/packages/fxa-settings/src/models/FlowContext.ts
@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const FlowContext = createContext<any>(undefined);
--- a/packages/fxa-settings/src/models/mocks.tsx
+++ b/packages/fxa-settings/src/models/mocks.tsx
@ -86,14 +86,3 @@ export function mockAppContext(context?: AppContextValue) {
    context
  ) as AppContextValue;
 }
-
-export function mockFlowContext(context?: FlowQueryParams) {
-  return Object.assign(
-    {
-      deviceId: 'x',
-      flowBeginTime: 1,
-      flowId: 'x',
-    },
-    context
-  )
-}
--- a/packages/fxa-settings/src/react-app-env.d.ts
+++ b/packages/fxa-settings/src/react-app-env.d.ts
@ -7,18 +7,3 @@
 type hexstring = string;

 type Hash<T> = { [key: string]: T };
-
-interface FlowQueryParams {
-  broker?: string;
-  context?: string;
-  deviceId?: string;
-  flowBeginTime?: number;
-  flowId?: string;
-  isSampledUser?: boolean;
-  service?: string;
-  uniqueUserId?: string;
-}
-
-interface ExperimentStatusParams {
-  showNewReactApp?: boolean;
-}