Skip to content

Commit

Permalink
fix assign deactivate +custom field filter factory
Browse files Browse the repository at this point in the history
  • Loading branch information
jcger committed Nov 23, 2023
1 parent 1d74669 commit 4f7c987
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 89 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<MultiSelectFilter
buttonLabel={buttonLabel}
id={fieldKey}
onChange={onCustomFieldChange}
options={customFieldOptions.map((option) => ({
key: option.key,
label: option.label,
}))}
selectedOptionKeys={filterOptions.customFields[fieldKey]?.options || []}
/>
);
},
};
};

export const useCustomFieldsFilterConfig = ({
onFilterOptionChange,
}: {
onFilterOptionChange: FilterChangeHandler;
}) => {
const [filterConfig, setFilterConfig] = useState<FilterConfig[]>([]);

const {
Expand All @@ -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 (
<MultiSelectFilter
buttonLabel={buttonLabel}
id={fieldKey}
onChange={onCustomFieldChange}
options={customFieldOptions.map((option) => ({
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 };
};
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const useFilterConfig = ({
onFilterOptionChange: FilterChangeHandler;
}) => {
const { appId } = useCasesContext();
const { customFieldsFilterConfig } = useCustomFieldsFilterConfig();
const { customFieldsFilterConfig } = useCustomFieldsFilterConfig({ onFilterOptionChange });
const [filters, setFilters] = useState<Map<string, FilterConfig>>(
() => new Map([...systemFilterConfig].map((filter) => [filter.key, filter]))
);
Expand Down Expand Up @@ -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);
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ interface UseFilterConfigProps {
hiddenStatuses?: CaseStatuses[];
isLoading: boolean;
isSelectorView?: boolean;
onFilterOptionChange: FilterChangeHandler;
selectedAssignees: AssigneesFilteringSelection[];
tags: string[];
}
Expand All @@ -47,6 +48,7 @@ export const getSystemFilterConfig = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
}: UseFilterConfigProps): FilterConfig[] => {
Expand All @@ -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) => (
<SeverityFilter selectedOptionKeys={filterOptions.severity} onChange={onChange} />
Expand All @@ -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) => (
<StatusFilter
Expand All @@ -83,13 +85,12 @@ export const getSystemFilterConfig = ({
),
},
{
key: 'assignee',
key: 'assignees',
label: i18n.ASSIGNEES,
isActive: true,
isAvailable: caseAssignmentAuthorized && !isSelectorView,
deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
// FIXME: not working
onChange({ filterId: 'assignee', selectedOptionKeys: [] });
deactivate: () => {
handleSelectedAssignees([]);
},
render: ({ filterOptions, onChange }: FilterConfigRenderParams) => {
return (
Expand All @@ -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) => (
<MultiSelectFilter
Expand All @@ -127,8 +128,8 @@ export const getSystemFilterConfig = ({
label: i18n.CATEGORIES,
isActive: true,
isAvailable: true,
deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
onChange({ filterId: 'category', selectedOptionKeys: [] });
deactivate: () => {
onFilterOptionChange({ filterId: 'category', selectedOptionKeys: [] });
},
render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
<MultiSelectFilter
Expand All @@ -147,9 +148,8 @@ export const getSystemFilterConfig = ({
label: i18n.SOLUTION,
isActive: true,
isAvailable: availableSolutions.length > 1,
deactivate: ({ onChange }: { onChange: FilterChangeHandler }) => {
// FIXME: test this
onChange({ filterId: 'owner', selectedOptionKeys: availableSolutions });
deactivate: () => {
onFilterOptionChange({ filterId: 'owner', selectedOptionKeys: availableSolutions });
},
render: ({ filterOptions, onChange }: FilterConfigRenderParams) => (
<SolutionFilter
Expand All @@ -174,6 +174,7 @@ export const useSystemFilterConfig = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
}: UseFilterConfigProps) => {
Expand All @@ -190,6 +191,7 @@ export const useSystemFilterConfig = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
})
Expand All @@ -209,6 +211,7 @@ export const useSystemFilterConfig = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
})
Expand All @@ -225,6 +228,7 @@ export const useSystemFilterConfig = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
]);
Expand Down
46 changes: 23 additions & 23 deletions x-pack/plugins/cases/public/components/all_cases/table_filters.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -103,6 +102,7 @@ const CasesTableFiltersComponent = ({
hiddenStatuses,
isLoading,
isSelectorView,
onFilterOptionChange,
selectedAssignees,
tags,
});
Expand Down

0 comments on commit 4f7c987

Please sign in to comment.