Add back support for markdown in custom banners. (#17289)

* Revert "Revert "Add back support for markdown in custom banners. (#17280)" (#17287)"
This reverts commit 29cbbde599.
* Remove references to Bootstrap banner notifications.
* Prevent non-string banners from being displayed.

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

@@ -261,16 +261,6 @@ describe('Notifier', function () {
       expect(customNotification.lifetime).to.be(5000);
     });
 
-    it('dynamic lifetime for "banner" config', function () {
-      // destroy the default custom notification, avoid duplicate handling
-      customNotification.clear();
-
-      const errorTypeParams = _.defaults({ type: 'banner' }, customParams);
-      customNotification = notifier.custom(customText, errorTypeParams);
-      expect(customNotification.type).to.be('banner');
-      expect(customNotification.lifetime).to.be(3000000);
-    });
-
     it('dynamic lifetime for "warning" config', function () {
       // destroy the default custom notification, avoid duplicate handling
       customNotification.clear();

src/ui/public/notify/notifier.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import angular from 'angular';
+import MarkdownIt from 'markdown-it';
 import { metadata } from 'ui/metadata';
 import { formatMsg, formatStack } from './lib';
 import { fatalError } from './fatal_error';
@@ -88,7 +89,6 @@ const typeToButtonClassMap = {
   danger: 'kuiButton--danger', // NOTE: `error` type is internally named as `danger`
   warning: 'kuiButton--warning',
   info: 'kuiButton--primary',
-  banner: 'kuiButton--basic'
 };
 const buttonHierarchyClass = (index) => {
   if (index === 0) {
@@ -102,7 +102,6 @@ const typeToAlertClassMap = {
   danger: `alert-danger`,
   warning: `alert-warning`,
   info: `alert-info`,
-  banner: `alert-banner`,
 };
 
 function add(notif, cb) {
@@ -139,14 +138,10 @@ function add(notif, cb) {
   // decorate the notification with helper functions for the template
   notif.getButtonClass = () => typeToButtonClassMap[notif.type];
   notif.getAlertClassStack = () => `toast-stack alert ${typeToAlertClassMap[notif.type]}`;
-  notif.getIconClass = () => (notif.type === 'banner') ?  '' : `fa fa-${notif.icon}`;
-  notif.getToastMessageClass = ()  => (notif.type === 'banner') ?  'toast-message-banner' : 'toast-message';
-  notif.getAlertClass = () => (notif.type === 'banner') ?
-    `alert ${typeToAlertClassMap[notif.type]}` : // not including `.toast` class leaves out the flex properties for banner
-    `toast alert ${typeToAlertClassMap[notif.type]}`;
-  notif.getButtonGroupClass = () => (notif.type === 'banner') ?
-    'toast-controls-banner' :
-    'toast-controls';
+  notif.getIconClass = () => `fa fa-${notif.icon}`;
+  notif.getToastMessageClass = ()  => 'toast-message';
+  notif.getAlertClass = () => `toast alert ${typeToAlertClassMap[notif.type]}`;
+  notif.getButtonGroupClass = () => 'toast-controls';
 
   let dup = null;
   if (notif.content) {
@@ -189,7 +184,6 @@ export function Notifier(opts) {
     'timed',
     'error',
     'warning',
-    'banner',
   ];
 
   notificationLevels.forEach(function (m) {
@@ -337,7 +331,7 @@ Notifier.prototype.warning = function (msg, opts, cb) {
  */
 let bannerId;
 let bannerTimeoutId;
-Notifier.prototype.banner = function (content) {
+Notifier.prototype.banner = function (content = '') {
   const BANNER_PRIORITY = 100;
 
   const dismissBanner = () => {
@@ -345,14 +339,17 @@ Notifier.prototype.banner = function (content) {
     clearTimeout(bannerTimeoutId);
   };
 
+  const markdownIt = new MarkdownIt({
+    html: false,
+    linkify: true
+  });
+
   const banner = (
     <EuiCallOut
       title="Attention"
       iconType="help"
     >
-      <p>
-        {content}
-      </p>
+      <div dangerouslySetInnerHTML={{ __html: markdownIt.render(content) }} />
 
       <EuiButton type="primary" size="s" onClick={dismissBanner}>
         Dismiss
@@ -391,8 +388,6 @@ function getDecoratedCustomConfig(config) {
 
   const getLifetime = (type) => {
     switch (type) {
-      case 'banner':
-        return Notifier.config.bannerLifetime;
       case 'warning':
         return Notifier.config.warningLifetime;
       case 'danger':

src/ui/public/notify/notify.js

@@ -61,7 +61,7 @@ function applyConfig(config) {
 
   const banner = config.get('notifications:banner');
 
-  if (banner) {
+  if (typeof banner === 'string' && banner.trim()) {
     notify.banner(banner);
   }
 }

src/ui/public/notify/notify.less

@@ -76,10 +76,6 @@
     display: flex;
   }
 
-  // add darkened background to the different badges
-  .alert-success .badge {
-    background: darken(@alert-success-bg, 25%);
-  }
   .alert-info .badge {
     background: darken(@alert-info-bg, 25%);
   }
@@ -89,22 +85,6 @@
   .alert-danger .badge {
     background: darken(@alert-danger-bg, 25%);
   }
-  .alert-banner {
-    background-color: white;
-    padding: 10px 15px;
-
-    a {
-      color: #328caa;
-    }
-
-    .toaster-countdown {
-      background-color: white;
-    }
-
-    .badge {
-      background-color: #328caa;
-    }
-  }
 
   .toast-message {
     white-space: normal;