From 0323681a56145d5da3e952caca1c0bd1674e2b9d Mon Sep 17 00:00:00 2001 From: Pierre Gayvallet Date: Thu, 14 Nov 2019 08:40:14 +0100 Subject: [PATCH] Remove react references from core `Notifications` apis (#49573) * add reactMount util to kibana_react (kibana-react) properly export reactMount * add MountPoint types and utility * adapt toast API to no longer accept react elements (toast API) properly export new Toast type * adapt calls by using reactMount createNotifications: do not wrap if text * update generated doc * add custom snapshot serializer for reactMount * fix unit tests fix xpack unit tests * adapt non-ts calls * do not add __reactMount__ property in production * remove string check on createNotifications * fix typo and small fix using obj spread * improve react mount snapshot serializer * simplify convertToEui * rename reactMount to toMountPoint * adapt newly added calls * move mount types to proper file * use new Mount types for OverlayBanner apis * fixing typo * adapt new calls * use destructured imports --- .../core/public/kibana-plugin-public.md | 5 +- .../public/kibana-plugin-public.mountpoint.md | 13 + ...kibana-plugin-public.overlaybannermount.md | 13 - ...a-plugin-public.overlaybannersstart.add.md | 4 +- ...ugin-public.overlaybannersstart.replace.md | 4 +- ...bana-plugin-public.overlaybannerunmount.md | 13 - .../core/public/kibana-plugin-public.toast.md | 13 + .../public/kibana-plugin-public.toastinput.md | 2 +- .../kibana-plugin-public.toastinputfields.md | 5 +- .../kibana-plugin-public.toastsapi.add.md | 2 +- ...ibana-plugin-public.toastsapi.adddanger.md | 2 +- ...kibana-plugin-public.toastsapi.adderror.md | 2 +- ...bana-plugin-public.toastsapi.addsuccess.md | 2 +- ...bana-plugin-public.toastsapi.addwarning.md | 2 +- .../public/kibana-plugin-public.toastsapi.md | 2 +- .../kibana-plugin-public.toastsapi.remove.md | 4 +- .../kibana-plugin-public.unmountcallback.md | 13 + src/core/public/index.ts | 10 +- .../global_toast_list.test.tsx.snap | 2 +- .../toasts/global_toast_list.test.tsx | 4 +- .../toasts/global_toast_list.tsx | 18 +- src/core/public/notifications/toasts/index.ts | 10 +- .../notifications/toasts/toasts_api.test.ts | 4 +- .../notifications/toasts/toasts_api.tsx | 27 +- .../notifications/toasts/toasts_service.tsx | 3 +- .../overlays/banners/banners_service.tsx | 27 +- src/core/public/overlays/banners/index.ts | 7 +- src/core/public/overlays/index.ts | 2 +- src/core/public/public.api.md | 41 +-- src/core/public/types.ts | 37 +++ src/core/public/utils/index.ts | 1 + src/core/public/utils/mount.tsx | 44 +++ src/dev/jest/config.js | 1 + .../query_bar/components/query_bar_input.tsx | 3 +- .../components/query_bar_top_row.tsx | 4 +- .../public/legacy_compat/angular_config.tsx | 3 +- src/legacy/ui/public/vis/map/map_messages.js | 3 +- .../public/actions/replace_panel_flyout.tsx | 10 +- src/plugins/kibana_react/public/index.ts | 1 + .../create_notifications.test.tsx | 132 ++++++--- .../notifications/create_notifications.tsx | 5 +- .../table_list_view/table_list_view.tsx | 3 +- src/plugins/kibana_react/public/util/index.ts | 1 + .../kibana_react/public/util/react_mount.tsx | 40 +++ .../test_helpers/react_mount_serializer.ts | 30 ++ x-pack/dev-tools/jest/create_jest_config.js | 5 +- .../MachineLearningFlyout/index.tsx | 5 +- .../ServiceIntegrations/WatcherFlyout.tsx | 5 +- .../components/app/ServiceOverview/index.tsx | 3 +- .../plugins/apm/public/hooks/useFetcher.tsx | 3 +- .../infra/public/hooks/use_http_request.tsx | 3 +- .../components/cluster/listing/listing.js | 9 +- .../public/lib/ajax_error_handler.js | 9 +- .../components/reporting_panel_content.tsx | 7 +- .../public/app/hooks/use_delete_transform.tsx | 3 +- .../step_create/step_create_form.tsx | 9 +- .../step_details/step_details_form.tsx | 7 +- .../public/components/general_error.tsx | 3 +- .../public/components/job_failure.tsx | 5 +- .../public/components/job_success.tsx | 5 +- .../components/job_warning_formulas.tsx | 5 +- .../components/job_warning_max_size.tsx | 5 +- .../__snapshots__/stream_handler.test.ts.snap | 256 ++++++++++-------- .../public/session/session_timeout.test.tsx | 12 +- .../public/session/session_timeout.tsx | 3 +- 65 files changed, 597 insertions(+), 339 deletions(-) create mode 100644 docs/development/core/public/kibana-plugin-public.mountpoint.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaybannermount.md delete mode 100644 docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md create mode 100644 docs/development/core/public/kibana-plugin-public.toast.md create mode 100644 docs/development/core/public/kibana-plugin-public.unmountcallback.md create mode 100644 src/core/public/types.ts create mode 100644 src/core/public/utils/mount.tsx create mode 100644 src/plugins/kibana_react/public/util/react_mount.tsx create mode 100644 src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts diff --git a/docs/development/core/public/kibana-plugin-public.md b/docs/development/core/public/kibana-plugin-public.md index df0b963e2b6271..cec307032094ec 100644 --- a/docs/development/core/public/kibana-plugin-public.md +++ b/docs/development/core/public/kibana-plugin-public.md @@ -109,17 +109,18 @@ The plugin integrates with the core system via lifecycle events: `setup` | [HttpStart](./kibana-plugin-public.httpstart.md) | See [HttpServiceBase](./kibana-plugin-public.httpservicebase.md) | | [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. | | [IToasts](./kibana-plugin-public.itoasts.md) | Methods for adding and removing global toast messages. See [ToastsApi](./kibana-plugin-public.toastsapi.md). | -| [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md) | A function that will mount the banner inside the provided element. | -| [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md) | A function that will unmount the banner from the element. | +| [MountPoint](./kibana-plugin-public.mountpoint.md) | A function that should mount DOM content inside the provided container element and return a handler to unmount it. | | [PluginInitializer](./kibana-plugin-public.plugininitializer.md) | The plugin export at the root of a plugin's public directory should conform to this interface. | | [PluginOpaqueId](./kibana-plugin-public.pluginopaqueid.md) | | | [RecursiveReadonly](./kibana-plugin-public.recursivereadonly.md) | | | [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | Type definition for a Saved Object attribute value | | [SavedObjectAttributeSingle](./kibana-plugin-public.savedobjectattributesingle.md) | Don't use this type, it's simply a helper type for [SavedObjectAttribute](./kibana-plugin-public.savedobjectattribute.md) | | [SavedObjectsClientContract](./kibana-plugin-public.savedobjectsclientcontract.md) | SavedObjectsClientContract as implemented by the [SavedObjectsClient](./kibana-plugin-public.savedobjectsclient.md) | +| [Toast](./kibana-plugin-public.toast.md) | | | [ToastInput](./kibana-plugin-public.toastinput.md) | Inputs for [IToasts](./kibana-plugin-public.itoasts.md) APIs. | | [ToastInputFields](./kibana-plugin-public.toastinputfields.md) | Allowed fields for [ToastInput](./kibana-plugin-public.toastinput.md). | | [ToastsSetup](./kibana-plugin-public.toastssetup.md) | [IToasts](./kibana-plugin-public.itoasts.md) | | [ToastsStart](./kibana-plugin-public.toastsstart.md) | [IToasts](./kibana-plugin-public.itoasts.md) | | [UiSettingsClientContract](./kibana-plugin-public.uisettingsclientcontract.md) | Client-side client that provides access to the advanced settings stored in elasticsearch. The settings provide control over the behavior of the Kibana application. For example, a user can specify how to display numeric or date fields. Users can adjust the settings via Management UI. [UiSettingsClient](./kibana-plugin-public.uisettingsclient.md) | +| [UnmountCallback](./kibana-plugin-public.unmountcallback.md) | A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) | diff --git a/docs/development/core/public/kibana-plugin-public.mountpoint.md b/docs/development/core/public/kibana-plugin-public.mountpoint.md new file mode 100644 index 00000000000000..58f407904a5762 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.mountpoint.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [MountPoint](./kibana-plugin-public.mountpoint.md) + +## MountPoint type + +A function that should mount DOM content inside the provided container element and return a handler to unmount it. + +Signature: + +```typescript +export declare type MountPoint = (element: HTMLElement) => UnmountCallback; +``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannermount.md b/docs/development/core/public/kibana-plugin-public.overlaybannermount.md deleted file mode 100644 index 0fd0aca652cf0b..00000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaybannermount.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md) - -## OverlayBannerMount type - -A function that will mount the banner inside the provided element. - -Signature: - -```typescript -export declare type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; -``` diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md index 8c3e874804e082..8ce59d5d9ca788 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md +++ b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md @@ -9,14 +9,14 @@ Add a new banner Signature: ```typescript -add(mount: OverlayBannerMount, priority?: number): string; +add(mount: MountPoint, priority?: number): string; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| mount | OverlayBannerMount | | +| mount | MountPoint | | | priority | number | | Returns: diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md index 8f624c285b1800..a8f6915ea9bb7d 100644 --- a/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md +++ b/docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md @@ -9,7 +9,7 @@ Replace a banner in place Signature: ```typescript -replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; +replace(id: string | undefined, mount: MountPoint, priority?: number): string; ``` ## Parameters @@ -17,7 +17,7 @@ replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): s | Parameter | Type | Description | | --- | --- | --- | | id | string | undefined | | -| mount | OverlayBannerMount | | +| mount | MountPoint | | | priority | number | | Returns: diff --git a/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md b/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md deleted file mode 100644 index c9a7c2b8fee929..00000000000000 --- a/docs/development/core/public/kibana-plugin-public.overlaybannerunmount.md +++ /dev/null @@ -1,13 +0,0 @@ - - -[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md) - -## OverlayBannerUnmount type - -A function that will unmount the banner from the element. - -Signature: - -```typescript -export declare type OverlayBannerUnmount = () => void; -``` diff --git a/docs/development/core/public/kibana-plugin-public.toast.md b/docs/development/core/public/kibana-plugin-public.toast.md new file mode 100644 index 00000000000000..0cbbf29df073a2 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.toast.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [Toast](./kibana-plugin-public.toast.md) + +## Toast type + +Signature: + +```typescript +export declare type Toast = ToastInputFields & { + id: string; +}; +``` diff --git a/docs/development/core/public/kibana-plugin-public.toastinput.md b/docs/development/core/public/kibana-plugin-public.toastinput.md index 75f12b3d945616..9dd20b5899f3a1 100644 --- a/docs/development/core/public/kibana-plugin-public.toastinput.md +++ b/docs/development/core/public/kibana-plugin-public.toastinput.md @@ -9,5 +9,5 @@ Inputs for [IToasts](./kibana-plugin-public.itoasts.md) APIs. Signature: ```typescript -export declare type ToastInput = string | ToastInputFields | Promise; +export declare type ToastInput = string | ToastInputFields; ``` diff --git a/docs/development/core/public/kibana-plugin-public.toastinputfields.md b/docs/development/core/public/kibana-plugin-public.toastinputfields.md index ffcf9e5c6dea29..3a6bc3a5e45da4 100644 --- a/docs/development/core/public/kibana-plugin-public.toastinputfields.md +++ b/docs/development/core/public/kibana-plugin-public.toastinputfields.md @@ -9,7 +9,10 @@ Allowed fields for [ToastInput](./kibana-plugin-public.toastinput.md). Signature: ```typescript -export declare type ToastInputFields = Pick>; +export declare type ToastInputFields = Pick> & { + title?: string | MountPoint; + text?: string | MountPoint; +}; ``` ## Remarks diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.add.md b/docs/development/core/public/kibana-plugin-public.toastsapi.add.md index 8e9648031f0e28..6b651b310e9743 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.add.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.add.md @@ -22,5 +22,5 @@ add(toastOrTitle: ToastInput): Toast; `Toast` -a +a [Toast](./kibana-plugin-public.toast.md) diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.adddanger.md b/docs/development/core/public/kibana-plugin-public.toastsapi.adddanger.md index 28e596f0c09e3d..67ebad919ed2a0 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.adddanger.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.adddanger.md @@ -22,5 +22,5 @@ addDanger(toastOrTitle: ToastInput): Toast; `Toast` -a +a [Toast](./kibana-plugin-public.toast.md) diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.adderror.md b/docs/development/core/public/kibana-plugin-public.toastsapi.adderror.md index c8a48b3fa46c9c..39090fb8f1bbef 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.adderror.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.adderror.md @@ -23,5 +23,5 @@ addError(error: Error, options: ErrorToastOptions): Toast; `Toast` -a +a [Toast](./kibana-plugin-public.toast.md) diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.addsuccess.md b/docs/development/core/public/kibana-plugin-public.toastsapi.addsuccess.md index 0e01dc1364d07f..ce9a9a2fae6911 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.addsuccess.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.addsuccess.md @@ -22,5 +22,5 @@ addSuccess(toastOrTitle: ToastInput): Toast; `Toast` -a +a [Toast](./kibana-plugin-public.toast.md) diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.addwarning.md b/docs/development/core/public/kibana-plugin-public.toastsapi.addwarning.md index 0e236f2737b128..948181f8257632 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.addwarning.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.addwarning.md @@ -22,5 +22,5 @@ addWarning(toastOrTitle: ToastInput): Toast; `Toast` -a +a [Toast](./kibana-plugin-public.toast.md) diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.md b/docs/development/core/public/kibana-plugin-public.toastsapi.md index e47f6d5c8ac590..ae4a2de9fc75cb 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.md @@ -28,5 +28,5 @@ export declare class ToastsApi implements IToasts | [addSuccess(toastOrTitle)](./kibana-plugin-public.toastsapi.addsuccess.md) | | Adds a new toast pre-configured with the success color and check icon. | | [addWarning(toastOrTitle)](./kibana-plugin-public.toastsapi.addwarning.md) | | Adds a new toast pre-configured with the warning color and help icon. | | [get$()](./kibana-plugin-public.toastsapi.get_.md) | | Observable of the toast messages to show to the user. | -| [remove(toast)](./kibana-plugin-public.toastsapi.remove.md) | | Removes a toast from the current array of toasts if present. | +| [remove(toastOrId)](./kibana-plugin-public.toastsapi.remove.md) | | Removes a toast from the current array of toasts if present. | diff --git a/docs/development/core/public/kibana-plugin-public.toastsapi.remove.md b/docs/development/core/public/kibana-plugin-public.toastsapi.remove.md index 5025c83a666c8a..9f270411752077 100644 --- a/docs/development/core/public/kibana-plugin-public.toastsapi.remove.md +++ b/docs/development/core/public/kibana-plugin-public.toastsapi.remove.md @@ -9,14 +9,14 @@ Removes a toast from the current array of toasts if present. Signature: ```typescript -remove(toast: Toast): void; +remove(toastOrId: Toast | string): void; ``` ## Parameters | Parameter | Type | Description | | --- | --- | --- | -| toast | Toast | a returned by | +| toastOrId | Toast | string | a [Toast](./kibana-plugin-public.toast.md) returned by [ToastsApi.add()](./kibana-plugin-public.toastsapi.add.md) or its id | Returns: diff --git a/docs/development/core/public/kibana-plugin-public.unmountcallback.md b/docs/development/core/public/kibana-plugin-public.unmountcallback.md new file mode 100644 index 00000000000000..f44562120c9ee5 --- /dev/null +++ b/docs/development/core/public/kibana-plugin-public.unmountcallback.md @@ -0,0 +1,13 @@ + + +[Home](./index.md) > [kibana-plugin-public](./kibana-plugin-public.md) > [UnmountCallback](./kibana-plugin-public.unmountcallback.md) + +## UnmountCallback type + +A function that will unmount the element previously mounted by the associated [MountPoint](./kibana-plugin-public.mountpoint.md) + +Signature: + +```typescript +export declare type UnmountCallback = () => void; +``` diff --git a/src/core/public/index.ts b/src/core/public/index.ts index e0c3425a859f39..78254ff96f35a1 100644 --- a/src/core/public/index.ts +++ b/src/core/public/index.ts @@ -118,13 +118,7 @@ export { InterceptedHttpResponse, } from './http'; -export { - OverlayStart, - OverlayBannerMount, - OverlayBannerUnmount, - OverlayBannersStart, - OverlayRef, -} from './overlays'; +export { OverlayStart, OverlayBannersStart, OverlayRef } from './overlays'; export { Toast, @@ -137,6 +131,8 @@ export { ErrorToastOptions, } from './notifications'; +export { MountPoint, UnmountCallback } from './types'; + /** * Core services exposed to the `Plugin` setup lifecycle * diff --git a/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap b/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap index 29b289592b2ef5..ca09d4a14bd7a6 100644 --- a/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap +++ b/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders matching snapshot 1`] = ` diff --git a/src/core/public/notifications/toasts/global_toast_list.test.tsx b/src/core/public/notifications/toasts/global_toast_list.test.tsx index c6c127acbb0336..61d73ac2331886 100644 --- a/src/core/public/notifications/toasts/global_toast_list.test.tsx +++ b/src/core/public/notifications/toasts/global_toast_list.test.tsx @@ -57,9 +57,9 @@ it('subscribes to toasts$ on mount and unsubscribes on unmount', () => { it('passes latest value from toasts$ to ', () => { const el = shallow( render({ - toasts$: Rx.from([[], [1], [1, 2]]) as any, + toasts$: Rx.from([[], [{ id: 1 }], [{ id: 1 }, { id: 2 }]]) as any, }) ); - expect(el.find(EuiGlobalToastList).prop('toasts')).toEqual([1, 2]); + expect(el.find(EuiGlobalToastList).prop('toasts')).toEqual([{ id: 1 }, { id: 2 }]); }); diff --git a/src/core/public/notifications/toasts/global_toast_list.tsx b/src/core/public/notifications/toasts/global_toast_list.tsx index 57dc899016264f..f96a0a6f362bf8 100644 --- a/src/core/public/notifications/toasts/global_toast_list.tsx +++ b/src/core/public/notifications/toasts/global_toast_list.tsx @@ -17,20 +17,28 @@ * under the License. */ -import { EuiGlobalToastList, EuiGlobalToastListToast as Toast } from '@elastic/eui'; - +import { EuiGlobalToastList, EuiGlobalToastListToast as EuiToast } from '@elastic/eui'; import React from 'react'; import * as Rx from 'rxjs'; +import { MountWrapper } from '../../utils'; +import { Toast } from './toasts_api'; + interface Props { toasts$: Rx.Observable; - dismissToast: (t: Toast) => void; + dismissToast: (toastId: string) => void; } interface State { toasts: Toast[]; } +const convertToEui = (toast: Toast): EuiToast => ({ + ...toast, + title: typeof toast.title === 'function' ? : toast.title, + text: typeof toast.text === 'function' ? : toast.text, +}); + export class GlobalToastList extends React.Component { public state: State = { toasts: [], @@ -54,8 +62,8 @@ export class GlobalToastList extends React.Component { return ( this.props.dismissToast(id)} /** * This prop is overriden by the individual toasts that are added. * Use `Infinity` here so that it's obvious a timeout hasn't been diff --git a/src/core/public/notifications/toasts/index.ts b/src/core/public/notifications/toasts/index.ts index 83c2d52f3d77a6..6e9de116833646 100644 --- a/src/core/public/notifications/toasts/index.ts +++ b/src/core/public/notifications/toasts/index.ts @@ -18,5 +18,11 @@ */ export { ToastsService, ToastsSetup, ToastsStart } from './toasts_service'; -export { ErrorToastOptions, ToastsApi, ToastInput, IToasts, ToastInputFields } from './toasts_api'; -export { EuiGlobalToastListToast as Toast } from '@elastic/eui'; +export { + ErrorToastOptions, + ToastsApi, + ToastInput, + IToasts, + ToastInputFields, + Toast, +} from './toasts_api'; diff --git a/src/core/public/notifications/toasts/toasts_api.test.ts b/src/core/public/notifications/toasts/toasts_api.test.ts index 38e6d2a2229900..f99a28617aa5c8 100644 --- a/src/core/public/notifications/toasts/toasts_api.test.ts +++ b/src/core/public/notifications/toasts/toasts_api.test.ts @@ -91,7 +91,7 @@ describe('#get$()', () => { toasts.add('foo'); onToasts.mockClear(); - toasts.remove({ id: 'bar' }); + toasts.remove('bar'); expect(onToasts).not.toHaveBeenCalled(); }); }); @@ -136,7 +136,7 @@ describe('#remove()', () => { it('ignores unknown toast', async () => { const toasts = new ToastsApi(toastDeps()); toasts.add('Test'); - toasts.remove({ id: 'foo' }); + toasts.remove('foo'); const currentToasts = await getCurrentToasts(toasts); expect(currentToasts).toHaveLength(1); diff --git a/src/core/public/notifications/toasts/toasts_api.tsx b/src/core/public/notifications/toasts/toasts_api.tsx index 24514cb11548b5..b49bafda5b26e6 100644 --- a/src/core/public/notifications/toasts/toasts_api.tsx +++ b/src/core/public/notifications/toasts/toasts_api.tsx @@ -17,11 +17,13 @@ * under the License. */ -import { EuiGlobalToastListToast as Toast } from '@elastic/eui'; +import { EuiGlobalToastListToast as EuiToast } from '@elastic/eui'; import React from 'react'; import * as Rx from 'rxjs'; import { ErrorToast } from './error_toast'; +import { MountPoint } from '../../types'; +import { mountReactNode } from '../../utils'; import { UiSettingsClientContract } from '../../ui_settings'; import { OverlayStart } from '../../overlays'; @@ -33,13 +35,20 @@ import { OverlayStart } from '../../overlays'; * * @public */ -export type ToastInputFields = Pick>; +export type ToastInputFields = Pick> & { + title?: string | MountPoint; + text?: string | MountPoint; +}; + +export type Toast = ToastInputFields & { + id: string; +}; /** * Inputs for {@link IToasts} APIs. * @public */ -export type ToastInput = string | ToastInputFields | Promise; +export type ToastInput = string | ToastInputFields; /** * Options available for {@link IToasts} APIs. @@ -59,13 +68,12 @@ export interface ErrorToastOptions { toastMessage?: string; } -const normalizeToast = (toastOrTitle: ToastInput) => { +const normalizeToast = (toastOrTitle: ToastInput): ToastInputFields => { if (typeof toastOrTitle === 'string') { return { title: toastOrTitle, }; } - return toastOrTitle; }; @@ -123,11 +131,12 @@ export class ToastsApi implements IToasts { /** * Removes a toast from the current array of toasts if present. - * @param toast - a {@link Toast} returned by {@link ToastApi.add} + * @param toastOrId - a {@link Toast} returned by {@link ToastsApi.add} or its id */ - public remove(toast: Toast) { + public remove(toastOrId: Toast | string) { + const toRemove = typeof toastOrId === 'string' ? toastOrId : toastOrId.id; const list = this.toasts$.getValue(); - const listWithoutToast = list.filter(t => t !== toast); + const listWithoutToast = list.filter(t => t.id !== toRemove); if (listWithoutToast.length !== list.length) { this.toasts$.next(listWithoutToast); } @@ -191,7 +200,7 @@ export class ToastsApi implements IToasts { iconType: 'alert', title: options.title, toastLifeTimeMs: this.uiSettings.get('notifications:lifetime:error'), - text: ( + text: mountReactNode( this.api!.remove(toast)} + dismissToast={(toastId: string) => this.api!.remove(toastId)} toasts$={this.api!.get$()} /> , diff --git a/src/core/public/overlays/banners/banners_service.tsx b/src/core/public/overlays/banners/banners_service.tsx index 799ca43c7fa93b..31d49b5952e879 100644 --- a/src/core/public/overlays/banners/banners_service.tsx +++ b/src/core/public/overlays/banners/banners_service.tsx @@ -25,33 +25,20 @@ import { PriorityMap } from './priority_map'; import { BannersList } from './banners_list'; import { UiSettingsClientContract } from '../../ui_settings'; import { I18nStart } from '../../i18n'; +import { MountPoint } from '../../types'; import { UserBannerService } from './user_banner_service'; -/** - * A function that will unmount the banner from the element. - * @public - */ -export type OverlayBannerUnmount = () => void; - -/** - * A function that will mount the banner inside the provided element. - * @param element an element to render into - * @returns a {@link OverlayBannerUnmount} - * @public - */ -export type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; - /** @public */ export interface OverlayBannersStart { /** * Add a new banner * - * @param mount {@link OverlayBannerMount} + * @param mount {@link MountPoint} * @param priority optional priority order to display this banner. Higher priority values are shown first. * @returns a unique identifier for the given banner to be used with {@link OverlayBannersStart.remove} and * {@link OverlayBannersStart.replace} */ - add(mount: OverlayBannerMount, priority?: number): string; + add(mount: MountPoint, priority?: number): string; /** * Remove a banner @@ -65,12 +52,12 @@ export interface OverlayBannersStart { * Replace a banner in place * * @param id the unique identifier for the banner returned by {@link OverlayBannersStart.add} - * @param mount {@link OverlayBannerMount} + * @param mount {@link MountPoint} * @param priority optional priority order to display this banner. Higher priority values are shown first. * @returns a new identifier for the given banner to be used with {@link OverlayBannersStart.remove} and * {@link OverlayBannersStart.replace} */ - replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; + replace(id: string | undefined, mount: MountPoint, priority?: number): string; /** @internal */ get$(): Observable; @@ -80,7 +67,7 @@ export interface OverlayBannersStart { /** @internal */ export interface OverlayBanner { readonly id: string; - readonly mount: OverlayBannerMount; + readonly mount: MountPoint; readonly priority: number; } @@ -116,7 +103,7 @@ export class OverlayBannersService { return true; }, - replace(id: string | undefined, mount: OverlayBannerMount, priority = 0) { + replace(id: string | undefined, mount: MountPoint, priority = 0) { if (!id || !banners$.value.has(id)) { return this.add(mount, priority); } diff --git a/src/core/public/overlays/banners/index.ts b/src/core/public/overlays/banners/index.ts index 9e908bd6280038..a68dfa7ebadac0 100644 --- a/src/core/public/overlays/banners/index.ts +++ b/src/core/public/overlays/banners/index.ts @@ -17,9 +17,4 @@ * under the License. */ -export { - OverlayBannerMount, - OverlayBannerUnmount, - OverlayBannersStart, - OverlayBannersService, -} from './banners_service'; +export { OverlayBannersStart, OverlayBannersService } from './banners_service'; diff --git a/src/core/public/overlays/index.ts b/src/core/public/overlays/index.ts index c49548abee0df3..ff03e5dffb2ca8 100644 --- a/src/core/public/overlays/index.ts +++ b/src/core/public/overlays/index.ts @@ -17,5 +17,5 @@ * under the License. */ -export { OverlayBannerMount, OverlayBannerUnmount, OverlayBannersStart } from './banners'; +export { OverlayBannersStart } from './banners'; export { OverlayService, OverlayStart, OverlayRef } from './overlay_service'; diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md index d3ce86d76d7ccb..1e97d8e066d091 100644 --- a/src/core/public/public.api.md +++ b/src/core/public/public.api.md @@ -5,12 +5,12 @@ ```ts import { Breadcrumb } from '@elastic/eui'; +import { EuiGlobalToastListToast } from '@elastic/eui'; import { IconType } from '@elastic/eui'; import { Observable } from 'rxjs'; import React from 'react'; import * as Rx from 'rxjs'; import { ShallowPromise } from '@kbn/utility-types'; -import { EuiGlobalToastListToast as Toast } from '@elastic/eui'; import { UiSettingsParams as UiSettingsParams_2 } from 'src/core/server/types'; import { UserProvidedValues as UserProvidedValues_2 } from 'src/core/server/types'; @@ -619,6 +619,9 @@ export interface LegacyNavLink { url: string; } +// @public +export type MountPoint = (element: HTMLElement) => UnmountCallback; + // @public (undocumented) export interface NotificationsSetup { // (undocumented) @@ -631,12 +634,9 @@ export interface NotificationsStart { toasts: ToastsStart; } -// @public -export type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount; - // @public (undocumented) export interface OverlayBannersStart { - add(mount: OverlayBannerMount, priority?: number): string; + add(mount: MountPoint, priority?: number): string; // Warning: (ae-forgotten-export) The symbol "OverlayBanner" needs to be exported by the entry point index.d.ts // // @internal (undocumented) @@ -644,12 +644,9 @@ export interface OverlayBannersStart { // (undocumented) getComponent(): JSX.Element; remove(id: string): boolean; - replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string; + replace(id: string | undefined, mount: MountPoint, priority?: number): string; } -// @public -export type OverlayBannerUnmount = () => void; - // @public export interface OverlayRef { close(): Promise; @@ -917,35 +914,36 @@ export class SimpleSavedObject { _version?: SavedObject['version']; } -export { Toast } +// Warning: (ae-missing-release-tag) "Toast" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// +// @public (undocumented) +export type Toast = ToastInputFields & { + id: string; +}; // @public -export type ToastInput = string | ToastInputFields | Promise; +export type ToastInput = string | ToastInputFields; // @public -export type ToastInputFields = Pick>; +export type ToastInputFields = Pick> & { + title?: string | MountPoint; + text?: string | MountPoint; +}; // @public export class ToastsApi implements IToasts { constructor(deps: { uiSettings: UiSettingsClientContract; }); - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported add(toastOrTitle: ToastInput): Toast; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported addDanger(toastOrTitle: ToastInput): Toast; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported addError(error: Error, options: ErrorToastOptions): Toast; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported addSuccess(toastOrTitle: ToastInput): Toast; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported addWarning(toastOrTitle: ToastInput): Toast; get$(): Rx.Observable; // @internal (undocumented) registerOverlays(overlays: OverlayStart): void; - // Warning: (ae-unresolved-link) The @link reference could not be resolved: Reexported declarations are not supported - // Warning: (ae-unresolved-link) The @link reference could not be resolved: The package "kibana" does not have an export "ToastApi" - remove(toast: Toast): void; + remove(toastOrId: Toast | string): void; } // @public (undocumented) @@ -991,5 +989,8 @@ export interface UiSettingsState { [key: string]: UiSettingsParams_2 & UserProvidedValues_2; } +// @public +export type UnmountCallback = () => void; + ``` diff --git a/src/core/public/types.ts b/src/core/public/types.ts new file mode 100644 index 00000000000000..4b12d5bc6da51f --- /dev/null +++ b/src/core/public/types.ts @@ -0,0 +1,37 @@ +/* + * 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. + */ + +/** + * A function that should mount DOM content inside the provided container element + * and return a handler to unmount it. + * + * @param element the container element to render into + * @returns a {@link UnmountCallback} that unmount the element on call. + * + * @public + */ +export type MountPoint = (element: HTMLElement) => UnmountCallback; + +/** + * A function that will unmount the element previously mounted by + * the associated {@link MountPoint} + * + * @public + */ +export type UnmountCallback = () => void; diff --git a/src/core/public/utils/index.ts b/src/core/public/utils/index.ts index a432094b150480..cf826eb276252d 100644 --- a/src/core/public/utils/index.ts +++ b/src/core/public/utils/index.ts @@ -19,3 +19,4 @@ export { shareWeakReplay } from './share_weak_replay'; export { Sha256 } from './crypto'; +export { MountWrapper, mountReactNode } from './mount'; diff --git a/src/core/public/utils/mount.tsx b/src/core/public/utils/mount.tsx new file mode 100644 index 00000000000000..dbd7d5da435a6a --- /dev/null +++ b/src/core/public/utils/mount.tsx @@ -0,0 +1,44 @@ +/* + * 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, { useEffect, useRef } from 'react'; +import { render, unmountComponentAtNode } from 'react-dom'; +import { I18nProvider } from '@kbn/i18n/react'; +import { MountPoint } from '../types'; + +/** + * MountWrapper is a react component to mount a {@link MountPoint} inside a react tree. + */ +export const MountWrapper: React.FunctionComponent<{ mount: MountPoint }> = ({ mount }) => { + const element = useRef(null); + useEffect(() => mount(element.current!), [mount]); + return
; +}; + +/** + * Mount converter for react components. + * + * @param component to get a mount for + */ +export const mountReactNode = (component: React.ReactNode): MountPoint => ( + element: HTMLElement +) => { + render({component}, element); + return () => unmountComponentAtNode(element); +}; diff --git a/src/dev/jest/config.js b/src/dev/jest/config.js index 0c785a84bb4692..f5c20da89dcfaf 100644 --- a/src/dev/jest/config.js +++ b/src/dev/jest/config.js @@ -103,6 +103,7 @@ export default { 'packages/kbn-pm/dist/index.js' ], snapshotSerializers: [ + '/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts', '/node_modules/enzyme-to-json/serializer', ], reporters: [ diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx index 5576427b1592a6..77c9169d03aa4e 100644 --- a/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx +++ b/src/legacy/core_plugins/data/public/query/query_bar/components/query_bar_input.tsx @@ -42,6 +42,7 @@ import { import { withKibana, KibanaReactContextValue, + toMountPoint, } from '../../../../../../../plugins/kibana_react/public'; import { IndexPattern, StaticIndexPattern } from '../../../index_patterns'; import { Query, getQueryLog } from '../index'; @@ -361,7 +362,7 @@ export class QueryBarInputUI extends Component { id: 'data.query.queryBar.KQLNestedQuerySyntaxInfoTitle', defaultMessage: 'KQL nested query syntax', }), - text: ( + text: toMountPoint(

( title: i18n.translate('common.ui.chrome.bigUrlWarningNotificationTitle', { defaultMessage: 'The URL is big and Kibana might stop working', }), - text: ( + text: toMountPoint( , + text: toMountPoint(), 'data-test-subj': 'maxZoomWarning', }); diff --git a/src/plugins/dashboard_embeddable_container/public/actions/replace_panel_flyout.tsx b/src/plugins/dashboard_embeddable_container/public/actions/replace_panel_flyout.tsx index 02e5f45fae3bd6..36efd0bcba676a 100644 --- a/src/plugins/dashboard_embeddable_container/public/actions/replace_panel_flyout.tsx +++ b/src/plugins/dashboard_embeddable_container/public/actions/replace_panel_flyout.tsx @@ -19,15 +19,9 @@ import { i18n } from '@kbn/i18n'; import React from 'react'; -import { - EuiFlyout, - EuiFlyoutBody, - EuiFlyoutHeader, - EuiTitle, - EuiGlobalToastListToast as Toast, -} from '@elastic/eui'; +import { EuiFlyout, EuiFlyoutBody, EuiFlyoutHeader, EuiTitle } from '@elastic/eui'; import { DashboardPanelState } from '../embeddable'; -import { NotificationsStart } from '../../../../core/public'; +import { NotificationsStart, Toast } from '../../../../core/public'; import { IContainer, IEmbeddable, diff --git a/src/plugins/kibana_react/public/index.ts b/src/plugins/kibana_react/public/index.ts index cf025ec2e88d46..2d82f646c827b9 100644 --- a/src/plugins/kibana_react/public/index.ts +++ b/src/plugins/kibana_react/public/index.ts @@ -24,3 +24,4 @@ export * from './overlays'; export * from './ui_settings'; export * from './field_icon'; export * from './table_list_view'; +export { toMountPoint } from './util'; diff --git a/src/plugins/kibana_react/public/notifications/create_notifications.test.tsx b/src/plugins/kibana_react/public/notifications/create_notifications.test.tsx index 35c503d590b2cd..4f64a2b95f512f 100644 --- a/src/plugins/kibana_react/public/notifications/create_notifications.test.tsx +++ b/src/plugins/kibana_react/public/notifications/create_notifications.test.tsx @@ -52,9 +52,20 @@ test('can display string element as title', () => { wrapper.toasts.show({ title: 'foo' }); expect(notifications.toasts.add).toHaveBeenCalledTimes(1); - expect(notifications.toasts.add.mock.calls[0][0]).toMatchObject({ - title: 'foo', - }); + expect(notifications.toasts.add.mock.calls[0][0]).toMatchInlineSnapshot(` + Object { + "color": undefined, + "iconType": undefined, + "onClose": undefined, + "text": MountPoint { + "reactNode": , + }, + "title": MountPoint { + "reactNode": "foo", + }, + "toastLifeTimeMs": undefined, + } + `); }); test('can display React element as title', () => { @@ -67,10 +78,12 @@ test('can display React element as title', () => { expect(notifications.toasts.add).toHaveBeenCalledTimes(1); expect((notifications.toasts.add.mock.calls[0][0] as any).title).toMatchInlineSnapshot(` -

- bar -
- `); + MountPoint { + "reactNode":
+ bar +
, + } + `); }); test('can display React element as toast body', () => { @@ -81,12 +94,14 @@ test('can display React element as toast body', () => { expect(notifications.toasts.add).toHaveBeenCalledTimes(1); expect((notifications.toasts.add.mock.calls[0][0] as any).text).toMatchInlineSnapshot(` - -
- baz -
- - `); + MountPoint { + "reactNode": +
+ baz +
+ , + } + `); }); test('can set toast properties', () => { @@ -102,17 +117,21 @@ test('can set toast properties', () => { }); expect(notifications.toasts.add.mock.calls[0][0]).toMatchInlineSnapshot(` - Object { - "color": "danger", - "iconType": "foo", - "onClose": undefined, - "text": - 1 - , - "title": "2", - "toastLifeTimeMs": 3, - } - `); + Object { + "color": "danger", + "iconType": "foo", + "onClose": undefined, + "text": MountPoint { + "reactNode": + 1 + , + }, + "title": MountPoint { + "reactNode": "2", + }, + "toastLifeTimeMs": 3, + } + `); }); test('can display success, warning and danger toasts', () => { @@ -124,21 +143,48 @@ test('can display success, warning and danger toasts', () => { wrapper.toasts.danger({ title: '3' }); expect(notifications.toasts.add).toHaveBeenCalledTimes(3); - expect(notifications.toasts.add.mock.calls[0][0]).toMatchObject({ - title: '1', - color: 'success', - iconType: 'check', - }); - expect(notifications.toasts.add.mock.calls[1][0]).toMatchObject({ - title: '2', - color: 'warning', - iconType: 'help', - }); - expect(notifications.toasts.add.mock.calls[2][0]).toMatchObject({ - title: '3', - color: 'danger', - iconType: 'alert', - }); + expect(notifications.toasts.add.mock.calls[0][0]).toMatchInlineSnapshot(` + Object { + "color": "success", + "iconType": "check", + "onClose": undefined, + "text": MountPoint { + "reactNode": , + }, + "title": MountPoint { + "reactNode": "1", + }, + "toastLifeTimeMs": undefined, + } + `); + expect(notifications.toasts.add.mock.calls[1][0]).toMatchInlineSnapshot(` + Object { + "color": "warning", + "iconType": "help", + "onClose": undefined, + "text": MountPoint { + "reactNode": , + }, + "title": MountPoint { + "reactNode": "2", + }, + "toastLifeTimeMs": undefined, + } + `); + expect(notifications.toasts.add.mock.calls[2][0]).toMatchInlineSnapshot(` + Object { + "color": "danger", + "iconType": "alert", + "onClose": undefined, + "text": MountPoint { + "reactNode": , + }, + "title": MountPoint { + "reactNode": "3", + }, + "toastLifeTimeMs": undefined, + } + `); }); test('if body is not set, renders it empty', () => { @@ -147,7 +193,9 @@ test('if body is not set, renders it empty', () => { wrapper.toasts.success({ title: '1' }); - expect((notifications.toasts.add.mock.calls[0][0] as any).text).toMatchInlineSnapshot( - `` - ); + expect((notifications.toasts.add.mock.calls[0][0] as any).text).toMatchInlineSnapshot(` + MountPoint { + "reactNode": , + } + `); }); diff --git a/src/plugins/kibana_react/public/notifications/create_notifications.tsx b/src/plugins/kibana_react/public/notifications/create_notifications.tsx index 28c1d5391d1601..774f74863ee6f0 100644 --- a/src/plugins/kibana_react/public/notifications/create_notifications.tsx +++ b/src/plugins/kibana_react/public/notifications/create_notifications.tsx @@ -20,6 +20,7 @@ import * as React from 'react'; import { KibanaServices } from '../context/types'; import { KibanaReactNotifications } from './types'; +import { toMountPoint } from '../util'; export const createNotifications = (services: KibanaServices): KibanaReactNotifications => { const show: KibanaReactNotifications['toasts']['show'] = ({ @@ -34,8 +35,8 @@ export const createNotifications = (services: KibanaServices): KibanaReactNotifi throw new TypeError('Could not show notification as notifications service is not available.'); } services.notifications!.toasts.add({ - title, - text: <>{body || null}, + title: toMountPoint(title), + text: toMountPoint(<>{body || null}), color, iconType, toastLifeTimeMs, diff --git a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx index 7d95c00e764190..dde8efa7e11066 100644 --- a/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx +++ b/src/plugins/kibana_react/public/table_list_view/table_list_view.tsx @@ -38,6 +38,7 @@ import { EuiCallOut, } from '@elastic/eui'; import { ToastsStart, UiSettingsClientContract } from 'kibana/public'; +import { toMountPoint } from '../util'; export const EMPTY_FILTER = ''; @@ -166,7 +167,7 @@ class TableListView extends React.Component itemsById[id])); } catch (error) { this.props.toastNotifications.addDanger({ - title: ( + title: toMountPoint( { + const mount = (element: HTMLElement) => { + ReactDOM.render({node}, element); + return () => ReactDOM.unmountComponentAtNode(element); + }; + // only used for tests and snapshots serialization + if (process.env.NODE_ENV !== 'production') { + mount.__reactMount__ = node; + } + return mount; +}; diff --git a/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts b/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts new file mode 100644 index 00000000000000..45ad4cb407175f --- /dev/null +++ b/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts @@ -0,0 +1,30 @@ +/* + * 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. + */ + +export function test(value: any) { + return value && value.__reactMount__; +} + +export function print(value: any, serialize: any) { + // there is no proper way to correctly indent multiline values + // so the trick here is to use the Object representation and rewriting the root object name + return serialize({ + reactNode: value.__reactMount__, + }).replace('Object', 'MountPoint'); +} diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js index 22220d9b54aa70..b4d6d82f39ab70 100644 --- a/x-pack/dev-tools/jest/create_jest_config.js +++ b/x-pack/dev-tools/jest/create_jest_config.js @@ -47,7 +47,10 @@ export function createJestConfig({ kibanaDirectory, xPackKibanaDirectory }) { // since ESM modules are not natively supported in Jest yet (https://github.com/facebook/jest/issues/4842) '[/\\\\]node_modules(?![\\/\\\\]@elastic[\\/\\\\]eui)(?![\\/\\\\]monaco-editor)[/\\\\].+\\.js$', ], - snapshotSerializers: [`${kibanaDirectory}/node_modules/enzyme-to-json/serializer`], + snapshotSerializers: [ + `${kibanaDirectory}/node_modules/enzyme-to-json/serializer`, + `${kibanaDirectory}/src/plugins/kibana_react/public/util/test_helpers/react_mount_serializer.ts` + ], reporters: [ 'default', [ diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx index 53f1893a168aca..69f0cf61af2427 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/index.tsx @@ -6,6 +6,7 @@ import { i18n } from '@kbn/i18n'; import React, { Component } from 'react'; +import { toMountPoint } from '../../../../../../../../../../src/plugins/kibana_react/public'; import { startMLJob } from '../../../../../services/rest/ml'; import { IUrlParams } from '../../../../../context/UrlParamsContext/types'; import { MLJobLink } from '../../../../shared/Links/MachineLearningLinks/MLJobLink'; @@ -71,7 +72,7 @@ export class MachineLearningFlyout extends Component { defaultMessage: 'Job creation failed' } ), - text: ( + text: toMountPoint(

{i18n.translate( 'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreationFailedNotificationText', @@ -105,7 +106,7 @@ export class MachineLearningFlyout extends Component { defaultMessage: 'Job successfully created' } ), - text: ( + text: toMountPoint(

{i18n.translate( 'xpack.apm.serviceDetails.enableAnomalyDetectionPanel.jobCreatedNotificationText', diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx index 291208b2d90322..d52c869b958722 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx @@ -30,6 +30,7 @@ import { padLeft, range } from 'lodash'; import moment from 'moment-timezone'; import React, { Component } from 'react'; import styled from 'styled-components'; +import { toMountPoint } from '../../../../../../../../../src/plugins/kibana_react/public'; import { KibanaCoreContext } from '../../../../../../observability/public'; import { IUrlParams } from '../../../../context/UrlParamsContext/types'; import { KibanaLink } from '../../../shared/Links/KibanaLink'; @@ -219,7 +220,7 @@ export class WatcherFlyout extends Component< defaultMessage: 'Watch creation failed' } ), - text: ( + text: toMountPoint(

{i18n.translate( 'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreationFailedNotificationText', @@ -243,7 +244,7 @@ export class WatcherFlyout extends Component< defaultMessage: 'New watch created!' } ), - text: ( + text: toMountPoint(

{i18n.translate( 'xpack.apm.serviceDetails.enableErrorReportsPanel.watchCreatedNotificationText', diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx index b696af040223b7..0702e092a714f5 100644 --- a/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx +++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceOverview/index.tsx @@ -9,6 +9,7 @@ import { EuiLink } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { useEffect, useMemo } from 'react'; import url from 'url'; +import { toMountPoint } from '../../../../../../../../src/plugins/kibana_react/public'; import { useFetcher } from '../../../hooks/useFetcher'; import { NoServicesMessage } from './NoServicesMessage'; import { ServiceList } from './ServiceList'; @@ -55,7 +56,7 @@ export function ServiceOverview() { defaultMessage: 'Legacy data was detected within the selected time range' }), - text: ( + text: toMountPoint(

{i18n.translate('xpack.apm.serviceOverview.toastText', { defaultMessage: diff --git a/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx b/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx index ba74b0175ff71a..bc6382841be3f1 100644 --- a/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx +++ b/x-pack/legacy/plugins/apm/public/hooks/useFetcher.tsx @@ -8,6 +8,7 @@ import React, { useContext, useEffect, useState, useMemo } from 'react'; import { idx } from '@kbn/elastic-idx'; import { i18n } from '@kbn/i18n'; import { IHttpFetchError } from 'src/core/public'; +import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; import { LoadingIndicatorContext } from '../context/LoadingIndicatorContext'; import { useComponentId } from './useComponentId'; import { useKibanaCore } from '../../../observability/public'; @@ -92,7 +93,7 @@ export function useFetcher( title: i18n.translate('xpack.apm.fetcher.error.title', { defaultMessage: `Error while fetching resource` }), - text: ( + text: toMountPoint(

{i18n.translate('xpack.apm.fetcher.error.status', { diff --git a/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx b/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx index 9ed72e656c45a4..a54780267f1c1d 100644 --- a/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx +++ b/x-pack/legacy/plugins/infra/public/hooks/use_http_request.tsx @@ -10,6 +10,7 @@ import { toastNotifications } from 'ui/notify'; import { i18n } from '@kbn/i18n'; import { idx } from '@kbn/elastic-idx/target'; import { KFetchError } from 'ui/kfetch/kfetch_error'; +import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; import { useTrackedPromise } from '../utils/use_tracked_promise'; export function useHTTPRequest( pathname: string, @@ -36,7 +37,7 @@ export function useHTTPRequest( title: i18n.translate('xpack.infra.useHTTPRequest.error.title', { defaultMessage: `Error while fetching resource`, }), - text: ( + text: toMountPoint(
{i18n.translate('xpack.infra.useHTTPRequest.error.status', { diff --git a/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js b/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js index 7124faa3bf052c..6f96c11d1de606 100644 --- a/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js +++ b/x-pack/legacy/plugins/monitoring/public/components/cluster/listing/listing.js @@ -24,6 +24,7 @@ import { EuiMonitoringTable } from 'plugins/monitoring/components/table'; import { AlertsIndicator } from 'plugins/monitoring/components/cluster/listing/alerts_indicator'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; +import { toMountPoint } from '../../../../../../../../src/plugins/kibana_react/public'; import { STANDALONE_CLUSTER_CLUSTER_UUID } from '../../../../common/constants'; const IsClusterSupported = ({ isSupported, children }) => { @@ -271,14 +272,14 @@ const licenseWarning = (scope, { title, text }) => { const handleClickIncompatibleLicense = (scope, clusterName) => { licenseWarning(scope, { - title: ( + title: toMountPoint( ), - text: ( + text: toMountPoint(

{ const licensingPath = `${chrome.getBasePath()}/app/kibana#/management/elasticsearch/license_management/home`; licenseWarning(scope, { - title: ( + title: toMountPoint( ), - text: ( + text: toMountPoint(

), - text: ( + text: toMountPoint(

{ formatMonitoringError(err) } @@ -71,12 +72,12 @@ export function ajaxErrorHandlersProvider($injector) { }); } else { toastNotifications.addDanger({ - title: ( + title: toMountPoint( ), - text: formatMonitoringError(err) + text: toMountPoint(formatMonitoringError(err)) }); } diff --git a/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx b/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx index 1013319b1e9cda..41c83543750b37 100644 --- a/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx +++ b/x-pack/legacy/plugins/reporting/public/components/reporting_panel_content.tsx @@ -10,6 +10,7 @@ import React, { Component, ReactElement } from 'react'; import { KFetchError } from 'ui/kfetch/kfetch_error'; import { toastNotifications } from 'ui/notify'; import url from 'url'; +import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; import { reportingClient } from '../lib/reporting_client'; interface Props { @@ -209,7 +210,7 @@ class ReportingPanelContentUi extends Component { }, { objectType: this.props.objectType } ), - text: ( + text: toMountPoint( { }, { objectType: this.props.objectType } ), - text: ( + text: toMountPoint( { id: 'xpack.reporting.panelContent.notification.reportingErrorTitle', defaultMessage: 'Reporting error', }), - text: kfetchError.message || defaultMessage, + text: toMountPoint(kfetchError.message || defaultMessage), 'data-test-subj': 'queueReportError', }); }); diff --git a/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx b/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx index 6a7804dcc6ac8f..e23151900447c2 100644 --- a/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx +++ b/x-pack/legacy/plugins/transform/public/app/hooks/use_delete_transform.tsx @@ -8,6 +8,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; import { toastNotifications } from 'ui/notify'; +import { toMountPoint } from '../../../../../../../src/plugins/kibana_react/public'; import { TransformListRow, refreshTransformList$, REFRESH_TRANSFORM_LIST_STATE } from '../common'; import { ToastNotificationText } from '../components'; @@ -53,7 +54,7 @@ export const useDeleteTransforms = () => { title: i18n.translate('xpack.transform.transformList.deleteTransformGenericErrorMessage', { defaultMessage: 'An error occurred calling the API endpoint to delete transforms.', }), - text: , + text: toMountPoint(), }); } }; diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx index 6e9505898ced41..993ba1b0bd0f5d 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_create/step_create_form.tsx @@ -29,6 +29,7 @@ import { EuiText, } from '@elastic/eui'; +import { toMountPoint } from '../../../../../../../../../../src/plugins/kibana_react/public'; import { ToastNotificationText } from '../../../../components'; import { useApi } from '../../../../hooks/use_api'; import { isKibanaContextInitialized, KibanaContext } from '../../../../lib/kibana'; @@ -114,7 +115,7 @@ export const StepCreateForm: SFC = React.memo( defaultMessage: 'An error occurred creating the transform {transformId}:', values: { transformId }, }), - text: , + text: toMountPoint(), }); return false; } @@ -144,7 +145,7 @@ export const StepCreateForm: SFC = React.memo( defaultMessage: 'An error occurred starting the transform {transformId}:', values: { transformId }, }), - text: , + text: toMountPoint(), }); } } @@ -203,7 +204,7 @@ export const StepCreateForm: SFC = React.memo( 'An error occurred creating the Kibana index pattern {indexPatternName}:', values: { indexPatternName }, }), - text: , + text: toMountPoint(), }); return false; } @@ -234,7 +235,7 @@ export const StepCreateForm: SFC = React.memo( title: i18n.translate('xpack.transform.stepCreateForm.progressErrorMessage', { defaultMessage: 'An error occurred getting the progress percentage:', }), - text: , + text: toMountPoint(), }); clearInterval(interval); } diff --git a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx index 962a8905056b60..be05ddc2838ea8 100644 --- a/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx +++ b/x-pack/legacy/plugins/transform/public/app/sections/create_transform/components/step_details/step_details_form.tsx @@ -12,6 +12,7 @@ import { toastNotifications } from 'ui/notify'; import { EuiLink, EuiSwitch, EuiFieldText, EuiForm, EuiFormRow, EuiSelect } from '@elastic/eui'; +import { toMountPoint } from '../../../../../../../../../../src/plugins/kibana_react/public'; import { isKibanaContextInitialized, KibanaContext } from '../../../../lib/kibana'; import { isValidIndexName } from '../../../../../../common/utils/es_utils'; @@ -91,7 +92,7 @@ export const StepDetailsForm: SFC = React.memo(({ overrides = {}, onChang title: i18n.translate('xpack.transform.stepDetailsForm.errorGettingTransformList', { defaultMessage: 'An error occurred getting the existing transform IDs:', }), - text: , + text: toMountPoint(), }); } @@ -102,7 +103,7 @@ export const StepDetailsForm: SFC = React.memo(({ overrides = {}, onChang title: i18n.translate('xpack.transform.stepDetailsForm.errorGettingIndexNames', { defaultMessage: 'An error occurred getting the existing index names:', }), - text: , + text: toMountPoint(), }); } @@ -116,7 +117,7 @@ export const StepDetailsForm: SFC = React.memo(({ overrides = {}, onChang defaultMessage: 'An error occurred getting the existing index pattern titles:', } ), - text: , + text: toMountPoint(), }); } } diff --git a/x-pack/plugins/reporting/public/components/general_error.tsx b/x-pack/plugins/reporting/public/components/general_error.tsx index dc65800ecf1120..feb0ea0062ace8 100644 --- a/x-pack/plugins/reporting/public/components/general_error.tsx +++ b/x-pack/plugins/reporting/public/components/general_error.tsx @@ -8,9 +8,10 @@ import React, { Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCallOut, EuiSpacer } from '@elastic/eui'; import { ToastInput } from '../../../../../src/core/public'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; export const getGeneralErrorToast = (errorText: string, err: Error): ToastInput => ({ - text: ( + text: toMountPoint( {err.toString()} diff --git a/x-pack/plugins/reporting/public/components/job_failure.tsx b/x-pack/plugins/reporting/public/components/job_failure.tsx index f2af7febae9648..7544cbf9064580 100644 --- a/x-pack/plugins/reporting/public/components/job_failure.tsx +++ b/x-pack/plugins/reporting/public/components/job_failure.tsx @@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { EuiCallOut, EuiSpacer } from '@elastic/eui'; import { ToastInput } from '../../../../../src/core/public'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; import { JobSummary, ManagementLinkFn } from '../../index.d'; export const getFailureToast = ( @@ -17,14 +18,14 @@ export const getFailureToast = ( getManagmenetLink: ManagementLinkFn ): ToastInput => { return { - title: ( + title: toMountPoint( ), - text: ( + text: toMountPoint( string, getDownloadLink: (jobId: JobId) => string ): ToastInput => ({ - title: ( + title: toMountPoint( ), color: 'success', - text: ( + text: toMountPoint(

diff --git a/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx b/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx index 65b8fc634a49a1..7981237c9b7810 100644 --- a/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx +++ b/x-pack/plugins/reporting/public/components/job_warning_formulas.tsx @@ -7,6 +7,7 @@ import React, { Fragment } from 'react'; import { FormattedMessage } from '@kbn/i18n/react'; import { ToastInput } from '../../../../../src/core/public'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; import { JobId, JobSummary } from '../../index.d'; import { ReportLink } from './report_link'; import { DownloadButton } from './download_button'; @@ -16,14 +17,14 @@ export const getWarningFormulasToast = ( getReportLink: () => string, getDownloadLink: (jobId: JobId) => string ): ToastInput => ({ - title: ( + title: toMountPoint( ), - text: ( + text: toMountPoint(

string, getDownloadLink: (jobId: JobId) => string ): ToastInput => ({ - title: ( + title: toMountPoint( ), - text: ( + text: toMountPoint(

-

- -

-

- +

+ +

+

+ +

+ -

- , + }, + "title": MountPoint { + "reactNode": - , - "title": , + />, + }, }, ] `; @@ -74,44 +78,48 @@ Array [ Object { "data-test-subj": "completeReportFailure", "iconType": undefined, - "text": - - this is the completed report data - - -

- - - , + "text": MountPoint { + "reactNode": + + this is the completed report data + + +

+ + + , + } } + /> +

+ , + }, + "title": MountPoint { + "reactNode": -

- , - "title": , + />, + }, }, ] `; @@ -120,42 +128,46 @@ exports[`stream handler showNotifications show max length warning 1`] = ` Array [ Object { "data-test-subj": "completeReportMaxSizeWarning", - "text": -

- -

-

- +

+ +

+

+ +

+ -

- , + }, + "title": MountPoint { + "reactNode": - , - "title": , + />, + }, }, ] `; @@ -165,34 +177,38 @@ Array [ Object { "color": "success", "data-test-subj": "completeReportSuccess", - "text": -

- +

+ +

+ -

- , + }, + "title": MountPoint { + "reactNode": - , - "title": , + />, + }, }, ] `; diff --git a/x-pack/plugins/security/public/session/session_timeout.test.tsx b/x-pack/plugins/security/public/session/session_timeout.test.tsx index 776247dda94e61..80a22c5fb0b2ae 100644 --- a/x-pack/plugins/security/public/session/session_timeout.test.tsx +++ b/x-pack/plugins/security/public/session/session_timeout.test.tsx @@ -26,9 +26,11 @@ const expectWarningToast = ( Array [ Object { "color": "warning", - "text": , + "text": MountPoint { + "reactNode": , + }, "title": "Warning", "toastLifeTimeMs": ${toastLifeTimeMS}, }, @@ -103,8 +105,8 @@ describe('warning toast', () => { expect(http.get).not.toHaveBeenCalled(); const toastInput = notifications.toasts.add.mock.calls[0][0]; expect(toastInput).toHaveProperty('text'); - const reactComponent = (toastInput as any).text; - const wrapper = mountWithIntl(reactComponent); + const mountPoint = (toastInput as any).text; + const wrapper = mountWithIntl(mountPoint.__reactMount__); wrapper.find('EuiButton[data-test-subj="refreshSessionButton"]').simulate('click'); expect(http.get).toHaveBeenCalled(); }); diff --git a/x-pack/plugins/security/public/session/session_timeout.tsx b/x-pack/plugins/security/public/session/session_timeout.tsx index db4926e7f04eac..32302effd6e464 100644 --- a/x-pack/plugins/security/public/session/session_timeout.tsx +++ b/x-pack/plugins/security/public/session/session_timeout.tsx @@ -7,6 +7,7 @@ import { NotificationsSetup, Toast, HttpSetup } from 'src/core/public'; import React from 'react'; import { i18n } from '@kbn/i18n'; +import { toMountPoint } from '../../../../../src/plugins/kibana_react/public'; import { SessionTimeoutWarning } from './session_timeout_warning'; import { ISessionExpired } from './session_expired'; @@ -65,7 +66,7 @@ export class SessionTimeout { private showWarning = () => { this.warningToast = this.notifications.toasts.add({ color: 'warning', - text: , + text: toMountPoint(), title: i18n.translate('xpack.security.components.sessionTimeoutWarning.title', { defaultMessage: 'Warning', }),