Support resource specific translations in ShowButton

Author: djhi

packages/ra-ui-materialui/src/button/ShowButton.spec.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
-import { Basic, AccessControl } from './ShowButton.stories';
+import { Basic, AccessControl, Label } from './ShowButton.stories';
 
 const invalidButtonDomProps = {
     redirect: 'list',
@@ -23,6 +23,22 @@ describe('<ShowButton />', () => {
         spy.mockRestore();
     });
 
+    it('should provide a default label', async () => {
+        render(<Label translations="default" />);
+        await screen.findByText('Show');
+        fireEvent.click(screen.getByText('English', { selector: 'button' }));
+        fireEvent.click(await screen.findByText('Français'));
+        await screen.findByText('Afficher');
+    });
+
+    it('should allow resource specific default title', async () => {
+        render(<Label translations="resource specific" />);
+        await screen.findByText('See War and Peace');
+        fireEvent.click(screen.getByText('English', { selector: 'button' }));
+        fireEvent.click(await screen.findByText('Français'));
+        await screen.findByText('Voir War and Peace');
+    });
+
     it('should only render when users have the right to show', async () => {
         render(<AccessControl />);
         await screen.findByText('War and Peace');

packages/ra-ui-materialui/src/button/ShowButton.stories.tsx

@@ -4,6 +4,9 @@ import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
 import {
     AuthProvider,
+    I18nProvider,
+    memoryStore,
+    mergeTranslations,
     RecordContextProvider,
     Resource,
     ResourceContextProvider,
@@ -19,15 +22,53 @@ import { TextField } from '../field/TextField';
 import ShowButton from './ShowButton';
 import { Show } from '../detail/Show';
 import { SimpleShowLayout } from '../detail/SimpleShowLayout';
+import { LocalesMenuButton } from './LocalesMenuButton';
 
 export default { title: 'ra-ui-materialui/button/ShowButton' };
 
+const defaultI18nProvider = () =>
+    polyglotI18nProvider(
+        locale => (locale === 'fr' ? frenchMessages : englishMessages),
+        'en',
+        [
+            { locale: 'en', name: 'English' },
+            { locale: 'fr', name: 'Français' },
+        ]
+    );
+
+const customI18nProvider = polyglotI18nProvider(
+    locale =>
+        locale === 'fr'
+            ? mergeTranslations(frenchMessages, {
+                  resources: {
+                      books: {
+                          action: {
+                              show: 'Voir %{recordRepresentation}',
+                          },
+                      },
+                  },
+              })
+            : mergeTranslations(englishMessages, {
+                  resources: {
+                      books: {
+                          action: {
+                              show: 'See %{recordRepresentation}',
+                          },
+                      },
+                  },
+              }),
+    'en',
+    [
+        { locale: 'en', name: 'English' },
+        { locale: 'fr', name: 'Français' },
+    ]
+);
+
 export const Basic = ({ buttonProps }: { buttonProps?: any }) => (
     <TestMemoryRouter>
         <AdminContext
-            i18nProvider={polyglotI18nProvider(locale =>
-                locale === 'fr' ? frenchMessages : englishMessages
-            )}
+            i18nProvider={defaultI18nProvider()}
+            store={memoryStore()}
         >
             <ResourceContextProvider value="books">
                 <RecordContextProvider value={{ id: 1 }}>
@@ -38,6 +79,47 @@ export const Basic = ({ buttonProps }: { buttonProps?: any }) => (
     </TestMemoryRouter>
 );
 
+export const Label = ({
+    translations = 'default',
+    i18nProvider = translations === 'default'
+        ? defaultI18nProvider()
+        : customI18nProvider,
+    label,
+}: {
+    i18nProvider?: I18nProvider;
+    translations?: 'default' | 'resource specific';
+    label?: string;
+}) => (
+    <TestMemoryRouter>
+        <AdminContext
+            dataProvider={dataProvider}
+            i18nProvider={i18nProvider}
+            store={memoryStore()}
+        >
+            <ResourceContextProvider value="books">
+                <RecordContextProvider
+                    value={{ id: 1, title: 'War and Peace' }}
+                >
+                    <div>
+                        <ShowButton label={label} />
+                    </div>
+                </RecordContextProvider>
+                <LocalesMenuButton />
+            </ResourceContextProvider>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
+Label.args = {
+    translations: 'default',
+};
+Label.argTypes = {
+    translations: {
+        options: ['default', 'resource specific'],
+        control: { type: 'radio' },
+    },
+};
+
 export const AccessControl = () => {
     const queryClient = new QueryClient();
 
@@ -78,10 +160,9 @@ const AccessControlAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
         <AdminContext
             dataProvider={dataProvider}
             authProvider={authProvider}
-            i18nProvider={polyglotI18nProvider(locale =>
-                locale === 'fr' ? frenchMessages : englishMessages
-            )}
+            i18nProvider={defaultI18nProvider()}
             queryClient={queryClient}
+            store={memoryStore()}
         >
             <AdminUI
                 layout={({ children }) => (

packages/ra-ui-materialui/src/button/ShowButton.tsx

@@ -8,6 +8,9 @@ import {
     useRecordContext,
     useCreatePath,
     useCanAccess,
+    useTranslate,
+    useGetResourceLabel,
+    useGetRecordRepresentation,
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
@@ -30,7 +33,7 @@ const ShowButton = <RecordType extends RaRecord = any>(
 ) => {
     const {
         icon = defaultIcon,
-        label = 'ra.action.show',
+        label: labelProp,
         record: recordProp,
         resource: resourceProp,
         scrollToTop = true,
@@ -49,7 +52,27 @@ 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`, {
+            recordRepresentation,
+            _: translate(`ra.action.show`, {
+                name: getResourceLabel(resource, 1),
+                recordRepresentation,
+            }),
+        });
+
     return (
         <Button
             component={Link}