Add icons to FilterButton dropdown

packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx

@@ -1,6 +1,12 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import {
+    render,
+    fireEvent,
+    screen,
+    waitFor,
+    within,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createTheme } from '@mui/material/styles';
 import {
@@ -43,28 +49,29 @@
     });
 
     describe('filter selection menu', () => {
-        it('should display only hidden filters', () => {
-            const hiddenFilter = (
-                <TextInput source="Returned" label="Returned" />
-            );
-            const { getByLabelText, queryByText } = render(
-                <AdminContext theme={theme}>
-                    <ResourceContextProvider value="posts">
-                        <ListContextProvider value={defaultListContext}>
-                            <FilterButton
-                                filters={defaultProps.filters.concat(
-                                    hiddenFilter
-                                )}
-                            />
-                        </ListContextProvider>
-                    </ResourceContextProvider>
-                </AdminContext>
-            );
+        it('should check applied filters', async () => {
+            render(<Basic />);
 
-            fireEvent.click(getByLabelText('ra.action.add_filter'));
+            fireEvent.click(await screen.findByLabelText('Add filter'));
+
+            let checkboxs = screen.getAllByRole('checkbox');
+            expect(checkboxs).toHaveLength(3);
+            expect(checkboxs[0]).not.toBeChecked();
+            expect(checkboxs[1]).not.toBeChecked();
+            expect(checkboxs[2]).not.toBeChecked();
+
+            fireEvent.click(checkboxs[0]);
+
+            await screen.findByDisplayValue(
+                'Accusantium qui nihil voluptatum quia voluptas maxime ab similique'
+            );
+            fireEvent.click(screen.getByLabelText('Add filter'));
 
-            expect(queryByText('Returned')).not.toBeNull();
-            expect(queryByText('Name')).toBeNull();
+            checkboxs = screen.getAllByRole('checkbox');
+            expect(checkboxs).toHaveLength(3);
+            expect(checkboxs[0]).toBeChecked();
+            expect(checkboxs[1]).not.toBeChecked();
+            expect(checkboxs[2]).not.toBeChecked();
         });
 
         it('should display the filter button if all filters are shown and there is a filter value', () => {

packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx

@@ -196,6 +196,7 @@ export const Basic = (args: { disableSaveQuery?: boolean }) => {
             defaultValue="Accusantium qui nihil voluptatum quia voluptas maxime ab similique"
         />,
         <TextInput label="Nested" source="nested.foo" defaultValue="bar" />,
+        <TextInput label="Body" source="body" />,
     ];
     return (
         <TestMemoryRouter>

packages/ra-ui-materialui/src/list/filter/FilterButton.tsx

@@ -12,7 +12,12 @@ import {
     MenuItem,
     styled,
     ButtonProps as MuiButtonProps,
+    Divider,
+    ListItemIcon,
+    Checkbox,
 } from '@mui/material';
+import ContentSave from '@mui/icons-material/Save';
+import ClearIcon from '@mui/icons-material/Clear';
 import ContentFilter from '@mui/icons-material/FilterList';
 import lodashGet from 'lodash/get';
 import isEqual from 'lodash/isEqual';
@@ -52,6 +57,7 @@ export const FilterButton = (props: FilterButtonProps) => {
         perPage,
         setFilters,
         showFilter,
+        hideFilter,
         sort,
     } = useListContext();
     const hasFilterValues = !isEqual(filterValues, {});
@@ -74,13 +80,18 @@ export const FilterButton = (props: FilterButtonProps) => {
     }
 
     const hiddenFilters = filters.filter(
-        (filterElement: JSX.Element) =>
-            !filterElement.props.alwaysOn &&
-            !displayedFilters[filterElement.props.source] &&
-            typeof lodashGet(filterValues, filterElement.props.source) ===
-                'undefined'
+        (filterElement: JSX.Element) => !filterElement.props.alwaysOn
     );
 
+    const appliedFilters = hiddenFilters
+        .filter(
+            (filterElement: JSX.Element) =>
+                !!displayedFilters[filterElement.props.source] &&
+                typeof lodashGet(filterValues, filterElement.props.source) !==
+                    'undefined'
+        )
+        .map((filterElement: JSX.Element) => filterElement.props.source);
+
     const handleClickButton = useCallback(
         event => {
             // This prevents ghost click.
@@ -113,6 +124,24 @@ export const FilterButton = (props: FilterButtonProps) => {
         [showFilter, setOpen]
     );
 
+    const handleRemove = useCallback(
+        ({ source }) => {
+            hideFilter(source);
+            // We have to fallback to imperative code because the new FilterFormInput
+            // has no way of knowing it has just been displayed (and thus that it should focus its input)
+            setTimeout(() => {
+                const inputElement = document.querySelector(
+                    `input[name='${source}']`
+                ) as HTMLInputElement;
+                if (inputElement) {
+                    inputElement.focus();
+                }
+            }, 50);
+            setOpen(false);
+        },
+        [hideFilter, setOpen]
+    );
+
     // add query dialog state
     const [addSavedQueryDialogOpen, setAddSavedQueryDialogOpen] =
         useState(false);
@@ -162,9 +191,18 @@ export const FilterButton = (props: FilterButtonProps) => {
                 {hiddenFilters.map((filterElement: JSX.Element, index) => (
                     <FilterButtonMenuItem
                         key={filterElement.props.source}
-                        filter={filterElement}
+                        filter={{
+                            ...filterElement,
+                            props: {
+                                ...filterElement.props,
+                                applied: appliedFilters.includes(
+                                    filterElement.props.source
+                                ),
+                            },
+                        }}
                         resource={resource}
                         onShow={handleShow}
+                        onHide={handleRemove}
                         autoFocus={index === 0}
                     />
                 ))}
@@ -179,6 +217,9 @@ export const FilterButton = (props: FilterButtonProps) => {
                             onClick={showRemoveSavedQueryDialog}
                             key={index}
                         >
+                            <ListItemIcon>
+                                <ClearIcon fontSize="small" />
+                            </ListItemIcon>
                             {translate(
                                 'ra.saved_queries.remove_label_with_name',
                                 {
@@ -208,14 +249,27 @@ export const FilterButton = (props: FilterButtonProps) => {
                             }}
                             key={index}
                         >
+                            <Checkbox
+                                size="small"
+                                sx={{
+                                    marginLeft: 0,
+                                    paddingLeft: 0,
+                                    paddingTop: 0,
+                                    paddingBottom: 0,
+                                }}
+                            />
                             {savedQuery.label}
                         </MenuItem>
                     )
                 )}
+                {hasFilterValues && <Divider />}
                 {hasFilterValues &&
                     !hasSavedCurrentQuery &&
                     !disableSaveQuery && (
                         <MenuItem onClick={showAddSavedQueryDialog}>
+                            <ListItemIcon>
+                                <ContentSave fontSize="small" />
+                            </ListItemIcon>
                             {translate('ra.saved_queries.new_label', {
                                 _: 'Save current query...',
                             })}
@@ -228,6 +282,9 @@ export const FilterButton = (props: FilterButtonProps) => {
                             setOpen(false);
                         }}
                     >
+                        <ListItemIcon>
+                            <ClearIcon fontSize="small" />
+                        </ListItemIcon>
                         {translate('ra.action.remove_all_filters', {
                             _: 'Remove all filters',
                         })}

packages/ra-ui-materialui/src/list/filter/FilterButtonMenuItem.tsx

@@ -2,29 +2,45 @@ import * as React from 'react';
 import { forwardRef, useCallback } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import { FieldTitle, useResourceContext } from 'ra-core';
+import { Checkbox } from '@mui/material';
 
 export const FilterButtonMenuItem = forwardRef<any, FilterButtonMenuItemProps>(
     (props, ref) => {
-        const { filter, onShow, autoFocus } = props;
+        const { filter, onShow, onHide, autoFocus } = props;
         const resource = useResourceContext(props);
         const handleShow = useCallback(() => {
             onShow({
                 source: filter.props.source,
                 defaultValue: filter.props.defaultValue,
             });
         }, [filter.props.defaultValue, filter.props.source, onShow]);
+        const handleHide = useCallback(() => {
+            onHide({
+                source: filter.props.source,
+            });
+        }, [filter.props.source, onHide]);
 
         return (
             <MenuItem
                 className="new-filter-item"
                 data-key={filter.props.source}
                 data-default-value={filter.props.defaultValue}
                 key={filter.props.source}
-                onClick={handleShow}
+                onClick={filter.props.applied ? handleHide : handleShow}
                 autoFocus={autoFocus}
                 ref={ref}
                 disabled={filter.props.disabled}
             >
+                <Checkbox
+                    size="small"
+                    sx={{
+                        marginLeft: 0,
+                        paddingLeft: 0,
+                        paddingTop: 0,
+                        paddingBottom: 0,
+                    }}
+                    defaultChecked={filter.props.applied}
+                />
                 <FieldTitle
                     label={filter.props.label}
                     source={filter.props.source}
@@ -38,6 +54,7 @@ export const FilterButtonMenuItem = forwardRef<any, FilterButtonMenuItemProps>(
 export interface FilterButtonMenuItemProps {
     filter: JSX.Element;
     onShow: (params: { source: string; defaultValue: any }) => void;
+    onHide: (params: { source: string }) => void;
     resource?: string;
     autoFocus?: boolean;
 }