Add support for react-admin v5 (#572)

* [WIP] Add support for react-admin v5

* Fix more TS errors

* Fix build

* Fix linter warnings

* Fix one test

* fix jest config for react-query

* InputGuesser: fix array label and test

* Add folder hierarchy

* Fix tests

* Add sort and filter to the test entity

* Modernize override code

* Fix console error

* Fix override code

* Add stroy testing view customization

* Bump version

* Apply suggestions from code review

Co-authored-by: Gildas Garcia <[email protected]>

* Update .dockerignore

Co-authored-by: Kévin Dunglas <[email protected]>

* Apply suggestion from code review

---------

Co-authored-by: Jean-Baptiste Kaiser <[email protected]>
Co-authored-by: Gildas Garcia <[email protected]>
Co-authored-by: Kévin Dunglas <[email protected]>

Author: 4 people

.dockerignore

@@ -0,0 +1 @@
+node_modules

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.0.0
+
+* Compatibility with react-admin v5
+
 ## 3.4.5
 
 * Fix validation errors shown as "Server communication error" when creating an entity

UPGRADE.md

@@ -1,24 +1,7 @@
-# Upgrade to 3.0
+# Upgrade to 4.0
 
-First of all, read the [UPGRADE guide from react-admin](https://marmelab.com/react-admin/doc/4.0/Upgrade.html).
+API Platform Admin 4.0 has the same API as API Platform admin 3.4, but now requires react-admin v5.
 
-Since API Platform Admin is built on top of react-admin, almost everything in the react-admin upgrade guide applies to API Platform Admin as well.
+If your application only uses components from the '@api-platform/admin' package, it should work out of the box with API Platform Admin 4.0.
 
-This UPGRADE guide will only cover the specific changes for API Platform Admin.
-
-## Authentication Support
-
-Since the way to define custom routes has completely changed in react-admin, the way to add authentication support in API Platform Admin has also been modified.
-
-In short, you need to use the `<CustomRoutes>` component inside the `<HydraAdmin>` or `<AdminGuesser>` component, with a redirect condition on its child.
-The condition is taken from a state variable, and the state updater function is given to the data provider and will be used when there is an unauthorized error.
-
-To see the full updated example, please [go to the related documentation page](https://api-platform.com/docs/main/admin/authentication-support/).
-
-## Mercure Support
-
-Since react-admin does not use Redux anymore, it's also the case for Mercure in API Platform Admin.
-
-Instead it uses react-query cache to update the received changes in real time.
-
-You will not see the Redux data action when a resource is updated by Mercure anymore.
+If you have done some customization based on the 'react-admin' package, you will probably have to make some changes. Read the [UPGRADE guide from react-admin](https://marmelab.com/react-admin/doc/5.0/Upgrade.html) for further details.

api/src/Entity/Greeting.php

@@ -5,12 +5,15 @@
 use ApiPlatform\Metadata\ApiResource;
 use Doctrine\ORM\Mapping as ORM;
 use Symfony\Component\Validator\Constraints as Assert;
+use ApiPlatform\Metadata\ApiFilter;
+use ApiPlatform\Doctrine\Orm\Filter\SearchFilter;
+use ApiPlatform\Doctrine\Orm\Filter\OrderFilter;
+
 
-/**
- * This is a dummy entity. Remove it!
- */
 #[ApiResource(mercure: true)]
 #[ORM\Entity]
+#[ApiFilter(SearchFilter::class, properties: ['name' => 'partial'])]
+#[ApiFilter(OrderFilter::class, properties: ['name'], arguments: ['orderParameterName' => 'order'])]
 class Greeting
 {
     /**

jest.config.ts

@@ -9,6 +9,8 @@ const config: JestConfigWithTsJest = {
   moduleNameMapper: {
     '^(\\.{1,2}/.*/llhttp\\.wasm\\.js)$': '$1',
     '^(\\.{1,2}/.*)\\.js$': '$1',
+    '^@tanstack/react-query$':
+      '<rootDir>/node_modules/@tanstack/react-query/build/modern/index.cjs',
   },
   transform: {
     '^.+\\.tsx?$': [

package.json

@@ -19,12 +19,9 @@
   "sideEffects": false,
   "dependencies": {
     "@api-platform/api-doc-parser": "^0.16.2",
-    "history": "^5.0.0",
     "jsonld": "^8.1.0",
     "lodash.isplainobject": "^4.0.6",
-    "prop-types": "^15.6.2",
-    "react-admin": "^4.4.0",
-    "react-error-boundary": "^4.0.13"
+    "react-admin": "^5.0.3"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.23.3",

src/AdminGuesser.tsx

@@ -2,15 +2,16 @@ import React from 'react';
 import { AdminUI, AuthContext } from 'react-admin';
 import type { AdminProps, AuthProvider } from 'react-admin';
 import ReactTestRenderer from 'react-test-renderer/shallow';
-import AdminGuesser, { AdminResourcesGuesser } from './AdminGuesser.js';
+import AdminGuesser from './AdminGuesser.js';
+import { AdminResourcesGuesser } from './AdminResourcesGuesser.js';
 import ResourceGuesser from './ResourceGuesser.js';
-import schemaAnalyzer from './hydra/schemaAnalyzer.js';
-import resources from './__fixtures__/resources.js';
-import { API_DATA } from './__fixtures__/parsedData.js';
+import schemaAnalyzer from '../hydra/schemaAnalyzer.js';
+import resources from '../__fixtures__/resources.js';
+import { API_DATA } from '../__fixtures__/parsedData.js';
 import type {
   ApiPlatformAdminDataProvider,
   ApiPlatformAdminRecord,
-} from './types.js';
+} from '../types.js';
 
 const dataProvider: ApiPlatformAdminDataProvider = {
   getList: () => Promise.resolve({ data: [], total: 0 }),