Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for react-admin v5 #572

Merged
merged 18 commits into from
Jul 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .dockerignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
node_modules
4 changes: 4 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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
Expand Down
25 changes: 4 additions & 21 deletions UPGRADE.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 6 additions & 3 deletions api/src/Entity/Greeting.php
Original file line number Diff line number Diff line change
Expand Up @@ -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
{
/**
Expand Down
2 changes: 2 additions & 0 deletions jest.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Comment on lines +12 to +13
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

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

Copy link
Contributor

Choose a reason for hiding this comment

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

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...

},
transform: {
'^.+\\.tsx?$': [
Expand Down
5 changes: 1 addition & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
252 changes: 0 additions & 252 deletions src/AdminGuesser.tsx
Copy link
Contributor Author

Choose a reason for hiding this comment

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

moved to core

This file was deleted.

11 changes: 6 additions & 5 deletions src/AdminGuesser.test.tsx → src/core/AdminGuesser.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }),
Expand Down
Loading