Merge pull request #5035 from keithjgrant/4617-inventory-lookup-error-message

Add error messages for InventorySelect

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

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 (
       <FormGroup
         label={i18n._(t`Inventory`)}
         isRequired={required}
         fieldId="inventory-lookup"
+        isValid={isValid}
+        helperTextInvalid={helperTextInvalid}
       >
         {tooltip && <FieldTooltip content={tooltip} />}
         <Lookup
@@ -27,6 +38,7 @@ class InventoryLookup extends React.Component {
           name="inventory"
           value={value}
           onLookupSave={onChange}
+          onBlur={onBlur}
           getItems={getInventories}
           required={required}
           qsNamespace="inventory"

awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx

@@ -229,18 +229,23 @@ class JobTemplateForm extends Component {
           />
           <Field
             name="inventory"
-            validate={required(null, i18n)}
+            validate={required(i18n._(t`Select a value for this field`), i18n)}
             render={({ form }) => (
               <InventoryLookup
                 value={inventory}
+                onBlur={() => 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 }) => (
               <ProjectLookup
-                helperTextInvalid={form.errors.project}
-                isValid={!form.errors.project}
                 value={project}
-                onBlur={handleBlur}
+                onBlur={() => 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 })}
                   />
                 </FormGroup>

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}
     />
   );
 }