Add onSuccess and onFailure properties to DeleteButton

packages/ra-core/src/controller/button/useDeleteWithConfirmController.tsx

@@ -13,6 +13,7 @@ import {
     RedirectionSideEffect,
 } from '../../sideEffect';
 import { Record } from '../../types';
+import { OnFailure, OnSuccess } from '../saveModifiers';
 
 /**
  * Prepare a set of callbacks for a delete button guarded by confirmation dialog
@@ -72,27 +73,37 @@ const useDeleteWithConfirmController = ({
     redirect: redirectTo,
     basePath,
     onClick,
+    onSuccess,
+    onFailure,
 }: UseDeleteWithConfirmControllerParams): UseDeleteWithConfirmControllerReturn => {
     const [open, setOpen] = useState(false);
     const notify = useNotify();
     const redirect = useRedirect();
     const refresh = useRefresh();
     const [deleteOne, { loading }] = useDelete(resource, null, null, {
         action: CRUD_DELETE,
-        onSuccess: () => {
+        onSuccess: response => {
             setOpen(false);
-            notify('ra.notification.deleted', 'info', { smart_count: 1 });
-            redirect(redirectTo, basePath);
-            refresh();
+            if (onSuccess === undefined) {
+                notify('ra.notification.deleted', 'info', { smart_count: 1 });
+                redirect(redirectTo, basePath);
+                refresh();
+            } else {
+                onSuccess(response);
+            }
         },
         onFailure: error => {
             setOpen(false);
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : error.message || 'ra.notification.http_error',
-                'warning'
-            );
+            if (onFailure === undefined) {
+                notify(
+                    typeof error === 'string'
+                        ? error
+                        : error.message || 'ra.notification.http_error',
+                    'warning'
+                );
+            } else {
+                onFailure(error);
+            }
         },
         undoable: false,
     });
@@ -128,6 +139,8 @@ export interface UseDeleteWithConfirmControllerParams {
     redirect?: RedirectionSideEffect;
     resource: string;
     onClick?: ReactEventHandler<any>;
+    onSuccess?: OnSuccess;
+    onFailure?: OnFailure;
 }
 
 export interface UseDeleteWithConfirmControllerReturn {

packages/ra-core/src/controller/button/useDeleteWithUndoController.tsx

@@ -8,6 +8,7 @@ import {
     RedirectionSideEffect,
 } from '../../sideEffect';
 import { Record } from '../../types';
+import { OnFailure, OnSuccess } from '../saveModifiers';
 
 /**
  * Prepare callback for a Delete button with undo support
@@ -52,25 +53,38 @@ const useDeleteWithUndoController = ({
     basePath,
     redirect: redirectTo = 'list',
     onClick,
+    onSuccess,
+    onFailure,
 }: UseDeleteWithUndoControllerParams): UseDeleteWithUndoControllerReturn => {
     const notify = useNotify();
     const redirect = useRedirect();
     const refresh = useRefresh();
 
     const [deleteOne, { loading }] = useDelete(resource, null, null, {
         action: CRUD_DELETE,
-        onSuccess: () => {
-            notify('ra.notification.deleted', 'info', { smart_count: 1 }, true);
-            redirect(redirectTo, basePath);
-            refresh();
-        },
-        onFailure: error =>
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : error.message || 'ra.notification.http_error',
-                'warning'
-            ),
+        onSuccess:
+            onSuccess !== undefined
+                ? onSuccess
+                : () => {
+                      notify(
+                          'ra.notification.deleted',
+                          'info',
+                          { smart_count: 1 },
+                          true
+                      );
+                      redirect(redirectTo, basePath);
+                      refresh();
+                  },
+        onFailure:
+            onFailure !== undefined
+                ? onFailure
+                : error =>
+                      notify(
+                          typeof error === 'string'
+                              ? error
+                              : error.message || 'ra.notification.http_error',
+                          'warning'
+                      ),
         undoable: true,
     });
     const handleDelete = useCallback(
@@ -95,6 +109,8 @@ export interface UseDeleteWithUndoControllerParams {
     redirect?: RedirectionSideEffect;
     resource: string;
     onClick?: ReactEventHandler<any>;
+    onSuccess?: OnSuccess;
+    onFailure?: OnFailure;
 }
 
 export interface UseDeleteWithUndoControllerReturn {

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

@@ -1,10 +1,17 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, wait, fireEvent } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
-import { TestContext } from 'ra-core';
-import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import {
+    DataProvider,
+    DataProviderContext,
+    renderWithRedux,
+    TestContext,
+} from 'ra-core';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import DeleteWithConfirmButton from './DeleteWithConfirmButton';
+import { Toolbar, SimpleForm } from '../form';
+import { Edit } from '../detail';
+import { TextInput } from '../input';
 
 const theme = createMuiTheme();
 
@@ -59,4 +66,102 @@ describe('<DeleteWithConfirmButton />', () => {
 
         spy.mockRestore();
     });
+
+    const defaultEditProps = {
+        basePath: '',
+        id: '123',
+        resource: 'posts',
+        location: {},
+        match: {},
+        undoable: false,
+    };
+
+    it('should allow to override the onSuccess side effects', async () => {
+        const dataProvider = ({
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem' },
+                }),
+            delete: jest.fn().mockResolvedValueOnce({ data: { id: 123 } }),
+        } as unknown) as DataProvider;
+        const onSuccess = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <DeleteWithConfirmButton onSuccess={onSuccess} />
+            </Toolbar>
+        );
+        const {
+            queryByDisplayValue,
+            getByLabelText,
+            getByText,
+        } = renderWithRedux(
+            <ThemeProvider theme={theme}>
+                <DataProviderContext.Provider value={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </DataProviderContext.Provider>
+            </ThemeProvider>,
+            { admin: { resources: { posts: { data: {} } } } }
+        );
+        // wait for the dataProvider.getOne() return
+        await wait(() => {
+            expect(queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(getByLabelText('ra.action.delete'));
+        fireEvent.click(getByText('ra.action.confirm'));
+        await wait(() => {
+            expect(dataProvider.delete).toHaveBeenCalled();
+            expect(onSuccess).toHaveBeenCalledWith({
+                data: { id: 123 },
+            });
+        });
+    });
+
+    it('should allow to override the onFailure side effects', async () => {
+        jest.spyOn(console, 'error').mockImplementationOnce(() => {});
+        const dataProvider = ({
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem' },
+                }),
+            delete: jest.fn().mockRejectedValueOnce({ message: 'not good' }),
+        } as unknown) as DataProvider;
+        const onFailure = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <DeleteWithConfirmButton onFailure={onFailure} />
+            </Toolbar>
+        );
+        const {
+            queryByDisplayValue,
+            getByLabelText,
+            getByText,
+        } = renderWithRedux(
+            <ThemeProvider theme={theme}>
+                <DataProviderContext.Provider value={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </DataProviderContext.Provider>
+            </ThemeProvider>,
+            { admin: { resources: { posts: { data: {} } } } }
+        );
+        // wait for the dataProvider.getOne() return
+        await wait(() => {
+            expect(queryByDisplayValue('lorem')).toBeDefined();
+        });
+        fireEvent.click(getByLabelText('ra.action.delete'));
+        fireEvent.click(getByText('ra.action.confirm'));
+        await wait(() => {
+            expect(dataProvider.delete).toHaveBeenCalled();
+            expect(onFailure).toHaveBeenCalledWith({
+                message: 'not good',
+            });
+        });
+    });
 });

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

@@ -16,6 +16,8 @@ import {
     Record,
     RedirectionSideEffect,
     useDeleteWithConfirmController,
+    OnSuccess,
+    OnFailure,
 } from 'ra-core';
 
 import Confirm from '../layout/Confirm';
@@ -34,6 +36,8 @@ const DeleteWithConfirmButton: FC<DeleteWithConfirmButtonProps> = props => {
         record,
         resource,
         redirect = 'list',
+        onSuccess,
+        onFailure,
         ...rest
     } = props;
     const translate = useTranslate();
@@ -50,6 +54,8 @@ const DeleteWithConfirmButton: FC<DeleteWithConfirmButtonProps> = props => {
         redirect,
         basePath,
         onClick,
+        onSuccess,
+        onFailure,
     });
 
     return (
@@ -130,6 +136,8 @@ interface Props {
     saving?: boolean;
     submitOnEnter?: boolean;
     undoable?: boolean;
+    onSuccess?: OnSuccess;
+    onFailure?: OnFailure;
 }
 
 type DeleteWithConfirmButtonProps = Props & ButtonProps;

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

@@ -1,9 +1,16 @@
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, wait, fireEvent } from '@testing-library/react';
 import * as React from 'react';
 import expect from 'expect';
-import { TestContext } from 'ra-core';
-import { ThemeProvider } from '@material-ui/core';
-import { createMuiTheme } from '@material-ui/core/styles';
+import {
+    DataProvider,
+    DataProviderContext,
+    renderWithRedux,
+    TestContext,
+} from 'ra-core';
+import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
+import { Toolbar, SimpleForm } from '../form';
+import { Edit } from '../detail';
+import { TextInput } from '../input';
 import DeleteWithUndoButton from './DeleteWithUndoButton';
 
 const theme = createMuiTheme();
@@ -59,4 +66,49 @@ describe('<DeleteWithUndoButton />', () => {
 
         spy.mockRestore();
     });
+
+    const defaultEditProps = {
+        basePath: '',
+        id: '123',
+        resource: 'posts',
+        location: {},
+        match: {},
+        undoable: false,
+    };
+
+    it('should allow to override the onSuccess side effects', async () => {
+        const dataProvider = ({
+            getOne: () =>
+                Promise.resolve({
+                    data: { id: 123, title: 'lorem' },
+                }),
+            delete: () => Promise.resolve({ data: { id: 123 } }),
+        } as unknown) as DataProvider;
+        const onSuccess = jest.fn();
+        const EditToolbar = props => (
+            <Toolbar {...props}>
+                <DeleteWithUndoButton onSuccess={onSuccess} />
+            </Toolbar>
+        );
+        const { queryByDisplayValue, getByLabelText } = renderWithRedux(
+            <ThemeProvider theme={theme}>
+                <DataProviderContext.Provider value={dataProvider}>
+                    <Edit {...defaultEditProps}>
+                        <SimpleForm toolbar={<EditToolbar />}>
+                            <TextInput source="title" />
+                        </SimpleForm>
+                    </Edit>
+                </DataProviderContext.Provider>
+            </ThemeProvider>,
+            { admin: { resources: { posts: { data: {} } } } }
+        );
+        // wait for the dataProvider.getOne() return
+        await wait(() => {
+            expect(queryByDisplayValue('lorem')).not.toBeNull();
+        });
+        fireEvent.click(getByLabelText('ra.action.delete'));
+        await wait(() => {
+            expect(onSuccess).toHaveBeenCalledWith({});
+        });
+    });
 });