diff --git a/packages/shared-ux/error_boundary/src/error_boundary.stories.tsx b/packages/shared-ux/error_boundary/src/error_boundary.stories.tsx index ffe33f3058e0c..abcebbca100a8 100644 --- a/packages/shared-ux/error_boundary/src/error_boundary.stories.tsx +++ b/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> = [ { field: 'firstName', name: 'First Name' }, { field: 'lastName', name: 'Last Name' }, { - field: 'github', - name: 'Github', + field: 'action', + name: 'Action', render: () => ( diff --git a/packages/shared-ux/error_boundary/src/error_boundary.tsx b/packages/shared-ux/error_boundary/src/error_boundary.tsx index ba3984449c54b..e1b1071d266e4 100644 --- a/packages/shared-ux/error_boundary/src/error_boundary.tsx +++ b/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) { 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 */} - {}} - 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 ; }; diff --git a/packages/shared-ux/error_boundary/src/error_boundary_services.tsx b/packages/shared-ux/error_boundary/src/error_boundary_services.tsx index 954f4f0ebbc98..e5aaf53efafce 100644 --- a/packages/shared-ux/error_boundary/src/error_boundary_services.tsx +++ b/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(null); +const StatefulToastList = ({ toasts$ }: { toasts$: Rx.Observable }) => { + const toasts = useObservable(toasts$); + return {}} toastLifeTimeMs={9000} />; +}; + /** * A Context Provider for Jest and Storybooks */ @@ -26,6 +34,7 @@ export const ErrorBoundaryProvider: FC = ({ return ( {children} + ); }; @@ -38,14 +47,20 @@ export const ErrorBoundaryKibanaProvider: FC = // ...dependencies }) => { const reloadWindow = () => window.location.reload(); + const toastsService = new ToastsService({ reloadWindow }); const value: ErrorBoundaryServices = { reloadWindow, errorService: new ErrorService(), - toastsService: new ToastsService({ reloadWindow }), + toastsService, }; - return {children}; + return ( + + {children} + + + ); }; /** diff --git a/packages/shared-ux/error_boundary/src/error_service.ts b/packages/shared-ux/error_boundary/src/error_service.ts index db6eb90757f9f..58904f41d099e 100644 --- a/packages/shared-ux/error_boundary/src/error_service.ts +++ b/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 } } diff --git a/packages/shared-ux/error_boundary/src/toasts_service.tsx b/packages/shared-ux/error_boundary/src/toasts_service.tsx index 0222f7b112f2f..ba7240916832c 100644 --- a/packages/shared-ux/error_boundary/src/toasts_service.tsx +++ b/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(); } diff --git a/packages/shared-ux/error_boundary/types.ts b/packages/shared-ux/error_boundary/types.ts index 2151941c8a896..77b1660d924a0 100644 --- a/packages/shared-ux/error_boundary/types.ts +++ b/packages/shared-ux/error_boundary/types.ts @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import { EuiGlobalToastListProps } from '@elastic/eui'; import { ErrorService } from './src/error_service'; import { ToastsService } from './src/toasts_service'; @@ -13,6 +14,8 @@ export interface ErrorBoundaryUIServices { reloadWindow: () => void; } +export type Toasts = EuiGlobalToastListProps['toasts']; + /** * Services that are consumed internally in this component. * @internal