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

* [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

* Fixing broken telemetry updates

* [ML] Removes ChartTooltip component, artefact from backport gone wrong. (#50300)

* [7.5] [ML] Skip advanced wizard categorization test (#50141) (#50156)

* [ML] Skip advanced wizard categorization test (#50141)
* Re-enable other advanced tests

* [DOCS] Adds link to 7.5 breaking changes doc (#50496)

* Fixing mock interface in jest

src/legacy/core_plugins/kibana/public/home/components/__snapshots__/home.test.js.snap

@@ -1063,10 +1063,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"
 />
 `;

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>
+`;

src/legacy/core_plugins/kibana/public/home/components/home.js

@@ -48,7 +48,7 @@ export class Home extends Component {
     super(props);
 
     const isWelcomeEnabled = !(chrome.getInjected('disableWelcomeScreen') || props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false');
-
+    const showTelemetryDisclaimer = chrome.getInjected('allowChangingOptInStatus');
     this.state = {
       // If welcome is enabled, we wait for loading to complete
       // before rendering. This prevents an annoying flickering
@@ -57,6 +57,7 @@ export class Home extends Component {
       isLoading: isWelcomeEnabled,
       isNewKibanaInstance: false,
       isWelcomeEnabled,
+      showTelemetryDisclaimer,
     };
   }
 
@@ -225,10 +226,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}
       />
     );
   }
@@ -251,10 +249,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,

src/legacy/core_plugins/kibana/public/home/components/home_app.js

@@ -30,7 +30,7 @@ import {
 } from 'react-router-dom';
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
-import { telemetryOptInProvider, shouldShowTelemetryOptIn } from '../kibana_services';
+import { shouldShowTelemetryOptIn } from '../kibana_services';
 import chrome from 'ui/chrome';
 
 export function HomeApp({ directories }) {
@@ -93,9 +93,6 @@ export function HomeApp({ directories }) {
             localStorage={localStorage}
             urlBasePath={chrome.getBasePath()}
             shouldShowTelemetryOptIn={shouldShowTelemetryOptIn}
-            setOptIn={telemetryOptInProvider.setOptIn}
-            fetchTelemetry={telemetryOptInProvider.fetchExample}
-            getTelemetryBannerId={telemetryOptInProvider.getBannerId}
           />
         </Route>
       </Switch>

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);
-};

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/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>
-      }
-    />
-  );
-}

src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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', () => ({
+  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();
+});

src/legacy/core_plugins/kibana/public/home/components/welcome.tsx

@@ -25,6 +25,8 @@
 
 import React from 'react';
 import {
+  EuiLink,
+  EuiTextColor,
   EuiTitle,
   EuiSpacer,
   EuiFlexGroup,
@@ -39,30 +41,19 @@ import { banners } from 'ui/notify';
 import { FormattedMessage } from '@kbn/i18n/react';
 import chrome from 'ui/chrome';
 import { SampleDataCard } from './sample_data';
-import { TelemetryOptInCard } from './telemetry_opt_in';
 // @ts-ignore
 import { trackUiMetric, METRIC_TYPE } from '../kibana_services';
 
 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> {
-  public readonly state: State = {
-    step: 0,
-  };
-
+export class Welcome extends React.Component<Props> {
   private hideOnEsc = (e: KeyboardEvent) => {
     if (e.key === 'Escape') {
       this.props.onSkip();
@@ -73,19 +64,12 @@ export class Welcome extends React.PureComponent<Props, State> {
     const path = chrome.addBasePath('#/home/tutorial_directory/sampleData');
     window.location.href = path;
   }
-  private async handleTelemetrySelection(confirm: boolean) {
-    const metricName = `telemetryOptIn${confirm ? 'Confirm' : 'Decline'}`;
-    trackUiMetric(METRIC_TYPE.CLICK, metricName);
-    await this.props.setOptIn(confirm);
-    const bannerId = this.props.getTelemetryBannerId();
-    banners.remove(bannerId);
-    this.setState(() => ({ step: 1 }));
-  }
 
   private onSampleDataDecline = () => {
     trackUiMetric(METRIC_TYPE.CLICK, 'sampleDataDecline');
     this.props.onSkip();
   };
+
   private onSampleDataConfirm = () => {
     trackUiMetric(METRIC_TYPE.CLICK, 'sampleDataConfirm');
     this.redirecToSampleData();
@@ -93,9 +77,6 @@ export class Welcome extends React.PureComponent<Props, State> {
 
   componentDidMount() {
     trackUiMetric(METRIC_TYPE.LOADED, 'welcomeScreenMount');
-    if (this.props.shouldShowTelemetryOptIn) {
-      trackUiMetric(METRIC_TYPE.COUNT, 'welcomeScreenWithTelemetryOptIn');
-    }
     document.addEventListener('keydown', this.hideOnEsc);
   }
 
@@ -104,8 +85,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>
@@ -135,20 +115,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>

x-pack/plugins/translations/translations/ja-JP.json

@@ -2519,9 +2519,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": "検索をリセット",

x-pack/plugins/translations/translations/zh-CN.json

@@ -2520,9 +2520,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": "重置搜索",