rename CodeMirror to CodeEditor

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,

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

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(
+      <CodeEditor value="---\n" onChange={onChange} mode="yaml" />
+    );
+    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(
+      <CodeEditor value="---\n" onChange={onChange} mode="yaml" readOnly />
+    );
+    const aceEditor = wrapper.find('AceEditor');
+    expect(aceEditor.prop('setOptions').readOnly).toEqual(true);
+  });
+});

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={<Popover content={tooltip} />}
     >
-      <CodeMirrorInput
+      <CodeEditor
         id={id}
         {...rest}
         {...field}
@@ -51,7 +51,7 @@ function CodeMirrorField({
     </FormGroup>
   );
 }
-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;

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"
       >
-        <CodeMirrorInput
+        <CodeEditor
           mode={mode}
           value={currentValue}
           readOnly

awx/ui_next/src/components/CodeEditor/VariablesDetail.test.jsx

@@ -6,11 +6,11 @@ import VariablesDetail from './VariablesDetail';
 jest.mock('../../api');
 
 describe('<VariablesDetail>', () => {
-  test('should render readonly CodeMirrorInput', () => {
+  test('should render readonly CodeEditor', () => {
     const wrapper = mountWithContexts(
       <VariablesDetail value="---foo: bar" label="Variables" />
     );
-    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('<VariablesDetail>', () => {
     const wrapper = mountWithContexts(
       <VariablesDetail value='{"foo": "bar"}' label="Variables" />
     );
-    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('<VariablesDetail>', () => {
       <VariablesDetail value="---foo: bar" label="Variables" />
     );
     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('<VariablesDetail>', () => {
     const wrapper = mountWithContexts(
       <VariablesDetail value="" label="Variables" />
     );
-    expect(wrapper.find('VariablesDetail___StyledCodeMirrorInput').length).toBe(
+    expect(wrapper.find('VariablesDetail___StyledCodeEditor').length).toBe(1);
-      1
-    );
     expect(wrapper.find('div.pf-c-form__label').text()).toBe('Variables');
   });
 
@@ -63,7 +61,7 @@ describe('<VariablesDetail>', () => {
       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('<VariablesDetail>', () => {
     const wrapper = mountWithContexts(
       <VariablesDetail value="" label="Variables" />
     );
-    const input = wrapper.find('VariablesDetail___StyledCodeMirrorInput');
+    const input = wrapper.find('VariablesDetail___StyledCodeEditor');
     expect(input.prop('value')).toEqual('---');
   });
 
@@ -84,7 +82,7 @@ describe('<VariablesDetail>', () => {
       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('{}');
   });
 });

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({
           />
         )}
       </FieldHeader>
-      <CodeMirrorInput
+      <CodeEditor
         mode={mode}
         readOnly={readOnly}
         {...field}

awx/ui_next/src/components/CodeEditor/VariablesField.test.jsx

@@ -9,7 +9,7 @@ describe('VariablesField', () => {
     document.body.createTextRange = jest.fn();
   });
 
-  it('should render code mirror input', () => {
+  it('should render code editor', () => {
     const value = '---\n';
     const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
@@ -18,8 +18,8 @@ describe('VariablesField', () => {
         )}
       </Formik>
     );
-    const codemirror = wrapper.find('Controlled');
+    const codeEditor = wrapper.find('CodeEditor');
-    expect(codemirror.prop('value')).toEqual(value);
+    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', () => {
       </Formik>
     );
     await act(async () => {
-      wrapper.find('CodeMirrorInput').invoke('onChange')(
+      wrapper.find('CodeEditor').invoke('onChange')('---\nnewval: changed');
-        '---\nnewval: changed'
-      );
       wrapper.find('form').simulate('submit');
     });
 
@@ -129,6 +127,6 @@ describe('VariablesField', () => {
       </Formik>
     );
 
-    expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript');
+    expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
   });
 });

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) {
           />
         </SplitItemRight>
       </Split>
-      <CodeMirrorInput
+      <CodeEditor
         mode={mode}
         readOnly={readOnly}
         value={value}

awx/ui_next/src/components/CodeEditor/index.js

@@ -1,7 +1,7 @@
-import CodeMirrorInput from './CodeMirrorInput';
+import CodeEditor from './CodeEditor';
 
-export default CodeMirrorInput;
+export default CodeEditor;
-export { default as CodeMirrorField } from './CodeMirrorField';
+export { default as CodeEditorField } from './CodeEditorField';
 export { default as VariablesDetail } from './VariablesDetail';
 export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';

awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.test.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import CodeMirrorInput from './CodeMirrorInput';
-
-describe('CodeMirrorInput', () => {
-  beforeEach(() => {
-    document.body.createTextRange = jest.fn();
-  });
-
-  it('should trigger onChange prop', () => {
-    const onChange = jest.fn();
-    const wrapper = mount(
-      <CodeMirrorInput value="---\n" onChange={onChange} mode="yaml" />
-    );
-    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(
-      <CodeMirrorInput value="---\n" onChange={onChange} mode="yaml" readOnly />
-    );
-    const codemirror = wrapper.find('Controlled');
-    expect(codemirror.prop('options').readOnly).toEqual(true);
-  });
-});

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}
       >
-        <CodeMirrorInput
+        <CodeEditor
           mode={mode}
           value={value}
           readOnly

awx/ui_next/src/components/HostForm/HostForm.jsx

@@ -7,7 +7,7 @@ import { t } from '@lingui/macro';
 import { Form, FormGroup } from '@patternfly/react-core';
 import FormField, { FormSubmitError } from '../FormField';
 import FormActionGroup from '../FormActionGroup/FormActionGroup';
-import { VariablesField } from '../CodeMirrorInput';
+import { VariablesField } from '../CodeEditor';
 import { InventoryLookup } from '../Lookup';
 import { FormColumnLayout, FormFullWidthLayout } from '../FormLayout';
 import Popover from '../Popover';

awx/ui_next/src/components/LaunchPrompt/steps/OtherPromptsStep.jsx

@@ -7,7 +7,7 @@ import styled from 'styled-components';
 import FormField from '../../FormField';
 import { TagMultiSelect } from '../../MultiSelect';
 import AnsibleSelect from '../../AnsibleSelect';
-import { VariablesField } from '../../CodeMirrorInput';
+import { VariablesField } from '../../CodeEditor';
 import Popover from '../../Popover';
 
 const FieldHeader = styled.div`

awx/ui_next/src/components/PromptDetail/PromptDetail.jsx

@@ -11,7 +11,7 @@ import { toTitleCase } from '../../util/strings';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import { DetailList, Detail, UserDateDetail } from '../DetailList';
-import { VariablesDetail } from '../CodeMirrorInput';
+import { VariablesDetail } from '../CodeEditor';
 
 import PromptProjectDetail from './PromptProjectDetail';
 import PromptInventorySourceDetail from './PromptInventorySourceDetail';

awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx

@@ -5,7 +5,7 @@ import { Link } from 'react-router-dom';
 
 import { Chip, List, ListItem } from '@patternfly/react-core';
 import { Detail, DeletedDetail } from '../DetailList';
-import { VariablesDetail } from '../CodeMirrorInput';
+import { VariablesDetail } from '../CodeEditor';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 

awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx

@@ -8,7 +8,7 @@ import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import Sparkline from '../Sparkline';
 import { Detail, DeletedDetail } from '../DetailList';
-import { VariablesDetail } from '../CodeMirrorInput';
+import { VariablesDetail } from '../CodeEditor';
 import { toTitleCase } from '../../util/strings';
 
 function PromptJobTemplateDetail({ i18n, resource }) {

awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx

@@ -7,7 +7,7 @@ import { Chip, List, ListItem } from '@patternfly/react-core';
 import CredentialChip from '../CredentialChip';
 import ChipGroup from '../ChipGroup';
 import { Detail } from '../DetailList';
-import { VariablesDetail } from '../CodeMirrorInput';
+import { VariablesDetail } from '../CodeEditor';
 import Sparkline from '../Sparkline';
 import { toTitleCase } from '../../util/strings';
 

awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx

@@ -25,7 +25,7 @@ import {
 import DeleteButton from '../../DeleteButton';
 import ErrorDetail from '../../ErrorDetail';
 import ChipGroup from '../../ChipGroup';
-import { VariablesDetail } from '../../CodeMirrorInput';
+import { VariablesDetail } from '../../CodeEditor';
 import { parseVariableField } from '../../../util/yaml';
 
 const PromptDivider = styled(Divider)`

awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx

@@ -7,7 +7,7 @@ import { SearchPlusIcon } from '@patternfly/react-icons';
 import { formatDateString } from '../../util/dates';
 
 import { DetailList, Detail } from '../../components/DetailList';
-import { VariablesDetail } from '../../components/CodeMirrorInput';
+import { VariablesDetail } from '../../components/CodeEditor';
 
 function ActivityStreamDetailButton({ i18n, streamItem, user, description }) {
   const [isOpen, setIsOpen] = useState(false);

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx

@@ -16,14 +16,14 @@ import {
   UserDateDetail,
 } from '../../../components/DetailList';
 import ChipGroup from '../../../components/ChipGroup';
-import CodeMirrorInput from '../../../components/CodeMirrorInput';
+import CodeEditor from '../../../components/CodeEditor';
 import CredentialChip from '../../../components/CredentialChip';
 import ErrorDetail from '../../../components/ErrorDetail';
 import { CredentialsAPI, CredentialTypesAPI } from '../../../api';
 import { Credential } from '../../../types';
 import useRequest, { useDismissableError } from '../../../util/useRequest';
 
-const PluginInputMetadata = styled(CodeMirrorInput)`
+const PluginInputMetadata = styled(CodeEditor)`
   grid-column: 1 / -1;
 `;
 

awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx

@@ -88,7 +88,7 @@ describe('<CredentialDetail />', () => {
     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(

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';

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';

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';

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';

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';

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();

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';

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';

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';

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';

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';

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';

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 {

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';

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,

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,

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';

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 {

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 => {
+const processCodeEditorValue = value => {
-  let codeMirrorValue;
+  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 jsonObj = processCodeEditorValue(hostEvent?.event_data?.res);
-  const stdErr = processCodeMirrorValue(hostEvent?.event_data?.res?.stderr);
+  const stdErr = processCodeEditorValue(hostEvent?.event_data?.res?.stderr);
-  const stdOut = processCodeMirrorValue(processStdOutValue(hostEvent));
+  const stdOut = processCodeEditorValue(processStdOutValue(hostEvent));
 
   return (
     <Modal
@@ -145,7 +145,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
           aria-label={i18n._(t`JSON tab`)}
         >
           {activeTabKey === 1 && jsonObj ? (
-            <CodeMirrorInput
+            <CodeEditor
               mode="javascript"
               readOnly
               value={JSON.stringify(jsonObj, null, 2)}
@@ -163,7 +163,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
           aria-label={i18n._(t`Standard out tab`)}
         >
           {activeTabKey === 2 && stdOut ? (
-            <CodeMirrorInput
+            <CodeEditor
               mode="javascript"
               readOnly
               value={stdOut}
@@ -181,7 +181,7 @@ function HostEventModal({ onClose, hostEvent = {}, isOpen = false, i18n }) {
           aria-label={i18n._(t`Standard error tab`)}
         >
           {activeTabKey === 3 && stdErr ? (
-            <CodeMirrorInput
+            <CodeEditor
               mode="javascript"
               readOnly
               onChange={() => {}}

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');
+    const codeEditor = jsonSection.find('CodeEditor');
-    expect(codemirror.prop('mode')).toBe('javascript');
+    expect(codeEditor.prop('mode')).toBe('javascript');
-    expect(codemirror.prop('options').readOnly).toBe(true);
+    expect(codeEditor.prop('readOnly')).toBe(true);
-    expect(codemirror.prop('value')).toEqual(jsonValue);
+    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');
+    const codeEditor = standardOutSection.find('CodeEditor');
-    expect(codemirror.prop('mode')).toBe('javascript');
+    expect(codeEditor.prop('mode')).toBe('javascript');
-    expect(codemirror.prop('options').readOnly).toBe(true);
+    expect(codeEditor.prop('readOnly')).toBe(true);
-    expect(codemirror.prop('value')).toEqual(hostEvent.event_data.res.stdout);
+    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');
+    const codeEditor = standardErrorSection.find('CodeEditor');
-    expect(codemirror.prop('mode')).toBe('javascript');
+    expect(codeEditor.prop('mode')).toBe('javascript');
-    expect(codemirror.prop('options').readOnly).toBe(true);
+    expect(codeEditor.prop('readOnly')).toBe(true);
-    expect(codemirror.prop('value')).toEqual(' ');
+    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');
+    const codeEditor = standardOutSection.find('CodeEditor');
-    expect(codemirror.prop('value')).toEqual('foo bar');
+    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');
+    const codeEditor = standardOutSection.find('CodeEditor');
-    expect(codemirror.prop('value')).toEqual('baz');
+    expect(codeEditor.prop('value')).toEqual('baz');
   });
 });

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 }) {
           </Text>
           <FormFullWidthLayout>
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="start-message"
                 name="messages.started.message"
                 label={i18n._(t`Start message`)}
@@ -111,7 +111,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="start-body"
                 name="messages.started.body"
                 label={i18n._(t`Start message body`)}
@@ -120,7 +120,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="success-message"
                 name="messages.success.message"
                 label={i18n._(t`Success message`)}
@@ -129,7 +129,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="success-body"
                 name="messages.success.body"
                 label={i18n._(t`Success message body`)}
@@ -138,7 +138,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="error-message"
                 name="messages.error.message"
                 label={i18n._(t`Error message`)}
@@ -147,7 +147,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="error-body"
                 name="messages.error.body"
                 label={i18n._(t`Error message body`)}
@@ -156,7 +156,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-approved-message"
                 name="messages.workflow_approval.approved.message"
                 label={i18n._(t`Workflow approved message`)}
@@ -165,7 +165,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-approved-body"
                 name="messages.workflow_approval.approved.body"
                 label={i18n._(t`Workflow approved message body`)}
@@ -174,7 +174,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-denied-message"
                 name="messages.workflow_approval.denied.message"
                 label={i18n._(t`Workflow denied message`)}
@@ -183,7 +183,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-denied-body"
                 name="messages.workflow_approval.denied.body"
                 label={i18n._(t`Workflow denied message body`)}
@@ -192,7 +192,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-running-message"
                 name="messages.workflow_approval.running.message"
                 label={i18n._(t`Workflow pending message`)}
@@ -201,7 +201,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-running-body"
                 name="messages.workflow_approval.running.body"
                 label={i18n._(t`Workflow pending message body`)}
@@ -210,7 +210,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showMessages && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-timed-out-message"
                 name="messages.workflow_approval.timed_out.message"
                 label={i18n._(t`Workflow timed out message`)}
@@ -219,7 +219,7 @@ function CustomMessagesSubForm({ defaultMessages, type, i18n }) {
               />
             )}
             {showBodies && (
-              <CodeMirrorField
+              <CodeEditorField
                 id="wf-timed-out-body"
                 name="messages.workflow_approval.timed_out.body"
                 label={i18n._(t`Workflow timed out message body`)}

awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx

@@ -14,7 +14,7 @@ import FormField, {
   ArrayTextField,
 } from '../../../components/FormField';
 import AnsibleSelect from '../../../components/AnsibleSelect';
-import { CodeMirrorField } from '../../../components/CodeMirrorInput';
+import { CodeEditorField } from '../../../components/CodeEditor';
 import {
   combine,
   required,
@@ -470,7 +470,7 @@ function WebhookFields({ i18n }) {
         name="notification_configuration.disable_ssl_verification"
       />
       <FormFullWidthLayout>
-        <CodeMirrorField
+        <CodeEditorField
           id="webhook-headers"
           name="notification_configuration.headers"
           label={i18n._(t`HTTP Headers`)}

awx/ui_next/src/screens/Setting/GitHub/GitHubEdit/GitHubEdit.test.jsx

@@ -105,7 +105,7 @@ describe('<GitHubEdit />', () => {
         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();

awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseEdit/GitHubEnterpriseEdit.test.jsx

@@ -122,7 +122,7 @@ describe('<GitHubEnterpriseEdit />', () => {
           },
         });
       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();

awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseOrgEdit/GitHubEnterpriseOrgEdit.test.jsx

@@ -135,9 +135,7 @@ describe('<GitHubEnterpriseOrgEdit />', () => {
           },
         });
       wrapper
-        .find(
+        .find('CodeEditor#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORG_ORGANIZATION_MAP')
-          'CodeMirrorInput#SOCIAL_AUTH_GITHUB_ENTERPRISE_ORG_ORGANIZATION_MAP'
-        )
         .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}');
     });
     wrapper.update();

awx/ui_next/src/screens/Setting/GitHub/GitHubEnterpriseTeamEdit/GitHubEnterpriseTeamEdit.test.jsx

@@ -129,9 +129,7 @@ describe('<GitHubEnterpriseTeamEdit />', () => {
           },
         });
       wrapper
-        .find(
+        .find('CodeEditor#SOCIAL_AUTH_GITHUB_ENTERPRISE_TEAM_ORGANIZATION_MAP')
-          'CodeMirrorInput#SOCIAL_AUTH_GITHUB_ENTERPRISE_TEAM_ORGANIZATION_MAP'
-        )
         .invoke('onChange')('{\n"Default":{\n"users":\nfalse\n}\n}');
     });
     wrapper.update();

awx/ui_next/src/screens/Setting/GitHub/GitHubOrgEdit/GitHubOrgEdit.test.jsx

@@ -113,7 +113,7 @@ describe('<GitHubOrgEdit />', () => {
         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();

awx/ui_next/src/screens/Setting/GitHub/GitHubTeamEdit/GitHubTeamEdit.test.jsx

@@ -108,7 +108,7 @@ describe('<GitHubTeamEdit />', () => {
         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();

awx/ui_next/src/screens/Setting/GoogleOAuth2/GoogleOAuth2Edit/GoogleOAuth2Edit.test.jsx

@@ -122,7 +122,7 @@ describe('<GoogleOAuth2Edit />', () => {
         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();

awx/ui_next/src/screens/Setting/LDAP/LDAPEdit/LDAPEdit.test.jsx

@@ -153,7 +153,7 @@ describe('<LDAPEdit />', () => {
           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}'
       );
     });

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'}
       >
-        <CodeMirrorInput
+        <CodeEditor
           {...field}
           fullHeight
           id={name}

awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx

@@ -214,15 +214,15 @@ describe('Setting form fields', () => {
         )}
       </Formik>
     );
-    expect(wrapper.find('CodeMirrorInput')).toHaveLength(1);
+    expect(wrapper.find('CodeEditor')).toHaveLength(1);
-    expect(wrapper.find('CodeMirrorInput').prop('value')).toBe(
+    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 () => {

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

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';
 

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,

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 {

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';