Merge pull request #4545 from marmelab/fix-composed-filters

Fix regression on filters using dot separator in source
marmelab · Mar 19, 2020 · ecd05d9 · ecd05d9
2 parents c40894b + cbab7b2
commit ecd05d9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/packages/ra-core/src/controller/useListController.spec.tsx b/packages/ra-core/src/controller/useListController.spec.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import expect from 'expect';
-import { fireEvent, cleanup } from '@testing-library/react';
+import { fireEvent, wait, cleanup } from '@testing-library/react';
 import lolex from 'lolex';
 import TextField from '@material-ui/core/TextField/TextField';
 
@@ -35,6 +35,7 @@ describe('useListController', () => {
             sort: 'id',
             order: SORT_ASC,
             filter: {},
+            displayedFilters: {},
         },
         resource: 'posts',
         debounce: 200,
@@ -119,6 +120,7 @@ describe('useListController', () => {
                                 list: {
                                     params: {
                                         filter: { q: 'hello' },
+                                        displayedFilters: { q: true },
                                     },
                                     cachedRequests: {},
                                 },
@@ -141,6 +143,9 @@ describe('useListController', () => {
 
             const state = reduxStore.getState();
             expect(state.admin.resources.posts.list.params.filter).toEqual({});
+            expect(
+                state.admin.resources.posts.list.params.displayedFilters
+            ).toEqual({ q: true });
         });
 
         it('should update data if permanent filters change', () => {
@@ -203,17 +208,21 @@ describe('useListController', () => {
         });
     });
     describe('showFilter', () => {
-        it('Does not remove previously shown filter when adding a new one', () => {
+        it('Does not remove previously shown filter when adding a new one', async () => {
             let currentDisplayedFilters;
 
-            let fakeComponent = ({ showFilter, displayedFilters }) => {
+            let fakeComponent = ({
+                showFilter,
+                displayedFilters,
+                filterValues,
+            }) => {
                 currentDisplayedFilters = displayedFilters;
                 return (
                     <>
                         <button
                             aria-label="Show filter 1"
                             onClick={() => {
-                                showFilter('filter1', '');
+                                showFilter('filter1.subdata', 'bob');
                             }}
                         />
                         <button
@@ -238,7 +247,9 @@ describe('useListController', () => {
                         resources: {
                             posts: {
                                 list: {
-                                    params: { filter: { q: 'hello' } },
+                                    params: {
+                                        filter: { q: 'hello' },
+                                    },
                                     cachedRequests: {},
                                 },
                             },
@@ -248,11 +259,17 @@ describe('useListController', () => {
             );
 
             fireEvent.click(getByLabelText('Show filter 1'));
-            expect(currentDisplayedFilters).toEqual({ filter1: true });
+            await wait(() => {
+                expect(currentDisplayedFilters).toEqual({
+                    'filter1.subdata': true,
+                });
+            });
             fireEvent.click(getByLabelText('Show filter 2'));
-            expect(currentDisplayedFilters).toEqual({
-                filter1: true,
-                filter2: true,
+            await wait(() => {
+                expect(currentDisplayedFilters).toEqual({
+                    'filter1.subdata': true,
+                    filter2: true,
+                });
             });
         });
     });

diff --git a/packages/ra-core/src/controller/useListParams.ts b/packages/ra-core/src/controller/useListParams.ts
@@ -206,18 +206,21 @@ const useListParams = ({
 
     const hideFilter = useCallback((filterName: string) => {
         const newFilters = removeKey(filterValues, filterName);
-        const newDisplayedFilters = removeKey(
-            displayedFilterValues,
-            filterName
-        );
+        const newDisplayedFilters = {
+            ...displayedFilterValues,
+            [filterName]: undefined,
+        };
+
         setFilters(newFilters, newDisplayedFilters);
     }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
 
     const showFilter = useCallback((filterName: string, defaultValue: any) => {
-        setFilters(
-            set(filterValues, filterName, defaultValue),
-            set(displayedFilterValues, filterName, true)
-        );
+        const newFilters = set(filterValues, filterName, defaultValue);
+        const newDisplayedFilters = {
+            ...displayedFilterValues,
+            [filterName]: true,
+        };
+        setFilters(newFilters, newDisplayedFilters);
     }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
 
     return [

diff --git a/packages/ra-core/src/util/removeKey.ts b/packages/ra-core/src/util/removeKey.ts
@@ -15,6 +15,9 @@ const deepRemoveKey = (target, path) => {
     }
 
     const deepKey = paths[0];
+    if (target[deepKey] === undefined) {
+        return target;
+    }
     const deep = deepRemoveKey(target[deepKey], paths.slice(1).join('.'));
 
     if (Object.keys(deep).length === 0) {