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

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

@@ -112,7 +112,8 @@ 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_results: 'No %{resource} found using the current filters.',
             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,7 +117,8 @@ const frenchMessages: TranslationMessages = {
                 "Certains changements n'ont pas été enregistrés. Êtes-vous sûr(e) de vouloir quitter cette page ?",
         },
         navigation: {
-            no_results: 'Aucun résultat',
+            clear_filters: 'Effacer les filtres.',
+            no_results: 'Aucun %{resource} trouvé avec les filtres actuels.',
             no_more_results:
                 'La page numéro %{page} est en dehors des limites. Essayez la page précédente.',
             page_out_of_boundaries: 'La page %{page} est en dehors des limites',

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

@@ -2,15 +2,22 @@ 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 })}
+                {translate('ra.navigation.no_results', { resource })}{' '}
+                {filterValues && Object.keys(filterValues).length > 0 && (
+                    <Link component="button" onClick={() => setFilters({}, [])}>
+                        {translate('ra.navigation.clear_filters')}
+                    </Link>
+                )}
             </Typography>
         </CardContent>
     );

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

@@ -1,11 +1,19 @@
 import * as React from 'react';
 import { render, screen, waitFor, within } from '@testing-library/react';
-import { ListContext, ResourceContextProvider } from 'ra-core';
+import {
+    ListContext,
+    Resource,
+    ResourceContextProvider,
+    TestMemoryRouter,
+    useListFilterContext,
+} from 'ra-core';
+import fakerestDataProvider from 'ra-data-fakerest';
 
 import { AdminContext } from '../../AdminContext';
 import { SimpleList } from './SimpleList';
 import { TextField } from '../../field/TextField';
 import { NoPrimaryText } from './SimpleList.stories';
+import { Admin, List } from 'react-admin';
 
 const Wrapper = ({ children }: any) => (
     <AdminContext>
@@ -134,18 +142,59 @@ describe('<SimpleList />', () => {
 
     it('should display a message when there is no result', () => {
         render(
-            <ListContext.Provider
-                value={{
-                    isLoading: false,
-                    data: [],
-                    total: 0,
-                    resource: 'posts',
-                }}
-            >
-                <SimpleList />
-            </ListContext.Provider>
+            <TestMemoryRouter>
+                <Admin>
+                    <Resource
+                        name="posts"
+                        list={
+                            <ListContext.Provider
+                                value={{
+                                    isLoading: false,
+                                    data: [],
+                                    total: 0,
+                                    resource: 'posts',
+                                }}
+                            >
+                                <SimpleList />
+                            </ListContext.Provider>
+                        }
+                    />
+                </Admin>
+            </TestMemoryRouter>
         );
-        expect(screen.queryByText('ra.navigation.no_results')).not.toBeNull();
+        expect(
+            screen.queryByText('No posts found using the current filters.')
+        ).not.toBeNull();
+    });
+
+    it('should display a message when there is no result but filters applied', async () => {
+        const MyListView = () => {
+            const { setFilters } = useListFilterContext();
+            setFilters({ title: 'foo' }, ['title']);
+            return <SimpleList />;
+        };
+
+        render(
+            <TestMemoryRouter>
+                <Admin
+                    dataProvider={fakerestDataProvider({
+                        posts: [{ id: 1, title: 'bar' }],
+                    })}
+                >
+                    <Resource
+                        name="posts"
+                        list={
+                            <List>
+                                <MyListView />
+                            </List>
+                        }
+                    />
+                </Admin>
+            </TestMemoryRouter>
+        );
+
+        await screen.findByText('No posts found using the current filters.');
+        screen.getByText('Clear filters.');
     });
 
     it('should fall back to record representation when no primaryText is provided', async () => {