story and test for useDelete

Author: slax57

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

@@ -20,7 +20,7 @@ import {
     ErrorCase as ErrorCaseUndoable,
     SuccessCase as SuccessCaseUndoable,
 } from './useDelete.undoable.stories';
-import { MutationMode, Params } from './useDelete.stories';
+import { MutationMode, Params, InvalidateList } from './useDelete.stories';
 
 describe('useDelete', () => {
     it('returns a callback that can be used with deleteOne arguments', async () => {
@@ -732,5 +732,16 @@ describe('useDelete', () => {
                 });
             });
         });
+
+        it('invalidates getList query when dataProvider resolves in undoable mode', async () => {
+            render(<InvalidateList mutationMode="undoable" />);
+            await screen.findByText('Title: Hello');
+            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/useDelete.stories.tsx

@@ -1,11 +1,22 @@
 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 { useDelete } from './useDelete';
 import { useGetList } from './useGetList';
 import type { DataProvider, MutationMode as MutationModeType } from '../types';
+import {
+    EditBase,
+    ListBase,
+    RecordsIterator,
+    useDeleteController,
+    WithRecord,
+} from '../controller';
+import { TestMemoryRouter } from '../routing';
+import { useNotificationContext } from '../notification';
+import { useTakeUndoableMutation } from './undo';
 
 export default { title: 'ra-core/dataProvider/useDelete' };
 
@@ -162,3 +173,110 @@ const ParamsCore = () => {
         </>
     );
 };
+
+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 { isPending, handleDelete } = useDeleteController({
+        mutationMode,
+        redirect: 'list',
+    });
+    return (
+        <button onClick={handleDelete} 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>
+                                <WithRecord
+                                    render={record => (
+                                        <div>Title: {record.title}</div>
+                                    )}
+                                />
+                                <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'],
+    },
+};

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

@@ -659,7 +659,7 @@ describe('useUpdate', () => {
             });
         });
 
-        it('invalidates getList query dataProvider resolves in undoable mode', async () => {
+        it('invalidates getList query when dataProvider resolves in undoable mode', async () => {
             render(<InvalidateList mutationMode="undoable" />);
             fireEvent.change(await screen.findByDisplayValue('Hello'), {
                 target: { value: 'Hello changed' },