Break down ExperimentDetails container into (mostly) simple components (

#2891)

* Quick linting fix for gulpfile

* Issue #2807: Move ExperimentPage container into a bundle directory, move IncompatibleAddons subcomponent into the bundle

* Issue #2807: Move ExperimentPage tests into bundle directory

* Fix linting errors in ExperimentPage tests

* Issue #2807: Try extracting TestpilotPromo and adding flowtype annotations to MainInstallButton

* Issue #2807: Reorganize subcomponents & tests used only by ExperimentPage

* Issue #2807: More ExperimentPage test lint fixes

* Issue #2807: Quick experiment install fix

* Ensure ExperimentPage-test.js is removed after rebase

frontend/src/app/components/MainInstallButton.js

@@ -1,3 +1,5 @@
+// @flow
+
 import classnames from 'classnames';
 import { Localized } from 'fluent-react/compat';
 import React from 'react';
@@ -8,21 +10,28 @@ import { VariantTests, VariantTestCase, VariantTestDefault } from './VariantTest
 
 import config from '../config';
 
+import type { MainInstallButtonProps } from './types';
+
+type MainInstallButtonState = { isInstalling: boolean };
+
 export default class MainInstallButton extends React.Component {
+  props: MainInstallButtonProps;
+  state: MainInstallButtonState;
 
-  constructor(props) {
+  constructor(props: MainInstallButtonProps) {
     super(props);
     this.state = {
       isInstalling: false
     };
   }
 
-  install(e) {
+  install(e: Object) {
     // Don't install if a mouse button other than the primary button was clicked
     if (e.button !== 0) {
       return;
     }
     const { requireRestart, sendToGA, eventCategory, eventLabel, hasAddon, installAddon, installCallback, navigateTo } = this.props;
+
     if (hasAddon) {
       navigateTo('/experiments');
       return;
@@ -59,7 +68,7 @@ export default class MainInstallButton extends React.Component {
     );
   }
 
-  renderOneClickInstallButton(title) {
+  renderOneClickInstallButton(title: string) {
     return (
       <div className="default-btn-msg one-click-text">
         <LocalizedHtml id="oneClickInstallMinorCta">
@@ -72,7 +81,7 @@ export default class MainInstallButton extends React.Component {
     );
   }
 
-  renderInstallButton(isInstalling, hasAddon) {
+  renderInstallButton(isInstalling: boolean, hasAddon: any) {
     const { experimentTitle } = this.props;
     let installButton = null;
     if (experimentTitle) {
@@ -109,7 +118,7 @@ export default class MainInstallButton extends React.Component {
     </VariantTests>;
   }
 
-  renderAltButton(isFirefox, isMobile) {
+  renderAltButton(isFirefox: boolean, isMobile: boolean) {
     if (isFirefox && isMobile) {
       return (
         <div>

frontend/src/app/components/types.js

@@ -0,0 +1,14 @@
+import {
+  MiscAppProps,
+  BrowserEnvProps,
+  SendToGAProps
+} from '../containers/types';
+
+export type VariantTestsProps = {
+  varianttests: Object
+};
+
+export type MainInstallButtonProps = {
+  experimentTitle: string,
+  installCallback: Function
+} & VariantTestsProps & MiscAppProps & SendToGAProps & BrowserEnvProps;

frontend/src/app/components/ExperimentDisableDialog.js → frontend/src/app/containers/ExperimentPage/ExperimentDisableDialog.js

@@ -2,8 +2,8 @@
 import { Localized } from 'fluent-react/compat';
 import React from 'react';
 
-import Copter from './Copter';
-import { buildSurveyURL } from '../lib/utils';
+import Copter from '../../components/Copter';
+import { buildSurveyURL } from '../../lib/utils';
 
 type ExperimentDisableDialogProps = {
   experiment: Object,

frontend/src/app/components/ExperimentTourDialog.js → frontend/src/app/containers/ExperimentPage/ExperimentTourDialog.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { Localized } from 'fluent-react/compat';
 import React from 'react';
 
-import { experimentL10nId } from '../lib/utils';
+import { experimentL10nId } from '../../lib/utils';
 
 type ExperimentTourDialogProps = {
   experiment: Object,

frontend/src/app/components/IncompatibleAddons/index.js → frontend/src/app/containers/ExperimentPage/IncompatibleAddons.js

@@ -1,15 +1,11 @@
 // @flow
-
 import React from 'react';
 import { Localized } from 'fluent-react/compat';
-import LocalizedHtml from '../LocalizedHtml';
+import LocalizedHtml from '../../components/LocalizedHtml';
 
 import './index.scss';
 
-type IncompatibleAddonsProps = {
-  experiment: Object,
-  installedAddons: Array<string>
-};
+import type { IncompatibleAddonsProps } from './types';
 
 export default class IncompatibleAddons extends React.Component {
   props: IncompatibleAddonsProps

frontend/src/app/containers/ExperimentPage/TestpilotPromo.js

@@ -0,0 +1,51 @@
+// @flow
+
+import React from 'react';
+import { Localized } from 'fluent-react/compat';
+
+import LayoutWrapper from '../../components/LayoutWrapper';
+import Banner from '../../components/Banner';
+import Copter from '../../components/Copter';
+import MainInstallButton from '../../components/MainInstallButton';
+
+import type { TestpilotPromoProps } from './types';
+
+export default class TestpilotPromo extends React.Component {
+  props: TestpilotPromoProps;
+
+  render() {
+    const { hasAddon, graduated, experiment, installCallback } = this.props;
+
+    const { title, web_url } = experiment;
+    if (hasAddon === null || hasAddon || graduated || web_url) {
+      return null;
+    }
+    return (
+      <section id="testpilot-promo">
+        <Banner>
+          <LayoutWrapper flexModifier="row-between-reverse">
+            <div className="intro-text">
+              <h2 className="banner__title">
+                <Localized id="experimentPromoHeader">
+                  <span className="block">Ready for Takeoff?</span>
+                </Localized>
+              </h2>
+              <Localized id="experimentPromoSubheader">
+                <p className="banner__copy">
+                  We&apos;re building next-generation features for Firefox.
+                  Install Test Pilot to try them!
+                </p>
+              </Localized>
+              <MainInstallButton
+                {...this.props}
+                experimentTitle={title}
+                installCallback={installCallback}
+              />
+            </div>
+            <Copter />
+          </LayoutWrapper>
+        </Banner>
+      </section>
+    );
+  }
+}

frontend/src/app/containers/ExperimentPage.js → frontend/src/app/containers/ExperimentPage/index.js

@@ -5,28 +5,27 @@ import moment from 'moment';
 import classnames from 'classnames';
 import parser from 'html-react-parser';
 
-import { buildSurveyURL, experimentL10nId, formatDate } from '../lib/utils';
+import { buildSurveyURL, experimentL10nId, formatDate } from '../../lib/utils';
 
-import NotFoundPage from './NotFoundPage';
+import NotFoundPage from '../NotFoundPage';
 
-import EmailDialog from '../components/EmailDialog';
-import ExperimentDisableDialog from '../components/ExperimentDisableDialog';
-import ExperimentEolDialog from '../components/ExperimentEolDialog';
-import ExperimentTourDialog from '../components/ExperimentTourDialog';
-import GraduatedNotice from '../components/GraduatedNotice';
-import LocalizedHtml from '../components/LocalizedHtml';
-import MainInstallButton from '../components/MainInstallButton';
-import ExperimentCardList from '../components/ExperimentCardList';
-import ExperimentPreFeedbackDialog from '../components/ExperimentPreFeedbackDialog';
-import View from '../components/View';
-import Warning from '../components/Warning';
-import IncompatibleAddons from '../components/IncompatibleAddons';
+import EmailDialog from '../../components/EmailDialog';
+import GraduatedNotice from '../../components/GraduatedNotice';
+import LocalizedHtml from '../../components/LocalizedHtml';
+import ExperimentCardList from '../../components/ExperimentCardList';
+import View from '../../components/View';
+import Warning from '../../components/Warning';
 
-import ExperimentPlatforms from '../components/ExperimentPlatforms';
-import Banner from '../components/Banner';
-import Copter from '../components/Copter';
-import LayoutWrapper from '../components/LayoutWrapper';
+import ExperimentPlatforms from '../../components/ExperimentPlatforms';
+import Banner from '../../components/Banner';
+import LayoutWrapper from '../../components/LayoutWrapper';
 
+import ExperimentPreFeedbackDialog from './ExperimentPreFeedbackDialog';
+import ExperimentDisableDialog from './ExperimentDisableDialog';
+import ExperimentEolDialog from './ExperimentEolDialog';
+import ExperimentTourDialog from './ExperimentTourDialog';
+import IncompatibleAddons from './IncompatibleAddons';
+import TestpilotPromo from './TestpilotPromo';
 
 export default class ExperimentPage extends React.Component {
   render() {
@@ -61,6 +60,8 @@ export class ExperimentDetail extends React.Component {
     const { isExperimentEnabled, experiment,
             getCookie, removeCookie, hasAddon } = this.props;
 
+    this.installExperiment = this.installExperiment.bind(this);
+
     let showEmailDialog = false;
     if (getCookie('first-run')) {
       removeCookie('first-run');
@@ -248,26 +249,12 @@ export class ExperimentDetail extends React.Component {
 
         <View {...this.props}>
 
-        {hasAddon !== null && (!hasAddon && !graduated && !experiment.web_url) && <section id="testpilot-promo">
-          <Banner>
-              <LayoutWrapper flexModifier="row-between-reverse">
-                <div className="intro-text">
-                  <h2 className="banner__title">
-                    <Localized id="experimentPromoHeader">
-                      <span className="block">Ready for Takeoff?</span>
-                    </Localized>
-                  </h2>
-                  <Localized id="experimentPromoSubheader">
-                    <p className="banner__copy">We&apos;re building next-generation features for Firefox. Install Test Pilot to try them!</p>
-                  </Localized>
-                  <MainInstallButton {...this.props}
-                                     experimentTitle={title}
-                                     installCallback={ this.installExperiment.bind(this) } />
-                </div>
-                <Copter/>
-              </LayoutWrapper>
-          </Banner>
-        </section>}
+          <TestpilotPromo {...{
+            ...this.props,
+            graduated,
+            experiment,
+            installCallback: this.installExperiment
+          }} />
 
         <div className="default-background">
           <div className={classnames(