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,21 +18,61 @@ 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
+      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>
+  );
+});
+
+const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
+  const hostAddMatch = useRouteMatch('/hosts/add');
+
+  return (
+    <Formik
+      initialValues={{
+        name: host.name,
+        description: host.description,
+        inventory: host.inventory || '',
+        variables: host.variables,
+      }}
+      onSubmit={handleSubmit}
+    >
+      {formik => (
+        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
+          <FormColumnLayout>
             <FormField
               id="host-name"
               name="name"
@@ -47,37 +87,7 @@ function HostFormFields({ host, i18n }) {
               type="text"
               label={i18n._(t`Description`)}
             />
-      {hostAddMatch && (
+            {hostAddMatch && <InventoryLookupField host={host} />}
-        <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"
@@ -85,25 +95,6 @@ function HostFormFields({ host, i18n }) {
                 label={i18n._(t`Variables`)}
               />
             </FormFullWidthLayout>
-    </>
-  );
-}
-
-function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
-  return (
-    <Formik
-      initialValues={{
-        name: host.name,
-        description: host.description,
-        inventory: host.inventory || '',
-        variables: host.variables,
-      }}
-      onSubmit={handleSubmit}
-    >
-      {formik => (
-        <Form autoComplete="off" onSubmit={formik.handleSubmit}>
-          <FormColumnLayout>
-            <HostFormFields host={host} {...rest} />
             <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({}),
 };