added onDelete prop on filters

elastic · Nov 22, 2023 · c915c16 · c915c16
1 parent 88a4e04
commit c915c16
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 27 deletions.
diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/types.ts b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/types.ts
@@ -29,5 +29,6 @@ export interface FilterConfig {
   label: string;
   isActive: boolean;
   isAvailable: boolean;
+  onDeactivate: (params: { onChange: FilterChangeHandler }) => void;
   render: (params: FilterConfigRenderParams) => React.ReactNode;
 }
diff --git a/...cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx b/...cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx
@@ -32,6 +32,13 @@ export const useCustomFieldsFilterConfig = () => {
           isActive: false,
           isAvailable: type === CustomFieldTypes.TOGGLE,
           label: buttonLabel,
+          onDeactivate: ({ onChange }) => {
+            onChange({
+              filterId: fieldKey,
+              selectedOptionKeys: [],
+              customFieldType: type,
+            });
+          },
           render: ({ filterOptions, onChange }: FilterConfigRenderParams) => {
             const onCustomFieldChange = ({
               filterId,

diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_filter_config.tsx
@@ -8,7 +8,7 @@
 import { useState, useEffect } from 'react';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
 import { LOCAL_STORAGE_KEYS } from '../../../../common/constants';
-import type { FilterConfig, FilterConfigState } from './types';
+import type { FilterChangeHandler, FilterConfig, FilterConfigState } from './types';
 import { useCustomFieldsFilterConfig } from './use_custom_fields_filter_config';
 import { MoreFiltersSelectable } from './more_filters_selectable';
 import { useCasesContext } from '../../cases_context/use_cases_context';
@@ -31,7 +31,13 @@ const deserializeFilterVisibilityMap = (value: string): Map<string, FilterConfig
   );
 };
 
-export const useFilterConfig = ({ systemFilterConfig }: { systemFilterConfig: FilterConfig[] }) => {
+export const useFilterConfig = ({
+  systemFilterConfig,
+  onFilterOptionChange,
+}: {
+  systemFilterConfig: FilterConfig[];
+  onFilterOptionChange: FilterChangeHandler;
+}) => {
   const { appId } = useCasesContext();
   const { customFieldsFilterConfig } = useCustomFieldsFilterConfig();
   const [filters, setFilters] = useState<Map<string, FilterConfig>>(
@@ -64,6 +70,10 @@ export const useFilterConfig = ({ systemFilterConfig }: { systemFilterConfig: Fi
           newFilterVisibilityMap.set(key, { key, isActive: true });
         }
       } else {
+        const filter = filters.get(key);
+        if (filter) {
+          filter.onDeactivate({ onChange: onFilterOptionChange });
+        }
         newFilterVisibilityMap.set(key, { key, isActive: false });
       }
     });

diff --git a/...lugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx b/...lugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx
@@ -17,7 +17,7 @@ import { SeverityFilter } from '../severity_filter';
 import { AssigneesFilterPopover } from '../assignees_filter';
 import type { CurrentUserProfile } from '../../types';
 import type { AssigneesFilteringSelection } from '../../user_profiles/types';
-import type { FilterConfig, FilterConfigRenderParams } from './types';
+import type { FilterChangeHandler, FilterConfig, FilterConfigRenderParams } from './types';
 
 interface UseFilterConfigProps {
   availableSolutions: string[];
@@ -56,6 +56,9 @@ export const getSystemFilterConfig = ({
       label: i18n.SEVERITY,
       isActive: true,
       isAvailable: true,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        onChange({ filterId: 'severity', selectedOptionKeys: [] });
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
         <SeverityFilter selectedOptionKeys={filterOptions.severity} onChange={onChange} />
       ),
@@ -65,6 +68,9 @@ export const getSystemFilterConfig = ({
       label: i18n.STATUS,
       isActive: true,
       isAvailable: true,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        onChange({ filterId: 'status', selectedOptionKeys: [] });
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
         <StatusFilter
           selectedOptionKeys={filterOptions?.status}
@@ -81,6 +87,9 @@ export const getSystemFilterConfig = ({
       label: i18n.ASSIGNEES,
       isActive: true,
       isAvailable: caseAssignmentAuthorized && !isSelectorView,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        onChange({ filterId: 'assignee', selectedOptionKeys: [] });
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => {
         return (
           <AssigneesFilterPopover
@@ -97,6 +106,9 @@ export const getSystemFilterConfig = ({
       label: i18n.TAGS,
       isActive: true,
       isAvailable: true,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        onChange({ filterId: 'tags', selectedOptionKeys: [] });
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
         <MultiSelectFilter
           buttonLabel={i18n.TAGS}
@@ -114,6 +126,9 @@ export const getSystemFilterConfig = ({
       label: i18n.CATEGORIES,
       isActive: true,
       isAvailable: true,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        onChange({ filterId: 'category', selectedOptionKeys: [] });
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
         <MultiSelectFilter
           buttonLabel={i18n.CATEGORIES}
@@ -131,6 +146,11 @@ export const getSystemFilterConfig = ({
       label: i18n.SOLUTION,
       isActive: true,
       isAvailable: availableSolutions.length > 1,
+      onDeactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
+        if (availableSolutions.length > 1) {
+          onChange({ filterId: 'owner', selectedOptionKeys: [] });
+        }
+      },
       render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
         <SolutionFilter
           onChange={onChange}

diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
@@ -65,30 +65,6 @@ const CasesTableFiltersComponent = ({
     [selectedAssignees, onFilterChanged]
   );
 
-  const { systemFilterConfig } = useSystemFilterConfig({
-    availableSolutions,
-    caseAssignmentAuthorized,
-    categories,
-    countClosedCases,
-    countInProgressCases,
-    countOpenCases,
-    currentUserProfile,
-    handleSelectedAssignees,
-    hiddenStatuses,
-    isLoading,
-    isSelectorView,
-    selectedAssignees,
-    tags,
-  });
-
-  const {
-    filters: activeFilters,
-    moreFiltersSelectableComponent: MoreFiltersSelectable,
-    selectableOptions,
-    activeSelectableOptionKeys,
-    onFilterConfigChange,
-  } = useFilterConfig({ systemFilterConfig });
-
   const onFilterOptionChange: FilterChangeHandler = ({
     filterId,
     selectedOptionKeys,
@@ -115,6 +91,30 @@ const CasesTableFiltersComponent = ({
     }
   };
 
+  const { systemFilterConfig } = useSystemFilterConfig({
+    availableSolutions,
+    caseAssignmentAuthorized,
+    categories,
+    countClosedCases,
+    countInProgressCases,
+    countOpenCases,
+    currentUserProfile,
+    handleSelectedAssignees,
+    hiddenStatuses,
+    isLoading,
+    isSelectorView,
+    selectedAssignees,
+    tags,
+  });
+
+  const {
+    filters: activeFilters,
+    moreFiltersSelectableComponent: MoreFiltersSelectable,
+    selectableOptions,
+    activeSelectableOptionKeys,
+    onFilterConfigChange,
+  } = useFilterConfig({ systemFilterConfig, onFilterOptionChange });
+
   const handleOnSearch = useCallback(
     (newSearch) => {
       const trimSearch = newSearch.trim();