From b5fcaaa5b8d4892f3187c85466aae0d0afe707da Mon Sep 17 00:00:00 2001
From: Ignacio Rivas <rivasign@gmail.com>
Date: Tue, 24 Oct 2023 10:15:34 +0200
Subject: [PATCH 1/3] Remove all traces of es_ui_shared code editor

---
 .../__snapshots__/code_editor.test.tsx.snap   | 627 ------------------
 .../components/code_editor/_code_editor.scss  |  38 --
 .../public/components/code_editor/_index.scss |   1 -
 .../code_editor/code_editor.test.tsx          | 116 ----
 .../components/code_editor/code_editor.tsx    | 312 ---------
 .../public/components/code_editor/index.tsx   |  32 -
 .../components/code_editor/jest_mock.tsx      |  32 -
 src/plugins/es_ui_shared/public/index.ts      |   2 -
 .../components/json_editor/json_editor.tsx    |   6 +-
 .../public/application/shared_imports.ts      |   3 -
 .../template_clone.test.tsx                   |   1 -
 .../template_create.test.tsx                  |   1 -
 .../template_edit.test.tsx                    |   1 -
 .../component_template_create.test.tsx        |   2 -
 .../component_template_edit.test.tsx          |   1 -
 .../helpers/setup_environment.tsx             |   1 -
 .../load_mappings_provider.test.tsx           |   1 -
 .../load_mappings/load_mappings_provider.tsx  |   1 -
 .../index_management/public/shared_imports.ts |   1 -
 .../index_management/test/global_mocks.tsx    |  29 -
 .../ingest_pipelines_clone.test.tsx           |  18 -
 .../ingest_pipelines_create.test.tsx          |  18 -
 .../ingest_pipelines_edit.test.tsx            |  18 -
 .../__jest__/test_pipeline.helpers.tsx        |   1 -
 .../load_from_json/modal_provider.test.tsx    |   1 -
 .../ml_job_editor/ml_job_editor.tsx           |   6 +-
 .../plugins/osquery/public/shared_imports.ts  |   2 -
 .../detail_panel/detail_panel.test.js         |   6 +-
 28 files changed, 9 insertions(+), 1269 deletions(-)
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/_index.scss
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/index.tsx
 delete mode 100644 src/plugins/es_ui_shared/public/components/code_editor/jest_mock.tsx
 delete mode 100644 x-pack/plugins/index_management/test/global_mocks.tsx

diff --git a/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap b/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
deleted file mode 100644
index aeab9a66c7694..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/__snapshots__/code_editor.test.tsx.snap
+++ /dev/null
@@ -1,627 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiCodeEditor behavior hint element should be disabled when the ui ace box gains focus 1`] = `
-<button
-  class="euiCodeEditorKeyboardHint"
-  data-test-subj="codeEditorHint"
-  id="generated-id_codeEditor"
->
-  <p
-    class="euiText"
-  >
-    Press Enter to start editing.
-  </p>
-  <p
-    class="euiText"
-  >
-    When you're done, press Escape to stop editing.
-  </p>
-</button>
-`;
-
-exports[`EuiCodeEditor behavior hint element should be enabled when the ui ace box loses focus 1`] = `
-<button
-  class="euiCodeEditorKeyboardHint"
-  data-test-subj="codeEditorHint"
-  id="generated-id_codeEditor"
->
-  <p
-    class="euiText"
-  >
-    Press Enter to start editing.
-  </p>
-  <p
-    class="euiText"
-  >
-    When you're done, press Escape to stop editing.
-  </p>
-</button>
-`;
-
-exports[`EuiCodeEditor behavior hint element should be tabable 1`] = `
-<button
-  class="euiCodeEditorKeyboardHint"
-  data-test-subj="codeEditorHint"
-  id="generated-id_codeEditor"
->
-  <p
-    class="euiText"
-  >
-    Press Enter to start editing.
-  </p>
-  <p
-    class="euiText"
-  >
-    When you're done, press Escape to stop editing.
-  </p>
-</button>
-`;
-
-exports[`EuiCodeEditor is rendered 1`] = `
-<div
-  class="euiCodeEditorWrapper"
-  data-test-subj="test subject string"
->
-  <button
-    class="euiCodeEditorKeyboardHint"
-    data-test-subj="codeEditorHint"
-    id="generated-id_codeEditor"
-  >
-    <p
-      class="euiText"
-    >
-      Press Enter to start editing.
-    </p>
-    <p
-      class="euiText"
-    >
-      When you're done, press Escape to stop editing.
-    </p>
-  </button>
-  <div
-    class=" ace_editor ace-tm testClass1 testClass2"
-    id="generated-id"
-    style="width: 500px; height: 500px;"
-  >
-    <textarea
-      aria-label="aria-label"
-      autocapitalize="off"
-      autocorrect="off"
-      class="ace_text-input"
-      spellcheck="false"
-      style="opacity: 0;"
-      tabindex="-1"
-      wrap="off"
-    />
-    <div
-      aria-hidden="true"
-      class="ace_gutter"
-    >
-      <div
-        class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-      />
-    </div>
-    <div
-      class="ace_scroller"
-    >
-      <div
-        class="ace_content"
-      >
-        <div
-          class="ace_layer ace_print-margin-layer"
-        >
-          <div
-            class="ace_print-margin"
-            style="left: 4px; visibility: visible;"
-          />
-        </div>
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
-        />
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_cursor-layer ace_hidden-cursors"
-        >
-          <div
-            class="ace_cursor"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-v"
-      style="display: none; width: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="width: 20px;"
-      />
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-h"
-      style="display: none; height: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="height: 20px;"
-      />
-    </div>
-    <div
-      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-    >
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      />
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiCodeEditor props aria attributes allows setting aria-describedby on textbox 1`] = `
-<div
-  class="euiCodeEditorWrapper"
-  data-test-subj="codeEditorContainer"
->
-  <button
-    class="euiCodeEditorKeyboardHint"
-    data-test-subj="codeEditorHint"
-    id="generated-id_codeEditor"
-  >
-    <p
-      class="euiText"
-    >
-      Press Enter to start editing.
-    </p>
-    <p
-      class="euiText"
-    >
-      When you're done, press Escape to stop editing.
-    </p>
-  </button>
-  <div
-    class=" ace_editor ace-tm"
-    id="generated-id"
-    style="width: 500px; height: 500px;"
-  >
-    <textarea
-      aria-describedby="describedbyid"
-      autocapitalize="off"
-      autocorrect="off"
-      class="ace_text-input"
-      spellcheck="false"
-      style="opacity: 0;"
-      tabindex="-1"
-      wrap="off"
-    />
-    <div
-      aria-hidden="true"
-      class="ace_gutter"
-    >
-      <div
-        class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-      />
-    </div>
-    <div
-      class="ace_scroller"
-    >
-      <div
-        class="ace_content"
-      >
-        <div
-          class="ace_layer ace_print-margin-layer"
-        >
-          <div
-            class="ace_print-margin"
-            style="left: 4px; visibility: visible;"
-          />
-        </div>
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
-        />
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_cursor-layer ace_hidden-cursors"
-        >
-          <div
-            class="ace_cursor"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-v"
-      style="display: none; width: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="width: 20px;"
-      />
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-h"
-      style="display: none; height: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="height: 20px;"
-      />
-    </div>
-    <div
-      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-    >
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      />
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiCodeEditor props aria attributes allows setting aria-labelledby on textbox 1`] = `
-<div
-  class="euiCodeEditorWrapper"
-  data-test-subj="codeEditorContainer"
->
-  <button
-    class="euiCodeEditorKeyboardHint"
-    data-test-subj="codeEditorHint"
-    id="generated-id_codeEditor"
-  >
-    <p
-      class="euiText"
-    >
-      Press Enter to start editing.
-    </p>
-    <p
-      class="euiText"
-    >
-      When you're done, press Escape to stop editing.
-    </p>
-  </button>
-  <div
-    class=" ace_editor ace-tm"
-    id="generated-id"
-    style="width: 500px; height: 500px;"
-  >
-    <textarea
-      aria-labelledby="labelledbyid"
-      autocapitalize="off"
-      autocorrect="off"
-      class="ace_text-input"
-      spellcheck="false"
-      style="opacity: 0;"
-      tabindex="-1"
-      wrap="off"
-    />
-    <div
-      aria-hidden="true"
-      class="ace_gutter"
-    >
-      <div
-        class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-      />
-    </div>
-    <div
-      class="ace_scroller"
-    >
-      <div
-        class="ace_content"
-      >
-        <div
-          class="ace_layer ace_print-margin-layer"
-        >
-          <div
-            class="ace_print-margin"
-            style="left: 4px; visibility: visible;"
-          />
-        </div>
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
-        />
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_cursor-layer ace_hidden-cursors"
-        >
-          <div
-            class="ace_cursor"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-v"
-      style="display: none; width: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="width: 20px;"
-      />
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-h"
-      style="display: none; height: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="height: 20px;"
-      />
-    </div>
-    <div
-      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-    >
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      />
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
-<div
-  class="euiCodeEditorWrapper"
-  data-test-subj="codeEditorContainer"
->
-  <button
-    class="euiCodeEditorKeyboardHint"
-    data-test-subj="codeEditorHint"
-    id="generated-id_codeEditor"
-  >
-    <p
-      class="euiText"
-    >
-      Press Enter to start interacting with the code.
-    </p>
-    <p
-      class="euiText"
-    >
-      When you're done, press Escape to stop interacting with the code.
-    </p>
-  </button>
-  <div
-    class=" ace_editor ace-tm"
-    id="generated-id"
-    style="width: 500px; height: 500px;"
-  >
-    <textarea
-      autocapitalize="off"
-      autocorrect="off"
-      class="ace_text-input"
-      spellcheck="false"
-      style="opacity: 0;"
-      tabindex="-1"
-      wrap="off"
-    />
-    <div
-      aria-hidden="true"
-      class="ace_gutter"
-    >
-      <div
-        class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-        style="display: none;"
-      />
-    </div>
-    <div
-      class="ace_scroller"
-    >
-      <div
-        class="ace_content"
-      >
-        <div
-          class="ace_layer ace_print-margin-layer"
-        >
-          <div
-            class="ace_print-margin"
-            style="left: 4px; visibility: visible;"
-          />
-        </div>
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
-        />
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_cursor-layer ace_hidden-cursors"
-        >
-          <div
-            class="ace_cursor"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-v"
-      style="display: none; width: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="width: 20px;"
-      />
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-h"
-      style="display: none; height: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="height: 20px;"
-      />
-    </div>
-    <div
-      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-    >
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      />
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiCodeEditor props theme renders terminal theme 1`] = `
-<div
-  class="euiCodeEditorWrapper"
-  data-test-subj="codeEditorContainer"
->
-  <button
-    class="euiCodeEditorKeyboardHint"
-    data-test-subj="codeEditorHint"
-    id="generated-id_codeEditor"
-  >
-    <p
-      class="euiText"
-    >
-      Press Enter to start editing.
-    </p>
-    <p
-      class="euiText"
-    >
-      When you're done, press Escape to stop editing.
-    </p>
-  </button>
-  <div
-    class=" ace_editor ace-tm"
-    id="generated-id"
-    style="width: 500px; height: 500px;"
-  >
-    <textarea
-      autocapitalize="off"
-      autocorrect="off"
-      class="ace_text-input"
-      spellcheck="false"
-      style="opacity: 0;"
-      tabindex="-1"
-      wrap="off"
-    />
-    <div
-      aria-hidden="true"
-      class="ace_gutter"
-    >
-      <div
-        class="ace_layer ace_gutter-layer ace_folding-enabled"
-      />
-      <div
-        class="ace_gutter-active-line"
-      />
-    </div>
-    <div
-      class="ace_scroller"
-    >
-      <div
-        class="ace_content"
-      >
-        <div
-          class="ace_layer ace_print-margin-layer"
-        >
-          <div
-            class="ace_print-margin"
-            style="left: 4px; visibility: visible;"
-          />
-        </div>
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_text-layer"
-          style="padding: 0px 4px;"
-        />
-        <div
-          class="ace_layer ace_marker-layer"
-        />
-        <div
-          class="ace_layer ace_cursor-layer ace_hidden-cursors"
-        >
-          <div
-            class="ace_cursor"
-          />
-        </div>
-      </div>
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-v"
-      style="display: none; width: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="width: 20px;"
-      />
-    </div>
-    <div
-      class="ace_scrollbar ace_scrollbar-h"
-      style="display: none; height: 20px;"
-    >
-      <div
-        class="ace_scrollbar-inner"
-        style="height: 20px;"
-      />
-    </div>
-    <div
-      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-    >
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      />
-      <div
-        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-      >
-        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss b/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
deleted file mode 100644
index a3acf6b46e1de..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/_code_editor.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.euiCodeEditorWrapper {
-  position: relative;
-
-  .ace_hidden-cursors {
-    opacity: 0;
-  }
-
-  &.euiCodeEditorWrapper-isEditing {
-    .ace_hidden-cursors {
-      opacity: 1;
-    }
-  }
-}
-
-.euiCodeEditorKeyboardHint {
-  position: absolute;
-  top: 0;
-  left: 0;
-  background: transparentize($euiColorGhost, .3);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  opacity: 0;
-  cursor: pointer;
-  height: 100%;
-  width: 100%;
-
-  &:focus {
-    opacity: 1;
-    border: 2px solid $euiColorPrimary;
-    z-index: $euiZLevel1;
-  }
-
-  &.euiCodeEditorKeyboardHint-isInactive {
-    display: none;
-  }
-}
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/_index.scss b/src/plugins/es_ui_shared/public/components/code_editor/_index.scss
deleted file mode 100644
index e68320413af86..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'code_editor';
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
deleted file mode 100644
index 9092d94936ffe..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.test.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { mount, ReactWrapper } from 'enzyme';
-import EuiCodeEditor from './code_editor';
-import { keys } from '@elastic/eui';
-import { findTestSubject, requiredProps, takeMountedSnapshot } from '@elastic/eui/lib/test';
-
-describe('EuiCodeEditor', () => {
-  test('is rendered', () => {
-    const component = mount(<EuiCodeEditor {...requiredProps} />);
-    expect(takeMountedSnapshot(component)).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    describe('isReadOnly', () => {
-      test('renders alternate hint text', () => {
-        const component = mount(<EuiCodeEditor isReadOnly />);
-        expect(takeMountedSnapshot(component)).toMatchSnapshot();
-      });
-    });
-
-    describe('theme', () => {
-      test('renders terminal theme', () => {
-        const component = mount(<EuiCodeEditor theme="terminal" />);
-        expect(takeMountedSnapshot(component)).toMatchSnapshot();
-      });
-    });
-
-    describe('aria attributes', () => {
-      test('allows setting aria-labelledby on textbox', () => {
-        const component = mount(<EuiCodeEditor aria-labelledby="labelledbyid" />);
-        expect(takeMountedSnapshot(component)).toMatchSnapshot();
-      });
-
-      test('allows setting aria-describedby on textbox', () => {
-        const component = mount(<EuiCodeEditor aria-describedby="describedbyid" />);
-        expect(takeMountedSnapshot(component)).toMatchSnapshot();
-      });
-    });
-  });
-
-  describe('behavior', () => {
-    let component: ReactWrapper;
-
-    beforeEach(() => {
-      // Addresses problems with attaching to document.body.
-      // https://meganesulli.com/blog/managing-focus-with-react-and-jest/
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-
-      // We need to manually attach the element to document.body to assert against
-      // document.activeElement in our focus behavior tests, below.
-      component = mount(<EuiCodeEditor />, { attachTo: container });
-    });
-
-    afterEach(() => {
-      // We need to clean up after ourselves per https://github.com/enzymejs/enzyme/issues/2337.
-      if (component) {
-        component.unmount();
-      }
-    });
-
-    describe('hint element', () => {
-      test('should be tabable', () => {
-        const hint = findTestSubject(component, 'codeEditorHint').getDOMNode();
-        expect(hint).toMatchSnapshot();
-      });
-
-      test('should be disabled when the ui ace box gains focus', () => {
-        const hint = findTestSubject(component, 'codeEditorHint');
-        hint.simulate('keyup', { key: keys.ENTER });
-        expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).toMatchSnapshot();
-      });
-
-      test('should be enabled when the ui ace box loses focus', () => {
-        const hint = findTestSubject(component, 'codeEditorHint');
-        hint.simulate('keyup', { key: keys.ENTER });
-        // @ts-ignore onBlurAce is known to exist and its params are only passed through to the onBlur callback
-        component.instance().onBlurAce();
-        expect(findTestSubject(component, 'codeEditorHint').getDOMNode()).toMatchSnapshot();
-      });
-    });
-
-    describe('interaction', () => {
-      test('bluring the ace textbox should call a passed onBlur prop', () => {
-        const blurSpy = jest.fn().mockName('blurSpy');
-        const el = mount(<EuiCodeEditor onBlur={blurSpy} />);
-        // @ts-ignore onBlurAce is known to exist and its params are only passed through to the onBlur callback
-        el.instance().onBlurAce();
-        expect(blurSpy).toHaveBeenCalled();
-      });
-
-      test('pressing escape in ace textbox will enable overlay', () => {
-        // We cannot simulate the `commands` path, but this interaction still
-        // serves as a fallback in cases where `commands` is unavailable.
-        // @ts-ignore onFocusAce is known to exist
-        component.instance().onFocusAce();
-        // @ts-ignore onKeydownAce is known to exist and its params' values are unimportant
-        component.instance().onKeydownAce({
-          preventDefault: () => {},
-          stopPropagation: () => {},
-          key: keys.ESCAPE,
-        });
-        const hint = findTestSubject(component, 'codeEditorHint').getDOMNode();
-        expect(hint).toBe(document.activeElement);
-      });
-    });
-  });
-});
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx b/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
deleted file mode 100644
index d5ed974d0e40b..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/code_editor.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, { Component, AriaAttributes } from 'react';
-import classNames from 'classnames';
-import AceEditor, { IAceEditorProps } from 'react-ace';
-import { EuiI18n, htmlIdGenerator, keys } from '@elastic/eui';
-
-import './_index.scss';
-
-/**
- * Wraps Object.keys with proper typescript definition of the resulting array
- */
-function keysOf<T, K extends keyof T>(obj: T): K[] {
-  return Object.keys(obj) as K[];
-}
-
-const DEFAULT_MODE = 'text';
-const DEFAULT_THEME = 'textmate';
-
-function setOrRemoveAttribute(
-  element: HTMLTextAreaElement,
-  attributeName: SupportedAriaAttribute,
-  value: SupportedAriaAttributes[SupportedAriaAttribute]
-) {
-  if (value === null || value === undefined) {
-    element.removeAttribute(attributeName);
-  } else {
-    element.setAttribute(attributeName, value);
-  }
-}
-
-type SupportedAriaAttribute = 'aria-label' | 'aria-labelledby' | 'aria-describedby';
-type SupportedAriaAttributes = Pick<AriaAttributes, SupportedAriaAttribute>;
-
-export interface EuiCodeEditorProps extends SupportedAriaAttributes, Omit<IAceEditorProps, 'mode'> {
-  width?: string;
-  height?: string;
-  onBlur?: IAceEditorProps['onBlur'];
-  onFocus?: IAceEditorProps['onFocus'];
-  isReadOnly?: boolean;
-  setOptions?: IAceEditorProps['setOptions'];
-  cursorStart?: number;
-  'data-test-subj'?: string;
-  /**
-   * Select the `brace` theme
-   * The matching theme file must also be imported from `brace` (e.g., `import 'brace/theme/github';`)
-   */
-  theme?: IAceEditorProps['theme'];
-
-  /**
-   * Use string for a built-in mode or object for a custom mode
-   */
-  mode?: IAceEditorProps['mode'] | object;
-  id?: string;
-
-  onAceEditorRef?: (editor: AceEditor | null) => void;
-}
-
-export interface EuiCodeEditorState {
-  isHintActive: boolean;
-  isEditing: boolean;
-  name: string;
-}
-
-class EuiCodeEditor extends Component<EuiCodeEditorProps, EuiCodeEditorState> {
-  static defaultProps = {
-    setOptions: {
-      showLineNumbers: false,
-      tabSize: 2,
-    },
-  };
-
-  state: EuiCodeEditorState = {
-    isHintActive: true,
-    isEditing: false,
-    name: htmlIdGenerator()(),
-  };
-
-  constructor(props: EuiCodeEditorProps) {
-    super(props);
-  }
-
-  idGenerator = htmlIdGenerator();
-  aceEditor: AceEditor | null = null;
-  editorHint: HTMLButtonElement | null = null;
-
-  aceEditorRef = (aceEditor: AceEditor | null) => {
-    if (aceEditor) {
-      this.aceEditor = aceEditor;
-      const textbox = aceEditor.editor.textInput.getElement() as HTMLTextAreaElement;
-      textbox.tabIndex = -1;
-      textbox.addEventListener('keydown', this.onKeydownAce);
-      setOrRemoveAttribute(textbox, 'aria-label', this.props['aria-label']);
-      setOrRemoveAttribute(textbox, 'aria-labelledby', this.props['aria-labelledby']);
-      setOrRemoveAttribute(textbox, 'aria-describedby', this.props['aria-describedby']);
-    }
-    this.props.onAceEditorRef?.(aceEditor);
-  };
-
-  onEscToExit = () => {
-    this.stopEditing();
-    if (this.editorHint) {
-      this.editorHint.focus();
-    }
-  };
-
-  onKeydownAce = (event: KeyboardEvent) => {
-    if (event.key === keys.ESCAPE) {
-      event.preventDefault();
-      event.stopPropagation();
-      // Handles exiting edit mode when `isReadOnly` is set.
-      // Other 'esc' cases handled by `stopEditingOnEsc` command.
-      // Would run after `stopEditingOnEsc`.
-      if (this.aceEditor !== null && !this.aceEditor.editor.completer && this.state.isEditing) {
-        this.onEscToExit();
-      }
-    }
-  };
-
-  onFocusAce: IAceEditorProps['onFocus'] = (event, editor) => {
-    this.setState({
-      isEditing: true,
-    });
-    if (this.props.onFocus) {
-      this.props.onFocus(event, editor);
-    }
-  };
-
-  onBlurAce: IAceEditorProps['onBlur'] = (event, editor) => {
-    this.stopEditing();
-    if (this.props.onBlur) {
-      this.props.onBlur(event, editor);
-    }
-  };
-
-  startEditing = () => {
-    this.setState({
-      isHintActive: false,
-    });
-    if (this.aceEditor !== null) {
-      this.aceEditor.editor.textInput.focus();
-    }
-  };
-
-  stopEditing() {
-    this.setState({
-      isHintActive: true,
-      isEditing: false,
-    });
-  }
-
-  isCustomMode() {
-    return typeof this.props.mode === 'object';
-  }
-
-  setCustomMode() {
-    if (this.aceEditor !== null) {
-      this.aceEditor.editor.getSession().setMode(this.props.mode);
-    }
-  }
-
-  componentDidMount() {
-    if (this.isCustomMode()) {
-      this.setCustomMode();
-    }
-    const { isReadOnly, id } = this.props;
-
-    const textareaProps: {
-      id?: string;
-      readOnly?: boolean;
-    } = { id, readOnly: isReadOnly };
-
-    const el = document.getElementById(this.state.name);
-    if (el) {
-      const textarea = el.querySelector('textarea');
-      if (textarea)
-        keysOf(textareaProps).forEach((key) => {
-          if (textareaProps[key]) textarea.setAttribute(`${key}`, textareaProps[key]!.toString());
-        });
-    }
-  }
-
-  componentDidUpdate(prevProps: EuiCodeEditorProps) {
-    if (this.props.mode !== prevProps.mode && this.isCustomMode()) {
-      this.setCustomMode();
-    }
-  }
-
-  render() {
-    const {
-      width,
-      height,
-      onBlur,
-      isReadOnly,
-      setOptions,
-      cursorStart,
-      mode = DEFAULT_MODE,
-      'data-test-subj': dataTestSubj = 'codeEditorContainer',
-      theme = DEFAULT_THEME,
-      commands = [],
-      ...rest
-    } = this.props;
-
-    const classes = classNames('euiCodeEditorWrapper', {
-      'euiCodeEditorWrapper-isEditing': this.state.isEditing,
-    });
-
-    const promptClasses = classNames('euiCodeEditorKeyboardHint', {
-      'euiCodeEditorKeyboardHint-isInactive': !this.state.isHintActive,
-    });
-
-    let filteredCursorStart;
-
-    const options: IAceEditorProps['setOptions'] = { ...setOptions };
-
-    if (isReadOnly) {
-      // Put the cursor at the beginning of the editor, so that it doesn't look like
-      // a prompt to begin typing.
-      filteredCursorStart = -1;
-
-      Object.assign(options, {
-        readOnly: true,
-        highlightActiveLine: false,
-        highlightGutterLine: false,
-      });
-    } else {
-      filteredCursorStart = cursorStart;
-    }
-
-    const prompt = (
-      <button
-        className={promptClasses}
-        id={this.idGenerator('codeEditor')}
-        ref={(hint) => {
-          this.editorHint = hint;
-        }}
-        onClick={this.startEditing}
-        data-test-subj="codeEditorHint"
-      >
-        <p className="euiText">
-          {isReadOnly ? (
-            <EuiI18n
-              token="euiCodeEditor.startInteracting"
-              default="Press Enter to start interacting with the code."
-            />
-          ) : (
-            <EuiI18n token="euiCodeEditor.startEditing" default="Press Enter to start editing." />
-          )}
-        </p>
-
-        <p className="euiText">
-          {isReadOnly ? (
-            <EuiI18n
-              token="euiCodeEditor.stopInteracting"
-              default="When you're done, press Escape to stop interacting with the code."
-            />
-          ) : (
-            <EuiI18n
-              token="euiCodeEditor.stopEditing"
-              default="When you're done, press Escape to stop editing."
-            />
-          )}
-        </p>
-      </button>
-    );
-
-    return (
-      <div className={classes} style={{ width, height }} data-test-subj={dataTestSubj}>
-        {prompt}
-
-        <AceEditor
-          // Setting a default, existing `mode` is necessary to properly initialize the editor
-          // prior to dynamically setting a custom mode (https://github.com/elastic/eui/pull/2616)
-          mode={this.isCustomMode() ? DEFAULT_MODE : (mode as string)} // https://github.com/securingsincity/react-ace/pull/771
-          name={this.state.name}
-          theme={theme}
-          ref={this.aceEditorRef}
-          width={width}
-          height={height}
-          onFocus={this.onFocusAce}
-          onBlur={this.onBlurAce}
-          setOptions={options}
-          editorProps={{
-            $blockScrolling: Infinity,
-          }}
-          cursorStart={filteredCursorStart}
-          commands={[
-            // Handles exiting edit mode in all cases except `isReadOnly`
-            // Runs before `onKeydownAce`.
-            {
-              name: 'stopEditingOnEsc',
-              bindKey: { win: 'Esc', mac: 'Esc' },
-              exec: this.onEscToExit,
-            },
-            ...commands,
-          ]}
-          {...rest}
-        />
-      </div>
-    );
-  }
-}
-
-// Needed for React.lazy
-// eslint-disable-next-line import/no-default-export
-export default EuiCodeEditor;
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/index.tsx b/src/plugins/es_ui_shared/public/components/code_editor/index.tsx
deleted file mode 100644
index eb5fc9e36733a..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/index.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { EuiSkeletonTextProps, EuiSkeletonText } from '@elastic/eui';
-import type { EuiCodeEditorProps } from './code_editor';
-
-const Placeholder = ({ height }: { height?: string }) => {
-  const numericalHeight = height ? parseInt(height, 10) : 0;
-  // The height of one EuiSkeletonText line is 24px.
-  const lineHeight = 24;
-  const calculatedLineCount =
-    numericalHeight < lineHeight ? 1 : Math.floor(numericalHeight / lineHeight);
-  const lines = Math.min(10, calculatedLineCount);
-
-  return <EuiSkeletonText lines={lines as EuiSkeletonTextProps['lines']} />;
-};
-
-const LazyEuiCodeEditor = React.lazy(() => import('./code_editor'));
-
-export const EuiCodeEditor = (props: EuiCodeEditorProps) => (
-  <React.Suspense fallback={<Placeholder height={props.height} />}>
-    <LazyEuiCodeEditor {...props} />
-  </React.Suspense>
-);
-
-export type { EuiCodeEditorProps } from './code_editor';
diff --git a/src/plugins/es_ui_shared/public/components/code_editor/jest_mock.tsx b/src/plugins/es_ui_shared/public/components/code_editor/jest_mock.tsx
deleted file mode 100644
index 95a0ee3237a48..0000000000000
--- a/src/plugins/es_ui_shared/public/components/code_editor/jest_mock.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-// NOTE: Import this file for its side-effects. You must import it before the code that it mocks
-// is imported. Typically this means just importing above your other imports.
-// See https://jestjs.io/docs/manual-mocks for more info.
-
-// This mocks any direct imports of EuiCodeEditor, e.g. by JsonEditor.
-jest.mock('.', () => {
-  const original = jest.requireActual('.');
-
-  return {
-    ...original,
-    // Mock EuiCodeEditor, which uses React Ace under the hood.
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
-        data-currentvalue={props.value}
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
-  };
-});
diff --git a/src/plugins/es_ui_shared/public/index.ts b/src/plugins/es_ui_shared/public/index.ts
index 8a861ac993170..3eda98be1c276 100644
--- a/src/plugins/es_ui_shared/public/index.ts
+++ b/src/plugins/es_ui_shared/public/index.ts
@@ -21,8 +21,6 @@ export { JsonEditor } from './components/json_editor';
 export { PageLoading } from './components/page_loading';
 export { SectionLoading } from './components/section_loading';
 
-export type { EuiCodeEditorProps } from './components/code_editor';
-export { EuiCodeEditor } from './components/code_editor';
 export type { Frequency } from './components/cron_editor';
 export { CronEditor } from './components/cron_editor';
 export { ViewApiRequestFlyout } from './components/view_api_request_flyout';
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/json_editor/json_editor.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/json_editor/json_editor.tsx
index 1bed983561240..95c7c47af1e01 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/json_editor/json_editor.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/json_editor/json_editor.tsx
@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import { CodeEditor } from '@kbn/kibana-react-plugin/public';
 import React, { FC } from 'react';
 
-import { expandLiteralStrings, XJsonMode, EuiCodeEditorProps } from '../../../shared_imports';
+import { CodeEditor, type CodeEditorProps } from '@kbn/kibana-react-plugin/public';
+import { expandLiteralStrings, XJsonMode } from '../../../shared_imports';
 
 export const EDITOR_MODE = { TEXT: 'text', JSON: 'json', XJSON: new XJsonMode() };
 
@@ -18,7 +18,7 @@ interface JobEditorProps {
   width?: string;
   mode?: typeof EDITOR_MODE[keyof typeof EDITOR_MODE];
   readOnly?: boolean;
-  onChange?: EuiCodeEditorProps['onChange'];
+  onChange?: CodeEditorProps['onChange'];
 }
 export const JsonEditor: FC<JobEditorProps> = ({
   value,
diff --git a/x-pack/plugins/data_visualizer/public/application/shared_imports.ts b/x-pack/plugins/data_visualizer/public/application/shared_imports.ts
index 33a84886aaaec..36555ff823c45 100644
--- a/x-pack/plugins/data_visualizer/public/application/shared_imports.ts
+++ b/x-pack/plugins/data_visualizer/public/application/shared_imports.ts
@@ -5,9 +5,6 @@
  * 2.0.
  */
 
-export { EuiCodeEditor } from '@kbn/es-ui-shared-plugin/public';
-export type { EuiCodeEditorProps } from '@kbn/es-ui-shared-plugin/public';
-
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
 const { collapseLiteralStrings, expandLiteralStrings } = XJson;
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
index 829b997975299..b81c4ce59ea3c 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_clone.test.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '../../../test/global_mocks';
 import { API_BASE_PATH } from '../../../common/constants';
 import { getComposableTemplate } from '../../../test/fixtures';
 import { setupEnvironment } from '../helpers';
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
index 3b86ea48397bb..8fb60ec708fd0 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_create.test.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '../../../test/global_mocks';
 import { API_BASE_PATH } from '../../../common/constants';
 import { setupEnvironment } from '../helpers';
 
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
index 6d1224abf3529..359f1472aec62 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/index_template_wizard/template_edit.test.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '../../../test/global_mocks';
 import * as fixtures from '../../../test/fixtures';
 import { API_BASE_PATH } from '../../../common/constants';
 import { setupEnvironment, kibanaVersion } from '../helpers';
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx
index 5f7dac7431d93..a8ef1278f4d73 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_create.test.tsx
@@ -8,8 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
-import '../../../../../../test/global_mocks';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 import { setupEnvironment } from './helpers';
 import { API_BASE_PATH } from './helpers/constants';
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx
index 68c6cfc290c77..5b25b9a816070 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_edit.test.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '../../../../../../test/global_mocks';
 import { breadcrumbService, IndexManagementBreadcrumb } from '../../../../services/breadcrumbs';
 import { setupEnvironment } from './helpers';
 import { API_BASE_PATH } from './helpers/constants';
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx
index c2cefc3062237..db4ebb0d5bf2f 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/setup_environment.tsx
@@ -8,7 +8,6 @@
 import React, { ComponentType, MemoExoticComponent } from 'react';
 import SemVer from 'semver/classes/semver';
 
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 import { GlobalFlyout } from '@kbn/es-ui-shared-plugin/public';
 import { docLinksServiceMock, uiSettingsServiceMock } from '@kbn/core/public/mocks';
 import { MAJOR_VERSION } from '../../../../../../../common';
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
index 0594f379d96e1..0832332764875 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
@@ -9,7 +9,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { uiSettingsServiceMock } from '@kbn/core/public/mocks';
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 
 jest.mock('lodash', () => {
   const original = jest.requireActual('lodash');
diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
index 3748a94578d48..1f6311e68b100 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
@@ -224,7 +224,6 @@ export const LoadMappingsProvider = ({ onJson, esNodesPlugins, children }: Props
           maxWidth={600}
         >
           {view === 'json' ? (
-            // The CSS override for the EuiCodeEditor requires a parent .application css class
             <div className="application">
               <EuiText color="subdued">
                 <FormattedMessage
diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts
index 8ed089efb34a6..096fc5eeb798d 100644
--- a/x-pack/plugins/index_management/public/shared_imports.ts
+++ b/x-pack/plugins/index_management/public/shared_imports.ts
@@ -25,7 +25,6 @@ export {
   PageLoading,
   PageError,
   SectionLoading,
-  EuiCodeEditor,
 } from '@kbn/es-ui-shared-plugin/public';
 
 export type {
diff --git a/x-pack/plugins/index_management/test/global_mocks.tsx b/x-pack/plugins/index_management/test/global_mocks.tsx
deleted file mode 100644
index 5fe9f3c28c301..0000000000000
--- a/x-pack/plugins/index_management/test/global_mocks.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-// NOTE: Import this file for its side-effects. You must import it before the code that it mocks
-// is imported. Typically this means just importing above your other imports.
-// See https://jestjs.io/docs/manual-mocks for more info.
-
-jest.mock('@kbn/es-ui-shared-plugin/public', () => {
-  const original = jest.requireActual('@kbn/es-ui-shared-plugin/public');
-
-  return {
-    ...original,
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj={props['data-test-subj'] || 'mockCodeEditor'}
-        data-currentvalue={props.value}
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
-  };
-});
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
index 8d7ed011b60cd..71c67fe7438a6 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_clone.test.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { setupEnvironment, pageHelpers } from './helpers';
@@ -14,23 +13,6 @@ import { PIPELINE_TO_CLONE, PipelinesCloneTestBed } from './helpers/pipelines_cl
 
 const { setup } = pageHelpers.pipelinesClone;
 
-jest.mock('@elastic/eui', () => {
-  const original = jest.requireActual('@elastic/eui');
-
-  return {
-    ...original,
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj={props['data-test-subj']}
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
-  };
-});
-
 describe('<PipelinesClone />', () => {
   let testBed: PipelinesCloneTestBed;
 
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
index d17d5ab80e307..f9b10a7d46050 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_create.test.tsx
@@ -8,7 +8,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 import { setupEnvironment, pageHelpers } from './helpers';
 import { API_BASE_PATH } from '../../common/constants';
 import { PipelinesCreateTestBed } from './helpers/pipelines_create.helpers';
@@ -34,23 +33,6 @@ jest.mock('@kbn/kibana-react-plugin/public', () => {
   };
 });
 
-jest.mock('@elastic/eui', () => {
-  const original = jest.requireActual('@elastic/eui');
-
-  return {
-    ...original,
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj={props['data-test-subj']}
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
-  };
-});
-
 describe('<PipelinesCreate />', () => {
   let testBed: PipelinesCreateTestBed;
 
diff --git a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
index 04ea1e5928a19..eff4a815ac265 100644
--- a/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/__jest__/client_integration/ingest_pipelines_edit.test.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import React from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { setupEnvironment, pageHelpers } from './helpers';
@@ -14,23 +13,6 @@ import { PIPELINE_TO_EDIT, PipelinesEditTestBed } from './helpers/pipelines_edit
 
 const { setup } = pageHelpers.pipelinesEdit;
 
-jest.mock('@elastic/eui', () => {
-  const original = jest.requireActual('@elastic/eui');
-
-  return {
-    ...original,
-    // Mocking EuiCodeEditor, which uses React Ace under the hood
-    EuiCodeEditor: (props: any) => (
-      <input
-        data-test-subj={props['data-test-subj']}
-        onChange={(syntheticEvent: any) => {
-          props.onChange(syntheticEvent.jsonString);
-        }}
-      />
-    ),
-  };
-});
-
 describe('<PipelinesEdit />', () => {
   let testBed: PipelinesEditTestBed;
 
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx
index e5384bdf14823..7636cfe0f886b 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/test_pipeline.helpers.tsx
@@ -14,7 +14,6 @@ import { HttpSetup } from '@kbn/core/public';
 import { registerTestBed, TestBed } from '@kbn/test-jest-helpers';
 import { stubWebWorker } from '@kbn/test-jest-helpers';
 
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 import { uiMetricService, apiService } from '../../../services';
 import { Props } from '..';
 import { initHttpRequests } from './http_requests.helpers';
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/load_from_json/modal_provider.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/load_from_json/modal_provider.test.tsx
index 9af5940e326d0..276acf255f694 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/load_from_json/modal_provider.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/load_from_json/modal_provider.test.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import '@kbn/es-ui-shared-plugin/public/components/code_editor/jest_mock';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
 import { ModalProvider, OnDoneLoadJsonHandler } from './modal_provider';
 
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
index c724abb239dc0..ad04bd06dc331 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/ml_job_editor/ml_job_editor.tsx
@@ -7,8 +7,8 @@
 
 import React, { FC } from 'react';
 import { monaco, XJsonLang } from '@kbn/monaco';
-import { CodeEditor } from '@kbn/kibana-react-plugin/public';
-import { type EuiCodeEditorProps, XJson } from '@kbn/es-ui-shared-plugin/public';
+import { CodeEditor, type CodeEditorProps } from '@kbn/kibana-react-plugin/public';
+import { XJson } from '@kbn/es-ui-shared-plugin/public';
 
 const { expandLiteralStrings } = XJson;
 
@@ -20,7 +20,7 @@ interface MlJobEditorProps {
   width?: string;
   mode?: typeof ML_EDITOR_MODE[keyof typeof ML_EDITOR_MODE];
   readOnly?: boolean;
-  onChange?: EuiCodeEditorProps['onChange'];
+  onChange?: CodeEditorProps['onChange'];
   'data-test-subj'?: string;
   schema?: object;
 }
diff --git a/x-pack/plugins/osquery/public/shared_imports.ts b/x-pack/plugins/osquery/public/shared_imports.ts
index a1855d0ff0bcd..83d7cd8d45bb4 100644
--- a/x-pack/plugins/osquery/public/shared_imports.ts
+++ b/x-pack/plugins/osquery/public/shared_imports.ts
@@ -45,6 +45,4 @@ export {
 export { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers';
 export type { ERROR_CODE } from '@kbn/es-ui-shared-plugin/static/forms/helpers/field_validators/types';
 
-export { EuiCodeEditor } from '@kbn/es-ui-shared-plugin/public';
-export type { EuiCodeEditorProps } from '@kbn/es-ui-shared-plugin/public';
 export { useUiSetting$, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
diff --git a/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.test.js b/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.test.js
index dc38bd3af9afd..629099aca0f84 100644
--- a/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.test.js
+++ b/x-pack/plugins/rollup/public/crud_app/sections/job_list/detail_panel/detail_panel.test.js
@@ -321,9 +321,9 @@ describe('<DetailPanel />', () => {
       const { find } = initTestBed({ panelType });
       const tabContent = find('rollupJobDetailTabContent');
 
-      it('should render the "EuiCodeEditor" with the job "json" data', () => {
-        const euiCodeEditor = tabContent.find('[data-test-subj="jsonCodeBlock"]').at(0);
-        expect(JSON.parse(euiCodeEditor.text())).toEqual(defaultJob.json);
+      it('should render the "CodeEditor" with the job "json" data', () => {
+        const codeEditor = tabContent.find('[data-test-subj="jsonCodeBlock"]').at(0);
+        expect(JSON.parse(codeEditor.text())).toEqual(defaultJob.json);
       });
     });
   });

From fc8529b95cc24725100495ca919fedda58070b8f Mon Sep 17 00:00:00 2001
From: Ignacio Rivas <ignacio.rivas@elastic.co>
Date: Tue, 24 Oct 2023 10:15:41 +0200
Subject: [PATCH 2/3] commit with @elastic email


From f1ad9c04d4fb387de6a8e294bdf0b33e5457deb8 Mon Sep 17 00:00:00 2001
From: Ignacio Rivas <rivasign@gmail.com>
Date: Wed, 25 Oct 2023 16:07:03 +0200
Subject: [PATCH 3/3] Remove unnecessary div

---
 .../components/load_mappings/load_mappings_provider.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
index 1f6311e68b100..e3c5984a44f63 100644
--- a/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
@@ -224,7 +224,7 @@ export const LoadMappingsProvider = ({ onJson, esNodesPlugins, children }: Props
           maxWidth={600}
         >
           {view === 'json' ? (
-            <div className="application">
+            <>
               <EuiText color="subdued">
                 <FormattedMessage
                   id="xpack.idxMgmt.mappingsEditor.loadJsonModal.jsonEditorHelpText"
@@ -245,7 +245,7 @@ export const LoadMappingsProvider = ({ onJson, esNodesPlugins, children }: Props
                   height: '450px',
                 }}
               />
-            </div>
+            </>
           ) : (
             <>
               <EuiCallOut