Support resource specific translations in ListButton

Author: djhi

docs/Buttons.md

@@ -1237,12 +1237,42 @@ export const PostShow = () => (
 | Prop          | Required | Type            | Default          | Description                                    |
 | ------------- | -------- | --------------- | ---------------- | ---------------------------------------------- |
 | `resource`    | Optional | `string`        | -                | target resource, e.g. 'posts'                  |
-| `label`       | Optional | `string`        | 'ra.action.list' | label or translation message to use            |
+| `label`       | Optional | `string`        | -                | label or translation message to use            |
 | `icon`        | Optional | `ReactElement`  | -                | iconElement, e.g. `<CommentIcon />`            |
 | `scrollToTop` | Optional | `boolean`       | `true`           | Scroll to top after link                       |
 
 It also supports [all the other `<Button>` props](#button).
 
+### `label`
+
+By default, the label is `List` in English. In other languages, it's the translation of the `'ra.action.list'` key.
+
+You can customize this label by providing a resource specific translation with the key `resources.RESOURCE.action.list` (e.g. `resources.posts.action.list`):
+
+```js
+// in src/i18n/en.js
+import englishMessages from 'ra-language-english';
+
+export const en = {
+    ...englishMessages,
+    resources: {
+        posts: {
+            name: 'Post |||| Posts',
+            action: {
+                list: 'See all posts'
+            }
+        },
+    },
+    ...
+};
+```
+
+You can also customize this label by specifying a custom `label` prop:
+
+```jsx
+<ListButton label="Delete this comment" />
+```
+
 ### `scrollToTop`
 
 By default, `<ListButton>` scrolls the page to the top after redirecting. You can disable it as follows:

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

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

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

@@ -4,6 +4,8 @@ import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
 import {
     AuthProvider,
+    I18nProvider,
+    mergeTranslations,
     RecordContextProvider,
     Resource,
     ResourceContextProvider,
@@ -21,16 +23,51 @@ import { TextInput } from '../input/TextInput';
 import { ListButton } from './ListButton';
 import { Edit } from '../detail/Edit';
 import { TopToolbar } from '../layout';
+import { LocalesMenuButton } from './LocalesMenuButton';
 
 export default { title: 'ra-ui-materialui/button/ListButton' };
 
+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: {
+                              list: 'Voir tous les livres',
+                          },
+                      },
+                  },
+              })
+            : mergeTranslations(englishMessages, {
+                  resources: {
+                      books: {
+                          action: {
+                              list: 'See all books',
+                          },
+                      },
+                  },
+              }),
+    '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
-            )}
-        >
+        <AdminContext i18nProvider={defaultI18nProvider()}>
             <ResourceContextProvider value="books">
                 <RecordContextProvider value={{ id: 1 }}>
                     <ListButton {...buttonProps} />
@@ -40,6 +77,39 @@ 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}>
+            <ResourceContextProvider value="books">
+                <div>
+                    <ListButton label={label} />
+                </div>
+                <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();
 
@@ -76,9 +146,7 @@ const AccessControlAdmin = ({ queryClient }: { queryClient: QueryClient }) => {
         <AdminContext
             dataProvider={dataProvider}
             authProvider={authProvider}
-            i18nProvider={polyglotI18nProvider(locale =>
-                locale === 'fr' ? frenchMessages : englishMessages
-            )}
+            i18nProvider={defaultI18nProvider()}
             queryClient={queryClient}
         >
             <AdminUI

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

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import ActionList from '@mui/icons-material/List';
 import { Link } from 'react-router-dom';
-import { useResourceContext, useCreatePath, useCanAccess } from 'ra-core';
+import {
+    useResourceContext,
+    useCreatePath,
+    useCanAccess,
+    useTranslate,
+    useGetResourceLabel,
+} from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
 
@@ -34,7 +40,7 @@ import { Button, ButtonProps } from './Button';
 export const ListButton = (props: ListButtonProps) => {
     const {
         icon = defaultIcon,
-        label = 'ra.action.list',
+        label: labelProp,
         resource: resourceProp,
         scrollToTop = true,
         ...rest
@@ -50,11 +56,20 @@ export const ListButton = (props: ListButtonProps) => {
         resource,
     });
     const createPath = useCreatePath();
-
+    const translate = useTranslate();
+    const getResourceLabel = useGetResourceLabel();
     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}