Merge pull request #9281 from keithjgrant/8905-codemirror-replacement

AceEditor - codemirror replacement

Reviewed-by: John Hill <johill@redhat.com>
             https://github.com/unlikelyzero

CHANGELOG.md

@@ -17,6 +17,7 @@ This is a list of high-level changes for each release of AWX. A full list of com
 - Added pending workflow approval count to the application header https://github.com/ansible/awx/pull/9334
 - Added user interface for management jobs: https://github.com/ansible/awx/pull/9224
 - Added toast message to show notification template test result to notification templates list https://github.com/ansible/awx/pull/9318
+- Replaced CodeMirror with AceEditor for editing template variables and notification templates https://github.com/ansible/awx/pull/9281
 
 # 17.1.0 (March 9th, 2021)
 - Addressed a security issue in AWX (CVE-2021-20253)

awx/ui_next/package-lock.json

@@ -2786,6 +2786,11 @@
         "negotiator": "0.6.2"
       }
     },
+    "ace-builds": {
+      "version": "1.4.12",
+      "resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.12.tgz",
+      "integrity": "sha512-G+chJctFPiiLGvs3+/Mly3apXTcfgE45dT5yp12BcWZ1kUs+gm0qd3/fv4gsz6fVag4mM0moHVpjHDIgph6Psg=="
+    },
     "acorn": {
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
@@ -4947,11 +4952,6 @@
         "q": "^1.1.2"
       }
     },
-    "codemirror": {
-      "version": "5.58.3",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.58.3.tgz",
-      "integrity": "sha512-KBhB+juiyOOgn0AqtRmWyAT3yoElkuvWTI6hsHa9E6GQrl6bk/fdAYcvuqW1/upO9T9rtEtapWdw4XYcNiVDEA=="
-    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -6230,6 +6230,11 @@
         }
       }
     },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
     "diff-sequences": {
       "version": "24.9.0",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
@@ -11295,11 +11300,15 @@
       "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
       "dev": true
     },
+    "lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+    },
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
-      "dev": true
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -14175,6 +14184,18 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-ace": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-ace/-/react-ace-9.3.0.tgz",
+      "integrity": "sha512-RWPDwVobLvyD0wDoHHQqEnn9pNQBhMnmo6LmRACkaXxAg3UQZpse6x9JFLC5EXyWby+P3uolIlQPct4NFEBPNg==",
+      "requires": {
+        "ace-builds": "^1.4.6",
+        "diff-match-patch": "^1.0.4",
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-app-polyfill": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",
@@ -14203,11 +14224,6 @@
         }
       }
     },
-    "react-codemirror2": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/react-codemirror2/-/react-codemirror2-6.0.1.tgz",
-      "integrity": "sha512-rutEKVgvFhWcy/GeVA1hFbqrO89qLqgqdhUr7YhYgIzdyICdlRQv+ztuNvOFQMXrO0fLt0VkaYOdMdYdQgsSUA=="
-    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",

awx/ui_next/package.json

@@ -11,9 +11,9 @@
     "@patternfly/react-core": "^4.90.2",
     "@patternfly/react-icons": "4.7.22",
     "@patternfly/react-table": "^4.19.15",
+    "ace-builds": "^1.4.12",
     "ansi-to-html": "^0.6.11",
     "axios": "^0.21.1",
-    "codemirror": "^5.47.0",
     "d3": "^5.12.0",
     "dagre": "^0.8.4",
     "formik": "^2.1.2",
@@ -22,7 +22,7 @@
     "js-yaml": "^3.13.1",
     "prop-types": "^15.6.2",
     "react": "^16.13.1",
-    "react-codemirror2": "^6.0.0",
+    "react-ace": "^9.3.0",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-virtualized": "^9.21.1",

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

@@ -0,0 +1,193 @@
+import React, { useEffect, useRef, useCallback } from 'react';
+import { oneOf, bool, number, string, func } from 'prop-types';
+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';
+import 'ace-builds/src-noconflict/mode-django';
+import 'ace-builds/src-noconflict/theme-github';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import styled from 'styled-components';
+import debounce from '../../util/debounce';
+
+const LINE_HEIGHT = 24;
+const PADDING = 12;
+
+const FocusWrapper = styled.div`
+  && + .keyboard-help-text {
+    opacity: 0;
+    transition: opacity 0.1s linear;
+  }
+
+  &:focus-within + .keyboard-help-text {
+    opacity: 1;
+  }
+
+  & .ace_hidden-cursors .ace_cursor {
+    opacity: 0;
+  }
+`;
+
+const AceEditor = styled(ReactAce)`
+  font-family: var(--pf-global--FontFamily--monospace);
+  max-height: 90vh;
+
+  & .ace_gutter,
+  & .ace_scroller {
+    padding-top: 4px;
+    padding-bottom: 4px;
+  }
+
+  & .ace_mobile-menu {
+    display: none;
+  }
+
+  ${props =>
+    props.hasErrors &&
+    `
+    && {
+      --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
+      --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
+      padding-right: 24px;
+      padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
+      background: var(--pf-c-form-control--invalid--Background);
+      border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
+    }`}
+
+  ${props =>
+    props.setOptions.readOnly &&
+    `
+    && .ace_cursor {
+      opacity: 0;
+    }
+    `}
+`;
+AceEditor.displayName = 'AceEditor';
+
+function CodeEditor({
+  id,
+  value,
+  onChange,
+  mode,
+  readOnly,
+  hasErrors,
+  rows,
+  fullHeight,
+  className,
+  i18n,
+}) {
+  const wrapper = useRef(null);
+  const editor = useRef(null);
+
+  useEffect(
+    function removeTextareaTabIndex() {
+      const editorInput = editor.current.refEditor?.querySelector('textarea');
+      if (editorInput && !readOnly) {
+        editorInput.tabIndex = -1;
+      }
+    },
+    [readOnly]
+  );
+
+  const listen = useCallback(event => {
+    if (wrapper.current === document.activeElement && event.key === 'Enter') {
+      const editorInput = editor.current.refEditor?.querySelector('textarea');
+      if (!editorInput) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      editorInput.focus();
+    }
+  }, []);
+
+  useEffect(function addKeyEventListeners() {
+    const wrapperEl = wrapper.current;
+    wrapperEl.addEventListener('keydown', listen);
+
+    return () => {
+      wrapperEl.removeEventListener('keydown', listen);
+    };
+  });
+
+  const aceModes = {
+    javascript: 'json',
+    yaml: 'yaml',
+    jinja2: 'django',
+  };
+
+  const numRows = fullHeight ? value.split('\n').length : rows;
+
+  return (
+    <>
+      <FocusWrapper ref={wrapper} tabIndex={readOnly ? -1 : 0}>
+        <AceEditor
+          mode={aceModes[mode] || 'text'}
+          className={`pf-c-form-control ${className}`}
+          theme="github"
+          onChange={debounce(onChange, 250)}
+          value={value}
+          name={id || 'code-editor'}
+          editorProps={{ $blockScrolling: true }}
+          fontSize={16}
+          width="100%"
+          height={`${numRows * LINE_HEIGHT + PADDING}px`}
+          hasErrors={hasErrors}
+          setOptions={{
+            readOnly,
+            highlightActiveLine: !readOnly,
+            highlightGutterLine: !readOnly,
+            useWorker: false,
+            showPrintMargin: false,
+          }}
+          commands={[
+            {
+              name: 'escape',
+              bindKey: { win: 'Esc', mac: 'Esc' },
+              exec: () => {
+                wrapper.current.focus();
+              },
+            },
+            {
+              name: 'tab escape',
+              bindKey: { win: 'Shift-Tab', mac: 'Shift-Tab' },
+              exec: () => {
+                wrapper.current.focus();
+              },
+            },
+          ]}
+          ref={editor}
+        />
+      </FocusWrapper>
+      {!readOnly && (
+        <div
+          className="pf-c-form__helper-text keyboard-help-text"
+          aria-live="polite"
+        >
+          {i18n._(t`Press Enter to edit. Press ESC to stop editing.`)}
+        </div>
+      )}
+    </>
+  );
+}
+CodeEditor.propTypes = {
+  value: string.isRequired,
+  onChange: func,
+  mode: oneOf(['javascript', 'yaml', 'jinja2']).isRequired,
+  readOnly: bool,
+  hasErrors: bool,
+  fullHeight: bool,
+  rows: number,
+  className: string,
+};
+CodeEditor.defaultProps = {
+  readOnly: false,
+  onChange: () => {},
+  rows: 6,
+  fullHeight: false,
+  hasErrors: false,
+  className: '',
+};
+
+export default withI18n()(CodeEditor);

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { mountWithContexts } from '../../../testUtils/enzymeHelpers';
+import CodeEditor from './CodeEditor';
+import debounce from '../../util/debounce';
+
+jest.mock('../../util/debounce');
+
+describe('CodeEditor', () => {
+  beforeEach(() => {
+    document.body.createTextRange = jest.fn();
+  });
+
+  it('should pass value and mode through to ace editor', () => {
+    const onChange = jest.fn();
+    const wrapper = mountWithContexts(
+      <CodeEditor value={'---\nfoo: bar'} onChange={onChange} mode="yaml" />
+    );
+    const aceEditor = wrapper.find('AceEditor');
+    expect(aceEditor.prop('mode')).toEqual('yaml');
+    expect(aceEditor.prop('setOptions').readOnly).toEqual(false);
+    expect(aceEditor.prop('value')).toEqual('---\nfoo: bar');
+  });
+
+  it('should trigger onChange prop', () => {
+    debounce.mockImplementation(fn => fn);
+    const onChange = jest.fn();
+    const wrapper = mountWithContexts(
+      <CodeEditor value="---" onChange={onChange} mode="yaml" />
+    );
+    const aceEditor = wrapper.find('AceEditor');
+    aceEditor.prop('onChange')('newvalue');
+    expect(onChange).toHaveBeenCalledWith('newvalue');
+  });
+
+  it('should render in read only mode', () => {
+    const onChange = jest.fn();
+    const wrapper = mountWithContexts(
+      <CodeEditor value="---" onChange={onChange} mode="yaml" readOnly />
+    );
+    const aceEditor = wrapper.find('AceEditor');
+    expect(aceEditor.prop('setOptions').readOnly).toEqual(true);
+    expect(aceEditor.prop('value')).toEqual('---');
+  });
+});

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,12 +18,12 @@ 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 () => {
+  it('should toggle between yaml/json', async () => {
-    const value = '---\n';
+    const value = '---\nfoo: bar\nbaz: 3';
     const wrapper = mountWithContexts(
       <Formik initialValues={{ variables: value }}>
         {() => (
@@ -39,7 +39,10 @@ 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');
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual(
+      '{\n  "foo": "bar",\n  "baz": 3\n}'
+    );
     const buttons2 = wrapper.find('Button');
     expect(buttons2.at(0).prop('variant')).toEqual('secondary');
     expect(buttons2.at(1).prop('variant')).toEqual('primary');
@@ -47,7 +50,10 @@ 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');
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual(
+      'foo: bar\nbaz: 3\n'
+    );
   });
 
   it('should set Formik error if yaml is invalid', async () => {
@@ -65,10 +71,11 @@ 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);
   });
+
   it('should render tooltip', () => {
     const value = '---\n';
     const wrapper = mountWithContexts(
@@ -102,9 +109,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 +134,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.jsx

@@ -1,135 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { oneOf, bool, number, string, func } from 'prop-types';
-import { Controlled as ReactCodeMirror } from 'react-codemirror2';
-import styled from 'styled-components';
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/yaml/yaml';
-import 'codemirror/mode/jinja2/jinja2';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/addon/display/placeholder';
-
-const LINE_HEIGHT = 24;
-const PADDING = 12;
-
-const CodeMirror = styled(ReactCodeMirror)`
-  && {
-    height: initial;
-    padding: 0;
-  }
-
-  & > .CodeMirror {
-    height: ${props =>
-      props.fullHeight ? 'auto' : `${props.rows * LINE_HEIGHT + PADDING}px`};
-    font-family: var(--pf-global--FontFamily--monospace);
-  }
-
-  ${props =>
-    props.hasErrors &&
-    `
-    && {
-      --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
-      --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
-      padding-right: 24px;
-      padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
-      background: var(--pf-c-form-control--invalid--Background);
-      border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
-    }`}
-
-  ${props =>
-    props.options &&
-    props.options.readOnly &&
-    `
-    &,
-    &:hover {
-      --pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--300);
-    }
-
-    .CodeMirror-cursors {
-      display: none;
-    }
-
-    .CodeMirror-lines {
-      cursor: default;
-    }
-
-    .CodeMirror-scroll {
-      background-color: var(--pf-c-form-control--disabled--BackgroundColor);
-    }
-  `}
-  ${props =>
-    props.options &&
-    props.options.placeholder &&
-    `
-    .CodeMirror-empty {
-      pre.CodeMirror-placeholder {
-        color: var(--pf-c-form-control--placeholder--Color);
-        height: 100% !important;
-      }
-    }
-  `}
-`;
-
-function CodeMirrorInput({
-  value,
-  onChange,
-  mode,
-  readOnly,
-  hasErrors,
-  rows,
-  fullHeight,
-  className,
-  placeholder,
-}) {
-  // Workaround for CodeMirror bug: If CodeMirror renders in a modal on the
-  // modal's initial render, it appears as an empty box due to mis-calculated
-  // element height. Forcing an initial render before mounting <CodeMirror>
-  // fixes this.
-  const [isInitialized, setIsInitialized] = useState(false);
-  useEffect(() => {
-    if (!isInitialized) {
-      setIsInitialized(true);
-    }
-  }, [isInitialized]);
-  if (!isInitialized) {
-    return <div />;
-  }
-
-  return (
-    <CodeMirror
-      className={`pf-c-form-control ${className}`}
-      value={value}
-      onBeforeChange={(editor, data, val) => onChange(val)}
-      mode={mode}
-      hasErrors={hasErrors}
-      options={{
-        smartIndent: false,
-        lineNumbers: true,
-        lineWrapping: true,
-        placeholder,
-        readOnly,
-      }}
-      fullHeight={fullHeight}
-      rows={rows}
-    />
-  );
-}
-CodeMirrorInput.propTypes = {
-  value: string.isRequired,
-  onChange: func,
-  mode: oneOf(['javascript', 'yaml', 'jinja2']).isRequired,
-  readOnly: bool,
-  hasErrors: bool,
-  fullHeight: bool,
-  rows: number,
-  className: string,
-};
-CodeMirrorInput.defaultProps = {
-  readOnly: false,
-  onChange: () => {},
-  rows: 6,
-  fullHeight: false,
-  hasErrors: false,
-  className: '',
-};
-
-export default CodeMirrorInput;

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/SmartInventoryEdit/SmartInventoryEdit.test.jsx

@@ -74,6 +74,10 @@ describe('<SmartInventoryEdit />', () => {
     wrapper.unmount();
   });
 
+  test('should render CodeEditor field', () => {
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual('---');
+  });
+
   test('should fetch related instance groups on initial render', async () => {
     expect(InventoriesAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
   });

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/InventoryForm.test.jsx

@@ -94,6 +94,7 @@ describe('<InventoryForm />', () => {
       1
     );
     expect(wrapper.find('VariablesField[label="Variables"]').length).toBe(1);
+    expect(wrapper.find('CodeEditor').prop('value')).toEqual('---');
   });
 
   test('should update form values', async () => {

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/NotificationTemplateForm.test.jsx

@@ -79,6 +79,33 @@ describe('<NotificationTemplateForm />', () => {
     ).toEqual(defaultMessages);
   });
 
+  test('should render custom messages fields', () => {
+    const wrapper = mountWithContexts(
+      <NotificationTemplateForm
+        template={{
+          ...template,
+          messages: {
+            started: {
+              message: 'Started',
+              body: null,
+            },
+          },
+        }}
+        defaultMessages={defaultMessages}
+        detailUrl="/notification_templates/3/detail"
+        onSubmit={jest.fn()}
+        onCancel={jest.fn()}
+      />
+    );
+
+    expect(
+      wrapper
+        .find('CodeEditor')
+        .at(0)
+        .prop('value')
+    ).toEqual('Started');
+  });
+
   test('should submit', async () => {
     const handleSubmit = jest.fn();
     const wrapper = mountWithContexts(

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