From 16439a79388689df5c9cc9805e7a27eeeea431c6 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 21 Dec 2017 18:10:09 -0800
Subject: [PATCH] Add basic mechanism for surfacing toasts.

---
 .../public/chrome/directives/kbn_chrome.html  |  11 +-
 src/ui/public/chrome/directives/kbn_chrome.js |   6 +-
 src/ui/public/notify/index.js                 |   1 +
 .../public/notify/toasts/global_toast_list.js | 121 ++++++++++++++++++
 src/ui/public/notify/toasts/index.js          |   2 +
 .../notify/toasts/toast_notifications.js      |  21 +++
 src/ui/public/react_components.js             |   2 +
 7 files changed, 162 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/public/notify/toasts/global_toast_list.js
 create mode 100644 src/ui/public/notify/toasts/index.js
 create mode 100644 src/ui/public/notify/toasts/toast_notifications.js

diff --git a/src/ui/public/chrome/directives/kbn_chrome.html b/src/ui/public/chrome/directives/kbn_chrome.html
index 1d6a34e84bfd6f0..10fb9cb73adb936 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.html
+++ b/src/ui/public/chrome/directives/kbn_chrome.html
@@ -10,8 +10,17 @@
 
   <div class="app-wrapper" ng-class="{ 'hidden-chrome': !chrome.getVisible() }">
     <div class="app-wrapper-panel">
-      <kbn-notifications list="notifList"></kbn-notifications>
+      <kbn-notifications
+        list="notifList"
+      ></kbn-notifications>
+
+      <global-toast-list
+        toasts="toastNotifications"
+        dismiss-toast="dismissToast"
+      ></global-toast-list>
+
       <kbn-loading-indicator></kbn-loading-indicator>
+
       <div
         class="application"
         ng-class="'tab-' + chrome.getFirstPathSegment() + ' ' + chrome.getApplicationClasses()"
diff --git a/src/ui/public/chrome/directives/kbn_chrome.js b/src/ui/public/chrome/directives/kbn_chrome.js
index e544cf07f3ce483..839ef93edd416a5 100644
--- a/src/ui/public/chrome/directives/kbn_chrome.js
+++ b/src/ui/public/chrome/directives/kbn_chrome.js
@@ -8,7 +8,7 @@ import {
   getUnhashableStatesProvider,
   unhashUrl,
 } from 'ui/state_management/state_hashing';
-import { notify } from 'ui/notify';
+import { notify, toastNotifications } from 'ui/notify';
 import { SubUrlRouteFilterProvider } from './sub_url_route_filter';
 
 export function kbnChromeProvider(chrome, internals) {
@@ -66,7 +66,11 @@ export function kbnChromeProvider(chrome, internals) {
 
           // and some local values
           chrome.httpActive = $http.pendingRequests;
+
+          // Notifications
           $scope.notifList = notify._notifs;
+          $scope.toastNotifications = toastNotifications.list;
+          $scope.dismissToast = toastNotifications.remove;
 
           return chrome;
         }
diff --git a/src/ui/public/notify/index.js b/src/ui/public/notify/index.js
index 8de68247f7515b9..e7c20287f45ace6 100644
--- a/src/ui/public/notify/index.js
+++ b/src/ui/public/notify/index.js
@@ -2,3 +2,4 @@ export { notify } from './notify';
 export { Notifier } from './notifier';
 export { fatalError } from './fatal_error';
 export { addFatalErrorCallback } from './fatal_error';
+export { toastNotifications } from './toasts';
diff --git a/src/ui/public/notify/toasts/global_toast_list.js b/src/ui/public/notify/toasts/global_toast_list.js
new file mode 100644
index 000000000000000..2088aa264d1b88f
--- /dev/null
+++ b/src/ui/public/notify/toasts/global_toast_list.js
@@ -0,0 +1,121 @@
+import React, {
+  // cloneElement,
+  Component,
+} from 'react';
+import PropTypes from 'prop-types';
+import 'ngreact';
+import { uiModules } from 'ui/modules';
+
+import {
+  EuiGlobalToastList,
+  EuiGlobalToastListItem,
+  EuiLink,
+  EuiToast,
+} from '@elastic/eui';
+
+const TOAST_LIFE_TIME_MS = 4000;
+const TOAST_FADE_OUT_MS = 250;
+
+class GlobalToastList extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      toastIdToDismissedMap: {}
+    };
+
+    this.timeoutIds = [];
+    this.toastsScheduledForDismissal = {};
+  }
+
+  static propTypes = {
+    toasts: PropTypes.array,
+    dismissToast: PropTypes.func.isRequired,
+  };
+
+  static defaultProps = {
+    toasts: [],
+  };
+
+  scheduleToastForDismissal = (toast, isImmediate = false) => {
+    const lifeTime = isImmediate ? TOAST_FADE_OUT_MS : TOAST_LIFE_TIME_MS;
+
+    this.timeoutIds.push(setTimeout(() => {
+      this.props.dismissToast(toast);
+      this.setState(prevState => {
+        const toastIdToDismissedMap = { ...this.state.toastIdToDismissedMap };
+        delete toastIdToDismissedMap[toast.id];
+
+        return {
+          toastIdToDismissedMap,
+        };
+      });
+    }, lifeTime));
+
+    this.timeoutIds.push(setTimeout(() => {
+      this.startDismissingToast(toast);
+    }, lifeTime - TOAST_FADE_OUT_MS));
+  };
+
+  startDismissingToast(toast) {
+    this.setState(prevState => {
+      const toastIdToDismissedMap = { ...this.state.toastIdToDismissedMap };
+      toastIdToDismissedMap[toast.id] = true;
+
+      return {
+        toastIdToDismissedMap,
+      };
+    });
+  }
+
+  componentWillUnmount() {
+    this.timeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
+  }
+
+  componentDidUpdate(prevProps) {
+    prevProps.toasts.forEach(toast => {
+      if (!this.toastsScheduledForDismissal[toast.id]) {
+        this.scheduleToastForDismissal(toast);
+      }
+    });
+  }
+
+  render() {
+    const {
+      toasts,
+      dismissToast,
+    } = this.props;
+
+    const renderedToasts = toasts.map(toast => {
+      const { text, ...rest } = toast;
+      return (
+        <EuiGlobalToastListItem
+          key={toast.id}
+          isDismissed={this.state.toastIdToDismissedMap[toast.id]}
+        >
+          <EuiToast
+            onClose={this.scheduleToastForDismissal.bind(toast, true)}
+            {...rest}
+          >
+            {text}
+          </EuiToast>
+        </EuiGlobalToastListItem>
+      );
+    });
+
+    return (
+      <EuiGlobalToastList>
+        {renderedToasts}
+      </EuiGlobalToastList>
+    );
+  }
+}
+
+const app = uiModules.get('app/kibana', ['react']);
+
+app.directive('globalToastList', function (reactDirective) {
+  return reactDirective(GlobalToastList, [
+    'toasts',
+    ['dismissToast', { watchDepth: 'reference' }],
+  ]);
+});
diff --git a/src/ui/public/notify/toasts/index.js b/src/ui/public/notify/toasts/index.js
new file mode 100644
index 000000000000000..b6a3fe4364da346
--- /dev/null
+++ b/src/ui/public/notify/toasts/index.js
@@ -0,0 +1,2 @@
+import './global_toast_list';
+export { toastNotifications } from './toast_notifications';
diff --git a/src/ui/public/notify/toasts/toast_notifications.js b/src/ui/public/notify/toasts/toast_notifications.js
new file mode 100644
index 000000000000000..fb02a2e70942a8b
--- /dev/null
+++ b/src/ui/public/notify/toasts/toast_notifications.js
@@ -0,0 +1,21 @@
+let toastCounter = 0;
+
+class ToastNotifications {
+  constructor() {
+    this.list = [];
+  }
+
+  add = toast => {
+    this.list.push({
+      id: toastCounter++,
+      ...toast
+    });
+  };
+
+  remove = toast => {
+    const index = this.list.indexOf(toast);
+    this.list.splice(index, 1);
+  };
+}
+
+export const toastNotifications = new ToastNotifications();
diff --git a/src/ui/public/react_components.js b/src/ui/public/react_components.js
index e6e262e9b8b8946..f293f227a77ae22 100644
--- a/src/ui/public/react_components.js
+++ b/src/ui/public/react_components.js
@@ -8,9 +8,11 @@ import {
 import { uiModules } from 'ui/modules';
 
 const app = uiModules.get('app/kibana', ['react']);
+
 app.directive('toolBarSearchBox', function (reactDirective) {
   return reactDirective(KuiToolBarSearchBox);
 });
+
 app.directive('confirmModal', function (reactDirective) {
   return reactDirective(KuiConfirmModal);
 });