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

@@ -0,0 +1,21 @@
+<!-- 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 |
+|  [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/core_system.ts

@@ -216,6 +216,7 @@ export class CoreSystem {
       const plugins = await this.plugins.start(core);
       const rendering = this.rendering.start({
         chrome,
+        overlays,
         targetDomElement: coreUiTargetDomElement,
       });
       await this.legacyPlatform.start({

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

@@ -0,0 +1,64 @@
+/*
+ * 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, useState } from 'react';
+import { Observable } from 'rxjs';
+
+import { OverlayBanner } from './banners_service';
+
+interface Props {
+  banners$: Observable<OverlayBanner[]>;
+}
+
+/**
+ * BannersList is a list of "banners". A banner something that is displayed at the top of Kibana that may or may not
+ * disappear.
+ *
+ * Whether or not a banner can be closed is completely up to the author of the banner. Some banners make sense to be
+ * static, such as banners meant to indicate the sensitivity (e.g., classification) of the information being
+ * represented.
+ */
+export const BannersList: React.FunctionComponent<Props> = ({ banners$ }) => {
+  const [banners, setBanners] = useState<OverlayBanner[]>([]);
+  useEffect(() => {
+    const subscription = banners$.subscribe(setBanners);
+    return () => subscription.unsubscribe();
+  }, [banners$]); // Only un/re-subscribe if the Observable changes
+
+  if (banners.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="kbnGlobalBannerList">
+      {banners.map((banner, idx) => (
+        <BannerItem key={idx} banner={banner} />
+      ))}
+    </div>
+  );
+};
+
+const BannerItem: React.FunctionComponent<{ banner: OverlayBanner }> = ({ banner }) => {
+  const element = useRef(null);
+  useEffect(() => banner.mount(element.current!));
+
+  return (
+    <div data-test-priority={banner.priority} className="kbnGlobalBannerList__item" ref={element} />
+  );
+};