diff --git a/awx/ui_next/src/components/ContentError/ContentError.jsx b/awx/ui_next/src/components/ContentError/ContentError.jsx index 53610b52d4..eda9df08fb 100644 --- a/awx/ui_next/src/components/ContentError/ContentError.jsx +++ b/awx/ui_next/src/components/ContentError/ContentError.jsx @@ -16,7 +16,7 @@ import ErrorDetail from '@components/ErrorDetail'; const EmptyState = styled(PFEmptyState)` width: var(--pf-c-empty-state--m-lg--MaxWidth); - max-width: 100%; + margin: 0 auto; `; async function logout() { diff --git a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx index 4249bcaf92..1d110768a1 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryAdd/InventoryAdd.jsx @@ -48,7 +48,9 @@ function InventoryAdd({ history, i18n }) { data: { id: inventoryId }, } = await InventoriesAPI.create({ organization: organization.id, - insights_credential: insights_credential.id, + insights_credential: insights_credential + ? insights_credential.id + : null, ...remainingValues, }); if (instanceGroups) { @@ -68,7 +70,15 @@ function InventoryAdd({ history, i18n }) { }; if (error) { - return ; + return ( + + + + + + + + ); } if (isLoading) { return ; diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx index 3f186431ec..7bacd2d3a5 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx @@ -77,6 +77,8 @@ function InventoryForm({ form.setFieldValue('organization', value); }} value={field.value} + touched={form.touched.organization} + error={form.errors.organization} required /> )} diff --git a/awx/ui_next/src/util/validators.jsx b/awx/ui_next/src/util/validators.jsx index 52edfd3f40..fe4627a935 100644 --- a/awx/ui_next/src/util/validators.jsx +++ b/awx/ui_next/src/util/validators.jsx @@ -1,9 +1,16 @@ import { t } from '@lingui/macro'; export function required(message, i18n) { + const errorMessage = message || i18n._(t`This field must not be blank`); return value => { if (typeof value === 'string' && !value.trim()) { - return message || i18n._(t`This field must not be blank`); + return errorMessage; + } + if (typeof value === 'number' && !Number.isNaN(value)) { + return undefined; + } + if (!value) { + return errorMessage; } return undefined; }; diff --git a/awx/ui_next/src/util/validators.test.js b/awx/ui_next/src/util/validators.test.js index 2fec22ec15..ceb5eecc0f 100644 --- a/awx/ui_next/src/util/validators.test.js +++ b/awx/ui_next/src/util/validators.test.js @@ -27,6 +27,16 @@ describe('validators', () => { }); }); + test('required interprets undefined as empty value', () => { + expect(required(null, i18n)(undefined)).toEqual({ + id: 'This field must not be blank', + }); + }); + + test('required interprets 0 as non-empty value', () => { + expect(required(null, i18n)(0)).toBeUndefined(); + }); + test('maxLength accepts value below max', () => { expect(maxLength(10, i18n)('snazzy')).toBeUndefined(); });