Skip to content

Commit 31607f3

Browse files
authored
Sync admin's docs with the last version (React Admin) (#503)
* Sync admin's docs with the last version (React Admin) * Update authentication-support.md * Fix remaining comments
1 parent b55a488 commit 31607f3

File tree

5 files changed

+24
-25
lines changed

5 files changed

+24
-25
lines changed

admin/authentication-support.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ process is similar for other authentication mechanisms. The `login_uri` is the f
77
The first step is to create a client to handle the authentication process:
88

99
```javascript
10-
// src/authClient.js
11-
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'admin-on-rest';
10+
// src/authProvider.js
11+
import { AUTH_LOGIN, AUTH_LOGOUT, AUTH_ERROR, AUTH_CHECK } from 'react-admin';
1212

1313
// Change this to be your own login check route.
1414
const login_uri = 'https://demo.api-platform.com/login_check';
@@ -61,7 +61,7 @@ Then, configure the `Admin` component to use the authentication client we just c
6161
import React from 'react';
6262
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
6363
import { HydraAdmin, hydraClient, fetchHydra as baseFetchHydra } from '@api-platform/admin';
64-
import authClient from './authClient';
64+
import authProvider from './authProvider';
6565
import { Redirect } from 'react-router-dom';
6666

6767
const entrypoint = 'https://demo.api-platform.com'; // Change this by your own entrypoint
@@ -70,7 +70,7 @@ const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
7070
...options,
7171
headers: new Headers(fetchHeaders),
7272
});
73-
const restClient = api => hydraClient(api, fetchHydra);
73+
const hydraClient = api => hydraClient(api, fetchHydra);
7474
const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
7575
.then(
7676
({ api }) => ({ api }),
@@ -96,12 +96,12 @@ const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint,
9696
export default props => (
9797
<HydraAdmin
9898
apiDocumentationParser={apiDocumentationParser}
99-
authClient={authClient}
99+
authProvider={authProvider}
100100
entrypoint={entrypoint}
101-
restClient={restClient}
101+
dataProvider={hydraClient}
102102
/>
103103
);
104104
```
105105

106-
Refer to [the chapter dedicated to authentication in the Admin On Rest documentation](https://marmelab.com/admin-on-rest/Authentication.html)
106+
Refer to [the chapter dedicated to authentication in the React Admin documentation](https://marmelab.com/react-admin/Authentication.html)
107107
for more information.

admin/getting-started.md

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,12 @@ The API Platform's admin parses the Hydra documentation exposed by the API and t
6767
### Using Custom Components
6868

6969
In the following example, we change components used for the `description` property of the `books` resource to ones accepting HTML (respectively `RichTextField` that renders HTML markup and `RichTextInput`, a WYSWYG editor).
70-
(To use the `RichTextInput`, the `aor-rich-text-input` package is must be installed: `yarn add aor-rich-text-input`).
70+
(To use the `RichTextInput`, the `ra-input-rich-text` package is must be installed: `yarn add ra-input-rich-text`).
7171

7272
```javascript
7373
import React from 'react';
74-
import { RichTextField } from 'admin-on-rest';
75-
import RichTextInput from 'aor-rich-text-input';
74+
import { RichTextField } from 'react-admin';
75+
import RichTextInput from 'ra-input-rich-text';
7676
import { HydraAdmin } from '@api-platform/admin';
7777
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
7878
@@ -102,22 +102,21 @@ export default (props) => <HydraAdmin apiDocumentationParser={myApiDocumentation
102102
The `field` property of the `Field` class allows to set the component used to render a property in list and show screens.
103103
The `input` property allows to set the component to use to render the input used in create and edit screens.
104104

105-
Any [field](https://marmelab.com/admin-on-rest/Fields.html) or [input](https://marmelab.com/admin-on-rest/Inputs.html) provided by the Admin On Rest library can be used.
105+
Any [field](https://marmelab.com/react-admin/Fields.html) or [input](https://marmelab.com/react-admin/Inputs.html) provided by the React Admin library can be used.
106106

107-
To go further, take a look to the "[Including admin-on-rest on another React app](https://marmelab.com/admin-on-rest/CustomApp.html)" documentation page of Admin On Rest to learn how to use directly redux, react-router, and redux-saga along with components provided by this library.
107+
To go further, take a look to the "[Including react-admin on another React app](https://marmelab.com/react-admin/CustomApp.html)" documentation page of React Admin to learn how to use directly redux, react-router, and redux-saga along with components provided by this library.
108108

109109
### Managing Files and Images
110110

111111
In the following example, we will:
112-
* find every [ImageObject](http://schema.org/ImageObject) resources. For each [contentUrl](http://schema.org/contentUrl) fields, we will use [ImageField](https://marmelab.com/admin-on-rest/Fields.html#imagefield) as `field` and [ImageInput](https://marmelab.com/admin-on-rest/Inputs.html#imageinput) as `input`.
113-
* [ImageInput](https://marmelab.com/admin-on-rest/Inputs.html#imageinput) will return a [File](https://developer.mozilla.org/en/docs/Web/API/File) instance. In this example, we will send a multi-part form data to a special action (`https://demo.api-platform.com/images/upload`). The action will return the ID of the uploaded image. We will "replace" the [File](https://developer.mozilla.org/en/docs/Web/API/File) instance by the ID in `normalizeData`.
114-
* As `contentUrl` fields will return a string, we have to convert Hydra data to AOR data. This action will be done by `denormalizeData`.
112+
* find every [ImageObject](http://schema.org/ImageObject) resources. For each [contentUrl](http://schema.org/contentUrl) fields, we will use [ImageField](https://marmelab.com/react-admin/Fields.html#imagefield) as `field` and [ImageInput](https://marmelab.com/react-admin/Inputs.html#imageinput) as `input`.
113+
* [ImageInput](https://marmelab.com/react-admin/Inputs.html#imageinput) will return a [File](https://developer.mozilla.org/en/docs/Web/API/File) instance. In this example, we will send a multi-part form data to a special action (`https://demo.api-platform.com/images/upload`). The action will return the ID of the uploaded image. We will "replace" the [File](https://developer.mozilla.org/en/docs/Web/API/File) instance by the ID in `normalizeData`.
114+
* As `contentUrl` fields will return a string, we have to convert Hydra data to React Admin data. This action will be done by `denormalizeData`.
115115

116116
```javascript
117-
import { FunctionField, ImageField, ImageInput } from 'admin-on-rest/lib/mui';
118117
import React from 'react';
119-
import { RichTextField } from 'admin-on-rest';
120-
import RichTextInput from 'aor-rich-text-input';
118+
import { FunctionField, ImageField, ImageInput, RichTextField } from 'react-admin';
119+
import RichTextInput from 'ra-input-rich-text';
121120
import { HydraAdmin } from '@api-platform/admin';
122121
import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
123122
@@ -225,7 +224,7 @@ export default class extends Component {
225224
render() {
226225
if (null === this.state.api) return <div>Loading...</div>;
227226

228-
return <AdminBuilder api={this.state.api} restClient={hydraClient(entrypoint)}/>
227+
return <AdminBuilder api={this.state.api} dataProvider={hydraClient(entrypoint)}/>
229228
}
230229
}
231230
```

admin/handling-relations-to-collections.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Let's customize the components used for the `authors` property:
7878

7979
```javascript
8080
import React, { Component } from 'react';
81-
import { ReferenceArrayField, SingleFieldList, ChipField, ReferenceArrayInput, SelectArrayInput } from 'admin-on-rest';
81+
import { ReferenceArrayField, SingleFieldList, ChipField, ReferenceArrayInput, SelectArrayInput } from 'react-admin';
8282
import { AdminBuilder, hydraClient } from '@api-platform/admin';
8383
import parseHydraDocumentation from 'api-doc-parser/lib/hydra/parseHydraDocumentation';
8484

@@ -115,7 +115,7 @@ export default class extends Component {
115115
render() {
116116
if (null === this.state.api) return <div>Loading...</div>;
117117

118-
return <AdminBuilder api={this.state.api} restClient={hydraClient({entrypoint: entrypoint, resources: this.state.resources})}/>
118+
return <AdminBuilder api={this.state.api} dataProvider={hydraClient({entrypoint: entrypoint, resources: this.state.resources})}/>
119119
}
120120
}
121121
```

admin/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ using [the API Platform framework](https://api-platform.com).
77
The generated administration is a 100% standalone Single-Page-Application with no coupling to the server part, according
88
to the API-first paradigm.
99

10-
API Platform Admin parses the Hydra documentation then uses the awesome [Admin On Rest](https://marmelab.com/admin-on-rest/)
10+
API Platform Admin parses the Hydra documentation then uses the awesome [React Admin](https://marmelab.com/react-admin/)
1111
library (and [React](https://facebook.github.io/react/)) to expose a nice, responsive, management interface (Create-Retrieve-Update-Delete)
1212
for all available resources.
1313

14-
You can also customize all screens by using Admin On Rest components and even raw JavaScript/React code.
14+
You can also customize all screens by using React Admin components and even raw JavaScript/React code.
1515

1616
## Features
1717

distribution/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ It contains:
1616
* an API skeleton, including with [the server-side component](../core/index.md), [the Symfony 4
1717
microframework](https://symfony.com/doc/current/setup/flex.html) and [the Doctrine ORM](http://docs.doctrine-project.org/projects/doctrine-orm/)
1818
* a dynamic JavaScript admin, leveraging the hypermedia capabilities of API Platform and built on top of [React](https://reactjs.org/)
19-
and [Admin On Rest](https://github.com/marmelab/admin-on-rest)
19+
and [React Admin](https://marmelab.com/react-admin/)
2020
* a Progressive Web App skeleton, generated with [Create React App](https://github.com/facebookincubator/create-react-app)
2121
and containing the tools to scaffold your own React/[Redux](https://redux.js.org/) app in one command
2222
* a [Docker](https://docker.com)-based setup to bootstrap the project in a single command, providing:
@@ -668,7 +668,7 @@ Open `https://localhost:444` in your browser:
668668
![The admin](images/api-platform-2.2-admin.png)
669669

670670
This [Material Design](https://material.io/guidelines/) admin is a [Progressive Web App](https://developers.google.com/web/progressive-web-apps/)
671-
built with [API Platform Admin](../admin/index.md) (Admin On Rest, React and Redux inside). It is powerful and fully customizable,
671+
built with [API Platform Admin](../admin/index.md) (React Admin, React and Redux inside). It is powerful and fully customizable,
672672
refer to its documentation to learn more.
673673
It leverages the Hydra documentation exposed by the API component to build itself. It's 100% dynamic, **no code generation
674674
occurs**.

0 commit comments

Comments
 (0)