StatefulToastList

packages/shared-ux/error_boundary/src/error_boundary.stories.tsx

@@ -68,34 +68,34 @@ export const ErrorInToast: Story = () => {
     id: string;
     firstName: string | null | undefined;
     lastName: string;
-    github: string;
+    action: string;
   }> = [];
 
   users.push({
     id: 'user-123',
     firstName: 'Rodger',
     lastName: 'Turcotte',
-    github: 'Rodger.Turcotte',
+    action: 'Rodger.Turcotte',
   });
   users.push({
     id: 'user-345',
     firstName: 'Bella',
     lastName: 'Cremin',
-    github: 'Bella23',
+    action: 'Bella23',
   });
   users.push({
     id: 'user-678',
     firstName: 'Layne',
     lastName: 'Franecki',
-    github: 'The_Real_Layne_2',
+    action: 'The_Real_Layne_2',
   });
 
   const columns: Array<EuiBasicTableColumn<typeof users[number]>> = [
     { field: 'firstName', name: 'First Name' },
     { field: 'lastName', name: 'Last Name' },
     {
-      field: 'github',
-      name: 'Github',
+      field: 'action',
+      name: 'Action',
       render: () => (
         <ErrorBoundary>
           <BadComponent />

packages/shared-ux/error_boundary/src/error_boundary.tsx

@@ -9,9 +9,7 @@
 import React from 'react';
 import useObservable from 'react-use/lib/useObservable';
 
-import { EuiGlobalToastList, EuiGlobalToastListProps } from '@elastic/eui';
-
-import { ErrorBoundaryServices } from '../types';
+import { ErrorBoundaryServices, Toasts } from '../types';
 import { useErrorBoundary } from './error_boundary_services';
 import { ErrorCallout, ErrorInline } from './toasts_service';
 
@@ -30,7 +28,7 @@ interface ErrorBoundaryProps {
   /**
    * List of toasts to pass to the EuiGlobalToastList
    */
-  toasts?: EuiGlobalToastListProps['toasts'];
+  toasts?: Toasts;
   /**
    *
    */
@@ -52,9 +50,9 @@ class ErrorBoundaryInternal extends React.Component<
 
   componentDidCatch(error: Error, errorInfo: Partial<React.ErrorInfo>) {
     this.setState(() => {
-      this.props.errorService.onError(error); // capture telemetry
+      // this.props.errorService.onError(error); // capture telemetry
       if (this.state.messageAs === 'toast') {
-        this.props.toastsService.addError(error); // error *might* need to be shown in toast
+        this.props.toastsService.addError(error);
       }
       return { error, errorInfo };
     });
@@ -63,7 +61,6 @@ class ErrorBoundaryInternal extends React.Component<
   render() {
     if (this.state.error != null) {
       const { error, errorInfo } = this.state;
-
       const { errorComponentName } = this.props.errorService.getErrorComponentName(errorInfo);
 
       if (this.state.messageAs === 'callout') {
@@ -87,12 +84,6 @@ class ErrorBoundaryInternal extends React.Component<
             name={errorComponentName}
             reloadWindow={this.props.reloadWindow}
           />
-          {/* DOM ref for toasts list */}
-          <EuiGlobalToastList
-            toasts={this.props.toasts}
-            dismissToast={() => {}}
-            toastLifeTimeMs={9000}
-          />
         </>
       );
     }
@@ -104,6 +95,6 @@ class ErrorBoundaryInternal extends React.Component<
 
 export const ErrorBoundary = (props: ErrorBoundaryProps) => {
   const services = useErrorBoundary();
-  const toasts = useObservable(services.toastsService.toasts);
+  const toasts = useObservable(services.toastsService.toasts$);
   return <ErrorBoundaryInternal {...props} {...services} toasts={toasts} />;
 };

packages/shared-ux/error_boundary/src/error_boundary_services.tsx

@@ -6,14 +6,22 @@
  * Side Public License, v 1.
  */
 
+import { EuiGlobalToastList } from '@elastic/eui';
 import React, { FC, useContext } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import * as Rx from 'rxjs';
 
-import { ErrorBoundaryKibanaDependencies, ErrorBoundaryServices } from '../types';
+import { ErrorBoundaryKibanaDependencies, ErrorBoundaryServices, Toasts } from '../types';
 import { ErrorService } from './error_service';
 import { ToastsService } from './toasts_service';
 
 const Context = React.createContext<ErrorBoundaryServices | null>(null);
 
+const StatefulToastList = ({ toasts$ }: { toasts$: Rx.Observable<Toasts> }) => {
+  const toasts = useObservable(toasts$);
+  return <EuiGlobalToastList toasts={toasts} dismissToast={() => {}} toastLifeTimeMs={9000} />;
+};
+
 /**
  * A Context Provider for Jest and Storybooks
  */
@@ -26,6 +34,7 @@ export const ErrorBoundaryProvider: FC<ErrorBoundaryServices> = ({
   return (
     <Context.Provider value={{ reloadWindow, errorService, toastsService }}>
       {children}
+      <StatefulToastList toasts$={toastsService.toasts$} />
     </Context.Provider>
   );
 };
@@ -38,14 +47,20 @@ export const ErrorBoundaryKibanaProvider: FC<ErrorBoundaryKibanaDependencies> =
   // ...dependencies
 }) => {
   const reloadWindow = () => window.location.reload();
+  const toastsService = new ToastsService({ reloadWindow });
 
   const value: ErrorBoundaryServices = {
     reloadWindow,
     errorService: new ErrorService(),
-    toastsService: new ToastsService({ reloadWindow }),
+    toastsService,
   };
 
-  return <Context.Provider value={value}>{children}</Context.Provider>;
+  return (
+    <Context.Provider value={value}>
+      {children}
+      <StatefulToastList toasts$={toastsService.toasts$} />
+    </Context.Provider>
+  );
 };
 
 /**

packages/shared-ux/error_boundary/src/error_service.ts

@@ -36,7 +36,6 @@ export class ErrorService {
   }
 
   onError(error: Error) {
-    // TODO track errors in state
     // TODO: telemetry
   }
 }

packages/shared-ux/error_boundary/src/toasts_service.tsx

@@ -123,7 +123,7 @@ export class ToastsService {
 
   constructor(private services: ErrorBoundaryUIServices) {}
 
-  public get toasts() {
+  public get toasts$() {
     return this._toasts.asObservable();
   }
 

packages/shared-ux/error_boundary/types.ts

@@ -6,13 +6,16 @@
  * Side Public License, v 1.
  */
 
+import { EuiGlobalToastListProps } from '@elastic/eui';
 import { ErrorService } from './src/error_service';
 import { ToastsService } from './src/toasts_service';
 
 export interface ErrorBoundaryUIServices {
   reloadWindow: () => void;
 }
 
+export type Toasts = EuiGlobalToastListProps['toasts'];
+
 /**
  * Services that are consumed internally in this component.
  * @internal