[material] Fix binding of object schema in tables

Author: edgarmueller

packages/examples/src/1253.ts

@@ -102,6 +102,41 @@ const uischema3 = {
   scope: '#/properties/thingOrThings'
 };
 
+const schema4 = {
+  definitions: {
+    color: {
+      type: 'string',
+      enum: ['red', 'green', 'blue']
+    }
+  },
+  type: 'object',
+  properties: {
+    things: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          somethingElse: {
+            type: 'string'
+          },
+          thing: {
+            type: 'string',
+            enum: ['thing']
+          },
+          anotherThing: {
+            $ref: '#/definitions/color'
+          }
+        }
+      }
+    }
+  }
+};
+
+const uischema4 = {
+  type: 'Control',
+  scope: '#/properties/things'
+};
+
 registerExamples([
   {
     name: 'issue-1253',
@@ -141,3 +176,13 @@ registerExamples([
     uischema: uischema3
   }
 ]);
+
+registerExamples([
+  {
+    name: 'issue-1253-enum-error',
+    label: 'issue 1253 (enum)',
+    data,
+    schema: schema4,
+    uischema: uischema4
+  }
+]);

packages/material/src/complex/MaterialTableControl.tsx

@@ -43,7 +43,8 @@ import {
   Generate,
   Helpers,
   JsonSchema,
-  Paths
+  Paths,
+  Resolve
 } from '@jsonforms/core';
 import IconButton from '@material-ui/core/IconButton';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -65,20 +66,21 @@ const styles = {
 
 const generateCells = (
   Cell: React.ComponentType<NonEmptyCellProps | TableHeaderCellProps>,
-  scopedSchema: JsonSchema,
+  rootSchema: JsonSchema,
+  schema: JsonSchema,
   rowPath: string,
   cellErrors?: any[]
 ) => {
 
-  if (scopedSchema.type === 'object') {
-    return getValidColumnProps(scopedSchema).map(prop => {
+  if (schema.type === 'object') {
+    return getValidColumnProps(schema).map(prop => {
       const cellPath = Paths.compose(
         rowPath,
         prop
       );
       const props = {
         propName: prop,
-        scopedSchema,
+        schema,
         rowPath,
         cellPath,
         errors: cellErrors
@@ -89,7 +91,8 @@ const generateCells = (
   } else {
     // primitives
     const props = {
-      scopedSchema,
+      schema,
+      rootSchema,
       rowPath,
       cellPath: rowPath,
       errors: cellErrors
@@ -131,33 +134,47 @@ const TableHeaderCell = ({ propName }: TableHeaderCellProps) => (
 interface NonEmptyCellProps {
   rowPath: string;
   propName?: string;
-  scopedSchema: JsonSchema;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
   errors?: any[];
 }
 
 const NonEmptyCell = ({
   rowPath,
   propName,
-  scopedSchema,
+  schema,
+  rootSchema,
   errors
 }: NonEmptyCellProps) => {
-  const path = rowPath + (scopedSchema.type === 'object' ? '.' + propName : '');
+  const path = rowPath + (schema.type === 'object' ? '.' + propName : '');
   const errorsPerEntry: any[] = filter(
     errors,
     error => error.dataPath === path
   ).map(e => e.message);
   const isValid = isEmpty(errorsPerEntry);
+
   return (
     <React.Fragment>
       <NoBorderTableCell>
-        <DispatchField
-          schema={scopedSchema}
-          uischema={Generate.controlElement(
-            undefined,
-            scopedSchema.type === 'object' ? `#/properties/${propName}` : '#'
-          )}
-          path={path}
-        />
+        {
+          schema.properties ?
+            <DispatchField
+              schema={Resolve.schema(schema, `#/properties/${propName}`, rootSchema)}
+              uischema={Generate.controlElement(
+                undefined,
+                `#/properties/${propName}`
+              )}
+              path={path}
+            /> :
+            <DispatchField
+              schema={schema}
+              uischema={Generate.controlElement(
+                undefined,
+                '#'
+              )}
+              path={path}
+            />
+        }
         <FormHelperText error={!isValid}>
           {!isValid && formatErrorMessage(errorsPerEntry)}
         </FormHelperText>
@@ -168,20 +185,22 @@ const NonEmptyCell = ({
 
 interface NonEmptyRowProps {
   childPath: string;
-  scopedSchema: JsonSchema;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
   childErrors: ErrorObject[];
   rowData: any;
 }
 
 const NonEmptyRow = ({
   childPath,
-  scopedSchema,
+  schema,
+  rootSchema,
   childErrors,
   rowData,
   openDeleteDialog
 }: NonEmptyRowProps & WithDeleteDialogSupport) => (
   <TableRow key={childPath} hover>
-    {generateCells(NonEmptyCell, scopedSchema, childPath, childErrors)}
+    {generateCells(NonEmptyCell, rootSchema, schema, childPath, childErrors)}
     <NoBorderTableCell style={styles.fixedCell}>
       <div style={{ display: 'flex', justifyContent: 'center' }}>
         <IconButton
@@ -197,7 +216,7 @@ const NonEmptyRow = ({
 
 const TableRows = (
   {
-    data, path, schema, childErrors, openDeleteDialog
+    data, path, rootSchema, schema, childErrors, openDeleteDialog
   }: ArrayControlProps & WithDeleteDialogSupport) => {
 
   const isEmptyTable = !data || !Array.isArray(data) || data.length === 0;
@@ -214,7 +233,8 @@ const TableRows = (
         key={childPath}
         childPath={childPath}
         rowData={_child}
-        scopedSchema={schema}
+        schema={schema}
+        rootSchema={rootSchema}
         childErrors={childErrors}
         openDeleteDialog={openDeleteDialog}
       />
@@ -239,12 +259,13 @@ export class MaterialTableControl extends React.Component<
       addItem,
       openDeleteDialog
     } = this.props;
+
     const controlElement = uischema as ControlElement;
     const labelObject = Helpers.createLabelDescriptionFrom(controlElement);
     const allErrors = [].concat(errors).concat(childErrors.map((e: ErrorObject) => e.message));
     const isObjectSchema = schema.type === 'object';
     const headerCells: any = isObjectSchema ?
-      generateCells(TableHeaderCell, schema, path) : undefined;
+      generateCells(TableHeaderCell, rootSchema, schema, path) : undefined;
 
     return (
       <React.Fragment>

packages/material/test/renderers/MaterialArrayControl.test.tsx

@@ -53,38 +53,38 @@ export const initJsonFormsStore = (customData?: any): Store<JsonFormsState> => {
 };
 
 const fixture: {
-    data: any,
-    schema: JsonSchema,
-    uischema: ControlElement
+  data: any,
+  schema: JsonSchema,
+  uischema: ControlElement
 } = {
-    data: [
-        {
-            message: 'El Barto was here',
-            done: true
+  data: [
+    {
+      message: 'El Barto was here',
+      done: true
+    },
+    {
+      message: 'Yolo'
+    }
+  ],
+  schema: {
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {
+        message: {
+          type: 'string',
+          maxLength: 3
         },
-        {
-            message: 'Yolo'
-        }
-    ],
-    schema: {
-        type: 'array',
-        items: {
-            type: 'object',
-            properties: {
-                message: {
-                    type: 'string',
-                    maxLength: 3
-                },
-                done: {
-                    type: 'boolean'
-                }
-            }
+        done: {
+          type: 'boolean'
         }
-    },
-    uischema: {
-        type: 'Control',
-        scope: '#'
+      }
     }
+  },
+  uischema: {
+    type: 'Control',
+    scope: '#'
+  }
 };
 
 describe('Material array control', () => {
@@ -197,10 +197,10 @@ describe('Material array control', () => {
 
     const buttons = wrapper.find('button');
     // 5 buttons
-      // add row
-      // delete row
-      // delete row
-      // two dialog buttons (no + yes)
+    // add row
+    // delete row
+    // delete row
+    // two dialog buttons (no + yes)
     const nrOfRowsBeforeDelete = wrapper.find('tr').length;
 
     const deleteButton = buttons.at(1);
@@ -215,4 +215,58 @@ describe('Material array control', () => {
     expect(nrOfRowsAfterDelete).toBe(3);
     expect(store.getState().jsonforms.core.data.length).toBe(1);
   });
+
+  it('should support adding rows that contain enums', () => {
+    const schema = {
+      type: 'object',
+      properties: {
+        things: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              somethingElse: {
+                type: 'string'
+              },
+              thing: {
+                type: 'string',
+                enum: [
+                  'thing'
+                ]
+              },
+            }
+          }
+        }
+      }
+    };
+    const uischema: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/things'
+    };
+    const store = initJsonFormsStore();
+    store.dispatch(Actions.init({}, schema, uischema));
+
+    wrapper = mount(
+      <Provider store={store}>
+        <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
+      </Provider>
+    );
+
+    const buttons = wrapper.find('button');
+    // 3 buttons
+    // add row
+    // two dialog buttons (no + yes)
+    const nrOfRowsBeforeDelete = wrapper.find('tr').length;
+
+    const addButton = buttons.at(0);
+    addButton.simulate('click');
+    addButton.simulate('click');
+    wrapper.update();
+    const nrOfRowsAfterDelete = wrapper.find('tr').length;
+
+    // 2 header rows + 'no data' row
+    expect(nrOfRowsBeforeDelete).toBe(3);
+    expect(nrOfRowsAfterDelete).toBe(4);
+    expect(store.getState().jsonforms.core.data).toEqual({ things: [{}, {}]});
+  });
 });

packages/vanilla/src/complex/TableArrayControl.tsx

@@ -39,6 +39,7 @@ import {
   mapStateToArrayControlProps,
   Paths,
   RankedTester,
+  Resolve,
   StatePropsOfControl,
   Test
 } from '@jsonforms/core';
@@ -70,6 +71,7 @@ class TableArrayControl extends React.Component<
       addItem,
       uischema,
       schema,
+      rootSchema,
       createDefaultValue,
       path,
       data,
@@ -160,7 +162,7 @@ class TableArrayControl extends React.Component<
                           return (
                             <td key={childPropPath}>
                               <DispatchField
-                                schema={schema}
+                                schema={Resolve.schema(schema, `#/properties/${prop}`, rootSchema)}
                                 uischema={createControlElement(prop)}
                                 path={childPath + '.' + prop}
                               />