Allow users to add titles and descriptions for references (#68)

Allows users to set title and descriptions per $ref

Author: Bradley Marques

src/formBuilder/CardGeneralParameterInputs.js

@@ -107,7 +107,6 @@ export default function CardGeneralParameterInputs({
             onChange({ ...parameters, title: ev.target.value });
           }}
           className='card-text'
-          readOnly={parameters.$ref !== undefined}
         />
       </div>
       <div className={`card-entry ${parameters.$ref ? 'disabled-input' : ''}`}>
@@ -136,7 +135,6 @@ export default function CardGeneralParameterInputs({
             onChange({ ...parameters, description: ev.target.value });
           }}
           className='card-text'
-          readOnly={parameters.$ref !== undefined}
         />
       </div>
       <div className='card-entry'>

src/formBuilder/FormBuilder.test.js

@@ -12,6 +12,28 @@ const props = {
   onChange: (newSchema, newUiSchema) => mockEvent(newSchema, newUiSchema),
 };
 
+const schemaWithDefinitions = {
+  type: 'object',
+  definitions: {
+    exampleDefinition: {
+      type: 'string',
+    },
+  },
+  properties: {
+    exampleField: {
+      $ref: '#/definitions/exampleDefinition',
+      title: 'Custom Title',
+      description: 'Custom Description',
+    },
+  },
+};
+
+const propsWithDefinitions = {
+  schema: JSON.stringify(schemaWithDefinitions),
+  uiSchema: '',
+  onChange: (newSchema, newUiSchema) => mockEvent(newSchema, newUiSchema),
+};
+
 describe('FormBuilder', () => {
   it('renders without error', () => {
     const div = document.createElement('div');
@@ -87,6 +109,7 @@ describe('FormBuilder', () => {
       'Property Parameter: badSideProp in obj2',
     ]);
   });
+
   it('renders the cards in the correct order according to ui:order', () => {
     const modProps = {
       ...props,
@@ -175,4 +198,18 @@ describe('FormBuilder', () => {
     expect(wrapper.exists('.form-body')).toBeTruthy();
     expect(wrapper.exists('[data-test="form-head"]')).toBeFalsy();
   });
+
+  it('renders $refs with custom titles and descriptions', () => {
+    const div = document.createElement('div');
+    document.body.appendChild(div);
+    const wrapper = mount(<FormBuilder {...propsWithDefinitions} />, {
+      attachTo: div,
+    });
+
+    expect(wrapper.exists('.form-body')).toBeTruthy();
+
+    const cardInputs = wrapper.find('.card-container').first().find('input');
+    expect(cardInputs.at(1).props().value).toEqual('Custom Title');
+    expect(cardInputs.at(2).props().value).toEqual('Custom Description');
+  });
 });

src/formBuilder/defaults/defaultInputs.js

@@ -237,6 +237,8 @@ const defaultInputs = {
     ],
     defaultDataSchema: {
       $ref: '',
+      title: '',
+      description: '',
     },
     defaultUiSchema: {},
     type: null,

src/formBuilder/utils.js

@@ -461,8 +461,8 @@ export function generateElementPropsFromSchemas(parameters: {
         definitionData[pathArr[2]]
       ) {
         elementDetails = {
-          ...elementDetails,
           ...definitionData[pathArr[2]],
+          ...elementDetails,
         };
       }
 
@@ -673,6 +673,8 @@ function generateSchemaElementFromElement(element: ElementProps) {
   if (element.$ref !== undefined) {
     return {
       $ref: element.$ref,
+      title: element.dataOptions.title,
+      description: element.dataOptions.description,
     };
   } else if (element.propType === 'card') {
     if (element.dataOptions.category === 'section') {