diff --git a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js b/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js index 52a4aab23b..9aa29c1d0d 100644 --- a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js +++ b/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; diff --git a/awx/ui/src/components/Lookup/Lookup.js b/awx/ui/src/components/Lookup/Lookup.js index 4449cc85ea..5b0241d8d7 100644 --- a/awx/ui/src/components/Lookup/Lookup.js +++ b/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]); diff --git a/awx/ui/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.js b/awx/ui/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.js index 37cc5ddce2..31d3dc14e7 100644 --- a/awx/ui/src/screens/Setting/MiscSystem/MiscSystemEdit/MiscSystemEdit.js +++ b/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} /> - - 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" + { + const validate = isRequired ? required(null) : null; + const [field, meta, helpers] = useField({ name, validate }); + const isValid = !meta.error || !meta.touched; + return config ? ( + + helpers.setTouched(true)} + value={field.value} + onChange={(value) => { + helpers.setValue(value); + helpers.setTouched(true); + }} + overrideLabel + fieldName={name} + /> + + ) : 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 ? (