[toasts] migrate toastNotifications to the new platform (elastic#21772)

Fixes elastic#20698 As part of the transition of APIs necessary for migrating the Chrome to the new platform, this moves the core logic for the toastNotifications out of `ui/notify` and into the new platform as the `core.notifications.toasts` service. I chose to use the `notifications` namespace here as I plan for the [`banners` service](https://github.com/elastic/kibana/blob/494c267cd97ba0c48c2acd10a8fff2c27defd0bb/src/ui/public/notify/banners/banners.js) from `ui/notify` to eventually live at `core.notifications.banners`. If you disagree with this strategy and would prefer that we use something like `core.toastNotifications` let me know. For the most part this service just does the same thing as the ui service did, so functionality should be exactly the same. To test the notifications I suggest using the testbed like so: https://gist.github.com/spalger/81097177c88dee142700fab25de88932
spalger · Aug 14, 2018 · c01c2f9 · c01c2f9
1 parent 1e6fb80
commit c01c2f9
Show file tree

Hide file tree

Showing 25 changed files with 752 additions and 143 deletions.
diff --git a/src/core/public/core_system.test.ts b/src/core/public/core_system.test.ts
@@ -20,6 +20,7 @@
 import { FatalErrorsService } from './fatal_errors';
 import { InjectedMetadataService } from './injected_metadata';
 import { LegacyPlatformService } from './legacy_platform';
+import { NotificationsService } from './notifications';
 
 const MockLegacyPlatformService = jest.fn<LegacyPlatformService>(
   function _MockLegacyPlatformService(this: any) {
@@ -52,6 +53,18 @@ jest.mock('./fatal_errors', () => ({
   FatalErrorsService: MockFatalErrorsService,
 }));
 
+const mockNotificationStartContract = {};
+const MockNotificationsService = jest.fn<NotificationsService>(function _MockNotificationsService(
+  this: any
+) {
+  this.start = jest.fn().mockReturnValue(mockNotificationStartContract);
+  this.add = jest.fn();
+  this.stop = jest.fn();
+});
+jest.mock('./notifications', () => ({
+  NotificationsService: MockNotificationsService,
+}));
+
 import { CoreSystem } from './core_system';
 jest.spyOn(CoreSystem.prototype, 'stop');
 
@@ -74,6 +87,8 @@ describe('constructor', () => {
 
     expect(MockInjectedMetadataService).toHaveBeenCalledTimes(1);
     expect(MockLegacyPlatformService).toHaveBeenCalledTimes(1);
+    expect(MockFatalErrorsService).toHaveBeenCalledTimes(1);
+    expect(MockNotificationsService).toHaveBeenCalledTimes(1);
   });
 
   it('passes injectedMetadata param to InjectedMetadataService', () => {
@@ -92,14 +107,12 @@ describe('constructor', () => {
   });
 
   it('passes requireLegacyFiles, useLegacyTestHarness, and a dom element to LegacyPlatformService', () => {
-    const rootDomElement = document.createElement('div');
     const requireLegacyFiles = { requireLegacyFiles: true } as any;
     const useLegacyTestHarness = { useLegacyTestHarness: true } as any;
 
     // tslint:disable no-unused-expression
     new CoreSystem({
       ...defaultCoreSystemParams,
-      rootDomElement,
       requireLegacyFiles,
       useLegacyTestHarness,
     });
@@ -112,6 +125,18 @@ describe('constructor', () => {
     });
   });
 
+  it('passes a dom element to NotificationsService', () => {
+    // tslint:disable no-unused-expression
+    new CoreSystem({
+      ...defaultCoreSystemParams,
+    });
+
+    expect(MockNotificationsService).toHaveBeenCalledTimes(1);
+    expect(MockNotificationsService).toHaveBeenCalledWith({
+      targetDomElement: expect.any(HTMLElement),
+    });
+  });
+
   it('passes injectedMetadata, rootDomElement, and a stopCoreSystem function to FatalErrorsService', () => {
     const rootDomElement = document.createElement('div');
     const injectedMetadata = { injectedMetadata: true } as any;
@@ -161,11 +186,11 @@ describe('#start()', () => {
     core.start();
   }
 
-  it('clears the children of the rootDomElement and appends container for legacyPlatform', () => {
+  it('clears the children of the rootDomElement and appends container for legacyPlatform and notifications', () => {
     const root = document.createElement('div');
     root.innerHTML = '<p>foo bar</p>';
     startCore(root);
-    expect(root.innerHTML).toBe('<div></div>');
+    expect(root.innerHTML).toBe('<div></div><div></div>');
   });
 
   it('calls injectedMetadata#start()', () => {
@@ -181,6 +206,13 @@ describe('#start()', () => {
     expect(mockInstance.start).toHaveBeenCalledTimes(1);
     expect(mockInstance.start).toHaveBeenCalledWith();
   });
+
+  it('calls notifications#start()', () => {
+    startCore();
+    const [mockInstance] = MockNotificationsService.mock.instances;
+    expect(mockInstance.start).toHaveBeenCalledTimes(1);
+    expect(mockInstance.start).toHaveBeenCalledWith();
+  });
 });
 
 describe('LegacyPlatform targetDomElement', () => {
@@ -207,3 +239,28 @@ describe('LegacyPlatform targetDomElement', () => {
     expect(targetDomElementParentInStart!).toBe(rootDomElement);
   });
 });
+
+describe('Notifications targetDomElement', () => {
+  it('only mounts the element when started, before starting the notificationsService', () => {
+    const rootDomElement = document.createElement('div');
+    const core = new CoreSystem({
+      ...defaultCoreSystemParams,
+      rootDomElement,
+    });
+
+    const [notifications] = MockNotificationsService.mock.instances;
+
+    let targetDomElementParentInStart: HTMLElement;
+    (notifications as any).start.mockImplementation(() => {
+      targetDomElementParentInStart = targetDomElement.parentElement;
+    });
+
+    // targetDomElement should not have a parent element when the LegacyPlatformService is constructed
+    const [[{ targetDomElement }]] = MockNotificationsService.mock.calls;
+    expect(targetDomElement).toHaveProperty('parentElement', null);
+
+    // starting the core system should mount the targetDomElement as a child of the rootDomElement
+    core.start();
+    expect(targetDomElementParentInStart!).toBe(rootDomElement);
+  });
+});
diff --git a/src/core/public/core_system.ts b/src/core/public/core_system.ts
@@ -21,6 +21,7 @@ import './core.css';
 import { FatalErrorsService } from './fatal_errors';
 import { InjectedMetadataParams, InjectedMetadataService } from './injected_metadata';
 import { LegacyPlatformParams, LegacyPlatformService } from './legacy_platform';
+import { NotificationsService } from './notifications';
 
 interface Params {
   rootDomElement: HTMLElement;
@@ -39,8 +40,10 @@ export class CoreSystem {
   private readonly fatalErrors: FatalErrorsService;
   private readonly injectedMetadata: InjectedMetadataService;
   private readonly legacyPlatform: LegacyPlatformService;
+  private readonly notifications: NotificationsService;
 
   private readonly rootDomElement: HTMLElement;
+  private readonly notificationsTargetDomElement: HTMLDivElement;
   private readonly legacyPlatformTargetDomElement: HTMLDivElement;
 
   constructor(params: Params) {
@@ -60,6 +63,11 @@ export class CoreSystem {
       },
     });
 
+    this.notificationsTargetDomElement = document.createElement('div');
+    this.notifications = new NotificationsService({
+      targetDomElement: this.notificationsTargetDomElement,
+    });
+
     this.legacyPlatformTargetDomElement = document.createElement('div');
     this.legacyPlatform = new LegacyPlatformService({
       targetDomElement: this.legacyPlatformTargetDomElement,
@@ -73,18 +81,21 @@ export class CoreSystem {
       // ensure the rootDomElement is empty
       this.rootDomElement.textContent = '';
       this.rootDomElement.classList.add('coreSystemRootDomElement');
+      this.rootDomElement.appendChild(this.notificationsTargetDomElement);
       this.rootDomElement.appendChild(this.legacyPlatformTargetDomElement);
 
+      const notifications = this.notifications.start();
       const injectedMetadata = this.injectedMetadata.start();
       const fatalErrors = this.fatalErrors.start();
-      this.legacyPlatform.start({ injectedMetadata, fatalErrors });
+      this.legacyPlatform.start({ injectedMetadata, fatalErrors, notifications });
     } catch (error) {
       this.fatalErrors.add(error);
     }
   }
 
   public stop() {
     this.legacyPlatform.stop();
+    this.notifications.stop();
     this.rootDomElement.textContent = '';
   }
 }
diff --git a/src/core/public/fatal_errors/fatal_errors_screen.test.tsx b/src/core/public/fatal_errors/fatal_errors_screen.test.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore EuiCallOut not available until we upgrade to EUI 3.1.0
 import { EuiCallOut } from '@elastic/eui';
 import testSubjSelector from '@kbn/test-subj-selector';
 import { mount, shallow } from 'enzyme';

diff --git a/src/core/public/fatal_errors/fatal_errors_screen.tsx b/src/core/public/fatal_errors/fatal_errors_screen.tsx
@@ -20,11 +20,8 @@
 import {
   EuiButton,
   EuiButtonEmpty,
-  // @ts-ignore EuiCallOut not available until we upgrade to EUI 3.1.0
   EuiCallOut,
-  // @ts-ignore EuiCodeBlock not available until we upgrade to EUI 3.1.0
   EuiCodeBlock,
-  // @ts-ignore EuiEmptyPrompt not available until we upgrade to EUI 3.1.0
   EuiEmptyPrompt,
   EuiPage,
   EuiPageBody,

diff --git a/src/core/public/legacy_platform/legacy_platform_service.test.ts b/src/core/public/legacy_platform/legacy_platform_service.test.ts
@@ -53,9 +53,20 @@ jest.mock('ui/notify/fatal_error', () => {
   };
 });
 
+const mockNotifyToastsInit = jest.fn();
+jest.mock('ui/notify/toasts', () => {
+  mockLoadOrder.push('ui/notify/toasts');
+  return {
+    __newPlatformInit__: mockNotifyToastsInit,
+  };
+});
+
 import { LegacyPlatformService } from './legacy_platform_service';
 
 const fatalErrorsStartContract = {} as any;
+const notificationsStartContract = {
+  toasts: {},
+} as any;
 
 const injectedMetadataStartContract = {
   getLegacyMetadata: jest.fn(),
@@ -88,6 +99,7 @@ describe('#start()', () => {
       legacyPlatform.start({
         fatalErrors: fatalErrorsStartContract,
         injectedMetadata: injectedMetadataStartContract,
+        notifications: notificationsStartContract,
       });
 
       expect(mockUiMetadataInit).toHaveBeenCalledTimes(1);
@@ -102,12 +114,28 @@ describe('#start()', () => {
       legacyPlatform.start({
         fatalErrors: fatalErrorsStartContract,
         injectedMetadata: injectedMetadataStartContract,
+        notifications: notificationsStartContract,
       });
 
       expect(mockFatalErrorInit).toHaveBeenCalledTimes(1);
       expect(mockFatalErrorInit).toHaveBeenCalledWith(fatalErrorsStartContract);
     });
 
+    it('passes toasts service to ui/notify/toasts', () => {
+      const legacyPlatform = new LegacyPlatformService({
+        ...defaultParams,
+      });
+
+      legacyPlatform.start({
+        fatalErrors: fatalErrorsStartContract,
+        injectedMetadata: injectedMetadataStartContract,
+        notifications: notificationsStartContract,
+      });
+
+      expect(mockNotifyToastsInit).toHaveBeenCalledTimes(1);
+      expect(mockNotifyToastsInit).toHaveBeenCalledWith(notificationsStartContract.toasts);
+    });
+
     describe('useLegacyTestHarness = false', () => {
       it('passes the targetDomElement to ui/chrome', () => {
         const legacyPlatform = new LegacyPlatformService({
@@ -117,6 +145,7 @@ describe('#start()', () => {
         legacyPlatform.start({
           fatalErrors: fatalErrorsStartContract,
           injectedMetadata: injectedMetadataStartContract,
+          notifications: notificationsStartContract,
         });
 
         expect(mockUiTestHarnessBootstrap).not.toHaveBeenCalled();
@@ -134,6 +163,7 @@ describe('#start()', () => {
         legacyPlatform.start({
           fatalErrors: fatalErrorsStartContract,
           injectedMetadata: injectedMetadataStartContract,
+          notifications: notificationsStartContract,
         });
 
         expect(mockUiChromeBootstrap).not.toHaveBeenCalled();
@@ -155,11 +185,13 @@ describe('#start()', () => {
         legacyPlatform.start({
           fatalErrors: fatalErrorsStartContract,
           injectedMetadata: injectedMetadataStartContract,
+          notifications: notificationsStartContract,
         });
 
         expect(mockLoadOrder).toEqual([
           'ui/metadata',
           'ui/notify/fatal_error',
+          'ui/notify/toasts',
           'ui/chrome',
           'legacy files',
         ]);
@@ -178,11 +210,13 @@ describe('#start()', () => {
         legacyPlatform.start({
           fatalErrors: fatalErrorsStartContract,
           injectedMetadata: injectedMetadataStartContract,
+          notifications: notificationsStartContract,
         });
 
         expect(mockLoadOrder).toEqual([
           'ui/metadata',
           'ui/notify/fatal_error',
+          'ui/notify/toasts',
           'ui/test_harness',
           'legacy files',
         ]);

diff --git a/src/core/public/legacy_platform/legacy_platform_service.ts b/src/core/public/legacy_platform/legacy_platform_service.ts
@@ -20,10 +20,12 @@
 import angular from 'angular';
 import { FatalErrorsStartContract } from '../fatal_errors';
 import { InjectedMetadataStartContract } from '../injected_metadata';
+import { NotificationsStartContract } from '../notifications';
 
 interface Deps {
   injectedMetadata: InjectedMetadataStartContract;
   fatalErrors: FatalErrorsStartContract;
+  notifications: NotificationsStartContract;
 }
 
 export interface LegacyPlatformParams {
@@ -42,11 +44,12 @@ export interface LegacyPlatformParams {
 export class LegacyPlatformService {
   constructor(private readonly params: LegacyPlatformParams) {}
 
-  public start({ injectedMetadata, fatalErrors }: Deps) {
+  public start({ injectedMetadata, fatalErrors, notifications }: Deps) {
     // Inject parts of the new platform into parts of the legacy platform
     // so that legacy APIs/modules can mimic their new platform counterparts
     require('ui/metadata').__newPlatformInit__(injectedMetadata.getLegacyMetadata());
     require('ui/notify/fatal_error').__newPlatformInit__(fatalErrors);
+    require('ui/notify/toasts').__newPlatformInit__(notifications.toasts);
 
     // Load the bootstrap module before loading the legacy platform files so that
     // the bootstrap module can modify the environment a bit first

diff --git a/src/ui/public/notify/toasts/index.js → src/core/public/notifications/index.ts b/src/ui/public/notify/toasts/index.js → src/core/public/notifications/index.ts
@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { GlobalToastList } from './global_toast_list';
-export { toastNotifications } from './toast_notifications';
+export { Toast, ToastInput, ToastsStartContract } from './toasts';
+export { NotificationsService, NotificationsStartContract } from './notifications_service';
diff --git a/src/core/public/notifications/notifications_service.ts b/src/core/public/notifications/notifications_service.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { ToastsService } from './toasts';
+
+interface Params {
+  targetDomElement: HTMLElement;
+}
+
+export class NotificationsService {
+  private readonly toasts: ToastsService;
+
+  private readonly toastsContainer: HTMLElement;
+
+  constructor(private readonly params: Params) {
+    this.toastsContainer = document.createElement('div');
+    this.toasts = new ToastsService({
+      targetDomElement: this.toastsContainer,
+    });
+  }
+
+  public start() {
+    this.params.targetDomElement.appendChild(this.toastsContainer);
+
+    return {
+      toasts: this.toasts.start(),
+    };
+  }
+
+  public stop() {
+    this.toasts.stop();
+
+    this.params.targetDomElement.textContent = '';
+  }
+}
+
+export type NotificationsStartContract = ReturnType<NotificationsService['start']>;