Telemetry/opt in welcome screen (#42110) (#44077)

* refactor opt_in_message

* welcome optin card

* finish optin in welcome screen

* add  steps

* disable  current step

* remove checkbox option

* add metrics

* fix  typescript checks

* hide in oss

* update snapshots

* only require TelemetryOptInProvider if telemetry is enabled

* pass telemetry description from service

* remove x-pack import

* remove x-pack import

* update image

* update per design feedback

* update props

* fix in oss

* await before moving to next screen

* utlize bannerId in telemtry provider

* keep export in 1 line

* ts-ignore banner import

* add test

* update tests

* update translations

* update home tests

* remove extra license header

* showTelemetryOptIn -> shouldShowTelemetryOptIn

* remote extra EuiTexts

* update jest snapshot

* unencrypted telemetry example

src/legacy/core_plugins/kibana/public/home/components/_welcome.scss

@@ -1,6 +1,5 @@
-
 .homWelcome {
-  @include kibanaFullScreenGraphics;
+  @include kibanaFullScreenGraphics($euiZLevel6);
 }
 
 .homWelcome__header {

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

@@ -225,6 +225,10 @@ 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}
       />
     );
   }
@@ -247,6 +251,10 @@ 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.isRequired,
   directories: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,

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

@@ -17,30 +17,14 @@
  * under the License.
  */
 
+import './home.test.mocks';
+
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { Home } from './home';
 import { FeatureCatalogueCategory } from 'ui/registry/feature_catalogue';
 
-jest.mock(
-  'ui/chrome',
-  () => ({
-    getBasePath: jest.fn(() => 'path'),
-    getInjected: jest.fn(() => ''),
-  }),
-  { virtual: true }
-);
-
-jest.mock(
-  'ui/capabilities',
-  () => ({
-    catalogue: {},
-    management: {},
-    navLinks: {}
-  })
-);
-
 describe('home', () => {
   let defaultProps;
 
@@ -50,6 +34,10 @@ describe('home', () => {
       apmUiEnabled: true,
       mlEnabled: true,
       kibanaVersion: '99.2.1',
+      fetchTelemetry: jest.fn(),
+      getTelemetryBannerId: jest.fn(),
+      setOptIn: jest.fn(),
+      showTelemetryOptIn: false,
       addBasePath(url) {
         return `base_path/${url}`;
       },

src/legacy/core_plugins/kibana/public/home/components/home.test.mocks.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { notificationServiceMock } from '../../../../../../core/public/mocks';
+
+jest.doMock('ui/new_platform', () => {
+  return {
+    npSetup: {
+      core: {
+        notifications: notificationServiceMock.createSetupContract(),
+      },
+    },
+  };
+});
+
+jest.doMock(
+  'ui/chrome',
+  () => ({
+    getBasePath: jest.fn(() => 'path'),
+    getInjected: jest.fn(() => ''),
+  }),
+  { virtual: true }
+);
+
+jest.doMock('ui/capabilities', () => ({
+  catalogue: {},
+  management: {},
+  navLinks: {},
+}));

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

@@ -30,12 +30,10 @@ import {
 } from 'react-router-dom';
 import { getTutorial } from '../load_tutorials';
 import { replaceTemplateStrings } from './tutorial/replace_template_strings';
+import { telemetryOptInProvider, shouldShowTelemetryOptIn } from '../kibana_services';
 import chrome from 'ui/chrome';
 
-export function HomeApp({
-  directories,
-}) {
-
+export function HomeApp({ directories }) {
   const isCloudEnabled = chrome.getInjected('isCloudEnabled', false);
   const apmUiEnabled = chrome.getInjected('apmUiEnabled', true);
   const mlEnabled = chrome.getInjected('mlEnabled', false);
@@ -94,6 +92,10 @@ export function HomeApp({
             find={savedObjectsClient.find}
             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/sample_data/index.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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.
+ */
+
+/*
+ * The UI and related logic for the welcome screen that *should* show only
+ * when it is enabled (the default) and there is no Kibana-consumed data
+ * in Elasticsearch.
+ */
+
+import React from 'react';
+import {
+  // @ts-ignore
+  EuiCard,
+  EuiButton,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import { FormattedMessage } from '@kbn/i18n/react';
+
+interface Props {
+  urlBasePath: string;
+  onDecline: () => void;
+  onConfirm: () => void;
+}
+
+export function SampleDataCard({ urlBasePath, onDecline, onConfirm }: Props) {
+  return (
+    <EuiCard
+      image={`${urlBasePath}/plugins/kibana/assets/illo_dashboard.png`}
+      textAlign="left"
+      title={<FormattedMessage id="kbn.home.letsStartTitle" defaultMessage="Let's get started" />}
+      description={
+        <FormattedMessage
+          id="kbn.home.letsStartDescription"
+          defaultMessage="We noticed that you don't have any data in your cluster.
+You can try our sample data and dashboards or jump in with your own data."
+        />
+      }
+      footer={
+        <footer>
+          <EuiButton fill className="homWelcome__footerAction" onClick={onConfirm}>
+            <FormattedMessage id="kbn.home.tryButtonLabel" defaultMessage="Try our sample data" />
+          </EuiButton>
+          <EuiButtonEmpty
+            className="homWelcome__footerAction"
+            onClick={onDecline}
+            data-test-subj="skipWelcomeScreen"
+          >
+            <FormattedMessage id="kbn.home.exploreButtonLabel" defaultMessage="Explore on my own" />
+          </EuiButtonEmpty>
+        </footer>
+      }
+    />
+  );
+}

src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts

@@ -0,0 +1,23 @@
+/*
+ * 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);
+};