Merge pull request #9196 from marmelab/fix-updatebutton-mutationoptions

Fix UpdateButton with custom notification doesn't close the confirmation dialog

Author: djhi

docs/UpdateButton.md

@@ -182,13 +182,11 @@ import { useNotify, useRefresh, useRedirect, TopToolbar, UpdateButton } from 're
 
 const PostEditActions = () => {
     const notify = useNotify();
-    const refresh = useRefresh();
     const redirect = useRedirect();
 
     const onSuccess = () => {
         notify(`Changes saved`);
         redirect('/posts');
-        refresh();
     };
 
     return (
@@ -212,7 +210,6 @@ The default `onSuccess` function is:
         messageArgs: { smart_count: 1 },
         undoable: mutationMode === 'undoable'
     });
-    refresh();
 }
 ```
 
@@ -225,13 +222,11 @@ import { useNotify, useRefresh, useRedirect, TopToolbar, UpdateButton } from 're
 
 const PostEditActions = () => {
     const notify = useNotify();
-    const refresh = useRefresh();
     const redirect = useRedirect();
 
     const onSuccess = (data) => {
         notify(`Changes to post "${data.title}" saved`);
         redirect('/posts');
-        refresh();
     };
 
     return (

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
-import { Resource, withLifecycleCallbacks } from 'ra-core';
+import { Resource, useNotify, withLifecycleCallbacks } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { createMemoryHistory } from 'history';
 
@@ -161,6 +161,47 @@ export const Optimistic = () => (
     </AdminContext>
 );
 
+const PostShowMutationOptions = () => {
+    const notify = useNotify();
+    return (
+        <Show
+            actions={
+                <TopToolbar>
+                    <UpdateButton
+                        mutationMode="pessimistic"
+                        label="Reset views"
+                        data={{ views: 0 }}
+                        mutationOptions={{
+                            onSuccess: () => {
+                                notify('Reset views success');
+                            },
+                        }}
+                    />
+                </TopToolbar>
+            }
+        >
+            <SimpleShowLayout>
+                <TextField source="id" />
+                <TextField source="title" />
+                <TextField source="body" />
+                <NumberField source="views" />
+            </SimpleShowLayout>
+        </Show>
+    );
+};
+
+export const MutationOptions = () => (
+    <AdminContext
+        dataProvider={getDataProvider()}
+        i18nProvider={i18nProvider}
+        history={createMemoryHistory({ initialEntries: ['/posts/1/show'] })}
+    >
+        <AdminUI>
+            <Resource name="posts" show={<PostShowMutationOptions />} />
+        </AdminUI>
+    </AdminContext>
+);
+
 const PostShowSx = () => {
     return (
         <Show

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

@@ -9,6 +9,7 @@ import { Toolbar, SimpleForm } from '../form';
 import { Edit } from '../detail';
 import { TextInput } from '../input';
 import { Notification } from '../layout';
+import { MutationOptions } from './UpdateButton.stories';
 
 const theme = createTheme();
 
@@ -242,4 +243,19 @@ describe('<UpdateWithConfirmButton />', () => {
             );
         });
     });
+
+    it('should close the dialog even with custom success side effect', async () => {
+        render(<MutationOptions />);
+        fireEvent.click(await screen.findByLabelText('Reset views'));
+        await screen.findByText('Are you sure you want to update this post?');
+        fireEvent.click(screen.getByText('Confirm'));
+        await screen.findByText('Reset views success', undefined, {
+            timeout: 2000,
+        });
+        // 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?')
+        ).toBeNull();
+    });
 });

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

@@ -48,7 +48,6 @@ export const UpdateWithConfirmButton = (
                 messageArgs: { smart_count: 1 },
                 undoable: mutationMode === 'undoable',
             });
-            setOpen(false);
         },
         onError = (error: Error | string) => {
             notify(
@@ -67,6 +66,8 @@ export const UpdateWithConfirmButton = (
                     },
                 }
             );
+        },
+        onSettled = () => {
             setOpen(false);
         },
         ...otherMutationOptions
@@ -90,6 +91,7 @@ export const UpdateWithConfirmButton = (
             {
                 onSuccess,
                 onError,
+                onSettled,
                 mutationMode,
                 ...otherMutationOptions,
             }