[Cases] Refactor UI user actions (#121962)

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/cases/common/api/cases/comment.ts

@@ -110,6 +110,14 @@ export const CommentResponseRt = rt.intersection([
   }),
 ]);
 
+export const CommentResponseTypeUserRt = rt.intersection([
+  AttributesTypeUserRt,
+  rt.type({
+    id: rt.string,
+    version: rt.string,
+  }),
+]);
+
 export const CommentResponseTypeAlertsRt = rt.intersection([
   AttributesTypeAlertsRt,
   rt.type({
@@ -172,6 +180,7 @@ export type AttributesTypeUser = rt.TypeOf<typeof AttributesTypeUserRt>;
 export type CommentAttributes = rt.TypeOf<typeof CommentAttributesRt>;
 export type CommentRequest = rt.TypeOf<typeof CommentRequestRt>;
 export type CommentResponse = rt.TypeOf<typeof CommentResponseRt>;
+export type CommentResponseUserType = rt.TypeOf<typeof CommentResponseTypeUserRt>;
 export type CommentResponseAlertsType = rt.TypeOf<typeof CommentResponseTypeAlertsRt>;
 export type CommentResponseActionsType = rt.TypeOf<typeof CommentResponseTypeActionsRt>;
 export type AllCommentsResponse = rt.TypeOf<typeof AllCommentsResponseRt>;

x-pack/plugins/cases/common/ui/types.ts

@@ -12,12 +12,12 @@ import {
   CasePatchRequest,
   CaseStatuses,
   CaseType,
-  CommentRequest,
   User,
   ActionConnector,
   CaseExternalServiceBasic,
   CaseUserActionResponse,
   CaseMetricsResponse,
+  CommentResponse,
 } from '../api';
 import { SnakeToCamelCase } from '../types';
 
@@ -62,18 +62,7 @@ export type CaseViewRefreshPropInterface = null | {
   refreshCase: () => Promise<void>;
 };
 
-export type Comment = CommentRequest & {
-  associationType: AssociationType;
-  id: string;
-  createdAt: string;
-  createdBy: ElasticUser;
-  pushedAt: string | null;
-  pushedBy: string | null;
-  updatedAt: string | null;
-  updatedBy: ElasticUser | null;
-  version: string;
-};
-
+export type Comment = SnakeToCamelCase<CommentResponse>;
 export type CaseUserActions = SnakeToCamelCase<CaseUserActionResponse>;
 export type CaseExternalService = SnakeToCamelCase<CaseExternalServiceBasic>;
 

x-pack/plugins/cases/public/common/test_utils.ts

@@ -7,6 +7,7 @@
 
 import { ReactWrapper } from 'enzyme';
 import { act } from 'react-dom/test-utils';
+import { MatcherFunction } from '@testing-library/react';
 
 /**
  * Convenience utility to remove text appended to links by EUI
@@ -25,3 +26,16 @@ export const waitForComponentToUpdate = async () =>
   act(async () => {
     return Promise.resolve();
   });
+
+type Query = (f: MatcherFunction) => HTMLElement;
+
+export const createQueryWithMarkup =
+  (query: Query) =>
+  (text: string): HTMLElement =>
+    query((content: string, node: Parameters<MatcherFunction>[1]) => {
+      const hasText = (el: Parameters<MatcherFunction>[1]) => el?.textContent === text;
+      const childrenDontHaveText = Array.from(node?.children ?? []).every(
+        (child) => !hasText(child as HTMLElement)
+      );
+      return hasText(node) && childrenDontHaveText;
+    });

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

@@ -792,8 +792,10 @@ describe('AllCasesListGeneric', () => {
       </TestProviders>
     );
 
-    const solutionHeader = wrapper.find({ children: 'Solution' });
-    expect(solutionHeader.exists()).toBeTruthy();
+    await waitFor(() => {
+      const solutionHeader = wrapper.find({ children: 'Solution' });
+      expect(solutionHeader.exists()).toBeTruthy();
+    });
   });
 
   it('hides Solution column if there is a set owner', async () => {
@@ -805,8 +807,10 @@ describe('AllCasesListGeneric', () => {
       </TestProviders>
     );
 
-    const solutionHeader = wrapper.find({ children: 'Solution' });
-    expect(solutionHeader.exists()).toBeFalsy();
+    await waitFor(() => {
+      const solutionHeader = wrapper.find({ children: 'Solution' });
+      expect(solutionHeader.exists()).toBeFalsy();
+    });
   });
 
   it('should deselect cases when refreshing', async () => {

x-pack/plugins/cases/public/components/case_view/case_view_page.test.tsx

@@ -35,7 +35,7 @@ jest.mock('../../containers/use_get_case_user_actions');
 jest.mock('../../containers/use_get_case');
 jest.mock('../../containers/configure/use_connectors');
 jest.mock('../../containers/use_post_push_to_service');
-jest.mock('../user_action_tree/user_action_timestamp');
+jest.mock('../user_actions/timestamp');
 jest.mock('../../common/lib/kibana');
 jest.mock('../../common/navigation/hooks');
 
@@ -506,7 +506,7 @@ describe('CaseViewPage', () => {
       expect(
         wrapper
           .find(
-            '[data-test-subj="comment-create-action-alert-action-id"] .euiCommentEvent__headerEvent'
+            '[data-test-subj="user-action-alert-comment-create-action-alert-action-id"] .euiCommentEvent__headerEvent'
           )
           .first()
           .text()

x-pack/plugins/cases/public/components/case_view/case_view_page.tsx

@@ -18,7 +18,7 @@ import { CaseStatuses, CaseAttributes, CaseType, CaseConnector } from '../../../
 import { Case, UpdateKey, UpdateByKey } from '../../../common/ui';
 import { EditableTitle } from '../header_page/editable_title';
 import { TagList } from '../tag_list';
-import { UserActionTree } from '../user_action_tree';
+import { UserActions } from '../user_actions';
 import { UserList } from '../user_list';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { getTypedPayload } from '../../containers/utils';
@@ -363,12 +363,11 @@ export const CaseViewPage = React.memo<CaseViewPageProps>(
                       </>
                     )}
                     <EuiFlexItem>
-                      <UserActionTree
+                      <UserActions
                         getRuleDetailsHref={ruleDetailsNavigation?.href}
                         onRuleDetailsClick={ruleDetailsNavigation?.onClick}
                         caseServices={caseServices}
                         caseUserActions={caseUserActions}
-                        connectors={connectors}
                         data={caseData}
                         actionsNavigation={actionsNavigation}
                         fetchUserActions={refetchCaseUserActions}

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

@@ -39,7 +39,7 @@ jest.mock('../../containers/use_get_case');
 jest.mock('../../containers/use_get_case_metrics');
 jest.mock('../../containers/configure/use_connectors');
 jest.mock('../../containers/use_post_push_to_service');
-jest.mock('../user_action_tree/user_action_timestamp');
+jest.mock('../user_actions/timestamp');
 jest.mock('../../common/lib/kibana');
 jest.mock('../../common/navigation/hooks');
 

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

@@ -12,6 +12,7 @@ import { act } from '@testing-library/react';
 import { useForm, Form, FormHook } from '../../common/shared_imports';
 import { Description } from './description';
 import { schema, FormProps } from './schema';
+
 jest.mock('../markdown_editor/plugins/lens/use_lens_draft_comment');
 
 describe('Description', () => {
@@ -31,7 +32,7 @@ describe('Description', () => {
   };
 
   beforeEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   it('it renders', async () => {

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

@@ -68,7 +68,7 @@ describe('CreateCaseForm', () => {
   };
 
   beforeEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
     useGetTagsMock.mockReturnValue({ tags: ['test'] });
     useConnectorsMock.mockReturnValue({ loading: false, connectors: connectorsMock });
     useCaseConfigureMock.mockImplementation(() => useCaseConfigureResponse);

x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/__mocks__/use_lens_draft_comment.ts

@@ -5,4 +5,9 @@
  * 2.0.
  */
 
-export const useLensDraftComment = () => ({});
+export const useLensDraftComment = jest.fn().mockReturnValue({
+  draftComment: null,
+  hasIncomingLensState: false,
+  clearDraftComment: jest.fn(),
+  openLensModal: jest.fn(),
+});