diff --git a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
index ebb302fc42c6..c7b6df05f3fa 100644
--- a/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
+++ b/awx/ui_next/src/screens/Host/HostAdd/HostAdd.test.jsx
@@ -20,7 +20,7 @@ describe('', () => {
beforeEach(async () => {
history = createMemoryHistory({
- initialEntries: ['/hosts/1/add'],
+ initialEntries: ['/hosts/add'],
});
await act(async () => {
wrapper = mountWithContexts(, {
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 7df23e70c873..3b72f710812b 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/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 inventoryFieldArr = useField({
+ const [, inventoryMeta, inventoryHelpers] = useField({
name: 'inventory',
validate: required(i18n._(t`Select a value for this field`), i18n),
});
- const inventoryMeta = inventoryFieldArr[1];
- const inventoryHelpers = inventoryFieldArr[2];
return (
- <>
-
+
- 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}
/>
- {hostAddMatch && (
-
-
- 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}
- />
-
- )}
-
-
-
- >
+
);
-}
+});
+
+const HostForm = ({ handleCancel, handleSubmit, host, i18n, submitError }) => {
+ const hostAddMatch = useRouteMatch('/hosts/add');
-function HostForm({ handleSubmit, host, submitError, handleCancel, ...rest }) {
return (
(