# HG changeset patch
# User François FERRY <francois.ferry@logilab.fr>
# Date 1616427945 -3600
#      Mon Mar 22 16:45:45 2021 +0100
# Node ID 81eafb55fb6d98296944a85b0959eebfd8a4491a
# Parent  0568bda95d191a9fa8806deaef94c63b19c51d9b
feat(relation): uniformize relation edition an displaying

diff --git a/packages/demo/src/App.tsx b/packages/demo/src/App.tsx
--- a/packages/demo/src/App.tsx
+++ b/packages/demo/src/App.tsx
@@ -11,7 +11,6 @@
   SearchInput,
   TextField,
   NumberField,
-  ReferenceField,
   Edit,
   SimpleForm,
   TextInput,
@@ -25,14 +24,12 @@
   DataProvider,
   ReferenceArrayField,
   AutocompleteArrayInput,
-  ReferenceArrayInput,
-  FunctionField,
   SingleFieldList,
+  ChipField,
 } from "react-admin";
 import { client } from "@logilab/cwclientlibjs";
 import { createDataProvider } from "ra-cubicweb/dist";
 import { RelationInput } from "ra-cubicweb/dist/RelationInput";
-import Chip from "@material-ui/core/Chip";
 
 import { schema } from "./schema";
 import { formHelpers } from "./formHelpers";
@@ -43,18 +40,18 @@
       <TextField source="id" />
       <TextField source="name" />
       <TextField source="postal_address" />
-      <ReferenceField label="City" link="show" reference="City" source="is_in">
-        <TextField source="name" />
-      </ReferenceField>
+      <ReferenceArrayField label="City" reference="City" source="is_in">
+        <SingleFieldList linkType="show">
+          <ChipField source="name" />
+        </SingleFieldList>
+      </ReferenceArrayField>
       <ReferenceArrayField
         label="Director"
         reference="Person"
         source="director"
       >
-        <SingleFieldList>
-          <FunctionField<{ id: string; name: string }>
-            render={(person) => person && <Chip label={`${person.name}`} />}
-          />
+        <SingleFieldList linkType="show">
+          <ChipField source="name" />
         </SingleFieldList>
       </ReferenceArrayField>
       <NumberField source="longitude" />
@@ -107,15 +104,16 @@
         >
           <AutocompleteInput optionText="name" />
         </RelationInput>
-        <ReferenceArrayInput
+        <RelationInput
           label="Director"
           source="director"
           reference="Person"
           sort={{ field: "name", order: "ASC" }}
           filterToQuery={(text: string) => ({ name: text })}
+          cardinality="*"
         >
           <AutocompleteArrayInput optionText="name" />
-        </ReferenceArrayInput>
+        </RelationInput>
       </SimpleForm>
     </Create>
   );
@@ -158,15 +156,16 @@
         <TextInput {...inputProps("name")} />
         <NumberInput {...inputProps("zip_code")} />
         <TextInput {...inputProps("country")} />
-        <ReferenceArrayInput
+        <RelationInput
           label="Museum"
           reference="Museum"
           source="reverse_is_in"
           sort={{ field: "name", order: "ASC" }}
           filterToQuery={(text: string) => ({ name: text })}
+          cardinality="*"
         >
           <AutocompleteArrayInput optionText="name" />
-        </ReferenceArrayInput>
+        </RelationInput>
       </SimpleForm>
     </Edit>
   );
@@ -197,9 +196,9 @@
         reference="Museum"
         source="reverse_is_in"
       >
-        <Datagrid rowClick="show">
-          <TextField source="name" />
-        </Datagrid>
+        <SingleFieldList linkType="show">
+          <ChipField source="name" />
+        </SingleFieldList>
       </ReferenceArrayField>
     </SimpleShowLayout>
   </Show>
@@ -222,6 +221,16 @@
       <SimpleForm>
         <TextInput {...inputProps("name")} />
         <TextInput {...inputProps("email")} />
+        <RelationInput
+          label="Director"
+          source="reverse_director"
+          reference="Museum"
+          sort={{ field: "name", order: "ASC" }}
+          filterToQuery={(text: string) => ({ name: text })}
+          cardinality="*"
+        >
+          <AutocompleteArrayInput optionText="name" />
+        </RelationInput>
       </SimpleForm>
     </Edit>
   );
@@ -234,6 +243,16 @@
       <SimpleForm>
         <TextInput {...inputProps("name")} />
         <TextInput {...inputProps("email")} />
+        <RelationInput
+          label="Director"
+          source="reverse_director"
+          reference="Museum"
+          sort={{ field: "name", order: "ASC" }}
+          filterToQuery={(text: string) => ({ name: text })}
+          cardinality="*"
+        >
+          <AutocompleteArrayInput optionText="name" />
+        </RelationInput>
       </SimpleForm>
     </Create>
   );
@@ -250,9 +269,9 @@
         reference="Museum"
         source="reverse_director"
       >
-        <Datagrid rowClick="show">
-          <TextField source="name" />
-        </Datagrid>
+        <SingleFieldList linkType="show">
+          <ChipField source="name" />
+        </SingleFieldList>
       </ReferenceArrayField>
     </SimpleShowLayout>
   </Show>