rename CodeMirror to CodeEditor

2026-01-12 18:40:01 -03:30 · 2021-02-10 11:14:04 -08:00 · 2021-02-10 11:14:04 -08:00 · 070c67ffe8
commit 070c67ffe8
parent 5c38011ad5
60 changed files with 170 additions and 177 deletions
--- 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,
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.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;
--- a/awx/ui_next/src/components/CodeEditor/CodeEditor.test.jsx
+++ 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(
+      <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);
+  });
+});
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorField.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;
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/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
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesDetail.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/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(
-      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('<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('{}');
  });
 });
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/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}
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/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');
-    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', () => {
      </Formik>
    );
    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', () => {
      </Formik>
    );

-    expect(wrapper.find('CodeMirrorInput').prop('mode')).toEqual('javascript');
+    expect(wrapper.find('CodeEditor').prop('mode')).toEqual('javascript');
  });
 });
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesInput.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/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}
--- a/awx/ui_next/src/components/CodeMirrorInput/constants.js
+++ b/awx/ui_next/src/components/CodeMirrorInput/constants.js
--- a/awx/ui_next/src/components/CodeMirrorInput/index.js
+++ b/awx/ui_next/src/components/CodeMirrorInput/index.js
@ -1,7 +1,7 @@
-import CodeMirrorInput from './CodeMirrorInput';
+import CodeEditor from './CodeEditor';

-export default CodeMirrorInput;
-export { default as CodeMirrorField } from './CodeMirrorField';
+export default CodeEditor;
+export { default as CodeEditorField } from './CodeEditorField';
 export { default as VariablesDetail } from './VariablesDetail';
 export { default as VariablesInput } from './VariablesInput';
 export { default as VariablesField } from './VariablesField';
--- a/awx/ui_next/src/components/CodeMirrorInput/CodeMirrorInput.test.jsx
+++ b/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);
-  });
-});
--- 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}
      >
-        <CodeMirrorInput
+        <CodeEditor
          mode={mode}
          value={value}
          readOnly
--- a/awx/ui_next/src/components/HostForm/HostForm.jsx
+++ b/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';
--- a/awx/ui_next/src/components/LaunchPrompt/steps/OtherPromptsStep.jsx
+++ b/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`
--- a/awx/ui_next/src/components/PromptDetail/PromptDetail.jsx
+++ b/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';
--- a/awx/ui_next/src/components/PromptDetail/PromptInventorySourceDetail.jsx
+++ b/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';

--- a/awx/ui_next/src/components/PromptDetail/PromptJobTemplateDetail.jsx
+++ b/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 }) {
--- a/awx/ui_next/src/components/PromptDetail/PromptWFJobTemplateDetail.jsx
+++ b/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';

--- a/awx/ui_next/src/components/Schedule/ScheduleDetail/ScheduleDetail.jsx
+++ b/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)`
--- a/awx/ui_next/src/screens/ActivityStream/ActivityStreamDetailButton.jsx
+++ b/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);
--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.jsx
+++ b/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;
 `;

--- a/awx/ui_next/src/screens/Credential/CredentialDetail/CredentialDetail.test.jsx
+++ b/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(
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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();
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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';
--- 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 {
--- 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';
--- 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,
--- 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,
--- 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';
--- 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 {
--- 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 (
    <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={() => {}}
--- 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');
  });
 });
--- 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 }) {
          </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`)}
--- a/awx/ui_next/src/screens/NotificationTemplate/shared/TypeInputsSubForm.jsx
+++ b/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`)}
--- a/awx/ui_next/src/screens/Setting/GitHub/GitHubEdit/GitHubEdit.test.jsx
+++ b/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();
--- 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('<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();
--- 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('<GitHubEnterpriseOrgEdit />', () => {
          },
        });
      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();
--- 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('<GitHubEnterpriseTeamEdit />', () => {
          },
        });
      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();
--- 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('<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();
--- 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('<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();
--- 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('<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();
--- 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('<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}'
      );
    });
--- 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'}
      >
-        <CodeMirrorInput
+        <CodeEditor
          {...field}
          fullHeight
          id={name}
--- a/awx/ui_next/src/screens/Setting/shared/SharedFields.test.jsx
+++ b/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('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 () => {
--- 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);
 }
--- 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';

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