Merge pull request marmelab#10682 from marmelab/fix-guessers-reference-array

Fix `<ShowGuesser>` print incorrect code for reference arrays

Author: slax57

packages/ra-ui-materialui/src/detail/EditGuesser.spec.tsx

@@ -19,6 +19,7 @@ describe('<EditGuesser />', () => {
                         score: 3,
                         body: "Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
                         created_at: new Date('2012-08-02'),
+                        tags_ids: [1, 2],
                     },
                 }),
             getMany: () => Promise.resolve({ data: [] }),
@@ -35,7 +36,7 @@ describe('<EditGuesser />', () => {
         });
         expect(logSpy).toHaveBeenCalledWith(`Guessed Edit:
 
-import { DateInput, Edit, NumberInput, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
+import { DateInput, Edit, NumberInput, ReferenceArrayInput, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
 
 export const CommentEdit = () => (
     <Edit>
@@ -46,6 +47,7 @@ export const CommentEdit = () => (
             <NumberInput source="score" />
             <TextInput source="body" />
             <DateInput source="created_at" />
+            <ReferenceArrayInput source="tags_ids" reference="tags" />
         </SimpleForm>
     </Edit>
 );`);

packages/ra-ui-materialui/src/detail/ShowGuesser.spec.tsx

@@ -19,6 +19,7 @@ describe('<ShowGuesser />', () => {
                         score: 3,
                         body: "Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
                         created_at: new Date('2012-08-02'),
+                        tags_ids: [1, 2],
                     },
                 }),
         };
@@ -34,7 +35,7 @@ describe('<ShowGuesser />', () => {
         });
         expect(logSpy).toHaveBeenCalledWith(`Guessed Show:
 
-import { DateField, NumberField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';
+import { DateField, NumberField, ReferenceArrayField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';
 
 export const CommentShow = () => (
     <Show>
@@ -45,6 +46,7 @@ export const CommentShow = () => (
             <NumberField source="score" />
             <TextField source="body" />
             <DateField source="created_at" />
+            <ReferenceArrayField source="tags_ids" reference="tags" />
         </SimpleShowLayout>
     </Show>
 );`);

packages/ra-ui-materialui/src/detail/showFieldTypes.tsx

@@ -14,9 +14,11 @@ import {
     RichTextField,
     TextField,
     UrlField,
+    ChipField,
 } from '../field';
 import { SimpleShowLayout, SimpleShowLayoutProps } from './SimpleShowLayout';
 import { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
+import { SingleFieldList } from '../list';
 
 export const showFieldTypes: InferredTypeMap = {
     show: {
@@ -81,14 +83,16 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
     referenceArray: {
         component: ReferenceArrayField,
         representation: (props: ReferenceArrayFieldProps) =>
-            `<ReferenceArrayField source="${props.source}" reference="${props.reference}"><TextField source="id" /></ReferenceArrayField>`,
+            `<ReferenceArrayField source="${props.source}" reference="${props.reference}" />`,
     },
     referenceArrayChild: {
-        component: (
-            props: { children: ReactNode } & Omit<InputProps, 'source'> &
-                Partial<Pick<InputProps, 'source'>>
-        ) => <TextField source="id" {...props} />,
-        representation: () => `<TextField source="id" />`,
+        component: () => (
+            <SingleFieldList>
+                <ChipField source="id" />
+            </SingleFieldList>
+        ),
+        representation: () =>
+            `<SingleFieldList><ChipField source="id" /></SingleFieldList>`,
     },
     richText: {
         component: RichTextField,

packages/ra-ui-materialui/src/list/ListGuesser.spec.tsx

@@ -20,6 +20,7 @@ describe('<ListGuesser />', () => {
                             score: 3,
                             body: "Queen, tossing her head through the wood. 'If it had lost something; and she felt sure it.",
                             created_at: new Date('2012-08-02'),
+                            tags_ids: [1, 2],
                         },
                     ],
                     total: 1,
@@ -38,7 +39,7 @@ describe('<ListGuesser />', () => {
         });
         expect(logSpy).toHaveBeenCalledWith(`Guessed List:
 
-import { Datagrid, DateField, List, NumberField, ReferenceField, TextField } from 'react-admin';
+import { Datagrid, DateField, List, NumberField, ReferenceArrayField, ReferenceField, TextField } from 'react-admin';
 
 export const CommentList = () => (
     <List>
@@ -49,6 +50,7 @@ export const CommentList = () => (
             <NumberField source="score" />
             <TextField source="body" />
             <DateField source="created_at" />
+            <ReferenceArrayField source="tags_ids" reference="tags" />
         </Datagrid>
     </List>
 );`);