[Security Solution][Case] Manual attach alert to a case (#82996)

Author: cnasikas

x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx

@@ -77,7 +77,7 @@ describe('AddComment ', () => {
 
     await waitFor(() => {
       expect(onCommentSaving).toBeCalled();
-      expect(postComment).toBeCalledWith(sampleData, onCommentPosted);
+      expect(postComment).toBeCalledWith(addCommentProps.caseId, sampleData, onCommentPosted);
       expect(wrapper.find(`[data-test-subj="add-comment"] textarea`).text()).toBe('');
     });
   });

x-pack/plugins/security_solution/public/cases/components/add_comment/index.tsx

@@ -43,7 +43,7 @@ interface AddCommentProps {
 export const AddComment = React.memo(
   forwardRef<AddCommentRefObject, AddCommentProps>(
     ({ caseId, disabled, showLoading = true, onCommentPosted, onCommentSaving }, ref) => {
-      const { isLoading, postComment } = usePostComment(caseId);
+      const { isLoading, postComment } = usePostComment();
 
       const { form } = useForm<AddCommentFormSchema>({
         defaultValue: initialCommentValue,
@@ -79,10 +79,10 @@ export const AddComment = React.memo(
           if (onCommentSaving != null) {
             onCommentSaving();
           }
-          postComment({ ...data, type: CommentType.user }, onCommentPosted);
+          postComment(caseId, { ...data, type: CommentType.user }, onCommentPosted);
           reset();
         }
-      }, [onCommentPosted, onCommentSaving, postComment, reset, submit]);
+      }, [onCommentPosted, onCommentSaving, postComment, reset, submit, caseId]);
 
       return (
         <span id="add-comment-permLink">

x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx

@@ -437,7 +437,44 @@ describe('AllCases', () => {
     );
     await waitFor(() => {
       wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
-      expect(onRowClick).toHaveBeenCalledWith('1');
+      expect(onRowClick).toHaveBeenCalledWith({
+        closedAt: null,
+        closedBy: null,
+        comments: [],
+        connector: { fields: null, id: '123', name: 'My Connector', type: '.none' },
+        createdAt: '2020-02-19T23:06:33.798Z',
+        createdBy: {
+          email: 'leslie.knope@elastic.co',
+          fullName: 'Leslie Knope',
+          username: 'lknope',
+        },
+        description: 'Security banana Issue',
+        externalService: {
+          connectorId: '123',
+          connectorName: 'connector name',
+          externalId: 'external_id',
+          externalTitle: 'external title',
+          externalUrl: 'basicPush.com',
+          pushedAt: '2020-02-20T15:02:57.995Z',
+          pushedBy: {
+            email: 'leslie.knope@elastic.co',
+            fullName: 'Leslie Knope',
+            username: 'lknope',
+          },
+        },
+        id: '1',
+        status: 'open',
+        tags: ['coke', 'pepsi'],
+        title: 'Another horrible breach!!',
+        totalComment: 0,
+        updatedAt: '2020-02-20T15:02:57.995Z',
+        updatedBy: {
+          email: 'leslie.knope@elastic.co',
+          fullName: 'Leslie Knope',
+          username: 'lknope',
+        },
+        version: 'WzQ3LDFd',
+      });
     });
   });
 

x-pack/plugins/security_solution/public/cases/components/all_cases/index.tsx

@@ -82,7 +82,7 @@ const getSortField = (field: string): SortFieldCase => {
 };
 
 interface AllCasesProps {
-  onRowClick?: (id?: string) => void;
+  onRowClick?: (theCase?: Case) => void;
   isModal?: boolean;
   userCanCrud: boolean;
 }
@@ -339,32 +339,20 @@ export const AllCases = React.memo<AllCasesProps>(
 
     const TableWrap = useMemo(() => (isModal ? 'span' : Panel), [isModal]);
 
-    const onTableRowClick = useMemo(
-      () =>
-        memoize<(id: string) => () => void>((id) => () => {
+    const tableRowProps = useCallback(
+      (theCase: Case) => {
+        const onTableRowClick = memoize(() => {
           if (onRowClick) {
-            onRowClick(id);
+            onRowClick(theCase);
           }
-        }),
-      [onRowClick]
-    );
+        });
 
-    const tableRowProps = useCallback(
-      (item) => {
-        const rowProps = {
-          'data-test-subj': `cases-table-row-${item.id}`,
+        return {
+          'data-test-subj': `cases-table-row-${theCase.id}`,
+          ...(isModal ? { onClick: onTableRowClick } : {}),
         };
-
-        if (isModal) {
-          return {
-            ...rowProps,
-            onClick: onTableRowClick(item.id),
-          };
-        }
-
-        return rowProps;
       },
-      [isModal, onTableRowClick]
+      [isModal, onRowClick]
     );
 
     return (

x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx

@@ -19,7 +19,7 @@ const ExistingCaseComponent: React.FC<ExistingCaseProps> = ({ onCaseChanged, sel
 
   const onCaseCreated = useCallback(() => refetchCases(), [refetchCases]);
 
-  const { Modal: CreateCaseModal, openModal } = useCreateCaseModal({ onCaseCreated });
+  const { modal, openModal } = useCreateCaseModal({ onCaseCreated });
 
   const onChange = useCallback(
     (id: string) => {
@@ -46,7 +46,7 @@ const ExistingCaseComponent: React.FC<ExistingCaseProps> = ({ onCaseChanged, sel
         selectedCase={selectedCase ?? undefined}
         onCaseChanged={onChange}
       />
-      <CreateCaseModal />
+      {modal}
     </>
   );
 };