Added close button to toast notifications by migrating to different A…

…PI that is more widely used in Kibana and Security solution in particular. (#73662)

* Added close button to toast notifications by migrating to different API that is more widely used in Kibana and Security solution in particular.

* Fixed type check errors.

* Fixed tests.

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: (
-          <FormattedMessage
-            id="xpack.securitySolution.endpoint.host.details.errorTitle"
-            defaultMessage="Could not find host"
-          />
-        ),
-        body: (
-          <FormattedMessage
-            id="xpack.securitySolution.endpoint.host.details.errorBody"
-            defaultMessage="Please exit the flyout and select an available host."
-          />
-        ),
-        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 (
     <EuiFlyout onClose={handleFlyoutClose} data-test-subj="hostDetailsFlyout" size="s">

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),
         });
       });
     });

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<PolicyDetailsRouteState>();
 
@@ -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(
             <span data-test-subj="policyDetailsSuccessMessage">
               <FormattedMessage
                 id="xpack.securitySolution.endpoint.policy.details.updateSuccessMessage"
@@ -99,16 +99,15 @@ export const PolicyDetails = React.memo(() => {
           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);
 

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,45 +169,42 @@ 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(() => {
     if (deleteStatus !== undefined) {
       if (deleteStatus === true) {
         setPolicyIdToDelete('');
         setShowDelete(false);
-        notifications.toasts.success({
-          toastLifeTimeMs: 10000,
+        toasts.addSuccess({
           title: i18n.translate('xpack.securitySolution.endpoint.policyList.deleteSuccessToast', {
             defaultMessage: 'Success!',
           }),
-          body: (
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.policyList.deleteSuccessToastDetails"
-              defaultMessage="Policy has been deleted."
-            />
+          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 {