Do not allow changes to object name for array items

Author: raymond-lam

src/formBuilder/Card.js

@@ -33,6 +33,9 @@ const useStyles = createUseStyles({
       width: '50%',
       'text-align': 'left',
       padding: '0.5em',
+      '&.wide-card-entry': {
+        width: '100%',
+      },
     },
     '& input': {
       border: '1px solid gray',
@@ -103,6 +106,7 @@ export default function Card({
   setCardOpen,
   allFormInputs,
   mods,
+  showObjectNameInput = true,
 }: {
   componentProps: {
     [string]: string | number | boolean | Array<string | number>,
@@ -121,6 +125,7 @@ export default function Card({
   setCardOpen: (newState: boolean) => void,
   mods?: Mods,
   allFormInputs: { [string]: FormInput },
+  showObjectNameInput?: boolean,
 }) {
   const classes = useStyles();
   const [modalOpen, setModalOpen] = React.useState(false);
@@ -191,6 +196,7 @@ export default function Card({
             onChange={onChange}
             allFormInputs={allFormInputs}
             mods={mods}
+            showObjectNameInput={showObjectNameInput}
           />
         </div>
         <div className={classes.cardInteractions}>

src/formBuilder/CardGeneralParameterInputs.js

@@ -3,6 +3,7 @@
 import React from 'react';
 import Select from 'react-select';
 import { Input } from 'reactstrap';
+import classnames from 'classnames';
 import GeneralParameterInputs from './GeneralParameterInputs';
 import {
   defaultUiProps,
@@ -20,11 +21,13 @@ export default function CardGeneralParameterInputs({
   onChange,
   allFormInputs,
   mods,
+  showObjectNameInput = true,
 }: {
   parameters: Parameters,
   onChange: (newParams: Parameters) => void,
   mods?: Mods,
   allFormInputs: { [string]: FormInput },
+  showObjectNameInput?: boolean,
 }) {
   const [keyState, setKeyState] = React.useState(parameters.name);
   const [titleState, setTitleState] = React.useState(parameters.title);
@@ -62,38 +65,40 @@ export default function CardGeneralParameterInputs({
 
   return (
     <div>
-      <div className='card-entry'>
-        <h5>
-          {`${objectNameLabel} `}
-          <Tooltip
-            text={
-              mods &&
-              mods.tooltipDescriptions &&
-              typeof mods.tooltipDescriptions.cardObjectName === 'string'
-                ? mods.tooltipDescriptions.cardObjectName
-                : 'The back-end name of the object'
+      {showObjectNameInput && (
+        <div className='card-entry'>
+          <h5>
+            {`${objectNameLabel} `}
+            <Tooltip
+              text={
+                mods &&
+                mods.tooltipDescriptions &&
+                typeof mods.tooltipDescriptions.cardObjectName === 'string'
+                  ? mods.tooltipDescriptions.cardObjectName
+                  : 'The back-end name of the object'
+              }
+              id={`${(keyState: string)}_nameinfo`}
+              type='help'
+            />
+          </h5>
+
+          <Input
+            value={keyState || ''}
+            placeholder='Key'
+            type='text'
+            onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
+              setKeyState(ev.target.value.replace(/\W/g, '_'))
             }
-            id={`${(keyState: string)}_nameinfo`}
-            type='help'
+            onBlur={(ev: SyntheticInputEvent<HTMLInputElement>) =>
+              onChange({
+                ...parameters,
+                name: ev.target.value,
+              })
+            }
+            className='card-text'
           />
-        </h5>
-
-        <Input
-          value={keyState || ''}
-          placeholder='Key'
-          type='text'
-          onChange={(ev: SyntheticInputEvent<HTMLInputElement>) =>
-            setKeyState(ev.target.value.replace(/\W/g, '_'))
-          }
-          onBlur={(ev: SyntheticInputEvent<HTMLInputElement>) =>
-            onChange({
-              ...parameters,
-              name: ev.target.value,
-            })
-          }
-          className='card-text'
-        />
-      </div>
+        </div>
+      )}
       <div
         className={`card-entry ${
           parameters.$ref === undefined ? '' : 'disabled-input'
@@ -154,7 +159,11 @@ export default function CardGeneralParameterInputs({
           className='card-text'
         />
       </div>
-      <div className='card-entry'>
+      <div
+        className={classnames('card-entry', {
+          'wide-card-entry': !showObjectNameInput,
+        })}
+      >
         <h5>
           {`${inputTypeLabel} `}
           <Tooltip

src/formBuilder/defaults/arrayInputs.js

@@ -125,13 +125,13 @@ function getInnerCardComponent({
           }_issection`}
         />
         {generateElementComponentsFromSchemas({
-          schemaData: { properties: { Item: newDataProps.items } },
-          uiSchemaData: { Item: newUiProps.items },
+          schemaData: { properties: { item: newDataProps.items } },
+          uiSchemaData: { item: newUiProps.items },
           onChange: (schema, uischema) => {
             onChange({
               ...parameters,
-              items: schema.properties.Item,
-              'ui:*items': uischema.Item || {},
+              items: schema.properties.item,
+              'ui:*items': uischema.item || {},
             });
           },
           path: typeof parameters.path === 'string' ? parameters.path : 'array',
@@ -143,7 +143,7 @@ function getInnerCardComponent({
           allFormInputs,
           mods,
           categoryHash: generateCategoryHash(allFormInputs),
-          Card,
+          Card: (props) => <Card {...props} showObjectNameInput={false} />,
           Section,
         })}
       </div>