diff --git a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx index a974f913f2..d570e79128 100644 --- a/awx/ui_next/src/components/Lookup/InventoryLookup.jsx +++ b/awx/ui_next/src/components/Lookup/InventoryLookup.jsx @@ -12,13 +12,24 @@ const getInventories = async params => InventoriesAPI.read(params); class InventoryLookup extends React.Component { render() { - const { value, tooltip, onChange, required, i18n } = this.props; + const { + value, + tooltip, + onChange, + onBlur, + required, + isValid, + helperTextInvalid, + i18n, + } = this.props; return ( {tooltip && } ( form.setFieldTouched('inventory')} tooltip={i18n._(t`Select the inventory containing the hosts you want this job to manage.`)} + isValid={!form.touched.inventory || !form.errors.inventory} + helperTextInvalid={form.errors.inventory} onChange={value => { form.setFieldValue('inventory', value.id); form.setFieldValue('organizationId', value.organization); this.setState({ inventory: value }); }} required + touched={form.touched.inventory} + error={form.errors.inventory} /> )} /> @@ -249,12 +254,12 @@ class JobTemplateForm extends Component { validate={this.handleProjectValidation()} render={({ form }) => ( form.setFieldTouched('project')} tooltip={i18n._(t`Select the project containing the playbook you want this job to execute.`)} + isValid={!form.touched.project || !form.errors.project} + helperTextInvalid={form.errors.project} onChange={value => { form.setFieldValue('project', value.id); this.setState({ project: value }); @@ -287,6 +292,7 @@ class JobTemplateForm extends Component { isValid={isValid} form={form} field={field} + onBlur={() => form.setFieldTouched('playbook')} onError={err => this.setState({ contentError: err })} /> diff --git a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx index 3e7d03c37e..3f49be7a37 100644 --- a/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx +++ b/awx/ui_next/src/screens/Template/shared/PlaybookSelect.jsx @@ -5,7 +5,15 @@ import { t } from '@lingui/macro'; import AnsibleSelect from '@components/AnsibleSelect'; import { ProjectsAPI } from '@api'; -function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) { +function PlaybookSelect({ + projectId, + isValid, + form, + field, + onBlur, + onError, + i18n, +}) { const [options, setOptions] = useState([]); useEffect(() => { if (!projectId) { @@ -40,6 +48,7 @@ function PlaybookSelect({ projectId, isValid, form, field, onError, i18n }) { isValid={isValid} form={form} {...field} + onBlur={onBlur} /> ); }