chore(editor): Gate CodeMirror editor with Firebase remote config (#2237)

outoftime · web-flow · commit d2b8068746bf · 2020-05-01T07:34:07.000-04:00
* Integrate Firebase remote config

* Add remote config to UI state

* Add remote config to UI state

* Track remote config in Mixpanel and Bugsnag

* Fix lint

* Add a default

* Lazy-load both editors

* Use remote config to choose editor implementation in console

* Remove minimum fetch interval

* Remove unused import
diff --git a/src/clients/firebase.js b/src/clients/firebase.js
@@ -4,13 +4,15 @@ import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
 import isNil from 'lodash-es/isNil';
 import isNull from 'lodash-es/isNull';
+import mapValues from 'lodash-es/mapValues';
 import omit from 'lodash-es/omit';
 import once from 'lodash-es/once';
 import values from 'lodash-es/values';
 import {v4 as uuid} from 'uuid';
 import 'firebase/analytics';
 import 'firebase/auth';
 import 'firebase/performance';
+import 'firebase/remote-config';
 
 import config from '../config';
 import {
@@ -35,7 +37,7 @@ for (const scope of GOOGLE_SCOPES) {
   googleAuthProvider.addScope(scope);
 }
 
-const {auth, loadDatabase} = buildFirebase();
+const {auth, loadDatabase, remoteConfig} = buildFirebase();
 
 async function loadDatabaseSdk() {
   return retryingFailedImports(() =>
@@ -61,8 +63,12 @@ function buildFirebase(appName = undefined) {
 
   const rest =
     appName === undefined
-      ? {perf: firebase.performance(app), analytics: firebase.analytics()}
-      : {perf: null, analytics: null};
+      ? {
+          perf: firebase.performance(app),
+          analytics: firebase.analytics(),
+          remoteConfig: firebase.remoteConfig(),
+        }
+      : {perf: null, analytics: null, remoteConfig: null};
 
   return {
     auth: firebase.auth(app),
@@ -284,3 +290,9 @@ export function setSessionUid() {
     });
   }
 }
+
+export async function loadRemoteConfig() {
+  await remoteConfig.fetchAndActivate();
+
+  return mapValues(remoteConfig.getAll(), value => value.asString());
+}
diff --git a/src/components/Console.jsx b/src/components/Console.jsx
@@ -17,10 +17,10 @@ export default function Console({
   currentInputValue,
   currentProjectKey,
   history,
-  isExperimental,
   isHidden,
   isOpen,
   isTextSizeLarge,
+  useCodeMirror,
   onChange,
   onClearConsoleEntries,
   onConsoleClicked,
@@ -47,9 +47,9 @@ export default function Console({
       >
         <ConsoleInput
           currentInputValue={currentInputValue}
-          isExperimental={isExperimental}
           isTextSizeLarge={isTextSizeLarge}
           requestedFocusedLine={requestedFocusedLine}
+          useCodeMirror={useCodeMirror}
           onChange={onChange}
           onInput={onInput}
           onNextConsoleHistory={onNextConsoleHistory}
@@ -97,11 +97,11 @@ Console.propTypes = {
   currentInputValue: PropTypes.string.isRequired,
   currentProjectKey: PropTypes.string.isRequired,
   history: ImmutablePropTypes.iterable.isRequired,
-  isExperimental: PropTypes.bool.isRequired,
   isHidden: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
   isTextSizeLarge: PropTypes.bool,
   requestedFocusedLine: PropTypes.instanceOf(EditorLocation),
+  useCodeMirror: PropTypes.bool.isRequired,
   onChange: PropTypes.func.isRequired,
   onClearConsoleEntries: PropTypes.func.isRequired,
   onConsoleClicked: PropTypes.func.isRequired,
diff --git a/src/components/ConsoleInput.jsx b/src/components/ConsoleInput.jsx
@@ -1,26 +1,32 @@
 import PropTypes from 'prop-types';
 import React, {lazy, Suspense} from 'react';
 
-import AceConsoleInput from './AceConsoleInput';
+const AceConsoleInput = lazy(() =>
+  import(
+    /* webpackChunkName: "editor-ace" */
+    './AceConsoleInput'
+  ),
+);
 
 const CodeMirrorConsoleInput = lazy(() =>
   import(
-    /* webpackChunkName: "experimentalOnly" */
+    /* webpackChunkName: "editor-codemirror" */
     './CodeMirrorConsoleInput'
   ),
 );
 
-export default function ConsoleInput({isExperimental, ...props}) {
-  if (isExperimental) {
-    return (
-      <Suspense>
+export default function ConsoleInput({useCodeMirror, ...props}) {
+  return (
+    <Suspense>
+      {useCodeMirror ? (
         <CodeMirrorConsoleInput {...props} />
-      </Suspense>
-    );
-  }
-  return <AceConsoleInput {...props} />;
+      ) : (
+        <AceConsoleInput {...props} />
+      )}
+    </Suspense>
+  );
 }
 
 ConsoleInput.propTypes = {
-  isExperimental: PropTypes.bool.isRequired,
+  useCodeMirror: PropTypes.bool.isRequired,
 };
diff --git a/src/components/Editor.jsx b/src/components/Editor.jsx
@@ -1,11 +1,16 @@
 import PropTypes from 'prop-types';
 import React, {lazy} from 'react';
 
-import AceEditor from './AceEditor';
+const AceEditor = lazy(() =>
+  import(
+    /* webpackChunkName: "editor-ace" */
+    './AceEditor'
+  ),
+);
 
 const CodeMirrorEditor = lazy(() =>
   import(
-    /* webpackChunkName: "experimentalOnly" */
+    /* webpackChunkName: "editor-codemirror" */
     './CodeMirrorEditor'
   ),
 );
diff --git a/src/components/EditorsColumn.jsx b/src/components/EditorsColumn.jsx
@@ -17,7 +17,7 @@ export default function EditorsColumn({
   errors,
   resizableFlexGrow,
   resizableFlexRefs,
-  isExperimental,
+  implementation,
   isFlexResizingSupported,
   isTextSizeLarge,
   requestedFocusedLine,
@@ -62,7 +62,7 @@ export default function EditorsColumn({
             requestedFocusedLine={requestedFocusedLine}
             source={currentProject.sources[language]}
             textSizeIsLarge={isTextSizeLarge}
-            useCodeMirror={isExperimental}
+            useCodeMirror={implementation === 'codemirror'}
             onAutoFormat={onAutoFormat}
             onInput={handleInputForLanguage(language)}
             onReady={partial(onEditorReady, language)}
@@ -98,7 +98,7 @@ export default function EditorsColumn({
 EditorsColumn.propTypes = {
   currentProject: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired,
-  isExperimental: PropTypes.bool.isRequired,
+  implementation: PropTypes.oneOf(['ace', 'codemirror']),
   isFlexResizingSupported: PropTypes.bool.isRequired,
   isTextSizeLarge: PropTypes.bool.isRequired,
   requestedFocusedLine: PropTypes.instanceOf(EditorLocation),
@@ -115,5 +115,6 @@ EditorsColumn.propTypes = {
 };
 
 EditorsColumn.defaultProps = {
+  implementation: 'ace',
   requestedFocusedLine: null,
 };
diff --git a/src/containers/Console.js b/src/containers/Console.js
@@ -17,9 +17,9 @@ import {
   getCurrentConsoleInputValue,
   getCurrentProjectKey,
   getHiddenUIComponents,
+  getRemoteConfig,
   getRequestedFocusedLine,
   isCurrentProjectSyntacticallyValid,
-  isExperimental,
   isTextSizeLarge,
 } from '../selectors';
 
@@ -29,7 +29,7 @@ function mapStateToProps(state) {
     currentProjectKey: getCurrentProjectKey(state),
     history: getConsoleHistory(state),
     currentInputValue: getCurrentConsoleInputValue(state),
-    isExperimental: isExperimental(state),
+    useCodeMirror: getRemoteConfig(state).get('editor', 'ace') === 'codemirror',
     isOpen: !getHiddenUIComponents(state).includes('console'),
     isTextSizeLarge: isTextSizeLarge(state),
     requestedFocusedLine: getRequestedFocusedLine(state),
diff --git a/src/containers/EditorsColumn.js b/src/containers/EditorsColumn.js
@@ -14,8 +14,8 @@ import {
   getCurrentProject,
   getErrors,
   getHiddenAndVisibleLanguages,
+  getRemoteConfig,
   getRequestedFocusedLine,
-  isExperimental,
   isTextSizeLarge,
 } from '../selectors';
 
@@ -24,7 +24,7 @@ function mapStateToProps(state) {
   return {
     currentProject: getCurrentProject(state),
     errors: getErrors(state),
-    isExperimental: isExperimental(state),
+    implementation: getRemoteConfig(state).get('editor', 'ace'),
     isTextSizeLarge: isTextSizeLarge(state),
     requestedFocusedLine: getRequestedFocusedLine(state),
     visibleLanguages,
diff --git a/src/init/__tests__/index.test.js b/src/init/__tests__/index.test.js
@@ -6,6 +6,7 @@ import {v4 as uuid} from 'uuid';
 import init from '..';
 import {firebaseProjectFactory} from '../../../__factories__/data/firebase';
 import {applicationLoaded} from '../../actions';
+import {loadRemoteConfig} from '../../clients/firebase';
 import {rehydrateProject} from '../../clients/localStorage';
 import config from '../../config';
 import createApplicationStore from '../../createApplicationStore';
@@ -103,5 +104,22 @@ describe('init()', () => {
       } = await dispatchedAction();
       expect(rehydratedProject).toBe(project);
     });
+
+    test('sends remote config parameters from remoteConfig', async () => {
+      const remoteConfig = {color: 'orange'};
+      loadRemoteConfig.mockReturnValue(remoteConfig);
+      init();
+      const {payload} = await dispatchedAction();
+      expect(payload.remoteConfig).toEqual(remoteConfig);
+    });
+
+    test('overrides remote config parameters from query string', async () => {
+      history.pushState(null, '', '/?rco.color=blue');
+      const remoteConfig = {color: 'orange', temperature: 'warm'};
+      loadRemoteConfig.mockReturnValue(remoteConfig);
+      init();
+      const {payload} = await dispatchedAction();
+      expect(payload.remoteConfig).toEqual({...remoteConfig, color: 'blue'});
+    });
   });
 });
diff --git a/src/init/index.js b/src/init/index.js
@@ -3,6 +3,7 @@ import installDevTools from 'immutable-devtools';
 import {install as installOfflinePlugin} from 'offline-plugin/runtime';
 
 import {applicationLoaded} from '../actions';
+import {loadRemoteConfig} from '../clients/firebase';
 import {rehydrateProject} from '../clients/localStorage';
 import {initMixpanel} from '../clients/mixpanel';
 import createApplicationStore from '../createApplicationStore';
@@ -12,18 +13,26 @@ import {getQueryParameters, setQueryParameters} from '../util/queryParams';
 import initI18n from './initI18n';
 
 async function initApplication(store) {
-  const {gistId, snapshotKey, isExperimental} = getQueryParameters(
-    location.search,
-  );
+  const {
+    gistId,
+    snapshotKey,
+    isExperimental,
+    remoteConfig: remoteConfigOverrides,
+  } = getQueryParameters(location.search);
   setQueryParameters({isExperimental});
   const rehydratedProject = rehydrateProject();
+  const remoteConfig = await loadRemoteConfig();
 
   store.dispatch(
     applicationLoaded({
       snapshotKey,
       gistId,
       isExperimental,
       rehydratedProject,
+      remoteConfig: {
+        ...remoteConfig,
+        ...remoteConfigOverrides,
+      },
     }),
   );
 }
diff --git a/src/logic/instrumentApplicationLoaded.js b/src/logic/instrumentApplicationLoaded.js
@@ -6,10 +6,14 @@ import {loadMixpanel} from '../clients/mixpanel';
 export default createLogic({
   type: applicationLoaded,
 
-  async process({action: {payload: {isExperimental} = {}}}) {
+  async process({action: {payload: {isExperimental, remoteConfig = {}} = {}}}) {
     const mixpanel = await loadMixpanel();
-    mixpanel.register({
+    const payload = {
       'Experimental Mode': Boolean(isExperimental),
-    });
+    };
+    for (const [name, value] of Object.entries(remoteConfig)) {
+      payload[`Remote Config: ${name}`] = value;
+    }
+    mixpanel.register(payload);
   },
 });
diff --git a/src/records/UiState.js b/src/records/UiState.js
@@ -12,6 +12,7 @@ export default Record(
     isTyping: false,
     notifications: new Map(),
     openTopBarMenu: null,
+    remoteConfig: new Map(),
     requestedFocusedLine: null,
     projectsFilter: 'active',
   },
diff --git a/src/reducers/__tests__/ui.test.js b/src/reducers/__tests__/ui.test.js
@@ -328,6 +328,13 @@ test('application loaded in GA mode', () => {
   });
 });
 
+test('application loaded with remote config', () => {
+  expect(
+    applyActions(applicationLoaded({remoteConfig: {silliness: 11}}))
+      .remoteConfig,
+  ).toEqualImmutable(new Immutable.Map({silliness: 11}));
+});
+
 test('project compilation failed', () => {
   expectNotification(
     applyActions(projectCompilationFailed(new Error())),
diff --git a/src/reducers/ui.js b/src/reducers/ui.js
@@ -254,6 +254,12 @@ export default combineReducers(
       null,
     ),
 
+    remoteConfig: handleAction(
+      applicationLoaded,
+      (_, {payload: {remoteConfig}}) => new Immutable.Map(remoteConfig),
+      new Immutable.Map(),
+    ),
+
     requestedFocusedLine: handleActions(
       {
         [clearConsoleEntries]: () =>
diff --git a/src/selectors/getRemoteConfig.js b/src/selectors/getRemoteConfig.js
@@ -0,0 +1,3 @@
+export default function getRemoteConfig(state) {
+  return state.getIn(['ui', 'remoteConfig']);
+}
diff --git a/src/selectors/index.js b/src/selectors/index.js
@@ -23,6 +23,7 @@ import getOpenTopBarMenu from './getOpenTopBarMenu';
 import getPartitionedProjects from './getPartitionedProjects';
 import getProject from './getProject';
 import getProjectsFilter from './getProjectsFilter';
+import getRemoteConfig from './getRemoteConfig';
 import getRequestedFocusedLine from './getRequestedFocusedLine';
 import isClassroomExportInProgress from './isClassroomExportInProgress';
 import isCurrentlyValidating from './isCurrentlyValidating';
@@ -73,6 +74,7 @@ export {
   getPartitionedProjects,
   getProject,
   getProjectsFilter,
+  getRemoteConfig,
   getRequestedFocusedLine,
   isClassroomExportInProgress,
   isCurrentlyValidating,
diff --git a/src/util/bugsnag.js b/src/util/bugsnag.js
@@ -24,6 +24,8 @@ export const bugsnagClient = bugsnag({
       payload.user = {id: 'anonymous'};
     }
 
+    payload.metaData.remoteConfig = state.getIn(['ui', 'remoteConfig']).toJS();
+
     const currentProject = getCurrentProject(state);
     if (currentProject) {
       payload.metaData.currentProject = currentProject;
diff --git a/src/util/queryParams.js b/src/util/queryParams.js
@@ -4,20 +4,25 @@ export function getQueryParameters(queryString) {
   let gistId = null;
   let snapshotKey = null;
   let isExperimental = false;
+  let remoteConfig = {};
   if (queryString) {
-    const query = qs.parse(queryString.slice(1));
+    const query = qs.parse(queryString.slice(1), {allowDots: true});
     if (query.gist) {
       gistId = query.gist;
     }
     if (query.snapshot) {
       snapshotKey = query.snapshot;
     }
     isExperimental = Object.keys(query).includes('experimental');
+    if (query.rco) {
+      remoteConfig = query.rco;
+    }
   }
   return {
     gistId,
     snapshotKey,
     isExperimental,
+    remoteConfig,
   };
 }
 
