Fix button display logic

packages/ra-core/src/i18n/TranslationMessages.ts

@@ -113,6 +113,8 @@ export interface TranslationMessages extends StringMap {
         navigation: {
             [key: string]: StringMap | string;
             no_results: string;
+            no_filtered_results: string;
+            clear_filters: string;
             no_more_results: string;
             page_out_of_boundaries: string;
             page_out_from_end: string;

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

@@ -112,8 +112,8 @@ const englishMessages: TranslationMessages = {
                 "Some of your changes weren't saved. Are you sure you want to ignore them?",
         },
         navigation: {
-            clear_filters: 'Clear filters.',
-            no_filtred_results:
+            clear_filters: 'Clear filters',
+            no_filtered_results:
                 'No %{resource} found using the current filters.',
             no_results: 'No %{resource} found',
             no_more_results:

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

@@ -117,8 +117,8 @@ 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:
+            clear_filters: 'Effacer les filtres',
+            no_filtered_results:
                 'Aucun résultat trouvé avec les filtres actuels.',
             no_results: 'Aucun résultat',
             no_more_results:

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NoFilter, WithFilter } from './ListNoResults.stories';
+
+describe('List?oResults', () => {
+    it('should display no results found message when no filter', async () => {
+        render(<NoFilter />);
+        await screen.findByText('No results found.');
+    });
+
+    it('should display no results found message and a clear filter link when there is a filter', async () => {
+        render(<WithFilter />);
+        await screen.findByText('No results found with the current filters.');
+        screen.getByText('Clear filters').click();
+        await screen.findByText('{"id":1}');
+    });
+});

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useList, ListContextProvider } from 'ra-core';
+import { ListNoResults } from './ListNoResults';
+
+export default {
+    title: 'ra-ui-materialui/list/ListNoResults',
+};
+
+export const NoFilter = () => {
+    const context = useList<any>({ data: [] });
+    return (
+        <ListContextProvider value={context}>
+            {context.data?.length === 0 && <ListNoResults />}
+        </ListContextProvider>
+    );
+};
+
+export const WithFilter = () => {
+    const context = useList<any>({ data: [{ id: 1 }], filter: { id: 2 } });
+    return (
+        <ListContextProvider value={context}>
+            {context.data?.length === 0 ? (
+                <ListNoResults />
+            ) : (
+                <ul>
+                    {context.data?.map(record => (
+                        <li key={record.id}>{JSON.stringify(record)}</li>
+                    ))}
+                </ul>
+            )}
+        </ListContextProvider>
+    );
+};

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

@@ -1,33 +1,36 @@
 import * as React from 'react';
-import { memo } from 'react';
-import CardContent from '@mui/material/CardContent';
-import Typography from '@mui/material/Typography';
-import { useListController, useResourceContext, useTranslate } from 'ra-core';
-import { Link } from '@mui/material';
+import { CardContent, Typography } from '@mui/material';
+import { useListContext, useResourceContext, useTranslate } from 'ra-core';
 
-export const ListNoResults = memo(() => {
+import { Button } from '../button';
+
+export const ListNoResults = () => {
     const translate = useTranslate();
     const resource = useResourceContext();
-    const { filterValues, setFilters } = useListController({ resource });
+    const { filterValues, setFilters } = useListContext();
     return (
         <CardContent>
             <Typography variant="body2">
                 {filterValues && Object.keys(filterValues).length > 0 ? (
                     <>
-                        {translate('ra.navigation.no_filtred_results', {
+                        {translate('ra.navigation.no_filtered_results', {
                             resource,
+                            _: 'No results found with the current filters.',
                         })}{' '}
-                        <Link
-                            component="button"
+                        <Button
                             onClick={() => setFilters({}, [])}
-                        >
-                            {translate('ra.navigation.clear_filters')}
-                        </Link>
+                            label={translate('ra.navigation.clear_filters', {
+                                _: 'Clear filters',
+                            })}
+                        />
                     </>
                 ) : (
-                    translate('ra.navigation.no_results', { resource })
+                    translate('ra.navigation.no_results', {
+                        resource,
+                        _: 'No results found.',
+                    })
                 )}
             </Typography>
         </CardContent>
     );
-});
+};