From fbff48fd3043a39554a38b766ea475f5fd803cad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?= Date: Mon, 27 Jun 2022 16:18:01 +0200 Subject: [PATCH] [Telemetry] Lazy imports to reduce bundle size (#135092) Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> --- src/plugins/telemetry/common/constants.ts | 2 +- .../telemetry_config/get_telemetry_opt_in.ts | 2 +- .../telemetry/public/components/index.ts | 9 -- .../welcome_telemetry_notice.test.tsx | 53 +++++++++++ .../components/welcome_telemetry_notice.tsx | 87 +++++++++++++++++++ src/plugins/telemetry/public/plugin.ts | 14 ++- .../render_welcome_telemetry_notice.test.ts | 27 ++---- .../render_welcome_telemetry_notice.tsx | 75 +++------------- .../render_opt_in_banner.tsx | 14 ++- .../render_opted_in_notice_banner.tsx | 15 +++- .../public/services/telemetry_service.ts | 2 +- 11 files changed, 189 insertions(+), 111 deletions(-) delete mode 100644 src/plugins/telemetry/public/components/index.ts create mode 100644 src/plugins/telemetry/public/components/welcome_telemetry_notice.test.tsx create mode 100644 src/plugins/telemetry/public/components/welcome_telemetry_notice.tsx diff --git a/src/plugins/telemetry/common/constants.ts b/src/plugins/telemetry/common/constants.ts index 78887c27fbcfb..4987dc0b512ab 100644 --- a/src/plugins/telemetry/common/constants.ts +++ b/src/plugins/telemetry/common/constants.ts @@ -8,7 +8,7 @@ /** * The amount of time, in milliseconds, to wait between reports when enabled. - * Currently 24 hours. + * Currently, 24 hours. */ export const REPORT_INTERVAL_MS = 86400000; diff --git a/src/plugins/telemetry/common/telemetry_config/get_telemetry_opt_in.ts b/src/plugins/telemetry/common/telemetry_config/get_telemetry_opt_in.ts index a06c6932fcfe8..cb2292af8f5c8 100644 --- a/src/plugins/telemetry/common/telemetry_config/get_telemetry_opt_in.ts +++ b/src/plugins/telemetry/common/telemetry_config/get_telemetry_opt_in.ts @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import SemVer from 'semver/classes/semver'; +import type SemVer from 'semver/classes/semver'; import semverParse from 'semver/functions/parse'; import { TelemetrySavedObject } from './types'; diff --git a/src/plugins/telemetry/public/components/index.ts b/src/plugins/telemetry/public/components/index.ts deleted file mode 100644 index c3976c5ded878..0000000000000 --- a/src/plugins/telemetry/public/components/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export { OptedInNoticeBanner } from './opted_in_notice_banner'; diff --git a/src/plugins/telemetry/public/components/welcome_telemetry_notice.test.tsx b/src/plugins/telemetry/public/components/welcome_telemetry_notice.test.tsx new file mode 100644 index 0000000000000..dfefaca5d570f --- /dev/null +++ b/src/plugins/telemetry/public/components/welcome_telemetry_notice.test.tsx @@ -0,0 +1,53 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { mountWithIntl } from '@kbn/test-jest-helpers'; +import React from 'react'; +import { mockTelemetryConstants, mockTelemetryService } from '../mocks'; +import { WelcomeTelemetryNotice } from './welcome_telemetry_notice'; + +describe('WelcomeTelemetryNotice', () => { + const telemetryConstants = mockTelemetryConstants(); + + test('it should show the opt-out message', () => { + const telemetryService = mockTelemetryService(); + const component = mountWithIntl( + url} + /> + ); + expect(component.exists('[id="telemetry.dataManagementDisableCollectionLink"]')).toBe(true); + }); + + test('it should show the opt-in message', () => { + const telemetryService = mockTelemetryService({ config: { optIn: false } }); + const component = mountWithIntl( + url} + /> + ); + expect(component.exists('[id="telemetry.dataManagementEnableCollectionLink"]')).toBe(true); + }); + + test('it should not show opt-in/out options if user cannot change the settings', () => { + const telemetryService = mockTelemetryService({ config: { allowChangingOptInStatus: false } }); + const component = mountWithIntl( + url} + /> + ); + expect(component.exists('[id="telemetry.dataManagementDisableCollectionLink"]')).toBe(false); + expect(component.exists('[id="telemetry.dataManagementEnableCollectionLink"]')).toBe(false); + }); +}); diff --git a/src/plugins/telemetry/public/components/welcome_telemetry_notice.tsx b/src/plugins/telemetry/public/components/welcome_telemetry_notice.tsx new file mode 100644 index 0000000000000..3923016637cfb --- /dev/null +++ b/src/plugins/telemetry/public/components/welcome_telemetry_notice.tsx @@ -0,0 +1,87 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import React from 'react'; +import { EuiLink, EuiSpacer, EuiTextColor } from '@elastic/eui'; +import { FormattedMessage } from '@kbn/i18n-react'; +import type { TelemetryConstants } from '../plugin'; +import type { TelemetryService } from '../services'; + +interface Props { + telemetryService: TelemetryService; + addBasePath: (url: string) => string; + telemetryConstants: TelemetryConstants; +} + +export const WelcomeTelemetryNotice: React.FC = ({ + telemetryService, + addBasePath, + telemetryConstants, +}: Props) => { + return ( + <> + + + + + + {renderTelemetryEnabledOrDisabledText(telemetryService, addBasePath)} + + + + ); +}; + +function renderTelemetryEnabledOrDisabledText( + telemetryService: TelemetryService, + addBasePath: (url: string) => string +) { + if (!telemetryService.userCanChangeSettings || !telemetryService.getCanChangeOptInStatus()) { + return null; + } + + const isOptedIn = telemetryService.getIsOptedIn(); + + if (isOptedIn) { + return ( + <> + + + + + + ); + } else { + return ( + <> + + + + + + ); + } +} diff --git a/src/plugins/telemetry/public/plugin.ts b/src/plugins/telemetry/public/plugin.ts index dea9cd1df2c3c..ee85f804519a5 100644 --- a/src/plugins/telemetry/public/plugin.ts +++ b/src/plugins/telemetry/public/plugin.ts @@ -6,8 +6,6 @@ * Side Public License, v 1. */ -import { ElasticV3BrowserShipper } from '@kbn/analytics-shippers-elastic-v3-browser'; - import type { Plugin, CoreStart, @@ -19,20 +17,15 @@ import type { ApplicationStart, DocLinksStart, } from '@kbn/core/public'; - import type { ScreenshotModePluginSetup } from '@kbn/screenshot-mode-plugin/public'; - import type { HomePublicPluginSetup } from '@kbn/home-plugin/public'; +import { ElasticV3BrowserShipper } from '@kbn/analytics-shippers-elastic-v3-browser'; + import { TelemetrySender, TelemetryService, TelemetryNotifications } from './services'; import type { TelemetrySavedObjectAttributes, TelemetrySavedObject, } from '../common/telemetry_config/types'; -import { - getTelemetryAllowChangingOptInStatus, - getTelemetryOptIn, - getTelemetrySendUsageFrom, -} from '../common/telemetry_config'; import { getNotifyUserAboutOptInDefault } from '../common/telemetry_config/get_telemetry_notify_user_about_optin_default'; import { renderWelcomeTelemetryNotice } from './render_welcome_telemetry_notice'; @@ -321,6 +314,9 @@ export class TelemetryPlugin implements Plugin { const telemetryConstants = mockTelemetryConstants(); - test('it should show the opt-out message', () => { + test('it should render the WelcomeTelemetryNotice component', () => { + const reactLazySpy = jest.spyOn(React, 'lazy'); const telemetryService = mockTelemetryService(); - const component = mountWithIntl( + shallowWithIntl( renderWelcomeTelemetryNotice(telemetryService, (url) => url, telemetryConstants) ); - expect(component.exists('[id="telemetry.dataManagementDisableCollectionLink"]')).toBe(true); - }); - - test('it should show the opt-in message', () => { - const telemetryService = mockTelemetryService({ config: { optIn: false } }); - const component = mountWithIntl( - renderWelcomeTelemetryNotice(telemetryService, (url) => url, telemetryConstants) - ); - expect(component.exists('[id="telemetry.dataManagementEnableCollectionLink"]')).toBe(true); - }); - - test('it should not show opt-in/out options if user cannot change the settings', () => { - const telemetryService = mockTelemetryService({ config: { allowChangingOptInStatus: false } }); - const component = mountWithIntl( - renderWelcomeTelemetryNotice(telemetryService, (url) => url, telemetryConstants) - ); - expect(component.exists('[id="telemetry.dataManagementDisableCollectionLink"]')).toBe(false); - expect(component.exists('[id="telemetry.dataManagementEnableCollectionLink"]')).toBe(false); + expect(reactLazySpy).toHaveBeenCalledTimes(1); }); }); diff --git a/src/plugins/telemetry/public/render_welcome_telemetry_notice.tsx b/src/plugins/telemetry/public/render_welcome_telemetry_notice.tsx index 7d460ded2571e..b065b5eb64b0a 100644 --- a/src/plugins/telemetry/public/render_welcome_telemetry_notice.tsx +++ b/src/plugins/telemetry/public/render_welcome_telemetry_notice.tsx @@ -7,8 +7,7 @@ */ import React from 'react'; -import { EuiLink, EuiSpacer, EuiTextColor } from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n-react'; +import { withSuspense } from '@kbn/shared-ux-utility'; import type { TelemetryService } from './services'; import { TelemetryConstants } from './plugin'; @@ -17,65 +16,19 @@ export function renderWelcomeTelemetryNotice( addBasePath: (url: string) => string, telemetryConstants: TelemetryConstants ) { - return ( - <> - - - - - - {renderTelemetryEnabledOrDisabledText(telemetryService, addBasePath)} - - - + const WelcomeTelemetryNoticeLazy = withSuspense( + React.lazy(() => + import('./components/welcome_telemetry_notice').then(({ WelcomeTelemetryNotice }) => ({ + default: WelcomeTelemetryNotice, + })) + ) ); -} - -function renderTelemetryEnabledOrDisabledText( - telemetryService: TelemetryService, - addBasePath: (url: string) => string -) { - if (!telemetryService.userCanChangeSettings || !telemetryService.getCanChangeOptInStatus()) { - return null; - } - - const isOptedIn = telemetryService.getIsOptedIn(); - if (isOptedIn) { - return ( - <> - - - - - - ); - } else { - return ( - <> - - - - - - ); - } + return ( + + ); } diff --git a/src/plugins/telemetry/public/services/telemetry_notifications/render_opt_in_banner.tsx b/src/plugins/telemetry/public/services/telemetry_notifications/render_opt_in_banner.tsx index 23754471e1630..e2aca2fafd2f9 100644 --- a/src/plugins/telemetry/public/services/telemetry_notifications/render_opt_in_banner.tsx +++ b/src/plugins/telemetry/public/services/telemetry_notifications/render_opt_in_banner.tsx @@ -7,10 +7,10 @@ */ import React from 'react'; -import { OverlayStart } from '@kbn/core/public'; +import type { OverlayStart } from '@kbn/core/public'; import { toMountPoint } from '@kbn/kibana-react-plugin/public'; -import { OptInBanner } from '../../components/opt_in_banner'; -import { TelemetryConstants } from '../..'; +import { withSuspense } from '@kbn/shared-ux-utility'; +import type { TelemetryConstants } from '../..'; interface RenderBannerConfig { overlays: OverlayStart; @@ -19,8 +19,14 @@ interface RenderBannerConfig { } export function renderOptInBanner({ setOptIn, overlays, telemetryConstants }: RenderBannerConfig) { + const OptInBannerLazy = withSuspense( + React.lazy(() => + import('../../components/opt_in_banner').then(({ OptInBanner }) => ({ default: OptInBanner })) + ) + ); + const mount = toMountPoint( - + ); const bannerId = overlays.banners.add(mount, 10000); diff --git a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx index 30720e43fcadf..4ef17b57b2dc0 100644 --- a/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx +++ b/src/plugins/telemetry/public/services/telemetry_notifications/render_opted_in_notice_banner.tsx @@ -7,10 +7,10 @@ */ import React from 'react'; -import { HttpStart, OverlayStart } from '@kbn/core/public'; +import type { HttpStart, OverlayStart } from '@kbn/core/public'; import { toMountPoint } from '@kbn/kibana-react-plugin/public'; -import { OptedInNoticeBanner } from '../../components/opted_in_notice_banner'; -import { TelemetryConstants } from '../..'; +import { withSuspense } from '@kbn/shared-ux-utility'; +import type { TelemetryConstants } from '../..'; interface RenderBannerConfig { http: HttpStart; @@ -24,8 +24,15 @@ export function renderOptedInNoticeBanner({ http, telemetryConstants, }: RenderBannerConfig) { + const OptedInNoticeBannerLazy = withSuspense( + React.lazy(() => + import('../../components/opted_in_notice_banner').then(({ OptedInNoticeBanner }) => ({ + default: OptedInNoticeBanner, + })) + ) + ); const mount = toMountPoint( -