Add LabelPrefix context to better guess correct input labels

examples/simple/src/i18n/en.ts

@@ -13,34 +13,17 @@ export const messages = {
         posts: {
             name: 'Post |||| Posts',
             fields: {
-                average_note: 'Average note',
-                body: 'Body',
-                category: 'Category',
-                comments: 'Comments',
-                commentable: 'Commentable',
                 commentable_short: 'Com.',
-                created_at: 'Created at',
                 notifications: 'Notifications recipients',
                 nb_view: 'Nb views',
                 password: 'Password (if protected post)',
                 pictures: 'Related Pictures',
-                published_at: 'Published at',
-                teaser: 'Teaser',
-                tags: 'Tags',
-                title: 'Title',
-                views: 'Views',
-                authors: 'Authors',
             },
         },
         comments: {
             name: 'Comment |||| Comments',
             fields: {
-                body: 'Body',
-                created_at: 'Created at',
-                post_id: 'Posts',
-                author: {
-                    name: 'Author',
-                },
+                post_id: 'Post',
             },
         },
         users: {

examples/simple/src/i18n/fr.ts

@@ -24,12 +24,17 @@ export default {
                 nb_view: 'Nb de vues',
                 password: 'Mot de passe (si protégé)',
                 pictures: 'Photos associées',
+                'pictures.url': 'URL',
+                'pictures.metas.authors': 'Auteurs',
+                'pictures.metas.authors.name': 'Nom',
+                authors: 'Auteurs',
+                'authors.user_id': 'Nom',
+                'authors.role': 'Rôle',
                 published_at: 'Publié le',
                 teaser: 'Description',
                 tags: 'Catégories',
                 title: 'Titre',
                 views: 'Vues',
-                authors: 'Auteurs',
             },
         },
         comments: {

examples/simple/src/posts/PostEdit.tsx

@@ -153,7 +153,7 @@ const PostEdit = () => {
                                     source="user_id"
                                     reference="users"
                                 >
-                                    <AutocompleteInput label="User" />
+                                    <AutocompleteInput />
                                 </ReferenceInput>
                                 <FormDataConsumer>
                                     {({
@@ -181,7 +181,6 @@ const PostEdit = () => {
                                                     },
                                                 ]}
                                                 {...rest}
-                                                label="Role"
                                             />
                                         ) : null
                                     }

packages/ra-core/src/form/Form.tsx

@@ -5,6 +5,8 @@ import { FormProvider, FieldValues, UseFormProps } from 'react-hook-form';
 import { FormGroupsProvider } from './FormGroupsProvider';
 import { RaRecord } from '../types';
 import { useRecordContext, OptionalRecordContextProvider } from '../controller';
+import { useResourceContext } from '../core';
+import { LabelPrefixContextProvider } from '../util';
 import { ValidateForm } from './getSimpleValidationResolver';
 import { useAugmentedForm } from './useAugmentedForm';
 
@@ -38,22 +40,25 @@ import { useAugmentedForm } from './useAugmentedForm';
 export const Form = (props: FormProps) => {
     const { children, id, className, noValidate = false } = props;
     const record = useRecordContext(props);
+    const resource = useResourceContext(props);
     const { form, formHandleSubmit } = useAugmentedForm(props);
 
     return (
         <OptionalRecordContextProvider value={record}>
-            <FormProvider {...form}>
-                <FormGroupsProvider>
-                    <form
-                        onSubmit={formHandleSubmit}
-                        noValidate={noValidate}
-                        id={id}
-                        className={className}
-                    >
-                        {children}
-                    </form>
-                </FormGroupsProvider>
-            </FormProvider>
+            <LabelPrefixContextProvider prefix={`resources.${resource}.fields`}>
+                <FormProvider {...form}>
+                    <FormGroupsProvider>
+                        <form
+                            onSubmit={formHandleSubmit}
+                            noValidate={noValidate}
+                            id={id}
+                            className={className}
+                        >
+                            {children}
+                        </form>
+                    </FormGroupsProvider>
+                </FormProvider>
+            </LabelPrefixContextProvider>
         </OptionalRecordContextProvider>
     );
 };
@@ -71,6 +76,7 @@ export interface FormOwnProps {
     formRootPathname?: string;
     id?: string;
     record?: Partial<RaRecord>;
+    resource?: string;
     onSubmit?: (data: FieldValues) => any | Promise<any>;
     warnWhenUnsavedChanges?: boolean;
 }

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

@@ -13,4 +13,5 @@ export * from './useSetLocale';
 export * from './useTranslatable';
 export * from './useTranslatableContext';
 export * from './useTranslate';
+export * from './useTranslateLabel';
 export * from './useI18nProvider';

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

@@ -1,9 +1,8 @@
 import { useState, useMemo } from 'react';
 import { useResourceContext } from '../core';
-import { getFieldLabelTranslationArgs } from '../util';
 import { TranslatableContextValue } from './TranslatableContext';
 import { useLocaleState } from './useLocaleState';
-import { useTranslate } from './useTranslate';
+import { useTranslateLabel } from './useTranslateLabel';
 
 /**
  * Hook supplying the logic to translate a field value in multiple languages.
@@ -27,26 +26,19 @@ export const useTranslatable = (
     const { defaultLocale = localeFromUI, locales } = options;
     const [selectedLocale, setSelectedLocale] = useState(defaultLocale);
     const resource = useResourceContext({});
-    const translate = useTranslate();
+    const translateLabel = useTranslateLabel();
 
     const context = useMemo<TranslatableContextValue>(
         () => ({
             getSource: (source: string, locale: string = selectedLocale) =>
                 `${source}.${locale}`,
-            getLabel: (source: string, label?: string) => {
-                return translate(
-                    ...getFieldLabelTranslationArgs({
-                        source,
-                        resource,
-                        label,
-                    })
-                );
-            },
+            getLabel: (source: string, label?: string) =>
+                translateLabel({ source, resource, label }) as string,
             locales,
             selectedLocale,
             selectLocale: setSelectedLocale,
         }),
-        [locales, resource, selectedLocale, translate]
+        [locales, resource, selectedLocale, translateLabel]
     );
 
     return context;

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

@@ -0,0 +1,42 @@
+import { useCallback, ReactElement } from 'react';
+
+import { useTranslate } from './useTranslate';
+import { useLabelPrefix, getFieldLabelTranslationArgs } from '../util';
+import { useResourceContext } from '../core';
+
+export const useTranslateLabel = () => {
+    const translate = useTranslate();
+    const prefix = useLabelPrefix();
+    const resourceFromContext = useResourceContext();
+
+    return useCallback(
+        ({
+            source,
+            label,
+            resource,
+        }: {
+            source?: string;
+            label?: string | false | ReactElement;
+            resource?: string;
+        }) => {
+            if (label === false || label === '') {
+                return null;
+            }
+
+            if (label && typeof label !== 'string') {
+                return label;
+            }
+
+            return translate(
+                ...getFieldLabelTranslationArgs({
+                    label: label as string,
+                    prefix,
+                    resource,
+                    resourceFromContext,
+                    source,
+                })
+            );
+        },
+        [prefix, resourceFromContext, translate]
+    );
+};

packages/ra-core/src/util/FieldTitle.tsx

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import { ReactElement, memo } from 'react';
 
-import { useTranslate } from '../i18n';
-import getFieldLabelTranslationArgs from './getFieldLabelTranslationArgs';
-import { useResourceContext } from '../core/useResourceContext';
+import { useTranslateLabel } from '../i18n';
 
 export interface FieldTitleProps {
     isRequired?: boolean;
@@ -13,9 +11,8 @@ export interface FieldTitleProps {
 }
 
 export const FieldTitle = (props: FieldTitleProps) => {
-    const { source, label, isRequired } = props;
-    const resource = useResourceContext(props);
-    const translate = useTranslate();
+    const { source, label, resource, isRequired } = props;
+    const translateLabel = useTranslateLabel();
 
     if (label === false || label === '') {
         return null;
@@ -27,13 +24,11 @@ export const FieldTitle = (props: FieldTitleProps) => {
 
     return (
         <span>
-            {translate(
-                ...getFieldLabelTranslationArgs({
-                    label: label as string,
-                    resource,
-                    source,
-                })
-            )}
+            {translateLabel({
+                label,
+                resource,
+                source,
+            })}
             {isRequired && <span aria-hidden="true">&thinsp;*</span>}
         </span>
     );

packages/ra-core/src/util/LabelPrefixContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const LabelPrefixContext = createContext<string>('');

packages/ra-core/src/util/LabelPrefixContextProvider.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { LabelPrefixContext } from './LabelPrefixContext';
+import { useLabelPrefix } from './useLabelPrefix';
+
+export const LabelPrefixContextProvider = ({
+    prefix,
+    concatenate = true,
+    children,
+}) => {
+    const oldPrefix = useLabelPrefix();
+    const newPrefix =
+        oldPrefix && concatenate ? `${oldPrefix}.${prefix}` : prefix;
+    return (
+        <LabelPrefixContext.Provider value={newPrefix}>
+            {children}
+        </LabelPrefixContext.Provider>
+    );
+};

packages/ra-core/src/util/getFieldLabelTranslationArgs.spec.ts

@@ -5,14 +5,24 @@ describe('getFieldLabelTranslationArgs', () => {
     it('should return empty span by default', () =>
         expect(getFieldLabelTranslationArgs()).toEqual(['']));
 
-    it('should return the label when given', () =>
+    it('should return the label when given', () => {
         expect(
             getFieldLabelTranslationArgs({
                 label: 'foo',
                 resource: 'posts',
                 source: 'title',
             })
-        ).toEqual(['foo', { _: 'foo' }]));
+        ).toEqual(['foo', { _: 'foo' }]);
+    });
+
+    it('should return the source and resource as translate key', () => {
+        expect(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'title',
+            })
+        ).toEqual([`resources.posts.fields.title`, { _: 'Title' }]);
+    });
 
     it('should return the humanized source when given', () => {
         expect(
@@ -28,37 +38,79 @@ describe('getFieldLabelTranslationArgs', () => {
                 source: 'title_with_underscore',
             })
         ).toEqual([
-            `resources.posts.fields.title_with_underscore`,
+            'resources.posts.fields.title_with_underscore',
             { _: 'Title with underscore' },
         ]);
 
+        expect(
+            getFieldLabelTranslationArgs({
+                resource: 'posts',
+                source: 'title.with.dots',
+            })
+        ).toEqual([
+            'resources.posts.fields.title.with.dots',
+            { _: 'Title with dots' },
+        ]);
+
         expect(
             getFieldLabelTranslationArgs({
                 resource: 'posts',
                 source: 'titleWithCamelCase',
             })
         ).toEqual([
-            `resources.posts.fields.titleWithCamelCase`,
+            'resources.posts.fields.titleWithCamelCase',
             { _: 'Title with camel case' },
         ]);
     });
 
-    it('should return the source and resource as translate key', () => {
+    it('should ignore the source part corresponding to the parent in an iterator', () => {
         expect(
             getFieldLabelTranslationArgs({
                 resource: 'posts',
+                source: 'book.authors.2.categories.3.identifier.name',
+            })
+        ).toEqual([
+            'resources.posts.fields.book.authors.categories.identifier.name',
+            { _: 'Identifier name' },
+        ]);
+    });
+
+    it('should prefer the resource over the prefix', () => {
+        expect(
+            getFieldLabelTranslationArgs({
+                resource: 'books',
+                prefix: 'resources.posts.fields',
                 source: 'title',
             })
-        ).toEqual([`resources.posts.fields.title`, { _: 'Title' }]);
+        ).toEqual([`resources.books.fields.title`, { _: 'Title' }]);
     });
 
-    it('should accept use the parentSource to build the translation key if provided', () => {
+    it('should prefer the resource over the resourceFromContext', () => {
         expect(
             getFieldLabelTranslationArgs({
                 resource: 'posts',
-                source: 'url',
-                parentSource: 'backlinks',
+                resourceFromContext: 'books',
+                source: 'title',
+            })
+        ).toEqual([`resources.posts.fields.title`, { _: 'Title' }]);
+    });
+
+    it('should prefer the prefix over the resourceFromContext', () => {
+        expect(
+            getFieldLabelTranslationArgs({
+                prefix: 'resources.posts.fields',
+                resourceFromContext: 'books',
+                source: 'title',
+            })
+        ).toEqual([`resources.posts.fields.title`, { _: 'Title' }]);
+    });
+
+    it('should use the resourceFromContext when the resource and prefix are missing', () => {
+        expect(
+            getFieldLabelTranslationArgs({
+                resourceFromContext: 'books',
+                source: 'title',
             })
-        ).toEqual([`resources.posts.fields.backlinks.url`, { _: 'Url' }]);
+        ).toEqual([`resources.books.fields.title`, { _: 'Title' }]);
     });
 });