();
+ private unrenderBanner?: () => void;
+
+ public componentDidMount() {
+ if (!this.ref.current) {
+ throw new Error(' mounted without ref');
+ }
+
+ this.unrenderBanner = this.props.banner.render(this.ref.current) || undefined;
+ }
+
+ public componentDidUpdate(prevProps: Props) {
+ if (this.props.banner.render === prevProps.banner.render) {
+ return;
+ }
+
+ if (!this.ref.current) {
+ throw new Error(' updated without ref');
+ }
+
+ if (this.unrenderBanner) {
+ this.unrenderBanner();
+ }
+
+ this.unrenderBanner = this.props.banner.render(this.ref.current) || undefined;
+ }
+
+ public componentWillUnmount() {
+ if (this.unrenderBanner) {
+ this.unrenderBanner();
+ }
+ }
+
+ public render() {
+ return ;
+ }
+}
diff --git a/src/core/public/notifications/banners/components/global_banner_list.css b/src/core/public/notifications/banners/components/global_banner_list.css
new file mode 100644
index 0000000000000..f186b7be608bd
--- /dev/null
+++ b/src/core/public/notifications/banners/components/global_banner_list.css
@@ -0,0 +1,3 @@
+.globalBanner__list {
+ padding: 16px;
+}
diff --git a/src/core/public/notifications/banners/components/global_banner_list.test.tsx b/src/core/public/notifications/banners/components/global_banner_list.test.tsx
new file mode 100644
index 0000000000000..f5257717669b2
--- /dev/null
+++ b/src/core/public/notifications/banners/components/global_banner_list.test.tsx
@@ -0,0 +1,117 @@
+/*
+ * 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 { shallow } from 'enzyme';
+import React from 'react';
+import { GlobalBannerList } from './global_banner_list';
+
+it('renders nothing without banners', () => {
+ const component = shallow();
+ expect(component).toMatchInlineSnapshot(`
+
+`);
+});
+
+it('renders banners in descending priority order', () => {
+ expect(
+ shallow(
+
+ )
+ ).toMatchInlineSnapshot(`
+
+
+
+
+`);
+
+ expect(
+ shallow(
+
+ )
+ ).toMatchInlineSnapshot(`
+
+
+
+
+`);
+});
diff --git a/src/core/public/notifications/banners/components/global_banner_list.tsx b/src/core/public/notifications/banners/components/global_banner_list.tsx
new file mode 100644
index 0000000000000..169965b283c4a
--- /dev/null
+++ b/src/core/public/notifications/banners/components/global_banner_list.tsx
@@ -0,0 +1,41 @@
+/*
+ * 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 { Banners } from '../banners_service';
+import { GlobalBannerItem } from './global_banner_item';
+import './global_banner_list.css';
+
+interface Props {
+ banners: Banners;
+}
+
+const sortByPriority = (banners: Banners) =>
+ banners.slice().sort((a, b) => b.priority - a.priority);
+
+export function GlobalBannerList(props: Props) {
+ return (
+
+ {sortByPriority(props.banners).map(banner => (
+
+ ))}
+
+ );
+}
diff --git a/src/ui/public/notify/banners/global_banner_list.test.js b/src/core/public/notifications/banners/containers/global_banners_container.test.tsx
similarity index 51%
rename from src/ui/public/notify/banners/global_banner_list.test.js
rename to src/core/public/notifications/banners/containers/global_banners_container.test.tsx
index 5a008f33c57d9..29d03665770dc 100644
--- a/src/ui/public/notify/banners/global_banner_list.test.js
+++ b/src/core/public/notifications/banners/containers/global_banners_container.test.tsx
@@ -17,49 +17,26 @@
* under the License.
*/
+import { shallow } from 'enzyme';
import React from 'react';
-import { render } from 'enzyme';
-import { GlobalBannerList } from './global_banner_list';
+import * as Rx from 'rxjs';
+import { GlobalBannersContainer } from './global_banners_container';
-describe('GlobalBannerList', () => {
-
- test('is rendered', () => {
- const component = render(
-
- );
-
- expect(component)
- .toMatchSnapshot();
-
- });
-
- describe('props', () => {
-
- describe('banners', () => {
-
- test('is rendered', () => {
- const banners = [{
- id: 'a',
- component: 'a component',
- priority: 1,
- }, {
- 'data-test-subj': 'b',
- id: 'b',
- component: 'b good',
- }];
-
- const component = render(
-
- );
-
- expect(component)
- .toMatchSnapshot();
- });
-
- });
-
- });
+it('renders nothing without banners', () => {
+ const component = shallow();
+ expect(component).toMatchInlineSnapshot(`""`);
+});
+it('passes banners to the GlobalBannerList', () => {
+ expect(shallow())
+ .toMatchInlineSnapshot(`
+
+`);
});
diff --git a/src/core/public/notifications/banners/containers/global_banners_container.tsx b/src/core/public/notifications/banners/containers/global_banners_container.tsx
new file mode 100644
index 0000000000000..61e5f73738db6
--- /dev/null
+++ b/src/core/public/notifications/banners/containers/global_banners_container.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 * as Rx from 'rxjs';
+
+import { Banners } from '../banners_service';
+import { GlobalBannerList } from '../components/global_banner_list';
+
+interface Props {
+ banners$: Rx.Observable;
+}
+
+interface State {
+ error?: Error;
+ banners?: Banners;
+}
+
+export class GlobalBannersContainer extends React.Component {
+ public state: State = {};
+ private subscription?: Rx.Subscription;
+
+ public componentDidMount() {
+ this.subscription = this.props.banners$.subscribe({
+ next: banners => {
+ this.setState({ banners });
+ },
+ error: error => {
+ this.setState({ error });
+ },
+ });
+ }
+
+ public componentWillUnmount() {
+ if (this.subscription) {
+ this.subscription.unsubscribe();
+ }
+ }
+
+ public render() {
+ const { error, banners } = this.state;
+
+ if (error) {
+ throw error;
+ }
+
+ if (!banners || !banners.length) {
+ return null;
+ }
+
+ return ;
+ }
+}
diff --git a/src/ui/public/notify/banners/index.js b/src/core/public/notifications/banners/index.ts
similarity index 89%
rename from src/ui/public/notify/banners/index.js
rename to src/core/public/notifications/banners/index.ts
index b4d2a11f61003..81f4e0e751821 100644
--- a/src/ui/public/notify/banners/index.js
+++ b/src/core/public/notifications/banners/index.ts
@@ -17,5 +17,4 @@
* under the License.
*/
-export { GlobalBannerList } from './global_banner_list';
-export { banners } from './banners';
\ No newline at end of file
+export { Banners, Banner, BannersService, BannersStartContract } from './banners_service';
diff --git a/src/core/public/notifications/notifications_service.test.ts b/src/core/public/notifications/notifications_service.test.ts
new file mode 100644
index 0000000000000..8ef33e2700042
--- /dev/null
+++ b/src/core/public/notifications/notifications_service.test.ts
@@ -0,0 +1,79 @@
+/*
+ * 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.
+ */
+
+jest.mock('./toasts/toasts_service');
+jest.mock('./banners/banners_service');
+
+import { NotificationsService } from './notifications_service';
+
+const { ToastsService } = require.requireMock('./toasts/toasts_service');
+const { BannersService } = require.requireMock('./banners/banners_service');
+
+beforeEach(() => {
+ jest.clearAllMocks();
+});
+
+it('creates toasts and banner services, passing unique containers to each which are mounted in start and unmounted after stop()', () => {
+ expect.assertions(16);
+ const targetDomElement = document.createElement('div');
+ const notifications = new NotificationsService({
+ targetDomElement,
+ });
+
+ expect(ToastsService).toHaveBeenCalledTimes(1);
+ expect(ToastsService).toHaveBeenCalledWith({
+ targetDomElement: expect.any(HTMLDivElement),
+ });
+
+ expect(BannersService).toHaveBeenCalledTimes(1);
+ expect(BannersService).toHaveBeenCalledWith({
+ targetDomElement: expect.any(HTMLDivElement),
+ });
+
+ const [[{ targetDomElement: toastsContainer }]] = ToastsService.mock.calls;
+ const [[{ targetDomElement: bannersContainer }]] = BannersService.mock.calls;
+ expect(toastsContainer).not.toBe(bannersContainer);
+ expect(toastsContainer.parentElement).toBe(null);
+ expect(bannersContainer.parentElement).toBe(null);
+
+ ToastsService.prototype.start.mockImplementation(() => {
+ expect(toastsContainer.parentElement).toBe(targetDomElement);
+ });
+
+ ToastsService.prototype.stop.mockImplementation(() => {
+ expect(toastsContainer.parentElement).toBe(targetDomElement);
+ });
+
+ BannersService.prototype.start.mockImplementation(() => {
+ expect(bannersContainer.parentElement).toBe(targetDomElement);
+ });
+
+ BannersService.prototype.stop.mockImplementation(() => {
+ expect(bannersContainer.parentElement).toBe(targetDomElement);
+ });
+
+ notifications.start();
+ notifications.stop();
+
+ expect(BannersService.prototype.stop).toHaveBeenCalledTimes(1);
+ expect(ToastsService.prototype.stop).toHaveBeenCalledTimes(1);
+ expect(bannersContainer.parentElement).toBe(null);
+ expect(toastsContainer.parentElement).toBe(null);
+ expect(targetDomElement).toMatchInlineSnapshot(``);
+});
diff --git a/src/core/public/notifications/notifications_service.ts b/src/core/public/notifications/notifications_service.ts
index b1f50497aec70..738c9e6549f32 100644
--- a/src/core/public/notifications/notifications_service.ts
+++ b/src/core/public/notifications/notifications_service.ts
@@ -17,6 +17,7 @@
* under the License.
*/
+import { BannersService } from './banners';
import { ToastsService } from './toasts';
interface Params {
@@ -25,26 +26,36 @@ interface Params {
export class NotificationsService {
private readonly toasts: ToastsService;
+ private readonly banners: BannersService;
private readonly toastsContainer: HTMLElement;
+ private readonly bannersContainer: HTMLElement;
constructor(private readonly params: Params) {
this.toastsContainer = document.createElement('div');
this.toasts = new ToastsService({
targetDomElement: this.toastsContainer,
});
+
+ this.bannersContainer = document.createElement('div');
+ this.banners = new BannersService({
+ targetDomElement: this.bannersContainer,
+ });
}
public start() {
this.params.targetDomElement.appendChild(this.toastsContainer);
+ const toasts = this.toasts.start();
+
+ this.params.targetDomElement.appendChild(this.bannersContainer);
+ const banners = this.banners.start();
- return {
- toasts: this.toasts.start(),
- };
+ return { toasts, banners };
}
public stop() {
this.toasts.stop();
+ this.banners.stop();
this.params.targetDomElement.textContent = '';
}
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js
index 31bdf62646a7f..d29defba76e67 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.js
+++ b/src/ui/public/chrome/directives/kbn_chrome.js
@@ -17,8 +17,6 @@
* under the License.
*/
-import React from 'react';
-import ReactDOM from 'react-dom';
import $ from 'jquery';
import './kbn_chrome.less';
@@ -27,11 +25,7 @@ import {
getUnhashableStatesProvider,
unhashUrl,
} from '../../state_management/state_hashing';
-import {
- notify,
- GlobalBannerList,
- banners,
-} from '../../notify';
+import { notify } from '../../notify';
import { SubUrlRouteFilterProvider } from './sub_url_route_filter';
export function kbnChromeProvider(chrome, internals) {
@@ -86,17 +80,6 @@ export function kbnChromeProvider(chrome, internals) {
// Notifications
$scope.notifList = notify._notifs;
- // Non-scope based code (e.g., React)
-
- // Banners
- ReactDOM.render(
- ,
- document.getElementById('globalBannerList')
- );
-
return chrome;
}
};
diff --git a/src/ui/public/notify/banners.test.tsx b/src/ui/public/notify/banners.test.tsx
new file mode 100644
index 0000000000000..1bb14396cf1ac
--- /dev/null
+++ b/src/ui/public/notify/banners.test.tsx
@@ -0,0 +1,103 @@
+/*
+ * 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 { __newPlatformInit__, banners } from './banners';
+
+const newPlatformBanners = {
+ add: jest.fn((...args) => ['add', args]),
+ remove: jest.fn((...args) => ['remove', args]),
+ replace: jest.fn((...args) => ['replace', args]),
+};
+
+__newPlatformInit__(newPlatformBanners);
+
+beforeEach(() => {
+ jest.clearAllMocks();
+});
+
+it('forwards calls to newPlatformBanners.add()', () => {
+ expect(banners.add({ component: 'foo', priority: 10 })).toMatchInlineSnapshot(`
+Array [
+ "add",
+ Array [
+ [Function],
+ 10,
+ ],
+]
+`);
+});
+
+it('forwards calls to newPlatformBanners.remove()', () => {
+ expect(banners.remove('id')).toMatchInlineSnapshot(`
+Array [
+ "remove",
+ Array [
+ "id",
+ ],
+]
+`);
+});
+
+it('forwards calls to newPlatformBanners.replace()', () => {
+ expect(banners.set({ id: 'id', component: 'foo', priority: 100 })).toMatchInlineSnapshot(`
+Array [
+ "replace",
+ Array [
+ "id",
+ [Function],
+ 100,
+ ],
+]
+`);
+});
+
+describe('component is a react element', () => {
+ it('renders with react, returns unrender function', () => {
+ banners.add({ component: foo });
+ const [[renderFn]] = newPlatformBanners.add.mock.calls;
+ const div = document.createElement('div');
+ const unrender = renderFn(div);
+ expect(div).toMatchInlineSnapshot(`
+
+
+ foo
+
+
+`);
+ unrender();
+ expect(div).toMatchInlineSnapshot(``);
+ });
+});
+
+describe('component is a string', () => {
+ it('renders string with react, returns unrender function', () => {
+ banners.add({ component: 'foo' });
+ const [[renderFn]] = newPlatformBanners.add.mock.calls;
+ const div = document.createElement('div');
+ const unrender = renderFn(div);
+ expect(div).toMatchInlineSnapshot(`
+
+ foo
+
+`);
+ unrender();
+ expect(div).toMatchInlineSnapshot(``);
+ });
+});
diff --git a/src/ui/public/notify/banners/banners.js b/src/ui/public/notify/banners.tsx
similarity index 51%
rename from src/ui/public/notify/banners/banners.js
rename to src/ui/public/notify/banners.tsx
index 3f8dd08771d43..a9220ad10a8e4 100644
--- a/src/ui/public/notify/banners/banners.js
+++ b/src/ui/public/notify/banners.tsx
@@ -17,47 +17,36 @@
* under the License.
*/
-/**
- * Banners represents a prioritized list of displayed components.
- */
-export class Banners {
-
- constructor() {
- // sorted in descending order (100, 99, 98...) so that higher priorities are in front
- this.list = [];
- this.uniqueId = 0;
- this.onChangeCallback = null;
- }
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
- _changed = () => {
- if (this.onChangeCallback) {
- this.onChangeCallback();
- }
- }
+import { BannersStartContract } from '../../../core/public/notifications/banners';
- _remove = id => {
- const index = this.list.findIndex(details => details.id === id);
+let newPlatformBanners: BannersStartContract;
- if (index !== -1) {
- this.list.splice(index, 1);
-
- return true;
- }
-
- return false;
+export function __newPlatformInit__(instance: BannersStartContract) {
+ if (newPlatformBanners) {
+ throw new Error('ui/notify/banners is already initialized');
}
- /**
- * Set the {@code callback} to invoke whenever changes are made to the banner list.
- *
- * Use {@code null} or {@code undefined} to unset it.
- *
- * @param {Function} callback The callback to use.
- */
- onChange = callback => {
- this.onChangeCallback = callback;
- }
+ newPlatformBanners = instance;
+}
+
+function renderWithReact(componentOrString: React.ReactElement | string) {
+ const component =
+ typeof componentOrString === 'string' ? (
+ {componentOrString}
+ ) : (
+ componentOrString
+ );
+
+ return (el: HTMLDivElement) => {
+ render(component, el);
+ return () => unmountComponentAtNode(el);
+ };
+}
+export const banners = {
/**
* Add a new banner.
*
@@ -65,25 +54,9 @@ export class Banners {
* @param {Number} priority The optional priority order to display this banner. Higher priority values are shown first.
* @return {String} A newly generated ID. This value can be used to remove/replace the banner.
*/
- add = ({ component, priority = 0 }) => {
- const id = `${++this.uniqueId}`;
- const bannerDetails = { id, component, priority };
-
- // find the lowest priority item to put this banner in front of
- const index = this.list.findIndex(details => priority > details.priority);
-
- if (index !== -1) {
- // we found something with a lower priority; so stick it in front of that item
- this.list.splice(index, 0, bannerDetails);
- } else {
- // nothing has a lower priority, so put it at the end
- this.list.push(bannerDetails);
- }
-
- this._changed();
-
- return id;
- }
+ add(banner: { component: React.ReactElement | string; priority?: number }) {
+ return newPlatformBanners.add(renderWithReact(banner.component), banner.priority);
+ },
/**
* Remove an existing banner.
@@ -91,15 +64,9 @@ export class Banners {
* @param {String} id The ID of the banner to remove.
* @return {Boolean} {@code true} if the ID is recognized and the banner is removed. {@code false} otherwise.
*/
- remove = id => {
- const removed = this._remove(id);
-
- if (removed) {
- this._changed();
- }
-
- return removed;
- }
+ remove(id: string) {
+ return newPlatformBanners.remove(id);
+ },
/**
* Replace an existing banner by removing it, if it exists, and adding a new one in its place.
@@ -112,15 +79,11 @@ export class Banners {
* @param {Number} priority The optional priority order to display this banner. Higher priority values are shown first.
* @return {String} A newly generated ID. This value can be used to remove/replace the banner.
*/
- set = ({ component, id, priority = 0 }) => {
- this._remove(id);
-
- return this.add({ component, priority });
- }
-
-}
-
-/**
- * A singleton instance meant to represent all Kibana banners.
- */
-export const banners = new Banners();
+ set(banner: { id: string; component: React.ReactElement | string; priority?: number }) {
+ return newPlatformBanners.replace(
+ banner.id,
+ renderWithReact(banner.component),
+ banner.priority
+ );
+ },
+};
diff --git a/src/ui/public/notify/banners/BANNERS.md b/src/ui/public/notify/banners/BANNERS.md
deleted file mode 100644
index fc6bddc3aa4ed..0000000000000
--- a/src/ui/public/notify/banners/BANNERS.md
+++ /dev/null
@@ -1,360 +0,0 @@
-# Banners
-
-Use this service to surface banners at the top of the screen. The expectation is that the banner will used an
-`` to render, but that is not a requirement. See [the EUI docs](https://elastic.github.io/eui/) for
-more information on banners and their role within the UI.
-
-Banners should be considered with respect to their lifecycle. Most banners are best served by using the `add` and
-`remove` functions.
-
-## Importing the module
-
-```js
-import { banners } from 'ui/notify';
-```
-
-## Interface
-
-There are three methods defined to manipulate the list of banners: `add`, `set`, and `remove`. A fourth method,
-`onChange` exists to listen to changes made via `add`, `set`, and `remove`.
-
-### `add()`
-
-This is the preferred way to add banners because it implies the best usage of the banner: added once during a page's
-lifecycle. For other usages, consider *not* using a banner.
-
-#### Syntax
-
-```js
-const bannerId = banners.add({
- // required:
- component,
- // optional:
- priority,
-});
-```
-
-##### Parameters
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `component` | Any | The value displayed as the banner. |
-| `priority` | Number | Optional priority, which defaults to `0` used to place the banner. |
-
-To add a banner, you only need to define the `component` field.
-
-The `priority` sorts in descending order. Items sharing the same priority are sorted from oldest to newest. For example:
-
-```js
-const banner1 = banners.add({ component: });
-const banner2 = banners.add({ component: , priority: 0 });
-const banner3 = banners.add({ component: , priority: 1 });
-```
-
-That would be displayed as:
-
-```
-[ fake3 ]
-[ fake1 ]
-[ fake2 ]
-```
-
-##### Returns
-
-| Type | Description |
-|------|-------------|
-| String | A newly generated ID. |
-
-#### Example
-
-This example includes buttons that allow the user to remove the banner. In some cases, you may not want any buttons
-and in other cases you will want an action to proceed the banner's removal (e.g., apply an Advanced Setting).
-
-This makes the most sense to use when a banner is added at the beginning of the page life cycle and not expected to
-be touched, except by its own buttons triggering an action or navigating away.
-
-```js
-const bannerId = banners.add({
- component: (
-
-
-
- banners.remove(bannerId)}
- >
- Dismiss
-
-
-
- window.alert('Do Something Else')}
- >
- Do Something Else
-
-
-
-
- ),
-});
-```
-
-### `remove()`
-
-Unlike toast notifications, banners stick around until they are explicitly removed. Using the `add` example above,you can remove it by calling `remove`.
-
-Note: They will stick around as long as the scope is remembered by whatever set it; navigating away won't remove it
-unless the scope is forgotten (e.g., when the "app" changes)!
-
-#### Syntax
-
-```js
-const removed = banners.remove(bannerId);
-```
-
-##### Parameters
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `id` | String | ID of a banner. |
-
-##### Returns
-
-| Type | Description |
-|------|-------------|
-| Boolean | `true` if the ID was recognized and the banner was removed. `false` otherwise. |
-
-#### Example
-
-To remove a banner, you need to pass the `id` of the banner.
-
-```js
-if (banners.remove(bannerId)) {
- // removed; otherwise it didn't exist (maybe it was already removed)
-}
-```
-
-#### Scheduled removal
-
-Like toast notifications do automatically, you can have a banner automatically removed after a set of time, by
-setting a timer:
-
-```js
-setTimeout(() => banners.remove(bannerId), 15000);
-```
-
-Note: It is safe to remove a banner more than once as unknown IDs will be ignored.
-
-### `set()`
-
-Banners can be replaced once added by supplying their `id`. If one is supplied, then the ID will be used to replace
-any banner with the same ID and a **new** `id` will be returned.
-
-You should only consider using `set` when the banner is manipulated frequently in the lifecycle of the page, where
-maintaining the banner's `id` can be a burden. It is easier to allow `banners` to create the ID for you in most
-situations where a banner is useful (e.g., set once), which safely avoids any chance to have an ID-based collision,
-which happens automatically with `add`.
-
-Usage of `set` can imply that your use case is abusing the banner system.
-
-Note: `set` will only trigger the callback once for both the implicit remove and add operation.
-
-#### Syntax
-
-```js
-const id = banners.set({
- // required:
- component,
- // optional:
- id,
- priority,
-});
-```
-
-##### Parameters
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `component` | Any | The value displayed as the banner. |
-| `id` | String | Optional ID used to remove an existing banner. |
-| `priority` | Number | Optional priority, which defaults to `0` used to place the banner. |
-
-The `id` is optional because it follows the same semantics as the `remove` method: unknown IDs are ignored. This
-is useful when first creating a banner so that you do not have to call `add` instead.
-
-##### Returns
-
-| Type | Description |
-|------|-------------|
-| String | A newly generated ID. |
-
-#### Example
-
-This example does not include any way for the user to clear the banner directly. Instead, it is cleared based on
-time. Related to it being cleared by time, it can also reappear within the same page life cycle by navigating between
-different paths that need it displayed. Instead of adding a new banner for every navigation, you should replace any
-existing banner.
-
-```js
-let bannerId;
-let timeoutId;
-
-function displayBanner() {
- clearTimeout(timeoutId);
-
- bannerId = banners.set({
- id: bannerId, // the first time it will be undefined, but reused as long as this is in the same lifecycle
- component: (
-
- )
- });
-
- // hide the message after the user has had a chance to acknowledge it -- so it doesn't permanently stick around
- banner.timeoutId = setTimeout(() => {
- banners.remove(bannerId);
- timeoutId = undefined;
- }, 6000);
-}
-```
-
-### `onChange()`
-
-For React components that intend to display the banners, it is not enough to simply `render` the `banners.list`
-values. Because they can change after being rendered, the React component that renders the list must be alerted
-to changes to the list.
-
-#### Syntax
-
-```js
-// inside your React component
-banners.onChange(() => this.forceUpdate());
-```
-
-##### Parameters
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `callback` | Function | The function to invoke whenever the internal banner list is changed. |
-
-Every new `callback` replaces the previous callback. So calling this with `null` or `undefined` will unset the
-callback.
-
-##### Returns
-
-Nothing.
-
-#### Example
-
-This can be used inside of a React component to trigger a re-`render` of the banners.
-
-```js
-import { GlobalBannerList } from 'ui/notify';
-
-
-```
-
-### `list`
-
-For React components that intend to display the banners, it is not enough to simply `render` the `banners.list`
-values. Because they can change after being rendered, the React component that renders the list must be alerted
-to changes to the list.
-
-#### Syntax
-
-```js
-
-```
-
-##### Returns
-
-| Type | Description |
-|------|-------------|
-| Array | The array of banner objects. |
-
-Banner objects are sorted in descending order based on their `priority`, in the form:
-
-```js
-{
- id: 'banner-123',
- component: ,
- priority: 12,
-}
-```
-
-| Field | Type | Description |
-|-------|------|-------------|
-| `component` | Any | The value displayed as the banner. |
-| `id` | String | The ID of the banner, which can be used as a React "key". |
-| `priority` | Number | The priority of the banner. |
-
-#### Example
-
-This can be used to supply the banners to the `GlobalBannerList` React component (which is done for you).
-
-```js
-import { GlobalBannerList } from 'ui/notify';
-
-
-```
-
-## Use in functional tests
-
-Functional tests are commonly used to verify that an action yielded a successful outcome. You can place a
-`data-test-subj` attribute on the banner and use it to check if the banner exists inside of your functional test.
-This acts as a proxy for verifying the successful outcome. Any unrecognized field will be added as a property of the
-containing element.
-
-```js
-banners.add({
- component: (
-
- ),
- data-test-subj: 'my-tested-banner',
-});
-```
-
-This will apply the `data-test-subj` to the element containing the `component`, so the inner HTML of that element
-will exclusively be the specified `component`.
-
-Given that `component` is expected to be a React component, you could also add the `data-test-subj` directly to it:
-
-```js
-banners.add({
- component: (
-
- ),
-});
-```
\ No newline at end of file
diff --git a/src/ui/public/notify/banners/__snapshots__/global_banner_list.test.js.snap b/src/ui/public/notify/banners/__snapshots__/global_banner_list.test.js.snap
deleted file mode 100644
index e66ff83886adb..0000000000000
--- a/src/ui/public/notify/banners/__snapshots__/global_banner_list.test.js.snap
+++ /dev/null
@@ -1,22 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GlobalBannerList is rendered 1`] = `null`;
-
-exports[`GlobalBannerList props banners is rendered 1`] = `
-
-
- a component
-
-
- b good
-
-
- { component }
-
- );
- });
-
- return (
-
- {flexBanners}
-
- );
- }
-}
diff --git a/src/ui/public/notify/index.js b/src/ui/public/notify/index.js
index 078b4807430dd..c3ac93f89e8d8 100644
--- a/src/ui/public/notify/index.js
+++ b/src/ui/public/notify/index.js
@@ -21,5 +21,5 @@ export { notify } from './notify';
export { Notifier } from './notifier';
export { fatalError, addFatalErrorCallback } from './fatal_error';
export { toastNotifications } from './toasts';
-export { GlobalBannerList, banners } from './banners';
+export { banners } from './banners';
export { addAppRedirectMessageToUrl, showAppRedirectNotification } from './app_redirect';