[Demo] Update Create-React-App to V5

examples/crm/package.json

@@ -16,7 +16,7 @@
     "react-admin": "^3.15.0",
     "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^17.0.0",
-    "react-scripts": "^4.0.1"
+    "react-scripts": "^5.0.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.4",

examples/demo/package.json

@@ -26,7 +26,7 @@
         "react-redux": "^7.1.0",
         "react-router": "^5.1.0",
         "react-router-dom": "^5.1.0",
-        "react-scripts": "^4.0.3",
+        "react-scripts": "^5.0.0",
         "recharts": "^1.8.5",
         "redux-saga": "^1.0.0"
     },

examples/tutorial/package.json

@@ -8,7 +8,7 @@
         "react": "^17.0.0",
         "react-admin": "^3.9.0",
         "react-dom": "^17.0.0",
-        "react-scripts": "^4.0.1"
+        "react-scripts": "^5.0.0"
     },
     "scripts": {
         "start": "react-scripts start",

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

@@ -143,7 +143,7 @@ describe('useGetList', () => {
                 })
             ),
         };
-        await new Promise(setImmediate); // empty the query deduplication in useQueryWithStore
+        await new Promise(resolve => setTimeout(resolve)); // empty the query deduplication in useQueryWithStore
         renderWithRedux(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseGetList callback={hookValue} />
@@ -245,7 +245,7 @@ describe('useGetList', () => {
         const dataProvider = {
             getList: jest.fn(() => Promise.reject(new Error('failed'))),
         };
-        await new Promise(setImmediate); // empty the query deduplication in useQueryWithStore
+        await new Promise(resolve => setTimeout(resolve)); // empty the query deduplication in useQueryWithStore
         renderWithRedux(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseGetList callback={hookValue} />
@@ -284,7 +284,7 @@ describe('useGetList', () => {
                     })
                 ),
         };
-        await new Promise(setImmediate); // empty the query deduplication in useQueryWithStore
+        await new Promise(resolve => setTimeout(resolve)); // empty the query deduplication in useQueryWithStore
         renderWithRedux(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseGetList options={{ onSuccess: onSuccess1 }} />
@@ -320,7 +320,7 @@ describe('useGetList', () => {
         const dataProvider = {
             getList: jest.fn(() => Promise.reject(new Error('failed'))),
         };
-        await new Promise(setImmediate); // empty the query deduplication in useQueryWithStore
+        await new Promise(resolve => setTimeout(resolve)); // empty the query deduplication in useQueryWithStore
         renderWithRedux(
             <DataProviderContext.Provider value={dataProvider}>
                 <UseGetList options={{ onFailure }} />

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

@@ -55,7 +55,7 @@ describe('useQueryWithStore', () => {
         expect(callArgs.error).toBeNull();
         expect(callArgs.total).toBeNull();
 
-        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        await new Promise(resolve => setTimeout(resolve)); // wait for useEffect
         callArgs = callback.mock.calls[1][0];
         expect(callArgs.loading).toEqual(false);
         expect(callArgs.loaded).toEqual(false);
@@ -78,7 +78,7 @@ describe('useQueryWithStore', () => {
         expect(callArgs.total).toBeNull();
 
         callback.mockClear();
-        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        await new Promise(resolve => setTimeout(resolve)); // wait for useEffect
         callArgs = callback.mock.calls[0][0];
         expect(callArgs.data).toBeUndefined();
         expect(callArgs.loading).toEqual(true);
@@ -117,7 +117,7 @@ describe('useQueryWithStore', () => {
         expect(callArgs.total).toBeNull();
 
         callback.mockClear();
-        await new Promise(resolve => setImmediate(resolve)); // wait for useEffect
+        await new Promise(resolve => setTimeout(resolve)); // wait for useEffect
         callArgs = callback.mock.calls[0][0];
         expect(callArgs.loading).toEqual(false);
         expect(callArgs.loaded).toEqual(false);
@@ -147,7 +147,7 @@ describe('useQueryWithStore', () => {
         expect(callArgs.error).toBeNull();
         expect(callArgs.total).toBeNull();
         callback.mockClear();
-        await new Promise(resolve => setImmediate(resolve)); // dataProvider Promise returns result on next tick
+        await new Promise(resolve => setTimeout(resolve)); // dataProvider Promise returns result on next tick
         callArgs = callback.mock.calls[1][0];
         expect(callArgs.data).toEqual({
             id: 1,

packages/ra-ui-materialui/src/form/Toolbar.tsx

@@ -14,7 +14,7 @@ import MuiToolbar, {
 import withWidth from '@material-ui/core/withWidth';
 import { makeStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
-import { Record, RedirectionSideEffect, MutationMode } from 'ra-core';
+import { RedirectionSideEffect, MutationMode } from 'ra-core';
 import { FormRenderProps } from 'react-final-form';
 
 import { SaveButton, DeleteButton } from '../button';
@@ -210,8 +210,7 @@ const Toolbar: FC<ToolbarProps> = props => {
     );
 };
 
-export interface ToolbarProps<RecordType extends Partial<Record> = Record>
-    extends Omit<MuiToolbarProps, 'classes'> {
+export interface ToolbarProps extends Omit<MuiToolbarProps, 'classes'> {
     children?: ReactNode;
     alwaysEnableSaveButton?: boolean;
     className?: string;
@@ -225,7 +224,7 @@ export interface ToolbarProps<RecordType extends Partial<Record> = Record>
     submitOnEnter?: boolean;
     redirect?: RedirectionSideEffect;
     basePath?: string;
-    record?: RecordType;
+    record?: any;
     resource?: string;
     /** @deprecated use mutationMode: undoable instead */
     undoable?: boolean;

packages/ra-ui-materialui/src/input/AutocompleteArrayInput.spec.tsx

@@ -787,7 +787,7 @@ describe('<AutocompleteArrayInput />', () => {
         input.focus();
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur
@@ -819,7 +819,7 @@ describe('<AutocompleteArrayInput />', () => {
                     name: filter,
                 };
                 choices.push(newChoice);
-                setImmediate(() => resolve(newChoice));
+                setTimeout(() => resolve(newChoice));
             });
         };
 
@@ -845,7 +845,7 @@ describe('<AutocompleteArrayInput />', () => {
         input.focus();
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur
@@ -905,7 +905,7 @@ describe('<AutocompleteArrayInput />', () => {
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
         fireEvent.click(getByText('Get the kid'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur

packages/ra-ui-materialui/src/input/AutocompleteInput.spec.tsx

@@ -786,7 +786,7 @@ describe('<AutocompleteInput />', () => {
         input.focus();
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur
@@ -845,7 +845,7 @@ describe('<AutocompleteInput />', () => {
         input.focus();
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur
@@ -906,7 +906,7 @@ describe('<AutocompleteInput />', () => {
         fireEvent.change(input, { target: { value: 'New Kid On The Block' } });
         fireEvent.click(getByText('ra.action.create_item'));
         fireEvent.click(getByText('Get the kid'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         rerender(
             <Form
                 validateOnBlur

packages/ra-ui-materialui/src/input/FileInput.spec.tsx

@@ -72,7 +72,7 @@ describe('<FileInput />', () => {
         const file = createFile('cats.gif', 1234, 'image/gif');
         fireEvent.drop(getByTestId('dropzone'), createDataTransfer([file]));
         // Required because react-dropzone handle drag & drop operations asynchronously
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
 
         fireEvent.click(getByLabelText('Save'));
 
@@ -113,7 +113,7 @@ describe('<FileInput />', () => {
             createDataTransfer([file1, file2])
         );
         // Required because react-dropzone handle drag & drop operations asynchronously
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
 
         fireEvent.click(getByLabelText('Save'));
 
@@ -408,7 +408,7 @@ describe('<FileInput />', () => {
             const file = createFile('cats.gif', 1234, 'image/gif');
             fireEvent.drop(getByTestId('dropzone'), createDataTransfer([file]));
             // Required because react-dropzone handle drag & drop operations asynchronously
-            await new Promise(resolve => setImmediate(resolve));
+            await new Promise(resolve => setTimeout(resolve));
 
             const previewImage = queryByRole('image');
             expect(previewImage).not.toBeNull();

packages/ra-ui-materialui/src/input/ImageInput.spec.tsx

@@ -71,7 +71,7 @@ describe('<ImageInput />', () => {
         const file = createFile('cats.gif', 1234, 'image/gif');
         fireEvent.drop(getByTestId('dropzone'), createDataTransfer([file]));
         // Required because react-dropzone handle drag & drop operations asynchronously
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
 
         fireEvent.click(getByLabelText('Save'));
 
@@ -112,7 +112,7 @@ describe('<ImageInput />', () => {
             createDataTransfer([file1, file2])
         );
         // Required because react-dropzone handle drag & drop operations asynchronously
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
 
         fireEvent.click(getByLabelText('Save'));
 
@@ -407,7 +407,7 @@ describe('<ImageInput />', () => {
             const file = createFile('cats.gif', 1234, 'image/gif');
             fireEvent.drop(getByTestId('dropzone'), createDataTransfer([file]));
             // Required because react-dropzone handle drag & drop operations asynchronously
-            await new Promise(resolve => setImmediate(resolve));
+            await new Promise(resolve => setTimeout(resolve));
 
             const previewImage = queryByRole('image');
             expect(previewImage).not.toBeNull();

packages/ra-ui-materialui/src/input/SelectArrayInput.spec.tsx

@@ -342,7 +342,7 @@ describe('<SelectArrayInput />', () => {
         fireEvent.mouseDown(select);
 
         fireEvent.click(getByText('ra.action.create'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         input.blur();
         // 2 because there is both the chip for the new selected item and the option (event if hidden)
         expect(queryAllByText(newChoice.name).length).toEqual(2);
@@ -381,7 +381,7 @@ describe('<SelectArrayInput />', () => {
         fireEvent.mouseDown(select);
 
         fireEvent.click(getByText('ra.action.create'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         input.blur();
 
         await waitFor(() => {

packages/ra-ui-materialui/src/input/SelectInput.spec.tsx

@@ -532,7 +532,7 @@ describe('<SelectInput />', () => {
         fireEvent.mouseDown(select);
 
         fireEvent.click(getByText('ra.action.create'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         input.blur();
 
         expect(
@@ -574,7 +574,7 @@ describe('<SelectInput />', () => {
         fireEvent.mouseDown(select);
 
         fireEvent.click(getByText('ra.action.create'));
-        await new Promise(resolve => setImmediate(resolve));
+        await new Promise(resolve => setTimeout(resolve));
         input.blur();
 
         await waitFor(() => {

packages/ra-ui-materialui/src/list/datagrid/DatagridRow.spec.tsx

@@ -181,7 +181,7 @@ describe('<DatagridRow />', () => {
                 </DatagridRow>
             );
             fireEvent.click(getByText('hello'));
-            await new Promise(setImmediate); // waitFor one tick
+            await new Promise(resolve => setTimeout(resolve)); // waitFor one tick
             expect(history.location.pathname).toEqual('/bar/foo');
         });