diff --git a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
index 1aae849a671..b7f867a1240 100644
--- a/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
+++ b/webpack/assets/javascripts/react_app/components/ConfigReports/DiffModal/__tests__/DiffModal.test.js
@@ -15,7 +15,7 @@ const fixtures = {
     changeViewType: changeState,
   },
 };
-configure({ testIdAttribute: 'data-ouia-component-id'})
+configure({ testIdAttribute: 'data-ouia-component-id' });
 
 describe('DiffModal', () => {
   describe('rendering', () => {
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/Diff.fixtures.js b/webpack/assets/javascripts/react_app/components/DiffView/Diff.fixtures.js
index f93ffe96478..fe2f00f96d5 100644
--- a/webpack/assets/javascripts/react_app/components/DiffView/Diff.fixtures.js
+++ b/webpack/assets/javascripts/react_app/components/DiffView/Diff.fixtures.js
@@ -30,8 +30,8 @@ export const patchMock = {
 };
 
 export const fixtures = {
-    'render DiffView w/oldText & newText': diffMock,
-    'render DiffView w/Patch': patchMock,
+    diffMock,
+    patchMock,
   };
 
 export const PF_SELECTED = 'pf-m-selected';
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/DiffView.test.js b/webpack/assets/javascripts/react_app/components/DiffView/DiffView.test.js
index bd01f933647..a2507bf4d59 100644
--- a/webpack/assets/javascripts/react_app/components/DiffView/DiffView.test.js
+++ b/webpack/assets/javascripts/react_app/components/DiffView/DiffView.test.js
@@ -1,9 +1,26 @@
+import React from 'react';
 import { fixtures } from './Diff.fixtures';
-import { testComponentSnapshotsWithFixtures } from '../../common/testHelpers';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import DiffView from './DiffView';
 
 describe('DiffView', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(DiffView, fixtures));
+  describe('rendering', () => {
+    it('render DiffView w/oldText & newText', () => {
+      render(<DiffView {...fixtures.diffMock} />)
+      const table = screen.getByRole('table')
+
+      expect(table).toHaveClass("diff-split")
+      expect(screen.getByText('hello there friend')).toBeInTheDocument()
+    })
+
+    it('render DiffView w/Patch', () => {
+      render(<DiffView {...fixtures.patchMock} />)
+      const table = screen.getByRole('table')
+
+      expect(table).toHaveClass("diff-unified")
+      expect(screen.getByText('fooo')).toBeInTheDocument()
+    })
+  })
 });
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/__snapshots__/DiffView.test.js.snap b/webpack/assets/javascripts/react_app/components/DiffView/__snapshots__/DiffView.test.js.snap
deleted file mode 100644
index 84dc24525dc..00000000000
--- a/webpack/assets/javascripts/react_app/components/DiffView/__snapshots__/DiffView.test.js.snap
+++ /dev/null
@@ -1,90 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DiffView rendering render DiffView w/Patch 1`] = `
-<div>
-  <Memo(Diff)
-    diffType="modify"
-    hunks={
-      Array [
-        Object {
-          "changes": Array [
-            Object {
-              "content": "S",
-              "isDelete": true,
-              "lineNumber": 1,
-              "type": "delete",
-            },
-            Object {
-              "content": "Kernel 
- on an m",
-              "isDelete": true,
-              "lineNumber": 2,
-              "type": "delete",
-            },
-            Object {
-              "content": "",
-              "isDelete": true,
-              "lineNumber": 3,
-              "type": "delete",
-            },
-            Object {
-              "content": "fooo",
-              "isInsert": true,
-              "lineNumber": 1,
-              "type": "insert",
-            },
-            Object {
-              "content": "No newline at end of file",
-              "isNormal": true,
-              "newLineNumber": 2,
-              "oldLineNumber": 4,
-              "type": "normal",
-            },
-          ],
-          "content": "@@ -1,3 +1 @@",
-          "isPlain": false,
-          "newLines": 1,
-          "newStart": 1,
-          "oldLines": 3,
-          "oldStart": 1,
-        },
-      ]
-    }
-    key="1111111-2222222"
-    viewType="unified"
-  />
-</div>
-`;
-
-exports[`DiffView rendering render DiffView w/oldText & newText 1`] = `
-<Memo(Diff)
-  diffType="modify"
-  hunks={
-    Array [
-      Object {
-        "changes": Array [
-          Object {
-            "content": "hello friend",
-            "isDelete": true,
-            "lineNumber": 1,
-            "type": "delete",
-          },
-          Object {
-            "content": "hello there friend",
-            "isInsert": true,
-            "lineNumber": 1,
-            "type": "insert",
-          },
-        ],
-        "content": "@@ -1 +1 @@",
-        "isPlain": false,
-        "newLines": 1,
-        "newStart": 1,
-        "oldLines": 1,
-        "oldStart": 1,
-      },
-    ]
-  }
-  viewType="split"
-/>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/diffview.scss b/webpack/assets/javascripts/react_app/components/DiffView/diffview.scss
index e12c314ae9f..9609ce3bcaa 100644
--- a/webpack/assets/javascripts/react_app/components/DiffView/diffview.scss
+++ b/webpack/assets/javascripts/react_app/components/DiffView/diffview.scss
@@ -1,6 +1,4 @@
 #diff-toggle-buttons {
-  margin-bottom: 5px;
-
   .diff-button {
     text-transform: capitalize;
   }
diff --git a/webpack/assets/javascripts/react_app/components/Editor/Editor.js b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
index cca90d77ab4..31f648ef7c4 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/Editor.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
-
 import { noop } from '../../common/helpers';
 import DiffView from '../DiffView/DiffView';
 import EditorView from './components/EditorView';
@@ -11,6 +10,7 @@ import {
   EDITOR_THEMES,
   EDITOR_KEYBINDINGS,
   EDITOR_MODES,
+  EDITOR_TAB_NAMES,
 } from './EditorConstants';
 import './editor.scss';
 
@@ -185,19 +185,19 @@ class Editor extends React.Component {
           {...editorViewProps}
           key="editorPreview"
           name={editorNameTab.preview}
-          isSelected={selectedView === 'preview'}
+          isSelected={selectedView === EDITOR_TAB_NAMES.preview}
           className="ace_editor_form ace_preview"
         />
         <EditorView
           {...editorViewProps}
           key="editorCode"
           name={editorNameTab.input}
-          isSelected={selectedView === 'input'}
+          isSelected={selectedView === EDITOR_TAB_NAMES.input}
           className="ace_editor_form ace_input"
         />
         <div
           id="diff-table"
-          className={selectedView === 'diff' ? '' : 'hidden'}
+          className={selectedView === EDITOR_TAB_NAMES.diff ? '' : 'hidden'}
         >
           <DiffView
             oldText={template || ''}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js b/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
index 7a9166c1891..c855579a779 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
@@ -20,6 +20,7 @@ export const EDITOR_HOST_SELECT_CLEAR = 'EDITOR_HOST_SELECT_CLEAR';
 export const EDITOR_HOST_SELECT_RESET = 'EDITOR_HOST_SELECT_RESET';
 export const EDITOR_HOST_INITIAL_FETCH = 'EDITOR_HOST_INITIAL_FETCH';
 export const EDITOR_CHANGE_KIND = 'EDITOR_CHANGE_KIND';
+export const EDITOR_TAB_NAMES = { input: 'input', diff: 'diff', preview: 'preview' };
 
 export const EDITOR_HOSTS_URL = '/hosts/preview_host_collection.json';
 export const EDITOR_HOST_ARR = 'hosts';
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
index 2a741625fcf..2035fd7d9a2 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/Editor.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import { act } from '@testing-library/react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
 import Editor from '../Editor';
 import { editorOptions } from '../Editor.fixtures';
 
@@ -14,25 +14,42 @@ const didMountStubs = () => ({
 });
 
 const fixtures = {
-  'renders editor': editorOptions,
+  renders: editorOptions,
 };
 
+const renderEditor = (props = fixtures.renders) =>  render(<Editor {...props} />);
+
 describe('Editor', () => {
-  jest.useFakeTimers();
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(Editor, fixtures));
+  describe('rendering', () => {
+    const getAceEditors = () => screen.getAllByRole('textbox', { name: 'Cursor at row 1' })
+
+    it('renders', () => {
+      renderEditor();
+
+      expect(screen.getByText('<? />')).toBeInTheDocument();
+      expect(getAceEditors().length).toBe(2);
+    });
+    it('re-renders', () => {
+      const { rerender } = renderEditor();
+      const props = { ...editorOptions, ...didMountStubs() };
+      rerender(<Editor {...props} />);
 
+      expect(getAceEditors().length).toBe(2);
+    });
+  });
   describe('triggering', () => {
+    const getTabById = id =>
+      screen.getAllByRole('presentation', { current: "page" })
+        .find(tab => (tab.getAttribute('id') || '').match(id));
+
     it('should trigger input view', async () => {
       const props = { ...editorOptions, ...didMountStubs() };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(0)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      const inputTab = getTabById('input-navitem');
+
+      expect(inputTab).toBeInTheDocument();
+      expect(inputTab.parentElement).toHaveClass('pf-m-current');
+      expect(inputTab).toHaveTextContent('Editor');
     });
     it('should trigger input view with no template', async () => {
       const props = {
@@ -40,9 +57,11 @@ describe('Editor', () => {
         ...didMountStubs(),
         data: { ...editorOptions.data, template: null },
       };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(component.props().template).toBe('<? />');
+      renderEditor(props);
+      const aceEditors = document.querySelectorAll('.ace_editor_form');
+      const hasTemplateText = Array.from(aceEditors).some(container => container.textContent.includes('<? />'));
+
+      expect(hasTemplateText).toBe(false);
     });
     it('should trigger diff view', async () => {
       const props = {
@@ -50,14 +69,12 @@ describe('Editor', () => {
         ...didMountStubs(),
         selectedView: 'diff',
       };
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(1)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      const diffTab = getTabById('diff-navitem');
+
+      expect(diffTab).toBeInTheDocument();
+      expect(diffTab.parentElement).toHaveClass('pf-m-current');
+      expect(diffTab).toHaveTextContent('Changes');
     });
     it('should trigger preview view', async () => {
       const props = {
@@ -66,18 +83,14 @@ describe('Editor', () => {
         selectedView: 'preview',
         isRendering: true,
       };
-      const wrapper = mount(<Editor {...props} />);
-      wrapper.find('button.close').simulate('click');
-      await act(async () => jest.advanceTimersByTime(1000));
-      const component = mount(<Editor {...props} />);
-      await act(async () => jest.advanceTimersByTime(1000));
-
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(2)
-          .hasClass('active')
-      ).toBe(true);
+      renderEditor(props);
+      const closeButton = screen.queryByLabelText(/close danger alert/i);
+
+      if (closeButton) await act(async () => await fireEvent.click(closeButton));
+      const previewTab = getTabById('preview-navitem');
+
+      expect(previewTab).toBeInTheDocument();
+      expect(previewTab.parentElement).toHaveClass('pf-m-current');
     });
   });
   it('should trigger hidden value editor', async () => {
@@ -88,20 +101,29 @@ describe('Editor', () => {
       isRendering: true,
       isMasked: true,
     };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('.mask-editor').exists()).toBe(true);
+    renderEditor(props);
+    const maskedEditor = document.querySelector('.mask-editor');
+
+    expect(maskedEditor).toBeInTheDocument();
   });
   it('textarea disappears if readOnly', async () => {
+    const getTextAreasHidden = () => document.querySelectorAll('textarea.hidden')
     const props = {
       ...editorOptions,
       ...didMountStubs(),
       selectedView: 'input',
+      readOnly: false,
     };
-    const wrapper = mount(<Editor {...props} />);
-    await act(async () => jest.advanceTimersByTime(1000));
-    expect(wrapper.find('textarea.hidden').exists()).toBe(true);
-    wrapper.setProps({ readOnly: true });
-    expect(wrapper.find('textarea.hidden').exists()).toBe(false);
+    const { rerender } = renderEditor(props);
+
+    expect(getTextAreasHidden().length).toBe(1);
+
+    const newProps = {
+      ...props,
+      readOnly: true,
+    };
+    rerender(<Editor {...newProps} />);
+
+    expect(getTextAreasHidden().length).toBe(0);
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap
deleted file mode 100644
index 0aeefe79f77..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap
+++ /dev/null
@@ -1,176 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor rendering renders editor 1`] = `
-<div
-  id="editor-container"
->
-  <Alert
-    actionClose={
-      <AlertActionCloseButton
-        className="close"
-        onClose={[Function]}
-      />
-    }
-    className=""
-    id="preview_error_toast"
-    ouiaId="preview_error_toast"
-    title=""
-    variant="danger"
-  />
-  <EditorNavbar
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeSetting={[Function]}
-    changeTab={[Function]}
-    diffViewType="split"
-    fetchAndPreview={[Function]}
-    filteredHosts={Array []}
-    hosts={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    importFile={[Function]}
-    isDiff={true}
-    isFetchingHosts={false}
-    isLoading={false}
-    isMasked={false}
-    isRendering={false}
-    isSafemodeEnabled={true}
-    isSearchingHosts={false}
-    isSelectOpen={false}
-    keyBinding="Default"
-    keyBindings={
-      Array [
-        "Default",
-        "Emacs",
-        "Vim",
-      ]
-    }
-    liveAutocompletion={false}
-    mode="Ruby"
-    modes={
-      Array [
-        "Text",
-        "Json",
-        "Ruby",
-        "Html_ruby",
-        "Sh",
-        "Xml",
-        "Yaml",
-      ]
-    }
-    onHostSearch={[Function]}
-    onHostSelectToggle={[Function]}
-    onSearchClear={[Function]}
-    previewResult="previewResult"
-    previewTemplate={[Function]}
-    renderPath="/render/path"
-    renderedEditorValue="renderedEditorValue"
-    revertChanges={[Function]}
-    safemodeRenderPath="/safemoderender/path"
-    searchQuery=""
-    selectedHost={
-      Object {
-        "id": "",
-        "name": "",
-      }
-    }
-    selectedView="input"
-    showError={true}
-    showHide={true}
-    showHostSelector={true}
-    showImport={true}
-    showPreview={true}
-    template="<? />"
-    templateKindId=""
-    theme="Monokai"
-    themes={
-      Array [
-        "Github",
-        "Monokai",
-      ]
-    }
-    toggleMaskValue={[Function]}
-    toggleModal={[Function]}
-    toggleRenderView={[Function]}
-    value="value"
-  />
-  <EditorView
-    autocompletion={true}
-    className="ace_editor_form ace_preview"
-    isMasked={false}
-    isSelected={false}
-    key="editorPreview"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editorPreview"
-    onChange={[Function]}
-    readOnly={false}
-    theme="Monokai"
-    value="value"
-  />
-  <EditorView
-    autocompletion={true}
-    className="ace_editor_form ace_input"
-    isMasked={false}
-    isSelected={true}
-    key="editorCode"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editorCode"
-    onChange={[Function]}
-    readOnly={false}
-    theme="Monokai"
-    value="value"
-  />
-  <div
-    className="hidden"
-    id="diff-table"
-  >
-    <DiffView
-      newText="value"
-      oldText="<? />"
-      patch=""
-      viewType="split"
-    />
-  </div>
-  <EditorModal
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeEditorValue={[Function]}
-    diffViewType="split"
-    editorValue="value"
-    isMasked={false}
-    isMaximized={false}
-    isRendering={false}
-    key="editorModal"
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editor"
-    previewValue="previewResult"
-    readOnly={false}
-    selectedView="input"
-    template="<? />"
-    theme="Monokai"
-    title="title"
-    toggleModal={[Function]}
-  />
-  <textarea
-    className="hidden"
-    name="editor"
-    readOnly={true}
-    value="value"
-  />
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/integration.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/integration.test.js.snap
deleted file mode 100644
index 0dde8253abe..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/integration.test.js.snap
+++ /dev/null
@@ -1,130 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor integration test should flow: entered fullscreen 1`] = `
-Object {
-  "action": Array [
-    Array [
-      Object {
-        "type": "EDITOR_MODAL_TOGGLE",
-      },
-    ],
-  ],
-  "state": Object {
-    "editor": Object {
-      "autocompletion": true,
-      "diffViewType": "split",
-      "editorName": "editor",
-      "errorText": "",
-      "filteredHosts": Array [],
-      "hosts": Array [],
-      "isFetchingHosts": false,
-      "isLoading": true,
-      "isMasked": false,
-      "isMaximized": true,
-      "isRendering": true,
-      "isSearchingHosts": false,
-      "isSelectOpen": false,
-      "keyBinding": "Default",
-      "kind": "",
-      "liveAutocompletion": false,
-      "mode": "Ruby",
-      "previewResult": "",
-      "readOnly": false,
-      "renderedEditorValue": "",
-      "searchQuery": "",
-      "selectedHost": Object {
-        "id": "",
-        "name": "",
-      },
-      "selectedView": "preview",
-      "showError": false,
-      "templateClass": undefined,
-      "theme": "Monokai",
-      "value": "<? />",
-    },
-  },
-}
-`;
-
-exports[`Editor integration test should flow: initial state 1`] = `
-Object {
-  "editor": Object {
-    "autocompletion": true,
-    "diffViewType": "split",
-    "editorName": "editor",
-    "errorText": "",
-    "filteredHosts": Array [],
-    "hosts": Array [],
-    "isFetchingHosts": false,
-    "isLoading": false,
-    "isMasked": false,
-    "isMaximized": false,
-    "isRendering": false,
-    "isSearchingHosts": false,
-    "isSelectOpen": false,
-    "keyBinding": "Default",
-    "kind": "",
-    "liveAutocompletion": false,
-    "mode": "Ruby",
-    "previewResult": "",
-    "readOnly": false,
-    "renderedEditorValue": "",
-    "searchQuery": "",
-    "selectedHost": Object {
-      "id": "",
-      "name": "",
-    },
-    "selectedView": "input",
-    "showError": false,
-    "templateClass": undefined,
-    "theme": "Monokai",
-    "value": "<? />",
-  },
-}
-`;
-
-exports[`Editor integration test should flow: switched to preview view 1`] = `
-Object {
-  "action": Array [
-    Array [
-      Object {
-        "type": "EDITOR_SHOW_LOADING",
-      },
-    ],
-  ],
-  "state": Object {
-    "editor": Object {
-      "autocompletion": true,
-      "diffViewType": "split",
-      "editorName": "editor",
-      "errorText": "",
-      "filteredHosts": Array [],
-      "hosts": Array [],
-      "isFetchingHosts": false,
-      "isLoading": true,
-      "isMasked": false,
-      "isMaximized": false,
-      "isRendering": true,
-      "isSearchingHosts": false,
-      "isSelectOpen": false,
-      "keyBinding": "Default",
-      "kind": "",
-      "liveAutocompletion": false,
-      "mode": "Ruby",
-      "previewResult": "",
-      "readOnly": false,
-      "renderedEditorValue": "",
-      "searchQuery": "",
-      "selectedHost": Object {
-        "id": "",
-        "name": "",
-      },
-      "selectedView": "preview",
-      "showError": false,
-      "templateClass": undefined,
-      "theme": "Monokai",
-      "value": "<? />",
-    },
-  },
-}
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
index bc30f74c525..5c7296d3b22 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/integration.test.js
@@ -1,46 +1,50 @@
 import React from 'react';
-
-import IntegrationTestHelper from '../../../common/IntegrationTestHelper';
+import { act, screen, fireEvent } from '@testing-library/react';
+import { rtlHelpers } from '../../../common/testHelpers';
+import '@testing-library/jest-dom/extend-expect';
 
 import { editorOptions, serverRenderResponse } from '../Editor.fixtures';
 import Editor, { reducers } from '../index';
 import * as EditorActions from '../EditorActions'
-
-jest.mock('../../../redux/API');
+import { API } from '../../../redux/API';
+
+jest.mock('react-ace', () => {
+  return function MockReactAce(props) {
+    return (
+      <textarea
+        data-testid="mock-ace-editor"
+        value={props.value}
+        onChange={(e) => props.onChange && props.onChange(e.target.value)}
+        onBlur={props.onBlur}
+        onFocus={props.onFocus}
+      />
+    );
+  };
+});
 
 describe('Editor integration test', () => {
-  it('should flow', () => {
+  it('should flow', async () => {
+    jest
+      .spyOn(API, 'get')
+      .mockImplementation(async () => ({ data: [] }));
     jest
       .spyOn(EditorActions, 'fetchTemplatePreview')
       .mockImplementation(async () => serverRenderResponse);
 
-    const integrationTestHelper = new IntegrationTestHelper(reducers);
-
-    const component = integrationTestHelper.mount(
+    const { container } = rtlHelpers.renderWithStore(
       <Editor {...editorOptions} />
     );
-    integrationTestHelper.takeStoreSnapshot('initial state');
 
-    const previewBtn = component.find('#preview-navitem').at(1);
-    previewBtn.simulate('click');
-
-    integrationTestHelper.takeStoreAndLastActionSnapshot(
-      'switched to preview view'
-    );
-    expect(
-      component
-        .find('li[role="presentation"]')
-        .at(2)
-        .hasClass('active')
-    ).toBe(true);
+    const previewBtn = screen.getByText('Preview');
+    const previewTab = previewBtn.parentElement.parentElement;
+    await act(async () => await fireEvent.click(previewBtn));
 
-    IntegrationTestHelper.flushAllPromises();
-    component.update();
+    expect(previewTab).toHaveClass('pf-m-current');
 
-    const maximizeBtn = component.find('#fullscreen-btn').at(0);
-    maximizeBtn.simulate('click');
+    const fullscreenBtn = container.querySelector('#fullscreen-btn');
+    expect(fullscreenBtn).toBeInTheDocument();
+    await act(async () => await fireEvent.click(fullscreenBtn));
 
-    integrationTestHelper.takeStoreAndLastActionSnapshot('entered fullscreen');
-    expect(component.find('.editor-modal').length).toBeGreaterThan(0);
+    expect(document.querySelector('.pf-v5-c-modal-box')).toBeInTheDocument();
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorAlert.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorAlert.js
new file mode 100644
index 00000000000..d53c7a2d6c2
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorAlert.js
@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Alert, Button } from '@patternfly/react-core';
+import { translate as __ } from '../../../common/I18n';
+import { EDITOR_TAB_NAMES } from '../EditorConstants';
+
+const EditorAlert = ({
+  showPreview,
+  selectedView,
+  previewResult,
+  renderedEditorValue,
+  value,
+  onClick,
+}) =>
+  showPreview &&
+  selectedView === EDITOR_TAB_NAMES.preview &&
+  previewResult !== '' &&
+  renderedEditorValue !== value ? (
+    <div key="preview-alert" id="outdated-preview-alert">
+      <Alert
+        ouiaId="outdated-preview-alert"
+        variant="warning"
+        title={
+          <>
+            {__('Preview is outdated.')}
+            <Button ouiaId="preview-button" variant="link" onClick={onClick}>
+              {__('Preview')}
+            </Button>
+          </>
+        }
+      />
+    </div>
+  ) : null;
+
+EditorAlert.propTypes = {
+  showPreview: PropTypes.bool.isRequired,
+  selectedView: PropTypes.string.isRequired,
+  previewResult: PropTypes.string.isRequired,
+  renderedEditorValue: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+};
+
+export default EditorAlert;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
index bea7ae583c0..02ffaf4218e 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorHostSelect.js
@@ -44,11 +44,17 @@ class EditorHostSelect extends Component {
       searchQuery,
       selectedItem,
     } = this.props;
+
+    if (!show) {
+      return null;
+    }
+
     return (
-      <div
+      <li
+        key="editor-host-select"
+        className="pf-c-tabs__item"
+        role="presentation"
         ref={this.setWrapperRef}
-        id="editor-select-container"
-        className={show ? '' : 'hidden'}
       >
         <Select
           options={options}
@@ -63,7 +69,7 @@ class EditorHostSelect extends Component {
           selectedItem={selectedItem}
           isLoading={isLoading}
         />
-      </div>
+      </li>
     );
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
index 693b9c420bd..30014283f7c 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import EditorView from './EditorView';
 import DiffToggle from '../../DiffView/DiffToggle';
 import DiffView from '../../DiffView/DiffView';
+import { EDITOR_TAB_NAMES } from '../EditorConstants';
 
 const EditorModal = ({
   changeDiffViewType,
@@ -32,7 +33,7 @@ const EditorModal = ({
       <Title headingLevel="h4" id="editor-modal-h4" ouiaId="editor-modal-title">
         {title}
       </Title>
-      {selectedView === 'diff' && (
+      {selectedView === EDITOR_TAB_NAMES.diff && (
         <DiffToggle
           stateView={diffViewType}
           changeState={viewType => changeDiffViewType(viewType)}
@@ -52,7 +53,7 @@ const EditorModal = ({
       onClose={toggleModal}
       header={header}
     >
-      {selectedView === 'diff' ? (
+      {selectedView === EDITOR_TAB_NAMES.diff ? (
         <div id="diff-table">
           <DiffView
             oldText={template}
@@ -68,7 +69,7 @@ const EditorModal = ({
           theme={theme}
           keyBinding={keyBinding}
           onChange={changeEditorValue}
-          readOnly={readOnly || selectedView === 'preview'}
+          readOnly={readOnly || selectedView === EDITOR_TAB_NAMES.preview}
           className="editor ace_editor_modal"
           isMasked={isMasked}
           autocompletion={autocompletion}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
index 207a2737b81..2730f568624 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
@@ -1,11 +1,13 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Nav, Spinner, Alert, Button } from 'patternfly-react';
+import { Tabs } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
 import EditorRadioButton from './EditorRadioButton';
 import EditorOptions from './EditorOptions';
 import EditorHostSelect from './EditorHostSelect';
 import EditorSafemodeCheckbox from './EditorSafemodeCheckbox';
+import EditorAlert from './EditorAlert';
+import { EDITOR_TAB_NAMES } from '../EditorConstants';
 
 const EditorNavbar = ({
   changeDiffViewType,
@@ -67,138 +69,168 @@ const EditorNavbar = ({
     });
   };
   const selectedRenderPath = safemode ? safemodeRenderPath : renderPath;
+  const selectedTabsIndex = Object.values(EDITOR_TAB_NAMES).indexOf(
+    selectedView
+  );
 
-  return (
-    <div className="navbar navbar-form navbar-full-width navbar-editor">
-      <Nav className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
+  const renderTabsContent = () => {
+    const tabs = [];
+
+    tabs.push(
+      <EditorRadioButton
+        key="input"
+        eventKey={0}
+        stateView={selectedView}
+        btnView="input"
+        title={__('Editor')}
+        onClick={() => {
+          if (selectedView !== EDITOR_TAB_NAMES.input) {
+            if (isRendering) toggleRenderView();
+            changeTab(EDITOR_TAB_NAMES.input);
+          }
+        }}
+      />
+    );
+    tabs.push(
+      <EditorRadioButton
+        key="diff"
+        eventKey={1}
+        stateView={selectedView}
+        disabled={!isDiff}
+        btnView="diff"
+        title={__('Changes')}
+        onClick={() => {
+          if (selectedView !== EDITOR_TAB_NAMES.diff) {
+            changeTab(EDITOR_TAB_NAMES.diff);
+          }
+        }}
+      />
+    );
+
+    if (showPreview)
+      tabs.push(
         <EditorRadioButton
+          key="preview"
+          eventKey={2}
           stateView={selectedView}
-          btnView="input"
-          title={__('Editor')}
+          btnView="preview"
+          title={__('Preview')}
           onClick={() => {
-            if (selectedView !== 'input') {
-              if (isRendering) toggleRenderView();
-              changeTab('input');
+            if (selectedView !== EDITOR_TAB_NAMES.preview) {
+              if (!isRendering) toggleRenderView();
+              changeTab(EDITOR_TAB_NAMES.preview);
+              if (selectedHost.id === '')
+                fetchAndPreview(
+                  selectedRenderPath,
+                  templateKindId,
+                  !showHostSelector
+                );
             }
           }}
         />
-        <EditorRadioButton
-          stateView={selectedView}
-          disabled={!isDiff}
-          btnView="diff"
-          title={__('Changes')}
-          onClick={() => {
-            if (selectedView !== 'diff') {
-              changeTab('diff');
-            }
-          }}
+      );
+
+    if (
+      showPreview &&
+      showHostSelector &&
+      selectedView === EDITOR_TAB_NAMES.preview
+    )
+      tabs.push(
+        <EditorHostSelect
+          key="host-select"
+          show
+          open={isSelectOpen}
+          selectedItem={selectedHost}
+          placeholder={__('Select Host...')}
+          isLoading={isFetchingHosts}
+          onChange={host =>
+            previewTemplate({
+              host,
+              renderPath: selectedRenderPath,
+              templateKindId,
+            })
+          }
+          searchQuery={searchQuery}
+          onToggle={onHostSelectToggle}
+          onSearchChange={onHostSearch}
+          onSearchClear={onSearchClear}
+          options={isSearchingHosts ? filteredHosts : hosts}
         />
-        {showPreview && (
-          <React.Fragment>
-            <EditorRadioButton
-              stateView={selectedView}
-              btnView="preview"
-              title={__('Preview')}
-              onClick={() => {
-                if (selectedView !== 'preview') {
-                  if (!isRendering) toggleRenderView();
-                  changeTab('preview');
-                  if (selectedHost.id === '')
-                    fetchAndPreview(
-                      selectedRenderPath,
-                      templateKindId,
-                      !showHostSelector
-                    );
-                }
-              }}
-            />
-            {showHostSelector && (
-              <EditorHostSelect
-                show={selectedView === 'preview'}
-                open={isSelectOpen}
-                selectedItem={selectedHost}
-                placeholder={__('Select Host...')}
-                isLoading={isFetchingHosts}
-                onChange={host =>
-                  previewTemplate({
-                    host,
-                    renderPath: selectedRenderPath,
-                    templateKindId,
-                  })
-                }
-                searchQuery={searchQuery}
-                onToggle={onHostSelectToggle}
-                onSearchChange={onHostSearch}
-                onSearchClear={onSearchClear}
-                options={isSearchingHosts ? filteredHosts : hosts}
-                key="hostsSelect"
-              />
-            )}
-            <EditorSafemodeCheckbox
-              show={selectedView === 'preview'}
-              checked={safemode}
-              disabled={isSafemodeEnabled}
-              handleSafeModeChange={handleSafeModeChange}
-            />
-            {selectedView === 'preview' &&
-              previewResult !== '' &&
-              renderedEditorValue !== value && (
-                <div id="outdated-preview-alert">
-                  <Alert type="warning">
-                    {__('Preview is outdated.')}
-                    <Button
-                      bsStyle="link"
-                      onClick={() =>
-                        previewTemplate({
-                          host: selectedHost,
-                          renderPath: selectedRenderPath,
-                          templateKindId,
-                        })
-                      }
-                    >
-                      {__('Preview')}
-                    </Button>
-                  </Alert>
-                </div>
-              )}
-            {isLoading && (
-              <div id="preview-spinner">
-                <Spinner size="sm" loading />
-              </div>
-            )}
-          </React.Fragment>
-        )}
-      </Nav>
-      <EditorOptions
-        hosts={hosts}
-        value={value}
-        renderPath={renderPath}
-        showImport={showImport}
-        showHide={showHide}
+      );
+
+    if (showPreview)
+      tabs.push(
+        <EditorSafemodeCheckbox
+          key="safe-mode"
+          show={selectedView === EDITOR_TAB_NAMES.preview}
+          checked={safemode}
+          disabled={isSafemodeEnabled}
+          handleSafeModeChange={handleSafeModeChange}
+        />
+      );
+
+    tabs.push(
+      <EditorAlert
+        key="editor-alert"
         showPreview={showPreview}
-        showHostSelector={showHostSelector}
-        isDiff={isDiff}
-        diffViewType={diffViewType}
-        isMasked={isMasked}
-        isRendering={isRendering}
-        importFile={importFile}
-        template={template}
-        revertChanges={revertChanges}
-        changeDiffViewType={changeDiffViewType}
-        toggleMaskValue={toggleMaskValue}
-        changeSetting={changeSetting}
-        changeTab={changeTab}
-        toggleModal={toggleModal}
         selectedView={selectedView}
-        mode={mode}
-        modes={modes}
-        keyBinding={keyBinding}
-        keyBindings={keyBindings}
-        theme={theme}
-        themes={themes}
-        autocompletion={autocompletion}
-        liveAutocompletion={liveAutocompletion}
+        previewResult={previewResult}
+        renderedEditorValue={renderedEditorValue}
+        value={value}
+        onClick={() =>
+          previewTemplate({
+            host: selectedHost,
+            renderPath: selectedRenderPath,
+            templateKindId,
+          })
+        }
       />
+    );
+
+    return tabs;
+  };
+
+  return (
+    <div className="navbar navbar-form navbar-full-width navbar-editor">
+      <Tabs
+        ouiaId="editor-horizontal-navbar"
+        aria-label="Editor Tabs"
+        variant="horizontal"
+        activeKey={selectedTabsIndex}
+      >
+        {renderTabsContent()}
+        <EditorOptions
+          key="options"
+          hosts={hosts}
+          value={value}
+          renderPath={renderPath}
+          showImport={showImport}
+          showHide={showHide}
+          showPreview={showPreview}
+          showHostSelector={showHostSelector}
+          isDiff={isDiff}
+          diffViewType={diffViewType}
+          isMasked={isMasked}
+          isRendering={isRendering}
+          importFile={importFile}
+          template={template}
+          revertChanges={revertChanges}
+          changeDiffViewType={changeDiffViewType}
+          toggleMaskValue={toggleMaskValue}
+          changeSetting={changeSetting}
+          changeTab={changeTab}
+          toggleModal={toggleModal}
+          selectedView={selectedView}
+          mode={mode}
+          modes={modes}
+          keyBinding={keyBinding}
+          keyBindings={keyBindings}
+          theme={theme}
+          themes={themes}
+          autocompletion={autocompletion}
+          liveAutocompletion={liveAutocompletion}
+        />
+      </Tabs>
     </div>
   );
 };
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
index d1410d3f651..cd0b84f586f 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
@@ -2,7 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, FormControl } from 'patternfly-react';
+import { FormControl } from 'patternfly-react';
+import { Button, Icon, Tooltip, TooltipPosition } from '@patternfly/react-core';
 import {
   ArrowsAltIcon,
   EyeIcon,
@@ -11,11 +12,11 @@ import {
   UploadIcon,
 } from '@patternfly/react-icons';
 
-import { Tooltip, TooltipPosition, Icon } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
 import { bindMethods } from '../../../common/helpers';
 import DiffToggle from '../../DiffView/DiffToggle';
 import EditorSettings from './EditorSettings';
+import { EDITOR_TAB_NAMES } from '../EditorConstants';
 
 class EditorOptions extends React.Component {
   constructor(props) {
@@ -28,140 +29,173 @@ class EditorOptions extends React.Component {
     this.fileInput.click();
   }
 
-  render() {
+  renderOptionButtons() {
     const {
-      changeDiffViewType,
-      changeSetting,
       changeTab,
-      diffViewType,
       importFile,
       isDiff,
       isMasked,
-      keyBinding,
-      keyBindings,
-      mode,
-      modes,
       revertChanges,
       selectedView,
       showHide,
       showImport,
       template,
+      toggleMaskValue,
+    } = this.props;
+
+    const buttons = [];
+
+    if (showHide) {
+      buttons.push(
+        <Tooltip
+          key="hide-content-tooltip"
+          content={__('Hide Content')}
+          position={TooltipPosition.top}
+        >
+          <Button
+            ouiaId="hide-content-button"
+            isDisabled={selectedView !== EDITOR_TAB_NAMES.input}
+            className="editor-button"
+            id="hide-btn"
+            onClick={() => toggleMaskValue(isMasked)}
+            variant="link"
+          >
+            <Icon size="md">{isMasked ? <EyeIcon /> : <EyeSlashIcon />}</Icon>
+          </Button>
+        </Tooltip>
+      );
+    }
+
+    const revertButton = (
+      <Tooltip
+        key="revert-changes-tooltip"
+        content={__('Revert Local Changes')}
+        position={TooltipPosition.top}
+      >
+        <Button
+          ouiaId="revert-local-changes-button"
+          className="editor-button"
+          id="undo-btn"
+          onClick={() => {
+            if (
+              window.confirm(
+                'Are you sure you would like to revert all changes?'
+              )
+            ) {
+              revertChanges(template);
+              if (selectedView !== EDITOR_TAB_NAMES.input) {
+                changeTab(EDITOR_TAB_NAMES.input);
+              }
+            }
+          }}
+          isDisabled={!isDiff}
+          variant="link"
+        >
+          <Icon size="md">
+            <UndoIcon />
+          </Icon>
+        </Button>
+      </Tooltip>
+    );
+
+    buttons.push(revertButton);
+
+    if (showImport) {
+      buttons.push(
+        <Tooltip
+          key="import-file-tooltip"
+          content={__('Import File')}
+          position={TooltipPosition.top}
+        >
+          <Button
+            ouiaId="import-file-button"
+            isDisabled={selectedView !== EDITOR_TAB_NAMES.input}
+            className="import-button"
+            id="import-btn"
+            variant="link"
+            onClick={() => this.fileDialog()}
+          >
+            <Icon size="md">
+              <UploadIcon />
+            </Icon>
+            <FormControl
+              inputRef={ref => {
+                this.fileInput = ref;
+              }}
+              className="hidden"
+              type="file"
+              onChange={importFile}
+            />
+          </Button>
+        </Tooltip>
+      );
+    }
+
+    return buttons;
+  }
+
+  render() {
+    const {
+      changeDiffViewType,
+      changeSetting,
+      diffViewType,
+      keyBinding,
+      keyBindings,
+      mode,
+      modes,
+      selectedView,
       theme,
       themes,
       autocompletion,
       liveAutocompletion,
-      toggleMaskValue,
       toggleModal,
     } = this.props;
 
     return (
-      <div id="editor-dropdowns">
-        {selectedView === 'diff' && (
-          <DiffToggle
-            stateView={diffViewType}
-            changeState={viewType => changeDiffViewType(viewType)}
+      <>
+        <li key="diff-toggle" className="middle">
+          {selectedView === EDITOR_TAB_NAMES.diff && (
+            <DiffToggle
+              stateView={diffViewType}
+              changeState={viewType => changeDiffViewType(viewType)}
+            />
+          )}
+        </li>
+        <li key="divider" className="divider" />
+        <li key="editor-options" id="editor-options">
+          {this.renderOptionButtons()}
+          <EditorSettings
+            key="editor-settings"
+            changeSetting={changeSetting}
+            selectedView={selectedView}
+            modes={modes}
+            mode={mode}
+            keyBindings={keyBindings}
+            keyBinding={keyBinding}
+            theme={theme}
+            themes={themes}
+            autocompletion={autocompletion}
+            liveAutocompletion={liveAutocompletion}
           />
-        )}
-
-        <h4 id="divider">|</h4>
-        {showHide && (
-          <Tooltip content={__('Hide Content')} position={TooltipPosition.top}>
-            <Button
-              disabled={selectedView !== 'input'}
-              className="editor-button"
-              id="hide-btn"
-              onClick={() => toggleMaskValue(isMasked)}
-              bsStyle="link"
-            >
-              <Icon size="md">{isMasked ? <EyeIcon /> : <EyeSlashIcon />}</Icon>
-            </Button>
-          </Tooltip>
-        )}
-        {isDiff ? ( // fixing tooltip showing sometimes for disabled icon
           <Tooltip
-            content={__('Revert Local Changes')}
+            key="maximize-editor-tooltip"
+            content={__('Maximize')}
             position={TooltipPosition.top}
           >
             <Button
+              ouiaId="maximize-editor-button"
               className="editor-button"
-              id="undo-btn"
-              onClick={() => {
-                if (
-                  window.confirm(
-                    'Are you sure you would like to revert all changes?'
-                  )
-                ) {
-                  revertChanges(template);
-                  if (selectedView !== 'input') changeTab('input');
-                }
-              }}
-              bsStyle="link"
-            >
-              <Icon size="md">
-                <UndoIcon />
-              </Icon>
-            </Button>
-          </Tooltip>
-        ) : (
-          <Button
-            disabled
-            className="editor-button"
-            id="undo-btn"
-            bsStyle="link"
-          >
-            <Icon size="md">
-              <UndoIcon />
-            </Icon>
-          </Button>
-        )}
-        {showImport && (
-          <Tooltip content={__('Import File')} position={TooltipPosition.top}>
-            <Button
-              disabled={selectedView !== 'input'}
-              className="import-button"
-              id="import-btn"
-              bsStyle="link"
-              onClick={() => this.fileDialog()}
+              id="fullscreen-btn"
+              onClick={toggleModal}
+              variant="link"
             >
               <Icon size="md">
-                <UploadIcon />
+                <ArrowsAltIcon />
               </Icon>
-              <FormControl
-                inputRef={ref => {
-                  this.fileInput = ref;
-                }}
-                className="hidden"
-                type="file"
-                onChange={importFile}
-              />
             </Button>
           </Tooltip>
-        )}
-        <EditorSettings
-          changeSetting={changeSetting}
-          selectedView={selectedView}
-          modes={modes}
-          mode={mode}
-          keyBindings={keyBindings}
-          keyBinding={keyBinding}
-          theme={theme}
-          themes={themes}
-          autocompletion={autocompletion}
-          liveAutocompletion={liveAutocompletion}
-        />
-        <Tooltip content={__('Maximize')} position={TooltipPosition.top}>
-          <Button
-            className="editor-button"
-            id="fullscreen-btn"
-            onClick={toggleModal}
-            bsStyle="link"
-          >
-            <Icon size="md">
-              <ArrowsAltIcon />
-            </Icon>
-          </Button>
-        </Tooltip>
-      </div>
+        </li>
+      </>
     );
   }
 }
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
index 9d67ea08c8a..93d48e5ce52 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { NavItem } from 'patternfly-react';
+import { Tab, TabTitleIcon, TabTitleText } from '@patternfly/react-core';
 
 const EditorRadioButton = ({
+  eventKey,
   btnView,
   disabled,
   icon,
@@ -10,18 +11,29 @@ const EditorRadioButton = ({
   stateView,
   title,
 }) => (
-  <NavItem
-    disabled={disabled}
-    active={stateView === btnView}
+  <Tab
+    eventKey={eventKey}
+    key={`${btnView}-navitem`}
+    role="presentation"
+    ouiaId={`${btnView}-navitem`}
+    isDisabled={disabled}
     id={`${btnView}-navitem`}
     onClick={onClick}
-  >
-    {icon}
-    {icon ? ` ${title}` : title}
-  </NavItem>
+    title={
+      icon ? (
+        <>
+          <TabTitleIcon>{icon}</TabTitleIcon>
+          <TabTitleText>{title}</TabTitleText>
+        </>
+      ) : (
+        <TabTitleText>{title}</TabTitleText>
+      )
+    }
+  />
 );
 
 EditorRadioButton.propTypes = {
+  eventKey: PropTypes.number.isRequired,
   btnView: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
   icon: PropTypes.node,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
index cf31ddd9b8a..c52de27ab7c 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSafemodeCheckbox.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Checkbox } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
-import './editorsafemodecheckbox.scss';
 
 const EditorSafemodeCheckbox = ({
   show,
@@ -11,21 +11,16 @@ const EditorSafemodeCheckbox = ({
 }) => {
   if (show) {
     return (
-      <React.Fragment>
-        <label
-          className="safemode-rendering-checkbox"
-          htmlFor="safemode-rendering-checkbox"
-        >
-          {__('Safemode')}
-        </label>
-        <input
-          type="checkbox"
-          id="safemode-rendering-checkbox"
-          onChange={handleSafeModeChange}
-          checked={checked}
-          disabled={disabled}
-        />
-      </React.Fragment>
+      <Checkbox
+        ouiaId="safemode-rendering-switch"
+        id="safemode-rendering-checkbox"
+        className="safemode-rendering-checkbox"
+        label={__('Safemode')}
+        isChecked={checked}
+        isDisabled={disabled}
+        onChange={handleSafeModeChange}
+        isLabelBeforeButton
+      />
     );
   }
   return null;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
index 6d741b37e2b..c050aeda31b 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
@@ -1,8 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, MenuItem, Button } from 'patternfly-react';
 import { CogIcon } from '@patternfly/react-icons';
 import {
+  Button,
+  Checkbox,
+  Form,
+  FormGroup,
+  FormSelect,
+  FormSelectOption,
   Icon,
   Popover,
   PopoverPosition,
@@ -10,6 +15,7 @@ import {
   TooltipPosition,
 } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
+import { EDITOR_TAB_NAMES } from '../EditorConstants';
 
 const EditorSettings = ({
   selectedView,
@@ -26,102 +32,92 @@ const EditorSettings = ({
   <>
     <Popover
       id="cog-popover"
-      position={PopoverPosition.bottom}
+      position={PopoverPosition.auto}
       enableFlip={false}
       hasAutoWidth
       headerContent={__('Settings')}
       bodyContent={
-        <div>
-          <div className="cog-popover-dropdown">
-            <div className="cog-popover-dropdown-title">{__('Syntax')}</div>
-            <Dropdown disabled={selectedView === 'preview'} id="mode-dropdown">
-              <Dropdown.Toggle>{mode}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {modes.map((aceMode, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ mode: aceMode })}
-                  >
-                    {aceMode}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
-          <div className="cog-popover-dropdown">
-            <div className="cog-popover-dropdown-title">{__('Keybind')}</div>
-            <Dropdown
-              disabled={selectedView === 'preview'}
-              id="keybindings-dropdown"
+        <Form>
+          <FormGroup label={__('Syntax')} fieldId="mode-select">
+            <FormSelect
+              ouiaId="mode-select"
+              id="mode-select"
+              value={mode}
+              onChange={(_event, value) => changeSetting({ mode: value })}
+              isDisabled={selectedView === EDITOR_TAB_NAMES.preview}
             >
-              <Dropdown.Toggle>{keyBinding}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {keyBindings.map((keyBind, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ keyBinding: keyBind })}
-                  >
-                    {keyBind}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
-          <div className="cog-popover-dropdown">
-            <div className="cog-popover-dropdown-title">{__('Theme')}</div>
-            <Dropdown id="themes-dropdown">
-              <Dropdown.Toggle>{theme}</Dropdown.Toggle>
-              <Dropdown.Menu id="settings-dropdown">
-                {themes.map((themeKey, i) => (
-                  <MenuItem
-                    key={i}
-                    onClick={() => changeSetting({ theme: themeKey })}
-                  >
-                    {themeKey}
-                  </MenuItem>
-                ))}
-              </Dropdown.Menu>
-            </Dropdown>
-          </div>
-          <div className="cog-popover-dropdown">
-            <div className="cog-popover-dropdown-title">
-              {__('Autocompletion')}
-            </div>
-            <div className="dropdown btn-group">
-              <input
-                id="autocompletion-checkbox"
-                name="autocompletion"
-                type="checkbox"
-                checked={autocompletion}
-                onChange={e =>
-                  changeSetting({ autocompletion: !autocompletion })
-                }
-              />
-            </div>
-          </div>
-          <div className="cog-popover-dropdown">
-            <div className="cog-popover-dropdown-title">
-              {__('Live Autocompletion')}
-            </div>
-            <div className="dropdown btn-group">
-              <input
-                id="live-autocompletion-checkbox"
-                name="liveAutocompletion"
-                type="checkbox"
-                checked={liveAutocompletion}
-                disabled={!autocompletion}
-                onChange={e =>
-                  changeSetting({ liveAutocompletion: !liveAutocompletion })
-                }
-              />
-            </div>
-          </div>
-        </div>
+              {modes.map((aceMode, i) => (
+                <FormSelectOption key={i} value={aceMode} label={aceMode} />
+              ))}
+            </FormSelect>
+          </FormGroup>
+          <FormGroup label={__('Keybind')} fieldId="keybindings-select">
+            <FormSelect
+              ouiaId="keybindings-select"
+              id="keybindings-select"
+              value={keyBinding}
+              onChange={(_event, value) => changeSetting({ keyBinding: value })}
+              isDisabled={selectedView === EDITOR_TAB_NAMES.preview}
+            >
+              {keyBindings.map((keyBind, i) => (
+                <FormSelectOption key={i} value={keyBind} label={keyBind} />
+              ))}
+            </FormSelect>
+          </FormGroup>
+          <FormGroup label={__('Theme')} fieldId="themes-select">
+            <FormSelect
+              ouiaId="themes-select"
+              id="themes-select"
+              value={theme}
+              onChange={(_event, value) => changeSetting({ theme: value })}
+            >
+              {themes.map((themeKey, i) => (
+                <FormSelectOption key={i} value={themeKey} label={themeKey} />
+              ))}
+            </FormSelect>
+          </FormGroup>
+          <FormGroup
+            label={__('Autocompletion')}
+            fieldId="autocompletion-checkbox"
+          >
+            <Checkbox
+              ouiaId="autocompletion-checkbox"
+              id="autocompletion-checkbox"
+              name="autocompletion"
+              isChecked={autocompletion}
+              onChange={(_event, value) =>
+                changeSetting({ autocompletion: value })
+              }
+              label={__('Enable autocompletion')}
+            />
+          </FormGroup>
+          <FormGroup
+            label={__('Live Autocompletion')}
+            fieldId="live-autocompletion-checkbox"
+          >
+            <Checkbox
+              ouiaId="live-autocompletion-checkbox"
+              id="live-autocompletion-checkbox"
+              name="liveAutocompletion"
+              isChecked={liveAutocompletion}
+              isDisabled={!autocompletion}
+              onChange={(_event, value) =>
+                changeSetting({ liveAutocompletion: value })
+              }
+              label={__('Enable live autocompletion')}
+            />
+          </FormGroup>
+        </Form>
       }
-      triggerRef={() => document.getElementById('cog-btn')}
+      triggerRef={() => document.getElementById('settings-btn')}
     />
     <Tooltip content={__('Settings')} position={TooltipPosition.top}>
-      <Button className="editor-button" id="cog-btn" bsStyle="link">
+      <Button
+        ouiaId="editor-settings-button"
+        className="editor-button"
+        id="settings-btn"
+        variant="link"
+      >
         <Icon size="md">
           <CogIcon />
         </Icon>
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorHostSelect.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorHostSelect.test.js
index ef8eeab7dcc..877ec323f6f 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorHostSelect.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorHostSelect.test.js
@@ -1,11 +1,14 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
 import { noop } from '../../../../common/helpers';
 
 import EditorHostSelect from '../EditorHostSelect';
 import { editorOptions } from '../../Editor.fixtures';
 
 const fixtures = {
-  'renders EditorHostSelect': {
+  default: {
     show: true,
     open: true,
     selectedItem: { id: '1', name: 'one' },
@@ -17,7 +20,7 @@ const fixtures = {
     isLoading: false,
     options: editorOptions.hosts,
   },
-  'renders EditorHostSelect loading': {
+  loading: {
     show: true,
     open: true,
     onToggle: noop,
@@ -32,6 +35,50 @@ const fixtures = {
 };
 
 describe('EditorHostSelect', () => {
-  describe('should render', () =>
-    testComponentSnapshotsWithFixtures(EditorHostSelect, fixtures));
+  describe('should render', () => {
+    it('renders EditorHostSelect with default props', () => {
+      render(<EditorHostSelect {...fixtures.default} />);
+
+      const container = document.querySelector('.pf-c-tabs__item');
+      expect(container).toBeInTheDocument();
+      expect(container).not.toHaveClass('hidden');
+
+      const selectContainer = document.querySelector('.select-container-pf');
+      expect(selectContainer).toBeInTheDocument();
+      expect(selectContainer).toHaveClass('open');
+
+      const selectedDisplay = screen.getByText('one'); /* selected item */
+      expect(selectedDisplay).toBeInTheDocument();
+
+      const searchInput = screen.getByPlaceholderText('Filter Host...'); /* placeholder text */
+      expect(searchInput).toBeInTheDocument();
+      expect(searchInput).toHaveValue('');
+
+      expect(screen.getByText('host1')).toBeInTheDocument();
+      expect(screen.getByText('host2')).toBeInTheDocument();
+
+      const activeOption = document.querySelector('.list-group-item.active'); /* active option */
+      expect(activeOption).toBeInTheDocument();
+      expect(activeOption).toHaveTextContent('host1');
+    })
+    it('renders EditorHostSelect with loading state', () => {
+      render(<EditorHostSelect {...fixtures.loading} />);
+
+      const loadingContainer = document.querySelector('#select-loading-container');
+      expect(loadingContainer).toBeInTheDocument();
+
+      const spinner = document.querySelector('#select-spinner');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveClass('spinner', 'spinner-sm');
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+    it('renders not with show false prop', () => {
+      render(<EditorHostSelect {...fixtures.default} show={false} />);
+
+      const container = document.querySelector('.pf-c-tabs__item');
+
+      expect(container).not.toBeInTheDocument();
+    })
+  })
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorModal.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorModal.test.js
index 9fbe4578d1f..9b250d8aa2e 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorModal.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorModal.test.js
@@ -1,23 +1,43 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import EditorModal from '../EditorModal';
 import { editorOptions } from '../../Editor.fixtures';
 
 const fixtures = {
-  'renders EditorModal editor': {
+  default: {
     ...editorOptions,
     editorValue: '</>',
     onHide: jest.fn(),
+    isMaximized: true,
   },
-  'renders EditorModal diff': {
+  diff: {
     ...editorOptions,
     selectedView: 'diff',
     editorValue: '</>',
     onHide: jest.fn(),
+    isMaximized: true,
   },
 };
 
 describe('EditorModal', () => {
-  describe('should render', () =>
-    testComponentSnapshotsWithFixtures(EditorModal, fixtures));
+  describe('rendering', () => {
+    it('renders EditorModal editor', () => {
+      render(<EditorModal {...fixtures.default} />)
+      const modal = document.querySelector('#editor-modal');
+
+      expect(modal).toBeInTheDocument();
+      expect(document.querySelector('.input.monokai')).toBeInTheDocument();
+    })
+    it('renders diff view with real components', () => {
+      render(<EditorModal {...fixtures.diff} />);
+
+      const modal = document.querySelector('#editor-modal');
+      expect(modal).toBeInTheDocument();
+
+      expect(document.querySelector('.diff.monokai')).toBeInTheDocument();
+      expect(document.querySelector('#diff-table')).toBeInTheDocument();
+    });
+  })
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
index 04ca650440c..d479522f4c4 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import EditorNavbar from '../EditorNavbar';
 import { editorOptions, showBooleans } from '../../Editor.fixtures';
@@ -14,41 +14,51 @@ const props = {
   isDiff: true,
 };
 
-const fixtures = {
-  'renders EditorNavbar': props,
-};
-
 describe('EditorNavbar', () => {
-  describe('rendring', () =>
-    testComponentSnapshotsWithFixtures(EditorNavbar, fixtures));
+  describe('rendering', () => {
+    it('renders EditorNavbar', () => {
+      render(<EditorNavbar {...props}/>)
 
+      const navbar = screen.getByRole('tablist' );
+      expect(navbar).toBeInTheDocument();
+      expect(navbar).toHaveClass('pf-v5-c-tabs__list');
+    })
+  })
   describe('simulate onClick', () => {
-    const changeTab = jest.fn();
-
-    const wrapper = mount(
-      <EditorNavbar
-        {...props}
-        changeTab={changeTab}
-        isDiff
-        isRendering
-        selectedView="preview"
-      />
-    );
-    wrapper
-      .find('#input-navitem')
-      .at(1)
-      .simulate('click');
-    wrapper
-      .find('#diff-navitem')
-      .at(1)
-      .simulate('click');
-
-    wrapper.setProps({ ...props, isRendering: false, selectedView: 'input' });
-    wrapper.update();
-    wrapper
-      .find('#preview-navitem')
-      .at(1)
-      .simulate('click');
-    expect(changeTab).toHaveBeenCalledTimes(2);
+    it('handles click correctly', async () => {
+      const getTabById = id =>
+            screen.getAllByRole('presentation', { current: "page" })
+                  .find(tab => (tab.getAttribute('id') || '').match(id));
+
+      const changeTab = jest.fn();
+
+      const { rerender } = render(
+        <EditorNavbar
+          {...props}
+          changeTab={changeTab}
+          isDiff
+          isRendering
+          selectedView="preview"
+        />
+      );
+
+      const inputTab = getTabById('input-navitem');
+      const diffTab = getTabById('diff-navitem');
+      await act(async () => await fireEvent.click(inputTab));
+      await act(async () => await fireEvent.click(diffTab));
+
+      rerender(
+        <EditorNavbar
+          {...props}
+          changeTab={changeTab}
+          isRendering={false}
+          selectedView="input"
+        />
+      );
+      const previewTab = getTabById('preview-navitem');
+      await act(async () => await fireEvent.click(previewTab));
+
+      expect(changeTab).toHaveBeenCalledTimes(3);
+    })
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorOptions.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorOptions.test.js
index d7b31e68a5a..be98ee3d0eb 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorOptions.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorOptions.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import { render, screen, act, fireEvent, configure } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import EditorOptions from '../EditorOptions';
 import { editorOptions, showBooleans } from '../../Editor.fixtures';
@@ -11,53 +11,62 @@ const fixtures = {
   'renders EditorOptions': props,
 };
 
+configure({ testIdAttribute: 'data-ouia-component-id' });
+
 describe('EditorOptions', () => {
-  describe('EditorOptions', () =>
-    testComponentSnapshotsWithFixtures(EditorOptions, fixtures));
-
-  describe('simulate onClick', () => {
-    const toggleMaskValue = jest.fn();
-    const changeTab = jest.fn();
-    const revertChanges = jest.fn();
-    jest.mock('../EditorOptions');
-    window.confirm = jest.fn(() => true);
-
-    const diffWrapper = mount(
-      <EditorOptions
-        {...props}
-        changeTab={changeTab}
-        toggleMaskValue={toggleMaskValue}
-        revertChanges={revertChanges}
-        isDiff
-        selectedView="diff"
-      />
-    );
-
-    const inputWrapper = mount(
-      <EditorOptions
-        {...props}
-        changeTab={changeTab}
-        toggleMaskValue={toggleMaskValue}
-        revertChanges={revertChanges}
-        isDiff
-      />
-    );
-
-    diffWrapper
-      .find('#undo-btn')
-      .at(0)
-      .simulate('click');
-    inputWrapper
-      .find('#hide-btn')
-      .at(0)
-      .simulate('click');
-    diffWrapper
-      .find('#import-btn')
-      .at(0)
-      .simulate('click');
-
-    expect(toggleMaskValue).toHaveBeenCalledTimes(1);
-    expect(changeTab).toHaveBeenCalledTimes(1);
-    expect(window.confirm).toHaveBeenCalledTimes(1);
+  it('renders', () => {
+    render(<EditorOptions {...props}/>)
+    const editorDropdowns = document.getElementById('editor-options');
+
+    expect(editorDropdowns).toBeInTheDocument();
+
+    const hideButton = screen.getByTestId('hide-content-button');
+    expect(hideButton).toBeInTheDocument();
+  })
+  describe('simulate', () => {
+    it('clicks', async () => {
+      const toggleMaskValue = jest.fn();
+      const changeTab = jest.fn();
+      const revertChanges = jest.fn();
+      jest.mock('../EditorOptions');
+      window.confirm = jest.fn(() => true);
+
+      const { rerender } = render( /* diff view */
+        <EditorOptions
+          {...props}
+          changeTab={changeTab}
+          toggleMaskValue={toggleMaskValue}
+          revertChanges={revertChanges}
+          isDiff
+          selectedView="diff"
+        />
+      );
+      const undoButton = screen.getByTestId('revert-local-changes-button');
+      await act(async () => await fireEvent.click(undoButton));
+
+      expect(window.confirm).toHaveBeenCalledTimes(1);
+      expect(revertChanges).toHaveBeenCalledTimes(1);
+
+
+      rerender( /* input view */
+        <EditorOptions
+          {...props}
+          changeTab={changeTab}
+          toggleMaskValue={toggleMaskValue}
+          revertChanges={revertChanges}
+          isDiff
+        />
+      );
+
+      const hideButton = screen.getByTestId('hide-content-button');
+      await act(async () => await fireEvent.click(hideButton));
+
+      expect(toggleMaskValue).toHaveBeenCalledTimes(1);
+
+      const importButton = screen.getByTestId('import-file-button');
+      await act(async () => await fireEvent.click(importButton));
+
+      expect(changeTab).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
index a10b0dc25c1..5f3bea676c3 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
@@ -1,11 +1,15 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { configure, render, screen } from "@testing-library/react"
+import '@testing-library/jest-dom/extend-expect';
+
 import { noop } from '../../../../common/helpers';
 
 import EditorRadioButton from '../EditorRadioButton';
 import { editor } from '../../Editor.fixtures';
 
 const fixtures = {
-  'renders EditorRadioButton': {
+  renders: {
+    eventKey: 0,
     stateView: editor.selectedView,
     btnView: editor.selectedView,
     title: 'Editor',
@@ -13,5 +17,16 @@ const fixtures = {
   },
 };
 
-describe('EditorRadioButton', () =>
-  testComponentSnapshotsWithFixtures(EditorRadioButton, fixtures));
+configure({ testIdAttribute: 'data-ouia-component-id' });
+
+describe('EditorRadioButton', () => {
+  it('renders', () => {
+    render(<EditorRadioButton {...fixtures.renders} />);
+
+    const navItem = screen.getByText('Editor');
+    expect(navItem).toBeInTheDocument();
+
+    const navItemContainer = screen.getByTestId('input-navitem');
+    expect(navItemContainer).toBeInTheDocument();
+  })
+})
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
index 740c57ee85e..a8fbce4de92 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorSettings.test.js
@@ -1,11 +1,16 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+
+import React from 'react'
+import { act, configure, fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect';
+
 import { noop } from '../../../../common/helpers';
 
 import EditorSettings from '../EditorSettings';
 import { dropdowns } from '../../Editor.fixtures';
 
 const fixtures = {
-  'renders EditorSettings': {
+  default: {
     ...dropdowns,
     mode: 'Ruby',
     selectedView: 'input',
@@ -15,7 +20,7 @@ const fixtures = {
     keyBinding: 'vim',
     changeSetting: noop,
   },
-  'renders EditorSettings w/preview': {
+  withPreview: {
     ...dropdowns,
     mode: 'Ruby',
     selectedView: 'preview',
@@ -27,5 +32,61 @@ const fixtures = {
   },
 };
 
-describe('EditorSettings', () =>
-  testComponentSnapshotsWithFixtures(EditorSettings, fixtures));
+configure({ testIdAttribute: 'data-ouia-component-id' })
+
+describe('EditorSettings', () => {
+  it('renders with default', async () => {
+    render(<EditorSettings {...fixtures.default} />);
+    const settingsButton = screen.getByTestId('editor-settings-button')
+
+    await act(async () => await fireEvent.click(settingsButton) )
+
+    expect(screen.getByLabelText("Syntax")).toBeInTheDocument();
+    expect(screen.getByLabelText("Keybind")).toBeInTheDocument();
+    expect(screen.getByLabelText("Theme")).toBeInTheDocument();
+    expect(screen.getByLabelText("Autocompletion")).toBeInTheDocument();
+    expect(screen.getByLabelText("Live Autocompletion")).toBeInTheDocument();
+  });
+  it('renders with preview', async () => {
+    render(<EditorSettings {...fixtures.withPreview} />);
+    const settingsButton = screen.getByTestId('editor-settings-button')
+
+    await act(async () => await fireEvent.click(settingsButton) )
+
+    expect(screen.getByLabelText("Syntax")).toBeInTheDocument();
+    expect(screen.getByLabelText("Keybind")).toBeInTheDocument();
+    expect(screen.getByLabelText("Theme")).toBeInTheDocument();
+    expect(screen.getByLabelText("Autocompletion")).toBeInTheDocument();
+    expect(screen.getByLabelText("Live Autocompletion")).toBeInTheDocument();
+
+    /* preview view */
+    const modeSelect = screen.getByLabelText("Syntax");
+    const keybindingSelect = screen.getByLabelText("Keybind");
+
+    expect(modeSelect).toBeDisabled();
+    expect(keybindingSelect).toBeDisabled();
+
+    const themeSelect = screen.getByLabelText("Theme");
+    expect(themeSelect).not.toBeDisabled();
+
+    const autocompletionCheckbox = screen.getByLabelText("Autocompletion");
+    const liveAutocompletionCheckbox = screen.getByLabelText("Live Autocompletion");
+
+    expect(autocompletionCheckbox).not.toBeDisabled();
+    expect(liveAutocompletionCheckbox).not.toBeDisabled();
+  })
+  describe('form interactions', () => {
+    it('should call changeSetting when mode is changed', async () => {
+      const mockChangeSetting = jest.fn();
+      render(<EditorSettings {...fixtures.default} changeSetting={mockChangeSetting} />);
+
+      const settingsButton = screen.getByTestId('editor-settings-button')
+      await act(async () => await fireEvent.click(settingsButton) )
+
+      const modeSelect = screen.getByLabelText(/syntax/i);
+      await userEvent.selectOptions(modeSelect, 'Text');
+
+      expect(mockChangeSetting).toHaveBeenCalledWith({ mode: 'Text' });
+    });
+  })
+})
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorView.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorView.test.js
index 298eb29dcac..113866aeb9e 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorView.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorView.test.js
@@ -1,18 +1,63 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import EditorView from '../EditorView';
 import { editor } from '../../Editor.fixtures';
 
 const fixtures = {
-  'renders EditorView': editor,
-  'renders EditorView w/vim&mask': {
+  default: editor,
+  vimMask: {
     ...editor,
     isMasked: true,
     keyBinding: 'vim',
   },
 };
 
+jest.mock('react-ace', () => {
+  return function MockReactAce(props) {
+    return (
+      <div data-testid="react-ace" data-props={JSON.stringify(props)}>
+        Mock ReactAce Editor
+      </div>
+    );
+  };
+});
+
 describe('EditorView', () => {
-  describe('EditorView', () =>
-    testComponentSnapshotsWithFixtures(EditorView, fixtures));
+  describe('rendering', () => {
+    const parseNodeProps = node => JSON.parse(node.getAttribute('data-props'));
+
+    it('renders with basic configuration', () => {
+      render(<EditorView {...fixtures.default} />);
+      const aceEditor = screen.getByTestId('react-ace');
+
+      expect(aceEditor).toBeInTheDocument();
+
+      const props = parseNodeProps(aceEditor);
+
+      expect(props.value).toEqual('value');
+      expect(props.mode).toEqual('ruby');
+      expect(props.theme).toEqual('monokai');
+      expect(props.name).toEqual('editor');
+    });
+    it('renders with vim and mask configuration', () => {
+      render(<EditorView {...fixtures.vimMask} />);
+      const aceEditor = screen.getByTestId('react-ace');
+
+      expect(aceEditor).toBeInTheDocument();
+
+      const props = parseNodeProps(aceEditor);
+
+      expect(props.className).toEqual('mask-editor');
+      expect(props.keyboardHandler).toEqual('vim');
+
+      expect(props.value).toEqual('value');
+      expect(props.mode).toEqual('ruby');
+      expect(props.theme).toEqual('monokai');
+
+      expect(props.enableBasicAutocompletion).toBe(true);
+      expect(props.enableLiveAutocompletion).toBe(false);
+    });
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap
deleted file mode 100644
index a1496b4187f..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorHostSelect.test.js.snap
+++ /dev/null
@@ -1,85 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorHostSelect should render renders EditorHostSelect 1`] = `
-<div
-  className=""
-  id="editor-select-container"
->
-  <Select
-    disabled={false}
-    emptyText="No Results"
-    focusOnMount={true}
-    isLoading={false}
-    isSearchable={true}
-    loadingText="Loading..."
-    onItemClick={[Function]}
-    onKeyDown={[Function]}
-    onSearchChange={[Function]}
-    onSearchClear={[Function]}
-    onToggle={[Function]}
-    open={true}
-    options={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    placeholder="Filter Host..."
-    searchValue=""
-    selectedItem={
-      Object {
-        "id": "1",
-        "name": "one",
-      }
-    }
-  />
-</div>
-`;
-
-exports[`EditorHostSelect should render renders EditorHostSelect loading 1`] = `
-<div
-  className=""
-  id="editor-select-container"
->
-  <Select
-    disabled={false}
-    emptyText="No Results"
-    focusOnMount={true}
-    isLoading={true}
-    isSearchable={true}
-    loadingText="Loading..."
-    onItemClick={[Function]}
-    onKeyDown={[Function]}
-    onSearchChange={[Function]}
-    onSearchClear={[Function]}
-    onToggle={[Function]}
-    open={true}
-    options={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    placeholder="Filter Host..."
-    searchValue=""
-    selectedItem={
-      Object {
-        "id": "1",
-        "name": "one",
-      }
-    }
-  />
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
deleted file mode 100644
index 17d79cfab2c..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
+++ /dev/null
@@ -1,103 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorModal should render renders EditorModal diff 1`] = `
-<Modal
-  actions={Array []}
-  appendTo={[Function]}
-  aria-describedby=""
-  aria-label=""
-  aria-labelledby="editor-modal-h4"
-  className="diff monokai editor-modal"
-  hasNoBodyWrapper={false}
-  header={
-    <div
-      className="diff monokai"
-    >
-      <Title
-        headingLevel="h4"
-        id="editor-modal-h4"
-        ouiaId="editor-modal-title"
-      >
-        
-      </Title>
-      <DiffToggle
-        changeState={[Function]}
-        stateView="split"
-      />
-    </div>
-  }
-  id="editor-modal"
-  isOpen={false}
-  onClose={[Function]}
-  ouiaId="editor-modal-component"
-  ouiaSafe={true}
-  position="top"
-  showClose={true}
-  title=""
-  titleIconVariant={null}
-  titleLabel=""
-  variant="primary"
->
-  <div
-    id="diff-table"
-  >
-    <DiffView
-      newText="</>"
-      oldText="<? />"
-      patch=""
-      viewType="split"
-    />
-  </div>
-</Modal>
-`;
-
-exports[`EditorModal should render renders EditorModal editor 1`] = `
-<Modal
-  actions={Array []}
-  appendTo={[Function]}
-  aria-describedby=""
-  aria-label=""
-  aria-labelledby="editor-modal-h4"
-  className="input monokai editor-modal"
-  hasNoBodyWrapper={false}
-  header={
-    <div
-      className="input monokai"
-    >
-      <Title
-        headingLevel="h4"
-        id="editor-modal-h4"
-        ouiaId="editor-modal-title"
-      >
-        
-      </Title>
-    </div>
-  }
-  id="editor-modal"
-  isOpen={false}
-  onClose={[Function]}
-  ouiaId="editor-modal-component"
-  ouiaSafe={true}
-  position="top"
-  showClose={true}
-  title=""
-  titleIconVariant={null}
-  titleLabel=""
-  variant="primary"
->
-  <EditorView
-    autocompletion={true}
-    className="editor ace_editor_modal"
-    isMasked={false}
-    isSelected={true}
-    keyBinding="Default"
-    liveAutocompletion={false}
-    mode="Ruby"
-    name="editor"
-    onChange={[Function]}
-    readOnly={false}
-    theme="Monokai"
-    value="</>"
-  />
-</Modal>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
deleted file mode 100644
index 8aecab83ca1..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorNavbar.test.js.snap
+++ /dev/null
@@ -1,139 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorNavbar rendring renders EditorNavbar 1`] = `
-<div
-  className="navbar navbar-form navbar-full-width navbar-editor"
->
-  <Nav
-    bsClass="nav"
-    className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary"
-    justified={false}
-    pullLeft={false}
-    pullRight={false}
-    stacked={false}
-  >
-    <EditorRadioButton
-      btnView="input"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Editor"
-    />
-    <EditorRadioButton
-      btnView="diff"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Changes"
-    />
-    <EditorRadioButton
-      btnView="preview"
-      disabled={false}
-      icon={null}
-      onClick={[Function]}
-      stateView="input"
-      title="Preview"
-    />
-    <EditorHostSelect
-      isLoading={false}
-      key="hostsSelect"
-      onChange={[Function]}
-      onSearchChange={[Function]}
-      onSearchClear={[Function]}
-      onToggle={[Function]}
-      open={false}
-      options={
-        Array [
-          Object {
-            "id": "1",
-            "name": "host1",
-          },
-          Object {
-            "id": "2",
-            "name": "host2",
-          },
-        ]
-      }
-      placeholder="Select Host..."
-      searchQuery=""
-      selectedItem={
-        Object {
-          "id": "",
-          "name": "",
-        }
-      }
-      show={false}
-    />
-    <EditorSafemodeCheckbox
-      checked={true}
-      disabled={true}
-      handleSafeModeChange={[Function]}
-      show={false}
-    />
-  </Nav>
-  <EditorOptions
-    autocompletion={true}
-    changeDiffViewType={[Function]}
-    changeSetting={[Function]}
-    changeTab={[Function]}
-    diffViewType="split"
-    hosts={
-      Array [
-        Object {
-          "id": "1",
-          "name": "host1",
-        },
-        Object {
-          "id": "2",
-          "name": "host2",
-        },
-      ]
-    }
-    importFile={[Function]}
-    isDiff={true}
-    isMasked={false}
-    isRendering={false}
-    keyBinding="Default"
-    keyBindings={
-      Array [
-        "Default",
-        "Emacs",
-        "Vim",
-      ]
-    }
-    liveAutocompletion={false}
-    mode="Ruby"
-    modes={
-      Array [
-        "Text",
-        "Json",
-        "Ruby",
-        "Html_ruby",
-        "Sh",
-        "Xml",
-        "Yaml",
-      ]
-    }
-    renderPath="/render/path"
-    revertChanges={[Function]}
-    selectedView="input"
-    showHide={true}
-    showHostSelector={true}
-    showImport={true}
-    showPreview={true}
-    template="<? />"
-    theme="Monokai"
-    themes={
-      Array [
-        "Github",
-        "Monokai",
-      ]
-    }
-    toggleMaskValue={[Function]}
-    toggleModal={[Function]}
-    value="value"
-  />
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorOptions.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorOptions.test.js.snap
deleted file mode 100644
index cefa196adff..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorOptions.test.js.snap
+++ /dev/null
@@ -1,138 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorOptions EditorOptions renders EditorOptions 1`] = `
-<div
-  id="editor-dropdowns"
->
-  <h4
-    id="divider"
-  >
-    |
-  </h4>
-  <Tooltip
-    content="Hide Content"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="hide-btn"
-      onClick={[Function]}
-    >
-      <Icon
-        size="md"
-      >
-        <EyeSlashIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-  <Tooltip
-    content="Revert Local Changes"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="undo-btn"
-      onClick={[Function]}
-    >
-      <Icon
-        size="md"
-      >
-        <UndoIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-  <Tooltip
-    content="Import File"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="import-button"
-      disabled={false}
-      id="import-btn"
-      onClick={[Function]}
-    >
-      <Icon
-        size="md"
-      >
-        <UploadIcon />
-      </Icon>
-      <FormControl
-        bsClass="form-control"
-        className="hidden"
-        componentClass="input"
-        inputRef={[Function]}
-        onChange={[Function]}
-        type="file"
-      />
-    </Button>
-  </Tooltip>
-  <EditorSettings
-    autocompletion={true}
-    changeSetting={[Function]}
-    keyBinding="Default"
-    keyBindings={
-      Array [
-        "Default",
-        "Emacs",
-        "Vim",
-      ]
-    }
-    liveAutocompletion={false}
-    mode="Ruby"
-    modes={
-      Array [
-        "Text",
-        "Json",
-        "Ruby",
-        "Html_ruby",
-        "Sh",
-        "Xml",
-        "Yaml",
-      ]
-    }
-    selectedView="input"
-    theme="Monokai"
-    themes={
-      Array [
-        "Github",
-        "Monokai",
-      ]
-    }
-  />
-  <Tooltip
-    content="Maximize"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="fullscreen-btn"
-      onClick={[Function]}
-    >
-      <Icon
-        size="md"
-      >
-        <ArrowsAltIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-</div>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap
deleted file mode 100644
index b308cb378da..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorRadioButton.test.js.snap
+++ /dev/null
@@ -1,12 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorRadioButton renders EditorRadioButton 1`] = `
-<NavItem
-  active={true}
-  disabled={false}
-  id="input-navitem"
-  onClick={[Function]}
->
-  Editor
-</NavItem>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap
deleted file mode 100644
index aa97510bb3d..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap
+++ /dev/null
@@ -1,545 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorSettings renders EditorSettings 1`] = `
-<Fragment>
-  <Popover
-    bodyContent={
-      <div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Syntax
-          </div>
-          <ForwardRef
-            disabled={false}
-            id="mode-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Ruby
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Text
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Json
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Html_ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Sh
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Xml
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Yaml
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Keybind
-          </div>
-          <ForwardRef
-            disabled={false}
-            id="keybindings-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              vim
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Default
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Emacs
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Vim
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Theme
-          </div>
-          <ForwardRef
-            id="themes-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Github
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Github
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Monokai
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={true}
-              id="autocompletion-checkbox"
-              name="autocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Live Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={false}
-              disabled={false}
-              id="live-autocompletion-checkbox"
-              name="liveAutocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-      </div>
-    }
-    enableFlip={false}
-    hasAutoWidth={true}
-    headerContent="Settings"
-    id="cog-popover"
-    position="bottom"
-    triggerRef={[Function]}
-  />
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        size="md"
-      >
-        <CogIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-</Fragment>
-`;
-
-exports[`EditorSettings renders EditorSettings w/preview 1`] = `
-<Fragment>
-  <Popover
-    bodyContent={
-      <div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Syntax
-          </div>
-          <ForwardRef
-            disabled={true}
-            id="mode-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Ruby
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Text
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Json
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Html_ruby
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Sh
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Xml
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Yaml
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Keybind
-          </div>
-          <ForwardRef
-            disabled={true}
-            id="keybindings-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              vim
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Default
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Emacs
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Vim
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Theme
-          </div>
-          <ForwardRef
-            id="themes-dropdown"
-          >
-            <DropdownToggle
-              bsClass="dropdown-toggle"
-              bsRole="toggle"
-              open={false}
-              useAnchor={false}
-            >
-              Github
-            </DropdownToggle>
-            <DropdownMenu
-              bsClass="dropdown-menu"
-              bsRole="menu"
-              id="settings-dropdown"
-              pullRight={false}
-            >
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Github
-              </MenuItem>
-              <MenuItem
-                bsClass="dropdown"
-                disabled={false}
-                divider={false}
-                header={false}
-                onClick={[Function]}
-              >
-                Monokai
-              </MenuItem>
-            </DropdownMenu>
-          </ForwardRef>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={true}
-              id="autocompletion-checkbox"
-              name="autocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-        <div
-          className="cog-popover-dropdown"
-        >
-          <div
-            className="cog-popover-dropdown-title"
-          >
-            Live Autocompletion
-          </div>
-          <div
-            className="dropdown btn-group"
-          >
-            <input
-              checked={false}
-              disabled={false}
-              id="live-autocompletion-checkbox"
-              name="liveAutocompletion"
-              onChange={[Function]}
-              type="checkbox"
-            />
-          </div>
-        </div>
-      </div>
-    }
-    enableFlip={false}
-    hasAutoWidth={true}
-    headerContent="Settings"
-    id="cog-popover"
-    position="bottom"
-    triggerRef={[Function]}
-  />
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        size="md"
-      >
-        <CogIcon />
-      </Icon>
-    </Button>
-  </Tooltip>
-</Fragment>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorView.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorView.test.js.snap
deleted file mode 100644
index 04efc92b83d..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorView.test.js.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorView EditorView renders EditorView 1`] = `
-<ReactAce
-  className=""
-  cursorStart={1}
-  debounceChangePeriod={250}
-  editorProps={
-    Object {
-      "$blockScrolling": Infinity,
-      "loadWorkerFromBlob": false,
-    }
-  }
-  enableBasicAutocompletion={true}
-  enableLiveAutocompletion={false}
-  enableSnippets={false}
-  focus={false}
-  fontSize={12}
-  height="500px"
-  highlightActiveLine={true}
-  keyboardHandler={null}
-  maxLines={null}
-  minLines={null}
-  mode="ruby"
-  name="editor"
-  navigateToFileEnd={true}
-  onChange={[Function]}
-  onLoad={null}
-  onPaste={null}
-  onScroll={null}
-  placeholder={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={Object {}}
-  showGutter={true}
-  showPrintMargin={false}
-  style={Object {}}
-  tabSize={4}
-  theme="monokai"
-  value="value"
-  width="500px"
-  wrapEnabled={false}
-/>
-`;
-
-exports[`EditorView EditorView renders EditorView w/vim&mask 1`] = `
-<ReactAce
-  className="mask-editor"
-  cursorStart={1}
-  debounceChangePeriod={250}
-  editorProps={
-    Object {
-      "$blockScrolling": Infinity,
-      "loadWorkerFromBlob": false,
-    }
-  }
-  enableBasicAutocompletion={true}
-  enableLiveAutocompletion={false}
-  enableSnippets={false}
-  focus={false}
-  fontSize={12}
-  height="500px"
-  highlightActiveLine={true}
-  keyboardHandler="vim"
-  maxLines={null}
-  minLines={null}
-  mode="ruby"
-  name="editor"
-  navigateToFileEnd={true}
-  onChange={[Function]}
-  onLoad={null}
-  onPaste={null}
-  onScroll={null}
-  placeholder={null}
-  readOnly={false}
-  scrollMargin={
-    Array [
-      0,
-      0,
-      0,
-      0,
-    ]
-  }
-  setOptions={Object {}}
-  showGutter={true}
-  showPrintMargin={false}
-  style={Object {}}
-  tabSize={4}
-  theme="monokai"
-  value="value"
-  width="500px"
-  wrapEnabled={false}
-/>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss b/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
deleted file mode 100644
index 19a62f09e45..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/editorsafemodecheckbox.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-label.safemode-rendering-checkbox {
-  font-size: 14px;
-  font-weight: var(--pf-v5-global--link--FontWeight);
-  margin: 5px;
-  cursor: pointer;
-}
-
-input#safemode-rendering-checkbox {
-  margin: 10px 5px 10px 0;
-}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/editor.scss b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
index 892f873326a..35f49f3ddf4 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/editor.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
@@ -59,38 +59,39 @@
   }
 }
 
-.navbar-editor {
-  padding: 2px 2px 0 2px !important;
-  margin: 10px 0 0 !important;
-  height: 40px;
-  min-height: unset !important;
-
-  .nav-tabs-pf-secondary {
-    float: left;
-    background: unset !important;
-    border-bottom: unset;
-    display: flex;
-
-    a {
-      background: unset !important;
+.navbar.navbar-editor {
+  margin-bottom: unset;
+
+  .pf-v5-c-tabs__list {
+    width: 100%;
+    align-items: center;
+
+    .middle {
+      margin: 0 auto;
     }
 
-    .dropdown-menu > li > a:hover {
-      background-color: #08c !important;
+    .divider {
+      margin-left: auto;
+      padding: 0 var(--pf-v5-global--spacer--sm);
     }
 
-    #editor-select-container {
-      width: 260px;
-      margin-top: 4px;
+    .divider::before {
+      content: '';
+      display: block;
+      height: 20px;
+      width: 1px;
+      background: #e1e1e1;
+    }
 
-      .select-container-pf {
-        border-radius: 2px;
-      }
+    .divider + li {
+      display: flex;
+      align-items: flex-end;
     }
 
     #outdated-preview-alert {
       display: flex;
       align-items: center;
+      min-width: 220px;
 
       .alert {
         padding: 0;
@@ -109,89 +110,39 @@
         }
       }
     }
-
-    #preview-spinner {
-      align-items: center;
-      display: flex;
-      margin-left: 10px;
-    }
-  }
-
-  .btn-group {
-    padding: 4px;
   }
-
-  .btn[disabled] {
-    cursor: unset;
-  }
-
-  #editor-dropdowns {
-    float: right;
-
-    #diff-toggle-buttons {
-      float: left;
-      margin-right: 12px;
-
-      button {
-        outline: none;
-      }
+  .pf-v5-c-check.safemode-rendering-checkbox {
+    label {
+      margin-bottom: unset;
+      padding-left: var(--pf-v5-global--spacer--sm);
+      color: var(--pf-v5-global--danger-color--200);
     }
-
-    #divider {
-      float: left;
-      font-size: 18px;
-      margin-top: 6px;
-      font-weight: 200;
-      color: #c5c5c5;
-      cursor: default;
-      user-select: none;
-    }
-
-    button:enabled :not(#diff-toggle-buttons) {
-      color: #1e1d24;
-    }
-
-    button:hover:enabled :not(#diff-toggle-buttons) {
-      color: rgb(75, 79, 94) !important;
+    input[type="checkbox"]{
+      margin-top: unset;
     }
   }
+}
 
-  .preview_type_ahead {
-    float: right;
-    padding: 4px;
-
-    input {
-      width: 275px;
-    }
+.pf-v5-c-form {
+  label.pf-v5-c-check__label {
+    margin-bottom: 0 !important;
+  }
 
-    .rbt-aux {
-      right: 0;
+  .pf-v5-c-check {
+    input[type="checkbox"],
+    input[type="radio"] {
+      margin-top: 0;
     }
   }
 }
 
-#hide-btn {
-  width: 40px !important;
-  font-size: 15px;
-  margin-top: -4px;
-}
-
-#fullscreen-btn {
-  width: 40px !important;
-  font-size: 14px;
-  margin-bottom: 2px;
-}
-
-#cog-btn {
-  width: 40px !important;
-  font-size: 16px;
-  margin-bottom: 2px;
-}
-
+#hide-btn,
+#fullscreen-btn,
+#settings-btn,
 #import-btn,
 #undo-btn {
-  width: 40px !important;
-  font-size: 16px;
+  display: flex;
+  font-size: var(--pf-v5-global--icon--FontSize--lg);
 }
 
 .ace_editor_form {
@@ -242,45 +193,37 @@
   }
 }
 
+#outdated-preview-alert .pf-m-warning {
+  padding: 5px 10px;
+  .pf-v5-c-alert__title {
+    font-size: 12px;
+    button {
+      margin-left: 10px;
+      padding: 0;
+      font-size: 12px;
+    }
+  }
+}
+
 #preview_error_toast {
   margin-bottom: 0;
 }
 
-#cog-popover {
-  .cog-popover-dropdown {
-    display: flex;
-    align-items: center;
-
-    .cog-popover-dropdown-title {
-      width: 50px;
-      margin-bottom: 5px;
-      margin-right: 10px;
-      font-weight: 600;
-    }
-
-    .dropdown {
-      margin-left: auto;
-
-      .dropdown-menu {
-        min-width: 80px;
-      }
+.ace_tooltip.ace_doc-tooltip {
+  position: absolute;
+}
 
-      #mode-dropdown,
-      #keybindings-dropdown,
-      #themes-dropdown {
-        width: 80px;
-        text-align: left;
 
-        .caret {
-          position: absolute;
-          right: 2px;
-          top: 7px;
-        }
-      }
-    }
-  }
+.select-container-pf.open {
+  position: static;
+  overflow: visible;
 }
 
-.ace_tooltip.ace_doc-tooltip {
-  position: absolute;
+.select-body-container {
+  position: fixed;
+  width: auto;
+  min-width: 200px;
+  max-width: 400px;
+  transform: none;
+  z-index: var(--pf-v5-global--ZIndex--2xl);
 }