[ResponseOps][Cases] Filter by assignees

x-pack/plugins/cases/common/constants.ts

@@ -163,3 +163,8 @@ export const PUSH_CASES_CAPABILITY = 'push_cases' as const;
  */
 
 export const DEFAULT_USER_SIZE = 10;
+
+/**
+ * Delays
+ */
+export const SEARCH_DEBOUNCE_MS = 500;

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

@@ -103,6 +103,7 @@ export interface FilterOptions {
   severity: CaseSeverityWithAll;
   status: CaseStatusWithAllStatus;
   tags: string[];
+  assignees: string[];
   reporters: User[];
   owner: string[];
 }

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

@@ -37,12 +37,14 @@ import { registerConnectorsToMockActionRegistry } from '../../common/mock/regist
 import { createStartServicesMock } from '../../common/lib/kibana/kibana_react.mock';
 import { waitForComponentToUpdate } from '../../common/test_utils';
 import { useCreateAttachments } from '../../containers/use_create_attachments';
-import { useGetReporters } from '../../containers/use_get_reporters';
 import { useGetCasesMetrics } from '../../containers/use_get_cases_metrics';
 import { useGetConnectors } from '../../containers/configure/use_connectors';
 import { useGetTags } from '../../containers/use_get_tags';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { useGetCases } from '../../containers/use_get_cases';
+import { useGetCurrentUserProfile } from '../../containers/user_profiles/use_get_current_user_profile';
+import { userProfiles, userProfilesMap } from '../../containers/user_profiles/api.mock';
+import { useBulkGetUserProfiles } from '../../containers/user_profiles/use_bulk_get_user_profiles';
 
 jest.mock('../../containers/use_create_attachments');
 jest.mock('../../containers/use_bulk_update_case');
@@ -52,7 +54,8 @@ jest.mock('../../containers/use_get_cases_status');
 jest.mock('../../containers/use_get_cases_metrics');
 jest.mock('../../containers/use_get_action_license');
 jest.mock('../../containers/use_get_tags');
-jest.mock('../../containers/use_get_reporters');
+jest.mock('../../containers/user_profiles/use_get_current_user_profile');
+jest.mock('../../containers/user_profiles/use_bulk_get_user_profiles');
 jest.mock('../../containers/configure/use_connectors');
 jest.mock('../../common/lib/kibana');
 jest.mock('../../common/navigation/hooks');
@@ -67,7 +70,8 @@ const useGetCasesStatusMock = useGetCasesStatus as jest.Mock;
 const useGetCasesMetricsMock = useGetCasesMetrics as jest.Mock;
 const useUpdateCasesMock = useUpdateCases as jest.Mock;
 const useGetTagsMock = useGetTags as jest.Mock;
-const useGetReportersMock = useGetReporters as jest.Mock;
+const useGetCurrentUserProfileMock = useGetCurrentUserProfile as jest.Mock;
+const useBulkGetUserProfilesMock = useBulkGetUserProfiles as jest.Mock;
 const useKibanaMock = useKibana as jest.MockedFunction<typeof useKibana>;
 const useGetConnectorsMock = useGetConnectors as jest.Mock;
 const useCreateAttachmentsMock = useCreateAttachments as jest.Mock;
@@ -145,6 +149,8 @@ describe('AllCasesListGeneric', () => {
     handleIsLoading: jest.fn(),
     isLoadingCases: [],
     isSelectorView: false,
+    userProfiles: new Map(),
+    currentUserProfile: undefined,
   };
 
   let appMockRenderer: AppMockRenderer;
@@ -164,13 +170,8 @@ describe('AllCasesListGeneric', () => {
     useGetCasesStatusMock.mockReturnValue(defaultCasesStatus);
     useGetCasesMetricsMock.mockReturnValue(defaultCasesMetrics);
     useGetTagsMock.mockReturnValue({ data: ['coke', 'pepsi'], refetch: jest.fn() });
-    useGetReportersMock.mockReturnValue({
-      reporters: ['casetester'],
-      respReporters: [{ username: 'casetester' }],
-      isLoading: true,
-      isError: false,
-      fetchReporters: jest.fn(),
-    });
+    useGetCurrentUserProfileMock.mockReturnValue({ data: userProfiles[0], isLoading: false });
+    useBulkGetUserProfilesMock.mockReturnValue({ data: userProfilesMap });
     useGetConnectorsMock.mockImplementation(() => ({ data: connectorsMock, isLoading: false }));
     useUpdateCaseMock.mockReturnValue({ updateCaseProperty });
     mockKibana();
@@ -194,9 +195,9 @@ describe('AllCasesListGeneric', () => {
       expect(
         wrapper.find(`span[data-test-subj="case-table-column-tags-coke"]`).first().prop('title')
       ).toEqual(useGetCasesMockState.data.cases[0].tags[0]);
-      expect(wrapper.find(`[data-test-subj="case-table-column-createdBy"]`).first().text()).toEqual(
-        'LK'
-      );
+      expect(
+        wrapper.find(`[data-test-subj="case-user-profile-avatar-damaged_raccoon"]`).first().text()
+      ).toEqual('DR');
       expect(
         wrapper
           .find(`[data-test-subj="case-table-column-createdAt"]`)
@@ -215,20 +216,17 @@ describe('AllCasesListGeneric', () => {
     });
   });
 
-  it('should show a tooltip with the reporter username when hover over the reporter avatar', async () => {
+  it("should show a tooltip with the assignee's email when hover over the assignee avatar", async () => {
     const result = render(
       <TestProviders>
         <AllCasesList />
       </TestProviders>
     );
 
-    userEvent.hover(result.queryAllByTestId('case-table-column-createdBy')[0]);
+    userEvent.hover(result.queryAllByTestId('case-user-profile-avatar-damaged_raccoon')[0]);
 
     await waitFor(() => {
-      expect(result.getByTestId('case-table-column-createdBy-tooltip')).toBeTruthy();
-      expect(result.getByTestId('case-table-column-createdBy-tooltip').textContent).toEqual(
-        'lknope'
-      );
+      expect(result.getByText('[email protected]')).toBeInTheDocument();
     });
   });
 
@@ -263,6 +261,7 @@ describe('AllCasesListGeneric', () => {
             title: null,
             totalComment: null,
             totalAlerts: null,
+            assignees: [],
           },
         ],
       },
@@ -588,7 +587,7 @@ describe('AllCasesListGeneric', () => {
     wrapper.find('[data-test-subj="cases-table-row-select-1"]').first().simulate('click');
     await waitFor(() => {
       expect(onRowClick).toHaveBeenCalledWith({
-        assignees: [],
+        assignees: [{ uid: 'u_J41Oh6L9ki-Vo2tOogS8WRTENzhHurGtRc87NgEAlkc_0' }],
         closedAt: null,
         closedBy: null,
         comments: [],

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

@@ -10,6 +10,7 @@ import { EuiProgress, EuiBasicTable, EuiTableSelectionType } from '@elastic/eui'
 import { difference, head, isEmpty } from 'lodash/fp';
 import styled, { css } from 'styled-components';
 
+import { useQueryClient } from '@tanstack/react-query';
 import {
   Case,
   CaseStatusWithAllStatus,
@@ -35,6 +36,12 @@ import {
   initialData,
   useGetCases,
 } from '../../containers/use_get_cases';
+import { useBulkGetUserProfiles } from '../../containers/user_profiles/use_bulk_get_user_profiles';
+import { useGetCurrentUserProfile } from '../../containers/user_profiles/use_get_current_user_profile';
+import {
+  USER_PROFILES_BULK_GET_CACHE_KEY,
+  USER_PROFILES_CACHE_KEY,
+} from '../../containers/constants';
 
 const ProgressLoader = styled(EuiProgress)`
   ${({ $isShow }: { $isShow: boolean }) =>
@@ -78,6 +85,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
     });
     const [queryParams, setQueryParams] = useState<QueryParams>(DEFAULT_QUERY_PARAMS);
     const [selectedCases, setSelectedCases] = useState<Case[]>([]);
+    const queryClient = useQueryClient();
 
     const {
       data = initialData,
@@ -88,6 +96,26 @@ export const AllCasesList = React.memo<AllCasesListProps>(
       queryParams,
     });
 
+    const assigneesFromCases = useMemo(() => {
+      return data.cases.reduce<Set<string>>((acc, caseInfo) => {
+        if (!caseInfo) {
+          return acc;
+        }
+
+        for (const assignee of caseInfo.assignees) {
+          acc.add(assignee.uid);
+        }
+        return acc;
+      }, new Set());
+    }, [data.cases]);
+
+    const { data: userProfiles } = useBulkGetUserProfiles({
+      uids: Array.from(assigneesFromCases),
+    });
+
+    const { data: currentUserProfile, isLoading: isLoadingCurrentUserProfile } =
+      useGetCurrentUserProfile();
+
     const { data: connectors = [] } = useGetConnectors();
 
     const sorting = useMemo(
@@ -118,6 +146,8 @@ export const AllCasesList = React.memo<AllCasesListProps>(
         deselectCases();
         if (dataRefresh) {
           refetchCases();
+          queryClient.refetchQueries([USER_PROFILES_CACHE_KEY, USER_PROFILES_BULK_GET_CACHE_KEY]);
+
           setRefresh((currRefresh: number) => currRefresh + 1);
         }
         if (doRefresh) {
@@ -127,7 +157,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
           filterRefetch.current();
         }
       },
-      [deselectCases, doRefresh, refetchCases]
+      [deselectCases, doRefresh, queryClient, refetchCases]
     );
 
     const tableOnChangeCallback = useCallback(
@@ -193,6 +223,8 @@ export const AllCasesList = React.memo<AllCasesListProps>(
 
     const columns = useCasesColumns({
       filterStatus: filterOptions.status ?? StatusAll,
+      userProfiles: userProfiles ?? new Map(),
+      currentUserProfile,
       handleIsLoading,
       refreshCases,
       isSelectorView,
@@ -245,6 +277,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
           initial={{
             search: filterOptions.search,
             searchFields: filterOptions.searchFields,
+            assignees: filterOptions.assignees,
             reporters: filterOptions.reporters,
             tags: filterOptions.tags,
             status: filterOptions.status,
@@ -255,6 +288,8 @@ export const AllCasesList = React.memo<AllCasesListProps>(
           hiddenStatuses={hiddenStatuses}
           displayCreateCaseButton={isSelectorView}
           onCreateCasePressed={onRowClick}
+          isLoading={isLoadingCurrentUserProfile}
+          currentUserProfile={currentUserProfile}
         />
         <CasesTable
           columns={columns}