task(settings,react): Add feature flag component that supports list of oauth client ids

packages/fxa-content-server/server/lib/beta-settings.js

@@ -62,6 +62,9 @@ const settingsConfig = {
     isPromptNoneEnabledClientIds: config.get(
       'oauth.prompt_none.enabled_client_ids'
     ),
+    reactClientIdsEnabled: config.get(
+      'oauth.react_feature_flags.enabled_client_ids'
+    ),
   },
   recoveryCodes: {
     count: config.get('recovery_codes.count'),

packages/fxa-content-server/server/lib/configuration.js

@@ -570,6 +570,15 @@ const conf = (module.exports = convict({
         format: Array,
       },
     },
+    react_feature_flags: {
+      enabled_client_ids: {
+        // 123done enabled for functional tests, 321done is not.
+        default: ['dcdb5ae7add825d2', '7f368c6886429f19'],
+        doc: 'client_ids for which feature flags in react are supported',
+        env: 'OAUTH_REACT_FEATURE_FLAGS_ENABLED_CLIENT_IDS',
+        format: Array,
+      },
+    },
   },
   openid_configuration: {
     claims_supported: ['aud', 'exp', 'iat', 'iss', 'sub'],

packages/fxa-react/components/FeatureFlag/index.test.tsx

@@ -0,0 +1,45 @@
+/* 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, screen } from '@testing-library/react';
+import { FeatureFlag } from '.';
+
+describe('Feature Flag', () => {
+  const enabled = (feature: string) => {
+    return feature === 'foo';
+  };
+
+  it('enables', async () => {
+    render(
+      <FeatureFlag
+        {...{
+          feature: 'foo',
+          enabled,
+        }}
+      >
+        <h1>foo</h1>
+        <p>bar</p>
+      </FeatureFlag>
+    );
+
+    expect(screen.queryByText('foo')).toBeDefined();
+    expect(screen.queryByText('bar')).toBeDefined();
+  });
+
+  it('disables', async () => {
+    <FeatureFlag
+      {...{
+        feature: 'bar',
+        enabled,
+      }}
+    >
+      <h1>foo</h1>
+      <p>bar</p>
+    </FeatureFlag>;
+
+    expect(screen.queryByText('foo')).toBeNull();
+    expect(screen.queryByText('bar')).toBeNull();
+  });
+});

packages/fxa-react/components/FeatureFlag/index.tsx

@@ -0,0 +1,17 @@
+/* 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, { ReactElement } from 'react';
+
+export const FeatureFlag = ({
+  feature,
+  enabled,
+  children,
+}: {
+  feature: string;
+  enabled: (feature: string) => boolean;
+  children: ReactElement | ReactElement[];
+}) => {
+  return enabled(feature) ? <>{children}</> : <></>;
+};

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

@@ -0,0 +1,41 @@
+/* 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 { screen, render } from '@testing-library/react';
+import { OAuthClientFeatureFlag } from '.';
+
+jest.mock('../../lib/config', () => ({
+  oauth: {
+    reactClientIdsEnabled: ['foo123'],
+  },
+}));
+
+describe('OAuthClientFeatureFlag component', () => {
+  it('shows for a supported clientId', () => {
+    render(
+      <OAuthClientFeatureFlag
+        {...{
+          clientId: 'foo123',
+        }}
+      >
+        <h1>foo</h1>
+      </OAuthClientFeatureFlag>
+    );
+    expect(screen.queryByText('foo')).toBeDefined();
+  });
+
+  it('hides for an unsupported clientId', () => {
+    render(
+      <OAuthClientFeatureFlag
+        {...{
+          clientId: 'bar123',
+        }}
+      >
+        <h1>foo</h1>
+      </OAuthClientFeatureFlag>
+    );
+    expect(screen.queryByText('foo')).toBeNull();
+  });
+});

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

@@ -0,0 +1,36 @@
+/* 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 config from '../../lib/config';
+import { ReactElement } from 'react-markdown/lib/react-markdown';
+import { FeatureFlag } from 'fxa-react/components/FeatureFlag';
+
+export type OAuthClientFeatureFlagConfig = {
+  oauth: {
+    reactClientIdsEnabled: string[];
+  };
+};
+
+export const OAuthClientFeatureFlag = ({
+  clientId,
+  children,
+}: {
+  clientId: string;
+  children: ReactElement | ReactElement[];
+}) => {
+  return (
+    <FeatureFlag
+      {...{
+        feature: clientId,
+        enabled: (feature: string) => {
+          return config.oauth.reactClientIdsEnabled.some(
+            (id: string) => id === feature
+          );
+        },
+      }}
+    >
+      {children}
+    </FeatureFlag>
+  );
+};

packages/fxa-settings/src/lib/config.ts

@@ -46,6 +46,7 @@ export interface Config {
     scopedKeysValidation: Record<string, any>;
     isPromptNoneEnabled: boolean;
     isPromptNoneEnabledClientIds: string[];
+    reactClientIdsEnabled: string[];
   };
   recoveryCodes: {
     count: number;
@@ -104,6 +105,7 @@ export function getDefault() {
       scopedKeysEnabled: false,
       isPromptNoneEnabled: false,
       isPromptNoneEnabledClientIds: new Array<string>(),
+      reactClientIdsEnabled: new Array<string>(),
     },
     recoveryCodes: {
       count: 8,