Merge pull request #8924 from marmelab/fix-emptytext-translation

Fix `<TextField>` and `<RichTextField>` don't translate the `emptyText`

Author: djhi

packages/ra-ui-materialui/src/field/RichTextField.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import expect from 'expect';
 import { render, screen, fireEvent } from '@testing-library/react';
-import { RecordContextProvider } from 'ra-core';
+import { RecordContextProvider, I18nContextProvider } from 'ra-core';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
 
 import { RichTextField, removeTags } from './RichTextField';
 import { Secure } from './RichTextField.stories';
@@ -148,4 +149,36 @@ describe('<RichTextField />', () => {
             (container.querySelector('#stolendata') as HTMLInputElement)?.value
         ).toEqual('none');
     });
+
+    it('should translate emptyText', () => {
+        const i18nProvider = polyglotI18nProvider(
+            _locale =>
+                ({
+                    resources: {
+                        books: {
+                            name: 'Books',
+                            fields: {
+                                id: 'Id',
+                                title: 'Title',
+                                author: 'Author',
+                                year: 'Year',
+                            },
+                            not_found: 'Not found',
+                        },
+                    },
+                } as any),
+            'en'
+        );
+        render(
+            <I18nContextProvider value={i18nProvider}>
+                <RichTextField
+                    record={{ id: 123 }}
+                    source="foo.bar"
+                    emptyText="resources.books.not_found"
+                />
+            </I18nContextProvider>
+        );
+
+        expect(screen.getByText('Not found')).not.toBeNull();
+    });
 });

packages/ra-ui-materialui/src/field/RichTextField.tsx

@@ -3,7 +3,7 @@ import { FC, memo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@mui/material/Typography';
-import { useRecordContext } from 'ra-core';
+import { useRecordContext, useTranslate } from 'ra-core';
 import purify from 'dompurify';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
@@ -35,6 +35,7 @@ export const RichTextField: FC<RichTextFieldProps> = memo<RichTextFieldProps>(
         } = props;
         const record = useRecordContext(props);
         const value = get(record, source);
+        const translate = useTranslate();
 
         return (
             <Typography
@@ -44,7 +45,7 @@ export const RichTextField: FC<RichTextFieldProps> = memo<RichTextFieldProps>(
                 {...sanitizeFieldRestProps(rest)}
             >
                 {value == null && emptyText ? (
-                    emptyText
+                    translate(emptyText, { _: emptyText })
                 ) : stripTags ? (
                     removeTags(value)
                 ) : (

packages/ra-ui-materialui/src/field/TextField.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, getNodeText } from '@testing-library/react';
-import { RecordContextProvider } from 'ra-core';
+import { screen, render, getNodeText } from '@testing-library/react';
+import { RecordContextProvider, I18nContextProvider } from 'ra-core';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
 
 import { TextField } from './TextField';
 
@@ -79,4 +80,36 @@ describe('<TextField />', () => {
         );
         expect(queryByText('NA')).not.toBeNull();
     });
+
+    it('should translate emptyText', () => {
+        const i18nProvider = polyglotI18nProvider(
+            _locale =>
+                ({
+                    resources: {
+                        books: {
+                            name: 'Books',
+                            fields: {
+                                id: 'Id',
+                                title: 'Title',
+                                author: 'Author',
+                                year: 'Year',
+                            },
+                            not_found: 'Not found',
+                        },
+                    },
+                } as any),
+            'en'
+        );
+        render(
+            <I18nContextProvider value={i18nProvider}>
+                <TextField
+                    record={{ id: 123 }}
+                    source="foo.bar"
+                    emptyText="resources.books.not_found"
+                />
+            </I18nContextProvider>
+        );
+
+        expect(screen.getByText('Not found')).not.toBeNull();
+    });
 });

packages/ra-ui-materialui/src/field/TextField.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { memo, FC, ElementType } from 'react';
 import get from 'lodash/get';
 import Typography, { TypographyProps } from '@mui/material/Typography';
-import { useRecordContext } from 'ra-core';
+import { useRecordContext, useTranslate } from 'ra-core';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
@@ -11,6 +11,7 @@ export const TextField: FC<TextFieldProps> = memo(props => {
     const { className, source, emptyText, ...rest } = props;
     const record = useRecordContext(props);
     const value = get(record, source);
+    const translate = useTranslate();
 
     return (
         <Typography
@@ -21,7 +22,8 @@ export const TextField: FC<TextFieldProps> = memo(props => {
         >
             {value != null && typeof value !== 'string'
                 ? JSON.stringify(value)
-                : value || emptyText}
+                : value ||
+                  (emptyText ? translate(emptyText, { _: emptyText }) : null)}
         </Typography>
     );
 });