Merge pull request marmelab#10296 from marmelab/undoable-mutation-context

Fix undo logic not working when doing multiple deletions one by one

Author: slax57

packages/ra-core/src/controller/edit/useEditController.spec.tsx

@@ -16,7 +16,7 @@ import {
 } from '..';
 import { CoreAdminContext } from '../../core';
 import { testDataProvider } from '../../dataProvider';
-import undoableEventEmitter from '../../dataProvider/undoableEventEmitter';
+import { useTakeUndoableMutation } from '../../dataProvider/undo/useTakeUndoableMutation';
 import { Form, InputProps, useInput } from '../../form';
 import { useNotificationContext } from '../../notification';
 import { AuthProvider, DataProvider } from '../../types';
@@ -30,6 +30,20 @@ import {
 } from './useEditController.security.stories';
 import { EncodedId } from './useEditController.stories';
 
+const Confirm = () => {
+    const takeMutation = useTakeUndoableMutation();
+    return (
+        <button
+            aria-label="confirm"
+            onClick={() => {
+                const mutation = takeMutation();
+                if (!mutation) return;
+                mutation({ isUndo: false });
+            }}
+        />
+    );
+};
+
 describe('useEditController', () => {
     const defaultProps = {
         id: 12,
@@ -269,6 +283,7 @@ describe('useEditController', () => {
                                     aria-label="save"
                                     onClick={() => save!({ test: 'updated' })}
                                 />
+                                <Confirm />
                             </>
                         );
                     }}
@@ -287,7 +302,7 @@ describe('useEditController', () => {
             data: { test: 'updated' },
             previousData: { id: 12, test: 'previous' },
         });
-        undoableEventEmitter.emit('end', { isUndo: false });
+        screen.getByLabelText('confirm').click();
         await waitFor(() => {
             screen.getByText('updated');
         });
@@ -878,14 +893,14 @@ describe('useEditController', () => {
                 <EditController {...defaultProps} mutationMode="undoable">
                     {({ save }) => {
                         saveCallback = save;
-                        return <div />;
+                        return <Confirm />;
                     }}
                 </EditController>
             </CoreAdminContext>
         );
         await act(async () => saveCallback({ foo: 'bar' }));
         await new Promise(resolve => setTimeout(resolve, 10));
-        undoableEventEmitter.emit('end', { isUndo: false });
+        screen.getByLabelText('confirm').click();
         await new Promise(resolve => setTimeout(resolve, 10));
         expect(notificationsSpy).toContainEqual({
             message: 'ra.notification.http_error',

packages/ra-core/src/core/CoreAdminContext.tsx

@@ -6,6 +6,7 @@ import { AdminRouter } from '../routing';
 import { AuthContext, convertLegacyAuthProvider } from '../auth';
 import {
     DataProviderContext,
+    UndoableMutationsContextProvider,
     convertLegacyDataProvider,
     defaultDataProvider,
 } from '../dataProvider';
@@ -211,9 +212,11 @@ React-admin requires a valid dataProvider function to work.`);
                             <AdminRouter basename={basename}>
                                 <I18nContextProvider value={i18nProvider}>
                                     <NotificationContextProvider>
-                                        <ResourceDefinitionContextProvider>
-                                            {children}
-                                        </ResourceDefinitionContextProvider>
+                                        <UndoableMutationsContextProvider>
+                                            <ResourceDefinitionContextProvider>
+                                                {children}
+                                            </ResourceDefinitionContextProvider>
+                                        </UndoableMutationsContextProvider>
                                     </NotificationContextProvider>
                                 </I18nContextProvider>
                             </AdminRouter>

packages/ra-core/src/dataProvider/index.ts

@@ -25,6 +25,7 @@ export * from './useUpdateMany';
 export * from './useDelete';
 export * from './useDeleteMany';
 export * from './useInfiniteGetList';
+export * from './undo/';
 
 export type { Options } from './fetch';
 
@@ -33,5 +34,8 @@ export {
     DataProviderContext,
     fetchUtils,
     HttpError,
+    /**
+     * @deprecated use the useTakeUndoableMutation hook instead
+     */
     undoableEventEmitter,
 };

packages/ra-core/src/dataProvider/undo/AddUndoableMutationContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import type { UndoableMutation } from './types';
+
+export const AddUndoableMutationContext = createContext<
+    (mutation: UndoableMutation) => void
+>(() => {});

packages/ra-core/src/dataProvider/undo/TakeUndoableMutationContext.tsx

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+import type { UndoableMutation } from './types';
+
+export const TakeUndoableMutationContext = createContext<
+    () => UndoableMutation | void
+>(() => {});

packages/ra-core/src/dataProvider/undo/UndoableMutationsContextProvider.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { useState, useCallback } from 'react';
+
+import { AddUndoableMutationContext } from './AddUndoableMutationContext';
+import { TakeUndoableMutationContext } from './TakeUndoableMutationContext';
+import type { UndoableMutation } from './types';
+
+/**
+ * Exposes and manages a queue of undoable mutations
+ *
+ * This context is used in CoreAdminContext so that every react-admin app
+ * can use the useAddUndoableMutation and useTakeUndoableMutation hooks.
+ *
+ * Note: We need a separate queue for mutations (instead of using the
+ * notifications queue) because the mutations are not dequeued when the
+ * notification is displayed, but when it is dismissed.
+ */
+export const UndoableMutationsContextProvider = ({ children }) => {
+    const [mutations, setMutations] = useState<UndoableMutation[]>([]);
+
+    /**
+     * Add a new mutation (pushes a new mutation to the queue).
+     *
+     * Used by optimistic data provider hooks, e.g., useDelete
+     */
+    const addMutation = useCallback((mutation: UndoableMutation) => {
+        setMutations(mutations => [...mutations, mutation]);
+    }, []);
+
+    /**
+     * Get the next mutation to execute (shifts the first mutation from the queue) and returns it.
+     *
+     * Used by the Notification component to process or undo the mutation
+     */
+    const takeMutation = useCallback(() => {
+        if (mutations.length === 0) return;
+        const [mutation, ...rest] = mutations;
+        setMutations(rest);
+        return mutation;
+    }, [mutations]);
+
+    return (
+        <TakeUndoableMutationContext.Provider value={takeMutation}>
+            <AddUndoableMutationContext.Provider value={addMutation}>
+                {children}
+            </AddUndoableMutationContext.Provider>
+        </TakeUndoableMutationContext.Provider>
+    );
+};

packages/ra-core/src/dataProvider/undo/index.ts

@@ -0,0 +1,6 @@
+export * from './AddUndoableMutationContext';
+export * from './TakeUndoableMutationContext';
+export * from './UndoableMutationsContextProvider';
+export * from './types';
+export * from './useAddUndoableMutation';
+export * from './useTakeUndoableMutation';

packages/ra-core/src/dataProvider/undo/types.ts

@@ -0,0 +1 @@
+export type UndoableMutation = (params: { isUndo: boolean }) => void;

packages/ra-core/src/dataProvider/undo/useAddUndoableMutation.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { AddUndoableMutationContext } from './AddUndoableMutationContext';
+
+export const useAddUndoableMutation = () =>
+    useContext(AddUndoableMutationContext);

packages/ra-core/src/dataProvider/undo/useTakeUndoableMutation.tsx

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+import { TakeUndoableMutationContext } from './TakeUndoableMutationContext';
+
+export const useTakeUndoableMutation = () =>
+    useContext(TakeUndoableMutationContext);