diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx index 212c8977a88526..b22ff406a1605e 100644 --- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/index.tsx @@ -18,7 +18,7 @@ import { import { useHistory } from 'react-router-dom'; import { FormattedMessage } from '@kbn/i18n/react'; import { i18n } from '@kbn/i18n'; -import { useKibana } from '../../../../../../../../../src/plugins/kibana_react/public'; +import { useToasts } from '../../../../../common/lib/kibana'; import { useHostSelector } from '../hooks'; import { urlFromQueryParams } from '../url_from_query_params'; import { @@ -44,7 +44,7 @@ import { useFormatUrl } from '../../../../../common/components/link_to'; export const HostDetailsFlyout = memo(() => { const history = useHistory(); - const { notifications } = useKibana(); + const toasts = useToasts(); const queryParams = useHostSelector(uiQueryParams); const { selected_host: selectedHost, ...queryParamsWithoutSelectedHost } = queryParams; const details = useHostSelector(detailsData); @@ -58,23 +58,16 @@ export const HostDetailsFlyout = memo(() => { useEffect(() => { if (error !== undefined) { - notifications.toasts.danger({ - title: ( - - ), - body: ( - - ), - toastLifeTimeMs: 10000, + toasts.addDanger({ + title: i18n.translate('xpack.securitySolution.endpoint.host.details.errorTitle', { + defaultMessage: 'Could not find host', + }), + text: i18n.translate('xpack.securitySolution.endpoint.host.details.errorBody', { + defaultMessage: 'Please exit the flyout and select an available host.', + }), }); } - }, [error, notifications.toasts]); + }, [error, toasts]); return ( diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx index 6ed4e06ee51c5c..03ab32dcb2b66b 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.test.tsx @@ -255,11 +255,11 @@ describe('Policy Details', () => { policyView.update(); // Toast notification should be shown - const toastAddMock = coreStart.notifications.toasts.add.mock; + const toastAddMock = coreStart.notifications.toasts.addSuccess.mock; expect(toastAddMock.calls).toHaveLength(1); expect(toastAddMock.calls[0][0]).toMatchObject({ - color: 'success', - iconType: 'check', + title: 'Success!', + text: expect.any(Function), }); }); it('should show an error notification toast if update fails', async () => { @@ -270,11 +270,11 @@ describe('Policy Details', () => { policyView.update(); // Toast notification should be shown - const toastAddMock = coreStart.notifications.toasts.add.mock; + const toastAddMock = coreStart.notifications.toasts.addDanger.mock; expect(toastAddMock.calls).toHaveLength(1); expect(toastAddMock.calls[0][0]).toMatchObject({ - color: 'danger', - iconType: 'alert', + title: 'Failed!', + text: expect.any(String), }); }); }); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx index cd63991dbac93f..d309faf59d0443 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_details.tsx @@ -31,11 +31,12 @@ import { isLoading, apiError, } from '../store/policy_details/selectors'; -import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public'; +import { useKibana, toMountPoint } from '../../../../../../../../src/plugins/kibana_react/public'; import { AgentsSummary } from './agents_summary'; import { VerticalDivider } from './vertical_divider'; import { WindowsEvents, MacEvents, LinuxEvents } from './policy_forms/events'; import { MalwareProtections } from './policy_forms/protections/malware'; +import { useToasts } from '../../../../common/lib/kibana'; import { AppAction } from '../../../../common/store/actions'; import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler'; import { PageViewHeaderTitle } from '../../../../common/components/endpoint/page_view'; @@ -51,11 +52,11 @@ import { PolicyDetailsRouteState } from '../../../../../common/endpoint/types'; export const PolicyDetails = React.memo(() => { const dispatch = useDispatch<(action: AppAction) => void>(); const { - notifications, services: { application: { navigateToApp }, }, } = useKibana(); + const toasts = useToasts(); const { formatUrl } = useFormatUrl(SecurityPageName.administration); const { state: locationRouteState } = useLocation(); @@ -76,15 +77,14 @@ export const PolicyDetails = React.memo(() => { useEffect(() => { if (policyUpdateStatus) { if (policyUpdateStatus.success) { - notifications.toasts.success({ - toastLifeTimeMs: 10000, + toasts.addSuccess({ title: i18n.translate( 'xpack.securitySolution.endpoint.policy.details.updateSuccessTitle', { defaultMessage: 'Success!', } ), - body: ( + text: toMountPoint( { navigateToApp(...routeState.onSaveNavigateTo); } } else { - notifications.toasts.danger({ - toastLifeTimeMs: 10000, + toasts.addDanger({ title: i18n.translate('xpack.securitySolution.endpoint.policy.details.updateErrorTitle', { defaultMessage: 'Failed!', }), - body: <>{policyUpdateStatus.error!.message}, + text: policyUpdateStatus.error!.message, }); } } - }, [navigateToApp, notifications.toasts, policyName, policyUpdateStatus, routeState]); + }, [navigateToApp, toasts, policyName, policyUpdateStatus, routeState]); const handleBackToListOnClick = useNavigateByRouterEventHandler(hostListRouterPath); diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx index 667aacd9df3bf9..246dbeb39886fb 100644 --- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx +++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_list.tsx @@ -36,6 +36,7 @@ import { CreateStructuredSelector } from '../../../../common/store'; import * as selectors from '../store/policy_list/selectors'; import { usePolicyListSelector } from './policy_hooks'; import { PolicyListAction } from '../store/policy_list'; +import { useToasts } from '../../../../common/lib/kibana'; import { useKibana } from '../../../../../../../../src/plugins/kibana_react/public'; import { Immutable, PolicyData } from '../../../../../common/endpoint/types'; import { useNavigateByRouterEventHandler } from '../../../../common/hooks/endpoint/use_navigate_by_router_event_handler'; @@ -124,7 +125,8 @@ const PolicyLink: React.FC<{ name: string; route: string; href: string }> = ({ const selector = (createStructuredSelector as CreateStructuredSelector)(selectors); export const PolicyList = React.memo(() => { - const { services, notifications } = useKibana(); + const { services } = useKibana(); + const toasts = useToasts(); const history = useHistory(); const location = useLocation(); const { formatUrl, search } = useFormatUrl(SecurityPageName.administration); @@ -167,13 +169,12 @@ export const PolicyList = React.memo(() => { useEffect(() => { if (apiError) { - notifications.toasts.danger({ + toasts.addDanger({ title: apiError.error, - body: apiError.message, - toastLifeTimeMs: 10000, + text: apiError.message, }); } - }, [apiError, dispatch, notifications.toasts]); + }, [apiError, dispatch, toasts]); // Handle showing update statuses useEffect(() => { @@ -181,31 +182,29 @@ export const PolicyList = React.memo(() => { if (deleteStatus === true) { setPolicyIdToDelete(''); setShowDelete(false); - notifications.toasts.success({ - toastLifeTimeMs: 10000, + toasts.addSuccess({ title: i18n.translate('xpack.securitySolution.endpoint.policyList.deleteSuccessToast', { defaultMessage: 'Success!', }), - body: ( - + text: i18n.translate( + 'xpack.securitySolution.endpoint.policyList.deleteSuccessToastDetails', + { + defaultMessage: 'Policy has been deleted.', + } ), }); } else { - notifications.toasts.danger({ - toastLifeTimeMs: 10000, + toasts.addDanger({ title: i18n.translate('xpack.securitySolution.endpoint.policyList.deleteFailedToast', { defaultMessage: 'Failed!', }), - body: i18n.translate('xpack.securitySolution.endpoint.policyList.deleteFailedToastBody', { + text: i18n.translate('xpack.securitySolution.endpoint.policyList.deleteFailedToastBody', { defaultMessage: 'Failed to delete policy', }), }); } } - }, [notifications.toasts, deleteStatus]); + }, [toasts, deleteStatus]); const paginationSetup = useMemo(() => { return {