From 4f7c9879e39cfd909e46a55f01a6f6075955d155 Mon Sep 17 00:00:00 2001 From: Julian Gernun <17549662+jcger@users.noreply.github.com> Date: Thu, 23 Nov 2023 11:58:53 +0100 Subject: [PATCH] fix assign deactivate +custom field filter factory --- .../all_cases/table_filter_config/types.ts | 2 +- .../use_custom_fields_filter_config.tsx | 117 +++++++++++------- .../table_filter_config/use_filter_config.tsx | 10 +- .../use_system_filter_config.tsx | 34 ++--- .../components/all_cases/table_filters.tsx | 46 +++---- 5 files changed, 120 insertions(+), 89 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 index d85d18903251d..bcd33198b7a2b 100644 --- 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,6 +29,6 @@ export interface FilterConfig { label: string; isActive: boolean; isAvailable: boolean; - deactivate: (params: { onChange: FilterChangeHandler }) => void; + deactivate: () => void; render: (params: FilterConfigRenderParams) => React.ReactNode; } diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx index e6e0496bb739c..92724442e0060 100644 --- a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_custom_fields_filter_config.tsx @@ -9,12 +9,73 @@ import React, { useState, useEffect } from 'react'; import { CustomFieldTypes } from '../../../../common/types/domain'; import { builderMap as customFieldsBuilder } from '../../custom_fields/builder'; import { useGetCaseConfiguration } from '../../../containers/configure/use_get_case_configuration'; -import type { FilterConfig, FilterConfigRenderParams } from './types'; +import type { FilterChangeHandler, FilterConfig, FilterConfigRenderParams } from './types'; import { MultiSelectFilter } from '../multi_select_filter'; export const CUSTOM_FIELD_KEY_PREFIX = 'cf_'; -export const useCustomFieldsFilterConfig = () => { +interface CustomFieldFilterOptionFactoryProps { + fieldKey: string; + buttonLabel: string; + type: CustomFieldTypes; + onFilterOptionChange: FilterChangeHandler; + customFieldOptions: Array<{ key: string; label: string }>; +} +const customFieldFilterOptionFactory = ({ + fieldKey, + buttonLabel, + type, + onFilterOptionChange, + customFieldOptions, +}: CustomFieldFilterOptionFactoryProps) => { + return { + key: `${CUSTOM_FIELD_KEY_PREFIX}${fieldKey}`, // this prefix is set in case custom field has the same key as a system field + isActive: false, + isAvailable: type === CustomFieldTypes.TOGGLE, + label: buttonLabel, + deactivate: () => { + onFilterOptionChange({ + filterId: fieldKey, + selectedOptionKeys: [], + customFieldType: type, + }); + }, + render: ({ filterOptions, onChange }: FilterConfigRenderParams) => { + const onCustomFieldChange = ({ + filterId, + selectedOptionKeys, + }: { + filterId: string; + selectedOptionKeys: string[]; + }) => { + onChange({ + filterId: filterId.replace(CUSTOM_FIELD_KEY_PREFIX, ''), + selectedOptionKeys, + customFieldType: type, + }); + }; + + return ( + ({ + key: option.key, + label: option.label, + }))} + selectedOptionKeys={filterOptions.customFields[fieldKey]?.options || []} + /> + ); + }, + }; +}; + +export const useCustomFieldsFilterConfig = ({ + onFilterOptionChange, +}: { + onFilterOptionChange: FilterChangeHandler; +}) => { const [filterConfig, setFilterConfig] = useState([]); const { @@ -27,52 +88,20 @@ export const useCustomFieldsFilterConfig = () => { if (customFieldsBuilder[type]) { const { filterOptions: customFieldOptions = [] } = customFieldsBuilder[type](); - customFieldsFilterConfig.push({ - key: `${CUSTOM_FIELD_KEY_PREFIX}${fieldKey}`, // this prefix is set in case custom field has the same key as a system field - isActive: false, - isAvailable: type === CustomFieldTypes.TOGGLE, - label: buttonLabel, - deactivate: ({ onChange }) => { - onChange({ - filterId: fieldKey, - selectedOptionKeys: [], - customFieldType: type, - }); - }, - render: ({ filterOptions, onChange }: FilterConfigRenderParams) => { - const onCustomFieldChange = ({ - filterId, - selectedOptionKeys, - }: { - filterId: string; - selectedOptionKeys: string[]; - }) => { - onChange({ - filterId: filterId.replace(CUSTOM_FIELD_KEY_PREFIX, ''), - selectedOptionKeys, - customFieldType: type, - }); - }; - - return ( - ({ - key: option.key, - label: option.label, - }))} - selectedOptionKeys={filterOptions.customFields[fieldKey]?.options || []} - /> - ); - }, - }); + customFieldsFilterConfig.push( + customFieldFilterOptionFactory({ + fieldKey, + buttonLabel, + type, + onFilterOptionChange, + customFieldOptions, + }) + ); } } setFilterConfig(customFieldsFilterConfig); - }, [customFields]); + }, [customFields, onFilterOptionChange]); return { customFieldsFilterConfig: filterConfig }; }; 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 index 2161d8b970fdb..2af63e35393a2 100644 --- 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 @@ -39,7 +39,7 @@ export const useFilterConfig = ({ onFilterOptionChange: FilterChangeHandler; }) => { const { appId } = useCasesContext(); - const { customFieldsFilterConfig } = useCustomFieldsFilterConfig(); + const { customFieldsFilterConfig } = useCustomFieldsFilterConfig({ onFilterOptionChange }); const [filters, setFilters] = useState>( () => new Map([...systemFilterConfig].map((filter) => [filter.key, filter])) ); @@ -89,11 +89,9 @@ export const useFilterConfig = ({ } }); - deactivatedFilters - .filter((key) => filters.has(key)) - .forEach((key) => { - (filters.get(key) as FilterConfig).deactivate({ onChange: onFilterOptionChange }); - }); + deactivatedFilters.forEach((key) => { + (filters.get(key) as FilterConfig).deactivate(); + }); setFilterVisibilityMap(newFilterVisibilityMap); }; diff --git a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx index c087f8315afe7..dfae1c15b0fc6 100644 --- a/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx +++ b/x-pack/plugins/cases/public/components/all_cases/table_filter_config/use_system_filter_config.tsx @@ -31,6 +31,7 @@ interface UseFilterConfigProps { hiddenStatuses?: CaseStatuses[]; isLoading: boolean; isSelectorView?: boolean; + onFilterOptionChange: FilterChangeHandler; selectedAssignees: AssigneesFilteringSelection[]; tags: string[]; } @@ -47,6 +48,7 @@ export const getSystemFilterConfig = ({ hiddenStatuses, isLoading, isSelectorView, + onFilterOptionChange, selectedAssignees, tags, }: UseFilterConfigProps): FilterConfig[] => { @@ -56,8 +58,8 @@ export const getSystemFilterConfig = ({ label: i18n.SEVERITY, isActive: true, isAvailable: true, - deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => { - onChange({ filterId: 'severity', selectedOptionKeys: [] }); + deactivate: () => { + onFilterOptionChange({ filterId: 'severity', selectedOptionKeys: [] }); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => ( @@ -68,8 +70,8 @@ export const getSystemFilterConfig = ({ label: i18n.STATUS, isActive: true, isAvailable: true, - deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => { - onChange({ filterId: 'status', selectedOptionKeys: [] }); + deactivate: () => { + onFilterOptionChange({ filterId: 'status', selectedOptionKeys: [] }); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => ( { - // FIXME: not working - onChange({ filterId: 'assignee', selectedOptionKeys: [] }); + deactivate: () => { + handleSelectedAssignees([]); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => { return ( @@ -107,8 +108,8 @@ export const getSystemFilterConfig = ({ label: i18n.TAGS, isActive: true, isAvailable: true, - deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => { - onChange({ filterId: 'tags', selectedOptionKeys: [] }); + deactivate: () => { + onFilterOptionChange({ filterId: 'tags', selectedOptionKeys: [] }); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => ( { - onChange({ filterId: 'category', selectedOptionKeys: [] }); + deactivate: () => { + onFilterOptionChange({ filterId: 'category', selectedOptionKeys: [] }); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => ( 1, - deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => { - // FIXME: test this - onChange({ filterId: 'owner', selectedOptionKeys: availableSolutions }); + deactivate: () => { + onFilterOptionChange({ filterId: 'owner', selectedOptionKeys: availableSolutions }); }, render: ({ filterOptions, onChange }: FilterConfigRenderParams) => ( { @@ -190,6 +191,7 @@ export const useSystemFilterConfig = ({ hiddenStatuses, isLoading, isSelectorView, + onFilterOptionChange, selectedAssignees, tags, }) @@ -209,6 +211,7 @@ export const useSystemFilterConfig = ({ hiddenStatuses, isLoading, isSelectorView, + onFilterOptionChange, selectedAssignees, tags, }) @@ -225,6 +228,7 @@ export const useSystemFilterConfig = ({ hiddenStatuses, isLoading, isSelectorView, + onFilterOptionChange, selectedAssignees, tags, ]); 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 index f6612f8e44909..2e3f4464e6099 100644 --- 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,31 +65,30 @@ const CasesTableFiltersComponent = ({ [selectedAssignees, onFilterChanged] ); - const onFilterOptionChange: FilterChangeHandler = ({ - filterId, - selectedOptionKeys, - customFieldType, - }) => { - const newFilters = customFieldType - ? { - ...filterOptions, - customFields: { - ...filterOptions.customFields, - [filterId]: { - type: customFieldType, - options: selectedOptionKeys, + const onFilterOptionChange: FilterChangeHandler = useCallback( + ({ filterId, selectedOptionKeys, customFieldType }) => { + const newFilters = customFieldType + ? { + ...filterOptions, + customFields: { + ...filterOptions.customFields, + [filterId]: { + type: customFieldType, + options: selectedOptionKeys, + }, }, - }, - } - : { - ...filterOptions, - [filterId]: selectedOptionKeys, - }; + } + : { + ...filterOptions, + [filterId]: selectedOptionKeys, + }; - if (!isEqual(newFilters, filterOptions)) { - onFilterChanged(newFilters); - } - }; + if (!isEqual(newFilters, filterOptions)) { + onFilterChanged(newFilters); + } + }, + [filterOptions, onFilterChanged] + ); const { systemFilterConfig } = useSystemFilterConfig({ availableSolutions, @@ -103,6 +102,7 @@ const CasesTableFiltersComponent = ({ hiddenStatuses, isLoading, isSelectorView, + onFilterOptionChange, selectedAssignees, tags, });