Update <Datagrid> and <SimpleList> empty message when a filter is active

packages/ra-language-english/src/index.ts

@@ -112,7 +112,10 @@ const englishMessages: TranslationMessages = {
                 "Some of your changes weren't saved. Are you sure you want to ignore them?",
         },
         navigation: {
-            no_results: 'No results found',
+            clear_filters: 'Clear filters.',
+            no_filtred_results:
+                'No %{resource} found using the current filters.',
+            no_results: 'No %{resource} found',
             no_more_results:
                 'The page number %{page} is out of boundaries. Try the previous page.',
             page_out_of_boundaries: 'Page number %{page} out of boundaries',

packages/ra-language-french/src/index.ts

@@ -117,6 +117,9 @@ const frenchMessages: TranslationMessages = {
                 "Certains changements n'ont pas été enregistrés. Êtes-vous sûr(e) de vouloir quitter cette page ?",
         },
         navigation: {
+            clear_filters: 'Effacer les filtres.',
+            no_filtred_results:
+                'Aucun résultat trouvé avec les filtres actuels.',
             no_results: 'Aucun résultat',
             no_more_results:
                 'La page numéro %{page} est en dehors des limites. Essayez la page précédente.',

packages/ra-ui-materialui/src/list/ListNoResults.tsx

@@ -2,15 +2,31 @@ import * as React from 'react';
 import { memo } from 'react';
 import CardContent from '@mui/material/CardContent';
 import Typography from '@mui/material/Typography';
-import { useResourceContext, useTranslate } from 'ra-core';
+import { useListController, useResourceContext, useTranslate } from 'ra-core';
+import { Link } from '@mui/material';
 
 export const ListNoResults = memo(() => {
     const translate = useTranslate();
     const resource = useResourceContext();
+    const { filterValues, setFilters } = useListController({ resource });
     return (
         <CardContent>
             <Typography variant="body2">
-                {translate('ra.navigation.no_results', { resource })}
+                {filterValues && Object.keys(filterValues).length > 0 ? (
+                    <>
+                        {translate('ra.navigation.no_filtred_results', {
+                            resource,
+                        })}
+                        <Link
+                            component="button"
+                            onClick={() => setFilters({}, [])}
+                        >
+                            {translate('ra.navigation.clear_filters')}
+                        </Link>
+                    </>
+                ) : (
+                    translate('ra.navigation.no_results', { resource })
+                )}
             </Typography>
         </CardContent>
     );

packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx

@@ -1,11 +1,18 @@
 import * as React from 'react';
-import { render, screen, waitFor, within } from '@testing-library/react';
+import {
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+    within,
+} from '@testing-library/react';
 import { ListContext, ResourceContextProvider } from 'ra-core';
 
 import { AdminContext } from '../../AdminContext';
 import { SimpleList } from './SimpleList';
 import { TextField } from '../../field/TextField';
 import { NoPrimaryText } from './SimpleList.stories';
+import { Basic } from '../filter/FilterButton.stories';
 
 const Wrapper = ({ children }: any) => (
     <AdminContext>
@@ -143,11 +150,29 @@ describe('<SimpleList />', () => {
                 }}
             >
                 <SimpleList />
-            </ListContext.Provider>
+            </ListContext.Provider>,
+            { wrapper: Wrapper }
         );
         expect(screen.queryByText('ra.navigation.no_results')).not.toBeNull();
     });
 
+    it('should display a message when there is no result but filters applied', async () => {
+        render(<Basic />);
+
+        await screen.findByText(
+            'Accusantium qui nihil voluptatum quia voluptas maxime ab similique'
+        );
+
+        fireEvent.change(screen.getByLabelText('Search'), {
+            target: { value: 'w' },
+        });
+
+        expect(
+            await screen.findByText('No posts found using the current filters.')
+        ).not.toBeNull();
+        expect(screen.getByText('Clear filters.')).not.toBeNull();
+    });
+
     it('should fall back to record representation when no primaryText is provided', async () => {
         render(<NoPrimaryText />);
         await screen.findByText('War and Peace');