Remove react references from core Notifications apis

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 will mount the banner inside the provided element.
+
+<b>Signature:</b>
+
+```typescript
+export declare type MountPoint = (element: HTMLElement) => UnmountCallback;
+```

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 it's 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

@@ -136,6 +136,8 @@ export {
   ErrorToastOptions,
 } from './notifications';
 
+export { MountPoint, UnmountCallback } from './utils';
+
 /**
  * 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,38 @@
  * 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 { isString, omit } from 'lodash';
+
+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 => {
+  const wrap = (value: Toast['title'] | Toast['text']) =>
+    isString(value) || value === undefined ? value : <MountWrapper mount={value} />;
+  const euiToast: EuiToast = {
+    ...omit(toast, ['title', 'text']),
+  };
+  if (toast.title !== undefined) {
+    euiToast.title = wrap(toast.title);
+  }
+  if (toast.text !== undefined) {
+    euiToast.text = wrap(toast.text);
+  }
+  return euiToast;
+};
+
 export class GlobalToastList extends React.Component<Props, State> {
   public state: State = {
     toasts: [],
@@ -54,8 +72,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={toast => this.props.dismissToast(toast.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);

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 { isString } from 'lodash';
 
 import { ErrorToast } from './error_toast';
+import { MountPoint, mountReact } from '../../utils';
 import { UiSettingsClientContract } from '../../ui_settings';
 import { OverlayStart } from '../../overlays';
 
@@ -33,13 +35,20 @@ import { OverlayStart } from '../../overlays';
  *
  * @public
  */
-export type ToastInputFields = Pick<Toast, Exclude<keyof Toast, 'id'>>;
+export type ToastInputFields = Pick<EuiToast, Exclude<keyof EuiToast, 'id' | 'text' | 'title'>> & {
+  title?: string | MountPoint;
+  text?: string | MountPoint;
+};
+
+export type Toast = ToastInputFields & {
+  id: string;
+};
 
 /**
  * Inputs for {@link IToasts} APIs.
  * @public
  */
-export type ToastInput = string | ToastInputFields | Promise<ToastInputFields>;
+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 it's id
    */
-  public remove(toast: Toast) {
+  public remove(toastOrId: Toast | string) {
+    const toRemove = isString(toastOrId) ? 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: mountReact(
         <ErrorToast
           openModal={this.openModal.bind(this)}
           error={error}

src/core/public/notifications/toasts/toasts_service.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 
-import { EuiGlobalToastListToast as Toast } from '@elastic/eui';
 import { I18nStart } from '../../i18n';
 import { UiSettingsClientContract } from '../../ui_settings';
 import { GlobalToastList } from './global_toast_list';
@@ -65,7 +64,7 @@ export class ToastsService {
     render(
       <i18n.Context>
         <GlobalToastList
-          dismissToast={(toast: Toast) => this.api!.remove(toast)}
+          dismissToast={(toastId: string) => this.api!.remove(toastId)}
           toasts$={this.api!.get$()}
         />
       </i18n.Context>,