[Cases] Refactor Cases List Filters

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

@@ -65,14 +65,6 @@ export interface CasesUiConfigType {
   };
 }
 
-export const StatusAll = 'all' as const;
-export type StatusAllType = typeof StatusAll;
-
-export type CaseStatusWithAllStatus = CaseStatuses | StatusAllType;
-
-export const SeverityAll = 'all' as const;
-export type CaseSeverityWithAll = CaseSeverity | typeof SeverityAll;
-
 export const UserActionTypeAll = 'all' as const;
 export type CaseUserActionTypeWithAll = UserActionFindRequestTypes | typeof UserActionTypeAll;
 
@@ -156,8 +148,8 @@ export type LocalStorageQueryParams = Partial<Omit<QueryParams, 'page'>>;
 export interface FilterOptions {
   search: string;
   searchFields: string[];
-  severity: CaseSeverityWithAll[];
-  status: CaseStatusWithAllStatus[];
+  severity: CaseSeverity[];
+  status: CaseStatuses[];
   tags: string[];
   assignees: Array<string | null> | null;
   reporters: User[];

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

@@ -22,7 +22,7 @@ import {
 } from '../../common/mock';
 import { useGetCasesMockState, connectorsMock } from '../../containers/mock';
 
-import { SortFieldCase, StatusAll } from '../../../common/ui/types';
+import { SortFieldCase } from '../../../common/ui/types';
 import { CaseSeverity, CaseStatuses } from '../../../common/types/domain';
 import { SECURITY_SOLUTION_OWNER } from '../../../common/constants';
 import { getEmptyTagValue } from '../empty_value';
@@ -393,7 +393,8 @@ describe('AllCasesListGeneric', () => {
   it('should sort by status', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
-    userEvent.click(screen.getByTitle('Status'));
+    // 0 is the status filter button label
+    userEvent.click(screen.getAllByTitle('Status')[1]);
 
     await waitFor(() => {
       expect(useGetCasesMock).toHaveBeenLastCalledWith(
@@ -414,14 +415,16 @@ describe('AllCasesListGeneric', () => {
       expect(screen.getByTitle('Name')).toBeInTheDocument();
       expect(screen.getByTitle('Category')).toBeInTheDocument();
       expect(screen.getByTitle('Created on')).toBeInTheDocument();
-      expect(screen.getByTitle('Severity')).toBeInTheDocument();
+      // 0 is the severity filter button label
+      expect(screen.getAllByTitle('Severity')[1]).toBeInTheDocument();
     });
   });
 
   it('should sort by severity', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
-    userEvent.click(screen.getByTitle('Severity'));
+    // 0 is the severity filter button label
+    userEvent.click(screen.getAllByTitle('Severity')[1]);
 
     await waitFor(() => {
       expect(useGetCasesMock).toHaveBeenLastCalledWith(
@@ -493,7 +496,7 @@ describe('AllCasesListGeneric', () => {
   it('should filter by category', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
-    userEvent.click(screen.getByTestId('options-filter-popover-button-Categories'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-category'));
     await waitForEuiPopoverOpen();
     userEvent.click(screen.getByTestId('options-filter-popover-item-twix'));
 
@@ -512,9 +515,9 @@ describe('AllCasesListGeneric', () => {
 
   it('should filter by status: closed', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
-    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-status'));
     await waitForEuiPopoverOpen();
-    userEvent.click(screen.getByTestId('case-status-filter-closed'));
+    userEvent.click(screen.getByTestId('options-filter-popover-item-closed'));
     await waitFor(() => {
       expect(useGetCasesMock).toHaveBeenLastCalledWith(
         expect.objectContaining({
@@ -526,9 +529,9 @@ describe('AllCasesListGeneric', () => {
 
   it('should filter by status: in-progress', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
-    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-status'));
     await waitForEuiPopoverOpen();
-    userEvent.click(screen.getByTestId('case-status-filter-in-progress'));
+    userEvent.click(screen.getByTestId('options-filter-popover-item-in-progress'));
     await waitFor(() => {
       expect(useGetCasesMock).toHaveBeenLastCalledWith(
         expect.objectContaining({
@@ -540,9 +543,9 @@ describe('AllCasesListGeneric', () => {
 
   it('should filter by status: open', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
-    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-status'));
     await waitForEuiPopoverOpen();
-    userEvent.click(screen.getByTestId('case-status-filter-in-progress'));
+    userEvent.click(screen.getByTestId('options-filter-popover-item-open'));
     await waitFor(() => {
       expect(useGetCasesMock).toHaveBeenLastCalledWith(
         expect.objectContaining({
@@ -555,20 +558,23 @@ describe('AllCasesListGeneric', () => {
   it('should show the correct count on stats', async () => {
     appMockRenderer.render(<AllCasesList isSelectorView={false} />);
 
-    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-status'));
 
     await waitFor(() => {
-      expect(screen.getByTestId('case-status-filter-open')).toHaveTextContent('Open (20)');
-      expect(screen.getByTestId('case-status-filter-in-progress')).toHaveTextContent(
+      expect(screen.getByTestId('options-filter-popover-item-open')).toHaveTextContent('Open (20)');
+      expect(screen.getByTestId('options-filter-popover-item-in-progress')).toHaveTextContent(
         'In progress (40)'
       );
-      expect(screen.getByTestId('case-status-filter-closed')).toHaveTextContent('Closed (130)');
+      expect(screen.getByTestId('options-filter-popover-item-closed')).toHaveTextContent(
+        'Closed (130)'
+      );
     });
   });
 
-  it('renders the first available status when hiddenStatus is given', async () => {
+  // FIXME: This was checking for the button label, this does not exists anymore. Maybe we can get rid of this test
+  it.skip('renders the first available status when hiddenStatus is given', async () => {
     appMockRenderer.render(
-      <AllCasesList hiddenStatuses={[StatusAll, CaseStatuses.open]} isSelectorView={true} />
+      <AllCasesList hiddenStatuses={[CaseStatuses.open]} isSelectorView={true} />
     );
 
     await waitFor(() =>
@@ -632,9 +638,9 @@ describe('AllCasesListGeneric', () => {
       expect(checkbox).toBeChecked();
     }
 
-    userEvent.click(screen.getByTestId('case-status-filter'));
+    userEvent.click(screen.getByTestId('options-filter-popover-button-status'));
     await waitForEuiPopoverOpen();
-    userEvent.click(screen.getByTestId('case-status-filter-closed'));
+    userEvent.click(screen.getByTestId('options-filter-popover-item-open'));
 
     for (const checkbox of checkboxes) {
       expect(checkbox).not.toBeChecked();
@@ -692,9 +698,9 @@ describe('AllCasesListGeneric', () => {
         filterOptions: {
           search: '',
           searchFields: ['title', 'description'],
-          severity: ['all'],
+          severity: [],
           reporters: [],
-          status: ['all'],
+          status: [],
           tags: [],
           assignees: [],
           owner: ['securitySolution', 'observability'],
@@ -719,9 +725,9 @@ describe('AllCasesListGeneric', () => {
         filterOptions: {
           search: '',
           searchFields: ['title', 'description'],
-          severity: ['all'],
+          severity: [],
           reporters: [],
-          status: ['all'],
+          status: [],
           tags: [],
           assignees: [],
           owner: ['securitySolution'],
@@ -742,9 +748,9 @@ describe('AllCasesListGeneric', () => {
         filterOptions: {
           search: '',
           searchFields: ['title', 'description'],
-          severity: ['all'],
+          severity: [],
           reporters: [],
-          status: ['all'],
+          status: [],
           tags: [],
           assignees: [],
           owner: ['securitySolution', 'observability'],
@@ -775,9 +781,9 @@ describe('AllCasesListGeneric', () => {
         filterOptions: {
           search: '',
           searchFields: ['title', 'description'],
-          severity: ['all'],
+          severity: [],
           reporters: [],
-          status: ['all'],
+          status: [],
           tags: [],
           assignees: [],
           owner: ['securitySolution'],

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

@@ -11,16 +11,11 @@ import { EuiProgress } from '@elastic/eui';
 import { difference, head, isEmpty } from 'lodash/fp';
 import styled, { css } from 'styled-components';
 
-import type {
-  CaseUI,
-  CaseStatusWithAllStatus,
-  FilterOptions,
-  CasesUI,
-} from '../../../common/ui/types';
+import type { CaseUI, FilterOptions, CasesUI } from '../../../common/ui/types';
 import type { CasesOwners } from '../../client/helpers/can_use_cases';
 import type { EuiBasicTableOnChange, Solution } from './types';
 
-import { SortFieldCase, StatusAll } from '../../../common/ui/types';
+import { SortFieldCase } from '../../../common/ui/types';
 import { CaseStatuses, caseStatuses } from '../../../common/types/domain';
 import { OWNER_INFO } from '../../../common/constants';
 import { useAvailableCasesOwners } from '../app/use_available_owners';
@@ -67,7 +62,7 @@ const mapToReadableSolutionName = (solution: string): Solution => {
 };
 
 export interface AllCasesListProps {
-  hiddenStatuses?: CaseStatusWithAllStatus[];
+  hiddenStatuses?: CaseStatuses[];
   isSelectorView?: boolean;
   onRowClick?: (theCase?: CaseUI, isCreateCase?: boolean) => void;
 }
@@ -160,16 +155,15 @@ export const AllCasesList = React.memo<AllCasesListProps>(
 
     const onFilterChangedCallback = useCallback(
       (newFilterOptions: Partial<FilterOptions>) => {
+        // FIXME: how should this work with multiple options?
         if (newFilterOptions?.status) {
           if (
             newFilterOptions.status[0] === CaseStatuses.closed &&
             queryParams.sortField === SortFieldCase.createdAt
           ) {
             setQueryParams({ sortField: SortFieldCase.closedAt });
           } else if (
-            [CaseStatuses.open, CaseStatuses['in-progress'], StatusAll].includes(
-              newFilterOptions.status[0]
-            ) &&
+            [CaseStatuses.open, CaseStatuses['in-progress']].includes(newFilterOptions.status[0]) &&
             queryParams.sortField === SortFieldCase.closedAt
           ) {
             setQueryParams({ sortField: SortFieldCase.createdAt });
@@ -211,7 +205,7 @@ export const AllCasesList = React.memo<AllCasesListProps>(
     );
 
     const { columns } = useCasesColumns({
-      filterStatus: filterOptions.status ?? StatusAll,
+      filterStatus: filterOptions.status ?? [],
       userProfiles: userProfiles ?? new Map(),
       isSelectorView,
       connectors,
@@ -270,22 +264,12 @@ export const AllCasesList = React.memo<AllCasesListProps>(
           countInProgressCases={data.countInProgressCases}
           onFilterChanged={onFilterChangedCallback}
           availableSolutions={hasOwner ? [] : availableSolutionsLabels}
-          initial={{
-            search: filterOptions.search,
-            searchFields: filterOptions.searchFields,
-            assignees: filterOptions.assignees,
-            reporters: filterOptions.reporters,
-            tags: filterOptions.tags,
-            status: filterOptions.status,
-            owner: filterOptions.owner,
-            severity: filterOptions.severity,
-            category: filterOptions.category,
-          }}
           hiddenStatuses={hiddenStatuses}
           onCreateCasePressed={onCreateCasePressed}
           isSelectorView={isSelectorView}
           isLoading={isLoadingCurrentUserProfile}
           currentUserProfile={currentUserProfile}
+          filterOptions={filterOptions}
         />
         <CasesTable
           columns={columns}