Merge branch '2.3'

Author: dunglas

.travis.yml

@@ -21,7 +21,7 @@ script:
   - find . -name '*.md' ! -name 'conduct.md' ! -name 'heroku.md' -exec proselint {} \;
   - cd $TRAVIS_BUILD_DIR/../website
   - bin/generate-nav
-  - yarn gatsby build
+  - GATSBY_BRANCH_NAME=$TRAVIS_BRANCH yarn gatsby build
   # Preserve artifacts
   - cd $TRAVIS_BUILD_DIR
   - mv ../website/public public

admin/authentication-support.md

@@ -70,7 +70,7 @@ const fetchHydra = (url, options = {}) => baseFetchHydra(url, {
     ...options,
     headers: new Headers(fetchHeaders),
 });
-const hydraClient = api => hydraClient(api, fetchHydra);
+const dataProvider = api => hydraClient(api, fetchHydra);
 const apiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoint, { headers: new Headers(fetchHeaders) })
     .then(
         ({ api }) => ({ api }),
@@ -98,7 +98,7 @@ export default props => (
         apiDocumentationParser={apiDocumentationParser}
         authProvider={authProvider}
         entrypoint={entrypoint}
-        dataProvider={hydraClient}
+        dataProvider={dataProvider}
     />
 );
 ```

admin/getting-started.md

@@ -91,7 +91,7 @@ const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoin
       addField: true,
       addLabel: true
     };
-    
+
     return { api };
   })
 ;
@@ -126,7 +126,7 @@ const myApiDocumentationParser = entrypoint => parseHydraDocumentation(entrypoin
   .then( ({ api }) => {
 
     const books = api.resources.find(({ name }) => 'books' === name);
-    const description = books.fields.find(f => 'description' === f.name);
+    const description = books.fields.find(({ name }) => 'description' === name);
 
     description.input = props => (
       <RichTextInput {...props} source="description" />
@@ -194,37 +194,37 @@ __Note__: In this example, we choose to send the file via a multi-part form data
 
 ### Using a Custom Validation Function or Inject Custom Props
 
-You can use `fieldProps` and `inputProps` to respectively inject custom properties to fields and inputs generated by API
-Platform Admin. This is particularly useful to add custom validation rules:
+Example to add a minLength validator on the `description` field:
 
 ```javascript
 import React, { Component } from 'react';
-import { AdminBuilder, hydraClient } from 'api-platform-admin';
-import parseHydraDocumentation from 'api-doc-parser/lib/hydra/parseHydraDocumentation';
+import { minLength } from 'react-admin';
+import RichTextInput from 'ra-input-rich-text';
+import { AdminBuilder, hydraClient } from '@api-platform-admin';
+import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
 
 const entrypoint = 'https://demo.api-platform.com';
 
 export default class extends Component {
-  state = {api: null};
+  state = { api: null };
 
   componentDidMount() {
-    parseHydraDocumentation(entrypoint).then( ({ api }) =>  => {
-      const books = api.resources.find(r => 'books' === r.name);
+    parseHydraDocumentation(entrypoint).then(({ api }) => {
+      const books = api.resources.find(({ name }) => 'books' === name);
 
-      books.writableFields.find(f => 'description' === f.name).inputProps = {
-        validate: value => value.length >= 30 ? undefined : 'Minimum length: 30';
-      };
+      const description = books.fields.find(({ name }) => 'description' === name)
+      description.input = props => (
+        <RichTextInput source={description.name} label="Description" validate={minLength(30)} {...props} />
+      )
 
-      this.setState({api: api});
-      
-      return { api };
+      this.setState({ api });
     });
   }
 
   render() {
     if (null === this.state.api) return <div>Loading...</div>;
 
-    return <AdminBuilder api={this.state.api} dataProvider={hydraClient(entrypoint)}/>
+    return <AdminBuilder api={ this.state.api } dataProvider={ hydraClient(this.state.api) }/>
   }
 }
 ```

admin/handling-relations-to-collections.md

@@ -1,14 +1,9 @@
 # Handling Relations to Collections
 
-Currently, API Platform Admin doesn't handle `to-many` relations. The core library [is being patched](https://github.com/api-platform/core/pull/1189)
-to document relations to collections through OWL.
-
-Meanwhile, it is possible to manually configure API Platform to handle relations to collections.
-
-We will create the admin for an API exposing `Person` and `Book` resources linked with a `many-to-many`
+Considering an API exposing `Person` and `Book` resources linked with a `many-to-many`
 relation between them (through the `authors` property).
 
-This API can be created using the following PHP code:
+This API using the following PHP code:
 
 ```php
 <?php
@@ -74,54 +69,59 @@ class Book
 }
 ```
 
-Let's customize the components used for the `authors` property:
+The admin handles this `to-many` relation automatically!
+
+But we can go further:
+
+## Customizing a Property
+
+Let's customize the components used for the `authors` property, to display them by their 'name' instead 'id' (the default behavior).
 
 ```javascript
 import React, { Component } from 'react';
 import { ReferenceArrayField, SingleFieldList, ChipField, ReferenceArrayInput, SelectArrayInput } from 'react-admin';
 import { AdminBuilder, hydraClient } from '@api-platform/admin';
-import parseHydraDocumentation from 'api-doc-parser/lib/hydra/parseHydraDocumentation';
+import parseHydraDocumentation from '@api-platform/api-doc-parser/lib/hydra/parseHydraDocumentation';
 
 const entrypoint = 'https://demo.api-platform.com';
 
 export default class extends Component {
-  state = {api: null, resources: null};
+  state = { api: null }
 
   componentDidMount() {
-    parseHydraDocumentation(entrypoint).then({api, resources} => {
-        const books = r.find(r => 'books' === r.name);
+    parseHydraDocumentation(entrypoint).then(({api}) => {
+        const books = api.resources.find(({ name }) => 'books' === name)
+        const authors = books.fields.find(({ name }) => 'authors' === name)
 
         // Set the field in the list and the show views
-        books.readableFields.find(f => 'authors' === f.name).fieldComponent =
-          <ReferenceArrayField label="Authors" reference="people" source="authors" key="authors">
+        authors.field = props => (
+          <ReferenceArrayField source={authors.name} reference={authors.reference.name} key={authors.name} {...props}>
             <SingleFieldList>
               <ChipField source="name" key="name"/>
             </SingleFieldList>
           </ReferenceArrayField>
-        ;
+        );
 
         // Set the input in the edit and create views
-        books.writableFields.find(f => 'authors' === f.name).inputComponent =
-          <ReferenceArrayInput label="Authors" reference="people" source="authors" key="authors">
+        authors.input = props => (
+          <ReferenceArrayInput source={authors.name} reference={authors.reference.name} label="Authors" key={authors.name} {...props} allowEmpty>
             <SelectArrayInput optionText="name"/>
           </ReferenceArrayInput>
-        ;
+        );
 
-        this.setState({api, resources});
+        this.setState({ api });
       }
     )
   }
 
   render() {
     if (null === this.state.api) return <div>Loading...</div>;
 
-    return <AdminBuilder api={this.state.api} dataProvider={hydraClient({entrypoint: entrypoint, resources: this.state.resources})}/>
+    return <AdminBuilder api={ this.state.api } dataProvider={ hydraClient(this.state.api) }/>
   }
 }
 ```
 
-The admin now properly handles this `to-many` relation!
-
 ## Using an Autocomplete Input for Relations
 
 We'll make one last improvement to our admin: transforming the relation selector we just created to use autocompletion.
@@ -161,11 +161,11 @@ Then edit the configuration of API Platform Admin to pass a `filterToQuery` prop
     // ...
 
     // Set the input in the edit and create views
-    books.writableFields.find(f => 'authors' === f.name).inputComponent =
-      <ReferenceArrayInput label="Authors" reference="people" source="authors" key="authors" filterToQuery={searchText => ({ name: searchText })}>
-        <SelectArrayInput optionText="name"/>
-      </ReferenceArrayInput>
-    ;
+      authors.input = props => (
+        <ReferenceArrayInput source={authors.name} reference={authors.reference.name} label="Authors" key={authors.name} filterToQuery={searchText => ({ name: searchText })} {...props} allowEmpty>
+          <SelectArrayInput optionText="name"/>
+        </ReferenceArrayInput>
+      );
 
     // ...
   }

core/default-order.md

@@ -57,7 +57,7 @@ class Book
 }
 ```
 
-It's also possible to configure the default filter on an association property:
+It's also possible to configure the default order on an association property:
 
 ```php
 <?php