BUGFIX: Form builder is appending properties to ui schema with no uiSchema change (#217)

Author: cnxumalo

src/formBuilder/FormBuilder.test.js

@@ -161,6 +161,8 @@ describe('FormBuilder', () => {
     expect(mockEvent).toHaveBeenCalledTimes(0);
     createButton.simulate('click');
     expect(mockEvent).toHaveBeenCalledTimes(1);
+
+    const cardInputs = wrapper.first().find('input');
     mockEvent.mockClear();
   });
 
@@ -624,73 +626,51 @@ describe('FormBuilder', () => {
     mockEvent.mockClear();
   });
 
-  it("should allow changing of a Section element's 'required' property", () => {
-    const sectionUiSchema = {
-      definitions: {
-        full_names: {
-          'ui:order': ['first_names', 'last_names'],
+  it('should edit card slug and override ui:schema with updated slug', () => {
+    let jsonSchema = {
+      properties: {
+        newInput1: {
+          title: 'New Input 1',
+          type: 'string',
         },
       },
-      user_full_names: {
-        'ui:order': ['first_names', 'last_names'],
-      },
-      'ui:order': ['user_full_names'],
     };
 
-    const sectionJsonSchema = {
-      definitions: {
-        full_names: {
-          title: 'Full Names',
-          type: 'object',
-          description: 'This is a composite field',
-          properties: {
-            first_names: {
-              title: 'First Names',
-              type: 'string',
-            },
-            last_names: {
-              title: 'Last Names',
-              type: 'string',
-            },
-          },
-          dependencies: {},
-          required: [],
-        },
-      },
-      properties: {
-        user_full_names: {
-          $ref: '#/definitions/full_names',
-          title: 'User Full Names',
-          description: 'Full names description',
-          required: [],
-        },
+    let uiSchema = {
+      'ui:order': ['newInput1'],
+      newInput1: {
+        'ui:column': '3',
       },
-      dependencies: {},
-      required: [],
-      type: 'object',
     };
 
     const innerProps = {
       ...props,
-      schema: JSON.stringify(sectionJsonSchema),
-      uiSchema: JSON.stringify(sectionUiSchema),
+
+      schema: JSON.stringify(jsonSchema),
+      uischema: JSON.stringify(uiSchema),
+      onChange: (newSchema, newUiSchema) => {
+        jsonSchema = newSchema;
+        uiSchema = newUiSchema;
+      },
     };
 
     const div = document.createElement('div');
     document.body.appendChild(div);
     const wrapper = mount(<FormBuilder {...innerProps} />, { attachTo: div });
+    const cardInputs = wrapper.find('.card-container').first().find('input');
 
-    const subFieldCheckbox = wrapper.find({ type: 'checkbox' });
-
-    const firstNamesCheckbox = subFieldCheckbox.at(0);
-
-    firstNamesCheckbox.simulate('change', { target: { checked: true } });
+    cardInputs.at(0).simulate('blur', {
+      target: { value: 'nameA' },
+    });
 
-    const updatedSchema = JSON.parse(mockEvent.mock.calls[0][0]);
+    const expected = {
+      'ui:order': ['nameA'],
+      nameA: {
+        'ui:column': '3',
+      },
+    };
 
-    expect(updatedSchema.properties.user_full_names.required).toEqual([
-      'first_names',
-    ]);
+    expect(JSON.parse(uiSchema)).toEqual(expected);
     mockEvent.mockClear();
   });
 });

src/formBuilder/Section.js

@@ -512,7 +512,6 @@ export default function Section({
           onClose={() => setModalOpen(false)}
           onChange={(newComponentProps: { [string]: any }) => {
             onDependentsChange(newComponentProps.dependents);
-
             onChange(schema, {
               ...uischema,
               'ui:column': newComponentProps['ui:column'],

src/formBuilder/utils.js

@@ -839,7 +839,10 @@ export function generateUiSchemaFromElementProps(
           uiSchema[element.name][uiOption] = element.uiOptions[uiOption];
         }
       });
-    } else if (element.propType === 'section' && element.uischema) {
+    } else if (
+      element.propType === 'section' &&
+      Object.keys(element.uischema).length > 0
+    ) {
       uiSchema[element.name] = element.uischema;
     }
   });
@@ -871,16 +874,29 @@ export function updateSchemas(
   },
 ) {
   const { schema, uischema, onChange, definitionUi } = parameters;
-
-  const newUiSchema = Object.assign(
-    { ...uischema },
-    generateUiSchemaFromElementProps(elementArr, definitionUi),
-  );
   const newSchema = Object.assign(
     { ...schema },
     generateSchemaFromElementProps(elementArr),
   );
 
+  const existingUiSchema: {
+    [string]: any,
+    definitions?: { [string]: any },
+    ...
+  } = Object.entries(uischema)
+    .filter(([key, _value]) => {
+      return key in newSchema.properties || key.startsWith('ui:');
+    })
+    .reduce((accumulator, currentValue) => {
+      const [key, value] = currentValue;
+      return { ...accumulator, [key]: value };
+    }, {});
+
+  const newUiSchema = Object.assign(
+    { ...existingUiSchema },
+    generateUiSchemaFromElementProps(elementArr, definitionUi),
+  );
+
   // mandate that the type is an object if not already done
   newSchema.type = 'object';
   onChange(newSchema, newUiSchema);