Fix: Unable to mark inner fields of a referenced section as required. (#197)

Author: Sabantu

src/formBuilder/FormBuilder.test.js

@@ -623,4 +623,74 @@ 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'],
+        },
+      },
+      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: [],
+        },
+      },
+      dependencies: {},
+      required: [],
+      type: 'object',
+    };
+
+    const innerProps = {
+      ...props,
+      schema: JSON.stringify(sectionJsonSchema),
+      uiSchema: JSON.stringify(sectionUiSchema),
+    };
+
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const wrapper = mount(<FormBuilder {...innerProps} />, { attachTo: div });
+
+    const subFieldCheckbox = wrapper.find({ type: 'checkbox' });
+
+    const firstNamesCheckbox = subFieldCheckbox.at(0);
+
+    firstNamesCheckbox.simulate('change', { target: { checked: true } });
+
+    const updatedSchema = JSON.parse(mockEvent.mock.calls[0][0]);
+
+    expect(updatedSchema.properties.user_full_names.required).toEqual([
+      'first_names',
+    ]);
+    mockEvent.mockClear();
+  });
 });

src/formBuilder/utils.js

@@ -691,11 +691,18 @@ function generateSchemaElementFromElement(element: ElementProps) {
       element.schema !== undefined && element.schema.description !== undefined
         ? element.schema.description
         : element.dataOptions.description;
-    return {
+
+    let returnElement = {
       $ref: element.$ref,
       title: title,
       description: description,
     };
+
+    const length = element?.schema?.required?.length;
+    if (length !== undefined && length > 0) {
+      returnElement = { ...returnElement, required: element.schema.required };
+    }
+    return returnElement;
   } else if (element.propType === 'card') {
     if (element.dataOptions.category === 'section') {
       return {

src/formBuilder/utils.test.js

@@ -527,6 +527,36 @@ describe('generateSchemaFromElementProps', () => {
 
     expect(result.properties.exampleCard).toEqual(expectedSchemaElement);
   });
+
+  it('generates the correct JSON Schema from a compound element with the required prop', () => {
+    const expectedSchemaElement = {
+      $ref: '#/definitions/someDefinition',
+      title: 'Input Field',
+      description: 'This is an example description',
+      required: ['field_one'],
+    };
+
+    const result = generateSchemaFromElementProps(
+      [
+        {
+          name: 'exampleCard',
+          required: true,
+          $ref: '#/definitions/someDefinition',
+          dataOptions: {
+            description: 'This is an example description',
+            title: 'Input Field',
+          },
+          schema: {
+            required: ['field_one'],
+          },
+          propType: 'card',
+        },
+      ],
+      DEFAULT_FORM_INPUTS,
+    );
+
+    expect(result.properties.exampleCard).toEqual(expectedSchemaElement);
+  });
 });
 
 describe('generateUiSchemaFromElementProps', () => {