Merge pull request #8017 from marmelab/7831-clear-all-filters

djhi · web-flow · commit 61fe3519a696 · 2022-08-03T19:01:57.000+02:00
Add a "Clear all filters" button
diff --git a/packages/ra-core/src/i18n/TranslationMessages.ts b/packages/ra-core/src/i18n/TranslationMessages.ts
@@ -23,6 +23,7 @@ export interface TranslationMessages extends StringMap {
             list: string;
             refresh: string;
             remove_filter: string;
+            remove_all_filters: string;
             remove: string;
             save: string;
             search: string;
diff --git a/packages/ra-language-english/src/index.ts b/packages/ra-language-english/src/index.ts
@@ -19,6 +19,7 @@ const englishMessages: TranslationMessages = {
             list: 'List',
             refresh: 'Refresh',
             remove_filter: 'Remove this filter',
+            remove_all_filters: 'Remove all filters',
             remove: 'Remove',
             save: 'Save',
             search: 'Search',
diff --git a/packages/ra-language-french/src/index.ts b/packages/ra-language-french/src/index.ts
@@ -20,6 +20,7 @@ const frenchMessages: TranslationMessages = {
             list: 'Liste',
             refresh: 'Actualiser',
             remove_filter: 'Supprimer ce filtre',
+            remove_all_filters: 'Supprimer tous les filtres',
             remove: 'Supprimer',
             save: 'Enregistrer',
             select_all: 'Tout sélectionner',
diff --git a/packages/ra-ui-materialui/src/list/List.stories.tsx b/packages/ra-ui-materialui/src/list/List.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Admin } from 'react-admin';
+import { Admin, AutocompleteInput } from 'react-admin';
 import { Resource, useListContext } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { createMemoryHistory } from 'history';
@@ -12,7 +12,7 @@ import { SearchInput, TextInput } from '../input';
 
 export default { title: 'ra-ui-materialui/list/List' };
 
-const dataProvider = fakeRestDataProvider({
+const data = {
     books: [
         {
             id: 1,
@@ -80,9 +80,22 @@ const dataProvider = fakeRestDataProvider({
             author: 'James Joyce',
             year: 1922,
         },
+        {
+            id: 12,
+            title: 'One Hundred Years of Solitude',
+            author: 'Gabriel García Márquez',
+            year: 1967,
+        },
+        {
+            id: 13,
+            title: 'Snow Country',
+            author: 'Yasunari Kawabata',
+            year: 1956,
+        },
     ],
     authors: [],
-});
+};
+const dataProvider = fakeRestDataProvider(data);
 
 const history = createMemoryHistory({ initialEntries: ['/books'] });
 
@@ -130,7 +143,19 @@ const BookListWithFilters = () => (
     <List
         filters={[
             <SearchInput source="q" alwaysOn />,
-            <TextInput source="title" />,
+            <AutocompleteInput
+                source="title"
+                optionValue="title"
+                optionText="title"
+                choices={data.books}
+            />,
+            <AutocompleteInput
+                source="author"
+                optionValue="author"
+                optionText="author"
+                choices={data.books}
+            />,
+            <TextInput source="year" />,
         ]}
     >
         <BookList />
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
 import { createTheme } from '@mui/material/styles';
 
 import { AdminContext } from '../../AdminContext';
 import { FilterButton } from './FilterButton';
 import { TextInput } from '../../input';
+import { Basic } from './FilterButton.stories';
 
 const theme = createTheme();
 
@@ -44,25 +45,6 @@ describe('<FilterButton />', () => {
             expect(queryByText('Name')).toBeNull();
         });
 
-        it('should not display the filter button if all filters are shown and there is no filter value', () => {
-            render(
-                <AdminContext theme={theme}>
-                    <FilterButton
-                        {...defaultProps}
-                        filters={[
-                            <TextInput source="title" label="Title" />,
-                            <TextInput source="customer.name" label="Name" />,
-                        ]}
-                        displayedFilters={{
-                            title: true,
-                            'customer.name': true,
-                        }}
-                    />
-                </AdminContext>
-            );
-            expect(screen.queryByLabelText('ra.action.add_filter')).toBeNull();
-        });
-
         it('should display the filter button if all filters are shown and there is a filter value', () => {
             render(
                 <AdminContext theme={theme}>
@@ -91,7 +73,7 @@ describe('<FilterButton />', () => {
             const hiddenFilter = (
                 <TextInput source="Returned" label="Returned" disabled={true} />
             );
-            const { getByRole, getByLabelText } = render(
+            const { getByLabelText, queryByText } = render(
                 <AdminContext theme={theme}>
                     <FilterButton
                         {...defaultProps}
@@ -102,12 +84,45 @@ describe('<FilterButton />', () => {
 
             fireEvent.click(getByLabelText('ra.action.add_filter'));
 
-            const disabledFilter = getByRole('menuitem');
+            const disabledFilter = queryByText('Returned')?.closest('li');
 
             expect(disabledFilter).not.toBeNull();
-            expect(disabledFilter.getAttribute('aria-disabled')).toEqual(
+            expect(disabledFilter?.getAttribute('aria-disabled')).toEqual(
                 'true'
             );
         });
+
+        it('should remove all filters when the "Clear all filters" button is clicked', async () => {
+            render(<Basic />);
+
+            // First, check we don't have a clear filters option yet
+            await screen.findByText('Add filter');
+            fireEvent.click(screen.getByText('Add filter'));
+
+            await screen.findByText('Title', { selector: 'li > span' });
+            expect(screen.queryByDisplayValue('Remove all filters')).toBeNull();
+
+            // Then we apply a filter
+            fireEvent.click(
+                screen.getByText('Title', { selector: 'li > span' })
+            );
+            await screen.findByDisplayValue(
+                'Accusantium qui nihil voluptatum quia voluptas maxime ab similique'
+            );
+
+            // Then we clear all filters
+            fireEvent.click(screen.getByText('Add filter'));
+            await screen.findByText('Remove all filters');
+            fireEvent.click(screen.getByText('Remove all filters'));
+
+            // We check that the previously applied filter has been removed
+            await waitFor(() => {
+                expect(
+                    screen.queryByDisplayValue(
+                        'Accusantium qui nihil voluptatum quia voluptas maxime ab similique'
+                    )
+                ).toBeNull();
+            });
+        });
     });
 });
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx
@@ -10,8 +10,8 @@ import {
     Pagination,
     TextField,
     TextInput,
+    TopToolbar,
 } from 'react-admin';
-import { Stack } from '@mui/material';
 import fakerestDataProvider from 'ra-data-fakerest';
 
 export default { title: 'ra-ui-materialui/list/filter/FilterButton' };
@@ -100,24 +100,21 @@ const data = {
         },
     ],
 };
-const postFilters = [
-    <TextInput label="Search" source="q" alwaysOn />,
-    <TextInput label="Title" source="title" defaultValue="Hello, World!" />,
-];
 
-const ListToolbar = () => (
-    <Stack direction="row" justifyContent="space-between">
-        <FilterForm filters={postFilters} />
-        <div>
-            <FilterButton filters={postFilters} />
-            <CreateButton />
-        </div>
-    </Stack>
-);
-
-const PostList = () => (
+const ListToolbar = (props: { postFilters: React.ReactElement[] }) => {
+    return (
+        <TopToolbar>
+            <FilterForm filters={props.postFilters} />
+            <div>
+                <FilterButton filters={props.postFilters} />
+                <CreateButton />
+            </div>
+        </TopToolbar>
+    );
+};
+const PostList = (props: { postFilters: React.ReactElement[] }) => (
     <ListBase>
-        <ListToolbar />
+        <ListToolbar postFilters={props.postFilters} />
         <Datagrid>
             <TextField source="id" />
             <TextField source="title" />
@@ -127,8 +124,35 @@ const PostList = () => (
     </ListBase>
 );
 
-export const Basic = () => (
-    <Admin dataProvider={fakerestDataProvider(data)}>
-        <Resource name="posts" list={PostList} />
-    </Admin>
-);
+export const Basic = () => {
+    const postFilters: React.ReactElement[] = [
+        <TextInput label="Search" source="q" alwaysOn />,
+        <TextInput
+            label="Title"
+            source="title"
+            defaultValue="Accusantium qui nihil voluptatum quia voluptas maxime ab similique"
+        />,
+    ];
+    return (
+        <Admin dataProvider={fakerestDataProvider(data)}>
+            <Resource
+                name="posts"
+                list={<PostList postFilters={postFilters} />}
+            />
+        </Admin>
+    );
+};
+
+export const DisabledFilters = () => {
+    const postFilters: React.ReactElement[] = [
+        <TextInput label="Title" source="title" disabled={true} />,
+    ];
+    return (
+        <Admin dataProvider={fakerestDataProvider(data)}>
+            <Resource
+                name="posts"
+                list={<PostList postFilters={postFilters} />}
+            />
+        </Admin>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx
@@ -34,10 +34,12 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => {
         displayedFilters = {},
         filterValues,
         perPage,
+        setFilters,
         showFilter,
         sort,
     } = useListContext(props);
     const hasFilterValues = !isEqual(filterValues, {});
+    const hasDisplayedFilters = !isEqual(displayedFilters, {});
     const validSavedQueries = extractValidSavedQueries(savedQueries);
     const hasSavedCurrentQuery = validSavedQueries.some(savedQuery =>
         isEqual(savedQuery.value, {
@@ -184,13 +186,20 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => {
                         </MenuItem>
                     )
                 )}
-                {hasFilterValues && !hasSavedCurrentQuery ? (
+                {hasFilterValues && !hasSavedCurrentQuery && (
                     <MenuItem onClick={showAddSavedQueryDialog}>
                         {translate('ra.saved_queries.new_label', {
                             _: 'Save current query...',
                         })}
                     </MenuItem>
-                ) : null}
+                )}
+                {hasDisplayedFilters && (
+                    <MenuItem onClick={() => setFilters({}, {}, false)}>
+                        {translate('ra.action.remove_all_filters', {
+                            _: 'Remove all filters',
+                        })}
+                    </MenuItem>
+                )}
             </Menu>
             <AddSavedQueryDialog
                 open={addSavedQueryDialogOpen}
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx
@@ -68,7 +68,7 @@ describe('<FilterForm />', () => {
                 />
             </AdminContext>
         );
-        fireEvent.change(screen.queryByLabelText('Title'), {
+        fireEvent.change(screen.queryByLabelText('Title') as Element, {
             target: { value: 'foo' },
         });
         await waitFor(() => {
@@ -164,7 +164,7 @@ describe('<FilterForm />', () => {
                 />
             </AdminContext>
         );
-        fireEvent.change(screen.queryByLabelText('Title'), {
+        fireEvent.change(screen.queryByLabelText('Title') as Element, {
             target: { value: 'foo' },
         });
         await waitFor(() => {
