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 ( (
- + + + {hostAddMatch && } + + + ); -} +}; HostForm.propTypes = { - handleSubmit: func.isRequired, handleCancel: func.isRequired, + handleSubmit: func.isRequired, host: shape({}), submitError: shape({}), };