Merge pull request #10291 from marmelab/fix-list-no-result-i18n

Fix no results message has untranslated resource name
marmelab · Oct 22, 2024 · f933e8c · f933e8c
2 parents 733108d + 2c29d7d
commit f933e8c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 24 deletions.
diff --git a/packages/ra-language-english/src/index.ts b/packages/ra-language-english/src/index.ts
@@ -119,9 +119,8 @@ const englishMessages: TranslationMessages = {
         },
         navigation: {
             clear_filters: 'Clear filters',
-            no_filtered_results:
-                'No %{resource} found using the current filters.',
-            no_results: 'No %{resource} found',
+            no_filtered_results: 'No %{name} found using the current filters.',
+            no_results: 'No %{name} 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',

diff --git a/packages/ra-ui-materialui/src/list/InfiniteList.stories.tsx b/packages/ra-ui-materialui/src/list/InfiniteList.stories.tsx
@@ -220,7 +220,7 @@ const CustomPagination = () => {
     return (
         <>
             <InfinitePagination />
-            {total > 0 && (
+            {total && total > 0 && (
                 <Box position="sticky" bottom={0} textAlign="center">
                     <Card
                         elevation={2}

diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.stories.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useList, ListContextProvider } from 'ra-core';
+import { useList, ListContextProvider, ResourceContextProvider } from 'ra-core';
 import { ThemeProvider, createTheme } from '@mui/material';
 import { ListNoResults } from './ListNoResults';
 
@@ -10,27 +10,33 @@ export default {
 export const NoFilter = () => {
     const context = useList<any>({ data: [] });
     return (
-        <ListContextProvider value={context}>
-            {context.data?.length === 0 && <ListNoResults />}
-        </ListContextProvider>
+        <ResourceContextProvider value="posts">
+            <ListContextProvider value={context}>
+                {context.data?.length === 0 && <ListNoResults />}
+            </ListContextProvider>
+        </ResourceContextProvider>
     );
 };
 
 export const WithFilter = () => {
     const context = useList<any>({ data: [{ id: 1 }], filter: { id: 2 } });
     return (
-        <ThemeProvider theme={createTheme()}>
-            <ListContextProvider value={context}>
-                {context.data?.length === 0 ? (
-                    <ListNoResults />
-                ) : (
-                    <ul>
-                        {context.data?.map(record => (
-                            <li key={record.id}>{JSON.stringify(record)}</li>
-                        ))}
-                    </ul>
-                )}
-            </ListContextProvider>
-        </ThemeProvider>
+        <ResourceContextProvider value="posts">
+            <ThemeProvider theme={createTheme()}>
+                <ListContextProvider value={context}>
+                    {context.data?.length === 0 ? (
+                        <ListNoResults />
+                    ) : (
+                        <ul>
+                            {context.data?.map(record => (
+                                <li key={record.id}>
+                                    {JSON.stringify(record)}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </ListContextProvider>
+            </ThemeProvider>
+        </ResourceContextProvider>
     );
 };
diff --git a/packages/ra-ui-materialui/src/list/ListNoResults.tsx b/packages/ra-ui-materialui/src/list/ListNoResults.tsx
@@ -1,20 +1,32 @@
 import * as React from 'react';
 import { CardContent, Typography } from '@mui/material';
-import { useListContext, useResourceContext, useTranslate } from 'ra-core';
+import {
+    useGetResourceLabel,
+    useListContext,
+    useResourceContext,
+    useTranslate,
+} from 'ra-core';
 
 import { Button } from '../button';
 
 export const ListNoResults = () => {
     const translate = useTranslate();
     const resource = useResourceContext();
     const { filterValues, setFilters } = useListContext();
+    const getResourceLabel = useGetResourceLabel();
+    if (!resource) {
+        throw new Error(
+            '<ListNoResults> must be used inside a <List> component'
+        );
+    }
     return (
         <CardContent>
             <Typography variant="body2">
                 {filterValues && Object.keys(filterValues).length > 0 ? (
                     <>
                         {translate('ra.navigation.no_filtered_results', {
                             resource,
+                            name: getResourceLabel(resource, 1),
                             _: 'No results found with the current filters.',
                         })}{' '}
                         <Button
@@ -27,6 +39,7 @@ export const ListNoResults = () => {
                 ) : (
                     translate('ra.navigation.no_results', {
                         resource,
+                        name: getResourceLabel(resource, 1),
                         _: 'No results found.',
                     })
                 )}

diff --git a/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx b/packages/ra-ui-materialui/src/list/SimpleList/SimpleList.spec.tsx
@@ -168,7 +168,7 @@ describe('<SimpleList />', () => {
         });
 
         expect(
-            await screen.findByText('No posts found using the current filters.')
+            await screen.findByText('No Post found using the current filters.')
         ).not.toBeNull();
         expect(screen.getByText('Clear filters')).not.toBeNull();
 
@@ -179,7 +179,7 @@ describe('<SimpleList />', () => {
         );
 
         expect(
-            screen.queryByText('No posts found using the current filters.')
+            screen.queryByText('No Post found using the current filters.')
         ).toBeNull();
         expect(screen.queryByText('Clear filters')).toBeNull();
         expect(