Improve <DeleteButton> and <UpdateButton> confirmation using record representation

Author: djhi

packages/ra-core/src/core/useGetRecordRepresentation.ts

@@ -5,7 +5,7 @@ import get from 'lodash/get';
 import { useResourceDefinition } from './useResourceDefinition';
 
 /**
- * Get default string representation of a record
+ * Get the default representation of a record (either a string or a React node)
  *
  * @example // No customization
  * const getRecordRepresentation = useGetRecordRepresentation('posts');

packages/ra-language-english/src/index.ts

@@ -101,11 +101,14 @@ const englishMessages: TranslationMessages = {
                 'Delete %{name} |||| Delete %{smart_count} %{name}',
             bulk_update_content:
                 'Are you sure you want to update this %{name}? |||| Are you sure you want to update these %{smart_count} items?',
+            bulk_update_content_record_representation:
+                'Are you sure you want to update %{name}? |||| Are you sure you want to update these %{smart_count} items?',
             bulk_update_title:
                 'Update %{name} |||| Update %{smart_count} %{name}',
             clear_array_input: 'Are you sure you want to clear the whole list?',
             delete_content: 'Are you sure you want to delete this item?',
             delete_title: 'Delete %{name} #%{id}',
+            delete_title_record_representation: 'Delete %{name}',
             details: 'Details',
             error: "A client error occurred and your request couldn't be completed.",
             invalid_form: 'The form is not valid. Please check for errors',

packages/ra-language-french/src/index.ts

@@ -102,13 +102,16 @@ const frenchMessages: TranslationMessages = {
                 'Supprimer %{name} |||| Supprimer %{smart_count} %{name}',
             bulk_update_content:
                 'Êtes-vous sûr(e) de vouloir modifier cet élément ? |||| Êtes-vous sûr(e) de vouloir modifier ces %{smart_count} éléments ?',
+            bulk_update_content_record_representation:
+                'Êtes-vous sûr(e) de vouloir modifier cet élément ? |||| Êtes-vous sûr(e) de vouloir modifier ces %{smart_count} éléments ?',
             bulk_update_title:
                 'Modifier %{name} |||| Modifier %{smart_count} %{name}',
             clear_array_input:
                 'Êtes-vous sûr(e) de vouloir supprimer tous les éléments de la liste ?',
             delete_content:
                 'Êtes-vous sûr(e) de vouloir supprimer cet élément ?',
             delete_title: 'Supprimer %{name} #%{id}',
+            delete_title_record_representation: 'Supprimer %{name}',
             details: 'Détails',
             error: "En raison d'une erreur côté navigateur, votre requête n'a pas pu aboutir.",
             invalid_form: "Le formulaire n'est pas valide.",

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import {
+    screen,
+    render,
+    waitFor,
+    fireEvent,
+    within,
+} from '@testing-library/react';
 import expect from 'expect';
 import {
     CoreAdminContext,
@@ -14,6 +20,10 @@ import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
 import { TextInput } from '../input';
 import { Notification } from '../layout';
+import {
+    Basic,
+    NoRecordRepresentation,
+} from './DeleteWithConfirmButton.stories';
 
 const theme = createTheme();
 
@@ -329,4 +339,28 @@ describe('<DeleteWithConfirmButton />', () => {
             ]);
         });
     });
+
+    it('should use the record representation in the confirmation title', async () => {
+        render(<Basic />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('War and Peace')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Delete')
+        );
+        await screen.findByText('Delete War and Peace');
+    });
+
+    it('should use the default translation in the confirmation title when no record representation is available', async () => {
+        render(<NoRecordRepresentation />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('Leo Tolstoy')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Delete')
+        );
+        await screen.findByText('Delete #1');
+    });
 });

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

@@ -104,7 +104,19 @@ const dataProvider = fakeRestDataProvider({
             year: 1922,
         },
     ],
-    authors: [],
+    authors: [
+        { id: 1, fullName: 'Leo Tolstoy' },
+        { id: 2, fullName: 'Jane Austen' },
+        { id: 3, fullName: 'Oscar Wilde' },
+        { id: 4, fullName: 'Antoine de Saint-Exupéry' },
+        { id: 5, fullName: 'Lewis Carroll' },
+        { id: 6, fullName: 'Gustave Flaubert' },
+        { id: 7, fullName: 'J. R. R. Tolkien' },
+        { id: 8, fullName: 'J. K. Rowling' },
+        { id: 9, fullName: 'Paulo Coelho' },
+        { id: 10, fullName: 'J. D. Salinger' },
+        { id: 11, fullName: 'James Joyce' },
+    ],
 });
 
 const BookList = ({ children }) => {
@@ -121,6 +133,18 @@ const BookList = ({ children }) => {
     );
 };
 
+const AuthorList = ({ children }) => {
+    return (
+        <List>
+            <Datagrid>
+                <TextField source="id" />
+                <TextField source="fullName" />
+                {children}
+            </Datagrid>
+        </List>
+    );
+};
+
 export const Basic = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
@@ -138,6 +162,23 @@ export const Basic = () => (
     </TestMemoryRouter>
 );
 
+export const NoRecordRepresentation = () => (
+    <TestMemoryRouter initialEntries={['/authors']}>
+        <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>
+            <AdminUI>
+                <Resource
+                    name="authors"
+                    list={
+                        <AuthorList>
+                            <DeleteWithConfirmButton />
+                        </AuthorList>
+                    }
+                />
+            </AdminUI>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
 export const WithCustomDialogContent = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>

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

@@ -1,4 +1,4 @@
-import React, { Fragment, ReactEventHandler } from 'react';
+import React, { Fragment, isValidElement, ReactEventHandler } from 'react';
 import ActionDelete from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 
@@ -12,6 +12,7 @@ import {
     useResourceContext,
     useTranslate,
     RedirectionSideEffect,
+    useGetRecordRepresentation,
 } from 'ra-core';
 
 import { Confirm } from '../layout';
@@ -23,7 +24,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
 ) => {
     const {
         className,
-        confirmTitle = 'ra.message.delete_title',
+        confirmTitle: confirmTitleProp,
         confirmContent = 'ra.message.delete_content',
         confirmColor = 'primary',
         icon = defaultIcon,
@@ -56,6 +57,24 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
         resource,
         successMessage,
     });
+    const getRecordRepresentation = useGetRecordRepresentation(resource);
+    const recordRepresentation = getRecordRepresentation(record);
+    let confirmNameParam = recordRepresentation;
+    let confirmTitle = 'ra.message.delete_title_record_representation';
+
+    if (isValidElement(recordRepresentation)) {
+        confirmTitle = 'ra.message.delete_title';
+        confirmNameParam = translate(`resources.${resource}.forcedCaseName`, {
+            smart_count: 1,
+            _: humanize(
+                translate(`resources.${resource}.name`, {
+                    smart_count: 1,
+                    _: resource ? singularize(resource) : undefined,
+                }),
+                true
+            ),
+        });
+    }
 
     return (
         <Fragment>
@@ -72,20 +91,11 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
             <Confirm
                 isOpen={open}
                 loading={isPending}
-                title={confirmTitle}
+                title={confirmTitleProp ?? confirmTitle}
                 content={confirmContent}
                 confirmColor={confirmColor}
                 translateOptions={{
-                    name: translate(`resources.${resource}.forcedCaseName`, {
-                        smart_count: 1,
-                        _: humanize(
-                            translate(`resources.${resource}.name`, {
-                                smart_count: 1,
-                                _: resource ? singularize(resource) : undefined,
-                            }),
-                            true
-                        ),
-                    }),
+                    name: confirmNameParam,
                     id: record?.id,
                     ...translateOptions,
                 }}

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

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { screen, render, waitFor, fireEvent } from '@testing-library/react';
+import {
+    screen,
+    render,
+    waitFor,
+    fireEvent,
+    within,
+} from '@testing-library/react';
 import expect from 'expect';
 import { CoreAdminContext, MutationMode, testDataProvider } from 'ra-core';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
@@ -10,6 +16,10 @@ import { Edit } from '../detail';
 import { TextInput } from '../input';
 import { Notification } from '../layout';
 import { MutationOptions } from './UpdateButton.stories';
+import {
+    Basic,
+    NoRecordRepresentation,
+} from './UpdateWithConfirmButton.stories';
 
 const theme = createTheme();
 
@@ -252,7 +262,7 @@ describe('<UpdateWithConfirmButton />', () => {
         fireEvent.click(await screen.findByText('Reset views'));
         await screen.findByRole('dialog');
         await screen.findByText(
-            'Are you sure you want to update this post?',
+            'Are you sure you want to update Lorem Ipsum?',
             undefined,
             { timeout: 4000 }
         );
@@ -263,7 +273,34 @@ describe('<UpdateWithConfirmButton />', () => {
         // wait until next tick, as the settled side effect is called after the success side effect
         await waitFor(() => new Promise(resolve => setTimeout(resolve, 300)));
         expect(
-            screen.queryByText('Are you sure you want to update this post?')
+            screen.queryByText('Are you sure you want to update Lorem Ipsum?')
         ).toBeNull();
     });
+
+    it('should use the record representation in the confirmation title and content', async () => {
+        render(<Basic />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('War and Peace')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Update')
+        );
+        await screen.findByText('Update War and Peace');
+        await screen.findByText(
+            'Are you sure you want to update War and Peace?'
+        );
+    });
+
+    it('should use the default translation in the confirmation title when no record representation is available', async () => {
+        render(<NoRecordRepresentation />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('Leo Tolstoy')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Update')
+        );
+        await screen.findByText('Update #1');
+    });
 });