From b34852a5bc3a9e013c9cd23cc3a345947b524fde Mon Sep 17 00:00:00 2001
From: "Christiane (Tina) Heiligers" <christiane.heiligers@elastic.co>
Date: Wed, 18 Dec 2019 10:21:10 -0700
Subject: [PATCH] Telemetry usage collection welcome screen (#53084)

* Changes text dynamically based on the value of optIn in kibana.yml
---
 .../__snapshots__/home.test.js.snap           |   2 +-
 .../__snapshots__/welcome.test.tsx.snap       | 263 +++++++++++++++++-
 .../kibana/public/home/components/home.js     |  11 +-
 .../public/home/components/home.test.js       |   4 +
 .../kibana/public/home/components/home_app.js |   4 +-
 .../public/home/components/welcome.test.tsx   |  24 +-
 .../kibana/public/home/components/welcome.tsx |  83 +++---
 7 files changed, 346 insertions(+), 45 deletions(-)

diff --git a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
index 0bf8c808ae920..c1131cbe559f6 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap
@@ -1072,8 +1072,8 @@ exports[`home welcome should show the normal home page if welcome screen is disa
 
 exports[`home welcome should show the welcome screen if enabled, and there are no index patterns defined 1`] = `
 <Welcome
+  onOptInSeen={[Function]}
   onSkip={[Function]}
-  showTelemetryDisclaimer=""
   urlBasePath="goober"
 />
 `;
diff --git a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/welcome.test.tsx.snap b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/welcome.test.tsx.snap
index 2007a3bb773cf..e36a6e0a5a9fb 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/welcome.test.tsx.snap
+++ b/src/legacy/core_plugins/kibana/public/home/components/__snapshots__/welcome.test.tsx.snap
@@ -62,10 +62,46 @@ exports[`should render a Welcome screen with no telemetry disclaimer 1`] = `
           <SampleDataCard
             onConfirm={[Function]}
             onDecline={[Function]}
+            urlBasePath="/"
           />
           <EuiSpacer
             size="s"
           />
+          <EuiTextColor
+            className="euiText--small"
+            color="subdued"
+          >
+            <FormattedMessage
+              defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
+              id="kbn.home.dataManagementDisclaimerPrivacy"
+              values={Object {}}
+            />
+            <EuiLink
+              href="https://www.elastic.co/legal/privacy-statement"
+              rel="noopener"
+              target="_blank"
+            >
+              <FormattedMessage
+                defaultMessage="Privacy Statement."
+                id="kbn.home.dataManagementDisclaimerPrivacyLink"
+                values={Object {}}
+              />
+            </EuiLink>
+            <FormattedMessage
+              defaultMessage=" To start collection, "
+              id="kbn.home.dataManagementEnableCollection"
+              values={Object {}}
+            />
+            <EuiLink
+              href="#/management/kibana/settings"
+            >
+              <FormattedMessage
+                defaultMessage="enable usage data here."
+                id="kbn.home.dataManagementEnableCollectionLink"
+                values={Object {}}
+              />
+            </EuiLink>
+          </EuiTextColor>
           <EuiSpacer
             size="xs"
           />
@@ -138,6 +174,231 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
           <SampleDataCard
             onConfirm={[Function]}
             onDecline={[Function]}
+            urlBasePath="/"
+          />
+          <EuiSpacer
+            size="s"
+          />
+          <EuiTextColor
+            className="euiText--small"
+            color="subdued"
+          >
+            <FormattedMessage
+              defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
+              id="kbn.home.dataManagementDisclaimerPrivacy"
+              values={Object {}}
+            />
+            <EuiLink
+              href="https://www.elastic.co/legal/privacy-statement"
+              rel="noopener"
+              target="_blank"
+            >
+              <FormattedMessage
+                defaultMessage="Privacy Statement."
+                id="kbn.home.dataManagementDisclaimerPrivacyLink"
+                values={Object {}}
+              />
+            </EuiLink>
+            <FormattedMessage
+              defaultMessage=" To start collection, "
+              id="kbn.home.dataManagementEnableCollection"
+              values={Object {}}
+            />
+            <EuiLink
+              href="#/management/kibana/settings"
+            >
+              <FormattedMessage
+                defaultMessage="enable usage data here."
+                id="kbn.home.dataManagementEnableCollectionLink"
+                values={Object {}}
+              />
+            </EuiLink>
+          </EuiTextColor>
+          <EuiSpacer
+            size="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  </div>
+</EuiPortal>
+`;
+
+exports[`should render a Welcome screen with the telemetry disclaimer when optIn is false 1`] = `
+<EuiPortal>
+  <div
+    className="homWelcome"
+  >
+    <header
+      className="homWelcome__header"
+    >
+      <div
+        className="homWelcome__content eui-textCenter"
+      >
+        <EuiSpacer
+          size="xl"
+        />
+        <span
+          className="homWelcome__logo"
+        >
+          <EuiIcon
+            size="xxl"
+            type="logoKibana"
+          />
+        </span>
+        <EuiTitle
+          className="homWelcome__title"
+          size="l"
+        >
+          <h1>
+            <FormattedMessage
+              defaultMessage="Welcome to Kibana"
+              id="kbn.home.welcomeTitle"
+              values={Object {}}
+            />
+          </h1>
+        </EuiTitle>
+        <EuiText
+          className="homWelcome__subtitle"
+          color="subdued"
+          size="s"
+        >
+          <p>
+            <FormattedMessage
+              defaultMessage="Your window into the Elastic Stack"
+              id="kbn.home.welcomeDescription"
+              values={Object {}}
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+      </div>
+    </header>
+    <div
+      className="homWelcome__content homWelcome-body"
+    >
+      <EuiFlexGroup
+        gutterSize="l"
+      >
+        <EuiFlexItem>
+          <SampleDataCard
+            onConfirm={[Function]}
+            onDecline={[Function]}
+            urlBasePath="/"
+          />
+          <EuiSpacer
+            size="s"
+          />
+          <EuiTextColor
+            className="euiText--small"
+            color="subdued"
+          >
+            <FormattedMessage
+              defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
+              id="kbn.home.dataManagementDisclaimerPrivacy"
+              values={Object {}}
+            />
+            <EuiLink
+              href="https://www.elastic.co/legal/privacy-statement"
+              rel="noopener"
+              target="_blank"
+            >
+              <FormattedMessage
+                defaultMessage="Privacy Statement."
+                id="kbn.home.dataManagementDisclaimerPrivacyLink"
+                values={Object {}}
+              />
+            </EuiLink>
+            <FormattedMessage
+              defaultMessage=" To start collection, "
+              id="kbn.home.dataManagementEnableCollection"
+              values={Object {}}
+            />
+            <EuiLink
+              href="#/management/kibana/settings"
+            >
+              <FormattedMessage
+                defaultMessage="enable usage data here."
+                id="kbn.home.dataManagementEnableCollectionLink"
+                values={Object {}}
+              />
+            </EuiLink>
+          </EuiTextColor>
+          <EuiSpacer
+            size="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  </div>
+</EuiPortal>
+`;
+
+exports[`should render a Welcome screen with the telemetry disclaimer when optIn is true 1`] = `
+<EuiPortal>
+  <div
+    className="homWelcome"
+  >
+    <header
+      className="homWelcome__header"
+    >
+      <div
+        className="homWelcome__content eui-textCenter"
+      >
+        <EuiSpacer
+          size="xl"
+        />
+        <span
+          className="homWelcome__logo"
+        >
+          <EuiIcon
+            size="xxl"
+            type="logoKibana"
+          />
+        </span>
+        <EuiTitle
+          className="homWelcome__title"
+          size="l"
+        >
+          <h1>
+            <FormattedMessage
+              defaultMessage="Welcome to Kibana"
+              id="kbn.home.welcomeTitle"
+              values={Object {}}
+            />
+          </h1>
+        </EuiTitle>
+        <EuiText
+          className="homWelcome__subtitle"
+          color="subdued"
+          size="s"
+        >
+          <p>
+            <FormattedMessage
+              defaultMessage="Your window into the Elastic Stack"
+              id="kbn.home.welcomeDescription"
+              values={Object {}}
+            />
+          </p>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+      </div>
+    </header>
+    <div
+      className="homWelcome__content homWelcome-body"
+    >
+      <EuiFlexGroup
+        gutterSize="l"
+      >
+        <EuiFlexItem>
+          <SampleDataCard
+            onConfirm={[Function]}
+            onDecline={[Function]}
+            urlBasePath="/"
           />
           <EuiSpacer
             size="s"
@@ -163,7 +424,7 @@ exports[`should render a Welcome screen with the telemetry disclaimer 1`] = `
               />
             </EuiLink>
             <FormattedMessage
-              defaultMessage=" To stop collection, "
+              defaultMessage="To stop collection, "
               id="kbn.home.dataManagementDisableCollection"
               values={Object {}}
             />
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home.js b/src/legacy/core_plugins/kibana/public/home/components/home.js
index c87ceb9777c74..d552dd070c86d 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.js
@@ -51,10 +51,7 @@ export class Home extends Component {
       getServices().getInjected('disableWelcomeScreen') ||
       props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
     );
-    const showTelemetryDisclaimer = getServices().getInjected(
-      'telemetryNotifyUserAboutOptInDefault'
-    );
-
+    const currentOptInStatus = this.props.getOptInStatus();
     this.state = {
       // If welcome is enabled, we wait for loading to complete
       // before rendering. This prevents an annoying flickering
@@ -63,7 +60,7 @@ export class Home extends Component {
       isLoading: isWelcomeEnabled,
       isNewKibanaInstance: false,
       isWelcomeEnabled,
-      showTelemetryDisclaimer,
+      currentOptInStatus,
     };
   }
 
@@ -222,14 +219,13 @@ export class Home extends Component {
   renderLoading() {
     return '';
   }
-
   renderWelcome() {
     return (
       <Welcome
         onSkip={this.skipWelcome}
         urlBasePath={this.props.urlBasePath}
-        showTelemetryDisclaimer={this.state.showTelemetryDisclaimer}
         onOptInSeen={this.props.onOptInSeen}
+        currentOptInStatus={this.state.currentOptInStatus}
       />
     );
   }
@@ -269,4 +265,5 @@ Home.propTypes = {
   urlBasePath: PropTypes.string.isRequired,
   mlEnabled: PropTypes.bool.isRequired,
   onOptInSeen: PropTypes.func.isRequired,
+  getOptInStatus: PropTypes.func.isRequired,
 };
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home.test.js b/src/legacy/core_plugins/kibana/public/home/components/home.test.js
index 780e2af695381..1f46cf2875fee 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home.test.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.test.js
@@ -63,6 +63,10 @@ describe('home', () => {
         setItem: sinon.mock(),
       },
       urlBasePath: 'goober',
+      onOptInSeen() {
+        return false;
+      },
+      getOptInStatus: jest.fn(),
     };
   });
 
diff --git a/src/legacy/core_plugins/kibana/public/home/components/home_app.js b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
index 5a12eb0a66cf1..29f24f5b841a3 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/home_app.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
@@ -29,14 +29,13 @@ import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
 import { getServices } from '../kibana_services';
 import { npSetup } from 'ui/new_platform';
-
 export function HomeApp({ directories }) {
   const {
     getInjected,
     savedObjectsClient,
     getBasePath,
     addBasePath,
-    telemetryOptInProvider: { setOptInNoticeSeen },
+    telemetryOptInProvider: { setOptInNoticeSeen, getOptIn },
   } = getServices();
   const { cloud } = npSetup.plugins;
   const isCloudEnabled = !!(cloud && cloud.isCloudEnabled);
@@ -87,6 +86,7 @@ export function HomeApp({ directories }) {
               localStorage={localStorage}
               urlBasePath={getBasePath()}
               onOptInSeen={setOptInNoticeSeen}
+              getOptInStatus={getOptIn}
             />
           </Route>
           <Route path="/home">
diff --git a/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx b/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx
index 21dcfd9ef15de..42c6e6ff6056a 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx
@@ -35,7 +35,25 @@ jest.mock('../kibana_services', () => ({
 test('should render a Welcome screen with the telemetry disclaimer', () => {
   const component = shallow(
     // @ts-ignore
-    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} onOptInSeen={() => {}} />
+    <Welcome urlBasePath="/" onSkip={() => {}} onOptInSeen={() => {}} />
+  );
+
+  expect(component).toMatchSnapshot();
+});
+
+test('should render a Welcome screen with the telemetry disclaimer when optIn is true', () => {
+  const component = shallow(
+    // @ts-ignore
+    <Welcome urlBasePath="/" onSkip={() => {}} onOptInSeen={() => {}} currentOptInStatus={true} />
+  );
+
+  expect(component).toMatchSnapshot();
+});
+
+test('should render a Welcome screen with the telemetry disclaimer when optIn is false', () => {
+  const component = shallow(
+    // @ts-ignore
+    <Welcome urlBasePath="/" onSkip={() => {}} onOptInSeen={() => {}} currentOptInStatus={false} />
   );
 
   expect(component).toMatchSnapshot();
@@ -45,7 +63,7 @@ test('should render a Welcome screen with no telemetry disclaimer', () => {
   // @ts-ignore
   const component = shallow(
     // @ts-ignore
-    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={false} onOptInSeen={() => {}} />
+    <Welcome urlBasePath="/" onSkip={() => {}} onOptInSeen={() => {}} />
   );
 
   expect(component).toMatchSnapshot();
@@ -56,7 +74,7 @@ test('fires opt-in seen when mounted', () => {
 
   shallow(
     // @ts-ignore
-    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} onOptInSeen={seen} />
+    <Welcome urlBasePath="/" onSkip={() => {}} onOptInSeen={seen} />
   );
 
   expect(seen).toHaveBeenCalled();
diff --git a/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx b/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx
index c8de0bf7bb936..435bf98ca7840 100644
--- a/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx
+++ b/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx
@@ -23,7 +23,7 @@
  * in Elasticsearch.
  */
 
-import React from 'react';
+import React, { Fragment } from 'react';
 import {
   EuiLink,
   EuiTextColor,
@@ -39,12 +39,11 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { getServices } from '../kibana_services';
 
 import { SampleDataCard } from './sample_data';
-
 interface Props {
   urlBasePath: string;
   onSkip: () => void;
   onOptInSeen: () => any;
-  showTelemetryDisclaimer: boolean;
+  currentOptInStatus: boolean;
 }
 
 /**
@@ -84,9 +83,42 @@ export class Welcome extends React.Component<Props> {
     document.removeEventListener('keydown', this.hideOnEsc);
   }
 
-  render() {
-    const { urlBasePath, showTelemetryDisclaimer } = this.props;
+  private renderTelemetryEnabledOrDisabledText = () => {
+    if (this.props.currentOptInStatus) {
+      return (
+        <Fragment>
+          <FormattedMessage
+            id="kbn.home.dataManagementDisableCollection"
+            defaultMessage="To stop collection, "
+          />
+          <EuiLink href="#/management/kibana/settings">
+            <FormattedMessage
+              id="kbn.home.dataManagementDisableCollectionLink"
+              defaultMessage="disable usage data here."
+            />
+          </EuiLink>
+        </Fragment>
+      );
+    } else {
+      return (
+        <Fragment>
+          <FormattedMessage
+            id="kbn.home.dataManagementEnableCollection"
+            defaultMessage=" To start collection, "
+          />
+          <EuiLink href="#/management/kibana/settings">
+            <FormattedMessage
+              id="kbn.home.dataManagementEnableCollectionLink"
+              defaultMessage="enable usage data here."
+            />
+          </EuiLink>
+        </Fragment>
+      );
+    }
+  };
 
+  render() {
+    const { urlBasePath } = this.props;
     return (
       <EuiPortal>
         <div className="homWelcome">
@@ -121,34 +153,23 @@ export class Welcome extends React.Component<Props> {
                   onDecline={this.onSampleDataDecline}
                 />
                 <EuiSpacer size="s" />
-                {showTelemetryDisclaimer && (
-                  <EuiTextColor className="euiText--small" color="subdued">
-                    <FormattedMessage
-                      id="kbn.home.dataManagementDisclaimerPrivacy"
-                      defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
-                    />
-                    <EuiLink
-                      href="https://www.elastic.co/legal/privacy-statement"
-                      target="_blank"
-                      rel="noopener"
-                    >
-                      <FormattedMessage
-                        id="kbn.home.dataManagementDisclaimerPrivacyLink"
-                        defaultMessage="Privacy Statement."
-                      />
-                    </EuiLink>
+                <EuiTextColor className="euiText--small" color="subdued">
+                  <FormattedMessage
+                    id="kbn.home.dataManagementDisclaimerPrivacy"
+                    defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our "
+                  />
+                  <EuiLink
+                    href="https://www.elastic.co/legal/privacy-statement"
+                    target="_blank"
+                    rel="noopener"
+                  >
                     <FormattedMessage
-                      id="kbn.home.dataManagementDisableCollection"
-                      defaultMessage=" To stop collection, "
+                      id="kbn.home.dataManagementDisclaimerPrivacyLink"
+                      defaultMessage="Privacy Statement."
                     />
-                    <EuiLink href="#/management/kibana/settings">
-                      <FormattedMessage
-                        id="kbn.home.dataManagementDisableCollectionLink"
-                        defaultMessage="disable usage data here."
-                      />
-                    </EuiLink>
-                  </EuiTextColor>
-                )}
+                  </EuiLink>
+                  {this.renderTelemetryEnabledOrDisabledText()}
+                </EuiTextColor>
                 <EuiSpacer size="xs" />
               </EuiFlexItem>
             </EuiFlexGroup>