diff --git a/app/assets/stylesheets/base.scss b/app/assets/stylesheets/base.scss
index dd27b33c3aa..3f6e0d03025 100644
--- a/app/assets/stylesheets/base.scss
+++ b/app/assets/stylesheets/base.scss
@@ -491,21 +491,6 @@ table {
   line-height: 2;
 }
 
-.navbar-editor
-  > span
-  > .select2-container
-  .select2-choices
-  .select2-search-field
-  input,
-.select2-container .select2-choice,
-.select2-container .select2-choices .select2-chosen {
-  height: 24px;
-
-  .select2-search-choice-close {
-    top: 6px;
-  }
-}
-
 .select2-chosen,
 .select2-choice > span:first-child,
 .select2-container .select2-choices .select2-search-field input {
diff --git a/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js b/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
index 25ec31db26a..20ff5907ac7 100644
--- a/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
+++ b/webpack/assets/javascripts/react_app/components/DiffView/DiffToggle.js
@@ -9,7 +9,11 @@ const DiffToggle = ({ stateView, changeState }) => {
     isSelected && changeState(viewType);
 
   return (
-    <ToggleGroup id="diff-toggle-buttons" aria-label="editor-diff-buttons">
+    <ToggleGroup
+      id="diff-toggle-buttons"
+      aria-label="editor-diff-buttons"
+      isCompact
+    >
       <ToggleGroupItem
         key={`${SPLIT}-btn`}
         text={__('Split')}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/Editor.fixtures.js b/webpack/assets/javascripts/react_app/components/Editor/Editor.fixtures.js
index e9538de998d..9d7ed3f0fd1 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/Editor.fixtures.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/Editor.fixtures.js
@@ -17,7 +17,6 @@ export const editor = {
   autocompletion: true,
   liveAutocompletion: false,
   keyBinding: 'Default',
-  selectedView: 'input',
   editorName: 'editor',
   isMaximized: false,
   isMasked: false,
@@ -68,7 +67,6 @@ export const editorOptions = {
   changeDiffViewType: noop,
   changeEditorValue: noop,
   dismissErrorToast: noop,
-  changeTab: noop,
   toggleMaskValue: noop,
   changeSetting: noop,
   toggleRenderView: noop,
@@ -87,3 +85,64 @@ export const hosts = [
   { id: '1', name: 'host1' },
   { id: '2', name: 'host2' },
 ];
+
+// context values for EditorContext.Provider:
+export const inputEditorContextValue = {
+  selectedView: 'input',
+  setSelectedView: jest.fn(),
+};
+
+export const diffEditorContextValue = {
+  selectedView: 'diff',
+  setSelectedView: jest.fn(),
+};
+
+export const previewEditorContextValue = {
+  selectedView: 'preview',
+  setSelectedView: jest.fn(),
+};
+
+// Editor Tabs render props:
+export const editorTabsProps = {
+  isRendering: false,
+  toggleRenderView: jest.fn(),
+  showPreview: true,
+  selectedHost: { id: '', name: '' },
+  fetchAndPreview: jest.fn(),
+  selectedRenderPath: "is used only by the mock function fetchAndPreview",
+  templateKindId: "is used only by the mock function fetchAndPreview",
+  showHostSelector: false,
+};
+
+export const editorTabsWithoutDiff = {
+  ...editorTabsProps,
+  isDiff: false,
+};
+
+export const editorTabsWithDiff = {
+  ...editorTabsProps,
+  isDiff: true,
+};
+
+// classNames for EditorTabs:
+export const PF_CURRENT = 'pf-m-current';
+export const ARIA_SELECTED = 'aria-selected';
+
+// EditorModal fixtures:
+export const EditorModalfixtures = {
+  ...editorOptions,
+  editorValue: '</>',
+  isMaximized: true,
+  changeDiffViewType: noop,
+};
+
+// EditorSettings fixtures:
+export const editorSettingsFixtures = {
+  ...dropdowns,
+  mode: 'Ruby',
+  theme: 'Github',
+  autocompletion: true,
+  liveAutocompletion: false,
+  keyBinding: 'Vim',
+  changeSetting: noop,
+};
diff --git a/webpack/assets/javascripts/react_app/components/Editor/Editor.js b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
index 7f7f907eb6c..f926cc77e80 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/Editor.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/Editor.js
@@ -1,32 +1,85 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ToastNotification } from 'patternfly-react';
+import { Divider } from '@patternfly/react-core';
 
 import { noop } from '../../common/helpers';
 import DiffView from '../DiffView/DiffView';
 import EditorView from './components/EditorView';
-import EditorNavbar from './components/EditorNavbar';
+import EditorToolbar from './components/EditorToolbar';
 import EditorModal from './components/EditorModal';
+import { EditorContext } from './EditorContext';
 import {
   EDITOR_THEMES,
   EDITOR_KEYBINDINGS,
   EDITOR_MODES,
+  INPUT,
+  DIFF,
+  PREVIEW,
 } from './EditorConstants';
 import './editor.scss';
 
-class Editor extends React.Component {
-  componentDidMount() {
-    const {
-      data: { hosts, templateClass, locked, template, type, dslCache },
-      initializeEditor,
-      isMasked,
-      isRendering,
-      readOnly,
-      previewResult,
-      selectedView,
-      showError,
-    } = this.props;
+const Editor = props => {
+  const {
+    data: {
+      templateClass,
+      locked,
+      type,
+      dslCache,
+      name,
+      isSafemodeEnabled,
+      renderPath,
+      safemodeRenderPath,
+      showHide,
+      showImport,
+      showPreview,
+      showHostSelector,
+      template,
+      title,
+    },
+    initializeEditor,
+    changeDiffViewType,
+    changeEditorValue,
+    changeSetting,
+    diffViewType,
+    dismissErrorToast,
+    editorName,
+    errorText,
+    fetchAndPreview,
+    filteredHosts,
+    hosts,
+    importFile,
+    isFetchingHosts,
+    isLoading,
+    isMasked,
+    isMaximized,
+    isRendering,
+    isSearchingHosts,
+    isSelectOpen,
+    keyBinding,
+    mode,
+    onHostSearch,
+    onHostSelectToggle,
+    onSearchClear,
+    previewResult,
+    previewTemplate,
+    readOnly,
+    renderedEditorValue,
+    revertChanges,
+    searchQuery,
+    selectedHost,
+    showError,
+    theme,
+    autocompletion,
+    liveAutocompletion,
+    toggleMaskValue,
+    toggleModal,
+    toggleRenderView,
+    value,
+    templateKindId,
+  } = props;
 
+  useEffect(() => {
     const initializeData = {
       hosts,
       isMasked,
@@ -35,90 +88,40 @@ class Editor extends React.Component {
       locked,
       readOnly,
       previewResult,
-      selectedView,
       showError,
       template,
       type,
       dslCache,
     };
     initializeEditor(initializeData);
-  }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  render() {
-    const {
-      data: {
-        name,
-        isSafemodeEnabled,
-        renderPath,
-        safemodeRenderPath,
-        showHide,
-        showImport,
-        showPreview,
-        showHostSelector,
-        template,
-        title,
-      },
-      changeDiffViewType,
-      changeEditorValue,
-      changeSetting,
-      changeTab,
-      diffViewType,
-      dismissErrorToast,
-      editorName,
-      errorText,
-      fetchAndPreview,
-      filteredHosts,
-      hosts,
-      importFile,
-      isFetchingHosts,
-      isLoading,
-      isMasked,
-      isMaximized,
-      isRendering,
-      isSearchingHosts,
-      isSelectOpen,
-      keyBinding,
-      mode,
-      onHostSearch,
-      onHostSelectToggle,
-      onSearchClear,
-      previewResult,
-      previewTemplate,
-      readOnly,
-      renderedEditorValue,
-      revertChanges,
-      searchQuery,
-      selectedHost,
-      selectedView,
-      showError,
-      theme,
-      autocompletion,
-      liveAutocompletion,
-      toggleMaskValue,
-      toggleModal,
-      toggleRenderView,
-      value,
-      templateKindId,
-    } = this.props;
+  const editorViewProps = {
+    value: isRendering ? previewResult : value,
+    mode: isRendering ? 'Text' : mode,
+    theme,
+    autocompletion,
+    liveAutocompletion,
+    keyBinding,
+    onChange: isRendering ? noop : changeEditorValue,
+    readOnly: readOnly || isRendering,
+    isMasked,
+  };
+  const editorNameTab = {
+    input: `${editorName}Code`,
+    preview: `${editorName}Preview`,
+  };
 
-    const editorViewProps = {
-      value: isRendering ? previewResult : value,
-      mode: isRendering ? 'Text' : mode,
-      theme,
-      autocompletion,
-      liveAutocompletion,
-      keyBinding,
-      onChange: isRendering ? noop : changeEditorValue,
-      readOnly: readOnly || isRendering,
-      isMasked,
-    };
-    const editorNameTab = {
-      input: `${editorName}Code`,
-      preview: `${editorName}Preview`,
-    };
+  const [selectedView, setSelectedView] = useState(INPUT);
+  const editorContextValue = {
+    selectedView,
+    setSelectedView,
+  };
 
-    return (
-      <div id="editor-container">
+  return (
+    <div id="editor-container">
+      <EditorContext.Provider value={editorContextValue}>
         <ToastNotification
           id="preview_error_toast"
           type="error"
@@ -127,9 +130,8 @@ class Editor extends React.Component {
         >
           {errorText}
         </ToastNotification>
-        <EditorNavbar
+        <EditorToolbar
           changeDiffViewType={changeDiffViewType}
-          changeTab={changeTab}
           changeSetting={changeSetting}
           modes={EDITOR_MODES}
           themes={EDITOR_THEMES}
@@ -144,7 +146,6 @@ class Editor extends React.Component {
           renderedEditorValue={renderedEditorValue}
           diffViewType={diffViewType}
           template={template}
-          selectedView={selectedView}
           isDiff={template ? value !== template : false}
           isMasked={isMasked}
           isRendering={isRendering}
@@ -176,24 +177,22 @@ class Editor extends React.Component {
           showError={showError}
           fetchAndPreview={fetchAndPreview}
         />
+        <Divider inset={{ default: 'insetMd' }} />
         <EditorView
           {...editorViewProps}
           key="editorPreview"
           name={editorNameTab.preview}
-          isSelected={selectedView === 'preview'}
+          isSelected={selectedView === PREVIEW}
           className="ace_editor_form ace_preview"
         />
         <EditorView
           {...editorViewProps}
           key="editorCode"
           name={editorNameTab.input}
-          isSelected={selectedView === 'input'}
+          isSelected={selectedView === INPUT}
           className="ace_editor_form ace_input"
         />
-        <div
-          id="diff-table"
-          className={selectedView === 'diff' ? '' : 'hidden'}
-        >
+        <div id="diff-table" className={selectedView === DIFF ? '' : 'hidden'}>
           <DiffView
             oldText={template || ''}
             newText={value}
@@ -218,17 +217,16 @@ class Editor extends React.Component {
           template={template || ''}
           editorValue={value}
           previewValue={previewResult}
-          selectedView={selectedView}
           isMasked={isMasked}
           isRendering={isRendering}
         />
         {!readOnly && (
           <textarea className="hidden" name={name} value={value} readOnly />
         )}
-      </div>
-    );
-  }
-}
+      </EditorContext.Provider>
+    </div>
+  );
+};
 
 Editor.propTypes = {
   data: PropTypes.shape({
@@ -255,7 +253,6 @@ Editor.propTypes = {
   changeDiffViewType: PropTypes.func.isRequired,
   changeEditorValue: PropTypes.func.isRequired,
   changeSetting: PropTypes.func.isRequired,
-  changeTab: PropTypes.func.isRequired,
   diffViewType: PropTypes.string.isRequired,
   dismissErrorToast: PropTypes.func.isRequired,
   editorName: PropTypes.string.isRequired,
@@ -275,7 +272,6 @@ Editor.propTypes = {
   readOnly: PropTypes.bool.isRequired,
   previewResult: PropTypes.string.isRequired,
   revertChanges: PropTypes.func.isRequired,
-  selectedView: PropTypes.string.isRequired,
   showError: PropTypes.bool.isRequired,
   theme: PropTypes.string.isRequired,
   autocompletion: PropTypes.bool.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
index 6eee129e6c9..b1c2ca08090 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorActions.js
@@ -5,7 +5,6 @@ import { sprintf, translate as __ } from '../../common/I18n';
 import {
   EDITOR_CHANGE_DIFF_VIEW,
   EDITOR_CHANGE_SETTING,
-  EDITOR_CHANGE_TAB,
   EDITOR_CHANGE_VALUE,
   EDITOR_DISMISS_ERROR,
   EDITOR_SHOW_ERROR,
@@ -47,7 +46,6 @@ export const initializeEditor = initializeData => dispatch => {
     templateClass,
     readOnly,
     isMasked,
-    selectedView,
     isRendering,
     previewResult,
     showError,
@@ -66,7 +64,6 @@ export const initializeEditor = initializeData => dispatch => {
     else initialState.readOnly = false;
   }
   if (isMasked && type === 'templates') initialState.isMasked = false;
-  if (selectedView !== 'input') initialState.selectedView = 'input';
   if (isRendering) initialState.isRendering = false;
   if (previewResult !== '') initialState.previewResult = '';
   if (showError) initialState.showError = false;
@@ -262,13 +259,6 @@ export const dismissErrorToast = () => dispatch => {
   });
 };
 
-export const changeTab = selectedView => dispatch => {
-  dispatch({
-    type: EDITOR_CHANGE_TAB,
-    payload: selectedView,
-  });
-};
-
 export const toggleMaskValue = () => ({
   type: EDITOR_TOGGLE_MASK,
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js b/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
index 7a9166c1891..084c02997d4 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorConstants.js
@@ -35,3 +35,13 @@ export const EDITOR_MODES = [
   'Xml',
   'Yaml',
 ];
+
+// EditorContext selectedView Constants:
+
+export const INPUT = 'input';
+export const DIFF = 'diff';
+export const PREVIEW = 'preview';
+
+// ToolbarItems Alignments
+export const ALIGN_LEFT = 'alignLeft';
+export const ALIGN_RIGHT = 'alignRight';
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorContext.js b/webpack/assets/javascripts/react_app/components/Editor/EditorContext.js
new file mode 100644
index 00000000000..8a5b7046bc1
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorContext.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const EditorContext = createContext(null);
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
index ac59416fee7..4887740d19a 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorReducer.js
@@ -3,7 +3,6 @@ import Immutable from 'seamless-immutable';
 import {
   EDITOR_CHANGE_DIFF_VIEW,
   EDITOR_CHANGE_SETTING,
-  EDITOR_CHANGE_TAB,
   EDITOR_CHANGE_VALUE,
   EDITOR_DISMISS_ERROR,
   EDITOR_SHOW_ERROR,
@@ -50,7 +49,6 @@ const initialState = Immutable({
     id: '',
     name: '',
   },
-  selectedView: 'input',
   showError: false,
   templateClass: '',
   theme: 'Monokai',
@@ -104,10 +102,6 @@ export default (state = initialState, action) => {
       return state.merge(payload);
     }
 
-    case EDITOR_CHANGE_TAB: {
-      return state.set('selectedView', payload);
-    }
-
     case EDITOR_CHANGE_SETTING: {
       return state.merge(payload);
     }
diff --git a/webpack/assets/javascripts/react_app/components/Editor/EditorSelectors.js b/webpack/assets/javascripts/react_app/components/Editor/EditorSelectors.js
index 9eac916741b..5654ac4d372 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/EditorSelectors.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/EditorSelectors.js
@@ -10,7 +10,6 @@ export const selectErrorText = state => selectEditor(state).errorText;
 export const selectMode = state => selectEditor(state).mode;
 export const selectKeyBind = state => selectEditor(state).keyBinding;
 export const selectEditorName = state => selectEditor(state).editorName;
-export const selectChosenView = state => selectEditor(state).selectedView;
 export const selectTheme = state => selectEditor(state).theme;
 export const selectAutocompletion = state => selectEditor(state).autocompletion;
 export const selectLiveAutocompletion = state =>
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 2e0d6d67e67..ee1893666d6 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,8 +1,16 @@
 import React from 'react';
 import { mount } from '@theforeman/test';
-import { testComponentSnapshotsWithFixtures } from '../../../common/testHelpers';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Editor from '../Editor';
-import { editorOptions } from '../Editor.fixtures';
+import {
+  editorOptions,
+  inputEditorContextValue,
+  diffEditorContextValue,
+  ARIA_SELECTED,
+  PF_CURRENT,
+} from '../Editor.fixtures';
+import { EditorContext } from '../EditorContext';
 
 const didMountStubs = () => ({
   changeState: jest.fn(),
@@ -12,14 +20,7 @@ const didMountStubs = () => ({
   initializeEditor: jest.fn(),
 });
 
-const fixtures = {
-  'renders editor': editorOptions,
-};
-
 describe('Editor', () => {
-  describe('rendering', () =>
-    testComponentSnapshotsWithFixtures(Editor, fixtures));
-
   describe('triggering', () => {
     it('should trigger input view', () => {
       const props = { ...editorOptions, ...didMountStubs() };
@@ -27,9 +28,9 @@ describe('Editor', () => {
 
       expect(
         component
-          .find('li[role="presentation"]')
+          .find('button[role="tab"]')
           .at(0)
-          .hasClass('active')
+          .prop(ARIA_SELECTED)
       ).toBe(true);
     });
     it('should trigger input view with no template', () => {
@@ -41,61 +42,157 @@ describe('Editor', () => {
       const component = mount(<Editor {...props} />);
       expect(component.props().template).toBe('<? />');
     });
-    it('should trigger diff view', () => {
+    it('should trigger diff view', async () => {
       const props = {
         ...editorOptions,
         ...didMountStubs(),
-        selectedView: 'diff',
       };
-      const component = mount(<Editor {...props} />);
+      const { getByText, unmount } = await render(<Editor {...props} />);
 
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(1)
-          .hasClass('active')
-      ).toBe(true);
+      // expect 3 tabs to be rendered
+      expect(screen.getAllByRole('tab').length).toBe(3);
+
+      // input tab should be selected in initial render
+      const inputButton = getByText(/editor/i);
+      const inputButtonContainer = inputButton.parentElement.parentElement;
+      expect(inputButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+
+      // click on the changes tab
+      // Then, insure the changes tab is selected & the input tab is not selected
+      const changesButton = getByText(/changes/i);
+      fireEvent.click(changesButton);
+
+      const changesButtonContainer = changesButton.parentElement.parentElement;
+      expect(changesButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+      expect(inputButtonContainer.classList.contains(PF_CURRENT)).toBe(false);
+
+      unmount();
     });
-    it('should trigger preview view', () => {
+    it('should trigger preview view', async () => {
       const props = {
         ...editorOptions,
         ...didMountStubs(),
-        selectedView: 'preview',
-        isRendering: true,
       };
-      const wrapper = mount(<Editor {...props} />);
-      wrapper.find('button.close').simulate('click');
+      const { getByText, unmount } = await render(<Editor {...props} />);
 
-      const component = mount(<Editor {...props} />);
+      // expect 3 tabs to be rendered
+      expect(screen.getAllByRole('tab').length).toBe(3);
 
-      expect(
-        component
-          .find('li[role="presentation"]')
-          .at(2)
-          .hasClass('active')
-      ).toBe(true);
+      // input tab should be selected in initial render
+      const inputButton = getByText(/editor/i);
+      const inputButtonContainer = inputButton.parentElement.parentElement;
+      expect(inputButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+
+      // click on the preview tab
+      // Then, insure the preview tab is selected & the input tab is not selected
+      const previewButton = getByText(/preview/i);
+      fireEvent.click(previewButton);
+
+      const previewButtonContainer = previewButton.parentElement.parentElement;
+      expect(previewButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+      expect(inputButtonContainer.classList.contains(PF_CURRENT)).toBe(false);
+
+      unmount();
     });
   });
   it('should trigger hidden value editor', () => {
     const props = {
       ...editorOptions,
       ...didMountStubs(),
-      selectedView: 'preview',
       isRendering: true,
       isMasked: true,
     };
     const wrapper = mount(<Editor {...props} />);
+    // click on the preview tab:
+    const previewButton = wrapper.find('button[role="tab"]').at(2);
+    previewButton.simulate('click');
+
     expect(wrapper.find('.mask-editor').exists()).toBe(true);
   });
   it('textarea disappears if readOnly', () => {
     const props = {
       ...editorOptions,
       ...didMountStubs(),
-      selectedView: 'input',
     };
     const wrapper = mount(<Editor {...props} />);
     expect(wrapper.find('textarea.hidden').exists()).toBe(true);
     wrapper.setProps({ readOnly: true });
     expect(wrapper.find('textarea.hidden').exists()).toBe(false);
   });
+
+  /**********************************************************/
+
+  describe('EditorModal', () => {
+    it('should open modal with input view', async () => {
+      const toggleModal = jest.fn();
+
+      const { getByLabelText, unmount } = await render(
+        <EditorContext.Provider value={inputEditorContextValue}>
+          <Editor
+            {...editorOptions}
+            toggleModal={toggleModal}
+            isMaximized={false}
+          />
+        </EditorContext.Provider>
+      );
+
+      const openModalButton = getByLabelText(/Open Modal/i);
+
+      expect(toggleModal).toHaveBeenCalledTimes(0);
+
+      fireEvent.click(openModalButton);
+
+      expect(toggleModal).toHaveBeenCalledTimes(1);
+
+      unmount();
+    });
+
+    it('should open modal with diff view', async () => {
+      const toggleModal = jest.fn();
+
+      const { getByLabelText, unmount } = await render(
+        <EditorContext.Provider value={diffEditorContextValue}>
+          <Editor
+            {...editorOptions}
+            toggleModal={toggleModal}
+            isMaximized={false}
+          />
+        </EditorContext.Provider>
+      );
+
+      const openModalButton = getByLabelText(/Open Modal/i);
+
+      expect(toggleModal).toHaveBeenCalledTimes(0);
+
+      fireEvent.click(openModalButton);
+
+      expect(toggleModal).toHaveBeenCalledTimes(1);
+
+      unmount();
+    });
+
+    it('should close modal with input view', async () => {
+      const toggleModal = jest.fn();
+
+      const { getByLabelText, unmount } = await render(
+        <EditorContext.Provider value={inputEditorContextValue}>
+          <Editor
+            {...editorOptions}
+            toggleModal={toggleModal}
+            isMaximized={true}
+          />
+        </EditorContext.Provider>
+      );
+
+      const closeModalButton = getByLabelText(/close/i);
+
+      expect(toggleModal).toHaveBeenCalledTimes(0);
+
+      fireEvent.click(closeModalButton);
+
+      expect(toggleModal).toHaveBeenCalledTimes(1);
+
+      unmount();
+    });
+  });
 });
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorActions.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorActions.test.js
index 9207b9bf2bb..830d519296c 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorActions.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorActions.test.js
@@ -9,7 +9,6 @@ import {
   changeDiffViewType,
   changeEditorValue,
   dismissErrorToast,
-  changeTab,
   toggleMaskValue,
   changeSetting,
   toggleRenderView,
@@ -88,8 +87,6 @@ const fixtures = {
 
   'should dismissErrorToast': () => dismissErrorToast(),
 
-  'should changeTab': () => changeTab('diff'),
-
   'should revertChanges': () => revertChanges('<template />'),
 
   'should toggleMaskValue': () => toggleMaskValue(),
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorReducer.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorReducer.test.js
index 528e41aa01b..5f73f0db0b5 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorReducer.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorReducer.test.js
@@ -1,7 +1,6 @@
 import {
   EDITOR_CHANGE_DIFF_VIEW,
   EDITOR_CHANGE_SETTING,
-  EDITOR_CHANGE_TAB,
   EDITOR_CHANGE_VALUE,
   EDITOR_DISMISS_ERROR,
   EDITOR_SHOW_ERROR,
@@ -91,12 +90,6 @@ const fixtures = {
       payload: { showError: false, errorText: '' },
     },
   },
-  'should handle EDITOR_CHANGE_TAB': {
-    action: {
-      type: EDITOR_CHANGE_TAB,
-      payload: 'diff',
-    },
-  },
   'should handle EDITOR_TOGGLE_MASK': {
     action: {
       type: EDITOR_TOGGLE_MASK,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorSelectors.test.js b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorSelectors.test.js
index d4cebbf992a..7cfde4dd988 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorSelectors.test.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/EditorSelectors.test.js
@@ -10,7 +10,6 @@ import {
   selectMode,
   selectKeyBind,
   selectEditorName,
-  selectChosenView,
   selectTheme,
   selectDiffType,
   selectIsMaximized,
@@ -44,7 +43,6 @@ const fixtures = {
   'should return selectMode': () => selectMode(state),
   'should return selectKeyBind': () => selectKeyBind(state),
   'should return selectEditorName': () => selectEditorName(state),
-  'should return selectChosenView': () => selectChosenView(state),
   'should return selectTheme': () => selectTheme(state),
   'should return selectDiffType': () => selectDiffType(state),
   'should return selectIsMaximized': () => selectIsMaximized(state),
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 a5f397cfcc1..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/Editor.test.js.snap
+++ /dev/null
@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Editor rendering renders editor 1`] = `
-<div
-  id="editor-container"
->
-  <ToastNotification
-    className=""
-    id="preview_error_toast"
-    onDismiss={[Function]}
-    type="error"
-  />
-  <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__/EditorActions.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorActions.test.js.snap
index 78e67e0b0a9..e74466cecf8 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorActions.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorActions.test.js.snap
@@ -35,17 +35,6 @@ Array [
 ]
 `;
 
-exports[`Editor actions should changeTab 1`] = `
-Array [
-  Array [
-    Object {
-      "payload": "diff",
-      "type": "EDITOR_CHANGE_TAB",
-    },
-  ],
-]
-`;
-
 exports[`Editor actions should dismissErrorToast 1`] = `
 Array [
   Array [
@@ -77,7 +66,6 @@ Array [
           "id": "",
           "name": "",
         },
-        "selectedView": "input",
         "showError": false,
         "templateClass": undefined,
         "value": "<? />",
@@ -102,7 +90,6 @@ Array [
           "id": "",
           "name": "",
         },
-        "selectedView": "input",
         "showError": false,
         "templateClass": undefined,
         "value": "<? />",
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorReducer.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorReducer.test.js.snap
index 3c777d855d5..dffa479c5b1 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorReducer.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorReducer.test.js.snap
@@ -27,7 +27,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -62,7 +61,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -97,7 +95,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -105,41 +102,6 @@ Object {
 }
 `;
 
-exports[`Editor reducer should handle EDITOR_CHANGE_TAB 1`] = `
-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": "diff",
-  "showError": false,
-  "templateClass": "",
-  "theme": "Monokai",
-  "value": "",
-}
-`;
-
 exports[`Editor reducer should handle EDITOR_DISMISS_ERROR 1`] = `
 Object {
   "autocompletion": true,
@@ -167,7 +129,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -202,7 +163,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -237,7 +197,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -277,7 +236,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -312,7 +270,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -352,7 +309,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -387,7 +343,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -422,7 +377,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -457,7 +411,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -492,7 +445,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -527,7 +479,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -562,7 +513,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -597,7 +547,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -632,7 +581,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": true,
   "templateClass": "",
   "theme": "Monokai",
@@ -667,7 +615,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -702,7 +649,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -737,7 +683,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
@@ -772,7 +717,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": false,
   "templateClass": "",
   "theme": "Monokai",
diff --git a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorSelectors.test.js.snap b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorSelectors.test.js.snap
index 5c89bbf3a56..577889546f0 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorSelectors.test.js.snap
+++ b/webpack/assets/javascripts/react_app/components/Editor/__tests__/__snapshots__/EditorSelectors.test.js.snap
@@ -21,7 +21,6 @@ Object {
   "changeDiffViewType": [Function],
   "changeEditorValue": [Function],
   "changeSetting": [Function],
-  "changeTab": [Function],
   "data": Object {
     "isSafemodeEnabled": true,
     "name": "editor",
@@ -111,7 +110,6 @@ Object {
     "id": "",
     "name": "",
   },
-  "selectedView": "input",
   "showError": true,
   "template": "<? />",
   "theme": "Monokai",
@@ -128,8 +126,6 @@ Object {
 
 exports[`Editor selectors should return filtered componentHosts 1`] = `Array []`;
 
-exports[`Editor selectors should return selectChosenView 1`] = `"input"`;
-
 exports[`Editor selectors should return selectDiffType 1`] = `"split"`;
 
 exports[`Editor selectors should return selectEditorName 1`] = `"editor"`;
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
index 0dde8253abe..efb0d4b8681 100644
--- 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
@@ -36,7 +36,6 @@ Object {
         "id": "",
         "name": "",
       },
-      "selectedView": "preview",
       "showError": false,
       "templateClass": undefined,
       "theme": "Monokai",
@@ -74,7 +73,6 @@ Object {
       "id": "",
       "name": "",
     },
-    "selectedView": "input",
     "showError": false,
     "templateClass": undefined,
     "theme": "Monokai",
@@ -119,7 +117,6 @@ Object {
         "id": "",
         "name": "",
       },
-      "selectedView": "preview",
       "showError": false,
       "templateClass": undefined,
       "theme": "Monokai",
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 98d9bd3d83d..37a433ce288 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
@@ -4,7 +4,7 @@ import IntegrationTestHelper from '../../../common/IntegrationTestHelper';
 
 import { editorOptions, serverRenderResponse } from '../Editor.fixtures';
 import Editor, { reducers } from '../index';
-import * as EditorActions from '../EditorActions'
+import * as EditorActions from '../EditorActions';
 
 jest.mock('../../../redux/API');
 
@@ -21,7 +21,7 @@ describe('Editor integration test', () => {
     );
     integrationTestHelper.takeStoreSnapshot('initial state');
 
-    const previewBtn = component.find('#preview-navitem').at(1);
+    const previewBtn = component.find('button[role="tab"]').at(2);
     previewBtn.simulate('click');
 
     integrationTestHelper.takeStoreAndLastActionSnapshot(
@@ -29,9 +29,9 @@ describe('Editor integration test', () => {
     );
     expect(
       component
-        .find('li[role="presentation"]')
+        .find('button[role="tab"]')
         .at(2)
-        .hasClass('active')
+        .prop('aria-selected')
     ).toBe(true);
 
     IntegrationTestHelper.flushAllPromises();
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..a3d4c14b8ea 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,13 @@ class EditorHostSelect extends Component {
       searchQuery,
       selectedItem,
     } = this.props;
+
     return (
       <div
         ref={this.setWrapperRef}
         id="editor-select-container"
         className={show ? '' : 'hidden'}
+        aria-label="Host selection menu option"
       >
         <Select
           options={options}
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 90b40860c36..ec8e2ad7944 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorModal.js
@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { Modal, Icon, Button } from 'patternfly-react';
 import PropTypes from 'prop-types';
 
 import EditorView from './EditorView';
 import DiffToggle from '../../DiffView/DiffToggle';
 import DiffView from '../../DiffView/DiffView';
+import { EditorContext } from '../EditorContext';
 
 const EditorModal = ({
   changeDiffViewType,
@@ -19,60 +20,62 @@ const EditorModal = ({
   mode,
   name,
   readOnly,
-  selectedView,
   template,
   theme,
   autocompletion,
   liveAutocompletion,
   title,
   toggleModal,
-}) => (
-  <Modal show={isMaximized} onHide={toggleModal} className="editor-modal">
-    <Modal.Header className={`${selectedView} ${theme.toLowerCase()}`}>
-      <h4 id="editor-modal-h4">{title}</h4>
-      <Button
-        className="close"
-        onClick={toggleModal}
-        aria-hidden="true"
-        aria-label="Close"
-        bsStyle="link"
-      >
-        <Icon type="pf" name="close" />
-      </Button>
-      {selectedView === 'diff' && (
-        <DiffToggle
-          stateView={diffViewType}
-          changeState={viewType => changeDiffViewType(viewType)}
-        />
-      )}
-    </Modal.Header>
-    <Modal.Body className={selectedView}>
-      {selectedView === 'diff' ? (
-        <div id="diff-table">
-          <DiffView
-            oldText={template}
-            newText={editorValue}
-            viewType={diffViewType}
+}) => {
+  const { selectedView } = useContext(EditorContext);
+  return (
+    <Modal show={isMaximized} onHide={toggleModal} className="editor-modal">
+      <Modal.Header className={`${selectedView} ${theme.toLowerCase()}`}>
+        <h4 id="editor-modal-h4">{title}</h4>
+        <Button
+          className="close"
+          onClick={toggleModal}
+          aria-hidden="true"
+          aria-label="Close"
+          bsStyle="link"
+        >
+          <Icon type="pf" name="close" role="button" />
+        </Button>
+        {selectedView === 'diff' && (
+          <DiffToggle
+            stateView={diffViewType}
+            changeState={viewType => changeDiffViewType(viewType)}
           />
-        </div>
-      ) : (
-        <EditorView
-          value={isRendering ? previewValue : editorValue}
-          name={name}
-          mode={isRendering ? 'text' : mode}
-          theme={theme}
-          keyBinding={keyBinding}
-          onChange={changeEditorValue}
-          readOnly={readOnly || selectedView === 'preview'}
-          className="editor ace_editor_modal"
-          isMasked={isMasked}
-          autocompletion={autocompletion}
-          liveAutocompletion={liveAutocompletion}
-        />
-      )}
-    </Modal.Body>
-  </Modal>
-);
+        )}
+      </Modal.Header>
+      <Modal.Body className={selectedView}>
+        {selectedView === 'diff' ? (
+          <div id="diff-table">
+            <DiffView
+              oldText={template}
+              newText={editorValue}
+              viewType={diffViewType}
+            />
+          </div>
+        ) : (
+          <EditorView
+            value={isRendering ? previewValue : editorValue}
+            name={name}
+            mode={isRendering ? 'text' : mode}
+            theme={theme}
+            keyBinding={keyBinding}
+            onChange={changeEditorValue}
+            readOnly={readOnly || selectedView === 'preview'}
+            className="editor ace_editor_modal"
+            isMasked={isMasked}
+            autocompletion={autocompletion}
+            liveAutocompletion={liveAutocompletion}
+          />
+        )}
+      </Modal.Body>
+    </Modal>
+  );
+};
 
 EditorModal.propTypes = {
   changeDiffViewType: PropTypes.func.isRequired,
@@ -87,7 +90,6 @@ EditorModal.propTypes = {
   mode: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   readOnly: PropTypes.bool.isRequired,
-  selectedView: PropTypes.string.isRequired,
   template: PropTypes.string.isRequired,
   theme: PropTypes.string.isRequired,
   autocompletion: PropTypes.bool.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
deleted file mode 100644
index 207a2737b81..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorNavbar.js
+++ /dev/null
@@ -1,270 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Nav, Spinner, Alert, Button } from 'patternfly-react';
-import { translate as __ } from '../../../common/I18n';
-import EditorRadioButton from './EditorRadioButton';
-import EditorOptions from './EditorOptions';
-import EditorHostSelect from './EditorHostSelect';
-import EditorSafemodeCheckbox from './EditorSafemodeCheckbox';
-
-const EditorNavbar = ({
-  changeDiffViewType,
-  changeSetting,
-  changeTab,
-  diffViewType,
-  hosts,
-  filteredHosts,
-  importFile,
-  isDiff,
-  isLoading,
-  isMasked,
-  isRendering,
-  isFetchingHosts,
-  isSearchingHosts,
-  keyBinding,
-  keyBindings,
-  mode,
-  modes,
-  previewTemplate,
-  isSafemodeEnabled,
-  renderPath,
-  safemodeRenderPath,
-  revertChanges,
-  selectedHost,
-  selectedView,
-  showHide,
-  showImport,
-  showPreview,
-  showHostSelector,
-  template,
-  theme,
-  themes,
-  autocompletion,
-  liveAutocompletion,
-  toggleMaskValue,
-  toggleModal,
-  toggleRenderView,
-  value,
-  templateKindId,
-  renderedEditorValue,
-  previewResult,
-  searchQuery,
-  onHostSelectToggle,
-  onHostSearch,
-  onSearchClear,
-  isSelectOpen,
-  showError,
-  fetchAndPreview,
-}) => {
-  const [safemode, setSafemode] = useState(isSafemodeEnabled);
-  const handleSafeModeChange = ({ currentTarget: { checked: newChecked } }) => {
-    setSafemode(newChecked);
-    const newRenderPath = newChecked ? safemodeRenderPath : renderPath;
-    previewTemplate({
-      host: selectedHost,
-      renderPath: newRenderPath,
-      templateKindId,
-    });
-  };
-  const selectedRenderPath = safemode ? safemodeRenderPath : renderPath;
-
-  return (
-    <div className="navbar navbar-form navbar-full-width navbar-editor">
-      <Nav className="nav nav-tabs nav-tabs-pf nav-tabs-pf-secondary">
-        <EditorRadioButton
-          stateView={selectedView}
-          btnView="input"
-          title={__('Editor')}
-          onClick={() => {
-            if (selectedView !== 'input') {
-              if (isRendering) toggleRenderView();
-              changeTab('input');
-            }
-          }}
-        />
-        <EditorRadioButton
-          stateView={selectedView}
-          disabled={!isDiff}
-          btnView="diff"
-          title={__('Changes')}
-          onClick={() => {
-            if (selectedView !== 'diff') {
-              changeTab('diff');
-            }
-          }}
-        />
-        {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}
-        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}
-      />
-    </div>
-  );
-};
-
-EditorNavbar.propTypes = {
-  changeDiffViewType: PropTypes.func.isRequired,
-  changeSetting: PropTypes.func.isRequired,
-  changeTab: PropTypes.func.isRequired,
-  diffViewType: PropTypes.string.isRequired,
-  fetchAndPreview: PropTypes.func.isRequired,
-  filteredHosts: PropTypes.array,
-  hosts: PropTypes.array,
-  importFile: PropTypes.func.isRequired,
-  isDiff: PropTypes.bool.isRequired,
-  isFetchingHosts: PropTypes.bool.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  isMasked: PropTypes.bool.isRequired,
-  isRendering: PropTypes.bool.isRequired,
-  isSearchingHosts: PropTypes.bool.isRequired,
-  isSelectOpen: PropTypes.bool.isRequired,
-  keyBinding: PropTypes.string.isRequired,
-  keyBindings: PropTypes.array.isRequired,
-  autocompletion: PropTypes.bool.isRequired,
-  liveAutocompletion: PropTypes.bool.isRequired,
-  mode: PropTypes.string.isRequired,
-  modes: PropTypes.array.isRequired,
-  onHostSearch: PropTypes.func.isRequired,
-  onHostSelectToggle: PropTypes.func.isRequired,
-  onSearchClear: PropTypes.func.isRequired,
-  previewResult: PropTypes.string.isRequired,
-  previewTemplate: PropTypes.func.isRequired,
-  renderedEditorValue: PropTypes.string.isRequired,
-  isSafemodeEnabled: PropTypes.bool.isRequired,
-  renderPath: PropTypes.string,
-  safemodeRenderPath: PropTypes.string,
-  revertChanges: PropTypes.func.isRequired,
-  searchQuery: PropTypes.string.isRequired,
-  selectedHost: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    name: PropTypes.string,
-  }).isRequired,
-  selectedView: PropTypes.string.isRequired,
-  showError: PropTypes.bool.isRequired,
-  showHide: PropTypes.bool,
-  showImport: PropTypes.bool.isRequired,
-  showPreview: PropTypes.bool.isRequired,
-  showHostSelector: PropTypes.bool,
-  template: PropTypes.string,
-  theme: PropTypes.string.isRequired,
-  themes: PropTypes.array.isRequired,
-  toggleMaskValue: PropTypes.func.isRequired,
-  toggleModal: PropTypes.func.isRequired,
-  toggleRenderView: PropTypes.func.isRequired,
-  value: PropTypes.string.isRequired,
-  templateKindId: PropTypes.string,
-};
-
-EditorNavbar.defaultProps = {
-  hosts: [],
-  filteredHosts: [],
-  renderPath: '',
-  safemodeRenderPath: '',
-  showHide: false,
-  template: '',
-  showHostSelector: true,
-  templateKindId: '',
-};
-
-export default EditorNavbar;
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 05d00494b93..bc58a22cc0a 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorOptions.js
@@ -1,66 +1,77 @@
 /* eslint-disable no-alert */
-import React from 'react';
+import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { Button, Icon, FormControl } from 'patternfly-react';
 
-import { Tooltip, TooltipPosition } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipPosition,
+  Flex,
+  FlexItem,
+  Divider,
+} 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 { INPUT, DIFF } from '../EditorConstants';
+import { EditorContext } from '../EditorContext';
 
-class EditorOptions extends React.Component {
-  constructor(props) {
-    super(props);
-    bindMethods(this, ['fileDialog']);
-    this.fileInput = React.createRef();
-  }
+const EditorOptions = props => {
+  const {
+    changeDiffViewType,
+    changeSetting,
+    diffViewType,
+    importFile,
+    isDiff,
+    isMasked,
+    keyBinding,
+    keyBindings,
+    mode,
+    modes,
+    revertChanges,
+    showHide,
+    showImport,
+    template,
+    theme,
+    themes,
+    autocompletion,
+    liveAutocompletion,
+    toggleMaskValue,
+    toggleModal,
+  } = props;
 
-  fileDialog() {
-    this.fileInput.click();
-  }
+  const fileInput = useRef('');
 
-  render() {
-    const {
-      changeDiffViewType,
-      changeSetting,
-      changeTab,
-      diffViewType,
-      importFile,
-      isDiff,
-      isMasked,
-      keyBinding,
-      keyBindings,
-      mode,
-      modes,
-      revertChanges,
-      selectedView,
-      showHide,
-      showImport,
-      template,
-      theme,
-      themes,
-      autocompletion,
-      liveAutocompletion,
-      toggleMaskValue,
-      toggleModal,
-    } = this.props;
+  const openFileDialog = () => {
+    fileInput.current.click();
+  };
 
-    return (
-      <div id="editor-dropdowns">
-        {selectedView === 'diff' && (
-          <DiffToggle
-            stateView={diffViewType}
-            changeState={viewType => changeDiffViewType(viewType)}
+  const { selectedView, setSelectedView } = useContext(EditorContext);
+
+  return (
+    <Flex id="editor-dropdowns" spaceItems={{ default: 'spaceItemsNone' }}>
+      {selectedView === DIFF && (
+        <>
+          <FlexItem>
+            <DiffToggle
+              stateView={diffViewType}
+              changeState={viewType => changeDiffViewType(viewType)}
+            />
+          </FlexItem>
+          <FlexItem spacer={{ default: 'spacerMd' }} />
+          <Divider
+            orientation={{ default: 'vertical' }}
+            inset={{ default: 'insetMd' }}
           />
-        )}
+        </>
+      )}
 
-        <h4 id="divider">|</h4>
-        {showHide && (
+      {showHide && (
+        <FlexItem>
           <Tooltip content={__('Hide Content')} position={TooltipPosition.top}>
             <Button
-              disabled={selectedView !== 'input'}
+              disabled={selectedView !== INPUT}
               className="editor-button"
               id="hide-btn"
               onClick={() => toggleMaskValue(isMasked)}
@@ -69,8 +80,10 @@ class EditorOptions extends React.Component {
               <Icon size="lg" type="fa" name={isMasked ? 'eye' : 'eye-slash'} />
             </Button>
           </Tooltip>
-        )}
-        {isDiff ? ( // fixing tooltip showing sometimes for disabled icon
+        </FlexItem>
+      )}
+      {isDiff ? ( // fixing tooltip showing sometimes for disabled icon
+        <FlexItem>
           <Tooltip
             content={__('Revert Local Changes')}
             position={TooltipPosition.top}
@@ -85,7 +98,9 @@ class EditorOptions extends React.Component {
                   )
                 ) {
                   revertChanges(template);
-                  if (selectedView !== 'input') changeTab('input');
+                  if (selectedView !== INPUT) {
+                    setSelectedView(INPUT);
+                  }
                 }
               }}
               bsStyle="link"
@@ -93,7 +108,9 @@ class EditorOptions extends React.Component {
               <Icon size="2x" type="pf" name="restart" />
             </Button>
           </Tooltip>
-        ) : (
+        </FlexItem>
+      ) : (
+        <FlexItem>
           <Button
             disabled
             className="editor-button"
@@ -102,20 +119,22 @@ class EditorOptions extends React.Component {
           >
             <Icon size="2x" type="pf" name="restart" />
           </Button>
-        )}
-        {showImport && (
+        </FlexItem>
+      )}
+      {showImport && (
+        <FlexItem>
           <Tooltip content={__('Import File')} position={TooltipPosition.top}>
             <Button
-              disabled={selectedView !== 'input'}
+              disabled={selectedView !== INPUT}
               className="import-button"
               id="import-btn"
               bsStyle="link"
-              onClick={() => this.fileDialog()}
+              onClick={openFileDialog}
             >
               <Icon size="lg" type="pf" name="folder-open" />
               <FormControl
                 inputRef={ref => {
-                  this.fileInput = ref;
+                  fileInput.current = ref;
                 }}
                 className="hidden"
                 type="file"
@@ -123,38 +142,43 @@ class EditorOptions extends React.Component {
               />
             </Button>
           </Tooltip>
-        )}
-        <EditorSettings
-          changeSetting={changeSetting}
-          selectedView={selectedView}
-          modes={modes}
-          mode={mode}
-          keyBindings={keyBindings}
-          keyBinding={keyBinding}
-          theme={theme}
-          themes={themes}
-          autocompletion={autocompletion}
-          liveAutocompletion={liveAutocompletion}
-        />
+        </FlexItem>
+      )}
+      <FlexItem>
+        <div role="option" aria-selected>
+          <EditorSettings
+            changeSetting={changeSetting}
+            modes={modes}
+            mode={mode}
+            keyBindings={keyBindings}
+            keyBinding={keyBinding}
+            theme={theme}
+            themes={themes}
+            autocompletion={autocompletion}
+            liveAutocompletion={liveAutocompletion}
+          />
+        </div>
+      </FlexItem>
+      <FlexItem>
         <Tooltip content={__('Maximize')} position={TooltipPosition.top}>
           <Button
             className="editor-button"
             id="fullscreen-btn"
             onClick={toggleModal}
             bsStyle="link"
+            aria-label="Open Modal"
           >
             <Icon size="lg" type="fa" name="arrows-alt" />
           </Button>
         </Tooltip>
-      </div>
-    );
-  }
-}
+      </FlexItem>
+    </Flex>
+  );
+};
 
 EditorOptions.propTypes = {
   changeDiffViewType: PropTypes.func.isRequired,
   changeSetting: PropTypes.func.isRequired,
-  changeTab: PropTypes.func.isRequired,
   diffViewType: PropTypes.string.isRequired,
   importFile: PropTypes.func.isRequired,
   isDiff: PropTypes.bool.isRequired,
@@ -164,7 +188,6 @@ EditorOptions.propTypes = {
   mode: PropTypes.string.isRequired,
   modes: PropTypes.array.isRequired,
   revertChanges: PropTypes.func.isRequired,
-  selectedView: PropTypes.string.isRequired,
   showHide: PropTypes.bool,
   showImport: PropTypes.bool.isRequired,
   template: PropTypes.string,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
deleted file mode 100644
index fbce8572378..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorRadioButton.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon, NavItem } from 'patternfly-react';
-
-const EditorRadioButton = ({
-  btnView,
-  disabled,
-  icon,
-  onClick,
-  stateView,
-  title,
-}) => (
-  <NavItem
-    disabled={disabled}
-    active={stateView === btnView}
-    id={`${btnView}-navitem`}
-    onClick={onClick}
-  >
-    {icon && <Icon type={icon.type} name={icon.name} />}
-    {icon ? ` ${title}` : title}
-  </NavItem>
-);
-
-EditorRadioButton.propTypes = {
-  btnView: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  icon: PropTypes.object,
-  onClick: PropTypes.func.isRequired,
-  stateView: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-EditorRadioButton.defaultProps = {
-  icon: null,
-  disabled: false,
-};
-
-export default EditorRadioButton;
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 1e7fb45891a..86539dc015d 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorSettings.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Dropdown, MenuItem, Button, Icon } from 'patternfly-react';
 import {
@@ -8,9 +8,9 @@ import {
   TooltipPosition,
 } from '@patternfly/react-core';
 import { translate as __ } from '../../../common/I18n';
+import { EditorContext } from '../EditorContext';
 
 const EditorSettings = ({
-  selectedView,
   changeSetting,
   keyBinding,
   keyBindings,
@@ -20,113 +20,134 @@ const EditorSettings = ({
   themes,
   autocompletion,
   liveAutocompletion,
-}) => (
-  <Popover
-    id="cog-popover"
-    position={PopoverPosition.bottom}
-    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"
-          >
-            <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')}
+}) => {
+  const { selectedView } = useContext(EditorContext);
+  return (
+    <Popover
+      id="cog-popover"
+      position={PopoverPosition.bottom}
+      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="syntax-dropdown"
+              data-testid="syntax-dropdown-menu"
+            >
+              <Dropdown.Toggle>{mode}</Dropdown.Toggle>
+              <Dropdown.Menu id="settings-dropdown">
+                {modes.map((aceMode, i) => (
+                  <MenuItem
+                    key={i}
+                    aria-label="Syntax dropdown item"
+                    onClick={() => changeSetting({ mode: aceMode })}
+                  >
+                    {aceMode}
+                  </MenuItem>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
           </div>
-          <div className="dropdown btn-group">
-            <input
-              id="autocompletion-checkbox"
-              name="autocompletion"
-              type="checkbox"
-              checked={autocompletion}
-              onChange={e => changeSetting({ autocompletion: !autocompletion })}
-            />
+          <div className="cog-popover-dropdown">
+            <div className="cog-popover-dropdown-title">{__('Keybind')}</div>
+            <Dropdown
+              disabled={selectedView === 'preview'}
+              id="keybindings-dropdown"
+              aria-label="Keybindings dropdown"
+            >
+              <Dropdown.Toggle>{keyBinding}</Dropdown.Toggle>
+              <Dropdown.Menu id="settings-dropdown">
+                {keyBindings.map((keyBind, i) => (
+                  <MenuItem
+                    key={i}
+                    aria-label="Keybinding dropdown item"
+                    onClick={() => changeSetting({ keyBinding: keyBind })}
+                  >
+                    {keyBind}
+                  </MenuItem>
+                ))}
+              </Dropdown.Menu>
+            </Dropdown>
           </div>
-        </div>
-        <div className="cog-popover-dropdown">
-          <div className="cog-popover-dropdown-title">
-            {__('Live Autocompletion')}
+          <div className="cog-popover-dropdown">
+            <div className="cog-popover-dropdown-title">{__('Theme')}</div>
+            <Dropdown id="themes-dropdown" aria-label="Themes dropdown">
+              <Dropdown.Toggle>{theme}</Dropdown.Toggle>
+              <Dropdown.Menu id="settings-dropdown">
+                {themes.map((themeKey, i) => (
+                  <MenuItem
+                    key={i}
+                    aria-label="Theme dropdown item"
+                    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 })
+                }
+                aria-label="autocompletion input"
+              />
+            </div>
           </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 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"
+                aria-label="autocompletion live input"
+                checked={liveAutocompletion}
+                disabled={!autocompletion}
+                onChange={e =>
+                  changeSetting({ liveAutocompletion: !liveAutocompletion })
+                }
+              />
+            </div>
           </div>
         </div>
+      }
+    >
+      <div>
+        <Tooltip content={__('Settings')} position={TooltipPosition.top}>
+          <Button
+            className="editor-button"
+            id="cog-btn"
+            bsStyle="link"
+            aria-label="Editor settings open button"
+          >
+            <Icon size="lg" name="cog" />
+          </Button>
+        </Tooltip>
       </div>
-    }
-  >
-    <Tooltip content={__('Settings')} position={TooltipPosition.top}>
-      <Button className="editor-button" id="cog-btn" bsStyle="link">
-        <Icon size="lg" name="cog" />
-      </Button>
-    </Tooltip>
-  </Popover>
-);
+    </Popover>
+  );
+};
 
 EditorSettings.propTypes = {
   changeSetting: PropTypes.func.isRequired,
   keyBinding: PropTypes.string.isRequired,
   keyBindings: PropTypes.array.isRequired,
-  selectedView: PropTypes.string.isRequired,
   mode: PropTypes.string.isRequired,
   modes: PropTypes.array.isRequired,
   theme: PropTypes.string.isRequired,
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorTabs.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorTabs.js
new file mode 100644
index 00000000000..9dc4b36dbbd
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorTabs.js
@@ -0,0 +1,86 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import { Tabs, Tab, TabTitleText } from '@patternfly/react-core';
+import { translate as __ } from '../../../common/I18n';
+import { INPUT, DIFF, PREVIEW } from '../EditorConstants';
+import { EditorContext } from '../EditorContext';
+
+const EditorTabs = ({
+  isRendering,
+  toggleRenderView,
+  showPreview,
+  isDiff,
+  selectedHost,
+  fetchAndPreview,
+  selectedRenderPath,
+  templateKindId,
+  showHostSelector,
+}) => {
+  const { selectedView, setSelectedView } = useContext(EditorContext);
+
+  return (
+    <Tabs activeKey={selectedView}>
+      <Tab
+        id={`tab-${INPUT}`}
+        key={INPUT}
+        eventKey={INPUT}
+        onClick={() => {
+          if (selectedView !== INPUT) {
+            if (isRendering) toggleRenderView();
+            setSelectedView(INPUT);
+          }
+        }}
+        title={<TabTitleText>{__('Editor')}</TabTitleText>}
+      />
+      <Tab
+        id={`tab-${DIFF}`}
+        key={DIFF}
+        eventKey={DIFF}
+        disabled={!isDiff}
+        onClick={() => {
+          if (selectedView !== DIFF) {
+            setSelectedView(DIFF);
+          }
+        }}
+        title={<TabTitleText>{__('Changes')}</TabTitleText>}
+      />
+      {showPreview && (
+        <Tab
+          id={`tab-${PREVIEW}`}
+          key={PREVIEW}
+          eventKey={PREVIEW}
+          onClick={() => {
+            if (selectedView !== PREVIEW) {
+              if (!isRendering) toggleRenderView();
+              setSelectedView(PREVIEW);
+              if (selectedHost.id === '')
+                fetchAndPreview(
+                  selectedRenderPath,
+                  templateKindId,
+                  !showHostSelector
+                );
+            }
+          }}
+          title={<TabTitleText>{__('Preview')}</TabTitleText>}
+        />
+      )}
+    </Tabs>
+  );
+};
+
+EditorTabs.propTypes = {
+  isRendering: PropTypes.bool.isRequired,
+  toggleRenderView: PropTypes.func.isRequired,
+  showPreview: PropTypes.bool.isRequired,
+  isDiff: PropTypes.bool.isRequired,
+  selectedHost: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    name: PropTypes.string,
+  }).isRequired,
+  fetchAndPreview: PropTypes.func.isRequired,
+  selectedRenderPath: PropTypes.string.isRequired,
+  templateKindId: PropTypes.string.isRequired,
+  showHostSelector: PropTypes.bool.isRequired,
+};
+
+export default EditorTabs;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/EditorToolbar.js b/webpack/assets/javascripts/react_app/components/Editor/components/EditorToolbar.js
new file mode 100644
index 00000000000..00dcb104545
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/EditorToolbar.js
@@ -0,0 +1,187 @@
+import React, { useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+import {
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  Spinner,
+  Button,
+  Alert,
+} from '@patternfly/react-core';
+import { translate as __ } from '../../../common/I18n';
+import EditorTabs from './EditorTabs';
+import EditorOptions from './EditorOptions';
+import EditorHostSelect from './EditorHostSelect';
+import EditorSafemodeCheckbox from './EditorSafemodeCheckbox';
+import { EditorContext } from '../EditorContext';
+import { PREVIEW, ALIGN_LEFT, ALIGN_RIGHT } from '../EditorConstants';
+
+const EditorToolbar = props => {
+  const {
+    hosts,
+    filteredHosts,
+    isLoading,
+    isFetchingHosts,
+    isSearchingHosts,
+    previewTemplate,
+    isSafemodeEnabled,
+    renderPath,
+    safemodeRenderPath,
+    selectedHost,
+    showHostSelector,
+    value,
+    templateKindId,
+    renderedEditorValue,
+    previewResult,
+    onHostSelectToggle,
+    onHostSearch,
+    isSelectOpen,
+  } = props;
+
+  const [safemode, setSafemode] = useState(isSafemodeEnabled);
+  const handleSafeModeChange = ({ currentTarget: { checked: newChecked } }) => {
+    setSafemode(newChecked);
+    const newRenderPath = newChecked ? safemodeRenderPath : renderPath;
+    previewTemplate({
+      host: selectedHost,
+      renderPath: newRenderPath,
+      templateKindId,
+    });
+  };
+  const selectedRenderPath = safemode ? safemodeRenderPath : renderPath;
+
+  const { selectedView } = useContext(EditorContext);
+
+  return (
+    <Toolbar className="bottom-cling-toolbar">
+      <ToolbarContent>
+        <ToolbarItem
+          id="toolbar-item-toolbar-tabs"
+          alignment={{ default: ALIGN_LEFT }}
+          key="toolbar-item-editor-tabs"
+        >
+          <EditorTabs {...props} selectedRenderPath={selectedRenderPath} />
+        </ToolbarItem>
+
+        {showHostSelector && (
+          <ToolbarItem
+            id="toolbar-item-show-host-selector"
+            alignment={{ default: ALIGN_LEFT }}
+            key="toolbar-item-show-host-selector"
+          >
+            <EditorHostSelect
+              {...props}
+              show={selectedView === PREVIEW}
+              open={isSelectOpen}
+              selectedItem={selectedHost}
+              placeholder={__('Select Host...')}
+              isLoading={isFetchingHosts}
+              onChange={host =>
+                previewTemplate({
+                  host,
+                  renderPath: selectedRenderPath,
+                  templateKindId,
+                })
+              }
+              onToggle={onHostSelectToggle}
+              onSearchChange={onHostSearch}
+              options={isSearchingHosts ? filteredHosts : hosts}
+            />
+          </ToolbarItem>
+        )}
+
+        <ToolbarItem
+          id="toolbar-item-editor-safemode-checkbox"
+          alignment={{ default: ALIGN_LEFT }}
+          key="toolbar-item-editor-safemode-checkbox"
+        >
+          <EditorSafemodeCheckbox
+            show={selectedView === PREVIEW}
+            checked={safemode}
+            disabled={isSafemodeEnabled}
+            handleSafeModeChange={handleSafeModeChange}
+          />
+        </ToolbarItem>
+
+        {selectedView === PREVIEW &&
+          previewResult !== '' &&
+          renderedEditorValue !== value && (
+            <ToolbarItem
+              id="toolbar-item-outdated-preview-alert"
+              alignment={{ default: ALIGN_LEFT }}
+              key="toolbar-item-outdated-preview-alert"
+            >
+              <Alert type="warning">
+                {__('Preview is outdated.')}
+                <Button
+                  variant="link"
+                  onClick={() =>
+                    previewTemplate({
+                      host: selectedHost,
+                      renderPath: selectedRenderPath,
+                      templateKindId,
+                    })
+                  }
+                >
+                  {__('Preview')}
+                </Button>
+              </Alert>
+            </ToolbarItem>
+          )}
+
+        {isLoading && (
+          <ToolbarItem
+            id="toolbar-item-preview-spinner"
+            alignment={{ default: ALIGN_LEFT }}
+            key="toolbar-item-preview-spinner"
+          >
+            <Spinner size="sm" isSVG />
+          </ToolbarItem>
+        )}
+
+        <ToolbarItem
+          id="toolbar-item-editor-options"
+          alignment={{ default: ALIGN_RIGHT }}
+          key="toolbar-item-editor-options"
+        >
+          <EditorOptions {...props} />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+};
+
+EditorToolbar.propTypes = {
+  filteredHosts: PropTypes.array,
+  hosts: PropTypes.array,
+  isFetchingHosts: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool.isRequired,
+  isSearchingHosts: PropTypes.bool.isRequired,
+  isSelectOpen: PropTypes.bool.isRequired,
+  onHostSearch: PropTypes.func.isRequired,
+  onHostSelectToggle: PropTypes.func.isRequired,
+  previewResult: PropTypes.string.isRequired,
+  previewTemplate: PropTypes.func.isRequired,
+  renderedEditorValue: PropTypes.string.isRequired,
+  isSafemodeEnabled: PropTypes.bool.isRequired,
+  renderPath: PropTypes.string,
+  safemodeRenderPath: PropTypes.string,
+  selectedHost: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    name: PropTypes.string,
+  }).isRequired,
+  showHostSelector: PropTypes.bool,
+  value: PropTypes.string.isRequired,
+  templateKindId: PropTypes.string,
+};
+
+EditorToolbar.defaultProps = {
+  hosts: [],
+  filteredHosts: [],
+  renderPath: '',
+  safemodeRenderPath: '',
+  showHostSelector: true,
+  templateKindId: '',
+};
+
+export default EditorToolbar;
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..2a0f5c68d6a 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,56 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import EditorModal from '../EditorModal';
-import { editorOptions } from '../../Editor.fixtures';
-
-const fixtures = {
-  'renders EditorModal editor': {
-    ...editorOptions,
-    editorValue: '</>',
-    onHide: jest.fn(),
-  },
-  'renders EditorModal diff': {
-    ...editorOptions,
-    selectedView: 'diff',
-    editorValue: '</>',
-    onHide: jest.fn(),
-  },
-};
+import {
+  EditorModalfixtures,
+  inputEditorContextValue,
+  diffEditorContextValue,
+} from '../../Editor.fixtures';
+import { EditorContext } from '../../EditorContext';
 
 describe('EditorModal', () => {
-  describe('should render', () =>
-    testComponentSnapshotsWithFixtures(EditorModal, fixtures));
+  it('should render with diff view', async () => {
+    const changeDiffViewType = jest.fn();
+
+    const { getByText, unmount } = await render(
+      <EditorContext.Provider value={diffEditorContextValue}>
+        <EditorModal
+          {...EditorModalfixtures}
+          changeDiffViewType={changeDiffViewType}
+        />
+      </EditorContext.Provider>
+    );
+
+    const splitButton = getByText(/split/i);
+    const unifiedButton = getByText(/unified/i);
+
+    fireEvent.click(unifiedButton);
+    expect(changeDiffViewType).toHaveBeenCalledWith('unified');
+
+    // changeDiffViewType should only be called once and with unified, because the original render was with split
+    // and the component only changes the view type if it is different from the original
+    // changeDiffViewType is only a mock here, so it doesn't actually change the view type
+    fireEvent.click(splitButton);
+    expect(changeDiffViewType).not.toHaveBeenCalledWith('split');
+
+    expect(changeDiffViewType).toHaveBeenCalledTimes(1);
+
+    unmount();
+  });
+
+  it('should not render with editor view', async () => {
+    const { queryByText, unmount } = await render(
+      <EditorContext.Provider value={inputEditorContextValue}>
+        <EditorModal {...EditorModalfixtures} />
+      </EditorContext.Provider>
+    );
+
+    // Should not find these toggle buttons on the screen
+    expect(queryByText(/split/i)).toBe(null);
+    expect(queryByText(/unified/i)).toBe(null);
+    
+    unmount();
+  });
 });
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
deleted file mode 100644
index 527243a1f92..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorNavbar.test.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { mount } from '@theforeman/test';
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
-
-import EditorNavbar from '../EditorNavbar';
-import { editorOptions, showBooleans } from '../../Editor.fixtures';
-
-const { data: editorOptionsData, ...restEditorOptions } = editorOptions;
-
-const props = {
-  ...editorOptionsData,
-  ...restEditorOptions,
-  ...showBooleans,
-  isDiff: true,
-};
-
-const fixtures = {
-  'renders EditorNavbar': props,
-};
-
-describe('EditorNavbar', () => {
-  describe('rendring', () =>
-    testComponentSnapshotsWithFixtures(EditorNavbar, fixtures));
-
-  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);
-  });
-});
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 de6300d14f0..92e8eebf9fd 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,46 +1,39 @@
 import React from 'react';
 import { mount } from '@theforeman/test';
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
 
 import EditorOptions from '../EditorOptions';
-import { editorOptions, showBooleans } from '../../Editor.fixtures';
+import { editorOptions, showBooleans, inputEditorContextValue, diffEditorContextValue } from '../../Editor.fixtures';
+import { EditorContext } from '../../EditorContext';
 
 const props = { ...editorOptions, ...showBooleans, isDiff: true };
 
-const fixtures = {
-  'renders EditorOptions': props,
-};
-
 describe('EditorOptions', () => {
-  describe('EditorOptions', () =>
-    testComponentSnapshotsWithFixtures(EditorOptions, fixtures));
-
-  describe('simulate onClick', () => {
+  it('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"
-      />
+      <EditorContext.Provider value={diffEditorContextValue}>
+        <EditorOptions
+          {...props}
+          toggleMaskValue={toggleMaskValue}
+          revertChanges={revertChanges}
+          isDiff
+        />
+      </EditorContext.Provider>
     );
 
     const inputWrapper = mount(
-      <EditorOptions
-        {...props}
-        changeTab={changeTab}
-        toggleMaskValue={toggleMaskValue}
-        revertChanges={revertChanges}
-        isDiff
-      />
+      <EditorContext.Provider value={inputEditorContextValue}>
+        <EditorOptions
+          {...props}
+          toggleMaskValue={toggleMaskValue}
+          revertChanges={revertChanges}
+          isDiff
+        />
+      </EditorContext.Provider>
     );
 
     diffWrapper
@@ -57,7 +50,9 @@ describe('EditorOptions', () => {
       .simulate('click');
 
     expect(toggleMaskValue).toHaveBeenCalledTimes(1);
-    expect(changeTab).toHaveBeenCalledTimes(1);
+    expect(revertChanges).toHaveBeenCalledTimes(1);
+    expect(diffEditorContextValue.setSelectedView).toHaveBeenCalledTimes(1);
+    expect(diffEditorContextValue.setSelectedView).toHaveBeenCalledWith("input");
     expect(window.confirm).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
deleted file mode 100644
index a10b0dc25c1..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorRadioButton.test.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
-import { noop } from '../../../../common/helpers';
-
-import EditorRadioButton from '../EditorRadioButton';
-import { editor } from '../../Editor.fixtures';
-
-const fixtures = {
-  'renders EditorRadioButton': {
-    stateView: editor.selectedView,
-    btnView: editor.selectedView,
-    title: 'Editor',
-    onClick: noop,
-  },
-};
-
-describe('EditorRadioButton', () =>
-  testComponentSnapshotsWithFixtures(EditorRadioButton, fixtures));
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..b2d799fdcb3 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,31 +1,154 @@
-import { testComponentSnapshotsWithFixtures } from '../../../../common/testHelpers';
-import { noop } from '../../../../common/helpers';
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import EditorSettings from '../EditorSettings';
-import { dropdowns } from '../../Editor.fixtures';
-
-const fixtures = {
-  'renders EditorSettings': {
-    ...dropdowns,
-    mode: 'Ruby',
-    selectedView: 'input',
-    theme: 'Github',
-    autocompletion: true,
-    liveAutocompletion: false,
-    keyBinding: 'vim',
-    changeSetting: noop,
-  },
-  'renders EditorSettings w/preview': {
-    ...dropdowns,
-    mode: 'Ruby',
-    selectedView: 'preview',
-    theme: 'Github',
-    autocompletion: true,
-    liveAutocompletion: false,
-    keyBinding: 'vim',
-    changeSetting: noop,
-  },
-};
-
-describe('EditorSettings', () =>
-  testComponentSnapshotsWithFixtures(EditorSettings, fixtures));
+import {
+  inputEditorContextValue,
+  previewEditorContextValue,
+} from '../../Editor.fixtures';
+import { EditorContext } from '../../EditorContext';
+import { editorSettingsFixtures } from '../../Editor.fixtures';
+
+describe('EditorSettings', () => {
+  it('should render all elements in preview view', async () => {
+    const {
+      getByTestId,
+      getByLabelText,
+      getByText,
+      getAllByText,
+    } = await render(
+      <EditorContext.Provider value={previewEditorContextValue}>
+        <EditorSettings {...editorSettingsFixtures} />
+      </EditorContext.Provider>
+    );
+
+    // open settings
+    const openSettingsButton = getByLabelText('Editor settings open button');
+    fireEvent.click(openSettingsButton);
+
+    // wait for the DropDown menu of the settings to open:
+    await waitFor(() => getByText(/Settings/i));
+
+    // Titles
+    getByText(/Settings/i);
+    getByText(/Syntax/i);
+    getByText(/Keybind/i);
+    getByText(/Theme/i);
+    expect(getAllByText(/Autocompletion/i)).toHaveLength(2); // 1. Autocompletion, 2. Live Autocompletion
+    getByText(/Live Autocompletion/i);
+
+    // DropDowns
+    expect(getByLabelText(/Keybindings Dropdown/i)).not.toBeDisabled();
+    expect(getByTestId('syntax-dropdown-menu')).not.toBeDisabled();
+    expect(getByLabelText(/Themes Dropdown/i)).not.toBeDisabled();
+
+    // autocompletion
+    expect(getByLabelText(/autocompletion input/i)).toBeInTheDocument();
+  });
+
+  /**********************************************************/
+
+  it('should flow: functionality check', async () => {
+    const changeSetting = jest.fn();
+
+    const {
+      getByLabelText,
+      getByText,
+      getAllByLabelText,
+      getByTestId,
+    } = await render(
+      <EditorContext.Provider value={inputEditorContextValue}>
+        <EditorSettings
+          {...editorSettingsFixtures}
+          changeSetting={changeSetting}
+        />
+      </EditorContext.Provider>
+    );
+
+    // open settings
+    const openSettingsButton = getByLabelText('Editor settings open button');
+    fireEvent.click(openSettingsButton);
+
+    // wait for the DropDown menu of the settings to open:
+    await waitFor(() => getByText(/Settings/i));
+
+    // Themes Dropdown Functionality:
+
+    // Click on the Themes Dropdown Menu
+    fireEvent.click(getByLabelText(/Themes dropdown/i));
+
+    // ensure the dropdown menu contains the expected items:
+    const themesDropdownItem = getAllByLabelText('Theme dropdown item');
+    expect(themesDropdownItem).toHaveLength(2);
+    expect(themesDropdownItem[0]).toHaveTextContent('Github');
+    expect(themesDropdownItem[1]).toHaveTextContent('Monokai');
+
+    // Click on the Monokai theme
+    fireEvent.click(themesDropdownItem[1]);
+
+    // expect the changeSetting to have been called with the expected value:
+    expect(changeSetting).lastCalledWith({ theme: 'Monokai' });
+
+    // Keybindings Dropdown Functionality:
+
+    // Click on the Keybindings Dropdown Menu
+    fireEvent.click(getByLabelText(/Keybindings dropdown/i));
+
+    // ensure the dropdown menu contains the expected items:
+    const keybindingsDropdownItem = getAllByLabelText(
+      'Keybinding dropdown item'
+    );
+    expect(keybindingsDropdownItem).toHaveLength(3);
+    expect(keybindingsDropdownItem[0]).toHaveTextContent('Default');
+    expect(keybindingsDropdownItem[1]).toHaveTextContent('Emacs');
+    expect(keybindingsDropdownItem[2]).toHaveTextContent('Vim');
+
+    // Click on the Vim keybinding
+    fireEvent.click(keybindingsDropdownItem[2]);
+
+    // expect the changeSetting to have been called with the expected value:
+    expect(changeSetting).lastCalledWith({ keyBinding: 'Vim' });
+
+    // Syntax Dropdown Functionality:
+
+    // Click on the Syntax Dropdown Menu:
+    fireEvent.click(getByTestId('syntax-dropdown-menu'));
+
+    // wait for the DropDown menu of modes to open:
+    waitFor(() => getByLabelText(/Mode Dropdown/i));
+
+    // ensure the dropdown menu contains the expected items:
+    const modeDropdownItem = getAllByLabelText('Syntax dropdown item');
+    expect(modeDropdownItem).toHaveLength(7);
+    expect(modeDropdownItem[0]).toHaveTextContent('Text');
+    expect(modeDropdownItem[1]).toHaveTextContent('Json');
+    expect(modeDropdownItem[2]).toHaveTextContent('Ruby');
+    expect(modeDropdownItem[3]).toHaveTextContent('Html_ruby');
+    expect(modeDropdownItem[4]).toHaveTextContent('Sh');
+    expect(modeDropdownItem[5]).toHaveTextContent('Xml');
+    expect(modeDropdownItem[6]).toHaveTextContent('Yaml');
+
+    // Click on the Ruby mode
+    fireEvent.click(modeDropdownItem[2]);
+
+    // expect the changeSetting to have been called with the expected value:
+    expect(changeSetting).lastCalledWith({ mode: 'Ruby' });
+
+    // Click on the Autocompletion checkbox:
+
+    fireEvent.click(getByLabelText(/autocompletion input/i));
+
+    // expect the changeSetting to have been called with the expected value:
+    expect(changeSetting).lastCalledWith({ autocompletion: false });
+
+    // Click on the Live Autocompletion checkbox:
+
+    fireEvent.click(getByLabelText(/autocompletion live input/i));
+
+    // expect the changeSetting to have been called with the expected value:
+    expect(changeSetting).lastCalledWith({ liveAutocompletion: true });
+
+    expect(changeSetting).toHaveBeenCalledTimes(5);
+  });
+});
diff --git a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorToolbar.test.js b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorToolbar.test.js
new file mode 100644
index 00000000000..30c3601c202
--- /dev/null
+++ b/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/EditorToolbar.test.js
@@ -0,0 +1,157 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+                     import '@testing-library/jest-dom';
+
+import EditorToolbar from '../EditorToolbar';
+import { EditorContext } from '../../EditorContext';
+import {
+  editorOptions,
+  showBooleans,
+  inputEditorContextValue,
+  previewEditorContextValue,
+  editorTabsWithoutDiff,
+  editorTabsWithDiff,
+  PF_CURRENT,
+} from '../../Editor.fixtures';
+
+const { data: editorOptionsData, ...restEditorOptions } = editorOptions;
+
+const props = {
+  ...editorOptionsData,
+  ...restEditorOptions,
+  ...showBooleans,
+};
+
+describe('EditorToolbar', () => {
+
+  it('Renders all subcomponents', async () => {
+    const { getByText, getByRole, getByLabelText, unmount } = await render(
+      <EditorContext.Provider value={previewEditorContextValue}>
+        <EditorToolbar
+          {...props}
+          isDiff={true}
+          isRendering
+          isSelectOpen={true}
+          isLoading={true}
+        />
+      </EditorContext.Provider>
+    );
+
+    // Spinner
+    expect(getByRole('progressbar')).toBeInTheDocument();
+
+    // Tabs
+    expect(getByRole('tablist')).toBeInTheDocument();
+
+    // HostSelect
+    expect(getByLabelText('Host selection menu option')).toBeInTheDocument();
+    expect(getByText(/filter host.../i)).toBeInTheDocument();
+
+    // SafemodeCheckbox
+    expect(getByText(/safemode/i)).toBeInTheDocument();
+
+    // Alert
+    expect(getByText(/Preview is outdated./i)).toBeInTheDocument();
+
+    // Options
+    expect(getByRole('option')).toBeInTheDocument();
+
+    unmount();
+  });
+
+  /**********************************************************/
+
+  it('EditorTabs Functionality: Without Diff', async () => {
+    const { getByText, unmount } = await render(
+      <EditorContext.Provider value={inputEditorContextValue}>
+        <EditorToolbar
+          {...props}
+          isRendering
+          isLoading={false}
+          {...editorTabsWithoutDiff}
+        />
+    </EditorContext.Provider>
+    );
+
+    // ensuring the tab buttons are in the document:
+    const editorButton = await getByText(/editor/i);
+    const changesButton = await getByText(/changes/i);
+    const previewButton = await getByText(/preview/i);
+
+    // We need to get the container of the buttons, because only they have the attribute PF_CURRENT or disabled
+    const editorButtonContainer = editorButton.parentElement.parentElement;
+    const changesButtonContainer = changesButton.parentElement.parentElement;
+    const changesButtonContainer2 = changesButton.parentElement;
+    const previewButtonContainer = previewButton.parentElement.parentElement;
+
+    // Check that only the selected button looks selected
+    expect(editorButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+    expect(changesButtonContainer.classList.contains(PF_CURRENT)).toBe(false);
+    expect(previewButtonContainer.classList.contains(PF_CURRENT)).toBe(false);
+
+    // Without Diff, the changes button should be disabled
+    expect(changesButtonContainer2).toBeDisabled;
+
+    // Button Clicks:
+
+    // click button: Preview, ensure the change view function was called with the correct value
+    fireEvent.click(previewButton);
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenLastCalledWith("preview");
+
+    // click button: Editor, Because we do not change selectedView, when we press on this button we should not see changes
+    fireEvent.click(editorButton);
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenLastCalledWith("preview");
+    expect(inputEditorContextValue.setSelectedView).not.toHaveBeenLastCalledWith("editor");
+
+    expect(editorButtonContainer.classList.contains(PF_CURRENT)).toBe(true);
+    expect(previewButtonContainer.classList.contains(PF_CURRENT)).toBe(false);
+
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenCalledTimes(1);
+
+    unmount();
+  });
+
+  /**********************************************************/
+
+  it('EditorTabs Functionality: With Diff', async () => {
+    // Rerender component with diff to check the functionality of changes
+
+    const { getByText, unmount } = await render(
+      <EditorContext.Provider value={inputEditorContextValue}>
+        <EditorToolbar
+        {...props}
+        isRendering
+        isLoading={false}
+        {...editorTabsWithDiff}
+        />
+    </EditorContext.Provider>
+    );
+
+    // ensure the tab buttons are in the document:
+    const editorButton = await getByText(/editor/i);
+    const changesButton = await getByText(/changes/i);
+    const previewButton = await getByText(/preview/i);
+
+    // only the container of changes button have the attribute disabled
+    const changesButtonContainer = changesButton.parentElement;
+
+    // With Diff, the changes button should not be disabled
+    expect(changesButtonContainer).not.toBeDisabled();
+
+    // click button: Changes, ensure the change view function was called with the correct value
+    fireEvent.click(changesButton);
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenLastCalledWith("diff");
+
+    fireEvent.click(previewButton);
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenLastCalledWith("preview");
+
+    fireEvent.click(editorButton);
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenLastCalledWith("preview");
+    // because the selectedView is already input, the function shouldn't be called again
+    expect(inputEditorContextValue.setSelectedView).not.toHaveBeenLastCalledWith("editor");
+
+    expect(inputEditorContextValue.setSelectedView).toHaveBeenCalledTimes(3);
+
+    unmount();
+  });
+});
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
index a1496b4187f..0d324a20019 100644
--- 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
@@ -2,6 +2,7 @@
 
 exports[`EditorHostSelect should render renders EditorHostSelect 1`] = `
 <div
+  aria-label="Host selection menu option"
   className=""
   id="editor-select-container"
 >
@@ -44,6 +45,7 @@ exports[`EditorHostSelect should render renders EditorHostSelect 1`] = `
 
 exports[`EditorHostSelect should render renders EditorHostSelect loading 1`] = `
 <div
+  aria-label="Host selection menu option"
   className=""
   id="editor-select-container"
 >
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 1931b507466..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorModal.test.js.snap
+++ /dev/null
@@ -1,153 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorModal should render renders EditorModal diff 1`] = `
-<Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  className="editor-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={false}
->
-  <ModalHeader
-    bsClass="modal-header"
-    className="diff monokai"
-    closeButton={false}
-    closeLabel="Close"
-  >
-    <h4
-      id="editor-modal-h4"
-    />
-    <Button
-      active={false}
-      aria-hidden="true"
-      aria-label="Close"
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="close"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon
-        name="close"
-        type="pf"
-      />
-    </Button>
-    <DiffToggle
-      changeState={[Function]}
-      stateView="split"
-    />
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    className="diff"
-    componentClass="div"
-  >
-    <div
-      id="diff-table"
-    >
-      <DiffView
-        newText="</>"
-        oldText="<? />"
-        patch=""
-        viewType="split"
-      />
-    </div>
-  </ModalBody>
-</Modal>
-`;
-
-exports[`EditorModal should render renders EditorModal editor 1`] = `
-<Modal
-  animation={true}
-  autoFocus={true}
-  backdrop={true}
-  bsClass="modal"
-  className="editor-modal"
-  dialogComponentClass={[Function]}
-  enforceFocus={true}
-  keyboard={true}
-  manager={
-    ModalManager {
-      "add": [Function],
-      "containers": Array [],
-      "data": Array [],
-      "handleContainerOverflow": true,
-      "hideSiblingNodes": true,
-      "isTopModal": [Function],
-      "modals": Array [],
-      "remove": [Function],
-    }
-  }
-  onHide={[Function]}
-  renderBackdrop={[Function]}
-  restoreFocus={true}
-  show={false}
->
-  <ModalHeader
-    bsClass="modal-header"
-    className="input monokai"
-    closeButton={false}
-    closeLabel="Close"
-  >
-    <h4
-      id="editor-modal-h4"
-    />
-    <Button
-      active={false}
-      aria-hidden="true"
-      aria-label="Close"
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="close"
-      disabled={false}
-      onClick={[Function]}
-    >
-      <Icon
-        name="close"
-        type="pf"
-      />
-    </Button>
-  </ModalHeader>
-  <ModalBody
-    bsClass="modal-body"
-    className="input"
-    componentClass="div"
-  >
-    <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="</>"
-    />
-  </ModalBody>
-</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 951e72b2f14..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
-        name="eye-slash"
-        size="lg"
-        type="fa"
-      />
-    </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
-        name="restart"
-        size="2x"
-        type="pf"
-      />
-    </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
-        name="folder-open"
-        size="lg"
-        type="pf"
-      />
-      <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
-        name="arrows-alt"
-        size="lg"
-        type="fa"
-      />
-    </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 8c03b843260..00000000000
--- a/webpack/assets/javascripts/react_app/components/Editor/components/__tests__/__snapshots__/EditorSettings.test.js.snap
+++ /dev/null
@@ -1,541 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditorSettings renders EditorSettings 1`] = `
-<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"
->
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        name="cog"
-        size="lg"
-        type="fa"
-      />
-    </Button>
-  </Tooltip>
-</Popover>
-`;
-
-exports[`EditorSettings renders EditorSettings w/preview 1`] = `
-<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"
->
-  <Tooltip
-    content="Settings"
-    position="top"
-  >
-    <Button
-      active={false}
-      block={false}
-      bsClass="btn"
-      bsStyle="link"
-      className="editor-button"
-      disabled={false}
-      id="cog-btn"
-    >
-      <Icon
-        name="cog"
-        size="lg"
-        type="fa"
-      />
-    </Button>
-  </Tooltip>
-</Popover>
-`;
diff --git a/webpack/assets/javascripts/react_app/components/Editor/editor.scss b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
index 993c931a59c..bdb51ab9699 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/editor.scss
+++ b/webpack/assets/javascripts/react_app/components/Editor/editor.scss
@@ -92,117 +92,6 @@
   }
 }
 
-.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;
-    }
-
-    .dropdown-menu > li > a:hover {
-      background-color: #08c !important;
-    }
-
-    #editor-select-container {
-      width: 260px;
-      margin-top: 4px;
-
-      .select-container-pf {
-        border-radius: 2px;
-      }
-    }
-
-    #outdated-preview-alert {
-      display: flex;
-      align-items: center;
-
-      .alert {
-        padding: 0;
-        display: flex;
-        margin: 0 5px;
-        height: 24px;
-        align-items: center;
-        border-radius: 2px;
-
-        .pficon-warning-triangle-o {
-          position: inherit;
-          font-size: 15px;
-          top: 0;
-          left: 0;
-          margin: 0 5px;
-        }
-      }
-    }
-
-    #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;
-      }
-    }
-
-    #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;
-    }
-  }
-
-  .preview_type_ahead {
-    float: right;
-    padding: 4px;
-
-    input {
-      width: 275px;
-    }
-
-    .rbt-aux {
-      right: 0;
-    }
-  }
-}
-
 #hide-btn {
   width: 40px !important;
   font-size: 15px;
@@ -244,12 +133,6 @@
   display: flex;
   flex-direction: column;
 
-  div.navbar-editor {
-    .btn-link {
-      outline: none;
-    }
-  }
-
   #editor {
     .ace_gutter {
       .ace_gutter-layer {
@@ -318,3 +201,7 @@
 .ace_tooltip.ace_doc-tooltip {
   position: absolute;
 }
+
+.bottom-cling-toolbar {
+  padding-bottom: 0;
+}
diff --git a/webpack/assets/javascripts/react_app/components/Editor/index.js b/webpack/assets/javascripts/react_app/components/Editor/index.js
index 3daf3992fc2..3ac62712e1e 100644
--- a/webpack/assets/javascripts/react_app/components/Editor/index.js
+++ b/webpack/assets/javascripts/react_app/components/Editor/index.js
@@ -10,7 +10,6 @@ import {
   navFilteredHostsSelector,
   navHostsSelector,
   selectChosenHost,
-  selectChosenView,
   selectDiffType,
   selectEditorName,
   selectErrorText,
@@ -56,7 +55,6 @@ const mapStateToProps = state => ({
   readOnly: selectIsReadOnly(state),
   searchQuery: selectSearchQuery(state),
   selectedHost: selectChosenHost(state),
-  selectedView: selectChosenView(state),
   showError: selectShowError(state),
   theme: selectTheme(state),
   autocompletion: selectAutocompletion(state),