[Telemetry] Show opt-in changes for OSS users (#50831) (#50941)

* WIP: Notice banner for OSS folks

* Add telemetryNotifyUserAboutOptInDefault to injected vars

* add userHasSeenNotice check

* More WIP on banner notice component

* Text changes on screens

* make userHasSeenNotice flag work

* Finalzed splash text + checking new flag

* Consolidating banner calls and saving status of opt-in notice

* Conditionally remove the banner and add some code docs

* Fixing prior welcome tests

* api integration test for user has seen opt in

* change post method to put in ui

* unit test for get_telemetry_notify_user_about_optin_default

* Ignore TS woes

* Adding new tests and snapshots for opt-in banner component

* Notice banner test

* Translation miss

* More opt-in tests

* increase types usage

* roll back core server api change

* update snapshot

* Prop name change + snapshot updates

Author: Joel Griffith

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

@@ -47,8 +47,12 @@ export class Home extends Component {
   constructor(props) {
     super(props);
 
-    const isWelcomeEnabled = !(chrome.getInjected('disableWelcomeScreen') || props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false');
-    const showTelemetryDisclaimer = chrome.getInjected('allowChangingOptInStatus');
+    const isWelcomeEnabled = !(
+      chrome.getInjected('disableWelcomeScreen') ||
+      props.localStorage.getItem(KEY_ENABLE_WELCOME) === 'false'
+    );
+    const showTelemetryDisclaimer = chrome.getInjected('telemetryNotifyUserAboutOptInDefault');
+
     this.state = {
       // If welcome is enabled, we wait for loading to complete
       // before rendering. This prevents an annoying flickering
@@ -227,6 +231,7 @@ export class Home extends Component {
         onSkip={this.skipWelcome}
         urlBasePath={this.props.urlBasePath}
         showTelemetryDisclaimer={this.state.showTelemetryDisclaimer}
+        onOptInSeen={this.props.onOptInSeen}
       />
     );
   }
@@ -265,4 +270,5 @@ Home.propTypes = {
   localStorage: PropTypes.object.isRequired,
   urlBasePath: PropTypes.string.isRequired,
   mlEnabled: PropTypes.bool.isRequired,
+  onOptInSeen: PropTypes.func.isRequired,
 };

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

@@ -30,13 +30,14 @@ import {
 } from 'react-router-dom';
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
-import { shouldShowTelemetryOptIn } from '../kibana_services';
+import { telemetryOptInProvider } from '../kibana_services';
 import chrome from 'ui/chrome';
 
 export function HomeApp({ directories }) {
   const isCloudEnabled = chrome.getInjected('isCloudEnabled', false);
   const apmUiEnabled = chrome.getInjected('apmUiEnabled', true);
   const mlEnabled = chrome.getInjected('mlEnabled', false);
+  const { setOptInNoticeSeen } = telemetryOptInProvider;
   const savedObjectsClient = chrome.getSavedObjectsClient();
 
   const renderTutorialDirectory = (props) => {
@@ -92,7 +93,7 @@ export function HomeApp({ directories }) {
             find={savedObjectsClient.find}
             localStorage={localStorage}
             urlBasePath={chrome.getBasePath()}
-            shouldShowTelemetryOptIn={shouldShowTelemetryOptIn}
+            onOptInSeen={setOptInNoticeSeen}
           />
         </Route>
       </Switch>

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

@@ -33,7 +33,7 @@ jest.mock('../kibana_services', () => ({
 test('should render a Welcome screen with the telemetry disclaimer', () => {
   const component = shallow(
     // @ts-ignore
-    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} />
+    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} onOptInSeen={() => {}} />
   );
 
   expect(component).toMatchSnapshot();
@@ -43,8 +43,19 @@ test('should render a Welcome screen with no telemetry disclaimer', () => {
   // @ts-ignore
   const component = shallow(
     // @ts-ignore
-    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={false} />
+    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={false} onOptInSeen={() => {}} />
   );
 
   expect(component).toMatchSnapshot();
 });
+
+test('fires opt-in seen when mounted', () => {
+  const seen = jest.fn();
+
+  shallow(
+    // @ts-ignore
+    <Welcome urlBase="/" onSkip={() => {}} showTelemetryDisclaimer={true} onOptInSeen={seen} />
+  );
+
+  expect(seen).toHaveBeenCalled();
+});

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

@@ -47,6 +47,7 @@ import { trackUiMetric, METRIC_TYPE } from '../kibana_services';
 interface Props {
   urlBasePath: string;
   onSkip: () => void;
+  onOptInSeen: () => any;
   showTelemetryDisclaimer: boolean;
 }
 
@@ -77,6 +78,7 @@ export class Welcome extends React.Component<Props> {
 
   componentDidMount() {
     trackUiMetric(METRIC_TYPE.LOADED, 'welcomeScreenMount');
+    this.props.onOptInSeen();
     document.addEventListener('keydown', this.hideOnEsc);
   }
 
@@ -134,17 +136,17 @@ export class Welcome extends React.Component<Props> {
                     >
                       <FormattedMessage
                         id="kbn.home.dataManagementDisclaimerPrivacyLink"
-                        defaultMessage="Privacy Policy."
+                        defaultMessage="Privacy Statement."
                       />
                     </EuiLink>
                     <FormattedMessage
                       id="kbn.home.dataManagementDisableCollection"
-                      defaultMessage=" To disable collection, "
+                      defaultMessage=" To stop collection, "
                     />
                     <EuiLink href="#/management/kibana/settings">
                       <FormattedMessage
                         id="kbn.home.dataManagementDisableCollectionLink"
-                        defaultMessage="click here."
+                        defaultMessage="disable usage data here."
                       />
                     </EuiLink>
                   </EuiTextColor>

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

@@ -112,6 +112,7 @@ const telemetry = (kibana: any) => {
           telemetryOptInStatusUrl: config.get('telemetry.optInStatusUrl'),
           allowChangingOptInStatus: config.get('telemetry.allowChangingOptInStatus'),
           telemetrySendUsageFrom: config.get('telemetry.sendUsageFrom'),
+          telemetryNotifyUserAboutOptInDefault: false,
         };
       },
       hacks: ['plugins/telemetry/hacks/telemetry_init', 'plugins/telemetry/hacks/telemetry_opt_in'],

src/legacy/core_plugins/telemetry/index.ts

@@ -14,6 +14,9 @@
       "lastVersionChecked": {
         "ignore_above": 256,
         "type": "keyword"
+      },
+      "userHasSeenNotice": {
+        "type": "boolean"
       }
     }
   }

src/legacy/core_plugins/telemetry/mappings.json

@@ -0,0 +1,43 @@
+/*
+ * 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 { EuiButton } from '@elastic/eui';
+import { shallowWithIntl } from 'test_utils/enzyme_helpers';
+import { OptedInBanner } from './opted_in_notice_banner';
+
+describe('OptInDetailsComponent', () => {
+  it('renders as expected', () => {
+    expect(shallowWithIntl(<OptedInBanner onSeenBanner={() => {}} />)).toMatchSnapshot();
+  });
+
+  it('fires the "onSeenBanner" prop when a link is clicked', () => {
+    const onLinkClick = jest.fn();
+    const component = shallowWithIntl(<OptedInBanner onSeenBanner={onLinkClick} />);
+
+    const button = component.findWhere(n => n.type() === EuiButton);
+
+    if (!button) {
+      throw new Error(`Couldn't find any buttons in opt-in notice`);
+    }
+
+    button.simulate('click');
+
+    expect(onLinkClick).toHaveBeenCalled();
+  });
+});

src/legacy/core_plugins/telemetry/public/components/__snapshots__/opted_in_notice_banner.test.tsx.snap

@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+/* eslint @elastic/eui/href-or-on-click:0 */
+
+import * as React from 'react';
+import { EuiButton, EuiLink, EuiCallOut, EuiSpacer } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+  onSeenBanner: () => any;
+}
+
+/**
+ * React component for displaying the Telemetry opt-in notice.
+ */
+export class OptedInBanner extends React.PureComponent<Props> {
+  onLinkClick = () => {
+    this.props.onSeenBanner();
+    return;
+  };
+
+  render() {
+    return (
+      <EuiCallOut title="Help us improve the Elastic Stack">
+        <FormattedMessage
+          id="telemetry.telemetryOptedInNoticeDescription"
+          defaultMessage="To learn about how usage data helps us manage and improve our products and services, see our {privacyStatementLink}. To stop collection, {disableLink}."
+          values={{
+            privacyStatementLink: (
+              <EuiLink
+                onClick={this.onLinkClick}
+                href="https://www.elastic.co/legal/privacy-statement"
+                target="_blank"
+                rel="noopener"
+              >
+                <FormattedMessage
+                  id="telemetry.telemetryOptedInPrivacyStatement"
+                  defaultMessage="Privacy Statement"
+                />
+              </EuiLink>
+            ),
+            disableLink: (
+              <EuiLink href="#/management/kibana/settings" onClick={this.onLinkClick}>
+                <FormattedMessage
+                  id="telemetry.telemetryOptedInDisableUsage"
+                  defaultMessage="disable usage data here"
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+        <EuiSpacer size="s" />
+        <EuiButton size="s" onClick={this.props.onSeenBanner}>
+          <FormattedMessage
+            id="telemetry.telemetryOptedInDismissMessage"
+            defaultMessage="Dismiss"
+          />
+        </EuiButton>
+      </EuiCallOut>
+    );
+  }
+}