From cdb95f31eee297bb0cef54d57bd3d0772b5650b2 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Tue, 18 Jun 2024 15:21:45 +0200 Subject: [PATCH] fix(content-manager): fix filters bugs with relations, enums and uids --- .../admin/admin/src/components/Filters.tsx | 24 ++++++++++++------- .../src/components/FormInputs/Renderer.tsx | 1 + .../admin/src/components/FormInputs/types.ts | 1 - .../core/admin/admin/src/constants/filters.ts | 3 +++ .../src/pages/ListView/components/Filters.tsx | 10 ++++++++ 5 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/core/admin/admin/src/components/Filters.tsx b/packages/core/admin/admin/src/components/Filters.tsx index 7d5c67b3ee..6e8fc9e1d0 100644 --- a/packages/core/admin/admin/src/components/Filters.tsx +++ b/packages/core/admin/admin/src/components/Filters.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { Box, Button, Flex, Popover, Tag, useComposedRefs } from '@strapi/design-system'; +import { Box, Button, Flex, Popover, Tag } from '@strapi/design-system'; import { Plus, Filter as FilterIcon, Cross } from '@strapi/icons'; import { Schema } from '@strapi/types'; import { useIntl } from 'react-intl'; @@ -12,6 +12,7 @@ import { IS_SENSITIVE_FILTERS, NUMERIC_FILTERS, STRING_PARSE_FILTERS, + FILTERS_WITH_NO_VALUE, } from '../constants/filters'; import { useControllableState } from '../hooks/useControllableState'; import { useQueryParams } from '../hooks/useQueryParams'; @@ -119,7 +120,9 @@ const PopoverImpl = () => { } const handleSubmit = (data: FilterFormData) => { - if (!data.value) { + const value = FILTERS_WITH_NO_VALUE.includes(data.filter) ? 'true' : data.value; + + if (!value) { return; } @@ -130,12 +133,12 @@ const PopoverImpl = () => { /** * There will ALWAYS be an option because we use the options to create the form data. */ - const filterType = options.find((filter) => filter.name === data.name)!.type; + const fieldOptions = options.find((filter) => filter.name === data.name)!; /** * If the filter is a relation, we need to nest the filter object, - * we always use ids to filter relations. But the nested object is - * the operator & value pair. This value _could_ look like: + * we filter based on the mainField of the relation, if there is no mainField, we use the id. + * At the end, we pass the operator & value. This value _could_ look like: * ```json * { * "$eq": "1", @@ -143,7 +146,7 @@ const PopoverImpl = () => { * ``` */ const operatorValuePairing = { - [data.filter]: data.value, + [data.filter]: value, }; const newFilterQuery = { @@ -152,9 +155,9 @@ const PopoverImpl = () => { ...(query.filters?.$and ?? []), { [data.name]: - filterType === 'relation' + fieldOptions.type === 'relation' ? { - id: operatorValuePairing, + [fieldOptions.mainField?.name ?? 'id']: operatorValuePairing, } : operatorValuePairing, }, @@ -266,7 +269,6 @@ const getFilterList = (filter?: Filters.Filter): FilterOption[] => { switch (type) { case 'email': case 'text': - case 'enumeration': case 'string': { return [ ...BASE_FILTERS, @@ -291,6 +293,10 @@ const getFilterList = (filter?: Filters.Filter): FilterOption[] => { return [...BASE_FILTERS, ...NUMERIC_FILTERS]; } + case 'enumeration': { + return BASE_FILTERS; + } + default: return [...BASE_FILTERS, ...IS_SENSITIVE_FILTERS]; } diff --git a/packages/core/admin/admin/src/components/FormInputs/Renderer.tsx b/packages/core/admin/admin/src/components/FormInputs/Renderer.tsx index 0992432d38..16ef890d55 100644 --- a/packages/core/admin/admin/src/components/FormInputs/Renderer.tsx +++ b/packages/core/admin/admin/src/components/FormInputs/Renderer.tsx @@ -36,6 +36,7 @@ const InputRenderer = memo( case 'biginteger': case 'timestamp': case 'string': + case 'uid': return ; case 'boolean': return ; diff --git a/packages/core/admin/admin/src/components/FormInputs/types.ts b/packages/core/admin/admin/src/components/FormInputs/types.ts index dcf847eec0..e8da4b7c37 100644 --- a/packages/core/admin/admin/src/components/FormInputs/types.ts +++ b/packages/core/admin/admin/src/components/FormInputs/types.ts @@ -36,7 +36,6 @@ interface InputProps { | 'media' | 'blocks' | 'richtext' - | 'uid' | 'dynamiczone' | 'component' | 'relation' diff --git a/packages/core/admin/admin/src/constants/filters.ts b/packages/core/admin/admin/src/constants/filters.ts index d0ab823a15..576364fb11 100644 --- a/packages/core/admin/admin/src/constants/filters.ts +++ b/packages/core/admin/admin/src/constants/filters.ts @@ -158,11 +158,14 @@ const STRING_PARSE_FILTERS = [ }, ] satisfies FilterOption[]; +const FILTERS_WITH_NO_VALUE = ['$null', '$notNull']; + export { BASE_FILTERS, NUMERIC_FILTERS, IS_SENSITIVE_FILTERS, CONTAINS_FILTERS, STRING_PARSE_FILTERS, + FILTERS_WITH_NO_VALUE, }; export type { FilterOption }; diff --git a/packages/core/content-manager/admin/src/pages/ListView/components/Filters.tsx b/packages/core/content-manager/admin/src/pages/ListView/components/Filters.tsx index 428d681a25..23eafb0bb2 100644 --- a/packages/core/content-manager/admin/src/pages/ListView/components/Filters.tsx +++ b/packages/core/content-manager/admin/src/pages/ListView/components/Filters.tsx @@ -163,6 +163,16 @@ const FiltersImpl = ({ disabled, schema }: FiltersProps) => { }; } + if (attribute.type === 'enumeration') { + filter = { + ...filter, + options: attribute.enum.map((value) => ({ + label: value, + value, + })), + }; + } + return filter; }) .filter(Boolean) as Filters.Filter[]