Remove GlobalToastList wrapper directive. Add onChange callback. (#16375) (#16405)

* Remove GlobalToastList wrapper directive. Add onChange callback.
* Skip flaky tag cloud test.

src/ui/public/chrome/directives/kbn_chrome.html

@@ -27,11 +27,7 @@
         </div>
       </div>
 
-      <global-toast-list
-        toasts="toastNotifications"
-        dismiss-toast="dismissToast"
-        toast-life-time-ms="TOAST_LIFE_TIME_MS"
-      ></global-toast-list>
+      <div id="globalToastList"></div>
 
       <kbn-loading-indicator></kbn-loading-indicator>
 

src/ui/public/chrome/directives/kbn_chrome.js

@@ -1,3 +1,5 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
 import $ from 'jquery';
 import { remove } from 'lodash';
 
@@ -8,7 +10,7 @@ import {
   getUnhashableStatesProvider,
   unhashUrl,
 } from 'ui/state_management/state_hashing';
-import { notify, toastNotifications, createFirstIndexPatternPrompt } from 'ui/notify';
+import { notify, GlobalToastList, toastNotifications, createFirstIndexPatternPrompt } from 'ui/notify';
 import { SubUrlRouteFilterProvider } from './sub_url_route_filter';
 
 export function kbnChromeProvider(chrome, internals) {
@@ -69,9 +71,22 @@ export function kbnChromeProvider(chrome, internals) {
 
           // Notifications
           $scope.notifList = notify._notifs;
-          $scope.toastNotifications = toastNotifications.list;
-          $scope.dismissToast = toastNotifications.remove;
-          $scope.TOAST_LIFE_TIME_MS = 6000;
+
+          const globalToastList = instance => {
+            toastNotifications.onChange(() => {
+              instance.forceUpdate();
+            });
+          };
+
+          ReactDOM.render(
+            <GlobalToastList
+              ref={globalToastList}
+              toasts={toastNotifications.list}
+              dismissToast={toastNotifications.remove}
+              toastLifeTimeMs={6000}
+            />,
+            document.getElementById('globalToastList')
+          );
 
           $scope.createFirstIndexPatternPrompt = createFirstIndexPatternPrompt;
 

src/ui/public/notify/index.js

@@ -1,5 +1,5 @@
 export { notify } from './notify';
 export { Notifier } from './notifier';
 export { fatalError, fatalErrorInternals, addFatalErrorCallback } from './fatal_error';
-export { toastNotifications } from './toasts';
+export { GlobalToastList, toastNotifications } from './toasts';
 export { createFirstIndexPatternPrompt } from './create_first_index_pattern_prompt';

src/ui/public/notify/toasts/global_toast_list.js

@@ -2,8 +2,6 @@ import React, {
   Component,
 } from 'react';
 import PropTypes from 'prop-types';
-import 'ngreact';
-import { uiModules } from 'ui/modules';
 
 import {
   EuiGlobalToastList,
@@ -125,13 +123,3 @@ export class GlobalToastList extends Component {
     );
   }
 }
-
-const app = uiModules.get('app/kibana', ['react']);
-
-app.directive('globalToastList', function (reactDirective) {
-  return reactDirective(GlobalToastList, [
-    'toasts',
-    'toastLifeTimeMs',
-    ['dismissToast', { watchDepth: 'reference' }],
-  ]);
-});

src/ui/public/notify/toasts/index.js

@@ -1,2 +1,2 @@
-import './global_toast_list';
+export { GlobalToastList } from './global_toast_list';
 export { toastNotifications } from './toast_notifications';

src/ui/public/notify/toasts/toast_notifications.js

@@ -8,24 +8,40 @@ const normalizeToast = toastOrTitle => {
   return toastOrTitle;
 };
 
+let onChangeCallback;
+
 export class ToastNotifications {
   constructor() {
     this.list = [];
     this.idCounter = 0;
   }
 
+  onChange = callback => {
+    onChangeCallback = callback;
+  };
+
   add = toastOrTitle => {
     const toast = {
       id: this.idCounter++,
       ...normalizeToast(toastOrTitle),
     };
+
     this.list.push(toast);
+
+    if (onChangeCallback) {
+      onChangeCallback();
+    }
+
     return toast;
   };
 
   remove = toast => {
     const index = this.list.indexOf(toast);
     this.list.splice(index, 1);
+
+    if (onChangeCallback) {
+      onChangeCallback();
+    }
   };
 
   addSuccess = toastOrTitle => {

src/ui/public/notify/toasts/toast_notifications.test.js

@@ -1,3 +1,5 @@
+import sinon from 'sinon';
+
 import {
   ToastNotifications,
 } from './toast_notifications';
@@ -41,6 +43,23 @@ describe('ToastNotifications', () => {
       });
     });
 
+    describe('onChange method', () => {
+      test('callback is called when a toast is added', () => {
+        const onChangeSpy = sinon.spy();
+        toastNotifications.onChange(onChangeSpy);
+        toastNotifications.add({});
+        expect(onChangeSpy.callCount).toBe(1);
+      });
+
+      test('callback is called when a toast is removed', () => {
+        const onChangeSpy = sinon.spy();
+        toastNotifications.onChange(onChangeSpy);
+        const toast = toastNotifications.add({});
+        toastNotifications.remove(toast);
+        expect(onChangeSpy.callCount).toBe(2);
+      });
+    });
+
     describe('addSuccess method', () => {
       test('adds a success toast', () => {
         toastNotifications.addSuccess({});

test/functional/apps/visualize/_tag_cloud.js

@@ -61,7 +61,7 @@ export default function ({ getService, getPageObjects }) {
         expect(spyToggleExists).to.be(true);
       });
 
-      it('should show correct tag cloud data', async function () {
+      it.skip('should show correct tag cloud data', async function () {
         const data = await PageObjects.visualize.getTextTag();
         log.debug(data);
         expect(data).to.eql([ '32,212,254,720', '21,474,836,480', '20,401,094,656', '19,327,352,832', '18,253,611,008' ]);