[core/public/banners] migrate ui/notify/banners

.i18nrc.json

@@ -10,6 +10,7 @@
     "src/ui/ui_render/bootstrap/app_bootstrap.js",
     "src/ui/ui_render/ui_render_mixin.js",
     "x-pack/plugins/monitoring/public/components/cluster/overview/alerts_panel.js",
-    "x-pack/plugins/monitoring/public/directives/alerts/index.js"
+    "x-pack/plugins/monitoring/public/directives/alerts/index.js",
+    "src/ui/public/notify/banners.tsx"
   ]
 }

src/core/public/legacy_platform/legacy_platform_service.test.ts

@@ -62,6 +62,14 @@ jest.mock('ui/notify/toasts', () => {
   };
 });
 
+const mockNotifyBannersInit = jest.fn();
+jest.mock('ui/notify/banners', () => {
+  mockLoadOrder.push('ui/notify/banners');
+  return {
+    __newPlatformInit__: mockNotifyBannersInit,
+  };
+});
+
 const mockLoadingCountInit = jest.fn();
 jest.mock('ui/chrome/api/loading_count', () => {
   mockLoadOrder.push('ui/chrome/api/loading_count');
@@ -99,6 +107,7 @@ import { LegacyPlatformService } from './legacy_platform_service';
 const fatalErrorsStartContract = {} as any;
 const notificationsStartContract = {
   toasts: {},
+  banners: {},
 } as any;
 
 const injectedMetadataStartContract: any = {
@@ -180,6 +189,17 @@ describe('#start()', () => {
       expect(mockNotifyToastsInit).toHaveBeenCalledWith(notificationsStartContract.toasts);
     });
 
+    it('passes banners service to ui/notify/banners', () => {
+      const legacyPlatform = new LegacyPlatformService({
+        ...defaultParams,
+      });
+
+      legacyPlatform.start(defaultStartDeps);
+
+      expect(mockNotifyBannersInit).toHaveBeenCalledTimes(1);
+      expect(mockNotifyBannersInit).toHaveBeenCalledWith(notificationsStartContract.banners);
+    });
+
     it('passes loadingCount service to ui/chrome/api/loading_count', () => {
       const legacyPlatform = new LegacyPlatformService({
         ...defaultParams,

src/core/public/legacy_platform/legacy_platform_service.ts

@@ -63,6 +63,7 @@ export class LegacyPlatformService {
     require('ui/metadata').__newPlatformInit__(injectedMetadata.getLegacyMetadata());
     require('ui/notify/fatal_error').__newPlatformInit__(fatalErrors);
     require('ui/notify/toasts').__newPlatformInit__(notifications.toasts);
+    require('ui/notify/banners').__newPlatformInit__(notifications.banners);
     require('ui/chrome/api/loading_count').__newPlatformInit__(loadingCount);
     require('ui/chrome/api/base_path').__newPlatformInit__(basePath);
     require('ui/chrome/api/ui_settings').__newPlatformInit__(uiSettings);

src/core/public/notifications/banners/banners_service.test.tsx

@@ -0,0 +1,190 @@
+/*
+ * 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 { unmountComponentAtNode } from 'react-dom';
+import { BannersService } from './banners_service';
+
+function renderFn(innerHTML: string) {
+  return (el: HTMLDivElement) => {
+    el.innerHTML = innerHTML;
+    return () => (el.innerHTML = '');
+  };
+}
+
+describe('start.add()', () => {
+  it('renders the component in the targetDomElement', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    start.add(renderFn('foo'));
+
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      foo
+    </div>
+  </div>
+</div>
+`);
+  });
+
+  it('renders higher-priority banners abover lower-priority ones', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    start.add(renderFn('100'), 100);
+    start.add(renderFn('1'), 1);
+    start.add(renderFn('200'), 200);
+
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      200
+    </div>
+    <div
+      class="globalBanner__item"
+    >
+      100
+    </div>
+    <div
+      class="globalBanner__item"
+    >
+      1
+    </div>
+  </div>
+</div>
+`);
+  });
+});
+
+describe('start.remove()', () => {
+  it('removes the component from the targetDomElement', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    const id = start.add(renderFn('foo'));
+    start.remove(id);
+    expect(targetDomElement).toMatchInlineSnapshot(`<div />`);
+  });
+
+  it('does nothing if the id is unknown', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    start.add(renderFn('foo'));
+    start.remove('something random');
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      foo
+    </div>
+  </div>
+</div>
+`);
+  });
+});
+
+describe('start.replace()', () => {
+  it('replaces the banner with the matching id', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    const id = start.add(renderFn('foo'));
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      foo
+    </div>
+  </div>
+</div>
+`);
+    start.replace(id, renderFn('bar'));
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      bar
+    </div>
+  </div>
+</div>
+`);
+  });
+
+  it('adds the banner if the id is unknown', () => {
+    const targetDomElement = document.createElement('div');
+    const start = new BannersService({ targetDomElement }).start();
+    start.add(renderFn('foo'));
+    start.replace('something random', renderFn('bar'));
+    expect(targetDomElement).toMatchInlineSnapshot(`
+<div>
+  <div
+    class="globalBanner__list"
+  >
+    <div
+      class="globalBanner__item"
+    >
+      foo
+    </div>
+    <div
+      class="globalBanner__item"
+    >
+      bar
+    </div>
+  </div>
+</div>
+`);
+  });
+});
+
+describe('stop', () => {
+  it('unmounts the component from the targetDomElement', () => {
+    const targetDomElement = document.createElement('div');
+    const service = new BannersService({ targetDomElement });
+    service.start();
+    service.stop();
+    expect(unmountComponentAtNode(targetDomElement)).toBe(false);
+  });
+
+  it('cleans out the content of the targetDomElement', () => {
+    const targetDomElement = document.createElement('div');
+    const service = new BannersService({ targetDomElement });
+    service.start().add(renderFn('foo-bar'));
+    service.stop();
+    expect(targetDomElement).toMatchInlineSnapshot(`<div />`);
+  });
+});

src/core/public/notifications/banners/banners_service.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 { render, unmountComponentAtNode } from 'react-dom';
+import * as Rx from 'rxjs';
+
+import { GlobalBannersContainer } from './containers/global_banners_container';
+
+export interface Banner {
+  readonly id: string;
+  readonly priority: number;
+  readonly render: (targetDomElement: HTMLDivElement) => (() => void) | void;
+}
+
+export type Banners = Banner[];
+
+interface Params {
+  targetDomElement: HTMLElement;
+}
+
+export class BannersService {
+  constructor(private readonly params: Params) {}
+
+  public start() {
+    let uniqueId = 0;
+    const banners$ = new Rx.BehaviorSubject<Banners>([]);
+
+    render(
+      <GlobalBannersContainer banners$={banners$.asObservable()} />,
+      this.params.targetDomElement
+    );
+
+    return {
+      /**
+       * Add a banner that should be rendered at the top of the page along with an optional priority.
+       */
+      add: (renderFn: Banner['render'], priority = 0) => {
+        const id = `${++uniqueId}`;
+        banners$.next([...banners$.getValue(), { id, priority, render: renderFn }]);
+        return id;
+      },
+
+      /**
+       * Remove a banner from the top of the page.
+       */
+      remove: (id: string) => {
+        banners$.next(banners$.getValue().filter(banner => banner.id !== id));
+      },
+
+      /**
+       * Replace a banner and its priority. If the render function is not === to the
+       * previous render function the previous banner will be unmounted and re-rendered.
+       */
+      replace: (id: string, renderFn: Banner['render'], priority = 0) => {
+        const newId = `${++uniqueId}`;
+        banners$.next([
+          ...banners$.getValue().filter(banner => banner.id !== id),
+          { id: newId, priority, render: renderFn },
+        ]);
+        return newId;
+      },
+    };
+  }
+
+  public stop() {
+    unmountComponentAtNode(this.params.targetDomElement);
+    this.params.targetDomElement.textContent = '';
+  }
+}
+
+export type BannersStartContract = ReturnType<BannersService['start']>;

src/ui/public/notify/banners/global_banner_list.less → src/core/public/notifications/banners/components/global_banner_item.css

@@ -1,7 +1,3 @@
-.globalBanner__list {
-  padding: 16px;
-}
-
 .globalBanner__item + .globalBanner__item {
   margin-top: 16px;
 }