Fix order of attaching alert to a case

elastic · Feb 22, 2021 · 348772a · 348772a
1 parent 8dd955e
commit 348772a
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 22 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/flyout.test.tsx b/x-pack/plugins/security_solution/public/cases/components/create/flyout.test.tsx
@@ -55,10 +55,10 @@ jest.mock('../create/submit_button', () => {
 });
 
 const onCloseFlyout = jest.fn();
-const onCaseCreated = jest.fn();
+const onSuccess = jest.fn();
 const defaultProps = {
   onCloseFlyout,
-  onCaseCreated,
+  onSuccess,
 };
 
 describe('CreateCaseFlyout', () => {
@@ -97,7 +97,7 @@ describe('CreateCaseFlyout', () => {
     const props = wrapper.find('FormContext').props();
     expect(props).toEqual(
       expect.objectContaining({
-        onSuccess: onCaseCreated,
+        onSuccess,
       })
     );
   });
@@ -110,6 +110,6 @@ describe('CreateCaseFlyout', () => {
     );
 
     wrapper.find(`[data-test-subj='form-context-on-success']`).first().simulate('click');
-    expect(onCaseCreated).toHaveBeenCalledWith({ id: 'case-id' });
+    expect(onSuccess).toHaveBeenCalledWith({ id: 'case-id' });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx b/x-pack/plugins/security_solution/public/cases/components/create/flyout.tsx
@@ -17,7 +17,8 @@ import * as i18n from '../../translations';
 
 export interface CreateCaseModalProps {
   onCloseFlyout: () => void;
-  onCaseCreated: (theCase: Case) => void;
+  onSuccess: (theCase: Case) => Promise<void>;
+  afterCaseCreated?: (theCase: Case) => Promise<void>;
 }
 
 const Container = styled.div`
@@ -40,7 +41,8 @@ const FormWrapper = styled.div`
 `;
 
 const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
-  onCaseCreated,
+  onSuccess,
+  afterCaseCreated,
   onCloseFlyout,
 }) => {
   return (
@@ -52,7 +54,7 @@ const CreateCaseFlyoutComponent: React.FC<CreateCaseModalProps> = ({
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
         <FormWrapper>
-          <FormContext onSuccess={onCaseCreated}>
+          <FormContext onSuccess={onSuccess} afterCaseCreated={afterCaseCreated}>
             <CreateCaseForm withSteps={false} />
             <Container>
               <SubmitCaseButton />

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx b/x-pack/plugins/security_solution/public/cases/components/create/form_context.tsx
@@ -32,13 +32,15 @@ const initialCaseValue: FormProps = {
 
 interface Props {
   caseType?: CaseType;
-  onSuccess?: (theCase: Case) => void;
+  onSuccess?: (theCase: Case) => Promise<void>;
+  afterCaseCreated?: (theCase: Case) => Promise<void>;
 }
 
 export const FormContext: React.FC<Props> = ({
   caseType = CaseType.individual,
   children,
   onSuccess,
+  afterCaseCreated,
 }) => {
   const { connectors } = useConnectors();
   const { connector: configurationConnector } = useCaseConfigure();
@@ -72,6 +74,10 @@ export const FormContext: React.FC<Props> = ({
           settings: { syncAlerts },
         });
 
+        if (afterCaseCreated && updatedCase) {
+          await afterCaseCreated(updatedCase);
+        }
+
         if (updatedCase?.id && dataConnectorId !== 'none') {
           await pushCaseToExternalService({
             caseId: updatedCase.id,
@@ -80,11 +86,11 @@ export const FormContext: React.FC<Props> = ({
         }
 
         if (onSuccess && updatedCase) {
-          onSuccess(updatedCase);
+          await onSuccess(updatedCase);
         }
       }
     },
-    [caseType, connectors, postCase, onSuccess, pushCaseToExternalService]
+    [caseType, connectors, postCase, onSuccess, pushCaseToExternalService, afterCaseCreated]
   );
 
   const { form } = useForm<FormProps>({

diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.tsx
@@ -41,7 +41,7 @@ const InsertTimeline = () => {
 export const Create = React.memo(() => {
   const history = useHistory();
   const onSuccess = useCallback(
-    ({ id }) => {
+    async ({ id }) => {
       history.push(getCaseDetailsUrl({ id }));
     },
     [history]

diff --git a/...plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx b/...plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx
@@ -70,9 +70,9 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
   } = useControl();
 
   const attachAlertToCase = useCallback(
-    (theCase: Case) => {
+    async (theCase: Case) => {
       closeCaseFlyoutOpen();
-      postComment({
+      await postComment({
         caseId: theCase.id,
         data: {
           type: CommentType.alert,
@@ -83,14 +83,18 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
             name: rule?.name != null ? rule.name[0] : null,
           },
         },
-        updateCase: () =>
-          dispatchToaster({
-            type: 'addToaster',
-            toast: createUpdateSuccessToaster(theCase, onViewCaseClick),
-          }),
       });
     },
-    [closeCaseFlyoutOpen, postComment, eventId, eventIndex, rule, dispatchToaster, onViewCaseClick]
+    [closeCaseFlyoutOpen, postComment, eventId, eventIndex, rule]
+  );
+
+  const onCaseSuccess = useCallback(
+    async (theCase: Case) =>
+      dispatchToaster({
+        type: 'addToaster',
+        toast: createUpdateSuccessToaster(theCase, onViewCaseClick),
+      }),
+    [dispatchToaster, onViewCaseClick]
   );
 
   const onCaseClicked = useCallback(
@@ -184,7 +188,11 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
         </EuiPopover>
       </ActionIconItem>
       {isCreateCaseFlyoutOpen && (
-        <CreateCaseFlyout onCloseFlyout={closeCaseFlyoutOpen} onCaseCreated={attachAlertToCase} />
+        <CreateCaseFlyout
+          onCloseFlyout={closeCaseFlyoutOpen}
+          afterCaseCreated={attachAlertToCase}
+          onSuccess={onCaseSuccess}
+        />
       )}
       {allCasesModal}
     </>

diff --git a/...ins/security_solution/public/cases/components/use_create_case_modal/create_case_modal.tsx b/...ins/security_solution/public/cases/components/use_create_case_modal/create_case_modal.tsx
@@ -19,7 +19,7 @@ import { CaseType } from '../../../../../case/common/api';
 export interface CreateCaseModalProps {
   isModalOpen: boolean;
   onCloseCaseModal: () => void;
-  onSuccess: (theCase: Case) => void;
+  onSuccess: (theCase: Case) => Promise<void>;
   caseType?: CaseType;
 }
 

diff --git a/x-pack/plugins/security_solution/public/cases/components/use_create_case_modal/index.tsx b/x-pack/plugins/security_solution/public/cases/components/use_create_case_modal/index.tsx
@@ -29,7 +29,7 @@ export const useCreateCaseModal = ({
   const closeModal = useCallback(() => setIsModalOpen(false), []);
   const openModal = useCallback(() => setIsModalOpen(true), []);
   const onSuccess = useCallback(
-    (theCase) => {
+    async (theCase) => {
       onCaseCreated(theCase);
       closeModal();
     },