Introduce useResourceTranslation

djhi · djhi · commit dad7916a3f40 · 2025-05-28T15:11:44.000+02:00
diff --git a/packages/ra-core/src/i18n/index.ts b/packages/ra-core/src/i18n/index.ts
@@ -12,6 +12,7 @@ export * from './TranslationUtils';
 export * from './useLocaleState';
 export * from './useLocale';
 export * from './useLocales';
+export * from './useResourceTranslation';
 export * from './useSetLocale';
 export * from './useTranslatable';
 export * from './useTranslatableContext';
diff --git a/packages/ra-core/src/i18n/useResourceTranslation.ts b/packages/ra-core/src/i18n/useResourceTranslation.ts
@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { useTranslate } from './useTranslate';
+
+export const useResourceTranslation = (
+    params: UseResourceTranslationOptions
+) => {
+    const { resourceI18nKey, baseI18nKey, userText, options } = params;
+    const translate = useTranslate();
+
+    if (userText) {
+        if (typeof userText !== 'string') {
+            return userText;
+        }
+        return translate(userText, { _: userText, ...options });
+    }
+
+    const translatedText = translate(resourceI18nKey, {
+        ...options,
+        _: translate(baseI18nKey, options),
+    });
+
+    return translatedText;
+};
+
+export interface UseResourceTranslationOptions {
+    resourceI18nKey: string;
+    baseI18nKey: string;
+    userText?: ReactNode;
+    options?: Record<string, any>;
+}
diff --git a/packages/ra-ui-materialui/src/button/CreateButton.tsx b/packages/ra-ui-materialui/src/button/CreateButton.tsx
@@ -10,11 +10,11 @@ import clsx from 'clsx';
 import isEqual from 'lodash/isEqual';
 import merge from 'lodash/merge';
 import {
-    useTranslate,
-    useResourceContext,
     useCreatePath,
     useCanAccess,
     useGetResourceLabel,
+    useResourceContext,
+    useResourceTranslation,
 } from 'ra-core';
 import { Link, type To } from 'react-router-dom';
 
@@ -63,15 +63,15 @@ const CreateButton = (inProps: CreateButtonProps) => {
         resource,
     });
     const createPath = useCreatePath();
-    const translate = useTranslate();
     const getResourceLabel = useGetResourceLabel();
-    const label =
-        labelProp ??
-        translate(`resources.${resource}.action.create`, {
-            _: translate(`ra.action.create`, {
-                name: getResourceLabel(resource, 1),
-            }),
-        });
+    const label = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.action.create`,
+        baseI18nKey: 'ra.action.create',
+        options: {
+            name: getResourceLabel(resource, 1),
+        },
+        userText: labelProp,
+    });
     const isSmall = useMediaQuery((theme: Theme) =>
         theme.breakpoints.down('md')
     );
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -14,6 +14,7 @@ import {
     RedirectionSideEffect,
     useGetRecordRepresentation,
     useGetResourceLabel,
+    useResourceTranslation,
 } from 'ra-core';
 
 import { Confirm } from '../layout';
@@ -68,8 +69,6 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
     const getResourceLabel = useGetResourceLabel();
     const getRecordRepresentation = useGetRecordRepresentation(resource);
     let recordRepresentation = getRecordRepresentation(record);
-    const confirmTitle = `resources.${resource}.message.delete_title`;
-    const confirmContent = `resources.${resource}.message.delete_content`;
     const resourceName = translate(`resources.${resource}.forcedCaseName`, {
         smart_count: 1,
         _: humanize(
@@ -84,15 +83,37 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
     if (isValidElement(recordRepresentation)) {
         recordRepresentation = `#${record?.id}`;
     }
-    const label =
-        labelProp ??
-        translate(`resources.${resource}.action.delete`, {
+    const label = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.action.delete`,
+        baseI18nKey: 'ra.action.delete',
+        options: {
+            name: getResourceLabel(resource, 1),
             recordRepresentation,
-            _: translate(`ra.action.delete`, {
-                name: getResourceLabel(resource, 1),
-                recordRepresentation,
-            }),
-        });
+        },
+        userText: labelProp,
+    });
+    const confirmTitle = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.message.delete_title`,
+        baseI18nKey: 'ra.message.delete_title',
+        options: {
+            recordRepresentation,
+            name: resourceName,
+            id: record?.id,
+            ...titleTranslateOptions,
+        },
+        userText: confirmTitleProp,
+    });
+    const confirmContent = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.message.delete_content`,
+        baseI18nKey: 'ra.message.delete_content',
+        options: {
+            recordRepresentation,
+            name: resourceName,
+            id: record?.id,
+            ...contentTranslateOptions,
+        },
+        userText: confirmContentProp,
+    });
 
     return (
         <Fragment>
@@ -112,35 +133,9 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
             <Confirm
                 isOpen={open}
                 loading={isPending}
-                title={confirmTitleProp ?? confirmTitle}
-                content={confirmContentProp ?? confirmContent}
+                title={confirmTitle}
+                content={confirmContent}
                 confirmColor={confirmColor}
-                titleTranslateOptions={{
-                    recordRepresentation,
-                    name: resourceName,
-                    id: record?.id,
-                    _:
-                        confirmTitleProp ??
-                        translate('ra.message.delete_title', {
-                            recordRepresentation,
-                            name: resourceName,
-                            id: record?.id,
-                        }),
-                    ...titleTranslateOptions,
-                }}
-                contentTranslateOptions={{
-                    recordRepresentation,
-                    name: resourceName,
-                    id: record?.id,
-                    _:
-                        confirmContentProp ??
-                        translate('ra.message.delete_content', {
-                            recordRepresentation,
-                            name: resourceName,
-                            id: record?.id,
-                        }),
-                    ...contentTranslateOptions,
-                }}
                 onConfirm={handleDelete}
                 onClose={handleDialogClose}
             />
diff --git a/packages/ra-ui-materialui/src/button/EditButton.tsx b/packages/ra-ui-materialui/src/button/EditButton.tsx
@@ -14,9 +14,9 @@ import {
     useRecordContext,
     useCreatePath,
     useCanAccess,
-    useTranslate,
     useGetResourceLabel,
     useGetRecordRepresentation,
+    useResourceTranslation,
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
@@ -60,26 +60,25 @@ export const EditButton = <RecordType extends RaRecord = any>(
         resource,
         record,
     });
-    const translate = useTranslate();
     const getResourceLabel = useGetResourceLabel();
     const getRecordRepresentation = useGetRecordRepresentation();
     const recordRepresentationValue = getRecordRepresentation(record);
 
-    if (!record || !canAccess || isPending) return null;
-
     const recordRepresentation =
         typeof recordRepresentationValue === 'string'
             ? recordRepresentationValue
             : recordRepresentationValue?.toString();
-    const label =
-        labelProp ??
-        translate(`resources.${resource}.action.edit`, {
+    const label = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.action.edit`,
+        baseI18nKey: 'ra.action.edit',
+        options: {
+            name: getResourceLabel(resource, 1),
             recordRepresentation,
-            _: translate(`ra.action.edit`, {
-                name: getResourceLabel(resource, 1),
-                recordRepresentation,
-            }),
-        });
+        },
+        userText: labelProp,
+    });
+
+    if (!record || !canAccess || isPending) return null;
 
     return (
         <StyledButton
diff --git a/packages/ra-ui-materialui/src/button/IconButtonWithTooltip.tsx b/packages/ra-ui-materialui/src/button/IconButtonWithTooltip.tsx
@@ -23,7 +23,10 @@ export const IconButtonWithTooltip = ({
         setOpen(true);
     };
 
-    const translatedLabel = translate(label, { _: label });
+    let translatedLabel = label;
+    if (typeof label === 'string') {
+        translatedLabel = translate(label, { _: label });
+    }
 
     const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
         handleClose();
@@ -38,7 +41,11 @@ export const IconButtonWithTooltip = ({
             onClose={handleClose}
         >
             <IconButton
-                aria-label={translatedLabel}
+                aria-label={
+                    typeof translatedLabel === 'string'
+                        ? translatedLabel
+                        : undefined
+                }
                 onClick={handleClick}
                 {...props}
             />
@@ -47,5 +54,5 @@ export const IconButtonWithTooltip = ({
 };
 
 export interface IconButtonWithTooltipProps extends IconButtonProps {
-    label: string;
+    label: React.ReactNode;
 }
diff --git a/packages/ra-ui-materialui/src/button/ListButton.tsx b/packages/ra-ui-materialui/src/button/ListButton.tsx
@@ -5,11 +5,11 @@ import {
     useResourceContext,
     useCreatePath,
     useCanAccess,
-    useTranslate,
     useGetResourceLabel,
+    useResourceTranslation,
 } from 'ra-core';
 
-import { Button, ButtonProps } from './Button';
+import { Button, type ButtonProps } from './Button';
 
 /**
  * Opens the List view of a given resource
@@ -56,20 +56,20 @@ export const ListButton = (props: ListButtonProps) => {
         resource,
     });
     const createPath = useCreatePath();
-    const translate = useTranslate();
     const getResourceLabel = useGetResourceLabel();
+    const label = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.action.list`,
+        baseI18nKey: 'ra.action.list',
+        options: {
+            name: getResourceLabel(resource, 1),
+        },
+        userText: labelProp,
+    });
+
     if (!canAccess || isPending) {
         return null;
     }
 
-    const label =
-        labelProp ??
-        translate(`resources.${resource}.action.list`, {
-            _: translate(`ra.action.list`, {
-                name: getResourceLabel(resource, 1),
-            }),
-        });
-
     return (
         <Button
             component={Link}
diff --git a/packages/ra-ui-materialui/src/button/ShowButton.tsx b/packages/ra-ui-materialui/src/button/ShowButton.tsx
@@ -3,14 +3,14 @@ import { memo } from 'react';
 import ImageEye from '@mui/icons-material/RemoveRedEye';
 import { Link } from 'react-router-dom';
 import {
-    RaRecord,
+    type RaRecord,
     useResourceContext,
     useRecordContext,
     useCreatePath,
     useCanAccess,
-    useTranslate,
     useGetResourceLabel,
     useGetRecordRepresentation,
+    useResourceTranslation,
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
@@ -52,26 +52,25 @@ const ShowButton = <RecordType extends RaRecord = any>(
         resource,
         record,
     });
-    const translate = useTranslate();
     const getResourceLabel = useGetResourceLabel();
     const getRecordRepresentation = useGetRecordRepresentation();
     const recordRepresentationValue = getRecordRepresentation(record);
 
-    if (!record || !canAccess || isPending) return null;
-
     const recordRepresentation =
         typeof recordRepresentationValue === 'string'
             ? recordRepresentationValue
             : recordRepresentationValue?.toString();
-    const label =
-        labelProp ??
-        translate(`resources.${resource}.action.show`, {
+    const label = useResourceTranslation({
+        resourceI18nKey: `resources.${resource}.action.show`,
+        baseI18nKey: 'ra.action.show',
+        options: {
+            name: getResourceLabel(resource, 1),
             recordRepresentation,
-            _: translate(`ra.action.show`, {
-                name: getResourceLabel(resource, 1),
-                recordRepresentation,
-            }),
-        });
+        },
+        userText: labelProp,
+    });
+
+    if (!record || !canAccess || isPending) return null;
 
     return (
         <Button
diff --git a/packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.spec.tsx b/packages/ra-ui-materialui/src/input/InPlaceEditor/InPlaceEditor.spec.tsx
@@ -24,6 +24,7 @@ describe('InPlaceEditor', () => {
         await screen.findByText('Jane Doe');
     });
     it('should revert to the previous version on error', async () => {
+        jest.spyOn(console, 'error').mockImplementation(() => {});
         render(<Basic delay={0} updateFails />);
         const value = await screen.findByText('John Doe');
         value.click();
