Improve side effects handling depending on the mutationMode

Author: djhi

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

@@ -3,6 +3,7 @@ import {
     CoreAdminContext,
     testDataProvider,
     ListContextProvider,
+    MutationMode,
 } from 'ra-core';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
@@ -13,7 +14,11 @@ export default { title: 'ra-ui-materialui/button/BulkDeleteWithConfirmButton' };
 
 const theme = createTheme();
 
-export const Default = () => {
+export const Default = ({
+    mutationMode = 'pessimistic',
+}: {
+    mutationMode?: MutationMode;
+}) => {
     const dataProvider = testDataProvider({
         deleteMany: async () => ({ data: [{ id: 123 }] as any }),
     });
@@ -31,11 +36,24 @@ export const Default = () => {
                 >
                     <BulkDeleteWithConfirmButton
                         resource="books"
-                        mutationMode="pessimistic"
+                        mutationMode={mutationMode}
                     />
                     <Notification />
                 </ListContextProvider>
             </ThemeProvider>
         </CoreAdminContext>
     );
 };
+
+Default.args = {
+    mutationMode: 'pessimistic',
+};
+
+Default.argTypes = {
+    mutationMode: {
+        options: ['pessimistic', 'optimistic', 'undoable'],
+        control: {
+            type: 'select',
+        },
+    },
+};

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

@@ -41,23 +41,44 @@ export const BulkDeleteWithConfirmButton = (
     const { handleDelete, isPending } = useBulkDeleteController({
         mutationMode,
         ...rest,
+        mutationOptions: {
+            ...rest.mutationOptions,
+            onSettled(data, error, variables, context) {
+                // In pessimistic mode, we wait for the mutation to be completed (either successfully or with an error) before closing
+                if (mutationMode === 'pessimistic') {
+                    setOpen(false);
+                }
+                rest.mutationOptions?.onSettled?.(
+                    data,
+                    error,
+                    variables,
+                    context
+                );
+            },
+        },
     });
 
     const [isOpen, setOpen] = useState(false);
     const resource = useResourceContext(props);
     const translate = useTranslate();
 
-    const handleClick = e => {
-        setOpen(true);
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
         e.stopPropagation();
+        setOpen(true);
     };
 
-    const handleDialogClose = () => {
+    const handleDialogClose = (e: React.MouseEvent) => {
+        e.stopPropagation();
         setOpen(false);
     };
 
-    const handleConfirm = e => {
-        setOpen(false);
+    const handleConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        // We close the dialog immediately here for optimistic/undoable modes instead of in onSuccess/onError
+        // to avoid reimplementing the default side effects
+        if (mutationMode !== 'pessimistic') {
+            setOpen(false);
+        }
         handleDelete();
 
         if (typeof onClick === 'function') {