[Telemetry] Remove telemetry splash page and add conditional messaging (#50189)

* Removing tel splash page in UI layer * Removing more components * New disclaimer text * Removing telemetry i18n text * More i18n text removals * Snapshot updates * Snapshot tests + quick links for tel opt-out when possible * Fixing TS issues in test
2019-11-12 13:47:40 -08:00 · 2019-11-12 13:47:40 -08:00 · fada20d523
parent 5c6eb9c6ce
commit fada20d523
10 changed files with 284 additions and 172 deletions
--- 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,10 +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
-  fetchTelemetry={[MockFunction]}
-  getTelemetryBannerId={[MockFunction]}
  onSkip={[Function]}
-  setOptIn={[MockFunction]}
+  showTelemetryDisclaimer=""
  urlBasePath="goober"
 />
 `;
--- 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
@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render a Welcome screen with no telemetry disclaimer 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]}
+          />
+          <EuiSpacer
+            size="s"
+          />
+          <EuiSpacer
+            size="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  </div>
+</EuiPortal>
+`;
+
+exports[`should render a Welcome screen with the telemetry disclaimer 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]}
+          />
+          <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 Policy."
+                id="kbn.home.dataManagementDisclaimerPrivacyLink"
+                values={Object {}}
+              />
+            </EuiLink>
+            <FormattedMessage
+              defaultMessage=" To disable collection, "
+              id="kbn.home.dataManagementDisableCollection"
+              values={Object {}}
+            />
+            <EuiLink
+              href="#/management/kibana/settings"
+            >
+              <FormattedMessage
+                defaultMessage="click here."
+                id="kbn.home.dataManagementDisableCollectionLink"
+                values={Object {}}
+              />
+            </EuiLink>
+          </EuiTextColor>
+          <EuiSpacer
+            size="xs"
+          />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  </div>
+</EuiPortal>
+`;
--- a/src/legacy/core_plugins/kibana/public/home/components/home.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home.js
@ -51,6 +51,7 @@ export class Home extends Component {
      getServices().getInjected('disableWelcomeScreen') ||
      props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
    );
+    const showTelemetryDisclaimer = getServices().getInjected('allowChangingOptInStatus');

    this.state = {
      // If welcome is enabled, we wait for loading to complete
@ -60,6 +61,7 @@ export class Home extends Component {
      isLoading: isWelcomeEnabled,
      isNewKibanaInstance: false,
      isWelcomeEnabled,
+      showTelemetryDisclaimer,
    };
  }

@ -228,10 +230,7 @@ export class Home extends Component {
      <Welcome
        onSkip={this.skipWelcome}
        urlBasePath={this.props.urlBasePath}
-        shouldShowTelemetryOptIn={this.props.shouldShowTelemetryOptIn}
-        fetchTelemetry={this.props.fetchTelemetry}
-        setOptIn={this.props.setOptIn}
-        getTelemetryBannerId={this.props.getTelemetryBannerId}
+        showTelemetryDisclaimer={this.state.showTelemetryDisclaimer}
      />
    );
  }
@ -254,10 +253,6 @@ export class Home extends Component {

 Home.propTypes = {
  addBasePath: PropTypes.func.isRequired,
-  fetchTelemetry: PropTypes.func.isRequired,
-  getTelemetryBannerId: PropTypes.func.isRequired,
-  setOptIn: PropTypes.func.isRequired,
-  shouldShowTelemetryOptIn: PropTypes.bool,
  directories: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
--- a/src/legacy/core_plugins/kibana/public/home/components/home_app.js
+++ b/src/legacy/core_plugins/kibana/public/home/components/home_app.js
@ -31,8 +31,6 @@ import { getServices } from '../kibana_services';

 export function HomeApp({ directories }) {
  const {
-    telemetryOptInProvider,
-    shouldShowTelemetryOptIn,
    getInjected,
    savedObjectsClient,
    getBasePath,
@ -85,10 +83,6 @@ export function HomeApp({ directories }) {
              find={savedObjectsClient.find}
              localStorage={localStorage}
              urlBasePath={getBasePath()}
-              shouldShowTelemetryOptIn={shouldShowTelemetryOptIn}
-              setOptIn={telemetryOptInProvider.setOptIn}
-              fetchTelemetry={telemetryOptInProvider.fetchExample}
-              getTelemetryBannerId={telemetryOptInProvider.getBannerId}
            />
          </Route>
          <Route path="/home">
--- a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts
@ -1,23 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import { renderTelemetryOptInCard, Props } from './telemetry_opt_in_card';
-
-export const TelemetryOptInCard = (props: Props) => {
-  return renderTelemetryOptInCard(props);
-};
--- a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx
+++ b/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx
@ -1,81 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
-import {
-  // @ts-ignore
-  EuiCard,
-  EuiButton,
-} from '@elastic/eui';
-import { OptInMessage } from '../../../../../telemetry/public/components/opt_in_message';
-
-export interface Props {
-  urlBasePath: string;
-  onConfirm: () => void;
-  onDecline: () => void;
-  fetchTelemetry: () => Promise<any[]>;
-}
-
-export function renderTelemetryOptInCard({
-  urlBasePath,
-  fetchTelemetry,
-  onConfirm,
-  onDecline,
-}: Props) {
-  return (
-    <EuiCard
-      image={`${urlBasePath}/plugins/kibana/home/assets/illo_telemetry.png`}
-      textAlign="left"
-      title={
-        <FormattedMessage
-          id="kbn.home.telemtery.optInCardTitle"
-          defaultMessage="Help us improve the Elastic Stack"
-        />
-      }
-      description={<OptInMessage fetchTelemetry={fetchTelemetry} />}
-      footer={
-        <footer>
-          <EuiButton
-            onClick={onConfirm}
-            className="homWelcome__footerAction"
-            data-test-subj="WelcomeScreenOptInConfirm"
-            fill
-          >
-            <FormattedMessage
-              id="kbn.home.telemtery.optInCardConfirmButtonLabel"
-              defaultMessage="Yes"
-            />
-          </EuiButton>
-          <EuiButton
-            className="homWelcome__footerAction"
-            onClick={onDecline}
-            data-test-subj="WelcomeScreenOptInCancel"
-            fill
-          >
-            <FormattedMessage
-              id="kbn.home.telemtery.optInCardDeclineButtonLabel"
-              defaultMessage="No"
-            />
-          </EuiButton>
-        </footer>
-      }
-    />
-  );
-}
--- a/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx
+++ b/src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx
@ -0,0 +1,52 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Welcome } from './welcome';
+
+jest.mock('../kibana_services', () => ({
+  getServices: () => ({
+    addBasePath: (path: string) => `root${path}`,
+    trackUiMetric: () => {},
+    METRIC_TYPE: {
+      LOADED: 'loaded',
+      CLICK: 'click',
+    },
+  }),
+}));
+
+test('should render a Welcome screen with the telemetry disclaimer', () => {
+  const component = shallow(
+    // @ts-ignore
+    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} />
+  );
+
+  expect(component).toMatchSnapshot();
+});
+
+test('should render a Welcome screen with no telemetry disclaimer', () => {
+  // @ts-ignore
+  const component = shallow(
+    // @ts-ignore
+    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={false} />
+  );
+
+  expect(component).toMatchSnapshot();
+});
--- a/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx
+++ b/src/legacy/core_plugins/kibana/public/home/components/welcome.tsx
@ -25,6 +25,8 @@

 import React from 'react';
 import {
+  EuiLink,
+  EuiTextColor,
  EuiTitle,
  EuiSpacer,
  EuiFlexGroup,
@ -37,29 +39,18 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { getServices } from '../kibana_services';

 import { SampleDataCard } from './sample_data';
-import { TelemetryOptInCard } from './telemetry_opt_in';

 interface Props {
  urlBasePath: string;
-  onSkip: () => {};
-  fetchTelemetry: () => Promise<any[]>;
-  setOptIn: (enabled: boolean) => Promise<boolean>;
-  getTelemetryBannerId: () => string;
-  shouldShowTelemetryOptIn: boolean;
-}
-
-interface State {
-  step: number;
+  onSkip: () => void;
+  showTelemetryDisclaimer: boolean;
 }

 /**
 * Shows a full-screen welcome page that gives helpful quick links to beginners.
 */
-export class Welcome extends React.PureComponent<Props, State> {
+export class Welcome extends React.Component<Props> {
  private services = getServices();
-  public readonly state: State = {
-    step: 0,
-  };

  private hideOnEsc = (e: KeyboardEvent) => {
    if (e.key === 'Escape') {
@ -72,19 +63,11 @@ export class Welcome extends React.PureComponent<Props, State> {
    window.location.href = path;
  }

-  private async handleTelemetrySelection(confirm: boolean) {
-    const metricName = `telemetryOptIn${confirm ? 'Confirm' : 'Decline'}`;
-    this.services.trackUiMetric(this.services.METRIC_TYPE.CLICK, metricName);
-    await this.props.setOptIn(confirm);
-    const bannerId = this.props.getTelemetryBannerId();
-    this.services.banners.remove(bannerId);
-    this.setState(() => ({ step: 1 }));
-  }
-
  private onSampleDataDecline = () => {
    this.services.trackUiMetric(this.services.METRIC_TYPE.CLICK, 'sampleDataDecline');
    this.props.onSkip();
  };
+
  private onSampleDataConfirm = () => {
    this.services.trackUiMetric(this.services.METRIC_TYPE.CLICK, 'sampleDataConfirm');
    this.redirecToSampleData();
@ -92,12 +75,6 @@ export class Welcome extends React.PureComponent<Props, State> {

  componentDidMount() {
    this.services.trackUiMetric(this.services.METRIC_TYPE.LOADED, 'welcomeScreenMount');
-    if (this.props.shouldShowTelemetryOptIn) {
-      this.services.trackUiMetric(
-        this.services.METRIC_TYPE.COUNT,
-        'welcomeScreenWithTelemetryOptIn'
-      );
-    }
    document.addEventListener('keydown', this.hideOnEsc);
  }

@ -106,8 +83,7 @@ export class Welcome extends React.PureComponent<Props, State> {
  }

  render() {
-    const { urlBasePath, shouldShowTelemetryOptIn, fetchTelemetry } = this.props;
-    const { step } = this.state;
+    const { urlBasePath, showTelemetryDisclaimer } = this.props;

    return (
      <EuiPortal>
@ -137,20 +113,39 @@ export class Welcome extends React.PureComponent<Props, State> {
          <div className="homWelcome__content homWelcome-body">
            <EuiFlexGroup gutterSize="l">
              <EuiFlexItem>
-                {shouldShowTelemetryOptIn && step === 0 && (
-                  <TelemetryOptInCard
-                    urlBasePath={urlBasePath}
-                    fetchTelemetry={fetchTelemetry}
-                    onConfirm={this.handleTelemetrySelection.bind(this, true)}
-                    onDecline={this.handleTelemetrySelection.bind(this, false)}
-                  />
-                )}
-                {(!shouldShowTelemetryOptIn || step === 1) && (
-                  <SampleDataCard
-                    urlBasePath={urlBasePath}
-                    onConfirm={this.onSampleDataConfirm}
-                    onDecline={this.onSampleDataDecline}
-                  />
+                <SampleDataCard
+                  urlBasePath={urlBasePath}
+                  onConfirm={this.onSampleDataConfirm}
+                  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 Policy."
+                      />
+                    </EuiLink>
+                    <FormattedMessage
+                      id="kbn.home.dataManagementDisableCollection"
+                      defaultMessage=" To disable collection, "
+                    />
+                    <EuiLink href="#/management/kibana/settings">
+                      <FormattedMessage
+                        id="kbn.home.dataManagementDisableCollectionLink"
+                        defaultMessage="click here."
+                      />
+                    </EuiLink>
+                  </EuiTextColor>
                )}
                <EuiSpacer size="xs" />
              </EuiFlexItem>
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -2456,9 +2456,6 @@
    "kbn.home.addData.siem.addSiemEventsButtonLabel": "セキュリティイベントを追加",
    "kbn.home.addData.siem.nameDescription": "即利用可能なビジュアライゼーションで、セキュリティイベントをまとめてインタラクティブな調査を可能にします。",
    "kbn.home.addData.siem.nameTitle": "SIEM",
-    "kbn.home.telemtery.optInCardConfirmButtonLabel": "はい",
-    "kbn.home.telemtery.optInCardDeclineButtonLabel": "いいえ",
-    "kbn.home.telemtery.optInCardTitle": "Elastic Stack の改善にご協力ください",
    "kbn.home.tutorial.tabs.siemTitle": "SIEM",
    "kbn.home.welcomeHomePageHeader": "Kibana ホーム",
    "kbn.discover.reloadSavedSearchButton": "検索をリセット",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -2457,9 +2457,6 @@
    "kbn.home.addData.siem.addSiemEventsButtonLabel": "添加安全事件",
    "kbn.home.addData.siem.nameDescription": "集中安全事件，以通过即用型可视化实现交互式调查。",
    "kbn.home.addData.siem.nameTitle": "SIEM",
-    "kbn.home.telemtery.optInCardConfirmButtonLabel": "是",
-    "kbn.home.telemtery.optInCardDeclineButtonLabel": "否",
-    "kbn.home.telemtery.optInCardTitle": "帮助我们改进 Elastic Stack",
    "kbn.home.tutorial.tabs.siemTitle": "SIEM",
    "kbn.home.welcomeHomePageHeader": "Kibana 主页",
    "kbn.discover.reloadSavedSearchButton": "重置搜索",