Integrate DataTable in Guessers

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

@@ -8,20 +8,26 @@ import { ThemeProvider } from '../theme/ThemeProvider';
 
 describe('<ShowGuesser />', () => {
     it('should log the guessed Show view based on the fetched record', async () => {
-        const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
+        const logSpy = jest
+            .spyOn(console, 'log')
+            .mockImplementation(console.warn);
         const dataProvider = {
             getOne: () =>
                 Promise.resolve({
                     data: {
                         id: 123,
-                        author: 'john doe',
+                        authors: [
+                            { id: 1, name: 'john doe', dob: '1990-01-01' },
+                            { id: 2, name: 'jane doe', dob: '1992-01-01' },
+                        ],
                         post_id: 6,
                         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: [] }),
         };
         render(
             <ThemeProvider>
@@ -35,13 +41,15 @@ describe('<ShowGuesser />', () => {
         });
         expect(logSpy).toHaveBeenCalledWith(`Guessed Show:
 
-import { DateField, NumberField, ReferenceArrayField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';
+import { ArrayField, Datagrid, DateField, NumberField, ReferenceArrayField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';
 
 export const CommentShow = () => (
     <Show>
         <SimpleShowLayout>
             <TextField source="id" />
-            <TextField source="author" />
+            <ArrayField source="authors"><Datagrid><TextField source="id" />
+<TextField source="name" />
+<DateField source="dob" /></Datagrid></ArrayField>
             <ReferenceField source="post_id" reference="posts" />
             <NumberField source="score" />
             <TextField source="body" />

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

@@ -10,6 +10,7 @@ describe('<ListGuesser />', () => {
     it('should log the guessed List view based on the fetched records', async () => {
         const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
         const dataProvider = testDataProvider({
+            // @ts-ignore
             getList: () =>
                 Promise.resolve({
                     data: [

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

@@ -18,11 +18,11 @@ import { listFieldTypes } from './listFieldTypes';
 import { capitalize, singularize } from 'inflection';
 
 /**
- * List component rendering a <Datagrid> based on the result of the
+ * List component rendering a <DataTable> based on the result of the
  * dataProvider.getList() call.
  *
  * The result (choice and type of columns) isn't configurable, but the
- * <ListGuesser> outputs the <Datagrid> it has guessed to the console so that
+ * <ListGuesser> outputs the <DataTable> it has guessed to the console so that
  * developers can start from there.
  *
  * To be used as the list prop of a <Resource>.

packages/ra-ui-materialui/src/list/listFieldTypes.tsx

@@ -1,103 +1,118 @@
 import * as React from 'react';
-import { Datagrid } from './datagrid';
+import { DataTable } from './datatable';
 import { SingleFieldList } from './SingleFieldList';
 import {
     ArrayField,
     BooleanField,
     ChipField,
     DateField,
     EmailField,
-    NumberField,
     ReferenceField,
     ReferenceArrayField,
-    TextField,
     UrlField,
     ArrayFieldProps,
 } from '../field';
 
 export const listFieldTypes = {
     table: {
         component: props => {
-            return <Datagrid {...props} />;
+            return <DataTable {...props} />;
         },
-        representation: (_props, children) => `        <Datagrid>
+        representation: (_props, children) => `        <DataTable>
 ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
-        </Datagrid>`,
+        </DataTable>`,
     },
     array: {
         component: ({ children, ...props }: ArrayFieldProps) => {
             const childrenArray = React.Children.toArray(children);
             return (
-                <ArrayField {...props}>
-                    <SingleFieldList>
-                        <ChipField
-                            source={
-                                childrenArray.length > 0 &&
-                                React.isValidElement(childrenArray[0]) &&
-                                childrenArray[0].props.source
-                            }
-                        />
-                    </SingleFieldList>
-                </ArrayField>
+                <DataTable.Col {...props}>
+                    <ArrayField {...props}>
+                        <SingleFieldList>
+                            <ChipField
+                                source={
+                                    childrenArray.length > 0 &&
+                                    React.isValidElement(childrenArray[0]) &&
+                                    childrenArray[0].props.source
+                                }
+                            />
+                        </SingleFieldList>
+                    </ArrayField>
+                </DataTable.Col>
             );
         },
         representation: (props, children) =>
-            `<ArrayField source="${
+            `<DataTable.Col source="${props.source}"><ArrayField source="${
                 props.source
             }"><SingleFieldList><ChipField source="${
                 children.length > 0 && children[0].getProps().source
-            }" /></SingleFieldList></ArrayField>`,
+            }" /></SingleFieldList></ArrayField></DataTable.Col>`,
     },
     boolean: {
-        component: BooleanField,
-        representation: props => `<BooleanField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={BooleanField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={BooleanField} />`,
     },
     date: {
-        component: DateField,
-        representation: props => `<DateField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={DateField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={DateField} />`,
     },
     email: {
-        component: EmailField,
-        representation: props => `<EmailField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={EmailField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={EmailField} />`,
     },
     id: {
-        component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} />,
+        representation: props => `<DataTable.Col source="${props.source}" />`,
     },
     number: {
-        component: NumberField,
-        representation: props => `<NumberField source="${props.source}" />`,
+        component: DataTable.NumberCol,
+        representation: props =>
+            `<DataTable.NumberCol source="${props.source}" />`,
     },
     reference: {
-        component: ReferenceField,
+        component: props => (
+            <DataTable.Col {...props}>
+                <ReferenceField {...props} />
+            </DataTable.Col>
+        ),
         representation: props =>
-            `<ReferenceField source="${props.source}" reference="${props.reference}" />`,
+            `<DataTable.Col source="${props.source}"><ReferenceField source="${props.source}" reference="${props.reference}" /></DataTable.Col>`,
     },
     referenceChild: {
-        component: () => <TextField source="id" />,
-        representation: () => `<TextField source="id" />`,
+        component: () => <DataTable.Col source="id" />,
+        representation: () => `<DataTable.Col source="id" />`,
     },
     referenceArray: {
-        component: ReferenceArrayField,
+        component: props => (
+            <DataTable.Col {...props}>
+                <ReferenceArrayField {...props} />
+            </DataTable.Col>
+        ),
         representation: props =>
-            `<ReferenceArrayField source="${props.source}" reference="${props.reference}" />`,
+            `<DataTable.Col source="${props.source}"><ReferenceArrayField source="${props.source}" reference="${props.reference}" /></DataTable.Col>`,
     },
     referenceArrayChild: {
         component: () => (
-            <SingleFieldList>
-                <ChipField source="id" />
-            </SingleFieldList>
+            <DataTable.Col>
+                <SingleFieldList>
+                    <ChipField source="id" />
+                </SingleFieldList>
+            </DataTable.Col>
         ),
         representation: () =>
-            `<SingleFieldList><ChipField source="id" /></SingleFieldList>`,
+            `<DataTable.Col><SingleFieldList><ChipField source="id" /></SingleFieldList></DataTable.Col>`,
     },
     richText: undefined, // never display a rich text field in a datagrid
     string: {
-        component: TextField,
-        representation: props => `<TextField source="${props.source}" />`,
+        component: DataTable.Col,
+        representation: props => `<DataTable.Col source="${props.source}" />`,
     },
     url: {
-        component: UrlField,
-        representation: props => `<UrlField source="${props.source}" />`,
+        component: props => <DataTable.Col {...props} field={UrlField} />,
+        representation: props =>
+            `<DataTable.Col source="${props.source}" field={UrlField} />`,
     },
 };