Use TextArrayInput in EditGuesser for scalar array

Author: slax57

packages/ra-core/src/inference/inferElementFromValues.tsx

@@ -158,6 +158,17 @@ const inferElementFromValues = (
                 )
             );
         }
+        if (
+            typeof values[0][0] === 'string' &&
+            hasType('scalar_array', types)
+        ) {
+            return (
+                types.scalar_array &&
+                new InferredElement(types.scalar_array, {
+                    source: name,
+                })
+            );
+        }
         // FIXME introspect further
         return new InferredElement(types.string, { source: name });
     }

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

@@ -1,53 +1,35 @@
 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 { EditGuesser } from './EditGuesser';
-import { ThemeProvider } from '../theme/ThemeProvider';
+import { EditGuesser } from './EditGuesser.stories';
 
 describe('<EditGuesser />', () => {
     it('should log the guessed Edit 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],
-                    },
-                }),
-            getMany: () => Promise.resolve({ data: [] }),
-        };
-        render(
-            <ThemeProvider>
-                <CoreAdminContext dataProvider={dataProvider as any}>
-                    <EditGuesser resource="comments" id={123} enableLog />
-                </CoreAdminContext>
-            </ThemeProvider>
-        );
-        await waitFor(() => {
-            screen.getByDisplayValue('john doe');
-        });
+        render(<EditGuesser />);
+        await screen.findByDisplayValue('john doe');
         expect(logSpy).toHaveBeenCalledWith(`Guessed Edit:
 
-import { DateInput, Edit, NumberInput, ReferenceArrayInput, ReferenceInput, SimpleForm, TextInput } from 'react-admin';
+import { ArrayInput, BooleanInput, DateInput, Edit, NumberInput, ReferenceArrayInput, ReferenceInput, SimpleForm, SimpleFormIterator, TextArrayInput, TextInput } from 'react-admin';
 
-export const CommentEdit = () => (
+export const BookEdit = () => (
     <Edit>
         <SimpleForm>
             <TextInput source="id" />
-            <TextInput source="author" />
+            <ArrayInput source="authors"><SimpleFormIterator><TextInput source="id" />
+<TextInput source="name" />
+<DateInput source="dob" /></SimpleFormIterator></ArrayInput>
             <ReferenceInput source="post_id" reference="posts" />
             <NumberInput source="score" />
             <TextInput source="body" />
+            <TextInput source="description" />
             <DateInput source="created_at" />
             <ReferenceArrayInput source="tags_ids" reference="tags" />
+            <TextInput source="url" />
+            <TextInput source="email" />
+            <BooleanInput source="isAlreadyPublished" />
+            <TextArrayInput source="genres" />
         </SimpleForm>
     </Edit>
 );`);

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

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Admin } from 'react-admin';
+import { Resource, TestMemoryRouter } from 'ra-core';
+import fakeRestProvider from 'ra-data-fakerest';
+
+import { EditGuesser as RAEditGuesser } from './EditGuesser';
+
+export default { title: 'ra-ui-materialui/detail/EditGuesser' };
+
+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: '[email protected]',
+            isAlreadyPublished: true,
+            genres: [
+                'Fiction',
+                'Historical Fiction',
+                'Classic Literature',
+                'Russian Literature',
+            ],
+        },
+    ],
+    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 EditGuesserWithProdLogs = () => <RAEditGuesser enableLog />;
+
+export const EditGuesser = () => (
+    <TestMemoryRouter initialEntries={['/books/123']}>
+        <Admin dataProvider={fakeRestProvider(data)}>
+            <Resource name="books" edit={EditGuesserWithProdLogs} />
+        </Admin>
+    </TestMemoryRouter>
+);

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

@@ -13,6 +13,7 @@ import {
     SelectInput,
     SimpleFormIterator,
     TextInput,
+    TextArrayInput,
 } from '../input';
 import { InferredElement, InferredTypeMap, InputProps } from 'ra-core';
 
@@ -40,6 +41,11 @@ ${children.map(child => `            ${child.getRepresentation()}`).join('\n')}
                 .map(child => child.getRepresentation())
                 .join('\n')}</SimpleFormIterator></ArrayInput>`,
     },
+    scalar_array: {
+        component: TextArrayInput,
+        representation: (props: InputProps) =>
+            `<TextArrayInput source="${props.source}" />`,
+    },
     boolean: {
         component: BooleanInput,
         representation: (props: InputProps) =>