[pull] master from marmelab:master

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

@@ -1,52 +1,44 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen, waitFor } from '@testing-library/react';
-import { CoreAdminContext } from 'ra-core';
+import { render, screen } from '@testing-library/react';
 
-import { ShowGuesser } from './ShowGuesser';
-import { ThemeProvider } from '../theme/ThemeProvider';
+import { ShowGuesser } from './ShowGuesser.stories';
 
 describe('<ShowGuesser />', () => {
     it('should log the guessed Show view based on the fetched record', async () => {
         const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        const dataProvider = {
-            getOne: () =>
-                Promise.resolve({
-                    data: {
-                        id: 123,
-                        author: 'john doe',
-                        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],
-                    },
-                }),
-        };
-        render(
-            <ThemeProvider>
-                <CoreAdminContext dataProvider={dataProvider as any}>
-                    <ShowGuesser resource="comments" id={123} enableLog />
-                </CoreAdminContext>
-            </ThemeProvider>
-        );
-        await waitFor(() => {
-            screen.getByText('john doe');
-        });
+        render(<ShowGuesser />);
+        await screen.findByText('john doe');
         expect(logSpy).toHaveBeenCalledWith(`Guessed Show:
 
-import { DateField, NumberField, ReferenceArrayField, ReferenceField, Show, SimpleShowLayout, TextField } from 'react-admin';
+import { ArrayField, BooleanField, DataTable, DateField, EmailField, NumberField, ReferenceArrayField, ReferenceField, RichTextField, Show, SimpleShowLayout, TextField, UrlField } from 'react-admin';
 
-export const CommentShow = () => (
+export const BookShow = () => (
     <Show>
         <SimpleShowLayout>
             <TextField source="id" />
-            <TextField source="author" />
+            <ArrayField source="authors">
+                <DataTable>
+                    <DataTable.Col source="id">
+                        <TextField source="id" />
+                    </DataTable.Col>
+                    <DataTable.Col source="name">
+                        <TextField source="name" />
+                    </DataTable.Col>
+                    <DataTable.Col source="dob">
+                        <DateField source="dob" />
+                    </DataTable.Col>
+                </DataTable>
+            </ArrayField>
             <ReferenceField source="post_id" reference="posts" />
             <NumberField source="score" />
             <TextField source="body" />
+            <RichTextField source="description" />
             <DateField source="created_at" />
             <ReferenceArrayField source="tags_ids" reference="tags" />
+            <UrlField source="url" />
+            <EmailField source="email" />
+            <BooleanField source="isAlreadyPublished" />
         </SimpleShowLayout>
     </Show>
 );`);

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Admin } from 'react-admin';
+import { Resource, TestMemoryRouter } from 'ra-core';
+import fakeRestProvider from 'ra-data-fakerest';
+
+import { ShowGuesser as RAShowGuesser } from './ShowGuesser';
+
+export default { title: 'ra-ui-materialui/detail/ShowGuesser' };
+
+const data = {
+    books: [
+        {
+            id: 123,
+            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.",
+            description: `<p><strong>War and Peace</strong> is a novel by the Russian author <a href="https://en.wikipedia.org/wiki/Leo_Tolstoy">Leo Tolstoy</a>,
+published serially, then in its entirety in 1869.</p>
+<p>It is regarded as one of Tolstoy's finest literary achievements and remains a classic of world literature.</p>`,
+            created_at: new Date('2012-08-02'),
+            tags_ids: [1, 2],
+            url: 'https://www.myshop.com/tags/top-seller',
+            email: 'doe@production.com',
+            isAlreadyPublished: true,
+        },
+    ],
+    tags: [
+        { id: 1, name: 'top seller' },
+        { id: 2, name: 'new' },
+    ],
+    posts: [
+        { id: 6, title: 'War and Peace', body: 'A great novel by Leo Tolstoy' },
+    ],
+};
+
+const ShowGuesserWithProdLogs = () => <RAShowGuesser enableLog />;
+
+export const ShowGuesser = () => (
+    <TestMemoryRouter initialEntries={['/books/123/show']}>
+        <Admin dataProvider={fakeRestProvider(data)}>
+            <Resource name="books" show={ShowGuesserWithProdLogs} />
+        </Admin>
+    </TestMemoryRouter>
+);

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

@@ -70,6 +70,7 @@ const ShowViewGuesser = (
                         )
                     )
                 )
+                .filter(component => !component.match(/[A-Za-z]+\.[A-Za-z]+/i))
                 .sort();
 
             console.log(

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactNode } from 'react';
-import { Datagrid } from '../list/datagrid/Datagrid';
+import type { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
 import {
     ArrayField,
     BooleanField,
@@ -17,8 +17,7 @@ import {
     ChipField,
 } from '../field';
 import { SimpleShowLayout, SimpleShowLayoutProps } from './SimpleShowLayout';
-import { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
-import { SingleFieldList } from '../list';
+import { DataTable, SingleFieldList } from '../list';
 
 export const showFieldTypes: InferredTypeMap = {
     show: {
@@ -30,18 +29,31 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
         </SimpleShowLayout>`,
     },
     array: {
-        component: ({
-            children,
-            ...props
-        }: { children: ReactNode } & InputProps) => (
+        component: ({ children, ...props }: { children } & InputProps) => (
             <ArrayField {...props}>
-                <Datagrid>{children}</Datagrid>
+                <DataTable>
+                    {children && children.length > 0
+                        ? children.map((child, index) => (
+                              <DataTable.Col key={index} {...child.props}>
+                                  {child}
+                              </DataTable.Col>
+                          ))
+                        : children}
+                </DataTable>
             </ArrayField>
         ),
         representation: (props: InputProps, children: InferredElement[]) =>
-            `<ArrayField source="${props.source}"><Datagrid>${children
-                .map(child => child.getRepresentation())
-                .join('\n')}</Datagrid></ArrayField>`,
+            `<ArrayField source="${props.source}">
+                <DataTable>
+                    ${children
+                        .map(
+                            child => `<DataTable.Col source="${child.getProps().source}">
+                        ${child.getRepresentation()}
+                    </DataTable.Col>`
+                        )
+                        .join('\n                    ')}
+                </DataTable>
+            </ArrayField>`,
     },
     boolean: {
         component: BooleanField,

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

@@ -1,57 +1,81 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, screen, waitFor } from '@testing-library/react';
-import { CoreAdminContext, testDataProvider } from 'ra-core';
-
-import { ListGuesser } from './ListGuesser';
-import { ThemeProvider } from '../theme/ThemeProvider';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { ManyResources } from './ListGuesser.stories';
 
 describe('<ListGuesser />', () => {
-    it('should log the guessed List view based on the fetched records', async () => {
+    it('should log the guessed List views based on the fetched records', async () => {
         const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
-        const dataProvider = testDataProvider({
-            getList: () =>
-                Promise.resolve({
-                    data: [
-                        {
-                            id: 123,
-                            author: 'john doe',
-                            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],
-                        },
-                    ],
-                    total: 1,
-                }),
-            getMany: () => Promise.resolve({ data: [], total: 0 }),
-        });
-        render(
-            <ThemeProvider>
-                <CoreAdminContext dataProvider={dataProvider as any}>
-                    <ListGuesser resource="comments" enableLog />
-                </CoreAdminContext>
-            </ThemeProvider>
-        );
-        await waitFor(() => {
-            screen.getByText('john doe');
-        });
+        render(<ManyResources />);
+        await screen.findAllByText('top seller', undefined, { timeout: 2000 });
+        expect(logSpy).toHaveBeenCalledWith(`Guessed List:
+
+import { DataTable, DateField, EmailField, List, ReferenceArrayField, ReferenceField } from 'react-admin';
+
+export const ProductList = () => (
+    <List>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="name" />
+            <DataTable.NumberCol source="price" />
+            <DataTable.Col source="category_id">
+                <ReferenceField source="category_id" reference="categories" />
+            </DataTable.Col>
+            <DataTable.Col source="tags_ids">
+                <ReferenceArrayField source="tags_ids" reference="tags" />
+            </DataTable.Col>
+            <DataTable.Col source="last_update">
+                <DateField source="last_update" />
+            </DataTable.Col>
+            <DataTable.Col source="email">
+                <EmailField source="email" />
+            </DataTable.Col>
+        </DataTable>
+    </List>
+);`);
+        logSpy.mockClear();
+
+        fireEvent.click(screen.getByText('Categories'));
+        await screen.findByText('Jeans');
+        expect(logSpy).toHaveBeenCalledWith(`Guessed List:
+
+import { ArrayField, BooleanField, ChipField, DataTable, List, SingleFieldList } from 'react-admin';
+
+export const CategoryList = () => (
+    <List>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="name" />
+            <DataTable.Col source="alternativeName">
+                <ArrayField source="alternativeName">
+                    <SingleFieldList>
+                        <ChipField source="name" />
+                    </SingleFieldList>
+                </ArrayField>
+            </DataTable.Col>
+            <DataTable.Col source="isVeganProduction">
+                <BooleanField source="isVeganProduction" />
+            </DataTable.Col>
+        </DataTable>
+    </List>
+);`);
+
+        logSpy.mockClear();
+        fireEvent.click(screen.getByText('Tags'));
+        await screen.findByText('top seller');
         expect(logSpy).toHaveBeenCalledWith(`Guessed List:
 
-import { Datagrid, DateField, List, NumberField, ReferenceArrayField, ReferenceField, TextField } from 'react-admin';
+import { DataTable, List, UrlField } from 'react-admin';
 
-export const CommentList = () => (
+export const TagList = () => (
     <List>
-        <Datagrid>
-            <TextField source="id" />
-            <TextField source="author" />
-            <ReferenceField source="post_id" reference="posts" />
-            <NumberField source="score" />
-            <TextField source="body" />
-            <DateField source="created_at" />
-            <ReferenceArrayField source="tags_ids" reference="tags" />
-        </Datagrid>
+        <DataTable>
+            <DataTable.Col source="id" />
+            <DataTable.Col source="name" />
+            <DataTable.Col source="url">
+                <UrlField source="url" />
+            </DataTable.Col>
+        </DataTable>
     </List>
 );`);
     });