From 524dc02a7e82eb799902df3ac74e1dcba6f7fd01 Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Wed, 28 Jun 2023 12:14:08 -0400 Subject: [PATCH] [8.9] Fix theming for error toasts (#160219) (#160765) # Backport This will backport the following commits from `main` to `8.9`: - [Fix theming for error toasts (#160219)](https://github.com/elastic/kibana/pull/160219) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Lukas Olson --- .../src/notifications_service.ts | 3 +- .../src/toasts/error_toast.test.tsx | 9 ++- .../src/toasts/error_toast.tsx | 66 ++++++++++--------- .../src/toasts/toasts_api.test.ts | 7 +- .../src/toasts/toasts_api.tsx | 16 ++++- .../src/toasts/toasts_service.tsx | 2 +- 6 files changed, 63 insertions(+), 40 deletions(-) diff --git a/packages/core/notifications/core-notifications-browser-internal/src/notifications_service.ts b/packages/core/notifications/core-notifications-browser-internal/src/notifications_service.ts index 942fe03447d1e..b7babd0cb433d 100644 --- a/packages/core/notifications/core-notifications-browser-internal/src/notifications_service.ts +++ b/packages/core/notifications/core-notifications-browser-internal/src/notifications_service.ts @@ -75,7 +75,8 @@ export class NotificationsService { title, error, openModal: overlays.openModal, - i18nContext: () => i18nDep.Context, + i18n: i18nDep, + theme, }), }; } diff --git a/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.test.tsx b/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.test.tsx index 2af342c2107a7..5c3b07ad3385a 100644 --- a/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.test.tsx +++ b/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.test.tsx @@ -11,6 +11,8 @@ import React from 'react'; import { mountWithIntl } from '@kbn/test-jest-helpers'; import { ErrorToast } from './error_toast'; +import { themeServiceMock } from '@kbn/core-theme-browser-mocks'; +import { i18nServiceMock } from '@kbn/core-i18n-browser-mocks'; interface ErrorToastProps { error?: Error; @@ -19,6 +21,8 @@ interface ErrorToastProps { } let openModal: jest.Mock; +const mockTheme = themeServiceMock.createStartContract(); +const mockI18n = i18nServiceMock.createStartContract(); beforeEach(() => (openModal = jest.fn())); @@ -29,9 +33,8 @@ function render(props: ErrorToastProps = {}) { error={props.error || new Error('error message')} title={props.title || 'An error occured'} toastMessage={props.toastMessage || 'This is the toast message'} - i18nContext={() => - ({ children }) => - {children}} + i18n={mockI18n} + theme={mockTheme} /> ); } diff --git a/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.tsx b/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.tsx index 5cdcf84ccb4ad..c1f66443f7bbc 100644 --- a/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.tsx +++ b/packages/core/notifications/core-notifications-browser-internal/src/toasts/error_toast.tsx @@ -22,13 +22,16 @@ import { EuiSpacer } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; import type { I18nStart } from '@kbn/core-i18n-browser'; import type { OverlayStart } from '@kbn/core-overlays-browser'; +import { ThemeServiceStart } from '@kbn/core-theme-browser'; +import { CoreContextProvider } from '@kbn/core-theme-browser-internal'; interface ErrorToastProps { title: string; error: Error; toastMessage: string; openModal: OverlayStart['openModal']; - i18nContext: () => I18nStart['Context']; + i18n: I18nStart; + theme: ThemeServiceStart; } interface RequestError extends Error { @@ -52,9 +55,9 @@ export function showErrorDialog({ title, error, openModal, - i18nContext, -}: Pick) { - const I18nContext = i18nContext(); + i18n, + theme, +}: Pick) { let text = ''; if (isRequestError(error)) { @@ -68,32 +71,30 @@ export function showErrorDialog({ const modal = openModal( mount( - - - - {title} - - - - {text && ( - - - - {text} - - - )} - - - modal.close()} fill> - - - - - + + + {title} + + + + {text && ( + + + + {text} + + + )} + + + modal.close()} fill> + + + + ) ); } @@ -103,7 +104,8 @@ export function ErrorToast({ error, toastMessage, openModal, - i18nContext, + i18n, + theme, }: ErrorToastProps) { return ( @@ -113,7 +115,7 @@ export function ErrorToast({ size="s" color="danger" data-test-subj="errorToastBtn" - onClick={() => showErrorDialog({ title, error, openModal, i18nContext })} + onClick={() => showErrorDialog({ title, error, openModal, i18n, theme })} > { diff --git a/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_api.tsx b/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_api.tsx index 2b2de9f945c74..bad4e9be1aa0b 100644 --- a/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_api.tsx +++ b/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_api.tsx @@ -22,6 +22,7 @@ import type { ToastInputFields, ToastOptions, } from '@kbn/core-notifications-browser'; +import { ThemeServiceStart } from '@kbn/core-theme-browser'; import { ErrorToast } from './error_toast'; const normalizeToast = (toastOrTitle: ToastInput): ToastInputFields => { @@ -44,15 +45,25 @@ export class ToastsApi implements IToasts { private overlays?: OverlayStart; private i18n?: I18nStart; + private theme?: ThemeServiceStart; constructor(deps: { uiSettings: IUiSettingsClient }) { this.uiSettings = deps.uiSettings; } /** @internal */ - public start({ overlays, i18n }: { overlays: OverlayStart; i18n: I18nStart }) { + public start({ + overlays, + i18n, + theme, + }: { + overlays: OverlayStart; + i18n: I18nStart; + theme: ThemeServiceStart; + }) { this.overlays = overlays; this.i18n = i18n; + this.theme = theme; } /** Observable of the toast messages to show to the user. */ @@ -176,7 +187,8 @@ export class ToastsApi implements IToasts { error={error} title={options.title} toastMessage={message} - i18nContext={() => this.i18n!.Context} + i18n={this.i18n!} + theme={this.theme!} /> ), ...options, diff --git a/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_service.tsx b/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_service.tsx index 18c4804ca6066..726e9cec6b7c9 100644 --- a/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_service.tsx +++ b/packages/core/notifications/core-notifications-browser-internal/src/toasts/toasts_service.tsx @@ -38,7 +38,7 @@ export class ToastsService { } public start({ i18n, overlays, theme, targetDomElement }: StartDeps) { - this.api!.start({ overlays, i18n }); + this.api!.start({ overlays, i18n, theme }); this.targetDomElement = targetDomElement; render(