[Security Solution] [Cases] Cases UI Plugin for RAC

x-pack/plugins/cases/public/components/create/form_context.test.tsx

@@ -13,6 +13,7 @@ import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import { ConnectorTypes } from '../../../common';
 import { TestProviders } from '../../common/mock';
 import { usePostCase } from '../../containers/use_post_case';
+import { usePostComment } from '../../containers/use_post_comment';
 import { useGetTags } from '../../containers/use_get_tags';
 import { useConnectors } from '../../containers/configure/use_connectors';
 import { useCaseConfigure } from '../../containers/configure/use_configure';
@@ -41,6 +42,7 @@ import { usePostPushToService } from '../../containers/use_post_push_to_service'
 const sampleId = 'case-id';
 
 jest.mock('../../containers/use_post_case');
+jest.mock('../../containers/use_post_comment');
 jest.mock('../../containers/use_post_push_to_service');
 jest.mock('../../containers/use_get_tags');
 jest.mock('../../containers/configure/use_connectors');
@@ -56,6 +58,7 @@ jest.mock('../connectors/servicenow/use_get_choices');
 const useConnectorsMock = useConnectors as jest.Mock;
 const useCaseConfigureMock = useCaseConfigure as jest.Mock;
 const usePostCaseMock = usePostCase as jest.Mock;
+const usePostCommentMock = usePostComment as jest.Mock;
 const usePostPushToServiceMock = usePostPushToService as jest.Mock;
 const useGetIncidentTypesMock = useGetIncidentTypes as jest.Mock;
 const useGetSeverityMock = useGetSeverity as jest.Mock;
@@ -104,13 +107,15 @@ describe('Create case', () => {
   const fetchTags = jest.fn();
   const onFormSubmitSuccess = jest.fn();
   const afterCaseCreated = jest.fn();
+  const postComment = jest.fn();
 
   beforeAll(() => {
     postCase.mockResolvedValue({
       id: sampleId,
       ...sampleData,
     });
     usePostCaseMock.mockImplementation(() => defaultPostCase);
+    usePostCommentMock.mockImplementation(() => ({ postComment }));
     usePostPushToServiceMock.mockImplementation(() => defaultPostPushToService);
     useConnectorsMock.mockReturnValue(sampleConnectorData);
     useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);
@@ -629,10 +634,13 @@ describe('Create case', () => {
 
     wrapper.find(`[data-test-subj="create-case-submit"]`).first().simulate('click');
     await waitFor(() => {
-      expect(afterCaseCreated).toHaveBeenCalledWith({
-        id: sampleId,
-        ...sampleData,
-      });
+      expect(afterCaseCreated).toHaveBeenCalledWith(
+        {
+          id: sampleId,
+          ...sampleData,
+        },
+        postComment
+      );
     });
   });
 

x-pack/plugins/cases/public/components/create/form_context.tsx

@@ -20,6 +20,7 @@ import { useConnectors } from '../../containers/configure/use_connectors';
 import { useCaseConfigure } from '../../containers/configure/use_configure';
 import { Case } from '../../containers/types';
 import { CaseType, ConnectorTypes } from '../../../common';
+import { UsePostComment, usePostComment } from '../../containers/use_post_comment';
 
 const initialCaseValue: FormProps = {
   description: '',
@@ -31,7 +32,7 @@ const initialCaseValue: FormProps = {
 };
 
 interface Props {
-  afterCaseCreated?: (theCase: Case) => Promise<void>;
+  afterCaseCreated?: (theCase: Case, postComment: UsePostComment['postComment']) => Promise<void>;
   caseType?: CaseType;
   children?: JSX.Element | JSX.Element[];
   hideConnectorServiceNowSir?: boolean;
@@ -48,6 +49,7 @@ export const FormContext: React.FC<Props> = ({
   const { connectors, loading: isLoadingConnectors } = useConnectors();
   const { connector: configurationConnector } = useCaseConfigure();
   const { postCase } = usePostCase();
+  const { postComment } = usePostComment();
   const { pushCaseToExternalService } = usePostPushToService();
 
   const connectorId = useMemo(() => {
@@ -87,7 +89,7 @@ export const FormContext: React.FC<Props> = ({
         });
 
         if (afterCaseCreated && updatedCase) {
-          await afterCaseCreated(updatedCase);
+          await afterCaseCreated(updatedCase, postComment);
         }
 
         if (updatedCase?.id && dataConnectorId !== 'none') {
@@ -102,7 +104,15 @@ export const FormContext: React.FC<Props> = ({
         }
       }
     },
-    [caseType, connectors, postCase, onSuccess, pushCaseToExternalService, afterCaseCreated]
+    [
+      caseType,
+      connectors,
+      postCase,
+      postComment,
+      onSuccess,
+      pushCaseToExternalService,
+      afterCaseCreated,
+    ]
   );
 
   const { form } = useForm<FormProps>({

x-pack/plugins/cases/public/components/create/index.tsx

@@ -19,6 +19,7 @@ import { CaseType } from '../../../common/api/cases';
 import { CasesTimelineIntegration, CasesTimelineIntegrationProvider } from '../timeline_context';
 import { fieldName as descriptionFieldName } from './description';
 import { InsertTimeline } from '../insert_timeline';
+import { UsePostComment } from '../../containers/use_post_comment';
 
 export const CommonUseField = getUseField({ component: Field });
 
@@ -29,7 +30,7 @@ const Container = styled.div`
 `;
 
 export interface CreateCaseProps {
-  afterCaseCreated?: (theCase: Case) => Promise<void>;
+  afterCaseCreated?: (theCase: Case, postComment: UsePostComment['postComment']) => Promise<void>;
   caseType?: CaseType;
   hideConnectorServiceNowSir?: boolean;
   onCancel: () => void;

x-pack/plugins/security_solution/public/cases/components/timeline_actions/add_to_case_action.tsx

@@ -38,6 +38,18 @@ interface AddToCaseActionProps {
   ecsRowData: Ecs;
 }
 
+interface PostCommentArg {
+  caseId: string;
+  data: {
+    type: 'alert';
+    alertId: string | string[];
+    index: string | string[];
+    rule: { id: string | null; name: string | null };
+  };
+  updateCase?: (newCase: Case) => void;
+  subCaseId?: string;
+}
+
 const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
   ariaLabel = i18n.ACTION_ADD_TO_CASE_ARIA_LABEL,
   ecsRowData,
@@ -80,6 +92,31 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
     closeControl: closeCaseFlyoutOpen,
   } = useControl();
 
+  const attachAlertToCase = useCallback(
+    async (
+      theCase: Case,
+      postComment?: (arg: PostCommentArg) => Promise<void>,
+      updateCase?: (newCase: Case) => void
+    ) => {
+      closeCaseFlyoutOpen();
+      if (postComment) {
+        await postComment({
+          caseId: theCase.id,
+          data: {
+            type: 'alert',
+            alertId: eventId,
+            index: eventIndex ?? '',
+            rule: {
+              id: rule?.id != null ? rule.id[0] : null,
+              name: rule?.name != null ? rule.name[0] : null,
+            },
+          },
+          updateCase,
+        });
+      }
+    },
+    [closeCaseFlyoutOpen, eventId, eventIndex, rule]
+  );
   const onCaseSuccess = useCallback(
     async (theCase: Case) => {
       closeCaseFlyoutOpen();
@@ -183,7 +220,11 @@ const AddToCaseActionComponent: React.FC<AddToCaseActionProps> = ({
         </EuiPopover>
       </ActionIconItem>
       {isCreateCaseFlyoutOpen && (
-        <CreateCaseFlyout onCloseFlyout={closeCaseFlyoutOpen} onSuccess={onCaseSuccess} />
+        <CreateCaseFlyout
+          afterCaseCreated={attachAlertToCase}
+          onCloseFlyout={closeCaseFlyoutOpen}
+          onSuccess={onCaseSuccess}
+        />
       )}
       {isAllCaseModalOpen &&
         cases.getAllCasesSelectorModal({