From f06eb5e2f1e8c1f546dcc470c711f1446e5033ab Mon Sep 17 00:00:00 2001 From: Kia Lam Date: Tue, 21 Sep 2021 09:38:21 -0700 Subject: [PATCH 1/2] Wrap ExecutionEnv Lookup in SettingGroup component. --- .../Lookup/ExecutionEnvironmentLookup.js | 6 ++++ awx/ui/src/components/Lookup/Lookup.js | 13 ++++--- .../MiscSystemEdit/MiscSystemEdit.js | 32 +++-------------- .../screens/Setting/shared/SharedFields.js | 36 ++++++++++++++++++- awx/ui/src/screens/Setting/shared/index.js | 1 + 5 files changed, 54 insertions(+), 34 deletions(-) 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 ? ( Date: Thu, 23 Sep 2021 10:23:51 -0700 Subject: [PATCH 2/2] Remove validation and unused vars for EE Lookup. --- .../Lookup/ExecutionEnvironmentLookup.js | 20 ++----------------- .../Lookup/ExecutionEnvironmentLookup.test.js | 6 +----- awx/ui/src/components/Lookup/Lookup.js | 10 ++++------ .../screens/Setting/shared/SharedFields.js | 10 +++------- 4 files changed, 10 insertions(+), 36 deletions(-) diff --git a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js b/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js index 9aa29c1d0d..52b8263088 100644 --- a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js +++ b/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.js @@ -24,9 +24,7 @@ function ExecutionEnvironmentLookup({ id, globallyAvailable, helperTextInvalid, - isDefaultEnvironment, isDisabled, - isGlobalDefaultEnvironment, isValid, onBlur, onChange, @@ -40,7 +38,6 @@ function ExecutionEnvironmentLookup({ overrideLabel, }) { const location = useLocation(); - const { request: fetchProject, error: fetchProjectError, @@ -199,26 +196,17 @@ function ExecutionEnvironmentLookup({ ); - const renderLabel = ( - globalDefaultEnvironment, - defaultExecutionEnvironment - ) => { + const renderLabel = () => { if (overrideLabel) { return null; } - if (globalDefaultEnvironment) { - return t`Global Default Execution Environment`; - } - if (defaultExecutionEnvironment) { - return t`Default Execution Environment`; - } return t`Execution Environment`; }; return ( } helperTextInvalid={helperTextInvalid} validated={isValid ? 'default' : 'error'} @@ -239,8 +227,6 @@ ExecutionEnvironmentLookup.propTypes = { value: ExecutionEnvironment, popoverContent: string, onChange: func.isRequired, - isDefaultEnvironment: bool, - isGlobalDefaultEnvironment: bool, projectId: oneOfType([number, string]), organizationId: oneOfType([number, string]), validate: func, @@ -251,8 +237,6 @@ ExecutionEnvironmentLookup.propTypes = { ExecutionEnvironmentLookup.defaultProps = { id: 'execution-environments', popoverContent: '', - isDefaultEnvironment: false, - isGlobalDefaultEnvironment: false, value: null, projectId: null, organizationId: null, diff --git a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.test.js b/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.test.js index d110059a9b..ea6c82df81 100644 --- a/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.test.js +++ b/awx/ui/src/components/Lookup/ExecutionEnvironmentLookup.test.js @@ -54,7 +54,6 @@ describe('ExecutionEnvironmentLookup', () => { wrapper = mountWithContexts( {}} /> @@ -64,12 +63,9 @@ describe('ExecutionEnvironmentLookup', () => { wrapper.update(); expect(ExecutionEnvironmentsAPI.read).toHaveBeenCalledTimes(1); expect(wrapper.find('ExecutionEnvironmentLookup')).toHaveLength(1); - expect( - wrapper.find('FormGroup[label="Default Execution Environment"]').length - ).toBe(1); expect( wrapper.find('FormGroup[label="Execution Environment"]').length - ).toBe(0); + ).toBe(1); }); test('should fetch execution environments', async () => { diff --git a/awx/ui/src/components/Lookup/Lookup.js b/awx/ui/src/components/Lookup/Lookup.js index 5b0241d8d7..357b607d6a 100644 --- a/awx/ui/src/components/Lookup/Lookup.js +++ b/awx/ui/src/components/Lookup/Lookup.js @@ -57,12 +57,10 @@ function Lookup(props) { useField({ name: fieldName, 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); - }); + if (!multiple && !val && typedText && typedText !== '') { + return t`That value was not found. Please enter or select a valid value.`; + } + return validate(val); }, }); diff --git a/awx/ui/src/screens/Setting/shared/SharedFields.js b/awx/ui/src/screens/Setting/shared/SharedFields.js index 8a9c08a38f..887547186b 100644 --- a/awx/ui/src/screens/Setting/shared/SharedFields.js +++ b/awx/ui/src/screens/Setting/shared/SharedFields.js @@ -231,9 +231,7 @@ EncryptedField.propTypes = { }; 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; + const [field, meta, helpers] = useField({ name }); return config ? ( { isRequired={isRequired} label={config.label} popoverContent={config.help_text} - validated={isValid ? 'default' : 'error'} isDisabled={field.value === null} + onRevertCallback={() => helpers.setValue(config.default)} > helpers.setTouched(true)} value={field.value} onChange={(value) => { - helpers.setValue(value); - helpers.setTouched(true); + helpers.setValue(value, false); }} overrideLabel fieldName={name}