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.', + }) )} ); -}); +};