Fix bug where Inv Host Add form doesn't save due to form error

awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx

@@ -20,7 +20,7 @@ describe('<HostAdd />', () => {
 
   beforeEach(async () => {
     history = createMemoryHistory({
-      initialEntries: ['/hosts/1/add'],
+      initialEntries: ['/hosts/add'],
     });
     await act(async () => {
       wrapper = mountWithContexts(<HostAdd />, {

awx/ui_next/src/screens/Host/shared/HostForm.jsx

@@ -18,78 +18,48 @@ import { required } from '@util/validators';
 import { InventoryLookup } from '@components/Lookup';
 import { FormColumnLayout, FormFullWidthLayout } from '@components/FormLayout';
 
-function HostFormFields({ host, i18n }) {
+const InventoryLookupField = withI18n()(({ i18n, host }) => {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
 
-  const hostAddMatch = useRouteMatch('/hosts/add');
+  const [, inventoryMeta, inventoryHelpers] = useField({
-  const inventoryFieldArr = useField({
     name: 'inventory',
     validate: required(i18n._(t`Select a value for this field`), i18n),
   });
-  const inventoryMeta = inventoryFieldArr[1];
-  const inventoryHelpers = inventoryFieldArr[2];
 
   return (
-    <>
+    <FormGroup
-      <FormField
+      label={i18n._(t`Inventory`)}
-        id="host-name"
+      isRequired
-        name="name"
+      fieldId="inventory-lookup"
-        type="text"
+      isValid={!inventoryMeta.touched || !inventoryMeta.error}
-        label={i18n._(t`Name`)}
+      helperTextInvalid={inventoryMeta.error}
-        validate={required(null, i18n)}
+    >
-        isRequired
+      <FieldTooltip
+        content={i18n._(t`Select the inventory that this host will belong to.`)}
       />
-      <FormField
+      <InventoryLookup
-        id="host-description"
+        value={inventory}
-        name="description"
+        onBlur={() => inventoryHelpers.setTouched()}
-        type="text"
+        tooltip={i18n._(t`Select the inventory that this host will belong to.`)}
-        label={i18n._(t`Description`)}
+        isValid={!inventoryMeta.touched || !inventoryMeta.error}
+        helperTextInvalid={inventoryMeta.error}
+        onChange={value => {
+          inventoryHelpers.setValue(value.id);
+          setInventory(value);
+        }}
+        required
+        touched={inventoryMeta.touched}
+        error={inventoryMeta.error}
       />
-      {hostAddMatch && (
+    </FormGroup>
-        <FormGroup
-          label={i18n._(t`Inventory`)}
-          isRequired
-          fieldId="inventory-lookup"
-          isValid={!inventoryMeta.touched || !inventoryMeta.error}
-          helperTextInvalid={inventoryMeta.error}
-        >
-          <FieldTooltip
-            content={i18n._(
-              t`Select the inventory that this host will belong to.`
-            )}
-          />
-          <InventoryLookup
-            value={inventory}
-            onBlur={() => inventoryHelpers.setTouched()}
-            tooltip={i18n._(
-              t`Select the inventory that this host will belong to.`
-            )}
-            isValid={!inventoryMeta.touched || !inventoryMeta.error}
-            helperTextInvalid={inventoryMeta.error}
-            onChange={value => {
-              inventoryHelpers.setValue(value.id);
-              setInventory(value);
-            }}
-            required
-            touched={inventoryMeta.touched}
-            error={inventoryMeta.error}
-          />
-        </FormGroup>
-      )}
-      <FormFullWidthLayout>
-        <VariablesField
-          id="host-variables"
-          name="variables"
-          label={i18n._(t`Variables`)}
-        />
-      </FormFullWidthLayout>
-    </>
   );
-}
+});
+
+const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
+  const hostAddMatch = useRouteMatch('/hosts/add');
 
-function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
   return (
     <Formik
       initialValues={{
@@ -103,7 +73,28 @@ function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
       {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormColumnLayout>
-            <HostFormFields host={host} {...rest} />
+            <FormField
+              id="host-name"
+              name="name"
+              type="text"
+              label={i18n._(t`Name`)}
+              validate={required(null, i18n)}
+              isRequired
+            />
+            <FormField
+              id="host-description"
+              name="description"
+              type="text"
+              label={i18n._(t`Description`)}
+            />
+            {hostAddMatch && <InventoryLookupField host={host} />}
+            <FormFullWidthLayout>
+              <VariablesField
+                id="host-variables"
+                name="variables"
+                label={i18n._(t`Variables`)}
+              />
+            </FormFullWidthLayout>
             <FormSubmitError error={submitError} />
             <FormActionGroup
               onCancel={handleCancel}
@@ -114,11 +105,11 @@ function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
       )}
     </Formik>
   );
-}
+};
 
 HostForm.propTypes = {
-  handleSubmit: func.isRequired,
   handleCancel: func.isRequired,
+  handleSubmit: func.isRequired,
   host: shape({}),
   submitError: shape({}),
 };