feat(nimbus): Update nimbus experimentation code

Author: vbudhram

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

@@ -123,7 +123,10 @@ const settingsConfig = {
       'featureFlags.paymentsNextSubscriptionManagement'
     ),
   },
-  nimbusPreview: config.get('nimbusPreview'),
+  nimbus: {
+    enabled: config.get('nimbus.enabled'),
+    preview: config.get('nimbus.preview'),
+  },
   cms: {
     enabled: config.get('cms.enabled'),
     l10nEnabled: config.get('cms.l10nEnabled'),

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

@@ -399,12 +399,6 @@ const conf = (module.exports = convict({
       format: String,
     },
   },
-  nimbusPreview: {
-    default: false,
-    doc: 'Enables preview mode for nimbus experiments for development and testing.',
-    format: Boolean,
-    env: 'NIMBUS_PREVIEW',
-  },
   glean: {
     enabled: {
       default: false,
@@ -705,6 +699,18 @@ const conf = (module.exports = convict({
     format: ['src', 'dist'],
   },
   nimbus: {
+    enabled: {
+      default: false,
+      doc: 'Enables nimbus experiments',
+      env: 'NIMBUS_ENABLED',
+      format: Boolean,
+    },
+    preview: {
+      default: true,
+      doc: 'Enables preview mode for nimbus experiments for development and testing.',
+      env: 'NIMBUS_PREVIEW',
+      format: Boolean,
+    },
     host: {
       default: 'http://localhost:8001',
       doc: 'Base URI for cirrus (Nimbus experimentation endpoint).',

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

@@ -58,7 +58,6 @@ function getIndexRouteDefinition(config) {
   const FEATURE_FLAGS_SHOW_LOCALE_TOGGLE = config.get(
     'featureFlags.showLocaleToggle'
   );
-  const NIMBUS_PREVIEW = config.get('nimbusPreview');
   const GLEAN_ENABLED = config.get('glean.enabled');
   const GLEAN_APPLICATION_ID = config.get('glean.applicationId');
   const GLEAN_UPLOAD_ENABLED = config.get('glean.uploadEnabled');
@@ -68,6 +67,8 @@ function getIndexRouteDefinition(config) {
   const GLEAN_DEBUG_VIEW_TAG = config.get('glean.debugViewTag');
   const CMS_ENABLED = config.get('cms.enabled');
   const CMS_L10N_ENABLED = config.get('cms.l10nEnabled');
+  const NIMBUS_ENABLED = config.get('nimbus.enabled');
+  const NIMBUS_PREVIEW = config.get('nimbus.preview');
 
   // Rather than relay all rollout rates, hand pick the ones that are applicable
   const ROLLOUT_RATES = config.get('rolloutRates');
@@ -129,7 +130,10 @@ function getIndexRouteDefinition(config) {
       enabled: CMS_ENABLED,
       l10nEnabled: CMS_L10N_ENABLED,
     },
-    nimbusPreview: NIMBUS_PREVIEW,
+    nimbus: {
+      enabled: NIMBUS_ENABLED,
+      preview: NIMBUS_PREVIEW,
+    },
     glean: {
       // feature toggle
       enabled: GLEAN_ENABLED,

packages/fxa-settings/src/index.tsx

@@ -7,6 +7,7 @@ import { render } from 'react-dom';
 import sentryMetrics from 'fxa-shared/sentry/browser';
 import { AppErrorBoundary } from './components/ErrorBoundaries';
 import App from './components/App';
+import { NimbusProvider } from './models/contexts/NimbusContext';
 import config, { readConfigMeta } from './lib/config';
 import { searchParams } from './lib/utilities';
 import { AppContext, initializeAppContext } from './models';
@@ -86,9 +87,11 @@ try {
       >
         <AppErrorBoundary>
           <AppContext.Provider value={appContext}>
-            <ApolloProvider client={apolloClient}>
-              <View />
-            </ApolloProvider>
+            <NimbusProvider>
+              <ApolloProvider client={apolloClient}>
+                <View />
+              </ApolloProvider>
+            </NimbusProvider>
           </AppContext.Provider>
         </AppErrorBoundary>
       </DynamicLocalizationProvider>

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

@@ -103,7 +103,10 @@ export interface Config {
     showLocaleToggle?: boolean;
     paymentsNextSubscriptionManagement?: boolean;
   };
-  nimbusPreview: boolean;
+  nimbus: {
+    enabled: boolean;
+    preview: boolean;
+  };
   cms: {
     enabled: boolean;
     l10nEnabled: boolean;
@@ -199,7 +202,10 @@ export function getDefault() {
       enabled: false,
       l10nEnabled: false,
     },
-    nimbusPreview: false,
+    nimbus: {
+      enabled: true,
+      preview: true,
+    },
   } as Config;
 }
 

packages/fxa-settings/src/lib/nimbus/index.ts

@@ -2,7 +2,7 @@
  * 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 * as Sentry from '@sentry/browser';
+import * as Sentry from '@sentry/browser';
 
 /**
  * A collection of attributes about the client that will be used for
@@ -30,43 +30,43 @@ export interface NimbusResult {
  * @returns the experiment and enrollment information for that `clientId`.
  */
 export async function initializeNimbus(
-  _clientId: string,
-  _previewEnabled: boolean,
-  _context: NimbusContextT
+  clientId: string,
+  previewEnabled: boolean,
+  context: NimbusContextT
 ): Promise<NimbusResult | null> {
   // Disabling experiment request for now. Leaving code here for the future
   // when we re-enable.
 
-  // const body = JSON.stringify({
-  //   client_id: clientId,
-  //   context,
-  // });
+  const body = JSON.stringify({
+    client_id: clientId,
+    context,
+  });
 
-  // try {
-  //   const query =
-  //     previewEnabled === true ? `?nimbusPreview=${previewEnabled}` : '';
-  //   const resp = await fetch(`/nimbus-experiments${query}`, {
-  //     method: 'POST',
-  //     body,
-  //     headers: {
-  //       'Content-Type': 'application/json',
-  //     },
-  //   });
+  try {
+    const query =
+      previewEnabled === true ? `?nimbusPreview=${previewEnabled}` : '';
+    const resp = await fetch(`/nimbus-experiments${query}`, {
+      method: 'POST',
+      body,
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
 
-  //   if (resp.status === 200) {
-  //     return (await resp.json()) as NimbusResult;
-  //   }
-  // } catch (err) {
-  //   // Important, if this fails it will just show up in Sentry as a
-  //   // TypeError: NetworkError when attempting to fetch resource.
-  //   // Look at the previous fetch bread crumb to understand what
-  //   // request is actually failing.
-  //   Sentry.captureException(err, {
-  //     tags: {
-  //       source: 'nimbus-experiments',
-  //     },
-  //   });
-  // }
+    if (resp.status === 200) {
+      return (await resp.json()) as NimbusResult;
+    }
+  } catch (err) {
+    // Important, if this fails it will just show up in Sentry as a
+    // TypeError: NetworkError when attempting to fetch resource.
+    // Look at the previous fetch bread crumb to understand what
+    // request is actually failing.
+    Sentry.captureException(err, {
+      tags: {
+        source: 'nimbus-experiments',
+      },
+    });
+  }
 
   return null;
 }

packages/fxa-settings/src/models/contexts/AppContext.ts

@@ -14,10 +14,7 @@ import { KeyStretchExperiment } from '../experiments/key-stretch-experiment';
 import { UrlQueryData } from '../../lib/model-data';
 import { ReachRouterWindow } from '../../lib/window';
 import { SensitiveDataClient } from '../../lib/sensitive-data-client';
-import { initializeNimbus, NimbusContextT } from '../../lib/nimbus';
-import { parseAcceptLanguage } from '../../../../../libs/shared/l10n/src';
 import { getUniqueUserId } from '../../lib/cache';
-import { searchParams } from '../../lib/utilities';
 
 // TODO, move some values from AppContext to SettingsContext after
 // using container components, FXA-8107
@@ -29,42 +26,13 @@ export interface AppContextValue {
   account?: Account;
   session?: Session;
   uniqueUserId?: string; // used for experiments
-  experiments?: Promise<any>; // external response; not adding types
 }
 
 export interface SettingsContextValue {
   alertBarInfo?: AlertBarInfo;
   navigatorLanguages?: readonly string[];
 }
 
-/**
- * Fetches nimbus experiments from the Cirrus container via content-server.
- *
- * N.B: external response; not adding types
- *
- * @param uniqueUserId the ID that is used to retrieve the experiments for that client.
- * @returns a promise to the fetch JSON reponse.
- */
-function fetchNimbusExperiments(uniqueUserId: string): Promise<any> {
-  // We reuse parseAcceptLanguage with navigator.languages because
-  // that is the same as getting the headers directly as stated on MDN.
-  // See: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/languages
-  const [locale] = parseAcceptLanguage(navigator.languages.join(', '));
-  let [language, region] = locale.split('-');
-  if (region) {
-    region = region.toLowerCase();
-  }
-
-  const nimbusPreview = config.nimbusPreview
-    ? config.nimbusPreview
-    : searchParams(window.location.search).nimbusPreview === 'true';
-
-  return initializeNimbus(uniqueUserId, nimbusPreview, {
-    language,
-    region,
-  } as NimbusContextT);
-}
-
 export function initializeAppContext() {
   readConfigMeta((name: string) => {
     return document.head.querySelector(name);
@@ -81,7 +49,6 @@ export function initializeAppContext() {
   const session = new Session(authClient, apolloClient);
   const sensitiveDataClient = new SensitiveDataClient();
   const uniqueUserId = getUniqueUserId();
-  const experiments = fetchNimbusExperiments(uniqueUserId);
 
   const context: AppContextValue = {
     authClient,
@@ -91,7 +58,6 @@ export function initializeAppContext() {
     session,
     sensitiveDataClient,
     uniqueUserId,
-    experiments,
   };
 
   return context;