ra-no-code - Introduce Resource Configuration

packages/ra-core/package.json

@@ -66,7 +66,7 @@
     },
     "dependencies": {
         "classnames": "~2.2.5",
-        "date-fns": "^1.29.0",
+        "date-fns": "^2.21.1",
         "eventemitter3": "^3.0.0",
         "inflection": "~1.12.0",
         "lodash": "~4.17.5",

packages/ra-core/src/inference/assertions.ts

@@ -1,4 +1,5 @@
-import parseDate from 'date-fns/parse';
+import isValid from 'date-fns/isValid';
+import parseDate from 'date-fns/parseISO';
 
 export const isNumeric = (value: any) =>
     !isNaN(parseFloat(value)) && isFinite(value);
@@ -45,7 +46,7 @@ export const isDate = (value: any) => !value || value instanceof Date;
 export const valuesAreDate = (values: any[]) => values.every(isDate);
 
 export const isDateString = (value: any) =>
-    !value || (typeof value === 'string' && !isNaN(parseDate(value).getDate()));
+    !value || (typeof value === 'string' && isValid(parseDate(value)));
 export const valuesAreDateString = (values: any[]) =>
     values.every(isDateString);
 

packages/ra-core/src/inference/inferTypeFromValues.ts

@@ -18,7 +18,7 @@ import {
     valuesAreEmail,
 } from './assertions';
 
-const types = [
+export const InferenceTypes = [
     'array',
     'boolean',
     'date',
@@ -33,9 +33,10 @@ const types = [
     'richText',
     'string',
     'url',
+    'object',
 ] as const;
 
-export type PossibleInferredElementTypes = typeof types[number];
+export type PossibleInferredElementTypes = typeof InferenceTypes[number];
 
 export interface InferredElementDescription {
     type: PossibleInferredElementTypes;
@@ -170,10 +171,18 @@ export const inferTypeFromValues = (
     }
     if (valuesAreObject(values)) {
         // we need to go deeper
-        // Arbitrarily, choose the first prop of the first object
-        const propName = Object.keys(values[0]).shift();
-        const leafValues = values.map(v => v[propName]);
-        return inferTypeFromValues(`${name}.${propName}`, leafValues);
+        // Arbitrarily, choose the first object
+        // FIXME bad visual representation
+        return {
+            type: 'object',
+            props: { source: name },
+            children: Object.keys(values[0]).map(leafName =>
+                inferTypeFromValues(
+                    leafName,
+                    values.map(value => value[leafName])
+                )
+            ),
+        };
     }
     return { type: 'string', props: { source: name } };
 };

packages/ra-core/src/inference/inferTypesFromValues.spec.ts

@@ -159,8 +159,18 @@ describe('inferTypeFromValues', () => {
                 { bar: 3, baz: 4 },
             ])
         ).toEqual({
-            type: 'number',
-            props: { source: 'foo.bar' },
+            type: 'object',
+            props: { source: 'foo' },
+            children: [
+                {
+                    type: 'number',
+                    props: { source: 'bar' },
+                },
+                {
+                    type: 'number',
+                    props: { source: 'baz' },
+                },
+            ],
         });
     });
 });

packages/ra-no-code/package.json

@@ -46,7 +46,7 @@
     },
     "dependencies": {
         "classnames": "~2.2.5",
-        "date-fns": "^1.29.0",
+        "date-fns": "^2.21.1",
         "inflection": "~1.12.0",
         "lodash": "~4.17.5",
         "react-admin": "^3.14.5",

packages/ra-no-code/src/Admin.spec.tsx

@@ -82,8 +82,7 @@ describe('Admin', () => {
             getByText('Reference', { selector: 'th *' });
             getByText('Date', { selector: 'th *' });
             getByText('Customer', { selector: 'th *' });
-            getByText('Basket.product', { selector: 'th *' });
-            getByText('Basket.quantity', { selector: 'th *' });
+            getByText('Basket', { selector: 'th *' });
             getByText('Total ex taxes', { selector: 'th *' });
             getByText('Delivery fees', { selector: 'th *' });
             getByText('Tax rate', { selector: 'th *' });

packages/ra-no-code/src/Admin.tsx

@@ -5,15 +5,26 @@ import {
     Resource,
 } from 'react-admin';
 import localStorageDataProvider from 'ra-data-local-storage';
-import { Create, Edit, List } from './builders';
+import { Create, Edit, List, Show } from './builders';
 import {
     useResourcesConfiguration,
+    ResourceConfigurationPage,
     ResourceConfigurationProvider,
 } from './ResourceConfiguration';
 import { Layout, Ready } from './ui';
+import { Route } from 'react-router';
 
 const dataProvider = localStorageDataProvider();
 
+const customRoutes = [
+    <Route
+        path="/configure/:resource"
+        render={({ match }) => (
+            <ResourceConfigurationPage resource={match.params.resource} />
+        )}
+    />,
+];
+
 export const Admin = (props: AdminProps) => (
     <ResourceConfigurationProvider dataProvider={dataProvider}>
         <InnerAdmin {...props} />
@@ -28,6 +39,7 @@ const InnerAdmin = (props: AdminProps) => {
             dataProvider={dataProvider}
             ready={Ready}
             layout={Layout}
+            customRoutes={customRoutes}
             {...props}
         >
             {hasResources
@@ -39,6 +51,7 @@ const InnerAdmin = (props: AdminProps) => {
                           list={List}
                           edit={Edit}
                           create={Create}
+                          show={Show}
                       />
                   ))
                 : undefined}

packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationFormSection.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+    getFieldLabelTranslationArgs,
+    InferenceTypes,
+    useTranslate,
+} from 'ra-core';
+import { CheckboxGroupInput, SelectInput, TextInput } from 'ra-ui-materialui';
+import { CardContent } from '@material-ui/core';
+
+export const FieldConfigurationFormSection = props => {
+    const { index, field, resource } = props;
+    const translate = useTranslate();
+    const labelArgs = getFieldLabelTranslationArgs({
+        source: field.props.source,
+        resource,
+        label: field.props.label,
+    });
+
+    return (
+        <CardContent>
+            <TextInput
+                source={`fields[${index}].props.source`}
+                label="Source"
+                fullWidth
+                disabled
+            />
+            <TextInput
+                source={`fields[${index}].props.label`}
+                label="Label"
+                fullWidth
+                initialValue={translate(...labelArgs)}
+            />
+            <SelectInput
+                source={`fields[${index}].type`}
+                label="Type"
+                fullWidth
+                choices={INFERENCE_TYPES}
+            />
+            <CheckboxGroupInput
+                source={`fields[${index}].views`}
+                label="Views"
+                fullWidth
+                choices={VIEWS}
+                initialValue={VIEWS_INITIAL_VALUE}
+            />
+        </CardContent>
+    );
+};
+
+const INFERENCE_TYPES = InferenceTypes.map(type => ({
+    id: type,
+    name: type,
+}));
+
+const VIEWS = [
+    {
+        id: 'list',
+        name: 'List',
+    },
+    {
+        id: 'edit',
+        name: 'Edit',
+    },
+    {
+        id: 'create',
+        name: 'Create',
+    },
+    {
+        id: 'show',
+        name: 'Show',
+    },
+];
+
+const VIEWS_INITIAL_VALUE = ['list', 'edit', 'create', 'show'];

packages/ra-no-code/src/ResourceConfiguration/FieldConfigurationTab.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Tab } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { getFieldLabelTranslationArgs, useTranslate } from 'ra-core';
+
+export const FieldConfigurationTab = ({ field, resource, ...props }) => {
+    const classes = useStyles();
+    const translate = useTranslate();
+    const labelArgs = getFieldLabelTranslationArgs({
+        source: field.props.source,
+        resource,
+        label: field.props.label,
+    });
+
+    return (
+        <Tab
+            {...props}
+            key={field.props.source}
+            label={translate(...labelArgs)}
+            id={`nav-tab-${field.props.source}`}
+            aria-controls={`nav-tabpanel-${field.props.source}`}
+            classes={classes}
+        />
+    );
+};
+
+const useStyles = makeStyles(theme => ({
+    root: {
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(2),
+        textTransform: 'none',
+        minHeight: 0,
+        fontWeight: 'normal',
+    },
+    selected: {
+        fontWeight: 'bold',
+    },
+}));