Merge pull request #10925 from marmelab/use-bulk-update-controller

slax57 · web-flow · commit 0d93bb522eab · 2025-09-16T10:05:34.000+02:00
Introduce `useBulkUpdateController`
diff --git a/packages/ra-core/src/controller/button/index.ts b/packages/ra-core/src/controller/button/index.ts
@@ -5,3 +5,4 @@ export { useDeleteWithUndoController, useDeleteWithConfirmController };
 export * from './useDeleteController';
 export * from './useBulkDeleteController';
 export * from './useUpdateController';
+export * from './useBulkUpdateController';
diff --git a/packages/ra-core/src/controller/button/useBulkUpdateController.tsx b/packages/ra-core/src/controller/button/useBulkUpdateController.tsx
@@ -0,0 +1,134 @@
+import { useCallback, useMemo } from 'react';
+import { useRefresh } from '../../dataProvider/useRefresh';
+import { useListContext } from '../list/useListContext';
+import { useNotify } from '../../notification/useNotify';
+import { RaRecord, MutationMode } from '../../types';
+import { useResourceContext } from '../../core/useResourceContext';
+import { useTranslate } from '../../i18n/useTranslate';
+import {
+    useUpdateMany,
+    UseUpdateManyOptions,
+} from '../../dataProvider/useUpdateMany';
+
+export const useBulkUpdateController = <
+    RecordType extends RaRecord = any,
+    ErrorType = Error,
+>(
+    props: UseBulkUpdateControllerParams<RecordType, ErrorType>
+): UseBulkUpdateControllerReturn => {
+    const {
+        onSuccess,
+        onError,
+        mutationMode = 'undoable',
+        mutationOptions = {},
+        successMessage,
+    } = props;
+    const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
+    const resource = useResourceContext(props);
+    const notify = useNotify();
+    const refresh = useRefresh();
+    const translate = useTranslate();
+    const { selectedIds, onUnselectItems } = useListContext();
+
+    const [updateMany, { isPending }] = useUpdateMany<RecordType, ErrorType>(
+        resource,
+        undefined,
+        {
+            onSuccess:
+                onSuccess ??
+                (() => {
+                    notify(
+                        successMessage ??
+                            `resources.${resource}.notifications.updated`,
+                        {
+                            type: 'info',
+                            messageArgs: {
+                                smart_count: selectedIds.length,
+                                _: translate('ra.notification.updated', {
+                                    smart_count: selectedIds.length,
+                                }),
+                            },
+                            undoable: mutationMode === 'undoable',
+                        }
+                    );
+                    onUnselectItems();
+                }),
+            onError:
+                onError ??
+                ((error: any) => {
+                    notify(
+                        typeof error === 'string'
+                            ? error
+                            : error?.message || 'ra.notification.http_error',
+                        {
+                            type: 'error',
+                            messageArgs: {
+                                _:
+                                    typeof error === 'string'
+                                        ? error
+                                        : error?.message,
+                            },
+                        }
+                    );
+                    refresh();
+                }),
+            ...otherMutationOptions,
+        }
+    );
+
+    const handleUpdate = useCallback(
+        (data: Partial<RecordType>) => {
+            updateMany(
+                resource,
+                {
+                    data,
+                    ids: selectedIds,
+                    meta: mutationMeta,
+                },
+                {
+                    mutationMode,
+                    ...otherMutationOptions,
+                }
+            );
+        },
+        [
+            updateMany,
+            mutationMeta,
+            mutationMode,
+            otherMutationOptions,
+            resource,
+            selectedIds,
+        ]
+    );
+
+    return useMemo(
+        () => ({
+            isPending,
+            isLoading: isPending,
+            handleUpdate,
+        }),
+        [isPending, handleUpdate]
+    );
+};
+
+export interface UseBulkUpdateControllerParams<
+    RecordType extends RaRecord = any,
+    MutationOptionsError = unknown,
+> {
+    /* @deprecated use mutationOptions instead */
+    onSuccess?: () => void;
+    /* @deprecated use mutationOptions instead */
+    onError?: (error: any) => void;
+    mutationMode?: MutationMode;
+    mutationOptions?: UseUpdateManyOptions<RecordType, MutationOptionsError>;
+    resource?: string;
+    successMessage?: string;
+}
+
+export interface UseBulkUpdateControllerReturn<
+    RecordType extends RaRecord = any,
+> {
+    isLoading: boolean;
+    isPending: boolean;
+    handleUpdate: (data: Partial<RecordType>) => void;
+}
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateButton.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
-import { Resource, TestMemoryRouter } from 'ra-core';
+import { Resource, TestMemoryRouter, useNotify } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { BulkUpdateButton } from './BulkUpdateButton';
 import { AdminContext } from '../AdminContext';
@@ -166,6 +166,47 @@ export const MutationMode = () => (
     />
 );
 
+const MutationOptionsButtons = () => {
+    const notify = useNotify();
+    return (
+        <>
+            <BulkUpdateButton
+                label="Update Undoable"
+                data={{ reads: 0 }}
+                mutationMode="undoable"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully', { undoable: true });
+                    },
+                }}
+            />
+            <BulkUpdateButton
+                label="Update Optimistic"
+                data={{ reads: 0 }}
+                mutationMode="optimistic"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully');
+                    },
+                }}
+            />
+            <BulkUpdateButton
+                label="Update Pessimistic"
+                data={{ reads: 0 }}
+                mutationMode="pessimistic"
+                mutationOptions={{
+                    onSuccess: () => {
+                        notify('Updated successfully');
+                    },
+                }}
+            />
+        </>
+    );
+};
+export const MutationOptions = () => (
+    <Wrapper bulkActionButtons={<MutationOptionsButtons />} />
+);
+
 export const Themed = () => (
     <Wrapper
         bulkActionButtons={<BulkUpdateButton data={{ reads: 0 }} />}
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -9,18 +9,14 @@ import {
 import {
     useListContext,
     useTranslate,
-    useUpdateMany,
-    useNotify,
-    useUnselectAll,
     useResourceContext,
-    type MutationMode,
     type RaRecord,
-    type UpdateManyParams,
+    useBulkUpdateController,
+    UseBulkUpdateControllerParams,
 } from 'ra-core';
 
 import { Confirm } from '../layout';
 import { Button, type ButtonProps } from './Button';
-import type { UseMutationOptions } from '@tanstack/react-query';
 import { humanize, inflect } from 'inflection';
 
 export const BulkUpdateWithConfirmButton = (
@@ -30,10 +26,8 @@ export const BulkUpdateWithConfirmButton = (
         props: inProps,
         name: PREFIX,
     });
-    const notify = useNotify();
     const translate = useTranslate();
     const resource = useResourceContext(props);
-    const unselectAll = useUnselectAll(resource);
     const [isOpen, setOpen] = useState(false);
     const { selectedIds } = useListContext();
 
@@ -45,66 +39,46 @@ export const BulkUpdateWithConfirmButton = (
         label = 'ra.action.update',
         mutationMode = 'pessimistic',
         onClick,
-        onSuccess = () => {
-            notify(`resources.${resource}.notifications.updated`, {
-                type: 'info',
-                messageArgs: {
-                    smart_count: selectedIds.length,
-                    _: translate('ra.notification.updated', {
-                        smart_count: selectedIds.length,
-                    }),
-                },
-                undoable: mutationMode === 'undoable',
-            });
-            unselectAll();
-            setOpen(false);
-        },
-        onError = (error: Error | string) => {
-            notify(
-                typeof error === 'string'
-                    ? error
-                    : error.message || 'ra.notification.http_error',
-                {
-                    type: 'error',
-                    messageArgs: {
-                        _:
-                            typeof error === 'string'
-                                ? error
-                                : error && error.message
-                                  ? error.message
-                                  : undefined,
-                    },
-                }
-            );
-            setOpen(false);
-        },
-        mutationOptions = {},
         ...rest
     } = props;
-    const { meta: mutationMeta, ...otherMutationOptions } = mutationOptions;
-
-    const [updateMany, { isPending }] = useUpdateMany(
-        resource,
-        { ids: selectedIds, data, meta: mutationMeta },
-        {
-            onSuccess,
-            onError,
-            mutationMode,
-            ...otherMutationOptions,
-        }
-    );
+    const { handleUpdate, isPending } = useBulkUpdateController({
+        ...rest,
+        mutationMode,
+        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 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 handleUpdate = e => {
-        updateMany();
+    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);
+        }
+        handleUpdate(data);
 
         if (typeof onClick === 'function') {
             onClick(e);
@@ -155,7 +129,7 @@ export const BulkUpdateWithConfirmButton = (
                         ),
                     }),
                 }}
-                onConfirm={handleUpdate}
+                onConfirm={handleConfirm}
                 onClose={handleDialogClose}
             />
         </Fragment>
@@ -164,30 +138,20 @@ export const BulkUpdateWithConfirmButton = (
 
 const sanitizeRestProps = ({
     label,
-    onSuccess,
-    onError,
+    resource,
+    successMessage,
     ...rest
-}: Omit<
-    BulkUpdateWithConfirmButtonProps,
-    'resource' | 'selectedIds' | 'icon' | 'data'
->) => rest;
+}: Omit<BulkUpdateWithConfirmButtonProps, 'icon' | 'data'>) => rest;
 
 export interface BulkUpdateWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown,
-> extends ButtonProps {
+> extends Omit<ButtonProps, 'onError'>,
+        UseBulkUpdateControllerParams<RecordType, MutationOptionsError> {
     confirmContent?: React.ReactNode;
     confirmTitle?: React.ReactNode;
     icon?: React.ReactNode;
     data: any;
-    onSuccess?: () => void;
-    onError?: (error: any) => void;
-    mutationMode?: MutationMode;
-    mutationOptions?: UseMutationOptions<
-        RecordType,
-        MutationOptionsError,
-        UpdateManyParams<RecordType>
-    > & { meta?: any };
 }
 
 const PREFIX = 'RaBulkUpdateWithConfirmButton';
diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
