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

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 <code>plugin</code> export at the root of a plugin's <code>public</code> 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) |
 

docs/development/core/public/kibana-plugin-public.mountpoint.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [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.
+
+<b>Signature:</b>
+
+```typescript
+export declare type MountPoint = (element: HTMLElement) => UnmountCallback;
+```

docs/development/core/public/kibana-plugin-public.overlaybannersstart.add.md

@@ -9,14 +9,14 @@ Add a new banner
 <b>Signature:</b>
 
 ```typescript
-add(mount: OverlayBannerMount, priority?: number): string;
+add(mount: MountPoint, priority?: number): string;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  mount | <code>OverlayBannerMount</code> |  |
+|  mount | <code>MountPoint</code> |  |
 |  priority | <code>number</code> |  |
 
 <b>Returns:</b>

docs/development/core/public/kibana-plugin-public.overlaybannersstart.replace.md

@@ -9,15 +9,15 @@ Replace a banner in place
 <b>Signature:</b>
 
 ```typescript
-replace(id: string | undefined, mount: OverlayBannerMount, priority?: number): string;
+replace(id: string | undefined, mount: MountPoint, priority?: number): string;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
 |  id | <code>string &#124; undefined</code> |  |
-|  mount | <code>OverlayBannerMount</code> |  |
+|  mount | <code>MountPoint</code> |  |
 |  priority | <code>number</code> |  |
 
 <b>Returns:</b>

docs/development/core/public/kibana-plugin-public.toast.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [Toast](./kibana-plugin-public.toast.md)
+
+## Toast type
+
+<b>Signature:</b>
+
+```typescript
+export declare type Toast = ToastInputFields & {
+    id: string;
+};
+```

docs/development/core/public/kibana-plugin-public.toastinput.md

@@ -9,5 +9,5 @@ Inputs for [IToasts](./kibana-plugin-public.itoasts.md) APIs.
 <b>Signature:</b>
 
 ```typescript
-export declare type ToastInput = string | ToastInputFields | Promise<ToastInputFields>;
+export declare type ToastInput = string | ToastInputFields;
 ```

docs/development/core/public/kibana-plugin-public.toastinputfields.md

@@ -9,7 +9,10 @@ Allowed fields for [ToastInput](./kibana-plugin-public.toastinput.md)<!-- -->.
 <b>Signature:</b>
 
 ```typescript
-export declare type ToastInputFields = Pick<Toast, Exclude<keyof Toast, 'id'>>;
+export declare type ToastInputFields = Pick<EuiToast, Exclude<keyof EuiToast, 'id' | 'text' | 'title'>> & {
+    title?: string | MountPoint;
+    text?: string | MountPoint;
+};
 ```
 
 ## Remarks

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)
 

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)
 

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)
 

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)
 

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)
 

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. |
 

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.
 <b>Signature:</b>
 
 ```typescript
-remove(toast: Toast): void;
+remove(toastOrId: Toast | string): void;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  toast | <code>Toast</code> | a  returned by  |
+|  toastOrId | <code>Toast &#124; string</code> | a [Toast](./kibana-plugin-public.toast.md) returned by [ToastsApi.add()](./kibana-plugin-public.toastsapi.add.md) or its id |
 
 <b>Returns:</b>
 

docs/development/core/public/kibana-plugin-public.unmountcallback.md

@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [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)
+
+<b>Signature:</b>
+
+```typescript
+export declare type UnmountCallback = () => void;
+```

src/core/public/index.ts

@@ -117,13 +117,7 @@ export {
   InterceptedHttpResponse,
 } from './http';
 
-export {
-  OverlayStart,
-  OverlayBannerMount,
-  OverlayBannerUnmount,
-  OverlayBannersStart,
-  OverlayRef,
-} from './overlays';
+export { OverlayStart, OverlayBannersStart, OverlayRef } from './overlays';
 
 export {
   Toast,
@@ -136,6 +130,8 @@ export {
   ErrorToastOptions,
 } from './notifications';
 
+export { MountPoint, UnmountCallback } from './types';
+
 /**
  * Core services exposed to the `Plugin` setup lifecycle
  *

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 <EuiGlobalToastList />', () => {
   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 }]);
 });

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<Toast[]>;
-  dismissToast: (t: Toast) => void;
+  dismissToast: (toastId: string) => void;
 }
 
 interface State {
   toasts: Toast[];
 }
 
+const convertToEui = (toast: Toast): EuiToast => ({
+  ...toast,
+  title: typeof toast.title === 'function' ? <MountWrapper mount={toast.title} /> : toast.title,
+  text: typeof toast.text === 'function' ? <MountWrapper mount={toast.text} /> : toast.text,
+});
+
 export class GlobalToastList extends React.Component<Props, State> {
   public state: State = {
     toasts: [],
@@ -54,8 +62,8 @@ export class GlobalToastList extends React.Component<Props, State> {
     return (
       <EuiGlobalToastList
         data-test-subj="globalToastList"
-        toasts={this.state.toasts}
-        dismissToast={this.props.dismissToast}
+        toasts={this.state.toasts.map(convertToEui)}
+        dismissToast={({ id }) => 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

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';

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);