elastic · academo · Mar 3, 2022 · Feb 10, 2022 · Feb 11, 2022 · Feb 14, 2022
@@ -185,7 +185,7 @@ export interface RuleEcs {
   id?: string[];
   rule_id?: string[];
   name?: string[];
-  false_positives: string[];
+  false_positives?: string[];
   saved_id?: string[];
   timeline_id?: string[];
   timeline_title?: string[];

@@ -254,3 +254,17 @@ export const MAX_LENGTH_ERROR = (field: string, length: number) =>
 export const LINK_APPROPRIATE_LICENSE = i18n.translate('xpack.cases.common.appropriateLicense', {
   defaultMessage: 'appropriate license',
 });
+
+export const CASE_SUCCESS_TOAST = (title: string) =>
+  i18n.translate('xpack.cases.actions.caseSuccessToast', {
+    values: { title },
+    defaultMessage: 'An alert has been added to "{title}"',
+  });
+
+export const CASE_SUCCESS_SYNC_TEXT = i18n.translate('xpack.cases.actions.caseSuccessSyncText', {
+  defaultMessage: 'Alerts in this case have their status synched with the case status',
+});
+
+export const VIEW_CASE = i18n.translate('xpack.cases.actions.viewCase', {
+  defaultMessage: 'View Case',
+});
@@ -0,0 +1,75 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { renderHook } from '@testing-library/react-hooks';
+import { useToasts } from '../common/lib/kibana';
+import { AppMockRenderer, createAppMockRenderer, TestProviders } from '../common/mock';
+import { CaseToastSuccessContent, useCasesToast } from './use_cases_toast';
+import { mockCase } from '../containers/mock';
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+
+jest.mock('../common/lib/kibana');
+
+const useToastsMock = useToasts as jest.Mock;
+
+describe('Use cases toast hook', () => {
+  describe('Toast hook', () => {
+    const successMock = jest.fn();
+    useToastsMock.mockImplementation(() => {
+      return {
+        addSuccess: successMock,
+      };
+    });
+    it('should create a success tost when invoked with a case', () => {
+      const { result } = renderHook(
+        () => {
+          return useCasesToast();
+        },
+        { wrapper: TestProviders }
+      );
+      result.current.showSuccessAttach(mockCase);
+      expect(successMock).toHaveBeenCalled();
+    });
+  });
+  describe('Toast content', () => {
+    let appMockRender: AppMockRenderer;
+    const onViewCaseClick = jest.fn();
+    beforeEach(() => {
+      appMockRender = createAppMockRenderer();
+      onViewCaseClick.mockReset();
+    });
+
+    it('renders a correct successfull message with synced alerts', () => {
+      const result = appMockRender.render(
+        <CaseToastSuccessContent syncAlerts={true} onViewCaseClick={onViewCaseClick} />
+      );
+      expect(result.getByTestId('toaster-content-sync-text')).toHaveTextContent(
+        'Alerts in this case have their status synched with the case status'
+      );
+      expect(result.getByTestId('toaster-content-case-view-link')).toHaveTextContent('View Case');
+      expect(onViewCaseClick).not.toHaveBeenCalled();
+    });
+
+    it('renders a correct successfull message with not synced alerts', () => {
+      const result = appMockRender.render(
+        <CaseToastSuccessContent syncAlerts={false} onViewCaseClick={onViewCaseClick} />
+      );
+      expect(result.queryByTestId('toaster-content-sync-text')).toBeFalsy();
+      expect(result.getByTestId('toaster-content-case-view-link')).toHaveTextContent('View Case');
+      expect(onViewCaseClick).not.toHaveBeenCalled();
+    });
+
+    it('Calls the onViewCaseClick when clicked', () => {
+      const result = appMockRender.render(
+        <CaseToastSuccessContent syncAlerts={false} onViewCaseClick={onViewCaseClick} />
+      );
+      userEvent.click(result.getByTestId('toaster-content-case-view-link'));
+      expect(onViewCaseClick).toHaveBeenCalled();
+    });
+  });
+});
@@ -0,0 +1,82 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiButtonEmpty, EuiText } from '@elastic/eui';
+import React from 'react';
+import styled from 'styled-components';
+import { toMountPoint } from '../../../../../src/plugins/kibana_react/public';
+import { Case } from '../../common';
+import { useToasts } from '../common/lib/kibana';
+import { useCaseViewNavigation } from '../common/navigation';
+import { CASE_SUCCESS_SYNC_TEXT, CASE_SUCCESS_TOAST, VIEW_CASE } from './translations';
+
+const LINE_CLAMP = 3;
+const Title = styled.span`
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: ${LINE_CLAMP};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+const EuiTextStyled = styled(EuiText)`
+  ${({ theme }) => `
+    margin-bottom: ${theme.eui?.paddingSizes?.s ?? 8}px;
+  `}
+`;
+
+export const useCasesToast = () => {
+  const { navigateToCaseView } = useCaseViewNavigation();
+
+  const toasts = useToasts();
+
+  return {
+    showSuccessAttach: (theCase: Case) => {
+      const onViewCaseClick = () => {
+        navigateToCaseView({
+          detailName: theCase.id,
+        });
+      };
+      return toasts.addSuccess({
+        color: 'success',
+        iconType: 'check',
+        title: toMountPoint(<Title>{CASE_SUCCESS_TOAST(theCase.title)}</Title>),
+        text: toMountPoint(
+          <CaseToastSuccessContent
+            syncAlerts={theCase.settings.syncAlerts}
+            onViewCaseClick={onViewCaseClick}
+          />
+        ),
+      });
+    },
+  };
+};
+export const CaseToastSuccessContent = ({
+  syncAlerts,
+  onViewCaseClick,
+}: {
+  syncAlerts: boolean;
+  onViewCaseClick: () => void;
+}) => {
+  return (
+    <>
+      {syncAlerts && (
+        <EuiTextStyled size="s" data-test-subj="toaster-content-sync-text">
+          {CASE_SUCCESS_SYNC_TEXT}
+        </EuiTextStyled>
+      )}
+      <EuiButtonEmpty
+        size="xs"
+        flush="left"
+        onClick={onViewCaseClick}
+        data-test-subj="toaster-content-case-view-link"
+      >
+        {VIEW_CASE}
+      </EuiButtonEmpty>
+    </>
+  );
+};
+CaseToastSuccessContent.displayName = 'CaseToastSuccessContent';
@@ -26,7 +26,7 @@ export interface AllCasesSelectorModalProps {
    */
   alertData?: Omit<CommentRequestAlertType, 'type'>;
   hiddenStatuses?: CaseStatusWithAllStatus[];
-  onRowClick: (theCase?: Case) => void;
+  onRowClick?: (theCase?: Case) => void;
   updateCase?: (newCase: Case) => void;
   onClose?: () => void;
   attachments?: CaseAttachments;
@@ -52,7 +52,9 @@ export const AllCasesSelectorModal = React.memo<AllCasesSelectorModalProps>(
     const onClick = useCallback(
       (theCase?: Case) => {
         closeModal();
-        onRowClick(theCase);
+        if (onRowClick) {
+          onRowClick(theCase);
+        }
       },
       [closeModal, onRowClick]
     );

@@ -12,6 +12,7 @@ import React from 'react';
 import { CasesContext } from '../../cases_context';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
 import { useCasesAddToExistingCaseModal } from './use_cases_add_to_existing_case_modal';
+jest.mock('../../../common/use_cases_toast');
 
 describe('use cases add to existing case modal hook', () => {
   const dispatch = jest.fn();
@@ -65,7 +66,7 @@ describe('use cases add to existing case modal hook', () => {
     );
   });
 
-  it('should dispatch the close action when invoked', () => {
+  it('should dispatch the close action for modal and flyout when invoked', () => {
     const { result } = renderHook(
       () => {
         return useCasesAddToExistingCaseModal(defaultParams());
@@ -78,5 +79,10 @@ describe('use cases add to existing case modal hook', () => {
         type: CasesContextStoreActionsList.CLOSE_ADD_TO_CASE_MODAL,
       })
     );
+    expect(dispatch).toHaveBeenCalledWith(
+      expect.objectContaining({
+        type: CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT,
+      })
+    );
   });
 });
@@ -7,22 +7,56 @@
 
 import { useCallback } from 'react';
 import { AllCasesSelectorModalProps } from '.';
+import { useCasesToast } from '../../../common/use_cases_toast';
+import { Case } from '../../../containers/types';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
 import { useCasesContext } from '../../cases_context/use_cases_context';
+import { useCasesAddToNewCaseFlyout } from '../../create/flyout/use_cases_add_to_new_case_flyout';
 
 export const useCasesAddToExistingCaseModal = (props: AllCasesSelectorModalProps) => {
+  const createNewCaseFlyout = useCasesAddToNewCaseFlyout({
+    attachments: props.attachments,
+    onClose: props.onClose,
+    // TODO there's no need for onSuccess to be async. This will be fixed
+    // in a follow up clean up
+    onSuccess: async (theCase?: Case) => {
+      if (props.onRowClick) {
+        return props.onRowClick(theCase);
+      }
+    },
+  });
   const { dispatch } = useCasesContext();
+  const casesToasts = useCasesToast();
+
   const closeModal = useCallback(() => {
     dispatch({
       type: CasesContextStoreActionsList.CLOSE_ADD_TO_CASE_MODAL,
     });
+    // in case the flyout was also open when selecting
+    // create a new case
+    dispatch({
+      type: CasesContextStoreActionsList.CLOSE_CREATE_CASE_FLYOUT,
+    });
   }, [dispatch]);
 
   const openModal = useCallback(() => {
     dispatch({
       type: CasesContextStoreActionsList.OPEN_ADD_TO_CASE_MODAL,
       payload: {
         ...props,
+        onRowClick: (theCase?: Case) => {
+          // when the case is undefined in the modal
+          // the user clicked "create new case"
+          if (theCase === undefined) {
+            closeModal();
+            createNewCaseFlyout.open();
+          } else {
+            casesToasts.showSuccessAttach(theCase);
+            if (props.onRowClick) {
+              props.onRowClick(theCase);
+            }
+          }
+        },
         onClose: () => {
           closeModal();
           if (props.onClose) {
@@ -37,7 +71,7 @@ export const useCasesAddToExistingCaseModal = (props: AllCasesSelectorModalProps
         },
       },
     });
-  }, [closeModal, dispatch, props]);
+  }, [casesToasts, closeModal, createNewCaseFlyout, dispatch, props]);
   return {
     open: openModal,
     close: closeModal,

@@ -12,6 +12,7 @@ import React from 'react';
 import { CasesContext } from '../../cases_context';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
 import { useCasesAddToNewCaseFlyout } from './use_cases_add_to_new_case_flyout';
+jest.mock('../../../common/use_cases_toast');
 
 describe('use cases add to new case flyout hook', () => {
   const dispatch = jest.fn();

@@ -6,12 +6,15 @@
  */
 
 import { useCallback } from 'react';
+import { useCasesToast } from '../../../common/use_cases_toast';
+import { Case } from '../../../containers/types';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
 import { useCasesContext } from '../../cases_context/use_cases_context';
 import { CreateCaseFlyoutProps } from './create_case_flyout';
 
 export const useCasesAddToNewCaseFlyout = (props: CreateCaseFlyoutProps) => {
   const { dispatch } = useCasesContext();
+  const casesToasts = useCasesToast();
 
   const closeFlyout = useCallback(() => {
     dispatch({
@@ -30,6 +33,14 @@ export const useCasesAddToNewCaseFlyout = (props: CreateCaseFlyoutProps) => {
             return props.onClose();
           }
         },
+        onSuccess: async (theCase: Case) => {
+          if (theCase) {
+            casesToasts.showSuccessAttach(theCase);
+          }
+          if (props.onSuccess) {
+            return props.onSuccess(theCase);
+          }
+        },
         afterCaseCreated: async (...args) => {
           closeFlyout();
           if (props.afterCaseCreated) {
@@ -38,7 +49,7 @@ export const useCasesAddToNewCaseFlyout = (props: CreateCaseFlyoutProps) => {
         },
       },
     });
-  }, [closeFlyout, dispatch, props]);
+  }, [casesToasts, closeFlyout, dispatch, props]);
   return {
     open: openFlyout,
     close: closeFlyout,

@@ -21,7 +21,7 @@ export type { GetCreateCaseFlyoutProps } from './methods/get_create_case_flyout'
 export type { GetAllCasesSelectorModalProps } from './methods/get_all_cases_selector_modal';
 export type { GetRecentCasesProps } from './methods/get_recent_cases';
 
-export type { CaseAttachments } from './types';
+export type { CaseAttachments, SupportedCaseAttachment } from './types';
 
 export type { ICasesDeepLinkId } from './common/navigation';
 export {