Wrap ExecutionEnv Lookup in SettingGroup component.

awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js

@@ -37,6 +37,7 @@ function ExecutionEnvironmentLookup({
   validate,
   value,
   fieldName,
+  overrideLabel,
 }) {
   const location = useLocation();
 
@@ -202,6 +203,9 @@ function ExecutionEnvironmentLookup({
     globalDefaultEnvironment,
     defaultExecutionEnvironment
   ) => {
+    if (overrideLabel) {
+      return null;
+    }
     if (globalDefaultEnvironment) {
       return t`Global Default Execution Environment`;
     }
@@ -241,6 +245,7 @@ ExecutionEnvironmentLookup.propTypes = {
   organizationId: oneOfType([number, string]),
   validate: func,
   fieldName: string,
+  overrideLabel: bool,
 };
 
 ExecutionEnvironmentLookup.defaultProps = {
@@ -253,6 +258,7 @@ ExecutionEnvironmentLookup.defaultProps = {
   organizationId: null,
   validate: () => undefined,
   fieldName: 'execution_environment',
+  overrideLabel: false,
 };
 
 export default ExecutionEnvironmentLookup;

awx/ui/src/components/Lookup/Lookup.js

@@ -54,14 +54,15 @@ function Lookup(props) {
   } = props;
   const [typedText, setTypedText] = useState('');
   const debounceRequest = useDebounce(onDebounce, 1000);
-
   useField({
     name: fieldName,
     validate: (val) => {
-      if (!multiple && !val && typedText && typedText !== '') {
-        return t`That value was not found. Please enter or select a valid value.`;
-      }
-      return validate(val);
+      setTimeout(() => {
+        if (!multiple && !val && typedText && typedText !== '') {
+          return t`That value was not found. Please enter or select a valid value.`;
+        }
+        return validate(val);
+      });
     },
   });
 
@@ -79,6 +80,8 @@ function Lookup(props) {
     dispatch({ type: 'SET_VALUE', value });
     if (value?.name) {
       setTypedText(value.name);
+    } else {
+      setTypedText('');
     }
   }, [value, multiple]);
 

awx/ui/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
 import { useHistory } from 'react-router-dom';
-import { t } from '@lingui/macro';
 import { Formik } from 'formik';
 import { Form } from '@patternfly/react-core';
 import { CardBody } from 'components/Card';
@@ -8,7 +7,6 @@ import ContentError from 'components/ContentError';
 import ContentLoading from 'components/ContentLoading';
 import { FormSubmitError } from 'components/FormField';
 import { FormColumnLayout } from 'components/FormLayout';
-import { ExecutionEnvironmentLookup } from 'components/Lookup';
 import { useSettings } from 'contexts/Settings';
 import useModal from 'hooks/useModal';
 import useRequest from 'hooks/useRequest';
@@ -16,6 +14,7 @@ import { SettingsAPI, ExecutionEnvironmentsAPI } from 'api';
 import {
   BooleanField,
   EncryptedField,
+  ExecutionEnvField,
   InputField,
   ObjectField,
   RevertAllAlert,
@@ -174,32 +173,9 @@ function MiscSystemEdit() {
                   name="ACTIVITY_STREAM_ENABLED_FOR_INVENTORY_SYNC"
                   config={system.ACTIVITY_STREAM_ENABLED_FOR_INVENTORY_SYNC}
                 />
-                <ExecutionEnvironmentLookup
-                  helperTextInvalid={
-                    formik.errors.DEFAULT_EXECUTION_ENVIRONMENT
-                  }
-                  isValid={
-                    !formik.touched.DEFAULT_EXECUTION_ENVIRONMENT ||
-                    !formik.errors.DEFAULT_EXECUTION_ENVIRONMENT
-                  }
-                  onBlur={() =>
-                    formik.setFieldTouched('DEFAULT_EXECUTION_ENVIRONMENT')
-                  }
-                  value={formik.values.DEFAULT_EXECUTION_ENVIRONMENT}
-                  onChange={(value) => {
-                    formik.setFieldValue(
-                      'DEFAULT_EXECUTION_ENVIRONMENT',
-                      value
-                    );
-                    formik.setFieldTouched(
-                      'DEFAULT_EXECUTION_ENVIRONMENT',
-                      true,
-                      false
-                    );
-                  }}
-                  popoverContent={t`The Execution Environment to be used when one has not been configured for a job template.`}
-                  isGlobalDefaultEnvironment
-                  fieldName="DEFAULT_EXECUTION_ENVIRONMENT"
+                <ExecutionEnvField
+                  name="DEFAULT_EXECUTION_ENVIRONMENT"
+                  config={system.DEFAULT_EXECUTION_ENVIRONMENT}
                 />
                 <InputField
                   name="TOWER_URL_BASE"

awx/ui/src/screens/Setting/shared/SharedFields.js

@@ -17,6 +17,7 @@ import FileUploadIcon from '@patternfly/react-icons/dist/js/icons/file-upload-ic
 import { ExclamationCircleIcon as PFExclamationCircleIcon } from '@patternfly/react-icons';
 import styled from 'styled-components';
 import AnsibleSelect from 'components/AnsibleSelect';
+import { ExecutionEnvironmentLookup } from 'components/Lookup';
 import CodeEditor from 'components/CodeEditor';
 import { PasswordInput } from 'components/FormField';
 import { FormFullWidthLayout } from 'components/FormLayout';
@@ -229,6 +230,39 @@ EncryptedField.propTypes = {
   config: shape({}).isRequired,
 };
 
+const ExecutionEnvField = ({ name, config, isRequired = false }) => {
+  const validate = isRequired ? required(null) : null;
+  const [field, meta, helpers] = useField({ name, validate });
+  const isValid = !meta.error || !meta.touched;
+  return config ? (
+    <SettingGroup
+      defaultValue={config.default ?? ''}
+      fieldId={name}
+      helperTextInvalid={meta.error}
+      isRequired={isRequired}
+      label={config.label}
+      popoverContent={config.help_text}
+      validated={isValid ? 'default' : 'error'}
+      isDisabled={field.value === null}
+    >
+      <ExecutionEnvironmentLookup
+        onBlur={() => helpers.setTouched(true)}
+        value={field.value}
+        onChange={(value) => {
+          helpers.setValue(value);
+          helpers.setTouched(true);
+        }}
+        overrideLabel
+        fieldName={name}
+      />
+    </SettingGroup>
+  ) : null;
+};
+ExecutionEnvField.propTypes = {
+  name: string.isRequired,
+  config: shape({}).isRequired,
+};
+
 const InputAlertField = ({ name, config }) => {
   const [field, meta] = useField({ name });
   const isValid = !(meta.touched && meta.error);
@@ -341,7 +375,6 @@ const InputField = ({ name, config, type = 'text', isRequired = false }) => {
   ];
   const [field, meta] = useField({ name, validate: combine(validators) });
   const isValid = !(meta.touched && meta.error);
-
   return config ? (
     <SettingGroup
       defaultValue={config.default ?? ''}
@@ -517,6 +550,7 @@ export {
   BooleanField,
   ChoiceField,
   EncryptedField,
+  ExecutionEnvField,
   FileUploadField,
   InputField,
   ObjectField,

awx/ui/src/screens/Setting/shared/index.js

@@ -5,6 +5,7 @@ export {
   BooleanField,
   ChoiceField,
   EncryptedField,
+  ExecutionEnvField,
   InputField,
   ObjectField,
   InputAlertField,