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 212c8977a8852..b22ff406a1605 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 6ed4e06ee51c5..03ab32dcb2b66 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 cd63991dbac93..d309faf59d044 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 667aacd9df3bf..246dbeb39886f 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 {