story and test for useDeleteMany

Author: slax57

packages/ra-core/src/dataProvider/useDeleteMany.spec.tsx

@@ -6,7 +6,7 @@ import { QueryClient, useMutationState } from '@tanstack/react-query';
 import { CoreAdminContext } from '../core';
 import { testDataProvider } from './testDataProvider';
 import { useDeleteMany } from './useDeleteMany';
-import { MutationMode, Params } from './useDeleteMany.stories';
+import { MutationMode, Params, InvalidateList } from './useDeleteMany.stories';
 
 describe('useDeleteMany', () => {
     it('returns a callback that can be used with update arguments', async () => {
@@ -390,5 +390,15 @@ describe('useDeleteMany', () => {
                 });
             });
         });
+
+        it('invalidates getList query when dataProvider resolves in undoable mode', async () => {
+            render(<InvalidateList mutationMode="undoable" />);
+            fireEvent.click(await screen.findByText('Delete'));
+            await screen.findByText('resources.posts.notifications.deleted');
+            fireEvent.click(screen.getByText('Close'));
+            await waitFor(() => {
+                expect(screen.queryByText('1: Hello')).toBeNull();
+            });
+        });
     });
 });

packages/ra-core/src/dataProvider/useDeleteMany.stories.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { QueryClient, useIsMutating } from '@tanstack/react-query';
+import fakeRestDataProvider from 'ra-data-fakerest';
 
-import { CoreAdminContext } from '../core';
+import { CoreAdmin, CoreAdminContext, Resource } from '../core';
 import { useDeleteMany } from './useDeleteMany';
 import { useGetList } from './useGetList';
 import type { DataProvider, MutationMode as MutationModeType } from '../types';
+import { TestMemoryRouter, useRedirect } from '../routing';
+import { useNotificationContext, useNotify } from '../notification';
+import { useTakeUndoableMutation } from './undo';
+import { EditBase, ListBase, RecordsIterator } from '../controller';
 
 export default { title: 'ra-core/dataProvider/useDeleteMany' };
 
@@ -84,6 +89,125 @@ const MutationModeCore = () => {
     );
 };
 
+const Notification = () => {
+    const { notifications, resetNotifications } = useNotificationContext();
+    const takeMutation = useTakeUndoableMutation();
+
+    return notifications.length > 0 ? (
+        <>
+            <div>{notifications[0].message}</div>
+            <div style={{ display: 'flex', gap: '16px' }}>
+                <button
+                    onClick={() => {
+                        if (notifications[0].notificationOptions?.undoable) {
+                            const mutation = takeMutation();
+                            if (mutation) {
+                                mutation({ isUndo: false });
+                            }
+                        }
+                        resetNotifications();
+                    }}
+                >
+                    Close
+                </button>
+            </div>
+        </>
+    ) : null;
+};
+
+const DeleteButton = ({ mutationMode }: { mutationMode: MutationModeType }) => {
+    const notify = useNotify();
+    const redirect = useRedirect();
+    const [deleteMany, { isPending }] = useDeleteMany();
+    const handleClick = () => {
+        deleteMany(
+            'posts',
+            {
+                ids: [1],
+            },
+            {
+                mutationMode,
+                onSuccess: () => {
+                    notify('resources.posts.notifications.deleted', {
+                        type: 'info',
+                        undoable: mutationMode === 'undoable',
+                    });
+                    redirect('list', 'posts');
+                },
+            }
+        );
+    };
+    return (
+        <button onClick={handleClick} disabled={isPending}>
+            Delete
+        </button>
+    );
+};
+
+export const InvalidateList = ({
+    mutationMode,
+}: {
+    mutationMode: MutationModeType;
+}) => {
+    const dataProvider = fakeRestDataProvider(
+        {
+            posts: [
+                { id: 1, title: 'Hello' },
+                { id: 2, title: 'World' },
+            ],
+        },
+        process.env.NODE_ENV !== 'test',
+        process.env.NODE_ENV === 'test' ? 10 : 1000
+    );
+
+    return (
+        <TestMemoryRouter initialEntries={['/posts/1']}>
+            <CoreAdmin dataProvider={dataProvider}>
+                <Resource
+                    name="posts"
+                    edit={
+                        <EditBase>
+                            <div>
+                                <h1>Edit Post</h1>
+                                <DeleteButton mutationMode={mutationMode} />
+                            </div>
+                        </EditBase>
+                    }
+                    list={
+                        <ListBase loading={<p>Loading...</p>}>
+                            <RecordsIterator
+                                render={(record: any) => (
+                                    <div
+                                        style={{
+                                            display: 'flex',
+                                            gap: '8px',
+                                            alignItems: 'center',
+                                        }}
+                                    >
+                                        {record.id}: {record.title}
+                                    </div>
+                                )}
+                            />
+                            <Notification />
+                        </ListBase>
+                    }
+                />
+            </CoreAdmin>
+        </TestMemoryRouter>
+    );
+};
+InvalidateList.args = {
+    mutationMode: 'undoable',
+};
+InvalidateList.argTypes = {
+    mutationMode: {
+        control: {
+            type: 'select',
+        },
+        options: ['pessimistic', 'optimistic', 'undoable'],
+    },
+};
+
 export const Params = ({ dataProvider }: { dataProvider?: DataProvider }) => {
     let posts = [
         { id: 1, title: 'Hello' },