Fix <Confirm> ignore simple string title and content props

Author: djhi

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

@@ -23,6 +23,7 @@ import { Notification } from '../layout';
 import {
     Basic,
     NoRecordRepresentation,
+    WithCustomTitleAndContent,
     WithDefaultTranslation,
 } from './DeleteWithConfirmButton.stories';
 
@@ -341,6 +342,19 @@ describe('<DeleteWithConfirmButton />', () => {
         });
     });
 
+    it('should use the provided strings as the confirmation title and content', async () => {
+        render(<WithCustomTitleAndContent />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('War and Peace')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Delete')
+        );
+        await screen.findByText('Delete me?');
+        await screen.findByText('Please confirm the deletion');
+    });
+
     it('should use the record representation in the confirmation title and content with a resource specific translation', async () => {
         render(<Basic />);
         fireEvent.click(

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

@@ -231,6 +231,29 @@ export const WithDefaultTranslation = () => (
     </TestMemoryRouter>
 );
 
+export const WithCustomTitleAndContent = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <AdminContext
+            dataProvider={dataProvider}
+            i18nProvider={i18nProviderDefault}
+        >
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={
+                        <BookList>
+                            <DeleteWithConfirmButton
+                                confirmTitle="Delete me?"
+                                confirmContent="Please confirm the deletion"
+                            />
+                        </BookList>
+                    }
+                />
+            </AdminUI>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
 export const NoRecordRepresentation = () => (
     <TestMemoryRouter initialEntries={['/authors']}>
         <AdminContext dataProvider={dataProvider} i18nProvider={i18nProvider}>

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

@@ -100,22 +100,26 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
                     recordRepresentation,
                     name: resourceName,
                     id: record?.id,
-                    _: translate('ra.message.delete_title', {
-                        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,
-                    _: translate('ra.message.delete_content', {
-                        recordRepresentation,
-                        name: resourceName,
-                        id: record?.id,
-                    }),
+                    _:
+                        confirmContentProp ??
+                        translate('ra.message.delete_content', {
+                            recordRepresentation,
+                            name: resourceName,
+                            id: record?.id,
+                        }),
                     ...contentTranslateOptions,
                 }}
                 onConfirm={handleDelete}

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

@@ -19,6 +19,7 @@ import { MutationOptions } from './UpdateButton.stories';
 import {
     Basic,
     NoRecordRepresentation,
+    WithCustomTitleAndContent,
     WithDefaultTranslation,
 } from './UpdateWithConfirmButton.stories';
 
@@ -280,6 +281,19 @@ describe('<UpdateWithConfirmButton />', () => {
         ).toBeNull();
     });
 
+    it('should use the provided strings as the confirmation title and content', async () => {
+        render(<WithCustomTitleAndContent />);
+        fireEvent.click(
+            within(
+                (await screen.findByText('War and Peace')).closest(
+                    'tr'
+                ) as HTMLElement
+            ).getByText('Update')
+        );
+        await screen.findByText('Update me?');
+        await screen.findByText('Please confirm the update');
+    });
+
     it('should use the record representation in the confirmation title and content with a resource specific translation', async () => {
         render(<Basic />);
         fireEvent.click(

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

@@ -213,6 +213,30 @@ export const Basic = () => (
     </TestMemoryRouter>
 );
 
+export const WithCustomTitleAndContent = () => (
+    <TestMemoryRouter initialEntries={['/books']}>
+        <AdminContext
+            dataProvider={dataProvider}
+            i18nProvider={i18nProviderDefault}
+        >
+            <AdminUI>
+                <Resource
+                    name="books"
+                    list={
+                        <BookList>
+                            <UpdateWithConfirmButton
+                                data={{ title: 'modified' }}
+                                confirmTitle="Update me?"
+                                confirmContent="Please confirm the update"
+                            />
+                        </BookList>
+                    }
+                />
+            </AdminUI>
+        </AdminContext>
+    </TestMemoryRouter>
+);
+
 export const WithDefaultTranslation = () => (
     <TestMemoryRouter initialEntries={['/books']}>
         <AdminContext

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

@@ -96,7 +96,7 @@ export const UpdateWithConfirmButton = (
         }
     );
 
-    const handleClick = e => {
+    const handleClick = (e: React.MouseEvent) => {
         setOpen(true);
         e.stopPropagation();
     };
@@ -155,21 +155,25 @@ export const UpdateWithConfirmButton = (
                     smart_count: 1,
                     name: resourceName,
                     recordRepresentation,
-                    _: translate('ra.message.bulk_update_title', {
-                        smart_count: 1,
-                        name: resourceName,
-                        recordRepresentation,
-                    }),
+                    _:
+                        confirmTitleProp ??
+                        translate('ra.message.bulk_update_title', {
+                            smart_count: 1,
+                            name: resourceName,
+                            recordRepresentation,
+                        }),
                 }}
                 contentTranslateOptions={{
                     smart_count: 1,
                     name: resourceName,
                     recordRepresentation,
-                    _: translate('ra.message.bulk_update_content', {
-                        smart_count: 1,
-                        name: resourceName,
-                        recordRepresentation,
-                    }),
+                    _:
+                        confirmContentProp ??
+                        translate('ra.message.bulk_update_content', {
+                            smart_count: 1,
+                            name: resourceName,
+                            recordRepresentation,
+                        }),
                 }}
                 onConfirm={handleUpdate}
                 onClose={handleDialogClose}