From d9724aad431f8a59971482deaeae0631af6f22bf Mon Sep 17 00:00:00 2001 From: Joel Griffith Date: Tue, 12 Nov 2019 13:47:40 -0800 Subject: [PATCH] [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 --- .../__snapshots__/home.test.js.snap | 4 +- .../__snapshots__/welcome.test.tsx.snap | 188 ++++++++++++++++++ .../kibana/public/home/components/home.js | 12 +- .../kibana/public/home/components/home_app.js | 5 +- .../home/components/telemetry_opt_in/index.ts | 23 --- .../telemetry_opt_in_card.tsx | 81 -------- .../public/home/components/welcome.test.tsx | 52 +++++ .../kibana/public/home/components/welcome.tsx | 85 ++++---- .../translations/translations/ja-JP.json | 3 - .../translations/translations/zh-CN.json | 3 - 10 files changed, 287 insertions(+), 169 deletions(-) create mode 100644 src/legacy/core_plugins/kibana/public/home/components/__snapshots__/welcome.test.tsx.snap delete mode 100644 src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts delete mode 100644 src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx create mode 100644 src/legacy/core_plugins/kibana/public/home/components/welcome.test.tsx 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 fcf60a6009b29..19dd262dd7b18 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 @@ -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`] = ` `; 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 new file mode 100644 index 0000000000000..5a6c6eba5c8db --- /dev/null +++ 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`] = ` + +
+
+
+ + + + + +

+ +

+ + +

+ +

+ + +
+
+
+ + + + + + + +
+
+ +`; + +exports[`should render a Welcome screen with the telemetry disclaimer 1`] = ` + +
+
+
+ + + + + +

+ +

+ + +

+ +

+ + +
+
+
+ + + + + + + + + + + + + + + + + +
+
+ +`; 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 6a8dff2ad4fa7..fef66cec96d8d 100644 --- a/src/legacy/core_plugins/kibana/public/home/components/home.js +++ b/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 { ); } @@ -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, 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 9aa44863f6d70..36a3911110fbc 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 @@ -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} /> diff --git 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 deleted file mode 100644 index 63636433bc00b..0000000000000 --- a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/index.ts +++ /dev/null @@ -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); -}; diff --git 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 deleted file mode 100644 index e0f37277dd226..0000000000000 --- a/src/legacy/core_plugins/kibana/public/home/components/telemetry_opt_in/telemetry_opt_in_card.tsx +++ /dev/null @@ -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; -} - -export function renderTelemetryOptInCard({ - urlBasePath, - fetchTelemetry, - onConfirm, - onDecline, -}: Props) { - return ( - - } - description={} - footer={ -
- - - - - - -
- } - /> - ); -} 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 new file mode 100644 index 0000000000000..195a527707af6 --- /dev/null +++ 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 + {}} showTelemetryDisclaimer={true} /> + ); + + expect(component).toMatchSnapshot(); +}); + +test('should render a Welcome screen with no telemetry disclaimer', () => { + // @ts-ignore + const component = shallow( + // @ts-ignore + {}} showTelemetryDisclaimer={false} /> + ); + + expect(component).toMatchSnapshot(); +}); 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 8869819290263..0ace28d02c6a5 100644 --- 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, @@ -39,29 +41,18 @@ 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; - setOptIn: (enabled: boolean) => Promise; - 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 { - public readonly state: State = { - step: 0, - }; +export class Welcome extends React.Component { + private services = getServices(); private hideOnEsc = (e: KeyboardEvent) => { if (e.key === 'Escape') { @@ -73,29 +64,19 @@ export class Welcome extends React.PureComponent { 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(); }; componentDidMount() { - trackUiMetric(METRIC_TYPE.LOADED, 'welcomeScreenMount'); - if (this.props.shouldShowTelemetryOptIn) { - trackUiMetric(METRIC_TYPE.COUNT, 'welcomeScreenWithTelemetryOptIn'); - } + this.services.trackUiMetric(this.services.METRIC_TYPE.LOADED, 'welcomeScreenMount'); document.addEventListener('keydown', this.hideOnEsc); } @@ -104,8 +85,7 @@ export class Welcome extends React.PureComponent { } render() { - const { urlBasePath, shouldShowTelemetryOptIn, fetchTelemetry } = this.props; - const { step } = this.state; + const { urlBasePath, showTelemetryDisclaimer } = this.props; return ( @@ -135,20 +115,39 @@ export class Welcome extends React.PureComponent {
- {shouldShowTelemetryOptIn && step === 0 && ( - - )} - {(!shouldShowTelemetryOptIn || step === 1) && ( - + + + {showTelemetryDisclaimer && ( + + + + + + + + + + )} diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 81a6dff3b85f1..cdcbaecf01635 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/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": "検索をリセット", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 62c3fd2217011..25034a9202f94 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/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": "重置搜索",