Add support for react-admin v5 by fzaninotto · Pull Request #572 · api-platform/admin

fzaninotto · 2024-07-02T16:06:55Z

Upgrade dependencies
Make it compile
Make the tests pass
use the latest react-admin features

Closes #569

fzaninotto · 2024-07-02T16:08:46Z

src/AdminGuesser.tsx

-};
-/* eslint-enable tree-shaking/no-side-effects-in-initialization */
-
-const AdminGuesserWithError = ({


We no longer need this wrapper as react-admin v5 has a global error boundary

fzaninotto · 2024-07-02T16:09:11Z

src/AdminResourcesGuesser.tsx

component extracted to its own file for clarity

fzaninotto · 2024-07-02T16:10:13Z

src/AdminGuesser.tsx

  );
 };

-/* eslint-disable tree-shaking/no-side-effects-in-initialization */


react-admin v5 no longer has propTypes, React 18.3 warns against them, so I removed them

fzaninotto · 2024-07-03T12:02:54Z

src/AdminGuesser.tsx

- * If child components are passed (usually `<ResourceGuesser>` or `<Resource>` components, but it can be any other React component), they are rendered in the given order.
- * If no children are passed, a `<ResourceGuesser>` component is created for each resource type exposed by the API, in the order they are specified in the API documentation.
- */
-export const AdminResourcesGuesser = ({


extracted to its own file for clarity

fzaninotto · 2024-07-03T12:07:16Z

src/Introspecter.tsx

-  SchemaAnalyzer,
-} from './types.js';
-
-const ResourcesIntrospecter = ({


Moved to its own file for clarity

fzaninotto · 2024-07-03T13:30:21Z

I'm blocked.

For a reason I don't understand, the jest tests fail at reading the QueryClient from the QueryClientProvider.

I've verified that:

there is only one version of @tanstack/react-query and the related core library in the project
we no longer have any dependency on react-query in the code
there is only one version of react and react-dom
the tests still fail if I force the resolution of @tanstack/react-query to the very same version that is in react-admin (5.8.4)
the tests still fail if I extract the new QueryClient() out of the test function
the problem still occurs with a more recent yarn version (4.0.2)

If someone wants to give it a try, be my guest.

That being said, the storybook runs the test admin with greetings, so we're probably close.

src/hydra/dataProvider.ts

slax57 · 2024-07-08T14:48:55Z

src/InputGuesser.test.tsx

+    const embeddedsField = await screen.findByLabelText(
+      'resources.users.fields.embeddeds',


This is due to a change in RA v5: ArrayInputs with scalar value no longer have a label of the form resources.users.fields.embeddeds.0. The recommendation is now to provide your own label (which I did).

slax57 · 2024-07-08T14:52:03Z

jest.config.ts

+    '^@tanstack/react-query$':
+      '<rootDir>/node_modules/@tanstack/react-query/build/modern/index.cjs',


For some reason, Jest resolved imports to @tanstack/react-query to the ESM code when imported from the test file, and to the CJS code when imported from ra-core. This caused the issue about QueryClient because the references to the context object were not equal.

This line forces the resolution to the CJS code all the time, which solves the issue.

Isn't it a problem react-admin users may be facing, too?

Indeed it could be, if they are using Jest with NODE_OPTIONS=--experimental-vm-modules. But I'm not sure it's react-admin's responsibility to document this, as this rather looks like a Jest bug to me...

fzaninotto · 2024-07-09T16:39:53Z

src/AdminGuesser.tsx

moved to core

src/create/CreateGuesser.tsx

src/edit/EditGuesser.tsx

src/field/FieldGuesser.tsx

src/list/FilterGuesser.tsx

src/list/ListGuesser.tsx

src/show/ShowGuesser.tsx

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>

.dockerignore

dunglas · 2024-07-10T11:31:39Z

package.json

 {
  "name": "@api-platform/admin",
-  "version": "3.4.8",
+  "version": "4.0.0",


To revert, this will be handled by yarn version during the release process: https://github.com/api-platform/admin/blob/main/CONTRIBUTING.md#tag-a-new-version-contributors-only

Co-authored-by: Kévin Dunglas <kevin@dunglas.fr>

fzaninotto · 2024-07-11T18:02:50Z

Great! Can someone with NPM credentials trigger the publication of the package?

[WIP] Add support for react-admin v5

3358223

fzaninotto commented Jul 2, 2024

View reviewed changes

src/AdminResourcesGuesser.tsx

Copy link

Contributor Author

fzaninotto Jul 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

component extracted to its own file for clarity

fzaninotto commented Jul 2, 2024

View reviewed changes

fzaninotto added 2 commits July 2, 2024 18:21

Fix more TS errors

3704e6e

Fix build

9369825

fzaninotto commented Jul 3, 2024

View reviewed changes

fzaninotto added 2 commits July 3, 2024 14:08

Fix linter warnings

526e46c

Fix one test

1dfad83

slax57 reviewed Jul 5, 2024

View reviewed changes

src/hydra/dataProvider.ts Show resolved Hide resolved

slax57 added 2 commits July 8, 2024 15:43

fix jest config for react-query

061b5c9

InputGuesser: fix array label and test

e12cd7f

slax57 reviewed Jul 8, 2024

View reviewed changes

fzaninotto added 2 commits July 9, 2024 17:54

Add folder hierarchy

c99a968

Fix tests

bcc26c8

fzaninotto commented Jul 9, 2024

View reviewed changes

src/AdminGuesser.tsx

Copy link

Contributor Author

fzaninotto Jul 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

moved to core

fzaninotto added 5 commits July 10, 2024 10:43

Add sort and filter to the test entity

746843a

Modernize override code

b6cc2a8

Fix console error

c057be9

Fix override code

d1b4893

Add stroy testing view customization

213badd

fzaninotto changed the title ~~[WIP] Add support for react-admin v5~~ Add support for react-admin v5 Jul 10, 2024

fzaninotto added the RFR label Jul 10, 2024

Bump version

b15efb6

djhi requested changes Jul 10, 2024

View reviewed changes

Apply suggestions from code review

14ecb27

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>

dunglas reviewed Jul 10, 2024

View reviewed changes

Update .dockerignore

3f35eb2

Co-authored-by: Kévin Dunglas <kevin@dunglas.fr>

Apply suggestion from code review

f5e1062

fzaninotto mentioned this pull request Jul 10, 2024

chore: upgrade to react-admin v5 api-platform/demo#421

Merged

slax57 approved these changes Jul 11, 2024

View reviewed changes

slax57 merged commit 2027186 into main Jul 11, 2024

fzaninotto deleted the react-admin-v5 branch July 12, 2024 08:08

		const embeddedsField = await screen.findByLabelText(
		'resources.users.fields.embeddeds',

		'^@tanstack/react-query$':
		'<rootDir>/node_modules/@tanstack/react-query/build/modern/index.cjs',

Uh oh!

Conversation

fzaninotto commented Jul 2, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fzaninotto commented Jul 3, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fzaninotto commented Jul 11, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fzaninotto commented Jul 2, 2024 •

edited

Loading

fzaninotto commented Jul 3, 2024 •

edited

Loading