diff --git a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx index 46a3617d7e..229024bfbe 100644 --- a/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx +++ b/awx/ui_next/src/components/AdHocCommands/AdHocDetailsStep.jsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; import { BrandName } from '../../variables'; import AnsibleSelect from '../AnsibleSelect'; import FormField from '../FormField'; -import { VariablesField } from '../CodeMirrorInput'; +import { VariablesField } from '../CodeEditor'; import { FormColumnLayout, FormFullWidthLayout, diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx similarity index 94% rename from awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx rename to awx/ui_next/src/components/CodeEditor/CodeEditor.jsx index e560e18776..7db780cb75 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx +++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useCallback } from 'react'; import { oneOf, bool, number, string, func } from 'prop-types'; -import ReactAceEditor from 'react-ace'; +import ReactAce from 'react-ace'; import 'ace-builds/src-noconflict/mode-json'; import 'ace-builds/src-noconflict/mode-javascript'; import 'ace-builds/src-noconflict/mode-yaml'; @@ -11,7 +11,7 @@ import styled from 'styled-components'; const LINE_HEIGHT = 24; const PADDING = 12; -const AceEditor = styled(ReactAceEditor)` +const AceEditor = styled(ReactAce)` font-family: var(--pf-global--FontFamily--monospace); max-height: 90vh; @@ -33,8 +33,9 @@ const AceEditor = styled(ReactAceEditor)` border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth); }`} `; +AceEditor.displayName = 'AceEditor'; -function CodeInput({ +function CodeEditor({ id, value, onChange, @@ -126,7 +127,7 @@ function CodeInput({ ); } -CodeMirrorInput.propTypes = { +CodeEditor.propTypes = { value: string.isRequired, onChange: func, mode: oneOf(['javascript', 'yaml', 'jinja2']).isRequired, @@ -136,7 +137,7 @@ CodeMirrorInput.propTypes = { rows: number, className: string, }; -CodeMirrorInput.defaultProps = { +CodeEditor.defaultProps = { readOnly: false, onChange: () => {}, rows: 6, @@ -145,4 +146,4 @@ CodeMirrorInput.defaultProps = { className: '', }; -export default CodeInput; +export default CodeEditor; diff --git a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx new file mode 100644 index 0000000000..2da3604574 --- /dev/null +++ b/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import CodeEditor from './CodeEditor'; + +describe('CodeEditor', () => { + beforeEach(() => { + document.body.createTextRange = jest.fn(); + }); + + it('should trigger onChange prop', () => { + const onChange = jest.fn(); + const wrapper = mount( + + ); + const aceEditor = wrapper.find('AceEditor'); + expect(aceEditor.prop('mode')).toEqual('yaml'); + expect(aceEditor.prop('setOptions').readOnly).toEqual(false); + aceEditor.prop('onChange')('newvalue'); + expect(onChange).toHaveBeenCalledWith('newvalue'); + }); + + it('should render in read only mode', () => { + const onChange = jest.fn(); + const wrapper = mount( + + ); + const aceEditor = wrapper.find('AceEditor'); + expect(aceEditor.prop('setOptions').readOnly).toEqual(true); + }); +}); diff --git a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx b/awx/ui_next/src/components/CodeEditor/CodeEditorField.jsx similarity index 86% rename from awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx rename to awx/ui_next/src/components/CodeEditor/CodeEditorField.jsx index 35ebf32721..61dec6a04f 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx +++ b/awx/ui_next/src/components/CodeEditor/CodeEditorField.jsx @@ -11,10 +11,10 @@ import { } from 'prop-types'; import { useField } from 'formik'; import { FormGroup } from '@patternfly/react-core'; -import CodeMirrorInput from './CodeMirrorInput'; +import CodeEditor from './CodeEditor'; import Popover from '../Popover'; -function CodeMirrorField({ +function CodeEditorField({ id, name, label, @@ -39,7 +39,7 @@ function CodeMirrorField({ label={label} labelIcon={} > - ); } -CodeMirrorField.propTypes = { +CodeEditorField.propTypes = { helperText: string, id: string.isRequired, name: string.isRequired, @@ -63,7 +63,7 @@ CodeMirrorField.propTypes = { rows: number, }; -CodeMirrorField.defaultProps = { +CodeEditorField.defaultProps = { helperText: '', validate: () => {}, isRequired: false, @@ -71,4 +71,4 @@ CodeMirrorField.defaultProps = { rows: 5, }; -export default CodeMirrorField; +export default CodeEditorField; diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx similarity index 98% rename from awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx rename to awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx index b5501fb0b7..f5cfd91373 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesDetail.jsx @@ -12,7 +12,7 @@ import { isJsonObject, isJsonString, } from '../../util/yaml'; -import CodeMirrorInput from './CodeMirrorInput'; +import CodeEditor from './CodeEditor'; import { JSON_MODE, YAML_MODE } from './constants'; function getValueAsMode(value, mode) { @@ -99,7 +99,7 @@ function VariablesDetail({ dataCy, helpText, value, label, rows, fullHeight }) { fullWidth css="grid-column: 1 / -1; margin-top: -20px" > - ', () => { - test('should render readonly CodeMirrorInput', () => { + test('should render readonly CodeEditor', () => { const wrapper = mountWithContexts( ); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); expect(input.prop('mode')).toEqual('yaml'); expect(input.prop('value')).toEqual('---foo: bar'); @@ -21,7 +21,7 @@ describe('', () => { const wrapper = mountWithContexts( ); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input).toHaveLength(1); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{"foo": "bar"}'); @@ -32,12 +32,12 @@ describe('', () => { ); wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{\n "foo": "bar"\n}'); wrapper.find('MultiButtonToggle').invoke('onChange')('yaml'); - const input2 = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input2 = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input2.prop('mode')).toEqual('yaml'); expect(input2.prop('value')).toEqual('foo: bar\n'); }); @@ -46,9 +46,7 @@ describe('', () => { const wrapper = mountWithContexts( ); - expect(wrapper.find('VariablesDetail___StyledCodeMirrorInput').length).toBe( - 1 - ); + expect(wrapper.find('VariablesDetail___StyledCodeEditor').length).toBe(1); expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables'); }); @@ -63,7 +61,7 @@ describe('', () => { value: '---bar: baz', }); wrapper.update(); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input.prop('mode')).toEqual('javascript'); expect(input.prop('value')).toEqual('{\n "bar": "baz"\n}'); }); @@ -72,7 +70,7 @@ describe('', () => { const wrapper = mountWithContexts( ); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input.prop('value')).toEqual('---'); }); @@ -84,7 +82,7 @@ describe('', () => { wrapper.find('MultiButtonToggle').invoke('onChange')('javascript'); }); wrapper.setProps({ value: '' }); - const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput'); + const input = wrapper.find('VariablesDetail___StyledCodeEditor'); expect(input.prop('value')).toEqual('{}'); }); }); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx similarity index 97% rename from awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx rename to awx/ui_next/src/components/CodeEditor/VariablesField.jsx index 1db21fdf04..8fbf1e4bfa 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesField.jsx @@ -8,7 +8,7 @@ import { Split, SplitItem } from '@patternfly/react-core'; import { CheckboxField } from '../FormField'; import MultiButtonToggle from '../MultiButtonToggle'; import { yamlToJson, jsonToYaml, isJsonString } from '../../util/yaml'; -import CodeMirrorInput from './CodeMirrorInput'; +import CodeEditor from './CodeEditor'; import Popover from '../Popover'; import { JSON_MODE, YAML_MODE } from './constants'; @@ -76,7 +76,7 @@ function VariablesField({ /> )} - { document.body.createTextRange = jest.fn(); }); - it('should render code mirror input', () => { + it('should render code editor', () => { const value = '---\n'; const wrapper = mountWithContexts( @@ -18,8 +18,8 @@ describe('VariablesField', () => { )} ); - const codemirror = wrapper.find('Controlled'); - expect(codemirror.prop('value')).toEqual(value); + const codeEditor = wrapper.find('CodeEditor'); + expect(codeEditor.prop('value')).toEqual(value); }); it('should render yaml/json toggles', async () => { @@ -39,7 +39,7 @@ describe('VariablesField', () => { buttons.at(1).simulate('click'); }); wrapper.update(); - expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript'); + expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript'); const buttons2 = wrapper.find('Button'); expect(buttons2.at(0).prop('variant')).toEqual('secondary'); expect(buttons2.at(1).prop('variant')).toEqual('primary'); @@ -47,7 +47,7 @@ describe('VariablesField', () => { buttons2.at(0).simulate('click'); }); wrapper.update(); - expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('yaml'); + expect(wrapper.find('CodeEditor').prop('mode')).toEqual('yaml'); }); it('should set Formik error if yaml is invalid', async () => { @@ -65,7 +65,7 @@ describe('VariablesField', () => { .simulate('click'); wrapper.update(); - const field = wrapper.find('CodeMirrorInput'); + const field = wrapper.find('CodeEditor'); expect(field.prop('hasErrors')).toEqual(true); expect(wrapper.find('.pf-m-error')).toHaveLength(1); }); @@ -102,9 +102,7 @@ describe('VariablesField', () => { ); await act(async () => { - wrapper.find('CodeMirrorInput').invoke('onChange')( - '---\nnewval: changed' - ); + wrapper.find('CodeEditor').invoke('onChange')('---\nnewval: changed'); wrapper.find('form').simulate('submit'); }); @@ -129,6 +127,6 @@ describe('VariablesField', () => { ); - expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript'); + expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript'); }); }); diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx b/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx similarity index 97% rename from awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx rename to awx/ui_next/src/components/CodeEditor/VariablesInput.jsx index a43962bd76..354e263b69 100644 --- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx +++ b/awx/ui_next/src/components/CodeEditor/VariablesInput.jsx @@ -4,7 +4,7 @@ import { Split, SplitItem } from '@patternfly/react-core'; import styled from 'styled-components'; import { yamlToJson, jsonToYaml, isJsonString } from '../../util/yaml'; import MultiButtonToggle from '../MultiButtonToggle'; -import CodeMirrorInput from './CodeMirrorInput'; +import CodeEditor from './CodeEditor'; import { JSON_MODE, YAML_MODE } from './constants'; function formatJson(jsonString) { @@ -63,7 +63,7 @@ function VariablesInput(props) { /> - { - beforeEach(() => { - document.body.createTextRange = jest.fn(); - }); - - it('should trigger onChange prop', () => { - const onChange = jest.fn(); - const wrapper = mount( - - ); - const codemirror = wrapper.find('Controlled'); - expect(codemirror.prop('mode')).toEqual('yaml'); - expect(codemirror.prop('options').readOnly).toEqual(false); - codemirror.prop('onBeforeChange')(null, null, 'newvalue'); - expect(onChange).toHaveBeenCalledWith('newvalue'); - }); - - it('should render in read only mode', () => { - const onChange = jest.fn(); - const wrapper = mount( - - ); - const codemirror = wrapper.find('Controlled'); - expect(codemirror.prop('options').readOnly).toEqual(true); - }); -}); diff --git a/awx/ui_next/src/components/DetailList/CodeDetail.jsx b/awx/ui_next/src/components/DetailList/CodeDetail.jsx index 6d78ef043a..08c935b18e 100644 --- a/awx/ui_next/src/components/DetailList/CodeDetail.jsx +++ b/awx/ui_next/src/components/DetailList/CodeDetail.jsx @@ -11,7 +11,7 @@ import { } from 'prop-types'; import { TextListItemVariants } from '@patternfly/react-core'; import { DetailName, DetailValue } from './Detail'; -import CodeMirrorInput from '../CodeMirrorInput'; +import CodeEditor from '../CodeEditor'; import Popover from '../Popover'; function CodeDetail({ @@ -52,7 +52,7 @@ function CodeDetail({ css="grid-column: 1 / -1; margin-top: -20px" data-cy={valueCy} > - ', () => { expect(sshKeyUnlockDetail.length).toBe(1); expect(sshKeyUnlockDetail.find('CredentialChip').length).toBe(1); expect( - wrapper.find('CodeMirrorInput#credential-ssh_key_unlock-metadata').props() + wrapper.find('CodeEditor#credential-ssh_key_unlock-metadata').props() .value ).toBe(JSON.stringify(mockInputSource.metadata, null, 2)); expectDetailToMatch( diff --git a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx index 1b99c16867..0cdf678d67 100644 --- a/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx +++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeDetails/CredentialTypeDetails.jsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { Link, useHistory } from 'react-router-dom'; import { Button } from '@patternfly/react-core'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import AlertModal from '../../../components/AlertModal'; import { CardBody, CardActionsRow } from '../../../components/Card'; import DeleteButton from '../../../components/DeleteButton'; diff --git a/awx/ui_next/src/screens/CredentialType/shared/CredentialTypeForm.jsx b/awx/ui_next/src/screens/CredentialType/shared/CredentialTypeForm.jsx index 8bb5f113ef..a5e9c540a9 100644 --- a/awx/ui_next/src/screens/CredentialType/shared/CredentialTypeForm.jsx +++ b/awx/ui_next/src/screens/CredentialType/shared/CredentialTypeForm.jsx @@ -5,7 +5,7 @@ import { withI18n } from '@lingui/react'; import { t } from '@lingui/macro'; import { Form } from '@patternfly/react-core'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import FormField, { FormSubmitError } from '../../../components/FormField'; import FormActionGroup from '../../../components/FormActionGroup'; import { required } from '../../../util/validators'; diff --git a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx index ae140d3786..aecb17a53e 100644 --- a/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx +++ b/awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx @@ -13,7 +13,7 @@ import { Detail, UserDateDetail, } from '../../../components/DetailList'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import Sparkline from '../../../components/Sparkline'; import DeleteButton from '../../../components/DeleteButton'; import { HostsAPI } from '../../../api'; diff --git a/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx b/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx index 1a107ab28e..f33c989f5b 100644 --- a/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx +++ b/awx/ui_next/src/screens/Host/HostFacts/HostFacts.jsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { Host } from '../../../types'; import { CardBody } from '../../../components/Card'; import { DetailList } from '../../../components/DetailList'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import ContentError from '../../../components/ContentError'; import ContentLoading from '../../../components/ContentLoading'; import useRequest from '../../../util/useRequest'; diff --git a/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx b/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx index 6cce625c78..6cf0bedf87 100644 --- a/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx +++ b/awx/ui_next/src/screens/InstanceGroup/ContainerGroupDetails/ContainerGroupDetails.jsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { Link, useHistory } from 'react-router-dom'; import { Button, Label } from '@patternfly/react-core'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import AlertModal from '../../../components/AlertModal'; import { CardBody, CardActionsRow } from '../../../components/Card'; import DeleteButton from '../../../components/DeleteButton'; diff --git a/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx b/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx index e41ab0a1b0..719c907d1b 100644 --- a/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx +++ b/awx/ui_next/src/screens/InstanceGroup/shared/ContainerGroupForm.jsx @@ -19,7 +19,7 @@ import { SubFormLayout, } from '../../../components/FormLayout'; import CredentialLookup from '../../../components/Lookup/CredentialLookup'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; function ContainerGroupFormFields({ i18n, instanceGroup }) { const { setFieldValue } = useFormikContext(); diff --git a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx index 09dfe7ed54..ec441d7390 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryDetail/InventoryDetail.jsx @@ -10,7 +10,7 @@ import { Detail, UserDateDetail, } from '../../../components/DetailList'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import DeleteButton from '../../../components/DeleteButton'; import ErrorDetail from '../../../components/ErrorDetail'; import ContentError from '../../../components/ContentError'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx index f8ce4879c8..8a4fa92fdf 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryGroupDetail/InventoryGroupDetail.jsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { Button } from '@patternfly/react-core'; import { withI18n } from '@lingui/react'; import { useHistory, useParams } from 'react-router-dom'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import { CardBody, CardActionsRow } from '../../../components/Card'; import ErrorDetail from '../../../components/ErrorDetail'; import AlertModal from '../../../components/AlertModal'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx index a2b48fecd1..c90c20885f 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHostDetail/InventoryHostDetail.jsx @@ -13,7 +13,7 @@ import { Detail, UserDateDetail, } from '../../../components/DetailList'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import Sparkline from '../../../components/Sparkline'; import DeleteButton from '../../../components/DeleteButton'; import { HostsAPI } from '../../../api'; diff --git a/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx b/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx index 2f24b4cb38..6bffd37ba4 100644 --- a/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx +++ b/awx/ui_next/src/screens/Inventory/InventoryHostFacts/InventoryHostFacts.jsx @@ -4,7 +4,7 @@ import { t } from '@lingui/macro'; import { Host } from '../../../types'; import { CardBody } from '../../../components/Card'; import { DetailList } from '../../../components/DetailList'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import ContentError from '../../../components/ContentError'; import ContentLoading from '../../../components/ContentLoading'; import useRequest from '../../../util/useRequest'; diff --git a/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx b/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx index 4383998994..efc2a8ff73 100644 --- a/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/InventorySourceDetail/InventorySourceDetail.jsx @@ -6,7 +6,7 @@ import { t } from '@lingui/macro'; import { Button, List, ListItem } from '@patternfly/react-core'; import AlertModal from '../../../components/AlertModal'; import { CardBody, CardActionsRow } from '../../../components/Card'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import ContentError from '../../../components/ContentError'; import ContentLoading from '../../../components/ContentLoading'; import CredentialChip from '../../../components/CredentialChip'; diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx index 8aee3165e5..fa29c0ad61 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryDetail/SmartInventoryDetail.jsx @@ -12,7 +12,7 @@ import useRequest, { useDismissableError } from '../../../util/useRequest'; import AlertModal from '../../../components/AlertModal'; import { CardBody, CardActionsRow } from '../../../components/Card'; import ChipGroup from '../../../components/ChipGroup'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import ContentError from '../../../components/ContentError'; import ContentLoading from '../../../components/ContentLoading'; import DeleteButton from '../../../components/DeleteButton'; diff --git a/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx b/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx index ca992575b1..3abb48d0ca 100644 --- a/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx +++ b/awx/ui_next/src/screens/Inventory/SmartInventoryHostDetail/SmartInventoryHostDetail.jsx @@ -10,7 +10,7 @@ import { UserDateDetail, } from '../../../components/DetailList'; import Sparkline from '../../../components/Sparkline'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; function SmartInventoryHostDetail({ host, i18n }) { const { diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx index 0cce85e9ca..c02edb8ea5 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx @@ -5,7 +5,7 @@ import { t } from '@lingui/macro'; import { func, number, shape } from 'prop-types'; import { Form } from '@patternfly/react-core'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import FormField, { FormSubmitError } from '../../../components/FormField'; import FormActionGroup from '../../../components/FormActionGroup'; import { required } from '../../../util/validators'; diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx index 5fa41a2921..ac894d918b 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx @@ -7,7 +7,7 @@ import { t } from '@lingui/macro'; import { CardBody } from '../../../components/Card'; import FormField, { FormSubmitError } from '../../../components/FormField'; import FormActionGroup from '../../../components/FormActionGroup/FormActionGroup'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import { required } from '../../../util/validators'; import { FormColumnLayout, diff --git a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx index 6501b2bf4b..31f5a4f12e 100644 --- a/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/InventorySourceSubForms/SharedFields.jsx @@ -5,7 +5,7 @@ import { useField } from 'formik'; import { FormGroup } from '@patternfly/react-core'; import { minMaxValue, regExp } from '../../../../util/validators'; import AnsibleSelect from '../../../../components/AnsibleSelect'; -import { VariablesField } from '../../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../../components/CodeEditor'; import FormField, { CheckboxField } from '../../../../components/FormField'; import { FormFullWidthLayout, diff --git a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx index a851fbfdc4..fca698aef2 100644 --- a/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx +++ b/awx/ui_next/src/screens/Inventory/shared/SmartInventoryForm.jsx @@ -6,7 +6,7 @@ import { useLocation } from 'react-router-dom'; import { func, shape, arrayOf } from 'prop-types'; import { Form } from '@patternfly/react-core'; import { InstanceGroup } from '../../../types'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import ContentError from '../../../components/ContentError'; import ContentLoading from '../../../components/ContentLoading'; import FormActionGroup from '../../../components/FormActionGroup'; diff --git a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx index ad0be4c9e6..176ca95556 100644 --- a/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx +++ b/awx/ui_next/src/screens/Job/JobDetail/JobDetail.jsx @@ -16,7 +16,7 @@ import { import { CardBody, CardActionsRow } from '../../../components/Card'; import ChipGroup from '../../../components/ChipGroup'; import CredentialChip from '../../../components/CredentialChip'; -import { VariablesInput as _VariablesInput } from '../../../components/CodeMirrorInput'; +import { VariablesInput as _VariablesInput } from '../../../components/CodeEditor'; import DeleteButton from '../../../components/DeleteButton'; import ErrorDetail from '../../../components/ErrorDetail'; import { diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx index f82e12eb00..20f363a849 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.jsx @@ -8,7 +8,7 @@ import { AllHtmlEntities } from 'html-entities'; import StatusIcon from '../../../components/StatusIcon'; import { DetailList, Detail } from '../../../components/DetailList'; import ContentEmpty from '../../../components/ContentEmpty'; -import CodeMirrorInput from '../../../components/CodeMirrorInput'; +import CodeEditor from '../../../components/CodeEditor'; const entities = new AllHtmlEntities(); @@ -45,18 +45,18 @@ const processEventStatus = event => { return status; }; -const processCodeMirrorValue = value => { - let codeMirrorValue; +const processCodeEditorValue = value => { + let codeEditorValue; if (value === undefined) { - codeMirrorValue = false; + codeEditorValue = false; } else if (value === '') { - codeMirrorValue = ' '; + codeEditorValue = ' '; } else if (typeof value === 'string') { - codeMirrorValue = entities.encode(value); + codeEditorValue = entities.encode(value); } else { - codeMirrorValue = value; + codeEditorValue = value; } - return codeMirrorValue; + return codeEditorValue; }; const processStdOutValue = hostEvent => { @@ -90,9 +90,9 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) { setActiveTabKey(tabIndex); }; - const jsonObj = processCodeMirrorValue(hostEvent?.event_data?.res); - const stdErr = processCodeMirrorValue(hostEvent?.event_data?.res?.stderr); - const stdOut = processCodeMirrorValue(processStdOutValue(hostEvent)); + const jsonObj = processCodeEditorValue(hostEvent?.event_data?.res); + const stdErr = processCodeEditorValue(hostEvent?.event_data?.res?.stderr); + const stdOut = processCodeEditorValue(processStdOutValue(hostEvent)); return ( {activeTabKey === 1 && jsonObj ? ( - {activeTabKey === 2 && stdOut ? ( - {activeTabKey === 3 && stdErr ? ( - {}} diff --git a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx index bb4b538142..3fe04f05a8 100644 --- a/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx +++ b/awx/ui_next/src/screens/Job/JobOutput/HostEventModal.test.jsx @@ -188,12 +188,12 @@ describe('HostEventModal', () => { expect(jsonSection.find('EmptyState').length).toBe(1); wrapper.find('button[aria-label="JSON tab"]').simulate('click'); findSections(wrapper); - expect(jsonSection.find('CodeMirrorInput').length).toBe(1); + expect(jsonSection.find('CodeEditor').length).toBe(1); - const codemirror = jsonSection.find('CodeMirrorInput Controlled'); - expect(codemirror.prop('mode')).toBe('javascript'); - expect(codemirror.prop('options').readOnly).toBe(true); - expect(codemirror.prop('value')).toEqual(jsonValue); + const codeEditor = jsonSection.find('CodeEditor'); + expect(codeEditor.prop('mode')).toBe('javascript'); + expect(codeEditor.prop('readOnly')).toBe(true); + expect(codeEditor.prop('value')).toEqual(jsonValue); }); test('should display Standard Out tab content on tab click', () => { @@ -205,12 +205,12 @@ describe('HostEventModal', () => { expect(standardOutSection.find('EmptyState').length).toBe(1); wrapper.find('button[aria-label="Standard out tab"]').simulate('click'); findSections(wrapper); - expect(standardOutSection.find('CodeMirrorInput').length).toBe(1); + expect(standardOutSection.find('CodeEditor').length).toBe(1); - const codemirror = standardOutSection.find('CodeMirrorInput Controlled'); - expect(codemirror.prop('mode')).toBe('javascript'); - expect(codemirror.prop('options').readOnly).toBe(true); - expect(codemirror.prop('value')).toEqual(hostEvent.event_data.res.stdout); + const codeEditor = standardOutSection.find('CodeEditor'); + expect(codeEditor.prop('mode')).toBe('javascript'); + expect(codeEditor.prop('readOnly')).toBe(true); + expect(codeEditor.prop('value')).toEqual(hostEvent.event_data.res.stdout); }); test('should display Standard Error tab content on tab click', () => { @@ -229,12 +229,12 @@ describe('HostEventModal', () => { expect(standardErrorSection.find('EmptyState').length).toBe(1); wrapper.find('button[aria-label="Standard error tab"]').simulate('click'); findSections(wrapper); - expect(standardErrorSection.find('CodeMirrorInput').length).toBe(1); + expect(standardErrorSection.find('CodeEditor').length).toBe(1); - const codemirror = standardErrorSection.find('CodeMirrorInput Controlled'); - expect(codemirror.prop('mode')).toBe('javascript'); - expect(codemirror.prop('options').readOnly).toBe(true); - expect(codemirror.prop('value')).toEqual(' '); + const codeEditor = standardErrorSection.find('CodeEditor'); + expect(codeEditor.prop('mode')).toBe('javascript'); + expect(codeEditor.prop('readOnly')).toBe(true); + expect(codeEditor.prop('value')).toEqual(' '); }); test('should call onClose when close button is clicked', () => { @@ -263,8 +263,8 @@ describe('HostEventModal', () => { ); wrapper.find('button[aria-label="Standard out tab"]').simulate('click'); findSections(wrapper); - const codemirror = standardOutSection.find('CodeMirrorInput Controlled'); - expect(codemirror.prop('value')).toEqual('foo bar'); + const codeEditor = standardOutSection.find('CodeEditor'); + expect(codeEditor.prop('value')).toEqual('foo bar'); }); test('should render standard out of yum task', () => { @@ -282,7 +282,7 @@ describe('HostEventModal', () => { ); wrapper.find('button[aria-label="Standard out tab"]').simulate('click'); findSections(wrapper); - const codemirror = standardOutSection.find('CodeMirrorInput Controlled'); - expect(codemirror.prop('value')).toEqual('baz'); + const codeEditor = standardOutSection.find('CodeEditor'); + expect(codeEditor.prop('value')).toEqual('baz'); }); }); diff --git a/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx b/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx index b452ed4b62..fca1b0317d 100644 --- a/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx +++ b/awx/ui_next/src/screens/NotificationTemplate/shared/CustomMessagesSubForm.jsx @@ -8,7 +8,7 @@ import { FormFullWidthLayout, SubFormLayout, } from '../../../components/FormLayout'; -import CodeMirrorField from '../../../components/CodeMirrorInput/CodeMirrorField'; +import CodeEditorField from '../../../components/CodeEditor/CodeEditorField'; function CustomMessagesSubForm({ defaultMessages, type, i18n }) { const [useCustomField, , useCustomHelpers] = useField('useCustomMessages'); @@ -102,7 +102,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) { {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - )} {showMessages && ( - )} {showBodies && ( - - ', () => { target: { value: 'new key', name: 'SOCIAL_AUTH_GITHUB_KEY' }, }); wrapper - .find('CodeMirrorInput#SOCIAL_AUTH_GITHUB_ORGANIZATION_MAP') + .find('CodeEditor#SOCIAL_AUTH_GITHUB_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseEdit/GitHubEnterpriseEdit.test.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseEdit/GitHubEnterpriseEdit.test.jsx index f0bb46ab23..1ed4336511 100644 --- a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseEdit/GitHubEnterpriseEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseEdit/GitHubEnterpriseEdit.test.jsx @@ -122,7 +122,7 @@ describe('', () => { }, }); wrapper - .find('CodeMirrorInput#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORGANIZATION_MAP') + .find('CodeEditor#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseOrgEdit/GitHubEnterpriseOrgEdit.test.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseOrgEdit/GitHubEnterpriseOrgEdit.test.jsx index 278dd5d37e..9c3d3bd344 100644 --- a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseOrgEdit/GitHubEnterpriseOrgEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseOrgEdit/GitHubEnterpriseOrgEdit.test.jsx @@ -135,9 +135,7 @@ describe('', () => { }, }); wrapper - .find( - 'CodeMirrorInput#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORG_ORGANIZATION_MAP' - ) + .find('CodeEditor#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORG_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseTeamEdit/GitHubEnterpriseTeamEdit.test.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseTeamEdit/GitHubEnterpriseTeamEdit.test.jsx index 764c9fa377..a87782a81d 100644 --- a/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseTeamEdit/GitHubEnterpriseTeamEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseTeamEdit/GitHubEnterpriseTeamEdit.test.jsx @@ -129,9 +129,7 @@ describe('', () => { }, }); wrapper - .find( - 'CodeMirrorInput#SOCIAL_AUTH_GITHUB_ENTERPRISE_TEAM_ORGANIZATION_MAP' - ) + .find('CodeEditor#SOCIAL_AUTH_GITHUB_ENTERPRISE_TEAM_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubOrgEdit/GitHubOrgEdit.test.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubOrgEdit/GitHubOrgEdit.test.jsx index 57396c43d1..21f6e4180d 100644 --- a/awx/ui_next/src/screens/Setting/GitHub/GitHubOrgEdit/GitHubOrgEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GitHub/GitHubOrgEdit/GitHubOrgEdit.test.jsx @@ -113,7 +113,7 @@ describe('', () => { target: { value: 'new org', name: 'SOCIAL_AUTH_GITHUB_ORG_NAME' }, }); wrapper - .find('CodeMirrorInput#SOCIAL_AUTH_GITHUB_ORG_ORGANIZATION_MAP') + .find('CodeEditor#SOCIAL_AUTH_GITHUB_ORG_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GitHub/GitHubTeamEdit/GitHubTeamEdit.test.jsx b/awx/ui_next/src/screens/Setting/GitHub/GitHubTeamEdit/GitHubTeamEdit.test.jsx index bbc36f8948..9c9e971cf1 100644 --- a/awx/ui_next/src/screens/Setting/GitHub/GitHubTeamEdit/GitHubTeamEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GitHub/GitHubTeamEdit/GitHubTeamEdit.test.jsx @@ -108,7 +108,7 @@ describe('', () => { target: { value: '12345', name: 'SOCIAL_AUTH_GITHUB_TEAM_ID' }, }); wrapper - .find('CodeMirrorInput#SOCIAL_AUTH_GITHUB_TEAM_ORGANIZATION_MAP') + .find('CodeEditor#SOCIAL_AUTH_GITHUB_TEAM_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\ntrue\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx b/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx index 68a292232c..c01dae3201 100644 --- a/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx +++ b/awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx @@ -122,7 +122,7 @@ describe('', () => { target: { value: 'new key', name: 'SOCIAL_AUTH_GOOGLE_OAUTH2_KEY' }, }); wrapper - .find('CodeMirrorInput#SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP') + .find('CodeEditor#SOCIAL_AUTH_GOOGLE_OAUTH2_ORGANIZATION_MAP') .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}'); }); wrapper.update(); diff --git a/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx b/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx index 71f998e341..e41e0c26e3 100644 --- a/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx +++ b/awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx @@ -153,7 +153,7 @@ describe('', () => { name: 'AUTH_LDAP_SERVER_URI', }, }); - wrapper.find('CodeMirrorInput#AUTH_LDAP_TEAM_MAP').invoke('onChange')( + wrapper.find('CodeEditor#AUTH_LDAP_TEAM_MAP').invoke('onChange')( '{\n"LDAP Sales":{\n"organization":\n"mock org"\n}\n}' ); }); diff --git a/awx/ui_next/src/screens/Setting/shared/SharedFields.jsx b/awx/ui_next/src/screens/Setting/shared/SharedFields.jsx index 59474acd8c..b5e118088a 100644 --- a/awx/ui_next/src/screens/Setting/shared/SharedFields.jsx +++ b/awx/ui_next/src/screens/Setting/shared/SharedFields.jsx @@ -14,7 +14,7 @@ import { import FileUploadIcon from '@patternfly/react-icons/dist/js/icons/file-upload-icon'; import styled from 'styled-components'; import AnsibleSelect from '../../../components/AnsibleSelect'; -import CodeMirrorInput from '../../../components/CodeMirrorInput'; +import CodeEditor from '../../../components/CodeEditor'; import { PasswordInput } from '../../../components/FormField'; import { FormFullWidthLayout } from '../../../components/FormLayout'; import Popover from '../../../components/Popover'; @@ -284,7 +284,7 @@ const ObjectField = withI18n()(({ i18n, name, config, isRequired = false }) => { popoverContent={config.help_text} validated={isValid ? 'default' : 'error'} > - { )} ); - expect(wrapper.find('CodeMirrorInput')).toHaveLength(1); - expect(wrapper.find('CodeMirrorInput').prop('value')).toBe( + expect(wrapper.find('CodeEditor')).toHaveLength(1); + expect(wrapper.find('CodeEditor').prop('value')).toBe( '["one", "two", "three"]' ); await act(async () => { - wrapper.find('CodeMirrorInput').invoke('onChange')('[]'); + wrapper.find('CodeEditor').invoke('onChange')('[]'); }); wrapper.update(); - expect(wrapper.find('CodeMirrorInput').prop('value')).toBe('[]'); + expect(wrapper.find('CodeEditor').prop('value')).toBe('[]'); }); test('FileUploadField renders the expected content', async () => { diff --git a/awx/ui_next/src/screens/Setting/shared/settingTestUtils.js b/awx/ui_next/src/screens/Setting/shared/settingTestUtils.js index ab81162984..af2da46345 100644 --- a/awx/ui_next/src/screens/Setting/shared/settingTestUtils.js +++ b/awx/ui_next/src/screens/Setting/shared/settingTestUtils.js @@ -8,6 +8,6 @@ export function assertVariableDetail(wrapper, label, value) { wrapper.find(`CodeDetail[label="${label}"] .pf-c-form__label`).text() ).toBe(label); expect( - wrapper.find(`CodeDetail[label="${label}"] CodeMirrorInput`).prop('value') + wrapper.find(`CodeDetail[label="${label}"] CodeEditor`).prop('value') ).toBe(value); } diff --git a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx index 4a2b47605f..d61819adcc 100644 --- a/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/JobTemplateDetail/JobTemplateDetail.jsx @@ -27,7 +27,7 @@ import { import DeleteButton from '../../../components/DeleteButton'; import ErrorDetail from '../../../components/ErrorDetail'; import { LaunchButton } from '../../../components/LaunchButton'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import { JobTemplatesAPI } from '../../../api'; import useRequest, { useDismissableError } from '../../../util/useRequest'; diff --git a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx index 4f8237e8c2..7d21bafb3f 100644 --- a/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx +++ b/awx/ui_next/src/screens/Template/WorkflowJobTemplateDetail/WorkflowJobTemplateDetail.jsx @@ -16,7 +16,7 @@ import { WorkflowJobTemplatesAPI } from '../../../api'; import AlertModal from '../../../components/AlertModal'; import { CardBody, CardActionsRow } from '../../../components/Card'; import ChipGroup from '../../../components/ChipGroup'; -import { VariablesDetail } from '../../../components/CodeMirrorInput'; +import { VariablesDetail } from '../../../components/CodeEditor'; import DeleteButton from '../../../components/DeleteButton'; import { DetailList, diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx index b1ba6aac3d..e28b12ef47 100644 --- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx @@ -29,7 +29,7 @@ import { FormCheckboxLayout, SubFormLayout, } from '../../../components/FormLayout'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import { required } from '../../../util/validators'; import { JobTemplate } from '../../../types'; import { diff --git a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx index 5ee34bbe12..6108b0c8f7 100644 --- a/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx +++ b/awx/ui_next/src/screens/Template/shared/WorkflowJobTemplateForm.jsx @@ -26,7 +26,7 @@ import { InventoryLookup, ExecutionEnvironmentLookup, } from '../../../components/Lookup'; -import { VariablesField } from '../../../components/CodeMirrorInput'; +import { VariablesField } from '../../../components/CodeEditor'; import FormActionGroup from '../../../components/FormActionGroup'; import ContentError from '../../../components/ContentError'; import CheckboxField from '../../../components/FormField/CheckboxField';