story and test for useUpdateMany

Author: slax57

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

@@ -17,6 +17,7 @@ import {
     Params,
     UndefinedValues,
     WithMiddlewares,
+    InvalidateList,
 } from './useUpdateMany.stories';
 
 describe('useUpdateMany', () => {
@@ -525,6 +526,14 @@ describe('useUpdateMany', () => {
                 '[{"id":1,"title":"world"},{"id":2,"title":"world"}]'
             ); // and not [{"title":"world"},{"title":"world"}]
         });
+
+        it('invalidates getList query dataProvider resolves in undoable mode', async () => {
+            render(<InvalidateList mutationMode="undoable" />);
+            fireEvent.click(await screen.findByText('Update'));
+            await screen.findByText('resources.posts.notifications.updated');
+            fireEvent.click(screen.getByText('Close'));
+            await screen.findByText('1: Hello updated');
+        });
     });
 
     describe('middlewares', () => {

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

@@ -1,13 +1,17 @@
 import * as React from 'react';
 import { QueryClient, useIsMutating } from '@tanstack/react-query';
 
-import { CoreAdminContext } from '../core';
+import { CoreAdmin, CoreAdminContext, Resource } from '../core';
 import { useUpdateMany } from './useUpdateMany';
 import { useGetList } from './useGetList';
 import { useState } from 'react';
 import { useGetOne } from './useGetOne';
 import { useTakeUndoableMutation } from './undo';
 import type { DataProvider, MutationMode as MutationModeType } from '../types';
+import fakeRestDataProvider from 'ra-data-fakerest';
+import { TestMemoryRouter, useRedirect } from '../routing';
+import { useNotificationContext, useNotify } from '../notification';
+import { EditBase, ListBase, RecordsIterator } from '../controller';
 
 export default { title: 'ra-core/dataProvider/useUpdateMany' };
 
@@ -309,3 +313,125 @@ 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 UpdateButton = ({ mutationMode }: { mutationMode: MutationModeType }) => {
+    const notify = useNotify();
+    const redirect = useRedirect();
+    const [updateMany, { isPending }] = useUpdateMany();
+    const handleClick = () => {
+        updateMany(
+            'posts',
+            {
+                ids: [1],
+                data: { title: 'Hello updated' },
+            },
+            {
+                mutationMode,
+                onSuccess: () => {
+                    // Show undoable notification like controllers do
+                    notify('resources.posts.notifications.updated', {
+                        type: 'info',
+                        undoable: mutationMode === 'undoable',
+                    });
+                    // Redirect to list after mutation succeeds
+                    redirect('list', 'posts');
+                },
+            }
+        );
+    };
+    return (
+        <button onClick={handleClick} disabled={isPending}>
+            Update
+        </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>
+                                <UpdateButton mutationMode={mutationMode} />
+                            </div>
+                        </EditBase>
+                    }
+                    list={
+                        <ListBase loading={<p>Loading...</p>}>
+                            <RecordsIterator
+                                render={record => (
+                                    <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'],
+    },
+};