Convert Notifier.banner method to use banners service. (#17193) (#17204)

* Convert Notifier.banner method to use banners service.

src/ui/public/notify/__tests__/notifier.js

@@ -312,57 +312,6 @@ describe('Notifier', function () {
     });
   });
 
-  describe('#banner', function () {
-    testVersionInfo('banner');
-
-    it('has no content', function () {
-      expect(notify('banner').content).not.to.be.defined;
-    });
-
-    it('prepends location to message for markdown', function () {
-      expect(notify('banner').content).to.equal(`${params.location}: ${message}`);
-    });
-
-    it('sets type to "banner"', function () {
-      expect(notify('banner').type).to.equal('banner');
-    });
-
-    it('sets icon to undefined', function () {
-      expect(notify('banner').icon).to.equal(undefined);
-    });
-
-    it('sets title to "Attention"', function () {
-      expect(notify('banner').title).to.equal('Attention');
-    });
-
-    it('sets lifetime to 3000000 by default', function () {
-      expect(notify('banner').lifetime).to.equal(3000000);
-    });
-
-    it('does not allow reporting', function () {
-      const includesReport = _.includes(notify('banner').actions, 'report');
-      expect(includesReport).to.false;
-    });
-
-    it('allows accepting', function () {
-      const includesAccept = _.includes(notify('banner').actions, 'accept');
-      expect(includesAccept).to.true;
-    });
-
-    it('does not include stack', function () {
-      expect(notify('banner').stack).not.to.be.defined;
-    });
-
-    it('has css class helper functions', function () {
-      expect(notify('banner').getIconClass()).to.equal('');
-      expect(notify('banner').getButtonClass()).to.equal('kuiButton--basic');
-      expect(notify('banner').getAlertClassStack()).to.equal('toast-stack alert alert-banner');
-      expect(notify('banner').getAlertClass()).to.equal('alert alert-banner');
-      expect(notify('banner').getButtonGroupClass()).to.equal('toast-controls-banner');
-      expect(notify('banner').getToastMessageClass()).to.equal('toast-message-banner');
-    });
-  });
-
   function notify(fnName, opts) {
     notifier[fnName](message, opts);
     return latestNotification();

src/ui/public/notify/notifier.js

@@ -1,10 +1,17 @@
+import React from 'react';
 import _ from 'lodash';
 import angular from 'angular';
 import { metadata } from 'ui/metadata';
 import { formatMsg, formatStack } from './lib';
 import { fatalError } from './fatal_error';
+import { banners } from './banners';
 import 'ui/render_directive';
 
+import {
+  EuiCallOut,
+  EuiButton,
+} from '@elastic/eui';
+
 const notifs = [];
 
 const {
@@ -164,21 +171,7 @@ function add(notif, cb) {
   return notif;
 }
 
-function set(opts, cb) {
-  if (!opts.content) {
-    return null;
-  }
-
-  if (this._sovereignNotif) {
-    this._sovereignNotif.clear();
-  }
-
-  this._sovereignNotif = add(opts, cb);
-  return this._sovereignNotif;
-}
-
 Notifier.prototype.add = add;
-Notifier.prototype.set = set;
 
 /**
  * Functionality to check that
@@ -342,14 +335,41 @@ Notifier.prototype.warning = function (msg, opts, cb) {
  * @param  {String} msg
  * @param  {Function} cb
  */
-Notifier.prototype.banner = function (msg, cb) {
-  return this.set({
-    type: 'banner',
-    title: 'Attention',
-    content: formatMsg(msg, this.from),
-    lifetime: Notifier.config.bannerLifetime,
-    actions: ['accept']
-  }, cb);
+let bannerId;
+let bannerTimeoutId;
+Notifier.prototype.banner = function (content) {
+  const BANNER_PRIORITY = 100;
+
+  const dismissBanner = () => {
+    banners.remove(bannerId);
+    clearTimeout(bannerTimeoutId);
+  };
+
+  const banner = (
+    <EuiCallOut
+      title="Attention"
+      iconType="help"
+    >
+      <p>
+        {content}
+      </p>
+
+      <EuiButton type="primary" size="s" onClick={dismissBanner}>
+        Dismiss
+      </EuiButton>
+    </EuiCallOut>
+  );
+
+  bannerId = banners.set({
+    component: banner,
+    id: bannerId,
+    priority: BANNER_PRIORITY,
+  });
+
+  clearTimeout(bannerTimeoutId);
+  bannerTimeoutId = setTimeout(() => {
+    dismissBanner();
+  }, Notifier.config.bannerLifetime);
 };
 
 /**

src/ui/public/notify/notify.js

@@ -58,7 +58,12 @@ function applyConfig(config) {
     warningLifetime: config.get('notifications:lifetime:warning'),
     infoLifetime: config.get('notifications:lifetime:info')
   });
-  notify.banner(config.get('notifications:banner'));
+
+  const banner = config.get('notifications:banner');
+
+  if (banner) {
+    notify.banner(banner);
+  }
 }
 
 window.onerror = function (err, url, line) {