Move ui/notify banners to New Platform

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

@@ -57,6 +57,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [LegacyNavLink](./kibana-plugin-public.legacynavlink.md) |  |
 |  [NotificationsSetup](./kibana-plugin-public.notificationssetup.md) |  |
 |  [NotificationsStart](./kibana-plugin-public.notificationsstart.md) |  |
+|  [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) |  |
 |  [OverlayRef](./kibana-plugin-public.overlayref.md) |  |
 |  [OverlayStart](./kibana-plugin-public.overlaystart.md) |  |
 |  [Plugin](./kibana-plugin-public.plugin.md) | The interface that should be returned by a <code>PluginInitializer</code>. |
@@ -88,6 +89,8 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
 |  [HttpStart](./kibana-plugin-public.httpstart.md) |  |
 |  [IContextHandler](./kibana-plugin-public.icontexthandler.md) | A function registered by a plugin to perform some action. |
 |  [IContextProvider](./kibana-plugin-public.icontextprovider.md) | A function that returns a context value for a specific key of given context type. |
+|  [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. |
 |  [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) |  |

docs/development/core/public/kibana-plugin-public.overlaybannermount.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; [OverlayBannerMount](./kibana-plugin-public.overlaybannermount.md)
+
+## OverlayBannerMount type
+
+A function that will mount the banner inside the provided element.
+
+<b>Signature:</b>
+
+```typescript
+export declare type OverlayBannerMount = (element: HTMLElement) => OverlayBannerUnmount;
+```

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

@@ -0,0 +1,27 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) &gt; [add](./kibana-plugin-public.overlaybannersstart.add.md)
+
+## OverlayBannersStart.add() method
+
+Add a new banner
+
+<b>Signature:</b>
+
+```typescript
+add(mount: OverlayBannerMount, priority?: number): symbol;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  mount | <code>OverlayBannerMount</code> |  |
+|  priority | <code>number</code> |  |
+
+<b>Returns:</b>
+
+`symbol`
+
+a unique symbol for the given banner to be used with [OverlayBannersStart.remove()](./kibana-plugin-public.overlaybannersstart.remove.md) and [OverlayBannersStart.replace()](./kibana-plugin-public.overlaybannersstart.replace.md)
+

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

@@ -0,0 +1,15 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) &gt; [getComponent](./kibana-plugin-public.overlaybannersstart.getcomponent.md)
+
+## OverlayBannersStart.getComponent() method
+
+<b>Signature:</b>
+
+```typescript
+getComponent(): JSX.Element;
+```
+<b>Returns:</b>
+
+`JSX.Element`
+

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

@@ -0,0 +1,22 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md)
+
+## OverlayBannersStart interface
+
+
+<b>Signature:</b>
+
+```typescript
+export interface OverlayBannersStart 
+```
+
+## Methods
+
+|  Method | Description |
+|  --- | --- |
+|  [add(mount, priority)](./kibana-plugin-public.overlaybannersstart.add.md) | Add a new banner |
+|  [getComponent()](./kibana-plugin-public.overlaybannersstart.getcomponent.md) |  |
+|  [remove(id)](./kibana-plugin-public.overlaybannersstart.remove.md) | Remove a banner |
+|  [replace(id, mount, priority)](./kibana-plugin-public.overlaybannersstart.replace.md) | Replace a banner in place |
+

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

@@ -0,0 +1,26 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) &gt; [remove](./kibana-plugin-public.overlaybannersstart.remove.md)
+
+## OverlayBannersStart.remove() method
+
+Remove a banner
+
+<b>Signature:</b>
+
+```typescript
+remove(id: symbol): boolean;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  id | <code>symbol</code> |  |
+
+<b>Returns:</b>
+
+`boolean`
+
+if the banner was found or not
+

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

@@ -0,0 +1,28 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-public](./kibana-plugin-public.md) &gt; [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) &gt; [replace](./kibana-plugin-public.overlaybannersstart.replace.md)
+
+## OverlayBannersStart.replace() method
+
+Replace a banner in place
+
+<b>Signature:</b>
+
+```typescript
+replace(id: symbol, mount: OverlayBannerMount, priority?: number): symbol;
+```
+
+## Parameters
+
+|  Parameter | Type | Description |
+|  --- | --- | --- |
+|  id | <code>symbol</code> |  |
+|  mount | <code>OverlayBannerMount</code> |  |
+|  priority | <code>number</code> |  |
+
+<b>Returns:</b>
+
+`symbol`
+
+a new symbol for the given banner to be used with [OverlayBannersStart.remove()](./kibana-plugin-public.overlaybannersstart.remove.md) and [OverlayBannersStart.replace()](./kibana-plugin-public.overlaybannersstart.replace.md)
+

docs/development/core/public/kibana-plugin-public.overlaybannerunmount.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; [OverlayBannerUnmount](./kibana-plugin-public.overlaybannerunmount.md)
+
+## OverlayBannerUnmount type
+
+A function that will unmount the banner from the element.
+
+<b>Signature:</b>
+
+```typescript
+export declare type OverlayBannerUnmount = () => void;
+```

docs/development/core/public/kibana-plugin-public.overlaystart.banners.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; [OverlayStart](./kibana-plugin-public.overlaystart.md) &gt; [banners](./kibana-plugin-public.overlaystart.banners.md)
+
+## OverlayStart.banners property
+
+[OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md)
+
+<b>Signature:</b>
+
+```typescript
+banners: OverlayBannersStart;
+```

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

@@ -15,6 +15,7 @@ export interface OverlayStart
 
 |  Property | Type | Description |
 |  --- | --- | --- |
+|  [banners](./kibana-plugin-public.overlaystart.banners.md) | <code>OverlayBannersStart</code> | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) |
 |  [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | <code>(flyoutChildren: React.ReactNode, flyoutProps?: {</code><br/><code>        closeButtonAriaLabel?: string;</code><br/><code>        'data-test-subj'?: string;</code><br/><code>    }) =&gt; OverlayRef</code> |  |
 |  [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | <code>(modalChildren: React.ReactNode, modalProps?: {</code><br/><code>        className?: string;</code><br/><code>        closeButtonAriaLabel?: string;</code><br/><code>        'data-test-subj'?: string;</code><br/><code>    }) =&gt; OverlayRef</code> |  |
 

src/core/public/index.scss

@@ -8,3 +8,4 @@
 @import '@elastic/eui/src/global_styling/mixins/index';
 
 @import './chrome/index';
+@import './overlays/index';

src/core/public/index.ts

@@ -61,7 +61,7 @@ import {
   ToastInput,
   ToastsApi,
 } from './notifications';
-import { OverlayRef, OverlayStart } from './overlays';
+import { OverlayStart } from './overlays';
 import { Plugin, PluginInitializer, PluginInitializerContext, PluginOpaqueId } from './plugins';
 import { UiSettingsClient, UiSettingsState, UiSettingsClientContract } from './ui_settings';
 import { ApplicationSetup, Capabilities, ApplicationStart } from './application';
@@ -104,6 +104,14 @@ export {
   HttpBody,
 } from './http';
 
+export {
+  OverlayStart,
+  OverlayBannerMount,
+  OverlayBannerUnmount,
+  OverlayBannersStart,
+  OverlayRef,
+} from './overlays';
+
 /**
  * Core services exposed to the `Plugin` setup lifecycle
  *
@@ -198,8 +206,6 @@ export {
   LegacyNavLink,
   NotificationsSetup,
   NotificationsStart,
-  OverlayRef,
-  OverlayStart,
   Plugin,
   PluginInitializer,
   PluginInitializerContext,

src/core/public/overlays/banners/_index.scss

@@ -0,0 +1 @@
+@import './banners_list';

src/core/public/overlays/banners/banners_list.test.tsx

@@ -0,0 +1,105 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mount } from 'enzyme';
+
+import { BannersList } from './banners_list';
+import { BehaviorSubject } from 'rxjs';
+import { OverlayBanner } from './banners_service';
+
+describe('BannersList', () => {
+  test('renders null if no banners', () => {
+    expect(mount(<BannersList banners$={new BehaviorSubject([])} />).html()).toEqual(null);
+  });
+
+  test('renders a list of banners', () => {
+    const banners$ = new BehaviorSubject<OverlayBanner[]>([
+      {
+        id: Symbol(),
+        mount: (el: HTMLElement) => {
+          el.innerHTML = '<h1>Hello!</h1>';
+          return () => (el.innerHTML = '');
+        },
+        priority: 0,
+      },
+    ]);
+
+    expect(mount(<BannersList banners$={banners$} />).html()).toMatchInlineSnapshot(
+      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" class=\\"kbnGlobalBannerList__item\\"><h1>Hello!</h1></div></div>"`
+    );
+  });
+
+  test('updates banners', () => {
+    const unmount = jest.fn();
+    const banners$ = new BehaviorSubject<OverlayBanner[]>([
+      {
+        id: Symbol(),
+        mount: (el: HTMLElement) => {
+          el.innerHTML = '<h1>Hello!</h1>';
+          return unmount;
+        },
+        priority: 0,
+      },
+    ]);
+
+    const component = mount(<BannersList banners$={banners$} />);
+
+    act(() => {
+      banners$.next([
+        {
+          id: Symbol(),
+          mount: (el: HTMLElement) => {
+            el.innerHTML = '<h1>First Banner!</h1>';
+            return () => (el.innerHTML = '');
+          },
+          priority: 0,
+        },
+        {
+          id: Symbol(),
+          mount: (el: HTMLElement) => {
+            el.innerHTML = '<h1>Second banner!</h1>';
+            return () => (el.innerHTML = '');
+          },
+          priority: 0,
+        },
+      ]);
+    });
+
+    // Two new banners should be rendered
+    expect(component.html()).toMatchInlineSnapshot(
+      `"<div class=\\"kbnGlobalBannerList\\"><div data-test-priority=\\"0\\" class=\\"kbnGlobalBannerList__item\\"><h1>First Banner!</h1></div><div data-test-priority=\\"0\\" class=\\"kbnGlobalBannerList__item\\"><h1>Second banner!</h1></div></div>"`
+    );
+    // Original banner should be unmounted
+    expect(unmount).toHaveBeenCalled();
+  });
+
+  test('unsubscribe on unmount', () => {
+    const banners$ = new BehaviorSubject([]);
+    const subscribe = jest.spyOn(banners$, 'subscribe');
+    const component = mount(<BannersList banners$={banners$} />);
+    // Grab the returned subscription and spy its `unsubscribe` method
+    const subscription = subscribe.mock.results[0].value;
+    const unsubscribe = jest.spyOn(subscription, 'unsubscribe');
+
+    component.unmount();
+    expect(unsubscribe).toHaveBeenCalled();
+  });
+});