diff --git a/packages/ra-core/src/i18n/TranslationMessages.ts b/packages/ra-core/src/i18n/TranslationMessages.ts
index 55791d1c217..092d833d5a9 100644
--- a/packages/ra-core/src/i18n/TranslationMessages.ts
+++ b/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;
diff --git a/packages/ra-language-english/src/index.ts b/packages/ra-language-english/src/index.ts
index 0ff2ac8d3a1..f32695196d9 100644
--- a/packages/ra-language-english/src/index.ts
+++ b/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:
diff --git a/packages/ra-language-french/src/index.ts b/packages/ra-language-french/src/index.ts
index af74eed973b..09eb243f7a0 100644
--- a/packages/ra-language-french/src/index.ts
+++ b/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:
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.spec.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.spec.tsx
new file mode 100644
index 00000000000..a51560742c5
--- /dev/null
+++ b/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();
+ 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();
+ await screen.findByText('No results found with the current filters.');
+ screen.getByText('Clear filters').click();
+ await screen.findByText('{"id":1}');
+ });
+});
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.stories.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.stories.tsx
new file mode 100644
index 00000000000..089bf300a10
--- /dev/null
+++ b/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({ data: [] });
+ return (
+
+ {context.data?.length === 0 && }
+
+ );
+};
+
+export const WithFilter = () => {
+ const context = useList({ data: [{ id: 1 }], filter: { id: 2 } });
+ return (
+
+ {context.data?.length === 0 ? (
+
+ ) : (
+
+ {context.data?.map(record => (
+ - {JSON.stringify(record)}
+ ))}
+
+ )}
+
+ );
+};
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.tsx
index 2e755ba7b50..63345dd677c 100644
--- a/packages/ra-ui-materialui/src/list/ListNoResults.tsx
+++ b/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 (
{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.',
})}{' '}
- setFilters({}, [])}
- >
- {translate('ra.navigation.clear_filters')}
-
+ label={translate('ra.navigation.clear_filters', {
+ _: 'Clear filters',
+ })}
+ />
>
) : (
- translate('ra.navigation.no_results', { resource })
+ translate('ra.navigation.no_results', {
+ resource,
+ _: 'No results found.',
+ })
)}
);
-});
+};