Merge pull request #8882 from marmelab/warnWhenUnsavedChanges-isSubmitting-fix

Fix custom redirect in pessimistic `Edit` or `Create` when using `warnWhenUnsavedChanges` (new approach)

Author: djhi

packages/ra-core/src/controller/create/useCreateController.spec.tsx

@@ -1,19 +1,26 @@
-import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import expect from 'expect';
-import { render, act } from '@testing-library/react';
-import { Location } from 'react-router-dom';
+import React from 'react';
+import { Location, MemoryRouter, Route, Routes } from 'react-router-dom';
 
-import { getRecordFromLocation } from './useCreateController';
-import { CreateController } from './CreateController';
+import {
+    CreateContextProvider,
+    DataProvider,
+    Form,
+    InputProps,
+    useCreateController,
+    useInput,
+} from '../..';
+import { CoreAdminContext } from '../../core';
 import { testDataProvider, useCreate } from '../../dataProvider';
 import { useNotificationContext } from '../../notification';
-import { CoreAdminContext } from '../../core';
 import {
     Middleware,
     SaveContextProvider,
     useRegisterMutationMiddleware,
 } from '../saveContext';
-import { DataProvider } from '../..';
+import { CreateController } from './CreateController';
+import { getRecordFromLocation } from './useCreateController';
 
 describe('useCreateController', () => {
     describe('getRecordFromLocation', () => {
@@ -532,4 +539,61 @@ describe('useCreateController', () => {
             data: { foo: 'bar' },
         });
     });
+
+    it('should allow custom redirect with warnWhenUnsavedChanges', async () => {
+        const dataProvider = testDataProvider({
+            getOne: () => Promise.resolve({ data: { id: 123 } } as any),
+            create: (_, { data }) =>
+                new Promise(resolve =>
+                    setTimeout(
+                        () => resolve({ data: { id: 123, ...data } }),
+                        300
+                    )
+                ),
+        });
+        const Input = (props: InputProps) => {
+            const name = props.source;
+            const { field } = useInput(props);
+            return (
+                <>
+                    <label htmlFor={name}>{name}</label>
+                    <input id={name} type="text" {...field} />
+                </>
+            );
+        };
+        const CreateView = () => {
+            const controllerProps = useCreateController({
+                ...defaultProps,
+                redirect: 'show',
+            });
+            return (
+                <CreateContextProvider value={controllerProps}>
+                    <Form warnWhenUnsavedChanges>
+                        <>
+                            <div>Create</div>
+                            <Input source="foo" />
+                            <input type="submit" value="Submit" />
+                        </>
+                    </Form>
+                </CreateContextProvider>
+            );
+        };
+        const ShowView = () => <div>Show</div>;
+        render(
+            <MemoryRouter initialEntries={['/posts/create']}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Routes>
+                        <Route path="/posts/create" element={<CreateView />} />
+                        <Route path="/posts/123/show" element={<ShowView />} />
+                    </Routes>
+                </CoreAdminContext>
+            </MemoryRouter>
+        );
+        await screen.findByText('Create');
+        fireEvent.change(screen.getByLabelText('foo'), {
+            target: { value: 'bar' },
+        });
+        fireEvent.click(screen.getByText('Submit'));
+        expect(await screen.findByText('Show')).not.toBeNull();
+    });
 });

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

@@ -1,17 +1,28 @@
-import * as React from 'react';
+import {
+    act,
+    fireEvent,
+    render,
+    screen,
+    waitFor,
+} from '@testing-library/react';
 import expect from 'expect';
-import { act, render, screen, waitFor } from '@testing-library/react';
-import { Routes, Route } from 'react-router';
 import { createMemoryHistory } from 'history';
+import * as React from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router';
 
-import { EditController } from './EditController';
-import { DataProvider } from '../../types';
+import {
+    EditContextProvider,
+    SaveContextProvider,
+    useEditController,
+} from '..';
 import { CoreAdminContext } from '../../core';
-import { useNotificationContext } from '../../notification';
-import { SaveContextProvider } from '..';
+import { testDataProvider, useUpdate } from '../../dataProvider';
 import undoableEventEmitter from '../../dataProvider/undoableEventEmitter';
+import { Form, InputProps, useInput } from '../../form';
+import { useNotificationContext } from '../../notification';
+import { DataProvider } from '../../types';
 import { Middleware, useRegisterMutationMiddleware } from '../saveContext';
-import { testDataProvider, useUpdate } from '../../dataProvider';
+import { EditController } from './EditController';
 
 describe('useEditController', () => {
     const defaultProps = {
@@ -940,4 +951,63 @@ describe('useEditController', () => {
             previousData: { id: 12 },
         });
     });
+
+    it('should allow custom redirect with warnWhenUnsavedChanges in pessimistic mode', async () => {
+        const dataProvider = testDataProvider({
+            getOne: () => Promise.resolve({ data: { id: 123 } } as any),
+            update: (_, { id, data }) =>
+                new Promise(resolve =>
+                    setTimeout(
+                        () => resolve({ data: { id, ...data } } as any),
+                        300
+                    )
+                ),
+        });
+        const Input = (props: InputProps) => {
+            const name = props.source;
+            const { field } = useInput(props);
+            return (
+                <>
+                    <label htmlFor={name}>{name}</label>
+                    <input id={name} type="text" {...field} />
+                </>
+            );
+        };
+        const EditView = () => {
+            const controllerProps = useEditController({
+                ...defaultProps,
+                id: 123,
+                redirect: 'show',
+                mutationMode: 'pessimistic',
+            });
+            return (
+                <EditContextProvider value={controllerProps}>
+                    <Form warnWhenUnsavedChanges>
+                        <>
+                            <div>Edit</div>
+                            <Input source="foo" />
+                            <input type="submit" value="Submit" />
+                        </>
+                    </Form>
+                </EditContextProvider>
+            );
+        };
+        const ShowView = () => <div>Show</div>;
+        render(
+            <MemoryRouter initialEntries={['/posts/123']}>
+                <CoreAdminContext dataProvider={dataProvider}>
+                    <Routes>
+                        <Route path="/posts/123" element={<EditView />} />
+                        <Route path="/posts/123/show" element={<ShowView />} />
+                    </Routes>
+                </CoreAdminContext>
+            </MemoryRouter>
+        );
+        await screen.findByText('Edit');
+        fireEvent.change(await screen.findByLabelText('foo'), {
+            target: { value: 'bar' },
+        });
+        fireEvent.click(screen.getByText('Submit'));
+        expect(await screen.findByText('Show')).not.toBeNull();
+    });
 });

packages/ra-core/src/form/useWarnWhenUnsavedChanges.tsx

@@ -55,6 +55,14 @@ export const useWarnWhenUnsavedChanges = (
             ) {
                 unblock();
                 tx.retry();
+            } else {
+                if (isSubmitting) {
+                    // Retry the transition (possibly several times) until the form is no longer submitting.
+                    // The value of 100ms is arbitrary, it allows to give some time between retries.
+                    setTimeout(() => {
+                        tx.retry();
+                    }, 100);
+                }
             }
         });