Fixing a regression of additionalProperties keys not being editable

packages/api-explorer/__tests__/Params.test.jsx

@@ -2,6 +2,7 @@ const React = require('react');
 const { mount } = require('enzyme');
 const extensions = require('@readme/oas-extensions');
 const Oas = require('oas');
+const { ADDITIONAL_PROPERTY_FLAG } = require('react-jsonschema-form/lib/utils');
 
 const Description = require('../src/form-components/DescriptionField');
 const createParams = require('../src/Params');
@@ -149,6 +150,18 @@ test('should convert `mixed type` to string', () => {
   expect(params.find(`.field-string`)).toHaveLength(1);
 });
 
+test('additionalProperties object labels (keys) should be editable', () => {
+  const params = renderParams({
+    type: 'object',
+    additionalProperties: true,
+    // RJSF adds this property if you go through the `Form` object, but we aren't here so we're
+    // faking it.
+    [ADDITIONAL_PROPERTY_FLAG]: true,
+  });
+
+  expect(params.find('input#root_a-key')).toHaveLength(1);
+});
+
 describe('schema format handling', () => {
   describe('string types', () => {
     it('json should render as <textarea>', () => {

packages/api-explorer/src/form-components/SchemaField.jsx

@@ -11,6 +11,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 
 const BaseSchemaField = require('react-jsonschema-form/lib/components/fields/SchemaField').default;
+const { ADDITIONAL_PROPERTY_FLAG } = require('react-jsonschema-form/lib/utils');
 
 function getDefaultNumFormat(type) {
   if (type === 'integer') return 'int32';
@@ -70,13 +71,33 @@ function getTypeLabel(schema) {
 }
 
 function CustomTemplate(props) {
-  const { id, classNames, label, help, required, description, errors, children, schema } = props;
+  const {
+    id,
+    classNames,
+    label,
+    help,
+    required,
+    description,
+    errors,
+    children,
+    schema,
+    onKeyChange,
+  } = props;
+
+  const EditLabel = (
+    <input
+      defaultValue={label}
+      id={`${id}-key`}
+      onBlur={event => onKeyChange(event.target.value)}
+      type="text"
+    />
+  );
 
   return (
     <div className={`${classNames} param`}>
       <span className="label">
         <label className="label-name" htmlFor={id}>
-          {label}
+          {ADDITIONAL_PROPERTY_FLAG in schema ? EditLabel : label}
           {required && <span className="label-required">*</span>}
         </label>
         <span className="label-type">{getTypeLabel(schema)}</span>
@@ -141,11 +162,16 @@ CustomTemplate.propTypes = {
   errors: PropTypes.node.isRequired,
   help: PropTypes.node.isRequired,
   id: PropTypes.node.isRequired,
-  label: PropTypes.string.isRequired,
-  required: PropTypes.node.isRequired,
+  label: PropTypes.string,
+  onKeyChange: PropTypes.func,
+  required: PropTypes.bool,
   schema: PropTypes.shape({}).isRequired,
 };
 
+CustomTemplate.defaultProps = {
+  onKeyChange: () => {},
+};
+
 SchemaField.propTypes = {
   registry: PropTypes.shape({
     FieldTemplate: PropTypes.func,