diff --git a/.buildkite/ftr_platform_stateful_configs.yml b/.buildkite/ftr_platform_stateful_configs.yml
index fc46fa24f257f..02d6355c212bd 100644
--- a/.buildkite/ftr_platform_stateful_configs.yml
+++ b/.buildkite/ftr_platform_stateful_configs.yml
@@ -44,8 +44,7 @@ enabled:
   - test/api_integration/config.js
   - test/examples/config.js
   - test/functional/apps/bundles/config.ts
-  - test/functional/apps/console/monaco/config.ts
-  - test/functional/apps/console/ace/config.ts
+  - test/functional/apps/console/config.ts
   - test/functional/apps/context/config.ts
   - test/functional/apps/dashboard_elements/controls/common/config.ts
   - test/functional/apps/dashboard_elements/controls/options_list/config.ts
diff --git a/.buildkite/scripts/steps/storybooks/build_and_upload.ts b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
index 96208bc02b310..148742c2ae046 100644
--- a/.buildkite/scripts/steps/storybooks/build_and_upload.ts
+++ b/.buildkite/scripts/steps/storybooks/build_and_upload.ts
@@ -22,7 +22,6 @@ const STORYBOOKS = [
   'coloring',
   'chart_icons',
   'content_management_examples',
-  'controls',
   'custom_integrations',
   'dashboard_enhanced',
   'dashboard',
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 457458ec5b1c6..76dccf659fb54 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1759,7 +1759,7 @@ x-pack/plugins/security_solution/server/lib/security_integrations @elastic/secur
 /x-pack/plugins/monitoring/**/*.scss @elastic/observability-design
 
 # Ent. Search design
-/x-pack/plugins/enterprise_search/**/*.scss @elastic/ent-search-design
+/x-pack/plugins/enterprise_search/**/*.scss @elastic/search-design
 
 # Security design
 /x-pack/plugins/endpoint/**/*.scss @elastic/security-design
diff --git a/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx b/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
index d98b3cb3a041b..cf5a76956c36d 100644
--- a/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
+++ b/examples/controls_example/public/app/control_group_renderer_examples/edit_example.tsx
@@ -9,6 +9,7 @@
 
 import { pickBy } from 'lodash';
 import React, { useEffect, useState } from 'react';
+
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -16,20 +17,24 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiPanel,
+  EuiSkeletonRectangle,
   EuiSpacer,
   EuiText,
   EuiTitle,
-  EuiSkeletonRectangle,
 } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '@kbn/controls-plugin/common';
-import { ControlGroupRuntimeState, ControlStateTransform } from '@kbn/controls-plugin/public';
+import {
+  OPTIONS_LIST_CONTROL,
+  RANGE_SLIDER_CONTROL,
+  type ControlGroupRuntimeState,
+} from '@kbn/controls-plugin/common';
 import {
   ACTION_DELETE_CONTROL,
   ACTION_EDIT_CONTROL,
   ControlGroupRenderer,
+  ControlGroupRendererApi,
+  type ControlStateTransform,
 } from '@kbn/controls-plugin/public';
-import { ControlGroupRendererApi } from '@kbn/controls-plugin/public';
+import { ViewMode } from '@kbn/embeddable-plugin/public';
 
 const INPUT_KEY = 'kbnControls:saveExample:input';
 
diff --git a/examples/controls_example/public/app/control_group_renderer_examples/search_example.tsx b/examples/controls_example/public/app/control_group_renderer_examples/search_example.tsx
index ed9a0403d449b..2325840c21927 100644
--- a/examples/controls_example/public/app/control_group_renderer_examples/search_example.tsx
+++ b/examples/controls_example/public/app/control_group_renderer_examples/search_example.tsx
@@ -8,12 +8,9 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 import { lastValueFrom } from 'rxjs';
-import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import type { DataView } from '@kbn/data-views-plugin/public';
-import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
-import type { Filter, Query, TimeRange } from '@kbn/es-query';
+import { v4 as uuidv4 } from 'uuid';
+
 import {
   EuiCallOut,
   EuiLoadingSpinner,
@@ -23,6 +20,11 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { ControlGroupRenderer, ControlGroupRendererApi } from '@kbn/controls-plugin/public';
+import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import type { Filter, Query, TimeRange } from '@kbn/es-query';
+import type { NavigationPublicPluginStart } from '@kbn/navigation-plugin/public';
+
 import { PLUGIN_ID } from '../../constants';
 
 interface Props {
diff --git a/examples/controls_example/public/app/react_control_example/runtime_control_group_state.ts b/examples/controls_example/public/app/react_control_example/runtime_control_group_state.ts
index a2f811a54253c..c5975a65842ba 100644
--- a/examples/controls_example/public/app/react_control_example/runtime_control_group_state.ts
+++ b/examples/controls_example/public/app/react_control_example/runtime_control_group_state.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ControlGroupRuntimeState } from '@kbn/controls-plugin/public';
+import { ControlGroupRuntimeState } from '@kbn/controls-plugin/common';
 
 const RUNTIME_STATE_SESSION_STORAGE_KEY =
   'kibana.examples.controls.reactControlExample.controlGroupRuntimeState';
diff --git a/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts b/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts
index e9e5b070db2bc..3d6487cdc7cba 100644
--- a/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts
+++ b/examples/controls_example/public/app/react_control_example/serialized_control_group_state.ts
@@ -7,8 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { SerializedPanelState } from '@kbn/presentation-containers';
-import { ControlGroupSerializedState } from '@kbn/controls-plugin/public';
+import type { SerializedPanelState } from '@kbn/presentation-containers';
+import type { ControlGroupSerializedState } from '@kbn/controls-plugin/common';
 import {
   OPTIONS_LIST_CONTROL,
   RANGE_SLIDER_CONTROL,
diff --git a/examples/discover_customization_examples/public/plugin.tsx b/examples/discover_customization_examples/public/plugin.tsx
index c80224422bed8..7c35287b843ba 100644
--- a/examples/discover_customization_examples/public/plugin.tsx
+++ b/examples/discover_customization_examples/public/plugin.tsx
@@ -28,7 +28,7 @@ import ReactDOM from 'react-dom';
 import useObservable from 'react-use/lib/useObservable';
 import { ControlGroupRendererApi, ControlGroupRenderer } from '@kbn/controls-plugin/public';
 import { css } from '@emotion/react';
-import type { ControlsPanels } from '@kbn/controls-plugin/common';
+import type { ControlPanelsState } from '@kbn/controls-plugin/common';
 import { Route, Router, Routes } from '@kbn/shared-ux-router';
 import { I18nProvider } from '@kbn/i18n-react';
 import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
@@ -357,7 +357,7 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
             }
 
             const stateSubscription = stateStorage
-              .change$<ControlsPanels>('controlPanels')
+              .change$<ControlPanelsState>('controlPanels')
               .subscribe((panels) =>
                 controlGroupAPI.updateInput({ initialChildControlState: panels ?? undefined })
               );
@@ -410,7 +410,7 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
               <ControlGroupRenderer
                 onApiAvailable={setControlGroupAPI}
                 getCreationOptions={async (initialState, builder) => {
-                  const panels = stateStorage.get<ControlsPanels>('controlPanels');
+                  const panels = stateStorage.get<ControlPanelsState>('controlPanels');
 
                   if (!panels) {
                     builder.addOptionsListControl(initialState, {
diff --git a/packages/kbn-esql-ast/src/pretty_print/__tests__/fixtures.ts b/packages/kbn-esql-ast/src/pretty_print/__tests__/fixtures.ts
index 43325fba10809..5e2113bbfb623 100644
--- a/packages/kbn-esql-ast/src/pretty_print/__tests__/fixtures.ts
+++ b/packages/kbn-esql-ast/src/pretty_print/__tests__/fixtures.ts
@@ -10,7 +10,7 @@
 export const query1 = `
 from kibana_sample_data_logs
 | EVAL timestamp=DATE_TRUNC(3 hour, @timestamp), status = CASE(    to_integer(response.keyword) >= 200 and to_integer(response.keyword) < 400, "HTTP 2xx and 3xx",    to_integer(response.keyword) >= 400 and to_integer(response.keyword) < 500, "HTTP 4xx",     "HTTP 5xx")
-| stats results = count(*) by \`Over time\` = BUCKET(timestamp, 50, ?t_start, ?t_end), status
+| stats results = count(*) by \`Over time\` = BUCKET(timestamp, 50, ?_tstart, ?_tend), status
 `;
 
 export const query2 = `
diff --git a/packages/kbn-esql-ast/src/walker/walker.test.ts b/packages/kbn-esql-ast/src/walker/walker.test.ts
index b51dcde38c3a5..eeae2ea142348 100644
--- a/packages/kbn-esql-ast/src/walker/walker.test.ts
+++ b/packages/kbn-esql-ast/src/walker/walker.test.ts
@@ -793,7 +793,7 @@ describe('Walker.params()', () => {
 
   test('can collect all params from grouping functions', () => {
     const query =
-      'ROW x=1, time=2024-07-10 | stats z = avg(x) by bucket(time, 20, ?t_start,?t_end)';
+      'ROW x=1, time=2024-07-10 | stats z = avg(x) by bucket(time, 20, ?_tstart,?_tend)';
     const { ast } = getAstAndSyntaxErrors(query);
     const params = Walker.params(ast);
 
@@ -802,13 +802,13 @@ describe('Walker.params()', () => {
         type: 'literal',
         literalType: 'param',
         paramType: 'named',
-        value: 't_start',
+        value: '_tstart',
       },
       {
         type: 'literal',
         literalType: 'param',
         paramType: 'named',
-        value: 't_end',
+        value: '_tend',
       },
     ]);
   });
diff --git a/packages/kbn-esql-utils/src/utils/get_initial_esql_query.test.ts b/packages/kbn-esql-utils/src/utils/get_initial_esql_query.test.ts
index a431a3c4ccf46..033849e8e3f6a 100644
--- a/packages/kbn-esql-utils/src/utils/get_initial_esql_query.test.ts
+++ b/packages/kbn-esql-utils/src/utils/get_initial_esql_query.test.ts
@@ -98,7 +98,7 @@ describe('getInitialESQLQuery', () => {
     ] as DataView['fields'];
     const dataView = getDataView('logs*', fields, '@custom_timestamp');
     expect(getInitialESQLQuery(dataView)).toBe(
-      'FROM logs* | WHERE @custom_timestamp >= ?t_start AND @custom_timestamp <= ?t_end | LIMIT 10'
+      'FROM logs* | WHERE @custom_timestamp >= ?_tstart AND @custom_timestamp <= ?_tend | LIMIT 10'
     );
   });
 });
diff --git a/packages/kbn-esql-utils/src/utils/get_initial_esql_query.ts b/packages/kbn-esql-utils/src/utils/get_initial_esql_query.ts
index b59358a857eda..d1feec759f36a 100644
--- a/packages/kbn-esql-utils/src/utils/get_initial_esql_query.ts
+++ b/packages/kbn-esql-utils/src/utils/get_initial_esql_query.ts
@@ -20,7 +20,7 @@ export function getInitialESQLQuery(dataView: DataView): string {
   const timeFieldName = dataView?.timeFieldName;
   const filterByTimeParams =
     !hasAtTimestampField && timeFieldName
-      ? ` | WHERE ${timeFieldName} >= ?t_start AND ${timeFieldName} <= ?t_end`
+      ? ` | WHERE ${timeFieldName} >= ?_tstart AND ${timeFieldName} <= ?_tend`
       : '';
   return `FROM ${dataView.getIndexPattern()}${filterByTimeParams} | LIMIT 10`;
 }
diff --git a/packages/kbn-esql-utils/src/utils/query_parsing_helpers.test.ts b/packages/kbn-esql-utils/src/utils/query_parsing_helpers.test.ts
index 47096f3421d76..5479d6982e46a 100644
--- a/packages/kbn-esql-utils/src/utils/query_parsing_helpers.test.ts
+++ b/packages/kbn-esql-utils/src/utils/query_parsing_helpers.test.ts
@@ -154,12 +154,12 @@ describe('esql query helpers', () => {
     });
 
     it('should return the time field if there is at least one time param', () => {
-      expect(getTimeFieldFromESQLQuery('from a | eval b = 1 | where time >= ?t_start')).toBe(
+      expect(getTimeFieldFromESQLQuery('from a | eval b = 1 | where time >= ?_tstart')).toBe(
         'time'
       );
     });
 
-    it('should return undefined if there is one named param but is not ?t_start or ?t_end', () => {
+    it('should return undefined if there is one named param but is not ?_tstart or ?_tend', () => {
       expect(
         getTimeFieldFromESQLQuery('from a | eval b = 1 | where time >= ?late')
       ).toBeUndefined();
@@ -167,14 +167,14 @@ describe('esql query helpers', () => {
 
     it('should return undefined if there is one named param but is used without a time field', () => {
       expect(
-        getTimeFieldFromESQLQuery('from a | eval b = DATE_TRUNC(1 day, ?t_start)')
+        getTimeFieldFromESQLQuery('from a | eval b = DATE_TRUNC(1 day, ?_tstart)')
       ).toBeUndefined();
     });
 
     it('should return the time field if there is at least one time param in the bucket function', () => {
       expect(
         getTimeFieldFromESQLQuery(
-          'from a | stats meow = avg(bytes) by bucket(event.timefield, 200, ?t_start, ?t_end)'
+          'from a | stats meow = avg(bytes) by bucket(event.timefield, 200, ?_tstart, ?_tend)'
         )
       ).toBe('event.timefield');
     });
diff --git a/packages/kbn-esql-utils/src/utils/query_parsing_helpers.ts b/packages/kbn-esql-utils/src/utils/query_parsing_helpers.ts
index 53ce6e06bb536..d61d8ea0329cc 100644
--- a/packages/kbn-esql-utils/src/utils/query_parsing_helpers.ts
+++ b/packages/kbn-esql-utils/src/utils/query_parsing_helpers.ts
@@ -77,7 +77,7 @@ export function removeDropCommandsFromESQLQuery(esql?: string): string {
 }
 
 /**
- * When the ?t_start and ?t_end params are used, we want to retrieve the timefield from the query.
+ * When the ?_tstart and ?_tend params are used, we want to retrieve the timefield from the query.
  * @param esql:string
  * @returns string
  */
@@ -91,7 +91,7 @@ export const getTimeFieldFromESQLQuery = (esql: string) => {
 
   const params = Walker.params(ast);
   const timeNamedParam = params.find(
-    (param) => param.value === 't_start' || param.value === 't_end'
+    (param) => param.value === '_tstart' || param.value === '_tend'
   );
   if (!timeNamedParam || !functions.length) {
     return undefined;
diff --git a/packages/kbn-esql-utils/src/utils/run_query.test.ts b/packages/kbn-esql-utils/src/utils/run_query.test.ts
index 18089f422483f..8618d078f5e06 100644
--- a/packages/kbn-esql-utils/src/utils/run_query.test.ts
+++ b/packages/kbn-esql-utils/src/utils/run_query.test.ts
@@ -19,26 +19,26 @@ describe('getStartEndParams', () => {
 
   it('should return an array with the start param if exists at the query', () => {
     const time = { from: 'Jul 5, 2024 @ 08:03:56.849', to: 'Jul 5, 2024 @ 10:03:56.849' };
-    const query = 'FROM foo | where time > ?t_start';
+    const query = 'FROM foo | where time > ?_tstart';
     const params = getStartEndParams(query, time);
     expect(params).toHaveLength(1);
-    expect(params[0]).toHaveProperty('t_start');
+    expect(params[0]).toHaveProperty('_tstart');
   });
 
   it('should return an array with the end param if exists at the query', () => {
     const time = { from: 'Jul 5, 2024 @ 08:03:56.849', to: 'Jul 5, 2024 @ 10:03:56.849' };
-    const query = 'FROM foo | where time < ?t_end';
+    const query = 'FROM foo | where time < ?_tend';
     const params = getStartEndParams(query, time);
     expect(params).toHaveLength(1);
-    expect(params[0]).toHaveProperty('t_end');
+    expect(params[0]).toHaveProperty('_tend');
   });
 
   it('should return an array with the end and start params if exist at the query', () => {
     const time = { from: 'Jul 5, 2024 @ 08:03:56.849', to: 'Jul 5, 2024 @ 10:03:56.849' };
-    const query = 'FROM foo | where time < ?t_end amd time > ?t_start';
+    const query = 'FROM foo | where time < ?_tend amd time > ?_tstart';
     const params = getStartEndParams(query, time);
     expect(params).toHaveLength(2);
-    expect(params[0]).toHaveProperty('t_start');
-    expect(params[1]).toHaveProperty('t_end');
+    expect(params[0]).toHaveProperty('_tstart');
+    expect(params[1]).toHaveProperty('_tend');
   });
 });
diff --git a/packages/kbn-esql-utils/src/utils/run_query.ts b/packages/kbn-esql-utils/src/utils/run_query.ts
index 0d016a7f22f92..b9b09336a7c20 100644
--- a/packages/kbn-esql-utils/src/utils/run_query.ts
+++ b/packages/kbn-esql-utils/src/utils/run_query.ts
@@ -16,11 +16,11 @@ import { esFieldTypeToKibanaFieldType } from '@kbn/field-types';
 import type { ESQLColumn, ESQLSearchResponse, ESQLSearchParams } from '@kbn/es-types';
 import { lastValueFrom } from 'rxjs';
 
-export const hasStartEndParams = (query: string) => /\?t_start|\?t_end/i.test(query);
+export const hasStartEndParams = (query: string) => /\?_tstart|\?_tend/i.test(query);
 
 export const getStartEndParams = (query: string, time?: TimeRange) => {
-  const startNamedParams = /\?t_start/i.test(query);
-  const endNamedParams = /\?t_end/i.test(query);
+  const startNamedParams = /\?_tstart/i.test(query);
+  const endNamedParams = /\?_tend/i.test(query);
   if (time && (startNamedParams || endNamedParams)) {
     const timeParams = {
       start: startNamedParams ? dateMath.parse(time.from)?.toISOString() : undefined,
@@ -28,10 +28,10 @@ export const getStartEndParams = (query: string, time?: TimeRange) => {
     };
     const namedParams = [];
     if (timeParams?.start) {
-      namedParams.push({ t_start: timeParams.start });
+      namedParams.push({ _tstart: timeParams.start });
     }
     if (timeParams?.end) {
-      namedParams.push({ t_end: timeParams.end });
+      namedParams.push({ _tend: timeParams.end });
     }
     return namedParams;
   }
diff --git a/packages/kbn-esql-validation-autocomplete/src/autocomplete/__tests__/autocomplete.command.stats.test.ts b/packages/kbn-esql-validation-autocomplete/src/autocomplete/__tests__/autocomplete.command.stats.test.ts
index 452a3b2754644..6b2f5fea0cc8d 100644
--- a/packages/kbn-esql-validation-autocomplete/src/autocomplete/__tests__/autocomplete.command.stats.test.ts
+++ b/packages/kbn-esql-validation-autocomplete/src/autocomplete/__tests__/autocomplete.command.stats.test.ts
@@ -292,14 +292,14 @@ describe('autocomplete.suggest', () => {
       });
       test('on space within bucket()', async () => {
         const { assertSuggestions } = await setup();
-        await assertSuggestions('from a | stats avg(b) by BUCKET(/, 50, ?t_start, ?t_end)', [
+        await assertSuggestions('from a | stats avg(b) by BUCKET(/, 50, ?_tstart, ?_tend)', [
           // Note there's no space or comma in the suggested field names
           ...getFieldNamesByType(['date', ...ESQL_COMMON_NUMERIC_TYPES]),
           ...getFunctionSignaturesByReturnType('eval', ['date', ...ESQL_COMMON_NUMERIC_TYPES], {
             scalar: true,
           }),
         ]);
-        await assertSuggestions('from a | stats avg(b) by BUCKET(  /  , 50, ?t_start, ?t_end)', [
+        await assertSuggestions('from a | stats avg(b) by BUCKET(  /  , 50, ?_tstart, ?_tend)', [
           // Note there's no space or comma in the suggested field names
           ...getFieldNamesByType(['date', ...ESQL_COMMON_NUMERIC_TYPES]),
           ...getFunctionSignaturesByReturnType('eval', ['date', ...ESQL_COMMON_NUMERIC_TYPES], {
@@ -308,7 +308,7 @@ describe('autocomplete.suggest', () => {
         ]);
 
         await assertSuggestions(
-          'from a | stats avg(b) by BUCKET(dateField, /50, ?t_start, ?t_end)',
+          'from a | stats avg(b) by BUCKET(dateField, /50, ?_tstart, ?_tend)',
           [
             ...getLiteralsByType('time_literal'),
             ...getFunctionSignaturesByReturnType('eval', ['integer', 'date_period'], {
diff --git a/packages/kbn-esql-validation-autocomplete/src/autocomplete/factories.ts b/packages/kbn-esql-validation-autocomplete/src/autocomplete/factories.ts
index b33d705711f05..9d75a6265e5b0 100644
--- a/packages/kbn-esql-validation-autocomplete/src/autocomplete/factories.ts
+++ b/packages/kbn-esql-validation-autocomplete/src/autocomplete/factories.ts
@@ -30,7 +30,7 @@ const allFunctions = aggregationFunctionDefinitions
   .concat(scalarFunctionDefinitions)
   .concat(groupingFunctionDefinitions);
 
-export const TIME_SYSTEM_PARAMS = ['?t_start', '?t_end'];
+export const TIME_SYSTEM_PARAMS = ['?_tstart', '?_tend'];
 
 export const getAddDateHistogramSnippet = (histogramBarTarget = 50) => {
   return `BUCKET($0, ${histogramBarTarget}, ${TIME_SYSTEM_PARAMS.join(', ')})`;
@@ -442,13 +442,13 @@ export function getCompatibleLiterals(
 }
 
 export const TIME_SYSTEM_DESCRIPTIONS = {
-  '?t_start': i18n.translate(
+  '?_tstart': i18n.translate(
     'kbn-esql-validation-autocomplete.esql.autocomplete.timeSystemParamStart',
     {
       defaultMessage: 'The start time from the date picker',
     }
   ),
-  '?t_end': i18n.translate(
+  '?_tend': i18n.translate(
     'kbn-esql-validation-autocomplete.esql.autocomplete.timeSystemParamEnd',
     {
       defaultMessage: 'The end time from the date picker',
diff --git a/packages/kbn-esql-validation-autocomplete/src/validation/__tests__/validation.params.test.ts b/packages/kbn-esql-validation-autocomplete/src/validation/__tests__/validation.params.test.ts
index f8f68769f0113..bbb2867981425 100644
--- a/packages/kbn-esql-validation-autocomplete/src/validation/__tests__/validation.params.test.ts
+++ b/packages/kbn-esql-validation-autocomplete/src/validation/__tests__/validation.params.test.ts
@@ -24,16 +24,16 @@ test('should allow param inside agg function argument', async () => {
 test('allow params in WHERE command expressions', async () => {
   const { validate } = await setup();
 
-  const res1 = await validate('FROM index | WHERE textField >= ?t_start');
+  const res1 = await validate('FROM index | WHERE textField >= ?_tstart');
   const res2 = await validate(`
     FROM index
-      | WHERE textField >= ?t_start
+      | WHERE textField >= ?_tstart
       | WHERE textField <= ?0
       | WHERE textField == ?
   `);
   const res3 = await validate(`
     FROM index
-      | WHERE textField >= ?t_start
+      | WHERE textField >= ?_tstart
         AND textField <= ?0
         AND textField == ?
   `);
diff --git a/packages/kbn-management/settings/setting_ids/index.ts b/packages/kbn-management/settings/setting_ids/index.ts
index 0f79a5fff0506..611a7a0e13df5 100644
--- a/packages/kbn-management/settings/setting_ids/index.ts
+++ b/packages/kbn-management/settings/setting_ids/index.ts
@@ -144,8 +144,6 @@ export const OBSERVABILITY_LOGS_EXPLORER_ALLOWED_DATA_VIEWS_ID =
   'observability:logsExplorer:allowedDataViews';
 export const OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE = 'observability:entityCentricExperience';
 export const OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID = 'observability:logSources';
-export const OBSERVABILITY_AI_ASSISTANT_LOGS_INDEX_PATTERN_ID =
-  'observability:aiAssistantLogsIndexPattern';
 export const OBSERVABILITY_AI_ASSISTANT_SIMULATED_FUNCTION_CALLING =
   'observability:aiAssistantSimulatedFunctionCalling';
 export const OBSERVABILITY_AI_ASSISTANT_SEARCH_CONNECTOR_INDEX_PATTERN =
diff --git a/packages/kbn-monaco/index.ts b/packages/kbn-monaco/index.ts
index 795664b60e7b7..ba8b0edb68e1a 100644
--- a/packages/kbn-monaco/index.ts
+++ b/packages/kbn-monaco/index.ts
@@ -39,6 +39,7 @@ export {
   CONSOLE_THEME_ID,
   getParsedRequestsProvider,
   ConsoleParsedRequestsProvider,
+  createOutputParser,
 } from './src/console';
 
 export type { ParsedRequest } from './src/console';
diff --git a/packages/kbn-monaco/src/console/index.ts b/packages/kbn-monaco/src/console/index.ts
index 6b26c6262f568..cf36505b27759 100644
--- a/packages/kbn-monaco/src/console/index.ts
+++ b/packages/kbn-monaco/src/console/index.ts
@@ -43,3 +43,5 @@ export const ConsoleOutputLang: LangModuleType = {
 export type { ParsedRequest } from './types';
 export { getParsedRequestsProvider } from './language';
 export { ConsoleParsedRequestsProvider } from './console_parsed_requests_provider';
+
+export { createOutputParser } from './output_parser';
diff --git a/packages/kbn-monaco/src/console/output_parser.js b/packages/kbn-monaco/src/console/output_parser.js
new file mode 100644
index 0000000000000..8601cf764055e
--- /dev/null
+++ b/packages/kbn-monaco/src/console/output_parser.js
@@ -0,0 +1,401 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+/* eslint-disable prettier/prettier,prefer-const,no-throw-literal,camelcase,@typescript-eslint/no-shadow,one-var,object-shorthand,eqeqeq */
+
+export const createOutputParser = () => {
+  let at, // The index of the current character
+    ch, // The current character
+    escapee = {
+      '"': '"',
+      '\\': '\\',
+      '/': '/',
+      b: '\b',
+      f: '\f',
+      n: '\n',
+      r: '\r',
+      t: '\t',
+    },
+    text,
+    errors,
+    addError = function (text) {
+      errors.push({ text: text, offset: at });
+    },
+    responses,
+    responseStartOffset,
+    responseEndOffset,
+    getLastResponse = function() {
+      return responses.length > 0 ? responses.pop() : {};
+    },
+    addResponseStart = function() {
+      responseStartOffset = at - 1;
+      responses.push({ startOffset: responseStartOffset });
+    },
+    addResponseData = function(data) {
+      const lastResponse = getLastResponse();
+      const dataArray = lastResponse.data || [];
+      dataArray.push(data);
+      lastResponse.data = dataArray;
+      responses.push(lastResponse);
+      responseEndOffset = at - 1;
+    },
+    addResponseEnd = function() {
+      const lastResponse = getLastResponse();
+      lastResponse.endOffset = responseEndOffset;
+      responses.push(lastResponse);
+    },
+    error = function (m) {
+      throw {
+        name: 'SyntaxError',
+        message: m,
+        at: at,
+        text: text,
+      };
+    },
+    reset = function (newAt) {
+      ch = text.charAt(newAt);
+      at = newAt + 1;
+    },
+    next = function (c) {
+      if (c && c !== ch) {
+        error('Expected \'' + c + '\' instead of \'' + ch + '\'');
+      }
+
+      ch = text.charAt(at);
+      at += 1;
+      return ch;
+    },
+    nextUpTo = function (upTo, errorMessage) {
+      let currentAt = at,
+        i = text.indexOf(upTo, currentAt);
+      if (i < 0) {
+        error(errorMessage || 'Expected \'' + upTo + '\'');
+      }
+      reset(i + upTo.length);
+      return text.substring(currentAt, i);
+    },
+    peek = function (offset) {
+      return text.charAt(at + offset);
+    },
+    number = function () {
+      let number,
+        string = '';
+
+      if (ch === '-') {
+        string = '-';
+        next('-');
+      }
+      while (ch >= '0' && ch <= '9') {
+        string += ch;
+        next();
+      }
+      if (ch === '.') {
+        string += '.';
+        while (next() && ch >= '0' && ch <= '9') {
+          string += ch;
+        }
+      }
+      if (ch === 'e' || ch === 'E') {
+        string += ch;
+        next();
+        if (ch === '-' || ch === '+') {
+          string += ch;
+          next();
+        }
+        while (ch >= '0' && ch <= '9') {
+          string += ch;
+          next();
+        }
+      }
+      number = +string;
+      if (isNaN(number)) {
+        error('Bad number');
+      } else {
+        return number;
+      }
+    },
+    string = function () {
+      let hex,
+        i,
+        string = '',
+        uffff;
+
+      if (ch === '"') {
+        // If the current and the next characters are equal to "", empty string or start of triple quoted strings
+        if (peek(0) === '"' && peek(1) === '"') {
+          // literal
+          next('"');
+          next('"');
+          return nextUpTo('"""', 'failed to find closing \'"""\'');
+        } else {
+          while (next()) {
+            if (ch === '"') {
+              next();
+              return string;
+            } else if (ch === '\\') {
+              next();
+              if (ch === 'u') {
+                uffff = 0;
+                for (i = 0; i < 4; i += 1) {
+                  hex = parseInt(next(), 16);
+                  if (!isFinite(hex)) {
+                    break;
+                  }
+                  uffff = uffff * 16 + hex;
+                }
+                string += String.fromCharCode(uffff);
+              } else if (typeof escapee[ch] === 'string') {
+                string += escapee[ch];
+              } else {
+                break;
+              }
+            } else {
+              string += ch;
+            }
+          }
+        }
+      }
+      error('Bad string');
+    },
+    white = function () {
+      while (ch) {
+        // Skip whitespace.
+        while (ch && ch <= ' ') {
+          next();
+        }
+        // if the current char in iteration is '#' or the char and the next char is equal to '//'
+        // we are on the single line comment
+        if (ch === '#' || ch === '/' && peek(0) === '/') {
+          // Until we are on the new line, skip to the next char
+          while (ch && ch !== '\n') {
+            next();
+          }
+        } else if (ch === '/' && peek(0) === '*') {
+          // If the chars starts with '/*', we are on the multiline comment
+          next();
+          next();
+          while (ch && !(ch === '*' && peek(0) === '/')) {
+            // Until we have closing tags '*/', skip to the next char
+            next();
+          }
+          if (ch) {
+            next();
+            next();
+          }
+        } else break;
+      }
+    },
+    strictWhite = function () {
+      while (ch && (ch == ' ' || ch == '\t')) {
+        next();
+      }
+    },
+    newLine = function () {
+      if (ch == '\n') next();
+    },
+    word = function () {
+      switch (ch) {
+        case 't':
+          next('t');
+          next('r');
+          next('u');
+          next('e');
+          return true;
+        case 'f':
+          next('f');
+          next('a');
+          next('l');
+          next('s');
+          next('e');
+          return false;
+        case 'n':
+          next('n');
+          next('u');
+          next('l');
+          next('l');
+          return null;
+      }
+      error('Unexpected \'' + ch + '\'');
+    },
+    value, // Place holder for the value function.
+    array = function () {
+      const array = [];
+
+      if (ch === '[') {
+        next('[');
+        white();
+        if (ch === ']') {
+          next(']');
+          return array; // empty array
+        }
+        while (ch) {
+          array.push(value());
+          white();
+          if (ch === ']') {
+            next(']');
+            return array;
+          }
+          next(',');
+          white();
+        }
+      }
+      error('Bad array');
+    },
+    object = function () {
+      let key,
+        object = {};
+
+      if (ch === '{') {
+        next('{');
+        white();
+        if (ch === '}') {
+          next('}');
+          return object; // empty object
+        }
+        while (ch) {
+          key = string();
+          white();
+          next(':');
+          if (Object.hasOwnProperty.call(object, key)) {
+            error('Duplicate key "' + key + '"');
+          }
+          object[key] = value();
+          white();
+          if (ch === '}') {
+            next('}');
+            return object;
+          }
+          next(',');
+          white();
+        }
+      }
+      error('Bad object');
+    };
+
+  value = function () {
+    white();
+    switch (ch) {
+      case '{':
+        return object();
+      case '[':
+        return array();
+      case '"':
+        return string();
+      case '-':
+        return number();
+      default:
+        return ch >= '0' && ch <= '9' ? number() : word();
+    }
+  };
+
+  let response = function () {
+      white();
+      addResponseStart();
+      // it can be an object
+      if (ch == '{') {
+        const parsedObject = object();
+        addResponseData(parsedObject);
+      // but it could also be an array of objects
+      } else if (ch == '[') {
+        const parsedArray = array();
+        parsedArray.forEach(item => {
+          if (typeof item === 'object') {
+            addResponseData(item);
+          } else {
+            error('Array elements must be objects');
+          }
+        });
+      } else {
+        error('Invalid input');
+      }
+      // multi doc response
+      strictWhite(); // advance to one new line
+      newLine();
+      strictWhite();
+      while (ch == '{') {
+        // another object
+        const parsedObject = object();
+        addResponseData(parsedObject);
+        strictWhite();
+        newLine();
+        strictWhite();
+      }
+      addResponseEnd();
+    },
+    comment = function () {
+      while (ch == '#') {
+        while (ch && ch !== '\n') {
+          next();
+        }
+        white();
+      }
+    },
+    multi_response = function () {
+      while (ch && ch != '') {
+        white();
+        if (!ch) {
+          continue;
+        }
+        try {
+          comment();
+          white();
+          if (!ch) {
+            continue;
+          }
+          response();
+          white();
+        } catch (e) {
+          addError(e.message);
+          // snap
+          const substring = text.substr(at);
+          const nextMatch = substring.search(/[#{]/);
+          if (nextMatch < 1) return;
+          reset(at + nextMatch);
+        }
+      }
+    };
+
+  return function (source, reviver) {
+    let result;
+
+    text = source;
+    at = 0;
+    errors = [];
+    responses = [];
+    next();
+    multi_response();
+    white();
+    if (ch) {
+      addError('Syntax error');
+    }
+
+    result = { errors, responses };
+
+    return typeof reviver === 'function'
+      ? (function walk(holder, key) {
+        let k,
+          v,
+          value = holder[key];
+        if (value && typeof value === 'object') {
+          for (k in value) {
+            if (Object.hasOwnProperty.call(value, k)) {
+              v = walk(value, k);
+              if (v !== undefined) {
+                value[k] = v;
+              } else {
+                delete value[k];
+              }
+            }
+          }
+        }
+        return reviver.call(holder, key, value);
+      }({ '': result }, ''))
+      : result;
+  };
+}
diff --git a/packages/kbn-monaco/src/console/output_parser.test.ts b/packages/kbn-monaco/src/console/output_parser.test.ts
new file mode 100644
index 0000000000000..47ec0bbeb65e4
--- /dev/null
+++ b/packages/kbn-monaco/src/console/output_parser.test.ts
@@ -0,0 +1,40 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { createOutputParser } from './output_parser';
+import { ConsoleOutputParserResult } from './types';
+
+const parser = createOutputParser();
+describe('console output parser', () => {
+  it('returns errors if input is not correct', () => {
+    const input = 'x';
+    const parserResult = parser(input) as ConsoleOutputParserResult;
+
+    expect(parserResult.responses.length).toBe(1);
+    // the parser should generate an invalid input error
+    expect(parserResult.errors).toContainEqual({ text: 'Invalid input', offset: 1 });
+  });
+
+  it('returns parsed responses if the input is correct', () => {
+    const input = `# 1: GET /my-index/_doc/0 \n { "_index": "my-index" }`;
+    const { responses, errors } = parser(input) as ConsoleOutputParserResult;
+    expect(responses.length).toBe(1);
+    expect(errors.length).toBe(0);
+    const { data } = responses[0];
+
+    const expected = [{ _index: 'my-index' }];
+    expect(data).toEqual(expected);
+  });
+
+  it('parses several responses', () => {
+    const input = `# 1: GET /my-index/_doc/0 \n { "_index": "my-index" } \n # 2: GET /my-index/_doc/1 \n { "_index": "my-index" }`;
+    const { responses } = parser(input) as ConsoleOutputParserResult;
+    expect(responses.length).toBe(2);
+  });
+});
diff --git a/packages/kbn-monaco/src/console/types.ts b/packages/kbn-monaco/src/console/types.ts
index 6c7573eabdb2c..a024e4696f8cd 100644
--- a/packages/kbn-monaco/src/console/types.ts
+++ b/packages/kbn-monaco/src/console/types.ts
@@ -21,6 +21,16 @@ export interface ConsoleParserResult {
   requests: ParsedRequest[];
 }
 
+export interface ConsoleOutputParsedResponse {
+  startOffset: number;
+  endOffset?: number;
+  data?: Array<Record<string, unknown>>;
+}
+export interface ConsoleOutputParserResult {
+  errors: ErrorAnnotation[];
+  responses: ConsoleOutputParsedResponse[];
+}
+
 export interface ConsoleWorkerDefinition {
   getParserResult: (modelUri: string) => ConsoleParserResult | undefined;
 }
diff --git a/packages/serverless/settings/observability_project/index.ts b/packages/serverless/settings/observability_project/index.ts
index 85f6327bf0a07..f8bb8dbe12542 100644
--- a/packages/serverless/settings/observability_project/index.ts
+++ b/packages/serverless/settings/observability_project/index.ts
@@ -34,8 +34,8 @@ export const OBSERVABILITY_PROJECT_SETTINGS = [
   settings.OBSERVABILITY_APM_ENABLE_TABLE_SEARCH_BAR,
   settings.OBSERVABILITY_APM_ENABLE_SERVICE_INVENTORY_TABLE_SEARCH_BAR,
   settings.OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE,
-  settings.OBSERVABILITY_AI_ASSISTANT_LOGS_INDEX_PATTERN_ID,
   settings.OBSERVABILITY_AI_ASSISTANT_SIMULATED_FUNCTION_CALLING,
   settings.OBSERVABILITY_AI_ASSISTANT_SEARCH_CONNECTOR_INDEX_PATTERN,
+  settings.OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID,
   settings.OBSERVABILITY_SEARCH_EXCLUDED_DATA_TIERS,
 ];
diff --git a/src/dev/build/tasks/os_packages/docker_generator/run.ts b/src/dev/build/tasks/os_packages/docker_generator/run.ts
index 23010717fe495..79239a1af7668 100644
--- a/src/dev/build/tasks/os_packages/docker_generator/run.ts
+++ b/src/dev/build/tasks/os_packages/docker_generator/run.ts
@@ -51,7 +51,7 @@ export async function runDockerGenerator(
    */
   if (flags.baseImage === 'wolfi')
     baseImageName =
-      'docker.elastic.co/wolfi/chainguard-base:latest@sha256:aad4cd4e5f6d849691748c6933761889db1a20a57231613b98bbff61fa7723ab';
+      'docker.elastic.co/wolfi/chainguard-base:latest@sha256:d4def25f2fd3b0ff9bc68091cd1d89524e41b7d3fc0d3b3a665720eb92145f3b';
 
   let imageFlavor = '';
   if (flags.baseImage === 'ubi') imageFlavor += `-ubi`;
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 25aac790f08fe..c9680f9991955 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -22,7 +22,6 @@ export const storybookAliases = {
   language_documentation_popover: 'packages/kbn-language-documentation-popover/.storybook',
   chart_icons: 'packages/kbn-chart-icons/.storybook',
   content_management_examples: 'examples/content_management_examples/.storybook',
-  controls: 'src/plugins/controls/storybook',
   custom_icons: 'packages/kbn-custom-icons/.storybook',
   custom_integrations: 'src/plugins/custom_integrations/storybook',
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
diff --git a/src/plugins/console/common/constants/autocomplete_definitions.ts b/src/plugins/console/common/constants/autocomplete_definitions.ts
index b2ef4f1375419..0ab69c1fa9528 100644
--- a/src/plugins/console/common/constants/autocomplete_definitions.ts
+++ b/src/plugins/console/common/constants/autocomplete_definitions.ts
@@ -17,3 +17,5 @@ export const AUTOCOMPLETE_DEFINITIONS_FOLDER = resolve(
 export const GENERATED_SUBFOLDER = 'generated';
 export const OVERRIDES_SUBFOLDER = 'overrides';
 export const MANUAL_SUBFOLDER = 'manual';
+
+export const API_DOCS_LINK = 'https://www.elastic.co/docs/api';
diff --git a/src/plugins/console/common/constants/index.ts b/src/plugins/console/common/constants/index.ts
index ea572db743ef4..a00bcebcf38cc 100644
--- a/src/plugins/console/common/constants/index.ts
+++ b/src/plugins/console/common/constants/index.ts
@@ -15,6 +15,7 @@ export {
   GENERATED_SUBFOLDER,
   OVERRIDES_SUBFOLDER,
   MANUAL_SUBFOLDER,
+  API_DOCS_LINK,
 } from './autocomplete_definitions';
 export { DEFAULT_INPUT_VALUE } from './editor_input';
 export { DEFAULT_LANGUAGE, AVAILABLE_LANGUAGES } from './copy_as';
diff --git a/src/plugins/console/public/application/components/console_menu.tsx b/src/plugins/console/public/application/components/console_menu.tsx
index 3ed1d67c3602b..4dee3ff06df0a 100644
--- a/src/plugins/console/public/application/components/console_menu.tsx
+++ b/src/plugins/console/public/application/components/console_menu.tsx
@@ -11,13 +11,7 @@ import React, { Component } from 'react';
 
 import { NotificationsSetup } from '@kbn/core/public';
 
-import {
-  EuiIcon,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-  EuiPopover,
-  EuiLink,
-} from '@elastic/eui';
+import { EuiContextMenuPanel, EuiContextMenuItem, EuiPopover, EuiButtonIcon } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
@@ -115,15 +109,15 @@ export class ConsoleMenu extends Component<Props, State> {
 
   render() {
     const button = (
-      <EuiLink
+      <EuiButtonIcon
         onClick={this.onButtonClick}
         data-test-subj="toggleConsoleMenu"
         aria-label={i18n.translate('console.requestOptionsButtonAriaLabel', {
           defaultMessage: 'Request options',
         })}
-      >
-        <EuiIcon type="boxesVertical" />
-      </EuiLink>
+        iconType="boxesVertical"
+        iconSize="s"
+      />
     );
 
     const items = [
diff --git a/src/plugins/console/public/application/components/console_tour_step.tsx b/src/plugins/console/public/application/components/console_tour_step.tsx
new file mode 100644
index 0000000000000..578d590bfff4a
--- /dev/null
+++ b/src/plugins/console/public/application/components/console_tour_step.tsx
@@ -0,0 +1,64 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { ReactNode, ReactElement } from 'react';
+import { EuiTourStep, PopoverAnchorPosition } from '@elastic/eui';
+
+export interface ConsoleTourStepProps {
+  step: number;
+  stepsTotal: number;
+  isStepOpen: boolean;
+  title: ReactNode;
+  content: ReactNode;
+  onFinish: () => void;
+  footerAction: ReactNode | ReactNode[];
+  dataTestSubj: string;
+  anchorPosition: string;
+  maxWidth: number;
+  css?: any;
+}
+
+interface Props {
+  tourStepProps: ConsoleTourStepProps;
+  children: ReactNode & ReactElement;
+}
+
+export const ConsoleTourStep = ({ tourStepProps, children }: Props) => {
+  const {
+    step,
+    isStepOpen,
+    stepsTotal,
+    title,
+    content,
+    onFinish,
+    footerAction,
+    dataTestSubj,
+    anchorPosition,
+    maxWidth,
+    css,
+  } = tourStepProps;
+
+  return (
+    <EuiTourStep
+      step={step}
+      stepsTotal={stepsTotal}
+      isStepOpen={isStepOpen}
+      title={title}
+      content={content}
+      onFinish={onFinish}
+      footerAction={footerAction}
+      data-test-subj={dataTestSubj}
+      anchorPosition={anchorPosition as PopoverAnchorPosition}
+      maxWidth={maxWidth}
+      css={css}
+    >
+      {children}
+    </EuiTourStep>
+  );
+};
diff --git a/src/plugins/console/public/application/components/editor_content_spinner.tsx b/src/plugins/console/public/application/components/editor_content_spinner.tsx
index eecd9aebf67cc..a4d0ccc98b76c 100644
--- a/src/plugins/console/public/application/components/editor_content_spinner.tsx
+++ b/src/plugins/console/public/application/components/editor_content_spinner.tsx
@@ -8,12 +8,12 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiSkeletonText, EuiPageSection } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiPageSection } from '@elastic/eui';
 
 export const EditorContentSpinner: FunctionComponent = () => {
   return (
-    <EuiPageSection className="conApp__editor__spinner">
-      <EuiSkeletonText lines={10} />
+    <EuiPageSection alignment="center" grow={true} className="conApp__editor__spinner">
+      <EuiLoadingSpinner size="xxl" />
     </EuiPageSection>
   );
 };
diff --git a/src/plugins/console/public/application/components/editor_example.tsx b/src/plugins/console/public/application/components/editor_example.tsx
deleted file mode 100644
index 6a5ab6333c3b5..0000000000000
--- a/src/plugins/console/public/application/components/editor_example.tsx
+++ /dev/null
@@ -1,91 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiScreenReaderOnly, withEuiTheme } from '@elastic/eui';
-import type { WithEuiThemeProps } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React, { useEffect, useRef } from 'react';
-import { createReadOnlyAceEditor, CustomAceEditor } from '../models/sense_editor';
-// @ts-ignore
-import { Mode as InputMode } from '../models/legacy_core_editor/mode/input';
-import { Mode as OutputMode } from '../models/legacy_core_editor/mode/output';
-
-interface EditorExampleProps {
-  panel: string;
-  example?: string;
-  theme: WithEuiThemeProps['theme'];
-  linesOfExampleCode?: number;
-  mode?: string;
-}
-
-const exampleText = `
-GET _search
-{
-  "query": {
-    "match_all": {}
-  }
-}
-`;
-
-const EditorExample = ({
-  panel,
-  example,
-  theme,
-  linesOfExampleCode = 6,
-  mode = 'input',
-}: EditorExampleProps) => {
-  const inputId = `help-example-${panel}-input`;
-  const wrapperDivRef = useRef<HTMLDivElement | null>(null);
-  const editorRef = useRef<CustomAceEditor>();
-
-  useEffect(() => {
-    if (wrapperDivRef.current) {
-      editorRef.current = createReadOnlyAceEditor(wrapperDivRef.current);
-
-      const editor = editorRef.current;
-      const editorMode = mode === 'input' ? new InputMode() : new OutputMode();
-      editor.update((example || exampleText).trim(), editorMode);
-      editor.session.setUseWorker(false);
-      editor.setHighlightActiveLine(false);
-
-      const textareaElement = wrapperDivRef.current.querySelector('textarea');
-      if (textareaElement) {
-        textareaElement.setAttribute('id', inputId);
-        textareaElement.setAttribute('readonly', 'true');
-      }
-    }
-
-    return () => {
-      if (editorRef.current) {
-        editorRef.current.destroy();
-      }
-    };
-  }, [example, inputId, mode]);
-
-  const wrapperDivStyle = {
-    height: `${parseInt(theme.euiTheme.size.base, 10) * linesOfExampleCode}px`,
-    margin: `${theme.euiTheme.size.base} 0`,
-  };
-
-  return (
-    <>
-      <EuiScreenReaderOnly>
-        <label htmlFor={inputId}>
-          {i18n.translate('console.exampleOutputTextarea', {
-            defaultMessage: 'Dev Tools Console editor example',
-          })}
-        </label>
-      </EuiScreenReaderOnly>
-      <div ref={wrapperDivRef} className="conApp_example" css={wrapperDivStyle} />
-    </>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withEuiTheme(EditorExample);
diff --git a/src/plugins/console/public/application/components/help_panel.tsx b/src/plugins/console/public/application/components/help_panel.tsx
deleted file mode 100644
index 30a356e27002e..0000000000000
--- a/src/plugins/console/public/application/components/help_panel.tsx
+++ /dev/null
@@ -1,163 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
-import {
-  EuiText,
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiFlyoutBody,
-  EuiTitle,
-  EuiSpacer,
-  EuiLink,
-} from '@elastic/eui';
-import EditorExample from './editor_example';
-import { useServicesContext } from '../contexts';
-
-interface Props {
-  onClose: () => void;
-}
-
-export function HelpPanel(props: Props) {
-  const { docLinks } = useServicesContext();
-
-  return (
-    <EuiFlyout onClose={props.onClose} data-test-subj="helpFlyout" size="s">
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>
-            <FormattedMessage id="console.helpPage.pageTitle" defaultMessage="Help" />
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <EuiText>
-          <h3>
-            <FormattedMessage
-              defaultMessage="Request format"
-              id="console.helpPage.requestFormatTitle"
-            />
-          </h3>
-          <p>
-            <FormattedMessage
-              id="console.helpPage.requestFormatDescription"
-              defaultMessage="You can type one or more requests in the editor. Console understands requests in a compact format."
-            />
-          </p>
-          <p>
-            <FormattedMessage
-              id="console.helpPage.learnAboutConsoleAndQueryDslText"
-              defaultMessage="Learn about {console} and {queryDsl}"
-              values={{
-                console: (
-                  <EuiLink href={docLinks.console.guide} target="_blank" external>
-                    Console
-                  </EuiLink>
-                ),
-                queryDsl: (
-                  <EuiLink href={docLinks.query.queryDsl} target="_blank" external>
-                    Query DSL
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-          <EditorExample panel="help" />
-          <h3>
-            <FormattedMessage
-              id="console.helpPage.keyboardCommandsTitle"
-              defaultMessage="Keyboard commands"
-            />
-          </h3>
-          <EuiSpacer />
-          <dl>
-            <dt>Ctrl/Cmd + I</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.autoIndentDescription"
-                defaultMessage="Auto indent current request"
-              />
-            </dd>
-            <dt>Ctrl/Cmd + /</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.openDocumentationDescription"
-                defaultMessage="Open documentation for current request"
-              />
-            </dd>
-            <dt>Ctrl + Space</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.openAutoCompleteDescription"
-                defaultMessage="Open Auto complete (even if not typing)"
-              />
-            </dd>
-            <dt>Ctrl/Cmd + Enter</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.submitRequestDescription"
-                defaultMessage="Submit request"
-              />
-            </dd>
-            <dt>Ctrl/Cmd + Up/Down</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.jumpToPreviousNextRequestDescription"
-                defaultMessage="Jump to the previous/next request start or end."
-              />
-            </dd>
-            <dt>Ctrl/Cmd + Alt + L</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.collapseExpandCurrentScopeDescription"
-                defaultMessage="Collapse/expand current scope."
-              />
-            </dd>
-            <dt>Ctrl/Cmd + Option + 0</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.collapseAllScopesDescription"
-                defaultMessage="Collapse all scopes but the current one. Expand by adding a shift."
-              />
-            </dd>
-            <dt>Down arrow</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.switchFocusToAutoCompleteMenuDescription"
-                defaultMessage="Switch focus to auto-complete menu. Use arrows to further select a term"
-              />
-            </dd>
-            <dt>Enter/Tab</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.selectCurrentlySelectedInAutoCompleteMenuDescription"
-                defaultMessage="Select the currently selected or the top most term in auto-complete menu"
-              />
-            </dd>
-            <dt>Ctrl/Cmd + L</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.goToLineNumberDescription"
-                defaultMessage="Go to line number"
-              />
-            </dd>
-            <dt>Esc</dt>
-            <dd>
-              <FormattedMessage
-                id="console.helpPage.keyboardCommands.closeAutoCompleteMenuDescription"
-                defaultMessage="Close auto-complete menu"
-              />
-            </dd>
-          </dl>
-        </EuiText>
-      </EuiFlyoutBody>
-    </EuiFlyout>
-  );
-}
diff --git a/src/plugins/console/public/application/components/help_popover.tsx b/src/plugins/console/public/application/components/help_popover.tsx
new file mode 100644
index 0000000000000..16e9465d4d388
--- /dev/null
+++ b/src/plugins/console/public/application/components/help_popover.tsx
@@ -0,0 +1,136 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+  EuiPopover,
+  EuiTitle,
+  EuiText,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiSpacer,
+} from '@elastic/eui';
+import { useServicesContext } from '../contexts';
+
+interface HelpPopoverProps {
+  button: any;
+  isOpen: boolean;
+  closePopover: () => void;
+  resetTour: () => void;
+}
+
+export const HelpPopover = ({ button, isOpen, closePopover, resetTour }: HelpPopoverProps) => {
+  const { docLinks } = useServicesContext();
+
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isOpen}
+      closePopover={closePopover}
+      anchorPosition="downRight"
+      buffer={4}
+      ownFocus={false}
+      data-test-subj="consoleHelpPopover"
+    >
+      <EuiTitle size="xs">
+        <h4>
+          {i18n.translate('console.helpPopover.title', {
+            defaultMessage: 'Elastic Console',
+          })}
+        </h4>
+      </EuiTitle>
+
+      <EuiSpacer size="s" />
+
+      <EuiText style={{ width: 300 }} color="subdued" size="s">
+        <p>
+          {i18n.translate('console.helpPopover.description', {
+            defaultMessage:
+              'Console is an interactive UI for calling Elasticsearch and Kibana APIs and viewing their responses. Search your data, manage settings, and more, using Query DSL and REST API syntax.',
+          })}
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiFlexGroup gutterSize="m" direction="column">
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <p>
+                {i18n.translate('console.helpPopover.aboutConsoleLabel', {
+                  defaultMessage: 'About Console',
+                })}
+              </p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                iconType="popout"
+                href={docLinks.console.guide}
+                target="_blank"
+                color="text"
+                aria-label={i18n.translate('console.helpPopover.aboutConsoleButtonAriaLabel', {
+                  defaultMessage: 'About Console link',
+                })}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <p>
+                {i18n.translate('console.helpPopover.aboutQueryDSLLabel', {
+                  defaultMessage: 'About Query DSL',
+                })}
+              </p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                iconType="popout"
+                href={docLinks.query.queryDsl}
+                target="_blank"
+                color="text"
+                aria-label={i18n.translate('console.helpPopover.aboutQueryDSLButtonAriaLabel', {
+                  defaultMessage: 'About QueryDSL link',
+                })}
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+            <EuiFlexItem grow={false}>
+              <p>
+                {i18n.translate('console.helpPopover.rerunTourLabel', {
+                  defaultMessage: 'Re-run feature tour',
+                })}
+              </p>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButtonIcon
+                iconType="refresh"
+                onClick={resetTour}
+                color="text"
+                aria-label={i18n.translate('console.helpPopover.rerunTourButtonAriaLabel', {
+                  defaultMessage: 'Re-run feature tour button',
+                })}
+                data-test-subj="consoleRerunTourButton"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/console/public/application/components/index.ts b/src/plugins/console/public/application/components/index.ts
index e091fb5f2f8a5..111778d8fa776 100644
--- a/src/plugins/console/public/application/components/index.ts
+++ b/src/plugins/console/public/application/components/index.ts
@@ -7,50 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React from 'react';
-import { withSuspense } from '@kbn/shared-ux-utility';
-
 export { NetworkRequestStatusBar } from './network_request_status_bar';
 export { SomethingWentWrongCallout } from './something_went_wrong_callout';
 export type { TopNavMenuItem } from './top_nav_menu';
 export { TopNavMenu } from './top_nav_menu';
 export { ConsoleMenu } from './console_menu';
-export { WelcomePanel } from './welcome_panel';
-export type { AutocompleteOptions } from './settings_modal';
-export { HelpPanel } from './help_panel';
 export { EditorContentSpinner } from './editor_content_spinner';
-export type { DevToolsVariable } from './variables';
-
-/**
- * The Lazily-loaded `DevToolsSettingsModal` component.  Consumers should use `React.Suspense` or
- * the withSuspense` HOC to load this component.
- */
-export const DevToolsSettingsModalLazy = React.lazy(() =>
-  import('./settings_modal').then(({ DevToolsSettingsModal }) => ({
-    default: DevToolsSettingsModal,
-  }))
-);
-
-/**
- * A `DevToolsSettingsModal` component that is wrapped by the `withSuspense` HOC. This component can
- * be used directly by consumers and will load the `DevToolsSettingsModalLazy` component lazily with
- * a predefined fallback and error boundary.
- */
-export const DevToolsSettingsModal = withSuspense(DevToolsSettingsModalLazy);
-
-/**
- * The Lazily-loaded `DevToolsVariablesFlyout` component.  Consumers should use `React.Suspense` or
- * the withSuspense` HOC to load this component.
- */
-export const DevToolsVariablesFlyoutLazy = React.lazy(() =>
-  import('./variables').then(({ DevToolsVariablesFlyout }) => ({
-    default: DevToolsVariablesFlyout,
-  }))
-);
-
-/**
- * A `DevToolsVariablesFlyout` component that is wrapped by the `withSuspense` HOC. This component can
- * be used directly by consumers and will load the `DevToolsVariablesFlyoutLazy` component lazily with
- * a predefined fallback and error boundary.
- */
-export const DevToolsVariablesFlyout = withSuspense(DevToolsVariablesFlyoutLazy);
+export { OutputPanelEmptyState } from './output_panel_empty_state';
+export { HelpPopover } from './help_popover';
+export { ShortcutsPopover } from './shortcuts_popover';
+export type { DevToolsVariable } from './variables/types';
+export { ConsoleTourStep, type ConsoleTourStepProps } from './console_tour_step';
diff --git a/src/plugins/console/public/application/components/output_panel_empty_state.tsx b/src/plugins/console/public/application/components/output_panel_empty_state.tsx
new file mode 100644
index 0000000000000..6fdda1b5e3c5f
--- /dev/null
+++ b/src/plugins/console/public/application/components/output_panel_empty_state.tsx
@@ -0,0 +1,57 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { FunctionComponent } from 'react';
+import { EuiEmptyPrompt, EuiTitle, EuiLink } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useServicesContext } from '../contexts';
+
+export const OutputPanelEmptyState: FunctionComponent = () => {
+  const { docLinks } = useServicesContext();
+
+  return (
+    <EuiEmptyPrompt
+      title={
+        <h2>
+          <FormattedMessage
+            id="console.outputEmptyState.title"
+            defaultMessage="Enter a new request"
+          />
+        </h2>
+      }
+      body={
+        <p>
+          <FormattedMessage
+            id="console.outputEmptyState.description"
+            defaultMessage="When you run a request in the input panel, you will see the output response here."
+          />
+        </p>
+      }
+      footer={
+        <>
+          <EuiTitle size="xxs">
+            <h3>
+              <FormattedMessage
+                id="console.outputEmptyState.learnMore"
+                defaultMessage="Want to learn more?"
+              />
+            </h3>
+          </EuiTitle>
+          <EuiLink href={docLinks.console.guide} target="_blank">
+            <FormattedMessage
+              id="console.outputEmptyState.docsLink"
+              defaultMessage="Read the Console docs"
+            />
+          </EuiLink>
+        </>
+      }
+      data-test-subj="consoleOutputPanelEmptyState"
+    />
+  );
+};
diff --git a/src/plugins/console/public/application/components/settings/index.ts b/src/plugins/console/public/application/components/settings/index.ts
new file mode 100644
index 0000000000000..b446307a04a01
--- /dev/null
+++ b/src/plugins/console/public/application/components/settings/index.ts
@@ -0,0 +1,31 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { withSuspense } from '@kbn/shared-ux-utility';
+
+export { type Props } from './settings_editor';
+export { type AutocompleteOptions } from './types';
+
+/**
+ * The Lazily-loaded `SettingsEditorLazy` component.  Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
+ */
+export const SettingsEditorLazy = React.lazy(() =>
+  import('./settings_editor').then(({ SettingsEditor }) => ({
+    default: SettingsEditor,
+  }))
+);
+
+/**
+ * A `SettingsEditor` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `SettingsEditorLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const SettingsEditor = withSuspense(SettingsEditorLazy);
diff --git a/src/plugins/console/public/application/components/settings/settings_editor.tsx b/src/plugins/console/public/application/components/settings/settings_editor.tsx
new file mode 100644
index 0000000000000..6f2bef834a559
--- /dev/null
+++ b/src/plugins/console/public/application/components/settings/settings_editor.tsx
@@ -0,0 +1,371 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { debounce } from 'lodash';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+  EuiButton,
+  EuiFieldNumber,
+  EuiSwitch,
+  EuiSuperSelect,
+  EuiTitle,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+
+import { SettingsGroup } from './settings_group';
+import { SettingsFormRow } from './settings_form_row';
+import { DevToolsSettings } from '../../../services';
+
+const DEBOUNCE_DELAY = 500;
+const ON_LABEL = i18n.translate('console.settingsPage.onLabel', { defaultMessage: 'On' });
+const OFF_LABEL = i18n.translate('console.settingsPage.offLabel', { defaultMessage: 'Off' });
+
+const onceTimeInterval = () =>
+  i18n.translate('console.settingsPage.refreshInterval.onceTimeInterval', {
+    defaultMessage: 'Once, when console loads',
+  });
+
+const everyNMinutesTimeInterval = (value: number) =>
+  i18n.translate('console.settingsPage.refreshInterval.everyNMinutesTimeInterval', {
+    defaultMessage: 'Every {value} {value, plural, one {minute} other {minutes}}',
+    values: { value },
+  });
+
+const everyHourTimeInterval = () =>
+  i18n.translate('console.settingsPage.refreshInterval.everyHourTimeInterval', {
+    defaultMessage: 'Every hour',
+  });
+
+const PRESETS_IN_MINUTES = [0, 1, 10, 20, 60];
+const intervalOptions = PRESETS_IN_MINUTES.map((value) => ({
+  value: (value * 60000).toString(),
+  inputDisplay:
+    value === 0
+      ? onceTimeInterval()
+      : value === 60
+      ? everyHourTimeInterval()
+      : everyNMinutesTimeInterval(value),
+}));
+
+export interface Props {
+  onSaveSettings: (newSettings: DevToolsSettings) => void;
+  refreshAutocompleteSettings: (selectedSettings: DevToolsSettings['autocomplete']) => void;
+  settings: DevToolsSettings;
+}
+
+export const SettingsEditor = (props: Props) => {
+  const isMounted = useRef(false);
+
+  const [fontSize, setFontSize] = useState(props.settings.fontSize);
+  const [wrapMode, setWrapMode] = useState(props.settings.wrapMode);
+  const [fields, setFields] = useState(props.settings.autocomplete.fields);
+  const [indices, setIndices] = useState(props.settings.autocomplete.indices);
+  const [templates, setTemplates] = useState(props.settings.autocomplete.templates);
+  const [dataStreams, setDataStreams] = useState(props.settings.autocomplete.dataStreams);
+  const [polling, setPolling] = useState(props.settings.polling);
+  const [pollInterval, setPollInterval] = useState(props.settings.pollInterval);
+  const [tripleQuotes, setTripleQuotes] = useState(props.settings.tripleQuotes);
+  const [isHistoryEnabled, setIsHistoryEnabled] = useState(props.settings.isHistoryEnabled);
+  const [isKeyboardShortcutsEnabled, setIsKeyboardShortcutsEnabled] = useState(
+    props.settings.isKeyboardShortcutsEnabled
+  );
+  const [isAccessibilityOverlayEnabled, setIsAccessibilityOverlayEnabled] = useState(
+    props.settings.isAccessibilityOverlayEnabled
+  );
+
+  const autoCompleteCheckboxes = [
+    {
+      id: 'fields',
+      label: i18n.translate('console.settingsPage.fieldsLabelText', {
+        defaultMessage: 'Fields',
+      }),
+      stateSetter: setFields,
+      checked: fields,
+    },
+    {
+      id: 'indices',
+      label: i18n.translate('console.settingsPage.indicesAndAliasesLabelText', {
+        defaultMessage: 'Indices and aliases',
+      }),
+      stateSetter: setIndices,
+      checked: indices,
+    },
+    {
+      id: 'templates',
+      label: i18n.translate('console.settingsPage.templatesLabelText', {
+        defaultMessage: 'Templates',
+      }),
+      stateSetter: setTemplates,
+      checked: templates,
+    },
+    {
+      id: 'dataStreams',
+      label: i18n.translate('console.settingsPage.dataStreamsLabelText', {
+        defaultMessage: 'Data streams',
+      }),
+      stateSetter: setDataStreams,
+      checked: dataStreams,
+    },
+  ];
+
+  const saveSettings = () => {
+    props.onSaveSettings({
+      fontSize,
+      wrapMode,
+      autocomplete: {
+        fields,
+        indices,
+        templates,
+        dataStreams,
+      },
+      polling,
+      pollInterval,
+      tripleQuotes,
+      isHistoryEnabled,
+      isKeyboardShortcutsEnabled,
+      isAccessibilityOverlayEnabled,
+    });
+  };
+  const debouncedSaveSettings = debounce(saveSettings, DEBOUNCE_DELAY);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      debouncedSaveSettings();
+    } else {
+      isMounted.current = true;
+    }
+  }, [
+    fontSize,
+    wrapMode,
+    fields,
+    indices,
+    templates,
+    dataStreams,
+    polling,
+    pollInterval,
+    tripleQuotes,
+    isHistoryEnabled,
+    isKeyboardShortcutsEnabled,
+    isAccessibilityOverlayEnabled,
+    debouncedSaveSettings,
+  ]);
+
+  const onPollingIntervalChange = useCallback((value: string) => {
+    const sanitizedValue = parseInt(value, 10);
+
+    setPolling(!!sanitizedValue);
+    setPollInterval(sanitizedValue);
+  }, []);
+
+  const toggleKeyboardShortcuts = useCallback((isEnabled: boolean) => {
+    setIsKeyboardShortcutsEnabled(isEnabled);
+  }, []);
+
+  const toggleAccessibilityOverlay = useCallback(
+    (isEnabled: boolean) => setIsAccessibilityOverlayEnabled(isEnabled),
+    []
+  );
+
+  const toggleSavingToHistory = useCallback(
+    (isEnabled: boolean) => setIsHistoryEnabled(isEnabled),
+    []
+  );
+
+  return (
+    <>
+      <EuiTitle>
+        <h2>
+          <FormattedMessage id="console.settingsPage.pageTitle" defaultMessage="Console settings" />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
+        <p>
+          <FormattedMessage
+            id="console.settingsPage.pageDescription"
+            defaultMessage="Customize Console to suit your workflow."
+          />
+        </p>
+      </EuiText>
+
+      {/* GENERAL SETTINGS */}
+      <SettingsGroup
+        title={i18n.translate('console.settingsPage.generalSettingsLabel', {
+          defaultMessage: 'General settings',
+        })}
+      />
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.saveRequestsToHistoryLabel', {
+          defaultMessage: 'Save requests to history',
+        })}
+      >
+        <EuiSwitch
+          checked={isHistoryEnabled}
+          label={isHistoryEnabled ? ON_LABEL : OFF_LABEL}
+          onChange={(e) => toggleSavingToHistory(e.target.checked)}
+        />
+      </SettingsFormRow>
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.enableKeyboardShortcutsLabel', {
+          defaultMessage: 'Keyboard shortcuts',
+        })}
+      >
+        <EuiSwitch
+          data-test-subj="enableKeyboardShortcuts"
+          label={isKeyboardShortcutsEnabled ? ON_LABEL : OFF_LABEL}
+          checked={isKeyboardShortcutsEnabled}
+          onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
+        />
+      </SettingsFormRow>
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.enableAccessibilityOverlayLabel', {
+          defaultMessage: 'Accessibility overlay',
+        })}
+      >
+        <EuiSwitch
+          data-test-subj="enableA11yOverlay"
+          label={isAccessibilityOverlayEnabled ? ON_LABEL : OFF_LABEL}
+          checked={isAccessibilityOverlayEnabled}
+          onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
+        />
+      </SettingsFormRow>
+
+      {/* DISPLAY SETTINGS */}
+      <SettingsGroup
+        title={i18n.translate('console.settingsPage.displaySettingsLabel', {
+          defaultMessage: 'Display',
+        })}
+      />
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.fontSizeLabel', {
+          defaultMessage: 'Font size',
+        })}
+      >
+        <EuiFieldNumber
+          css={{ minWidth: '220px' }}
+          compressed
+          data-test-subj="setting-font-size-input"
+          value={fontSize}
+          min={6}
+          max={50}
+          onChange={(e) => {
+            const val = parseInt(e.target.value, 10);
+            if (!val) return;
+            setFontSize(val);
+          }}
+        />
+      </SettingsFormRow>
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.wrapLongLinesLabel', {
+          defaultMessage: 'Wrap long lines',
+        })}
+      >
+        <EuiSwitch
+          data-test-subj="settingsWrapLines"
+          label={wrapMode ? ON_LABEL : OFF_LABEL}
+          checked={wrapMode}
+          onChange={(e) => setWrapMode(e.target.checked)}
+          id="wrapLines"
+        />
+      </SettingsFormRow>
+      <SettingsFormRow
+        label={i18n.translate('console.settingsPage.tripleQuotesMessage', {
+          defaultMessage: 'Triple quotes in output',
+        })}
+      >
+        <EuiSwitch
+          data-test-subj="tripleQuotes"
+          label={tripleQuotes ? ON_LABEL : OFF_LABEL}
+          checked={tripleQuotes}
+          onChange={(e) => setTripleQuotes(e.target.checked)}
+          id="tripleQuotes"
+        />
+      </SettingsFormRow>
+
+      {/* AUTOCOMPLETE SETTINGS */}
+      <SettingsGroup
+        title={i18n.translate('console.settingsPage.autocompleteSettingsLabel', {
+          defaultMessage: 'Autocomplete',
+        })}
+      />
+      {autoCompleteCheckboxes.map((opts) => (
+        <SettingsFormRow key={opts.id} label={opts.label}>
+          <EuiSwitch
+            data-test-subj={`autocomplete-settings-${opts.id}`}
+            label={opts.checked ? ON_LABEL : OFF_LABEL}
+            checked={opts.checked}
+            onChange={(e) => opts.stateSetter(e.target.checked)}
+          />
+        </SettingsFormRow>
+      ))}
+
+      {/* AUTOCOMPLETE REFRESH SETTINGS */}
+      {(fields || indices || templates || dataStreams) && (
+        <>
+          <SettingsGroup
+            title={i18n.translate('console.settingsPage.autocompleteRefreshSettingsLabel', {
+              defaultMessage: 'Autocomplete refresh',
+            })}
+            description={i18n.translate(
+              'console.settingsPage.autocompleteRefreshSettingsDescription',
+              {
+                defaultMessage:
+                  'Console refreshes autocomplete suggestions by querying Elasticsearch. Use less frequent refreshes to reduce bandwidth costs.',
+              }
+            )}
+          />
+          <SettingsFormRow
+            label={i18n.translate('console.settingsPage.refreshingDataLabel', {
+              defaultMessage: 'Refresh frequency',
+            })}
+          >
+            <EuiSuperSelect
+              css={{ minWidth: '220px' }}
+              compressed
+              options={intervalOptions}
+              valueOfSelected={pollInterval.toString()}
+              onChange={onPollingIntervalChange}
+            />
+          </SettingsFormRow>
+
+          <SettingsFormRow
+            label={i18n.translate('console.settingsPage.manualRefreshLabel', {
+              defaultMessage: 'Manually refresh autocomplete suggestions',
+            })}
+          >
+            <EuiButton
+              iconType="refresh"
+              size="s"
+              data-test-subj="autocompletePolling"
+              id="autocompletePolling"
+              onClick={() => {
+                // Only refresh the currently selected settings.
+                props.refreshAutocompleteSettings({
+                  fields,
+                  indices,
+                  templates,
+                  dataStreams,
+                });
+              }}
+            >
+              <FormattedMessage
+                defaultMessage="Refresh"
+                id="console.settingsPage.refreshButtonLabel"
+              />
+            </EuiButton>
+          </SettingsFormRow>
+        </>
+      )}
+    </>
+  );
+};
diff --git a/src/plugins/console/public/application/components/settings/settings_form_row.tsx b/src/plugins/console/public/application/components/settings/settings_form_row.tsx
new file mode 100644
index 0000000000000..383eabfb93bd2
--- /dev/null
+++ b/src/plugins/console/public/application/components/settings/settings_form_row.tsx
@@ -0,0 +1,33 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow } from '@elastic/eui';
+
+export interface DevToolsSettingsModalProps {
+  label: string;
+  children: React.ReactNode;
+}
+
+export const SettingsFormRow = ({ label, children }: DevToolsSettingsModalProps) => {
+  return (
+    <EuiFormRow fullWidth>
+      <EuiFlexGroup alignItems="center" responsive={false}>
+        <EuiFlexItem>
+          <EuiFlexGroup gutterSize="xs" alignItems="center" responsive={false}>
+            <EuiFlexItem grow={false}>{label}</EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlexItem>
+
+        <EuiFlexItem grow={false}>{children}</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFormRow>
+  );
+};
diff --git a/src/plugins/console/public/application/components/settings/settings_group.tsx b/src/plugins/console/public/application/components/settings/settings_group.tsx
new file mode 100644
index 0000000000000..d6feb8af1c90a
--- /dev/null
+++ b/src/plugins/console/public/application/components/settings/settings_group.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+
+import { EuiTitle, EuiSpacer, EuiText, EuiHorizontalRule } from '@elastic/eui';
+
+export interface DevToolsSettingsModalProps {
+  title: string;
+  description?: string;
+}
+
+export const SettingsGroup = ({ title, description }: DevToolsSettingsModalProps) => {
+  return (
+    <>
+      <EuiSpacer size="l" />
+      <EuiTitle size="xs">
+        <h2>{title}</h2>
+      </EuiTitle>
+      {description && (
+        <>
+          <EuiSpacer size="s" />
+          <EuiText color="subdued">
+            <p>{description}</p>
+          </EuiText>
+        </>
+      )}
+      <EuiHorizontalRule margin="s" />
+    </>
+  );
+};
diff --git a/src/plugins/controls/storybook/main.ts b/src/plugins/console/public/application/components/settings/types.ts
similarity index 85%
rename from src/plugins/controls/storybook/main.ts
rename to src/plugins/console/public/application/components/settings/types.ts
index e3b5b1c6c596a..f524e37124746 100644
--- a/src/plugins/controls/storybook/main.ts
+++ b/src/plugins/console/public/application/components/settings/types.ts
@@ -7,6 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { defaultConfig } from '@kbn/storybook';
-
-module.exports = defaultConfig;
+export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
diff --git a/src/plugins/console/public/application/components/settings_modal.tsx b/src/plugins/console/public/application/components/settings_modal.tsx
deleted file mode 100644
index 9b7740b4affdf..0000000000000
--- a/src/plugins/console/public/application/components/settings_modal.tsx
+++ /dev/null
@@ -1,391 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import _ from 'lodash';
-import React, { Fragment, useState, useCallback } from 'react';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFieldNumber,
-  EuiFormRow,
-  EuiCheckboxGroup,
-  EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
-  EuiModalHeader,
-  EuiModalHeaderTitle,
-  EuiSwitch,
-  EuiSuperSelect,
-} from '@elastic/eui';
-
-import { DevToolsSettings } from '../../services';
-import { unregisterCommands } from '../containers/editor/legacy/console_editor/keyboard_shortcuts';
-import type { SenseEditor } from '../models';
-
-export type AutocompleteOptions = 'fields' | 'indices' | 'templates';
-
-const onceTimeInterval = () =>
-  i18n.translate('console.settingsPage.refreshInterval.onceTimeInterval', {
-    defaultMessage: 'Once, when console loads',
-  });
-
-const everyNMinutesTimeInterval = (value: number) =>
-  i18n.translate('console.settingsPage.refreshInterval.everyNMinutesTimeInterval', {
-    defaultMessage: 'Every {value} {value, plural, one {minute} other {minutes}}',
-    values: { value },
-  });
-
-const everyHourTimeInterval = () =>
-  i18n.translate('console.settingsPage.refreshInterval.everyHourTimeInterval', {
-    defaultMessage: 'Every hour',
-  });
-
-const PRESETS_IN_MINUTES = [0, 1, 10, 20, 60];
-const intervalOptions = PRESETS_IN_MINUTES.map((value) => ({
-  value: (value * 60000).toString(),
-  inputDisplay:
-    value === 0
-      ? onceTimeInterval()
-      : value === 60
-      ? everyHourTimeInterval()
-      : everyNMinutesTimeInterval(value),
-}));
-
-export interface DevToolsSettingsModalProps {
-  onSaveSettings: (newSettings: DevToolsSettings) => void;
-  onClose: () => void;
-  refreshAutocompleteSettings: (selectedSettings: DevToolsSettings['autocomplete']) => void;
-  settings: DevToolsSettings;
-  editorInstance: SenseEditor | null;
-}
-
-export const DevToolsSettingsModal = (props: DevToolsSettingsModalProps) => {
-  const [fontSize, setFontSize] = useState(props.settings.fontSize);
-  const [wrapMode, setWrapMode] = useState(props.settings.wrapMode);
-  const [fields, setFields] = useState(props.settings.autocomplete.fields);
-  const [indices, setIndices] = useState(props.settings.autocomplete.indices);
-  const [templates, setTemplates] = useState(props.settings.autocomplete.templates);
-  const [dataStreams, setDataStreams] = useState(props.settings.autocomplete.dataStreams);
-  const [polling, setPolling] = useState(props.settings.polling);
-  const [pollInterval, setPollInterval] = useState(props.settings.pollInterval);
-  const [tripleQuotes, setTripleQuotes] = useState(props.settings.tripleQuotes);
-  const [isHistoryEnabled, setIsHistoryEnabled] = useState(props.settings.isHistoryEnabled);
-  const [isKeyboardShortcutsEnabled, setIsKeyboardShortcutsEnabled] = useState(
-    props.settings.isKeyboardShortcutsEnabled
-  );
-  const [isAccessibilityOverlayEnabled, setIsAccessibilityOverlayEnabled] = useState(
-    props.settings.isAccessibilityOverlayEnabled
-  );
-
-  const autoCompleteCheckboxes = [
-    {
-      id: 'fields',
-      label: i18n.translate('console.settingsPage.fieldsLabelText', {
-        defaultMessage: 'Fields',
-      }),
-      stateSetter: setFields,
-    },
-    {
-      id: 'indices',
-      label: i18n.translate('console.settingsPage.indicesAndAliasesLabelText', {
-        defaultMessage: 'Indices and aliases',
-      }),
-      stateSetter: setIndices,
-    },
-    {
-      id: 'templates',
-      label: i18n.translate('console.settingsPage.templatesLabelText', {
-        defaultMessage: 'Templates',
-      }),
-      stateSetter: setTemplates,
-    },
-    {
-      id: 'dataStreams',
-      label: i18n.translate('console.settingsPage.dataStreamsLabelText', {
-        defaultMessage: 'Data streams',
-      }),
-      stateSetter: setDataStreams,
-    },
-  ];
-
-  const checkboxIdToSelectedMap = {
-    fields,
-    indices,
-    templates,
-    dataStreams,
-  };
-
-  const onAutocompleteChange = (optionId: AutocompleteOptions) => {
-    const option = _.find(autoCompleteCheckboxes, (item) => item.id === optionId);
-    if (option) {
-      option.stateSetter(!checkboxIdToSelectedMap[optionId]);
-    }
-  };
-
-  function saveSettings() {
-    props.onSaveSettings({
-      fontSize,
-      wrapMode,
-      autocomplete: {
-        fields,
-        indices,
-        templates,
-        dataStreams,
-      },
-      polling,
-      pollInterval,
-      tripleQuotes,
-      isHistoryEnabled,
-      isKeyboardShortcutsEnabled,
-      isAccessibilityOverlayEnabled,
-    });
-  }
-
-  const onPollingIntervalChange = useCallback((value: string) => {
-    const sanitizedValue = parseInt(value, 10);
-
-    setPolling(!!sanitizedValue);
-    setPollInterval(sanitizedValue);
-  }, []);
-
-  const toggleKeyboardShortcuts = useCallback(
-    (isEnabled: boolean) => {
-      if (props.editorInstance) {
-        unregisterCommands(props.editorInstance);
-      }
-
-      setIsKeyboardShortcutsEnabled(isEnabled);
-    },
-    [props.editorInstance]
-  );
-
-  const toggleAccessibilityOverlay = useCallback(
-    (isEnabled: boolean) => setIsAccessibilityOverlayEnabled(isEnabled),
-    []
-  );
-
-  const toggleSavingToHistory = useCallback(
-    (isEnabled: boolean) => setIsHistoryEnabled(isEnabled),
-    []
-  );
-
-  // It only makes sense to show polling options if the user needs to fetch any data.
-  const pollingFields =
-    fields || indices || templates || dataStreams ? (
-      <Fragment>
-        <EuiFormRow
-          label={
-            <FormattedMessage
-              id="console.settingsPage.refreshingDataLabel"
-              defaultMessage="Refresh frequency"
-            />
-          }
-          helpText={
-            <FormattedMessage
-              id="console.settingsPage.refreshingDataDescription"
-              defaultMessage="Console refreshes autocomplete suggestions by querying Elasticsearch.
-              Use less frequent refreshes to reduce bandwidth costs."
-            />
-          }
-        >
-          <EuiSuperSelect
-            options={intervalOptions}
-            valueOfSelected={pollInterval.toString()}
-            onChange={onPollingIntervalChange}
-          />
-        </EuiFormRow>
-
-        <EuiButton
-          data-test-subj="autocompletePolling"
-          id="autocompletePolling"
-          onClick={() => {
-            // Only refresh the currently selected settings.
-            props.refreshAutocompleteSettings({
-              fields,
-              indices,
-              templates,
-              dataStreams,
-            });
-          }}
-        >
-          <FormattedMessage
-            defaultMessage="Refresh autocomplete suggestions"
-            id="console.settingsPage.refreshButtonLabel"
-          />
-        </EuiButton>
-      </Fragment>
-    ) : undefined;
-
-  return (
-    <EuiModal
-      data-test-subj="devToolsSettingsModal"
-      className="conApp__settingsModal"
-      onClose={props.onClose}
-    >
-      <EuiModalHeader>
-        <EuiModalHeaderTitle>
-          <FormattedMessage id="console.settingsPage.pageTitle" defaultMessage="Console settings" />
-        </EuiModalHeaderTitle>
-      </EuiModalHeader>
-
-      <EuiModalBody>
-        <EuiFormRow
-          label={
-            <FormattedMessage id="console.settingsPage.fontSizeLabel" defaultMessage="Font size" />
-          }
-        >
-          <EuiFieldNumber
-            autoFocus
-            data-test-subj="setting-font-size-input"
-            value={fontSize}
-            min={6}
-            max={50}
-            onChange={(e) => {
-              const val = parseInt(e.target.value, 10);
-              if (!val) return;
-              setFontSize(val);
-            }}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow>
-          <EuiSwitch
-            checked={wrapMode}
-            data-test-subj="settingsWrapLines"
-            id="wrapLines"
-            label={
-              <FormattedMessage
-                defaultMessage="Wrap long lines"
-                id="console.settingsPage.wrapLongLinesLabelText"
-              />
-            }
-            onChange={(e) => setWrapMode(e.target.checked)}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow
-          label={
-            <FormattedMessage
-              id="console.settingsPage.jsonSyntaxLabel"
-              defaultMessage="JSON syntax"
-            />
-          }
-        >
-          <EuiSwitch
-            checked={tripleQuotes}
-            data-test-subj="tripleQuotes"
-            id="tripleQuotes"
-            label={
-              <FormattedMessage
-                defaultMessage="Use triple quotes in output"
-                id="console.settingsPage.tripleQuotesMessage"
-              />
-            }
-            onChange={(e) => setTripleQuotes(e.target.checked)}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow
-          label={
-            <FormattedMessage id="console.settingsPage.historyLabel" defaultMessage="History" />
-          }
-        >
-          <EuiSwitch
-            checked={isHistoryEnabled}
-            label={
-              <FormattedMessage
-                defaultMessage="Save requests to history"
-                id="console.settingsPage.saveRequestsToHistoryLabel"
-              />
-            }
-            onChange={(e) => toggleSavingToHistory(e.target.checked)}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow
-          label={
-            <FormattedMessage
-              id="console.settingsPage.keyboardShortcutsLabel"
-              defaultMessage="Keyboard shortcuts"
-            />
-          }
-        >
-          <EuiSwitch
-            checked={isKeyboardShortcutsEnabled}
-            data-test-subj="enableKeyboardShortcuts"
-            label={
-              <FormattedMessage
-                defaultMessage="Enable keyboard shortcuts"
-                id="console.settingsPage.enableKeyboardShortcutsLabel"
-              />
-            }
-            onChange={(e) => toggleKeyboardShortcuts(e.target.checked)}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow
-          label={
-            <FormattedMessage
-              id="console.settingsPage.accessibilityOverlayLabel"
-              defaultMessage="Accessibility overlay"
-            />
-          }
-        >
-          <EuiSwitch
-            data-test-subj="enableA11yOverlay"
-            checked={isAccessibilityOverlayEnabled}
-            label={
-              <FormattedMessage
-                defaultMessage="Enable accessibility overlay"
-                id="console.settingsPage.enableAccessibilityOverlayLabel"
-              />
-            }
-            onChange={(e) => toggleAccessibilityOverlay(e.target.checked)}
-          />
-        </EuiFormRow>
-
-        <EuiFormRow
-          labelType="legend"
-          label={
-            <FormattedMessage
-              id="console.settingsPage.autocompleteLabel"
-              defaultMessage="Autocomplete"
-            />
-          }
-        >
-          <EuiCheckboxGroup
-            options={autoCompleteCheckboxes.map((opts) => {
-              const { stateSetter, ...rest } = opts;
-              return rest;
-            })}
-            idToSelectedMap={checkboxIdToSelectedMap}
-            onChange={(e: unknown) => {
-              onAutocompleteChange(e as AutocompleteOptions);
-            }}
-          />
-        </EuiFormRow>
-
-        {pollingFields}
-      </EuiModalBody>
-
-      <EuiModalFooter>
-        <EuiButtonEmpty data-test-subj="settingsCancelButton" onClick={props.onClose}>
-          <FormattedMessage id="console.settingsPage.cancelButtonLabel" defaultMessage="Cancel" />
-        </EuiButtonEmpty>
-
-        <EuiButton fill data-test-subj="settings-save-button" onClick={saveSettings}>
-          <FormattedMessage id="console.settingsPage.saveButtonLabel" defaultMessage="Save" />
-        </EuiButton>
-      </EuiModalFooter>
-    </EuiModal>
-  );
-};
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/index.ts b/src/plugins/console/public/application/components/shortcuts_popover/index.ts
similarity index 84%
rename from src/plugins/console/public/application/containers/editor/legacy/console_editor/index.ts
rename to src/plugins/console/public/application/components/shortcuts_popover/index.ts
index 3df103aa3be70..67b91a4e6dffb 100644
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/index.ts
+++ b/src/plugins/console/public/application/components/shortcuts_popover/index.ts
@@ -7,5 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { Editor } from './editor';
-export { EditorOutput } from './editor_output';
+export { ShortcutsPopover } from './shortcuts_popover';
diff --git a/src/plugins/console/public/application/components/shortcuts_popover/keys.tsx b/src/plugins/console/public/application/components/shortcuts_popover/keys.tsx
new file mode 100644
index 0000000000000..9a4a0329cbf5c
--- /dev/null
+++ b/src/plugins/console/public/application/components/shortcuts_popover/keys.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiIcon } from '@elastic/eui';
+
+export const KEYS = {
+  keyCtrlCmd: i18n.translate('console.shortcutKeys.keyCtrlCmd', {
+    defaultMessage: 'Ctrl/Cmd',
+  }),
+  keyEnter: i18n.translate('console.shortcutKeys.keyEnter', {
+    defaultMessage: 'Enter',
+  }),
+  keyAltOption: i18n.translate('console.shortcutKeys.keyAltOption', {
+    defaultMessage: 'Alt/Option',
+  }),
+  keyOption: i18n.translate('console.shortcutKeys.keyOption', {
+    defaultMessage: 'Option',
+  }),
+  keyShift: i18n.translate('console.shortcutKeys.keyShift', {
+    defaultMessage: 'Shift',
+  }),
+  keyTab: i18n.translate('console.shortcutKeys.keyTab', {
+    defaultMessage: 'Tab',
+  }),
+  keyEsc: i18n.translate('console.shortcutKeys.keyEsc', {
+    defaultMessage: 'Esc',
+  }),
+  keyUp: (
+    <EuiIcon
+      type={'sortUp'}
+      title={i18n.translate('console.shortcutKeys.keyUpArrow', {
+        defaultMessage: 'Up arrow',
+      })}
+      size="s"
+    />
+  ),
+  keyDown: (
+    <EuiIcon
+      type={'sortDown'}
+      title={i18n.translate('console.shortcutKeys.keyDownArrow', {
+        defaultMessage: 'Down arrow',
+      })}
+      size="s"
+    />
+  ),
+  keySlash: i18n.translate('console.shortcutKeys.keySlash', {
+    defaultMessage: '/',
+  }),
+  keySpace: i18n.translate('console.shortcutKeys.keySpace', {
+    defaultMessage: 'Space',
+  }),
+  keyI: i18n.translate('console.shortcutKeys.keyI', {
+    defaultMessage: 'I',
+  }),
+  keyO: i18n.translate('console.shortcutKeys.keyO', {
+    defaultMessage: 'O',
+  }),
+  keyL: i18n.translate('console.shortcutKeys.keyL', {
+    defaultMessage: 'L',
+  }),
+};
diff --git a/src/plugins/console/public/application/components/shortcuts_popover/shortcut_line.tsx b/src/plugins/console/public/application/components/shortcuts_popover/shortcut_line.tsx
new file mode 100644
index 0000000000000..a57c256ce3ce5
--- /dev/null
+++ b/src/plugins/console/public/application/components/shortcuts_popover/shortcut_line.tsx
@@ -0,0 +1,65 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiCode, EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+
+interface ShortcutLineFlexItemProps {
+  id: string;
+  description: string;
+  keys: any[];
+  alternativeKeys?: any[];
+}
+
+const renderKeys = (keys: string[]) => {
+  return keys.map((key, index) => (
+    <span key={index}>
+      {index > 0 && ' + '}
+      <EuiCode>{key}</EuiCode>
+    </span>
+  ));
+};
+
+export const ShortcutLineFlexItem = ({
+  id,
+  description,
+  keys,
+  alternativeKeys,
+}: ShortcutLineFlexItemProps) => {
+  return (
+    <EuiFlexItem>
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs">
+            {i18n.translate('console.shortcutDescription.' + id, {
+              defaultMessage: description,
+            })}
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiText size="xs">
+            {renderKeys(keys)}
+            {alternativeKeys && (
+              <>
+                <strong>
+                  {' '}
+                  {i18n.translate('console.shortcuts.alternativeKeysOrDivider', {
+                    defaultMessage: 'or',
+                  })}{' '}
+                </strong>
+                {renderKeys(alternativeKeys)}
+              </>
+            )}
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+  );
+};
diff --git a/src/plugins/console/public/application/components/shortcuts_popover/shortcuts_popover.tsx b/src/plugins/console/public/application/components/shortcuts_popover/shortcuts_popover.tsx
new file mode 100644
index 0000000000000..9ceaf13dc5dba
--- /dev/null
+++ b/src/plugins/console/public/application/components/shortcuts_popover/shortcuts_popover.tsx
@@ -0,0 +1,114 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiPopover, EuiTitle, EuiHorizontalRule, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import { ShortcutLineFlexItem } from './shortcut_line';
+import { KEYS } from './keys';
+
+interface ShortcutsPopoverProps {
+  button: any;
+  isOpen: boolean;
+  closePopover: () => void;
+}
+
+export const ShortcutsPopover = ({ button, isOpen, closePopover }: ShortcutsPopoverProps) => {
+  return (
+    <EuiPopover
+      button={button}
+      isOpen={isOpen}
+      closePopover={closePopover}
+      anchorPosition="downRight"
+      data-test-subj="consoleShortcutsPopover"
+    >
+      <EuiTitle size="xxs">
+        <h5>
+          {i18n.translate('console.shortcuts.navigationShortcutsSubtitle', {
+            defaultMessage: 'Navigation shortcuts',
+          })}
+        </h5>
+      </EuiTitle>
+      <EuiHorizontalRule margin="s" />
+      <EuiFlexGroup gutterSize="s" direction="column">
+        <ShortcutLineFlexItem
+          id="goToLineNumber"
+          description="Go to line number"
+          keys={[KEYS.keyCtrlCmd, KEYS.keyL]}
+        />
+      </EuiFlexGroup>
+      <EuiSpacer />
+
+      <EuiTitle size="xxs">
+        <h5>
+          {i18n.translate('console.shortcuts.requestShortcutsSubtitle', {
+            defaultMessage: 'Request shortcuts',
+          })}
+        </h5>
+      </EuiTitle>
+      <EuiHorizontalRule margin="s" />
+      <EuiFlexGroup gutterSize="s" direction="column">
+        <ShortcutLineFlexItem
+          id="autoindentCurrentRequest"
+          description="Auto-indent current request"
+          keys={[KEYS.keyCtrlCmd, KEYS.keyI]}
+        />
+        <ShortcutLineFlexItem
+          id="jumpToNextRequestEnd"
+          description="Jump to next request end"
+          keys={[KEYS.keyCtrlCmd, KEYS.keyDown]}
+        />
+        <ShortcutLineFlexItem
+          id="jumpToPreviousRequestEnd"
+          description="Jump to previous request end"
+          keys={[KEYS.keyCtrlCmd, KEYS.keyUp]}
+        />
+        <ShortcutLineFlexItem
+          id="openDocumentation"
+          description="Open documentation for current request"
+          keys={[KEYS.keyCtrlCmd, KEYS.keySlash]}
+        />
+        <ShortcutLineFlexItem
+          id="runRequest"
+          description="Run current request"
+          keys={[KEYS.keyCtrlCmd, KEYS.keyEnter]}
+        />
+      </EuiFlexGroup>
+      <EuiSpacer />
+
+      <EuiTitle size="xxs">
+        <h5>
+          {i18n.translate('console.shortcuts.autocompleteShortcutsSubtitle', {
+            defaultMessage: 'Autocomplete menu shortcuts',
+          })}
+        </h5>
+      </EuiTitle>
+      <EuiHorizontalRule margin="s" />
+      <EuiFlexGroup gutterSize="s" direction="column">
+        <ShortcutLineFlexItem
+          id="applyCurrentAutocompleteSuggestion"
+          description="Apply current or topmost term in menu"
+          keys={[KEYS.keyEnter]}
+          alternativeKeys={[KEYS.keyTab]}
+        />
+        <ShortcutLineFlexItem
+          id="closeAutocompleteMenu"
+          description="Close autocomplete menu"
+          keys={[KEYS.keyEsc]}
+        />
+        <ShortcutLineFlexItem
+          id="navigateAutocompleteMenu"
+          description="Navigate items in autocomplete menu"
+          keys={[KEYS.keyDown]}
+          alternativeKeys={[KEYS.keyUp]}
+        />
+      </EuiFlexGroup>
+    </EuiPopover>
+  );
+};
diff --git a/src/plugins/console/public/application/components/top_nav_menu.tsx b/src/plugins/console/public/application/components/top_nav_menu.tsx
index cddbe95f8f1b5..2309c01afc18a 100644
--- a/src/plugins/console/public/application/components/top_nav_menu.tsx
+++ b/src/plugins/console/public/application/components/top_nav_menu.tsx
@@ -9,6 +9,7 @@
 
 import React, { FunctionComponent } from 'react';
 import { EuiTabs, EuiTab } from '@elastic/eui';
+import { ConsoleTourStep, ConsoleTourStepProps } from './console_tour_step';
 
 export interface TopNavMenuItem {
   id: string;
@@ -16,28 +17,42 @@ export interface TopNavMenuItem {
   description: string;
   onClick: () => void;
   testId: string;
+  isSelected: boolean;
+  tourStep?: number;
 }
 
 interface Props {
   disabled?: boolean;
   items: TopNavMenuItem[];
+  tourStepProps: ConsoleTourStepProps[];
 }
 
-export const TopNavMenu: FunctionComponent<Props> = ({ items, disabled }) => {
+export const TopNavMenu: FunctionComponent<Props> = ({ items, disabled, tourStepProps }) => {
   return (
-    <EuiTabs size="s">
+    <EuiTabs size="s" bottomBorder={false}>
       {items.map((item, idx) => {
-        return (
+        const tab = (
           <EuiTab
             key={idx}
             disabled={disabled}
             onClick={item.onClick}
             title={item.label}
             data-test-subj={item.testId}
+            isSelected={item.isSelected}
           >
             {item.label}
           </EuiTab>
         );
+
+        if (item.tourStep) {
+          return (
+            <ConsoleTourStep tourStepProps={tourStepProps[item.tourStep - 1]} key={idx}>
+              {tab}
+            </ConsoleTourStep>
+          );
+        }
+
+        return tab;
       })}
     </EuiTabs>
   );
diff --git a/src/plugins/console/public/application/components/variables/index.ts b/src/plugins/console/public/application/components/variables/index.ts
index 108befce39f51..8051ed2ddaa93 100644
--- a/src/plugins/console/public/application/components/variables/index.ts
+++ b/src/plugins/console/public/application/components/variables/index.ts
@@ -7,5 +7,25 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export * from './variables_flyout';
-export * from './utils';
+import React from 'react';
+import { withSuspense } from '@kbn/shared-ux-utility';
+
+export { type Props } from './variables_editor';
+export { type DevToolsVariable } from './types';
+
+/**
+ * The Lazily-loaded `VariablesEditorLazy` component.  Consumers should use `React.Suspense` or
+ * the withSuspense` HOC to load this component.
+ */
+export const VariablesEditorLazy = React.lazy(() =>
+  import('./variables_editor').then(({ VariablesEditor }) => ({
+    default: VariablesEditor,
+  }))
+);
+
+/**
+ * A `VariablesEditor` component that is wrapped by the `withSuspense` HOC. This component can
+ * be used directly by consumers and will load the `VariablesEditorLazy` component lazily with
+ * a predefined fallback and error boundary.
+ */
+export const VariablesEditor = withSuspense(VariablesEditorLazy);
diff --git a/src/plugins/console/public/application/components/variables/types.ts b/src/plugins/console/public/application/components/variables/types.ts
new file mode 100644
index 0000000000000..40a2ac86c361f
--- /dev/null
+++ b/src/plugins/console/public/application/components/variables/types.ts
@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export interface DevToolsVariable {
+  id: string;
+  name: string;
+  value: string;
+}
diff --git a/src/plugins/console/public/application/components/variables/utils.ts b/src/plugins/console/public/application/components/variables/utils.ts
index 50664e0a99cf6..b636b9b0a6266 100644
--- a/src/plugins/console/public/application/components/variables/utils.ts
+++ b/src/plugins/console/public/application/components/variables/utils.ts
@@ -7,38 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { v4 as uuidv4 } from 'uuid';
-import type { DevToolsVariable } from './variables_flyout';
+import { type DevToolsVariable } from './types';
 
-export const editVariable = (
-  name: string,
-  value: string,
-  id: string,
-  variables: DevToolsVariable[]
-) => {
-  const index = variables.findIndex((v) => v.id === id);
-
-  if (index === -1) {
-    return variables;
-  }
-
-  return [
-    ...variables.slice(0, index),
-    { ...variables[index], [name]: value },
-    ...variables.slice(index + 1),
-  ];
+export const editVariable = (newVariable: DevToolsVariable, variables: DevToolsVariable[]) => {
+  return variables.map((variable: DevToolsVariable) => {
+    return variable.id === newVariable.id ? newVariable : variable;
+  });
 };
 
 export const deleteVariable = (variables: DevToolsVariable[], id: string) => {
   return variables.filter((v) => v.id !== id);
 };
 
-export const generateEmptyVariableField = (): DevToolsVariable => ({
-  id: uuidv4(),
-  name: '',
-  value: '',
-});
-
 export const isValidVariableName = (name: string) => {
   /*
    * MUST avoid characters that get URL-encoded, because they'll result in unusable variable names.
diff --git a/src/plugins/console/public/application/components/variables/variables_editor.tsx b/src/plugins/console/public/application/components/variables/variables_editor.tsx
new file mode 100644
index 0000000000000..197fdec7f49c7
--- /dev/null
+++ b/src/plugins/console/public/application/components/variables/variables_editor.tsx
@@ -0,0 +1,255 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { BehaviorSubject } from 'rxjs';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+  EuiTitle,
+  EuiButton,
+  EuiBasicTable,
+  EuiButtonIcon,
+  EuiSpacer,
+  EuiText,
+  EuiCode,
+  useGeneratedHtmlId,
+  EuiConfirmModal,
+  type EuiBasicTableColumn,
+} from '@elastic/eui';
+
+import { VariableEditorForm } from './variables_editor_form';
+import * as utils from './utils';
+import { type DevToolsVariable } from './types';
+
+export interface Props {
+  onSaveVariables: (newVariables: DevToolsVariable[]) => void;
+  variables: [];
+}
+
+export const VariablesEditor = (props: Props) => {
+  const isMounted = useRef(false);
+  const [isAddingVariable, setIsAddingVariable] = useState(false);
+  const [deleteModalForVariable, setDeleteModalForVariable] = useState<string | null>(null);
+  const [variables, setVariables] = useState<DevToolsVariable[]>(props.variables);
+  const deleteModalTitleId = useGeneratedHtmlId();
+
+  // Use a ref to persist the BehaviorSubject across renders
+  const itemIdToExpandedRowMap$ = useRef(new BehaviorSubject<Record<string, React.ReactNode>>({}));
+  // Subscribe to the BehaviorSubject and update local state on change
+  const [itemIdToExpandedRowMap, setItemIdToExpandedRowMap] = useState<
+    Record<string, React.ReactNode>
+  >({});
+  // Clear the expanded row map and dispose all the expanded rows
+  const collapseExpandedRows = () => itemIdToExpandedRowMap$.current.next({});
+
+  // Subscribe to the BehaviorSubject on mount
+  useEffect(() => {
+    const subscription = itemIdToExpandedRowMap$.current.subscribe(setItemIdToExpandedRowMap);
+    return () => subscription.unsubscribe();
+  }, []);
+
+  // Always save variables when they change
+  useEffect(() => {
+    if (isMounted.current) {
+      props.onSaveVariables(variables);
+    } else {
+      isMounted.current = true;
+    }
+  }, [variables, props]);
+
+  const toggleDetails = (variableId: string) => {
+    const currentMap = itemIdToExpandedRowMap$.current.getValue();
+    let itemIdToExpandedRowMapValues = { ...currentMap };
+
+    if (itemIdToExpandedRowMapValues[variableId]) {
+      delete itemIdToExpandedRowMapValues[variableId];
+    } else {
+      // Always close the add variable form when editing a variable
+      setIsAddingVariable(false);
+      // We only allow one expanded row at a time
+      itemIdToExpandedRowMapValues = {};
+      itemIdToExpandedRowMapValues[variableId] = (
+        <VariableEditorForm
+          title={i18n.translate('console.variablesPage.editVariableForm.title', {
+            defaultMessage: 'Edit variable',
+          })}
+          onSubmit={(data: DevToolsVariable) => {
+            const updatedVariables = utils.editVariable(data, variables);
+            setVariables(updatedVariables);
+            collapseExpandedRows();
+          }}
+          onCancel={() => {
+            collapseExpandedRows();
+          }}
+          defaultValue={variables.find((v) => v.id === variableId)}
+        />
+      );
+    }
+
+    // Update the BehaviorSubject with the new state
+    itemIdToExpandedRowMap$.current.next(itemIdToExpandedRowMapValues);
+  };
+
+  const deleteVariable = useCallback(
+    (id: string) => {
+      const updatedVariables = utils.deleteVariable(variables, id);
+      setVariables(updatedVariables);
+      setDeleteModalForVariable(null);
+    },
+    [variables, setDeleteModalForVariable]
+  );
+
+  const onAddVariable = (data: DevToolsVariable) => {
+    setVariables((v: DevToolsVariable[]) => [...v, data]);
+    setIsAddingVariable(false);
+  };
+
+  const columns: Array<EuiBasicTableColumn<DevToolsVariable>> = [
+    {
+      field: 'name',
+      name: i18n.translate('console.variablesPage.variablesTable.columns.variableHeader', {
+        defaultMessage: 'Variable name',
+      }),
+      'data-test-subj': 'variableNameCell',
+      render: (name: string) => {
+        return <EuiCode>{`\$\{${name}\}`}</EuiCode>;
+      },
+    },
+    {
+      field: 'value',
+      name: i18n.translate('console.variablesPage.variablesTable.columns.valueHeader', {
+        defaultMessage: 'Value',
+      }),
+      'data-test-subj': 'variableValueCell',
+      render: (value: string) => <EuiCode>{value}</EuiCode>,
+    },
+    {
+      field: 'id',
+      name: '',
+      width: '40px',
+      isExpander: true,
+      render: (id: string, variable: DevToolsVariable) => {
+        const itemIdToExpandedRowMapValues = { ...itemIdToExpandedRowMap };
+
+        return (
+          <EuiButtonIcon
+            iconType={itemIdToExpandedRowMapValues[id] ? 'arrowUp' : 'pencil'}
+            aria-label={i18n.translate('console.variablesPage.variablesTable.columns.editButton', {
+              defaultMessage: 'Edit {variable}',
+              values: { variable: variable.name },
+            })}
+            color="primary"
+            onClick={() => toggleDetails(id)}
+            data-test-subj="variableEditButton"
+          />
+        );
+      },
+    },
+    {
+      field: 'id',
+      name: '',
+      width: '40px',
+      render: (id: string, variable: DevToolsVariable) => (
+        <EuiButtonIcon
+          iconType="trash"
+          aria-label={i18n.translate('console.variablesPage.variablesTable.columns.deleteButton', {
+            defaultMessage: 'Delete {variable}',
+            values: { variable: variable.name },
+          })}
+          color="danger"
+          onClick={() => setDeleteModalForVariable(id)}
+          data-test-subj="variablesRemoveButton"
+        />
+      ),
+    },
+  ];
+
+  return (
+    <>
+      <EuiTitle>
+        <h2>
+          <FormattedMessage id="console.variablesPage.pageTitle" defaultMessage="Variables" />
+        </h2>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiText color="subdued">
+        <p>
+          <FormattedMessage
+            id="console.variablesPage.pageDescription"
+            defaultMessage="Define reusable placeholders for dynamic values in your queries."
+          />
+        </p>
+      </EuiText>
+      <EuiSpacer size="l" />
+
+      <EuiBasicTable
+        items={variables}
+        columns={columns}
+        itemId="id"
+        responsiveBreakpoint={false}
+        className="conVariablesTable"
+        data-test-subj="variablesTable"
+        itemIdToExpandedRowMap={itemIdToExpandedRowMap}
+        noItemsMessage={i18n.translate('console.variablesPage.table.noItemsMessage', {
+          defaultMessage: 'No variables have been added yet',
+        })}
+      />
+
+      {isAddingVariable && (
+        <VariableEditorForm onSubmit={onAddVariable} onCancel={() => setIsAddingVariable(false)} />
+      )}
+
+      <EuiSpacer size="m" />
+
+      <div>
+        <EuiButton
+          data-test-subj="variablesAddButton"
+          iconType="plusInCircle"
+          onClick={() => {
+            setIsAddingVariable(true);
+            collapseExpandedRows();
+          }}
+          disabled={isAddingVariable}
+        >
+          <FormattedMessage
+            id="console.variablesPage.addButtonLabel"
+            defaultMessage="Add variable"
+          />
+        </EuiButton>
+      </div>
+
+      {deleteModalForVariable && (
+        <EuiConfirmModal
+          aria-labelledby={deleteModalTitleId}
+          title={i18n.translate('console.variablesPage.deleteModal.title', {
+            defaultMessage: 'Are you sure?',
+          })}
+          onCancel={() => setDeleteModalForVariable(null)}
+          onConfirm={() => deleteVariable(deleteModalForVariable)}
+          cancelButtonText={i18n.translate('console.variablesPage.deleteModal.cancelButtonText', {
+            defaultMessage: 'Cancel',
+          })}
+          confirmButtonText={i18n.translate('console.variablesPage.deleteModal.confirmButtonText', {
+            defaultMessage: 'Delete variable',
+          })}
+          buttonColor="danger"
+        >
+          <p>
+            <FormattedMessage
+              id="console.variablesPage.deleteModal.description"
+              defaultMessage="Deleting a variable is irreversible."
+            />
+          </p>
+        </EuiConfirmModal>
+      )}
+    </>
+  );
+};
diff --git a/src/plugins/console/public/application/components/variables/variables_editor_form.tsx b/src/plugins/console/public/application/components/variables/variables_editor_form.tsx
new file mode 100644
index 0000000000000..446aaab0d4e94
--- /dev/null
+++ b/src/plugins/console/public/application/components/variables/variables_editor_form.tsx
@@ -0,0 +1,184 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { v4 as uuidv4 } from 'uuid';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import {
+  EuiTitle,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  EuiSpacer,
+  EuiPanel,
+  EuiButtonEmpty,
+} from '@elastic/eui';
+
+import {
+  useForm,
+  Form,
+  UseField,
+  TextField,
+  FieldConfig,
+  fieldValidators,
+  FormConfig,
+  ValidationFuncArg,
+} from '../../../shared_imports';
+
+import { type DevToolsVariable } from './types';
+import { isValidVariableName } from './utils';
+
+export interface VariableEditorFormProps {
+  onSubmit: (data: DevToolsVariable) => void;
+  onCancel: () => void;
+  defaultValue?: DevToolsVariable;
+  title?: string;
+}
+
+const fieldsConfig: Record<string, FieldConfig> = {
+  variableName: {
+    label: i18n.translate('console.variablesPage.form.variableNameFieldLabel', {
+      defaultMessage: 'Variable name',
+    }),
+    validations: [
+      {
+        validator: ({ value }: ValidationFuncArg<any, any>) => {
+          if (value.trim() === '') {
+            return {
+              message: i18n.translate('console.variablesPage.form.variableNameRequiredLabel', {
+                defaultMessage: 'This is a required field',
+              }),
+            };
+          }
+
+          if (!isValidVariableName(value)) {
+            return {
+              message: i18n.translate('console.variablesPage.form.variableNameInvalidLabel', {
+                defaultMessage: 'Only letters, numbers and underscores are allowed',
+              }),
+            };
+          }
+        },
+      },
+    ],
+  },
+  value: {
+    label: i18n.translate('console.variablesPage.form.valueFieldLabel', {
+      defaultMessage: 'Value',
+    }),
+    validations: [
+      {
+        validator: fieldValidators.emptyField(
+          i18n.translate('console.variablesPage.form.valueRequiredLabel', {
+            defaultMessage: 'Value is required',
+          })
+        ),
+      },
+    ],
+  },
+};
+
+export const VariableEditorForm = (props: VariableEditorFormProps) => {
+  const onSubmit: FormConfig['onSubmit'] = async (data, isValid) => {
+    if (isValid) {
+      props.onSubmit({
+        ...props.defaultValue,
+        ...data,
+        ...(props.defaultValue ? {} : { id: uuidv4() }),
+      } as DevToolsVariable);
+    }
+  };
+
+  const { form } = useForm({ onSubmit, defaultValue: props.defaultValue });
+
+  return (
+    <>
+      <EuiPanel
+        paddingSize="l"
+        hasShadow={false}
+        borderRadius="none"
+        grow={false}
+        css={{ width: '100%' }}
+      >
+        <EuiTitle size="xs">
+          <h2>
+            {props.title ?? (
+              <FormattedMessage
+                defaultMessage="Add a new variable"
+                id="console.variablesPage.addNewVariableTitle"
+              />
+            )}
+          </h2>
+        </EuiTitle>
+        <EuiSpacer size="l" />
+
+        <Form form={form}>
+          <UseField
+            config={fieldsConfig.variableName}
+            path="name"
+            component={TextField}
+            componentProps={{
+              euiFieldProps: {
+                'data-test-subj': 'nameField',
+                placeholder: i18n.translate('console.variablesPage.form.namePlaceholderLabel', {
+                  defaultMessage: 'exampleName',
+                }),
+                prepend: '${',
+                append: '}',
+              },
+            }}
+          />
+
+          <UseField
+            config={fieldsConfig.value}
+            path="value"
+            component={TextField}
+            componentProps={{
+              euiFieldProps: {
+                'data-test-subj': 'valueField',
+                placeholder: i18n.translate('console.variablesPage.form.valuePlaceholderLabel', {
+                  defaultMessage: 'exampleValue',
+                }),
+              },
+            }}
+          />
+
+          <EuiSpacer size="l" />
+
+          <EuiFlexGroup justifyContent="flexEnd">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty onClick={() => props.onCancel()}>
+                <FormattedMessage
+                  id="console.variablesPage.addNew.cancelButton"
+                  defaultMessage="Cancel"
+                />
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill
+                iconType="save"
+                onClick={form.submit}
+                data-test-subj="addNewVariableButton"
+              >
+                <FormattedMessage
+                  id="console.variablesPage.addNew.submitButton"
+                  defaultMessage="Save changes"
+                />
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </Form>
+      </EuiPanel>
+    </>
+  );
+};
diff --git a/src/plugins/console/public/application/components/variables/variables_flyout.tsx b/src/plugins/console/public/application/components/variables/variables_flyout.tsx
deleted file mode 100644
index 9211d2a7e524f..0000000000000
--- a/src/plugins/console/public/application/components/variables/variables_flyout.tsx
+++ /dev/null
@@ -1,215 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useState, useCallback, ChangeEvent, FormEvent } from 'react';
-import { i18n } from '@kbn/i18n';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import {
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiTitle,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButton,
-  EuiButtonEmpty,
-  EuiBasicTable,
-  EuiFieldText,
-  useGeneratedHtmlId,
-  EuiForm,
-  EuiFormRow,
-  EuiButtonIcon,
-  EuiSpacer,
-  EuiText,
-  type EuiBasicTableColumn,
-} from '@elastic/eui';
-
-import * as utils from './utils';
-
-export interface DevToolsVariablesFlyoutProps {
-  onClose: () => void;
-  onSaveVariables: (newVariables: DevToolsVariable[]) => void;
-  variables: [];
-}
-
-export interface DevToolsVariable {
-  id: string;
-  name: string;
-  value: string;
-}
-
-export const DevToolsVariablesFlyout = (props: DevToolsVariablesFlyoutProps) => {
-  const [variables, setVariables] = useState<DevToolsVariable[]>(props.variables);
-  const formId = useGeneratedHtmlId({ prefix: '__console' });
-
-  const addNewVariable = useCallback(() => {
-    setVariables((v) => [...v, utils.generateEmptyVariableField()]);
-  }, []);
-
-  const deleteVariable = useCallback(
-    (id: string) => {
-      const updatedVariables = utils.deleteVariable(variables, id);
-      setVariables(updatedVariables);
-    },
-    [variables]
-  );
-
-  const onSubmit = useCallback(
-    (e: FormEvent<HTMLFormElement>) => {
-      e.preventDefault();
-      props.onSaveVariables(variables.filter(({ name, value }) => name.trim() && value));
-    },
-    [props, variables]
-  );
-
-  const onChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>, id: string) => {
-      const { name, value } = event.target;
-      const editedVariables = utils.editVariable(name, value, id, variables);
-      setVariables(editedVariables);
-    },
-    [variables]
-  );
-
-  const columns: Array<EuiBasicTableColumn<DevToolsVariable>> = [
-    {
-      field: 'name',
-      name: i18n.translate('console.variablesPage.variablesTable.columns.variableHeader', {
-        defaultMessage: 'Variable name',
-      }),
-      render: (name, { id }) => {
-        const isInvalid = !utils.isValidVariableName(name);
-        return (
-          <EuiFormRow
-            isInvalid={isInvalid}
-            error={[
-              <FormattedMessage
-                id="console.variablesPage.variablesTable.variableInputError.validCharactersText"
-                defaultMessage="Only letters, numbers and underscores are allowed"
-              />,
-            ]}
-            fullWidth={true}
-            css={{ flexGrow: 1 }}
-          >
-            <EuiFieldText
-              data-test-subj="variablesNameInput"
-              name="name"
-              value={name}
-              onChange={(e) => onChange(e, id)}
-              isInvalid={isInvalid}
-              fullWidth={true}
-              aria-label={i18n.translate(
-                'console.variablesPage.variablesTable.variableInput.ariaLabel',
-                {
-                  defaultMessage: 'Variable name',
-                }
-              )}
-            />
-          </EuiFormRow>
-        );
-      },
-    },
-    {
-      field: 'value',
-      name: i18n.translate('console.variablesPage.variablesTable.columns.valueHeader', {
-        defaultMessage: 'Value',
-      }),
-      render: (value, { id }) => (
-        <EuiFieldText
-          data-test-subj="variablesValueInput"
-          name="value"
-          onChange={(e) => onChange(e, id)}
-          value={value}
-          aria-label={i18n.translate('console.variablesPage.variablesTable.valueInput.ariaLabel', {
-            defaultMessage: 'Variable value',
-          })}
-        />
-      ),
-    },
-    {
-      field: 'id',
-      name: '',
-      width: '5%',
-      render: (id: string) => (
-        <EuiButtonIcon
-          iconType="trash"
-          aria-label="Delete"
-          color="danger"
-          onClick={() => deleteVariable(id)}
-          data-test-subj="variablesRemoveButton"
-        />
-      ),
-    },
-  ];
-
-  return (
-    <EuiFlyout onClose={props.onClose}>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle>
-          <h2>
-            <FormattedMessage id="console.variablesPage.pageTitle" defaultMessage="Variables" />
-          </h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiText color="subdued">
-          <p>
-            <FormattedMessage
-              id="console.variablesPage.descriptionText"
-              defaultMessage="Define variables and use them in your requests in the form of {variable}."
-              values={{
-                variable: (
-                  <code>
-                    <FormattedMessage
-                      id="console.variablesPage.descriptionText.variableNameText"
-                      defaultMessage="{variableName}"
-                      values={{
-                        variableName: '${variableName}',
-                      }}
-                    />
-                  </code>
-                ),
-              }}
-            />
-          </p>
-        </EuiText>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <EuiForm id={formId} component="form" onSubmit={onSubmit}>
-          <EuiBasicTable items={variables} columns={columns} />
-          <EuiButtonEmpty
-            data-test-subj="variablesAddButton"
-            iconType="plus"
-            onClick={addNewVariable}
-          >
-            <FormattedMessage id="console.variablesPage.addButtonLabel" defaultMessage="Add" />
-          </EuiButtonEmpty>
-        </EuiForm>
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup justifyContent="flexEnd">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty data-test-subj="variablesCancelButton" onClick={props.onClose}>
-              <FormattedMessage
-                id="console.variablesPage.cancelButtonLabel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton fill data-test-subj="variablesSaveButton" type="submit" form={formId}>
-              <FormattedMessage id="console.variablesPage.saveButtonLabel" defaultMessage="Save" />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
-  );
-};
diff --git a/src/plugins/console/public/application/components/welcome_panel.tsx b/src/plugins/console/public/application/components/welcome_panel.tsx
deleted file mode 100644
index 967d173821e65..0000000000000
--- a/src/plugins/console/public/application/components/welcome_panel.tsx
+++ /dev/null
@@ -1,167 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { FormattedMessage } from '@kbn/i18n-react';
-
-import {
-  EuiFlyout,
-  EuiFlyoutHeader,
-  EuiFlyoutBody,
-  EuiTitle,
-  EuiButton,
-  EuiText,
-  EuiFlyoutFooter,
-  EuiCode,
-} from '@elastic/eui';
-import EditorExample from './editor_example';
-import * as examples from '../../../common/constants/welcome_panel';
-
-interface Props {
-  onDismiss: () => void;
-}
-
-export function WelcomePanel(props: Props) {
-  return (
-    <EuiFlyout
-      onClose={props.onDismiss}
-      data-test-subj="welcomePanel"
-      size="m"
-      maxWidth={0}
-      ownFocus={false}
-    >
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>
-            <FormattedMessage
-              id="console.welcomePage.pageTitle"
-              defaultMessage="Send requests with Console"
-            />
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <EuiText>
-          <p>
-            <FormattedMessage
-              id="console.welcomePage.quickIntroDescription"
-              defaultMessage="Console understands commands in a cURL-like syntax. Here is a request to the Elasticsearch _search API."
-            />
-          </p>
-          <EditorExample panel="welcome-example-1" />
-          <p>
-            <FormattedMessage
-              id="console.welcomePage.kibanaAPIsDescription"
-              defaultMessage="To send a request to a Kibana API, prefix the path with {kibanaApiPrefix}."
-              values={{
-                kibanaApiPrefix: <EuiCode>kbn:</EuiCode>,
-              }}
-            />
-          </p>
-          <EditorExample
-            panel="welcome-example-2"
-            example={examples.kibanaApiExample}
-            linesOfExampleCode={2}
-          />
-          <h4>
-            <FormattedMessage
-              id="console.welcomePage.sendMultipleRequestsTitle"
-              defaultMessage="Send multiple requests"
-            />
-          </h4>
-          <p>
-            <FormattedMessage
-              id="console.welcomePage.sendMultipleRequestsDescription"
-              defaultMessage="Select multiple requests and send them together. You'll get responses to all your requests, regardless of whether they succeed or fail."
-            />
-          </p>
-          <EditorExample
-            panel="welcome-example-3"
-            example={examples.multipleRequestsExample}
-            linesOfExampleCode={22}
-            mode="output"
-          />
-
-          <h4>
-            <FormattedMessage
-              id="console.welcomePage.addCommentsTitle"
-              defaultMessage="Add comments in request bodies"
-            />
-          </h4>
-          <p>
-            <FormattedMessage
-              id="console.welcomePage.addCommentsDescription"
-              defaultMessage="To add a single-line comment, use {hash} or {doubleSlash}. For a multiline comment, mark the beginning with {slashAsterisk} and the end with {asteriskSlash}."
-              values={{
-                hash: <EuiCode>#</EuiCode>,
-                doubleSlash: <EuiCode>//</EuiCode>,
-                slashAsterisk: <EuiCode>/*</EuiCode>,
-                asteriskSlash: <EuiCode>*/</EuiCode>,
-              }}
-            />
-          </p>
-          <EditorExample
-            panel="welcome-example-4"
-            example={examples.commentsExample}
-            linesOfExampleCode={14}
-          />
-          <h4>
-            <FormattedMessage
-              id="console.welcomePage.useVariablesTitle"
-              defaultMessage="Reuse values with variables"
-            />
-          </h4>
-          <p>
-            <FormattedMessage
-              id="console.welcomePage.useVariablesDescription"
-              defaultMessage="Define variables in Console, and then use them in your requests in the form of {variableName}."
-              values={{
-                // use html tags to render the curly braces
-                variableName: <EuiCode>$&#123;variableName&#125;</EuiCode>,
-              }}
-            />
-          </p>
-
-          <ol>
-            <li>
-              <FormattedMessage
-                id="console.welcomePage.useVariables.step1"
-                defaultMessage="Click {variableText}, and then enter the variable name and value."
-                values={{
-                  variableText: <strong>Variables</strong>,
-                }}
-              />
-            </li>
-            <li>
-              <FormattedMessage
-                id="console.welcomePage.useVariables.step2"
-                defaultMessage="Refer to variables in the paths and bodies of your requests as many times as you like."
-              />
-            </li>
-          </ol>
-          <EditorExample
-            panel="welcome-example-5"
-            example={examples.variablesExample}
-            linesOfExampleCode={9}
-          />
-        </EuiText>
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiButton
-          fill={true}
-          fullWidth={false}
-          data-test-subj="help-close-button"
-          onClick={props.onDismiss}
-        >
-          <FormattedMessage id="console.welcomePage.closeButtonLabel" defaultMessage="Dismiss" />
-        </EuiButton>
-      </EuiFlyoutFooter>
-    </EuiFlyout>
-  );
-}
diff --git a/src/plugins/console/public/application/containers/config/config.tsx b/src/plugins/console/public/application/containers/config/config.tsx
new file mode 100644
index 0000000000000..503fdbd9c7354
--- /dev/null
+++ b/src/plugins/console/public/application/containers/config/config.tsx
@@ -0,0 +1,47 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
+
+import { Settings } from './settings';
+import { Variables } from './variables';
+
+export interface Props {
+  isVerticalLayout: boolean;
+}
+
+export function Config({ isVerticalLayout }: Props) {
+  return (
+    <EuiPanel
+      color="subdued"
+      paddingSize="l"
+      hasShadow={false}
+      borderRadius="none"
+      css={{ height: '100%' }}
+      data-test-subj="consoleConfigPanel"
+    >
+      <EuiFlexGroup
+        gutterSize="xl"
+        direction={isVerticalLayout ? 'column' : 'row'}
+        // Turn off default responsiveness
+        responsive={false}
+      >
+        <EuiFlexItem>
+          <Settings />
+          <EuiSpacer size="m" />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <Variables />
+          <EuiSpacer size="m" />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/src/plugins/console/public/application/containers/editor/utilities/index.ts b/src/plugins/console/public/application/containers/config/index.ts
similarity index 93%
rename from src/plugins/console/public/application/containers/editor/utilities/index.ts
rename to src/plugins/console/public/application/containers/config/index.ts
index 7561f02006235..b582701ab4481 100644
--- a/src/plugins/console/public/application/containers/editor/utilities/index.ts
+++ b/src/plugins/console/public/application/containers/config/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export * from './output_data';
+export { Config } from './config';
diff --git a/src/plugins/console/public/application/containers/settings.tsx b/src/plugins/console/public/application/containers/config/settings.tsx
similarity index 88%
rename from src/plugins/console/public/application/containers/settings.tsx
rename to src/plugins/console/public/application/containers/config/settings.tsx
index 2c952f4c5d7f9..d5e10f4d2c337 100644
--- a/src/plugins/console/public/application/containers/settings.tsx
+++ b/src/plugins/console/public/application/containers/config/settings.tsx
@@ -9,11 +9,10 @@
 
 import React from 'react';
 
-import { AutocompleteOptions, DevToolsSettingsModal } from '../components';
+import { AutocompleteOptions, SettingsEditor } from '../../components/settings';
 
-import { useServicesContext, useEditorActionContext } from '../contexts';
-import { DevToolsSettings, Settings as SettingsService } from '../../services';
-import type { SenseEditor } from '../models';
+import { useServicesContext, useEditorActionContext } from '../../contexts';
+import { DevToolsSettings, Settings as SettingsService } from '../../../services';
 
 const getAutocompleteDiff = (
   newSettings: DevToolsSettings,
@@ -25,12 +24,7 @@ const getAutocompleteDiff = (
   }) as AutocompleteOptions[];
 };
 
-export interface Props {
-  onClose: () => void;
-  editorInstance: SenseEditor | null;
-}
-
-export function Settings({ onClose, editorInstance }: Props) {
+export function Settings() {
   const {
     services: { settings, autocompleteInfo },
   } = useServicesContext();
@@ -92,18 +86,15 @@ export function Settings({ onClose, editorInstance }: Props) {
       type: 'updateSettings',
       payload: newSettings,
     });
-    onClose();
   };
 
   return (
-    <DevToolsSettingsModal
-      onClose={onClose}
+    <SettingsEditor
       onSaveSettings={onSaveSettings}
       refreshAutocompleteSettings={(selectedSettings) =>
         refreshAutocompleteSettings(settings, selectedSettings)
       }
       settings={settings.toJSON()}
-      editorInstance={editorInstance}
     />
   );
 }
diff --git a/src/plugins/console/public/application/containers/variables.tsx b/src/plugins/console/public/application/containers/config/variables.tsx
similarity index 66%
rename from src/plugins/console/public/application/containers/variables.tsx
rename to src/plugins/console/public/application/containers/config/variables.tsx
index 54e191d04a9de..32b9615f529aa 100644
--- a/src/plugins/console/public/application/containers/variables.tsx
+++ b/src/plugins/console/public/application/containers/config/variables.tsx
@@ -8,27 +8,22 @@
  */
 
 import React from 'react';
-import { DevToolsVariablesFlyout, DevToolsVariable } from '../components';
-import { useServicesContext } from '../contexts';
-import { StorageKeys } from '../../services';
-import { DEFAULT_VARIABLES } from '../../../common/constants';
+import { type DevToolsVariable, VariablesEditor } from '../../components/variables';
+import { useServicesContext } from '../../contexts';
+import { StorageKeys } from '../../../services';
+import { DEFAULT_VARIABLES } from '../../../../common/constants';
 
-interface VariablesProps {
-  onClose: () => void;
-}
-
-export function Variables({ onClose }: VariablesProps) {
+export function Variables() {
   const {
     services: { storage },
   } = useServicesContext();
 
   const onSaveVariables = (newVariables: DevToolsVariable[]) => {
     storage.set(StorageKeys.VARIABLES, newVariables);
-    onClose();
   };
+
   return (
-    <DevToolsVariablesFlyout
-      onClose={onClose}
+    <VariablesEditor
       onSaveVariables={onSaveVariables}
       variables={storage.get(StorageKeys.VARIABLES, DEFAULT_VARIABLES)}
     />
diff --git a/src/plugins/console/public/application/containers/console_history/console_history.tsx b/src/plugins/console/public/application/containers/console_history/console_history.tsx
deleted file mode 100644
index 220e0b6a998aa..0000000000000
--- a/src/plugins/console/public/application/containers/console_history/console_history.tsx
+++ /dev/null
@@ -1,242 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useCallback, useEffect, useMemo, useState, useRef } from 'react';
-import { i18n } from '@kbn/i18n';
-import { memoize } from 'lodash';
-import moment from 'moment';
-import {
-  keys,
-  EuiSpacer,
-  EuiIcon,
-  EuiTitle,
-  EuiFlexItem,
-  EuiFlexGroup,
-  EuiButtonEmpty,
-  EuiButton,
-} from '@elastic/eui';
-
-import { useServicesContext } from '../../contexts';
-import { HistoryViewer } from './history_viewer';
-import { HistoryViewer as HistoryViewerMonaco } from './history_viewer_monaco';
-import { useEditorReadContext } from '../../contexts/editor_context';
-import { useRestoreRequestFromHistory } from '../../hooks';
-
-interface Props {
-  close: () => void;
-}
-
-const CHILD_ELEMENT_PREFIX = 'historyReq';
-
-export function ConsoleHistory({ close }: Props) {
-  const {
-    services: { history },
-    config: { isMonacoEnabled },
-  } = useServicesContext();
-
-  const { settings: readOnlySettings } = useEditorReadContext();
-
-  const [requests, setPastRequests] = useState<any[]>(history.getHistory());
-
-  const clearHistory = useCallback(() => {
-    history.clearHistory();
-    setPastRequests(history.getHistory());
-  }, [history]);
-
-  const listRef = useRef<HTMLUListElement | null>(null);
-
-  const [viewingReq, setViewingReq] = useState<any>(null);
-  const [selectedIndex, setSelectedIndex] = useState<number>(0);
-  const selectedReq = useRef<any>(null);
-
-  const describeReq = useMemo(() => {
-    const _describeReq = (req: { endpoint: string; time: string }) => {
-      const endpoint = req.endpoint;
-      const date = moment(req.time);
-
-      let formattedDate = date.format('MMM D');
-      if (date.diff(moment(), 'days') > -7) {
-        formattedDate = date.fromNow();
-      }
-
-      return `${endpoint} (${formattedDate})`;
-    };
-
-    (_describeReq as any).cache = new WeakMap();
-
-    return memoize(_describeReq);
-  }, []);
-
-  const scrollIntoView = useCallback((idx: number) => {
-    const activeDescendant = listRef.current!.querySelector(`#${CHILD_ELEMENT_PREFIX}${idx}`);
-    if (activeDescendant) {
-      activeDescendant.scrollIntoView();
-    }
-  }, []);
-
-  const initialize = useCallback(() => {
-    const nextSelectedIndex = 0;
-    (describeReq as any).cache = new WeakMap();
-    setViewingReq(requests[nextSelectedIndex]);
-    selectedReq.current = requests[nextSelectedIndex];
-    setSelectedIndex(nextSelectedIndex);
-    scrollIntoView(nextSelectedIndex);
-  }, [describeReq, requests, scrollIntoView]);
-
-  const clear = () => {
-    clearHistory();
-    initialize();
-  };
-
-  const restoreRequestFromHistory = useRestoreRequestFromHistory(isMonacoEnabled);
-
-  useEffect(() => {
-    initialize();
-  }, [initialize]);
-
-  useEffect(() => {
-    const done = history.change(setPastRequests);
-    return () => done();
-  }, [history]);
-
-  /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role,jsx-a11y/click-events-have-key-events */
-  return (
-    <>
-      <div className="conHistory">
-        <EuiTitle size="s">
-          <h2>{i18n.translate('console.historyPage.pageTitle', { defaultMessage: 'History' })}</h2>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <div className="conHistory__body">
-          <ul
-            ref={listRef}
-            onKeyDown={(ev: React.KeyboardEvent) => {
-              if (ev.key === keys.ENTER) {
-                restoreRequestFromHistory(selectedReq.current);
-                return;
-              }
-
-              let currentIdx = selectedIndex;
-
-              if (ev.key === keys.ARROW_UP) {
-                ev.preventDefault();
-                --currentIdx;
-              } else if (ev.key === keys.ARROW_DOWN) {
-                ev.preventDefault();
-                ++currentIdx;
-              }
-
-              const nextSelectedIndex = Math.min(Math.max(0, currentIdx), requests.length - 1);
-
-              setViewingReq(requests[nextSelectedIndex]);
-              selectedReq.current = requests[nextSelectedIndex];
-              setSelectedIndex(nextSelectedIndex);
-              scrollIntoView(nextSelectedIndex);
-            }}
-            role="listbox"
-            className="list-group conHistory__reqs"
-            tabIndex={0}
-            aria-activedescendant={`${CHILD_ELEMENT_PREFIX}${selectedIndex}`}
-            aria-label={i18n.translate('console.historyPage.requestListAriaLabel', {
-              defaultMessage: 'History of sent requests',
-            })}
-          >
-            {requests.map((req, idx) => {
-              const reqDescription = describeReq(req);
-              const isSelected = viewingReq === req;
-              return (
-                // Ignore a11y issues on li's
-                <li
-                  key={idx}
-                  id={`${CHILD_ELEMENT_PREFIX}${idx}`}
-                  className={`list-group-item conHistory__req ${
-                    isSelected ? 'conHistory__req-selected' : ''
-                  }`}
-                  onClick={() => {
-                    setViewingReq(req);
-                    selectedReq.current = req;
-                    setSelectedIndex(idx);
-                  }}
-                  role="option"
-                  onMouseEnter={() => setViewingReq(req)}
-                  onMouseLeave={() => setViewingReq(selectedReq.current)}
-                  onDoubleClick={() => restoreRequestFromHistory(selectedReq.current)}
-                  aria-label={i18n.translate('console.historyPage.itemOfRequestListAriaLabel', {
-                    defaultMessage: 'Request: {historyItem}',
-                    values: { historyItem: reqDescription },
-                  })}
-                  aria-selected={isSelected}
-                >
-                  {reqDescription}
-                  <span className="conHistory__reqIcon">
-                    <EuiIcon type="arrowRight" />
-                  </span>
-                </li>
-              );
-            })}
-          </ul>
-
-          <div className="conHistory__body__spacer" />
-
-          {isMonacoEnabled ? (
-            <HistoryViewerMonaco settings={readOnlySettings} req={viewingReq} />
-          ) : (
-            <HistoryViewer settings={readOnlySettings} req={viewingReq} />
-          )}
-        </div>
-
-        <EuiSpacer size="s" />
-
-        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              data-test-subj="consoleClearHistoryButton"
-              color="danger"
-              onClick={() => clear()}
-            >
-              {i18n.translate('console.historyPage.clearHistoryButtonLabel', {
-                defaultMessage: 'Clear',
-              })}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiButtonEmpty
-                  data-test-subj="consoleHistoryCloseButton"
-                  color="primary"
-                  onClick={() => close()}
-                >
-                  {i18n.translate('console.historyPage.closehistoryButtonLabel', {
-                    defaultMessage: 'Close',
-                  })}
-                </EuiButtonEmpty>
-              </EuiFlexItem>
-
-              <EuiFlexItem grow={false}>
-                <EuiButton
-                  data-test-subj="consoleHistoryApplyButton"
-                  color="primary"
-                  disabled={!selectedReq}
-                  onClick={() => restoreRequestFromHistory(selectedReq.current)}
-                >
-                  {i18n.translate('console.historyPage.applyHistoryButtonLabel', {
-                    defaultMessage: 'Apply',
-                  })}
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </div>
-      <EuiSpacer size="s" />
-    </>
-  );
-}
diff --git a/src/plugins/console/public/application/containers/console_history/history_viewer.tsx b/src/plugins/console/public/application/containers/console_history/history_viewer.tsx
deleted file mode 100644
index 92d58e557cd89..0000000000000
--- a/src/plugins/console/public/application/containers/console_history/history_viewer.tsx
+++ /dev/null
@@ -1,61 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useEffect, useRef } from 'react';
-import { i18n } from '@kbn/i18n';
-
-import { DevToolsSettings } from '../../../services';
-import { subscribeResizeChecker } from '../editor/legacy/subscribe_console_resize_checker';
-
-import * as InputMode from '../../models/legacy_core_editor/mode/input';
-const inputMode = new InputMode.Mode();
-import * as editor from '../../models/legacy_core_editor';
-import { applyCurrentSettings } from '../editor/legacy/console_editor/apply_editor_settings';
-import { formatRequestBodyDoc } from '../../../lib/utils';
-
-interface Props {
-  settings: DevToolsSettings;
-  req: { method: string; endpoint: string; data: string; time: string } | null;
-}
-
-export function HistoryViewer({ settings, req }: Props) {
-  const divRef = useRef<HTMLDivElement | null>(null);
-  const viewerRef = useRef<editor.CustomAceEditor | null>(null);
-
-  useEffect(() => {
-    const viewer = editor.createReadOnlyAceEditor(divRef.current!);
-    viewerRef.current = viewer;
-    const unsubscribe = subscribeResizeChecker(divRef.current!, viewer);
-    return () => unsubscribe();
-  }, []);
-
-  useEffect(() => {
-    applyCurrentSettings(viewerRef.current!, settings);
-  }, [settings]);
-
-  if (viewerRef.current) {
-    const { current: viewer } = viewerRef;
-    if (req) {
-      const indent = true;
-      const formattedData = req.data ? formatRequestBodyDoc([req.data], indent).data : '';
-      const s = req.method + ' ' + req.endpoint + '\n' + formattedData;
-      viewer.update(s, inputMode);
-      viewer.clearSelection();
-    } else {
-      viewer.update(
-        i18n.translate('console.historyPage.noHistoryTextMessage', {
-          defaultMessage: 'No history available',
-        }),
-        inputMode
-      );
-    }
-  }
-
-  return <div className="conHistory__viewer" ref={divRef} />;
-}
diff --git a/src/plugins/console/public/application/containers/editor/monaco/components/context_menu/context_menu.tsx b/src/plugins/console/public/application/containers/editor/components/context_menu/context_menu.tsx
similarity index 90%
rename from src/plugins/console/public/application/containers/editor/monaco/components/context_menu/context_menu.tsx
rename to src/plugins/console/public/application/containers/editor/components/context_menu/context_menu.tsx
index 34001018900b5..3860f0b7bc704 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/components/context_menu/context_menu.tsx
+++ b/src/plugins/console/public/application/containers/editor/components/context_menu/context_menu.tsx
@@ -9,7 +9,7 @@
 
 import React, { useState } from 'react';
 import {
-  EuiIcon,
+  EuiButtonIcon,
   EuiContextMenuPanel,
   EuiContextMenuItem,
   EuiPopover,
@@ -18,16 +18,17 @@ import {
   EuiLink,
   EuiLoadingSpinner,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { NotificationsSetup } from '@kbn/core/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { LanguageSelectorModal } from './language_selector_modal';
-import { convertRequestToLanguage } from '../../../../../../services';
+import { convertRequestToLanguage } from '../../../../../services';
 import type { EditorRequest } from '../../types';
 
-import { useServicesContext } from '../../../../../contexts';
-import { StorageKeys } from '../../../../../../services';
-import { DEFAULT_LANGUAGE, AVAILABLE_LANGUAGES } from '../../../../../../../common/constants';
+import { useServicesContext } from '../../../../contexts';
+import { StorageKeys } from '../../../../../services';
+import { DEFAULT_LANGUAGE, AVAILABLE_LANGUAGES } from '../../../../../../common/constants';
 
 interface Props {
   getRequests: () => Promise<EditorRequest[]>;
@@ -36,6 +37,20 @@ interface Props {
   notifications: NotificationsSetup;
 }
 
+const styles = {
+  // Remove the default underline on hover for the context menu items since it
+  // will also be applied to the language selector button, and apply it only to
+  // the text in the context menu item.
+  button: css`
+    &:hover {
+      text-decoration: none !important;
+      .languageSelector {
+        text-decoration: underline;
+      }
+    }
+  `,
+};
+
 const DELAY_FOR_HIDING_SPINNER = 500;
 
 const getLanguageLabelByValue = (value: string) => {
@@ -158,15 +173,15 @@ export const ContextMenu = ({
   };
 
   const button = (
-    <EuiLink
+    <EuiButtonIcon
       onClick={() => setIsPopoverOpen((prev) => !prev)}
       data-test-subj="toggleConsoleMenu"
       aria-label={i18n.translate('console.requestOptionsButtonAriaLabel', {
         defaultMessage: 'Request options',
       })}
-    >
-      <EuiIcon type="boxesVertical" />
-    </EuiLink>
+      iconType="boxesVertical"
+      iconSize="s"
+    />
   );
 
   const items = [
@@ -187,10 +202,11 @@ export const ContextMenu = ({
         onCopyAsSubmit();
       }}
       icon="copyClipboard"
+      css={styles.button}
     >
       <EuiFlexGroup alignItems="center">
         <EuiFlexItem>
-          <EuiFlexGroup gutterSize="xs" alignItems="center">
+          <EuiFlexGroup gutterSize="xs" alignItems="center" className="languageSelector">
             <EuiFlexItem grow={false}>
               <FormattedMessage
                 tagName="span"
diff --git a/src/plugins/console/public/application/containers/editor/monaco/components/context_menu/index.ts b/src/plugins/console/public/application/containers/editor/components/context_menu/index.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/components/context_menu/index.ts
rename to src/plugins/console/public/application/containers/editor/components/context_menu/index.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/components/context_menu/language_selector_modal.tsx b/src/plugins/console/public/application/containers/editor/components/context_menu/language_selector_modal.tsx
similarity index 98%
rename from src/plugins/console/public/application/containers/editor/monaco/components/context_menu/language_selector_modal.tsx
rename to src/plugins/console/public/application/containers/editor/components/context_menu/language_selector_modal.tsx
index 0368cbad85553..baddf2f382676 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/components/context_menu/language_selector_modal.tsx
+++ b/src/plugins/console/public/application/containers/editor/components/context_menu/language_selector_modal.tsx
@@ -24,7 +24,7 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { AVAILABLE_LANGUAGES } from '../../../../../../../common/constants';
+import { AVAILABLE_LANGUAGES } from '../../../../../../common/constants';
 
 interface Props {
   closeModal: () => void;
diff --git a/src/plugins/console/public/application/containers/editor/monaco/components/index.ts b/src/plugins/console/public/application/containers/editor/components/index.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/components/index.ts
rename to src/plugins/console/public/application/containers/editor/components/index.ts
diff --git a/src/plugins/console/public/application/containers/editor/editor.tsx b/src/plugins/console/public/application/containers/editor/editor.tsx
index 3eff2d97b3499..c999deee78637 100644
--- a/src/plugins/console/public/application/containers/editor/editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/editor.tsx
@@ -7,95 +7,283 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useCallback, memo, useEffect, useState } from 'react';
+import React, { useRef, useCallback, memo, useEffect, useState } from 'react';
 import { debounce } from 'lodash';
-import { EuiProgress } from '@elastic/eui';
+import {
+  EuiProgress,
+  EuiSplitPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonEmpty,
+  EuiResizableContainer,
+} from '@elastic/eui';
+import { euiThemeVars } from '@kbn/ui-theme';
 
-import { EditorContentSpinner } from '../../components';
-import { Panel, PanelsContainer } from '..';
-import { Editor as EditorUI, EditorOutput } from './legacy/console_editor';
+import { i18n } from '@kbn/i18n';
+import { TextObject } from '../../../../common/text_object';
+
+import {
+  EditorContentSpinner,
+  OutputPanelEmptyState,
+  NetworkRequestStatusBar,
+} from '../../components';
 import { getAutocompleteInfo, StorageKeys } from '../../../services';
-import { useEditorReadContext, useServicesContext, useRequestReadContext } from '../../contexts';
-import type { SenseEditor } from '../../models';
-import { MonacoEditor, MonacoEditorOutput } from './monaco';
+import {
+  useEditorReadContext,
+  useServicesContext,
+  useRequestReadContext,
+  useRequestActionContext,
+  useEditorActionContext,
+} from '../../contexts';
+import { MonacoEditor } from './monaco_editor';
+import { MonacoEditorOutput } from './monaco_editor_output';
+import { getResponseWithMostSevereStatusCode } from '../../../lib/utils';
 
-const INITIAL_PANEL_WIDTH = 50;
-const PANEL_MIN_WIDTH = '100px';
+const INITIAL_PANEL_SIZE = 50;
+const PANEL_MIN_SIZE = '20%';
+const DEBOUNCE_DELAY = 500;
 
 interface Props {
   loading: boolean;
-  setEditorInstance: (instance: SenseEditor) => void;
+  isVerticalLayout: boolean;
+  inputEditorValue: string;
+  setInputEditorValue: (value: string) => void;
 }
 
-export const Editor = memo(({ loading, setEditorInstance }: Props) => {
-  const {
-    services: { storage },
-    config: { isMonacoEnabled } = {},
-  } = useServicesContext();
-
-  const { currentTextObject } = useEditorReadContext();
-  const { requestInFlight } = useRequestReadContext();
-
-  const [fetchingMappings, setFetchingMappings] = useState(false);
-
-  useEffect(() => {
-    const subscription = getAutocompleteInfo().mapping.isLoading$.subscribe(setFetchingMappings);
-    return () => {
-      subscription.unsubscribe();
-    };
-  }, []);
-
-  const [firstPanelWidth, secondPanelWidth] = storage.get(StorageKeys.WIDTH, [
-    INITIAL_PANEL_WIDTH,
-    INITIAL_PANEL_WIDTH,
-  ]);
-
-  /* eslint-disable-next-line react-hooks/exhaustive-deps */
-  const onPanelWidthChange = useCallback(
-    debounce((widths: number[]) => {
-      storage.set(StorageKeys.WIDTH, widths);
-    }, 300),
-    []
-  );
-
-  if (!currentTextObject) return null;
-
-  return (
-    <>
-      {requestInFlight || fetchingMappings ? (
-        <div className="conApp__requestProgressBarContainer">
-          <EuiProgress size="xs" color="accent" position="absolute" />
-        </div>
-      ) : null}
-      <PanelsContainer onPanelWidthChange={onPanelWidthChange} resizerClassName="conApp__resizer">
-        <Panel
-          style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
-          initialWidth={firstPanelWidth}
-        >
-          {loading ? (
-            <EditorContentSpinner />
-          ) : isMonacoEnabled ? (
-            <MonacoEditor initialTextValue={currentTextObject.text} />
-          ) : (
-            <EditorUI
-              initialTextValue={currentTextObject.text}
-              setEditorInstance={setEditorInstance}
-            />
-          )}
-        </Panel>
-        <Panel
-          style={{ height: '100%', position: 'relative', minWidth: PANEL_MIN_WIDTH }}
-          initialWidth={secondPanelWidth}
+export const Editor = memo(
+  ({ loading, isVerticalLayout, inputEditorValue, setInputEditorValue }: Props) => {
+    const {
+      services: { storage, objectStorageClient },
+    } = useServicesContext();
+
+    const editorValueRef = useRef<TextObject | null>(null);
+    const { currentTextObject } = useEditorReadContext();
+    const {
+      requestInFlight,
+      lastResult: { data: requestData, error: requestError },
+    } = useRequestReadContext();
+
+    const dispatch = useRequestActionContext();
+    const editorDispatch = useEditorActionContext();
+
+    const [fetchingAutocompleteEntities, setFetchingAutocompleteEntities] = useState(false);
+
+    useEffect(() => {
+      const debouncedSetFechingAutocompleteEntities = debounce(
+        setFetchingAutocompleteEntities,
+        DEBOUNCE_DELAY
+      );
+      const subscription = getAutocompleteInfo().isLoading$.subscribe(
+        debouncedSetFechingAutocompleteEntities
+      );
+
+      return () => {
+        subscription.unsubscribe();
+        debouncedSetFechingAutocompleteEntities.cancel();
+      };
+    }, []);
+
+    const [firstPanelSize, secondPanelSize] = storage.get(StorageKeys.SIZE, [
+      INITIAL_PANEL_SIZE,
+      INITIAL_PANEL_SIZE,
+    ]);
+
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    const onPanelSizeChange = useCallback(
+      debounce((sizes) => {
+        storage.set(StorageKeys.SIZE, Object.values(sizes));
+      }, 300),
+      []
+    );
+
+    /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    const debouncedUpdateLocalStorageValue = useCallback(
+      debounce((textObject: TextObject) => {
+        editorValueRef.current = textObject;
+        objectStorageClient.text.update(textObject);
+      }, DEBOUNCE_DELAY),
+      []
+    );
+
+    useEffect(() => {
+      return () => {
+        editorDispatch({
+          type: 'setCurrentTextObject',
+          payload: editorValueRef.current!,
+        });
+      };
+    }, [editorDispatch]);
+
+    // Always keep the localstorage in sync with the value in the editor
+    // to avoid losing the text object when the user navigates away from the shell
+    useEffect(() => {
+      // Only update when its not empty, this is to avoid setting the localstorage value
+      // to an empty string that will then be replaced by the example request.
+      if (inputEditorValue !== '') {
+        const textObject = {
+          ...currentTextObject,
+          text: inputEditorValue,
+          updatedAt: Date.now(),
+        } as TextObject;
+
+        debouncedUpdateLocalStorageValue(textObject);
+      }
+      /* eslint-disable-next-line react-hooks/exhaustive-deps */
+    }, [inputEditorValue, debouncedUpdateLocalStorageValue]);
+
+    const data = getResponseWithMostSevereStatusCode(requestData) ?? requestError;
+    const isLoading = loading || requestInFlight;
+
+    if (!currentTextObject) return null;
+
+    return (
+      <>
+        {fetchingAutocompleteEntities ? (
+          <div className="conApp__requestProgressBarContainer">
+            <EuiProgress size="xs" color="accent" position="absolute" />
+          </div>
+        ) : null}
+        <EuiResizableContainer
+          style={{ height: '100%' }}
+          direction={isVerticalLayout ? 'vertical' : 'horizontal'}
+          onPanelWidthChange={(sizes) => onPanelSizeChange(sizes)}
+          data-test-subj="consoleEditorContainer"
         >
-          {loading ? (
-            <EditorContentSpinner />
-          ) : isMonacoEnabled ? (
-            <MonacoEditorOutput />
-          ) : (
-            <EditorOutput />
+          {(EuiResizablePanel, EuiResizableButton) => (
+            <>
+              <EuiResizablePanel
+                initialSize={firstPanelSize}
+                minSize={PANEL_MIN_SIZE}
+                tabIndex={0}
+                paddingSize="none"
+              >
+                <EuiSplitPanel.Outer
+                  grow={true}
+                  borderRadius="none"
+                  hasShadow={false}
+                  style={{ height: '100%' }}
+                >
+                  <EuiSplitPanel.Inner
+                    paddingSize="none"
+                    grow={true}
+                    className="consoleEditorPanel"
+                    style={{ top: 0, height: 'calc(100% - 40px)' }}
+                  >
+                    {loading ? (
+                      <EditorContentSpinner />
+                    ) : (
+                      <MonacoEditor
+                        localStorageValue={currentTextObject.text}
+                        value={inputEditorValue}
+                        setValue={setInputEditorValue}
+                      />
+                    )}
+                  </EuiSplitPanel.Inner>
+
+                  {!loading && (
+                    <EuiSplitPanel.Inner
+                      grow={false}
+                      paddingSize="s"
+                      css={{
+                        backgroundColor: euiThemeVars.euiFormBackgroundColor,
+                      }}
+                      className="consoleEditorPanel"
+                    >
+                      <EuiButtonEmpty
+                        size="xs"
+                        color="primary"
+                        data-test-subj="clearConsoleInput"
+                        onClick={() => setInputEditorValue('')}
+                      >
+                        {i18n.translate('console.editor.clearConsoleInputButton', {
+                          defaultMessage: 'Clear this input',
+                        })}
+                      </EuiButtonEmpty>
+                    </EuiSplitPanel.Inner>
+                  )}
+                </EuiSplitPanel.Outer>
+              </EuiResizablePanel>
+
+              <EuiResizableButton
+                className="conApp__resizerButton"
+                aria-label={i18n.translate('console.editor.adjustPanelSizeAriaLabel', {
+                  defaultMessage: "Press left/right to adjust panels' sizes",
+                })}
+              />
+
+              <EuiResizablePanel
+                initialSize={secondPanelSize}
+                minSize={PANEL_MIN_SIZE}
+                tabIndex={0}
+                paddingSize="none"
+              >
+                <EuiSplitPanel.Outer
+                  borderRadius="none"
+                  hasShadow={false}
+                  style={{ height: '100%' }}
+                >
+                  <EuiSplitPanel.Inner
+                    paddingSize="none"
+                    css={{ alignContent: 'center', top: 0 }}
+                    className="consoleEditorPanel"
+                  >
+                    {data ? (
+                      <MonacoEditorOutput />
+                    ) : isLoading ? (
+                      <EditorContentSpinner />
+                    ) : (
+                      <OutputPanelEmptyState />
+                    )}
+                  </EuiSplitPanel.Inner>
+
+                  {(data || isLoading) && (
+                    <EuiSplitPanel.Inner
+                      grow={false}
+                      paddingSize="s"
+                      css={{
+                        backgroundColor: euiThemeVars.euiFormBackgroundColor,
+                      }}
+                      className="consoleEditorPanel"
+                    >
+                      <EuiFlexGroup gutterSize="none" responsive={false}>
+                        <EuiFlexItem grow={false}>
+                          <EuiButtonEmpty
+                            size="xs"
+                            color="primary"
+                            data-test-subj="clearConsoleOutput"
+                            onClick={() => dispatch({ type: 'cleanRequest', payload: undefined })}
+                          >
+                            {i18n.translate('console.editor.clearConsoleOutputButton', {
+                              defaultMessage: 'Clear this output',
+                            })}
+                          </EuiButtonEmpty>
+                        </EuiFlexItem>
+
+                        <EuiFlexItem>
+                          <NetworkRequestStatusBar
+                            requestInProgress={requestInFlight}
+                            requestResult={
+                              data
+                                ? {
+                                    method: data.request.method.toUpperCase(),
+                                    endpoint: data.request.path,
+                                    statusCode: data.response.statusCode,
+                                    statusText: data.response.statusText,
+                                    timeElapsedMs: data.response.timeMs,
+                                  }
+                                : undefined
+                            }
+                          />
+                        </EuiFlexItem>
+                      </EuiFlexGroup>
+                    </EuiSplitPanel.Inner>
+                  )}
+                </EuiSplitPanel.Outer>
+              </EuiResizablePanel>
+            </>
           )}
-        </Panel>
-      </PanelsContainer>
-    </>
-  );
-});
+        </EuiResizableContainer>
+      </>
+    );
+  }
+);
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/index.ts b/src/plugins/console/public/application/containers/editor/hooks/index.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/index.ts
rename to src/plugins/console/public/application/containers/editor/hooks/index.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_register_keyboard_commands.ts b/src/plugins/console/public/application/containers/editor/hooks/use_register_keyboard_commands.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/use_register_keyboard_commands.ts
rename to src/plugins/console/public/application/containers/editor/hooks/use_register_keyboard_commands.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_resize_checker_utils.ts b/src/plugins/console/public/application/containers/editor/hooks/use_resize_checker_utils.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/use_resize_checker_utils.ts
rename to src/plugins/console/public/application/containers/editor/hooks/use_resize_checker_utils.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_set_initial_value.ts b/src/plugins/console/public/application/containers/editor/hooks/use_set_initial_value.ts
similarity index 91%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/use_set_initial_value.ts
rename to src/plugins/console/public/application/containers/editor/hooks/use_set_initial_value.ts
index 41a3b77a105cd..961ea586bc291 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_set_initial_value.ts
+++ b/src/plugins/console/public/application/containers/editor/hooks/use_set_initial_value.ts
@@ -13,7 +13,7 @@ import { IToasts } from '@kbn/core-notifications-browser';
 import { decompressFromEncodedURIComponent } from 'lz-string';
 import { i18n } from '@kbn/i18n';
 import { useEffect } from 'react';
-import { DEFAULT_INPUT_VALUE } from '../../../../../../common/constants';
+import { DEFAULT_INPUT_VALUE } from '../../../../../common/constants';
 
 interface QueryParams {
   load_from: string;
@@ -21,7 +21,7 @@ interface QueryParams {
 
 interface SetInitialValueParams {
   /** The text value that is initially in the console editor. */
-  initialTextValue?: string;
+  localStorageValue?: string;
   /** The function that sets the state of the value in the console editor. */
   setValue: (value: string) => void;
   /** The toasts service. */
@@ -45,7 +45,7 @@ export const readLoadFromParam = () => {
  * @param params The {@link SetInitialValueParams} to use.
  */
 export const useSetInitialValue = (params: SetInitialValueParams) => {
-  const { initialTextValue, setValue, toasts } = params;
+  const { localStorageValue, setValue, toasts } = params;
 
   useEffect(() => {
     const loadBufferFromRemote = async (url: string) => {
@@ -61,7 +61,7 @@ export const useSetInitialValue = (params: SetInitialValueParams) => {
         if (parsedURL.origin === 'https://www.elastic.co') {
           const resp = await fetch(parsedURL);
           const data = await resp.text();
-          setValue(`${initialTextValue}\n\n${data}`);
+          setValue(`${localStorageValue}\n\n${data}`);
         } else {
           toasts.addWarning(
             i18n.translate('console.monaco.loadFromDataUnrecognizedUrlErrorMessage', {
@@ -107,11 +107,11 @@ export const useSetInitialValue = (params: SetInitialValueParams) => {
     if (loadFromParam) {
       loadBufferFromRemote(loadFromParam);
     } else {
-      setValue(initialTextValue || DEFAULT_INPUT_VALUE);
+      setValue(localStorageValue || DEFAULT_INPUT_VALUE);
     }
 
     return () => {
       window.removeEventListener('hashchange', onHashChange);
     };
-  }, [initialTextValue, setValue, toasts]);
+  }, [localStorageValue, setValue, toasts]);
 };
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autocomplete_polling.ts b/src/plugins/console/public/application/containers/editor/hooks/use_setup_autocomplete_polling.ts
similarity index 94%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autocomplete_polling.ts
rename to src/plugins/console/public/application/containers/editor/hooks/use_setup_autocomplete_polling.ts
index 1a1a5bb77dd1e..4785be4054ee0 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autocomplete_polling.ts
+++ b/src/plugins/console/public/application/containers/editor/hooks/use_setup_autocomplete_polling.ts
@@ -8,7 +8,7 @@
  */
 
 import { useEffect } from 'react';
-import { AutocompleteInfo, Settings } from '../../../../../services';
+import { AutocompleteInfo, Settings } from '../../../../services';
 
 interface SetupAutocompletePollingParams {
   /** The Console autocomplete service. */
diff --git a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autosave.ts b/src/plugins/console/public/application/containers/editor/hooks/use_setup_autosave.ts
similarity index 96%
rename from src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autosave.ts
rename to src/plugins/console/public/application/containers/editor/hooks/use_setup_autosave.ts
index 6f46b8ce6589d..8b4bfaa888649 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/hooks/use_setup_autosave.ts
+++ b/src/plugins/console/public/application/containers/editor/hooks/use_setup_autosave.ts
@@ -8,7 +8,7 @@
  */
 
 import { useEffect, useRef } from 'react';
-import { useSaveCurrentTextObject } from '../../../../hooks';
+import { useSaveCurrentTextObject } from '../../../hooks';
 import { readLoadFromParam } from './use_set_initial_value';
 
 interface SetupAutosaveParams {
diff --git a/src/plugins/console/public/application/containers/editor/index.ts b/src/plugins/console/public/application/containers/editor/index.ts
index c9fbe97f01d8d..696806097badd 100644
--- a/src/plugins/console/public/application/containers/editor/index.ts
+++ b/src/plugins/console/public/application/containers/editor/index.ts
@@ -7,5 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { autoIndent, getDocumentation } from './legacy';
 export { Editor } from './editor';
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts b/src/plugins/console/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts
deleted file mode 100644
index 75e2516a52a7a..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/apply_editor_settings.ts
+++ /dev/null
@@ -1,27 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { DevToolsSettings } from '../../../../../services';
-import { CoreEditor } from '../../../../../types';
-import { CustomAceEditor } from '../../../../models/legacy_core_editor';
-
-export function applyCurrentSettings(
-  editor: CoreEditor | CustomAceEditor,
-  settings: DevToolsSettings
-) {
-  if ((editor as { setStyles?: Function }).setStyles) {
-    (editor as CoreEditor).setStyles({
-      wrapLines: settings.wrapMode,
-      fontSize: settings.fontSize + 'px',
-    });
-  } else {
-    (editor as CustomAceEditor).getSession().setUseWrapMode(settings.wrapMode);
-    (editor as CustomAceEditor).container.style.fontSize = settings.fontSize + 'px';
-  }
-}
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.mock.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.mock.tsx
deleted file mode 100644
index f0371562a77bb..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.mock.tsx
+++ /dev/null
@@ -1,50 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-// TODO(jbudz): should be removed when upgrading to TS@4.8
-// this is a skip for the errors created when typechecking with isolatedModules
-export {};
-
-jest.mock('../../../../contexts/editor_context/editor_registry', () => ({
-  instance: {
-    setInputEditor: () => {},
-    getInputEditor: () => ({
-      getRequestsInRange: async () => [{ test: 'test' }],
-      getCoreEditor: () => ({ getCurrentPosition: jest.fn() }),
-    }),
-  },
-}));
-jest.mock('../../../../components/editor_example', () => {});
-jest.mock('../../../../models/sense_editor', () => {
-  return {
-    create: () => ({
-      getCoreEditor: () => ({
-        registerKeyboardShortcut: jest.fn(),
-        setStyles: jest.fn(),
-        getContainer: () => ({
-          focus: () => {},
-        }),
-        on: jest.fn(),
-        addFoldsAtRanges: jest.fn(),
-        getAllFoldRanges: jest.fn(),
-      }),
-      update: jest.fn(),
-      commands: {
-        addCommand: () => {},
-      },
-    }),
-  };
-});
-
-jest.mock('../../../../hooks/use_send_current_request/send_request', () => ({
-  sendRequest: jest.fn(),
-}));
-jest.mock('../../../../../lib/autocomplete/get_endpoint_from_position', () => ({
-  getEndpointFromPosition: jest.fn(),
-}));
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx
deleted file mode 100644
index 589be10596b9b..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.test.tsx
+++ /dev/null
@@ -1,100 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-jest.mock('../../../../../lib/utils', () => ({ replaceVariables: jest.fn() }));
-
-import './editor.test.mock';
-
-import React from 'react';
-import { mount } from 'enzyme';
-import { I18nProvider } from '@kbn/i18n-react';
-import { act } from 'react-dom/test-utils';
-import * as sinon from 'sinon';
-
-import { serviceContextMock } from '../../../../contexts/services_context.mock';
-
-import { nextTick } from '@kbn/test-jest-helpers';
-import {
-  ServicesContextProvider,
-  EditorContextProvider,
-  RequestContextProvider,
-  ContextValue,
-} from '../../../../contexts';
-
-// Mocked functions
-import { sendRequest } from '../../../../hooks/use_send_current_request/send_request';
-import { getEndpointFromPosition } from '../../../../../lib/autocomplete/get_endpoint_from_position';
-import type { DevToolsSettings } from '../../../../../services';
-import * as consoleMenuActions from '../console_menu_actions';
-import { Editor } from './editor';
-import * as utils from '../../../../../lib/utils';
-
-describe('Legacy (Ace) Console Editor Component Smoke Test', () => {
-  let mockedAppContextValue: ContextValue;
-  const sandbox = sinon.createSandbox();
-
-  const doMount = () =>
-    mount(
-      <I18nProvider>
-        <ServicesContextProvider value={mockedAppContextValue}>
-          <RequestContextProvider>
-            <EditorContextProvider settings={{} as unknown as DevToolsSettings}>
-              <Editor initialTextValue="" setEditorInstance={() => {}} />
-            </EditorContextProvider>
-          </RequestContextProvider>
-        </ServicesContextProvider>
-      </I18nProvider>
-    );
-
-  beforeEach(() => {
-    document.queryCommandSupported = sinon.fake(() => true);
-    mockedAppContextValue = serviceContextMock.create();
-    (utils.replaceVariables as jest.Mock).mockReturnValue(['test']);
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    sandbox.restore();
-  });
-
-  it('calls send current request', async () => {
-    (getEndpointFromPosition as jest.Mock).mockReturnValue({ patterns: [] });
-    (sendRequest as jest.Mock).mockRejectedValue({});
-    const editor = doMount();
-    act(() => {
-      editor.find('button[data-test-subj~="sendRequestButton"]').simulate('click');
-    });
-    await nextTick();
-    expect(sendRequest).toBeCalledTimes(1);
-  });
-
-  it('opens docs', () => {
-    const stub = sandbox.stub(consoleMenuActions, 'getDocumentation');
-    const editor = doMount();
-    const consoleMenuToggle = editor.find('[data-test-subj~="toggleConsoleMenu"]').last();
-    consoleMenuToggle.simulate('click');
-
-    const docsButton = editor.find('[data-test-subj~="consoleMenuOpenDocs"]').last();
-    docsButton.simulate('click');
-
-    expect(stub.callCount).toBe(1);
-  });
-
-  it('prompts auto-indent', () => {
-    const stub = sandbox.stub(consoleMenuActions, 'autoIndent');
-    const editor = doMount();
-    const consoleMenuToggle = editor.find('[data-test-subj~="toggleConsoleMenu"]').last();
-    consoleMenuToggle.simulate('click');
-
-    const autoIndentButton = editor.find('[data-test-subj~="consoleMenuAutoIndent"]').last();
-    autoIndentButton.simulate('click');
-
-    expect(stub.callCount).toBe(1);
-  });
-});
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
deleted file mode 100644
index a0119ac2ec8fa..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor.tsx
+++ /dev/null
@@ -1,343 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiScreenReaderOnly,
-  EuiToolTip,
-} from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import { debounce } from 'lodash';
-import { decompressFromEncodedURIComponent } from 'lz-string';
-import { parse } from 'query-string';
-import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
-import { ace } from '@kbn/es-ui-shared-plugin/public';
-import { ConsoleMenu } from '../../../../components';
-import { useEditorReadContext, useServicesContext } from '../../../../contexts';
-import {
-  useSaveCurrentTextObject,
-  useSendCurrentRequest,
-  useSetInputEditor,
-} from '../../../../hooks';
-import * as senseEditor from '../../../../models/sense_editor';
-import { autoIndent, getDocumentation } from '../console_menu_actions';
-import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
-import { applyCurrentSettings } from './apply_editor_settings';
-import { registerCommands } from './keyboard_shortcuts';
-import type { SenseEditor } from '../../../../models/sense_editor';
-import { StorageKeys } from '../../../../../services';
-import { DEFAULT_INPUT_VALUE } from '../../../../../../common/constants';
-
-const { useUIAceKeyboardMode } = ace;
-
-export interface EditorProps {
-  initialTextValue: string;
-  setEditorInstance: (instance: SenseEditor) => void;
-}
-
-interface QueryParams {
-  load_from: string;
-}
-
-const abs: CSSProperties = {
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  bottom: '0',
-  right: '0',
-};
-
-const inputId = 'ConAppInputTextarea';
-
-function EditorUI({ initialTextValue, setEditorInstance }: EditorProps) {
-  const {
-    services: {
-      history,
-      notifications,
-      settings: settingsService,
-      esHostService,
-      http,
-      autocompleteInfo,
-      storage,
-    },
-    docLinkVersion,
-    ...startServices
-  } = useServicesContext();
-
-  const { settings } = useEditorReadContext();
-  const setInputEditor = useSetInputEditor();
-  const sendCurrentRequest = useSendCurrentRequest();
-  const saveCurrentTextObject = useSaveCurrentTextObject();
-
-  const editorRef = useRef<HTMLDivElement | null>(null);
-  const editorInstanceRef = useRef<senseEditor.SenseEditor | null>(null);
-
-  const [textArea, setTextArea] = useState<HTMLTextAreaElement | null>(null);
-  useUIAceKeyboardMode(textArea, startServices, settings.isAccessibilityOverlayEnabled);
-
-  const openDocumentation = useCallback(async () => {
-    const documentation = await getDocumentation(editorInstanceRef.current!, docLinkVersion);
-    if (!documentation) {
-      return;
-    }
-    window.open(documentation, '_blank');
-  }, [docLinkVersion]);
-
-  useEffect(() => {
-    editorInstanceRef.current = senseEditor.create(editorRef.current!);
-    const editor = editorInstanceRef.current;
-    const textareaElement = editorRef.current!.querySelector('textarea');
-
-    if (textareaElement) {
-      textareaElement.setAttribute('id', inputId);
-      textareaElement.setAttribute('data-test-subj', 'console-textarea');
-    }
-
-    const readQueryParams = () => {
-      const [, queryString] = (window.location.hash || window.location.search || '').split('?');
-
-      return parse(queryString || '', { sort: false }) as Required<QueryParams>;
-    };
-
-    const loadBufferFromRemote = (url: string) => {
-      const coreEditor = editor.getCoreEditor();
-      // Normalize and encode the URL to avoid issues with spaces and other special characters.
-      const encodedUrl = new URL(url).toString();
-      if (/^https?:\/\//.test(encodedUrl)) {
-        const loadFrom: Record<string, any> = {
-          url,
-          // Having dataType here is required as it doesn't allow jQuery to `eval` content
-          // coming from the external source thereby preventing XSS attack.
-          dataType: 'text',
-          kbnXsrfToken: false,
-        };
-
-        if (/https?:\/\/api\.github\.com/.test(url)) {
-          loadFrom.headers = { Accept: 'application/vnd.github.v3.raw' };
-        }
-
-        // Fire and forget.
-        $.ajax(loadFrom).done(async (data) => {
-          // when we load data from another Api we also must pass history
-          await editor.update(`${initialTextValue}\n ${data}`, true);
-          editor.moveToNextRequestEdge(false);
-          coreEditor.clearSelection();
-          editor.highlightCurrentRequestsAndUpdateActionBar();
-          coreEditor.getContainer().focus();
-        });
-      }
-
-      // If we have a data URI instead of HTTP, LZ-decode it. This enables
-      // opening requests in Console from anywhere in Kibana.
-      if (/^data:/.test(url)) {
-        const data = decompressFromEncodedURIComponent(url.replace(/^data:text\/plain,/, ''));
-
-        // Show a toast if we have a failure
-        if (data === null || data === '') {
-          notifications.toasts.addWarning(
-            i18n.translate('console.loadFromDataUriErrorMessage', {
-              defaultMessage: 'Unable to load data from the load_from query parameter in the URL',
-            })
-          );
-          return;
-        }
-
-        editor.update(data, true);
-        editor.moveToNextRequestEdge(false);
-        coreEditor.clearSelection();
-        editor.highlightCurrentRequestsAndUpdateActionBar();
-        coreEditor.getContainer().focus();
-      }
-    };
-
-    // Support for loading a console snippet from a remote source, like support docs.
-    const onHashChange = debounce(() => {
-      const { load_from: url } = readQueryParams();
-      if (!url) {
-        return;
-      }
-      loadBufferFromRemote(url);
-    }, 200);
-    window.addEventListener('hashchange', onHashChange);
-
-    const initialQueryParams = readQueryParams();
-
-    if (initialQueryParams.load_from) {
-      loadBufferFromRemote(initialQueryParams.load_from);
-    } else {
-      editor.update(initialTextValue || DEFAULT_INPUT_VALUE);
-    }
-
-    function setupAutosave() {
-      let timer: number;
-      const saveDelay = 500;
-
-      editor.getCoreEditor().on('change', () => {
-        if (timer) {
-          clearTimeout(timer);
-        }
-        timer = window.setTimeout(saveCurrentState, saveDelay);
-      });
-    }
-
-    function saveCurrentState() {
-      try {
-        const content = editor.getCoreEditor().getValue();
-        saveCurrentTextObject(content);
-      } catch (e) {
-        // Ignoring saving error
-      }
-    }
-
-    function restoreFolds() {
-      if (editor) {
-        const foldRanges = storage.get(StorageKeys.FOLDS, []);
-        editor.getCoreEditor().addFoldsAtRanges(foldRanges);
-      }
-    }
-
-    restoreFolds();
-
-    function saveFoldsOnChange() {
-      if (editor) {
-        editor.getCoreEditor().on('changeFold', () => {
-          const foldRanges = editor.getCoreEditor().getAllFoldRanges();
-          storage.set(StorageKeys.FOLDS, foldRanges);
-        });
-      }
-    }
-
-    saveFoldsOnChange();
-
-    setInputEditor(editor);
-    setTextArea(editorRef.current!.querySelector('textarea'));
-
-    autocompleteInfo.retrieve(settingsService, settingsService.getAutocomplete());
-
-    const unsubscribeResizer = subscribeResizeChecker(editorRef.current!, editor);
-    if (!initialQueryParams.load_from) {
-      // Don't setup autosaving editor content when we pre-load content
-      // This prevents losing the user's current console content when
-      // `loadFrom` query param is used for a console session
-      setupAutosave();
-    }
-
-    return () => {
-      unsubscribeResizer();
-      autocompleteInfo.clearSubscriptions();
-      window.removeEventListener('hashchange', onHashChange);
-      if (editorInstanceRef.current) {
-        // Close autocomplete popup on unmount
-        editorInstanceRef.current?.getCoreEditor().detachCompleter();
-        editorInstanceRef.current.getCoreEditor().destroy();
-      }
-    };
-  }, [
-    notifications.toasts,
-    saveCurrentTextObject,
-    initialTextValue,
-    history,
-    setInputEditor,
-    settingsService,
-    http,
-    autocompleteInfo,
-    storage,
-  ]);
-
-  useEffect(() => {
-    const { current: editor } = editorInstanceRef;
-    applyCurrentSettings(editor!.getCoreEditor(), settings);
-    // Preserve legacy focus behavior after settings have updated.
-    editor!.getCoreEditor().getContainer().focus();
-  }, [settings]);
-
-  useEffect(() => {
-    const { isKeyboardShortcutsEnabled } = settings;
-    if (isKeyboardShortcutsEnabled) {
-      registerCommands({
-        senseEditor: editorInstanceRef.current!,
-        sendCurrentRequest,
-        openDocumentation,
-      });
-    }
-  }, [openDocumentation, settings, sendCurrentRequest]);
-
-  useEffect(() => {
-    const { current: editor } = editorInstanceRef;
-    if (editor) {
-      setEditorInstance(editor);
-    }
-  }, [setEditorInstance]);
-
-  return (
-    <div style={abs} data-test-subj="console-application" className="conApp">
-      <div className="conApp__editor">
-        <ul className="conApp__autoComplete" id="autocomplete" />
-        <EuiFlexGroup
-          className="conApp__editorActions"
-          id="ConAppEditorActions"
-          gutterSize="none"
-          responsive={false}
-        >
-          <EuiFlexItem>
-            <EuiToolTip
-              content={i18n.translate('console.sendRequestButtonTooltipContent', {
-                defaultMessage: 'Click to send request',
-              })}
-            >
-              <EuiLink
-                color="primary"
-                onClick={sendCurrentRequest}
-                data-test-subj="sendRequestButton"
-                aria-label={i18n.translate('console.sendRequestButtonTooltipAriaLabel', {
-                  defaultMessage: 'Click to send request',
-                })}
-              >
-                <EuiIcon type="play" />
-              </EuiLink>
-            </EuiToolTip>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <ConsoleMenu
-              getCurl={() => {
-                return editorInstanceRef.current!.getRequestsAsCURL(esHostService.getHost());
-              }}
-              getDocumentation={() => {
-                return getDocumentation(editorInstanceRef.current!, docLinkVersion);
-              }}
-              autoIndent={(event) => {
-                autoIndent(editorInstanceRef.current!, event);
-              }}
-              notifications={notifications}
-            />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-
-        <EuiScreenReaderOnly>
-          <label htmlFor={inputId}>
-            {i18n.translate('console.inputTextarea', {
-              defaultMessage: 'Dev Tools Console',
-            })}
-          </label>
-        </EuiScreenReaderOnly>
-        <div
-          ref={editorRef}
-          id="ConAppEditor"
-          className="conApp__editorContent"
-          data-test-subj="request-editor"
-        />
-      </div>
-    </div>
-  );
-}
-
-export const Editor = React.memo(EditorUI);
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx b/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx
deleted file mode 100644
index 09cdf02cbab98..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/editor_output.tsx
+++ /dev/null
@@ -1,125 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { VectorTile } from '@mapbox/vector-tile';
-import Protobuf from 'pbf';
-import { EuiScreenReaderOnly } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-import React, { useEffect, useRef } from 'react';
-import { convertMapboxVectorTileToJson } from './mapbox_vector_tile';
-import { Mode } from '../../../../models/legacy_core_editor/mode/output';
-
-// Ensure the modes we might switch to dynamically are available
-import 'brace/mode/text';
-import 'brace/mode/hjson';
-import 'brace/mode/yaml';
-
-import {
-  useEditorReadContext,
-  useRequestReadContext,
-  useServicesContext,
-} from '../../../../contexts';
-import { createReadOnlyAceEditor, CustomAceEditor } from '../../../../models/legacy_core_editor';
-import { subscribeResizeChecker } from '../subscribe_console_resize_checker';
-import { applyCurrentSettings } from './apply_editor_settings';
-import { isJSONContentType, isMapboxVectorTile, safeExpandLiteralStrings } from '../../utilities';
-
-function modeForContentType(contentType?: string) {
-  if (!contentType) {
-    return 'ace/mode/text';
-  }
-  if (isJSONContentType(contentType) || isMapboxVectorTile(contentType)) {
-    // Using hjson will allow us to use comments in editor output and solves the problem with error markers
-    return 'ace/mode/hjson';
-  } else if (contentType.indexOf('application/yaml') >= 0) {
-    return 'ace/mode/yaml';
-  }
-  return 'ace/mode/text';
-}
-
-function EditorOutputUI() {
-  const editorRef = useRef<null | HTMLDivElement>(null);
-  const editorInstanceRef = useRef<null | CustomAceEditor>(null);
-  const { services } = useServicesContext();
-  const { settings: readOnlySettings } = useEditorReadContext();
-  const {
-    lastResult: { data, error },
-  } = useRequestReadContext();
-  const inputId = 'ConAppOutputTextarea';
-
-  useEffect(() => {
-    editorInstanceRef.current = createReadOnlyAceEditor(editorRef.current!);
-    const unsubscribe = subscribeResizeChecker(editorRef.current!, editorInstanceRef.current);
-    const textarea = editorRef.current!.querySelector('textarea')!;
-    textarea.setAttribute('id', inputId);
-    textarea.setAttribute('readonly', 'true');
-
-    return () => {
-      unsubscribe();
-      editorInstanceRef.current!.destroy();
-    };
-  }, [services.settings]);
-
-  useEffect(() => {
-    const editor = editorInstanceRef.current!;
-    if (data) {
-      const isMultipleRequest = data.length > 1;
-      const mode = isMultipleRequest
-        ? new Mode()
-        : modeForContentType(data[0].response.contentType);
-      editor.update(
-        data
-          .map((result) => {
-            const { value, contentType } = result.response;
-
-            let editorOutput;
-            if (readOnlySettings.tripleQuotes && isJSONContentType(contentType)) {
-              editorOutput = safeExpandLiteralStrings(value as string);
-            } else if (isMapboxVectorTile(contentType)) {
-              const vectorTile = new VectorTile(new Protobuf(value as ArrayBuffer));
-              const vectorTileJson = convertMapboxVectorTileToJson(vectorTile);
-              editorOutput = safeExpandLiteralStrings(vectorTileJson as string);
-            } else {
-              editorOutput = value;
-            }
-
-            return editorOutput;
-          })
-          .join('\n'),
-        mode
-      );
-    } else if (error) {
-      const mode = modeForContentType(error.response.contentType);
-      editor.update(error.response.value as string, mode);
-    } else {
-      editor.update('');
-    }
-  }, [readOnlySettings, data, error]);
-
-  useEffect(() => {
-    applyCurrentSettings(editorInstanceRef.current!, readOnlySettings);
-  }, [readOnlySettings]);
-
-  return (
-    <>
-      <EuiScreenReaderOnly>
-        <label htmlFor={inputId}>
-          {i18n.translate('console.outputTextarea', {
-            defaultMessage: 'Dev Tools Console output',
-          })}
-        </label>
-      </EuiScreenReaderOnly>
-      <div ref={editorRef} className="conApp__output" data-test-subj="response-editor">
-        <div className="conApp__outputContent" id="ConAppOutput" />
-      </div>
-    </>
-  );
-}
-
-export const EditorOutput = React.memo(EditorOutputUI);
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts b/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts
deleted file mode 100644
index daad4bbdb7dbd..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_editor/keyboard_shortcuts.ts
+++ /dev/null
@@ -1,92 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { throttle } from 'lodash';
-import { SenseEditor } from '../../../../models/sense_editor';
-
-interface Actions {
-  senseEditor: SenseEditor;
-  sendCurrentRequest: () => void;
-  openDocumentation: () => void;
-}
-
-const COMMANDS = {
-  SEND_TO_ELASTICSEARCH: 'send to Elasticsearch',
-  OPEN_DOCUMENTATION: 'open documentation',
-  AUTO_INDENT_REQUEST: 'auto indent request',
-  MOVE_TO_PREVIOUS_REQUEST: 'move to previous request start or end',
-  MOVE_TO_NEXT_REQUEST: 'move to next request start or end',
-  GO_TO_LINE: 'gotoline',
-};
-
-export function registerCommands({ senseEditor, sendCurrentRequest, openDocumentation }: Actions) {
-  const throttledAutoIndent = throttle(() => senseEditor.autoIndent(), 500, {
-    leading: true,
-    trailing: true,
-  });
-  const coreEditor = senseEditor.getCoreEditor();
-
-  coreEditor.registerKeyboardShortcut({
-    keys: { win: 'Ctrl-Enter', mac: 'Command-Enter' },
-    name: COMMANDS.SEND_TO_ELASTICSEARCH,
-    fn: () => {
-      sendCurrentRequest();
-    },
-  });
-
-  coreEditor.registerKeyboardShortcut({
-    name: COMMANDS.OPEN_DOCUMENTATION,
-    keys: { win: 'Ctrl-/', mac: 'Command-/' },
-    fn: () => {
-      openDocumentation();
-    },
-  });
-
-  coreEditor.registerKeyboardShortcut({
-    name: COMMANDS.AUTO_INDENT_REQUEST,
-    keys: { win: 'Ctrl-I', mac: 'Command-I' },
-    fn: () => {
-      throttledAutoIndent();
-    },
-  });
-
-  coreEditor.registerKeyboardShortcut({
-    name: COMMANDS.MOVE_TO_PREVIOUS_REQUEST,
-    keys: { win: 'Ctrl-Up', mac: 'Command-Up' },
-    fn: () => {
-      senseEditor.moveToPreviousRequestEdge();
-    },
-  });
-
-  coreEditor.registerKeyboardShortcut({
-    name: COMMANDS.MOVE_TO_NEXT_REQUEST,
-    keys: { win: 'Ctrl-Down', mac: 'Command-Down' },
-    fn: () => {
-      senseEditor.moveToNextRequestEdge(false);
-    },
-  });
-
-  coreEditor.registerKeyboardShortcut({
-    name: COMMANDS.GO_TO_LINE,
-    keys: { win: 'Ctrl-L', mac: 'Command-L' },
-    fn: (editor) => {
-      const line = parseInt(prompt('Enter line number') ?? '', 10);
-      if (!isNaN(line)) {
-        editor.gotoLine(line);
-      }
-    },
-  });
-}
-
-export function unregisterCommands(senseEditor: SenseEditor) {
-  const coreEditor = senseEditor.getCoreEditor();
-  Object.values(COMMANDS).forEach((command) => {
-    coreEditor.unregisterKeyboardShortcut(command);
-  });
-}
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_menu_actions.ts b/src/plugins/console/public/application/containers/editor/legacy/console_menu_actions.ts
deleted file mode 100644
index c65efbc0d82f5..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/console_menu_actions.ts
+++ /dev/null
@@ -1,39 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { getEndpointFromPosition } from '../../../../lib/autocomplete/get_endpoint_from_position';
-import { SenseEditor } from '../../../models/sense_editor';
-
-export async function autoIndent(editor: SenseEditor, event: React.MouseEvent) {
-  event.preventDefault();
-  await editor.autoIndent();
-  editor.getCoreEditor().getContainer().focus();
-}
-
-export function getDocumentation(
-  editor: SenseEditor,
-  docLinkVersion: string
-): Promise<string | null> {
-  return editor.getRequestsInRange().then((requests) => {
-    if (!requests || requests.length === 0) {
-      return null;
-    }
-    const position = requests[0].range.end;
-    position.column = position.column - 1;
-    const endpoint = getEndpointFromPosition(editor.getCoreEditor(), position, editor.parser);
-    if (endpoint && endpoint.documentation && endpoint.documentation.indexOf('http') !== -1) {
-      return endpoint.documentation
-        .replace('/master/', `/${docLinkVersion}/`)
-        .replace('/current/', `/${docLinkVersion}/`)
-        .replace('/{branch}/', `/${docLinkVersion}/`);
-    } else {
-      return null;
-    }
-  });
-}
diff --git a/src/plugins/console/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts b/src/plugins/console/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts
deleted file mode 100644
index 6511d7ad3cc3b..0000000000000
--- a/src/plugins/console/public/application/containers/editor/legacy/subscribe_console_resize_checker.ts
+++ /dev/null
@@ -1,28 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ResizeChecker } from '@kbn/kibana-utils-plugin/public';
-
-export function subscribeResizeChecker(el: HTMLElement, ...editors: any[]) {
-  const checker = new ResizeChecker(el);
-  checker.on('resize', () =>
-    editors.forEach((e) => {
-      if (e.getCoreEditor) {
-        e.getCoreEditor().resize();
-      } else {
-        e.resize();
-      }
-
-      if (e.updateActionsBar) {
-        e.updateActionsBar();
-      }
-    })
-  );
-  return () => checker.destroy();
-}
diff --git a/src/plugins/console/public/application/containers/editor/monaco/index.ts b/src/plugins/console/public/application/containers/editor/monaco/index.ts
deleted file mode 100644
index b7b8576bbdf65..0000000000000
--- a/src/plugins/console/public/application/containers/editor/monaco/index.ts
+++ /dev/null
@@ -1,11 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { MonacoEditor } from './monaco_editor';
-export { MonacoEditorOutput } from './monaco_editor_output';
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx b/src/plugins/console/public/application/containers/editor/monaco_editor.tsx
similarity index 79%
rename from src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
rename to src/plugins/console/public/application/containers/editor/monaco_editor.tsx
index ca6e66a8ba66f..bc174b772bb1c 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco_editor.tsx
@@ -8,18 +8,19 @@
  */
 
 import React, { CSSProperties, useCallback, useMemo, useRef, useState, useEffect } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiLink, EuiToolTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { CodeEditor } from '@kbn/code-editor';
 import { CONSOLE_LANG_ID, CONSOLE_THEME_ID, monaco } from '@kbn/monaco';
 import { i18n } from '@kbn/i18n';
-import { useSetInputEditor } from '../../../hooks';
+import { useSetInputEditor } from '../../hooks';
 import { ContextMenu } from './components';
 import {
   useServicesContext,
   useEditorReadContext,
   useRequestActionContext,
-} from '../../../contexts';
+  useEditorActionContext,
+} from '../../contexts';
 import {
   useSetInitialValue,
   useSetupAutocompletePolling,
@@ -32,10 +33,12 @@ import { MonacoEditorActionsProvider } from './monaco_editor_actions_provider';
 import { getSuggestionProvider } from './monaco_editor_suggestion_provider';
 
 export interface EditorProps {
-  initialTextValue: string;
+  localStorageValue: string | undefined;
+  value: string;
+  setValue: (value: string) => void;
 }
 
-export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
+export const MonacoEditor = ({ localStorageValue, value, setValue }: EditorProps) => {
   const context = useServicesContext();
   const {
     services: { notifications, settings: settingsService, autocompleteInfo },
@@ -43,7 +46,11 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
     config: { isDevMode },
   } = context;
   const { toasts } = notifications;
-  const { settings } = useEditorReadContext();
+  const {
+    settings,
+    restoreRequestFromHistory: requestToRestoreFromHistory,
+    fileToImport,
+  } = useEditorReadContext();
   const [editorInstance, setEditorInstace] = useState<
     monaco.editor.IStandaloneCodeEditor | undefined
   >();
@@ -53,6 +60,7 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   const { registerKeyboardCommands, unregisterKeyboardCommands } = useKeyboardCommandsUtils();
 
   const dispatch = useRequestActionContext();
+  const editorDispatch = useEditorActionContext();
   const actionsProvider = useRef<MonacoEditorActionsProvider | null>(null);
   const [editorActionsCss, setEditorActionsCss] = useState<CSSProperties>({});
 
@@ -117,18 +125,40 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
   const suggestionProvider = useMemo(() => {
     return getSuggestionProvider(actionsProvider);
   }, []);
-  const [value, setValue] = useState(initialTextValue);
 
-  useSetInitialValue({ initialTextValue, setValue, toasts });
+  useSetInitialValue({ localStorageValue, setValue, toasts });
 
   useSetupAutocompletePolling({ autocompleteInfo, settingsService });
 
   useSetupAutosave({ value });
 
+  // Restore the request from history if there is one
+  const updateEditor = useCallback(async () => {
+    if (requestToRestoreFromHistory) {
+      editorDispatch({ type: 'clearRequestToRestore' });
+      await actionsProvider.current?.appendRequestToEditor(
+        requestToRestoreFromHistory,
+        dispatch,
+        context
+      );
+    }
+
+    // Import a request file if one is provided
+    if (fileToImport) {
+      editorDispatch({ type: 'setFileToImport', payload: null });
+      await actionsProvider.current?.importRequestsToEditor(fileToImport);
+    }
+  }, [fileToImport, requestToRestoreFromHistory, dispatch, context, editorDispatch]);
+
+  useEffect(() => {
+    updateEditor();
+  }, [updateEditor]);
+
   return (
     <div
       css={css`
         width: 100%;
+        height: 100%;
       `}
       ref={divRef}
       data-test-subj="consoleMonacoEditorContainer"
@@ -136,29 +166,30 @@ export const MonacoEditor = ({ initialTextValue }: EditorProps) => {
       <EuiFlexGroup
         className="conApp__editorActions"
         id="ConAppEditorActions"
-        gutterSize="none"
+        gutterSize="xs"
         responsive={false}
         style={editorActionsCss}
+        justifyContent="center"
+        alignItems="center"
       >
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <EuiToolTip
             content={i18n.translate('console.monaco.sendRequestButtonTooltipContent', {
               defaultMessage: 'Click to send request',
             })}
           >
-            <EuiLink
-              color="primary"
+            <EuiButtonIcon
+              iconType="playFilled"
               onClick={sendRequestsCallback}
               data-test-subj="sendRequestButton"
               aria-label={i18n.translate('console.monaco.sendRequestButtonTooltipAriaLabel', {
                 defaultMessage: 'Click to send request',
               })}
-            >
-              <EuiIcon type="play" />
-            </EuiLink>
+              iconSize={'s'}
+            />
           </EuiToolTip>
         </EuiFlexItem>
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <ContextMenu
             getRequests={getRequestsCallback}
             getDocumentation={getDocumenationLink}
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.test.ts b/src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.test.ts
similarity index 99%
rename from src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.test.ts
rename to src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.test.ts
index f3af28e8b9380..96a0ff99a63b6 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.test.ts
+++ b/src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.test.ts
@@ -29,7 +29,7 @@ jest.mock('@kbn/monaco', () => {
   };
 });
 
-jest.mock('../../../../services', () => {
+jest.mock('../../../services', () => {
   return {
     getStorage: () => ({
       get: () => [],
@@ -40,7 +40,7 @@ jest.mock('../../../../services', () => {
   };
 });
 
-jest.mock('../../../../lib/autocomplete/engine', () => {
+jest.mock('../../../lib/autocomplete/engine', () => {
   return {
     populateContext: (...args: any) => {
       mockPopulateContext(args);
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.ts b/src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.ts
similarity index 86%
rename from src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.ts
rename to src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.ts
index 14be049c8ab26..8c66d31b2b57e 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_actions_provider.ts
+++ b/src/plugins/console/public/application/containers/editor/monaco_editor_actions_provider.ts
@@ -13,11 +13,11 @@ import { ConsoleParsedRequestsProvider, getParsedRequestsProvider, monaco } from
 import { i18n } from '@kbn/i18n';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 import { XJson } from '@kbn/es-ui-shared-plugin/public';
-import { isQuotaExceededError } from '../../../../services/history';
-import { DEFAULT_VARIABLES } from '../../../../../common/constants';
-import { getStorage, StorageKeys } from '../../../../services';
-import { sendRequest } from '../../../hooks';
-import { Actions } from '../../../stores/request';
+import { isQuotaExceededError } from '../../../services/history';
+import { DEFAULT_VARIABLES } from '../../../../common/constants';
+import { getStorage, StorageKeys } from '../../../services';
+import { sendRequest } from '../../hooks';
+import { Actions } from '../../stores/request';
 
 import {
   AutocompleteType,
@@ -40,8 +40,9 @@ import {
 } from './utils';
 
 import type { AdjustedParsedRequest } from './types';
-import { StorageQuotaError } from '../../../components/storage_quota_error';
-import { ContextValue } from '../../../contexts';
+import { type RequestToRestore, RestoreMethod } from '../../../types';
+import { StorageQuotaError } from '../../components/storage_quota_error';
+import { ContextValue } from '../../contexts';
 import { containsComments, indentData } from './utils/requests_utils';
 
 const AUTO_INDENTATION_ACTION_LABEL = 'Apply indentations';
@@ -120,7 +121,8 @@ export class MonacoEditorActionsProvider {
       const offset = this.editor.getTopForLineNumber(lineNumber) - this.editor.getScrollTop();
       this.setEditorActionsCss({
         visibility: 'visible',
-        top: offset,
+        //  Move position down by 1 px so that the action buttons panel doesn't cover the top border of the selected block
+        top: offset + 1,
       });
     }
   }
@@ -147,7 +149,7 @@ export class MonacoEditorActionsProvider {
           range: selectedRange,
           options: {
             isWholeLine: true,
-            className: SELECTED_REQUESTS_CLASSNAME,
+            blockClassName: SELECTED_REQUESTS_CLASSNAME,
           },
         },
       ]);
@@ -160,6 +162,11 @@ export class MonacoEditorActionsProvider {
 
   private async getSelectedParsedRequests(): Promise<AdjustedParsedRequest[]> {
     const model = this.editor.getModel();
+
+    if (!model) {
+      return [];
+    }
+
     const selection = this.editor.getSelection();
     if (!model || !selection) {
       return Promise.resolve([]);
@@ -173,6 +180,9 @@ export class MonacoEditorActionsProvider {
     startLineNumber: number,
     endLineNumber: number
   ): Promise<AdjustedParsedRequest[]> {
+    if (!model) {
+      return [];
+    }
     const parsedRequests = await this.parsedRequestsProvider.getRequests();
     const selectedRequests: AdjustedParsedRequest[] = [];
     for (const [index, parsedRequest] of parsedRequests.entries()) {
@@ -243,9 +253,17 @@ export class MonacoEditorActionsProvider {
     const { toasts } = notifications;
     try {
       const allRequests = await this.getRequests();
-      // if any request doesnt have a method then we gonna treat it as a non-valid
-      // request
-      const requests = allRequests.filter((request) => request.method);
+      const selectedRequests = await this.getSelectedParsedRequests();
+
+      const requests = allRequests
+        // if any request doesnt have a method then we gonna treat it as a non-valid
+        // request
+        .filter((request) => request.method)
+        // map the requests to the original line number
+        .map((request, index) => ({
+          ...request,
+          lineNumber: selectedRequests[index].startLineNumber,
+        }));
 
       // If we do have requests but none have methods we are not sending the request
       if (allRequests.length > 0 && !requests.length) {
@@ -479,9 +497,6 @@ export class MonacoEditorActionsProvider {
     return this.getSuggestions(model, position, context);
   }
 
-  /*
-   * This function inserts a request from the history into the editor
-   */
   public async restoreRequestFromHistory(request: string) {
     const model = this.editor.getModel();
     if (!model) {
@@ -679,4 +694,82 @@ export class MonacoEditorActionsProvider {
       this.editor.trigger(TRIGGER_SUGGESTIONS_ACTION_LABEL, TRIGGER_SUGGESTIONS_HANDLER_ID, {});
     }
   }
+
+  /*
+   * This function cleares out the editor content and replaces it with the provided requests
+   */
+  public async importRequestsToEditor(requestsToImport: string) {
+    const model = this.editor.getModel();
+
+    if (!model) {
+      return;
+    }
+
+    const edit: monaco.editor.IIdentifiedSingleEditOperation = {
+      range: model.getFullModelRange(),
+      text: requestsToImport,
+      forceMoveMarkers: true,
+    };
+
+    this.editor.executeEdits('restoreFromHistory', [edit]);
+  }
+
+  /*
+   * This function inserts a request after the last request in the editor
+   */
+  public async appendRequestToEditor(
+    req: RequestToRestore,
+    dispatch: Dispatch<Actions>,
+    context: ContextValue
+  ) {
+    const model = this.editor.getModel();
+
+    if (!model) {
+      return;
+    }
+
+    // 1 - Create an edit operation to insert the request after the last request
+    const lastLineNumber = model.getLineCount();
+    const column = model.getLineMaxColumn(lastLineNumber);
+    const edit: monaco.editor.IIdentifiedSingleEditOperation = {
+      range: {
+        startLineNumber: lastLineNumber,
+        startColumn: column,
+        endLineNumber: lastLineNumber,
+        endColumn: column,
+      },
+      text: `\n\n${req.request}`,
+      forceMoveMarkers: true,
+    };
+    this.editor.executeEdits('restoreFromHistory', [edit]);
+
+    // 2 - Since we add two new lines, the cursor should be at the beginning of the new request
+    const beginningOfNewReq = lastLineNumber + 2;
+    const selectedRequests = await this.getRequestsBetweenLines(
+      model,
+      beginningOfNewReq,
+      beginningOfNewReq
+    );
+    // We can assume that there is only one request given that we only add one
+    // request at a time.
+    const restoredRequest = selectedRequests[0];
+
+    // 3 - Set the cursor to the beginning of the new request,
+    this.editor.setSelection({
+      startLineNumber: restoredRequest.startLineNumber,
+      startColumn: 1,
+      endLineNumber: restoredRequest.startLineNumber,
+      endColumn: 1,
+    });
+
+    // 4 - Scroll to the beginning of the new request
+    this.editor.setScrollPosition({
+      scrollTop: this.editor.getTopForLineNumber(restoredRequest.startLineNumber),
+    });
+
+    // 5 - Optionally send the request
+    if (req.restoreMethod === RestoreMethod.RESTORE_AND_EXECUTE) {
+      this.sendRequests(dispatch, context);
+    }
+  }
 }
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx b/src/plugins/console/public/application/containers/editor/monaco_editor_output.tsx
similarity index 60%
rename from src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
rename to src/plugins/console/public/application/containers/editor/monaco_editor_output.tsx
index 9de6748b62b6c..b9e3f3e6f9885 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_output.tsx
+++ b/src/plugins/console/public/application/containers/editor/monaco_editor_output.tsx
@@ -7,26 +7,44 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { FunctionComponent, useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  CSSProperties,
+  FunctionComponent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { CodeEditor } from '@kbn/code-editor';
 import { css } from '@emotion/react';
 import { VectorTile } from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import { i18n } from '@kbn/i18n';
-import { EuiScreenReaderOnly } from '@elastic/eui';
+import {
+  EuiScreenReaderOnly,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButtonIcon,
+  EuiToolTip,
+} from '@elastic/eui';
 import { CONSOLE_THEME_ID, CONSOLE_OUTPUT_LANG_ID, monaco } from '@kbn/monaco';
-import { getStatusCodeDecorations } from './utils';
-import { useEditorReadContext, useRequestReadContext } from '../../../contexts';
-import { convertMapboxVectorTileToJson } from '../legacy/console_editor/mapbox_vector_tile';
 import {
+  getStatusCodeDecorations,
   isJSONContentType,
   isMapboxVectorTile,
   safeExpandLiteralStrings,
   languageForContentType,
-} from '../utilities';
+  convertMapboxVectorTileToJson,
+} from './utils';
+import { useEditorReadContext, useRequestReadContext, useServicesContext } from '../../contexts';
+import { MonacoEditorOutputActionsProvider } from './monaco_editor_output_actions_provider';
 import { useResizeCheckerUtils } from './hooks';
 
 export const MonacoEditorOutput: FunctionComponent = () => {
+  const context = useServicesContext();
+  const {
+    services: { notifications },
+  } = context;
   const { settings: readOnlySettings } = useEditorReadContext();
   const {
     lastResult: { data },
@@ -37,8 +55,14 @@ export const MonacoEditorOutput: FunctionComponent = () => {
   const { setupResizeChecker, destroyResizeChecker } = useResizeCheckerUtils();
   const lineDecorations = useRef<monaco.editor.IEditorDecorationsCollection | null>(null);
 
+  const actionsProvider = useRef<MonacoEditorOutputActionsProvider | null>(null);
+  const [editorActionsCss, setEditorActionsCss] = useState<CSSProperties>({});
+
   const editorDidMountCallback = useCallback(
     (editor: monaco.editor.IStandaloneCodeEditor) => {
+      const provider = new MonacoEditorOutputActionsProvider(editor, setEditorActionsCss);
+      actionsProvider.current = provider;
+
       setupResizeChecker(divRef.current!, editor);
       lineDecorations.current = editor.createDecorationsCollection();
     },
@@ -83,19 +107,71 @@ export const MonacoEditorOutput: FunctionComponent = () => {
         // If there are multiple responses, add decorations for their status codes
         const decorations = getStatusCodeDecorations(data);
         lineDecorations.current?.set(decorations);
+        // Highlight first line of the output editor
+        actionsProvider.current?.selectFirstLine();
       }
     } else {
       setValue('');
     }
   }, [readOnlySettings, data, value]);
 
+  const copyOutputCallback = useCallback(async () => {
+    const selectedText = (await actionsProvider.current?.getParsedOutput()) as string;
+
+    try {
+      if (!window.navigator?.clipboard) {
+        throw new Error('Could not copy to clipboard!');
+      }
+
+      await window.navigator.clipboard.writeText(selectedText);
+
+      notifications.toasts.addSuccess({
+        title: i18n.translate('console.outputPanel.copyOutputToast', {
+          defaultMessage: 'Selected output copied to clipboard',
+        }),
+      });
+    } catch (e) {
+      notifications.toasts.addDanger({
+        title: i18n.translate('console.outputPanel.copyOutputToastFailedMessage', {
+          defaultMessage: 'Could not copy selected output to clipboard',
+        }),
+      });
+    }
+  }, [notifications.toasts]);
+
   return (
     <div
       css={css`
         width: 100%;
+        height: 100%;
       `}
       ref={divRef}
     >
+      <EuiFlexGroup
+        className="conApp__outputActions"
+        responsive={false}
+        style={editorActionsCss}
+        justifyContent="center"
+        alignItems="center"
+      >
+        <EuiFlexItem grow={false}>
+          <EuiToolTip
+            content={i18n.translate('console.outputPanel.copyOutputButtonTooltipContent', {
+              defaultMessage: 'Click to copy to clipboard',
+            })}
+          >
+            <EuiButtonIcon
+              iconType="copyClipboard"
+              onClick={copyOutputCallback}
+              data-test-subj="copyOutputButton"
+              aria-label={i18n.translate('console.outputPanel.copyOutputButtonTooltipAriaLabel', {
+                defaultMessage: 'Click to copy to clipboard',
+              })}
+              iconSize={'s'}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+      </EuiFlexGroup>
       <EuiScreenReaderOnly>
         <label htmlFor={'ConAppOutputTextarea'}>
           {i18n.translate('console.monaco.outputTextarea', {
diff --git a/src/plugins/console/public/application/containers/editor/monaco_editor_output_actions_provider.ts b/src/plugins/console/public/application/containers/editor/monaco_editor_output_actions_provider.ts
new file mode 100644
index 0000000000000..fe20af6a1bcb4
--- /dev/null
+++ b/src/plugins/console/public/application/containers/editor/monaco_editor_output_actions_provider.ts
@@ -0,0 +1,185 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { CSSProperties } from 'react';
+import { debounce } from 'lodash';
+import { monaco } from '@kbn/monaco';
+import { createOutputParser } from '@kbn/monaco/src/console/output_parser';
+
+import {
+  getRequestEndLineNumber,
+  getRequestStartLineNumber,
+  SELECTED_REQUESTS_CLASSNAME,
+} from './utils';
+
+import type { AdjustedParsedRequest } from './types';
+
+const DEBOUNCE_HIGHLIGHT_WAIT_MS = 200;
+const OFFSET_EDITOR_ACTIONS = 1;
+
+export class MonacoEditorOutputActionsProvider {
+  private highlightedLines: monaco.editor.IEditorDecorationsCollection;
+  constructor(
+    private editor: monaco.editor.IStandaloneCodeEditor,
+    private setEditorActionsCss: (css: CSSProperties) => void
+  ) {
+    this.highlightedLines = this.editor.createDecorationsCollection();
+    this.editor.focus();
+
+    const debouncedHighlightRequests = debounce(
+      () => this.highlightRequests(),
+      DEBOUNCE_HIGHLIGHT_WAIT_MS,
+      {
+        leading: true,
+      }
+    );
+    debouncedHighlightRequests();
+
+    // init all listeners
+    editor.onDidChangeCursorPosition(async (event) => {
+      await debouncedHighlightRequests();
+    });
+    editor.onDidScrollChange(async (event) => {
+      await debouncedHighlightRequests();
+    });
+    editor.onDidChangeCursorSelection(async (event) => {
+      await debouncedHighlightRequests();
+    });
+    editor.onDidContentSizeChange(async (event) => {
+      await debouncedHighlightRequests();
+    });
+  }
+
+  private updateEditorActions(lineNumber?: number) {
+    // if no request is currently selected, hide the actions buttons
+    if (!lineNumber) {
+      this.setEditorActionsCss({
+        visibility: 'hidden',
+      });
+    } else {
+      // if a request is selected, the actions buttons are placed at lineNumberOffset - scrollOffset
+      const offset = this.editor.getTopForLineNumber(lineNumber) - this.editor.getScrollTop();
+      this.setEditorActionsCss({
+        visibility: 'visible',
+        // Add a little bit of padding to the top of the actions buttons so that
+        // it doesnt overlap with the selected request delimiter
+        top: offset + OFFSET_EDITOR_ACTIONS,
+      });
+    }
+  }
+
+  private async highlightRequests(): Promise<void> {
+    // get the requests in the selected range
+    const parsedRequests = await this.getSelectedParsedOutput();
+    // if any requests are selected, highlight the lines and update the position of actions buttons
+    if (parsedRequests.length > 0) {
+      // display the actions buttons on the 1st line of the 1st selected request
+      const selectionStartLineNumber = parsedRequests[0].startLineNumber;
+      this.updateEditorActions(selectionStartLineNumber); // highlight the lines from the 1st line of the first selected request
+      // to the last line of the last selected request
+      const selectionEndLineNumber = parsedRequests[parsedRequests.length - 1].endLineNumber;
+      const selectedRange = new monaco.Range(
+        selectionStartLineNumber,
+        1,
+        selectionEndLineNumber,
+        this.editor.getModel()?.getLineMaxColumn(selectionEndLineNumber) ?? 1
+      );
+      this.highlightedLines.set([
+        {
+          range: selectedRange,
+          options: {
+            isWholeLine: true,
+            blockClassName: SELECTED_REQUESTS_CLASSNAME,
+          },
+        },
+      ]);
+    } else {
+      // if no requests are selected, hide actions buttons and remove highlighted lines
+      this.updateEditorActions();
+      this.highlightedLines.clear();
+    }
+  }
+
+  private async getSelectedParsedOutput(): Promise<AdjustedParsedRequest[]> {
+    const model = this.editor.getModel();
+    const selection = this.editor.getSelection();
+
+    if (!model || !selection) {
+      return Promise.resolve([]);
+    }
+    const { startLineNumber, endLineNumber } = selection;
+    return this.getRequestsBetweenLines(model, startLineNumber, endLineNumber);
+  }
+
+  private async getRequestsBetweenLines(
+    model: monaco.editor.ITextModel,
+    startLineNumber: number,
+    endLineNumber: number
+  ): Promise<AdjustedParsedRequest[]> {
+    const parser = createOutputParser();
+    const parsedRequests = await parser(model.getValue(), undefined).responses;
+
+    const selectedRequests: AdjustedParsedRequest[] = [];
+    for (const [index, parsedRequest] of parsedRequests.entries()) {
+      const requestStartLineNumber = getRequestStartLineNumber(parsedRequest, model);
+      const requestEndLineNumber = getRequestEndLineNumber({
+        parsedRequest,
+        nextRequest: parsedRequests.at(index + 1),
+        model,
+        startLineNumber,
+      });
+      if (requestStartLineNumber > endLineNumber) {
+        // request is past the selection, no need to check further requests
+        break;
+      }
+      if (requestEndLineNumber < startLineNumber) {
+        // request is before the selection, do nothing
+      } else {
+        // request is selected
+        selectedRequests.push({
+          ...parsedRequest,
+          startLineNumber: requestStartLineNumber,
+          endLineNumber: requestEndLineNumber,
+        });
+      }
+    }
+    return selectedRequests;
+  }
+
+  // Set the cursor to the first line of the editor
+  public selectFirstLine() {
+    this.editor.setSelection(new monaco.Selection(0, 0, 0, 0));
+  }
+
+  public async getParsedOutput(): Promise<string> {
+    const model = this.editor.getModel();
+
+    if (!model) {
+      return '';
+    }
+
+    let selectedRequestsString = '';
+    const selectedRequests = await this.getSelectedParsedOutput();
+
+    for (const request of selectedRequests) {
+      const dataString = model
+        .getValueInRange({
+          startLineNumber: request.startLineNumber,
+          startColumn: 1,
+          endLineNumber: request.endLineNumber,
+          endColumn: model.getLineMaxColumn(request.endLineNumber),
+        })
+        .trim();
+
+      selectedRequestsString += dataString + '\n';
+    }
+
+    return selectedRequestsString;
+  }
+}
diff --git a/src/plugins/console/public/application/containers/editor/monaco/monaco_editor_suggestion_provider.ts b/src/plugins/console/public/application/containers/editor/monaco_editor_suggestion_provider.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/monaco_editor_suggestion_provider.ts
rename to src/plugins/console/public/application/containers/editor/monaco_editor_suggestion_provider.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/types.ts b/src/plugins/console/public/application/containers/editor/types.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/types.ts
rename to src/plugins/console/public/application/containers/editor/types.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.test.ts b/src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.test.ts
similarity index 98%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.test.ts
rename to src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.test.ts
index c3e7b36eca55a..0dc35062d015d 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.test.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.test.ts
@@ -14,14 +14,14 @@ import { monaco } from '@kbn/monaco';
 
 const mockPopulateContext = jest.fn();
 
-jest.mock('../../../../../lib/autocomplete/engine', () => {
+jest.mock('../../../../lib/autocomplete/engine', () => {
   return {
     populateContext: (...args: any) => {
       mockPopulateContext(args);
     },
   };
 });
-import { AutoCompleteContext } from '../../../../../lib/autocomplete/types';
+import { AutoCompleteContext } from '../../../../lib/autocomplete/types';
 import {
   getDocumentationLinkFromAutocomplete,
   getUrlPathCompletionItems,
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.ts b/src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.ts
similarity index 99%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.ts
rename to src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.ts
index cc3023e4cf941..cfe0341c39780 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/autocomplete_utils.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/autocomplete_utils.ts
@@ -14,13 +14,13 @@ import {
   getGlobalAutocompleteComponents,
   getTopLevelUrlCompleteComponents,
   getUnmatchedEndpointComponents,
-} from '../../../../../lib/kb';
+} from '../../../../lib/kb';
 import {
   AutoCompleteContext,
   type DataAutoCompleteRulesOneOf,
   ResultTerm,
-} from '../../../../../lib/autocomplete/types';
-import { populateContext } from '../../../../../lib/autocomplete/engine';
+} from '../../../../lib/autocomplete/types';
+import { populateContext } from '../../../../lib/autocomplete/engine';
 import type { EditorRequest } from '../types';
 import { parseBody, parseLine, parseUrl } from './tokens_utils';
 import {
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts b/src/plugins/console/public/application/containers/editor/utils/constants.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/constants.ts
rename to src/plugins/console/public/application/containers/editor/utils/constants.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts b/src/plugins/console/public/application/containers/editor/utils/index.ts
similarity index 86%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/index.ts
rename to src/plugins/console/public/application/containers/editor/utils/index.ts
index 41a303933f80a..1e58b3dc7fd71 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/index.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/index.ts
@@ -35,3 +35,10 @@ export {
 } from './autocomplete_utils';
 export { getLineTokens, containsUrlParams } from './tokens_utils';
 export { getStatusCodeDecorations } from './status_code_decoration_utils';
+export {
+  isMapboxVectorTile,
+  languageForContentType,
+  safeExpandLiteralStrings,
+  isJSONContentType,
+} from './output_data';
+export { convertMapboxVectorTileToJson } from './mapbox_vector_tile';
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.test.ts b/src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.test.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.test.ts
rename to src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.test.ts
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.ts b/src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.ts
rename to src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/convert_mapbox_vector_tile_to_json.ts
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/index.ts b/src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/index.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/index.ts
rename to src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/index.ts
diff --git a/src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/response.pbf b/src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/response.pbf
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/legacy/console_editor/mapbox_vector_tile/response.pbf
rename to src/plugins/console/public/application/containers/editor/utils/mapbox_vector_tile/response.pbf
diff --git a/src/plugins/console/public/application/containers/editor/utilities/output_data.ts b/src/plugins/console/public/application/containers/editor/utils/output_data.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/utilities/output_data.ts
rename to src/plugins/console/public/application/containers/editor/utils/output_data.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.test.ts b/src/plugins/console/public/application/containers/editor/utils/requests_utils.test.ts
similarity index 99%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.test.ts
rename to src/plugins/console/public/application/containers/editor/utils/requests_utils.test.ts
index a7e4d7e5b63ea..29c975300db6b 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.test.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/requests_utils.test.ts
@@ -8,7 +8,7 @@
  */
 
 import { monaco, ParsedRequest } from '@kbn/monaco';
-import type { MetricsTracker } from '../../../../../types';
+import type { MetricsTracker } from '../../../../types';
 import {
   getAutoIndentedRequests,
   getCurlRequest,
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts b/src/plugins/console/public/application/containers/editor/utils/requests_utils.ts
similarity index 98%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts
rename to src/plugins/console/public/application/containers/editor/utils/requests_utils.ts
index 5720d69f6dc4f..123daf919cf22 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/requests_utils.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/requests_utils.ts
@@ -9,9 +9,9 @@
 
 import { monaco, ParsedRequest } from '@kbn/monaco';
 import { parse } from 'hjson';
-import { constructUrl } from '../../../../../lib/es';
-import type { MetricsTracker } from '../../../../../types';
-import type { DevToolsVariable } from '../../../../components';
+import { constructUrl } from '../../../../lib/es';
+import type { MetricsTracker } from '../../../../types';
+import type { DevToolsVariable } from '../../../components';
 import type { EditorRequest, AdjustedParsedRequest } from '../types';
 import {
   urlVariableTemplateRegex,
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts b/src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.test.ts
similarity index 98%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts
rename to src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.test.ts
index 42287acd9de5b..8ea919257cb26 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.test.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.test.ts
@@ -13,7 +13,7 @@ import {
   WARNING_STATUS_BADGE_CLASSNAME,
   DANGER_STATUS_BADGE_CLASSNAME,
 } from './constants';
-import { RequestResult } from '../../../../hooks/use_send_current_request/send_request';
+import { RequestResult } from '../../../hooks/use_send_current_request/send_request';
 
 describe('getStatusCodeDecorations', () => {
   it('correctly returns all decorations on full data', () => {
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts b/src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.ts
similarity index 95%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts
rename to src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.ts
index f9d88a90e1fa2..01b87abb2fdf5 100644
--- a/src/plugins/console/public/application/containers/editor/monaco/utils/status_code_decoration_utils.ts
+++ b/src/plugins/console/public/application/containers/editor/utils/status_code_decoration_utils.ts
@@ -8,7 +8,7 @@
  */
 
 import { monaco } from '@kbn/monaco';
-import { RequestResult } from '../../../../hooks/use_send_current_request/send_request';
+import { RequestResult } from '../../../hooks/use_send_current_request/send_request';
 import {
   DEFAULT_STATUS_BADGE_CLASSNAME,
   SUCCESS_STATUS_BADGE_CLASSNAME,
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/tokens_utils.test.ts b/src/plugins/console/public/application/containers/editor/utils/tokens_utils.test.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/tokens_utils.test.ts
rename to src/plugins/console/public/application/containers/editor/utils/tokens_utils.test.ts
diff --git a/src/plugins/console/public/application/containers/editor/monaco/utils/tokens_utils.ts b/src/plugins/console/public/application/containers/editor/utils/tokens_utils.ts
similarity index 100%
rename from src/plugins/console/public/application/containers/editor/monaco/utils/tokens_utils.ts
rename to src/plugins/console/public/application/containers/editor/utils/tokens_utils.ts
diff --git a/src/plugins/console/public/application/containers/embeddable/console_wrapper.tsx b/src/plugins/console/public/application/containers/embeddable/console_wrapper.tsx
index 7dc868c223a9f..c068b405c8f94 100644
--- a/src/plugins/console/public/application/containers/embeddable/console_wrapper.tsx
+++ b/src/plugins/console/public/application/containers/embeddable/console_wrapper.tsx
@@ -118,7 +118,7 @@ interface ConsoleWrapperProps
 
 export const ConsoleWrapper = (props: ConsoleWrapperProps) => {
   const [dependencies, setDependencies] = useState<ConsoleDependencies | null>(null);
-  const { core, usageCollection, onKeyDown, isMonacoEnabled, isDevMode, isOpen } = props;
+  const { core, usageCollection, onKeyDown, isDevMode, isOpen } = props;
 
   useEffect(() => {
     if (dependencies === null && isOpen) {
@@ -169,7 +169,6 @@ export const ConsoleWrapper = (props: ConsoleWrapperProps) => {
             autocompleteInfo,
           },
           config: {
-            isMonacoEnabled,
             isDevMode,
           },
         }}
@@ -179,7 +178,7 @@ export const ConsoleWrapper = (props: ConsoleWrapperProps) => {
             {isOpen ? (
               <div className="embeddableConsole__content" data-test-subj="consoleEmbeddedBody">
                 <EuiWindowEvent event="keydown" handler={onKeyDown} />
-                <Main hideWelcome />
+                <Main isEmbeddable={true} />
               </div>
             ) : (
               <span />
diff --git a/src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx b/src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx
index a88de39edfd76..103f274b441be 100644
--- a/src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx
+++ b/src/plugins/console/public/application/containers/embeddable/embeddable_console.tsx
@@ -70,7 +70,6 @@ export const EmbeddableConsole = ({
   usageCollection,
   setDispatch,
   alternateView,
-  isMonacoEnabled,
   isDevMode,
   getConsoleHeight,
   setConsoleHeight,
@@ -199,7 +198,6 @@ export const EmbeddableConsole = ({
               core={core}
               usageCollection={usageCollection}
               onKeyDown={onKeyDown}
-              isMonacoEnabled={isMonacoEnabled}
               isDevMode={isDevMode}
             />
           ) : null}
diff --git a/src/plugins/console/public/application/containers/history/history.tsx b/src/plugins/console/public/application/containers/history/history.tsx
new file mode 100644
index 0000000000000..93777a364356e
--- /dev/null
+++ b/src/plugins/console/public/application/containers/history/history.tsx
@@ -0,0 +1,306 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback, useEffect, useState } from 'react';
+import { FixedSizeList } from 'react-window';
+import { i18n } from '@kbn/i18n';
+import moment from 'moment';
+import {
+  EuiSpacer,
+  EuiTitle,
+  EuiText,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiButton,
+  useEuiTheme,
+  EuiAutoSizer,
+  EuiSplitPanel,
+  EuiButtonEmpty,
+  EuiFormFieldset,
+  EuiCheckableCard,
+  EuiResizableContainer,
+} from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+
+import { SHELL_TAB_ID } from '../main';
+import { HistoryEmptyPrompt } from './history_empty';
+import { useServicesContext } from '../../contexts';
+import { useEditorActionContext } from '../../contexts/editor_context';
+import { HistoryViewer } from './history_viewer_monaco';
+import { useEditorReadContext } from '../../contexts/editor_context';
+import { getFormattedRequest } from '../../lib';
+import { ESRequest, RestoreMethod } from '../../../types';
+
+const CHILD_ELEMENT_PREFIX = 'historyReq';
+
+interface HistoryProps {
+  data: string;
+  endpoint: string;
+  method: string;
+  time: string;
+}
+
+interface RowProps {
+  index: number;
+  style: React.CSSProperties;
+  data: HistoryProps[];
+}
+
+const CheckeableCardLabel = ({ historyItem }: { historyItem: HistoryProps }) => {
+  const date = moment(historyItem.time);
+
+  let formattedDate = date.format('MMM D');
+  if (date.diff(moment(), 'days') > -7) {
+    formattedDate = date.fromNow();
+  }
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiText size="s">
+          <b>{historyItem.endpoint}</b>
+        </EuiText>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiText size="s" color="subdued">
+          {formattedDate}
+        </EuiText>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+interface Props {
+  isVerticalLayout: boolean;
+}
+
+export function History({ isVerticalLayout }: Props) {
+  const { euiTheme } = useEuiTheme();
+  const {
+    services: { history, routeHistory },
+  } = useServicesContext();
+  const dispatch = useEditorActionContext();
+
+  const { settings: readOnlySettings } = useEditorReadContext();
+
+  const [requests, setPastRequests] = useState<HistoryProps[]>(history.getHistory());
+
+  const clearHistory = useCallback(() => {
+    history.clearHistory();
+    setPastRequests(history.getHistory());
+  }, [history]);
+
+  const [viewingReq, setViewingReq] = useState<any>(null);
+
+  const initialize = useCallback(() => {
+    const nextSelectedIndex = 0;
+    setViewingReq(requests[nextSelectedIndex]);
+  }, [requests]);
+
+  const clear = () => {
+    clearHistory();
+    initialize();
+  };
+
+  const restoreRequestFromHistory = useCallback(
+    (restoreMethod: RestoreMethod) => {
+      routeHistory?.push(`/console/${SHELL_TAB_ID}`);
+
+      const formattedRequest = getFormattedRequest(viewingReq as ESRequest);
+
+      dispatch({
+        type: 'setRequestToRestore',
+        payload: {
+          request: formattedRequest,
+          restoreMethod,
+        },
+      });
+    },
+    [viewingReq, dispatch, routeHistory]
+  );
+
+  useEffect(() => {
+    initialize();
+  }, [initialize]);
+
+  const Row = useCallback(
+    ({ data, index, style }: RowProps) => (
+      <EuiFormFieldset key={index} data-test-subj="historyItemFieldset" style={style}>
+        <EuiCheckableCard
+          id={`${CHILD_ELEMENT_PREFIX}${index}`}
+          label={<CheckeableCardLabel historyItem={data[index]} />}
+          data-test-subj={`historyItem-${index}`}
+          checkableType="radio"
+          checked={viewingReq === data[index]}
+          onChange={() => {
+            setViewingReq(data[index]);
+          }}
+        />
+        <EuiSpacer size="s" />
+      </EuiFormFieldset>
+    ),
+    [viewingReq, setViewingReq]
+  );
+
+  return (
+    <EuiPanel
+      color="subdued"
+      paddingSize="none"
+      hasShadow={false}
+      borderRadius="none"
+      css={{ height: '100%' }}
+      data-test-subj="consoleHistoryPanel"
+    >
+      <EuiResizableContainer
+        style={{ height: '100%' }}
+        direction={isVerticalLayout ? 'vertical' : 'horizontal'}
+      >
+        {(EuiResizablePanel, EuiResizableButton) => (
+          <>
+            <EuiResizablePanel
+              initialSize={50}
+              minSize="30%"
+              tabIndex={0}
+              borderRadius="none"
+              hasShadow={false}
+              paddingSize="none"
+            >
+              <EuiSplitPanel.Outer
+                grow
+                color="subdued"
+                css={{
+                  height: '100%',
+                  paddingRight: euiTheme.size.s,
+                }}
+              >
+                <EuiSplitPanel.Inner paddingSize="m">
+                  <EuiFlexGroup direction="column" gutterSize="none" css={{ height: '100%' }}>
+                    <EuiFlexItem grow={false}>
+                      <EuiSpacer size="s" />
+                      <EuiTitle>
+                        <h2>
+                          <FormattedMessage
+                            id="console.historyPage.pageTitle"
+                            defaultMessage="History"
+                          />
+                        </h2>
+                      </EuiTitle>
+                      <EuiSpacer size="s" />
+                      <EuiText color="subdued">
+                        <p>
+                          <FormattedMessage
+                            id="console.historyPage.pageDescription"
+                            defaultMessage="Revisit and reuse your past queries"
+                          />
+                        </p>
+                      </EuiText>
+                      <EuiSpacer size="l" />
+                    </EuiFlexItem>
+
+                    <EuiFlexItem grow={true} css={{ height: '100%' }}>
+                      {requests.length === 0 && <HistoryEmptyPrompt />}
+
+                      {requests.length > 0 && (
+                        <EuiAutoSizer>
+                          {({ height, width }) => (
+                            <FixedSizeList
+                              height={height}
+                              itemCount={requests.length}
+                              itemSize={62}
+                              itemData={requests}
+                              width={width}
+                            >
+                              {Row}
+                            </FixedSizeList>
+                          )}
+                        </EuiAutoSizer>
+                      )}
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiSplitPanel.Inner>
+                <EuiSplitPanel.Inner
+                  grow={false}
+                  color="subdued"
+                  paddingSize="s"
+                  css={{ paddingTop: euiTheme.size.l }}
+                >
+                  <EuiText>
+                    <EuiButtonEmpty
+                      size="xs"
+                      color="primary"
+                      data-test-subj="consoleClearHistoryButton"
+                      onClick={clear}
+                    >
+                      <FormattedMessage
+                        id="console.historyPage.clearHistoryButtonLabel"
+                        defaultMessage="Clear all history"
+                      />
+                    </EuiButtonEmpty>
+                  </EuiText>
+                </EuiSplitPanel.Inner>
+              </EuiSplitPanel.Outer>
+            </EuiResizablePanel>
+
+            <EuiResizableButton className="conApp__resizerButton" />
+
+            <EuiResizablePanel initialSize={50} minSize="15%" tabIndex={0} paddingSize="none">
+              <EuiSplitPanel.Outer
+                color="subdued"
+                css={{ height: '100%' }}
+                borderRadius="none"
+                hasShadow={false}
+              >
+                <EuiSplitPanel.Inner
+                  paddingSize="none"
+                  css={{ top: 0 }}
+                  className="consoleEditorPanel"
+                >
+                  <HistoryViewer settings={readOnlySettings} req={viewingReq} />
+                </EuiSplitPanel.Inner>
+                <EuiSplitPanel.Inner grow={false} className="consoleEditorPanel">
+                  <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        data-test-subj="consoleHistoryAddAndRunButton"
+                        color="primary"
+                        iconType="play"
+                        disabled={!viewingReq}
+                        onClick={() => restoreRequestFromHistory(RestoreMethod.RESTORE_AND_EXECUTE)}
+                      >
+                        {i18n.translate('console.historyPage.addAndRunButtonLabel', {
+                          defaultMessage: 'Add and run',
+                        })}
+                      </EuiButton>
+                    </EuiFlexItem>
+
+                    <EuiFlexItem grow={false}>
+                      <EuiButton
+                        data-test-subj="consoleHistoryApplyButton"
+                        fill
+                        color="primary"
+                        iconType="plusInCircle"
+                        disabled={!viewingReq}
+                        onClick={() => restoreRequestFromHistory(RestoreMethod.RESTORE)}
+                      >
+                        {i18n.translate('console.historyPage.applyHistoryButtonLabel', {
+                          defaultMessage: 'Add',
+                        })}
+                      </EuiButton>
+                    </EuiFlexItem>
+                  </EuiFlexGroup>
+                </EuiSplitPanel.Inner>
+              </EuiSplitPanel.Outer>
+            </EuiResizablePanel>
+          </>
+        )}
+      </EuiResizableContainer>
+    </EuiPanel>
+  );
+}
diff --git a/src/plugins/console/public/application/containers/history/history_empty.tsx b/src/plugins/console/public/application/containers/history/history_empty.tsx
new file mode 100644
index 0000000000000..2e91dfbdf58d2
--- /dev/null
+++ b/src/plugins/console/public/application/containers/history/history_empty.tsx
@@ -0,0 +1,61 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiTitle, EuiFlexGroup, EuiFlexItem, EuiLink, EuiEmptyPrompt } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { useServicesContext } from '../../contexts';
+
+export function HistoryEmptyPrompt() {
+  const { docLinks } = useServicesContext();
+
+  return (
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiEmptyPrompt
+          title={
+            <h2>
+              {i18n.translate('console.historyPage.emptyPromptTitle', {
+                defaultMessage: 'No queries yet',
+              })}
+            </h2>
+          }
+          titleSize="xs"
+          body={
+            <p>
+              {i18n.translate('console.historyPage.emptyPromptBody', {
+                defaultMessage:
+                  'This history panel will display any past queries you’ve run for review and reuse.',
+              })}
+            </p>
+          }
+          footer={
+            <EuiTitle size="xxs">
+              <div>
+                <h3>
+                  <FormattedMessage
+                    id="console.historyPage.emptyPromptFooterLabel"
+                    defaultMessage="Want to learn more?"
+                  />
+                </h3>
+                <EuiLink href={docLinks.console.guide} target="_blank">
+                  <FormattedMessage
+                    id="console.historyPage.emptyPromptFooterLink"
+                    defaultMessage="Read Console documentation"
+                  />
+                </EuiLink>
+              </div>
+            </EuiTitle>
+          }
+        />
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}
diff --git a/src/plugins/console/public/application/containers/console_history/history_viewer_monaco.tsx b/src/plugins/console/public/application/containers/history/history_viewer_monaco.tsx
similarity index 94%
rename from src/plugins/console/public/application/containers/console_history/history_viewer_monaco.tsx
rename to src/plugins/console/public/application/containers/history/history_viewer_monaco.tsx
index 6c2e901f67bcf..9bc7114cf017d 100644
--- a/src/plugins/console/public/application/containers/console_history/history_viewer_monaco.tsx
+++ b/src/plugins/console/public/application/containers/history/history_viewer_monaco.tsx
@@ -14,7 +14,7 @@ import { CodeEditor } from '@kbn/code-editor';
 import { i18n } from '@kbn/i18n';
 import { formatRequestBodyDoc } from '../../../lib/utils';
 import { DevToolsSettings } from '../../../services';
-import { useResizeCheckerUtils } from '../editor/monaco/hooks';
+import { useResizeCheckerUtils } from '../editor/hooks';
 
 export const HistoryViewer = ({
   settings,
@@ -43,13 +43,14 @@ export const HistoryViewer = ({
     renderedHistoryRequest = req.method + ' ' + req.endpoint + '\n' + formattedData;
   } else {
     renderedHistoryRequest = i18n.translate('console.historyPage.monaco.noHistoryTextMessage', {
-      defaultMessage: 'No history available',
+      defaultMessage: '# No history available to display',
     });
   }
   return (
     <div
       css={css`
         width: 100%;
+        height: 100%;
       `}
       ref={divRef}
     >
diff --git a/src/plugins/console/public/application/containers/console_history/index.ts b/src/plugins/console/public/application/containers/history/index.ts
similarity index 90%
rename from src/plugins/console/public/application/containers/console_history/index.ts
rename to src/plugins/console/public/application/containers/history/index.ts
index d89006d5f4c13..c1902bb277d28 100644
--- a/src/plugins/console/public/application/containers/console_history/index.ts
+++ b/src/plugins/console/public/application/containers/history/index.ts
@@ -7,4 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { ConsoleHistory } from './console_history';
+export { History } from './history';
diff --git a/src/plugins/console/public/application/containers/index.ts b/src/plugins/console/public/application/containers/index.ts
index db47776c7bce5..d22c7ccbef893 100644
--- a/src/plugins/console/public/application/containers/index.ts
+++ b/src/plugins/console/public/application/containers/index.ts
@@ -8,4 +8,3 @@
  */
 
 export { Main } from './main';
-export { Panel, PanelsContainer } from './split_panel';
diff --git a/src/plugins/console/public/application/containers/main/constants.ts b/src/plugins/console/public/application/containers/main/constants.ts
new file mode 100644
index 0000000000000..5d5db1a784436
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/constants.ts
@@ -0,0 +1,30 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export const SHELL_TAB_ID = 'shell';
+export const HISTORY_TAB_ID = 'history';
+export const CONFIG_TAB_ID = 'config';
+
+export const SHELL_TOUR_STEP = 1;
+export const EDITOR_TOUR_STEP = 2;
+export const HISTORY_TOUR_STEP = 3;
+export const CONFIG_TOUR_STEP = 4;
+export const FILES_TOUR_STEP = 5;
+
+// Key used for storing tour state in local storage
+export const TOUR_STORAGE_KEY = 'consoleTour';
+
+export const INITIAL_TOUR_CONFIG = {
+  currentTourStep: 1,
+  isTourActive: true,
+  tourPopoverWidth: 360,
+  tourSubtitle: 'Console onboarding', // Used for state in local storage
+};
+
+export const EXPORT_FILE_NAME = 'console_export';
diff --git a/src/plugins/console/public/application/containers/main/get_console_tour_step_props.tsx b/src/plugins/console/public/application/containers/main/get_console_tour_step_props.tsx
new file mode 100644
index 0000000000000..1ee019fec3d19
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/get_console_tour_step_props.tsx
@@ -0,0 +1,82 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiTourStepProps,
+  EuiTourActions,
+  EuiTourState,
+} from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+import React from 'react';
+import { ConsoleTourStepProps } from '../../components';
+
+export const getConsoleTourStepProps = (
+  stateTourStepProps: EuiTourStepProps[],
+  actions: EuiTourActions,
+  tourState: EuiTourState
+): ConsoleTourStepProps[] => {
+  return stateTourStepProps.map((step: EuiTourStepProps) => {
+    const nextTourStep = () => {
+      if (tourState.currentTourStep < 5) {
+        actions.incrementStep();
+      }
+    };
+
+    return {
+      step: step.step,
+      stepsTotal: step.stepsTotal,
+      isStepOpen: step.step === tourState.currentTourStep && tourState.isTourActive,
+      title: step.title,
+      content: step.content,
+      anchorPosition: step.anchorPosition,
+      dataTestSubj: step['data-test-subj'],
+      maxWidth: step.maxWidth,
+      css: step.css,
+      onFinish: () => actions.finishTour(false),
+      footerAction:
+        step.step === step.stepsTotal ? (
+          <EuiButton
+            color="success"
+            size="s"
+            onClick={() => actions.finishTour()}
+            data-test-subj="consoleCompleteTourButton"
+          >
+            {i18n.translate('console.tour.completeTourButton', {
+              defaultMessage: 'Complete',
+            })}
+          </EuiButton>
+        ) : (
+          [
+            <EuiButtonEmpty
+              size="s"
+              color="text"
+              onClick={() => actions.finishTour()}
+              data-test-subj="consoleSkipTourButton"
+            >
+              {i18n.translate('console.tour.skipTourButton', {
+                defaultMessage: 'Skip tour',
+              })}
+            </EuiButtonEmpty>,
+            <EuiButton
+              color="success"
+              size="s"
+              onClick={nextTourStep}
+              data-test-subj="consoleNextTourStepButton"
+            >
+              {i18n.translate('console.tour.nextStepButton', {
+                defaultMessage: 'Next',
+              })}
+            </EuiButton>,
+          ]
+        ),
+    } as ConsoleTourStepProps;
+  });
+};
diff --git a/src/plugins/console/public/application/containers/main/get_top_nav.ts b/src/plugins/console/public/application/containers/main/get_top_nav.ts
index 3032ba42dd09b..ba08434c512be 100644
--- a/src/plugins/console/public/application/containers/main/get_top_nav.ts
+++ b/src/plugins/console/public/application/containers/main/get_top_nav.ts
@@ -8,72 +8,66 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import {
+  SHELL_TAB_ID,
+  HISTORY_TAB_ID,
+  CONFIG_TAB_ID,
+  SHELL_TOUR_STEP,
+  CONFIG_TOUR_STEP,
+  HISTORY_TOUR_STEP,
+} from './constants';
 
 interface Props {
-  onClickHistory: () => void;
-  onClickSettings: () => void;
-  onClickHelp: () => void;
-  onClickVariables: () => void;
+  selectedTab: string;
+  setSelectedTab: (id: string) => void;
 }
 
-export function getTopNavConfig({
-  onClickHistory,
-  onClickSettings,
-  onClickHelp,
-  onClickVariables,
-}: Props) {
+export function getTopNavConfig({ selectedTab, setSelectedTab }: Props) {
   return [
     {
-      id: 'history',
-      label: i18n.translate('console.topNav.historyTabLabel', {
-        defaultMessage: 'History',
-      }),
-      description: i18n.translate('console.topNav.historyTabDescription', {
-        defaultMessage: 'History',
-      }),
-      onClick: () => {
-        onClickHistory();
-      },
-      testId: 'consoleHistoryButton',
-    },
-    {
-      id: 'settings',
-      label: i18n.translate('console.topNav.settingsTabLabel', {
-        defaultMessage: 'Settings',
+      id: SHELL_TAB_ID,
+      label: i18n.translate('console.topNav.shellTabLabel', {
+        defaultMessage: 'Shell',
       }),
-      description: i18n.translate('console.topNav.settingsTabDescription', {
-        defaultMessage: 'Settings',
+      description: i18n.translate('console.topNav.shellTabDescription', {
+        defaultMessage: 'Shell',
       }),
       onClick: () => {
-        onClickSettings();
+        setSelectedTab(SHELL_TAB_ID);
       },
-      testId: 'consoleSettingsButton',
+      testId: 'consoleShellButton',
+      isSelected: selectedTab === SHELL_TAB_ID,
+      tourStep: SHELL_TOUR_STEP,
     },
     {
-      id: 'variables',
-      label: i18n.translate('console.topNav.variablesTabLabel', {
-        defaultMessage: 'Variables',
+      id: HISTORY_TAB_ID,
+      label: i18n.translate('console.topNav.historyTabLabel', {
+        defaultMessage: 'History',
       }),
-      description: i18n.translate('console.topNav.variablesTabDescription', {
-        defaultMessage: 'Variables',
+      description: i18n.translate('console.topNav.historyTabDescription', {
+        defaultMessage: 'History',
       }),
       onClick: () => {
-        onClickVariables();
+        setSelectedTab(HISTORY_TAB_ID);
       },
-      testId: 'consoleVariablesButton',
+      testId: 'consoleHistoryButton',
+      isSelected: selectedTab === HISTORY_TAB_ID,
+      tourStep: HISTORY_TOUR_STEP,
     },
     {
-      id: 'help',
-      label: i18n.translate('console.topNav.helpTabLabel', {
-        defaultMessage: 'Help',
+      id: CONFIG_TAB_ID,
+      label: i18n.translate('console.topNav.configTabLabel', {
+        defaultMessage: 'Config',
       }),
-      description: i18n.translate('console.topNav.helpTabDescription', {
-        defaultMessage: 'Help',
+      description: i18n.translate('console.topNav.configTabDescription', {
+        defaultMessage: 'Config',
       }),
       onClick: () => {
-        onClickHelp();
+        setSelectedTab(CONFIG_TAB_ID);
       },
-      testId: 'consoleHelpButton',
+      testId: 'consoleConfigButton',
+      isSelected: selectedTab === CONFIG_TAB_ID,
+      tourStep: CONFIG_TOUR_STEP,
     },
   ];
 }
diff --git a/src/plugins/console/public/application/containers/main/get_tour_steps.tsx b/src/plugins/console/public/application/containers/main/get_tour_steps.tsx
new file mode 100644
index 0000000000000..99600f95758f3
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/get_tour_steps.tsx
@@ -0,0 +1,122 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { EuiStatelessTourSteps, EuiLink, EuiText } from '@elastic/eui';
+import { DocLinksStart } from '@kbn/core-doc-links-browser';
+
+const commonProps = {
+  stepsTotal: 5,
+  maxWidth: 400,
+};
+
+export function getTourSteps(docLinks: DocLinksStart['links']) {
+  return [
+    {
+      step: 1,
+      title: i18n.translate('console.tour.shellStepTitle', {
+        defaultMessage: 'Welcome to the Console',
+      }),
+      content: (
+        <EuiText>
+          {i18n.translate('console.tour.shellStepContent', {
+            defaultMessage:
+              'Console is an interactive UI for calling Elasticsearch and Kibana APIs and viewing their responses. Use Query DSL syntax to search your data, manage settings, and more.',
+          })}
+        </EuiText>
+      ),
+      anchorPosition: 'downLeft',
+      'data-test-subj': 'shellTourStep',
+      ...commonProps,
+    },
+    {
+      step: 2,
+      title: i18n.translate('console.tour.editorStepTitle', {
+        defaultMessage: 'Get started querying',
+      }),
+      content: (
+        <EuiText>
+          <FormattedMessage
+            id="console.tour.editorStepContent"
+            defaultMessage="Enter a request in this input pane, and view the response in the adjacent output pane. For more details, visit {queryDslDocs}."
+            values={{
+              queryDslDocs: (
+                <EuiLink href={docLinks.query.queryDsl} target="_blank">
+                  QueryDSL documentation
+                </EuiLink>
+              ),
+            }}
+          />
+        </EuiText>
+      ),
+      anchorPosition: 'rightUp',
+      'data-test-subj': 'editorTourStep',
+      css: {
+        position: 'absolute',
+        top: '40%',
+        left: '15%',
+        transform: 'translateY(10px)',
+      },
+      ...commonProps,
+    },
+    {
+      step: 3,
+      title: i18n.translate('console.tour.historyStepTitle', {
+        defaultMessage: 'Revisit past queries',
+      }),
+      content: (
+        <EuiText>
+          {i18n.translate('console.tour.historyStepContent', {
+            defaultMessage:
+              'The history panel keeps track of your past queries, making it easy to review and rerun them.',
+          })}
+        </EuiText>
+      ),
+      anchorPosition: 'rightUp',
+      'data-test-subj': 'historyTourStep',
+      ...commonProps,
+    },
+    {
+      step: 4,
+      title: i18n.translate('console.tour.configStepTitle', {
+        defaultMessage: 'Customize your toolbox',
+      }),
+      content: (
+        <EuiText>
+          {i18n.translate('console.tour.configStepContent', {
+            defaultMessage:
+              'Fine-tune your Console’s settings and create variables to personalize your workflow.',
+          })}
+        </EuiText>
+      ),
+      anchorPosition: 'rightUp',
+      'data-test-subj': 'configTourStep',
+      ...commonProps,
+    },
+    {
+      step: 5,
+      title: i18n.translate('console.tour.filesStepTitle', {
+        defaultMessage: 'Manage Console files',
+      }),
+      content: (
+        <EuiText>
+          {i18n.translate('console.tour.filesStepContent', {
+            defaultMessage:
+              'Easily export your Console requests to a file, or import ones you’ve saved previously.',
+          })}
+        </EuiText>
+      ),
+      anchorPosition: 'downRight',
+      'data-test-subj': 'filesTourStep',
+      ...commonProps,
+    },
+  ] as EuiStatelessTourSteps;
+}
diff --git a/src/plugins/console/public/application/containers/main/i18n.ts b/src/plugins/console/public/application/containers/main/i18n.ts
new file mode 100644
index 0000000000000..3f6392883c598
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/i18n.ts
@@ -0,0 +1,43 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const MAIN_PANEL_LABELS = {
+  consolePageHeading: i18n.translate('console.pageHeading', {
+    defaultMessage: 'Console',
+  }),
+  importButton: i18n.translate('console.importButtonLabel', {
+    defaultMessage: 'Import requests',
+  }),
+  importButtonTooltip: i18n.translate('console.importButtonTooltipLabel', {
+    defaultMessage: 'Import requests from a file into the editor',
+  }),
+  exportButton: i18n.translate('console.exportButton', {
+    defaultMessage: 'Export requests',
+  }),
+  exportButtonTooltip: i18n.translate('console.exportButtonTooltipLabel', {
+    defaultMessage: 'Export all console requests to a TXT file',
+  }),
+  helpButton: i18n.translate('console.helpButtonTooltipContent', {
+    defaultMessage: 'Help',
+  }),
+  shortcutsButton: i18n.translate('console.shortcutsButtonAriaLabel', {
+    defaultMessage: 'Keyboard shortcuts',
+  }),
+  variablesButton: i18n.translate('console.variablesButton', {
+    defaultMessage: 'Variables',
+  }),
+  openFullscrenButton: i18n.translate('console.openFullscreenButton', {
+    defaultMessage: 'Open this console as a full page experience',
+  }),
+  closeFullscrenButton: i18n.translate('console.closeFullscreenButton', {
+    defaultMessage: 'Close full page experience',
+  }),
+};
diff --git a/src/plugins/console/public/application/containers/main/import_confirm_modal.tsx b/src/plugins/console/public/application/containers/main/import_confirm_modal.tsx
new file mode 100644
index 0000000000000..424bed1e45337
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/import_confirm_modal.tsx
@@ -0,0 +1,67 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React, { useCallback } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiConfirmModal } from '@elastic/eui';
+import { useEditorActionContext } from '../../contexts';
+import { useServicesContext } from '../../contexts';
+
+interface ImportConfirmModalProps {
+  onClose: () => void;
+  fileContent: string;
+}
+
+export const ImportConfirmModal = ({ onClose, fileContent }: ImportConfirmModalProps) => {
+  const dispatch = useEditorActionContext();
+  const {
+    services: { notifications },
+  } = useServicesContext();
+
+  const onConfirmImport = useCallback(() => {
+    // Import the file content
+    dispatch({
+      type: 'setFileToImport',
+      payload: fileContent as string,
+    });
+
+    notifications.toasts.addSuccess(
+      i18n.translate('console.notification.fileImportedSuccessfully', {
+        defaultMessage: `The file you selected has been imported successfully.`,
+      })
+    );
+
+    onClose();
+  }, [fileContent, onClose, dispatch, notifications.toasts]);
+
+  return (
+    <EuiConfirmModal
+      data-test-subj="importConfirmModal"
+      title={i18n.translate('console.importConfirmModal.title', {
+        defaultMessage: 'Import and replace requests?',
+      })}
+      onCancel={onClose}
+      onConfirm={onConfirmImport}
+      cancelButtonText={i18n.translate('console.importConfirmModal.cancelButton', {
+        defaultMessage: 'Cancel',
+      })}
+      confirmButtonText={i18n.translate('console.importConfirmModal.confirmButton', {
+        defaultMessage: 'Import and replace',
+      })}
+      buttonColor="primary"
+      defaultFocusedButton="confirm"
+    >
+      <p>
+        {i18n.translate('console.importConfirmModal.body', {
+          defaultMessage: `Importing this file will replace all current requests in the editor.`,
+        })}
+      </p>
+    </EuiConfirmModal>
+  );
+};
diff --git a/src/plugins/console/public/application/containers/main/index.ts b/src/plugins/console/public/application/containers/main/index.ts
index d22c7ccbef893..227b901342782 100644
--- a/src/plugins/console/public/application/containers/main/index.ts
+++ b/src/plugins/console/public/application/containers/main/index.ts
@@ -8,3 +8,4 @@
  */
 
 export { Main } from './main';
+export * from './constants';
diff --git a/src/plugins/console/public/application/containers/main/main.tsx b/src/plugins/console/public/application/containers/main/main.tsx
index 943423a524cec..c52e94f50749f 100644
--- a/src/plugins/console/public/application/containers/main/main.tsx
+++ b/src/plugins/console/public/application/containers/main/main.tsx
@@ -7,60 +7,176 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPageTemplate,
+  EuiSplitPanel,
+  EuiToolTip,
+  useEuiTour,
+  EuiButtonEmpty,
+  EuiHorizontalRule,
+  EuiScreenReaderOnly,
+  useIsWithinBreakpoints,
+  useEuiOverflowScroll,
+  useEuiTheme,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPageTemplate } from '@elastic/eui';
-import { ConsoleHistory } from '../console_history';
+import { downloadFileAs } from '@kbn/share-plugin/public';
+import { getConsoleTourStepProps } from './get_console_tour_step_props';
+import { useServicesContext } from '../../contexts';
+import { MAIN_PANEL_LABELS } from './i18n';
+import { NavIconButton } from './nav_icon_button';
 import { Editor } from '../editor';
-import { Settings } from '../settings';
-import { Variables } from '../variables';
-
+import { Config } from '../config';
+import {
+  useEditorReadContext,
+  useEditorActionContext,
+  useRequestActionContext,
+} from '../../contexts';
 import {
   TopNavMenu,
-  WelcomePanel,
-  HelpPanel,
   SomethingWentWrongCallout,
-  NetworkRequestStatusBar,
+  HelpPopover,
+  ShortcutsPopover,
+  ConsoleTourStep,
+  ConsoleTourStepProps,
 } from '../../components';
-
-import { useServicesContext, useEditorReadContext, useRequestReadContext } from '../../contexts';
+import { History } from '../history';
 import { useDataInit } from '../../hooks';
-
 import { getTopNavConfig } from './get_top_nav';
-import type { SenseEditor } from '../../models/sense_editor';
-import { getResponseWithMostSevereStatusCode } from '../../../lib/utils';
+import { getTourSteps } from './get_tour_steps';
+import { ImportConfirmModal } from './import_confirm_modal';
+import {
+  SHELL_TAB_ID,
+  HISTORY_TAB_ID,
+  CONFIG_TAB_ID,
+  EDITOR_TOUR_STEP,
+  TOUR_STORAGE_KEY,
+  INITIAL_TOUR_CONFIG,
+  FILES_TOUR_STEP,
+  EXPORT_FILE_NAME,
+} from './constants';
 
-export interface MainProps {
-  hideWelcome?: boolean;
+interface MainProps {
+  currentTabProp?: string;
+  isEmbeddable?: boolean;
 }
 
-export function Main({ hideWelcome = false }: MainProps) {
+// 2MB limit (2 * 1024 * 1024 bytes)
+const MAX_FILE_UPLOAD_SIZE = 2 * 1024 * 1024;
+
+export function Main({ currentTabProp, isEmbeddable = false }: MainProps) {
+  const dispatch = useEditorActionContext();
+  const requestDispatch = useRequestActionContext();
+  const { currentView } = useEditorReadContext();
+  const currentTab = currentTabProp ?? currentView;
+  const [isShortcutsOpen, setIsShortcutsOpen] = useState(false);
+  const [isHelpOpen, setIsHelpOpen] = useState(false);
+  const [isFullscreenOpen, setIsFullScreen] = useState(false);
+  const [isConfirmImportOpen, setIsConfirmImportOpen] = useState<string | null>(null);
+  const { euiTheme } = useEuiTheme();
+
   const {
-    services: { storage },
+    docLinks,
+    services: { notifications, routeHistory },
   } = useServicesContext();
 
-  const { ready: editorsReady } = useEditorReadContext();
+  const isVerticalLayout = useIsWithinBreakpoints(['xs', 's', 'm']);
 
-  const {
-    requestInFlight: requestInProgress,
-    lastResult: { data: requestData, error: requestError },
-  } = useRequestReadContext();
+  const storageTourState = localStorage.getItem(TOUR_STORAGE_KEY);
+  const initialTourState = storageTourState ? JSON.parse(storageTourState) : INITIAL_TOUR_CONFIG;
+  const [tourStepProps, actions, tourState] = useEuiTour(getTourSteps(docLinks), initialTourState);
 
-  const [showWelcome, setShowWelcomePanel] = useState(
-    () => storage.get('version_welcome_shown') !== '@@SENSE_REVISION' && !hideWelcome
+  useEffect(() => {
+    localStorage.setItem(TOUR_STORAGE_KEY, JSON.stringify(tourState));
+  }, [tourState]);
+
+  // Clean up request output when switching tabs
+  useEffect(() => {
+    requestDispatch({ type: 'cleanRequest', payload: undefined });
+  }, [currentView, requestDispatch]);
+
+  const consoleTourStepProps: ConsoleTourStepProps[] = getConsoleTourStepProps(
+    tourStepProps,
+    actions,
+    tourState
   );
 
-  const [showingHistory, setShowHistory] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
-  const [showHelp, setShowHelp] = useState(false);
-  const [showVariables, setShowVariables] = useState(false);
+  const { done, error, retry } = useDataInit();
 
-  const [editorInstance, setEditorInstance] = useState<SenseEditor | null>(null);
+  const { currentTextObject } = useEditorReadContext();
+  const [inputEditorValue, setInputEditorValue] = useState<string>(currentTextObject?.text ?? '');
 
-  const renderConsoleHistory = () => {
-    return editorsReady ? <ConsoleHistory close={() => setShowHistory(false)} /> : null;
+  const updateTab = (tab: string) => {
+    if (routeHistory) {
+      routeHistory?.push(`/console/${tab}`);
+    } else {
+      dispatch({ type: 'setCurrentView', payload: tab });
+    }
   };
-  const { done, error, retry } = useDataInit();
+
+  const toggleFullscreen = () => {
+    const isEnabled = !isFullscreenOpen;
+
+    setIsFullScreen(isEnabled);
+
+    if (isEnabled) {
+      document.querySelector('#consoleRoot')?.requestFullscreen();
+    } else {
+      document.exitFullscreen();
+    }
+  };
+
+  const onFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    const file = files && files[0];
+    // Clear the input value so that a file can be imported again
+    event.target.value = '';
+
+    if (file) {
+      if (file.size > MAX_FILE_UPLOAD_SIZE) {
+        notifications.toasts.addWarning(
+          i18n.translate('console.notification.error.fileTooBigMessage', {
+            defaultMessage: `File size exceeds the 2MB limit.`,
+          })
+        );
+        return;
+      }
+
+      const reader = new FileReader();
+
+      reader.onerror = () => {
+        notifications.toasts.addWarning(
+          i18n.translate('console.notification.error.failedToReadFile', {
+            defaultMessage: `Failed to read the file you selected.`,
+          })
+        );
+      };
+
+      reader.onload = (e) => {
+        const fileContent = e?.target?.result;
+
+        if (fileContent) {
+          setIsConfirmImportOpen(fileContent as string);
+        } else {
+          notifications.toasts.addWarning(
+            i18n.translate('console.notification.error.fileImportNoContent', {
+              defaultMessage: `The file you selected doesn't appear to have any content. Please select a different file.`,
+            })
+          );
+        }
+      };
+
+      reader.readAsText(file);
+    }
+  };
+
+  const scrollablePanelStyle = css`
+    ${useEuiOverflowScroll('y', false)}
+  `;
 
   if (error) {
     return (
@@ -70,76 +186,171 @@ export function Main({ hideWelcome = false }: MainProps) {
     );
   }
 
-  const data = getResponseWithMostSevereStatusCode(requestData) ?? requestError;
+  const shortcutsButton = (
+    <NavIconButton
+      iconType="keyboard"
+      onClick={() => setIsShortcutsOpen(!isShortcutsOpen)}
+      ariaLabel={MAIN_PANEL_LABELS.shortcutsButton}
+      dataTestSubj="consoleShortcutsButton"
+      toolTipContent={MAIN_PANEL_LABELS.shortcutsButton}
+    />
+  );
+
+  const helpButton = (
+    <NavIconButton
+      iconType="questionInCircle"
+      onClick={() => setIsHelpOpen(!isHelpOpen)}
+      ariaLabel={MAIN_PANEL_LABELS.helpButton}
+      dataTestSubj="consoleHelpButton"
+      toolTipContent={MAIN_PANEL_LABELS.helpButton}
+    />
+  );
 
   return (
-    <div id="consoleRoot">
-      <EuiFlexGroup
-        className="consoleContainer"
-        gutterSize="none"
-        direction="column"
-        responsive={false}
-      >
-        <EuiFlexItem grow={false}>
-          <EuiTitle className="euiScreenReaderOnly">
-            <h1>
-              {i18n.translate('console.pageHeading', {
-                defaultMessage: 'Console',
-              })}
-            </h1>
-          </EuiTitle>
-          <EuiFlexGroup gutterSize="none">
+    <div id="consoleRoot" className={`consoleContainer${isEmbeddable ? '--embeddable' : ''}`}>
+      <EuiScreenReaderOnly>
+        <h1>{MAIN_PANEL_LABELS.consolePageHeading}</h1>
+      </EuiScreenReaderOnly>
+      <EuiSplitPanel.Outer grow={true} borderRadius={isEmbeddable ? 'none' : 'm'}>
+        <EuiSplitPanel.Inner grow={false} className="consoleTabs">
+          <EuiFlexGroup direction="row" alignItems="center" gutterSize="s" responsive={false}>
             <EuiFlexItem>
               <TopNavMenu
                 disabled={!done}
                 items={getTopNavConfig({
-                  onClickHistory: () => setShowHistory(!showingHistory),
-                  onClickSettings: () => setShowSettings(true),
-                  onClickHelp: () => setShowHelp(!showHelp),
-                  onClickVariables: () => setShowVariables(!showVariables),
+                  selectedTab: currentTab,
+                  setSelectedTab: (tab) => updateTab(tab),
                 })}
+                tourStepProps={consoleTourStepProps}
               />
             </EuiFlexItem>
-            <EuiFlexItem grow={false} className="conApp__tabsExtension">
-              <NetworkRequestStatusBar
-                requestInProgress={requestInProgress}
-                requestResult={
-                  data
-                    ? {
-                        method: data.request.method.toUpperCase(),
-                        endpoint: data.request.path,
-                        statusCode: data.response.statusCode,
-                        statusText: data.response.statusText,
-                        timeElapsedMs: data.response.timeMs,
+            <EuiFlexItem grow={false}>
+              <ConsoleTourStep tourStepProps={consoleTourStepProps[FILES_TOUR_STEP - 1]}>
+                <>
+                  <EuiToolTip content={MAIN_PANEL_LABELS.exportButtonTooltip}>
+                    <EuiButtonEmpty
+                      iconType="exportAction"
+                      onClick={() =>
+                        downloadFileAs(EXPORT_FILE_NAME, {
+                          content: inputEditorValue,
+                          type: 'text/plain',
+                        })
                       }
-                    : undefined
-                }
+                      size="xs"
+                      data-test-subj="consoleExportButton"
+                    >
+                      {MAIN_PANEL_LABELS.exportButton}
+                    </EuiButtonEmpty>
+                  </EuiToolTip>
+                  <>
+                    <EuiToolTip content={MAIN_PANEL_LABELS.importButtonTooltip}>
+                      <EuiButtonEmpty
+                        iconType="importAction"
+                        onClick={() => document.getElementById('importConsoleFile')?.click()}
+                        size="xs"
+                        data-test-subj="consoleImportButton"
+                      >
+                        {MAIN_PANEL_LABELS.importButton}
+                      </EuiButtonEmpty>
+                    </EuiToolTip>
+                    {/* This input is hidden by CSS in the UI, but the NavIcon button activates it */}
+                    <input
+                      type="file"
+                      accept="text/*"
+                      multiple={false}
+                      name="consoleSnippets"
+                      id="importConsoleFile"
+                      onChange={onFileChange}
+                    />
+                  </>
+                </>
+              </ConsoleTourStep>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <ShortcutsPopover
+                button={shortcutsButton}
+                isOpen={isShortcutsOpen}
+                closePopover={() => setIsShortcutsOpen(false)}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <HelpPopover
+                button={helpButton}
+                isOpen={isHelpOpen}
+                closePopover={() => setIsHelpOpen(false)}
+                resetTour={() => {
+                  setIsHelpOpen(false);
+                  updateTab(SHELL_TAB_ID);
+                  actions.resetTour();
+                }}
               />
             </EuiFlexItem>
+            {isEmbeddable && (
+              <EuiFlexItem grow={false}>
+                <NavIconButton
+                  iconType={isFullscreenOpen ? 'fullScreenExit' : 'fullScreen'}
+                  onClick={toggleFullscreen}
+                  ariaLabel={
+                    isFullscreenOpen
+                      ? MAIN_PANEL_LABELS.closeFullscrenButton
+                      : MAIN_PANEL_LABELS.openFullscrenButton
+                  }
+                  dataTestSubj="consoleToggleFullscreenButton"
+                  toolTipContent={
+                    isFullscreenOpen
+                      ? MAIN_PANEL_LABELS.closeFullscrenButton
+                      : MAIN_PANEL_LABELS.openFullscrenButton
+                  }
+                />
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
-        </EuiFlexItem>
-        {showingHistory ? <EuiFlexItem grow={false}>{renderConsoleHistory()}</EuiFlexItem> : null}
-        <EuiFlexItem>
-          <Editor loading={!done} setEditorInstance={setEditorInstance} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      {done && showWelcome ? (
-        <WelcomePanel
-          onDismiss={() => {
-            storage.set('version_welcome_shown', '@@SENSE_REVISION');
-            setShowWelcomePanel(false);
-          }}
-        />
-      ) : null}
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" />
+        <EuiSplitPanel.Inner
+          paddingSize="none"
+          css={[scrollablePanelStyle, { backgroundColor: euiTheme.colors.body }]}
+        >
+          {currentTab === SHELL_TAB_ID && (
+            <Editor
+              loading={!done}
+              isVerticalLayout={isVerticalLayout}
+              inputEditorValue={inputEditorValue}
+              setInputEditorValue={setInputEditorValue}
+            />
+          )}
+          {currentTab === HISTORY_TAB_ID && <History isVerticalLayout={isVerticalLayout} />}
+          {currentTab === CONFIG_TAB_ID && <Config isVerticalLayout={isVerticalLayout} />}
+        </EuiSplitPanel.Inner>
+        <EuiHorizontalRule margin="none" className="consoleVariablesBottomBar" />
+        <EuiSplitPanel.Inner
+          paddingSize="xs"
+          grow={false}
+          className="consoleVariablesBottomBar"
+          color="plain"
+        >
+          <EuiButtonEmpty
+            onClick={() => updateTab(CONFIG_TAB_ID)}
+            iconType="editorCodeBlock"
+            size="xs"
+            color="text"
+          >
+            {MAIN_PANEL_LABELS.variablesButton}
+          </EuiButtonEmpty>
+        </EuiSplitPanel.Inner>
+      </EuiSplitPanel.Outer>
 
-      {showSettings ? (
-        <Settings onClose={() => setShowSettings(false)} editorInstance={editorInstance} />
-      ) : null}
+      {/* Empty container for Editor Tour Step */}
+      <ConsoleTourStep tourStepProps={consoleTourStepProps[EDITOR_TOUR_STEP - 1]}>
+        <div />
+      </ConsoleTourStep>
 
-      {showVariables ? <Variables onClose={() => setShowVariables(false)} /> : null}
-
-      {showHelp ? <HelpPanel onClose={() => setShowHelp(false)} /> : null}
+      {isConfirmImportOpen && (
+        <ImportConfirmModal
+          onClose={() => setIsConfirmImportOpen(null)}
+          fileContent={isConfirmImportOpen}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/plugins/console/public/application/containers/main/nav_icon_button.tsx b/src/plugins/console/public/application/containers/main/nav_icon_button.tsx
new file mode 100644
index 0000000000000..b032e81def469
--- /dev/null
+++ b/src/plugins/console/public/application/containers/main/nav_icon_button.tsx
@@ -0,0 +1,38 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import React from 'react';
+
+interface NavIconButtonProps {
+  iconType: string;
+  onClick: () => void;
+  ariaLabel: string;
+  dataTestSubj: string;
+  toolTipContent: string;
+}
+
+export const NavIconButton = ({
+  iconType,
+  onClick,
+  ariaLabel,
+  dataTestSubj,
+  toolTipContent,
+}: NavIconButtonProps) => {
+  return (
+    <EuiToolTip position="top" content={toolTipContent}>
+      <EuiButtonIcon
+        iconType={iconType}
+        onClick={onClick}
+        aria-label={ariaLabel}
+        data-test-subj={dataTestSubj}
+      />
+    </EuiToolTip>
+  );
+};
diff --git a/src/plugins/console/public/application/containers/split_panel/__snapshots__/split_panel.test.tsx.snap b/src/plugins/console/public/application/containers/split_panel/__snapshots__/split_panel.test.tsx.snap
deleted file mode 100644
index c0279f3d261b3..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/__snapshots__/split_panel.test.tsx.snap
+++ /dev/null
@@ -1,101 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Split panel should render correctly 1`] = `
-<PanelsContainer>
-  <PanelContextProvider
-    registry={
-      PanelRegistry {
-        "panels": Array [
-          Object {
-            "getWidth": [Function],
-            "setWidth": [Function],
-            "width": 100,
-          },
-          Object {
-            "getWidth": [Function],
-            "setWidth": [Function],
-            "width": 100,
-          },
-        ],
-      }
-    }
-  >
-    <div
-      onMouseMove={[Function]}
-      onMouseUp={[Function]}
-      style={
-        Object {
-          "display": "flex",
-          "height": "100%",
-          "width": "100%",
-        }
-      }
-    >
-      <Panel
-        key=".0"
-      >
-        <div
-          style={
-            Object {
-              "display": "flex",
-              "width": "100%",
-            }
-          }
-        >
-          <p
-            style={
-              Object {
-                "width": "50px",
-              }
-            }
-          >
-            A
-          </p>
-        </div>
-      </Panel>
-      <Resizer
-        key="resizer"
-        onKeyDown={[Function]}
-        onMouseDown={[Function]}
-      >
-        <button
-          aria-label="Press left/right to adjust panels size"
-          data-test-subj="splitPanelResizer"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-        >
-          <EuiIcon
-            type="grabHorizontal"
-          >
-            <span
-              data-euiicon-type="grabHorizontal"
-            />
-          </EuiIcon>
-        </button>
-      </Resizer>
-      <Panel
-        key=".1"
-      >
-        <div
-          style={
-            Object {
-              "display": "flex",
-              "width": "100%",
-            }
-          }
-        >
-          <p
-            style={
-              Object {
-                "width": "50px",
-              }
-            }
-          >
-            B
-          </p>
-        </div>
-      </Panel>
-    </div>
-  </PanelContextProvider>
-</PanelsContainer>
-`;
diff --git a/src/plugins/console/public/application/containers/split_panel/index.ts b/src/plugins/console/public/application/containers/split_panel/index.ts
deleted file mode 100644
index 00aa2b83db6d8..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/index.ts
+++ /dev/null
@@ -1,11 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { Panel } from './panel';
-export { PanelsContainer } from './panel_container';
diff --git a/src/plugins/console/public/application/containers/split_panel/panel.tsx b/src/plugins/console/public/application/containers/split_panel/panel.tsx
deleted file mode 100644
index b46edda1c2b03..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/panel.tsx
+++ /dev/null
@@ -1,47 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
-import { usePanelContext } from '../../contexts';
-
-export interface Props {
-  children: ReactNode[] | ReactNode;
-  className?: string;
-
-  /**
-   * initial width of the panel in percents
-   */
-  initialWidth?: number;
-  style?: CSSProperties;
-}
-
-export function Panel({ children, className, initialWidth = 100, style = {} }: Props) {
-  const [width, setWidth] = useState(`${initialWidth}%`);
-  const { registry } = usePanelContext();
-  const divRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    registry.registerPanel({
-      width: initialWidth,
-      setWidth(value) {
-        setWidth(value + '%');
-        this.width = value;
-      },
-      getWidth() {
-        return divRef.current!.getBoundingClientRect().width;
-      },
-    });
-  }, [initialWidth, registry]);
-
-  return (
-    <div className={className} ref={divRef} style={{ ...style, width, display: 'flex' }}>
-      {children}
-    </div>
-  );
-}
diff --git a/src/plugins/console/public/application/containers/split_panel/panel_container.tsx b/src/plugins/console/public/application/containers/split_panel/panel_container.tsx
deleted file mode 100644
index c9b3277a15c4a..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/panel_container.tsx
+++ /dev/null
@@ -1,140 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { Children, ReactNode, useRef, useState, useCallback, useEffect } from 'react';
-
-import { keys } from '@elastic/eui';
-import { Resizer, ResizerMouseEvent, ResizerKeyDownEvent } from './resizer';
-import { PanelContextProvider, PanelRegistry } from '../../contexts';
-
-export interface Props {
-  children: ReactNode;
-  className?: string;
-  resizerClassName?: string;
-  onPanelWidthChange?: (arrayOfPanelWidths: number[]) => void;
-}
-
-interface State {
-  isDragging: boolean;
-  currentResizerPos: number;
-}
-
-const initialState: State = { isDragging: false, currentResizerPos: -1 };
-
-const pxToPercent = (proportion: number, whole: number) => (proportion / whole) * 100;
-
-export function PanelsContainer({
-  children,
-  className,
-  onPanelWidthChange,
-  resizerClassName,
-}: Props) {
-  const childrenArray = Children.toArray(children);
-  const [firstChild, secondChild] = childrenArray;
-
-  const registryRef = useRef(new PanelRegistry());
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [state, setState] = useState<State>(initialState);
-
-  const getContainerWidth = () => {
-    return containerRef.current!.getBoundingClientRect().width;
-  };
-
-  const handleMouseDown = useCallback(
-    (event: ResizerMouseEvent) => {
-      setState({
-        ...state,
-        isDragging: true,
-        currentResizerPos: event.clientX,
-      });
-    },
-    [state]
-  );
-
-  const handleKeyDown = useCallback(
-    (ev: ResizerKeyDownEvent) => {
-      const { key } = ev;
-
-      if (key === keys.ARROW_LEFT || key === keys.ARROW_RIGHT) {
-        ev.preventDefault();
-
-        const { current: registry } = registryRef;
-        const [left, right] = registry.getPanels();
-
-        const leftPercent = left.width - (key === keys.ARROW_LEFT ? 1 : -1);
-        const rightPercent = right.width - (key === keys.ARROW_RIGHT ? 1 : -1);
-
-        left.setWidth(leftPercent);
-        right.setWidth(rightPercent);
-
-        if (onPanelWidthChange) {
-          onPanelWidthChange([leftPercent, rightPercent]);
-        }
-      }
-    },
-    [onPanelWidthChange]
-  );
-
-  useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      // For now we only support bi-split
-      if (childrenArray.length > 2) {
-        // eslint-disable-next-line no-console
-        console.warn(
-          '[Split Panels Container] Detected more than two children; ignoring additional children.'
-        );
-      }
-    }
-  }, [childrenArray.length]);
-
-  const childrenWithResizer = [
-    firstChild,
-    <Resizer
-      key={'resizer'}
-      className={resizerClassName}
-      onKeyDown={handleKeyDown}
-      onMouseDown={handleMouseDown}
-    />,
-    secondChild,
-  ];
-
-  return (
-    <PanelContextProvider registry={registryRef.current}>
-      <div
-        className={className}
-        ref={containerRef}
-        style={{ display: 'flex', height: '100%', width: '100%' }}
-        onMouseMove={(event) => {
-          if (state.isDragging) {
-            const { clientX: x } = event;
-            const { current: registry } = registryRef;
-            const [left, right] = registry.getPanels();
-            const delta = x - state.currentResizerPos;
-            const containerWidth = getContainerWidth();
-            const leftPercent = pxToPercent(left.getWidth() + delta, containerWidth);
-            const rightPercent = pxToPercent(right.getWidth() - delta, containerWidth);
-            left.setWidth(leftPercent);
-            right.setWidth(rightPercent);
-
-            if (onPanelWidthChange) {
-              onPanelWidthChange([leftPercent, rightPercent]);
-            }
-
-            setState({ ...state, currentResizerPos: x });
-          }
-        }}
-        onMouseUp={() => {
-          setState(initialState);
-        }}
-      >
-        {childrenWithResizer}
-      </div>
-    </PanelContextProvider>
-  );
-}
diff --git a/src/plugins/console/public/application/containers/split_panel/resizer.tsx b/src/plugins/console/public/application/containers/split_panel/resizer.tsx
deleted file mode 100644
index cbdf4826fff94..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/resizer.tsx
+++ /dev/null
@@ -1,35 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiIcon } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-export type ResizerMouseEvent = React.MouseEvent<HTMLButtonElement, MouseEvent>;
-export type ResizerKeyDownEvent = React.KeyboardEvent<HTMLButtonElement>;
-
-export interface Props {
-  onKeyDown: (eve: ResizerKeyDownEvent) => void;
-  onMouseDown: (eve: ResizerMouseEvent) => void;
-  className?: string;
-}
-
-export function Resizer(props: Props) {
-  return (
-    <button
-      {...props}
-      data-test-subj="splitPanelResizer"
-      aria-label={i18n.translate('console.splitPanel.adjustPanelSizeAriaLabel', {
-        defaultMessage: 'Press left/right to adjust panels size',
-      })}
-    >
-      <EuiIcon type="grabHorizontal" />
-    </button>
-  );
-}
diff --git a/src/plugins/console/public/application/containers/split_panel/split_panel.test.tsx b/src/plugins/console/public/application/containers/split_panel/split_panel.test.tsx
deleted file mode 100644
index 41c822be46b54..0000000000000
--- a/src/plugins/console/public/application/containers/split_panel/split_panel.test.tsx
+++ /dev/null
@@ -1,74 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { mount } from 'enzyme';
-import toJson from 'enzyme-to-json';
-import { spy } from 'sinon';
-
-import { Panel } from './panel';
-import { PanelsContainer } from './panel_container';
-
-const testComponentA = <p style={{ width: '50px' }}>A</p>;
-const testComponentB = <p style={{ width: '50px' }}>B</p>;
-
-describe('Split panel', () => {
-  it('should render correctly', () => {
-    const panelContainer = mount(
-      <PanelsContainer>
-        <Panel>{testComponentA}</Panel>
-        <Panel>{testComponentB}</Panel>
-      </PanelsContainer>
-    );
-    expect(toJson(panelContainer)).toMatchSnapshot();
-  });
-
-  it('should calculate sizes correctly on mouse drags', () => {
-    // Since this test is not running in the browser we can't expect all of the
-    // APIs for sizing to be available. The below is a very hacky way of setting
-    // the DOMElement width so that we have a lightweight test for width calculation
-    // logic.
-    const div = mount(<div />);
-    const proto = (div.find('div').first().getDOMNode() as any).__proto__;
-    const originalGetBoundingClientRect = proto.getBoundingClientRect;
-
-    proto.getBoundingClientRect = spy(() => {
-      return {
-        width: 1000,
-      };
-    });
-
-    try {
-      // Everything here runs sync.
-      let widthsCache: number[] = [];
-      const onWidthChange = (widths: number[]) => {
-        widthsCache = widths;
-      };
-
-      const panelContainer = mount(
-        <PanelsContainer onPanelWidthChange={onWidthChange}>
-          <Panel initialWidth={50}>{testComponentA}</Panel>
-          <Panel initialWidth={50}>{testComponentB}</Panel>
-        </PanelsContainer>
-      );
-
-      const resizer = panelContainer.find(`[data-test-subj~="splitPanelResizer"]`).first();
-
-      resizer.simulate('mousedown', { clientX: 0 });
-      resizer.simulate('mousemove', { clientX: 250 });
-      resizer.simulate('mouseup');
-
-      panelContainer.update();
-
-      expect(widthsCache).toEqual([125, 75]);
-    } finally {
-      proto.getBoundingClientRect = originalGetBoundingClientRect;
-    }
-  });
-});
diff --git a/src/plugins/console/public/application/contexts/editor_context/editor_registry.ts b/src/plugins/console/public/application/contexts/editor_context/editor_registry.ts
index 77a6389db08d7..8197ff0460e86 100644
--- a/src/plugins/console/public/application/contexts/editor_context/editor_registry.ts
+++ b/src/plugins/console/public/application/contexts/editor_context/editor_registry.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { MonacoEditorActionsProvider } from '../../containers/editor/monaco/monaco_editor_actions_provider';
+import { MonacoEditorActionsProvider } from '../../containers/editor/monaco_editor_actions_provider';
 import { SenseEditor } from '../../models/sense_editor';
 
 export class EditorRegistry {
diff --git a/src/plugins/console/public/application/contexts/index.ts b/src/plugins/console/public/application/contexts/index.ts
index f6dbfd466ec76..28d0ef6c6f96d 100644
--- a/src/plugins/console/public/application/contexts/index.ts
+++ b/src/plugins/console/public/application/contexts/index.ts
@@ -21,5 +21,3 @@ export {
   useEditorReadContext,
   EditorContextProvider,
 } from './editor_context';
-
-export { usePanelContext, PanelContextProvider, PanelRegistry } from './split_panel';
diff --git a/src/plugins/console/public/application/contexts/services_context.mock.ts b/src/plugins/console/public/application/contexts/services_context.mock.ts
index 71276e803ccb7..c89fd149ada89 100644
--- a/src/plugins/console/public/application/contexts/services_context.mock.ts
+++ b/src/plugins/console/public/application/contexts/services_context.mock.ts
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { createMemoryHistory } from 'history';
 import {
   coreMock,
   notificationServiceMock,
@@ -39,6 +40,7 @@ export const serviceContextMock = {
         storage,
         esHostService,
         settings: new SettingsMock(storage),
+        routeHistory: createMemoryHistory(),
         history: new HistoryMock(storage),
         notifications: notificationServiceMock.createSetupContract(),
         objectStorageClient: {} as unknown as ObjectStorageClient,
@@ -48,7 +50,6 @@ export const serviceContextMock = {
       docLinkVersion: 'NA',
       docLinks: docLinksServiceMock.createStartContract().links,
       config: {
-        isMonacoEnabled: false,
         isDevMode: false,
       },
     };
diff --git a/src/plugins/console/public/application/contexts/services_context.tsx b/src/plugins/console/public/application/contexts/services_context.tsx
index 39da850ce45d6..28a08b624a410 100644
--- a/src/plugins/console/public/application/contexts/services_context.tsx
+++ b/src/plugins/console/public/application/contexts/services_context.tsx
@@ -9,6 +9,7 @@
 
 import React, { createContext, useContext, useEffect } from 'react';
 import type { NotificationsSetup, DocLinksStart, HttpSetup } from '@kbn/core/public';
+import { RouteComponentProps } from 'react-router-dom';
 
 import type { AutocompleteInfo, History, Settings, Storage } from '../../services';
 import { ObjectStorageClient } from '../../../common/types';
@@ -16,6 +17,7 @@ import { ConsoleStartServices, MetricsTracker } from '../../types';
 import { EsHostService } from '../lib';
 
 interface ContextServices {
+  routeHistory?: RouteComponentProps['history'];
   history: History;
   storage: Storage;
   settings: Settings;
@@ -32,7 +34,6 @@ export interface ContextValue extends ConsoleStartServices {
   docLinkVersion: string;
   docLinks: DocLinksStart['links'];
   config: {
-    isMonacoEnabled: boolean;
     isDevMode: boolean;
   };
 }
diff --git a/src/plugins/console/public/application/contexts/split_panel/index.ts b/src/plugins/console/public/application/contexts/split_panel/index.ts
deleted file mode 100644
index 07b3f0801e5cb..0000000000000
--- a/src/plugins/console/public/application/contexts/split_panel/index.ts
+++ /dev/null
@@ -1,11 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { usePanelContext, PanelContextProvider } from './split_panel_context';
-export { PanelRegistry } from './split_panel_registry';
diff --git a/src/plugins/console/public/application/contexts/split_panel/split_panel_context.tsx b/src/plugins/console/public/application/contexts/split_panel/split_panel_context.tsx
deleted file mode 100644
index 2a0af817b4a94..0000000000000
--- a/src/plugins/console/public/application/contexts/split_panel/split_panel_context.tsx
+++ /dev/null
@@ -1,30 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { createContext, useContext } from 'react';
-import { PanelRegistry } from './split_panel_registry';
-
-const PanelContext = createContext({ registry: new PanelRegistry() });
-
-interface ContextProps {
-  children: JSX.Element;
-  registry: PanelRegistry;
-}
-
-export function PanelContextProvider({ children, registry }: ContextProps) {
-  return <PanelContext.Provider value={{ registry }}>{children}</PanelContext.Provider>;
-}
-
-export const usePanelContext = () => {
-  const context = useContext(PanelContext);
-  if (context === undefined) {
-    throw new Error('usePanelContext must be used within a <PanelContextProvider />');
-  }
-  return context;
-};
diff --git a/src/plugins/console/public/application/hooks/use_restore_request_from_history/restore_request_from_history_to_monaco.ts b/src/plugins/console/public/application/hooks/use_restore_request_from_history/restore_request_from_history_to_monaco.ts
index c79dbea215de3..08c2bc6af86a3 100644
--- a/src/plugins/console/public/application/hooks/use_restore_request_from_history/restore_request_from_history_to_monaco.ts
+++ b/src/plugins/console/public/application/hooks/use_restore_request_from_history/restore_request_from_history_to_monaco.ts
@@ -8,7 +8,7 @@
  */
 
 import { formatRequestBodyDoc } from '../../../lib/utils';
-import { MonacoEditorActionsProvider } from '../../containers/editor/monaco/monaco_editor_actions_provider';
+import { MonacoEditorActionsProvider } from '../../containers/editor/monaco_editor_actions_provider';
 import { ESRequest } from '../../../types';
 
 export async function restoreRequestFromHistoryToMonaco(
diff --git a/src/plugins/console/public/application/hooks/use_restore_request_from_history/use_restore_request_from_history.ts b/src/plugins/console/public/application/hooks/use_restore_request_from_history/use_restore_request_from_history.ts
index 96e3fa78fc4f3..5ee0d185923c2 100644
--- a/src/plugins/console/public/application/hooks/use_restore_request_from_history/use_restore_request_from_history.ts
+++ b/src/plugins/console/public/application/hooks/use_restore_request_from_history/use_restore_request_from_history.ts
@@ -8,23 +8,14 @@
  */
 
 import { useCallback } from 'react';
-import { SenseEditor } from '../../models';
 import { instance as registry } from '../../contexts/editor_context/editor_registry';
 import { ESRequest } from '../../../types';
-import { restoreRequestFromHistory } from './restore_request_from_history';
 import { restoreRequestFromHistoryToMonaco } from './restore_request_from_history_to_monaco';
-import { MonacoEditorActionsProvider } from '../../containers/editor/monaco/monaco_editor_actions_provider';
+import { MonacoEditorActionsProvider } from '../../containers/editor/monaco_editor_actions_provider';
 
-export const useRestoreRequestFromHistory = (isMonacoEnabled: boolean) => {
-  return useCallback(
-    async (req: ESRequest) => {
-      const editor = registry.getInputEditor();
-      if (isMonacoEnabled) {
-        await restoreRequestFromHistoryToMonaco(editor as MonacoEditorActionsProvider, req);
-      } else {
-        restoreRequestFromHistory(editor as SenseEditor, req);
-      }
-    },
-    [isMonacoEnabled]
-  );
+export const useRestoreRequestFromHistory = () => {
+  return useCallback(async (req: ESRequest) => {
+    const editor = registry.getInputEditor();
+    await restoreRequestFromHistoryToMonaco(editor as MonacoEditorActionsProvider, req);
+  }, []);
 };
diff --git a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts
index 41f7a66b4640e..101831300cb89 100644
--- a/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts
+++ b/src/plugins/console/public/application/hooks/use_send_current_request/send_request.ts
@@ -18,7 +18,7 @@ const { collapseLiteralStrings } = XJson;
 
 export interface RequestArgs {
   http: HttpSetup;
-  requests: Array<{ url: string; method: string; data: string[] }>;
+  requests: Array<{ url: string; method: string; data: string[]; lineNumber?: number }>;
 }
 
 export interface ResponseObject<V = unknown> {
@@ -129,7 +129,8 @@ export function sendRequest(args: RequestArgs): Promise<RequestResult[]> {
           }
 
           if (isMultiRequest) {
-            value = `# ${req.method} ${req.url} ${statusCode} ${statusText}\n${value}`;
+            const lineNumber = req.lineNumber ? `${req.lineNumber}: ` : '';
+            value = `# ${lineNumber}${req.method} ${req.url} ${statusCode} ${statusText}\n${value}`;
           }
 
           results.push({
diff --git a/src/plugins/console/public/application/hooks/use_set_input_editor.ts b/src/plugins/console/public/application/hooks/use_set_input_editor.ts
index b66404f6dc30e..d6029420a1772 100644
--- a/src/plugins/console/public/application/hooks/use_set_input_editor.ts
+++ b/src/plugins/console/public/application/hooks/use_set_input_editor.ts
@@ -11,7 +11,7 @@ import { useCallback } from 'react';
 import { useEditorActionContext } from '../contexts/editor_context';
 import { instance as registry } from '../contexts/editor_context/editor_registry';
 import { SenseEditor } from '../models';
-import { MonacoEditorActionsProvider } from '../containers/editor/monaco/monaco_editor_actions_provider';
+import { MonacoEditorActionsProvider } from '../containers/editor/monaco_editor_actions_provider';
 
 export const useSetInputEditor = () => {
   const dispatch = useEditorActionContext();
diff --git a/src/plugins/console/public/application/index.tsx b/src/plugins/console/public/application/index.tsx
index f60c6091c9087..4f990a523d9a0 100644
--- a/src/plugins/console/public/application/index.tsx
+++ b/src/plugins/console/public/application/index.tsx
@@ -13,6 +13,9 @@ import { HttpSetup, NotificationsSetup, DocLinksStart } from '@kbn/core/public';
 
 import { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
+import { Redirect, RouteComponentProps, useLocation } from 'react-router-dom';
+import { Router, Route, Routes } from '@kbn/shared-ux-router';
+import { CONFIG_TAB_ID, HISTORY_TAB_ID, SHELL_TAB_ID } from './containers/main';
 import {
   createStorage,
   createHistory,
@@ -28,15 +31,20 @@ import { ServicesContextProvider, EditorContextProvider, RequestContextProvider
 import { createApi, createEsHostService } from './lib';
 import { ConsoleStartServices } from '../types';
 
+const RedirectToShell = () => {
+  const location = useLocation();
+  return <Redirect to={`/console/shell${location.search}`} />;
+};
+
 export interface BootDependencies extends ConsoleStartServices {
   http: HttpSetup;
   docLinkVersion: string;
   notifications: NotificationsSetup;
   usageCollection?: UsageCollectionSetup;
   element: HTMLElement;
+  history: RouteComponentProps['history'];
   docLinks: DocLinksStart['links'];
   autocompleteInfo: AutocompleteInfo;
-  isMonacoEnabled: boolean;
   isDevMode: boolean;
 }
 
@@ -45,10 +53,10 @@ export async function renderApp({
   docLinkVersion,
   usageCollection,
   element,
+  history,
   http,
   docLinks,
   autocompleteInfo,
-  isMonacoEnabled,
   isDevMode,
   ...startServices
 }: BootDependencies) {
@@ -61,7 +69,7 @@ export async function renderApp({
     prefix: 'sense:',
   });
   setStorage(storage);
-  const history = createHistory({ storage });
+  const storageHistory = createHistory({ storage });
   const settings = createSettings({ storage });
   const objectStorageClient = localStorageObjectClient.create(storage);
   const api = createApi({ http });
@@ -79,7 +87,8 @@ export async function renderApp({
           services: {
             esHostService,
             storage,
-            history,
+            history: storageHistory,
+            routeHistory: history,
             settings,
             notifications,
             trackUiMetric,
@@ -88,14 +97,28 @@ export async function renderApp({
             autocompleteInfo,
           },
           config: {
-            isMonacoEnabled,
             isDevMode,
           },
         }}
       >
         <RequestContextProvider>
           <EditorContextProvider settings={settings.toJSON()}>
-            <Main />
+            {history ? (
+              <Router history={history}>
+                <Routes>
+                  {[SHELL_TAB_ID, HISTORY_TAB_ID, CONFIG_TAB_ID].map((tab) => (
+                    <Route key={tab} path={`/console/${tab}`}>
+                      <Main currentTabProp={tab} />
+                    </Route>
+                  ))}
+                  <Route key="redirect" path="/console">
+                    <RedirectToShell />
+                  </Route>
+                </Routes>
+              </Router>
+            ) : (
+              <Main />
+            )}
           </EditorContextProvider>
         </RequestContextProvider>
       </ServicesContextProvider>
diff --git a/src/plugins/console/public/application/contexts/split_panel/split_panel_registry.ts b/src/plugins/console/public/application/lib/format_request.ts
similarity index 57%
rename from src/plugins/console/public/application/contexts/split_panel/split_panel_registry.ts
rename to src/plugins/console/public/application/lib/format_request.ts
index a7a4d162e46e2..4b8d7992f46a3 100644
--- a/src/plugins/console/public/application/contexts/split_panel/split_panel_registry.ts
+++ b/src/plugins/console/public/application/lib/format_request.ts
@@ -7,20 +7,16 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export interface PanelController {
-  setWidth: (percent: number) => void;
-  getWidth: () => number;
-  width: number;
-}
-
-export class PanelRegistry {
-  private panels: PanelController[] = [];
+import { formatRequestBodyDoc } from '../../lib/utils';
+import { ESRequest } from '../../types';
 
-  registerPanel(panel: PanelController) {
-    this.panels.push(panel);
+export function getFormattedRequest(req: ESRequest) {
+  let res = req.method + ' ' + req.endpoint;
+  if (req.data) {
+    const indent = true;
+    const formattedData = formatRequestBodyDoc([req.data], indent);
+    res += '\n' + formattedData.data;
   }
 
-  getPanels() {
-    return this.panels;
-  }
+  return res;
 }
diff --git a/src/plugins/console/public/application/lib/index.ts b/src/plugins/console/public/application/lib/index.ts
index f55cd788058cd..41c30cf988b48 100644
--- a/src/plugins/console/public/application/lib/index.ts
+++ b/src/plugins/console/public/application/lib/index.ts
@@ -10,3 +10,4 @@
 export type { Api } from './api';
 export { createApi } from './api';
 export { createEsHostService, EsHostService } from './es_host_service';
+export { getFormattedRequest } from './format_request';
diff --git a/src/plugins/console/public/application/stores/editor.ts b/src/plugins/console/public/application/stores/editor.ts
index 9600c3ddb2909..556f4f64337e6 100644
--- a/src/plugins/console/public/application/stores/editor.ts
+++ b/src/plugins/console/public/application/stores/editor.ts
@@ -13,12 +13,17 @@ import { identity } from 'fp-ts/lib/function';
 import { DevToolsSettings, DEFAULT_SETTINGS } from '../../services';
 import { TextObject } from '../../../common/text_object';
 import { SenseEditor } from '../models';
-import { MonacoEditorActionsProvider } from '../containers/editor/monaco/monaco_editor_actions_provider';
+import { SHELL_TAB_ID } from '../containers/main/constants';
+import { MonacoEditorActionsProvider } from '../containers/editor/monaco_editor_actions_provider';
+import { RequestToRestore } from '../../types';
 
 export interface Store {
   ready: boolean;
   settings: DevToolsSettings;
   currentTextObject: TextObject | null;
+  currentView: string;
+  restoreRequestFromHistory: RequestToRestore | null;
+  fileToImport: string | null;
 }
 
 export const initialValue: Store = produce<Store>(
@@ -26,6 +31,9 @@ export const initialValue: Store = produce<Store>(
     ready: false,
     settings: DEFAULT_SETTINGS,
     currentTextObject: null,
+    currentView: SHELL_TAB_ID,
+    restoreRequestFromHistory: null,
+    fileToImport: null,
   },
   identity
 );
@@ -33,7 +41,11 @@ export const initialValue: Store = produce<Store>(
 export type Action =
   | { type: 'setInputEditor'; payload: SenseEditor | MonacoEditorActionsProvider }
   | { type: 'setCurrentTextObject'; payload: TextObject }
-  | { type: 'updateSettings'; payload: DevToolsSettings };
+  | { type: 'updateSettings'; payload: DevToolsSettings }
+  | { type: 'setCurrentView'; payload: string }
+  | { type: 'setRequestToRestore'; payload: RequestToRestore }
+  | { type: 'clearRequestToRestore' }
+  | { type: 'setFileToImport'; payload: string | null };
 
 export const reducer: Reducer<Store, Action> = (state, action) =>
   produce<Store>(state, (draft) => {
@@ -54,5 +66,27 @@ export const reducer: Reducer<Store, Action> = (state, action) =>
       return;
     }
 
+    if (action.type === 'setRequestToRestore') {
+      // Store the request and change the current view to the shell
+      draft.restoreRequestFromHistory = action.payload;
+      draft.currentView = SHELL_TAB_ID;
+      return;
+    }
+
+    if (action.type === 'setCurrentView') {
+      draft.currentView = action.payload;
+      return;
+    }
+
+    if (action.type === 'clearRequestToRestore') {
+      draft.restoreRequestFromHistory = null;
+      return;
+    }
+
+    if (action.type === 'setFileToImport') {
+      draft.fileToImport = action.payload;
+      return;
+    }
+
     return draft;
   });
diff --git a/src/plugins/console/public/application/stores/request.ts b/src/plugins/console/public/application/stores/request.ts
index 82aeb928d78b0..ed832a99fa8f4 100644
--- a/src/plugins/console/public/application/stores/request.ts
+++ b/src/plugins/console/public/application/stores/request.ts
@@ -15,6 +15,7 @@ import { RequestResult } from '../hooks/use_send_current_request/send_request';
 
 export type Actions =
   | { type: 'sendRequest'; payload: undefined }
+  | { type: 'cleanRequest'; payload: undefined }
   | { type: 'requestSuccess'; payload: { data: RequestResult[] } }
   | { type: 'requestFail'; payload: RequestResult<string> | undefined };
 
@@ -58,4 +59,10 @@ export const reducer: Reducer<Store, Actions> = (state, action) =>
       draft.lastResult = { ...initialResultValue, error: action.payload };
       return;
     }
+
+    if (action.type === 'cleanRequest') {
+      draft.requestInFlight = false;
+      draft.lastResult = initialResultValue;
+      return;
+    }
   });
diff --git a/src/plugins/console/public/lib/autocomplete/types.ts b/src/plugins/console/public/lib/autocomplete/types.ts
index 1231c88ad3fb9..4154d66911fb2 100644
--- a/src/plugins/console/public/lib/autocomplete/types.ts
+++ b/src/plugins/console/public/lib/autocomplete/types.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { MonacoEditorActionsProvider } from '../../application/containers/editor/monaco/monaco_editor_actions_provider';
+import { MonacoEditorActionsProvider } from '../../application/containers/editor/monaco_editor_actions_provider';
 import { CoreEditor, Range, Token } from '../../types';
 
 export interface ResultTerm {
diff --git a/src/plugins/console/public/lib/autocomplete_entities/data_stream.ts b/src/plugins/console/public/lib/autocomplete_entities/data_stream.ts
index 199b57601bce9..423f85e8ef773 100644
--- a/src/plugins/console/public/lib/autocomplete_entities/data_stream.ts
+++ b/src/plugins/console/public/lib/autocomplete_entities/data_stream.ts
@@ -21,10 +21,13 @@ export class DataStream {
   loadDataStreams = (dataStreams: IndicesGetDataStreamResponse) => {
     this.dataStreams = (dataStreams.data_streams ?? []).map(({ name }) => name).sort();
 
-    this.perDataStreamIndices = dataStreams.data_streams.reduce((acc, { name, indices }) => {
-      acc[name] = indices.map((index) => index.index_name);
-      return acc;
-    }, {} as Record<string, string[]>);
+    this.perDataStreamIndices = (dataStreams.data_streams ?? []).reduce(
+      (acc, { name, indices }) => {
+        acc[name] = indices.map((index) => index.index_name);
+        return acc;
+      },
+      {} as Record<string, string[]>
+    );
   };
 
   clearDataStreams = () => {
diff --git a/src/plugins/console/public/plugin.ts b/src/plugins/console/public/plugin.ts
index a7420e6ba9e60..b29c707c940a8 100644
--- a/src/plugins/console/public/plugin.ts
+++ b/src/plugins/console/public/plugin.ts
@@ -51,7 +51,6 @@ export class ConsoleUIPlugin
   ): ConsolePluginSetup {
     const {
       ui: { enabled: isConsoleUiEnabled },
-      dev: { enableMonaco: isMonacoEnabled },
     } = this.ctx.config.get<ClientConfigType>();
 
     httpService.setup(http);
@@ -81,8 +80,8 @@ export class ConsoleUIPlugin
         title: i18n.translate('console.consoleDisplayName', {
           defaultMessage: 'Console',
         }),
-        enableRouting: false,
-        mount: async ({ element }) => {
+        enableRouting: true,
+        mount: async ({ element, history }) => {
           const [core] = await getStartServices();
 
           const {
@@ -100,8 +99,8 @@ export class ConsoleUIPlugin
             notifications,
             usageCollection,
             element,
+            history,
             autocompleteInfo: this.autocompleteInfo,
-            isMonacoEnabled,
             isDevMode: this.ctx.env.mode.dev,
           });
         },
@@ -127,7 +126,6 @@ export class ConsoleUIPlugin
   public start(core: CoreStart, deps: AppStartUIPluginDependencies): ConsolePluginStart {
     const {
       ui: { enabled: isConsoleUiEnabled, embeddedEnabled: isEmbeddedConsoleEnabled },
-      dev: { enableMonaco: isMonacoEnabled },
     } = this.ctx.config.get<ClientConfigType>();
     const isDevMode = this.ctx.env.mode.dev;
 
@@ -150,7 +148,6 @@ export class ConsoleUIPlugin
             this._embeddableConsole.setDispatch(d);
           },
           alternateView: this._embeddableConsole.alternateView,
-          isMonacoEnabled,
           isDevMode,
           getConsoleHeight: this._embeddableConsole.getConsoleHeight.bind(this._embeddableConsole),
           setConsoleHeight: this._embeddableConsole.setConsoleHeight.bind(this._embeddableConsole),
diff --git a/src/plugins/console/public/services/api.ts b/src/plugins/console/public/services/api.ts
index 9de903219f5a7..c15e90dfd1bd4 100644
--- a/src/plugins/console/public/services/api.ts
+++ b/src/plugins/console/public/services/api.ts
@@ -8,7 +8,7 @@
  */
 
 import { sendRequest } from './use_request';
-import type { EditorRequest } from '../application/containers/editor/monaco/types';
+import type { EditorRequest } from '../application/containers/editor/types';
 
 export async function convertRequestToLanguage({
   requests,
diff --git a/src/plugins/console/public/services/autocomplete.ts b/src/plugins/console/public/services/autocomplete.ts
index fda1490799773..d7c4d56d5b704 100644
--- a/src/plugins/console/public/services/autocomplete.ts
+++ b/src/plugins/console/public/services/autocomplete.ts
@@ -7,6 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { BehaviorSubject } from 'rxjs';
 import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
 import type { HttpSetup } from '@kbn/core/public';
 import type { AutoCompleteEntitiesApiResponse } from '../lib/autocomplete_entities/types';
@@ -72,8 +73,16 @@ export class AutocompleteInfo {
     }
   }
 
+  /**
+   * Indicates if autocomplete_entities fetching is in progress.
+   */
+  private readonly _isLoading$ = new BehaviorSubject<boolean>(false);
+  public readonly isLoading$ = this._isLoading$.asObservable();
+
   public retrieve(settings: Settings, settingsToRetrieve: DevToolsSettings['autocomplete']) {
     this.clearSubscriptions();
+    this._isLoading$.next(true);
+
     this.http
       .get<AutoCompleteEntitiesApiResponse>(`${API_BASE_PATH}/autocomplete_entities`, {
         query: { ...settingsToRetrieve },
@@ -88,6 +97,9 @@ export class AutocompleteInfo {
             this.retrieve(settings, settings.getAutocomplete());
           }
         }, settings.getPollInterval());
+      })
+      .finally(() => {
+        this._isLoading$.next(false);
       });
   }
 
diff --git a/src/plugins/console/public/services/storage.ts b/src/plugins/console/public/services/storage.ts
index 63b7786d09cb0..e86bbe5cfab6b 100644
--- a/src/plugins/console/public/services/storage.ts
+++ b/src/plugins/console/public/services/storage.ts
@@ -13,7 +13,7 @@ import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
 type IStorageEngine = typeof window.localStorage;
 
 export enum StorageKeys {
-  WIDTH = 'widths',
+  SIZE = 'panelSize',
   FOLDS = 'folds',
   VARIABLES = 'variables',
   DEFAULT_LANGUAGE = 'defaultLanguage',
diff --git a/src/plugins/console/public/shared_imports.ts b/src/plugins/console/public/shared_imports.ts
index 0efcd6c69f11d..7e8060922ebf8 100644
--- a/src/plugins/console/public/shared_imports.ts
+++ b/src/plugins/console/public/shared_imports.ts
@@ -17,6 +17,19 @@ export { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 
 export { toMountPoint } from '@kbn/react-kibana-mount';
 
+export {
+  useForm,
+  Form,
+  UseField,
+  type ValidationFuncArg,
+  type FieldConfig,
+  type FormConfig,
+} from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+
+export { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers';
+
+export { TextField } from '@kbn/es-ui-shared-plugin/static/forms/components';
+
 export type {
   SendRequestConfig,
   SendRequestResponse,
diff --git a/src/plugins/console/public/styles/_app.scss b/src/plugins/console/public/styles/_app.scss
index fdeaf67963fa1..74367c32a468e 100644
--- a/src/plugins/console/public/styles/_app.scss
+++ b/src/plugins/console/public/styles/_app.scss
@@ -9,12 +9,31 @@
 }
 
 .consoleContainer {
-  padding: $euiSizeS;
+  padding: $euiSizeM;
+  gap: 0;
+
+  &--embeddable {
+    padding: 0;
+    gap: 0;
+  }
+}
+
+.consoleTabs {
+  padding: 0 $euiSizeS;
 }
 
-.conApp {
+.consoleEditorPanel {
   display: flex;
   flex: 1 1 auto;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+.consoleVariablesBottomBar {
+  // Give priority to the variables bar so that it doesn't get covered by the empty prompt when in vertical layout
+  z-index: $euiZLevel2;
 }
 
 .conApp__editor {
@@ -27,10 +46,17 @@
 
   &__spinner {
     width: 100%;
+    background-color: $euiFormBackgroundColor;
   }
 }
 
+// Expandable cell content has a padded panel inside
+.conVariablesTable .euiTableRow-isExpandedRow .euiTableCellContent {
+  padding: 0;
+}
+
 .conApp__output, .conApp_example {
+  height: 100%;
   display: flex;
   flex: 1 1 1px;
 
@@ -81,9 +107,10 @@
   flex: 1 1 1px;
 }
 
-.conApp__editorActions {
+.conApp__actionsPanel {
   button {
-    line-height: inherit;
+    height: $euiSize * 1.1;
+    width: $euiSize * 1.1;
   }
 
   position: absolute;
@@ -91,16 +118,34 @@
   top: 0;
   // Adjust for possible scrollbars
   right: $euiSize;
-  line-height: 1;
+  height: $euiSizeL;
+  background-color: $euiFormBackgroundColor;
+  border-radius: $euiSizeXS;
+  box-shadow: 0 0 $euiSizeXS $euiSizeXS transparentize($euiShadowColor, .9);
+  padding-top: $euiSize * .1;
+}
+
+.conApp__editorActions {
+  @extend .conApp__actionsPanel;
   // For IE11
-  min-width: 40px;
+  min-width: $euiSizeL * 2;
 }
 
-.conApp__resizer {
-  @include kbnResizer;
+.conApp__outputActions {
+  @extend .conApp__actionsPanel;
+  // For IE11
+  min-width: $euiSizeL;
+}
+
+.conApp__resizerButton {
   // Give the aria selection border priority when the divider is selected on IE11 and Chrome
   z-index: $euiZLevel1;
   background-color: $euiColorLightestShade;
+  // The margin ensures that the resizer doesn't cover the top border of the selected request
+  // in the output panel, when in vertical layout
+  margin-bottom: 1px;
+  // The margin ensures that the resizer doesn't cover the first Monaco editor's ruler
+  margin-inline: 0;
 }
 
 // SASSTODO: This component seems to not be used anymore?
@@ -114,24 +159,31 @@
   margin-top: 22px;
 }
 
-.conApp__settingsModal {
-  min-width: 460px;
-}
-
 .conApp__requestProgressBarContainer {
   position: relative;
   z-index: $euiZLevel2;
 }
 
-.conApp__tabsExtension {
-  border-bottom: $euiBorderThin;
-}
-
 /*
  * The highlighting for the selected requests in the monaco editor
  */
 .console__monaco_editor__selectedRequests {
+  position: relative;
+  padding: $euiSizeXS; /* Adds space between border and text */
+}
+
+/* Adding a pseudo-element to create padding between the border and the line in the Monaco editor */
+.console__monaco_editor__selectedRequests::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: -$euiSize * .3;
+  left: -$euiSize * 3;
+  right: 0;
   background: transparentize($euiColorPrimary, .9);
+  border: $euiBorderThin;
+  border-color: $euiColorPrimary;
+  pointer-events: none; /* Ensures the pseudo-element doesn't block interactions */
 }
 
 /*
@@ -183,3 +235,10 @@
   // the value needs to be above the z-index of the resizer bar
   z-index: $euiZLevel1 + 2;
 }
+
+// We need to hide the file input element to prevent the default browser styles
+#importConsoleFile {
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+}
diff --git a/src/plugins/console/public/types/common.ts b/src/plugins/console/public/types/common.ts
index c7d099aa30f1d..857b7f899d89a 100644
--- a/src/plugins/console/public/types/common.ts
+++ b/src/plugins/console/public/types/common.ts
@@ -26,3 +26,13 @@ export type BaseResponseType =
   | 'application/yaml'
   | 'unknown'
   | 'application/vnd.mapbox-vector-tile';
+
+// Used by history view to restore a request into the editor
+export enum RestoreMethod {
+  RESTORE = 1,
+  RESTORE_AND_EXECUTE = 2,
+}
+export interface RequestToRestore {
+  request: string;
+  restoreMethod: RestoreMethod;
+}
diff --git a/src/plugins/console/public/types/config.ts b/src/plugins/console/public/types/config.ts
index cc4fe98012dd0..0cdd317ed0cb1 100644
--- a/src/plugins/console/public/types/config.ts
+++ b/src/plugins/console/public/types/config.ts
@@ -12,7 +12,4 @@ export interface ClientConfigType {
     enabled: boolean;
     embeddedEnabled: boolean;
   };
-  dev: {
-    enableMonaco: boolean;
-  };
 }
diff --git a/src/plugins/console/public/types/embeddable_console.ts b/src/plugins/console/public/types/embeddable_console.ts
index da453818aa90f..35986c069c6c1 100644
--- a/src/plugins/console/public/types/embeddable_console.ts
+++ b/src/plugins/console/public/types/embeddable_console.ts
@@ -17,7 +17,6 @@ export interface EmbeddableConsoleDependencies {
   usageCollection?: UsageCollectionStart;
   setDispatch: (dispatch: Dispatch<EmbeddedConsoleAction> | null) => void;
   alternateView?: EmbeddedConsoleView;
-  isMonacoEnabled: boolean;
   isDevMode: boolean;
   getConsoleHeight: () => string | undefined;
   setConsoleHeight: (value: string) => void;
diff --git a/src/plugins/console/server/config.ts b/src/plugins/console/server/config.ts
index f9f17230c2697..9b9c293f97315 100644
--- a/src/plugins/console/server/config.ts
+++ b/src/plugins/console/server/config.ts
@@ -32,7 +32,6 @@ const schemaLatest = schema.object(
         defaultValue: 'stack',
       }),
     }),
-    dev: schema.object({ enableMonaco: schema.boolean({ defaultValue: true }) }),
   },
   { defaultValue: undefined }
 );
@@ -41,7 +40,6 @@ const configLatest: PluginConfigDescriptor<ConsoleConfig> = {
   exposeToBrowser: {
     ui: true,
     autocompleteDefinitions: true,
-    dev: true,
   },
   schema: schemaLatest,
   deprecations: () => [],
diff --git a/src/plugins/console/server/services/spec_definitions_service.test.ts b/src/plugins/console/server/services/spec_definitions_service.test.ts
index 8d8a1b93ec11e..4ac0fdc6289d3 100644
--- a/src/plugins/console/server/services/spec_definitions_service.test.ts
+++ b/src/plugins/console/server/services/spec_definitions_service.test.ts
@@ -359,6 +359,7 @@ describe('SpecDefinitionsService', () => {
     expect(endpoints).toEqual({
       endpoint2: {
         id: 'endpoint2',
+        documentation: 'https://www.elastic.co/docs/api',
         methods: ['POST'],
         patterns: ['/endpoint2'],
       },
diff --git a/src/plugins/console/server/services/spec_definitions_service.ts b/src/plugins/console/server/services/spec_definitions_service.ts
index d1c6561c072b8..8f08c068b18a8 100644
--- a/src/plugins/console/server/services/spec_definitions_service.ts
+++ b/src/plugins/console/server/services/spec_definitions_service.ts
@@ -19,6 +19,7 @@ import {
   GENERATED_SUBFOLDER,
   MANUAL_SUBFOLDER,
   OVERRIDES_SUBFOLDER,
+  API_DOCS_LINK,
 } from '../../common/constants';
 import { jsSpecLoaders } from '../lib';
 
@@ -38,7 +39,11 @@ export class SpecDefinitionsService {
     this.globalRules[parentNode] = rules;
   }
 
-  public addEndpointDescription(endpoint: string, description: EndpointDescription = {}) {
+  public addEndpointDescription(
+    endpoint: string,
+    description: EndpointDescription = {},
+    docsLinkToApiReference: boolean = false
+  ) {
     let copiedDescription: EndpointDescription = {};
     if (this.endpoints[endpoint]) {
       copiedDescription = { ...this.endpoints[endpoint] };
@@ -65,6 +70,10 @@ export class SpecDefinitionsService {
       _.defaults(description.url_params, urlParamsDef);
     }
 
+    if (docsLinkToApiReference) {
+      description.documentation = API_DOCS_LINK;
+    }
+
     _.assign(copiedDescription, description);
     _.defaults(copiedDescription, {
       id: endpoint,
@@ -157,7 +166,7 @@ export class SpecDefinitionsService {
         (endpointsAvailability === 'stack' && description.availability.stack) ||
         (endpointsAvailability === 'serverless' && description.availability.serverless);
       if (addEndpoint) {
-        this.addEndpointDescription(endpoint, description);
+        this.addEndpointDescription(endpoint, description, endpointsAvailability === 'serverless');
       }
     });
   }
diff --git a/src/plugins/console/tsconfig.json b/src/plugins/console/tsconfig.json
index 88b6216cbde66..a13333dfa8b30 100644
--- a/src/plugins/console/tsconfig.json
+++ b/src/plugins/console/tsconfig.json
@@ -19,7 +19,6 @@
     "@kbn/shared-ux-utility",
     "@kbn/core-http-browser",
     "@kbn/ace",
-    "@kbn/test-jest-helpers",
     "@kbn/config-schema",
     "@kbn/core-http-router-server-internal",
     "@kbn/web-worker-stub",
@@ -31,7 +30,10 @@
     "@kbn/cloud-plugin",
     "@kbn/core-notifications-browser",
     "@kbn/react-kibana-context-render",
-    "@kbn/react-kibana-mount"
+    "@kbn/react-kibana-mount",
+    "@kbn/ui-theme",
+    "@kbn/core-doc-links-browser",
+    "@kbn/shared-ux-router"
   ],
   "exclude": [
     "target/**/*",
diff --git a/src/plugins/controls/common/control_group/control_group_constants.ts b/src/plugins/controls/common/constants.ts
similarity index 74%
rename from src/plugins/controls/common/control_group/control_group_constants.ts
rename to src/plugins/controls/common/constants.ts
index 38580e7520fa0..e100474177c71 100644
--- a/src/plugins/controls/common/control_group/control_group_constants.ts
+++ b/src/plugins/controls/common/constants.ts
@@ -7,8 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ControlStyle, ControlWidth } from '../types';
+import { ControlStyle, ControlWidth } from './types';
 
 export const DEFAULT_CONTROL_WIDTH: ControlWidth = 'medium';
 export const DEFAULT_CONTROL_GROW: boolean = true;
 export const DEFAULT_CONTROL_STYLE: ControlStyle = 'oneLine';
+
+export const TIME_SLIDER_CONTROL = 'timeSlider';
+export const RANGE_SLIDER_CONTROL = 'rangeSliderControl';
+export const OPTIONS_LIST_CONTROL = 'optionsListControl';
diff --git a/src/plugins/controls/common/control_group/control_group_migrations.test.ts b/src/plugins/controls/common/control_group/control_group_migrations.test.ts
deleted file mode 100644
index 93e7c5b44e2bc..0000000000000
--- a/src/plugins/controls/common/control_group/control_group_migrations.test.ts
+++ /dev/null
@@ -1,120 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import {
-  ControlWidth,
-  ControlPanelState,
-  OPTIONS_LIST_CONTROL,
-  RANGE_SLIDER_CONTROL,
-  OptionsListEmbeddableInput,
-  RangeSliderEmbeddableInput,
-  getDefaultControlGroupInput,
-  ControlGroupInput,
-} from '..';
-import { mockOptionsListEmbeddableInput, mockRangeSliderEmbeddableInput } from '../mocks';
-import { removeHideExcludeAndHideExists } from './control_group_migrations';
-
-describe('migrate control group', () => {
-  const getOptionsListControl = (order: number, input?: Partial<OptionsListEmbeddableInput>) => {
-    return {
-      type: OPTIONS_LIST_CONTROL,
-      order,
-      width: 'small' as ControlWidth,
-      grow: true,
-      explicitInput: { ...mockOptionsListEmbeddableInput, ...input },
-    } as ControlPanelState;
-  };
-
-  const getRangeSliderControl = (order: number, input?: Partial<RangeSliderEmbeddableInput>) => {
-    return {
-      type: RANGE_SLIDER_CONTROL,
-      order,
-      width: 'medium' as ControlWidth,
-      grow: false,
-      explicitInput: { ...mockRangeSliderEmbeddableInput, ...input },
-    } as ControlPanelState;
-  };
-
-  const getControlGroupInput = (panels: ControlPanelState[]): ControlGroupInput => {
-    const panelsObjects = panels.reduce((acc, panel) => {
-      return { ...acc, [panel.explicitInput.id]: panel };
-    }, {});
-
-    return {
-      id: 'testControlGroupMigration',
-      ...getDefaultControlGroupInput(),
-      panels: panelsObjects,
-    };
-  };
-
-  describe('remove hideExclude and hideExists', () => {
-    test('should migrate single options list control', () => {
-      const migratedControlGroupInput: ControlGroupInput = removeHideExcludeAndHideExists(
-        getControlGroupInput([getOptionsListControl(0, { id: 'testPanelId', hideExclude: true })])
-      );
-      expect(migratedControlGroupInput.panels).toEqual({
-        testPanelId: getOptionsListControl(0, { id: 'testPanelId' }),
-      });
-    });
-    test('should migrate multiple options list controls', () => {
-      const migratedControlGroupInput: ControlGroupInput = removeHideExcludeAndHideExists(
-        getControlGroupInput([
-          getOptionsListControl(0, { id: 'testPanelId1' }),
-          getOptionsListControl(1, { id: 'testPanelId2', hideExclude: false }),
-          getOptionsListControl(2, { id: 'testPanelId3', hideExists: true }),
-          getOptionsListControl(3, {
-            id: 'testPanelId4',
-            hideExclude: true,
-            hideExists: false,
-          }),
-          getOptionsListControl(4, {
-            id: 'testPanelId5',
-            hideExists: true,
-            hideExclude: false,
-            singleSelect: true,
-            runPastTimeout: true,
-            selectedOptions: ['test'],
-          }),
-        ])
-      );
-      expect(migratedControlGroupInput.panels).toEqual({
-        testPanelId1: getOptionsListControl(0, { id: 'testPanelId1' }),
-        testPanelId2: getOptionsListControl(1, { id: 'testPanelId2' }),
-        testPanelId3: getOptionsListControl(2, { id: 'testPanelId3' }),
-        testPanelId4: getOptionsListControl(3, {
-          id: 'testPanelId4',
-        }),
-        testPanelId5: getOptionsListControl(4, {
-          id: 'testPanelId5',
-          singleSelect: true,
-          runPastTimeout: true,
-          selectedOptions: ['test'],
-        }),
-      });
-    });
-
-    test('should migrate multiple different types of controls', () => {
-      const migratedControlGroupInput: ControlGroupInput = removeHideExcludeAndHideExists(
-        getControlGroupInput([
-          getOptionsListControl(0, {
-            id: 'testPanelId1',
-            hideExists: true,
-            hideExclude: true,
-            runPastTimeout: true,
-          }),
-          getRangeSliderControl(1, { id: 'testPanelId2' }),
-        ])
-      );
-      expect(migratedControlGroupInput.panels).toEqual({
-        testPanelId1: getOptionsListControl(0, { id: 'testPanelId1', runPastTimeout: true }),
-        testPanelId2: getRangeSliderControl(1, { id: 'testPanelId2' }),
-      });
-    });
-  });
-});
diff --git a/src/plugins/controls/common/control_group/control_group_migrations.ts b/src/plugins/controls/common/control_group/control_group_migrations.ts
deleted file mode 100644
index 67931be24bc04..0000000000000
--- a/src/plugins/controls/common/control_group/control_group_migrations.ts
+++ /dev/null
@@ -1,62 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ControlGroupInput, ControlPanelState, ControlsPanels } from '..';
-import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from '../options_list/types';
-
-export const makeControlOrdersZeroBased = (input: ControlGroupInput) => {
-  if (
-    input.panels &&
-    typeof input.panels === 'object' &&
-    Object.keys(input.panels).length > 0 &&
-    !Object.values(input.panels).find((panel) => (panel.order ?? 0) === 0)
-  ) {
-    // 0th element could not be found. Reorder all panels from 0;
-    const newPanels = Object.values(input.panels)
-      .sort((a, b) => (a.order > b.order ? 1 : -1))
-      .map((panel, index) => {
-        panel.order = index;
-        return panel;
-      })
-      .reduce((acc, currentPanel) => {
-        acc[currentPanel.explicitInput.id] = currentPanel;
-        return acc;
-      }, {} as ControlsPanels);
-    input.panels = newPanels;
-  }
-  return input;
-};
-
-/**
- * The UX for the "Allow include/exclude" and "Allow exists query" toggles was removed in 8.7.0 so, to
- * prevent users from getting stuck when migrating from 8.6.0 (when the toggles were introduced) to 8.7.0
- * we must set both the `hideExclude` and `hideExists` keys to `undefined` for all existing options
- * list controls.
- */
-export const removeHideExcludeAndHideExists = (input: ControlGroupInput) => {
-  if (input.panels && typeof input.panels === 'object' && Object.keys(input.panels).length > 0) {
-    const newPanels = Object.keys(input.panels).reduce<ControlsPanels>(
-      (panelAccumulator, panelId) => {
-        const panel: ControlPanelState = input.panels[panelId];
-        if (panel.type === OPTIONS_LIST_CONTROL) {
-          const explicitInput = panel.explicitInput as OptionsListEmbeddableInput;
-          delete explicitInput.hideExclude;
-          delete explicitInput.hideExists;
-        }
-        return {
-          ...panelAccumulator,
-          [panelId]: panel,
-        };
-      },
-      {}
-    );
-    input.panels = newPanels;
-  }
-  return input;
-};
diff --git a/src/plugins/controls/common/control_group/control_group_panel_diff_system.ts b/src/plugins/controls/common/control_group/control_group_panel_diff_system.ts
deleted file mode 100644
index 1e5b2bb8c2c99..0000000000000
--- a/src/plugins/controls/common/control_group/control_group_panel_diff_system.ts
+++ /dev/null
@@ -1,126 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-import { omit, isEqual } from 'lodash';
-import { OPTIONS_LIST_DEFAULT_SORT } from '../options_list/suggestions_sorting';
-import { OptionsListEmbeddableInput, OPTIONS_LIST_CONTROL } from '../options_list/types';
-import { RangeSliderEmbeddableInput, RANGE_SLIDER_CONTROL } from '../range_slider/types';
-import { TimeSliderControlEmbeddableInput, TIME_SLIDER_CONTROL } from '../time_slider/types';
-
-import { ControlPanelState } from './types';
-
-interface DiffSystem {
-  getPanelIsEqual: (
-    initialInput: ControlPanelState,
-    newInput: ControlPanelState,
-    compareSelections?: boolean
-  ) => boolean;
-}
-
-export const genericControlPanelDiffSystem: DiffSystem = {
-  getPanelIsEqual: (initialInput, newInput) => {
-    return deepEqual(initialInput, newInput);
-  },
-};
-
-export const ControlPanelDiffSystems: {
-  [key: string]: DiffSystem;
-} = {
-  [RANGE_SLIDER_CONTROL]: {
-    getPanelIsEqual: (initialInput, newInput, compareSelections) => {
-      if (!deepEqual(omit(initialInput, 'explicitInput'), omit(newInput, 'explicitInput'))) {
-        return false;
-      }
-
-      const { value: valueA = ['', ''], ...inputA }: Partial<RangeSliderEmbeddableInput> =
-        initialInput.explicitInput;
-      const { value: valueB = ['', ''], ...inputB }: Partial<RangeSliderEmbeddableInput> =
-        newInput.explicitInput;
-      return (compareSelections ? isEqual(valueA, valueB) : true) && deepEqual(inputA, inputB);
-    },
-  },
-  [OPTIONS_LIST_CONTROL]: {
-    getPanelIsEqual: (initialInput, newInput, compareSelections) => {
-      if (!deepEqual(omit(initialInput, 'explicitInput'), omit(newInput, 'explicitInput'))) {
-        return false;
-      }
-
-      const {
-        sort: sortA,
-        exclude: excludeA,
-        hideSort: hideSortA,
-        hideExists: hideExistsA,
-        hideExclude: hideExcludeA,
-        selectedOptions: selectedA,
-        singleSelect: singleSelectA,
-        searchTechnique: searchTechniqueA,
-        existsSelected: existsSelectedA,
-        runPastTimeout: runPastTimeoutA,
-        ...inputA
-      }: Partial<OptionsListEmbeddableInput> = initialInput.explicitInput;
-      const {
-        sort: sortB,
-        exclude: excludeB,
-        hideSort: hideSortB,
-        hideExists: hideExistsB,
-        hideExclude: hideExcludeB,
-        selectedOptions: selectedB,
-        singleSelect: singleSelectB,
-        searchTechnique: searchTechniqueB,
-        existsSelected: existsSelectedB,
-        runPastTimeout: runPastTimeoutB,
-        ...inputB
-      }: Partial<OptionsListEmbeddableInput> = newInput.explicitInput;
-
-      return (
-        Boolean(hideSortA) === Boolean(hideSortB) &&
-        Boolean(hideExistsA) === Boolean(hideExistsB) &&
-        Boolean(hideExcludeA) === Boolean(hideExcludeB) &&
-        Boolean(singleSelectA) === Boolean(singleSelectB) &&
-        Boolean(runPastTimeoutA) === Boolean(runPastTimeoutB) &&
-        isEqual(searchTechniqueA ?? 'prefix', searchTechniqueB ?? 'prefix') &&
-        deepEqual(sortA ?? OPTIONS_LIST_DEFAULT_SORT, sortB ?? OPTIONS_LIST_DEFAULT_SORT) &&
-        (compareSelections
-          ? Boolean(excludeA) === Boolean(excludeB) &&
-            Boolean(existsSelectedA) === Boolean(existsSelectedB) &&
-            isEqual(selectedA ?? [], selectedB ?? [])
-          : true) &&
-        deepEqual(inputA, inputB)
-      );
-    },
-  },
-  [TIME_SLIDER_CONTROL]: {
-    getPanelIsEqual: (initialInput, newInput, compareSelections) => {
-      if (!deepEqual(omit(initialInput, 'explicitInput'), omit(newInput, 'explicitInput'))) {
-        return false;
-      }
-
-      const {
-        isAnchored: isAnchoredA,
-        timesliceStartAsPercentageOfTimeRange: startA,
-        timesliceEndAsPercentageOfTimeRange: endA,
-      }: Partial<TimeSliderControlEmbeddableInput> = initialInput.explicitInput;
-      const {
-        isAnchored: isAnchoredB,
-        timesliceStartAsPercentageOfTimeRange: startB,
-        timesliceEndAsPercentageOfTimeRange: endB,
-      }: Partial<TimeSliderControlEmbeddableInput> = newInput.explicitInput;
-      return (
-        Boolean(isAnchoredA) === Boolean(isAnchoredB) &&
-        (compareSelections
-          ? Boolean(startA) === Boolean(startB) &&
-            startA === startB &&
-            Boolean(endA) === Boolean(endB) &&
-            endA === endB
-          : true)
-      );
-    },
-  },
-};
diff --git a/src/plugins/controls/common/control_group/control_group_persistence.ts b/src/plugins/controls/common/control_group/control_group_persistence.ts
deleted file mode 100644
index e6417dc216560..0000000000000
--- a/src/plugins/controls/common/control_group/control_group_persistence.ts
+++ /dev/null
@@ -1,152 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-import { SerializableRecord } from '@kbn/utility-types';
-
-import { pick, omit, xor } from 'lodash';
-
-import {
-  DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_STYLE,
-  DEFAULT_CONTROL_WIDTH,
-} from './control_group_constants';
-import {
-  ControlPanelDiffSystems,
-  genericControlPanelDiffSystem,
-} from './control_group_panel_diff_system';
-import { ControlGroupInput } from '..';
-import {
-  PersistableControlGroupInput,
-  persistableControlGroupInputKeys,
-  RawControlGroupAttributes,
-} from './types';
-
-const safeJSONParse = <OutType>(jsonString?: string): OutType | undefined => {
-  if (!jsonString && typeof jsonString !== 'string') return;
-  try {
-    return JSON.parse(jsonString) as OutType;
-  } catch {
-    return;
-  }
-};
-
-export const getDefaultControlGroupInput = (): Omit<ControlGroupInput, 'id'> => ({
-  panels: {},
-  defaultControlWidth: DEFAULT_CONTROL_WIDTH,
-  defaultControlGrow: DEFAULT_CONTROL_GROW,
-  controlStyle: DEFAULT_CONTROL_STYLE,
-  chainingSystem: 'HIERARCHICAL',
-  showApplySelections: false,
-  ignoreParentSettings: {
-    ignoreFilters: false,
-    ignoreQuery: false,
-    ignoreTimerange: false,
-    ignoreValidations: false,
-  },
-});
-
-export const getDefaultControlGroupPersistableInput = (): PersistableControlGroupInput =>
-  pick(getDefaultControlGroupInput(), persistableControlGroupInputKeys);
-
-export const persistableControlGroupInputIsEqual = (
-  a: PersistableControlGroupInput | undefined,
-  b: PersistableControlGroupInput | undefined,
-  compareSelections: boolean = true
-) => {
-  const defaultInput = getDefaultControlGroupPersistableInput();
-  const inputA = {
-    ...defaultInput,
-    ...pick(a, persistableControlGroupInputKeys),
-  };
-  const inputB = {
-    ...defaultInput,
-    ...pick(b, persistableControlGroupInputKeys),
-  };
-
-  return (
-    getPanelsAreEqual(inputA.panels, inputB.panels, compareSelections) &&
-    deepEqual(omit(inputA, ['panels']), omit(inputB, ['panels']))
-  );
-};
-
-const getPanelsAreEqual = (
-  originalPanels: PersistableControlGroupInput['panels'],
-  newPanels: PersistableControlGroupInput['panels'],
-  compareSelections: boolean
-) => {
-  const originalPanelIds = Object.keys(originalPanels);
-  const newPanelIds = Object.keys(newPanels);
-  const panelIdDiff = xor(originalPanelIds, newPanelIds);
-  if (panelIdDiff.length > 0) {
-    return false;
-  }
-
-  for (const panelId of newPanelIds) {
-    const newPanelType = newPanels[panelId].type;
-    const panelIsEqual = ControlPanelDiffSystems[newPanelType]
-      ? ControlPanelDiffSystems[newPanelType].getPanelIsEqual(
-          originalPanels[panelId],
-          newPanels[panelId],
-          compareSelections
-        )
-      : genericControlPanelDiffSystem.getPanelIsEqual(originalPanels[panelId], newPanels[panelId]);
-    if (!panelIsEqual) return false;
-  }
-  return true;
-};
-
-export const rawControlGroupAttributesToControlGroupInput = (
-  rawControlGroupAttributes: RawControlGroupAttributes
-): PersistableControlGroupInput | undefined => {
-  const defaultControlGroupInput = getDefaultControlGroupInput();
-  const {
-    chainingSystem,
-    controlStyle,
-    showApplySelections,
-    ignoreParentSettingsJSON,
-    panelsJSON,
-  } = rawControlGroupAttributes;
-  const panels = safeJSONParse<ControlGroupInput['panels']>(panelsJSON);
-  const ignoreParentSettings =
-    safeJSONParse<ControlGroupInput['ignoreParentSettings']>(ignoreParentSettingsJSON);
-  return {
-    ...defaultControlGroupInput,
-    ...(chainingSystem ? { chainingSystem } : {}),
-    ...(controlStyle ? { controlStyle } : {}),
-    ...(showApplySelections ? { showApplySelections } : {}),
-    ...(ignoreParentSettings ? { ignoreParentSettings } : {}),
-    ...(panels ? { panels } : {}),
-  };
-};
-
-export const rawControlGroupAttributesToSerializable = (
-  rawControlGroupAttributes: Omit<RawControlGroupAttributes, 'id'>
-): SerializableRecord => {
-  const defaultControlGroupInput = getDefaultControlGroupInput();
-  return {
-    chainingSystem: rawControlGroupAttributes?.chainingSystem,
-    controlStyle: rawControlGroupAttributes?.controlStyle ?? defaultControlGroupInput.controlStyle,
-    showApplySelections: rawControlGroupAttributes?.showApplySelections,
-    ignoreParentSettings: safeJSONParse(rawControlGroupAttributes?.ignoreParentSettingsJSON) ?? {},
-    panels: safeJSONParse(rawControlGroupAttributes?.panelsJSON) ?? {},
-  };
-};
-
-export const serializableToRawControlGroupAttributes = (
-  serializable: SerializableRecord
-): Omit<RawControlGroupAttributes, 'id' | 'type'> => {
-  return {
-    controlStyle: serializable.controlStyle as RawControlGroupAttributes['controlStyle'],
-    chainingSystem: serializable.chainingSystem as RawControlGroupAttributes['chainingSystem'],
-    showApplySelections: Boolean(serializable.showApplySelections),
-    ignoreParentSettingsJSON: JSON.stringify(serializable.ignoreParentSettings),
-    panelsJSON: JSON.stringify(serializable.panels),
-  };
-};
diff --git a/src/plugins/console/public/application/containers/editor/legacy/index.ts b/src/plugins/controls/common/control_group/index.ts
similarity index 66%
rename from src/plugins/console/public/application/containers/editor/legacy/index.ts
rename to src/plugins/controls/common/control_group/index.ts
index 40e74e7b32e9e..8f583b484eb2d 100644
--- a/src/plugins/console/public/application/containers/editor/legacy/index.ts
+++ b/src/plugins/controls/common/control_group/index.ts
@@ -7,5 +7,13 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export { EditorOutput, Editor } from './console_editor';
-export { getDocumentation, autoIndent } from './console_menu_actions';
+export type {
+  ControlGroupChainingSystem,
+  ControlGroupEditorConfig,
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelState,
+  ControlPanelsState,
+} from './types';
+
+export { CONTROL_GROUP_TYPE } from './types';
diff --git a/src/plugins/controls/common/control_group/mocks.tsx b/src/plugins/controls/common/control_group/mocks.tsx
deleted file mode 100644
index 2659969fb534a..0000000000000
--- a/src/plugins/controls/common/control_group/mocks.tsx
+++ /dev/null
@@ -1,75 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
-import { getDefaultControlGroupInput } from '..';
-import { ControlGroupContainerFactory } from '../../public';
-import { ControlGroupComponentState } from '../../public/control_group/types';
-import { ControlGroupInput } from './types';
-
-export const mockControlGroupInput = (partial?: Partial<ControlGroupInput>): ControlGroupInput => ({
-  id: 'mocked_control_group',
-  ...getDefaultControlGroupInput(),
-  ...{
-    panels: {
-      control1: {
-        order: 0,
-        width: 'medium',
-        grow: true,
-        type: 'mockedOptionsList',
-        explicitInput: {
-          id: 'control1',
-        },
-      },
-      control2: {
-        order: 1,
-        width: 'large',
-        grow: true,
-        type: 'mockedRangeSlider',
-        explicitInput: {
-          id: 'control2',
-        },
-      },
-      control3: {
-        order: 2,
-        width: 'small',
-        grow: true,
-        type: 'mockedOptionsList',
-        explicitInput: {
-          id: 'control3',
-        },
-      },
-    },
-  },
-  ...(partial ?? {}),
-});
-
-export const mockControlGroupContainer = async (
-  explicitInput?: Partial<ControlGroupInput>,
-  initialComponentState?: Partial<ControlGroupComponentState>
-) => {
-  const controlGroupFactoryStub = new ControlGroupContainerFactory(
-    {} as unknown as EmbeddablePersistableStateService
-  );
-  const input: ControlGroupInput = {
-    id: 'mocked-control-group',
-    ...getDefaultControlGroupInput(),
-    ...explicitInput,
-  };
-  const controlGroupContainer = await controlGroupFactoryStub.create(input, undefined, {
-    ...initialComponentState,
-    lastSavedInput: {
-      panels: input.panels,
-      chainingSystem: 'HIERARCHICAL',
-      controlStyle: 'twoLine',
-    },
-  });
-
-  return controlGroupContainer;
-};
diff --git a/src/plugins/controls/common/control_group/types.ts b/src/plugins/controls/common/control_group/types.ts
index 2f6105ae4462b..cb51cf79e5400 100644
--- a/src/plugins/controls/common/control_group/types.ts
+++ b/src/plugins/controls/common/control_group/types.ts
@@ -7,83 +7,66 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EmbeddableInput, PanelState } from '@kbn/embeddable-plugin/common/types';
-import { SerializableRecord } from '@kbn/utility-types';
-import { ControlInput, ControlStyle, ControlWidth } from '../types';
+import { DataViewField } from '@kbn/data-views-plugin/common';
+import { ControlStyle, DefaultControlState, ParentIgnoreSettings } from '../types';
 
 export const CONTROL_GROUP_TYPE = 'control_group';
 
-export interface ControlPanelState<TEmbeddableInput extends ControlInput = ControlInput>
-  extends PanelState<TEmbeddableInput> {
-  order: number;
-  width: ControlWidth;
-  grow: boolean;
-}
-
 export type ControlGroupChainingSystem = 'HIERARCHICAL' | 'NONE';
 
-export interface ControlsPanels {
-  [panelId: string]: ControlPanelState;
+export type FieldFilterPredicate = (f: DataViewField) => boolean;
+
+/**
+ * ----------------------------------------------------------------
+ * Control group state
+ * ----------------------------------------------------------------
+ */
+
+export interface ControlGroupEditorConfig {
+  hideDataViewSelector?: boolean;
+  hideWidthSettings?: boolean;
+  hideAdditionalSettings?: boolean;
+  fieldFilterPredicate?: FieldFilterPredicate;
 }
 
-export interface ControlGroupInput extends EmbeddableInput, ControlInput {
+export interface ControlGroupRuntimeState<State extends DefaultControlState = DefaultControlState> {
   chainingSystem: ControlGroupChainingSystem;
-  defaultControlWidth?: ControlWidth;
-  defaultControlGrow?: boolean;
+  labelPosition: ControlStyle; // TODO: Rename this type to ControlLabelPosition
+  autoApplySelections: boolean;
+  ignoreParentSettings?: ParentIgnoreSettings;
+
+  initialChildControlState: ControlPanelsState<State>;
+
+  /*
+   * Configuration settings that are never persisted
+   * - remove after https://github.com/elastic/kibana/issues/189939 is resolved
+   */
+  editorConfig?: ControlGroupEditorConfig;
+}
+
+export interface ControlGroupSerializedState
+  extends Pick<ControlGroupRuntimeState, 'chainingSystem' | 'editorConfig'> {
+  panelsJSON: string; // stringified version of ControlSerializedState
+  ignoreParentSettingsJSON: string;
+  // In runtime state, we refer to this property as `labelPosition`;
+  // to avoid migrations, we will continue to refer to this property as `controlStyle` in the serialized state
   controlStyle: ControlStyle;
-  panels: ControlsPanels;
+  // In runtime state, we refer to the inverse of this property as `autoApplySelections`
+  // to avoid migrations, we will continue to refer to this property as `showApplySelections` in the serialized state
   showApplySelections?: boolean;
 }
 
 /**
- * Only parts of the Control Group Input should be persisted
+ * ----------------------------------------------------------------
+ * Control group panel state
+ * ----------------------------------------------------------------
  */
-export const persistableControlGroupInputKeys: Array<
-  keyof Pick<
-    ControlGroupInput,
-    'panels' | 'chainingSystem' | 'controlStyle' | 'ignoreParentSettings' | 'showApplySelections'
-  >
-> = ['panels', 'chainingSystem', 'controlStyle', 'ignoreParentSettings', 'showApplySelections'];
-export type PersistableControlGroupInput = Pick<
-  ControlGroupInput,
-  (typeof persistableControlGroupInputKeys)[number]
->;
 
-/**
- * Some use cases need the Persistable Control Group Input to conform to the SerializableRecord format which requires string index signatures in any objects
- */
-export type SerializableControlGroupInput = Omit<
-  PersistableControlGroupInput,
-  'panels' | 'ignoreParentSettings'
-> & {
-  panels: ControlsPanels & SerializableRecord;
-  ignoreParentSettings: PersistableControlGroupInput['ignoreParentSettings'] & SerializableRecord;
-};
+export interface ControlPanelsState<State extends DefaultControlState = DefaultControlState> {
+  [panelId: string]: ControlPanelState<State>;
+}
 
-// panels are json stringified for storage in a saved object.
-export type RawControlGroupAttributes = Omit<
-  PersistableControlGroupInput,
-  'panels' | 'ignoreParentSettings'
-> & {
-  ignoreParentSettingsJSON: string;
-  panelsJSON: string;
+export type ControlPanelState<State extends DefaultControlState = DefaultControlState> = State & {
+  type: string;
+  order: number;
 };
-
-export interface ControlGroupTelemetry {
-  total: number;
-  chaining_system: {
-    [key: string]: number;
-  };
-  label_position: {
-    [key: string]: number;
-  };
-  ignore_settings: {
-    [key: string]: number;
-  };
-  by_type: {
-    [key: string]: {
-      total: number;
-      details: { [key: string]: number };
-    };
-  };
-}
diff --git a/src/plugins/controls/common/index.ts b/src/plugins/controls/common/index.ts
index 225deb370e854..c59e4c04ac1b0 100644
--- a/src/plugins/controls/common/index.ts
+++ b/src/plugins/controls/common/index.ts
@@ -7,37 +7,31 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export type { ControlWidth, ControlInputTransform, ParentIgnoreSettings } from './types';
-
-// Control Group exports
-export {
-  CONTROL_GROUP_TYPE,
-  type ControlsPanels,
-  type ControlGroupInput,
-  type ControlPanelState,
-  type ControlGroupTelemetry,
-  type RawControlGroupAttributes,
-  type PersistableControlGroupInput,
-  type SerializableControlGroupInput,
-  type ControlGroupChainingSystem,
-  persistableControlGroupInputKeys,
-} from './control_group/types';
-export {
-  rawControlGroupAttributesToControlGroupInput,
-  rawControlGroupAttributesToSerializable,
-  serializableToRawControlGroupAttributes,
-  getDefaultControlGroupPersistableInput,
-  persistableControlGroupInputIsEqual,
-  getDefaultControlGroupInput,
-} from './control_group/control_group_persistence';
+export type {
+  ControlStyle,
+  ControlWidth,
+  DefaultControlState,
+  DefaultDataControlState,
+  ParentIgnoreSettings,
+  SerializedControlState,
+} from './types';
 
 export {
   DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_WIDTH,
   DEFAULT_CONTROL_STYLE,
-} from './control_group/control_group_constants';
+  DEFAULT_CONTROL_WIDTH,
+  OPTIONS_LIST_CONTROL,
+  RANGE_SLIDER_CONTROL,
+  TIME_SLIDER_CONTROL,
+} from './constants';
+
+export { CONTROL_GROUP_TYPE } from './control_group';
 
-// Control Type exports
-export { OPTIONS_LIST_CONTROL, type OptionsListEmbeddableInput } from './options_list/types';
-export { type RangeSliderEmbeddableInput, RANGE_SLIDER_CONTROL } from './range_slider/types';
-export { TIME_SLIDER_CONTROL } from './time_slider/types';
+export type {
+  ControlGroupChainingSystem,
+  ControlGroupEditorConfig,
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelState,
+  ControlPanelsState,
+} from './control_group';
diff --git a/src/plugins/controls/common/mocks.tsx b/src/plugins/controls/common/mocks.tsx
deleted file mode 100644
index fcefc664c7e4e..0000000000000
--- a/src/plugins/controls/common/mocks.tsx
+++ /dev/null
@@ -1,12 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export * from './control_group/mocks';
-export * from './options_list/mocks';
-export * from './range_slider/mocks';
diff --git a/src/plugins/controls/public/services/options_list/types.ts b/src/plugins/controls/common/options_list/index.ts
similarity index 53%
rename from src/plugins/controls/public/services/options_list/types.ts
rename to src/plugins/controls/common/options_list/index.ts
index 508291cdbfb7d..78a2af859b13f 100644
--- a/src/plugins/controls/public/services/options_list/types.ts
+++ b/src/plugins/controls/common/options_list/index.ts
@@ -7,20 +7,15 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import {
+export { isValidSearch } from './is_valid_search';
+export { getSelectionAsFieldType, type OptionsListSelection } from './options_list_selections';
+export type { OptionsListSearchTechnique } from './suggestions_searching';
+export type { OptionsListSortingType } from './suggestions_sorting';
+export type {
+  OptionsListControlState,
+  OptionsListDisplaySettings,
   OptionsListFailureResponse,
   OptionsListRequest,
-  OptionsListResponse,
-} from '../../../common/options_list/types';
-
-export interface ControlsOptionsListService {
-  runOptionsListRequest: (
-    request: OptionsListRequest,
-    abortSignal: AbortSignal
-  ) => Promise<OptionsListResponse>;
-  clearOptionsListCache: () => void;
-  optionsListResponseWasFailure: (
-    response: OptionsListResponse
-  ) => response is OptionsListFailureResponse;
-  getAllowExpensiveQueries: () => Promise<boolean>;
-}
+  OptionsListSuccessResponse,
+  OptionsListSuggestions,
+} from './types';
diff --git a/src/plugins/controls/common/options_list/mocks.tsx b/src/plugins/controls/common/options_list/mocks.tsx
deleted file mode 100644
index e51514155f83b..0000000000000
--- a/src/plugins/controls/common/options_list/mocks.tsx
+++ /dev/null
@@ -1,71 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { OptionsListComponentState } from '../../public/options_list/types';
-import { ControlFactory, ControlOutput } from '../../public/types';
-import { OptionsListEmbeddableInput } from './types';
-
-import * as optionsListStateModule from '../../public/options_list/options_list_reducers';
-import { OptionsListEmbeddable, OptionsListEmbeddableFactory } from '../../public/options_list';
-
-const mockOptionsListComponentState = {
-  searchString: { value: '', valid: true },
-  field: undefined,
-  totalCardinality: 0,
-  availableOptions: [
-    { value: 'woof', docCount: 100 },
-    { value: 'bark', docCount: 75 },
-    { value: 'meow', docCount: 50 },
-    { value: 'quack', docCount: 25 },
-    { value: 'moo', docCount: 5 },
-  ],
-  invalidSelections: [],
-  allowExpensiveQueries: true,
-  popoverOpen: false,
-  validSelections: [],
-} as OptionsListComponentState;
-
-export const mockOptionsListEmbeddableInput = {
-  id: 'sample options list',
-  fieldName: 'sample field',
-  dataViewId: 'sample id',
-  selectedOptions: [],
-  runPastTimeout: false,
-  singleSelect: false,
-  exclude: false,
-} as OptionsListEmbeddableInput;
-
-const mockOptionsListOutput = {
-  loading: false,
-} as ControlOutput;
-
-export const mockOptionsListEmbeddable = async (partialState?: {
-  explicitInput?: Partial<OptionsListEmbeddableInput>;
-  componentState?: Partial<OptionsListComponentState>;
-}) => {
-  const optionsListFactoryStub = new OptionsListEmbeddableFactory();
-  const optionsListControlFactory = optionsListFactoryStub as unknown as ControlFactory;
-  optionsListControlFactory.getDefaultInput = () => ({});
-
-  // initial component state can be provided by overriding the defaults.
-  const initialComponentState = {
-    ...mockOptionsListComponentState,
-    ...partialState?.componentState,
-  };
-  jest
-    .spyOn(optionsListStateModule, 'getDefaultComponentState')
-    .mockImplementation(() => initialComponentState);
-
-  const mockEmbeddable = (await optionsListControlFactory.create({
-    ...mockOptionsListEmbeddableInput,
-    ...partialState?.explicitInput,
-  })) as OptionsListEmbeddable;
-  mockEmbeddable.getOutput = jest.fn().mockReturnValue(mockOptionsListOutput);
-  return mockEmbeddable;
-};
diff --git a/src/plugins/controls/common/options_list/types.ts b/src/plugins/controls/common/options_list/types.ts
index d23f1f89e3a03..e5eccbcab5cf5 100644
--- a/src/plugins/controls/common/options_list/types.ts
+++ b/src/plugins/controls/common/options_list/types.ts
@@ -10,28 +10,45 @@
 import { DataView, FieldSpec, RuntimeFieldSpec } from '@kbn/data-views-plugin/common';
 import type { AggregateQuery, BoolQuery, Filter, Query, TimeRange } from '@kbn/es-query';
 
-import type { DataControlInput } from '../types';
 import { OptionsListSelection } from './options_list_selections';
+import { OptionsListSortingType } from './suggestions_sorting';
+import { DefaultDataControlState } from '../types';
 import { OptionsListSearchTechnique } from './suggestions_searching';
-import type { OptionsListSortingType } from './suggestions_sorting';
 
 export const OPTIONS_LIST_CONTROL = 'optionsListControl'; // TODO: Replace with OPTIONS_LIST_CONTROL_TYPE
 
-export interface OptionsListEmbeddableInput extends DataControlInput {
+/**
+ * ----------------------------------------------------------------
+ * Options list state types
+ * ----------------------------------------------------------------
+ */
+
+export interface OptionsListDisplaySettings {
+  placeholder?: string;
+  hideActionBar?: boolean;
+  hideExclude?: boolean;
+  hideExists?: boolean;
+  hideSort?: boolean;
+}
+
+export interface OptionsListControlState
+  extends DefaultDataControlState,
+    OptionsListDisplaySettings {
   searchTechnique?: OptionsListSearchTechnique;
   sort?: OptionsListSortingType;
   selectedOptions?: OptionsListSelection[];
   existsSelected?: boolean;
   runPastTimeout?: boolean;
   singleSelect?: boolean;
-  hideActionBar?: boolean;
-  hideExclude?: boolean;
-  hideExists?: boolean;
-  placeholder?: string;
-  hideSort?: boolean;
   exclude?: boolean;
 }
 
+/**
+ * ----------------------------------------------------------------
+ * Options list server request + response types
+ * ----------------------------------------------------------------
+ */
+
 export type OptionsListSuggestions = Array<{ value: OptionsListSelection; docCount?: number }>;
 
 /**
@@ -77,7 +94,7 @@ export type OptionsListRequest = Omit<
  */
 export interface OptionsListRequestBody
   extends Pick<
-    OptionsListEmbeddableInput,
+    OptionsListControlState,
     'fieldName' | 'searchTechnique' | 'sort' | 'selectedOptions'
   > {
   runtimeFieldMap?: Record<string, RuntimeFieldSpec>;
diff --git a/src/plugins/controls/common/range_slider/mocks.tsx b/src/plugins/controls/common/range_slider/mocks.tsx
deleted file mode 100644
index 7da769fea2158..0000000000000
--- a/src/plugins/controls/common/range_slider/mocks.tsx
+++ /dev/null
@@ -1,58 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { RangeSliderEmbeddableInput } from '..';
-import { RangeSliderEmbeddable, RangeSliderEmbeddableFactory } from '../../public/range_slider';
-import * as rangeSliderStateModule from '../../public/range_slider/range_slider_reducers';
-import { RangeSliderComponentState } from '../../public/range_slider/types';
-import { ControlFactory, ControlOutput } from '../../public/types';
-
-export const mockRangeSliderEmbeddableInput = {
-  id: 'sample options list',
-  fieldName: 'sample field',
-  dataViewId: 'sample id',
-  value: ['0', '10'],
-} as RangeSliderEmbeddableInput;
-
-const mockRangeSliderComponentState = {
-  field: { name: 'bytes', type: 'number', aggregatable: true },
-  min: undefined,
-  max: undefined,
-  error: undefined,
-  isInvalid: false,
-} as RangeSliderComponentState;
-
-const mockRangeSliderOutput = {
-  loading: false,
-} as ControlOutput;
-
-export const mockRangeSliderEmbeddable = async (partialState?: {
-  explicitInput?: Partial<RangeSliderEmbeddableInput>;
-  componentState?: Partial<RangeSliderEmbeddableInput>;
-}) => {
-  const rangeSliderFactoryStub = new RangeSliderEmbeddableFactory();
-  const rangeSliderControlFactory = rangeSliderFactoryStub as unknown as ControlFactory;
-  rangeSliderControlFactory.getDefaultInput = () => ({});
-
-  // initial component state can be provided by overriding the defaults.
-  const initialComponentState = {
-    ...mockRangeSliderComponentState,
-    ...partialState?.componentState,
-  };
-  jest
-    .spyOn(rangeSliderStateModule, 'getDefaultComponentState')
-    .mockImplementation(() => initialComponentState);
-
-  const mockEmbeddable = (await rangeSliderControlFactory.create({
-    ...mockRangeSliderEmbeddableInput,
-    ...partialState?.explicitInput,
-  })) as RangeSliderEmbeddable;
-  mockEmbeddable.getOutput = jest.fn().mockReturnValue(mockRangeSliderOutput);
-  return mockEmbeddable;
-};
diff --git a/src/plugins/controls/common/range_slider/types.ts b/src/plugins/controls/common/range_slider/types.ts
deleted file mode 100644
index 58ed564e912e4..0000000000000
--- a/src/plugins/controls/common/range_slider/types.ts
+++ /dev/null
@@ -1,21 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { DataControlInput } from '../types';
-
-export const RANGE_SLIDER_CONTROL = 'rangeSliderControl';
-
-export type RangeValue = [string, string];
-
-export interface RangeSliderEmbeddableInput extends DataControlInput {
-  value?: RangeValue;
-  step?: number;
-}
-
-export type RangeSliderInputWithType = Partial<RangeSliderEmbeddableInput> & { type: string };
diff --git a/src/plugins/controls/common/time_slider/types.ts b/src/plugins/controls/common/time_slider/types.ts
deleted file mode 100755
index 70c5795993a9f..0000000000000
--- a/src/plugins/controls/common/time_slider/types.ts
+++ /dev/null
@@ -1,19 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import type { ControlInput } from '../types';
-
-export const TIME_SLIDER_CONTROL = 'timeSlider';
-
-export interface TimeSliderControlEmbeddableInput extends ControlInput {
-  isAnchored?: boolean;
-  // Encode value as percentage of time range to support relative time ranges.
-  timesliceStartAsPercentageOfTimeRange?: number;
-  timesliceEndAsPercentageOfTimeRange?: number;
-}
diff --git a/src/plugins/controls/common/types.ts b/src/plugins/controls/common/types.ts
index 7d201575b1378..34d4708b3e991 100644
--- a/src/plugins/controls/common/types.ts
+++ b/src/plugins/controls/common/types.ts
@@ -7,9 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import type { Filter, Query, TimeRange } from '@kbn/es-query';
-import { EmbeddableInput } from '@kbn/embeddable-plugin/common/types';
-
 export type ControlWidth = 'small' | 'medium' | 'large';
 export type ControlStyle = 'twoLine' | 'oneLine';
 
@@ -22,21 +19,19 @@ export interface ParentIgnoreSettings {
   ignoreValidations?: boolean;
 }
 
-export type ControlInput = EmbeddableInput & {
-  query?: Query;
-  filters?: Filter[];
-  timeRange?: TimeRange;
-  timeslice?: TimeSlice;
-  controlStyle?: ControlStyle;
-  ignoreParentSettings?: ParentIgnoreSettings;
-};
+export interface DefaultControlState {
+  grow?: boolean;
+  width?: ControlWidth;
+}
 
-export type DataControlInput = ControlInput & {
-  fieldName: string;
-  dataViewId: string;
-};
+export interface SerializedControlState<ControlStateType extends object = object>
+  extends DefaultControlState {
+  type: string;
+  explicitInput: { id: string } & ControlStateType;
+}
 
-export type ControlInputTransform = (
-  newState: Partial<ControlInput>,
-  controlType: string
-) => Partial<ControlInput>;
+export interface DefaultDataControlState extends DefaultControlState {
+  dataViewId: string;
+  fieldName: string;
+  title?: string; // custom control label
+}
diff --git a/src/plugins/controls/jest_setup.ts b/src/plugins/controls/jest_setup.ts
index b6561fea6bfba..722f87562328e 100644
--- a/src/plugins/controls/jest_setup.ts
+++ b/src/plugins/controls/jest_setup.ts
@@ -9,7 +9,7 @@
 
 // Start the services with stubs
 import { pluginServices } from './public/services';
-import { registry } from './public/services/plugin_services.story';
+import { registry } from './public/services/plugin_services.stub';
 
 registry.start({});
 pluginServices.setRegistry(registry);
diff --git a/src/plugins/controls/public/__stories__/controls.stories.tsx b/src/plugins/controls/public/__stories__/controls.stories.tsx
deleted file mode 100644
index bbc3a40c6926d..0000000000000
--- a/src/plugins/controls/public/__stories__/controls.stories.tsx
+++ /dev/null
@@ -1,247 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiFlexGroup, EuiFlexItem, EuiSwitch, EuiTextAlign } from '@elastic/eui';
-import React, { useEffect, useMemo, useState, useCallback, FC } from 'react';
-import useEffectOnce from 'react-use/lib/useEffectOnce';
-import { v4 as uuidv4 } from 'uuid';
-
-import {
-  getFlightOptionsAsync,
-  getFlightSearchOptions,
-  storybookFlightsDataView,
-} from '@kbn/presentation-util-plugin/public/mocks';
-
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
-import { ControlGroupContainerFactory, OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '..';
-
-import { decorators } from './decorators';
-import { ControlsPanels } from '../control_group/types';
-import { ControlGroupContainer } from '../control_group';
-import { pluginServices, registry } from '../services/plugin_services.story';
-import { injectStorybookDataView } from '../services/data_views/data_views.story';
-import { replaceOptionsListMethod } from '../services/options_list/options_list.story';
-import { populateStorybookControlFactories } from './storybook_control_factories';
-import { replaceValueSuggestionMethod } from '../services/unified_search/unified_search.story';
-import {
-  OptionsListResponse,
-  OptionsListRequest,
-  OptionsListSuggestions,
-  OptionsListEmbeddableInput,
-} from '../../common/options_list/types';
-import { RangeSliderEmbeddableInput } from '../range_slider';
-
-export default {
-  title: 'Controls',
-  description: '',
-  decorators,
-};
-
-injectStorybookDataView(storybookFlightsDataView);
-replaceValueSuggestionMethod(getFlightOptionsAsync);
-
-const storybookStubOptionsListRequest = async (
-  request: OptionsListRequest,
-  abortSignal: AbortSignal
-) =>
-  new Promise<OptionsListResponse>((r) =>
-    setTimeout(
-      () =>
-        r({
-          suggestions: getFlightSearchOptions(request.field.name, request.searchString).reduce(
-            (o, current, index) => {
-              return [...o, { value: current, docCount: index }];
-            },
-            [] as OptionsListSuggestions
-          ),
-          totalCardinality: 100,
-        }),
-      120
-    )
-  );
-replaceOptionsListMethod(storybookStubOptionsListRequest);
-
-export const ControlGroupStoryComponent: FC<{
-  panels?: ControlsPanels;
-  edit?: boolean;
-}> = ({ panels, edit }) => {
-  const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
-  const [embeddable, setEmbeddable] = useState<ControlGroupContainer>();
-  const [viewMode, setViewMode] = useState<ViewMode>(
-    edit === undefined || edit ? ViewMode.EDIT : ViewMode.VIEW
-  );
-
-  const handleToggleViewMode = useCallback(() => {
-    if (embeddable) {
-      const newViewMode =
-        embeddable.getInput().viewMode === ViewMode.EDIT ? ViewMode.VIEW : ViewMode.EDIT;
-      embeddable.updateInput({ viewMode: newViewMode });
-    }
-  }, [embeddable]);
-
-  pluginServices.setRegistry(registry.start({}));
-  populateStorybookControlFactories(pluginServices.getServices().controls);
-
-  useEffectOnce(() => {
-    (async () => {
-      const factory = new ControlGroupContainerFactory(
-        {} as unknown as EmbeddablePersistableStateService
-      );
-      const controlGroupContainerEmbeddable = await factory.create({
-        controlStyle: 'oneLine',
-        chainingSystem: 'NONE', // a chaining system doesn't make sense in storybook since the controls aren't backed by elasticsearch
-        panels: panels ?? {},
-        id: uuidv4(),
-        viewMode,
-      });
-
-      if (controlGroupContainerEmbeddable && embeddableRoot.current) {
-        controlGroupContainerEmbeddable.render(embeddableRoot.current);
-      }
-      setEmbeddable(controlGroupContainerEmbeddable);
-    })();
-  });
-
-  useEffect(() => {
-    if (embeddable) {
-      const subscription = embeddable.getInput$().subscribe((updatedInput) => {
-        if (updatedInput.viewMode) {
-          setViewMode(updatedInput.viewMode);
-        }
-      });
-
-      return () => subscription.unsubscribe();
-    }
-  }, [embeddable, setViewMode]);
-
-  return (
-    <>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTextAlign textAlign="right">
-            <EuiSwitch checked={viewMode === 'edit'} label="Edit" onChange={handleToggleViewMode} />
-          </EuiTextAlign>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <br />
-
-      <div ref={embeddableRoot} />
-    </>
-  );
-};
-
-export const EmptyControlGroupStory = () => <ControlGroupStoryComponent edit={false} />;
-export const ConfiguredControlGroupStory = () => (
-  <ControlGroupStoryComponent
-    panels={{
-      optionsList1: {
-        type: OPTIONS_LIST_CONTROL,
-        order: 1,
-        width: 'small',
-        grow: true,
-        explicitInput: {
-          title: 'Origin City',
-          id: 'optionsList1',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'OriginCityName',
-          selectedOptions: ['Toronto'],
-        } as OptionsListEmbeddableInput,
-      },
-      optionsList2: {
-        type: OPTIONS_LIST_CONTROL,
-        order: 2,
-        width: 'medium',
-        grow: true,
-        explicitInput: {
-          title: 'Destination City',
-          id: 'optionsList2',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'DestCityName',
-          selectedOptions: ['London'],
-        } as OptionsListEmbeddableInput,
-      },
-      optionsList3: {
-        type: 'TIME_SLIDER',
-        order: 3,
-        width: 'large',
-        grow: true,
-        explicitInput: {
-          title: 'Carrier',
-          id: 'optionsList3',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'Carrier',
-        } as OptionsListEmbeddableInput,
-      },
-      rangeSlider1: {
-        type: RANGE_SLIDER_CONTROL,
-        order: 4,
-        width: 'medium',
-        grow: true,
-        explicitInput: {
-          id: 'rangeSlider1',
-          title: 'Average ticket price',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'AvgTicketPrice',
-          value: ['4', '12'],
-          step: 2,
-        } as RangeSliderEmbeddableInput,
-      },
-    }}
-  />
-);
-
-export const RangeSliderControlGroupStory = () => (
-  <ControlGroupStoryComponent
-    panels={{
-      rangeSlider1: {
-        type: RANGE_SLIDER_CONTROL,
-        order: 1,
-        width: 'medium',
-        grow: true,
-        explicitInput: {
-          id: 'rangeSlider1',
-          title: 'Average ticket price',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'AvgTicketPrice',
-          value: ['4', '12'],
-          step: 2,
-        } as RangeSliderEmbeddableInput,
-      },
-      rangeSlider2: {
-        type: RANGE_SLIDER_CONTROL,
-        order: 2,
-        width: 'medium',
-        grow: true,
-        explicitInput: {
-          id: 'rangeSlider2',
-          title: 'Total distance in miles',
-          dataViewId: 'demoDataFlights',
-          fieldName: 'DistanceMiles',
-          value: ['0', '100'],
-          step: 10,
-        } as RangeSliderEmbeddableInput,
-      },
-      rangeSlider3: {
-        type: RANGE_SLIDER_CONTROL,
-        order: 3,
-        width: 'medium',
-        grow: true,
-        explicitInput: {
-          id: 'rangeSlider3',
-          title: 'Flight duration in hour',
-          dataViewId: 'demoDataFlight',
-          fieldName: 'FlightTimeHour',
-          value: ['30', '600'],
-          step: 30,
-        } as RangeSliderEmbeddableInput,
-      },
-    }}
-  />
-);
diff --git a/src/plugins/controls/public/__stories__/decorators.tsx b/src/plugins/controls/public/__stories__/decorators.tsx
deleted file mode 100644
index e2de0c2b5bd69..0000000000000
--- a/src/plugins/controls/public/__stories__/decorators.tsx
+++ /dev/null
@@ -1,50 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Story } from '@storybook/react';
-
-const bar = '#c5ced8';
-const panel = '#ffff';
-const background = '#FAFBFD';
-const minHeight = 60;
-
-const panelStyle = {
-  height: 165,
-  width: 400,
-  background: panel,
-};
-
-const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
-
-const layout = (OptionStory: Story) => (
-  <EuiFlexGroup style={{ background }} direction="column">
-    <EuiFlexItem style={kqlBarStyle}>KQL Bar</EuiFlexItem>
-    <EuiFlexItem>
-      <OptionStory />
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiFlexGroup>
-        <EuiFlexItem style={panelStyle} />
-        <EuiFlexItem style={panelStyle} />
-        <EuiFlexItem style={panelStyle} />
-      </EuiFlexGroup>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiFlexGroup>
-        <EuiFlexItem style={panelStyle} />
-        <EuiFlexItem style={panelStyle} />
-        <EuiFlexItem style={panelStyle} />
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
-
-export const decorators = [layout];
diff --git a/src/plugins/controls/public/__stories__/storybook_control_factories.ts b/src/plugins/controls/public/__stories__/storybook_control_factories.ts
deleted file mode 100644
index 69c25019333c6..0000000000000
--- a/src/plugins/controls/public/__stories__/storybook_control_factories.ts
+++ /dev/null
@@ -1,35 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { OptionsListEmbeddableFactory } from '../options_list';
-import { RangeSliderEmbeddableFactory } from '../range_slider';
-import { TimeSliderEmbeddableFactory } from '../time_slider';
-import { ControlsServiceType } from '../services/controls/types';
-import { ControlFactory } from '../types';
-
-export const populateStorybookControlFactories = (controlsServiceStub: ControlsServiceType) => {
-  const optionsListFactoryStub = new OptionsListEmbeddableFactory();
-
-  // cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory
-  const optionsListControlFactory = optionsListFactoryStub as unknown as ControlFactory;
-  optionsListControlFactory.getDefaultInput = () => ({});
-  controlsServiceStub.registerControlType(optionsListControlFactory);
-
-  const rangeSliderFactoryStub = new RangeSliderEmbeddableFactory();
-
-  // cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory
-  const rangeSliderControlFactory = rangeSliderFactoryStub as unknown as ControlFactory;
-  rangeSliderControlFactory.getDefaultInput = () => ({});
-  controlsServiceStub.registerControlType(rangeSliderControlFactory);
-
-  const timesliderFactoryStub = new TimeSliderEmbeddableFactory();
-  const timeSliderControlFactory = timesliderFactoryStub as unknown as ControlFactory;
-  timeSliderControlFactory.getDefaultInput = () => ({});
-  controlsServiceStub.registerControlType(timeSliderControlFactory);
-};
diff --git a/src/plugins/controls/public/control_group/actions/clear_control_action.tsx b/src/plugins/controls/public/actions/clear_control_action.tsx
similarity index 83%
rename from src/plugins/controls/public/control_group/actions/clear_control_action.tsx
rename to src/plugins/controls/public/actions/clear_control_action.tsx
index 0aa813f63025f..b7c2777473fd5 100644
--- a/src/plugins/controls/public/control_group/actions/clear_control_action.tsx
+++ b/src/plugins/controls/public/actions/clear_control_action.tsx
@@ -10,24 +10,27 @@
 import React, { SyntheticEvent } from 'react';
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { apiIsPresentationContainer, PresentationContainer } from '@kbn/presentation-containers';
+import { i18n } from '@kbn/i18n';
+import {
+  apiIsPresentationContainer,
+  type PresentationContainer,
+} from '@kbn/presentation-containers';
 import {
   apiCanAccessViewMode,
   apiHasParentApi,
   apiHasType,
   apiHasUniqueId,
   apiIsOfType,
-  EmbeddableApiContext,
-  HasParentApi,
-  HasType,
-  HasUniqueId,
+  type EmbeddableApiContext,
+  type HasParentApi,
+  type HasType,
+  type HasUniqueId,
 } from '@kbn/presentation-publishing';
-import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { type Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
 
 import { ACTION_CLEAR_CONTROL } from '.';
-import { CanClearSelections, isClearableControl } from '../../types';
-import { ControlGroupStrings } from '../control_group_strings';
-import { CONTROL_GROUP_TYPE } from '../types';
+import { CONTROL_GROUP_TYPE } from '..';
+import { isClearableControl, type CanClearSelections } from '../types';
 
 export type ClearControlActionApi = HasType &
   HasUniqueId &
@@ -73,7 +76,9 @@ export class ClearControlAction implements Action<EmbeddableApiContext> {
 
   public getDisplayName({ embeddable }: EmbeddableApiContext) {
     if (!isApiCompatible(embeddable)) throw new IncompatibleActionError();
-    return ControlGroupStrings.floatingActions.getClearButtonTitle();
+    return i18n.translate('controls.controlGroup.floatingActions.clearTitle', {
+      defaultMessage: 'Clear',
+    });
   }
 
   public getIconType({ embeddable }: EmbeddableApiContext) {
diff --git a/src/plugins/controls/public/actions/delete_control_action.test.tsx b/src/plugins/controls/public/actions/delete_control_action.test.tsx
new file mode 100644
index 0000000000000..65be8a65ecd6f
--- /dev/null
+++ b/src/plugins/controls/public/actions/delete_control_action.test.tsx
@@ -0,0 +1,94 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { BehaviorSubject } from 'rxjs';
+
+import { coreMock } from '@kbn/core/public/mocks';
+import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
+import { ViewMode } from '@kbn/presentation-publishing';
+
+import { getOptionsListControlFactory } from '../react_controls/controls/data_controls/options_list_control/get_options_list_control_factory';
+import { OptionsListControlApi } from '../react_controls/controls/data_controls/options_list_control/types';
+import {
+  getMockedBuildApi,
+  getMockedControlGroupApi,
+} from '../react_controls/controls/mocks/control_mocks';
+import { pluginServices } from '../services';
+import { DeleteControlAction } from './delete_control_action';
+
+const mockDataViews = dataViewPluginMocks.createStartContract();
+const mockCore = coreMock.createStart();
+
+const dashboardApi = {
+  viewMode: new BehaviorSubject<ViewMode>('view'),
+};
+const controlGroupApi = getMockedControlGroupApi(dashboardApi, {
+  removePanel: jest.fn(),
+  replacePanel: jest.fn(),
+  addNewPanel: jest.fn(),
+  children$: new BehaviorSubject({}),
+});
+
+let controlApi: OptionsListControlApi;
+beforeAll(async () => {
+  const controlFactory = getOptionsListControlFactory({
+    core: mockCore,
+    data: dataPluginMock.createStartContract(),
+    dataViews: mockDataViews,
+  });
+
+  const uuid = 'testControl';
+  const control = await controlFactory.buildControl(
+    {
+      dataViewId: 'test-data-view',
+      title: 'test',
+      fieldName: 'test-field',
+      width: 'medium',
+      grow: false,
+    },
+    getMockedBuildApi(uuid, controlFactory, controlGroupApi),
+    uuid,
+    controlGroupApi
+  );
+
+  controlApi = control.api;
+});
+
+test('Execute throws an error when called with an embeddable not in a parent', async () => {
+  const deleteControlAction = new DeleteControlAction();
+  const { parentApi, ...rest } = controlApi;
+  await expect(async () => {
+    await deleteControlAction.execute({ embeddable: rest });
+  }).rejects.toThrow(Error);
+});
+
+describe('Execute should open a confirm modal', () => {
+  test('Canceling modal will keep control', async () => {
+    const spyOn = jest.fn().mockResolvedValue(false);
+    pluginServices.getServices().overlays.openConfirm = spyOn;
+
+    const deleteControlAction = new DeleteControlAction();
+    await deleteControlAction.execute({ embeddable: controlApi });
+    expect(spyOn).toHaveBeenCalled();
+
+    expect(controlGroupApi.removePanel).not.toHaveBeenCalled();
+  });
+
+  test('Confirming modal will delete control', async () => {
+    const spyOn = jest.fn().mockResolvedValue(true);
+    pluginServices.getServices().overlays.openConfirm = spyOn;
+
+    const deleteControlAction = new DeleteControlAction();
+    await deleteControlAction.execute({ embeddable: controlApi });
+    expect(spyOn).toHaveBeenCalled();
+
+    expect(controlGroupApi.removePanel).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/plugins/controls/public/control_group/actions/delete_control_action.tsx b/src/plugins/controls/public/actions/delete_control_action.tsx
similarity index 70%
rename from src/plugins/controls/public/control_group/actions/delete_control_action.tsx
rename to src/plugins/controls/public/actions/delete_control_action.tsx
index d71f15f293629..45a7a20385627 100644
--- a/src/plugins/controls/public/control_group/actions/delete_control_action.tsx
+++ b/src/plugins/controls/public/actions/delete_control_action.tsx
@@ -11,26 +11,29 @@ import React from 'react';
 
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
-
-import { apiIsPresentationContainer, PresentationContainer } from '@kbn/presentation-containers';
+import { i18n } from '@kbn/i18n';
+import {
+  apiIsPresentationContainer,
+  type PresentationContainer,
+} from '@kbn/presentation-containers';
 import {
   apiCanAccessViewMode,
   apiHasParentApi,
   apiHasType,
   apiHasUniqueId,
   apiIsOfType,
-  EmbeddableApiContext,
   getInheritedViewMode,
-  HasParentApi,
-  HasType,
-  HasUniqueId,
-  PublishesViewMode,
+  type EmbeddableApiContext,
+  type HasParentApi,
+  type HasType,
+  type HasUniqueId,
+  type PublishesViewMode,
 } from '@kbn/presentation-publishing';
+import { IncompatibleActionError, type Action } from '@kbn/ui-actions-plugin/public';
+
 import { ACTION_DELETE_CONTROL } from '.';
-import { pluginServices } from '../../services';
-import { ControlGroupStrings } from '../control_group_strings';
-import { CONTROL_GROUP_TYPE } from '../types';
+import { CONTROL_GROUP_TYPE } from '..';
+import { pluginServices } from '../services';
 
 export type DeleteControlActionApi = HasType &
   HasUniqueId &
@@ -77,7 +80,9 @@ export class DeleteControlAction implements Action<EmbeddableApiContext> {
 
   public getDisplayName({ embeddable }: EmbeddableApiContext) {
     if (!isApiCompatible(embeddable)) throw new IncompatibleActionError();
-    return ControlGroupStrings.floatingActions.getRemoveButtonTitle();
+    return i18n.translate('controls.controlGroup.floatingActions.removeTitle', {
+      defaultMessage: 'Delete',
+    });
   }
 
   public getIconType({ embeddable }: EmbeddableApiContext) {
@@ -94,12 +99,23 @@ export class DeleteControlAction implements Action<EmbeddableApiContext> {
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!isApiCompatible(embeddable)) throw new IncompatibleActionError();
 
-    this.openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), {
-      confirmButtonText: ControlGroupStrings.management.deleteControls.getConfirm(),
-      cancelButtonText: ControlGroupStrings.management.deleteControls.getCancel(),
-      title: ControlGroupStrings.management.deleteControls.getDeleteTitle(),
-      buttonColor: 'danger',
-    }).then((confirmed) => {
+    this.openConfirm(
+      i18n.translate('controls.controlGroup.management.delete.sub', {
+        defaultMessage: 'Controls are not recoverable once removed.',
+      }),
+      {
+        confirmButtonText: i18n.translate('controls.controlGroup.management.delete.confirm', {
+          defaultMessage: 'Delete',
+        }),
+        cancelButtonText: i18n.translate('controls.controlGroup.management.delete.cancel', {
+          defaultMessage: 'Cancel',
+        }),
+        title: i18n.translate('controls.controlGroup.management.delete.deleteTitle', {
+          defaultMessage: 'Delete control?',
+        }),
+        buttonColor: 'danger',
+      }
+    ).then((confirmed) => {
       if (confirmed) {
         embeddable.parentApi.removePanel(embeddable.uuid);
       }
diff --git a/src/plugins/controls/public/actions/edit_control_action.test.tsx b/src/plugins/controls/public/actions/edit_control_action.test.tsx
new file mode 100644
index 0000000000000..3c28feb907421
--- /dev/null
+++ b/src/plugins/controls/public/actions/edit_control_action.test.tsx
@@ -0,0 +1,127 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { BehaviorSubject } from 'rxjs';
+
+import { coreMock } from '@kbn/core/public/mocks';
+import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
+import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks';
+import dateMath from '@kbn/datemath';
+import type { TimeRange } from '@kbn/es-query';
+import type { ViewMode } from '@kbn/presentation-publishing';
+
+import { getOptionsListControlFactory } from '../react_controls/controls/data_controls/options_list_control/get_options_list_control_factory';
+import type { OptionsListControlApi } from '../react_controls/controls/data_controls/options_list_control/types';
+import {
+  getMockedBuildApi,
+  getMockedControlGroupApi,
+} from '../react_controls/controls/mocks/control_mocks';
+import { getTimesliderControlFactory } from '../react_controls/controls/timeslider_control/get_timeslider_control_factory';
+import { EditControlAction } from './edit_control_action';
+
+const mockDataViews = dataViewPluginMocks.createStartContract();
+const mockCore = coreMock.createStart();
+const dataStartServiceMock = dataPluginMock.createStartContract();
+dataStartServiceMock.query.timefilter.timefilter.calculateBounds = (timeRange: TimeRange) => {
+  const now = new Date();
+  return {
+    min: dateMath.parse(timeRange.from, { forceNow: now }),
+    max: dateMath.parse(timeRange.to, { roundUp: true, forceNow: now }),
+  };
+};
+
+const dashboardApi = {
+  viewMode: new BehaviorSubject<ViewMode>('view'),
+};
+const controlGroupApi = getMockedControlGroupApi(dashboardApi, {
+  removePanel: jest.fn(),
+  replacePanel: jest.fn(),
+  addNewPanel: jest.fn(),
+  children$: new BehaviorSubject({}),
+});
+
+let optionsListApi: OptionsListControlApi;
+beforeAll(async () => {
+  const controlFactory = getOptionsListControlFactory({
+    core: mockCore,
+    data: dataStartServiceMock,
+    dataViews: mockDataViews,
+  });
+
+  const optionsListUuid = 'optionsListControl';
+  const optionsListControl = await controlFactory.buildControl(
+    {
+      dataViewId: 'test-data-view',
+      title: 'test',
+      fieldName: 'test-field',
+      width: 'medium',
+      grow: false,
+    },
+    getMockedBuildApi(optionsListUuid, controlFactory, controlGroupApi),
+    optionsListUuid,
+    controlGroupApi
+  );
+
+  optionsListApi = optionsListControl.api;
+});
+
+describe('Incompatible embeddables', () => {
+  test('Action is incompatible with embeddables that are not editable', async () => {
+    const timeSliderFactory = getTimesliderControlFactory({
+      core: mockCore,
+      data: dataStartServiceMock,
+    });
+    const timeSliderUuid = 'timeSliderControl';
+    const timeSliderControl = await timeSliderFactory.buildControl(
+      {},
+      getMockedBuildApi(timeSliderUuid, timeSliderFactory, controlGroupApi),
+      timeSliderUuid,
+      controlGroupApi
+    );
+    const editControlAction = new EditControlAction();
+    expect(
+      await editControlAction.isCompatible({
+        embeddable: timeSliderControl,
+      })
+    ).toBe(false);
+  });
+
+  test('Execute throws an error when called with an embeddable not in a parent', async () => {
+    const editControlAction = new EditControlAction();
+    const noParentApi = { ...optionsListApi, parentApi: undefined };
+    await expect(async () => {
+      await editControlAction.execute({ embeddable: noParentApi });
+    }).rejects.toThrow(Error);
+  });
+});
+
+describe('Compatible embeddables', () => {
+  beforeAll(() => {
+    dashboardApi.viewMode.next('edit');
+  });
+
+  test('Action is compatible with embeddables that are editable', async () => {
+    const editControlAction = new EditControlAction();
+    expect(
+      await editControlAction.isCompatible({
+        embeddable: optionsListApi,
+      })
+    ).toBe(true);
+  });
+
+  test('Execute should call `onEdit` provided by embeddable', async () => {
+    const onEditSpy = jest.fn();
+    optionsListApi.onEdit = onEditSpy;
+
+    const editControlAction = new EditControlAction();
+    expect(onEditSpy).not.toHaveBeenCalled();
+    await editControlAction.execute({ embeddable: optionsListApi });
+    expect(onEditSpy).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/plugins/controls/public/react_controls/actions/edit_control_action/edit_control_action.tsx b/src/plugins/controls/public/actions/edit_control_action.tsx
similarity index 87%
rename from src/plugins/controls/public/react_controls/actions/edit_control_action/edit_control_action.tsx
rename to src/plugins/controls/public/actions/edit_control_action.tsx
index dc8b101ceefee..0dec1a610d9d4 100644
--- a/src/plugins/controls/public/react_controls/actions/edit_control_action/edit_control_action.tsx
+++ b/src/plugins/controls/public/actions/edit_control_action.tsx
@@ -12,9 +12,9 @@ import React from 'react';
 import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EmbeddableApiContext, HasUniqueId } from '@kbn/presentation-publishing';
-import { type Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
+import { IncompatibleActionError, type Action } from '@kbn/ui-actions-plugin/public';
 
-export const ACTION_EDIT_CONTROL = 'editDataControl';
+import { ACTION_EDIT_CONTROL } from '.';
 
 export class EditControlAction implements Action<EmbeddableApiContext> {
   public readonly type = ACTION_EDIT_CONTROL;
@@ -48,12 +48,12 @@ export class EditControlAction implements Action<EmbeddableApiContext> {
   }
 
   public async isCompatible({ embeddable }: EmbeddableApiContext) {
-    const { isCompatible } = await import('./compatibility_check');
+    const { isCompatible } = await import('./edit_control_action_compatibility_check');
     return isCompatible(embeddable);
   }
 
   public async execute({ embeddable }: EmbeddableApiContext) {
-    const { compatibilityCheck } = await import('./compatibility_check');
+    const { compatibilityCheck } = await import('./edit_control_action_compatibility_check');
     if (!compatibilityCheck(embeddable)) throw new IncompatibleActionError();
     await embeddable.onEdit();
   }
diff --git a/src/plugins/controls/public/react_controls/actions/edit_control_action/compatibility_check.ts b/src/plugins/controls/public/actions/edit_control_action_compatibility_check.ts
similarity index 91%
rename from src/plugins/controls/public/react_controls/actions/edit_control_action/compatibility_check.ts
rename to src/plugins/controls/public/actions/edit_control_action_compatibility_check.ts
index 99b9e6cacfb5d..f74c6b0103c9d 100644
--- a/src/plugins/controls/public/react_controls/actions/edit_control_action/compatibility_check.ts
+++ b/src/plugins/controls/public/actions/edit_control_action_compatibility_check.ts
@@ -18,8 +18,8 @@ import {
   hasEditCapabilities,
 } from '@kbn/presentation-publishing';
 import { ViewMode } from '@kbn/embeddable-plugin/public';
-import { CONTROL_GROUP_TYPE } from '../../../../common';
-import { DataControlApi } from '../../controls/data_controls/types';
+import { CONTROL_GROUP_TYPE } from '../../common';
+import { DataControlApi } from '../react_controls/controls/data_controls/types';
 
 export const compatibilityCheck = (api: unknown): api is DataControlApi => {
   return Boolean(
diff --git a/src/plugins/controls/public/control_group/actions/index.ts b/src/plugins/controls/public/actions/index.ts
similarity index 89%
rename from src/plugins/controls/public/control_group/actions/index.ts
rename to src/plugins/controls/public/actions/index.ts
index c107399a0a9ec..184fc220c3005 100644
--- a/src/plugins/controls/public/control_group/actions/index.ts
+++ b/src/plugins/controls/public/actions/index.ts
@@ -7,6 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export const ACTION_EDIT_CONTROL = 'editLegacyEmbeddableControl';
+export const ACTION_EDIT_CONTROL = 'editDataControl';
 export const ACTION_CLEAR_CONTROL = 'clearControl';
 export const ACTION_DELETE_CONTROL = 'deleteControl';
diff --git a/src/plugins/controls/public/components/control_setting_tooltip_label.tsx b/src/plugins/controls/public/components/control_setting_tooltip_label.tsx
deleted file mode 100644
index c94e01c2bcb0d..0000000000000
--- a/src/plugins/controls/public/components/control_setting_tooltip_label.tsx
+++ /dev/null
@@ -1,33 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
-import { css } from '@emotion/react';
-
-export const ControlSettingTooltipLabel = ({
-  label,
-  tooltip,
-}: {
-  label: string;
-  tooltip: string;
-}) => (
-  <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
-    <EuiFlexItem grow={false}>{label}</EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-      css={css`
-        margin-top: 0px !important;
-      `}
-    >
-      <EuiIconTip content={tooltip} position="right" />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
diff --git a/src/plugins/controls/public/control_group/actions/delete_control_action.test.tsx b/src/plugins/controls/public/control_group/actions/delete_control_action.test.tsx
deleted file mode 100644
index a7a7ff8147d0f..0000000000000
--- a/src/plugins/controls/public/control_group/actions/delete_control_action.test.tsx
+++ /dev/null
@@ -1,91 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-
-import { OPTIONS_LIST_CONTROL } from '../../../common';
-import { ControlOutput } from '../../types';
-import { ControlGroupInput } from '../types';
-import { pluginServices } from '../../services';
-import { DeleteControlAction } from './delete_control_action';
-import { OptionsListEmbeddableInput } from '../../options_list';
-import { controlGroupInputBuilder } from '../external_api/control_group_input_builder';
-import { ControlGroupContainer } from '../embeddable/control_group_container';
-import { OptionsListEmbeddableFactory } from '../../options_list/embeddable/options_list_embeddable_factory';
-import { OptionsListEmbeddable } from '../../options_list/embeddable/options_list_embeddable';
-import { mockedReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public/mocks';
-
-let container: ControlGroupContainer;
-let embeddable: OptionsListEmbeddable;
-
-beforeAll(async () => {
-  pluginServices.getServices().controls.getControlFactory = jest
-    .fn()
-    .mockImplementation((type: string) => {
-      if (type === OPTIONS_LIST_CONTROL) return new OptionsListEmbeddableFactory();
-    });
-
-  const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-  controlGroupInputBuilder.addOptionsListControl(controlGroupInput, {
-    dataViewId: 'test-data-view',
-    title: 'test',
-    fieldName: 'test-field',
-    width: 'medium',
-    grow: false,
-  });
-  container = new ControlGroupContainer(mockedReduxEmbeddablePackage, controlGroupInput);
-  await container.untilInitialized();
-
-  embeddable = container.getChild(container.getChildIds()[0]);
-  expect(embeddable.type).toBe(OPTIONS_LIST_CONTROL);
-});
-
-test('Action is incompatible with Error Embeddables', async () => {
-  const deleteControlAction = new DeleteControlAction();
-  const errorEmbeddable = new ErrorEmbeddable('Wow what an awful error', { id: ' 404' });
-  expect(await deleteControlAction.isCompatible({ embeddable: errorEmbeddable as any })).toBe(
-    false
-  );
-});
-
-test('Execute throws an error when called with an embeddable not in a parent', async () => {
-  const deleteControlAction = new DeleteControlAction();
-  const optionsListEmbeddable = new OptionsListEmbeddable(
-    mockedReduxEmbeddablePackage,
-    {} as OptionsListEmbeddableInput,
-    {} as ControlOutput
-  );
-  await expect(async () => {
-    await deleteControlAction.execute({ embeddable: optionsListEmbeddable });
-  }).rejects.toThrow(Error);
-});
-
-describe('Execute should open a confirm modal', () => {
-  test('Canceling modal will keep control', async () => {
-    const spyOn = jest.fn().mockResolvedValue(false);
-    pluginServices.getServices().overlays.openConfirm = spyOn;
-
-    const deleteControlAction = new DeleteControlAction();
-    await deleteControlAction.execute({ embeddable });
-    expect(spyOn).toHaveBeenCalled();
-
-    expect(container.getPanelCount()).toBe(1);
-  });
-
-  test('Confirming modal will delete control', async () => {
-    const spyOn = jest.fn().mockResolvedValue(true);
-    pluginServices.getServices().overlays.openConfirm = spyOn;
-
-    const deleteControlAction = new DeleteControlAction();
-    await deleteControlAction.execute({ embeddable });
-    expect(spyOn).toHaveBeenCalled();
-
-    expect(container.getPanelCount()).toBe(0);
-  });
-});
diff --git a/src/plugins/controls/public/control_group/actions/edit_control_action.test.tsx b/src/plugins/controls/public/control_group/actions/edit_control_action.test.tsx
deleted file mode 100644
index 3c8741a0e8a03..0000000000000
--- a/src/plugins/controls/public/control_group/actions/edit_control_action.test.tsx
+++ /dev/null
@@ -1,106 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-
-import { OPTIONS_LIST_CONTROL } from '../../../common';
-import { ControlOutput } from '../../types';
-import { ControlGroupInput } from '../types';
-import { pluginServices } from '../../services';
-import { EditLegacyEmbeddableControlAction } from './edit_control_action';
-import { DeleteControlAction } from './delete_control_action';
-import { TimeSliderEmbeddableFactory } from '../../time_slider';
-import { OptionsListEmbeddableFactory, OptionsListEmbeddableInput } from '../../options_list';
-import { ControlGroupContainer } from '../embeddable/control_group_container';
-import { OptionsListEmbeddable } from '../../options_list/embeddable/options_list_embeddable';
-import { mockedReduxEmbeddablePackage } from '@kbn/presentation-util-plugin/public/mocks';
-
-const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-const deleteControlAction = new DeleteControlAction();
-
-test('Action is incompatible with Error Embeddables', async () => {
-  const editControlAction = new EditLegacyEmbeddableControlAction(deleteControlAction);
-  const errorEmbeddable = new ErrorEmbeddable('Wow what an awful error', { id: ' 404' });
-  expect(await editControlAction.isCompatible({ embeddable: errorEmbeddable as any })).toBe(false);
-});
-
-test('Action is incompatible with embeddables that are not editable', async () => {
-  const mockEmbeddableFactory = new TimeSliderEmbeddableFactory();
-  const mockGetFactory = jest.fn().mockReturnValue(mockEmbeddableFactory);
-  pluginServices.getServices().controls.getControlFactory = mockGetFactory;
-  pluginServices.getServices().embeddable.getEmbeddableFactory = mockGetFactory;
-
-  const editControlAction = new EditLegacyEmbeddableControlAction(deleteControlAction);
-  const emptyContainer = new ControlGroupContainer(mockedReduxEmbeddablePackage, controlGroupInput);
-  await emptyContainer.untilInitialized();
-  await emptyContainer.addTimeSliderControl();
-
-  expect(
-    await editControlAction.isCompatible({
-      embeddable: emptyContainer.getChild(emptyContainer.getChildIds()[0]) as any,
-    })
-  ).toBe(false);
-});
-
-test('Action is compatible with embeddables that are editable', async () => {
-  const mockEmbeddableFactory = new OptionsListEmbeddableFactory();
-  const mockGetFactory = jest.fn().mockReturnValue(mockEmbeddableFactory);
-  pluginServices.getServices().controls.getControlFactory = mockGetFactory;
-  pluginServices.getServices().embeddable.getEmbeddableFactory = mockGetFactory;
-
-  const editControlAction = new EditLegacyEmbeddableControlAction(deleteControlAction);
-  const emptyContainer = new ControlGroupContainer(mockedReduxEmbeddablePackage, controlGroupInput);
-  await emptyContainer.untilInitialized();
-  const control = await emptyContainer.addOptionsListControl({
-    dataViewId: 'test-data-view',
-    title: 'test',
-    fieldName: 'test-field',
-    width: 'medium',
-    grow: false,
-  });
-  expect(emptyContainer.getInput().panels[control.getInput().id].type).toBe(OPTIONS_LIST_CONTROL);
-
-  expect(
-    await editControlAction.isCompatible({
-      embeddable: emptyContainer.getChild(emptyContainer.getChildIds()[0]) as any,
-    })
-  ).toBe(true);
-});
-
-test('Execute throws an error when called with an embeddable not in a parent', async () => {
-  const editControlAction = new EditLegacyEmbeddableControlAction(deleteControlAction);
-  const optionsListEmbeddable = new OptionsListEmbeddable(
-    mockedReduxEmbeddablePackage,
-    {} as OptionsListEmbeddableInput,
-    {} as ControlOutput
-  );
-  await expect(async () => {
-    await editControlAction.execute({ embeddable: optionsListEmbeddable });
-  }).rejects.toThrow(Error);
-});
-
-test('Execute should open a flyout', async () => {
-  const spyOn = jest.fn().mockResolvedValue(undefined);
-  pluginServices.getServices().overlays.openFlyout = spyOn;
-
-  const emptyContainer = new ControlGroupContainer(mockedReduxEmbeddablePackage, controlGroupInput);
-  await emptyContainer.untilInitialized();
-  const control = (await emptyContainer.addOptionsListControl({
-    dataViewId: 'test-data-view',
-    title: 'test',
-    fieldName: 'test-field',
-    width: 'medium',
-    grow: false,
-  })) as OptionsListEmbeddable;
-  expect(emptyContainer.getInput().panels[control.getInput().id].type).toBe(OPTIONS_LIST_CONTROL);
-
-  const editControlAction = new EditLegacyEmbeddableControlAction(deleteControlAction);
-  await editControlAction.execute({ embeddable: control });
-  expect(spyOn).toHaveBeenCalled();
-});
diff --git a/src/plugins/controls/public/control_group/actions/edit_control_action.tsx b/src/plugins/controls/public/control_group/actions/edit_control_action.tsx
deleted file mode 100644
index b61083312c8b3..0000000000000
--- a/src/plugins/controls/public/control_group/actions/edit_control_action.tsx
+++ /dev/null
@@ -1,124 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { isErrorEmbeddable, ViewMode } from '@kbn/embeddable-plugin/public';
-import { toMountPoint } from '@kbn/react-kibana-mount';
-import { Action, IncompatibleActionError } from '@kbn/ui-actions-plugin/public';
-
-import { ACTION_EDIT_CONTROL, ControlGroupContainer } from '..';
-import { pluginServices } from '../../services';
-import { ControlEmbeddable, DataControlInput } from '../../types';
-import { ControlGroupStrings } from '../control_group_strings';
-import { ControlGroupContainerContext, setFlyoutRef } from '../embeddable/control_group_container';
-import { isControlGroup } from '../embeddable/control_group_helpers';
-import { DeleteControlAction } from './delete_control_action';
-import { EditControlFlyout } from './edit_control_flyout';
-
-export interface EditControlActionContext {
-  embeddable: ControlEmbeddable<DataControlInput>;
-}
-
-export class EditLegacyEmbeddableControlAction implements Action<EditControlActionContext> {
-  public readonly type = ACTION_EDIT_CONTROL;
-  public readonly id = ACTION_EDIT_CONTROL;
-  public order = 2;
-
-  private getEmbeddableFactory;
-  private openFlyout;
-  private theme;
-  private i18n;
-
-  constructor(private deleteControlAction: DeleteControlAction) {
-    ({
-      embeddable: { getEmbeddableFactory: this.getEmbeddableFactory },
-      overlays: { openFlyout: this.openFlyout },
-      core: { theme: this.theme, i18n: this.i18n },
-    } = pluginServices.getServices());
-  }
-
-  public readonly MenuItem = ({ context }: { context: EditControlActionContext }) => {
-    const { embeddable } = context;
-    return (
-      <EuiToolTip content={this.getDisplayName(context)}>
-        <EuiButtonIcon
-          data-test-subj={`control-action-${embeddable.id}-edit`}
-          aria-label={this.getDisplayName(context)}
-          iconType={this.getIconType(context)}
-          onClick={() => this.execute(context)}
-          color="text"
-        />
-      </EuiToolTip>
-    );
-  };
-
-  public getDisplayName({ embeddable }: EditControlActionContext) {
-    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
-      throw new IncompatibleActionError();
-    }
-    return ControlGroupStrings.floatingActions.getEditButtonTitle();
-  }
-
-  public getIconType({ embeddable }: EditControlActionContext) {
-    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
-      throw new IncompatibleActionError();
-    }
-    return 'pencil';
-  }
-
-  public async isCompatible({ embeddable }: EditControlActionContext) {
-    if (isErrorEmbeddable(embeddable)) return false;
-    const controlGroup = embeddable.parent;
-    const factory = this.getEmbeddableFactory(embeddable.type);
-
-    return Boolean(
-      controlGroup &&
-        isControlGroup(controlGroup) &&
-        controlGroup.getInput().viewMode === ViewMode.EDIT &&
-        factory &&
-        (await factory.isEditable())
-    );
-  }
-
-  public async execute({ embeddable }: EditControlActionContext) {
-    if (!embeddable.parent || !isControlGroup(embeddable.parent)) {
-      throw new IncompatibleActionError();
-    }
-    const controlGroup = embeddable.parent as ControlGroupContainer;
-
-    const flyoutInstance = this.openFlyout(
-      toMountPoint(
-        <ControlGroupContainerContext.Provider value={controlGroup}>
-          <EditControlFlyout
-            embeddable={embeddable}
-            removeControl={() => this.deleteControlAction.execute({ embeddable })}
-            closeFlyout={() => {
-              setFlyoutRef(undefined);
-              flyoutInstance.close();
-            }}
-          />
-        </ControlGroupContainerContext.Provider>,
-
-        { theme: this.theme, i18n: this.i18n }
-      ),
-      {
-        'aria-label': ControlGroupStrings.manageControl.getFlyoutEditTitle(),
-        outsideClickCloses: false,
-        onClose: (flyout) => {
-          setFlyoutRef(undefined);
-          flyout.close();
-        },
-        ownFocus: true,
-      }
-    );
-    setFlyoutRef(flyoutInstance);
-  }
-}
diff --git a/src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx b/src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx
deleted file mode 100644
index dad78ade123b7..0000000000000
--- a/src/plugins/controls/public/control_group/actions/edit_control_flyout.tsx
+++ /dev/null
@@ -1,118 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { isEqual } from 'lodash';
-import React from 'react';
-
-import { EmbeddableFactoryNotFoundError } from '@kbn/embeddable-plugin/public';
-
-import {
-  DataControlInput,
-  ControlEmbeddable,
-  IEditableControlFactory,
-  DataControlEditorChanges,
-} from '../../types';
-import { pluginServices } from '../../services';
-import { ControlGroupStrings } from '../control_group_strings';
-import { useControlGroupContainer } from '../embeddable/control_group_container';
-import { ControlEditor } from '../editor/control_editor';
-
-export const EditControlFlyout = ({
-  embeddable,
-  closeFlyout,
-  removeControl,
-}: {
-  embeddable: ControlEmbeddable<DataControlInput>;
-  closeFlyout: () => void;
-  removeControl: () => void;
-}) => {
-  // Controls Services Context
-  const {
-    overlays: { openConfirm },
-    controls: { getControlFactory },
-  } = pluginServices.getServices();
-  // Redux embeddable container Context
-  const controlGroup = useControlGroupContainer();
-
-  // current state
-  const panels = controlGroup.select((state) => state.explicitInput.panels);
-  const panel = panels[embeddable.id];
-
-  const onCancel = (changes: DataControlEditorChanges) => {
-    if (
-      isEqual(panel.explicitInput, {
-        ...panel.explicitInput,
-        ...changes.input,
-      }) &&
-      changes.grow === panel.grow &&
-      changes.width === panel.width
-    ) {
-      closeFlyout();
-      return;
-    }
-    openConfirm(ControlGroupStrings.management.discardChanges.getSubtitle(), {
-      confirmButtonText: ControlGroupStrings.management.discardChanges.getConfirm(),
-      cancelButtonText: ControlGroupStrings.management.discardChanges.getCancel(),
-      title: ControlGroupStrings.management.discardChanges.getTitle(),
-      buttonColor: 'danger',
-    }).then((confirmed) => {
-      if (confirmed) {
-        closeFlyout();
-      }
-    });
-  };
-
-  const onSave = async (changes: DataControlEditorChanges, type?: string) => {
-    if (!type) {
-      closeFlyout();
-      return;
-    }
-    const factory = getControlFactory(type) as IEditableControlFactory;
-    if (!factory) throw new EmbeddableFactoryNotFoundError(type);
-    let inputToReturn = changes.input;
-    if (factory.presaveTransformFunction) {
-      inputToReturn = factory.presaveTransformFunction(inputToReturn, embeddable);
-    }
-
-    if (changes.width && changes.width !== panel.width)
-      controlGroup.dispatch.setControlWidth({
-        width: changes.width,
-        embeddableId: embeddable.id,
-      });
-    if (changes.grow !== undefined && changes.grow !== panel.grow) {
-      controlGroup.dispatch.setControlGrow({
-        grow: changes.grow,
-        embeddableId: embeddable.id,
-      });
-    }
-
-    closeFlyout();
-    if (panel.type === type) {
-      controlGroup.updateInputForChild(embeddable.id, inputToReturn);
-    } else {
-      await controlGroup.replaceEmbeddable(embeddable.id, inputToReturn, type);
-    }
-  };
-
-  return (
-    <ControlEditor
-      isCreate={false}
-      width={panel.width}
-      grow={panel.grow}
-      embeddable={embeddable}
-      onCancel={onCancel}
-      setLastUsedDataViewId={(lastUsed) => controlGroup.setLastUsedDataViewId(lastUsed)}
-      onSave={onSave}
-      removeControl={() => {
-        closeFlyout();
-        removeControl();
-      }}
-    />
-  );
-};
diff --git a/src/plugins/controls/public/control_group/component/control_error_component.tsx b/src/plugins/controls/public/control_group/component/control_error_component.tsx
deleted file mode 100644
index 1aa7af58a6893..0000000000000
--- a/src/plugins/controls/public/control_group/component/control_error_component.tsx
+++ /dev/null
@@ -1,55 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useState } from 'react';
-
-import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
-import { FormattedMessage, I18nProvider } from '@kbn/i18n-react';
-import { Markdown } from '@kbn/shared-ux-markdown';
-
-interface ControlErrorProps {
-  error: Error | string;
-}
-
-export const ControlError = ({ error }: ControlErrorProps) => {
-  const [isPopoverOpen, setPopoverOpen] = useState(false);
-  const errorMessage = error instanceof Error ? error.message : error;
-
-  const popoverButton = (
-    <EuiButtonEmpty
-      color="danger"
-      iconSize="m"
-      iconType="error"
-      data-test-subj="control-frame-error"
-      onClick={() => setPopoverOpen((open) => !open)}
-      className={'errorEmbeddableCompact__button'}
-      textProps={{ className: 'errorEmbeddableCompact__text' }}
-    >
-      <FormattedMessage
-        id="controls.frame.error.message"
-        defaultMessage="An error occurred. View more"
-      />
-    </EuiButtonEmpty>
-  );
-
-  return (
-    <I18nProvider>
-      <EuiPopover
-        button={popoverButton}
-        isOpen={isPopoverOpen}
-        className="errorEmbeddableCompact__popover"
-        closePopover={() => setPopoverOpen(false)}
-      >
-        <Markdown data-test-subj="errorMessageMarkdown" readOnly>
-          {errorMessage}
-        </Markdown>
-      </EuiPopover>
-    </I18nProvider>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/component/control_frame_component.tsx b/src/plugins/controls/public/control_group/component/control_frame_component.tsx
deleted file mode 100644
index 7aa51b1567a57..0000000000000
--- a/src/plugins/controls/public/control_group/component/control_frame_component.tsx
+++ /dev/null
@@ -1,147 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import {
-  EuiFormControlLayout,
-  EuiFormLabel,
-  EuiFormRow,
-  EuiLoadingChart,
-  EuiToolTip,
-} from '@elastic/eui';
-import { isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-import { FloatingActions } from '@kbn/presentation-util-plugin/public';
-
-import { useChildEmbeddable } from '../../hooks/use_child_embeddable';
-import {
-  controlGroupSelector,
-  useControlGroupContainer,
-} from '../embeddable/control_group_container';
-import { ControlError } from './control_error_component';
-
-export interface ControlFrameProps {
-  customPrepend?: JSX.Element;
-  enableActions?: boolean;
-  embeddableId: string;
-  embeddableType: string;
-}
-
-export const ControlFrame = ({
-  customPrepend,
-  enableActions,
-  embeddableId,
-  embeddableType,
-}: ControlFrameProps) => {
-  const embeddableRoot: React.RefObject<HTMLDivElement> = useMemo(() => React.createRef(), []);
-
-  const controlGroup = useControlGroupContainer();
-
-  const controlStyle = controlGroupSelector((state) => state.explicitInput.controlStyle);
-  const viewMode = controlGroupSelector((state) => state.explicitInput.viewMode);
-  const disabledActions = controlGroupSelector((state) => state.explicitInput.disabledActions);
-
-  const embeddable = useChildEmbeddable({
-    untilEmbeddableLoaded: controlGroup.untilEmbeddableLoaded.bind(controlGroup),
-    embeddableType,
-    embeddableId,
-  });
-
-  const [title, setTitle] = useState<string>();
-
-  const usingTwoLineLayout = controlStyle === 'twoLine';
-
-  useEffect(() => {
-    let mounted = true;
-    if (embeddableRoot.current) {
-      embeddable?.render(embeddableRoot.current);
-    }
-    const inputSubscription = embeddable?.getInput$().subscribe((newInput) => {
-      if (mounted) setTitle(newInput.title);
-    });
-    return () => {
-      mounted = false;
-      inputSubscription?.unsubscribe();
-    };
-  }, [embeddable, embeddableRoot]);
-
-  const embeddableParentClassNames = classNames('controlFrame__control', {
-    'controlFrame--twoLine': controlStyle === 'twoLine',
-    'controlFrame--oneLine': controlStyle === 'oneLine',
-  });
-
-  function renderEmbeddablePrepend() {
-    if (typeof embeddable?.renderPrepend === 'function') {
-      return embeddable.renderPrepend();
-    }
-
-    return usingTwoLineLayout ? undefined : (
-      <EuiToolTip anchorClassName="controlFrame__labelToolTip" content={title}>
-        <EuiFormLabel className="controlFrame__formControlLayoutLabel" htmlFor={embeddableId}>
-          {title}
-        </EuiFormLabel>
-      </EuiToolTip>
-    );
-  }
-
-  const form = (
-    <EuiFormControlLayout
-      className={classNames('controlFrame__formControlLayout', {
-        'controlFrameFormControlLayout--twoLine': controlStyle === 'twoLine',
-      })}
-      fullWidth
-      compressed
-      prepend={
-        <>
-          {(embeddable && customPrepend) ?? null}
-          {renderEmbeddablePrepend()}
-        </>
-      }
-    >
-      {embeddable && (
-        <div
-          className={embeddableParentClassNames}
-          id={`controlFrame--${embeddableId}`}
-          ref={embeddableRoot}
-        >
-          {isErrorEmbeddable(embeddable) && <ControlError error={embeddable.error} />}
-        </div>
-      )}
-      {!embeddable && (
-        <div className={embeddableParentClassNames} id={`controlFrame--${embeddableId}`}>
-          <div className="controlFrame--controlLoading">
-            <EuiLoadingChart />
-          </div>
-        </div>
-      )}
-    </EuiFormControlLayout>
-  );
-
-  return (
-    <FloatingActions
-      className={classNames({
-        'controlFrameFloatingActions--twoLine': usingTwoLineLayout,
-        'controlFrameFloatingActions--oneLine': !usingTwoLineLayout,
-      })}
-      viewMode={viewMode}
-      api={embeddable}
-      disabledActions={disabledActions}
-      isEnabled={embeddable && enableActions}
-    >
-      <EuiFormRow
-        data-test-subj="control-frame-title"
-        fullWidth
-        label={usingTwoLineLayout ? title || '...' : undefined}
-      >
-        {form}
-      </EuiFormRow>
-    </FloatingActions>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/component/control_group_component.test.tsx b/src/plugins/controls/public/control_group/component/control_group_component.test.tsx
deleted file mode 100644
index 7a299372fad1f..0000000000000
--- a/src/plugins/controls/public/control_group/component/control_group_component.test.tsx
+++ /dev/null
@@ -1,203 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { stubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
-import { pluginServices as presentationUtilPluginServices } from '@kbn/presentation-util-plugin/public/services';
-import { registry as presentationUtilServicesRegistry } from '@kbn/presentation-util-plugin/public/services/plugin_services.story';
-import { act, render, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Provider } from 'react-redux';
-import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '../../../common';
-import { mockControlGroupContainer, mockControlGroupInput } from '../../../common/mocks';
-import { RangeSliderEmbeddableFactory } from '../../range_slider';
-import { pluginServices } from '../../services';
-import { ControlGroupContainerContext } from '../embeddable/control_group_container';
-import { ControlGroupComponentState, ControlGroupInput } from '../types';
-import { ControlGroup } from './control_group_component';
-import { OptionsListEmbeddableFactory } from '../../options_list';
-
-jest.mock('@dnd-kit/core', () => ({
-  /** DnD kit has a memory leak based on this layout measuring strategy on unmount; setting it to undefined prevents this */
-  ...jest.requireActual('@dnd-kit/core'),
-  LayoutMeasuringStrategy: { Always: undefined },
-}));
-
-describe('Control group component', () => {
-  interface MountOptions {
-    explicitInput?: Partial<ControlGroupInput>;
-    initialComponentState?: Partial<ControlGroupComponentState>;
-  }
-
-  presentationUtilServicesRegistry.start({});
-  presentationUtilPluginServices.setRegistry(presentationUtilServicesRegistry);
-
-  pluginServices.getServices().dataViews.get = jest.fn().mockResolvedValue(stubDataView);
-  pluginServices.getServices().dataViews.getIdsWithTitle = jest
-    .fn()
-    .mockResolvedValue([{ id: stubDataView.id, title: stubDataView.getIndexPattern() }]);
-  pluginServices.getServices().controls.getControlTypes = jest
-    .fn()
-    .mockReturnValue([OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL]);
-  pluginServices.getServices().controls.getControlFactory = jest
-    .fn()
-    .mockImplementation((type: string) => {
-      if (type === OPTIONS_LIST_CONTROL) return new OptionsListEmbeddableFactory();
-      if (type === RANGE_SLIDER_CONTROL) return new RangeSliderEmbeddableFactory();
-    });
-
-  async function mountComponent(options?: MountOptions) {
-    const controlGroupContainer = await mockControlGroupContainer(
-      mockControlGroupInput(options?.explicitInput),
-      options?.initialComponentState
-    );
-
-    const controlGroupComponent = render(
-      <Provider
-        // this store is ugly, but necessary because we are using controlGroupSelector rather than controlGroup.select
-        store={
-          {
-            subscribe: controlGroupContainer.onStateChange,
-            getState: controlGroupContainer.getState,
-            dispatch: jest.fn(),
-          } as any
-        }
-      >
-        <ControlGroupContainerContext.Provider value={controlGroupContainer}>
-          <ControlGroup />
-        </ControlGroupContainerContext.Provider>
-      </Provider>
-    );
-
-    await waitFor(() => {
-      // wait for control group to render all 3 controls before returning
-      expect(controlGroupComponent.queryAllByTestId('control-frame').length).toBe(3);
-    });
-
-    return { controlGroupComponent, controlGroupContainer };
-  }
-
-  test('does not render end button group by default', async () => {
-    const { controlGroupComponent } = await mountComponent();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--endButtonGroup')
-    ).not.toBeInTheDocument();
-  });
-
-  test('can render **just** add control button', async () => {
-    const { controlGroupComponent } = await mountComponent({
-      initialComponentState: { showAddButton: true },
-    });
-    expect(controlGroupComponent.queryByTestId('controlGroup--endButtonGroup')).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--addControlButton')
-    ).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--applyFiltersButton')
-    ).not.toBeInTheDocument();
-  });
-
-  test('can render **just** apply button', async () => {
-    const { controlGroupComponent } = await mountComponent({
-      explicitInput: { showApplySelections: true },
-    });
-    expect(controlGroupComponent.queryByTestId('controlGroup--endButtonGroup')).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--addControlButton')
-    ).not.toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--applyFiltersButton')
-    ).toBeInTheDocument();
-  });
-
-  test('can render both buttons in the end button group', async () => {
-    const { controlGroupComponent } = await mountComponent({
-      explicitInput: { showApplySelections: true },
-      initialComponentState: { showAddButton: true },
-    });
-    expect(controlGroupComponent.queryByTestId('controlGroup--endButtonGroup')).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--addControlButton')
-    ).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('controlGroup--applyFiltersButton')
-    ).toBeInTheDocument();
-  });
-
-  test('enables apply button based on unpublished filters', async () => {
-    const { controlGroupComponent, controlGroupContainer } = await mountComponent({
-      explicitInput: { showApplySelections: true },
-    });
-    expect(controlGroupComponent.getByTestId('controlGroup--applyFiltersButton')).toBeDisabled();
-
-    act(() => controlGroupContainer.dispatch.setUnpublishedFilters({ filters: [] }));
-    expect(controlGroupComponent.getByTestId('controlGroup--applyFiltersButton')).toBeEnabled();
-
-    act(() => controlGroupContainer.dispatch.setUnpublishedFilters(undefined));
-    expect(controlGroupComponent.getByTestId('controlGroup--applyFiltersButton')).toBeDisabled();
-
-    act(() => controlGroupContainer.dispatch.setUnpublishedFilters({ timeslice: [0, 1] }));
-    expect(controlGroupComponent.getByTestId('controlGroup--applyFiltersButton')).toBeEnabled();
-  });
-
-  test('calls publish when apply button is clicked', async () => {
-    const { controlGroupComponent, controlGroupContainer } = await mountComponent({
-      explicitInput: { showApplySelections: true },
-    });
-    let applyButton = controlGroupComponent.getByTestId('controlGroup--applyFiltersButton');
-    expect(applyButton).toBeDisabled();
-    controlGroupContainer.publishFilters = jest.fn();
-
-    const unpublishedFilters: ControlGroupComponentState['unpublishedFilters'] = {
-      filters: [
-        {
-          query: { exists: { field: 'foo' } },
-          meta: { type: 'exists' },
-        },
-      ],
-      timeslice: [0, 1],
-    };
-    act(() => controlGroupContainer.dispatch.setUnpublishedFilters(unpublishedFilters));
-    applyButton = controlGroupComponent.getByTestId('controlGroup--applyFiltersButton');
-    expect(applyButton).toBeEnabled();
-
-    await userEvent.click(applyButton);
-    expect(controlGroupContainer.publishFilters).toBeCalledWith(unpublishedFilters);
-  });
-
-  test('ensure actions get rendered', async () => {
-    presentationUtilPluginServices.getServices().uiActions.getTriggerCompatibleActions = jest
-      .fn()
-      .mockImplementation(() => {
-        return [
-          {
-            isCompatible: jest.fn().mockResolvedValue(true),
-            id: 'testAction',
-            MenuItem: () => <div>test1</div>,
-          },
-
-          {
-            isCompatible: jest.fn().mockResolvedValue(true),
-            id: 'testAction2',
-            MenuItem: () => <div>test2</div>,
-          },
-        ];
-      });
-
-    const { controlGroupComponent } = await mountComponent();
-    expect(
-      controlGroupComponent.queryByTestId('presentationUtil__floatingActions__control1')
-    ).toBeInTheDocument();
-    expect(
-      controlGroupComponent.queryByTestId('presentationUtil__floatingActions__control2')
-    ).toBeInTheDocument();
-  });
-});
diff --git a/src/plugins/controls/public/control_group/component/control_group_component.tsx b/src/plugins/controls/public/control_group/component/control_group_component.tsx
deleted file mode 100644
index 0261e55730ead..0000000000000
--- a/src/plugins/controls/public/control_group/component/control_group_component.tsx
+++ /dev/null
@@ -1,352 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import '../control_group.scss';
-
-import classNames from 'classnames';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import {
-  closestCenter,
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  KeyboardSensor,
-  PointerSensor,
-  MeasuringStrategy,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  arrayMove,
-  rectSortingStrategy,
-  SortableContext,
-  sortableKeyboardCoordinates,
-} from '@dnd-kit/sortable';
-import {
-  EuiButtonEmpty,
-  EuiButtonIcon,
-  EuiCheckbox,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiPanel,
-  EuiText,
-  EuiToolTip,
-  EuiTourStep,
-} from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/public';
-
-import { ControlGroupStrings } from '../control_group_strings';
-import {
-  controlGroupSelector,
-  useControlGroupContainer,
-} from '../embeddable/control_group_container';
-import { ControlClone, SortableControl } from './control_group_sortable_item';
-
-export const ControlGroup = () => {
-  const controlGroup = useControlGroupContainer();
-
-  // current state
-  const panels = controlGroupSelector((state) => state.explicitInput.panels);
-  const viewMode = controlGroupSelector((state) => state.explicitInput.viewMode);
-  const controlStyle = controlGroupSelector((state) => state.explicitInput.controlStyle);
-  const showApplySelections = controlGroupSelector(
-    (state) => state.explicitInput.showApplySelections
-  );
-  const showAddButton = controlGroupSelector((state) => state.componentState.showAddButton);
-  const unpublishedFilters = controlGroupSelector(
-    (state) => state.componentState.unpublishedFilters
-  );
-  const controlWithInvalidSelectionsId = controlGroupSelector(
-    (state) => state.componentState.controlWithInvalidSelectionsId
-  );
-
-  const [tourStepOpen, setTourStepOpen] = useState<boolean>(true);
-  const [suppressTourChecked, setSuppressTourChecked] = useState<boolean>(false);
-  const [renderTourStep, setRenderTourStep] = useState(false);
-
-  const isEditable = viewMode === ViewMode.EDIT;
-
-  const idsInOrder = useMemo(
-    () =>
-      Object.values(panels)
-        .sort((a, b) => (a.order > b.order ? 1 : -1))
-        .reduce((acc, panel) => {
-          acc.push(panel.explicitInput.id);
-          return acc;
-        }, [] as string[]),
-    [panels]
-  );
-
-  useEffect(() => {
-    /**
-     * This forces the tour step to get unmounted so that it can attach to the new invalid
-     * control - otherwise, the anchor will remain attached to the old invalid control
-     */
-    let mounted = true;
-    setRenderTourStep(false);
-    setTimeout(() => {
-      if (mounted) {
-        setRenderTourStep(true);
-      }
-    }, 100);
-    return () => {
-      mounted = false;
-    };
-  }, [controlWithInvalidSelectionsId]);
-
-  const applyButtonEnabled = useMemo(() => {
-    /**
-     * this is undefined if there are no unpublished filters / timeslice; note that an empty filter array counts
-     * as unpublished filters and so the apply button should still be enabled in this case
-     */
-    return Boolean(unpublishedFilters);
-  }, [unpublishedFilters]);
-
-  const showAppendedButtonGroup = useMemo(
-    () => showAddButton || showApplySelections,
-    [showAddButton, showApplySelections]
-  );
-
-  const ApplyButtonComponent = useMemo(() => {
-    return (
-      <EuiButtonIcon
-        size="m"
-        disabled={!applyButtonEnabled}
-        iconSize="m"
-        display="fill"
-        color={'success'}
-        iconType={'check'}
-        data-test-subj="controlGroup--applyFiltersButton"
-        aria-label={ControlGroupStrings.management.getApplyButtonTitle(applyButtonEnabled)}
-        onClick={() => {
-          if (unpublishedFilters) controlGroup.publishFilters(unpublishedFilters);
-        }}
-      />
-    );
-  }, [applyButtonEnabled, unpublishedFilters, controlGroup]);
-
-  const tourStep = useMemo(() => {
-    if (
-      !renderTourStep ||
-      !controlGroup.canShowInvalidSelectionsWarning() ||
-      !tourStepOpen ||
-      !controlWithInvalidSelectionsId ||
-      !panels[controlWithInvalidSelectionsId]
-    ) {
-      return null;
-    }
-    const invalidControlType = panels[controlWithInvalidSelectionsId].type;
-
-    return (
-      <EuiTourStep
-        step={1}
-        stepsTotal={1}
-        minWidth={300}
-        maxWidth={300}
-        display="block"
-        isStepOpen={true}
-        repositionOnScroll
-        onFinish={() => {}}
-        panelPaddingSize="m"
-        anchorPosition="downCenter"
-        panelClassName="controlGroup--invalidSelectionsTour"
-        anchor={`#controlFrame--${controlWithInvalidSelectionsId}`}
-        title={
-          <EuiFlexGroup gutterSize="s" alignItems="center">
-            <EuiFlexItem grow={false}>
-              <EuiIcon type="warning" color="warning" />
-            </EuiFlexItem>
-            <EuiFlexItem>{ControlGroupStrings.invalidControlWarning.getTourTitle()}</EuiFlexItem>
-          </EuiFlexGroup>
-        }
-        content={ControlGroupStrings.invalidControlWarning.getTourContent(invalidControlType)}
-        footerAction={[
-          <EuiCheckbox
-            checked={suppressTourChecked}
-            id={'controlGroup--suppressTourCheckbox'}
-            className="controlGroup--suppressTourCheckbox"
-            onChange={(e) => setSuppressTourChecked(e.target.checked)}
-            label={
-              <EuiText size="xs" className="controlGroup--suppressTourCheckboxLabel">
-                {ControlGroupStrings.invalidControlWarning.getSuppressTourLabel()}
-              </EuiText>
-            }
-          />,
-          <EuiButtonEmpty
-            size="xs"
-            flush="right"
-            color="text"
-            onClick={() => {
-              setTourStepOpen(false);
-              if (suppressTourChecked) {
-                controlGroup.suppressInvalidSelectionsWarning();
-              }
-            }}
-          >
-            {ControlGroupStrings.invalidControlWarning.getDismissButton()}
-          </EuiButtonEmpty>,
-        ]}
-      />
-    );
-  }, [
-    panels,
-    controlGroup,
-    tourStepOpen,
-    renderTourStep,
-    suppressTourChecked,
-    controlWithInvalidSelectionsId,
-  ]);
-
-  const [draggingId, setDraggingId] = useState<string | null>(null);
-  const draggingIndex = useMemo(
-    () => (draggingId ? idsInOrder.indexOf(draggingId) : -1),
-    [idsInOrder, draggingId]
-  );
-
-  const sensors = useSensors(
-    useSensor(PointerSensor),
-    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
-  );
-
-  const onDragEnd = ({ over }: DragEndEvent) => {
-    if (over) {
-      const overIndex = idsInOrder.indexOf(`${over.id}`);
-      if (draggingIndex !== overIndex) {
-        const newIndex = overIndex;
-        controlGroup.dispatch.setControlOrders({
-          ids: arrayMove([...idsInOrder], draggingIndex, newIndex),
-        });
-      }
-    }
-    (document.activeElement as HTMLElement)?.blur();
-    setDraggingId(null);
-  };
-
-  const emptyState = !(idsInOrder && idsInOrder.length > 0);
-  // Empty, non-editable view is null
-  if (!isEditable && emptyState) {
-    return null;
-  }
-
-  let panelBg: 'transparent' | 'plain' | 'success' = 'transparent';
-  if (emptyState) panelBg = 'plain';
-  if (draggingId) panelBg = 'success';
-
-  return (
-    <>
-      {idsInOrder.length > 0 || showAddButton ? (
-        <EuiPanel
-          borderRadius="m"
-          color={panelBg}
-          paddingSize={emptyState ? 's' : 'none'}
-          data-test-subj="controls-group-wrapper"
-          className={classNames('controlsWrapper', {
-            'controlsWrapper--empty': emptyState,
-            'controlsWrapper--twoLine': controlStyle === 'twoLine',
-          })}
-        >
-          <EuiFlexGroup
-            wrap={false}
-            gutterSize="s"
-            direction="row"
-            responsive={false}
-            alignItems="stretch"
-            justifyContent="center"
-            data-test-subj="controls-group"
-          >
-            {tourStep}
-            <EuiFlexItem>
-              <DndContext
-                onDragStart={({ active }) => setDraggingId(`${active.id}`)}
-                onDragEnd={onDragEnd}
-                onDragCancel={() => setDraggingId(null)}
-                sensors={sensors}
-                measuring={{
-                  droppable: {
-                    strategy: MeasuringStrategy.Always,
-                  },
-                }}
-                collisionDetection={closestCenter}
-              >
-                <SortableContext items={idsInOrder} strategy={rectSortingStrategy}>
-                  <EuiFlexGroup
-                    className={classNames('controlGroup', {
-                      'controlGroup-isDragging': draggingId,
-                    })}
-                    alignItems="center"
-                    gutterSize="s"
-                    wrap={true}
-                  >
-                    {idsInOrder.map(
-                      (controlId, index) =>
-                        panels[controlId] && (
-                          <SortableControl
-                            isEditable={isEditable}
-                            dragInfo={{ index, draggingIndex }}
-                            embeddableId={controlId}
-                            embeddableType={panels[controlId].type}
-                            key={controlId}
-                          />
-                        )
-                    )}
-                  </EuiFlexGroup>
-                </SortableContext>
-                <DragOverlay>
-                  {draggingId ? <ControlClone draggingId={draggingId} /> : null}
-                </DragOverlay>
-              </DndContext>
-            </EuiFlexItem>
-            {showAppendedButtonGroup && (
-              <EuiFlexItem
-                grow={false}
-                className="controlGroup--endButtonGroup"
-                data-test-subj="controlGroup--endButtonGroup"
-              >
-                <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
-                  {showAddButton && (
-                    <EuiFlexItem grow={false}>
-                      <EuiToolTip content={ControlGroupStrings.management.getAddControlTitle()}>
-                        <EuiButtonIcon
-                          size="m"
-                          iconSize="m"
-                          display="base"
-                          iconType={'plusInCircle'}
-                          data-test-subj="controlGroup--addControlButton"
-                          aria-label={ControlGroupStrings.management.getAddControlTitle()}
-                          onClick={() => controlGroup.openAddDataControlFlyout()}
-                        />
-                      </EuiToolTip>
-                    </EuiFlexItem>
-                  )}
-                  {showApplySelections && (
-                    <EuiFlexItem grow={false}>
-                      {applyButtonEnabled ? (
-                        ApplyButtonComponent
-                      ) : (
-                        <EuiToolTip
-                          content={ControlGroupStrings.management.getApplyButtonTitle(false)}
-                        >
-                          {ApplyButtonComponent}
-                        </EuiToolTip>
-                      )}
-                    </EuiFlexItem>
-                  )}
-                </EuiFlexGroup>
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </EuiPanel>
-      ) : (
-        <></>
-      )}
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx b/src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx
deleted file mode 100644
index fa495350d4213..0000000000000
--- a/src/plugins/controls/public/control_group/component/control_group_sortable_item.tsx
+++ /dev/null
@@ -1,155 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import classNames from 'classnames';
-import { CSS } from '@dnd-kit/utilities';
-import { useSortable } from '@dnd-kit/sortable';
-import React, { forwardRef, HTMLAttributes } from 'react';
-import { EuiFlexItem, EuiFormLabel, EuiIcon, EuiFlexGroup } from '@elastic/eui';
-
-import { ControlGroupStrings } from '../control_group_strings';
-import { ControlFrame, ControlFrameProps } from './control_frame_component';
-import { controlGroupSelector } from '../embeddable/control_group_container';
-
-interface DragInfo {
-  isOver?: boolean;
-  isDragging?: boolean;
-  draggingIndex?: number;
-  index?: number;
-}
-
-export type SortableControlProps = ControlFrameProps & {
-  dragInfo: DragInfo;
-  isEditable: boolean;
-};
-
-/**
- * A sortable wrapper around the generic control frame.
- */
-export const SortableControl = (frameProps: SortableControlProps) => {
-  const { embeddableId, isEditable } = frameProps;
-  const { over, listeners, isSorting, transform, transition, attributes, isDragging, setNodeRef } =
-    useSortable({
-      id: embeddableId,
-      animateLayoutChanges: () => true,
-      disabled: !isEditable,
-    });
-
-  const sortableFrameProps = {
-    ...frameProps,
-    dragInfo: { ...frameProps.dragInfo, isOver: over?.id === embeddableId, isDragging },
-  };
-
-  return (
-    <SortableControlInner
-      key={embeddableId}
-      ref={setNodeRef}
-      {...sortableFrameProps}
-      {...attributes}
-      {...listeners}
-      style={{
-        transition: transition ?? undefined,
-        transform: isSorting ? undefined : CSS.Translate.toString(transform),
-      }}
-    />
-  );
-};
-
-const SortableControlInner = forwardRef<
-  HTMLButtonElement,
-  SortableControlProps & { style: HTMLAttributes<HTMLButtonElement>['style'] }
->(
-  (
-    { embeddableId, embeddableType, dragInfo, style, isEditable, ...dragHandleProps },
-    dragHandleRef
-  ) => {
-    const { isOver, isDragging, draggingIndex, index } = dragInfo;
-    const panels = controlGroupSelector((state) => state.explicitInput.panels);
-    const controlStyle = controlGroupSelector((state) => state.explicitInput.controlStyle);
-
-    const grow = panels[embeddableId].grow;
-    const width = panels[embeddableId].width;
-    const title = panels[embeddableId].explicitInput.title;
-
-    const dragHandle = isEditable ? (
-      <button
-        ref={dragHandleRef}
-        {...dragHandleProps}
-        aria-label={`${ControlGroupStrings.ariaActions.getMoveControlButtonAction(title)}`}
-        className="controlFrame__dragHandle"
-      >
-        <EuiIcon type="grabHorizontal" />
-      </button>
-    ) : controlStyle === 'oneLine' ? (
-      <EuiIcon type="empty" size="s" />
-    ) : undefined;
-
-    return (
-      <EuiFlexItem
-        grow={grow}
-        data-control-id={embeddableId}
-        data-test-subj={`control-frame`}
-        data-render-complete="true"
-        className={classNames('controlFrameWrapper', {
-          'controlFrameWrapper--grow': grow,
-          'controlFrameWrapper-isDragging': isDragging,
-          'controlFrameWrapper-isEditable': isEditable,
-          'controlFrameWrapper--small': width === 'small',
-          'controlFrameWrapper--medium': width === 'medium',
-          'controlFrameWrapper--large': width === 'large',
-          'controlFrameWrapper--insertBefore': isOver && (index ?? -1) < (draggingIndex ?? -1),
-          'controlFrameWrapper--insertAfter': isOver && (index ?? -1) > (draggingIndex ?? -1),
-        })}
-        style={style}
-      >
-        <ControlFrame
-          enableActions={draggingIndex === -1}
-          embeddableId={embeddableId}
-          embeddableType={embeddableType}
-          customPrepend={dragHandle}
-        />
-      </EuiFlexItem>
-    );
-  }
-);
-
-/**
- * A simplified clone version of the control which is dragged. This version only shows
- * the title, because individual controls can be any size, and dragging a wide item
- * can be quite cumbersome.
- */
-export const ControlClone = ({ draggingId }: { draggingId: string }) => {
-  const panels = controlGroupSelector((state) => state.explicitInput.panels);
-  const controlStyle = controlGroupSelector((state) => state.explicitInput.controlStyle);
-
-  const width = panels[draggingId].width;
-  const title = panels[draggingId].explicitInput.title;
-  return (
-    <EuiFlexItem
-      className={classNames('controlFrameCloneWrapper', {
-        'controlFrameCloneWrapper--small': width === 'small',
-        'controlFrameCloneWrapper--medium': width === 'medium',
-        'controlFrameCloneWrapper--large': width === 'large',
-        'controlFrameCloneWrapper--twoLine': controlStyle === 'twoLine',
-      })}
-    >
-      {controlStyle === 'twoLine' ? <EuiFormLabel>{title}</EuiFormLabel> : undefined}
-      <EuiFlexGroup responsive={false} gutterSize="none" className={'controlFrame__draggable'}>
-        <EuiFlexItem grow={false}>
-          <EuiIcon type="grabHorizontal" className="controlFrame__dragHandle" />
-        </EuiFlexItem>
-        {controlStyle === 'oneLine' ? (
-          <EuiFlexItem>
-            <label className="controlFrameCloneWrapper__label">{title}</label>
-          </EuiFlexItem>
-        ) : undefined}
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/control_group.scss b/src/plugins/controls/public/control_group/control_group.scss
deleted file mode 100644
index e797f3b421297..0000000000000
--- a/src/plugins/controls/public/control_group/control_group.scss
+++ /dev/null
@@ -1,215 +0,0 @@
-$smallControl: $euiSize * 14;
-$mediumControl: $euiSize * 25;
-$largeControl: $euiSize * 50;
-$controlMinWidth: $euiSize * 14;
-
-.controlsWrapper {
-  display: flex;
-  align-items: center;
-
-  .controlGroup--endButtonGroup {
-    align-self: end;
-  }
-}
-
-.controlsWrapper--twoLine {
-  .groupEditActions {
-    padding-top: $euiSize;
-  }
-}
-
-.controlFrameCloneWrapper {
-  width: max-content;
-
-  &--small {
-    width: $smallControl;
-    min-width:$smallControl;
-  }
-
-  &--medium {
-    width: $mediumControl;
-    min-width:$mediumControl;
-  }
-
-  &--large {
-    width: $largeControl;
-    min-width:$largeControl;
-  }
-
-  &--twoLine {
-    margin-top: -$euiSize * 1.25;
-  }
-
-  &__label {
-    cursor: grabbing !important; // prevents cursor flickering while dragging the clone
-  }
-
-  .controlFrame__draggable {
-    cursor: grabbing;
-    height: $euiButtonHeightSmall;
-    align-items: center;
-    border-radius: $euiBorderRadius;
-    font-weight: $euiFontWeightSemiBold;
-    @include euiFormControlDefaultShadow;
-    background-color: $euiFormInputGroupLabelBackground;
-    min-width: $controlMinWidth;
-    @include euiFontSizeXS;
-  }
-
-  .controlFrame__formControlLayout,
-  .controlFrame__draggable {
-    .controlFrame__dragHandle {
-      cursor: grabbing;
-    }
-  }
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    width: 100%;
-    &--small {
-      min-width:unset;
-    }
-
-    &--medium {
-      min-width:unset;
-    }
-
-    &--large {
-      min-width:unset;
-    }
-  }
-}
-
-.controlFrameWrapper {
-  flex-basis: auto;
-  position: relative;
-
-  &:not(.controlFrameWrapper-isEditable) {
-    .controlFrame--twoLine {
-      border-radius: $euiFormControlBorderRadius !important;
-    }
-  }
-
-  .controlFrame__formControlLayout {
-    width: 100%;
-    min-width: $controlMinWidth;
-    transition: background-color .1s, color .1s;
-
-    .controlFrame__formControlLayoutLabel {
-      @include euiTextTruncate;
-      padding: 0;
-    }
-
-    &:not(.controlFrame__formControlLayout-clone) {
-      .controlFrame__dragHandle {
-        cursor: grab;
-      }
-    }
-
-    // Make sure controls with popover, tooltip, and tour wrappers inherit height correctly
-    [data-euiportal='true'],
-    .euiPopover,
-    .euiToolTipAnchor {
-      height: 100%;
-    }
-
-    .euiFormControlLayout__prepend {
-      padding-left: 0;
-      gap: 0;
-    }
-
-    .controlFrame__control {
-      height: 100%;
-      transition: opacity .1s;
-    }
-
-    .controlFrame--controlLoading {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  &--small {
-    width: $smallControl;
-    min-width: $smallControl;
-  }
-
-  &--medium {
-    width: $mediumControl;
-    min-width: $mediumControl;
-  }
-
-  &--large {
-    width: $largeControl;
-    min-width: $largeControl;
-  }
-
-  @include euiBreakpoint('xs', 's', 'm') {
-    &--small {
-      min-width:unset;
-    }
-
-    &--medium {
-      min-width:unset;
-    }
-
-    &--large {
-      min-width:unset;
-    }
-  }
-
-  &--insertBefore,
-  &--insertAfter {
-    .controlFrame__formControlLayout:after {
-      content: '';
-      position: absolute;
-      background-color: transparentize($euiColorPrimary, .5);
-      border-radius: $euiBorderRadius;
-      top: 0;
-      bottom: 0;
-      width: $euiSizeXS * .5;
-    }
-  }
-
-  &--insertBefore {
-    .controlFrame__formControlLayout:after {
-      left: -$euiSizeXS - 1;
-    }
-  }
-
-  &--insertAfter {
-    .controlFrame__formControlLayout:after {
-      right: -$euiSizeXS - 1;
-    }
-  }
-
-  &-isDragging {
-    opacity: 0; // hide dragged control, while control is dragged its replaced with ControlClone component
-  }
-}
-
-.controlFrameFloatingActions {
-  z-index: 1;
-  position: absolute;
-
-  &--oneLine {
-    padding: $euiSizeXS;
-    border-radius: $euiBorderRadius;
-    background-color: $euiColorEmptyShade;
-    box-shadow: 0 0 0 1px $euiColorLightShade;
-  }
-
-  &--twoLine {
-    top: (-$euiSizeXS) !important;
-  }
-}
-
-.controlGroup--invalidSelectionsTour {
-  .controlGroup--suppressTourCheckbox {
-    height: 22px;
-    &Label {
-      font-weight: $euiFontWeightMedium;
-    }
-  }
-}
diff --git a/src/plugins/controls/public/control_group/control_group_strings.ts b/src/plugins/controls/public/control_group/control_group_strings.ts
deleted file mode 100644
index 6a7d811cb4e70..0000000000000
--- a/src/plugins/controls/public/control_group/control_group_strings.ts
+++ /dev/null
@@ -1,369 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import { RANGE_SLIDER_CONTROL } from '../range_slider';
-
-export const ControlGroupStrings = {
-  invalidControlWarning: {
-    getTourTitle: () =>
-      i18n.translate('controls.controlGroup.invalidControlWarning.tourStepTitle.default', {
-        defaultMessage: 'Invalid selections are no longer ignored',
-      }),
-    getTourContent: (controlType: string) => {
-      switch (controlType) {
-        case RANGE_SLIDER_CONTROL: {
-          return i18n.translate(
-            'controls.controlGroup.invalidControlWarning.tourStepContent.rangeSlider',
-            {
-              defaultMessage: 'The selected range is returning no results. Try changing the range.',
-            }
-          );
-        }
-        default: {
-          return i18n.translate(
-            'controls.controlGroup.invalidControlWarning.tourStepContent.default',
-            {
-              defaultMessage:
-                'Some selections are returning no results. Try changing the selections.',
-            }
-          );
-        }
-      }
-    },
-
-    getDismissButton: () =>
-      i18n.translate('controls.controlGroup.invalidControlWarning.dismissButtonLabel', {
-        defaultMessage: 'Dismiss',
-      }),
-    getSuppressTourLabel: () =>
-      i18n.translate('controls.controlGroup.invalidControlWarning.suppressTourLabel', {
-        defaultMessage: "Don't show again",
-      }),
-  },
-  manageControl: {
-    getFlyoutCreateTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.createFlyoutTitle', {
-        defaultMessage: 'Create control',
-      }),
-    getFlyoutEditTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.editFlyoutTitle', {
-        defaultMessage: 'Edit control',
-      }),
-    dataSource: {
-      getFormGroupTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.formGroupTitle', {
-          defaultMessage: 'Data source',
-        }),
-      getFormGroupDescription: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.formGroupDescription', {
-          defaultMessage: 'Select the data view and field that you want to create a control for.',
-        }),
-      getSelectDataViewMessage: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.selectDataViewMessage', {
-          defaultMessage: 'Please select a data view',
-        }),
-      getDataViewTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.dataViewTitle', {
-          defaultMessage: 'Data view',
-        }),
-      getFieldTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.fieldTitle', {
-          defaultMessage: 'Field',
-        }),
-      getControlTypeTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.dataSource.controlTypesTitle', {
-          defaultMessage: 'Control type',
-        }),
-      getControlTypeErrorMessage: ({
-        fieldSelected,
-        controlType,
-      }: {
-        fieldSelected?: boolean;
-        controlType?: string;
-      }) => {
-        if (!fieldSelected) {
-          return i18n.translate(
-            'controls.controlGroup.manageControl.dataSource.controlTypErrorMessage.noField',
-            {
-              defaultMessage: 'Select a field first.',
-            }
-          );
-        }
-
-        switch (controlType) {
-          /**
-           * Note that options list controls are currently compatible with every field type; so, there is no
-           * need to have a special error message for these.
-           */
-          case RANGE_SLIDER_CONTROL: {
-            return i18n.translate(
-              'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.rangeSlider',
-              {
-                defaultMessage: 'Range sliders are only compatible with number fields.',
-              }
-            );
-          }
-          default: {
-            /** This shouldn't ever happen - but, adding just in case as a fallback. */
-            return i18n.translate(
-              'controls.controlGroup.manageControl.dataSource.controlTypeErrorMessage.default',
-              {
-                defaultMessage: 'Select a compatible control type.',
-              }
-            );
-          }
-        }
-      },
-    },
-    displaySettings: {
-      getFormGroupTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.displaySettings.formGroupTitle', {
-          defaultMessage: 'Display settings',
-        }),
-      getFormGroupDescription: () =>
-        i18n.translate('controls.controlGroup.manageControl.displaySettings.formGroupDescription', {
-          defaultMessage: 'Change how the control appears on your dashboard.',
-        }),
-      getTitleInputTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.displaySettings.titleInputTitle', {
-          defaultMessage: 'Label',
-        }),
-      getWidthInputTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.displaySettings.widthInputTitle', {
-          defaultMessage: 'Minimum width',
-        }),
-      getGrowSwitchTitle: () =>
-        i18n.translate('controls.controlGroup.manageControl.displaySettings.growSwitchTitle', {
-          defaultMessage: 'Expand width to fit available space',
-        }),
-    },
-    controlTypeSettings: {
-      getFormGroupTitle: (type: string) =>
-        i18n.translate('controls.controlGroup.manageControl.controlTypeSettings.formGroupTitle', {
-          defaultMessage: '{controlType} settings',
-          values: { controlType: type },
-        }),
-      getFormGroupDescription: (type: string) =>
-        i18n.translate(
-          'controls.controlGroup.manageControl.controlTypeSettings.formGroupDescription',
-          {
-            defaultMessage: 'Custom settings for your {controlType} control.',
-            values: { controlType: type.toLocaleLowerCase() },
-          }
-        ),
-    },
-    getSaveChangesTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.saveChangesTitle', {
-        defaultMessage: 'Save and close',
-      }),
-    getCancelTitle: () =>
-      i18n.translate('controls.controlGroup.manageControl.cancelTitle', {
-        defaultMessage: 'Cancel',
-      }),
-  },
-  management: {
-    getAddControlTitle: () =>
-      i18n.translate('controls.controlGroup.management.addControl', {
-        defaultMessage: 'Add control',
-      }),
-    getApplyButtonTitle: (applyResetButtonsEnabled: boolean) =>
-      applyResetButtonsEnabled
-        ? i18n.translate('controls.controlGroup.management.applyButtonTooltip.enabled', {
-            defaultMessage: 'Apply selections',
-          })
-        : i18n.translate('controls.controlGroup.management.applyButtonTooltip.disabled', {
-            defaultMessage: 'No new selections to apply',
-          }),
-    getFlyoutTitle: () =>
-      i18n.translate('controls.controlGroup.management.flyoutTitle', {
-        defaultMessage: 'Control settings',
-      }),
-    getDeleteButtonTitle: () =>
-      i18n.translate('controls.controlGroup.management.delete', {
-        defaultMessage: 'Delete control',
-      }),
-    getDeleteAllButtonTitle: () =>
-      i18n.translate('controls.controlGroup.management.deleteAll', {
-        defaultMessage: 'Delete all',
-      }),
-    controlWidth: {
-      getWidthSwitchLegend: () =>
-        i18n.translate('controls.controlGroup.management.layout.controlWidthLegend', {
-          defaultMessage: 'Change control size',
-        }),
-      getAutoWidthTitle: () =>
-        i18n.translate('controls.controlGroup.management.layout.auto', {
-          defaultMessage: 'Auto',
-        }),
-      getSmallWidthTitle: () =>
-        i18n.translate('controls.controlGroup.management.layout.small', {
-          defaultMessage: 'Small',
-        }),
-      getMediumWidthTitle: () =>
-        i18n.translate('controls.controlGroup.management.layout.medium', {
-          defaultMessage: 'Medium',
-        }),
-      getLargeWidthTitle: () =>
-        i18n.translate('controls.controlGroup.management.layout.large', {
-          defaultMessage: 'Large',
-        }),
-    },
-    labelPosition: {
-      getLabelPositionTitle: () =>
-        i18n.translate('controls.controlGroup.management.labelPosition.title', {
-          defaultMessage: 'Label position',
-        }),
-      getLabelPositionLegend: () =>
-        i18n.translate('controls.controlGroup.management.labelPosition.designSwitchLegend', {
-          defaultMessage: 'Switch label position between inline and above',
-        }),
-      getInlineTitle: () =>
-        i18n.translate('controls.controlGroup.management.labelPosition.inline', {
-          defaultMessage: 'Inline',
-        }),
-      getAboveTitle: () =>
-        i18n.translate('controls.controlGroup.management.labelPosition.above', {
-          defaultMessage: 'Above',
-        }),
-    },
-    deleteControls: {
-      getDeleteAllTitle: () =>
-        i18n.translate('controls.controlGroup.management.delete.deleteAllTitle', {
-          defaultMessage: 'Delete all controls?',
-        }),
-      getDeleteTitle: () =>
-        i18n.translate('controls.controlGroup.management.delete.deleteTitle', {
-          defaultMessage: 'Delete control?',
-        }),
-      getSubtitle: () =>
-        i18n.translate('controls.controlGroup.management.delete.sub', {
-          defaultMessage: 'Controls are not recoverable once removed.',
-        }),
-      getConfirm: () =>
-        i18n.translate('controls.controlGroup.management.delete.confirm', {
-          defaultMessage: 'Delete',
-        }),
-      getCancel: () =>
-        i18n.translate('controls.controlGroup.management.delete.cancel', {
-          defaultMessage: 'Cancel',
-        }),
-    },
-    discardChanges: {
-      getTitle: () =>
-        i18n.translate('controls.controlGroup.management.discard.title', {
-          defaultMessage: 'Discard changes?',
-        }),
-      getSubtitle: () =>
-        i18n.translate('controls.controlGroup.management.discard.sub', {
-          defaultMessage: `Changes that you've made to this control will be discarded, are you sure you want to continue?`,
-        }),
-      getConfirm: () =>
-        i18n.translate('controls.controlGroup.management.discard.confirm', {
-          defaultMessage: 'Discard changes',
-        }),
-      getCancel: () =>
-        i18n.translate('controls.controlGroup.management.discard.cancel', {
-          defaultMessage: 'Cancel',
-        }),
-    },
-    discardNewControl: {
-      getTitle: () =>
-        i18n.translate('controls.controlGroup.management.deleteNew.title', {
-          defaultMessage: 'Discard new control',
-        }),
-      getSubtitle: () =>
-        i18n.translate('controls.controlGroup.management.deleteNew.sub', {
-          defaultMessage: `Changes that you've made to this control will be discarded, are you sure you want to continue?`,
-        }),
-      getConfirm: () =>
-        i18n.translate('controls.controlGroup.management.deleteNew.confirm', {
-          defaultMessage: 'Discard control',
-        }),
-      getCancel: () =>
-        i18n.translate('controls.controlGroup.management.deleteNew.cancel', {
-          defaultMessage: 'Cancel',
-        }),
-    },
-    selectionSettings: {
-      getSelectionSettingsTitle: () =>
-        i18n.translate('controls.controlGroup.management.selectionSettings', {
-          defaultMessage: 'Selections',
-        }),
-      validateSelections: {
-        getValidateSelectionsTitle: () =>
-          i18n.translate('controls.controlGroup.management.validate.title', {
-            defaultMessage: 'Validate user selections',
-          }),
-        getValidateSelectionsTooltip: () =>
-          i18n.translate('controls.controlGroup.management.validate.tooltip', {
-            defaultMessage: 'Highlight control selections that result in no data.',
-          }),
-      },
-      controlChaining: {
-        getHierarchyTitle: () =>
-          i18n.translate('controls.controlGroup.management.hierarchy.title', {
-            defaultMessage: 'Chain controls',
-          }),
-        getHierarchyTooltip: () =>
-          i18n.translate('controls.controlGroup.management.hierarchy.tooltip', {
-            defaultMessage:
-              'Selections in one control narrow down available options in the next. Controls are chained from left to right.',
-          }),
-      },
-      showApplySelections: {
-        getShowApplySelectionsTitle: () =>
-          i18n.translate('controls.controlGroup.management.showApplySelections.title', {
-            defaultMessage: 'Apply selections automatically',
-          }),
-        getShowApplySelectionsTooltip: () =>
-          i18n.translate('controls.controlGroup.management.showApplySelections.tooltip', {
-            defaultMessage:
-              'If disabled, control selections will only be applied after clicking apply.',
-          }),
-      },
-    },
-    filteringSettings: {
-      getFilteringSettingsTitle: () =>
-        i18n.translate('controls.controlGroup.management.filteringSettings', {
-          defaultMessage: 'Filtering',
-        }),
-      getUseGlobalFiltersTitle: () =>
-        i18n.translate('controls.controlGroup.management.filtering.useGlobalFilters', {
-          defaultMessage: 'Apply global filters to controls',
-        }),
-      getUseGlobalTimeRangeTitle: () =>
-        i18n.translate('controls.controlGroup.management.filtering.useGlobalTimeRange', {
-          defaultMessage: 'Apply global time range to controls',
-        }),
-    },
-  },
-  floatingActions: {
-    getEditButtonTitle: () =>
-      i18n.translate('controls.controlGroup.floatingActions.editTitle', {
-        defaultMessage: 'Edit',
-      }),
-    getRemoveButtonTitle: () =>
-      i18n.translate('controls.controlGroup.floatingActions.removeTitle', {
-        defaultMessage: 'Delete',
-      }),
-
-    getClearButtonTitle: () =>
-      i18n.translate('controls.controlGroup.floatingActions.clearTitle', {
-        defaultMessage: 'Clear',
-      }),
-  },
-  ariaActions: {
-    getMoveControlButtonAction: (controlTitle?: string) =>
-      i18n.translate('controls.controlGroup.ariaActions.moveControlButtonAction', {
-        defaultMessage: 'Move control {controlTitle}',
-        values: { controlTitle: controlTitle ?? '' },
-      }),
-  },
-};
diff --git a/src/plugins/controls/public/control_group/editor/control_editor.test.tsx b/src/plugins/controls/public/control_group/editor/control_editor.test.tsx
deleted file mode 100644
index 2a44b9b0581b0..0000000000000
--- a/src/plugins/controls/public/control_group/editor/control_editor.test.tsx
+++ /dev/null
@@ -1,370 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ReactWrapper } from 'enzyme';
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-
-import { createStubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
-import { findTestSubject, mountWithIntl } from '@kbn/test-jest-helpers';
-
-import { stubFieldSpecMap } from '@kbn/data-views-plugin/common/field.stub';
-import {
-  OptionsListEmbeddableInput,
-  OPTIONS_LIST_CONTROL,
-  RANGE_SLIDER_CONTROL,
-} from '../../../common';
-import {
-  DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_WIDTH,
-} from '../../../common/control_group/control_group_constants';
-import {
-  mockControlGroupContainer,
-  mockOptionsListEmbeddable,
-  mockRangeSliderEmbeddable,
-} from '../../../common/mocks';
-import { RangeSliderEmbeddableFactory } from '../../range_slider';
-import { pluginServices } from '../../services';
-import { ControlGroupContainerContext } from '../embeddable/control_group_container';
-import { ControlGroupInput } from '../types';
-import { ControlEditor, EditControlProps } from './control_editor';
-import { OptionsListEmbeddableFactory } from '../../options_list';
-
-describe('Data control editor', () => {
-  interface MountOptions {
-    componentOptions?: Partial<EditControlProps>;
-    explicitInput?: Partial<ControlGroupInput>;
-  }
-
-  const stubDataView = createStubDataView({
-    spec: {
-      id: 'logstash-*',
-      fields: {
-        ...stubFieldSpecMap,
-        'machine.os.raw': {
-          name: 'machine.os.raw',
-          customLabel: 'OS',
-          type: 'string',
-          esTypes: ['keyword'],
-          aggregatable: true,
-          searchable: true,
-        },
-      },
-      title: 'logstash-*',
-      timeFieldName: '@timestamp',
-    },
-  });
-
-  pluginServices.getServices().dataViews.get = jest.fn().mockResolvedValue(stubDataView);
-  pluginServices.getServices().dataViews.getIdsWithTitle = jest
-    .fn()
-    .mockResolvedValue([{ id: stubDataView.id, title: stubDataView.getIndexPattern() }]);
-  pluginServices.getServices().controls.getControlTypes = jest
-    .fn()
-    .mockReturnValue([OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL]);
-  pluginServices.getServices().controls.getControlFactory = jest
-    .fn()
-    .mockImplementation((type: string) => {
-      if (type === OPTIONS_LIST_CONTROL) return new OptionsListEmbeddableFactory();
-      if (type === RANGE_SLIDER_CONTROL) return new RangeSliderEmbeddableFactory();
-    });
-
-  let controlEditor: ReactWrapper = new ReactWrapper(<></>);
-
-  async function mountComponent(options?: MountOptions) {
-    const controlGroupContainer = await mockControlGroupContainer(options?.explicitInput);
-
-    await act(async () => {
-      controlEditor = mountWithIntl(
-        <ControlGroupContainerContext.Provider value={controlGroupContainer}>
-          <ControlEditor
-            setLastUsedDataViewId={jest.fn()}
-            getRelevantDataViewId={() => stubDataView.id}
-            isCreate={true}
-            width={DEFAULT_CONTROL_WIDTH}
-            grow={DEFAULT_CONTROL_GROW}
-            onSave={jest.fn()}
-            onCancel={jest.fn()}
-            {...options?.componentOptions}
-          />
-        </ControlGroupContainerContext.Provider>
-      );
-    });
-    await new Promise(process.nextTick);
-    controlEditor.update();
-  }
-
-  const selectField = async (fieldName: string) => {
-    const option = findTestSubject(controlEditor, `field-picker-select-${fieldName}`);
-    await act(async () => {
-      option.simulate('click');
-    });
-    controlEditor.update();
-  };
-
-  describe('creating a new control', () => {
-    test('does not show non-aggregatable field', async () => {
-      await mountComponent();
-      const nonAggOption = findTestSubject(controlEditor, 'field-picker-select-machine.os');
-      expect(nonAggOption.exists()).toBe(false);
-    });
-
-    describe('selecting a keyword field', () => {
-      beforeEach(async () => {
-        await mountComponent();
-        await selectField('machine.os.raw');
-      });
-
-      test('can only create an options list control', async () => {
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').instance()
-        ).toBeEnabled();
-        expect(
-          findTestSubject(controlEditor, 'create__rangeSliderControl').instance()
-        ).not.toBeEnabled();
-      });
-
-      test('has custom settings', async () => {
-        const searchOptions = findTestSubject(controlEditor, 'control-editor-custom-settings');
-        expect(searchOptions.exists()).toBe(true);
-      });
-
-      test('has custom search options', async () => {
-        const searchOptions = findTestSubject(
-          controlEditor,
-          'optionsListControl__searchOptionsRadioGroup'
-        );
-        expect(searchOptions.exists()).toBe(true);
-        const options = searchOptions.find('div.euiRadioGroup__item');
-        expect(options.length).toBe(3);
-      });
-    });
-
-    describe('selecting an IP field', () => {
-      beforeEach(async () => {
-        await mountComponent();
-        await selectField('clientip');
-      });
-
-      test('can only create an options list control', async () => {
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').instance()
-        ).toBeEnabled();
-        expect(
-          findTestSubject(controlEditor, 'create__rangeSliderControl').instance()
-        ).not.toBeEnabled();
-      });
-
-      test('has custom search options', async () => {
-        const searchOptions = findTestSubject(
-          controlEditor,
-          'optionsListControl__searchOptionsRadioGroup'
-        );
-        expect(searchOptions.exists()).toBe(true);
-        const options = searchOptions.find('div.euiRadioGroup__item');
-        expect(options.length).toBe(2);
-      });
-    });
-
-    describe('selecting a number field', () => {
-      beforeEach(async () => {
-        await mountComponent();
-        await selectField('bytes');
-      });
-
-      test('can create an options list or range slider control', async () => {
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').instance()
-        ).toBeEnabled();
-        expect(
-          findTestSubject(controlEditor, 'create__rangeSliderControl').instance()
-        ).toBeEnabled();
-      });
-
-      test('defaults to options list creation', async () => {
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').prop('aria-pressed')
-        ).toBe(true);
-      });
-
-      test('when creating options list, has custom settings', async () => {
-        findTestSubject(controlEditor, 'create__optionsListControl').simulate('click');
-        const customSettings = findTestSubject(controlEditor, 'control-editor-custom-settings');
-        expect(customSettings.exists()).toBe(true);
-      });
-
-      test('when creating options list, does not have custom search options', async () => {
-        findTestSubject(controlEditor, 'create__optionsListControl').simulate('click');
-        const searchOptions = findTestSubject(
-          controlEditor,
-          'optionsListControl__searchOptionsRadioGroup'
-        );
-        expect(searchOptions.exists()).toBe(false);
-      });
-
-      test('when creating range slider, does have custom settings', async () => {
-        findTestSubject(controlEditor, 'create__rangeSliderControl').simulate('click');
-        const searchOptions = findTestSubject(controlEditor, 'control-editor-custom-settings');
-        expect(searchOptions.exists()).toBe(true);
-      });
-
-      test('when creating range slider, validates step setting is greater than 0', async () => {
-        findTestSubject(controlEditor, 'create__rangeSliderControl').simulate('click');
-        const stepOption = findTestSubject(
-          controlEditor,
-          'rangeSliderControl__stepAdditionalSetting'
-        );
-        expect(stepOption.exists()).toBe(true);
-
-        const saveButton = findTestSubject(controlEditor, 'control-editor-save');
-        expect(saveButton.instance()).toBeEnabled();
-
-        stepOption.simulate('change', { target: { valueAsNumber: undefined } });
-        expect(saveButton.instance()).toBeDisabled();
-
-        stepOption.simulate('change', { target: { valueAsNumber: 0.5 } });
-        expect(saveButton.instance()).toBeEnabled();
-
-        stepOption.simulate('change', { target: { valueAsNumber: 0 } });
-        expect(saveButton.instance()).toBeDisabled();
-
-        stepOption.simulate('change', { target: { valueAsNumber: 1 } });
-        expect(saveButton.instance()).toBeEnabled();
-      });
-    });
-
-    test('selects given width and grow', async () => {
-      await mountComponent({ componentOptions: { grow: false, width: 'small' } });
-      const selectedClass = 'euiButtonGroupButton-isSelected';
-      expect(
-        findTestSubject(controlEditor, 'control-editor-width-medium').hasClass(selectedClass)
-      ).toBe(false);
-      expect(
-        findTestSubject(controlEditor, 'control-editor-width-small').hasClass(selectedClass)
-      ).toBe(true);
-      expect(
-        findTestSubject(controlEditor, 'control-editor-width-large').hasClass(selectedClass)
-      ).toBe(false);
-      expect(
-        findTestSubject(controlEditor, 'control-editor-grow-switch').prop('aria-checked')
-      ).toBe(false);
-    });
-  });
-
-  describe('editing existing options list control', () => {
-    const openEditor = async (
-      type: string,
-      explicitInput?: Partial<OptionsListEmbeddableInput>
-    ) => {
-      const control =
-        type === 'optionsList'
-          ? await mockOptionsListEmbeddable({
-              explicitInput: {
-                title: 'machine.os.raw',
-                dataViewId: stubDataView.id,
-                fieldName: 'machine.os.raw',
-                ...explicitInput,
-              },
-            })
-          : await mockRangeSliderEmbeddable({
-              explicitInput: {
-                title: 'bytes',
-                dataViewId: stubDataView.id,
-                fieldName: 'bytes',
-                ...explicitInput,
-              },
-            });
-      await mountComponent({
-        componentOptions: { isCreate: false, embeddable: control },
-      });
-    };
-
-    describe('control title', () => {
-      test('auto-fills default', async () => {
-        await openEditor('optionsList');
-        const titleInput = findTestSubject(controlEditor, 'control-editor-title-input');
-        expect(titleInput.prop('value')).toBe('machine.os.raw');
-        expect(titleInput.prop('placeholder')).toBe('machine.os.raw');
-      });
-
-      test('auto-fills custom title', async () => {
-        await openEditor('optionsList', { title: 'Custom Title' });
-        const titleInput = findTestSubject(controlEditor, 'control-editor-title-input');
-        expect(titleInput.prop('value')).toBe('Custom Title');
-        expect(titleInput.prop('placeholder')).toBe('machine.os.raw');
-      });
-    });
-
-    describe('control type', () => {
-      test('selects the default control type', async () => {
-        await openEditor('optionsList', { fieldName: 'bytes' });
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').prop('aria-pressed')
-        ).toBe(true);
-        expect(
-          findTestSubject(controlEditor, 'create__rangeSliderControl').prop('aria-pressed')
-        ).toBe(false);
-      });
-
-      test('selects the given, non-default control type', async () => {
-        await openEditor('rangeSlider', { fieldName: 'bytes' });
-        expect(
-          findTestSubject(controlEditor, 'create__optionsListControl').prop('aria-pressed')
-        ).toBe(false);
-        expect(
-          findTestSubject(controlEditor, 'create__rangeSliderControl').prop('aria-pressed')
-        ).toBe(true);
-      });
-    });
-
-    describe('selection options', () => {
-      test('selects default', async () => {
-        await openEditor('optionsList');
-        const radioGroup = findTestSubject(
-          controlEditor,
-          'optionsListControl__selectionOptionsRadioGroup'
-        );
-        expect(radioGroup.find('input#multi').prop('checked')).toBe(true);
-        expect(radioGroup.find('input#single').prop('checked')).toBe(false);
-      });
-
-      test('selects given', async () => {
-        await openEditor('optionsList', { singleSelect: true });
-        const radioGroup = findTestSubject(
-          controlEditor,
-          'optionsListControl__selectionOptionsRadioGroup'
-        );
-        expect(radioGroup.find('input#multi').prop('checked')).toBe(false);
-        expect(radioGroup.find('input#single').prop('checked')).toBe(true);
-      });
-    });
-
-    describe('search techniques', () => {
-      test('selects default', async () => {
-        await openEditor('optionsList');
-        const radioGroup = findTestSubject(
-          controlEditor,
-          'optionsListControl__searchOptionsRadioGroup'
-        );
-        expect(radioGroup.find('input#prefix').prop('checked')).toBe(true);
-        expect(radioGroup.find('input#wildcard').prop('checked')).toBe(false);
-      });
-
-      test('selects given', async () => {
-        await openEditor('optionsList', { searchTechnique: 'wildcard' });
-        const radioGroup = findTestSubject(
-          controlEditor,
-          'optionsListControl__searchOptionsRadioGroup'
-        );
-        expect(radioGroup.find('input#prefix').prop('checked')).toBe(false);
-        expect(radioGroup.find('input#wildcard').prop('checked')).toBe(true);
-      });
-    });
-  });
-});
diff --git a/src/plugins/controls/public/control_group/editor/control_editor.tsx b/src/plugins/controls/public/control_group/editor/control_editor.tsx
deleted file mode 100644
index acb5246d1ad1d..0000000000000
--- a/src/plugins/controls/public/control_group/editor/control_editor.tsx
+++ /dev/null
@@ -1,412 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
-import useMount from 'react-use/lib/useMount';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonGroup,
-  EuiDescribedFormGroup,
-  EuiFieldText,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiForm,
-  EuiFormRow,
-  EuiIcon,
-  EuiKeyPadMenu,
-  EuiKeyPadMenuItem,
-  EuiSpacer,
-  EuiSwitch,
-  EuiTitle,
-  EuiToolTip,
-} from '@elastic/eui';
-import { DataViewField } from '@kbn/data-views-plugin/common';
-import {
-  LazyDataViewPicker,
-  LazyFieldPicker,
-  withSuspense,
-} from '@kbn/presentation-util-plugin/public';
-
-import { TIME_SLIDER_CONTROL } from '../../../common';
-import { pluginServices } from '../../services';
-import {
-  ControlEmbeddable,
-  ControlInput,
-  ControlWidth,
-  DataControlEditorChanges,
-  DataControlInput,
-  IEditableControlFactory,
-} from '../../types';
-import { ControlGroupStrings } from '../control_group_strings';
-import { useControlGroupContainer } from '../embeddable/control_group_container';
-import { getDataControlFieldRegistry } from './data_control_editor_tools';
-import { CONTROL_WIDTH_OPTIONS } from './editor_constants';
-
-export interface EditControlProps {
-  embeddable?: ControlEmbeddable<DataControlInput>;
-  isCreate: boolean;
-  width: ControlWidth;
-  onSave: (changes: DataControlEditorChanges, type?: string) => void;
-  grow: boolean;
-  onCancel: (changes: DataControlEditorChanges) => void;
-  removeControl?: () => void;
-  getRelevantDataViewId?: () => string | undefined;
-  setLastUsedDataViewId?: (newDataViewId: string) => void;
-}
-
-const FieldPicker = withSuspense(LazyFieldPicker, null);
-const DataViewPicker = withSuspense(LazyDataViewPicker, null);
-
-export const ControlEditor = ({
-  embeddable,
-  isCreate,
-  width,
-  grow,
-  onSave,
-  onCancel,
-  removeControl,
-  getRelevantDataViewId,
-  setLastUsedDataViewId,
-}: EditControlProps) => {
-  const {
-    dataViews: { getIdsWithTitle, getDefaultId, get },
-    controls: { getControlFactory, getControlTypes },
-  } = pluginServices.getServices();
-
-  const controlGroup = useControlGroupContainer();
-  const editorConfig = controlGroup.select((state) => state.componentState.editorConfig);
-
-  const [currentGrow, setCurrentGrow] = useState(grow);
-  const [currentWidth, setCurrentWidth] = useState(width);
-  const [defaultTitle, setDefaultTitle] = useState<string>();
-  const [currentTitle, setCurrentTitle] = useState(embeddable?.getTitle() ?? '');
-  const [controlEditorValid, setControlEditorValid] = useState(false);
-  const [selectedDataViewId, setSelectedDataViewId] = useState<string>();
-  const [selectedField, setSelectedField] = useState<string | undefined>(
-    embeddable ? embeddable.getInput().fieldName : undefined
-  );
-  const [selectedControlType, setSelectedControlType] = useState<string | undefined>(
-    embeddable ? embeddable.type : undefined
-  );
-  const [customSettings, setCustomSettings] = useState<Partial<ControlInput>>();
-
-  const currentInput: Partial<DataControlInput> = useMemo(
-    () => ({
-      fieldName: selectedField,
-      dataViewId: selectedDataViewId,
-      title: currentTitle === '' ? defaultTitle ?? selectedField : currentTitle,
-      ...customSettings,
-    }),
-    [currentTitle, defaultTitle, selectedField, selectedDataViewId, customSettings]
-  );
-  const startingInput = useRef(currentInput);
-
-  useMount(() => {
-    let mounted = true;
-    if (selectedField) setDefaultTitle(selectedField);
-
-    (async () => {
-      if (!mounted) return;
-
-      const initialId =
-        embeddable?.getInput().dataViewId ??
-        controlGroup.getOutput().dataViewIds?.[0] ??
-        getRelevantDataViewId?.() ??
-        (await getDefaultId());
-      if (initialId) {
-        setSelectedDataViewId(initialId);
-        startingInput.current = { ...startingInput.current, dataViewId: initialId };
-      }
-    })();
-    return () => {
-      mounted = false;
-    };
-  });
-
-  const { loading: dataViewListLoading, value: dataViewListItems = [] } = useAsync(() => {
-    return getIdsWithTitle();
-  });
-
-  const {
-    loading: dataViewLoading,
-    value: { selectedDataView, fieldRegistry } = {
-      selectedDataView: undefined,
-      fieldRegistry: undefined,
-    },
-  } = useAsync(async () => {
-    if (!selectedDataViewId) {
-      return;
-    }
-    const dataView = await get(selectedDataViewId);
-    const registry = await getDataControlFieldRegistry(dataView);
-    return {
-      selectedDataView: dataView,
-      fieldRegistry: registry,
-    };
-  }, [selectedDataViewId]);
-
-  useEffect(
-    () =>
-      setControlEditorValid(
-        Boolean(selectedField) && Boolean(selectedDataView) && Boolean(selectedControlType)
-      ),
-    [selectedField, setControlEditorValid, selectedDataView, selectedControlType]
-  );
-
-  const CompatibleControlTypesComponent = useMemo(() => {
-    const allDataControlTypes = getControlTypes().filter((type) => type !== TIME_SLIDER_CONTROL);
-    return (
-      <EuiKeyPadMenu
-        data-test-subj={`controlTypeMenu`}
-        aria-label={ControlGroupStrings.manageControl.dataSource.getControlTypeTitle()}
-      >
-        {allDataControlTypes.map((controlType) => {
-          const factory = getControlFactory(controlType);
-
-          const disabled =
-            fieldRegistry && selectedField
-              ? !fieldRegistry[selectedField]?.compatibleControlTypes.includes(controlType)
-              : true;
-          const keyPadMenuItem = (
-            <EuiKeyPadMenuItem
-              key={controlType}
-              id={`create__${controlType}`}
-              aria-label={factory.getDisplayName()}
-              data-test-subj={`create__${controlType}`}
-              isSelected={controlType === selectedControlType}
-              disabled={disabled}
-              onClick={() => setSelectedControlType(controlType)}
-              label={factory.getDisplayName()}
-            >
-              <EuiIcon type={factory.getIconType()} size="l" />
-            </EuiKeyPadMenuItem>
-          );
-
-          return disabled ? (
-            <EuiToolTip
-              key={`disabled__${controlType}`}
-              content={ControlGroupStrings.manageControl.dataSource.getControlTypeErrorMessage({
-                fieldSelected: Boolean(selectedField),
-                controlType,
-              })}
-            >
-              {keyPadMenuItem}
-            </EuiToolTip>
-          ) : (
-            keyPadMenuItem
-          );
-        })}
-      </EuiKeyPadMenu>
-    );
-  }, [selectedField, fieldRegistry, getControlFactory, getControlTypes, selectedControlType]);
-
-  const CustomSettingsComponent = useMemo(() => {
-    if (!selectedControlType || !selectedField || !fieldRegistry) return;
-
-    const controlFactory = getControlFactory(selectedControlType);
-    const CustomSettings = (controlFactory as IEditableControlFactory)
-      .controlEditorOptionsComponent;
-
-    if (!CustomSettings) return;
-
-    return (
-      <EuiDescribedFormGroup
-        ratio="third"
-        title={
-          <h2>
-            {ControlGroupStrings.manageControl.controlTypeSettings.getFormGroupTitle(
-              controlFactory.getDisplayName()
-            )}
-          </h2>
-        }
-        description={ControlGroupStrings.manageControl.controlTypeSettings.getFormGroupDescription(
-          controlFactory.getDisplayName()
-        )}
-        data-test-subj="control-editor-custom-settings"
-      >
-        <CustomSettings
-          onChange={(settings) => setCustomSettings(settings)}
-          initialInput={embeddable?.getInput()}
-          fieldType={fieldRegistry[selectedField].field.type}
-          setControlEditorValid={setControlEditorValid}
-        />
-      </EuiDescribedFormGroup>
-    );
-  }, [selectedControlType, selectedField, getControlFactory, fieldRegistry, embeddable]);
-
-  return (
-    <>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>
-            {isCreate
-              ? ControlGroupStrings.manageControl.getFlyoutCreateTitle()
-              : ControlGroupStrings.manageControl.getFlyoutEditTitle()}
-          </h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody data-test-subj="control-editor-flyout">
-        <EuiForm fullWidth>
-          <EuiDescribedFormGroup
-            ratio="third"
-            title={<h2>{ControlGroupStrings.manageControl.dataSource.getFormGroupTitle()}</h2>}
-            description={ControlGroupStrings.manageControl.dataSource.getFormGroupDescription()}
-          >
-            {!editorConfig?.hideDataViewSelector && (
-              <EuiFormRow label={ControlGroupStrings.manageControl.dataSource.getDataViewTitle()}>
-                <DataViewPicker
-                  dataViews={dataViewListItems}
-                  selectedDataViewId={selectedDataViewId}
-                  onChangeDataViewId={(newDataViewId) => {
-                    setLastUsedDataViewId?.(newDataViewId);
-                    if (newDataViewId === selectedDataViewId) return;
-                    setSelectedField(undefined);
-                    setSelectedDataViewId(newDataViewId);
-                  }}
-                  trigger={{
-                    label:
-                      selectedDataView?.getName() ??
-                      ControlGroupStrings.manageControl.dataSource.getSelectDataViewMessage(),
-                  }}
-                  selectableProps={{ isLoading: dataViewListLoading }}
-                />
-              </EuiFormRow>
-            )}
-            <EuiFormRow label={ControlGroupStrings.manageControl.dataSource.getFieldTitle()}>
-              <FieldPicker
-                filterPredicate={(field: DataViewField) => {
-                  const customPredicate = controlGroup.fieldFilterPredicate?.(field) ?? true;
-                  return Boolean(fieldRegistry?.[field.name]) && customPredicate;
-                }}
-                selectedFieldName={selectedField}
-                dataView={selectedDataView}
-                onSelectField={(field) => {
-                  const newDefaultTitle = field.displayName ?? field.name;
-                  setDefaultTitle(newDefaultTitle);
-                  setSelectedField(field.name);
-                  setSelectedControlType(fieldRegistry?.[field.name]?.compatibleControlTypes[0]);
-                  if (!currentTitle || currentTitle === defaultTitle) {
-                    setCurrentTitle(newDefaultTitle);
-                  }
-                }}
-                selectableProps={{ isLoading: dataViewListLoading || dataViewLoading }}
-              />
-            </EuiFormRow>
-            <EuiFormRow label={ControlGroupStrings.manageControl.dataSource.getControlTypeTitle()}>
-              {CompatibleControlTypesComponent}
-            </EuiFormRow>
-          </EuiDescribedFormGroup>
-          <EuiDescribedFormGroup
-            ratio="third"
-            title={<h2>{ControlGroupStrings.manageControl.displaySettings.getFormGroupTitle()}</h2>}
-            description={ControlGroupStrings.manageControl.displaySettings.getFormGroupDescription()}
-          >
-            <EuiFormRow
-              label={ControlGroupStrings.manageControl.displaySettings.getTitleInputTitle()}
-            >
-              <EuiFieldText
-                data-test-subj="control-editor-title-input"
-                placeholder={defaultTitle}
-                value={currentTitle}
-                onChange={(e) => setCurrentTitle(e.target.value)}
-              />
-            </EuiFormRow>
-            {!editorConfig?.hideWidthSettings && (
-              <EuiFormRow
-                label={ControlGroupStrings.manageControl.displaySettings.getWidthInputTitle()}
-              >
-                <div>
-                  <EuiButtonGroup
-                    color="primary"
-                    legend={ControlGroupStrings.management.controlWidth.getWidthSwitchLegend()}
-                    options={CONTROL_WIDTH_OPTIONS}
-                    idSelected={currentWidth}
-                    onChange={(newWidth: string) => setCurrentWidth(newWidth as ControlWidth)}
-                  />
-                  <EuiSpacer size="s" />
-                  <EuiSwitch
-                    label={ControlGroupStrings.manageControl.displaySettings.getGrowSwitchTitle()}
-                    color="primary"
-                    checked={currentGrow}
-                    onChange={() => setCurrentGrow(!currentGrow)}
-                    data-test-subj="control-editor-grow-switch"
-                  />
-                </div>
-              </EuiFormRow>
-            )}
-          </EuiDescribedFormGroup>
-          {!editorConfig?.hideAdditionalSettings ? CustomSettingsComponent : null}
-          {removeControl && (
-            <>
-              <EuiSpacer size="l" />
-              <EuiButtonEmpty
-                aria-label={`delete-${currentInput.title}`}
-                iconType="trash"
-                flush="left"
-                color="danger"
-                onClick={() => {
-                  onCancel({ input: currentInput, grow: currentGrow, width: currentWidth });
-                  removeControl();
-                }}
-              >
-                {ControlGroupStrings.management.getDeleteButtonTitle()}
-              </EuiButtonEmpty>
-            </>
-          )}
-        </EuiForm>
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              aria-label={`cancel-${currentInput.title}`}
-              data-test-subj="control-editor-cancel"
-              iconType="cross"
-              onClick={() => {
-                const inputToReturn =
-                  isCreate && deepEqual(startingInput.current, currentInput) ? {} : currentInput;
-                onCancel({
-                  input: inputToReturn,
-                  grow: currentGrow,
-                  width: currentWidth,
-                });
-              }}
-            >
-              {ControlGroupStrings.manageControl.getCancelTitle()}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              aria-label={`save-${currentInput.title}`}
-              data-test-subj="control-editor-save"
-              iconType="check"
-              color="primary"
-              disabled={!controlEditorValid}
-              onClick={() =>
-                onSave(
-                  { input: currentInput, grow: currentGrow, width: currentWidth },
-                  selectedControlType
-                )
-              }
-            >
-              {ControlGroupStrings.manageControl.getSaveChangesTitle()}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/editor/control_group_editor.tsx b/src/plugins/controls/public/control_group/editor/control_group_editor.tsx
deleted file mode 100644
index 691eacf81143c..0000000000000
--- a/src/plugins/controls/public/control_group/editor/control_group_editor.tsx
+++ /dev/null
@@ -1,249 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import fastIsEqual from 'fast-deep-equal';
-import React, { useCallback, useState } from 'react';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiButtonGroup,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFlyoutBody,
-  EuiFlyoutFooter,
-  EuiFlyoutHeader,
-  EuiForm,
-  EuiFormRow,
-  EuiHorizontalRule,
-  EuiSpacer,
-  EuiSwitch,
-  EuiTitle,
-} from '@elastic/eui';
-
-import { ControlGroupInput } from '..';
-import { getDefaultControlGroupInput, ParentIgnoreSettings } from '../../../common';
-import { ControlSettingTooltipLabel } from '../../components/control_setting_tooltip_label';
-import { ControlStyle } from '../../types';
-import { ControlGroupStrings } from '../control_group_strings';
-import { CONTROL_LAYOUT_OPTIONS } from './editor_constants';
-
-interface EditControlGroupProps {
-  initialInput: ControlGroupInput;
-  controlCount: number;
-  updateInput: (input: Partial<ControlGroupInput>) => void;
-  onDeleteAll: () => void;
-  onClose: () => void;
-}
-
-const editorControlGroupInputIsEqual = (a: ControlGroupInput, b: ControlGroupInput) =>
-  fastIsEqual(a, b);
-
-export const ControlGroupEditor = ({
-  controlCount,
-  initialInput,
-  updateInput,
-  onDeleteAll,
-  onClose,
-}: EditControlGroupProps) => {
-  const [controlGroupEditorState, setControlGroupEditorState] = useState<ControlGroupInput>({
-    ...getDefaultControlGroupInput(),
-    ...initialInput,
-  });
-
-  const updateControlGroupEditorSetting = useCallback(
-    (newSettings: Partial<ControlGroupInput>) => {
-      setControlGroupEditorState({
-        ...controlGroupEditorState,
-        ...newSettings,
-      });
-    },
-    [controlGroupEditorState]
-  );
-
-  const updateIgnoreSetting = useCallback(
-    (newSettings: Partial<ParentIgnoreSettings>) => {
-      setControlGroupEditorState({
-        ...controlGroupEditorState,
-        ignoreParentSettings: {
-          ...(controlGroupEditorState.ignoreParentSettings ?? {}),
-          ...newSettings,
-        },
-      });
-    },
-    [controlGroupEditorState]
-  );
-
-  const applyChangesToInput = useCallback(() => {
-    const inputToApply = { ...controlGroupEditorState };
-    if (!editorControlGroupInputIsEqual(inputToApply, initialInput)) {
-      updateInput(inputToApply);
-    }
-  }, [controlGroupEditorState, initialInput, updateInput]);
-
-  return (
-    <>
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>{ControlGroupStrings.management.getFlyoutTitle()}</h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody data-test-subj="control-group-settings-flyout">
-        <EuiForm component="form" fullWidth>
-          <EuiFormRow label={ControlGroupStrings.management.labelPosition.getLabelPositionTitle()}>
-            <EuiButtonGroup
-              color="primary"
-              options={CONTROL_LAYOUT_OPTIONS}
-              data-test-subj="control-group-layout-options"
-              idSelected={controlGroupEditorState.controlStyle}
-              legend={ControlGroupStrings.management.labelPosition.getLabelPositionLegend()}
-              onChange={(newControlStyle: string) => {
-                // The UI copy calls this setting labelPosition, but to avoid an unnecessary migration it will be left as controlStyle in the state.
-                updateControlGroupEditorSetting({
-                  controlStyle: newControlStyle as ControlStyle,
-                });
-              }}
-            />
-          </EuiFormRow>
-
-          <EuiFormRow
-            label={ControlGroupStrings.management.filteringSettings.getFilteringSettingsTitle()}
-          >
-            <div>
-              <EuiSwitch
-                compressed
-                data-test-subj="control-group-filter-sync"
-                label={ControlGroupStrings.management.filteringSettings.getUseGlobalFiltersTitle()}
-                onChange={(e) =>
-                  updateIgnoreSetting({
-                    ignoreFilters: !e.target.checked,
-                    ignoreQuery: !e.target.checked,
-                  })
-                }
-                checked={
-                  !Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreFilters) ||
-                  !Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreQuery)
-                }
-              />
-              <EuiSpacer size="s" />
-              <EuiSwitch
-                compressed
-                data-test-subj="control-group-query-sync-time-range"
-                label={ControlGroupStrings.management.filteringSettings.getUseGlobalTimeRangeTitle()}
-                onChange={(e) => updateIgnoreSetting({ ignoreTimerange: !e.target.checked })}
-                checked={!Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreTimerange)}
-              />
-            </div>
-          </EuiFormRow>
-
-          <EuiFormRow
-            label={ControlGroupStrings.management.selectionSettings.getSelectionSettingsTitle()}
-          >
-            <div>
-              <EuiSwitch
-                compressed
-                data-test-subj="control-group-validate-selections"
-                label={
-                  <ControlSettingTooltipLabel
-                    label={ControlGroupStrings.management.selectionSettings.validateSelections.getValidateSelectionsTitle()}
-                    tooltip={ControlGroupStrings.management.selectionSettings.validateSelections.getValidateSelectionsTooltip()}
-                  />
-                }
-                checked={!Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreValidations)}
-                onChange={(e) => updateIgnoreSetting({ ignoreValidations: !e.target.checked })}
-              />
-              <EuiSpacer size="s" />
-              <EuiSwitch
-                compressed
-                data-test-subj="control-group-chaining"
-                label={
-                  <ControlSettingTooltipLabel
-                    label={ControlGroupStrings.management.selectionSettings.controlChaining.getHierarchyTitle()}
-                    tooltip={ControlGroupStrings.management.selectionSettings.controlChaining.getHierarchyTooltip()}
-                  />
-                }
-                checked={controlGroupEditorState.chainingSystem === 'HIERARCHICAL'}
-                onChange={(e) =>
-                  updateControlGroupEditorSetting({
-                    chainingSystem: e.target.checked ? 'HIERARCHICAL' : 'NONE',
-                  })
-                }
-              />
-              <EuiSpacer size="s" />
-              <EuiSwitch
-                compressed
-                data-test-subj="control-group-auto-apply-selections"
-                label={
-                  <ControlSettingTooltipLabel
-                    label={ControlGroupStrings.management.selectionSettings.showApplySelections.getShowApplySelectionsTitle()}
-                    tooltip={ControlGroupStrings.management.selectionSettings.showApplySelections.getShowApplySelectionsTooltip()}
-                  />
-                }
-                checked={!controlGroupEditorState.showApplySelections}
-                onChange={(e) =>
-                  updateControlGroupEditorSetting({
-                    showApplySelections: !e.target.checked,
-                  })
-                }
-              />
-            </div>
-          </EuiFormRow>
-
-          {controlCount > 0 && (
-            <>
-              <EuiHorizontalRule margin="m" />
-              <EuiFormRow>
-                <EuiButtonEmpty
-                  onClick={onDeleteAll}
-                  data-test-subj="delete-all-controls-button"
-                  aria-label={'delete-all'}
-                  iconType="trash"
-                  color="danger"
-                  flush="left"
-                  size="s"
-                >
-                  {ControlGroupStrings.management.getDeleteAllButtonTitle()}
-                </EuiButtonEmpty>
-              </EuiFormRow>
-            </>
-          )}
-        </EuiForm>
-      </EuiFlyoutBody>
-      <EuiFlyoutFooter>
-        <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              aria-label={`cancel-editing-group`}
-              iconType="cross"
-              onClick={() => {
-                onClose();
-              }}
-            >
-              {ControlGroupStrings.manageControl.getCancelTitle()}
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              aria-label={`save-group`}
-              iconType="check"
-              color="primary"
-              data-test-subj="control-group-editor-save"
-              onClick={() => {
-                applyChangesToInput();
-                onClose();
-              }}
-            >
-              {ControlGroupStrings.manageControl.getSaveChangesTitle()}
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlyoutFooter>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/control_group/editor/data_control_editor_tools.ts b/src/plugins/controls/public/control_group/editor/data_control_editor_tools.ts
deleted file mode 100644
index 4d0985e2934c9..0000000000000
--- a/src/plugins/controls/public/control_group/editor/data_control_editor_tools.ts
+++ /dev/null
@@ -1,49 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { memoize } from 'lodash';
-
-import { DataView } from '@kbn/data-views-plugin/common';
-
-import { pluginServices } from '../../services';
-import { DataControlFieldRegistry, IEditableControlFactory } from '../../types';
-
-export const getDataControlFieldRegistry = memoize(
-  async (dataView: DataView) => {
-    return await loadFieldRegistryFromDataView(dataView);
-  },
-  (dataView: DataView) => [dataView.id, JSON.stringify(dataView.fields.getAll())].join('|')
-);
-
-const loadFieldRegistryFromDataView = async (
-  dataView: DataView
-): Promise<DataControlFieldRegistry> => {
-  const {
-    controls: { getControlTypes, getControlFactory },
-  } = pluginServices.getServices();
-
-  const controlFactories = getControlTypes().map(
-    (controlType) => getControlFactory(controlType) as IEditableControlFactory
-  );
-  const fieldRegistry: DataControlFieldRegistry = {};
-  return new Promise<DataControlFieldRegistry>((resolve) => {
-    for (const field of dataView.fields.getAll()) {
-      const compatibleControlTypes = [];
-      for (const factory of controlFactories) {
-        if (factory.isFieldCompatible && factory.isFieldCompatible(field)) {
-          compatibleControlTypes.push(factory.type);
-        }
-      }
-      if (compatibleControlTypes.length > 0) {
-        fieldRegistry[field.name] = { field, compatibleControlTypes };
-      }
-    }
-    resolve(fieldRegistry);
-  });
-};
diff --git a/src/plugins/controls/public/control_group/editor/open_add_data_control_flyout.tsx b/src/plugins/controls/public/control_group/editor/open_add_data_control_flyout.tsx
deleted file mode 100644
index 3cf4694a964d2..0000000000000
--- a/src/plugins/controls/public/control_group/editor/open_add_data_control_flyout.tsx
+++ /dev/null
@@ -1,140 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { batch } from 'react-redux';
-
-import { isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-import { toMountPoint } from '@kbn/react-kibana-mount';
-
-import { OPTIONS_LIST_CONTROL, RANGE_SLIDER_CONTROL } from '../..';
-import {
-  DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_WIDTH,
-} from '../../../common/control_group/control_group_constants';
-import { ControlInputTransform } from '../../../common/types';
-import { pluginServices } from '../../services';
-import { DataControlEditorChanges, IEditableControlFactory } from '../../types';
-import { ControlGroupStrings } from '../control_group_strings';
-import {
-  ControlGroupContainer,
-  ControlGroupContainerContext,
-  setFlyoutRef,
-} from '../embeddable/control_group_container';
-import type {
-  AddDataControlProps,
-  AddOptionsListControlProps,
-  AddRangeSliderControlProps,
-} from '../external_api/control_group_input_builder';
-import { ControlEditor } from './control_editor';
-
-export function openAddDataControlFlyout(
-  this: ControlGroupContainer,
-  options?: {
-    controlInputTransform?: ControlInputTransform;
-    onSave?: (id: string) => void;
-  }
-) {
-  const { controlInputTransform, onSave } = options || {};
-  const {
-    core: { theme, i18n },
-    overlays: { openFlyout, openConfirm },
-    controls: { getControlFactory },
-  } = pluginServices.getServices();
-
-  const onCancel = (changes?: DataControlEditorChanges) => {
-    if (!changes || Object.keys(changes.input).length === 0) {
-      this.closeAllFlyouts();
-      return;
-    }
-
-    openConfirm(ControlGroupStrings.management.discardNewControl.getSubtitle(), {
-      confirmButtonText: ControlGroupStrings.management.discardNewControl.getConfirm(),
-      cancelButtonText: ControlGroupStrings.management.discardNewControl.getCancel(),
-      title: ControlGroupStrings.management.discardNewControl.getTitle(),
-      buttonColor: 'danger',
-    }).then((confirmed) => {
-      if (confirmed) {
-        this.closeAllFlyouts();
-      }
-    });
-  };
-
-  const onSaveFlyout = async (changes: DataControlEditorChanges, type?: string) => {
-    this.closeAllFlyouts();
-    if (!type) {
-      return;
-    }
-
-    let controlInput = changes.input;
-    const factory = getControlFactory(type) as IEditableControlFactory;
-    if (factory.presaveTransformFunction) {
-      controlInput = factory.presaveTransformFunction(controlInput);
-    }
-
-    if (controlInputTransform) {
-      controlInput = controlInputTransform({ ...controlInput }, type);
-    }
-
-    const dataControlInput = {
-      grow: changes.grow,
-      width: changes.width,
-      ...controlInput,
-    };
-    let newControl;
-    switch (type) {
-      case OPTIONS_LIST_CONTROL:
-        newControl = await this.addOptionsListControl(
-          dataControlInput as AddOptionsListControlProps
-        );
-        break;
-      case RANGE_SLIDER_CONTROL:
-        newControl = await this.addRangeSliderControl(
-          dataControlInput as AddRangeSliderControlProps
-        );
-        break;
-      default:
-        newControl = await this.addDataControlFromField(dataControlInput as AddDataControlProps);
-    }
-
-    if (onSave && !isErrorEmbeddable(newControl)) {
-      onSave(newControl.id);
-    }
-
-    batch(() => {
-      this.dispatch.setDefaultControlGrow(changes.grow);
-      this.dispatch.setDefaultControlWidth(changes.width);
-    });
-  };
-
-  const flyoutInstance = openFlyout(
-    toMountPoint(
-      <ControlGroupContainerContext.Provider value={this}>
-        <ControlEditor
-          setLastUsedDataViewId={(newId) => this.setLastUsedDataViewId(newId)}
-          getRelevantDataViewId={this.getMostRelevantDataViewId}
-          isCreate={true}
-          width={this.getInput().defaultControlWidth ?? DEFAULT_CONTROL_WIDTH}
-          grow={this.getInput().defaultControlGrow ?? DEFAULT_CONTROL_GROW}
-          onSave={onSaveFlyout}
-          onCancel={onCancel}
-        />
-      </ControlGroupContainerContext.Provider>,
-      { theme, i18n }
-    ),
-    {
-      'aria-label': ControlGroupStrings.manageControl.getFlyoutCreateTitle(),
-      outsideClickCloses: false,
-      onClose: () => {
-        onCancel();
-      },
-    }
-  );
-  setFlyoutRef(flyoutInstance);
-}
diff --git a/src/plugins/controls/public/control_group/editor/open_edit_control_group_flyout.tsx b/src/plugins/controls/public/control_group/editor/open_edit_control_group_flyout.tsx
deleted file mode 100644
index 89ca130eaa76e..0000000000000
--- a/src/plugins/controls/public/control_group/editor/open_edit_control_group_flyout.tsx
+++ /dev/null
@@ -1,65 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { OverlayRef } from '@kbn/core-mount-utils-browser';
-import { toMountPoint } from '@kbn/react-kibana-mount';
-import React from 'react';
-
-import { pluginServices } from '../../services';
-import { ControlGroupStrings } from '../control_group_strings';
-import {
-  ControlGroupContainer,
-  ControlGroupContainerContext,
-  setFlyoutRef,
-} from '../embeddable/control_group_container';
-import { ControlGroupEditor } from './control_group_editor';
-
-export function openEditControlGroupFlyout(this: ControlGroupContainer) {
-  const {
-    core: { theme, i18n },
-    overlays: { openFlyout, openConfirm },
-  } = pluginServices.getServices();
-
-  const onDeleteAll = (ref: OverlayRef) => {
-    openConfirm(ControlGroupStrings.management.deleteControls.getSubtitle(), {
-      confirmButtonText: ControlGroupStrings.management.deleteControls.getConfirm(),
-      cancelButtonText: ControlGroupStrings.management.deleteControls.getCancel(),
-      title: ControlGroupStrings.management.deleteControls.getDeleteAllTitle(),
-      buttonColor: 'danger',
-    }).then((confirmed) => {
-      if (confirmed)
-        Object.keys(this.getInput().panels).forEach((panelId) => this.removeEmbeddable(panelId));
-      ref.close();
-    });
-  };
-
-  const flyoutInstance = openFlyout(
-    toMountPoint(
-      <ControlGroupContainerContext.Provider value={this}>
-        <ControlGroupEditor
-          initialInput={this.getInput()}
-          updateInput={(changes) => this.updateInput(changes)}
-          controlCount={Object.keys(this.getInput().panels ?? {}).length}
-          onDeleteAll={() => onDeleteAll(flyoutInstance)}
-          onClose={() => flyoutInstance.close()}
-        />
-      </ControlGroupContainerContext.Provider>,
-      { theme, i18n }
-    ),
-    {
-      size: 's',
-      'aria-label': ControlGroupStrings.manageControl.getFlyoutCreateTitle(),
-      outsideClickCloses: false,
-      onClose: () => {
-        this.closeAllFlyouts();
-      },
-    }
-  );
-  setFlyoutRef(flyoutInstance);
-}
diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_chaining_system.ts b/src/plugins/controls/public/control_group/embeddable/control_group_chaining_system.ts
deleted file mode 100644
index eb82201b6a8f5..0000000000000
--- a/src/plugins/controls/public/control_group/embeddable/control_group_chaining_system.ts
+++ /dev/null
@@ -1,141 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { Subject } from 'rxjs';
-import { memoize } from 'lodash';
-import { Filter } from '@kbn/es-query';
-import deepEqual from 'fast-deep-equal';
-import { EmbeddableContainerSettings, isErrorEmbeddable } from '@kbn/embeddable-plugin/public';
-
-import { ControlEmbeddable } from '../../types';
-import {
-  ControlGroupChainingSystem,
-  ControlGroupInput,
-  ControlsPanels,
-} from '../../../common/control_group/types';
-import { TimeSlice } from '../../../common/types';
-
-interface GetPrecedingFiltersProps {
-  id: string;
-  childOrder: ChildEmbeddableOrderCache;
-  getChild: (id: string) => ControlEmbeddable;
-}
-
-interface OnChildChangedProps {
-  childOutputChangedId: string;
-  recalculateFilters$: Subject<null>;
-  childOrder: ChildEmbeddableOrderCache;
-  getChild: (id: string) => ControlEmbeddable;
-}
-
-interface ChainingSystem {
-  getContainerSettings: (
-    initialInput: ControlGroupInput
-  ) => EmbeddableContainerSettings | undefined;
-  getPrecedingFilters: (
-    props: GetPrecedingFiltersProps
-  ) => { filters: Filter[]; timeslice?: TimeSlice } | undefined;
-  onChildChange: (props: OnChildChangedProps) => void;
-}
-
-export interface ChildEmbeddableOrderCache {
-  IdsToOrder: { [key: string]: number };
-  idsInOrder: string[];
-  lastChildId: string;
-}
-
-const getOrdersFromPanels = (panels?: ControlsPanels) => {
-  return Object.values(panels ?? {}).map((panel) => ({
-    id: panel.explicitInput.id,
-    order: panel.order,
-  }));
-};
-
-export const controlOrdersAreEqual = (panelsA?: ControlsPanels, panelsB?: ControlsPanels) =>
-  deepEqual(getOrdersFromPanels(panelsA), getOrdersFromPanels(panelsB));
-
-export const cachedChildEmbeddableOrder = memoize(
-  (panels: ControlsPanels) => {
-    const IdsToOrder: { [key: string]: number } = {};
-    const idsInOrder: string[] = [];
-    Object.values(panels)
-      .sort((a, b) => (a.order > b.order ? 1 : -1))
-      .forEach((panel) => {
-        IdsToOrder[panel.explicitInput.id] = panel.order;
-        idsInOrder.push(panel.explicitInput.id);
-      });
-    const lastChildId = idsInOrder[idsInOrder.length - 1];
-    return { IdsToOrder, idsInOrder, lastChildId } as ChildEmbeddableOrderCache;
-  },
-  (panels) => JSON.stringify(getOrdersFromPanels(panels))
-);
-
-export const ControlGroupChainingSystems: {
-  [key in ControlGroupChainingSystem]: ChainingSystem;
-} = {
-  HIERARCHICAL: {
-    getContainerSettings: (initialInput) => ({
-      childIdInitializeOrder: Object.values(initialInput.panels)
-        .sort((a, b) => (a.order > b.order ? 1 : -1))
-        .map((panel) => panel.explicitInput.id),
-      initializeSequentially: true,
-    }),
-    getPrecedingFilters: ({ id, childOrder, getChild }) => {
-      let filters: Filter[] = [];
-      let timeslice;
-      const order = childOrder.IdsToOrder?.[id];
-      if (!order || order === 0) return { filters, timeslice };
-      for (let i = 0; i < order; i++) {
-        const embeddable = getChild(childOrder.idsInOrder[i]);
-        if (!embeddable || isErrorEmbeddable(embeddable)) return { filters, timeslice };
-        const embeddableOutput = embeddable.getOutput();
-        if (embeddableOutput.timeslice) {
-          timeslice = embeddableOutput.timeslice;
-        }
-        filters = [...filters, ...(embeddableOutput.filters ?? [])];
-      }
-      return { filters, timeslice };
-    },
-    onChildChange: ({ childOutputChangedId, childOrder, recalculateFilters$, getChild }) => {
-      if (childOutputChangedId === childOrder.lastChildId) {
-        // the last control's output has updated, recalculate filters
-        recalculateFilters$.next(null);
-        return;
-      }
-
-      // when output changes on a child which isn't the last
-      let nextOrder = childOrder.IdsToOrder[childOutputChangedId] + 1;
-      while (nextOrder < childOrder.idsInOrder.length) {
-        const nextControl = getChild(childOrder.idsInOrder[nextOrder]);
-
-        // make the next chained embeddable updateInputFromParent
-        if (nextControl?.isChained?.()) {
-          setTimeout(
-            () => nextControl.refreshInputFromParent(),
-            1 // run on next tick
-          );
-          return;
-        }
-
-        // recalculate filters when there are no chained controls to the right of the updated control
-        if (nextControl.id === childOrder.lastChildId) {
-          recalculateFilters$.next(null);
-          return;
-        }
-
-        nextOrder += 1;
-      }
-    },
-  },
-  NONE: {
-    getContainerSettings: () => undefined,
-    getPrecedingFilters: () => undefined,
-    onChildChange: ({ recalculateFilters$ }) => recalculateFilters$.next(null),
-  },
-};
diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx b/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
deleted file mode 100644
index 10a76fb46c4da..0000000000000
--- a/src/plugins/controls/public/control_group/embeddable/control_group_container.tsx
+++ /dev/null
@@ -1,603 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { compareFilters, COMPARE_ALL_OPTIONS, Filter, uniqFilters } from '@kbn/es-query';
-import { isEqual, pick } from 'lodash';
-import React, { createContext, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import { batch, Provider, TypedUseSelectorHook, useSelector } from 'react-redux';
-import {
-  BehaviorSubject,
-  debounceTime,
-  distinctUntilChanged,
-  merge,
-  skip,
-  Subject,
-  Subscription,
-} from 'rxjs';
-
-import { OverlayRef } from '@kbn/core/public';
-import { Container, EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-
-import {
-  PersistableControlGroupInput,
-  persistableControlGroupInputIsEqual,
-  persistableControlGroupInputKeys,
-} from '../../../common';
-import { TimeSlice } from '../../../common/types';
-import { pluginServices } from '../../services';
-import { ControlsStorageService } from '../../services/storage/types';
-import { ControlEmbeddable, ControlInput, ControlOutput } from '../../types';
-import { ControlGroup } from '../component/control_group_component';
-import { openAddDataControlFlyout } from '../editor/open_add_data_control_flyout';
-import { openEditControlGroupFlyout } from '../editor/open_edit_control_group_flyout';
-import {
-  getDataControlPanelState,
-  getOptionsListPanelState,
-  getRangeSliderPanelState,
-  getTimeSliderPanelState,
-  type AddDataControlProps,
-  type AddOptionsListControlProps,
-  type AddRangeSliderControlProps,
-} from '../external_api/control_group_input_builder';
-import { startDiffingControlGroupState } from '../state/control_group_diffing_integration';
-import { controlGroupReducers } from '../state/control_group_reducers';
-import {
-  ControlGroupComponentState,
-  ControlGroupFilterOutput,
-  ControlGroupInput,
-  ControlGroupOutput,
-  ControlGroupReduxState,
-  ControlPanelState,
-  ControlsPanels,
-  CONTROL_GROUP_TYPE,
-  FieldFilterPredicate,
-} from '../types';
-import {
-  cachedChildEmbeddableOrder,
-  ControlGroupChainingSystems,
-  controlOrdersAreEqual,
-} from './control_group_chaining_system';
-import { getNextPanelOrder } from './control_group_helpers';
-
-let flyoutRef: OverlayRef | undefined;
-export const setFlyoutRef = (newRef: OverlayRef | undefined) => {
-  flyoutRef = newRef;
-};
-
-export const ControlGroupContainerContext = createContext<ControlGroupContainer | null>(null);
-export const controlGroupSelector = useSelector as TypedUseSelectorHook<ControlGroupReduxState>;
-export const useControlGroupContainer = (): ControlGroupContainer => {
-  const controlGroup = useContext<ControlGroupContainer | null>(ControlGroupContainerContext);
-  if (controlGroup == null) {
-    throw new Error('useControlGroupContainer must be used inside ControlGroupContainerContext.');
-  }
-  return controlGroup!;
-};
-
-type ControlGroupReduxEmbeddableTools = ReduxEmbeddableTools<
-  ControlGroupReduxState,
-  typeof controlGroupReducers
->;
-
-export class ControlGroupContainer extends Container<
-  ControlInput,
-  ControlGroupInput,
-  ControlGroupOutput
-> {
-  public readonly type = CONTROL_GROUP_TYPE;
-  public readonly anyControlOutputConsumerLoading$: Subject<boolean> = new Subject();
-
-  private initialized$ = new BehaviorSubject(false);
-
-  private storageService: ControlsStorageService;
-
-  private subscriptions: Subscription = new Subscription();
-  private domNode?: HTMLElement;
-  private recalculateFilters$: Subject<null>;
-  private relevantDataViewId?: string;
-  private lastUsedDataViewId?: string;
-  private invalidSelectionsState: { [childId: string]: boolean } = {};
-
-  public diffingSubscription: Subscription = new Subscription();
-
-  // state management
-  public select: ControlGroupReduxEmbeddableTools['select'];
-  public getState: ControlGroupReduxEmbeddableTools['getState'];
-  public dispatch: ControlGroupReduxEmbeddableTools['dispatch'];
-  public onStateChange: ControlGroupReduxEmbeddableTools['onStateChange'];
-
-  private store: ControlGroupReduxEmbeddableTools['store'];
-
-  private cleanupStateTools: () => void;
-
-  public onFiltersPublished$: Subject<Filter[]>;
-  public onControlRemoved$: Subject<string>;
-
-  /** This currently reports the **entire** persistable control group input on unsaved changes */
-  public unsavedChanges: BehaviorSubject<PersistableControlGroupInput | undefined>;
-
-  public fieldFilterPredicate: FieldFilterPredicate | undefined;
-
-  constructor(
-    reduxToolsPackage: ReduxToolsPackage,
-    initialInput: ControlGroupInput,
-    parent?: Container,
-    initialComponentState?: ControlGroupComponentState,
-    fieldFilterPredicate?: FieldFilterPredicate
-  ) {
-    super(
-      initialInput,
-      { dataViewIds: [], embeddableLoaded: {}, filters: [] },
-      pluginServices.getServices().controls.getControlFactory,
-      parent,
-      ControlGroupChainingSystems[initialInput.chainingSystem]?.getContainerSettings(initialInput)
-    );
-
-    ({ storage: this.storageService } = pluginServices.getServices());
-
-    this.recalculateFilters$ = new Subject();
-    this.onFiltersPublished$ = new Subject<Filter[]>();
-    this.onControlRemoved$ = new Subject<string>();
-
-    // start diffing control group state
-    this.unsavedChanges = new BehaviorSubject<PersistableControlGroupInput | undefined>(undefined);
-    const diffingMiddleware = startDiffingControlGroupState.bind(this)();
-
-    // build redux embeddable tools
-    const reduxEmbeddableTools = reduxToolsPackage.createReduxEmbeddableTools<
-      ControlGroupReduxState,
-      typeof controlGroupReducers
-    >({
-      embeddable: this,
-      reducers: controlGroupReducers,
-      additionalMiddleware: [diffingMiddleware],
-      initialComponentState,
-    });
-
-    this.select = reduxEmbeddableTools.select;
-    this.getState = reduxEmbeddableTools.getState;
-    this.dispatch = reduxEmbeddableTools.dispatch;
-    this.cleanupStateTools = reduxEmbeddableTools.cleanup;
-    this.onStateChange = reduxEmbeddableTools.onStateChange;
-
-    this.store = reduxEmbeddableTools.store;
-
-    // when all children are ready setup subscriptions
-    this.untilAllChildrenReady().then(() => {
-      this.invalidSelectionsState = this.getChildIds().reduce((prev, id) => {
-        return { ...prev, [id]: false };
-      }, {});
-
-      this.recalculateDataViews();
-      this.setupSubscriptions();
-      const { filters, timeslice } = this.recalculateFilters();
-      this.publishFilters({ filters, timeslice });
-
-      this.calculateFiltersFromSelections(initialComponentState?.lastSavedInput?.panels ?? {}).then(
-        (filterOutput) => {
-          this.dispatch.setLastSavedFilters(filterOutput);
-        }
-      );
-
-      this.initialized$.next(true);
-    });
-
-    this.fieldFilterPredicate = fieldFilterPredicate;
-  }
-
-  public canShowInvalidSelectionsWarning = () =>
-    this.storageService.getShowInvalidSelectionWarning() ?? true;
-
-  public suppressInvalidSelectionsWarning = () => {
-    this.storageService.setShowInvalidSelectionWarning(false);
-  };
-
-  public reportInvalidSelections = ({
-    id,
-    hasInvalidSelections,
-  }: {
-    id: string;
-    hasInvalidSelections: boolean;
-  }) => {
-    this.invalidSelectionsState = { ...this.invalidSelectionsState, [id]: hasInvalidSelections };
-
-    const childrenWithInvalidSelections = cachedChildEmbeddableOrder(
-      this.getInput().panels
-    ).idsInOrder.filter((childId) => {
-      return this.invalidSelectionsState[childId];
-    });
-    this.dispatch.setControlWithInvalidSelectionsId(
-      childrenWithInvalidSelections.length > 0 ? childrenWithInvalidSelections[0] : undefined
-    );
-  };
-
-  private setupSubscriptions = () => {
-    /**
-     * refresh control order cache and make all panels refreshInputFromParent whenever panel orders change
-     */
-    this.subscriptions.add(
-      this.getInput$()
-        .pipe(
-          skip(1),
-          distinctUntilChanged((a, b) => controlOrdersAreEqual(a.panels, b.panels))
-        )
-        .subscribe((input) => {
-          this.recalculateDataViews();
-          this.recalculateFilters$.next(null);
-          const childOrderCache = cachedChildEmbeddableOrder(input.panels);
-          childOrderCache.idsInOrder.forEach((id) => this.getChild(id)?.refreshInputFromParent());
-        })
-    );
-
-    /**
-     * force publish filters when `showApplySelections` value changes to keep state clean
-     */
-    this.subscriptions.add(
-      this.getInput$()
-        .pipe(
-          distinctUntilChanged(
-            (a, b) => Boolean(a.showApplySelections) === Boolean(b.showApplySelections)
-          ),
-          skip(1)
-        )
-        .subscribe(() => {
-          const { filters, timeslice } = this.recalculateFilters();
-          this.publishFilters({ filters, timeslice });
-        })
-    );
-
-    /**
-     * run OnChildOutputChanged when any child's output has changed
-     */
-    this.subscriptions.add(
-      this.getAnyChildOutputChange$().subscribe((childOutputChangedId) => {
-        this.recalculateDataViews();
-        ControlGroupChainingSystems[this.getInput().chainingSystem].onChildChange({
-          childOutputChangedId,
-          childOrder: cachedChildEmbeddableOrder(this.getInput().panels),
-          getChild: (id) => this.getChild(id),
-          recalculateFilters$: this.recalculateFilters$,
-        });
-      })
-    );
-
-    /**
-     * debounce output recalculation
-     */
-    this.subscriptions.add(
-      this.recalculateFilters$.pipe(debounceTime(10)).subscribe(() => {
-        const { filters, timeslice } = this.recalculateFilters();
-        this.tryPublishFilters({ filters, timeslice });
-      })
-    );
-  };
-
-  public setSavedState(lastSavedInput: PersistableControlGroupInput | undefined): void {
-    this.calculateFiltersFromSelections(lastSavedInput?.panels ?? {}).then((filterOutput) => {
-      batch(() => {
-        this.dispatch.setLastSavedInput(lastSavedInput);
-        this.dispatch.setLastSavedFilters(filterOutput);
-      });
-    });
-  }
-
-  public resetToLastSavedState() {
-    const {
-      explicitInput: { showApplySelections: currentShowApplySelections },
-      componentState: { lastSavedInput },
-    } = this.getState();
-
-    if (
-      lastSavedInput &&
-      !persistableControlGroupInputIsEqual(this.getPersistableInput(), lastSavedInput)
-    ) {
-      this.updateInput(lastSavedInput);
-      if (currentShowApplySelections || lastSavedInput.showApplySelections) {
-        /** If either the current or past state has auto-apply off, calling reset should force the changes to be published */
-        this.calculateFiltersFromSelections(lastSavedInput.panels).then((filterOutput) => {
-          this.publishFilters(filterOutput);
-        });
-      }
-      this.reload(); // this forces the children to update their inputs + perform validation as necessary
-    }
-  }
-
-  public reload() {
-    super.reload();
-  }
-
-  public getPersistableInput: () => PersistableControlGroupInput & { id: string } = () => {
-    const input = this.getInput();
-    return pick(input, [...persistableControlGroupInputKeys, 'id']);
-  };
-
-  public updateInputAndReinitialize = (newInput: Partial<ControlGroupInput>) => {
-    this.subscriptions.unsubscribe();
-    this.subscriptions = new Subscription();
-    this.initialized$.next(false);
-    this.updateInput(newInput);
-
-    this.untilAllChildrenReady().then(() => {
-      this.dispatch.setControlWithInvalidSelectionsId(undefined);
-      this.invalidSelectionsState = this.getChildIds().reduce((prev, id) => {
-        return { ...prev, [id]: false };
-      }, {});
-
-      this.recalculateDataViews();
-      const { filters, timeslice } = this.recalculateFilters();
-      this.publishFilters({ filters, timeslice });
-      this.setupSubscriptions();
-      this.initialized$.next(true);
-    });
-  };
-
-  public setLastUsedDataViewId = (lastUsedDataViewId: string) => {
-    this.lastUsedDataViewId = lastUsedDataViewId;
-  };
-
-  public setRelevantDataViewId = (newRelevantDataViewId: string) => {
-    this.relevantDataViewId = newRelevantDataViewId;
-  };
-
-  public getMostRelevantDataViewId = () => {
-    return this.lastUsedDataViewId ?? this.relevantDataViewId;
-  };
-
-  public closeAllFlyouts() {
-    flyoutRef?.close();
-    flyoutRef = undefined;
-  }
-
-  public async addDataControlFromField(controlProps: AddDataControlProps) {
-    const panelState = await getDataControlPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
-  }
-
-  public addOptionsListControl(controlProps: AddOptionsListControlProps) {
-    const panelState = getOptionsListPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
-  }
-
-  public addRangeSliderControl(controlProps: AddRangeSliderControlProps) {
-    const panelState = getRangeSliderPanelState(this.getInput(), controlProps);
-    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
-  }
-
-  public addTimeSliderControl() {
-    const panelState = getTimeSliderPanelState(this.getInput());
-    return this.createAndSaveEmbeddable(panelState.type, panelState, this.getInput().panels);
-  }
-
-  public openAddDataControlFlyout = openAddDataControlFlyout;
-
-  public openEditControlGroupFlyout = openEditControlGroupFlyout;
-
-  public getPanelCount = () => {
-    return Object.keys(this.getInput().panels).length;
-  };
-
-  public updateFilterContext = (filters: Filter[]) => {
-    this.updateInput({ filters });
-  };
-
-  private recalculateFilters = (): ControlGroupFilterOutput => {
-    const allFilters: Filter[] = [];
-    let timeslice;
-    const controlChildren = Object.values(this.children$.value) as ControlEmbeddable[];
-    controlChildren.map((child: ControlEmbeddable) => {
-      const childOutput = child.getOutput() as ControlOutput;
-      allFilters.push(...(childOutput?.filters ?? []));
-      if (childOutput.timeslice) {
-        timeslice = childOutput.timeslice;
-      }
-    });
-    return { filters: uniqFilters(allFilters), timeslice };
-  };
-
-  private async calculateFiltersFromSelections(
-    panels: PersistableControlGroupInput['panels']
-  ): Promise<ControlGroupFilterOutput> {
-    let filtersArray: Filter[] = [];
-    let timeslice;
-    const controlChildren = Object.values(this.children$.value) as ControlEmbeddable[];
-    await Promise.all(
-      controlChildren.map(async (child) => {
-        if (panels[child.id]) {
-          const controlOutput =
-            (await (child as ControlEmbeddable).selectionsToFilters?.(
-              panels[child.id].explicitInput
-            )) ?? ({} as ControlGroupFilterOutput);
-          if (controlOutput.filters) {
-            filtersArray = [...filtersArray, ...controlOutput.filters];
-          } else if (controlOutput.timeslice) {
-            timeslice = controlOutput.timeslice;
-          }
-        }
-      })
-    );
-    return { filters: filtersArray, timeslice };
-  }
-
-  /**
-   * If apply button is enabled, add the new filters to the  unpublished filters component state;
-   * otherwise, publish new filters right away
-   */
-  private tryPublishFilters = ({
-    filters,
-    timeslice,
-  }: {
-    filters?: Filter[];
-    timeslice?: TimeSlice;
-  }) => {
-    // if filters are different, try publishing them
-    if (
-      !compareFilters(this.output.filters ?? [], filters ?? [], COMPARE_ALL_OPTIONS) ||
-      !isEqual(this.output.timeslice, timeslice)
-    ) {
-      const {
-        explicitInput: { showApplySelections },
-      } = this.getState();
-
-      if (!showApplySelections) {
-        this.publishFilters({ filters, timeslice });
-      } else {
-        this.dispatch.setUnpublishedFilters({ filters, timeslice });
-      }
-    } else {
-      this.dispatch.setUnpublishedFilters(undefined);
-    }
-  };
-
-  public publishFilters = ({ filters, timeslice }: ControlGroupFilterOutput) => {
-    this.updateOutput({
-      filters,
-      timeslice,
-    });
-    this.dispatch.setUnpublishedFilters(undefined);
-    this.onFiltersPublished$.next(filters ?? []);
-  };
-
-  private recalculateDataViews = () => {
-    const allDataViewIds: Set<string> = new Set();
-    const controlChildren = Object.values(this.children$.value) as ControlEmbeddable[];
-    controlChildren.map((child) => {
-      const dataViewId = (child.getOutput() as ControlOutput).dataViewId;
-      if (dataViewId) allDataViewIds.add(dataViewId);
-    });
-    this.updateOutput({ dataViewIds: Array.from(allDataViewIds) });
-  };
-
-  protected createNewPanelState<TEmbeddableInput extends ControlInput = ControlInput>(
-    factory: EmbeddableFactory<ControlInput, ControlOutput, ControlEmbeddable>,
-    partial: Partial<TEmbeddableInput> = {},
-    otherPanels: ControlGroupInput['panels']
-  ) {
-    const { newPanel } = super.createNewPanelState(factory, partial);
-    return {
-      newPanel: {
-        order: getNextPanelOrder(this.getInput().panels),
-        width: this.getInput().defaultControlWidth,
-        grow: this.getInput().defaultControlGrow,
-        ...newPanel,
-      } as ControlPanelState<TEmbeddableInput>,
-      otherPanels,
-    };
-  }
-
-  public removePanel(id: string): void {
-    /** TODO: This is a temporary wrapper until the control group refactor is complete */
-    super.removeEmbeddable(id);
-  }
-
-  protected onRemoveEmbeddable(idToRemove: string) {
-    const newPanels = super.onRemoveEmbeddable(idToRemove) as ControlsPanels;
-    const childOrderCache = cachedChildEmbeddableOrder(this.getInput().panels);
-    const removedOrder = childOrderCache.IdsToOrder[idToRemove];
-    for (let i = removedOrder + 1; i < childOrderCache.idsInOrder.length; i++) {
-      const currentOrder = newPanels[childOrderCache.idsInOrder[i]].order;
-      newPanels[childOrderCache.idsInOrder[i]] = {
-        ...newPanels[childOrderCache.idsInOrder[i]],
-        order: currentOrder - 1,
-      };
-    }
-    this.onControlRemoved$.next(idToRemove);
-    return newPanels;
-  }
-
-  protected getInheritedInput(id: string): ControlInput {
-    const { filters, query, ignoreParentSettings, timeRange, chainingSystem, panels } =
-      this.getInput();
-
-    const precedingFilters = ControlGroupChainingSystems[chainingSystem].getPrecedingFilters({
-      id,
-      childOrder: cachedChildEmbeddableOrder(panels),
-      getChild: (getChildId: string) => this.getChild<ControlEmbeddable>(getChildId),
-    });
-    const allFilters = [
-      ...(ignoreParentSettings?.ignoreFilters ? [] : filters ?? []),
-      ...(precedingFilters?.filters ?? []),
-    ];
-    return {
-      ignoreParentSettings,
-      filters: allFilters,
-      query: ignoreParentSettings?.ignoreQuery ? undefined : query,
-      timeRange: ignoreParentSettings?.ignoreTimerange ? undefined : timeRange,
-      timeslice: ignoreParentSettings?.ignoreTimerange ? undefined : precedingFilters?.timeslice,
-      id,
-    };
-  }
-
-  public untilAllChildrenReady = () => {
-    const panelsLoading = () =>
-      Object.keys(this.getInput().panels).some(
-        (panelId) => !this.getOutput().embeddableLoaded[panelId]
-      );
-    if (panelsLoading()) {
-      return new Promise<void>((resolve, reject) => {
-        const subscription = merge(this.getOutput$(), this.getInput$()).subscribe(() => {
-          if (this.destroyed) {
-            subscription.unsubscribe();
-            reject();
-          }
-          if (!panelsLoading()) {
-            subscription.unsubscribe();
-            resolve();
-          }
-        });
-      });
-    }
-    return Promise.resolve();
-  };
-
-  public untilInitialized = () => {
-    if (this.initialized$.value === false) {
-      return new Promise<void>((resolve, reject) => {
-        const subscription = this.initialized$.subscribe((isInitialized) => {
-          if (this.destroyed) {
-            subscription.unsubscribe();
-            reject();
-          }
-          if (isInitialized) {
-            subscription.unsubscribe();
-            resolve();
-          }
-        });
-      });
-    }
-    return Promise.resolve();
-  };
-
-  public render(dom: HTMLElement) {
-    if (this.domNode) {
-      ReactDOM.unmountComponentAtNode(this.domNode);
-    }
-    this.domNode = dom;
-    ReactDOM.render(
-      <KibanaRenderContextProvider {...pluginServices.getServices().core}>
-        <Provider store={this.store}>
-          <ControlGroupContainerContext.Provider value={this}>
-            <ControlGroup />
-          </ControlGroupContainerContext.Provider>
-        </Provider>
-      </KibanaRenderContextProvider>,
-      dom
-    );
-  }
-
-  public destroy() {
-    super.destroy();
-    this.closeAllFlyouts();
-    this.subscriptions.unsubscribe();
-    this.cleanupStateTools();
-    if (this.domNode) ReactDOM.unmountComponentAtNode(this.domNode);
-  }
-}
diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts b/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts
deleted file mode 100644
index d17f4495b8b76..0000000000000
--- a/src/plugins/controls/public/control_group/embeddable/control_group_container_factory.ts
+++ /dev/null
@@ -1,66 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import { Container, EmbeddableFactoryDefinition } from '@kbn/embeddable-plugin/public';
-import { lazyLoadReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
-
-import {
-  ControlGroupComponentState,
-  ControlGroupInput,
-  CONTROL_GROUP_TYPE,
-  FieldFilterPredicate,
-} from '../types';
-import {
-  createControlGroupExtract,
-  createControlGroupInject,
-} from '../../../common/control_group/control_group_persistable_state';
-import { getDefaultControlGroupInput } from '../../../common';
-
-export class ControlGroupContainerFactory implements EmbeddableFactoryDefinition {
-  public readonly isContainerType = true;
-  public readonly type = CONTROL_GROUP_TYPE;
-  public inject: EmbeddablePersistableStateService['inject'];
-  public extract: EmbeddablePersistableStateService['extract'];
-
-  constructor(private persistableStateService: EmbeddablePersistableStateService) {
-    this.inject = createControlGroupInject(this.persistableStateService);
-    this.extract = createControlGroupExtract(this.persistableStateService);
-  }
-
-  public isEditable = async () => false;
-
-  public readonly getDisplayName = () => {
-    return i18n.translate('controls.controlGroup.title', {
-      defaultMessage: 'Control group',
-    });
-  };
-
-  public getDefaultInput(): Partial<ControlGroupInput> {
-    return getDefaultControlGroupInput();
-  }
-
-  public create = async (
-    initialInput: ControlGroupInput,
-    parent?: Container,
-    initialComponentState?: ControlGroupComponentState,
-    fieldFilterPredicate?: FieldFilterPredicate
-  ) => {
-    const reduxEmbeddablePackage = await lazyLoadReduxToolsPackage();
-    const { ControlGroupContainer } = await import('./control_group_container');
-    return new ControlGroupContainer(
-      reduxEmbeddablePackage,
-      initialInput,
-      parent,
-      initialComponentState,
-      fieldFilterPredicate
-    );
-  };
-}
diff --git a/src/plugins/controls/public/control_group/embeddable/control_group_helpers.ts b/src/plugins/controls/public/control_group/embeddable/control_group_helpers.ts
deleted file mode 100644
index 1cae59ea8f577..0000000000000
--- a/src/plugins/controls/public/control_group/embeddable/control_group_helpers.ts
+++ /dev/null
@@ -1,45 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { type IEmbeddable } from '@kbn/embeddable-plugin/public';
-
-import { getDataControlFieldRegistry } from '../editor/data_control_editor_tools';
-import { type ControlGroupContainer } from './control_group_container';
-import { pluginServices } from '../../services';
-import { CONTROL_GROUP_TYPE } from '../types';
-import { ControlsPanels } from '../types';
-
-export const getNextPanelOrder = (panels?: ControlsPanels) => {
-  let nextOrder = 0;
-  if (Object.keys(panels ?? {}).length > 0) {
-    nextOrder =
-      Object.values(panels ?? {}).reduce((highestSoFar, panel) => {
-        if (panel.order > highestSoFar) highestSoFar = panel.order;
-        return highestSoFar;
-      }, 0) + 1;
-  }
-  return nextOrder;
-};
-
-export const getCompatibleControlType = async ({
-  dataViewId,
-  fieldName,
-}: {
-  dataViewId: string;
-  fieldName: string;
-}) => {
-  const dataView = await pluginServices.getServices().dataViews.get(dataViewId);
-  const fieldRegistry = await getDataControlFieldRegistry(dataView);
-  const field = fieldRegistry[fieldName];
-  return field.compatibleControlTypes[0];
-};
-
-export const isControlGroup = (embeddable: IEmbeddable): embeddable is ControlGroupContainer => {
-  return embeddable.isContainer && embeddable.type === CONTROL_GROUP_TYPE;
-};
diff --git a/src/plugins/controls/public/control_group/external_api/control_group_input_builder.ts b/src/plugins/controls/public/control_group/external_api/control_group_input_builder.ts
deleted file mode 100644
index c7adf544653c2..0000000000000
--- a/src/plugins/controls/public/control_group/external_api/control_group_input_builder.ts
+++ /dev/null
@@ -1,160 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import { v4 as uuidv4 } from 'uuid';
-
-import {
-  ControlPanelState,
-  ControlWidth,
-  OptionsListEmbeddableInput,
-  OPTIONS_LIST_CONTROL,
-  TIME_SLIDER_CONTROL,
-} from '../../../common';
-import {
-  DEFAULT_CONTROL_GROW,
-  DEFAULT_CONTROL_WIDTH,
-} from '../../../common/control_group/control_group_constants';
-import { ControlGroupInput } from '../types';
-import { ControlInput, DataControlInput } from '../../types';
-import { RangeValue, RANGE_SLIDER_CONTROL } from '../../../common/range_slider/types';
-import { getCompatibleControlType, getNextPanelOrder } from '../embeddable/control_group_helpers';
-
-export interface AddDataControlProps {
-  controlId?: string;
-  dataViewId: string;
-  fieldName: string;
-  grow?: boolean;
-  title?: string;
-  width?: ControlWidth;
-}
-
-export type AddOptionsListControlProps = AddDataControlProps & Partial<OptionsListEmbeddableInput>;
-
-export type AddRangeSliderControlProps = AddDataControlProps & {
-  value?: RangeValue;
-};
-
-export type ControlGroupInputBuilder = typeof controlGroupInputBuilder;
-
-export const controlGroupInputBuilder = {
-  addDataControlFromField: async (
-    initialInput: Partial<ControlGroupInput>,
-    controlProps: AddDataControlProps
-  ) => {
-    const panelState = await getDataControlPanelState(initialInput, controlProps);
-    initialInput.panels = {
-      ...initialInput.panels,
-      [panelState.explicitInput.id]: panelState,
-    };
-  },
-  addOptionsListControl: (
-    initialInput: Partial<ControlGroupInput>,
-    controlProps: AddOptionsListControlProps
-  ) => {
-    const panelState = getOptionsListPanelState(initialInput, controlProps);
-    initialInput.panels = {
-      ...initialInput.panels,
-      [panelState.explicitInput.id]: panelState,
-    };
-  },
-  addRangeSliderControl: (
-    initialInput: Partial<ControlGroupInput>,
-    controlProps: AddRangeSliderControlProps
-  ) => {
-    const panelState = getRangeSliderPanelState(initialInput, controlProps);
-    initialInput.panels = {
-      ...initialInput.panels,
-      [panelState.explicitInput.id]: panelState,
-    };
-  },
-  addTimeSliderControl: (initialInput: Partial<ControlGroupInput>) => {
-    const panelState = getTimeSliderPanelState(initialInput);
-    initialInput.panels = {
-      ...initialInput.panels,
-      [panelState.explicitInput.id]: panelState,
-    };
-  },
-};
-
-export async function getDataControlPanelState(
-  input: Partial<ControlGroupInput>,
-  controlProps: AddDataControlProps
-) {
-  const { controlId, dataViewId, fieldName, title } = controlProps;
-  return {
-    type: await getCompatibleControlType({ dataViewId, fieldName }),
-    ...getPanelState(input, controlProps),
-    explicitInput: {
-      id: controlId ? controlId : uuidv4(),
-      dataViewId,
-      fieldName,
-      title: title ?? fieldName,
-    },
-  } as ControlPanelState<DataControlInput>;
-}
-
-export function getOptionsListPanelState(
-  input: Partial<ControlGroupInput>,
-  controlProps: AddOptionsListControlProps
-) {
-  const { controlId, dataViewId, fieldName, title, ...rest } = controlProps;
-  return {
-    type: OPTIONS_LIST_CONTROL,
-    ...getPanelState(input, controlProps),
-    explicitInput: {
-      id: controlId ? controlId : uuidv4(),
-      dataViewId,
-      fieldName,
-      title: title ?? fieldName,
-      ...rest,
-    },
-  } as ControlPanelState<DataControlInput>;
-}
-
-export function getRangeSliderPanelState(
-  input: Partial<ControlGroupInput>,
-  controlProps: AddRangeSliderControlProps
-) {
-  const { controlId, dataViewId, fieldName, title, ...rest } = controlProps;
-  return {
-    type: RANGE_SLIDER_CONTROL,
-    ...getPanelState(input, controlProps),
-    explicitInput: {
-      id: controlId ? controlId : uuidv4(),
-      dataViewId,
-      fieldName,
-      title: title ?? fieldName,
-      ...rest,
-    },
-  } as ControlPanelState<DataControlInput>;
-}
-
-export function getTimeSliderPanelState(input: Partial<ControlGroupInput>) {
-  return {
-    type: TIME_SLIDER_CONTROL,
-    order: getNextPanelOrder(input.panels),
-    grow: true,
-    width: 'large',
-    explicitInput: {
-      id: uuidv4(),
-      title: i18n.translate('controls.controlGroup.timeSlider.title', {
-        defaultMessage: 'Time slider',
-      }),
-    },
-  } as ControlPanelState<ControlInput>;
-}
-
-function getPanelState(input: Partial<ControlGroupInput>, controlProps: AddDataControlProps) {
-  return {
-    order: getNextPanelOrder(input.panels),
-    grow: controlProps.grow ?? input.defaultControlGrow ?? DEFAULT_CONTROL_GROW,
-    width: controlProps.width ?? input.defaultControlWidth ?? DEFAULT_CONTROL_WIDTH,
-  };
-}
diff --git a/src/plugins/controls/public/control_group/index.ts b/src/plugins/controls/public/control_group/index.ts
deleted file mode 100644
index e465f88a7ea73..0000000000000
--- a/src/plugins/controls/public/control_group/index.ts
+++ /dev/null
@@ -1,25 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export type { ControlGroupContainer } from './embeddable/control_group_container';
-export type { ControlGroupInput, ControlGroupOutput } from './types';
-
-export { ControlGroupContainerFactory } from './embeddable/control_group_container_factory';
-export { CONTROL_GROUP_TYPE } from './types';
-
-export { ACTION_DELETE_CONTROL, ACTION_EDIT_CONTROL } from './actions';
-
-export { controlGroupInputBuilder } from './external_api/control_group_input_builder';
-
-export { ControlGroupRenderer } from './external_api';
-export type {
-  ControlGroupRendererApi,
-  ControlGroupRendererProps,
-  ControlGroupCreationOptions,
-} from './external_api';
diff --git a/src/plugins/controls/public/control_group/state/control_group_diffing_integration.ts b/src/plugins/controls/public/control_group/state/control_group_diffing_integration.ts
deleted file mode 100644
index a9033ef22d124..0000000000000
--- a/src/plugins/controls/public/control_group/state/control_group_diffing_integration.ts
+++ /dev/null
@@ -1,79 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { isEqual } from 'lodash';
-import { AnyAction, Middleware } from 'redux';
-import { debounceTime, Observable, startWith, Subject, switchMap } from 'rxjs';
-
-import { compareFilters, COMPARE_ALL_OPTIONS } from '@kbn/es-query';
-import { ControlGroupContainer } from '..';
-import { persistableControlGroupInputIsEqual } from '../../../common';
-import { CHANGE_CHECK_DEBOUNCE } from '../../constants';
-import { controlGroupReducers } from './control_group_reducers';
-
-/**
- * An array of reducers which cannot cause unsaved changes. Unsaved changes only compares the explicit input
- * and the last saved input, so we can safely ignore any output reducers, and most componentState reducers.
- * This is only for performance reasons, because the diffing function itself can be quite heavy.
- */
-export const reducersToIgnore: Array<keyof typeof controlGroupReducers> = [
-  'setDefaultControlWidth',
-  'setDefaultControlGrow',
-];
-
-/**
- * Does an initial diff between @param initialInput and @param initialLastSavedInput, and created a middleware
- * which listens to the redux store and checks for & publishes the unsaved changes on dispatches.
- */
-export function startDiffingControlGroupState(this: ControlGroupContainer) {
-  const checkForUnsavedChangesSubject$ = new Subject<null>();
-  this.diffingSubscription.add(
-    checkForUnsavedChangesSubject$
-      .pipe(
-        startWith(null),
-        debounceTime(CHANGE_CHECK_DEBOUNCE),
-        switchMap(() => {
-          return new Observable((observer) => {
-            if (observer.closed) return;
-
-            const {
-              explicitInput: currentInput,
-              componentState: { lastSavedInput, lastSavedFilters },
-              output: { filters, timeslice },
-            } = this.getState();
-
-            const hasUnsavedChanges = !(
-              persistableControlGroupInputIsEqual(
-                currentInput,
-                lastSavedInput,
-                false // never diff selections for unsaved changes - compare the output filters instead
-              ) &&
-              compareFilters(filters ?? [], lastSavedFilters?.filters ?? [], COMPARE_ALL_OPTIONS) &&
-              isEqual(timeslice, lastSavedFilters?.timeslice)
-            );
-
-            this.unsavedChanges.next(hasUnsavedChanges ? this.getPersistableInput() : undefined);
-          });
-        })
-      )
-      .subscribe()
-  );
-  const diffingMiddleware: Middleware<AnyAction> = (store) => (next) => (action) => {
-    const dispatchedActionName = action.type.split('/')?.[1];
-    if (
-      dispatchedActionName &&
-      dispatchedActionName !== 'updateEmbeddableReduxOutput' && // ignore any generic output updates.
-      !reducersToIgnore.includes(dispatchedActionName)
-    ) {
-      checkForUnsavedChangesSubject$.next(null);
-    }
-    next(action);
-  };
-  return diffingMiddleware;
-}
diff --git a/src/plugins/controls/public/control_group/state/control_group_reducers.ts b/src/plugins/controls/public/control_group/state/control_group_reducers.ts
deleted file mode 100644
index cf68363ca594b..0000000000000
--- a/src/plugins/controls/public/control_group/state/control_group_reducers.ts
+++ /dev/null
@@ -1,85 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { PayloadAction } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/types/types-external';
-
-import { ControlWidth } from '../../types';
-import { ControlGroupComponentState, ControlGroupInput, ControlGroupReduxState } from '../types';
-
-export const controlGroupReducers = {
-  setControlWithInvalidSelectionsId: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupComponentState['controlWithInvalidSelectionsId']>
-  ) => {
-    state.componentState.controlWithInvalidSelectionsId = action.payload;
-  },
-  setLastSavedInput: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupComponentState['lastSavedInput']>
-  ) => {
-    state.componentState.lastSavedInput = action.payload;
-  },
-  setLastSavedFilters: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupComponentState['lastSavedFilters']>
-  ) => {
-    state.componentState.lastSavedFilters = action.payload;
-  },
-  setUnpublishedFilters: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupComponentState['unpublishedFilters']>
-  ) => {
-    state.componentState.unpublishedFilters = action.payload;
-  },
-  setControlStyle: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupInput['controlStyle']>
-  ) => {
-    state.explicitInput.controlStyle = action.payload;
-  },
-  setChainingSystem: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupInput['chainingSystem']>
-  ) => {
-    state.explicitInput.chainingSystem = action.payload;
-  },
-  setDefaultControlWidth: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupInput['defaultControlWidth']>
-  ) => {
-    state.explicitInput.defaultControlWidth = action.payload;
-  },
-  setDefaultControlGrow: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<ControlGroupInput['defaultControlGrow']>
-  ) => {
-    state.explicitInput.defaultControlGrow = action.payload;
-  },
-  setControlWidth: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<{ width: ControlWidth; embeddableId: string }>
-  ) => {
-    state.explicitInput.panels[action.payload.embeddableId].width = action.payload.width;
-  },
-  setControlGrow: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<{ grow: boolean; embeddableId: string }>
-  ) => {
-    state.explicitInput.panels[action.payload.embeddableId].grow = action.payload.grow;
-  },
-  setControlOrders: (
-    state: WritableDraft<ControlGroupReduxState>,
-    action: PayloadAction<{ ids: string[] }>
-  ) => {
-    action.payload.ids.forEach((id, index) => {
-      state.explicitInput.panels[id].order = index;
-    });
-  },
-};
diff --git a/src/plugins/controls/public/control_group/types.ts b/src/plugins/controls/public/control_group/types.ts
deleted file mode 100644
index 0e14e8816798d..0000000000000
--- a/src/plugins/controls/public/control_group/types.ts
+++ /dev/null
@@ -1,61 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { DataViewField } from '@kbn/data-views-plugin/common';
-import { ContainerOutput } from '@kbn/embeddable-plugin/public';
-import { Filter } from '@kbn/es-query';
-import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-
-import { ControlGroupInput, PersistableControlGroupInput } from '../../common/control_group/types';
-import { TimeSlice } from '../../common/types';
-
-export interface ControlFilterOutput {
-  filters?: Filter[];
-}
-export interface ControlTimesliceOutput {
-  timeslice?: TimeSlice;
-}
-
-export type ControlGroupFilterOutput = ControlFilterOutput & ControlTimesliceOutput;
-
-export type ControlGroupOutput = ContainerOutput &
-  ControlGroupFilterOutput & { dataViewIds: string[] };
-
-// public only - redux embeddable state type
-export type ControlGroupReduxState = ReduxEmbeddableState<
-  ControlGroupInput,
-  ControlGroupOutput,
-  ControlGroupComponentState
->;
-
-export type FieldFilterPredicate = (f: DataViewField) => boolean;
-
-export interface ControlGroupSettings {
-  showAddButton?: boolean;
-  staticDataViewId?: string;
-  editorConfig?: {
-    hideDataViewSelector?: boolean;
-    hideWidthSettings?: boolean;
-    hideAdditionalSettings?: boolean;
-  };
-}
-
-export type ControlGroupComponentState = ControlGroupSettings & {
-  lastSavedInput?: PersistableControlGroupInput;
-  lastSavedFilters?: ControlGroupFilterOutput;
-  unpublishedFilters?: ControlGroupFilterOutput;
-  controlWithInvalidSelectionsId?: string;
-};
-
-export {
-  CONTROL_GROUP_TYPE,
-  type ControlGroupInput,
-  type ControlPanelState,
-  type ControlsPanels,
-} from '../../common/control_group/types';
diff --git a/src/plugins/controls/public/hooks/use_child_embeddable.ts b/src/plugins/controls/public/hooks/use_child_embeddable.ts
deleted file mode 100644
index 8f9522ef1bcd9..0000000000000
--- a/src/plugins/controls/public/hooks/use_child_embeddable.ts
+++ /dev/null
@@ -1,37 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useEffect, useState } from 'react';
-import { ControlEmbeddable } from '../types';
-
-export const useChildEmbeddable = ({
-  untilEmbeddableLoaded,
-  embeddableId,
-  embeddableType,
-}: {
-  untilEmbeddableLoaded: (embeddableId: string) => Promise<ControlEmbeddable>;
-  embeddableId: string;
-  embeddableType: string;
-}) => {
-  const [embeddable, setEmbeddable] = useState<ControlEmbeddable>();
-
-  useEffect(() => {
-    let mounted = true;
-    (async () => {
-      const newEmbeddable = await untilEmbeddableLoaded(embeddableId);
-      if (!mounted) return;
-      setEmbeddable(newEmbeddable);
-    })();
-    return () => {
-      mounted = false;
-    };
-  }, [untilEmbeddableLoaded, embeddableId, embeddableType]);
-
-  return embeddable;
-};
diff --git a/src/plugins/controls/public/hooks/use_field_formatter.ts b/src/plugins/controls/public/hooks/use_field_formatter.ts
deleted file mode 100644
index 0b2c6a867cbbb..0000000000000
--- a/src/plugins/controls/public/hooks/use_field_formatter.ts
+++ /dev/null
@@ -1,45 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { useEffect, useState } from 'react';
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-
-import { pluginServices } from '../services';
-
-export const useFieldFormatter = ({
-  dataViewId,
-  fieldSpec,
-}: {
-  dataViewId?: string;
-  fieldSpec?: FieldSpec;
-}) => {
-  const {
-    dataViews: { get: getDataViewById },
-  } = pluginServices.getServices();
-  const [fieldFormatter, setFieldFormatter] = useState(() => (toFormat: any) => String(toFormat));
-
-  /**
-   * derive field formatter from fieldSpec and dataViewId
-   */
-  useEffect(() => {
-    (async () => {
-      if (!dataViewId || !fieldSpec) return;
-      // dataViews are cached, and should always be available without having to hit ES.
-      const dataView = await getDataViewById(dataViewId);
-      setFieldFormatter(
-        () =>
-          dataView?.getFormatterForField(fieldSpec).getConverterFor('text') ??
-          ((toFormat: any) => String(toFormat))
-      );
-    })();
-  }, [fieldSpec, dataViewId, getDataViewById]);
-
-  return fieldFormatter;
-};
diff --git a/src/plugins/controls/public/index.ts b/src/plugins/controls/public/index.ts
index 4ac77d3eed541..6a490248b8929 100644
--- a/src/plugins/controls/public/index.ts
+++ b/src/plugins/controls/public/index.ts
@@ -9,41 +9,27 @@
 
 import { ControlsPlugin } from './plugin';
 
-export type {
-  ControlGroupApi,
-  ControlGroupRuntimeState,
-  ControlGroupSerializedState,
-  ControlStateTransform,
-  ControlPanelState,
-} from './react_controls/control_group/types';
 export {
   controlGroupStateBuilder,
   type ControlGroupStateBuilder,
 } from './react_controls/control_group/utils/control_group_state_builder';
 
+export type { ControlGroupApi, ControlStateTransform } from './react_controls/control_group/types';
+
+export { ACTION_CLEAR_CONTROL, ACTION_DELETE_CONTROL, ACTION_EDIT_CONTROL } from './actions';
+
 export type {
   DataControlApi,
-  DefaultDataControlState,
   DataControlFactory,
   DataControlServices,
 } from './react_controls/controls/data_controls/types';
-export type { OptionsListControlState } from './react_controls/controls/data_controls/options_list_control/types';
-
-export { ACTION_EDIT_CONTROL } from './react_controls/actions/edit_control_action/edit_control_action';
 
 export {
-  ACTION_DELETE_CONTROL,
   ControlGroupRenderer,
-  type ControlGroupRendererProps,
-  type ControlGroupRendererApi,
   type ControlGroupCreationOptions,
-} from './control_group';
-
-export type { ControlWidth, ControlStyle } from '../common/types';
-
-/**
- * TODO: remove all exports below this when control group embeddable is removed
- */
+  type ControlGroupRendererApi,
+  type ControlGroupRendererProps,
+} from './react_controls/external_api';
 
 export {
   CONTROL_GROUP_TYPE,
@@ -51,14 +37,14 @@ export {
   RANGE_SLIDER_CONTROL,
   TIME_SLIDER_CONTROL,
 } from '../common';
-
-export {
-  type ControlGroupContainer,
-  ControlGroupContainerFactory,
-  type ControlGroupInput,
-  type ControlGroupOutput,
-  controlGroupInputBuilder,
-} from './control_group';
+export type {
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelState,
+  ControlPanelsState,
+  DefaultDataControlState,
+} from '../common';
+export type { OptionsListControlState } from '../common/options_list';
 
 export function plugin() {
   return new ControlsPlugin();
diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss
deleted file mode 100644
index f7175b74c792e..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-.optionsList--filterGroup {
-  width: 100%;
-  box-shadow: none;
-  background-color: transparent;
-
-  .optionsList__inputButtonOverride {
-    max-inline-size: none; // overwrite the default `max-inline-size` that's coming from EUI
-  }
-
-  .optionsList--filterBtn {
-    height: $euiButtonHeightSmall;
-
-    &.optionsList--filterBtnPlaceholder {
-      color: $euiTextSubduedColor;
-      font-weight: $euiFontWeightRegular;
-    }
-
-    .optionsList__selections {
-      overflow: hidden !important;
-    }
-
-    .optionsList__filter {
-      font-weight: $euiFontWeightMedium;
-    }
-
-    .optionsList__filterInvalid {
-      color: $euiColorWarningText;
-    }
-
-    .optionsList__negateLabel {
-      font-weight: $euiFontWeightSemiBold;
-      font-size: $euiSizeM;
-      color: $euiColorDanger;
-    }
-
-    .optionsList--selectionText {
-      flex-grow: 1;
-      text-align: left;
-    }
-  }
-
-}
-
-.optionsList--sortPopover {
-  width: $euiSizeXL * 7;
-}
-
-.optionsList__existsFilter {
-  font-style: italic;
-  font-weight: $euiFontWeightMedium;
-}
-
-.optionsList__popoverOverride {
-  @include euiBottomShadowMedium;
-  filter: none; // overwrite the default popover shadow
-}
-
-.optionsList__popover {
-  .optionsList__actions {
-    padding: 0 $euiSizeS;
-    border-bottom: $euiBorderThin;
-    border-color: darken($euiColorLightestShade, 2%);
-
-    .optionsList__searchRow {
-      padding-top: $euiSizeS
-    }
-
-    .optionsList__actionsRow {
-      margin: calc($euiSizeS / 2) 0 !important;
-
-      .optionsList__actionBarDivider {
-        height: $euiSize;
-        border-right: $euiBorderThin;
-      }
-    }
-  }
-
-  .optionsList-control-ignored-selection-title {
-    padding-left: $euiSizeM;
-  }
-
-  .optionsList__selectionInvalid {
-    color: $euiColorWarningText;
-  }
-
-  .optionslist--loadingMoreGroupLabel {
-    text-align: center;
-    padding: $euiSizeM;
-    font-style: italic;
-    height:  $euiSizeXXL !important;
-  }
-
-  .optionslist--endOfOptionsGroupLabel {
-    text-align: center;
-    font-size: $euiSizeM;
-    height:  auto !important;
-    color: $euiTextSubduedColor;
-    padding: $euiSizeM;
-  }
-}
diff --git a/src/plugins/controls/public/options_list/components/options_list_control.test.tsx b/src/plugins/controls/public/options_list/components/options_list_control.test.tsx
deleted file mode 100644
index e55ef55f8cab1..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_control.test.tsx
+++ /dev/null
@@ -1,62 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { render } from '@testing-library/react';
-import { OptionsListEmbeddableContext } from '../embeddable/options_list_embeddable';
-import { OptionsListComponentState, OptionsListReduxState } from '../types';
-import { mockOptionsListEmbeddable } from '../../../common/mocks';
-import { OptionsListControl } from './options_list_control';
-import { BehaviorSubject } from 'rxjs';
-import { OptionsListEmbeddableInput } from '..';
-import { ControlOutput } from '../../types';
-
-describe('Options list control', () => {
-  const defaultProps = {
-    typeaheadSubject: new BehaviorSubject(''),
-    loadMoreSubject: new BehaviorSubject(10),
-  };
-
-  interface MountOptions {
-    componentState: Partial<OptionsListComponentState>;
-    explicitInput: Partial<OptionsListEmbeddableInput>;
-    output: Partial<ControlOutput>;
-  }
-
-  async function mountComponent(options?: Partial<MountOptions>) {
-    const optionsListEmbeddable = await mockOptionsListEmbeddable({
-      componentState: options?.componentState ?? {},
-      explicitInput: options?.explicitInput ?? {},
-      output: options?.output ?? {},
-    } as Partial<OptionsListReduxState>);
-
-    return render(
-      <OptionsListEmbeddableContext.Provider value={optionsListEmbeddable}>
-        <OptionsListControl {...defaultProps} />
-      </OptionsListEmbeddableContext.Provider>
-    );
-  }
-
-  test('if exclude = false and existsSelected = true, then the option should read "Exists"', async () => {
-    const control = await mountComponent({
-      explicitInput: { id: 'testExists', exclude: false, existsSelected: true },
-    });
-    const existsOption = control.getByTestId('optionsList-control-testExists');
-    expect(existsOption).toHaveTextContent('Exists');
-  });
-
-  test('if exclude = true and existsSelected = true, then the option should read "Does not exist"', async () => {
-    const control = await mountComponent({
-      explicitInput: { id: 'testDoesNotExist', exclude: true, existsSelected: true },
-    });
-    const existsOption = control.getByTestId('optionsList-control-testDoesNotExist');
-    expect(existsOption).toHaveTextContent('DOES NOT Exist');
-  });
-});
diff --git a/src/plugins/controls/public/options_list/components/options_list_control.tsx b/src/plugins/controls/public/options_list/components/options_list_control.tsx
deleted file mode 100644
index 913b24bfce2f0..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_control.tsx
+++ /dev/null
@@ -1,245 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import classNames from 'classnames';
-import { debounce, isEmpty } from 'lodash';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Subject } from 'rxjs';
-
-import {
-  EuiFilterButton,
-  EuiFilterGroup,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiInputPopover,
-  EuiToken,
-  EuiToolTip,
-  htmlIdGenerator,
-} from '@elastic/eui';
-
-import { OptionsListSelection } from '../../../common/options_list/options_list_selections';
-import { MIN_POPOVER_WIDTH } from '../../constants';
-import { ControlError } from '../../control_group/component/control_error_component';
-import { useFieldFormatter } from '../../hooks/use_field_formatter';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { MAX_OPTIONS_LIST_REQUEST_SIZE } from '../types';
-import { OptionsListPopover } from './options_list_popover';
-import { OptionsListStrings } from './options_list_strings';
-
-import './options_list.scss';
-
-export const OptionsListControl = ({
-  typeaheadSubject,
-  loadMoreSubject,
-}: {
-  typeaheadSubject: Subject<string>;
-  loadMoreSubject: Subject<number>;
-}) => {
-  const optionsList = useOptionsList();
-  const popoverId = useMemo(() => htmlIdGenerator()(), []);
-  const error = optionsList.select((state) => state.componentState.error);
-  const isPopoverOpen = optionsList.select((state) => state.componentState.popoverOpen);
-  const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
-  const fieldSpec = optionsList.select((state) => state.componentState.field);
-
-  const id = optionsList.select((state) => state.explicitInput.id);
-  const exclude = optionsList.select((state) => state.explicitInput.exclude);
-  const fieldName = optionsList.select((state) => state.explicitInput.fieldName);
-  const fieldTitle = optionsList.select((state) => state.explicitInput.title);
-  const placeholder = optionsList.select((state) => state.explicitInput.placeholder);
-  const controlStyle = optionsList.select((state) => state.explicitInput.controlStyle);
-  const singleSelect = optionsList.select((state) => state.explicitInput.singleSelect);
-  const existsSelected = optionsList.select((state) => state.explicitInput.existsSelected);
-  const selectedOptions = optionsList.select((state) => state.explicitInput.selectedOptions);
-
-  const loading = optionsList.select((state) => state.output.loading);
-  const dataViewId = optionsList.select((state) => state.output.dataViewId);
-  const fieldFormatter = useFieldFormatter({ dataViewId, fieldSpec });
-
-  useEffect(() => {
-    return () => {
-      optionsList.dispatch.setPopoverOpen(false); // on unmount, close the popover
-    };
-  }, [optionsList]);
-
-  // debounce loading state so loading doesn't flash when user types
-  const [debouncedLoading, setDebouncedLoading] = useState(true);
-  const debounceSetLoading = useMemo(
-    () =>
-      debounce((latestLoading: boolean) => {
-        setDebouncedLoading(latestLoading);
-      }, 100),
-    []
-  );
-  useEffect(() => debounceSetLoading(loading ?? false), [loading, debounceSetLoading]);
-
-  // remove all other selections if this control is single select
-  useEffect(() => {
-    if (singleSelect && selectedOptions && selectedOptions?.length > 1) {
-      optionsList.dispatch.replaceSelection(selectedOptions[0]);
-    }
-  }, [selectedOptions, singleSelect, optionsList.dispatch]);
-
-  const updateSearchString = useCallback(
-    (newSearchString: string) => {
-      typeaheadSubject.next(newSearchString);
-      optionsList.dispatch.setSearchString(newSearchString);
-    },
-    [typeaheadSubject, optionsList.dispatch]
-  );
-
-  const loadMoreSuggestions = useCallback(
-    (cardinality: number) => {
-      loadMoreSubject.next(Math.min(cardinality, MAX_OPTIONS_LIST_REQUEST_SIZE));
-    },
-    [loadMoreSubject]
-  );
-
-  const delimiter = useMemo(
-    () => OptionsListStrings.control.getSeparator(fieldSpec?.type),
-    [fieldSpec?.type]
-  );
-
-  const { hasSelections, selectionDisplayNode, selectedOptionsCount } = useMemo(() => {
-    return {
-      hasSelections: !isEmpty(selectedOptions),
-      selectedOptionsCount: selectedOptions?.length,
-      selectionDisplayNode: (
-        <EuiFlexGroup alignItems="center" responsive={false} gutterSize="xs">
-          <EuiFlexItem className="optionsList__selections">
-            <div className="eui-textTruncate">
-              {exclude && (
-                <>
-                  <span className="optionsList__negateLabel">
-                    {existsSelected
-                      ? OptionsListStrings.control.getExcludeExists()
-                      : OptionsListStrings.control.getNegate()}
-                  </span>{' '}
-                </>
-              )}
-              {existsSelected ? (
-                <span className={`optionsList__existsFilter`}>
-                  {OptionsListStrings.controlAndPopover.getExists(+Boolean(exclude))}
-                </span>
-              ) : (
-                <>
-                  {selectedOptions?.length
-                    ? selectedOptions.map((value: OptionsListSelection, i, { length }) => {
-                        const text = `${fieldFormatter(value)}${
-                          i + 1 === length ? '' : delimiter
-                        } `;
-                        const isInvalid = invalidSelections?.includes(value);
-                        return (
-                          <span
-                            key={text} // each item must have a unique key to prevent warning
-                            className={`optionsList__filter ${
-                              isInvalid ? 'optionsList__filterInvalid' : ''
-                            }`}
-                          >
-                            {text}
-                          </span>
-                        );
-                      })
-                    : null}
-                </>
-              )}
-            </div>
-          </EuiFlexItem>
-          {invalidSelections && invalidSelections.length > 0 && (
-            <EuiFlexItem grow={false}>
-              <EuiToolTip
-                position="top"
-                content={OptionsListStrings.control.getInvalidSelectionWarningLabel(
-                  invalidSelections.length
-                )}
-                delay="long"
-              >
-                <EuiToken
-                  tabIndex={0}
-                  iconType="alert"
-                  size="s"
-                  color="euiColorVis5"
-                  shape="square"
-                  fill="dark"
-                  title={OptionsListStrings.control.getInvalidSelectionWarningLabel(
-                    invalidSelections.length
-                  )}
-                  css={{ verticalAlign: 'text-bottom' }} // Align with the notification badge
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      ),
-    };
-  }, [selectedOptions, exclude, existsSelected, fieldFormatter, delimiter, invalidSelections]);
-
-  const button = (
-    <>
-      <EuiFilterButton
-        badgeColor="success"
-        iconType="arrowDown"
-        isLoading={debouncedLoading}
-        className={classNames('optionsList--filterBtn', {
-          'optionsList--filterBtnSingle': controlStyle !== 'twoLine',
-          'optionsList--filterBtnPlaceholder': !hasSelections,
-        })}
-        data-test-subj={`optionsList-control-${id}`}
-        onClick={() => optionsList.dispatch.setPopoverOpen(!isPopoverOpen)}
-        isSelected={isPopoverOpen}
-        numActiveFilters={selectedOptionsCount}
-        hasActiveFilters={Boolean(selectedOptionsCount)}
-        textProps={{ className: 'optionsList--selectionText' }}
-        aria-label={fieldTitle ?? fieldName}
-        aria-expanded={isPopoverOpen}
-        aria-controls={popoverId}
-        role="combobox"
-      >
-        {hasSelections || existsSelected
-          ? selectionDisplayNode
-          : placeholder ?? OptionsListStrings.control.getPlaceholder()}
-      </EuiFilterButton>
-    </>
-  );
-
-  return error ? (
-    <ControlError error={error} />
-  ) : (
-    <EuiFilterGroup
-      className={classNames('optionsList--filterGroup', {
-        'optionsList--filterGroupSingle': controlStyle !== 'twoLine',
-      })}
-      compressed
-    >
-      <EuiInputPopover
-        id={popoverId}
-        ownFocus
-        input={button}
-        hasArrow={false}
-        repositionOnScroll
-        isOpen={isPopoverOpen}
-        panelPaddingSize="none"
-        panelMinWidth={MIN_POPOVER_WIDTH}
-        className="optionsList__inputButtonOverride"
-        initialFocus={'[data-test-subj=optionsList-control-search-input]'}
-        closePopover={() => optionsList.dispatch.setPopoverOpen(false)}
-        panelClassName="optionsList__popoverOverride"
-        panelProps={{
-          'aria-label': OptionsListStrings.popover.getAriaLabel(fieldTitle ?? fieldName),
-        }}
-      >
-        <OptionsListPopover
-          isLoading={debouncedLoading}
-          updateSearchString={updateSearchString}
-          loadMoreSuggestions={loadMoreSuggestions}
-        />
-      </EuiInputPopover>
-    </EuiFilterGroup>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_editor_options.tsx b/src/plugins/controls/public/options_list/components/options_list_editor_options.tsx
deleted file mode 100644
index b8f89d7bfe2b4..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_editor_options.tsx
+++ /dev/null
@@ -1,204 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useEffect, useMemo, useState } from 'react';
-import useAsync from 'react-use/lib/useAsync';
-
-import { Direction, EuiFormRow, EuiLoadingSpinner, EuiRadioGroup, EuiSwitch } from '@elastic/eui';
-
-import {
-  getCompatibleSearchTechniques,
-  OptionsListSearchTechnique,
-} from '../../../common/options_list/suggestions_searching';
-import {
-  getCompatibleSortingTypes,
-  OptionsListSortBy,
-  OPTIONS_LIST_DEFAULT_SORT,
-} from '../../../common/options_list/suggestions_sorting';
-import { pluginServices } from '../../services';
-import { OptionsListStrings } from './options_list_strings';
-import { ControlSettingTooltipLabel } from '../../components/control_setting_tooltip_label';
-import { OptionsListEmbeddableInput } from '..';
-import { ControlEditorProps } from '../../types';
-
-const selectionOptions = [
-  {
-    id: 'multi',
-    label: OptionsListStrings.editor.selectionTypes.multi.getLabel(),
-    'data-test-subj': 'optionsListControl__multiSearchOptionAdditionalSetting',
-  },
-  {
-    id: 'single',
-    label: OptionsListStrings.editor.selectionTypes.single.getLabel(),
-    'data-test-subj': 'optionsListControl__singleSearchOptionAdditionalSetting',
-  },
-];
-
-const allSearchOptions = [
-  {
-    id: 'prefix',
-    label: (
-      <ControlSettingTooltipLabel
-        label={OptionsListStrings.editor.searchTypes.prefix.getLabel()}
-        tooltip={OptionsListStrings.editor.searchTypes.prefix.getTooltip()}
-      />
-    ),
-    'data-test-subj': 'optionsListControl__prefixSearchOptionAdditionalSetting',
-  },
-  {
-    id: 'wildcard',
-    label: (
-      <ControlSettingTooltipLabel
-        label={OptionsListStrings.editor.searchTypes.wildcard.getLabel()}
-        tooltip={OptionsListStrings.editor.searchTypes.wildcard.getTooltip()}
-      />
-    ),
-    'data-test-subj': 'optionsListControl__wildcardSearchOptionAdditionalSetting',
-  },
-  {
-    id: 'exact',
-    label: (
-      <ControlSettingTooltipLabel
-        label={OptionsListStrings.editor.searchTypes.exact.getLabel()}
-        tooltip={OptionsListStrings.editor.searchTypes.exact.getTooltip()}
-      />
-    ),
-    'data-test-subj': 'optionsListControl__exactSearchOptionAdditionalSetting',
-  },
-];
-
-interface OptionsListEditorState {
-  sortDirection: Direction;
-  runPastTimeout?: boolean;
-  searchTechnique?: OptionsListSearchTechnique;
-  singleSelect?: boolean;
-  hideExclude?: boolean;
-  hideExists?: boolean;
-  hideSort?: boolean;
-  sortBy: OptionsListSortBy;
-}
-
-export const OptionsListEditorOptions = ({
-  initialInput,
-  onChange,
-  fieldType,
-}: ControlEditorProps<OptionsListEmbeddableInput>) => {
-  const [state, setState] = useState<OptionsListEditorState>({
-    sortDirection: initialInput?.sort?.direction ?? OPTIONS_LIST_DEFAULT_SORT.direction,
-    sortBy: initialInput?.sort?.by ?? OPTIONS_LIST_DEFAULT_SORT.by,
-    searchTechnique: initialInput?.searchTechnique,
-    runPastTimeout: initialInput?.runPastTimeout,
-    singleSelect: initialInput?.singleSelect,
-    hideExclude: initialInput?.hideExclude,
-    hideExists: initialInput?.hideExists,
-    hideSort: initialInput?.hideSort,
-  });
-
-  const { loading: waitingForAllowExpensiveQueries, value: allowExpensiveQueries } =
-    useAsync(async () => {
-      const { optionsList: optionsListService } = pluginServices.getServices();
-      return optionsListService.getAllowExpensiveQueries();
-    }, []);
-
-  const compatibleSearchTechniques = useMemo(
-    () => getCompatibleSearchTechniques(fieldType),
-    [fieldType]
-  );
-
-  const searchOptions = useMemo(() => {
-    return allSearchOptions.filter((searchOption) => {
-      return compatibleSearchTechniques.includes(searchOption.id as OptionsListSearchTechnique);
-    });
-  }, [compatibleSearchTechniques]);
-
-  useEffect(() => {
-    // when field type changes, ensure that the selected sort type is still valid
-    if (!getCompatibleSortingTypes(fieldType).includes(state.sortBy)) {
-      onChange({ sort: OPTIONS_LIST_DEFAULT_SORT });
-      setState((s) => ({
-        ...s,
-        sortBy: OPTIONS_LIST_DEFAULT_SORT.by,
-        sortDirection: OPTIONS_LIST_DEFAULT_SORT.direction,
-      }));
-    }
-  }, [fieldType, onChange, state.sortBy]);
-
-  useEffect(() => {
-    // when field type changes, ensure that the selected search technique is still valid;
-    // if the selected search technique **isn't** valid, reset to the default
-    const searchTechnique =
-      initialInput?.searchTechnique &&
-      compatibleSearchTechniques.includes(initialInput.searchTechnique)
-        ? initialInput.searchTechnique
-        : compatibleSearchTechniques[0];
-    onChange({ searchTechnique });
-    setState((s) => ({
-      ...s,
-      searchTechnique,
-    }));
-  }, [compatibleSearchTechniques, onChange, initialInput]);
-
-  return (
-    <>
-      <EuiFormRow
-        label={OptionsListStrings.editor.getSelectionOptionsTitle()}
-        data-test-subj="optionsListControl__selectionOptionsRadioGroup"
-      >
-        <EuiRadioGroup
-          options={selectionOptions}
-          idSelected={state.singleSelect ? 'single' : 'multi'}
-          onChange={(id) => {
-            const newSingleSelect = id === 'single';
-            onChange({ singleSelect: newSingleSelect });
-            setState((s) => ({ ...s, singleSelect: newSingleSelect }));
-          }}
-        />
-      </EuiFormRow>
-      {waitingForAllowExpensiveQueries ? (
-        <EuiFormRow>
-          <EuiLoadingSpinner size="l" />
-        </EuiFormRow>
-      ) : (
-        allowExpensiveQueries &&
-        compatibleSearchTechniques.length > 1 && (
-          <EuiFormRow
-            label={OptionsListStrings.editor.getSearchOptionsTitle()}
-            data-test-subj="optionsListControl__searchOptionsRadioGroup"
-          >
-            <EuiRadioGroup
-              options={searchOptions}
-              idSelected={state.searchTechnique}
-              onChange={(id) => {
-                const searchTechnique = id as OptionsListSearchTechnique;
-                onChange({ searchTechnique });
-                setState((s) => ({ ...s, searchTechnique }));
-              }}
-            />
-          </EuiFormRow>
-        )
-      )}
-      <EuiFormRow label={OptionsListStrings.editor.getAdditionalSettingsTitle()}>
-        <EuiSwitch
-          label={
-            <ControlSettingTooltipLabel
-              label={OptionsListStrings.editor.getRunPastTimeoutTitle()}
-              tooltip={OptionsListStrings.editor.getRunPastTimeoutTooltip()}
-            />
-          }
-          checked={Boolean(state.runPastTimeout)}
-          onChange={() => {
-            onChange({ runPastTimeout: !state.runPastTimeout });
-            setState((s) => ({ ...s, runPastTimeout: !s.runPastTimeout }));
-          }}
-          data-test-subj={'optionsListControl__runPastTimeoutAdditionalSetting'}
-        />
-      </EuiFormRow>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx
deleted file mode 100644
index 62a79baf62e8c..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx
+++ /dev/null
@@ -1,453 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-import { stubDataView } from '@kbn/data-views-plugin/common/data_view.stub';
-import { render, RenderResult, within } from '@testing-library/react';
-import userEvent, { type UserEvent } from '@testing-library/user-event';
-
-import { mockOptionsListEmbeddable } from '../../../common/mocks';
-import { pluginServices } from '../../services';
-import { OptionsListEmbeddableContext } from '../embeddable/options_list_embeddable';
-import { OptionsListComponentState, OptionsListReduxState } from '../types';
-import { OptionsListPopover, OptionsListPopoverProps } from './options_list_popover';
-import { OptionsListEmbeddableInput } from '..';
-import { ControlOutput } from '../../types';
-
-describe('Options list popover', () => {
-  let user: UserEvent;
-
-  const defaultProps = {
-    isLoading: false,
-    updateSearchString: jest.fn(),
-    loadMoreSuggestions: jest.fn(),
-  };
-
-  interface MountOptions {
-    componentState: Partial<OptionsListComponentState>;
-    explicitInput: Partial<OptionsListEmbeddableInput>;
-    output: Partial<ControlOutput>;
-    popoverProps: Partial<OptionsListPopoverProps>;
-  }
-
-  async function mountComponent(options?: Partial<MountOptions>) {
-    const compProps = { ...defaultProps, ...(options?.popoverProps ?? {}) };
-    const optionsListEmbeddable = await mockOptionsListEmbeddable({
-      componentState: options?.componentState ?? {},
-      explicitInput: options?.explicitInput ?? {},
-      output: options?.output ?? {},
-    } as Partial<OptionsListReduxState>);
-
-    return render(
-      <OptionsListEmbeddableContext.Provider value={optionsListEmbeddable}>
-        <OptionsListPopover {...compProps} />
-      </OptionsListEmbeddableContext.Provider>
-    );
-  }
-
-  const clickShowOnlySelections = async (popover: RenderResult) => {
-    const showOnlySelectedButton = popover.getByTestId('optionsList-control-show-only-selected');
-    await user.click(showOnlySelectedButton);
-  };
-
-  beforeAll(() => {
-    jest.useFakeTimers();
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  beforeEach(() => {
-    // Workaround for timeout via https://github.com/testing-library/user-event/issues/833#issuecomment-1171452841
-    user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-    jest.clearAllTimers();
-  });
-
-  test('no available options', async () => {
-    const popover = await mountComponent({ componentState: { availableOptions: [] } });
-    const availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-    const noOptionsDiv = within(availableOptionsDiv).getByTestId(
-      'optionsList-control-noSelectionsMessage'
-    );
-    expect(noOptionsDiv).toBeInTheDocument();
-  });
-
-  describe('show only selected', () => {
-    test('display error message when the show only selected toggle is true but there are no selections', async () => {
-      const popover = await mountComponent();
-      await clickShowOnlySelections(popover);
-      const availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      const noSelectionsDiv = within(availableOptionsDiv).getByTestId(
-        'optionsList-control-selectionsEmptyMessage'
-      );
-      expect(noSelectionsDiv).toBeInTheDocument();
-    });
-
-    test('show only selected options', async () => {
-      const selections = ['woof', 'bark'];
-      const popover = await mountComponent({
-        explicitInput: { selectedOptions: selections },
-      });
-      await clickShowOnlySelections(popover);
-      const availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      const availableOptionsList = within(availableOptionsDiv).getByRole('listbox');
-      const availableOptions = within(availableOptionsList).getAllByRole('option');
-      availableOptions.forEach((child, i) => {
-        expect(child).toHaveTextContent(`${selections[i]}. Checked option.`);
-      });
-    });
-
-    test('disable search and sort when show only selected toggle is true', async () => {
-      const selections = ['woof', 'bark'];
-      const popover = await mountComponent({
-        explicitInput: { selectedOptions: selections },
-        componentState: { field: { type: 'string' } as any as FieldSpec },
-      });
-      let searchBox = popover.getByTestId('optionsList-control-search-input');
-      let sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      expect(searchBox).not.toBeDisabled();
-      expect(sortButton).not.toBeDisabled();
-
-      await clickShowOnlySelections(popover);
-      searchBox = popover.getByTestId('optionsList-control-search-input');
-      sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      expect(searchBox).toBeDisabled();
-      expect(sortButton).toBeDisabled();
-    });
-  });
-
-  describe('invalid selections', () => {
-    test('test single invalid selection', async () => {
-      const popover = await mountComponent({
-        explicitInput: {
-          selectedOptions: ['bark', 'woof'],
-        },
-        componentState: {
-          availableOptions: [{ value: 'bark', docCount: 75 }],
-          validSelections: ['bark'],
-          invalidSelections: ['woof'],
-        },
-      });
-      const validSelection = popover.getByTestId('optionsList-control-selection-bark');
-      expect(validSelection).toHaveTextContent('bark. Checked option.');
-      expect(
-        within(validSelection).getByTestId('optionsList-document-count-badge')
-      ).toHaveTextContent('75');
-      const title = popover.getByTestId('optionList__invalidSelectionLabel');
-      expect(title).toHaveTextContent('Invalid selection');
-      const invalidSelection = popover.getByTestId('optionsList-control-invalid-selection-woof');
-      expect(invalidSelection).toHaveTextContent('woof. Checked option.');
-      expect(invalidSelection).toHaveClass('optionsList__selectionInvalid');
-    });
-
-    test('test title when multiple invalid selections', async () => {
-      const popover = await mountComponent({
-        explicitInput: { selectedOptions: ['bark', 'woof', 'meow'] },
-        componentState: {
-          availableOptions: [{ value: 'bark', docCount: 75 }],
-          validSelections: ['bark'],
-          invalidSelections: ['woof', 'meow'],
-        },
-      });
-      const title = popover.getByTestId('optionList__invalidSelectionLabel');
-      expect(title).toHaveTextContent('Invalid selections');
-    });
-  });
-
-  describe('include/exclude toggle', () => {
-    test('should default to exclude = false', async () => {
-      const popover = await mountComponent();
-      const includeButton = popover.getByTestId('optionsList__includeResults');
-      const excludeButton = popover.getByTestId('optionsList__excludeResults');
-      expect(includeButton).toHaveAttribute('aria-pressed', 'true');
-      expect(excludeButton).toHaveAttribute('aria-pressed', 'false');
-    });
-
-    test('if exclude = true, select appropriate button in button group', async () => {
-      const popover = await mountComponent({
-        explicitInput: { exclude: true },
-      });
-      const includeButton = popover.getByTestId('optionsList__includeResults');
-      const excludeButton = popover.getByTestId('optionsList__excludeResults');
-      expect(includeButton).toHaveAttribute('aria-pressed', 'false');
-      expect(excludeButton).toHaveAttribute('aria-pressed', 'true');
-    });
-  });
-
-  describe('"Exists" option', () => {
-    test('clicking another option unselects "Exists"', async () => {
-      const popover = await mountComponent({
-        explicitInput: { existsSelected: true },
-        componentState: { field: { type: 'string' } as FieldSpec },
-      });
-      const woofOption = popover.getByTestId('optionsList-control-selection-woof');
-      await user.click(woofOption);
-
-      const availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      const availableOptionsList = within(availableOptionsDiv).getByRole('listbox');
-      const selectedOptions = within(availableOptionsList).getAllByRole('option', {
-        checked: true,
-      });
-      expect(selectedOptions).toHaveLength(1);
-      expect(selectedOptions[0]).toHaveTextContent('woof. Checked option.');
-    });
-
-    test('clicking "Exists" unselects all other selections', async () => {
-      const selections = ['woof', 'bark'];
-      const popover = await mountComponent({
-        explicitInput: { existsSelected: false, selectedOptions: selections },
-        componentState: { field: { type: 'number' } as FieldSpec },
-      });
-      const existsOption = popover.getByTestId('optionsList-control-selection-exists');
-      let availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      let checkedOptions = within(availableOptionsDiv).getAllByRole('option', { checked: true });
-      expect(checkedOptions).toHaveLength(2);
-      expect(checkedOptions[0]).toHaveTextContent('woof. Checked option.');
-      expect(checkedOptions[1]).toHaveTextContent('bark. Checked option.');
-
-      await user.click(existsOption);
-      availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      checkedOptions = within(availableOptionsDiv).getAllByRole('option', { checked: true });
-      expect(checkedOptions).toHaveLength(1);
-      expect(checkedOptions[0]).toHaveTextContent('Exists. Checked option.');
-    });
-
-    test('if existsSelected = false and no suggestions, then "Exists" does not show up', async () => {
-      const popover = await mountComponent({
-        componentState: { availableOptions: [] },
-        explicitInput: { existsSelected: false },
-      });
-      const existsOption = popover.queryByTestId('optionsList-control-selection-exists');
-      expect(existsOption).toBeNull();
-    });
-
-    test('if existsSelected = true, "Exists" is the only option when "Show only selected options" is toggled', async () => {
-      const popover = await mountComponent({
-        explicitInput: { existsSelected: true },
-      });
-      await clickShowOnlySelections(popover);
-      const availableOptionsDiv = popover.getByTestId('optionsList-control-available-options');
-      const availableOptionsList = within(availableOptionsDiv).getByRole('listbox');
-      const availableOptions = within(availableOptionsList).getAllByRole('option');
-      expect(availableOptions[0]).toHaveTextContent('Exists. Checked option.');
-    });
-  });
-
-  describe('sorting suggestions', () => {
-    test('when sorting suggestions, show both sorting types for keyword field', async () => {
-      const popover = await mountComponent({
-        componentState: {
-          field: { name: 'Test keyword field', type: 'keyword' } as FieldSpec,
-        },
-      });
-      const sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      await user.click(sortButton);
-
-      expect(popover.getByTestId('optionsListControl__sortingOptions')).toBeInTheDocument();
-
-      const sortingOptionsDiv = popover.getByTestId('optionsListControl__sortingOptions');
-      const optionsText = within(sortingOptionsDiv)
-        .getAllByRole('option')
-        .map((el) => el.textContent);
-      expect(optionsText).toEqual(['By document count. Checked option.', 'Alphabetically']);
-    });
-
-    test('sorting popover selects appropriate sorting type on load', async () => {
-      const popover = await mountComponent({
-        explicitInput: { sort: { by: '_key', direction: 'asc' } },
-        componentState: {
-          field: { name: 'Test keyword field', type: 'keyword' } as FieldSpec,
-        },
-      });
-      const sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      await user.click(sortButton);
-
-      expect(popover.getByTestId('optionsListControl__sortingOptions')).toBeInTheDocument();
-
-      const sortingOptionsDiv = popover.getByTestId('optionsListControl__sortingOptions');
-      const optionsText = within(sortingOptionsDiv)
-        .getAllByRole('option')
-        .map((el) => el.textContent);
-      expect(optionsText).toEqual(['By document count', 'Alphabetically. Checked option.']);
-
-      const ascendingButton = popover.getByTestId('optionsList__sortOrder_asc');
-      expect(ascendingButton).toHaveClass('euiButtonGroupButton-isSelected');
-      const descendingButton = popover.getByTestId('optionsList__sortOrder_desc');
-      expect(descendingButton).not.toHaveClass('euiButtonGroupButton-isSelected');
-    });
-
-    test('when sorting suggestions, only show document count sorting for IP fields', async () => {
-      const popover = await mountComponent({
-        componentState: { field: { name: 'Test IP field', type: 'ip' } as FieldSpec },
-      });
-      const sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      await user.click(sortButton);
-
-      expect(popover.getByTestId('optionsListControl__sortingOptions')).toBeInTheDocument();
-
-      const sortingOptionsDiv = popover.getByTestId('optionsListControl__sortingOptions');
-      const optionsText = within(sortingOptionsDiv)
-        .getAllByRole('option')
-        .map((el) => el.textContent);
-      expect(optionsText).toEqual(['By document count. Checked option.']);
-    });
-
-    test('when sorting suggestions, show "By date" sorting option for date fields', async () => {
-      const popover = await mountComponent({
-        componentState: { field: { name: 'Test date field', type: 'date' } as FieldSpec },
-      });
-      const sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      await user.click(sortButton);
-
-      expect(popover.getByTestId('optionsListControl__sortingOptions')).toBeInTheDocument();
-
-      const sortingOptionsDiv = popover.getByTestId('optionsListControl__sortingOptions');
-      const optionsText = within(sortingOptionsDiv)
-        .getAllByRole('option')
-        .map((el) => el.textContent);
-      expect(optionsText).toEqual(['By document count. Checked option.', 'By date']);
-    });
-
-    test('when sorting suggestions, show "Numerically" sorting option for number fields', async () => {
-      const popover = await mountComponent({
-        componentState: { field: { name: 'Test number field', type: 'number' } as FieldSpec },
-      });
-      const sortButton = popover.getByTestId('optionsListControl__sortingOptionsButton');
-      await user.click(sortButton);
-
-      expect(popover.getByTestId('optionsListControl__sortingOptions')).toBeInTheDocument();
-
-      const sortingOptionsDiv = popover.getByTestId('optionsListControl__sortingOptions');
-      const optionsText = within(sortingOptionsDiv)
-        .getAllByRole('option')
-        .map((el) => el.textContent);
-      expect(optionsText).toEqual(['By document count. Checked option.', 'Numerically']);
-    });
-  });
-
-  describe('allow expensive queries warning', () => {
-    test('ensure warning icon does not show up when testAllowExpensiveQueries = true/undefined', async () => {
-      const popover = await mountComponent({
-        componentState: { field: { name: 'Test keyword field', type: 'keyword' } as FieldSpec },
-      });
-      const warning = popover.queryByTestId('optionsList-allow-expensive-queries-warning');
-      expect(warning).toBeNull();
-    });
-
-    test('ensure warning icon shows up when testAllowExpensiveQueries = false', async () => {
-      pluginServices.getServices().optionsList.getAllowExpensiveQueries = jest.fn(() =>
-        Promise.resolve(false)
-      );
-      const popover = await mountComponent({
-        componentState: {
-          field: { name: 'Test keyword field', type: 'keyword' } as FieldSpec,
-          allowExpensiveQueries: false,
-        },
-      });
-      const warning = popover.getByTestId('optionsList-allow-expensive-queries-warning');
-      expect(warning).toBeInstanceOf(HTMLDivElement);
-    });
-  });
-
-  describe('advanced settings', () => {
-    const ensureComponentIsHidden = async ({
-      explicitInput,
-      testSubject,
-    }: {
-      explicitInput: Partial<OptionsListEmbeddableInput>;
-      testSubject: string;
-    }) => {
-      const popover = await mountComponent({
-        explicitInput,
-      });
-      const test = popover.queryByTestId(testSubject);
-      expect(test).toBeNull();
-    };
-
-    test('can hide exists option', async () => {
-      ensureComponentIsHidden({
-        explicitInput: { hideExists: true },
-        testSubject: 'optionsList-control-selection-exists',
-      });
-    });
-
-    test('can hide include/exclude toggle', async () => {
-      ensureComponentIsHidden({
-        explicitInput: { hideExclude: true },
-        testSubject: 'optionsList__includeExcludeButtonGroup',
-      });
-    });
-
-    test('can hide sorting button', async () => {
-      ensureComponentIsHidden({
-        explicitInput: { hideSort: true },
-        testSubject: 'optionsListControl__sortingOptionsButton',
-      });
-    });
-  });
-
-  describe('field formatter', () => {
-    const mockedFormatter = jest.fn().mockImplementation((value: unknown) => `formatted:${value}`);
-
-    beforeAll(() => {
-      stubDataView.getFormatterForField = jest.fn().mockReturnValue({
-        getConverterFor: () => mockedFormatter,
-      });
-      pluginServices.getServices().dataViews.get = jest.fn().mockResolvedValue(stubDataView);
-    });
-
-    afterEach(() => {
-      mockedFormatter.mockClear();
-    });
-
-    test('uses field formatter on suggestions', async () => {
-      const popover = await mountComponent({
-        componentState: {
-          field: stubDataView.fields.getByName('bytes')?.toSpec(),
-          availableOptions: [
-            { value: 1000, docCount: 1 },
-            { value: 123456789, docCount: 4 },
-          ],
-        },
-      });
-
-      expect(mockedFormatter).toHaveBeenNthCalledWith(1, 1000);
-      expect(mockedFormatter).toHaveBeenNthCalledWith(2, 123456789);
-      const options = await popover.findAllByRole('option');
-      expect(options[0].textContent).toEqual('Exists');
-      expect(
-        options[1].getElementsByClassName('euiSelectableListItem__text')[0].textContent
-      ).toEqual('formatted:1000');
-      expect(
-        options[2].getElementsByClassName('euiSelectableListItem__text')[0].textContent
-      ).toEqual('formatted:123456789');
-    });
-
-    test('converts string to number for date field', async () => {
-      await mountComponent({
-        componentState: {
-          field: stubDataView.fields.getByName('@timestamp')?.toSpec(),
-          availableOptions: [
-            { value: 1721283696000, docCount: 1 },
-            { value: 1721295533000, docCount: 2 },
-          ],
-        },
-      });
-      expect(mockedFormatter).toHaveBeenNthCalledWith(1, 1721283696000);
-      expect(mockedFormatter).toHaveBeenNthCalledWith(2, 1721295533000);
-    });
-  });
-});
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover.tsx b/src/plugins/controls/public/options_list/components/options_list_popover.tsx
deleted file mode 100644
index 2ac3be7dfeb08..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover.tsx
+++ /dev/null
@@ -1,71 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { isEmpty } from 'lodash';
-import React, { useState } from 'react';
-
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { OptionsListPopoverFooter } from './options_list_popover_footer';
-import { OptionsListPopoverActionBar } from './options_list_popover_action_bar';
-import { OptionsListPopoverSuggestions } from './options_list_popover_suggestions';
-import { OptionsListPopoverInvalidSelections } from './options_list_popover_invalid_selections';
-
-export interface OptionsListPopoverProps {
-  isLoading: boolean;
-  loadMoreSuggestions: (cardinality: number) => void;
-  updateSearchString: (newSearchString: string) => void;
-}
-
-export const OptionsListPopover = ({
-  isLoading,
-  updateSearchString,
-  loadMoreSuggestions,
-}: OptionsListPopoverProps) => {
-  const optionsList = useOptionsList();
-
-  const field = optionsList.select((state) => state.componentState.field);
-  const availableOptions = optionsList.select((state) => state.componentState.availableOptions);
-  const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
-
-  const id = optionsList.select((state) => state.explicitInput.id);
-  const hideExclude = optionsList.select((state) => state.explicitInput.hideExclude);
-  const hideActionBar = optionsList.select((state) => state.explicitInput.hideActionBar);
-
-  const [showOnlySelected, setShowOnlySelected] = useState(false);
-
-  return (
-    <div
-      id={`control-popover-${id}`}
-      className={'optionsList__popover'}
-      data-test-subj={`optionsList-control-popover`}
-    >
-      {field?.type !== 'boolean' && !hideActionBar && (
-        <OptionsListPopoverActionBar
-          showOnlySelected={showOnlySelected}
-          updateSearchString={updateSearchString}
-          setShowOnlySelected={setShowOnlySelected}
-        />
-      )}
-      <div
-        data-test-subj={`optionsList-control-available-options`}
-        data-option-count={isLoading ? 0 : Object.keys(availableOptions ?? {}).length}
-        style={{ width: '100%', height: '100%' }}
-      >
-        <OptionsListPopoverSuggestions
-          loadMoreSuggestions={loadMoreSuggestions}
-          showOnlySelected={showOnlySelected}
-        />
-        {!showOnlySelected && invalidSelections && !isEmpty(invalidSelections) && (
-          <OptionsListPopoverInvalidSelections />
-        )}
-      </div>
-      {!hideExclude && <OptionsListPopoverFooter isLoading={isLoading} />}
-    </div>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_action_bar.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_action_bar.tsx
deleted file mode 100644
index 258c5649483cc..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_action_bar.tsx
+++ /dev/null
@@ -1,151 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useMemo } from 'react';
-
-import {
-  EuiButtonIcon,
-  EuiFieldSearch,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiFormRow,
-  EuiText,
-  EuiToolTip,
-} from '@elastic/eui';
-
-import { getCompatibleSearchTechniques } from '../../../common/options_list/suggestions_searching';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { OptionsListPopoverSortingButton } from './options_list_popover_sorting_button';
-import { OptionsListStrings } from './options_list_strings';
-
-interface OptionsListPopoverProps {
-  showOnlySelected: boolean;
-  updateSearchString: (newSearchString: string) => void;
-  setShowOnlySelected: (value: boolean) => void;
-}
-
-export const OptionsListPopoverActionBar = ({
-  showOnlySelected,
-  updateSearchString,
-  setShowOnlySelected,
-}: OptionsListPopoverProps) => {
-  const optionsList = useOptionsList();
-
-  const totalCardinality =
-    optionsList.select((state) => state.componentState.totalCardinality) ?? 0;
-  const fieldSpec = optionsList.select((state) => state.componentState.field);
-  const searchString = optionsList.select((state) => state.componentState.searchString);
-  const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
-  const allowExpensiveQueries = optionsList.select(
-    (state) => state.componentState.allowExpensiveQueries
-  );
-
-  const hideSort = optionsList.select((state) => state.explicitInput.hideSort);
-  const searchTechnique = optionsList.select((state) => state.explicitInput.searchTechnique);
-
-  const compatibleSearchTechniques = useMemo(() => {
-    if (!fieldSpec) return [];
-    return getCompatibleSearchTechniques(fieldSpec.type);
-  }, [fieldSpec]);
-
-  const defaultSearchTechnique = useMemo(
-    () => searchTechnique ?? compatibleSearchTechniques[0],
-    [searchTechnique, compatibleSearchTechniques]
-  );
-
-  return (
-    <div className="optionsList__actions">
-      {compatibleSearchTechniques.length > 0 && (
-        <EuiFormRow className="optionsList__searchRow" fullWidth>
-          <EuiFieldSearch
-            isInvalid={!searchString.valid}
-            compressed
-            disabled={showOnlySelected}
-            fullWidth
-            onChange={(event) => updateSearchString(event.target.value)}
-            value={searchString.value}
-            data-test-subj="optionsList-control-search-input"
-            placeholder={OptionsListStrings.popover.getSearchPlaceholder(
-              allowExpensiveQueries ? defaultSearchTechnique : 'exact'
-            )}
-          />
-        </EuiFormRow>
-      )}
-      <EuiFormRow className="optionsList__actionsRow" fullWidth>
-        <EuiFlexGroup
-          justifyContent="spaceBetween"
-          alignItems="center"
-          gutterSize="s"
-          responsive={false}
-        >
-          {allowExpensiveQueries && (
-            <EuiFlexItem grow={false}>
-              <EuiText size="xs" color="subdued" data-test-subj="optionsList-cardinality-label">
-                {OptionsListStrings.popover.getCardinalityLabel(totalCardinality)}
-              </EuiText>
-            </EuiFlexItem>
-          )}
-          {invalidSelections && invalidSelections.length > 0 && (
-            <>
-              {allowExpensiveQueries && (
-                <EuiFlexItem grow={false}>
-                  <div className="optionsList__actionBarDivider" />
-                </EuiFlexItem>
-              )}
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" color="subdued">
-                  {OptionsListStrings.popover.getInvalidSelectionsLabel(invalidSelections.length)}
-                </EuiText>
-              </EuiFlexItem>
-            </>
-          )}
-          <EuiFlexItem grow={true}>
-            <EuiFlexGroup
-              gutterSize="xs"
-              alignItems="center"
-              justifyContent="flexEnd"
-              responsive={false}
-            >
-              <EuiFlexItem grow={false}>
-                <EuiToolTip
-                  position="top"
-                  content={
-                    showOnlySelected
-                      ? OptionsListStrings.popover.getAllOptionsButtonTitle()
-                      : OptionsListStrings.popover.getSelectedOptionsButtonTitle()
-                  }
-                >
-                  <EuiButtonIcon
-                    size="xs"
-                    iconType="list"
-                    aria-pressed={showOnlySelected}
-                    color={showOnlySelected ? 'primary' : 'text'}
-                    display={showOnlySelected ? 'base' : 'empty'}
-                    onClick={() => setShowOnlySelected(!showOnlySelected)}
-                    data-test-subj="optionsList-control-show-only-selected"
-                    aria-label={
-                      showOnlySelected
-                        ? OptionsListStrings.popover.getAllOptionsButtonTitle()
-                        : OptionsListStrings.popover.getSelectedOptionsButtonTitle()
-                    }
-                  />
-                </EuiToolTip>
-              </EuiFlexItem>
-              {!hideSort && (
-                <EuiFlexItem grow={false}>
-                  <OptionsListPopoverSortingButton showOnlySelected={showOnlySelected} />
-                </EuiFlexItem>
-              )}
-            </EuiFlexGroup>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFormRow>
-    </div>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx
deleted file mode 100644
index 07bb4925fc614..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_empty_message.tsx
+++ /dev/null
@@ -1,53 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useMemo } from 'react';
-
-import { EuiIcon, EuiSelectableMessage, EuiSpacer } from '@elastic/eui';
-
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { OptionsListStrings } from './options_list_strings';
-
-export const OptionsListPopoverEmptyMessage = ({
-  showOnlySelected,
-}: {
-  showOnlySelected: boolean;
-}) => {
-  const optionsList = useOptionsList();
-
-  const searchString = optionsList.select((state) => state.componentState.searchString);
-  const fieldSpec = optionsList.select((state) => state.componentState.field);
-  const searchTechnique = optionsList.select((state) => state.explicitInput.searchTechnique);
-
-  const noResultsMessage = useMemo(() => {
-    if (showOnlySelected) {
-      return OptionsListStrings.popover.getSelectionsEmptyMessage();
-    }
-    if (!searchString.valid && fieldSpec && searchTechnique) {
-      return OptionsListStrings.popover.getInvalidSearchMessage(fieldSpec.type);
-    }
-    return OptionsListStrings.popover.getEmptyMessage();
-  }, [showOnlySelected, fieldSpec, searchString.valid, searchTechnique]);
-
-  return (
-    <EuiSelectableMessage
-      tabIndex={0}
-      data-test-subj={`optionsList-control-${
-        showOnlySelected ? 'selectionsEmptyMessage' : 'noSelectionsMessage'
-      }`}
-    >
-      <EuiIcon
-        type={searchString.valid ? 'minusInCircle' : 'alert'}
-        color={searchString.valid ? 'default' : 'danger'}
-      />
-      <EuiSpacer size="xs" />
-      {noResultsMessage}
-    </EuiSelectableMessage>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_footer.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_footer.tsx
deleted file mode 100644
index ae6ec8ae4bf0b..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_footer.tsx
+++ /dev/null
@@ -1,101 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import {
-  EuiIconTip,
-  EuiFlexItem,
-  EuiProgress,
-  EuiFlexGroup,
-  EuiButtonGroup,
-  EuiPopoverFooter,
-  useEuiPaddingSize,
-  useEuiBackgroundColor,
-} from '@elastic/eui';
-import { css } from '@emotion/react';
-
-import { OptionsListStrings } from './options_list_strings';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-
-const aggregationToggleButtons = [
-  {
-    id: 'optionsList__includeResults',
-    key: 'optionsList__includeResults',
-    label: OptionsListStrings.popover.getIncludeLabel(),
-  },
-  {
-    id: 'optionsList__excludeResults',
-    key: 'optionsList__excludeResults',
-    label: OptionsListStrings.popover.getExcludeLabel(),
-  },
-];
-
-export const OptionsListPopoverFooter = ({ isLoading }: { isLoading: boolean }) => {
-  const optionsList = useOptionsList();
-
-  const exclude = optionsList.select((state) => state.explicitInput.exclude);
-  const allowExpensiveQueries = optionsList.select(
-    (state) => state.componentState.allowExpensiveQueries
-  );
-
-  return (
-    <>
-      <EuiPopoverFooter
-        paddingSize="none"
-        css={css`
-          background-color: ${useEuiBackgroundColor('subdued')};
-        `}
-      >
-        {isLoading && (
-          <div style={{ position: 'absolute', width: '100%' }}>
-            <EuiProgress
-              data-test-subj="optionsList-control-popover-loading"
-              size="xs"
-              color="accent"
-            />
-          </div>
-        )}
-
-        <EuiFlexGroup
-          gutterSize="xs"
-          responsive={false}
-          alignItems="center"
-          css={css`
-            padding: ${useEuiPaddingSize('s')};
-          `}
-          justifyContent={'spaceBetween'}
-        >
-          <EuiFlexItem grow={false}>
-            <EuiButtonGroup
-              legend={OptionsListStrings.popover.getIncludeExcludeLegend()}
-              options={aggregationToggleButtons}
-              idSelected={exclude ? 'optionsList__excludeResults' : 'optionsList__includeResults'}
-              onChange={(optionId) =>
-                optionsList.dispatch.setExclude(optionId === 'optionsList__excludeResults')
-              }
-              buttonSize="compressed"
-              data-test-subj="optionsList__includeExcludeButtonGroup"
-            />
-          </EuiFlexItem>
-          {!allowExpensiveQueries && (
-            <EuiFlexItem data-test-subj="optionsList-allow-expensive-queries-warning" grow={false}>
-              <EuiIconTip
-                type="warning"
-                color="warning"
-                content={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
-                aria-label={OptionsListStrings.popover.getAllowExpensiveQueriesWarning()}
-              />
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-      </EuiPopoverFooter>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_invalid_selections.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_invalid_selections.tsx
deleted file mode 100644
index edb842ceaaf7e..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_invalid_selections.tsx
+++ /dev/null
@@ -1,111 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useEffect, useState } from 'react';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiScreenReaderOnly,
-  EuiSelectable,
-  EuiSelectableOption,
-  EuiSpacer,
-  EuiTitle,
-} from '@elastic/eui';
-
-import { getSelectionAsFieldType } from '../../../common/options_list/options_list_selections';
-import { useFieldFormatter } from '../../hooks/use_field_formatter';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { OptionsListStrings } from './options_list_strings';
-
-export const OptionsListPopoverInvalidSelections = () => {
-  const optionsList = useOptionsList();
-
-  const fieldName = optionsList.select((state) => state.explicitInput.fieldName);
-
-  const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
-  const fieldSpec = optionsList.select((state) => state.componentState.field);
-
-  const dataViewId = optionsList.select((state) => state.output.dataViewId);
-  const fieldFormatter = useFieldFormatter({ dataViewId, fieldSpec });
-
-  const [selectableOptions, setSelectableOptions] = useState<EuiSelectableOption[]>([]); // will be set in following useEffect
-  useEffect(() => {
-    /* This useEffect makes selectableOptions responsive to unchecking options */
-    const options: EuiSelectableOption[] = (invalidSelections ?? []).map((key) => {
-      return {
-        key: String(key),
-        label: fieldFormatter(key),
-        checked: 'on',
-        className: 'optionsList__selectionInvalid',
-        'data-test-subj': `optionsList-control-invalid-selection-${key}`,
-        prepend: (
-          <EuiScreenReaderOnly>
-            <div>
-              {OptionsListStrings.popover.getInvalidSelectionScreenReaderText()}
-              {'" "'} {/* Adds a pause for the screen reader */}
-            </div>
-          </EuiScreenReaderOnly>
-        ),
-      };
-    });
-    setSelectableOptions(options);
-  }, [fieldFormatter, invalidSelections]);
-
-  return (
-    <>
-      <EuiSpacer size="s" />
-      <EuiTitle
-        size="xxs"
-        className="optionsList-control-ignored-selection-title"
-        data-test-subj="optionList__invalidSelectionLabel"
-      >
-        <EuiFlexGroup gutterSize="s" alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiIcon
-              type="warning"
-              color="warning"
-              title={OptionsListStrings.popover.getInvalidSelectionScreenReaderText()}
-              size="s"
-            />
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <label>
-              {OptionsListStrings.popover.getInvalidSelectionsSectionTitle(
-                invalidSelections?.length ?? 0
-              )}
-            </label>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiTitle>
-      <EuiSelectable
-        aria-label={OptionsListStrings.popover.getInvalidSelectionsSectionAriaLabel(
-          fieldName,
-          invalidSelections?.length ?? 0
-        )}
-        options={selectableOptions}
-        listProps={{ onFocusBadge: false, isVirtualized: false }}
-        onChange={(newSuggestions, _, changedOption) => {
-          if (!fieldSpec || !changedOption.key) {
-            // this should never happen, but early return for type safety
-            // eslint-disable-next-line no-console
-            console.warn(OptionsListStrings.popover.getInvalidSelectionMessage());
-            return;
-          }
-          setSelectableOptions(newSuggestions);
-          const key = getSelectionAsFieldType(fieldSpec, changedOption.key);
-          optionsList.dispatch.deselectOption(key);
-        }}
-      >
-        {(list) => list}
-      </EuiSelectable>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx
deleted file mode 100644
index 382a57a8ae42e..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_sorting_button.tsx
+++ /dev/null
@@ -1,156 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useCallback, useState } from 'react';
-
-import {
-  EuiButtonGroupOptionProps,
-  EuiSelectableOption,
-  EuiPopoverTitle,
-  EuiButtonGroup,
-  EuiSelectable,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiPopover,
-  Direction,
-  EuiToolTip,
-  EuiButtonIcon,
-} from '@elastic/eui';
-
-import {
-  getCompatibleSortingTypes,
-  OPTIONS_LIST_DEFAULT_SORT,
-  OptionsListSortBy,
-} from '../../../common/options_list/suggestions_sorting';
-import { OptionsListStrings } from './options_list_strings';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-
-interface OptionsListSortingPopoverProps {
-  showOnlySelected: boolean;
-}
-
-type SortByItem = EuiSelectableOption & {
-  data: { sortBy: OptionsListSortBy };
-};
-
-const sortOrderOptions: EuiButtonGroupOptionProps[] = [
-  {
-    id: 'asc',
-    iconType: `sortAscending`,
-    'data-test-subj': `optionsList__sortOrder_asc`,
-    label: OptionsListStrings.editorAndPopover.sortOrder.asc.getSortOrderLabel(),
-  },
-  {
-    id: 'desc',
-    iconType: `sortDescending`,
-    'data-test-subj': `optionsList__sortOrder_desc`,
-    label: OptionsListStrings.editorAndPopover.sortOrder.desc.getSortOrderLabel(),
-  },
-];
-
-export const OptionsListPopoverSortingButton = ({
-  showOnlySelected,
-}: OptionsListSortingPopoverProps) => {
-  const optionsList = useOptionsList();
-
-  const field = optionsList.select((state) => state.componentState.field);
-  const sort = optionsList.select((state) => state.explicitInput.sort ?? OPTIONS_LIST_DEFAULT_SORT);
-
-  const [isSortingPopoverOpen, setIsSortingPopoverOpen] = useState(false);
-
-  const [sortByOptions, setSortByOptions] = useState<SortByItem[]>(() => {
-    return getCompatibleSortingTypes(field?.type).map((key) => {
-      return {
-        onFocusBadge: false,
-        data: { sortBy: key },
-        checked: key === sort.by ? 'on' : undefined,
-        'data-test-subj': `optionsList__sortBy_${key}`,
-        label: OptionsListStrings.editorAndPopover.sortBy[key].getSortByLabel(field?.type),
-      } as SortByItem;
-    });
-  });
-
-  const onSortByChange = useCallback(
-    (updatedOptions: SortByItem[]) => {
-      setSortByOptions(updatedOptions);
-      const selectedOption = updatedOptions.find(({ checked }) => checked === 'on');
-      if (selectedOption) {
-        optionsList.dispatch.setSort({ by: selectedOption.data.sortBy });
-      }
-    },
-    [optionsList.dispatch]
-  );
-
-  const SortButton = () => (
-    <EuiButtonIcon
-      size="xs"
-      display="empty"
-      color="text"
-      iconType={sort?.direction === 'asc' ? 'sortAscending' : 'sortDescending'}
-      isDisabled={showOnlySelected}
-      className="optionsList__sortButton"
-      data-test-subj="optionsListControl__sortingOptionsButton"
-      onClick={() => setIsSortingPopoverOpen(!isSortingPopoverOpen)}
-      aria-label={OptionsListStrings.popover.getSortPopoverDescription()}
-    />
-  );
-
-  return (
-    <EuiPopover
-      button={
-        <EuiToolTip
-          position="top"
-          content={
-            showOnlySelected
-              ? OptionsListStrings.popover.getSortDisabledTooltip()
-              : OptionsListStrings.popover.getSortPopoverTitle()
-          }
-        >
-          <SortButton />
-        </EuiToolTip>
-      }
-      panelPaddingSize="none"
-      isOpen={isSortingPopoverOpen}
-      aria-labelledby="optionsList_sortingOptions"
-      closePopover={() => setIsSortingPopoverOpen(false)}
-      panelClassName={'optionsList--sortPopover'}
-    >
-      <span data-test-subj="optionsListControl__sortingOptionsPopover">
-        <EuiPopoverTitle paddingSize="s">
-          <EuiFlexGroup alignItems="center" responsive={false}>
-            <EuiFlexItem>{OptionsListStrings.popover.getSortPopoverTitle()}</EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiButtonGroup
-                isIconOnly
-                buttonSize="compressed"
-                options={sortOrderOptions}
-                idSelected={sort.direction}
-                legend={OptionsListStrings.editorAndPopover.getSortDirectionLegend()}
-                onChange={(value) =>
-                  optionsList.dispatch.setSort({ direction: value as Direction })
-                }
-              />
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPopoverTitle>
-        <EuiSelectable
-          options={sortByOptions}
-          singleSelection="always"
-          onChange={onSortByChange}
-          id="optionsList_sortingOptions"
-          listProps={{ bordered: false }}
-          data-test-subj="optionsListControl__sortingOptions"
-          aria-label={OptionsListStrings.popover.getSortPopoverDescription()}
-        >
-          {(list) => list}
-        </EuiSelectable>
-      </span>
-    </EuiPopover>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_suggestion_badge.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_suggestion_badge.tsx
deleted file mode 100644
index f77aa1ed66a3a..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_suggestion_badge.tsx
+++ /dev/null
@@ -1,47 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { css } from '@emotion/react';
-import { EuiScreenReaderOnly, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
-
-import { OptionsListStrings } from './options_list_strings';
-
-export const OptionsListPopoverSuggestionBadge = ({ documentCount }: { documentCount: number }) => {
-  const { euiTheme } = useEuiTheme();
-
-  return (
-    <>
-      <EuiToolTip
-        content={OptionsListStrings.popover.getDocumentCountTooltip(documentCount)}
-        position={'right'}
-      >
-        <EuiText
-          size="xs"
-          aria-hidden={true}
-          className="eui-textNumber"
-          color={euiTheme.colors.subduedText}
-          data-test-subj="optionsList-document-count-badge"
-          css={css`
-            font-weight: ${euiTheme.font.weight.medium} !important;
-          `}
-        >
-          {`${documentCount.toLocaleString()}`}
-        </EuiText>
-      </EuiToolTip>
-      <EuiScreenReaderOnly>
-        <div>
-          {'" "'} {/* Adds a pause for the screen reader */}
-          {OptionsListStrings.popover.getDocumentCountScreenReaderText(documentCount)}
-        </div>
-      </EuiScreenReaderOnly>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_popover_suggestions.tsx b/src/plugins/controls/public/options_list/components/options_list_popover_suggestions.tsx
deleted file mode 100644
index 3541bf13830f5..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_popover_suggestions.tsx
+++ /dev/null
@@ -1,230 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-
-import { EuiHighlight, EuiSelectable } from '@elastic/eui';
-import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
-import { euiThemeVars } from '@kbn/ui-theme';
-
-import {
-  getSelectionAsFieldType,
-  OptionsListSelection,
-} from '../../../common/options_list/options_list_selections';
-import { useFieldFormatter } from '../../hooks/use_field_formatter';
-import { useOptionsList } from '../embeddable/options_list_embeddable';
-import { MAX_OPTIONS_LIST_REQUEST_SIZE } from '../types';
-import { OptionsListPopoverEmptyMessage } from './options_list_popover_empty_message';
-import { OptionsListPopoverSuggestionBadge } from './options_list_popover_suggestion_badge';
-import { OptionsListStrings } from './options_list_strings';
-
-interface OptionsListPopoverSuggestionsProps {
-  showOnlySelected: boolean;
-  loadMoreSuggestions: (cardinality: number) => void;
-}
-
-export const OptionsListPopoverSuggestions = ({
-  showOnlySelected,
-  loadMoreSuggestions,
-}: OptionsListPopoverSuggestionsProps) => {
-  const optionsList = useOptionsList();
-
-  const fieldSpec = optionsList.select((state) => state.componentState.field);
-  const searchString = optionsList.select((state) => state.componentState.searchString);
-  const availableOptions = optionsList.select((state) => state.componentState.availableOptions);
-  const totalCardinality = optionsList.select((state) => state.componentState.totalCardinality);
-  const invalidSelections = optionsList.select((state) => state.componentState.invalidSelections);
-  const allowExpensiveQueries = optionsList.select(
-    (state) => state.componentState.allowExpensiveQueries
-  );
-
-  const sort = optionsList.select((state) => state.explicitInput.sort);
-  const fieldName = optionsList.select((state) => state.explicitInput.fieldName);
-  const hideExists = optionsList.select((state) => state.explicitInput.hideExists);
-  const singleSelect = optionsList.select((state) => state.explicitInput.singleSelect);
-  const existsSelected = optionsList.select((state) => state.explicitInput.existsSelected);
-  const searchTechnique = optionsList.select((state) => state.explicitInput.searchTechnique);
-  const selectedOptions = optionsList.select((state) => state.explicitInput.selectedOptions);
-
-  const dataViewId = optionsList.select((state) => state.output.dataViewId);
-  const isLoading = optionsList.select((state) => state.output.loading) ?? false;
-
-  const listRef = useRef<HTMLDivElement>(null);
-
-  const fieldFormatter = useFieldFormatter({ dataViewId, fieldSpec });
-
-  const canLoadMoreSuggestions = useMemo(
-    () =>
-      allowExpensiveQueries && searchString.valid && totalCardinality && !showOnlySelected
-        ? (availableOptions ?? []).length <
-          Math.min(totalCardinality, MAX_OPTIONS_LIST_REQUEST_SIZE)
-        : false,
-    [availableOptions, totalCardinality, searchString, showOnlySelected, allowExpensiveQueries]
-  );
-
-  // track selectedOptions and invalidSelections in sets for more efficient lookup
-  const selectedOptionsSet = useMemo(
-    () => new Set<OptionsListSelection>(selectedOptions),
-    [selectedOptions]
-  );
-  const invalidSelectionsSet = useMemo(
-    () => new Set<OptionsListSelection>(invalidSelections),
-    [invalidSelections]
-  );
-  const suggestions = useMemo(() => {
-    return showOnlySelected ? selectedOptions : availableOptions ?? [];
-  }, [availableOptions, selectedOptions, showOnlySelected]);
-
-  const existsSelectableOption = useMemo<EuiSelectableOption | undefined>(() => {
-    if (hideExists || (!existsSelected && (showOnlySelected || suggestions?.length === 0))) return;
-
-    return {
-      key: 'exists-option',
-      checked: existsSelected ? 'on' : undefined,
-      label: OptionsListStrings.controlAndPopover.getExists(),
-      className: 'optionsList__existsFilter',
-      'data-test-subj': 'optionsList-control-selection-exists',
-    };
-  }, [suggestions, existsSelected, showOnlySelected, hideExists]);
-
-  const [selectableOptions, setSelectableOptions] = useState<EuiSelectableOption[]>([]); // will be set in following useEffect
-  useEffect(() => {
-    /* This useEffect makes selectableOptions responsive to search, show only selected, and clear selections */
-    const options: EuiSelectableOption[] = (suggestions ?? []).map((suggestion) => {
-      if (typeof suggestion !== 'object') {
-        // this means that `showOnlySelected` is true, and doc count is not known when this is the case
-        suggestion = { value: suggestion };
-      }
-
-      return {
-        key: String(suggestion.value),
-        label: fieldFormatter(suggestion.value) ?? String(suggestion.value),
-        checked: selectedOptionsSet?.has(suggestion.value) ? 'on' : undefined,
-        'data-test-subj': `optionsList-control-selection-${suggestion.value}`,
-        className:
-          showOnlySelected && invalidSelectionsSet.has(suggestion.value)
-            ? 'optionsList__selectionInvalid'
-            : 'optionsList__validSuggestion',
-        append:
-          !showOnlySelected && suggestion?.docCount ? (
-            <OptionsListPopoverSuggestionBadge documentCount={suggestion.docCount} />
-          ) : undefined,
-      };
-    });
-
-    if (canLoadMoreSuggestions) {
-      options.push({
-        key: 'loading-option',
-        className: 'optionslist--loadingMoreGroupLabel',
-        label: OptionsListStrings.popover.getLoadingMoreMessage(),
-        isGroupLabel: true,
-      });
-    } else if (options.length === MAX_OPTIONS_LIST_REQUEST_SIZE) {
-      options.push({
-        key: 'no-more-option',
-        className: 'optionslist--endOfOptionsGroupLabel',
-        label: OptionsListStrings.popover.getAtEndOfOptionsMessage(),
-        isGroupLabel: true,
-      });
-    }
-    setSelectableOptions(existsSelectableOption ? [existsSelectableOption, ...options] : options);
-  }, [
-    suggestions,
-    availableOptions,
-    showOnlySelected,
-    selectedOptionsSet,
-    invalidSelectionsSet,
-    existsSelectableOption,
-    canLoadMoreSuggestions,
-    fieldFormatter,
-  ]);
-
-  const loadMoreOptions = useCallback(() => {
-    const listbox = listRef.current?.querySelector('.euiSelectableList__list');
-    if (!listbox) return;
-
-    const { scrollTop, scrollHeight, clientHeight } = listbox;
-    if (scrollTop + clientHeight >= scrollHeight - parseInt(euiThemeVars.euiSizeXXL, 10)) {
-      // reached the "bottom" of the list, where euiSizeXXL acts as a "margin of error" so that the user doesn't
-      // have to scroll **all the way** to the bottom in order to load more options
-      loadMoreSuggestions(totalCardinality ?? MAX_OPTIONS_LIST_REQUEST_SIZE);
-    }
-  }, [loadMoreSuggestions, totalCardinality]);
-
-  const renderOption = useCallback(
-    (option: EuiSelectableOption, searchStringValue: string) => {
-      if (!allowExpensiveQueries || searchTechnique === 'exact') return option.label;
-
-      return (
-        <EuiHighlight search={option.key === 'exists-option' ? '' : searchStringValue}>
-          {option.label}
-        </EuiHighlight>
-      );
-    },
-    [searchTechnique, allowExpensiveQueries]
-  );
-
-  useEffect(() => {
-    const container = listRef.current;
-    if (!isLoading && canLoadMoreSuggestions) {
-      container?.addEventListener('scroll', loadMoreOptions, true);
-      return () => {
-        container?.removeEventListener('scroll', loadMoreOptions, true);
-      };
-    }
-  }, [loadMoreOptions, isLoading, canLoadMoreSuggestions]);
-
-  useEffect(() => {
-    // scroll back to the top when changing the sorting or the search string
-    const listbox = listRef.current?.querySelector('.euiSelectableList__list');
-    listbox?.scrollTo({ top: 0 });
-  }, [sort, searchString]);
-
-  return (
-    <>
-      <div ref={listRef}>
-        <EuiSelectable
-          options={selectableOptions}
-          renderOption={(option) => renderOption(option, searchString.value)}
-          listProps={{ onFocusBadge: false }}
-          aria-label={OptionsListStrings.popover.getSuggestionsAriaLabel(
-            fieldName,
-            selectableOptions.length
-          )}
-          emptyMessage={<OptionsListPopoverEmptyMessage showOnlySelected={showOnlySelected} />}
-          onChange={(newSuggestions, _, changedOption) => {
-            if (!fieldSpec || !changedOption.key) {
-              // this should never happen, but early return for type safety
-              // eslint-disable-next-line no-console
-              console.warn(OptionsListStrings.popover.getInvalidSelectionMessage());
-              return;
-            }
-            setSelectableOptions(newSuggestions);
-            if (changedOption.key === 'exists-option') {
-              optionsList.dispatch.selectExists(!Boolean(existsSelected));
-              return;
-            }
-
-            const key = getSelectionAsFieldType(fieldSpec, changedOption.key);
-            // the order of these checks matters, so be careful if rearranging them
-            if (showOnlySelected || selectedOptionsSet.has(key)) {
-              optionsList.dispatch.deselectOption(key);
-            } else if (singleSelect) {
-              optionsList.dispatch.replaceSelection(key);
-            } else {
-              optionsList.dispatch.selectOption(key);
-            }
-          }}
-        >
-          {(list) => list}
-        </EuiSelectable>
-      </div>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/options_list/components/options_list_strings.ts b/src/plugins/controls/public/options_list/components/options_list_strings.ts
deleted file mode 100644
index 474abd8d96cee..0000000000000
--- a/src/plugins/controls/public/options_list/components/options_list_strings.ts
+++ /dev/null
@@ -1,320 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import { OptionsListSearchTechnique } from '../../../common/options_list/suggestions_searching';
-
-export const OptionsListStrings = {
-  control: {
-    getSeparator: (type?: string) => {
-      if (['date', 'number'].includes(type ?? '')) {
-        return i18n.translate('controls.optionsList.control.dateSeparator', {
-          defaultMessage: ';  ',
-        });
-      }
-      return i18n.translate('controls.optionsList.control.separator', {
-        defaultMessage: ', ',
-      });
-    },
-    getPlaceholder: () =>
-      i18n.translate('controls.optionsList.control.placeholder', {
-        defaultMessage: 'Any',
-      }),
-    getNegate: () =>
-      i18n.translate('controls.optionsList.control.negate', {
-        defaultMessage: 'NOT',
-      }),
-    getExcludeExists: () =>
-      i18n.translate('controls.optionsList.control.excludeExists', {
-        defaultMessage: 'DOES NOT',
-      }),
-    getInvalidSelectionWarningLabel: (invalidSelectionCount: number) =>
-      i18n.translate('controls.optionsList.control.invalidSelectionWarningLabel', {
-        defaultMessage:
-          '{invalidSelectionCount} {invalidSelectionCount, plural, one {selection returns} other {selections return}} no results.',
-        values: {
-          invalidSelectionCount,
-        },
-      }),
-  },
-  editor: {
-    getSelectionOptionsTitle: () =>
-      i18n.translate('controls.optionsList.editor.selectionOptionsTitle', {
-        defaultMessage: 'Selections',
-      }),
-    selectionTypes: {
-      multi: {
-        getLabel: () =>
-          i18n.translate('controls.optionsList.editor.multiSelectLabel', {
-            defaultMessage: 'Allow multiple selections',
-          }),
-      },
-      single: {
-        getLabel: () =>
-          i18n.translate('controls.optionsList.editor.singleSelectLabel', {
-            defaultMessage: 'Only allow a single selection',
-          }),
-      },
-    },
-    getSearchOptionsTitle: () =>
-      i18n.translate('controls.optionsList.editor.searchOptionsTitle', {
-        defaultMessage: `Searching`,
-      }),
-    searchTypes: {
-      prefix: {
-        getLabel: () =>
-          i18n.translate('controls.optionsList.editor.prefixSearchLabel', {
-            defaultMessage: 'Prefix',
-          }),
-        getTooltip: () =>
-          i18n.translate('controls.optionsList.editor.prefixSearchTooltip', {
-            defaultMessage: 'Matches values that begin with the given search string.',
-          }),
-      },
-      wildcard: {
-        getLabel: () =>
-          i18n.translate('controls.optionsList.editor.wildcardSearchLabel', {
-            defaultMessage: 'Contains',
-          }),
-        getTooltip: () =>
-          i18n.translate('controls.optionsList.editor.wildcardSearchTooltip', {
-            defaultMessage:
-              'Matches values that contain the given search string. Results might take longer to populate.',
-          }),
-      },
-      exact: {
-        getLabel: () =>
-          i18n.translate('controls.optionsList.editor.exactSearchLabel', {
-            defaultMessage: 'Exact',
-          }),
-        getTooltip: () =>
-          i18n.translate('controls.optionsList.editor.exactSearchTooltip', {
-            defaultMessage:
-              'Matches values that are equal to the given search string. Returns results quickly.',
-          }),
-      },
-    },
-    getAdditionalSettingsTitle: () =>
-      i18n.translate('controls.optionsList.editor.additionalSettingsTitle', {
-        defaultMessage: `Additional settings`,
-      }),
-    getRunPastTimeoutTitle: () =>
-      i18n.translate('controls.optionsList.editor.runPastTimeout', {
-        defaultMessage: 'Ignore timeout for results',
-      }),
-    getRunPastTimeoutTooltip: () =>
-      i18n.translate('controls.optionsList.editor.runPastTimeout.tooltip', {
-        defaultMessage:
-          'Wait to display results until the list is complete. This setting is useful for large data sets, but the results might take longer to populate.',
-      }),
-  },
-  popover: {
-    getAriaLabel: (fieldName: string) =>
-      i18n.translate('controls.optionsList.popover.ariaLabel', {
-        defaultMessage: 'Popover for {fieldName} control',
-        values: { fieldName },
-      }),
-    getSuggestionsAriaLabel: (fieldName: string, optionCount: number) =>
-      i18n.translate('controls.optionsList.popover.suggestionsAriaLabel', {
-        defaultMessage:
-          'Available {optionCount, plural, one {option} other {options}} for {fieldName}',
-        values: { fieldName, optionCount },
-      }),
-    getAllowExpensiveQueriesWarning: () =>
-      i18n.translate('controls.optionsList.popover.allowExpensiveQueriesWarning', {
-        defaultMessage:
-          'The cluster setting to allow expensive queries is off, so some features are disabled.',
-      }),
-    getLoadingMoreMessage: () =>
-      i18n.translate('controls.optionsList.popover.loadingMore', {
-        defaultMessage: 'Loading more options...',
-      }),
-    getAtEndOfOptionsMessage: () =>
-      i18n.translate('controls.optionsList.popover.endOfOptions', {
-        defaultMessage:
-          'The top 1,000 available options are displayed. View more options by searching for the name.',
-      }),
-    getEmptyMessage: () =>
-      i18n.translate('controls.optionsList.popover.empty', {
-        defaultMessage: 'No options found',
-      }),
-    getSelectionsEmptyMessage: () =>
-      i18n.translate('controls.optionsList.popover.selectionsEmpty', {
-        defaultMessage: 'You have no selections',
-      }),
-    getInvalidSelectionMessage: () =>
-      i18n.translate('controls.optionsList.popover.selectionError', {
-        defaultMessage: 'There was an error when making your selection',
-      }),
-    getInvalidSearchMessage: (fieldType: string) => {
-      switch (fieldType) {
-        case 'ip': {
-          return i18n.translate('controls.optionsList.popover.invalidSearch.ip', {
-            defaultMessage: 'Your search is not a valid IP address.',
-          });
-        }
-        case 'number': {
-          return i18n.translate('controls.optionsList.popover.invalidSearch.number', {
-            defaultMessage: 'Your search is not a valid number.',
-          });
-        }
-        default: {
-          // this shouldn't happen, but giving a fallback error message just in case
-          return i18n.translate('controls.optionsList.popover.invalidSearch.invalidCharacters', {
-            defaultMessage: 'Your search contains invalid characters.',
-          });
-        }
-      }
-    },
-    getAllOptionsButtonTitle: () =>
-      i18n.translate('controls.optionsList.popover.allOptionsTitle', {
-        defaultMessage: 'Show all options',
-      }),
-    getSelectedOptionsButtonTitle: () =>
-      i18n.translate('controls.optionsList.popover.selectedOptionsTitle', {
-        defaultMessage: 'Show only selected options',
-      }),
-    getSearchPlaceholder: (searchTechnique?: OptionsListSearchTechnique) => {
-      switch (searchTechnique) {
-        case 'prefix': {
-          return i18n.translate('controls.optionsList.popover.prefixSearchPlaceholder', {
-            defaultMessage: 'Starts with...',
-          });
-        }
-        case 'wildcard': {
-          return i18n.translate('controls.optionsList.popover.wildcardSearchPlaceholder', {
-            defaultMessage: 'Contains...',
-          });
-        }
-        case 'exact': {
-          return i18n.translate('controls.optionsList.popover.exactSearchPlaceholder', {
-            defaultMessage: 'Equals...',
-          });
-        }
-      }
-    },
-    getCardinalityLabel: (totalOptions: number) =>
-      i18n.translate('controls.optionsList.popover.cardinalityLabel', {
-        defaultMessage:
-          '{totalOptions, number} {totalOptions, plural, one {option} other {options}}',
-        values: { totalOptions },
-      }),
-    getInvalidSelectionsSectionAriaLabel: (fieldName: string, invalidSelectionCount: number) =>
-      i18n.translate('controls.optionsList.popover.invalidSelectionsAriaLabel', {
-        defaultMessage:
-          'Invalid {invalidSelectionCount, plural, one {selection} other {selections}} for {fieldName}',
-        values: { fieldName, invalidSelectionCount },
-      }),
-    getInvalidSelectionsSectionTitle: (invalidSelectionCount: number) =>
-      i18n.translate('controls.optionsList.popover.invalidSelectionsSectionTitle', {
-        defaultMessage:
-          'Invalid {invalidSelectionCount, plural, one {selection} other {selections}}',
-        values: { invalidSelectionCount },
-      }),
-    getInvalidSelectionsLabel: (selectedOptions: number) =>
-      i18n.translate('controls.optionsList.popover.invalidSelectionsLabel', {
-        defaultMessage:
-          '{selectedOptions} {selectedOptions, plural, one {selection} other {selections}} invalid',
-        values: { selectedOptions },
-      }),
-    getInvalidSelectionScreenReaderText: () =>
-      i18n.translate('controls.optionsList.popover.invalidSelectionScreenReaderText', {
-        defaultMessage: 'Invalid selection.',
-      }),
-    getIncludeLabel: () =>
-      i18n.translate('controls.optionsList.popover.includeLabel', {
-        defaultMessage: 'Include',
-      }),
-    getExcludeLabel: () =>
-      i18n.translate('controls.optionsList.popover.excludeLabel', {
-        defaultMessage: 'Exclude',
-      }),
-    getIncludeExcludeLegend: () =>
-      i18n.translate('controls.optionsList.popover.excludeOptionsLegend', {
-        defaultMessage: 'Include or exclude selections',
-      }),
-    getSortPopoverTitle: () =>
-      i18n.translate('controls.optionsList.popover.sortTitle', {
-        defaultMessage: 'Sort',
-      }),
-    getSortPopoverDescription: () =>
-      i18n.translate('controls.optionsList.popover.sortDescription', {
-        defaultMessage: 'Define the sort order',
-      }),
-    getSortDisabledTooltip: () =>
-      i18n.translate('controls.optionsList.popover.sortDisabledTooltip', {
-        defaultMessage: 'Sorting is ignored when “Show only selected” is true',
-      }),
-    getDocumentCountTooltip: (documentCount: number) =>
-      i18n.translate('controls.optionsList.popover.documentCountTooltip', {
-        defaultMessage:
-          'This value appears in {documentCount, number} {documentCount, plural, one {document} other {documents}}',
-        values: { documentCount },
-      }),
-    getDocumentCountScreenReaderText: (documentCount: number) =>
-      i18n.translate('controls.optionsList.popover.documentCountScreenReaderText', {
-        defaultMessage:
-          'Appears in {documentCount, number} {documentCount, plural, one {document} other {documents}}',
-        values: { documentCount },
-      }),
-  },
-  controlAndPopover: {
-    getExists: (negate: number = +false) =>
-      i18n.translate('controls.optionsList.controlAndPopover.exists', {
-        defaultMessage: '{negate, plural, one {Exist} other {Exists}}',
-        values: { negate },
-      }),
-  },
-  editorAndPopover: {
-    getSortDirectionLegend: () =>
-      i18n.translate('controls.optionsList.popover.sortDirections', {
-        defaultMessage: 'Sort directions',
-      }),
-    sortBy: {
-      _count: {
-        getSortByLabel: () =>
-          i18n.translate('controls.optionsList.popover.sortBy.docCount', {
-            defaultMessage: 'By document count',
-          }),
-      },
-      _key: {
-        getSortByLabel: (type?: string) => {
-          switch (type) {
-            case 'date':
-              return i18n.translate('controls.optionsList.popover.sortBy.date', {
-                defaultMessage: 'By date',
-              });
-            case 'number':
-              return i18n.translate('controls.optionsList.popover.sortBy.numeric', {
-                defaultMessage: 'Numerically',
-              });
-            default:
-              return i18n.translate('controls.optionsList.popover.sortBy.alphabetical', {
-                defaultMessage: 'Alphabetically',
-              });
-          }
-        },
-      },
-    },
-    sortOrder: {
-      asc: {
-        getSortOrderLabel: () =>
-          i18n.translate('controls.optionsList.popover.sortOrder.asc', {
-            defaultMessage: 'Ascending',
-          }),
-      },
-      desc: {
-        getSortOrderLabel: () =>
-          i18n.translate('controls.optionsList.popover.sortOrder.desc', {
-            defaultMessage: 'Descending',
-          }),
-      },
-    },
-  },
-};
diff --git a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.test.tsx b/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.test.tsx
deleted file mode 100644
index 0d3cd28e8d5d4..0000000000000
--- a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.test.tsx
+++ /dev/null
@@ -1,103 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { storybookFlightsDataView } from '@kbn/presentation-util-plugin/public/mocks';
-import { ControlGroupInput, OPTIONS_LIST_CONTROL } from '../../../common';
-import { mockControlGroupContainer } from '../../../common/mocks';
-import { pluginServices } from '../../services';
-import { injectStorybookDataView } from '../../services/data_views/data_views.story';
-import { OptionsListEmbeddable } from './options_list_embeddable';
-import { OptionsListEmbeddableFactory } from './options_list_embeddable_factory';
-
-pluginServices.getServices().controls.getControlFactory = jest
-  .fn()
-  .mockImplementation((type: string) => {
-    if (type === OPTIONS_LIST_CONTROL) return new OptionsListEmbeddableFactory();
-  });
-
-describe('initialize', () => {
-  describe('without selected options', () => {
-    test('should notify control group when initialization is finished', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      // data view not required for test case
-      // setInitializationFinished is called before fetching options when value is not provided
-      injectStorybookDataView(undefined);
-
-      const control = await container.addOptionsListControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'OriginCityName',
-      });
-
-      expect(container.getInput().panels[control.getInput().id].type).toBe(OPTIONS_LIST_CONTROL);
-      expect(container.getOutput().embeddableLoaded[control.getInput().id]).toBe(true);
-    });
-  });
-
-  describe('with selected options', () => {
-    test('should set error message when data view can not be found', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(undefined);
-
-      const control = (await container.addOptionsListControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'OriginCityName',
-        selectedOptions: ['Seoul', 'Tokyo'],
-      })) as OptionsListEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.loading).toBe(false);
-      expect(reduxState.componentState.error).toBe(
-        'mock DataViews service currentDataView is undefined, call injectStorybookDataView to set'
-      );
-    });
-
-    test('should set error message when field can not be found', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      const control = (await container.addOptionsListControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'myField',
-        selectedOptions: ['Seoul', 'Tokyo'],
-      })) as OptionsListEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.loading).toBe(false);
-      expect(reduxState.componentState.error).toBe('Could not locate field: myField');
-    });
-
-    test('should notify control group when initialization is finished', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      const control = await container.addOptionsListControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'OriginCityName',
-        selectedOptions: ['Seoul', 'Tokyo'],
-      });
-
-      expect(container.getInput().panels[control.getInput().id].type).toBe(OPTIONS_LIST_CONTROL);
-      expect(container.getOutput().embeddableLoaded[control.getInput().id]).toBe(true);
-    });
-  });
-});
diff --git a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx b/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx
deleted file mode 100644
index b0112adc4a750..0000000000000
--- a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx
+++ /dev/null
@@ -1,488 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-import { isEmpty, isEqual } from 'lodash';
-import React, { createContext, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import { batch } from 'react-redux';
-import {
-  debounceTime,
-  distinctUntilChanged,
-  map,
-  merge,
-  skip,
-  Subject,
-  Subscription,
-  switchMap,
-  tap,
-} from 'rxjs';
-
-import { DataView, FieldSpec } from '@kbn/data-views-plugin/public';
-import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
-import {
-  buildExistsFilter,
-  buildPhraseFilter,
-  buildPhrasesFilter,
-  compareFilters,
-  COMPARE_ALL_OPTIONS,
-  Filter,
-} from '@kbn/es-query';
-import { i18n } from '@kbn/i18n';
-import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-
-import { ControlGroupContainer, OPTIONS_LIST_CONTROL } from '../..';
-import { OptionsListSelection } from '../../../common/options_list/options_list_selections';
-import { ControlFilterOutput } from '../../control_group/types';
-import { pluginServices } from '../../services';
-import { ControlsDataViewsService } from '../../services/data_views/types';
-import { ControlsOptionsListService } from '../../services/options_list/types';
-import { CanClearSelections, ControlInput, ControlOutput } from '../../types';
-import { OptionsListControl } from '../components/options_list_control';
-import { getDefaultComponentState, optionsListReducers } from '../options_list_reducers';
-import { MIN_OPTIONS_LIST_REQUEST_SIZE, OptionsListReduxState } from '../types';
-import { OptionsListEmbeddableInput } from '..';
-
-const diffDataFetchProps = (
-  last?: OptionsListDataFetchProps,
-  current?: OptionsListDataFetchProps
-) => {
-  if (!current || !last) return false;
-  const { filters: currentFilters, ...currentWithoutFilters } = current;
-  const { filters: lastFilters, ...lastWithoutFilters } = last;
-  if (!deepEqual(currentWithoutFilters, lastWithoutFilters)) return false;
-  if (!compareFilters(lastFilters ?? [], currentFilters ?? [], COMPARE_ALL_OPTIONS)) return false;
-  return true;
-};
-
-interface OptionsListDataFetchProps {
-  search?: string;
-  fieldName: string;
-  dataViewId: string;
-  validate?: boolean;
-  query?: ControlInput['query'];
-  filters?: ControlInput['filters'];
-}
-
-export const OptionsListEmbeddableContext = createContext<OptionsListEmbeddable | null>(null);
-export const useOptionsList = (): OptionsListEmbeddable => {
-  const optionsList = useContext<OptionsListEmbeddable | null>(OptionsListEmbeddableContext);
-  if (optionsList == null) {
-    throw new Error('useOptionsList must be used inside OptionsListEmbeddableContext.');
-  }
-  return optionsList!;
-};
-
-type OptionsListReduxEmbeddableTools = ReduxEmbeddableTools<
-  OptionsListReduxState,
-  typeof optionsListReducers
->;
-
-export class OptionsListEmbeddable
-  extends Embeddable<OptionsListEmbeddableInput, ControlOutput>
-  implements CanClearSelections
-{
-  public readonly type = OPTIONS_LIST_CONTROL;
-  public deferEmbeddableLoad = true;
-  public parent: ControlGroupContainer;
-
-  private subscriptions: Subscription = new Subscription();
-  private node?: HTMLElement;
-
-  // Controls services
-  private dataViewsService: ControlsDataViewsService;
-  private optionsListService: ControlsOptionsListService;
-
-  // Internal data fetching state for this input control.
-  private typeaheadSubject: Subject<string> = new Subject<string>();
-  private loadMoreSubject: Subject<number> = new Subject<number>();
-  private abortController?: AbortController;
-  private dataView?: DataView;
-  private field?: FieldSpec;
-
-  // state management
-  public select: OptionsListReduxEmbeddableTools['select'];
-  public getState: OptionsListReduxEmbeddableTools['getState'];
-  public dispatch: OptionsListReduxEmbeddableTools['dispatch'];
-  public onStateChange: OptionsListReduxEmbeddableTools['onStateChange'];
-
-  private cleanupStateTools: () => void;
-
-  constructor(
-    reduxToolsPackage: ReduxToolsPackage,
-    input: OptionsListEmbeddableInput,
-    output: ControlOutput,
-    parent?: IContainer
-  ) {
-    super(input, output, parent);
-    this.parent = parent as ControlGroupContainer;
-
-    // Destructure controls services
-    ({ dataViews: this.dataViewsService, optionsList: this.optionsListService } =
-      pluginServices.getServices());
-
-    this.typeaheadSubject = new Subject<string>();
-    this.loadMoreSubject = new Subject<number>();
-
-    // build redux embeddable tools
-    const reduxEmbeddableTools = reduxToolsPackage.createReduxEmbeddableTools<
-      OptionsListReduxState,
-      typeof optionsListReducers
-    >({
-      embeddable: this,
-      reducers: optionsListReducers,
-      initialComponentState: getDefaultComponentState(),
-    });
-    this.select = reduxEmbeddableTools.select;
-    this.getState = reduxEmbeddableTools.getState;
-    this.dispatch = reduxEmbeddableTools.dispatch;
-    this.cleanupStateTools = reduxEmbeddableTools.cleanup;
-    this.onStateChange = reduxEmbeddableTools.onStateChange;
-
-    this.initialize();
-  }
-
-  private initialize = async () => {
-    const { selectedOptions: initialSelectedOptions } = this.getInput();
-    if (initialSelectedOptions) {
-      const {
-        explicitInput: { existsSelected, exclude },
-      } = this.getState();
-      const { filters } = await this.selectionsToFilters({
-        existsSelected,
-        exclude,
-        selectedOptions: initialSelectedOptions,
-      });
-      this.dispatch.publishFilters(filters);
-    }
-    this.setInitializationFinished();
-
-    this.dispatch.setAllowExpensiveQueries(
-      await this.optionsListService.getAllowExpensiveQueries()
-    );
-
-    this.runOptionsListQuery().then(async () => {
-      this.setupSubscriptions();
-    });
-  };
-
-  private setupSubscriptions = () => {
-    const dataFetchPipe = this.getInput$().pipe(
-      map((newInput) => ({
-        validate: !Boolean(newInput.ignoreParentSettings?.ignoreValidations),
-        lastReloadRequestTime: newInput.lastReloadRequestTime,
-        existsSelected: newInput.existsSelected,
-        searchTechnique: newInput.searchTechnique,
-        dataViewId: newInput.dataViewId,
-        fieldName: newInput.fieldName,
-        timeRange: newInput.timeRange,
-        timeslice: newInput.timeslice,
-        exclude: newInput.exclude,
-        filters: newInput.filters,
-        query: newInput.query,
-        sort: newInput.sort,
-      })),
-      distinctUntilChanged(diffDataFetchProps)
-    );
-
-    // debounce typeahead pipe to slow down search string related queries
-    const typeaheadPipe = this.typeaheadSubject.pipe(debounceTime(100));
-    const loadMorePipe = this.loadMoreSubject.pipe(debounceTime(100));
-
-    // fetch available options when input changes or when search string has changed
-    this.subscriptions.add(
-      merge(dataFetchPipe, typeaheadPipe)
-        .pipe(skip(1)) // Skip the first input update because options list query will be run by initialize.
-        .subscribe(() => {
-          this.runOptionsListQuery();
-        })
-    );
-
-    // fetch more options when reaching the bottom of the available options
-    this.subscriptions.add(
-      loadMorePipe.subscribe((size) => {
-        this.runOptionsListQuery(size);
-      })
-    );
-
-    /**
-     * when input selectedOptions changes, check all selectedOptions against the latest value of invalidSelections, and publish filter
-     **/
-    this.subscriptions.add(
-      this.getInput$()
-        .pipe(
-          distinctUntilChanged(
-            (a, b) =>
-              a.exclude === b.exclude &&
-              a.existsSelected === b.existsSelected &&
-              isEqual(a.selectedOptions, b.selectedOptions)
-          ),
-          tap(({ selectedOptions: newSelectedOptions }) => {
-            if (!newSelectedOptions || isEmpty(newSelectedOptions)) {
-              this.dispatch.clearValidAndInvalidSelections({});
-            } else {
-              const { invalidSelections } = this.getState().componentState ?? {};
-              const newValidSelections: OptionsListSelection[] = [];
-              const newInvalidSelections: OptionsListSelection[] = [];
-              for (const selectedOption of newSelectedOptions) {
-                if (invalidSelections?.includes(selectedOption)) {
-                  newInvalidSelections.push(selectedOption);
-                  continue;
-                }
-                newValidSelections.push(selectedOption);
-              }
-              this.dispatch.setValidAndInvalidSelections({
-                validSelections: newValidSelections,
-                invalidSelections: newInvalidSelections,
-              });
-            }
-          }),
-          switchMap(async () => {
-            const { filters: newFilters } = await this.buildFilter();
-            this.dispatch.publishFilters(newFilters);
-          })
-        )
-        .subscribe()
-    );
-  };
-
-  private getCurrentDataViewAndField = async (): Promise<{
-    dataView?: DataView;
-    field?: FieldSpec;
-  }> => {
-    const {
-      explicitInput: { dataViewId, fieldName },
-    } = this.getState();
-
-    if (!this.dataView || this.dataView.id !== dataViewId) {
-      try {
-        this.dataView = await this.dataViewsService.get(dataViewId);
-      } catch (e) {
-        this.dispatch.setErrorMessage(e.message);
-      }
-
-      this.dispatch.setDataViewId(this.dataView?.id);
-    }
-
-    if (this.dataView && (!this.field || this.field.name !== fieldName)) {
-      const field = this.dataView.getFieldByName(fieldName);
-      if (field) {
-        this.field = field.toSpec();
-        this.dispatch.setField(this.field);
-      } else {
-        this.dispatch.setErrorMessage(
-          i18n.translate('controls.optionsList.errors.fieldNotFound', {
-            defaultMessage: 'Could not locate field: {fieldName}',
-            values: { fieldName },
-          })
-        );
-      }
-    }
-
-    return { dataView: this.dataView, field: this.field };
-  };
-
-  private runOptionsListQuery = async (size: number = MIN_OPTIONS_LIST_REQUEST_SIZE) => {
-    const previousFieldName = this.field?.name;
-    const { dataView, field } = await this.getCurrentDataViewAndField();
-    if (!dataView || !field) return;
-
-    if (previousFieldName && field.name !== previousFieldName) {
-      this.dispatch.setSearchString('');
-    }
-
-    const {
-      componentState: { searchString, allowExpensiveQueries },
-      explicitInput: { selectedOptions, runPastTimeout, existsSelected, sort, searchTechnique },
-    } = this.getState();
-    this.dispatch.setLoading(true);
-    if (searchString.valid) {
-      // need to get filters, query, ignoreParentSettings, and timeRange from input for inheritance
-      const {
-        ignoreParentSettings,
-        filters,
-        query,
-        timeRange: globalTimeRange,
-        timeslice,
-      } = this.getInput();
-      if (this.abortController) this.abortController.abort();
-      this.abortController = new AbortController();
-      const timeRange =
-        timeslice !== undefined
-          ? {
-              from: new Date(timeslice[0]).toISOString(),
-              to: new Date(timeslice[1]).toISOString(),
-              mode: 'absolute' as 'absolute',
-            }
-          : globalTimeRange;
-
-      const response = await this.optionsListService.runOptionsListRequest(
-        {
-          sort,
-          size,
-          field,
-          query,
-          filters,
-          dataView,
-          timeRange,
-          searchTechnique,
-          runPastTimeout,
-          selectedOptions,
-          allowExpensiveQueries,
-          searchString: searchString.value,
-        },
-        this.abortController.signal
-      );
-
-      if (this.optionsListService.optionsListResponseWasFailure(response)) {
-        if (response.error === 'aborted') {
-          // This prevents an aborted request (which can happen, for example, when a user types a search string too quickly)
-          // from prematurely setting loading to `false` and updating the suggestions to show "No results"
-          return;
-        }
-        this.dispatch.setErrorMessage(response.error.message);
-        return;
-      }
-
-      const { suggestions, invalidSelections, totalCardinality } = response;
-
-      if (
-        (!selectedOptions && !existsSelected) ||
-        isEmpty(invalidSelections) ||
-        ignoreParentSettings?.ignoreValidations
-      ) {
-        this.dispatch.updateQueryResults({
-          availableOptions: suggestions,
-          invalidSelections: undefined,
-          validSelections: selectedOptions,
-          totalCardinality,
-        });
-        this.reportInvalidSelections(false);
-      } else {
-        const valid: OptionsListSelection[] = [];
-        const invalid: OptionsListSelection[] = [];
-        for (const selectedOption of selectedOptions ?? []) {
-          if (invalidSelections?.includes(selectedOption)) invalid.push(selectedOption);
-          else valid.push(selectedOption);
-        }
-        this.dispatch.updateQueryResults({
-          availableOptions: suggestions,
-          invalidSelections: invalid,
-          validSelections: valid,
-          totalCardinality,
-        });
-        this.reportInvalidSelections(true);
-      }
-
-      batch(() => {
-        this.dispatch.setErrorMessage(undefined);
-        this.dispatch.setLoading(false);
-      });
-    } else {
-      batch(() => {
-        this.dispatch.setErrorMessage(undefined);
-        this.dispatch.updateQueryResults({
-          availableOptions: [],
-        });
-        this.dispatch.setLoading(false);
-      });
-    }
-  };
-
-  private reportInvalidSelections = (hasInvalidSelections: boolean) => {
-    this.parent?.reportInvalidSelections({
-      id: this.id,
-      hasInvalidSelections,
-    });
-  };
-
-  public selectionsToFilters = async (
-    input: Partial<OptionsListEmbeddableInput>
-  ): Promise<ControlFilterOutput> => {
-    const { existsSelected, exclude, selectedOptions } = input;
-
-    if ((!selectedOptions || isEmpty(selectedOptions)) && !existsSelected) {
-      return { filters: [] };
-    }
-
-    const { dataView, field } = await this.getCurrentDataViewAndField();
-    if (!dataView || !field) return { filters: [] };
-
-    let newFilter: Filter | undefined;
-    if (existsSelected) {
-      newFilter = buildExistsFilter(field, dataView);
-    } else if (selectedOptions) {
-      if (selectedOptions.length === 1) {
-        newFilter = buildPhraseFilter(field, selectedOptions[0], dataView);
-      } else {
-        newFilter = buildPhrasesFilter(field, selectedOptions, dataView);
-      }
-    }
-
-    if (!newFilter) return { filters: [] };
-    newFilter.meta.key = field?.name;
-    if (exclude) newFilter.meta.negate = true;
-    return { filters: [newFilter] };
-  };
-
-  private buildFilter = async (): Promise<ControlFilterOutput> => {
-    const {
-      explicitInput: { existsSelected, exclude, selectedOptions },
-    } = this.getState();
-
-    return await this.selectionsToFilters({
-      existsSelected,
-      exclude,
-      selectedOptions,
-    });
-  };
-
-  public clearSelections() {
-    this.dispatch.clearSelections({});
-    this.reportInvalidSelections(false);
-  }
-
-  reload = () => {
-    // clear cache when reload is requested
-    this.optionsListService.clearOptionsListCache();
-    this.runOptionsListQuery();
-  };
-
-  public destroy = () => {
-    super.destroy();
-    this.cleanupStateTools();
-    this.abortController?.abort();
-    this.subscriptions.unsubscribe();
-    if (this.node) ReactDOM.unmountComponentAtNode(this.node);
-  };
-
-  public render = (node: HTMLElement) => {
-    if (this.node) {
-      ReactDOM.unmountComponentAtNode(this.node);
-    }
-    this.node = node;
-
-    ReactDOM.render(
-      <KibanaRenderContextProvider {...pluginServices.getServices().core}>
-        <OptionsListEmbeddableContext.Provider value={this}>
-          <OptionsListControl
-            typeaheadSubject={this.typeaheadSubject}
-            loadMoreSubject={this.loadMoreSubject}
-          />
-        </OptionsListEmbeddableContext.Provider>
-      </KibanaRenderContextProvider>,
-      node
-    );
-  };
-
-  public isChained() {
-    return true;
-  }
-}
diff --git a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable_factory.tsx b/src/plugins/controls/public/options_list/embeddable/options_list_embeddable_factory.tsx
deleted file mode 100644
index 96b3268f56cc3..0000000000000
--- a/src/plugins/controls/public/options_list/embeddable/options_list_embeddable_factory.tsx
+++ /dev/null
@@ -1,86 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-
-import { i18n } from '@kbn/i18n';
-import { DataViewField } from '@kbn/data-views-plugin/common';
-import { lazyLoadReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
-
-import {
-  createOptionsListExtract,
-  createOptionsListInject,
-} from '../../../common/options_list/options_list_persistable_state';
-import {
-  OptionsListEmbeddableInput,
-  OPTIONS_LIST_CONTROL,
-} from '../../../common/options_list/types';
-import { OptionsListEditorOptions } from '../components/options_list_editor_options';
-import { ControlEmbeddable, IEditableControlFactory } from '../../types';
-
-export class OptionsListEmbeddableFactory
-  implements EmbeddableFactoryDefinition, IEditableControlFactory<OptionsListEmbeddableInput>
-{
-  public type = OPTIONS_LIST_CONTROL;
-  public canCreateNew = () => false;
-
-  constructor() {}
-
-  public async create(initialInput: OptionsListEmbeddableInput, parent?: IContainer) {
-    const reduxEmbeddablePackage = await lazyLoadReduxToolsPackage();
-    const { OptionsListEmbeddable } = await import('./options_list_embeddable');
-    return Promise.resolve(
-      new OptionsListEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
-    );
-  }
-
-  public presaveTransformFunction = (
-    newInput: Partial<OptionsListEmbeddableInput>,
-    embeddable?: ControlEmbeddable<OptionsListEmbeddableInput>
-  ) => {
-    if (
-      embeddable &&
-      ((newInput.fieldName && !deepEqual(newInput.fieldName, embeddable.getInput().fieldName)) ||
-        (newInput.dataViewId && !deepEqual(newInput.dataViewId, embeddable.getInput().dataViewId)))
-    ) {
-      // if the field name or data view id has changed in this editing session, reset all selections
-      newInput.selectedOptions = undefined;
-      newInput.existsSelected = undefined;
-      newInput.exclude = undefined;
-      newInput.sort = undefined;
-    }
-    return newInput;
-  };
-
-  public isFieldCompatible = (field: DataViewField) => {
-    return (
-      !field.spec.scripted &&
-      field.aggregatable &&
-      ['string', 'boolean', 'ip', 'date', 'number'].includes(field.type)
-    );
-  };
-
-  public controlEditorOptionsComponent = OptionsListEditorOptions;
-
-  public isEditable = () => Promise.resolve(true);
-
-  public getDisplayName = () =>
-    i18n.translate('controls.optionsList.displayName', {
-      defaultMessage: 'Options list',
-    });
-  public getIconType = () => 'editorChecklist';
-  public getDescription = () =>
-    i18n.translate('controls.optionsList.description', {
-      defaultMessage: 'Add a menu for selecting field values.',
-    });
-
-  public inject = createOptionsListInject();
-  public extract = createOptionsListExtract();
-}
diff --git a/src/plugins/controls/public/options_list/index.ts b/src/plugins/controls/public/options_list/index.ts
deleted file mode 100644
index f4398e8f060b0..0000000000000
--- a/src/plugins/controls/public/options_list/index.ts
+++ /dev/null
@@ -1,14 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { OPTIONS_LIST_CONTROL } from '../../common/options_list/types';
-export { OptionsListEmbeddableFactory } from './embeddable/options_list_embeddable_factory';
-
-export type { OptionsListEmbeddable } from './embeddable/options_list_embeddable';
-export type { OptionsListEmbeddableInput } from '../../common/options_list/types';
diff --git a/src/plugins/controls/public/options_list/options_list_reducers.ts b/src/plugins/controls/public/options_list/options_list_reducers.ts
deleted file mode 100644
index 4a2becce8ef2b..0000000000000
--- a/src/plugins/controls/public/options_list/options_list_reducers.ts
+++ /dev/null
@@ -1,168 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { PayloadAction } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/types/types-external';
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-import { Filter } from '@kbn/es-query';
-
-import { isValidSearch } from '../../common/options_list/is_valid_search';
-import { OptionsListSelection } from '../../common/options_list/options_list_selections';
-import {
-  OptionsListSortingType,
-  OPTIONS_LIST_DEFAULT_SORT,
-} from '../../common/options_list/suggestions_sorting';
-import { OptionsListComponentState, OptionsListReduxState } from './types';
-
-export const getDefaultComponentState = (): OptionsListReduxState['componentState'] => ({
-  popoverOpen: false,
-  allowExpensiveQueries: true,
-  searchString: { value: '', valid: true },
-});
-
-export const optionsListReducers = {
-  deselectOption: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<OptionsListSelection>
-  ) => {
-    if (!state.explicitInput.selectedOptions || !state.componentState.field) return;
-
-    const itemIndex = state.explicitInput.selectedOptions.indexOf(action.payload);
-    if (itemIndex !== -1) {
-      const newSelections = [...state.explicitInput.selectedOptions];
-      newSelections.splice(itemIndex, 1);
-      state.explicitInput.selectedOptions = newSelections;
-    }
-  },
-  setSearchString: (state: WritableDraft<OptionsListReduxState>, action: PayloadAction<string>) => {
-    state.componentState.searchString.value = action.payload;
-    state.componentState.searchString.valid = isValidSearch({
-      searchString: action.payload,
-      fieldType: state.componentState.field?.type,
-      searchTechnique: state.componentState.allowExpensiveQueries
-        ? state.explicitInput.searchTechnique
-        : 'exact', // only exact match searching is supported when allowExpensiveQueries is false
-    });
-  },
-  setAllowExpensiveQueries: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<boolean>
-  ) => {
-    state.componentState.allowExpensiveQueries = action.payload;
-  },
-  setInvalidSelectionWarningOpen: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<boolean>
-  ) => {
-    state.componentState.showInvalidSelectionWarning = action.payload;
-  },
-  setPopoverOpen: (state: WritableDraft<OptionsListReduxState>, action: PayloadAction<boolean>) => {
-    state.componentState.popoverOpen = action.payload;
-  },
-  setSort: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<Partial<OptionsListSortingType>>
-  ) => {
-    state.explicitInput.sort = {
-      ...(state.explicitInput.sort ?? OPTIONS_LIST_DEFAULT_SORT),
-      ...action.payload,
-    };
-  },
-  selectExists: (state: WritableDraft<OptionsListReduxState>, action: PayloadAction<boolean>) => {
-    if (action.payload) {
-      state.explicitInput.existsSelected = true;
-      state.explicitInput.selectedOptions = [];
-    } else {
-      state.explicitInput.existsSelected = false;
-    }
-  },
-  selectOption: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<OptionsListSelection>
-  ) => {
-    if (!state.explicitInput.selectedOptions) state.explicitInput.selectedOptions = [];
-    if (state.explicitInput.existsSelected) state.explicitInput.existsSelected = false;
-
-    state.explicitInput.selectedOptions?.push(action.payload);
-  },
-  replaceSelection: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<OptionsListSelection>
-  ) => {
-    state.explicitInput.selectedOptions = [action.payload];
-    if (state.explicitInput.existsSelected) state.explicitInput.existsSelected = false;
-  },
-  clearSelections: (state: WritableDraft<OptionsListReduxState>) => {
-    if (state.explicitInput.existsSelected) state.explicitInput.existsSelected = false;
-    if (state.explicitInput.selectedOptions) state.explicitInput.selectedOptions = [];
-  },
-  setExclude: (state: WritableDraft<OptionsListReduxState>, action: PayloadAction<boolean>) => {
-    state.explicitInput.exclude = action.payload;
-  },
-  clearValidAndInvalidSelections: (state: WritableDraft<OptionsListReduxState>) => {
-    state.componentState.invalidSelections = [];
-    state.componentState.validSelections = [];
-  },
-  setValidAndInvalidSelections: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<Pick<OptionsListComponentState, 'validSelections' | 'invalidSelections'>>
-  ) => {
-    const { invalidSelections, validSelections } = action.payload;
-    state.componentState.invalidSelections = invalidSelections;
-    state.componentState.validSelections = validSelections;
-  },
-  setErrorMessage: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<string | undefined>
-  ) => {
-    state.componentState.error = action.payload;
-  },
-  setLoading: (state: WritableDraft<OptionsListReduxState>, action: PayloadAction<boolean>) => {
-    state.output.loading = action.payload;
-  },
-  setField: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<FieldSpec | undefined>
-  ) => {
-    state.componentState.field = action.payload;
-  },
-  updateQueryResults: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<
-      Pick<
-        OptionsListComponentState,
-        'availableOptions' | 'invalidSelections' | 'validSelections' | 'totalCardinality'
-      >
-    >
-  ) => {
-    state.componentState = {
-      ...(state.componentState ?? {}),
-      ...action.payload,
-    };
-  },
-  publishFilters: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<Filter[] | undefined>
-  ) => {
-    state.output.filters = action.payload;
-  },
-  setDataViewId: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<string | undefined>
-  ) => {
-    state.output.dataViewId = action.payload;
-  },
-  setExplicitInputDataViewId: (
-    state: WritableDraft<OptionsListReduxState>,
-    action: PayloadAction<string>
-  ) => {
-    state.explicitInput.dataViewId = action.payload;
-  },
-};
diff --git a/src/plugins/controls/public/options_list/types.ts b/src/plugins/controls/public/options_list/types.ts
deleted file mode 100644
index 5bab09f33dfdd..0000000000000
--- a/src/plugins/controls/public/options_list/types.ts
+++ /dev/null
@@ -1,48 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-
-import { OptionsListSelection } from '../../common/options_list/options_list_selections';
-import {
-  OptionsListEmbeddableInput,
-  OptionsListSuggestions,
-} from '../../common/options_list/types';
-import { ControlOutput } from '../types';
-
-export const MIN_OPTIONS_LIST_REQUEST_SIZE = 10;
-export const MAX_OPTIONS_LIST_REQUEST_SIZE = 1000;
-
-interface SearchString {
-  value: string;
-  valid: boolean;
-}
-
-// Component state is only used by public components.
-export interface OptionsListComponentState {
-  availableOptions?: OptionsListSuggestions;
-  invalidSelections?: OptionsListSelection[];
-  validSelections?: OptionsListSelection[];
-
-  allowExpensiveQueries: boolean;
-  searchString: SearchString;
-  totalCardinality?: number;
-  popoverOpen: boolean;
-  field?: FieldSpec;
-  error?: string;
-  showInvalidSelectionWarning?: boolean;
-}
-
-// public only - redux embeddable state type
-export type OptionsListReduxState = ReduxEmbeddableState<
-  OptionsListEmbeddableInput,
-  ControlOutput,
-  OptionsListComponentState
->;
diff --git a/src/plugins/controls/public/plugin.ts b/src/plugins/controls/public/plugin.ts
index 94595066fc6e9..039b960bfc3c5 100644
--- a/src/plugins/controls/public/plugin.ts
+++ b/src/plugins/controls/public/plugin.ts
@@ -7,33 +7,21 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
-import { EmbeddableFactory, PANEL_HOVER_TRIGGER } from '@kbn/embeddable-plugin/public';
+import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { PANEL_HOVER_TRIGGER } from '@kbn/embeddable-plugin/public';
 
-import {
-  ControlGroupContainerFactory,
-  CONTROL_GROUP_TYPE,
-  OPTIONS_LIST_CONTROL,
-  RANGE_SLIDER_CONTROL,
-  TIME_SLIDER_CONTROL,
-} from '.';
-import { OptionsListEmbeddableFactory, OptionsListEmbeddableInput } from './options_list';
-import { RangeSliderEmbeddableFactory, RangeSliderEmbeddableInput } from './range_slider';
-import { TimeSliderEmbeddableFactory, TimeSliderControlEmbeddableInput } from './time_slider';
+import { registerControlGroupEmbeddable } from './react_controls/control_group/register_control_group_embeddable';
+import { registerOptionsListControl } from './react_controls/controls/data_controls/options_list_control/register_options_list_control';
+import { registerRangeSliderControl } from './react_controls/controls/data_controls/range_slider/register_range_slider_control';
+import { registerTimeSliderControl } from './react_controls/controls/timeslider_control/register_timeslider_control';
 import { controlsService } from './services/controls/controls_service';
-import {
+import type {
   ControlsPluginSetup,
-  ControlsPluginStart,
   ControlsPluginSetupDeps,
+  ControlsPluginStart,
   ControlsPluginStartDeps,
-  IEditableControlFactory,
-  ControlInput,
 } from './types';
-import { registerControlGroupEmbeddable } from './react_controls/control_group/register_control_group_embeddable';
-import { registerOptionsListControl } from './react_controls/controls/data_controls/options_list_control/register_options_list_control';
-import { registerRangeSliderControl } from './react_controls/controls/data_controls/range_slider/register_range_slider_control';
-import { registerTimeSliderControl } from './react_controls/controls/timeslider_control/register_timeslider_control';
-import { EditControlAction } from './react_controls/actions/edit_control_action/edit_control_action';
+
 export class ControlsPlugin
   implements
     Plugin<
@@ -51,22 +39,11 @@ export class ControlsPlugin
     pluginServices.setRegistry(registry.start({ coreStart, startPlugins }));
   }
 
-  private transferEditorFunctions<I extends ControlInput = ControlInput>(
-    factoryDef: IEditableControlFactory<I>,
-    factory: EmbeddableFactory
-  ) {
-    (factory as IEditableControlFactory<I>).controlEditorOptionsComponent =
-      factoryDef.controlEditorOptionsComponent ?? undefined;
-    (factory as IEditableControlFactory<I>).presaveTransformFunction =
-      factoryDef.presaveTransformFunction;
-    (factory as IEditableControlFactory<I>).isFieldCompatible = factoryDef.isFieldCompatible;
-  }
-
   public setup(
     _coreSetup: CoreSetup<ControlsPluginStartDeps, ControlsPluginStart>,
     _setupPlugins: ControlsPluginSetupDeps
   ): ControlsPluginSetup {
-    const { registerControlType } = controlsService;
+    const { registerControlFactory } = controlsService;
     const { embeddable } = _setupPlugins;
 
     registerControlGroupEmbeddable(_coreSetup, embeddable);
@@ -74,51 +51,8 @@ export class ControlsPlugin
     registerRangeSliderControl(_coreSetup);
     registerTimeSliderControl(_coreSetup);
 
-    // register control group embeddable factory
-    _coreSetup.getStartServices().then(([, deps]) => {
-      embeddable.registerEmbeddableFactory(
-        CONTROL_GROUP_TYPE,
-        new ControlGroupContainerFactory(deps.embeddable)
-      );
-
-      // Options List control factory setup
-      const optionsListFactoryDef = new OptionsListEmbeddableFactory();
-      const optionsListFactory = embeddable.registerEmbeddableFactory(
-        OPTIONS_LIST_CONTROL,
-        optionsListFactoryDef
-      )();
-      this.transferEditorFunctions<OptionsListEmbeddableInput>(
-        optionsListFactoryDef,
-        optionsListFactory
-      );
-      registerControlType(optionsListFactory);
-
-      // Register range slider
-      const rangeSliderFactoryDef = new RangeSliderEmbeddableFactory();
-      const rangeSliderFactory = embeddable.registerEmbeddableFactory(
-        RANGE_SLIDER_CONTROL,
-        rangeSliderFactoryDef
-      )();
-      this.transferEditorFunctions<RangeSliderEmbeddableInput>(
-        rangeSliderFactoryDef,
-        rangeSliderFactory
-      );
-      registerControlType(rangeSliderFactory);
-
-      const timeSliderFactoryDef = new TimeSliderEmbeddableFactory();
-      const timeSliderFactory = embeddable.registerEmbeddableFactory(
-        TIME_SLIDER_CONTROL,
-        timeSliderFactoryDef
-      )();
-      this.transferEditorFunctions<TimeSliderControlEmbeddableInput>(
-        timeSliderFactoryDef,
-        timeSliderFactory
-      );
-      registerControlType(timeSliderFactory);
-    });
-
     return {
-      registerControlType,
+      registerControlFactory,
     };
   }
 
@@ -126,7 +60,13 @@ export class ControlsPlugin
     this.startControlsKibanaServices(coreStart, startPlugins).then(async () => {
       const { uiActions } = startPlugins;
 
-      const { DeleteControlAction } = await import('./control_group/actions/delete_control_action');
+      const [{ DeleteControlAction }, { EditControlAction }, { ClearControlAction }] =
+        await Promise.all([
+          import('./actions/delete_control_action'),
+          import('./actions/edit_control_action'),
+          import('./actions/clear_control_action'),
+        ]);
+
       const deleteControlAction = new DeleteControlAction();
       uiActions.registerAction(deleteControlAction);
       uiActions.attachAction(PANEL_HOVER_TRIGGER, deleteControlAction.id);
@@ -135,28 +75,15 @@ export class ControlsPlugin
       uiActions.registerAction(editControlAction);
       uiActions.attachAction(PANEL_HOVER_TRIGGER, editControlAction.id);
 
-      /**
-       * TODO: Remove edit legacy control embeddable action when embeddable controls are removed
-       */
-      const { EditLegacyEmbeddableControlAction } = await import(
-        './control_group/actions/edit_control_action'
-      );
-      const editLegacyEmbeddableControlAction = new EditLegacyEmbeddableControlAction(
-        deleteControlAction
-      );
-      uiActions.registerAction(editLegacyEmbeddableControlAction);
-      uiActions.attachAction(PANEL_HOVER_TRIGGER, editLegacyEmbeddableControlAction.id);
-
-      const { ClearControlAction } = await import('./control_group/actions/clear_control_action');
       const clearControlAction = new ClearControlAction();
       uiActions.registerAction(clearControlAction);
       uiActions.attachAction(PANEL_HOVER_TRIGGER, clearControlAction.id);
     });
 
-    const { getControlFactory, getControlTypes } = controlsService;
+    const { getControlFactory, getAllControlTypes } = controlsService;
     return {
       getControlFactory,
-      getControlTypes,
+      getAllControlTypes,
     };
   }
 
diff --git a/src/plugins/controls/public/range_slider/components/range_slider_control.tsx b/src/plugins/controls/public/range_slider/components/range_slider_control.tsx
deleted file mode 100644
index 46e4941a0a81e..0000000000000
--- a/src/plugins/controls/public/range_slider/components/range_slider_control.tsx
+++ /dev/null
@@ -1,233 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { debounce } from 'lodash';
-import React, { FC, useState, useMemo, useEffect, useCallback, useRef } from 'react';
-
-import {
-  EuiRangeTick,
-  EuiDualRange,
-  EuiDualRangeProps,
-  EuiToken,
-  EuiToolTip,
-  useEuiTheme,
-} from '@elastic/eui';
-
-import { RangeValue } from '../../../common/range_slider/types';
-import { useRangeSlider } from '../embeddable/range_slider_embeddable';
-import { ControlError } from '../../control_group/component/control_error_component';
-
-import { MIN_POPOVER_WIDTH } from '../../constants';
-import { useFieldFormatter } from '../../hooks/use_field_formatter';
-import { rangeSliderControlStyles } from '../../react_controls/controls/data_controls/range_slider/components/range_slider.styles';
-import { RangeSliderStrings } from './range_slider_strings';
-
-export const RangeSliderControl: FC = () => {
-  /** Controls Services Context */
-  const rangeSlider = useRangeSlider();
-  const rangeSliderRef = useRef<EuiDualRangeProps | null>(null);
-
-  // Embeddable explicit input
-  const id = rangeSlider.select((state) => state.explicitInput.id);
-  const value = rangeSlider.select((state) => state.explicitInput.value);
-  const step = rangeSlider.select((state) => state.explicitInput.step);
-
-  // Embeddable component state
-  const min = rangeSlider.select((state) => state.componentState.min);
-  const max = rangeSlider.select((state) => state.componentState.max);
-  const error = rangeSlider.select((state) => state.componentState.error);
-  const fieldSpec = rangeSlider.select((state) => state.componentState.field);
-  const isInvalid = rangeSlider.select((state) => state.componentState.isInvalid);
-
-  // Embeddable output
-  const isLoading = rangeSlider.select((state) => state.output.loading);
-  const dataViewId = rangeSlider.select((state) => state.output.dataViewId);
-
-  // React component state
-  const [displayedValue, setDisplayedValue] = useState<RangeValue>(value ?? ['', '']);
-
-  const fieldFormatter = useFieldFormatter({ dataViewId, fieldSpec });
-  const debouncedOnChange = useMemo(
-    () =>
-      debounce((newRange: RangeValue) => {
-        rangeSlider.dispatch.setSelectedRange(newRange);
-      }, 750),
-    [rangeSlider.dispatch]
-  );
-
-  /**
-   * This will recalculate the displayed min/max of the range slider to allow for selections smaller
-   * than the `min` and larger than the `max`
-   */
-  const [displayedMin, displayedMax] = useMemo((): [number, number] => {
-    if (min === undefined || max === undefined) return [-Infinity, Infinity];
-    const selectedValue = value ?? ['', ''];
-    const [selectedMin, selectedMax] = [
-      selectedValue[0] === '' ? min : parseFloat(selectedValue[0]),
-      selectedValue[1] === '' ? max : parseFloat(selectedValue[1]),
-    ];
-
-    if (!step) return [Math.min(selectedMin, min), Math.max(selectedMax, max ?? Infinity)];
-
-    const minTick = Math.floor(Math.min(selectedMin, min) / step) * step;
-    const maxTick = Math.ceil(Math.max(selectedMax, max) / step) * step;
-
-    return [Math.min(selectedMin, min, minTick), Math.max(selectedMax, max ?? Infinity, maxTick)];
-  }, [min, max, value, step]);
-
-  /**
-   * The following `useEffect` ensures that the changes to the value that come from the embeddable (for example,
-   * from the `reset` button on the dashboard or via chaining) are reflected in the displayed value
-   */
-  useEffect(() => {
-    setDisplayedValue(value ?? ['', '']);
-  }, [value]);
-
-  const ticks: EuiRangeTick[] = useMemo(() => {
-    return [
-      { value: displayedMin ?? -Infinity, label: fieldFormatter(String(displayedMin)) },
-      { value: displayedMax ?? Infinity, label: fieldFormatter(String(displayedMax)) },
-    ];
-  }, [displayedMin, displayedMax, fieldFormatter]);
-
-  const levels = useMemo(() => {
-    if (!step || min === undefined || max === undefined) {
-      return [
-        {
-          min: min ?? -Infinity,
-          max: max ?? Infinity,
-          color: 'success',
-        },
-      ];
-    }
-
-    const roundedMin = Math.floor(min / step) * step;
-    const roundedMax = Math.ceil(max / step) * step;
-
-    return [
-      {
-        min: roundedMin,
-        max: roundedMax,
-        color: 'success',
-      },
-    ];
-  }, [step, min, max]);
-
-  const disablePopover = useMemo(
-    () =>
-      isLoading ||
-      displayedMin === -Infinity ||
-      displayedMax === Infinity ||
-      displayedMin === displayedMax,
-    [isLoading, displayedMin, displayedMax]
-  );
-
-  const euiTheme = useEuiTheme();
-  const styles = rangeSliderControlStyles(euiTheme);
-
-  const getCommonInputProps = useCallback(
-    ({
-      inputValue,
-      testSubj,
-      placeholder,
-    }: {
-      inputValue: string;
-      testSubj: string;
-      placeholder: string;
-    }) => {
-      return {
-        isInvalid: undefined, // disabling this prop to handle our own validation styling
-        placeholder,
-        readOnly: false, // overwrites `canOpenPopover` to ensure that the inputs are always clickable
-        css: [
-          styles.fieldNumbers.rangeSliderFieldNumber,
-          isInvalid ? styles.fieldNumbers.invalid : styles.fieldNumbers.valid,
-        ],
-        className: 'rangeSliderAnchor__fieldNumber',
-        'data-test-subj': `rangeSlider__${testSubj}`,
-        value: inputValue === placeholder ? '' : inputValue,
-        title: !isInvalid && step ? '' : undefined, // overwrites native number input validation error when the value falls between two steps
-      };
-    },
-    [isInvalid, step, styles]
-  );
-
-  return error ? (
-    <ControlError error={error} />
-  ) : (
-    <div
-      css={[styles.rangeSliderControl, isInvalid && styles.invalid]}
-      className="rangeSliderAnchor__button"
-      data-test-subj={`range-slider-control-${id}`}
-    >
-      <EuiDualRange
-        ref={rangeSliderRef}
-        id={id}
-        fullWidth
-        showTicks
-        compressed
-        step={step}
-        ticks={ticks}
-        levels={levels}
-        min={displayedMin}
-        max={displayedMax}
-        isLoading={isLoading}
-        inputPopoverProps={{
-          panelMinWidth: MIN_POPOVER_WIDTH,
-        }}
-        append={
-          isInvalid ? (
-            <div className="rangeSlider__invalidToken">
-              <EuiToolTip
-                position="top"
-                content={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
-                delay="long"
-              >
-                <EuiToken
-                  tabIndex={0}
-                  iconType="alert"
-                  size="s"
-                  color="euiColorVis5"
-                  shape="square"
-                  fill="dark"
-                  title={RangeSliderStrings.control.getInvalidSelectionWarningLabel()}
-                />
-              </EuiToolTip>
-            </div>
-          ) : undefined
-        }
-        onMouseUp={() => {
-          // when the pin is dropped (on mouse up), cancel any pending debounced changes and force the change
-          // in value to happen instantly (which, in turn, will re-calculate the min/max for the slider due to
-          // the `useEffect` above.
-          debouncedOnChange.cancel();
-          rangeSlider.dispatch.setSelectedRange(displayedValue);
-        }}
-        readOnly={disablePopover}
-        showInput={'inputWithPopover'}
-        data-test-subj="rangeSlider__slider"
-        minInputProps={getCommonInputProps({
-          inputValue: displayedValue[0],
-          testSubj: 'lowerBoundFieldNumber',
-          placeholder: String(min ?? -Infinity),
-        })}
-        maxInputProps={getCommonInputProps({
-          inputValue: displayedValue[1],
-          testSubj: 'upperBoundFieldNumber',
-          placeholder: String(max ?? Infinity),
-        })}
-        value={[displayedValue[0] || displayedMin, displayedValue[1] || displayedMax]}
-        onChange={([minSelection, maxSelection]: [number | string, number | string]) => {
-          setDisplayedValue([String(minSelection), String(maxSelection)]);
-          debouncedOnChange([String(minSelection), String(maxSelection)]);
-        }}
-      />
-    </div>
-  );
-};
diff --git a/src/plugins/controls/public/range_slider/components/range_slider_editor_options.tsx b/src/plugins/controls/public/range_slider/components/range_slider_editor_options.tsx
deleted file mode 100644
index 3bd8a85bde5cc..0000000000000
--- a/src/plugins/controls/public/range_slider/components/range_slider_editor_options.tsx
+++ /dev/null
@@ -1,43 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React, { useState } from 'react';
-import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
-
-import type { RangeSliderEmbeddableInput } from '../../../common/range_slider/types';
-import { ControlEditorProps } from '../../types';
-
-import { RangeSliderStrings } from './range_slider_strings';
-
-export const RangeSliderEditorOptions = ({
-  initialInput,
-  onChange,
-  setControlEditorValid,
-}: ControlEditorProps<RangeSliderEmbeddableInput>) => {
-  const [step, setStep] = useState<number>(initialInput?.step || 1);
-
-  return (
-    <>
-      <EuiFormRow fullWidth label={RangeSliderStrings.editor.getStepTitle()}>
-        <EuiFieldNumber
-          value={step}
-          onChange={(event) => {
-            const newStep = event.target.valueAsNumber;
-            onChange({ step: newStep });
-            setStep(newStep);
-            setControlEditorValid(newStep > 0);
-          }}
-          min={0}
-          isInvalid={step <= 0}
-          data-test-subj="rangeSliderControl__stepAdditionalSetting"
-        />
-      </EuiFormRow>
-    </>
-  );
-};
diff --git a/src/plugins/controls/public/range_slider/components/range_slider_strings.ts b/src/plugins/controls/public/range_slider/components/range_slider_strings.ts
deleted file mode 100644
index c5a55caa48eea..0000000000000
--- a/src/plugins/controls/public/range_slider/components/range_slider_strings.ts
+++ /dev/null
@@ -1,31 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-
-export const RangeSliderStrings = {
-  control: {
-    getInvalidSelectionWarningLabel: () =>
-      i18n.translate('controls.rangeSlider.control.invalidSelectionWarningLabel', {
-        defaultMessage: 'Selected range returns no results.',
-      }),
-  },
-  editor: {
-    getStepTitle: () =>
-      i18n.translate('controls.rangeSlider.editor.stepSizeTitle', {
-        defaultMessage: 'Step size',
-      }),
-  },
-  popover: {
-    getNoAvailableDataHelpText: () =>
-      i18n.translate('controls.rangeSlider.popover.noAvailableDataHelpText', {
-        defaultMessage: 'There is no data to display. Adjust the time range and filters.',
-      }),
-  },
-};
diff --git a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.test.tsx b/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.test.tsx
deleted file mode 100644
index e2ed6ae01c6a9..0000000000000
--- a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.test.tsx
+++ /dev/null
@@ -1,203 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { storybookFlightsDataView } from '@kbn/presentation-util-plugin/public/mocks';
-import { of } from 'rxjs';
-import { ControlGroupInput, RANGE_SLIDER_CONTROL } from '../../../common';
-import { mockControlGroupContainer } from '../../../common/mocks';
-import { pluginServices } from '../../services';
-import { injectStorybookDataView } from '../../services/data_views/data_views.story';
-import { RangeSliderEmbeddable } from './range_slider_embeddable';
-import { RangeSliderEmbeddableFactory } from './range_slider_embeddable_factory';
-
-let totalResults = 20;
-beforeEach(() => {
-  totalResults = 20;
-
-  pluginServices.getServices().controls.getControlFactory = jest
-    .fn()
-    .mockImplementation((type: string) => {
-      if (type === RANGE_SLIDER_CONTROL) return new RangeSliderEmbeddableFactory();
-    });
-
-  pluginServices.getServices().data.searchSource.create = jest.fn().mockImplementation(() => {
-    let isAggsRequest = false;
-    return {
-      setField: (key: string) => {
-        if (key === 'aggs') {
-          isAggsRequest = true;
-        }
-      },
-      fetch$: () => {
-        return isAggsRequest
-          ? of({
-              rawResponse: { aggregations: { minAgg: { value: 0 }, maxAgg: { value: 1000 } } },
-            })
-          : of({
-              rawResponse: { hits: { total: { value: totalResults } } },
-            });
-      },
-    };
-  });
-});
-
-describe('initialize', () => {
-  describe('without selected range', () => {
-    test('should notify control group when initialization is finished', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      // data view not required for test case
-      // setInitializationFinished is called before fetching slider range when value is not provided
-      injectStorybookDataView(undefined);
-
-      const control = await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-      });
-
-      expect(container.getInput().panels[control.getInput().id].type).toBe(RANGE_SLIDER_CONTROL);
-      expect(container.getOutput().embeddableLoaded[control.getInput().id]).toBe(true);
-    });
-  });
-
-  describe('with selected range', () => {
-    test('should set error message when data view can not be found', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(undefined);
-
-      const control = (await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-        value: ['150', '300'],
-      })) as RangeSliderEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.loading).toBe(false);
-      expect(reduxState.componentState.error).toBe(
-        'mock DataViews service currentDataView is undefined, call injectStorybookDataView to set'
-      );
-    });
-
-    test('should set error message when field can not be found', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      const control = (await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'myField',
-        value: ['150', '300'],
-      })) as RangeSliderEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.loading).toBe(false);
-      expect(reduxState.componentState.error).toBe('Could not locate field: myField');
-    });
-
-    test('should set invalid state when filter returns zero results', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-      totalResults = 0;
-
-      const control = (await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-        value: ['150', '300'],
-      })) as RangeSliderEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.filters?.length).toBe(1);
-      expect(reduxState.componentState.isInvalid).toBe(true);
-    });
-
-    test('should set range and filter', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      const control = (await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-        value: ['150', '300'],
-      })) as RangeSliderEmbeddable;
-
-      // await redux dispatch
-      await new Promise((resolve) => process.nextTick(resolve));
-
-      const reduxState = control.getState();
-      expect(reduxState.output.filters?.length).toBe(1);
-      expect(reduxState.output.filters?.[0].query).toEqual({
-        range: {
-          AvgTicketPrice: {
-            gte: 150,
-            lte: 300,
-          },
-        },
-      });
-      expect(reduxState.componentState.isInvalid).toBe(false);
-      expect(reduxState.componentState.min).toBe(0);
-      expect(reduxState.componentState.max).toBe(1000);
-    });
-
-    test('should notify control group when initialization is finished', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      const control = await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-        value: ['150', '300'],
-      });
-
-      expect(container.getInput().panels[control.getInput().id].type).toBe(RANGE_SLIDER_CONTROL);
-      expect(container.getOutput().embeddableLoaded[control.getInput().id]).toBe(true);
-    });
-
-    test('should notify control group when initialization throws', async () => {
-      const controlGroupInput = { chainingSystem: 'NONE', panels: {} } as ControlGroupInput;
-      const container = await mockControlGroupContainer(controlGroupInput);
-
-      injectStorybookDataView(storybookFlightsDataView);
-
-      pluginServices.getServices().data.searchSource.create = jest.fn().mockImplementation(() => ({
-        setField: () => {},
-        fetch$: () => {
-          throw new Error('Simulated _search request error');
-        },
-      }));
-
-      const control = await container.addRangeSliderControl({
-        dataViewId: 'demoDataFlights',
-        fieldName: 'AvgTicketPrice',
-        value: ['150', '300'],
-      });
-
-      expect(container.getInput().panels[control.getInput().id].type).toBe(RANGE_SLIDER_CONTROL);
-      expect(container.getOutput().embeddableLoaded[control.getInput().id]).toBe(true);
-    });
-  });
-});
diff --git a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.tsx b/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.tsx
deleted file mode 100644
index a4d8a0cfc7c67..0000000000000
--- a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.tsx
+++ /dev/null
@@ -1,457 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import deepEqual from 'fast-deep-equal';
-import { get, isEmpty, isEqual } from 'lodash';
-import React, { createContext, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import { batch } from 'react-redux';
-import { lastValueFrom, Subscription, switchMap } from 'rxjs';
-import { distinctUntilChanged, map } from 'rxjs';
-
-import { DataView, DataViewField } from '@kbn/data-views-plugin/public';
-import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
-import {
-  buildRangeFilter,
-  compareFilters,
-  COMPARE_ALL_OPTIONS,
-  Filter,
-  RangeFilterParams,
-} from '@kbn/es-query';
-import { i18n } from '@kbn/i18n';
-import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-
-import { ControlGroupContainer, RANGE_SLIDER_CONTROL } from '../..';
-import { ControlFilterOutput } from '../../control_group/types';
-import { pluginServices } from '../../services';
-import { ControlsDataService } from '../../services/data/types';
-import { ControlsDataViewsService } from '../../services/data_views/types';
-import { CanClearSelections, ControlInput, ControlOutput } from '../../types';
-import { RangeSliderControl } from '../components/range_slider_control';
-import { getDefaultComponentState, rangeSliderReducers } from '../range_slider_reducers';
-import { RangeSliderReduxState } from '../types';
-import { RangeSliderEmbeddableInput } from '..';
-
-const diffDataFetchProps = (
-  current?: RangeSliderDataFetchProps,
-  last?: RangeSliderDataFetchProps
-) => {
-  if (!current || !last) return false;
-  const { filters: currentFilters, ...currentWithoutFilters } = current;
-  const { filters: lastFilters, ...lastWithoutFilters } = last;
-  if (!deepEqual(currentWithoutFilters, lastWithoutFilters)) return false;
-  if (!compareFilters(lastFilters ?? [], currentFilters ?? [], COMPARE_ALL_OPTIONS)) return false;
-  return true;
-};
-
-interface RangeSliderDataFetchProps {
-  fieldName: string;
-  dataViewId: string;
-  query?: ControlInput['query'];
-  filters?: ControlInput['filters'];
-  validate?: boolean;
-}
-
-export const RangeSliderControlContext = createContext<RangeSliderEmbeddable | null>(null);
-export const useRangeSlider = (): RangeSliderEmbeddable => {
-  const rangeSlider = useContext<RangeSliderEmbeddable | null>(RangeSliderControlContext);
-  if (rangeSlider == null) {
-    throw new Error('useRangeSlider must be used inside RangeSliderControlContext.');
-  }
-  return rangeSlider!;
-};
-
-type RangeSliderReduxEmbeddableTools = ReduxEmbeddableTools<
-  RangeSliderReduxState,
-  typeof rangeSliderReducers
->;
-
-export class RangeSliderEmbeddable
-  extends Embeddable<RangeSliderEmbeddableInput, ControlOutput>
-  implements CanClearSelections
-{
-  public readonly type = RANGE_SLIDER_CONTROL;
-  public deferEmbeddableLoad = true;
-  public parent: ControlGroupContainer;
-
-  private subscriptions: Subscription = new Subscription();
-  private node?: HTMLElement;
-
-  // Controls services
-  private dataService: ControlsDataService;
-  private dataViewsService: ControlsDataViewsService;
-
-  // Internal data fetching state for this input control.
-  private dataView?: DataView;
-  private field?: DataViewField;
-
-  // state management
-  public select: RangeSliderReduxEmbeddableTools['select'];
-  public getState: RangeSliderReduxEmbeddableTools['getState'];
-  public dispatch: RangeSliderReduxEmbeddableTools['dispatch'];
-  public onStateChange: RangeSliderReduxEmbeddableTools['onStateChange'];
-
-  private cleanupStateTools: () => void;
-
-  constructor(
-    reduxToolsPackage: ReduxToolsPackage,
-    input: RangeSliderEmbeddableInput,
-    output: ControlOutput,
-    parent?: IContainer
-  ) {
-    super(input, output, parent); // get filters for initial output...
-    this.parent = parent as ControlGroupContainer;
-
-    // Destructure controls services
-    ({ data: this.dataService, dataViews: this.dataViewsService } = pluginServices.getServices());
-
-    const reduxEmbeddableTools = reduxToolsPackage.createReduxEmbeddableTools<
-      RangeSliderReduxState,
-      typeof rangeSliderReducers
-    >({
-      embeddable: this,
-      reducers: rangeSliderReducers,
-      initialComponentState: getDefaultComponentState(),
-    });
-    this.select = reduxEmbeddableTools.select;
-    this.getState = reduxEmbeddableTools.getState;
-    this.dispatch = reduxEmbeddableTools.dispatch;
-    this.onStateChange = reduxEmbeddableTools.onStateChange;
-    this.cleanupStateTools = reduxEmbeddableTools.cleanup;
-
-    this.initialize();
-  }
-
-  private initialize = async () => {
-    const [initialMin, initialMax] = this.getInput().value ?? [];
-    if (!isEmpty(initialMin) || !isEmpty(initialMax)) {
-      const { filters: rangeFilter } = await this.buildFilter();
-      this.dispatch.publishFilters(rangeFilter);
-    }
-    this.setInitializationFinished();
-
-    this.runRangeSliderQuery()
-      .then(async () => {
-        this.setupSubscriptions();
-      })
-      .catch((e) => this.onLoadingError(e.message));
-  };
-
-  private setupSubscriptions = () => {
-    const dataFetchPipe = this.getInput$().pipe(
-      map((newInput) => ({
-        validate: !Boolean(newInput.ignoreParentSettings?.ignoreValidations),
-        lastReloadRequestTime: newInput.lastReloadRequestTime,
-        dataViewId: newInput.dataViewId,
-        fieldName: newInput.fieldName,
-        timeRange: newInput.timeRange,
-        timeslice: newInput.timeslice,
-        filters: newInput.filters,
-        query: newInput.query,
-      })),
-      distinctUntilChanged(diffDataFetchProps)
-    );
-
-    const valueChangePipe = this.getInput$().pipe(
-      distinctUntilChanged((a, b) => isEqual(a.value ?? ['', ''], b.value ?? ['', '']))
-    );
-
-    this.subscriptions.add(
-      dataFetchPipe
-        .pipe(
-          switchMap(async () => {
-            try {
-              this.dispatch.setLoading(true);
-              await this.runRangeSliderQuery();
-              await this.runValidations();
-              this.dispatch.setLoading(false);
-            } catch (e) {
-              this.onLoadingError(e.message);
-            }
-          })
-        )
-        .subscribe()
-    );
-
-    // publish filters when value changes
-    this.subscriptions.add(
-      valueChangePipe
-        .pipe(
-          switchMap(async () => {
-            try {
-              this.dispatch.setLoading(true);
-              const { filters: rangeFilter } = await this.buildFilter();
-              this.dispatch.publishFilters(rangeFilter);
-              await this.runValidations();
-              this.dispatch.setLoading(false);
-            } catch (e) {
-              this.onLoadingError(e.message);
-            }
-          })
-        )
-        .subscribe()
-    );
-  };
-
-  private getCurrentDataViewAndField = async (): Promise<{
-    dataView?: DataView;
-    field?: DataViewField;
-  }> => {
-    const {
-      explicitInput: { dataViewId, fieldName },
-    } = this.getState();
-
-    if (!this.dataView || this.dataView.id !== dataViewId) {
-      try {
-        this.dataView = await this.dataViewsService.get(dataViewId);
-        this.dispatch.setDataViewId(this.dataView.id);
-      } catch (e) {
-        this.onLoadingError(e.message);
-      }
-    }
-
-    if (this.dataView && (!this.field || this.field.name !== fieldName)) {
-      this.field = this.dataView.getFieldByName(fieldName);
-      if (this.field) {
-        this.dispatch.setField(this.field?.toSpec());
-      } else {
-        this.onLoadingError(
-          i18n.translate('controls.rangeSlider.errors.fieldNotFound', {
-            defaultMessage: 'Could not locate field: {fieldName}',
-            values: { fieldName },
-          })
-        );
-      }
-    }
-
-    return { dataView: this.dataView, field: this.field };
-  };
-
-  private runRangeSliderQuery = async () => {
-    const { dataView, field } = await this.getCurrentDataViewAndField();
-    if (!dataView || !field) return;
-
-    const { min, max } = await this.fetchMinMax({
-      dataView,
-      field,
-    });
-
-    batch(() => {
-      this.dispatch.setMinMax({ min, max });
-      this.dispatch.setDataViewId(dataView.id);
-      this.dispatch.setErrorMessage(undefined);
-    });
-  };
-
-  private fetchMinMax = async ({
-    dataView,
-    field,
-  }: {
-    dataView: DataView;
-    field: DataViewField;
-  }): Promise<{ min?: number; max?: number }> => {
-    const { query } = this.getInput();
-    const searchSource = await this.dataService.searchSource.create();
-    searchSource.setField('size', 0);
-    searchSource.setField('index', dataView);
-    searchSource.setField('filter', this.getGlobalFilters(dataView));
-
-    if (query) {
-      searchSource.setField('query', query);
-    }
-
-    const aggBody: any = {};
-
-    if (field) {
-      if (field.scripted) {
-        aggBody.script = {
-          source: field.script,
-          lang: field.lang,
-        };
-      } else {
-        aggBody.field = field.name;
-      }
-    }
-
-    const aggs = {
-      maxAgg: {
-        max: aggBody,
-      },
-      minAgg: {
-        min: aggBody,
-      },
-    };
-    searchSource.setField('aggs', aggs);
-
-    const resp = await lastValueFrom(searchSource.fetch$());
-    const min = get(resp, 'rawResponse.aggregations.minAgg.value');
-    const max = get(resp, 'rawResponse.aggregations.maxAgg.value');
-
-    return { min, max };
-  };
-
-  public selectionsToFilters = async (
-    input: Partial<RangeSliderEmbeddableInput>
-  ): Promise<ControlFilterOutput> => {
-    const { value } = input;
-    const [selectedMin, selectedMax] = value ?? ['', ''];
-    const [min, max] = [selectedMin, selectedMax].map(parseFloat);
-
-    const { dataView, field } = await this.getCurrentDataViewAndField();
-    if (!dataView || !field || (isEmpty(selectedMin) && isEmpty(selectedMax))) {
-      return { filters: [] };
-    }
-
-    const params = {} as RangeFilterParams;
-    if (selectedMin) {
-      params.gte = min;
-    }
-    if (selectedMax) {
-      params.lte = max;
-    }
-
-    const rangeFilter = buildRangeFilter(field, params, dataView);
-    rangeFilter.meta.key = field?.name;
-    rangeFilter.meta.type = 'range';
-    rangeFilter.meta.params = params;
-
-    return { filters: [rangeFilter] };
-  };
-
-  private buildFilter = async () => {
-    const {
-      explicitInput: { value },
-    } = this.getState();
-    return await this.selectionsToFilters({ value });
-  };
-
-  private onLoadingError(errorMessage: string) {
-    batch(() => {
-      this.dispatch.setLoading(false);
-      this.dispatch.publishFilters([]);
-      this.dispatch.setErrorMessage(errorMessage);
-    });
-  }
-
-  private getGlobalFilters = (dataView: DataView) => {
-    const {
-      filters: globalFilters,
-      ignoreParentSettings,
-      timeRange: globalTimeRange,
-      timeslice,
-    } = this.getInput();
-
-    const filters: Filter[] = [];
-
-    if (!ignoreParentSettings?.ignoreFilters && globalFilters) {
-      filters.push(...globalFilters);
-    }
-
-    const timeRange =
-      timeslice !== undefined
-        ? {
-            from: new Date(timeslice[0]).toISOString(),
-            to: new Date(timeslice[1]).toISOString(),
-            mode: 'absolute' as 'absolute',
-          }
-        : globalTimeRange;
-
-    if (!ignoreParentSettings?.ignoreTimerange && timeRange) {
-      const timeFilter = this.dataService.timefilter.createFilter(dataView, timeRange);
-      if (timeFilter) filters.push(timeFilter);
-    }
-
-    return filters;
-  };
-
-  private runValidations = async () => {
-    const { dataView } = await this.getCurrentDataViewAndField();
-    if (!dataView) return;
-    // Check if new range filter results in no data
-    const { ignoreParentSettings, query } = this.getInput();
-    if (ignoreParentSettings?.ignoreValidations) {
-      this.dispatch.setIsInvalid(false);
-    } else {
-      const searchSource = await this.dataService.searchSource.create();
-
-      const { filters: rangeFilters = [] } = this.getOutput();
-      const filters = this.getGlobalFilters(dataView).concat(rangeFilters);
-
-      searchSource.setField('size', 0);
-      searchSource.setField('index', dataView);
-      searchSource.setField('filter', filters);
-      if (query) {
-        searchSource.setField('query', query);
-      }
-
-      const resp = await lastValueFrom(searchSource.fetch$());
-      const total = resp?.rawResponse?.hits?.total;
-
-      const docCount = typeof total === 'number' ? total : total?.value;
-
-      const {
-        explicitInput: { value },
-      } = this.getState();
-      this.reportInvalidSelections(
-        !value || (value[0] === '' && value[1] === '') ? false : !docCount // don't set the range slider invalid if it has no selections
-      );
-    }
-  };
-
-  private reportInvalidSelections = (hasInvalidSelections: boolean) => {
-    this.dispatch.setIsInvalid(hasInvalidSelections);
-    this.parent?.reportInvalidSelections({
-      id: this.id,
-      hasInvalidSelections,
-    });
-  };
-
-  public clearSelections() {
-    this.dispatch.setSelectedRange(['', '']);
-  }
-
-  public reload = async () => {
-    this.dispatch.setLoading(true);
-    try {
-      await this.runRangeSliderQuery();
-      this.dispatch.setLoading(false);
-    } catch (e) {
-      this.onLoadingError(e.message);
-    }
-  };
-
-  public destroy = () => {
-    super.destroy();
-    this.cleanupStateTools();
-    this.subscriptions.unsubscribe();
-  };
-
-  public render = (node: HTMLElement) => {
-    if (this.node) {
-      ReactDOM.unmountComponentAtNode(this.node);
-    }
-    this.node = node;
-    const ControlsServicesProvider = pluginServices.getContextProvider();
-    ReactDOM.render(
-      <KibanaRenderContextProvider {...pluginServices.getServices().core}>
-        <ControlsServicesProvider>
-          <RangeSliderControlContext.Provider value={this}>
-            <RangeSliderControl />
-          </RangeSliderControlContext.Provider>
-        </ControlsServicesProvider>
-      </KibanaRenderContextProvider>,
-      node
-    );
-  };
-
-  public isChained() {
-    return true;
-  }
-}
diff --git a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable_factory.tsx b/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable_factory.tsx
deleted file mode 100644
index 29d68bf939ece..0000000000000
--- a/src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable_factory.tsx
+++ /dev/null
@@ -1,82 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import deepEqual from 'fast-deep-equal';
-
-import { DataViewField } from '@kbn/data-views-plugin/common';
-import { lazyLoadReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
-
-import {
-  createRangeSliderExtract,
-  createRangeSliderInject,
-} from '../../../common/range_slider/range_slider_persistable_state';
-import {
-  RangeSliderEmbeddableInput,
-  RANGE_SLIDER_CONTROL,
-} from '../../../common/range_slider/types';
-import { ControlEmbeddable, IEditableControlFactory } from '../../types';
-import { RangeSliderEditorOptions } from '../components/range_slider_editor_options';
-
-export class RangeSliderEmbeddableFactory
-  implements EmbeddableFactoryDefinition, IEditableControlFactory<RangeSliderEmbeddableInput>
-{
-  public type = RANGE_SLIDER_CONTROL;
-
-  public getDisplayName = () =>
-    i18n.translate('controls.rangeSlider.displayName', {
-      defaultMessage: 'Range slider',
-    });
-
-  public getDescription = () =>
-    i18n.translate('controls.rangeSlider.description', {
-      defaultMessage: 'Add a control for selecting a range of field values.',
-    });
-
-  public getIconType = () => 'controlsHorizontal';
-
-  public canCreateNew = () => false;
-
-  public isEditable = () => Promise.resolve(true);
-
-  public controlEditorOptionsComponent = RangeSliderEditorOptions;
-
-  public async create(initialInput: RangeSliderEmbeddableInput, parent?: IContainer) {
-    const reduxEmbeddablePackage = await lazyLoadReduxToolsPackage();
-    const { RangeSliderEmbeddable } = await import('./range_slider_embeddable');
-
-    return Promise.resolve(
-      new RangeSliderEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
-    );
-  }
-
-  public presaveTransformFunction = (
-    newInput: Partial<RangeSliderEmbeddableInput>,
-    embeddable?: ControlEmbeddable<RangeSliderEmbeddableInput>
-  ) => {
-    if (
-      embeddable &&
-      ((newInput.fieldName && !deepEqual(newInput.fieldName, embeddable.getInput().fieldName)) ||
-        (newInput.dataViewId && !deepEqual(newInput.dataViewId, embeddable.getInput().dataViewId)))
-    ) {
-      // if the field name or data view id has changed in this editing session, selected values are invalid, so reset them.
-      newInput.value = ['', ''];
-    }
-
-    return newInput;
-  };
-
-  public isFieldCompatible = (field: DataViewField) => {
-    return field.aggregatable && field.type === 'number';
-  };
-
-  public inject = createRangeSliderInject();
-  public extract = createRangeSliderExtract();
-}
diff --git a/src/plugins/controls/public/range_slider/index.ts b/src/plugins/controls/public/range_slider/index.ts
deleted file mode 100644
index 3e055ba70fdf5..0000000000000
--- a/src/plugins/controls/public/range_slider/index.ts
+++ /dev/null
@@ -1,14 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export type { RangeSliderEmbeddableInput } from '../../common/range_slider/types';
-export { RANGE_SLIDER_CONTROL } from '../../common/range_slider/types';
-
-export type { RangeSliderEmbeddable } from './embeddable/range_slider_embeddable';
-export { RangeSliderEmbeddableFactory } from './embeddable/range_slider_embeddable_factory';
diff --git a/src/plugins/controls/public/range_slider/range_slider_reducers.ts b/src/plugins/controls/public/range_slider/range_slider_reducers.ts
deleted file mode 100644
index ca3b3fc7d8bf3..0000000000000
--- a/src/plugins/controls/public/range_slider/range_slider_reducers.ts
+++ /dev/null
@@ -1,75 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { WritableDraft } from 'immer/dist/types/types-external';
-import { PayloadAction } from '@reduxjs/toolkit';
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-import { Filter } from '@kbn/es-query';
-
-import { RangeSliderReduxState } from './types';
-import { RangeValue } from '../../common/range_slider/types';
-
-export const getDefaultComponentState = (): RangeSliderReduxState['componentState'] => ({
-  isInvalid: false,
-});
-
-export const rangeSliderReducers = {
-  setSelectedRange: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<RangeValue>
-  ) => {
-    const [minSelection, maxSelection]: RangeValue = action.payload;
-    if (
-      minSelection === String(state.componentState.min) &&
-      maxSelection === String(state.componentState.max)
-    ) {
-      state.explicitInput.value = undefined;
-    } else {
-      state.explicitInput.value = action.payload;
-    }
-  },
-  setField: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<FieldSpec | undefined>
-  ) => {
-    state.componentState.field = action.payload;
-  },
-  setDataViewId: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<string | undefined>
-  ) => {
-    state.output.dataViewId = action.payload;
-  },
-  setErrorMessage: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<string | undefined>
-  ) => {
-    state.componentState.error = action.payload;
-  },
-  setLoading: (state: WritableDraft<RangeSliderReduxState>, action: PayloadAction<boolean>) => {
-    state.output.loading = action.payload;
-  },
-  setMinMax: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<{ min?: number; max?: number }>
-  ) => {
-    if (action.payload.min !== undefined) state.componentState.min = Math.floor(action.payload.min);
-    if (action.payload.max !== undefined) state.componentState.max = Math.ceil(action.payload.max);
-  },
-  publishFilters: (
-    state: WritableDraft<RangeSliderReduxState>,
-    action: PayloadAction<Filter[] | undefined>
-  ) => {
-    state.output.filters = action.payload;
-  },
-  setIsInvalid: (state: WritableDraft<RangeSliderReduxState>, action: PayloadAction<boolean>) => {
-    state.componentState.isInvalid = action.payload;
-  },
-};
diff --git a/src/plugins/controls/public/range_slider/types.ts b/src/plugins/controls/public/range_slider/types.ts
deleted file mode 100644
index 1f9f5a4774d63..0000000000000
--- a/src/plugins/controls/public/range_slider/types.ts
+++ /dev/null
@@ -1,30 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { FieldSpec } from '@kbn/data-views-plugin/common';
-import type { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-
-import { RangeSliderEmbeddableInput } from '../../common/range_slider/types';
-import { ControlOutput } from '../types';
-
-// Component state is only used by public components.
-export interface RangeSliderComponentState {
-  field?: FieldSpec;
-  min?: number;
-  max?: number;
-  error?: string;
-  isInvalid?: boolean;
-}
-
-// public only - redux embeddable state type
-export type RangeSliderReduxState = ReduxEmbeddableState<
-  RangeSliderEmbeddableInput,
-  ControlOutput,
-  RangeSliderComponentState
->;
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.scss b/src/plugins/controls/public/react_controls/control_group/components/control_group.scss
new file mode 100644
index 0000000000000..d0511f40a6c48
--- /dev/null
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_group.scss
@@ -0,0 +1,8 @@
+.controlsWrapper {
+  display: flex;
+  align-items: center;
+
+  .controlGroup--endButtonGroup {
+    align-self: end;
+  }
+}
\ No newline at end of file
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
index f6259ddc95149..9c962113d1a7f 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_group.tsx
@@ -8,8 +8,8 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { css } from '@emotion/react';
 import { BehaviorSubject } from 'rxjs';
+
 import {
   DndContext,
   DragEndEvent,
@@ -21,20 +21,24 @@ import {
   useSensors,
 } from '@dnd-kit/core';
 import {
+  SortableContext,
   arrayMove,
   rectSortingStrategy,
-  SortableContext,
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
 import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiToolTip } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
-import { ControlStyle } from '../../..';
+
+import type { ControlStyle } from '../../../../common';
+import type { DefaultControlApi } from '../../controls/types';
+import { ControlGroupStrings } from '../control_group_strings';
 import { ControlsInOrder } from '../init_controls_manager';
-import { ControlGroupApi } from '../types';
-import { ControlRenderer } from './control_renderer';
+import type { ControlGroupApi } from '../types';
 import { ControlClone } from './control_clone';
-import { DefaultControlApi } from '../../controls/types';
-import { ControlGroupStrings } from '../control_group_strings';
+import { ControlRenderer } from './control_renderer';
+
+import './control_group.scss';
 
 interface Props {
   applySelections: () => void;
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.test.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.test.tsx
index 3cb5a02f97bee..79d0312b29537 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.test.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.test.tsx
@@ -9,15 +9,18 @@
 
 import React from 'react';
 import { BehaviorSubject } from 'rxjs';
+
 import { render } from '@testing-library/react';
-import { ControlGroupEditor } from './control_group_editor';
-import { ControlGroupApi, ControlStyle } from '../../..';
+
+import { ControlGroupApi } from '../../..';
 import {
   ControlGroupChainingSystem,
+  ControlStyle,
   DEFAULT_CONTROL_STYLE,
   ParentIgnoreSettings,
 } from '../../../../common';
 import { DefaultControlApi } from '../../controls/types';
+import { ControlGroupEditor } from './control_group_editor';
 
 describe('render', () => {
   const children$ = new BehaviorSubject<{ [key: string]: DefaultControlApi }>({});
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.tsx
index 289399d440899..f908a557366fa 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_group_editor.tsx
@@ -21,32 +21,18 @@ import {
   EuiForm,
   EuiFormRow,
   EuiHorizontalRule,
-  EuiIconTip,
   EuiSpacer,
   EuiSwitch,
   EuiTitle,
 } from '@elastic/eui';
-import { css } from '@emotion/react';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
-import { ControlStyle } from '../../..';
 
-import { ControlStateManager } from '../../controls/types';
+import type { ControlStyle, ParentIgnoreSettings } from '../../../../common';
+import { CONTROL_LAYOUT_OPTIONS } from '../../controls/data_controls/editor_constants';
+import type { ControlStateManager } from '../../controls/types';
 import { ControlGroupStrings } from '../control_group_strings';
-import { ControlGroupApi, ControlGroupEditorState } from '../types';
-import { ParentIgnoreSettings } from '../../../../common';
-
-const CONTROL_LAYOUT_OPTIONS = [
-  {
-    id: `oneLine`,
-    'data-test-subj': 'control-editor-layout-oneLine',
-    label: ControlGroupStrings.management.labelPosition.getInlineTitle(),
-  },
-  {
-    id: `twoLine`,
-    'data-test-subj': 'control-editor-layout-twoLine',
-    label: ControlGroupStrings.management.labelPosition.getAboveTitle(),
-  },
-];
+import type { ControlGroupApi, ControlGroupEditorState } from '../types';
+import { ControlSettingTooltipLabel } from './control_setting_tooltip_label';
 
 interface Props {
   onCancel: () => void;
@@ -233,17 +219,3 @@ export const ControlGroupEditor = ({ onCancel, onSave, onDeleteAll, stateManager
     </>
   );
 };
-
-const ControlSettingTooltipLabel = ({ label, tooltip }: { label: string; tooltip: string }) => (
-  <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
-    <EuiFlexItem grow={false}>{label}</EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-      css={css`
-        margin-top: 0px !important;
-      `}
-    >
-      <EuiIconTip content={tooltip} position="right" />
-    </EuiFlexItem>
-  </EuiFlexGroup>
-);
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
index 6c25854aa97cc..6afb10f25e23c 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.scss
@@ -1,3 +1,8 @@
+$smallControl: $euiSize * 14;
+$mediumControl: $euiSize * 25;
+$largeControl: $euiSize * 50;
+$controlMinWidth: $euiSize * 14;
+
 .controlPanel {
   width: 100%;
   max-inline-size: 100% !important;
@@ -11,8 +16,7 @@
   }
 
   &--labelWrapper {
-    height: $euiFormControlCompressedHeight;
-
+    height: 100%;
     .controlPanel--label {
       @include euiTextTruncate;
       padding: 0;
@@ -36,36 +40,207 @@
   }
 }
 
-.controlFrame__dragHandle {
-  line-height: 0; // Vertically center the grab handle
-}
+.controlFrameWrapper {
+  // --------------------------
+  // Control panel sizes
+  // --------------------------
 
-.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--edit):not(.controlFrame__formControlLayout--twoLine) {
-  .euiFormControlLayout__prepend {
-    padding-inline-start: $euiSizeS;
+  &--small {
+    width: $smallControl;
+    min-width: $smallControl;
   }
-}
 
-.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--edit).timeSlider {
-  .euiFormControlLayout__prepend {
-    padding-inline-start: 0;
+  &--medium {
+    width: $mediumControl;
+    min-width: $mediumControl;
+  }
+
+  &--large {
+    width: $largeControl;
+    min-width: $largeControl;
+  }
+
+  @include euiBreakpoint('xs', 's', 'm') {
+    &--small {
+      min-width:unset;
+    }
+
+    &--medium {
+      min-width:unset;
+    }
+
+    &--large {
+      min-width:unset;
+    }
+  }
+
+  // --------------------------
+  // Dragging styles
+  // --------------------------
+
+  &:not(.controlFrame__formControlLayout-clone) {
+    .controlFrame__dragHandle {
+      cursor: grab;
+    }
+  }
+
+  &--insertBefore,
+  &--insertAfter {
+    .controlFrame__formControlLayout:after {
+      content: '';
+      position: absolute;
+      background-color: transparentize($euiColorPrimary, .5);
+      border-radius: $euiBorderRadius;
+      top: 0;
+      bottom: 0;
+      width: $euiSizeXS * .5;
+    }
+  }
+
+  &--insertBefore {
+    .controlFrame__formControlLayout:after {
+      left: -$euiSizeXS - 1;
+    }
+  }
+
+  &--insertAfter {
+    .controlFrame__formControlLayout:after {
+      right: -$euiSizeXS - 1;
+    }
+  }
+
+  &-isDragging {
+    opacity: 0; // hide dragged control, while control is dragged its replaced with ControlClone component
   }
 }
 
-.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine.controlFrame__formControlLayout--edit {
+// --------------------------
+// Control frame prepend
+// --------------------------
+
+.controlFrame__formControlLayout {
+  $parent: &;
+
   .euiFormControlLayout__prepend {
-    padding-inline-end: 0;
+    padding-left: 0;
+    gap: 0;
+
+    .controlFrame__dragHandle {
+      line-height: 0; // Vertically center the grab handle
+    }
+  }
+
+  &--edit {
+    &:not(#{$parent}--twoLine) {
+      .euiFormControlLayout__prepend {
+        padding-inline-start: $euiSizeXS * .5; // skinny icon
+      }
+    }
+
+    &#{$parent}--twoLine {
+      .euiFormControlLayout__prepend {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
+      }
+    }
+  }
+
+  &:not(&--edit) {
+    &:not(#{$parent}--twoLine) {
+      .euiFormControlLayout__prepend {
+        padding-inline-start: $euiSizeS;
+      }
+    }
+
+    &#{$parent}--twoLine {
+      .euiFormControlLayout__prepend {
+        padding-inline: 0;
+      }
+    }
+
+    &.timeSlider {
+      .euiFormControlLayout__prepend {
+        padding-inline-start: 0;
+      }
+    }
   }
 }
 
-.controlFrame__formControlLayout.controlFrame__formControlLayout--twoLine:not(.controlFrame__formControlLayout--edit) {
-  .euiFormControlLayout__prepend {
-    padding-inline: 0;
+// --------------------------
+// Floating actions
+// --------------------------
+.controlFrameFloatingActions {
+  z-index: 1;
+  position: absolute;
+
+  &--oneLine {
+    padding: $euiSizeXS;
+    border-radius: $euiBorderRadius;
+    background-color: $euiColorEmptyShade;
+    box-shadow: 0 0 0 1px $euiColorLightShade;
+  }
+
+  &--twoLine {
+    top: (-$euiSizeXS) !important;
   }
 }
 
-.controlFrame__formControlLayout:not(.controlFrame__formControlLayout--twoLine).controlFrame__formControlLayout--edit {
-  .euiFormControlLayout__prepend {
-    padding-inline-start: $euiSizeXS * .5; // skinny icon
+// --------------------------
+// Control frame drag preview
+// --------------------------
+.controlFrameCloneWrapper {
+  width: max-content;
+
+  &--small {
+    width: $smallControl;
+    min-width:$smallControl;
+  }
+
+  &--medium {
+    width: $mediumControl;
+    min-width:$mediumControl;
+  }
+
+  &--large {
+    width: $largeControl;
+    min-width:$largeControl;
+  }
+
+  &--twoLine {
+    margin-top: -$euiSize * 1.25;
+  }
+
+  .controlFrame__draggable {
+    cursor: grabbing;
+    height: $euiButtonHeightSmall;
+    align-items: center;
+    border-radius: $euiBorderRadius;
+    font-weight: $euiFontWeightSemiBold;
+    @include euiFormControlDefaultShadow;
+    background-color: $euiFormInputGroupLabelBackground;
+    min-width: $controlMinWidth;
+    @include euiFontSizeXS;
+  }
+
+  .controlFrame__formControlLayout,
+  .controlFrame__draggable {
+    .controlFrame__dragHandle {
+      cursor: grabbing;
+    }
+  }
+
+  @include euiBreakpoint('xs', 's', 'm') {
+    width: 100%;
+    &--small {
+      min-width: unset;
+    }
+
+    &--medium {
+      min-width: unset;
+    }
+
+    &--large {
+      min-width: unset;
+    }
   }
 }
\ No newline at end of file
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.test.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.test.tsx
index 22f213b21d621..bbf8e8127813e 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.test.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.test.tsx
@@ -9,11 +9,13 @@
 
 import React, { useImperativeHandle } from 'react';
 import { BehaviorSubject } from 'rxjs';
+
+import { pluginServices as presentationUtilPluginServices } from '@kbn/presentation-util-plugin/public/services';
+import { registry as presentationUtilServicesRegistry } from '@kbn/presentation-util-plugin/public/services/plugin_services.story';
 import { render, waitFor } from '@testing-library/react';
+
+import type { ControlStyle, ControlWidth } from '../../../../common';
 import { ControlPanel } from './control_panel';
-import { registry as presentationUtilServicesRegistry } from '@kbn/presentation-util-plugin/public/services/plugin_services.story';
-import { pluginServices as presentationUtilPluginServices } from '@kbn/presentation-util-plugin/public/services';
-import { ControlStyle, ControlWidth } from '../../..';
 
 describe('render', () => {
   let mockApi = {};
@@ -50,7 +52,7 @@ describe('render', () => {
       await waitFor(() => {
         const controlFrame = controlPanel.getByTestId('control-frame');
         expect(controlFrame.getAttribute('class')).toContain('controlFrameWrapper--medium');
-        expect(controlFrame.getAttribute('class')).toContain('controlFrameWrapper--grow');
+        expect(controlFrame.getAttribute('class')).toContain('euiFlexItem-grow');
       });
     });
 
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
index cbb7bf09fdab7..7936ebc896c12 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_panel.tsx
@@ -38,12 +38,10 @@ import './control_panel.scss';
 const DragHandle = ({
   isEditable,
   controlTitle,
-  hideEmptyDragHandle,
   ...rest // drag info is contained here
 }: {
   isEditable: boolean;
   controlTitle?: string;
-  hideEmptyDragHandle: boolean;
 }) =>
   isEditable ? (
     <button
@@ -113,7 +111,7 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
     viewModeSubject
   );
   const usingTwoLineLayout = labelPosition === 'twoLine';
-  const controlType = api ? api.type : null;
+  const controlType = api ? api.type : undefined;
 
   const [initialLoadComplete, setInitialLoadComplete] = useState(!dataLoading);
   if (!initialLoadComplete && (dataLoading === false || (api && !api.dataLoading))) {
@@ -134,7 +132,6 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
       data-test-subj="control-frame"
       data-render-complete="true"
       className={classNames('controlFrameWrapper', {
-        'controlFrameWrapper--grow': controlGrow,
         'controlFrameWrapper--small': controlWidth === 'small',
         'controlFrameWrapper--medium': controlWidth === 'medium',
         'controlFrameWrapper--large': controlWidth === 'large',
@@ -176,7 +173,6 @@ export const ControlPanel = <ApiType extends DefaultControlApi = DefaultControlA
                 <DragHandle
                   isEditable={isEditable}
                   controlTitle={panelTitle || defaultPanelTitle}
-                  hideEmptyDragHandle={usingTwoLineLayout || Boolean(api?.CustomPrependComponent)}
                   {...attributes}
                   {...listeners}
                 />
diff --git a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx
index 4a69f7979149b..e2a09012c7df2 100644
--- a/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/components/control_renderer.tsx
@@ -13,14 +13,11 @@ import { BehaviorSubject } from 'rxjs';
 import { initializeUnsavedChanges } from '@kbn/presentation-containers';
 import { StateComparators } from '@kbn/presentation-publishing';
 
+import type { DefaultControlState } from '../../../../common';
 import { getControlFactory } from '../../control_factory_registry';
-import { ControlGroupApi } from '../types';
+import type { ControlApiRegistration, DefaultControlApi } from '../../controls/types';
+import type { ControlGroupApi } from '../types';
 import { ControlPanel } from './control_panel';
-import {
-  ControlApiRegistration,
-  DefaultControlApi,
-  DefaultControlState,
-} from '../../controls/types';
 
 /**
  * Renders a component from the control registry into a Control Panel
diff --git a/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.test.ts b/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.test.ts
index a67a054ccc54c..cb8dfe1d922ce 100644
--- a/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.test.ts
+++ b/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.test.ts
@@ -7,9 +7,11 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ControlGroupChainingSystem } from '../../../../common';
-import { Filter } from '@kbn/es-query';
 import { BehaviorSubject, skip } from 'rxjs';
+
+import { Filter } from '@kbn/es-query';
+
+import { ControlGroupChainingSystem } from '../../../../common';
 import { chaining$ } from './chaining';
 
 const FILTER_ALPHA = {
diff --git a/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.ts b/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.ts
index 525e0e2cc6790..d25a0b5d24cf6 100644
--- a/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.ts
+++ b/src/plugins/controls/public/react_controls/control_group/control_fetch/chaining.ts
@@ -7,22 +7,24 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { Filter, TimeRange } from '@kbn/es-query';
-import {
-  apiPublishesFilters,
-  apiPublishesTimeslice,
-  PublishingSubject,
-} from '@kbn/presentation-publishing';
 import {
   BehaviorSubject,
+  Observable,
   combineLatest,
   debounceTime,
   map,
-  Observable,
   skipWhile,
   switchMap,
 } from 'rxjs';
-import { ControlGroupChainingSystem } from '../../../../common';
+
+import type { Filter, TimeRange } from '@kbn/es-query';
+import {
+  type PublishingSubject,
+  apiPublishesFilters,
+  apiPublishesTimeslice,
+} from '@kbn/presentation-publishing';
+
+import type { ControlGroupChainingSystem } from '../../../../common';
 
 export interface ChainingContext {
   chainingFilters?: Filter[] | undefined;
diff --git a/src/plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts b/src/plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts
index 7559a36cb9e63..d26812cdd0b8f 100644
--- a/src/plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts
+++ b/src/plugins/controls/public/react_controls/control_group/control_group_unsaved_changes_api.ts
@@ -8,20 +8,22 @@
  */
 
 import { omit } from 'lodash';
+import { combineLatest, map } from 'rxjs';
+
 import {
   childrenUnsavedChanges$,
   initializeUnsavedChanges,
-  PresentationContainer,
+  type PresentationContainer,
 } from '@kbn/presentation-containers';
 import {
   apiPublishesUnsavedChanges,
-  PublishesUnsavedChanges,
-  StateComparators,
+  type PublishesUnsavedChanges,
+  type StateComparators,
 } from '@kbn/presentation-publishing';
-import { combineLatest, map } from 'rxjs';
-import { ControlsInOrder, getControlsInOrder } from './init_controls_manager';
-import { ControlGroupRuntimeState, ControlPanelsState } from './types';
+
+import type { ControlGroupRuntimeState, ControlPanelsState } from '../../../common';
 import { apiPublishesAsyncFilters } from '../controls/data_controls/publishes_async_filters';
+import { getControlsInOrder, type ControlsInOrder } from './init_controls_manager';
 
 export type ControlGroupComparatorState = Pick<
   ControlGroupRuntimeState,
diff --git a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
index bc3fde2ebe829..6c3e8d10c3c66 100644
--- a/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
+++ b/src/plugins/controls/public/react_controls/control_group/get_control_group_factory.tsx
@@ -27,13 +27,15 @@ import {
 } from '@kbn/presentation-publishing';
 import { apiPublishesReload } from '@kbn/presentation-publishing/interfaces/fetch/publishes_reload';
 
-import { ControlStyle } from '../..';
-import {
-  CONTROL_GROUP_TYPE,
+import type {
   ControlGroupChainingSystem,
-  DEFAULT_CONTROL_STYLE,
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelsState,
+  ControlStyle,
   ParentIgnoreSettings,
 } from '../../../common';
+import { CONTROL_GROUP_TYPE, DEFAULT_CONTROL_STYLE } from '../../../common';
 import { openDataControlEditor } from '../controls/data_controls/open_data_control_editor';
 import { ControlGroup } from './components/control_group';
 import { chaining$, controlFetch$, controlGroupFetch$ } from './control_fetch';
@@ -41,12 +43,7 @@ import { initializeControlGroupUnsavedChanges } from './control_group_unsaved_ch
 import { initControlsManager } from './init_controls_manager';
 import { openEditControlGroupFlyout } from './open_edit_control_group_flyout';
 import { initSelectionsManager } from './selections_manager';
-import {
-  ControlGroupApi,
-  ControlGroupRuntimeState,
-  ControlGroupSerializedState,
-  ControlPanelsState,
-} from './types';
+import type { ControlGroupApi } from './types';
 import { deserializeControlGroup } from './utils/serialization_utils';
 
 const DEFAULT_CHAINING_SYSTEM = 'HIERARCHICAL';
diff --git a/src/plugins/controls/public/react_controls/control_group/init_controls_manager.test.ts b/src/plugins/controls/public/react_controls/control_group/init_controls_manager.test.ts
index 92ff5c7054127..2137c502c2e64 100644
--- a/src/plugins/controls/public/react_controls/control_group/init_controls_manager.test.ts
+++ b/src/plugins/controls/public/react_controls/control_group/init_controls_manager.test.ts
@@ -8,10 +8,13 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import { DefaultDataControlState } from '../controls/data_controls/types';
-import { DefaultControlApi } from '../controls/types';
+import type { DefaultControlApi } from '../controls/types';
 import { initControlsManager, getLastUsedDataViewId } from './init_controls_manager';
-import { ControlPanelState, ControlPanelsState } from './types';
+import type {
+  ControlPanelState,
+  DefaultDataControlState,
+  ControlPanelsState,
+} from '../../../common';
 
 jest.mock('uuid', () => ({
   v4: jest.fn().mockReturnValue('delta'),
diff --git a/src/plugins/controls/public/react_controls/control_group/init_controls_manager.ts b/src/plugins/controls/public/react_controls/control_group/init_controls_manager.ts
index eecf1b2e605e8..5b499f1924f1a 100644
--- a/src/plugins/controls/public/react_controls/control_group/init_controls_manager.ts
+++ b/src/plugins/controls/public/react_controls/control_group/init_controls_manager.ts
@@ -7,23 +7,30 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { v4 as generateId } from 'uuid';
 import fastIsEqual from 'fast-deep-equal';
-import {
+import { omit } from 'lodash';
+import { v4 as generateId } from 'uuid';
+
+import type { Reference } from '@kbn/content-management-utils';
+import type {
   HasSerializedChildState,
   PanelPackage,
   PresentationContainer,
 } from '@kbn/presentation-containers';
-import type { Reference } from '@kbn/content-management-utils';
-import { BehaviorSubject, first, merge } from 'rxjs';
-import { PublishingSubject, StateComparators } from '@kbn/presentation-publishing';
-import { omit } from 'lodash';
 import { apiHasSnapshottableState } from '@kbn/presentation-containers/interfaces/serialized_state';
-import { ControlGroupApi, ControlPanelsState, ControlPanelState } from './types';
-import { DefaultControlApi, DefaultControlState } from '../controls/types';
-import { ControlGroupComparatorState } from './control_group_unsaved_changes_api';
-import { DefaultDataControlState } from '../controls/data_controls/types';
-import { ControlWidth, DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '../../../common';
+import type { PublishingSubject, StateComparators } from '@kbn/presentation-publishing';
+import { BehaviorSubject, first, merge } from 'rxjs';
+import type {
+  ControlPanelState,
+  ControlPanelsState,
+  ControlWidth,
+  DefaultControlState,
+  DefaultDataControlState,
+} from '../../../common';
+import { DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '../../../common';
+import type { DefaultControlApi } from '../controls/types';
+import type { ControlGroupComparatorState } from './control_group_unsaved_changes_api';
+import type { ControlGroupApi } from './types';
 
 export type ControlsInOrder = Array<{ id: string; type: string }>;
 
diff --git a/src/plugins/controls/public/react_controls/control_group/types.ts b/src/plugins/controls/public/react_controls/control_group/types.ts
index 47f3794fd0295..cb09cac975e7a 100644
--- a/src/plugins/controls/public/react_controls/control_group/types.ts
+++ b/src/plugins/controls/public/react_controls/control_group/types.ts
@@ -7,6 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import type { Observable } from 'rxjs';
+
 import { DefaultEmbeddableApi } from '@kbn/embeddable-plugin/public';
 import { Filter } from '@kbn/es-query';
 import {
@@ -25,16 +27,20 @@ import {
   PublishesUnsavedChanges,
   PublishingSubject,
 } from '@kbn/presentation-publishing';
+import { PublishesReload } from '@kbn/presentation-publishing/interfaces/fetch/publishes_reload';
 import { PublishesDataViews } from '@kbn/presentation-publishing/interfaces/publishes_data_views';
-import { Observable } from 'rxjs';
 
-import { PublishesReload } from '@kbn/presentation-publishing/interfaces/fetch/publishes_reload';
-import { ControlGroupChainingSystem } from '../../../common/control_group/types';
-import { ControlStyle } from '../../types';
-import { DefaultControlState } from '../controls/types';
+import {
+  ControlGroupChainingSystem,
+  ControlGroupEditorConfig,
+  ControlGroupRuntimeState,
+  ControlGroupSerializedState,
+  ControlPanelState,
+  ControlStyle,
+  DefaultControlState,
+  ParentIgnoreSettings,
+} from '../../../common';
 import { ControlFetchContext } from './control_fetch/control_fetch';
-import { FieldFilterPredicate } from '../../control_group/types';
-import { ParentIgnoreSettings } from '../../../common';
 
 /**
  * ----------------------------------------------------------------
@@ -42,18 +48,6 @@ import { ParentIgnoreSettings } from '../../../common';
  * ----------------------------------------------------------------
  */
 
-export type ControlStateTransform<State extends DefaultControlState = DefaultControlState> = (
-  newState: Partial<State>,
-  controlType: string
-) => Partial<State>;
-
-export type ControlGroupUnsavedChanges = Omit<
-  ControlGroupRuntimeState,
-  'initialChildControlState'
-> & {
-  filters: Filter[] | undefined;
-};
-
 export type ControlGroupApi = PresentationContainer &
   DefaultEmbeddableApi<ControlGroupSerializedState, ControlGroupRuntimeState> &
   PublishesFilters &
@@ -88,60 +82,23 @@ export type ControlGroupApi = PresentationContainer &
 
 /**
  * ----------------------------------------------------------------
- * Control group state
+ * Helper types
  * ----------------------------------------------------------------
  */
 
-export interface ControlGroupEditorConfig {
-  hideDataViewSelector?: boolean;
-  hideWidthSettings?: boolean;
-  hideAdditionalSettings?: boolean;
-  fieldFilterPredicate?: FieldFilterPredicate;
-}
-
-export interface ControlGroupRuntimeState<State extends DefaultControlState = DefaultControlState> {
-  chainingSystem: ControlGroupChainingSystem;
-  labelPosition: ControlStyle; // TODO: Rename this type to ControlLabelPosition
-  autoApplySelections: boolean;
-  ignoreParentSettings?: ParentIgnoreSettings;
-
-  initialChildControlState: ControlPanelsState<State>;
-
-  /*
-   * Configuration settings that are never persisted
-   * - remove after https://github.com/elastic/kibana/issues/189939 is resolved
-   */
-  editorConfig?: ControlGroupEditorConfig;
-}
-
-export interface ControlGroupSerializedState
-  extends Pick<ControlGroupRuntimeState, 'chainingSystem' | 'editorConfig'> {
-  panelsJSON: string; // stringified version of ControlSerializedState
-  ignoreParentSettingsJSON: string;
-  // In runtime state, we refer to this property as `labelPosition`;
-  // to avoid migrations, we will continue to refer to this property as `controlStyle` in the serialized state
-  controlStyle: ControlStyle;
-  // In runtime state, we refer to the inverse of this property as `autoApplySelections`
-  // to avoid migrations, we will continue to refer to this property as `showApplySelections` in the serialized state
-  showApplySelections: boolean | undefined;
-}
+export type ControlGroupUnsavedChanges = Omit<
+  ControlGroupRuntimeState,
+  'initialChildControlState'
+> & {
+  filters: Filter[] | undefined;
+};
 
 export type ControlGroupEditorState = Pick<
   ControlGroupRuntimeState,
   'chainingSystem' | 'labelPosition' | 'autoApplySelections' | 'ignoreParentSettings'
 >;
 
-/**
- * ----------------------------------------------------------------
- * Control group panel state
- * ----------------------------------------------------------------
- */
-
-export interface ControlPanelsState<State extends DefaultControlState = DefaultControlState> {
-  [panelId: string]: ControlPanelState<State>;
-}
-
-export type ControlPanelState<State extends DefaultControlState = DefaultControlState> = State & {
-  type: string;
-  order: number;
-};
+export type ControlStateTransform<State extends DefaultControlState = DefaultControlState> = (
+  newState: Partial<State>,
+  controlType: string
+) => Partial<State>;
diff --git a/src/plugins/controls/public/react_controls/control_group/utils/control_group_state_builder.ts b/src/plugins/controls/public/react_controls/control_group/utils/control_group_state_builder.ts
index f0d0a309a4052..91e5379416c5e 100644
--- a/src/plugins/controls/public/react_controls/control_group/utils/control_group_state_builder.ts
+++ b/src/plugins/controls/public/react_controls/control_group/utils/control_group_state_builder.ts
@@ -13,13 +13,13 @@ import {
   OPTIONS_LIST_CONTROL,
   RANGE_SLIDER_CONTROL,
   TIME_SLIDER_CONTROL,
+  type DefaultDataControlState,
 } from '../../../../common';
-import { ControlGroupRuntimeState, ControlPanelsState } from '../types';
+import { type ControlGroupRuntimeState, type ControlPanelsState } from '../../../../common';
+import type { OptionsListControlState } from '../../../../common/options_list';
 import { pluginServices } from '../../../services';
-import { OptionsListControlState } from '../../controls/data_controls/options_list_control/types';
-import { RangesliderControlState } from '../../controls/data_controls/range_slider/types';
-import { DefaultDataControlState } from '../../controls/data_controls/types';
 import { getDataControlFieldRegistry } from '../../controls/data_controls/data_control_editor_utils';
+import type { RangesliderControlState } from '../../controls/data_controls/range_slider/types';
 
 export type ControlGroupStateBuilder = typeof controlGroupStateBuilder;
 
diff --git a/src/plugins/controls/public/react_controls/control_group/utils/initialization_utils.ts b/src/plugins/controls/public/react_controls/control_group/utils/initialization_utils.ts
index fe7da5bcce3ce..8bd19c3d6478c 100644
--- a/src/plugins/controls/public/react_controls/control_group/utils/initialization_utils.ts
+++ b/src/plugins/controls/public/react_controls/control_group/utils/initialization_utils.ts
@@ -7,8 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { DEFAULT_CONTROL_STYLE } from '../../../../common';
-import { ControlGroupRuntimeState } from '../types';
+import { type ControlGroupRuntimeState, DEFAULT_CONTROL_STYLE } from '../../../../common';
 
 export const getDefaultControlGroupRuntimeState = (): ControlGroupRuntimeState => ({
   initialChildControlState: {},
diff --git a/src/plugins/controls/public/react_controls/control_group/utils/serialization_utils.ts b/src/plugins/controls/public/react_controls/control_group/utils/serialization_utils.ts
index 66340c2e59123..4762d3aa9ce81 100644
--- a/src/plugins/controls/public/react_controls/control_group/utils/serialization_utils.ts
+++ b/src/plugins/controls/public/react_controls/control_group/utils/serialization_utils.ts
@@ -10,9 +10,8 @@
 import { omit } from 'lodash';
 
 import { SerializedPanelState } from '@kbn/presentation-containers';
-
+import type { ControlGroupRuntimeState, ControlGroupSerializedState } from '../../../../common';
 import { parseReferenceName } from '../../controls/data_controls/reference_name_utils';
-import { ControlGroupRuntimeState, ControlGroupSerializedState } from '../types';
 
 export const deserializeControlGroup = (
   state: SerializedPanelState<ControlGroupSerializedState>
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.test.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.test.tsx
index 6cf21c309df92..5f8f17c57bce5 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.test.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.test.tsx
@@ -17,22 +17,27 @@ import { TimeRange } from '@kbn/es-query';
 import { I18nProvider } from '@kbn/i18n-react';
 import { act, fireEvent, render, RenderResult, waitFor } from '@testing-library/react';
 
+import {
+  DEFAULT_CONTROL_GROW,
+  DEFAULT_CONTROL_WIDTH,
+  type DefaultDataControlState,
+} from '../../../../common';
 import { getAllControlTypes, getControlFactory } from '../../control_factory_registry';
-jest.mock('../../control_factory_registry', () => ({
-  ...jest.requireActual('../../control_factory_registry'),
-  getAllControlTypes: jest.fn(),
-  getControlFactory: jest.fn(),
-}));
-import { DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '../../../../common';
-import { ControlGroupApi } from '../../control_group/types';
+import type { ControlGroupApi } from '../../control_group/types';
+import type { ControlFactory } from '../types';
 import { DataControlEditor } from './data_control_editor';
 import {
   getMockedOptionsListControlFactory,
   getMockedRangeSliderControlFactory,
   getMockedSearchControlFactory,
 } from './mocks/factory_mocks';
-import { ControlFactory } from '../types';
-import { DataControlApi, DataControlFactory, DefaultDataControlState } from './types';
+import type { DataControlApi, DataControlFactory } from './types';
+
+jest.mock('../../control_factory_registry', () => ({
+  ...jest.requireActual('../../control_factory_registry'),
+  getAllControlTypes: jest.fn(),
+  getControlFactory: jest.fn(),
+}));
 
 const mockDataViews = dataViewPluginMocks.createStartContract();
 const mockDataView = createStubDataView({
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.tsx
index 90f9102645720..5254fe200e97c 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor.tsx
@@ -40,14 +40,22 @@ import {
   withSuspense,
 } from '@kbn/presentation-util-plugin/public';
 
-import { DataControlFieldRegistry } from '../../../types';
-import { ControlWidth, DEFAULT_CONTROL_GROW, DEFAULT_CONTROL_WIDTH } from '../../../../common';
+import {
+  DEFAULT_CONTROL_GROW,
+  DEFAULT_CONTROL_WIDTH,
+  type ControlWidth,
+  type DefaultDataControlState,
+} from '../../../../common';
 import { getAllControlTypes, getControlFactory } from '../../control_factory_registry';
-import { ControlGroupApi } from '../../control_group/types';
+import type { ControlGroupApi } from '../../control_group/types';
 import { DataControlEditorStrings } from './data_control_constants';
 import { getDataControlFieldRegistry } from './data_control_editor_utils';
-import { DataControlFactory, DefaultDataControlState, isDataControlFactory } from './types';
-import { CONTROL_WIDTH_OPTIONS } from '../../../control_group/editor/editor_constants';
+import { CONTROL_WIDTH_OPTIONS } from './editor_constants';
+import {
+  isDataControlFactory,
+  type DataControlFactory,
+  type DataControlFieldRegistry,
+} from './types';
 
 export interface ControlEditorProps<
   State extends DefaultDataControlState = DefaultDataControlState
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor_utils.ts b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor_utils.ts
index fc368aec097e0..d49ca31f9248b 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor_utils.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/data_control_editor_utils.ts
@@ -9,10 +9,9 @@
 
 import { memoize } from 'lodash';
 
-import { DataView } from '@kbn/data-views-plugin/common';
-import { DataControlFieldRegistry } from '../../../types';
+import type { DataView } from '@kbn/data-views-plugin/common';
 import { getAllControlTypes, getControlFactory } from '../../control_factory_registry';
-import { isDataControlFactory } from './types';
+import { isDataControlFactory, type DataControlFieldRegistry } from './types';
 
 /** TODO: This funciton is duplicated from the controls plugin to avoid exporting it */
 export const getDataControlFieldRegistry = memoize(
diff --git a/src/plugins/controls/public/control_group/editor/editor_constants.ts b/src/plugins/controls/public/react_controls/controls/data_controls/editor_constants.ts
similarity index 60%
rename from src/plugins/controls/public/control_group/editor/editor_constants.ts
rename to src/plugins/controls/public/react_controls/controls/data_controls/editor_constants.ts
index 32d3bc136141b..334e31b9454a5 100644
--- a/src/plugins/controls/public/control_group/editor/editor_constants.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/editor_constants.ts
@@ -7,23 +7,29 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ControlGroupStrings } from '../control_group_strings';
+import { i18n } from '@kbn/i18n';
 
 export const CONTROL_WIDTH_OPTIONS = [
   {
     id: `small`,
     'data-test-subj': 'control-editor-width-small',
-    label: ControlGroupStrings.management.controlWidth.getSmallWidthTitle(),
+    label: i18n.translate('controls.controlGroup.management.layout.small', {
+      defaultMessage: 'Small',
+    }),
   },
   {
     id: `medium`,
     'data-test-subj': 'control-editor-width-medium',
-    label: ControlGroupStrings.management.controlWidth.getMediumWidthTitle(),
+    label: i18n.translate('controls.controlGroup.management.layout.medium', {
+      defaultMessage: 'Medium',
+    }),
   },
   {
     id: `large`,
     'data-test-subj': 'control-editor-width-large',
-    label: ControlGroupStrings.management.controlWidth.getLargeWidthTitle(),
+    label: i18n.translate('controls.controlGroup.management.layout.large', {
+      defaultMessage: 'Large',
+    }),
   },
 ];
 
@@ -31,11 +37,15 @@ export const CONTROL_LAYOUT_OPTIONS = [
   {
     id: `oneLine`,
     'data-test-subj': 'control-editor-layout-oneLine',
-    label: ControlGroupStrings.management.labelPosition.getInlineTitle(),
+    label: i18n.translate('controls.controlGroup.management.labelPosition.inline', {
+      defaultMessage: 'Inline',
+    }),
   },
   {
     id: `twoLine`,
     'data-test-subj': 'control-editor-layout-twoLine',
-    label: ControlGroupStrings.management.labelPosition.getAboveTitle(),
+    label: i18n.translate('controls.controlGroup.management.labelPosition.above', {
+      defaultMessage: 'Above',
+    }),
   },
 ];
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/initialize_data_control.ts b/src/plugins/controls/public/react_controls/controls/data_controls/initialize_data_control.ts
index b0d985892a40b..6b814efa1ec3d 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/initialize_data_control.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/initialize_data_control.ts
@@ -12,9 +12,9 @@ import { BehaviorSubject, combineLatest, debounceTime, first, skip, switchMap, t
 
 import { CoreStart } from '@kbn/core-lifecycle-browser';
 import {
+  DATA_VIEW_SAVED_OBJECT_TYPE,
   DataView,
   DataViewField,
-  DATA_VIEW_SAVED_OBJECT_TYPE,
 } from '@kbn/data-views-plugin/common';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { Filter } from '@kbn/es-query';
@@ -22,12 +22,13 @@ import { SerializedPanelState } from '@kbn/presentation-containers';
 import { StateComparators } from '@kbn/presentation-publishing';
 
 import { i18n } from '@kbn/i18n';
-import { ControlGroupApi } from '../../control_group/types';
+import type { DefaultControlState, DefaultDataControlState } from '../../../../common';
+import type { ControlGroupApi } from '../../control_group/types';
 import { initializeDefaultControlApi } from '../initialize_default_control_api';
-import { ControlApiInitialization, ControlStateManager, DefaultControlState } from '../types';
+import type { ControlApiInitialization, ControlStateManager } from '../types';
 import { openDataControlEditor } from './open_data_control_editor';
-import { DataControlApi, DataControlFieldFormatter, DefaultDataControlState } from './types';
 import { getReferenceName } from './reference_name_utils';
+import type { DataControlApi, DataControlFieldFormatter } from './types';
 
 export const initializeDataControl = <EditorState extends object = {}>(
   controlId: string,
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/mocks/api_mocks.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/mocks/api_mocks.tsx
index b4ce0c40fdb45..9abf7f6c67c87 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/mocks/api_mocks.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/mocks/api_mocks.tsx
@@ -12,11 +12,13 @@ import { BehaviorSubject } from 'rxjs';
 import { DataViewField } from '@kbn/data-views-plugin/common';
 
 import { PublishingSubject } from '@kbn/presentation-publishing';
-import { OptionsListSuggestions } from '../../../../../common/options_list/types';
-import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
-import { OptionsListSearchTechnique } from '../../../../../common/options_list/suggestions_searching';
-import { OptionsListSortingType } from '../../../../../common/options_list/suggestions_sorting';
-import { OptionsListDisplaySettings } from '../options_list_control/types';
+import type {
+  OptionsListDisplaySettings,
+  OptionsListSearchTechnique,
+  OptionsListSelection,
+  OptionsListSortingType,
+  OptionsListSuggestions,
+} from '../../../../../common/options_list';
 
 export const getOptionsListMocks = () => {
   const selectedOptions$ = new BehaviorSubject<OptionsListSelection[] | undefined>(undefined);
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
index f79774497b22f..fe629555dea3c 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/open_data_control_editor.tsx
@@ -17,9 +17,9 @@ import { tracksOverlays } from '@kbn/presentation-containers';
 import { apiHasParentApi } from '@kbn/presentation-publishing';
 import { toMountPoint } from '@kbn/react-kibana-mount';
 
-import { ControlGroupApi } from '../../control_group/types';
+import type { DefaultDataControlState } from '../../../../common';
+import type { ControlGroupApi } from '../../control_group/types';
 import { DataControlEditor } from './data_control_editor';
-import { DefaultDataControlState } from './types';
 
 export const openDataControlEditor = <
   State extends DefaultDataControlState = DefaultDataControlState
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.test.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.test.tsx
index 3a4e68d7ec26c..e7660ff2ec9b6 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.test.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.test.tsx
@@ -8,17 +8,18 @@
  */
 
 import React from 'react';
+import { BehaviorSubject } from 'rxjs';
 
-import userEvent from '@testing-library/user-event';
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { act, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
+import type { DefaultDataControlState } from '../../../../../../common';
+import type { OptionsListControlState } from '../../../../../../common/options_list';
+import type { ControlGroupApi } from '../../../../control_group/types';
 import { getMockedControlGroupApi } from '../../../mocks/control_mocks';
-import { CustomOptionsComponentProps, DefaultDataControlState } from '../../types';
-import { OptionsListControlState } from '../types';
+import type { CustomOptionsComponentProps } from '../../types';
 import { OptionsListEditorOptions } from './options_list_editor_options';
-import { ControlGroupApi } from '../../../../control_group/types';
-import { BehaviorSubject } from 'rxjs';
 
 describe('Options list sorting button', () => {
   const getMockedState = <State extends DefaultDataControlState = DefaultDataControlState>(
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.tsx
index fee9484f2ca06..27f12e6d0f2e8 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_editor_options.tsx
@@ -12,14 +12,14 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { EuiFormRow, EuiRadioGroup, EuiSwitch } from '@elastic/eui';
 import { useStateFromPublishingSubject } from '@kbn/presentation-publishing';
 
-import {
-  getCompatibleSearchTechniques,
+import type {
+  OptionsListControlState,
   OptionsListSearchTechnique,
-} from '../../../../../../common/options_list/suggestions_searching';
+} from '../../../../../../common/options_list';
+import { getCompatibleSearchTechniques } from '../../../../../../common/options_list/suggestions_searching';
 import { ControlSettingTooltipLabel } from '../../../../control_group/components/control_setting_tooltip_label';
 import { CustomOptionsComponentProps } from '../../types';
 import { DEFAULT_SEARCH_TECHNIQUE } from '../constants';
-import { OptionsListControlState } from '../types';
 import { OptionsListStrings } from '../options_list_strings';
 
 const selectionOptions = [
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_popover.test.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_popover.test.tsx
index 5de236358f34e..1f18e229bef3b 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_popover.test.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/components/options_list_popover.test.tsx
@@ -8,15 +8,16 @@
  */
 
 import React from 'react';
+import { BehaviorSubject } from 'rxjs';
 
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { act, render, RenderResult, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
-import { BehaviorSubject } from 'rxjs';
+import type { OptionsListDisplaySettings } from '../../../../../../common/options_list';
 import { getOptionsListMocks } from '../../mocks/api_mocks';
 import { ContextStateManager, OptionsListControlContext } from '../options_list_context_provider';
-import { OptionsListComponentApi, OptionsListDisplaySettings } from '../types';
+import type { OptionsListComponentApi } from '../types';
 import { OptionsListPopover } from './options_list_popover';
 
 describe('Options list popover', () => {
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/constants.ts b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/constants.ts
index b743e8e79ddb9..0d4a92b6734a9 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/constants.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/constants.ts
@@ -7,8 +7,10 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { OptionsListSearchTechnique } from '../../../../../common/options_list/suggestions_searching';
-import { OptionsListSortingType } from '../../../../../common/options_list/suggestions_sorting';
+import type {
+  OptionsListSortingType,
+  OptionsListSearchTechnique,
+} from '../../../../../common/options_list';
 
 export const DEFAULT_SEARCH_TECHNIQUE: OptionsListSearchTechnique = 'prefix';
 export const OPTIONS_LIST_DEFAULT_SORT: OptionsListSortingType = {
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
index 60aa4bb67398a..d0c40736552ce 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/get_options_list_control_factory.tsx
@@ -7,27 +7,25 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import fastIsEqual from 'fast-deep-equal';
 import React, { useEffect } from 'react';
 import { BehaviorSubject, combineLatest, debounceTime, filter, skip } from 'rxjs';
-import fastIsEqual from 'fast-deep-equal';
 
 import { buildExistsFilter, buildPhraseFilter, buildPhrasesFilter, Filter } from '@kbn/es-query';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
 
-import {
-  OPTIONS_LIST_CONTROL,
+import { OPTIONS_LIST_CONTROL } from '../../../../../common';
+import type {
+  OptionsListControlState,
+  OptionsListSearchTechnique,
+  OptionsListSelection,
+  OptionsListSortingType,
   OptionsListSuccessResponse,
   OptionsListSuggestions,
-} from '../../../../../common/options_list/types';
-import {
-  getSelectionAsFieldType,
-  OptionsListSelection,
-} from '../../../../../common/options_list/options_list_selections';
-import { isValidSearch } from '../../../../../common/options_list/is_valid_search';
-import { OptionsListSearchTechnique } from '../../../../../common/options_list/suggestions_searching';
-import { OptionsListSortingType } from '../../../../../common/options_list/suggestions_sorting';
+} from '../../../../../common/options_list';
+import { getSelectionAsFieldType, isValidSearch } from '../../../../../common/options_list';
 import { initializeDataControl } from '../initialize_data_control';
-import { DataControlFactory, DataControlServices } from '../types';
+import type { DataControlFactory, DataControlServices } from '../types';
 import { OptionsListControl } from './components/options_list_control';
 import { OptionsListEditorOptions } from './components/options_list_editor_options';
 import {
@@ -37,9 +35,9 @@ import {
 } from './constants';
 import { fetchAndValidate$ } from './fetch_and_validate';
 import { OptionsListControlContext } from './options_list_context_provider';
-import { OptionsListStrings } from './options_list_strings';
-import { OptionsListControlApi, OptionsListControlState } from './types';
 import { initializeOptionsListSelections } from './options_list_control_selections';
+import { OptionsListStrings } from './options_list_strings';
+import type { OptionsListControlApi } from './types';
 
 export const getOptionsListControlFactory = (
   services: DataControlServices
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_context_provider.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_context_provider.tsx
index 5a776988e8932..d0acec2f0d683 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_context_provider.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_context_provider.tsx
@@ -10,13 +10,13 @@
 import React, { useContext } from 'react';
 
 import { PublishingSubject } from '@kbn/presentation-publishing';
-import { ControlStateManager } from '../../types';
-import {
-  OptionsListComponentApi,
-  OptionsListComponentState,
+
+import type {
   OptionsListDisplaySettings,
-} from './types';
-import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
+  OptionsListSelection,
+} from '../../../../../common/options_list';
+import type { ControlStateManager } from '../../types';
+import type { OptionsListComponentApi, OptionsListComponentState } from './types';
 
 export type ContextStateManager = ControlStateManager<
   Omit<OptionsListComponentState, 'exclude' | 'existsSelected' | 'selectedOptions'>
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_control_selections.ts b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_control_selections.ts
index a5226588fcdea..d766b564d0212 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_control_selections.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_control_selections.ts
@@ -7,10 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { BehaviorSubject } from 'rxjs';
 import deepEqual from 'react-fast-compare';
+import { BehaviorSubject } from 'rxjs';
+
 import { PublishingSubject, StateComparators } from '@kbn/presentation-publishing';
-import { OptionsListControlState } from './types';
+
+import { OptionsListControlState } from '../../../../../common/options_list';
 import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
 
 export function initializeOptionsListSelections(
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_fetch_cache.ts b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_fetch_cache.ts
index 99f66ca0c65a2..548b1efebd02a 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_fetch_cache.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/options_list_fetch_cache.ts
@@ -14,13 +14,13 @@ import dateMath from '@kbn/datemath';
 
 import { getEsQueryConfig } from '@kbn/data-plugin/public';
 import { buildEsQuery } from '@kbn/es-query';
-import {
-  type OptionsListFailureResponse,
-  type OptionsListRequest,
-  type OptionsListResponse,
-  type OptionsListSuccessResponse,
+import type {
+  OptionsListFailureResponse,
+  OptionsListRequest,
+  OptionsListResponse,
+  OptionsListSuccessResponse,
 } from '../../../../../common/options_list/types';
-import { DataControlServices } from '../types';
+import type { DataControlServices } from '../types';
 
 const REQUEST_CACHE_SIZE = 50; // only store a max of 50 responses
 const REQUEST_CACHE_TTL = 1000 * 60; // time to live = 1 minute
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/types.ts b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/types.ts
index 13e61c42fdaf8..1d34c082eb8a6 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/types.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/options_list_control/types.ts
@@ -9,33 +9,14 @@
 
 import { BehaviorSubject } from 'rxjs';
 
-import { PublishingSubject } from '@kbn/presentation-publishing';
-
-import { OptionsListSearchTechnique } from '../../../../../common/options_list/suggestions_searching';
-import { OptionsListSortingType } from '../../../../../common/options_list/suggestions_sorting';
-import { OptionsListSuggestions } from '../../../../../common/options_list/types';
-import { OptionsListSelection } from '../../../../../common/options_list/options_list_selections';
-import { DataControlApi, DefaultDataControlState } from '../types';
-
-export interface OptionsListDisplaySettings {
-  placeholder?: string;
-  hideActionBar?: boolean;
-  hideExclude?: boolean;
-  hideExists?: boolean;
-  hideSort?: boolean;
-}
-
-export interface OptionsListControlState
-  extends DefaultDataControlState,
-    OptionsListDisplaySettings {
-  searchTechnique?: OptionsListSearchTechnique;
-  sort?: OptionsListSortingType;
-  selectedOptions?: OptionsListSelection[];
-  existsSelected?: boolean;
-  runPastTimeout?: boolean;
-  singleSelect?: boolean;
-  exclude?: boolean;
-}
+import type { PublishingSubject } from '@kbn/presentation-publishing';
+import type {
+  OptionsListControlState,
+  OptionsListDisplaySettings,
+  OptionsListSelection,
+  OptionsListSuggestions,
+} from '../../../../../common/options_list';
+import type { DataControlApi } from '../types';
 
 export type OptionsListControlApi = DataControlApi;
 
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/get_range_slider_control_factory.tsx b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
index ad0b172d7c5ce..596206dc2f4f6 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/get_range_slider_control_factory.tsx
@@ -8,19 +8,21 @@
  */
 
 import React, { useEffect, useState } from 'react';
+import { BehaviorSubject, combineLatest, debounceTime, map, skip } from 'rxjs';
+
 import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
-import { buildRangeFilter, Filter, RangeFilterParams } from '@kbn/es-query';
+import { Filter, RangeFilterParams, buildRangeFilter } from '@kbn/es-query';
 import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing';
-import { BehaviorSubject, combineLatest, debounceTime, map, skip } from 'rxjs';
+
+import { RANGE_SLIDER_CONTROL } from '../../../../../common';
 import { initializeDataControl } from '../initialize_data_control';
-import { DataControlFactory, DataControlServices } from '../types';
+import type { DataControlFactory, DataControlServices } from '../types';
 import { RangeSliderControl } from './components/range_slider_control';
 import { hasNoResults$ } from './has_no_results';
 import { minMax$ } from './min_max';
-import { RangeSliderStrings } from './range_slider_strings';
-import { RangesliderControlApi, RangesliderControlState } from './types';
 import { initializeRangeControlSelections } from './range_control_selections';
-import { RANGE_SLIDER_CONTROL } from '../../../../../common';
+import { RangeSliderStrings } from './range_slider_strings';
+import type { RangesliderControlApi, RangesliderControlState } from './types';
 
 export const getRangesliderControlFactory = (
   services: DataControlServices
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/types.ts b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/types.ts
index af12059b19600..459220a9dd166 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/types.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/range_slider/types.ts
@@ -7,7 +7,8 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { DataControlApi, DefaultDataControlState } from '../types';
+import type { DefaultDataControlState } from '../../../../../common';
+import type { DataControlApi } from '../types';
 
 export type RangeValue = [string, string];
 
diff --git a/src/plugins/controls/public/react_controls/controls/data_controls/types.ts b/src/plugins/controls/public/react_controls/controls/data_controls/types.ts
index 530dab58f1d81..9eac141642402 100644
--- a/src/plugins/controls/public/react_controls/controls/data_controls/types.ts
+++ b/src/plugins/controls/public/react_controls/controls/data_controls/types.ts
@@ -18,8 +18,10 @@ import {
   PublishesPanelTitle,
   PublishingSubject,
 } from '@kbn/presentation-publishing';
+
+import { DefaultDataControlState } from '../../../../common';
 import { ControlGroupApi } from '../../control_group/types';
-import { ControlFactory, DefaultControlApi, DefaultControlState } from '../types';
+import { ControlFactory, DefaultControlApi } from '../types';
 import { PublishesAsyncFilters } from './publishes_async_filters';
 
 export type DataControlFieldFormatter = FieldFormatConvertFunction | ((toFormat: any) => string);
@@ -60,14 +62,17 @@ export const isDataControlFactory = (
   return typeof (factory as DataControlFactory).isFieldCompatible === 'function';
 };
 
-export interface DefaultDataControlState extends DefaultControlState {
-  dataViewId: string;
-  fieldName: string;
-  title?: string; // custom control label
-}
-
 export interface DataControlServices {
   core: CoreStart;
   data: DataPublicPluginStart;
   dataViews: DataViewsPublicPluginStart;
 }
+
+interface DataControlField {
+  field: DataViewField;
+  compatibleControlTypes: string[];
+}
+
+export interface DataControlFieldRegistry {
+  [fieldName: string]: DataControlField;
+}
diff --git a/src/plugins/controls/public/react_controls/controls/initialize_default_control_api.tsx b/src/plugins/controls/public/react_controls/controls/initialize_default_control_api.tsx
index 018162ec300cb..558595a877f64 100644
--- a/src/plugins/controls/public/react_controls/controls/initialize_default_control_api.tsx
+++ b/src/plugins/controls/public/react_controls/controls/initialize_default_control_api.tsx
@@ -11,14 +11,9 @@ import { BehaviorSubject } from 'rxjs';
 
 import { SerializedPanelState } from '@kbn/presentation-containers';
 import { StateComparators } from '@kbn/presentation-publishing';
-import { ControlWidth } from '../../../common';
 
-import {
-  ControlApiInitialization,
-  ControlStateManager,
-  DefaultControlApi,
-  DefaultControlState,
-} from './types';
+import type { ControlWidth, DefaultControlState } from '../../../common';
+import type { ControlApiInitialization, ControlStateManager, DefaultControlApi } from './types';
 
 export type ControlApi = ControlApiInitialization<DefaultControlApi>;
 
diff --git a/src/plugins/controls/public/react_controls/controls/mocks/control_mocks.ts b/src/plugins/controls/public/react_controls/controls/mocks/control_mocks.ts
index 1bf7ce9f28ead..5e3156e5d732b 100644
--- a/src/plugins/controls/public/react_controls/controls/mocks/control_mocks.ts
+++ b/src/plugins/controls/public/react_controls/controls/mocks/control_mocks.ts
@@ -7,20 +7,21 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { TimeRange } from '@kbn/es-query';
-import { PublishesUnifiedSearch, StateComparators } from '@kbn/presentation-publishing';
 import { BehaviorSubject } from 'rxjs';
-import { ControlFetchContext } from '../../control_group/control_fetch/control_fetch';
-import { ControlGroupApi } from '../../control_group/types';
-import { ControlApiRegistration, ControlFactory, DefaultControlApi } from '../types';
+
+import { StateComparators } from '@kbn/presentation-publishing';
+
+import { CONTROL_GROUP_TYPE } from '../../../../common';
+import type { ControlFetchContext } from '../../control_group/control_fetch/control_fetch';
+import type { ControlGroupApi } from '../../control_group/types';
+import type { ControlApiRegistration, ControlFactory, DefaultControlApi } from '../types';
 
 export const getMockedControlGroupApi = (
-  dashboardApi: Partial<PublishesUnifiedSearch> = {
-    timeRange$: new BehaviorSubject<TimeRange | undefined>(undefined),
-  },
+  dashboardApi?: unknown,
   overwriteApi?: Partial<ControlGroupApi>
 ) => {
   return {
+    type: CONTROL_GROUP_TYPE,
     parentApi: dashboardApi,
     autoApplySelections$: new BehaviorSubject(true),
     ignoreParentSettings$: new BehaviorSubject(undefined),
diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/get_timeslider_control_factory.tsx b/src/plugins/controls/public/react_controls/controls/timeslider_control/get_timeslider_control_factory.tsx
index f40ad3ea51824..20baf8fb545e1 100644
--- a/src/plugins/controls/public/react_controls/controls/timeslider_control/get_timeslider_control_factory.tsx
+++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/get_timeslider_control_factory.tsx
@@ -8,33 +8,35 @@
  */
 
 import React, { useEffect, useMemo } from 'react';
-import { i18n } from '@kbn/i18n';
 import { BehaviorSubject, debounceTime, first, map } from 'rxjs';
+
 import { EuiInputPopover } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
 import {
+  ViewMode,
   apiHasParentApi,
   apiPublishesDataLoading,
   getUnchangingComparator,
   getViewModeSubject,
   useBatchedPublishingSubjects,
-  ViewMode,
 } from '@kbn/presentation-publishing';
-import { ControlFactory } from '../types';
-import { TimesliderControlState, TimesliderControlApi, Services, Timeslice } from './types';
+
+import { TIME_SLIDER_CONTROL } from '../../../../common';
 import { initializeDefaultControlApi } from '../initialize_default_control_api';
+import { ControlFactory } from '../types';
+import './components/index.scss';
 import { TimeSliderPopoverButton } from './components/time_slider_popover_button';
 import { TimeSliderPopoverContent } from './components/time_slider_popover_content';
+import { TimeSliderPrepend } from './components/time_slider_prepend';
+import { initTimeRangePercentage } from './init_time_range_percentage';
 import { initTimeRangeSubscription } from './init_time_range_subscription';
 import {
   FROM_INDEX,
+  TO_INDEX,
   roundDownToNextStepSizeFactor,
   roundUpToNextStepSizeFactor,
-  TO_INDEX,
 } from './time_utils';
-import { initTimeRangePercentage } from './init_time_range_percentage';
-import './components/index.scss';
-import { TimeSliderPrepend } from './components/time_slider_prepend';
-import { TIME_SLIDER_CONTROL } from '../../../../common';
+import { Services, Timeslice, TimesliderControlApi, TimesliderControlState } from './types';
 
 const displayName = i18n.translate('controls.timesliderControl.displayName', {
   defaultMessage: 'Time slider',
diff --git a/src/plugins/controls/public/react_controls/controls/timeslider_control/types.ts b/src/plugins/controls/public/react_controls/controls/timeslider_control/types.ts
index 1808cfae5b6bd..702d02ae9accc 100644
--- a/src/plugins/controls/public/react_controls/controls/timeslider_control/types.ts
+++ b/src/plugins/controls/public/react_controls/controls/timeslider_control/types.ts
@@ -10,7 +10,8 @@
 import { CoreStart } from '@kbn/core/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import type { PublishesPanelTitle, PublishesTimeslice } from '@kbn/presentation-publishing';
-import type { DefaultControlApi, DefaultControlState } from '../types';
+import type { DefaultControlState } from '../../../../common';
+import type { DefaultControlApi } from '../types';
 
 export type Timeslice = [number, number];
 
diff --git a/src/plugins/controls/public/react_controls/controls/types.ts b/src/plugins/controls/public/react_controls/controls/types.ts
index e45f0c0be7d98..85045f8bd70ba 100644
--- a/src/plugins/controls/public/react_controls/controls/types.ts
+++ b/src/plugins/controls/public/react_controls/controls/types.ts
@@ -23,9 +23,10 @@ import {
   PublishingSubject,
   StateComparators,
 } from '@kbn/presentation-publishing';
-import { CanClearSelections, ControlWidth } from '../../types';
 
+import { ControlWidth, DefaultControlState } from '../../../common/types';
 import { ControlGroupApi } from '../control_group/types';
+import { CanClearSelections } from '../../types';
 
 export interface HasCustomPrepend {
   CustomPrependComponent: React.FC<{}>;
@@ -50,11 +51,6 @@ export type DefaultControlApi = PublishesDataLoading &
     width: PublishingSubject<ControlWidth | undefined>;
   };
 
-export interface DefaultControlState {
-  grow?: boolean;
-  width?: ControlWidth;
-}
-
 export type ControlApiRegistration<ControlApi extends DefaultControlApi = DefaultControlApi> = Omit<
   ControlApi,
   'uuid' | 'parentApi' | 'type' | 'unsavedChanges' | 'resetUnsavedChanges'
diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer.test.tsx b/src/plugins/controls/public/react_controls/external_api/control_group_renderer.test.tsx
similarity index 96%
rename from src/plugins/controls/public/control_group/external_api/control_group_renderer.test.tsx
rename to src/plugins/controls/public/react_controls/external_api/control_group_renderer.test.tsx
index f2a9cf82a62da..58269308f1846 100644
--- a/src/plugins/controls/public/control_group/external_api/control_group_renderer.test.tsx
+++ b/src/plugins/controls/public/react_controls/external_api/control_group_renderer.test.tsx
@@ -17,9 +17,9 @@ import { PublishesUnifiedSearch, PublishingSubject } from '@kbn/presentation-pub
 import { act, render, waitFor } from '@testing-library/react';
 
 import { ControlGroupRendererApi } from '.';
-import { getControlGroupEmbeddableFactory } from '../../react_controls/control_group/get_control_group_factory';
-import { CONTROL_GROUP_TYPE } from '../types';
+import { getControlGroupEmbeddableFactory } from '../control_group/get_control_group_factory';
 import { ControlGroupRenderer, ControlGroupRendererProps } from './control_group_renderer';
+import { CONTROL_GROUP_TYPE } from '../..';
 
 type ParentApiType = PublishesUnifiedSearch & {
   unifiedSearchFilters$?: PublishingSubject<Filter[] | undefined>;
diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx b/src/plugins/controls/public/react_controls/external_api/control_group_renderer.tsx
similarity index 92%
rename from src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx
rename to src/plugins/controls/public/react_controls/external_api/control_group_renderer.tsx
index 1a5e01ff9ab07..74d477c48f23a 100644
--- a/src/plugins/controls/public/control_group/external_api/control_group_renderer.tsx
+++ b/src/plugins/controls/public/react_controls/external_api/control_group_renderer.tsx
@@ -16,18 +16,18 @@ import { ReactEmbeddableRenderer, ViewMode } from '@kbn/embeddable-plugin/public
 import type { Filter, Query, TimeRange } from '@kbn/es-query';
 import { useSearchApi, type ViewMode as ViewModeType } from '@kbn/presentation-publishing';
 
-import { CONTROL_GROUP_TYPE } from '../../../common';
+import type { ControlGroupApi } from '../..';
 import {
-  ControlGroupApi,
-  ControlGroupRuntimeState,
-  ControlGroupSerializedState,
-} from '../../react_controls/control_group/types';
+  CONTROL_GROUP_TYPE,
+  type ControlGroupRuntimeState,
+  type ControlGroupSerializedState,
+} from '../../../common';
 import {
-  controlGroupStateBuilder,
   type ControlGroupStateBuilder,
-} from '../../react_controls/control_group/utils/control_group_state_builder';
-import { getDefaultControlGroupRuntimeState } from '../../react_controls/control_group/utils/initialization_utils';
-import { ControlGroupCreationOptions, ControlGroupRendererApi } from './types';
+  controlGroupStateBuilder,
+} from '../control_group/utils/control_group_state_builder';
+import { getDefaultControlGroupRuntimeState } from '../control_group/utils/initialization_utils';
+import type { ControlGroupCreationOptions, ControlGroupRendererApi } from './types';
 
 export interface ControlGroupRendererProps {
   onApiAvailable: (api: ControlGroupRendererApi) => void;
diff --git a/src/plugins/controls/public/control_group/external_api/control_group_renderer_lazy.tsx b/src/plugins/controls/public/react_controls/external_api/control_group_renderer_lazy.tsx
similarity index 100%
rename from src/plugins/controls/public/control_group/external_api/control_group_renderer_lazy.tsx
rename to src/plugins/controls/public/react_controls/external_api/control_group_renderer_lazy.tsx
diff --git a/src/plugins/controls/public/control_group/external_api/index.ts b/src/plugins/controls/public/react_controls/external_api/index.ts
similarity index 100%
rename from src/plugins/controls/public/control_group/external_api/index.ts
rename to src/plugins/controls/public/react_controls/external_api/index.ts
diff --git a/src/plugins/controls/public/control_group/external_api/types.ts b/src/plugins/controls/public/react_controls/external_api/types.ts
similarity index 91%
rename from src/plugins/controls/public/control_group/external_api/types.ts
rename to src/plugins/controls/public/react_controls/external_api/types.ts
index 169b5a4fa0d71..80457c2c64b14 100644
--- a/src/plugins/controls/public/control_group/external_api/types.ts
+++ b/src/plugins/controls/public/react_controls/external_api/types.ts
@@ -8,11 +8,8 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
-import {
-  ControlGroupApi,
-  ControlGroupEditorConfig,
-  ControlGroupRuntimeState,
-} from '../../react_controls/control_group/types';
+import type { ControlGroupEditorConfig, ControlGroupRuntimeState } from '../../../common';
+import type { ControlGroupApi } from '../..';
 
 export type ControlGroupRendererApi = ControlGroupApi & {
   reload: () => void;
diff --git a/src/plugins/controls/public/services/controls/controls.story.ts b/src/plugins/controls/public/services/controls/controls.story.ts
deleted file mode 100644
index 03f586b4ebc61..0000000000000
--- a/src/plugins/controls/public/services/controls/controls.story.ts
+++ /dev/null
@@ -1,42 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsServiceType, ControlTypeRegistry } from './types';
-import { ControlEmbeddable, ControlFactory, ControlInput, ControlOutput } from '../../types';
-
-export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
-export const controlsServiceFactory = () => getStubControlsService();
-
-export const getStubControlsService = () => {
-  const controlsFactoriesMap: ControlTypeRegistry = {};
-
-  const registerControlType = (factory: ControlFactory) => {
-    controlsFactoriesMap[factory.type] = factory;
-  };
-
-  const getControlFactory = <
-    I extends ControlInput = ControlInput,
-    O extends ControlOutput = ControlOutput,
-    E extends ControlEmbeddable<I, O> = ControlEmbeddable<I, O>
-  >(
-    type: string
-  ) => {
-    return controlsFactoriesMap[type] as EmbeddableFactory<I, O, E>;
-  };
-
-  const getControlTypes = () => Object.keys(controlsFactoriesMap);
-
-  return {
-    registerControlType,
-    getControlFactory,
-    getControlTypes,
-  };
-};
diff --git a/src/plugins/controls/public/services/controls/controls.stub.ts b/src/plugins/controls/public/services/controls/controls.stub.ts
new file mode 100644
index 0000000000000..2e182998c9071
--- /dev/null
+++ b/src/plugins/controls/public/services/controls/controls.stub.ts
@@ -0,0 +1,46 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
+import { ControlFactory, DefaultControlApi } from '../../react_controls/controls/types';
+import { ControlsServiceType } from './types';
+
+export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
+export const controlsServiceFactory = () => getStubControlsService();
+
+export const getStubControlsService = () => {
+  const controlsFactoriesMap: { [key: string]: ControlFactory<any, any> } = {};
+
+  const mockRegisterControlFactory = async <
+    State extends object = object,
+    ApiType extends DefaultControlApi = DefaultControlApi
+  >(
+    controlType: string,
+    getFactory: () => Promise<ControlFactory<State, ApiType>>
+  ) => {
+    controlsFactoriesMap[controlType] = (await getFactory()) as ControlFactory<any, any>;
+  };
+
+  const mockGetControlFactory = <
+    State extends object = object,
+    ApiType extends DefaultControlApi = DefaultControlApi
+  >(
+    type: string
+  ) => {
+    return controlsFactoriesMap[type] as ControlFactory<State, ApiType>;
+  };
+
+  const getAllControlTypes = () => Object.keys(controlsFactoriesMap);
+
+  return {
+    registerControlFactory: mockRegisterControlFactory,
+    getControlFactory: mockGetControlFactory,
+    getAllControlTypes,
+  };
+};
diff --git a/src/plugins/controls/public/services/controls/controls_service.ts b/src/plugins/controls/public/services/controls/controls_service.ts
index 10fc160a0b443..c794c056a4f8d 100644
--- a/src/plugins/controls/public/services/controls/controls_service.ts
+++ b/src/plugins/controls/public/services/controls/controls_service.ts
@@ -7,29 +7,18 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsServiceType, ControlTypeRegistry } from './types';
-import { ControlEmbeddable, ControlFactory, ControlInput, ControlOutput } from '../../types';
+import {
+  getAllControlTypes,
+  getControlFactory,
+  registerControlFactory,
+} from '../../react_controls/control_factory_registry';
+import { ControlsServiceType } from './types';
 
-export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
 export const controlsServiceFactory = () => controlsService;
 
-const controlsFactoriesMap: ControlTypeRegistry = {};
-
 // export controls service directly for use in plugin setup lifecycle
 export const controlsService: ControlsServiceType = {
-  registerControlType: (factory: ControlFactory) => {
-    controlsFactoriesMap[factory.type] = factory;
-  },
-  getControlFactory: <
-    I extends ControlInput = ControlInput,
-    O extends ControlOutput = ControlOutput,
-    E extends ControlEmbeddable<I, O> = ControlEmbeddable<I, O>
-  >(
-    type: string
-  ) => {
-    return controlsFactoriesMap[type] as EmbeddableFactory<I, O, E>;
-  },
-  getControlTypes: () => Object.keys(controlsFactoriesMap),
+  registerControlFactory,
+  getControlFactory,
+  getAllControlTypes,
 };
diff --git a/src/plugins/controls/public/services/controls/types.ts b/src/plugins/controls/public/services/controls/types.ts
index 993ca46ecec58..d9011819d815c 100644
--- a/src/plugins/controls/public/services/controls/types.ts
+++ b/src/plugins/controls/public/services/controls/types.ts
@@ -7,26 +7,17 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlEmbeddable, ControlFactory, ControlOutput, ControlInput } from '../../types';
+import {
+  getAllControlTypes,
+  getControlFactory,
+  registerControlFactory,
+} from '../../react_controls/control_factory_registry';
 
 export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
 
-export interface ControlTypeRegistry {
-  [key: string]: ControlFactory;
-}
-
 export interface ControlsServiceType {
-  registerControlType: (factory: ControlFactory) => void;
-
-  getControlFactory: <
-    I extends ControlInput = ControlInput,
-    O extends ControlOutput = ControlOutput,
-    E extends ControlEmbeddable<I, O> = ControlEmbeddable<I, O>
-  >(
-    type: string
-  ) => EmbeddableFactory<I, O, E>;
-
-  getControlTypes: () => string[];
+  registerControlFactory: typeof registerControlFactory;
+  getControlFactory: typeof getControlFactory;
+  getAllControlTypes: typeof getAllControlTypes;
 }
diff --git a/src/plugins/controls/public/services/core/core.story.ts b/src/plugins/controls/public/services/core/core.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/core/core.story.ts
rename to src/plugins/controls/public/services/core/core.stub.ts
diff --git a/src/plugins/controls/public/services/data/data.story.ts b/src/plugins/controls/public/services/data/data.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/data/data.story.ts
rename to src/plugins/controls/public/services/data/data.stub.ts
diff --git a/src/plugins/controls/public/services/data/data_service.ts b/src/plugins/controls/public/services/data/data_service.ts
index cc1cf9d43e944..84a36c2775dcd 100644
--- a/src/plugins/controls/public/services/data/data_service.ts
+++ b/src/plugins/controls/public/services/data/data_service.ts
@@ -7,91 +7,21 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { DataViewField } from '@kbn/data-views-plugin/common';
-import { get } from 'lodash';
-import { lastValueFrom } from 'rxjs';
 import { KibanaPluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsDataService } from './types';
 import { ControlsPluginStartDeps } from '../../types';
+import { ControlsDataService } from './types';
 
 export type DataServiceFactory = KibanaPluginServiceFactory<
   ControlsDataService,
   ControlsPluginStartDeps
 >;
 
-const minMaxAgg = (field?: DataViewField) => {
-  const aggBody: Record<string, any> = {};
-  if (field) {
-    if (field.scripted) {
-      aggBody.script = {
-        source: field.script,
-        lang: field.lang,
-      };
-    } else {
-      aggBody.field = field.name;
-    }
-  }
-
-  return {
-    maxAgg: {
-      max: aggBody,
-    },
-    minAgg: {
-      min: aggBody,
-    },
-  };
-};
-
 export const dataServiceFactory: DataServiceFactory = ({ startPlugins }) => {
   const {
     data: { query: queryPlugin, search },
   } = startPlugins;
-  const { data } = startPlugins;
-
-  const fetchFieldRange: ControlsDataService['fetchFieldRange'] = async (
-    dataView,
-    fieldName,
-    input
-  ) => {
-    const { ignoreParentSettings, query, timeRange } = input;
-    let { filters = [] } = input;
-
-    const field = dataView.getFieldByName(fieldName);
-
-    if (!field) {
-      throw new Error('Field Missing Error');
-    }
-
-    if (timeRange) {
-      const timeFilter = data.query.timefilter.timefilter.createFilter(dataView, timeRange);
-      if (timeFilter) {
-        filters = filters.concat(timeFilter);
-      }
-    }
-
-    const searchSource = await data.search.searchSource.create();
-    searchSource.setField('size', 0);
-    searchSource.setField('index', dataView);
-
-    const aggs = minMaxAgg(field);
-    searchSource.setField('aggs', aggs);
-
-    searchSource.setField('filter', ignoreParentSettings?.ignoreFilters ? [] : filters);
-    searchSource.setField('query', ignoreParentSettings?.ignoreQuery ? undefined : query);
-
-    const resp = await lastValueFrom(searchSource.fetch$());
-
-    const min = get(resp, 'rawResponse.aggregations.minAgg.value', undefined);
-    const max = get(resp, 'rawResponse.aggregations.maxAgg.value', undefined);
-
-    return {
-      min: min === null ? undefined : min,
-      max: max === null ? undefined : max,
-    };
-  };
 
   return {
-    fetchFieldRange,
     query: queryPlugin,
     searchSource: search.searchSource,
     timefilter: queryPlugin.timefilter.timefilter,
diff --git a/src/plugins/controls/public/services/data/types.ts b/src/plugins/controls/public/services/data/types.ts
index 453313896c711..68a7553ee08dc 100644
--- a/src/plugins/controls/public/services/data/types.ts
+++ b/src/plugins/controls/public/services/data/types.ts
@@ -8,15 +8,7 @@
  */
 
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { DataView } from '@kbn/data-views-plugin/public';
-import { ControlInput } from '../../types';
-
 export interface ControlsDataService {
-  fetchFieldRange: (
-    dataView: DataView,
-    fieldName: string,
-    input: ControlInput
-  ) => Promise<{ min: number; max: number }>;
   query: DataPublicPluginStart['query'];
   searchSource: DataPublicPluginStart['search']['searchSource'];
   timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];
diff --git a/src/plugins/controls/public/services/data_views/data_views.story.ts b/src/plugins/controls/public/services/data_views/data_views.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/data_views/data_views.story.ts
rename to src/plugins/controls/public/services/data_views/data_views.stub.ts
diff --git a/src/plugins/controls/public/services/embeddable/embeddable.story.ts b/src/plugins/controls/public/services/embeddable/embeddable.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/embeddable/embeddable.story.ts
rename to src/plugins/controls/public/services/embeddable/embeddable.stub.ts
diff --git a/src/plugins/controls/public/services/options_list/options_list.story.ts b/src/plugins/controls/public/services/options_list/options_list.story.ts
deleted file mode 100644
index 9896ce2604ddc..0000000000000
--- a/src/plugins/controls/public/services/options_list/options_list.story.ts
+++ /dev/null
@@ -1,44 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-
-import { ControlsOptionsListService } from './types';
-import { OptionsListRequest, OptionsListResponse } from '../../../common/options_list/types';
-
-export type OptionsListServiceFactory = PluginServiceFactory<ControlsOptionsListService>;
-
-let optionsListRequestMethod = async (request: OptionsListRequest, abortSignal: AbortSignal) =>
-  new Promise<OptionsListResponse>((r) =>
-    setTimeout(
-      () =>
-        r({
-          suggestions: [],
-          totalCardinality: 100,
-        }),
-      120
-    )
-  );
-
-export const replaceOptionsListMethod = (
-  newMethod: (request: OptionsListRequest, abortSignal: AbortSignal) => Promise<OptionsListResponse>
-) => (optionsListRequestMethod = newMethod);
-
-export const optionsListServiceFactory: OptionsListServiceFactory = () => {
-  return {
-    runOptionsListRequest: optionsListRequestMethod,
-    clearOptionsListCache: jest.fn(),
-    getAllowExpensiveQueries: jest.fn().mockReturnValue(Promise.resolve(true)),
-    optionsListResponseWasFailure: jest
-      .fn()
-      .mockReturnValue(
-        false
-      ) as unknown as ControlsOptionsListService['optionsListResponseWasFailure'],
-  };
-};
diff --git a/src/plugins/controls/public/services/options_list/options_list_service.test.ts b/src/plugins/controls/public/services/options_list/options_list_service.test.ts
deleted file mode 100644
index 75d8d177f9750..0000000000000
--- a/src/plugins/controls/public/services/options_list/options_list_service.test.ts
+++ /dev/null
@@ -1,63 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { DataView, FieldSpec } from '@kbn/data-views-plugin/common';
-import { KibanaPluginServiceParams } from '@kbn/presentation-util-plugin/public';
-import type { OptionsListRequest } from '../../../common/options_list/types';
-import type { ControlsPluginStartDeps } from '../../types';
-import type { ControlsHTTPService } from '../http/types';
-import type { ControlsDataService } from '../data/types';
-import { optionsListServiceFactory } from './options_list_service';
-
-describe('runOptionsListRequest', () => {
-  test('should return OptionsListFailureResponse when fetch throws', async () => {
-    const mockCore = {
-      coreStart: {
-        uiSettings: {
-          get: () => {
-            return undefined;
-          },
-        },
-      },
-    } as unknown as KibanaPluginServiceParams<ControlsPluginStartDeps>;
-    const mockData = {
-      query: {
-        timefilter: {
-          timefilter: {},
-        },
-      },
-    } as unknown as ControlsDataService;
-    const mockHttp = {
-      fetch: () => {
-        throw new Error('Simulated network error');
-      },
-    } as unknown as ControlsHTTPService;
-    const optionsListService = optionsListServiceFactory(mockCore, {
-      data: mockData,
-      http: mockHttp,
-    });
-
-    const response = (await optionsListService.runOptionsListRequest(
-      {
-        dataView: {
-          toSpec: () => {
-            return {};
-          },
-          title: 'myDataView',
-        } as unknown as DataView,
-        field: {
-          name: 'myField',
-        } as unknown as FieldSpec,
-      } as unknown as OptionsListRequest,
-      {} as unknown as AbortSignal
-    )) as any;
-
-    expect(response.error.message).toBe('Simulated network error');
-  });
-});
diff --git a/src/plugins/controls/public/services/options_list/options_list_service.ts b/src/plugins/controls/public/services/options_list/options_list_service.ts
deleted file mode 100644
index 9ff370c22a12b..0000000000000
--- a/src/plugins/controls/public/services/options_list/options_list_service.ts
+++ /dev/null
@@ -1,160 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { memoize } from 'lodash';
-
-import dateMath from '@kbn/datemath';
-import { CoreStart } from '@kbn/core/public';
-import { getEsQueryConfig } from '@kbn/data-plugin/common';
-import { buildEsQuery, type TimeRange } from '@kbn/es-query';
-import { KibanaPluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-
-import {
-  OptionsListRequest,
-  OptionsListResponse,
-  OptionsListRequestBody,
-  OptionsListFailureResponse,
-} from '../../../common/options_list/types';
-import { ControlsHTTPService } from '../http/types';
-import { ControlsDataService } from '../data/types';
-import { ControlsPluginStartDeps } from '../../types';
-import { ControlsOptionsListService } from './types';
-
-class OptionsListService implements ControlsOptionsListService {
-  private core: CoreStart;
-  private data: ControlsDataService;
-  private http: ControlsHTTPService;
-
-  constructor(core: CoreStart, requiredServices: OptionsListServiceRequiredServices) {
-    this.core = core;
-    ({ data: this.data, http: this.http } = requiredServices);
-  }
-
-  private getRoundedTimeRange = (timeRange: TimeRange) => ({
-    from: dateMath.parse(timeRange.from)!.startOf('minute').toISOString(),
-    to: dateMath.parse(timeRange.to)!.endOf('minute').toISOString(),
-  });
-
-  private optionsListCacheResolver = (request: OptionsListRequest) => {
-    const {
-      size,
-      sort,
-      query,
-      filters,
-      timeRange,
-      searchString,
-      runPastTimeout,
-      selectedOptions,
-      searchTechnique,
-      field: { name: fieldName },
-      dataView: { title: dataViewTitle },
-    } = request;
-    return [
-      ...(timeRange ? JSON.stringify(this.getRoundedTimeRange(timeRange)) : []), // round timeRange to the minute to avoid cache misses
-      Math.floor(Date.now() / 1000 / 60), // Only cache results for a minute in case data changes in ES index
-      selectedOptions?.join(','),
-      JSON.stringify(filters),
-      JSON.stringify(query),
-      JSON.stringify(sort),
-      searchTechnique,
-      runPastTimeout,
-      dataViewTitle,
-      searchString,
-      fieldName,
-      size,
-    ].join('|');
-  };
-
-  private cachedOptionsListRequest = memoize(
-    async (request: OptionsListRequest, abortSignal: AbortSignal) => {
-      const index = request.dataView.title;
-      const requestBody = this.getRequestBody(request);
-      return await this.http.fetch<OptionsListResponse>(`/internal/controls/optionsList/${index}`, {
-        version: '1',
-        body: JSON.stringify(requestBody),
-        signal: abortSignal,
-        method: 'POST',
-      });
-    },
-    this.optionsListCacheResolver
-  );
-
-  private getRequestBody = (request: OptionsListRequest): OptionsListRequestBody => {
-    const timeService = this.data.query.timefilter.timefilter;
-    const { query, filters, dataView, timeRange, field, ...passThroughProps } = request;
-    const timeFilter = timeRange ? timeService.createFilter(dataView, timeRange) : undefined;
-    const filtersToUse = [...(filters ?? []), ...(timeFilter ? [timeFilter] : [])];
-    const config = getEsQueryConfig(this.core.uiSettings);
-    const esFilters = [buildEsQuery(dataView, query ?? [], filtersToUse ?? [], config)];
-
-    return {
-      ...passThroughProps,
-      filters: esFilters,
-      fieldName: field.name,
-      fieldSpec: field,
-      runtimeFieldMap: dataView.toSpec().runtimeFieldMap,
-    };
-  };
-
-  private cachedAllowExpensiveQueries = memoize(async () => {
-    const { allowExpensiveQueries } = await this.http.get<{
-      allowExpensiveQueries: boolean;
-    }>('/internal/controls/optionsList/getExpensiveQueriesSetting', {
-      version: '1',
-    });
-    return allowExpensiveQueries;
-  });
-
-  public getAllowExpensiveQueries = async (): Promise<boolean> => {
-    try {
-      return await this.cachedAllowExpensiveQueries();
-    } catch (error) {
-      return false;
-    }
-  };
-
-  public optionsListResponseWasFailure = (
-    response: OptionsListResponse
-  ): response is OptionsListFailureResponse => {
-    return (response as OptionsListFailureResponse).error !== undefined;
-  };
-
-  public runOptionsListRequest = async (request: OptionsListRequest, abortSignal: AbortSignal) => {
-    try {
-      return await this.cachedOptionsListRequest(request, abortSignal);
-    } catch (error: any) {
-      // Remove rejected results from memoize cache
-      this.cachedOptionsListRequest.cache.delete(this.optionsListCacheResolver(request));
-      if (error.name === 'AbortError') return { error: 'aborted' } as OptionsListFailureResponse;
-      return { error } as OptionsListFailureResponse;
-    }
-  };
-
-  public clearOptionsListCache = () => {
-    this.cachedOptionsListRequest.cache = new memoize.Cache();
-  };
-}
-
-export interface OptionsListServiceRequiredServices {
-  data: ControlsDataService;
-  http: ControlsHTTPService;
-}
-
-export type OptionsListServiceFactory = KibanaPluginServiceFactory<
-  ControlsOptionsListService,
-  ControlsPluginStartDeps,
-  OptionsListServiceRequiredServices
->;
-
-export const optionsListServiceFactory: OptionsListServiceFactory = (
-  startParams,
-  requiredServices
-) => {
-  return new OptionsListService(startParams.coreStart, requiredServices);
-};
diff --git a/src/plugins/controls/public/services/overlays/overlays.story.tsx b/src/plugins/controls/public/services/overlays/overlays.story.tsx
deleted file mode 100644
index ecb7b4479dec2..0000000000000
--- a/src/plugins/controls/public/services/overlays/overlays.story.tsx
+++ /dev/null
@@ -1,148 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiConfirmModal, EuiFlyout } from '@elastic/eui';
-import { render, unmountComponentAtNode } from 'react-dom';
-import { Subject } from 'rxjs';
-import React from 'react';
-import {
-  MountPoint,
-  OverlayFlyoutOpenOptions,
-  OverlayModalConfirmOptions,
-  OverlayRef,
-} from '@kbn/core/public';
-import { MountWrapper } from '@kbn/core-mount-utils-browser-internal';
-import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsOverlaysService } from './types';
-
-type OverlaysServiceFactory = PluginServiceFactory<ControlsOverlaysService>;
-
-/**
- * This code is a storybook stub version of src/core/public/overlays/overlay_service.ts
- * Eventually, core services should have simple storybook representations, but until that happens
- * it is necessary to recreate their functionality here.
- */
-class GenericOverlayRef implements OverlayRef {
-  public readonly onClose: Promise<void>;
-  private closeSubject = new Subject<void>();
-
-  constructor() {
-    this.onClose = this.closeSubject.toPromise();
-  }
-
-  public close(): Promise<void> {
-    if (!this.closeSubject.closed) {
-      this.closeSubject.next();
-      this.closeSubject.complete();
-    }
-    return this.onClose;
-  }
-}
-
-export const overlaysServiceFactory: OverlaysServiceFactory = () => {
-  const flyoutDomElement = document.createElement('div');
-  const modalDomElement = document.createElement('div');
-  let activeFlyout: OverlayRef | null;
-  let activeModal: OverlayRef | null;
-
-  const cleanupModal = () => {
-    if (modalDomElement != null) {
-      unmountComponentAtNode(modalDomElement);
-      modalDomElement.innerHTML = '';
-    }
-    activeModal = null;
-  };
-
-  const cleanupFlyout = () => {
-    if (flyoutDomElement != null) {
-      unmountComponentAtNode(flyoutDomElement);
-      flyoutDomElement.innerHTML = '';
-    }
-    activeFlyout = null;
-  };
-
-  return {
-    openFlyout: (mount: MountPoint, options?: OverlayFlyoutOpenOptions) => {
-      if (activeFlyout) {
-        activeFlyout.close();
-        cleanupFlyout();
-      }
-
-      const flyout = new GenericOverlayRef();
-
-      flyout.onClose.then(() => {
-        if (activeFlyout === flyout) {
-          cleanupFlyout();
-        }
-      });
-
-      activeFlyout = flyout;
-
-      const onCloseFlyout = () => {
-        if (options?.onClose) {
-          options?.onClose(flyout);
-          return;
-        }
-        flyout.close();
-      };
-
-      render(
-        <EuiFlyout onClose={onCloseFlyout}>
-          <MountWrapper mount={mount} className="kbnOverlayMountWrapper" />
-        </EuiFlyout>,
-        flyoutDomElement
-      );
-
-      return flyout;
-    },
-    openConfirm: (message: MountPoint | string, options?: OverlayModalConfirmOptions) => {
-      if (activeModal) {
-        activeModal.close();
-        cleanupModal();
-      }
-
-      return new Promise((resolve, reject) => {
-        let resolved = false;
-        const closeModal = (confirmed: boolean) => {
-          resolved = true;
-          modal.close();
-          resolve(confirmed);
-        };
-
-        const modal = new GenericOverlayRef();
-        modal.onClose.then(() => {
-          if (activeModal === modal) {
-            cleanupModal();
-          }
-          // modal.close can be called when opening a new modal/confirm, so we need to resolve the promise in that case.
-          if (!resolved) {
-            closeModal(false);
-          }
-        });
-        activeModal = modal;
-
-        const props = {
-          ...options,
-          children:
-            typeof message === 'string' ? (
-              message
-            ) : (
-              <MountWrapper mount={message} className="kbnOverlayMountWrapper" />
-            ),
-          onCancel: () => closeModal(false),
-          onConfirm: () => closeModal(true),
-          cancelButtonText: options?.cancelButtonText || '', // stub default cancel text
-          confirmButtonText: options?.confirmButtonText || '', // stub default confirm text
-        };
-
-        render(<EuiConfirmModal {...props} />, modalDomElement);
-      });
-    },
-  };
-};
diff --git a/src/plugins/controls/public/services/plugin_services.story.ts b/src/plugins/controls/public/services/plugin_services.story.ts
deleted file mode 100644
index 3bb93204b762e..0000000000000
--- a/src/plugins/controls/public/services/plugin_services.story.ts
+++ /dev/null
@@ -1,45 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import {
-  PluginServiceProvider,
-  PluginServiceProviders,
-  PluginServiceRegistry,
-  PluginServices,
-} from '@kbn/presentation-util-plugin/public';
-import { controlsServiceFactory } from './controls/controls.story';
-import { coreServiceFactory } from './core/core.story';
-import { dataServiceFactory } from './data/data.story';
-import { dataViewsServiceFactory } from './data_views/data_views.story';
-import { embeddableServiceFactory } from './embeddable/embeddable.story';
-import { httpServiceFactory } from './http/http.stub';
-import { optionsListServiceFactory } from './options_list/options_list.story';
-import { overlaysServiceFactory } from './overlays/overlays.story';
-import { settingsServiceFactory } from './settings/settings.story';
-import { storageServiceFactory } from './storage/storage_service.stub';
-import { ControlsServices } from './types';
-import { unifiedSearchServiceFactory } from './unified_search/unified_search.story';
-
-export const providers: PluginServiceProviders<ControlsServices> = {
-  dataViews: new PluginServiceProvider(dataViewsServiceFactory),
-  http: new PluginServiceProvider(httpServiceFactory),
-  data: new PluginServiceProvider(dataServiceFactory),
-  unifiedSearch: new PluginServiceProvider(unifiedSearchServiceFactory),
-  overlays: new PluginServiceProvider(overlaysServiceFactory),
-  settings: new PluginServiceProvider(settingsServiceFactory),
-  core: new PluginServiceProvider(coreServiceFactory),
-  embeddable: new PluginServiceProvider(embeddableServiceFactory),
-  storage: new PluginServiceProvider(storageServiceFactory),
-  controls: new PluginServiceProvider(controlsServiceFactory),
-  optionsList: new PluginServiceProvider(optionsListServiceFactory),
-};
-
-export const pluginServices = new PluginServices<ControlsServices>();
-
-export const registry = new PluginServiceRegistry<ControlsServices>(providers);
diff --git a/src/plugins/controls/public/services/plugin_services.stub.ts b/src/plugins/controls/public/services/plugin_services.stub.ts
index b462cc83dfc1d..1e7b3982f88cc 100644
--- a/src/plugins/controls/public/services/plugin_services.stub.ts
+++ b/src/plugins/controls/public/services/plugin_services.stub.ts
@@ -10,23 +10,22 @@
 import {
   PluginServiceProvider,
   PluginServiceProviders,
+  PluginServiceRegistry,
   PluginServices,
 } from '@kbn/presentation-util-plugin/public';
 
 import { ControlsPluginStart } from '../types';
 import { ControlsServices } from './types';
 
-import { controlsServiceFactory } from './controls/controls.story';
-import { coreServiceFactory } from './core/core.story';
-import { dataServiceFactory } from './data/data.story';
-import { dataViewsServiceFactory } from './data_views/data_views.story';
-import { embeddableServiceFactory } from './embeddable/embeddable.story';
+import { controlsServiceFactory } from './controls/controls.stub';
+import { coreServiceFactory } from './core/core.stub';
+import { dataServiceFactory } from './data/data.stub';
+import { dataViewsServiceFactory } from './data_views/data_views.stub';
+import { embeddableServiceFactory } from './embeddable/embeddable.stub';
 import { httpServiceFactory } from './http/http.stub';
-import { optionsListServiceFactory } from './options_list/options_list.story';
 import { overlaysServiceFactory } from './overlays/overlays.stub';
-import { registry as stubRegistry } from './plugin_services.story';
-import { settingsServiceFactory } from './settings/settings.story';
-import { unifiedSearchServiceFactory } from './unified_search/unified_search.story';
+import { settingsServiceFactory } from './settings/settings.stub';
+import { unifiedSearchServiceFactory } from './unified_search/unified_search.stub';
 import { storageServiceFactory } from './storage/storage_service.stub';
 
 export const providers: PluginServiceProviders<ControlsServices> = {
@@ -35,7 +34,6 @@ export const providers: PluginServiceProviders<ControlsServices> = {
   data: new PluginServiceProvider(dataServiceFactory),
   dataViews: new PluginServiceProvider(dataViewsServiceFactory),
   http: new PluginServiceProvider(httpServiceFactory),
-  optionsList: new PluginServiceProvider(optionsListServiceFactory),
   overlays: new PluginServiceProvider(overlaysServiceFactory),
   settings: new PluginServiceProvider(settingsServiceFactory),
   core: new PluginServiceProvider(coreServiceFactory),
@@ -45,10 +43,12 @@ export const providers: PluginServiceProviders<ControlsServices> = {
 
 export const pluginServices = new PluginServices<ControlsServices>();
 
+export const registry = new PluginServiceRegistry<ControlsServices>(providers);
+
 export const getStubPluginServices = (): ControlsPluginStart => {
-  pluginServices.setRegistry(stubRegistry.start({}));
+  pluginServices.setRegistry(registry.start({}));
   return {
     getControlFactory: pluginServices.getServices().controls.getControlFactory,
-    getControlTypes: pluginServices.getServices().controls.getControlTypes,
+    getAllControlTypes: pluginServices.getServices().controls.getAllControlTypes,
   };
 };
diff --git a/src/plugins/controls/public/services/plugin_services.ts b/src/plugins/controls/public/services/plugin_services.ts
index 5e4883e2472fa..d0d2552871173 100644
--- a/src/plugins/controls/public/services/plugin_services.ts
+++ b/src/plugins/controls/public/services/plugin_services.ts
@@ -23,7 +23,6 @@ import { dataServiceFactory } from './data/data_service';
 import { dataViewsServiceFactory } from './data_views/data_views_service';
 import { embeddableServiceFactory } from './embeddable/embeddable_service';
 import { httpServiceFactory } from './http/http_service';
-import { optionsListServiceFactory } from './options_list/options_list_service';
 import { overlaysServiceFactory } from './overlays/overlays_service';
 import { settingsServiceFactory } from './settings/settings_service';
 import { controlsStorageServiceFactory } from './storage/storage_service';
@@ -38,7 +37,6 @@ export const providers: PluginServiceProviders<
   dataViews: new PluginServiceProvider(dataViewsServiceFactory),
   embeddable: new PluginServiceProvider(embeddableServiceFactory),
   http: new PluginServiceProvider(httpServiceFactory),
-  optionsList: new PluginServiceProvider(optionsListServiceFactory, ['data', 'http']),
   overlays: new PluginServiceProvider(overlaysServiceFactory),
   settings: new PluginServiceProvider(settingsServiceFactory),
   storage: new PluginServiceProvider(controlsStorageServiceFactory),
diff --git a/src/plugins/controls/public/services/settings/settings.story.ts b/src/plugins/controls/public/services/settings/settings.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/settings/settings.story.ts
rename to src/plugins/controls/public/services/settings/settings.stub.ts
diff --git a/src/plugins/controls/public/services/types.ts b/src/plugins/controls/public/services/types.ts
index f65e06bd3095a..c38ad6b64fac6 100644
--- a/src/plugins/controls/public/services/types.ts
+++ b/src/plugins/controls/public/services/types.ts
@@ -13,7 +13,6 @@ import { ControlsDataService } from './data/types';
 import { ControlsDataViewsService } from './data_views/types';
 import { ControlsEmbeddableService } from './embeddable/types';
 import { ControlsHTTPService } from './http/types';
-import { ControlsOptionsListService } from './options_list/types';
 import { ControlsOverlaysService } from './overlays/types';
 import { ControlsSettingsService } from './settings/types';
 import { ControlsStorageService } from './storage/types';
@@ -32,6 +31,5 @@ export interface ControlsServices {
 
   // controls plugin's own services
   controls: ControlsServiceType;
-  optionsList: ControlsOptionsListService;
   storage: ControlsStorageService;
 }
diff --git a/src/plugins/controls/public/services/unified_search/unified_search.story.ts b/src/plugins/controls/public/services/unified_search/unified_search.stub.ts
similarity index 100%
rename from src/plugins/controls/public/services/unified_search/unified_search.story.ts
rename to src/plugins/controls/public/services/unified_search/unified_search.stub.ts
diff --git a/src/plugins/controls/public/time_slider/components/index.scss b/src/plugins/controls/public/time_slider/components/index.scss
deleted file mode 100644
index 794b27bddc059..0000000000000
--- a/src/plugins/controls/public/time_slider/components/index.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-
-.timeSlider__popoverOverride {
-  width: 100%;
-  max-inline-size: 100% !important;
-}
-
-.timeSlider-playToggle:enabled {
-  background-color: $euiColorPrimary !important;
-}
-
-.timeSlider__anchor {
-  width: 100%;
-  height: 100%;
-  box-shadow: none;
-  overflow: hidden;
-  @include euiFormControlSideBorderRadius($euiFormControlBorderRadius, $side: 'right', $internal: true);
-
-  .euiText {
-    background-color: transparent !important;
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:not(.euiFormControlLayoutDelimited__delimiter) {
-      cursor: pointer !important;
-    }
-  }
-
-  .timeSlider__anchorText {
-    font-weight: $euiFontWeightMedium;
-  }
-
-  .timeSlider__anchorText--default {
-    color: $euiColorMediumShade;
-  }
-
-  .timeSlider__anchorText--invalid {
-    text-decoration: line-through;
-    color: $euiColorMediumShade;
-  }
-}
\ No newline at end of file
diff --git a/src/plugins/controls/public/time_slider/components/index.ts b/src/plugins/controls/public/time_slider/components/index.ts
deleted file mode 100644
index 1d5ced90619f8..0000000000000
--- a/src/plugins/controls/public/time_slider/components/index.ts
+++ /dev/null
@@ -1,11 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { TimeSlider } from './time_slider';
-export { TimeSliderPrepend } from './time_slider_prepend';
diff --git a/src/plugins/controls/public/time_slider/components/time_slider.tsx b/src/plugins/controls/public/time_slider/components/time_slider.tsx
deleted file mode 100644
index b8a1664b7fdcd..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider.tsx
+++ /dev/null
@@ -1,77 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiInputPopover } from '@elastic/eui';
-import React, { FC } from 'react';
-
-import { TimeSlice } from '../../../common/types';
-import { useTimeSlider } from '../embeddable/time_slider_embeddable';
-import { getRoundedTimeRangeBounds } from '../time_slider_selectors';
-import { FROM_INDEX, TO_INDEX } from '../time_utils';
-import { TimeSliderPopoverButton } from './time_slider_popover_button';
-import { TimeSliderPopoverContent } from './time_slider_popover_content';
-
-import './index.scss';
-
-interface Props {
-  formatDate: (epoch: number) => string;
-  onChange: (value?: TimeSlice) => void;
-}
-
-export const TimeSlider: FC<Props> = (props: Props) => {
-  const timeSlider = useTimeSlider();
-
-  const stepSize = timeSlider.select((state) => {
-    return state.componentState.stepSize;
-  });
-  const ticks = timeSlider.select((state) => {
-    return state.componentState.ticks;
-  });
-  const timeRangeBounds = timeSlider.select(getRoundedTimeRangeBounds);
-  const timeRangeMin = timeRangeBounds[FROM_INDEX];
-  const timeRangeMax = timeRangeBounds[TO_INDEX];
-  const value = timeSlider.select((state) => {
-    return state.componentState.value;
-  });
-  const isOpen = timeSlider.select((state) => {
-    return state.componentState.isOpen;
-  });
-
-  const from = value ? value[FROM_INDEX] : timeRangeMin;
-  const to = value ? value[TO_INDEX] : timeRangeMax;
-
-  return (
-    <EuiInputPopover
-      className="timeSlider__popoverOverride"
-      panelClassName="timeSlider__panelOverride"
-      input={
-        <TimeSliderPopoverButton
-          onClick={() => {
-            timeSlider.dispatch.setIsOpen({ isOpen: !isOpen });
-          }}
-          formatDate={props.formatDate}
-          from={from}
-          to={to}
-        />
-      }
-      isOpen={isOpen}
-      closePopover={() => timeSlider.dispatch.setIsOpen({ isOpen: false })}
-      panelPaddingSize="s"
-    >
-      <TimeSliderPopoverContent
-        value={[from, to]}
-        onChange={props.onChange}
-        stepSize={stepSize}
-        ticks={ticks}
-        timeRangeMin={timeRangeMin}
-        timeRangeMax={timeRangeMax}
-      />
-    </EuiInputPopover>
-  );
-};
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_anchored_range.tsx b/src/plugins/controls/public/time_slider/components/time_slider_anchored_range.tsx
deleted file mode 100644
index 7870bfc8eb394..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_anchored_range.tsx
+++ /dev/null
@@ -1,45 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiRange, EuiRangeTick } from '@elastic/eui';
-import { _SingleRangeChangeEvent } from '@elastic/eui/src/components/form/range/types';
-import { TimeSlice } from '../../../common/types';
-
-interface Props {
-  value: TimeSlice;
-  onChange: (value?: TimeSlice) => void;
-  stepSize: number;
-  ticks: EuiRangeTick[];
-  timeRangeMin: number;
-  timeRangeMax: number;
-}
-
-export function TimeSliderAnchoredRange(props: Props) {
-  function onChange(e: _SingleRangeChangeEvent) {
-    const from = parseInt(e.currentTarget.value, 10);
-    if (!isNaN(from)) {
-      props.onChange([props.timeRangeMin, from]);
-    }
-  }
-
-  return (
-    <EuiRange
-      fullWidth={true}
-      value={props.value[1]}
-      onChange={onChange}
-      showRange
-      showTicks={true}
-      min={props.timeRangeMin}
-      max={props.timeRangeMax}
-      step={props.stepSize}
-      ticks={props.ticks}
-    />
-  );
-}
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_popover_button.tsx b/src/plugins/controls/public/time_slider/components/time_slider_popover_button.tsx
deleted file mode 100644
index dda8cf0994d35..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_popover_button.tsx
+++ /dev/null
@@ -1,35 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiText } from '@elastic/eui';
-
-interface Props {
-  onClick: () => void;
-  formatDate: (epoch: number) => string;
-  from: number;
-  to: number;
-}
-
-export function TimeSliderPopoverButton(props: Props) {
-  return (
-    <button
-      className="timeSlider__anchor eui-textTruncate"
-      color="text"
-      onClick={props.onClick}
-      data-test-subj="timeSlider-popoverToggleButton"
-    >
-      <EuiText className="timeSlider__anchorText eui-textTruncate" size="s">
-        <span>{props.formatDate(props.from)}</span>
-        &nbsp;&nbsp;→&nbsp;&nbsp;
-        <span>{props.formatDate(props.to)}</span>
-      </EuiText>
-    </button>
-  );
-}
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx b/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx
deleted file mode 100644
index e9c5680e31e85..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx
+++ /dev/null
@@ -1,94 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiButtonIcon, EuiRangeTick, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
-
-import { getIsAnchored } from '../time_slider_selectors';
-import { TimeSliderStrings } from './time_slider_strings';
-import { useTimeSlider } from '../embeddable/time_slider_embeddable';
-import { TimeSliderAnchoredRange } from './time_slider_anchored_range';
-import { TimeSliderSlidingWindowRange } from './time_slider_sliding_window_range';
-import { TimeSlice } from '../../../common/types';
-
-interface Props {
-  value: TimeSlice;
-  onChange: (value?: TimeSlice) => void;
-  stepSize: number;
-  ticks: EuiRangeTick[];
-  timeRangeMin: number;
-  timeRangeMax: number;
-}
-
-export function TimeSliderPopoverContent(props: Props) {
-  const ticks =
-    props.ticks.length <= 12
-      ? props.ticks
-      : props.ticks.map((tick, index) => {
-          return {
-            value: tick.value,
-            // to avoid label overlap, only display even tick labels
-            // Passing empty string as tick label results in tick not rendering, so must wrap empty label in react element
-            // Can not store react node in redux state because its not serializable so have to transform into react node here
-            label: index % 2 === 0 ? tick.label : <span>&nbsp;</span>,
-          };
-        });
-
-  const timeSlider = useTimeSlider();
-  const isAnchored = timeSlider.select(getIsAnchored);
-  const rangeInput = isAnchored ? (
-    <TimeSliderAnchoredRange
-      value={props.value}
-      onChange={props.onChange}
-      stepSize={props.stepSize}
-      ticks={ticks}
-      timeRangeMin={props.timeRangeMin}
-      timeRangeMax={props.timeRangeMax}
-    />
-  ) : (
-    <TimeSliderSlidingWindowRange
-      value={props.value}
-      onChange={props.onChange}
-      stepSize={props.stepSize}
-      ticks={ticks}
-      timeRangeMin={props.timeRangeMin}
-      timeRangeMax={props.timeRangeMax}
-    />
-  );
-  const anchorStartToggleButtonLabel = isAnchored
-    ? TimeSliderStrings.control.getUnpinStart()
-    : TimeSliderStrings.control.getPinStart();
-
-  return (
-    <EuiFlexGroup
-      className="rangeSlider__actions"
-      gutterSize="none"
-      data-test-subj="timeSlider-popoverContents"
-      responsive={false}
-    >
-      <EuiFlexItem grow={false}>
-        <EuiToolTip content={anchorStartToggleButtonLabel}>
-          <EuiButtonIcon
-            iconType={isAnchored ? 'pinFilled' : 'pin'}
-            onClick={() => {
-              const nextIsAnchored = !isAnchored;
-              if (nextIsAnchored) {
-                props.onChange([props.timeRangeMin, props.value[1]]);
-              }
-              timeSlider.dispatch.setIsAnchored({ isAnchored: nextIsAnchored });
-            }}
-            aria-label={anchorStartToggleButtonLabel}
-            data-test-subj="timeSlider__anchorStartToggleButton"
-          />
-        </EuiToolTip>
-      </EuiFlexItem>
-      <EuiFlexItem>{rangeInput}</EuiFlexItem>
-    </EuiFlexGroup>
-  );
-}
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx b/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
deleted file mode 100644
index f139010536d27..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_prepend.tsx
+++ /dev/null
@@ -1,128 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { ViewMode } from '@kbn/embeddable-plugin/common';
-import React, { FC, useCallback, useMemo, useState } from 'react';
-import { Observable, Subscription } from 'rxjs';
-import { first } from 'rxjs';
-import { useControlGroupContainer } from '../../control_group/embeddable/control_group_container';
-import { useTimeSlider } from '../embeddable/time_slider_embeddable';
-import { TimeSliderStrings } from './time_slider_strings';
-
-interface Props {
-  onNext: () => void;
-  onPrevious: () => void;
-  waitForControlOutputConsumersToLoad$?: Observable<void>;
-}
-
-export const TimeSliderPrepend: FC<Props> = (props: Props) => {
-  const timeSlider = useTimeSlider();
-  const controlGroup = useControlGroupContainer();
-
-  const showApplySelectionsButton = controlGroup.select(
-    (state) => state.explicitInput.showApplySelections
-  );
-  const viewMode = controlGroup.select((state) => state.explicitInput.viewMode);
-
-  const [isPaused, setIsPaused] = useState(true);
-  const [timeoutId, setTimeoutId] = useState<number | undefined>(undefined);
-  const [subscription, setSubscription] = useState<Subscription | undefined>(undefined);
-
-  const playNextFrame = useCallback(() => {
-    // advance to next frame
-    props.onNext();
-
-    if (props.waitForControlOutputConsumersToLoad$) {
-      const nextFrameSubscription = props.waitForControlOutputConsumersToLoad$
-        .pipe(first())
-        .subscribe(() => {
-          // use timeout to display frame for small time period before moving to next frame
-          const nextTimeoutId = window.setTimeout(() => {
-            playNextFrame();
-          }, 1750);
-          setTimeoutId(nextTimeoutId);
-        });
-      setSubscription(nextFrameSubscription);
-    }
-  }, [props]);
-
-  const onPlay = useCallback(() => {
-    timeSlider.dispatch.setIsOpen({ isOpen: true });
-    setIsPaused(false);
-    playNextFrame();
-  }, [timeSlider.dispatch, playNextFrame]);
-
-  const onPause = useCallback(() => {
-    timeSlider.dispatch.setIsOpen({ isOpen: true });
-    setIsPaused(true);
-    if (subscription) {
-      subscription.unsubscribe();
-      setSubscription(undefined);
-    }
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      setTimeoutId(undefined);
-    }
-  }, [timeSlider.dispatch, subscription, timeoutId]);
-
-  const PlayButton = useMemo(() => {
-    const Button = (
-      <EuiButtonIcon
-        className="timeSlider-playToggle"
-        onClick={isPaused ? onPlay : onPause}
-        disabled={showApplySelectionsButton}
-        iconType={isPaused ? 'playFilled' : 'pause'}
-        size="s"
-        display="fill"
-        aria-label={TimeSliderStrings.control.getPlayButtonAriaLabel(isPaused)}
-      />
-    );
-    return (
-      <>
-        {showApplySelectionsButton ? (
-          <EuiToolTip content={TimeSliderStrings.control.getPlayButtonDisabledTooltip()}>
-            {Button}
-          </EuiToolTip>
-        ) : (
-          Button
-        )}
-      </>
-    );
-  }, [isPaused, onPlay, onPause, showApplySelectionsButton]);
-
-  return (
-    <div>
-      <EuiButtonIcon
-        onClick={() => {
-          onPause();
-          props.onPrevious();
-        }}
-        iconType="framePrevious"
-        color="text"
-        aria-label={TimeSliderStrings.control.getPreviousButtonAriaLabel()}
-        data-test-subj="timeSlider-previousTimeWindow"
-      />
-      {props.waitForControlOutputConsumersToLoad$ === undefined ||
-      (showApplySelectionsButton && viewMode === ViewMode.VIEW)
-        ? null
-        : PlayButton}
-      <EuiButtonIcon
-        onClick={() => {
-          onPause();
-          props.onNext();
-        }}
-        iconType="frameNext"
-        color="text"
-        aria-label={TimeSliderStrings.control.getNextButtonAriaLabel()}
-        data-test-subj="timeSlider-nextTimeWindow"
-      />
-    </div>
-  );
-};
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_sliding_window_range.tsx b/src/plugins/controls/public/time_slider/components/time_slider_sliding_window_range.tsx
deleted file mode 100644
index 9b60af321c072..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_sliding_window_range.tsx
+++ /dev/null
@@ -1,41 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { EuiDualRange, EuiRangeTick } from '@elastic/eui';
-import { TimeSlice } from '../../../common/types';
-
-interface Props {
-  value: TimeSlice;
-  onChange: (value?: TimeSlice) => void;
-  stepSize: number;
-  ticks: EuiRangeTick[];
-  timeRangeMin: number;
-  timeRangeMax: number;
-}
-
-export function TimeSliderSlidingWindowRange(props: Props) {
-  function onChange(value?: [number | string, number | string]) {
-    props.onChange(value as TimeSlice);
-  }
-
-  return (
-    <EuiDualRange
-      fullWidth={true}
-      value={props.value}
-      onChange={onChange}
-      showTicks={true}
-      min={props.timeRangeMin}
-      max={props.timeRangeMax}
-      step={props.stepSize}
-      ticks={props.ticks}
-      isDraggable
-    />
-  );
-}
diff --git a/src/plugins/controls/public/time_slider/components/time_slider_strings.ts b/src/plugins/controls/public/time_slider/components/time_slider_strings.ts
deleted file mode 100644
index 43bc433292321..0000000000000
--- a/src/plugins/controls/public/time_slider/components/time_slider_strings.ts
+++ /dev/null
@@ -1,43 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-
-export const TimeSliderStrings = {
-  control: {
-    getPinStart: () =>
-      i18n.translate('controls.timeSlider.settings.pinStart', {
-        defaultMessage: 'Pin start',
-      }),
-    getUnpinStart: () =>
-      i18n.translate('controls.timeSlider.settings.unpinStart', {
-        defaultMessage: 'Unpin start',
-      }),
-    getPlayButtonAriaLabel: (isPaused: boolean) =>
-      isPaused
-        ? i18n.translate('controls.timeSlider.playLabel', {
-            defaultMessage: 'Play',
-          })
-        : i18n.translate('controls.timeSlider.pauseLabel', {
-            defaultMessage: 'Pause',
-          }),
-    getPreviousButtonAriaLabel: () =>
-      i18n.translate('controls.timeSlider.previousLabel', {
-        defaultMessage: 'Previous time window',
-      }),
-    getNextButtonAriaLabel: () =>
-      i18n.translate('controls.timeSlider.nextLabel', {
-        defaultMessage: 'Next time window',
-      }),
-    getPlayButtonDisabledTooltip: () =>
-      i18n.translate('controls.timeSlider.playButtonTooltip.disabled', {
-        defaultMessage: '"Apply selections automatically" is disabled in Control Settings.',
-      }),
-  },
-};
diff --git a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx b/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
deleted file mode 100644
index 1abe8db920197..0000000000000
--- a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable.tsx
+++ /dev/null
@@ -1,423 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import _ from 'lodash';
-import moment from 'moment-timezone';
-import React, { createContext, useContext } from 'react';
-import ReactDOM from 'react-dom';
-import { debounceTime, first, map, Subscription } from 'rxjs';
-
-import { Embeddable, IContainer } from '@kbn/embeddable-plugin/public';
-import type { TimeRange } from '@kbn/es-query';
-import { i18n } from '@kbn/i18n';
-import { ReduxEmbeddableTools, ReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
-
-import { TIME_SLIDER_CONTROL } from '../..';
-import { TimeSliderControlEmbeddableInput } from '../../../common/time_slider/types';
-import { TimeSlice } from '../../../common/types';
-import { ControlGroupContainer } from '../../control_group/embeddable/control_group_container';
-import { ControlTimesliceOutput } from '../../control_group/types';
-import { pluginServices } from '../../services';
-import { ControlsDataService } from '../../services/data/types';
-import { ControlsSettingsService } from '../../services/settings/types';
-import { CanClearSelections, ControlOutput } from '../../types';
-import { TimeSlider, TimeSliderPrepend } from '../components';
-import { timeSliderReducers } from '../time_slider_reducers';
-import { getIsAnchored, getRoundedTimeRangeBounds } from '../time_slider_selectors';
-import {
-  FROM_INDEX,
-  getMomentTimezone,
-  getStepSize,
-  getTicks,
-  roundDownToNextStepSizeFactor,
-  roundUpToNextStepSizeFactor,
-  TO_INDEX,
-} from '../time_utils';
-import { TimeSliderReduxState } from '../types';
-
-export const TimeSliderControlContext = createContext<TimeSliderControlEmbeddable | null>(null);
-export const useTimeSlider = (): TimeSliderControlEmbeddable => {
-  const timeSlider = useContext<TimeSliderControlEmbeddable | null>(TimeSliderControlContext);
-  if (timeSlider == null) {
-    throw new Error('useTimeSlider must be used inside TimeSliderControlContext.');
-  }
-  return timeSlider!;
-};
-
-type TimeSliderReduxEmbeddableTools = ReduxEmbeddableTools<
-  TimeSliderReduxState,
-  typeof timeSliderReducers
->;
-
-export class TimeSliderControlEmbeddable
-  extends Embeddable<TimeSliderControlEmbeddableInput, ControlOutput>
-  implements CanClearSelections
-{
-  public readonly type = TIME_SLIDER_CONTROL;
-  public deferEmbeddedLoad = true;
-
-  private inputSubscription: Subscription;
-  private node?: HTMLElement;
-
-  // state management
-  public select: TimeSliderReduxEmbeddableTools['select'];
-  public getState: TimeSliderReduxEmbeddableTools['getState'];
-  public dispatch: TimeSliderReduxEmbeddableTools['dispatch'];
-  public onStateChange: TimeSliderReduxEmbeddableTools['onStateChange'];
-
-  private cleanupStateTools: () => void;
-
-  private getTimezone: ControlsSettingsService['getTimezone'];
-  private timefilter: ControlsDataService['timefilter'];
-  private prevTimeRange: TimeRange | undefined;
-  private prevTimesliceAsPercentage: {
-    timesliceStartAsPercentageOfTimeRange?: number;
-    timesliceEndAsPercentageOfTimeRange?: number;
-  };
-  private readonly waitForControlOutputConsumersToLoad$;
-
-  constructor(
-    reduxToolsPackage: ReduxToolsPackage,
-    input: TimeSliderControlEmbeddableInput,
-    output: ControlOutput,
-    parent?: IContainer
-  ) {
-    super(input, output, parent);
-
-    const {
-      data: { timefilter },
-      settings: { getDefaultTimeRange, getTimezone },
-    } = pluginServices.getServices();
-
-    this.getTimezone = getTimezone;
-    this.timefilter = timefilter;
-
-    const timeRangeBounds = this.timeRangeToBounds(
-      input.timeRange ? input.timeRange : getDefaultTimeRange()
-    );
-    const ticks = getTicks(
-      timeRangeBounds[FROM_INDEX],
-      timeRangeBounds[TO_INDEX],
-      this.getTimezone()
-    );
-    const reduxEmbeddableTools = reduxToolsPackage.createReduxEmbeddableTools<
-      TimeSliderReduxState,
-      typeof timeSliderReducers
-    >({
-      embeddable: this,
-      reducers: timeSliderReducers,
-      initialComponentState: {
-        isOpen: false,
-        ...getStepSize(ticks),
-        ticks,
-        timeRangeBounds,
-      },
-    });
-
-    this.select = reduxEmbeddableTools.select;
-    this.getState = reduxEmbeddableTools.getState;
-    this.dispatch = reduxEmbeddableTools.dispatch;
-    this.onStateChange = reduxEmbeddableTools.onStateChange;
-    this.cleanupStateTools = reduxEmbeddableTools.cleanup;
-
-    this.inputSubscription = this.getInput$().subscribe(() => this.onInputChange());
-
-    this.waitForControlOutputConsumersToLoad$ =
-      parent && 'anyControlOutputConsumerLoading$' in (parent as ControlGroupContainer)
-        ? (parent as ControlGroupContainer).anyControlOutputConsumerLoading$.pipe(
-            debounceTime(300),
-            first((isAnyControlOutputConsumerLoading: boolean) => {
-              return !isAnyControlOutputConsumerLoading;
-            }),
-            map(() => {
-              // Observable notifies subscriber when loading is finished
-              // Return void to not expose internal implemenation details of observabale
-              return;
-            })
-          )
-        : undefined;
-
-    this.prevTimesliceAsPercentage = {
-      timesliceStartAsPercentageOfTimeRange: this.getInput().timesliceStartAsPercentageOfTimeRange,
-      timesliceEndAsPercentageOfTimeRange: this.getInput().timesliceEndAsPercentageOfTimeRange,
-    };
-    this.syncWithTimeRange();
-  }
-
-  public destroy = () => {
-    super.destroy();
-    this.cleanupStateTools();
-    if (this.inputSubscription) {
-      this.inputSubscription.unsubscribe();
-    }
-  };
-
-  public selectionsToFilters = async (
-    input: Partial<TimeSliderControlEmbeddableInput>
-  ): Promise<ControlTimesliceOutput> => {
-    const { timesliceStartAsPercentageOfTimeRange, timesliceEndAsPercentageOfTimeRange } = input;
-    if (
-      timesliceStartAsPercentageOfTimeRange === undefined ||
-      timesliceEndAsPercentageOfTimeRange === undefined
-    ) {
-      return { timeslice: undefined };
-    }
-
-    const {
-      componentState: { stepSize, timeRangeBounds },
-    } = this.getState();
-
-    const timeRange = timeRangeBounds[TO_INDEX] - timeRangeBounds[FROM_INDEX];
-    const from = timeRangeBounds[FROM_INDEX] + timesliceStartAsPercentageOfTimeRange * timeRange;
-    const to = timeRangeBounds[FROM_INDEX] + timesliceEndAsPercentageOfTimeRange * timeRange;
-    const value = [
-      roundDownToNextStepSizeFactor(from, stepSize),
-      roundUpToNextStepSizeFactor(to, stepSize),
-    ] as TimeSlice;
-
-    return { timeslice: value };
-  };
-
-  private onInputChange() {
-    const input = this.getInput();
-    const { timesliceStartAsPercentageOfTimeRange, timesliceEndAsPercentageOfTimeRange } =
-      this.prevTimesliceAsPercentage ?? {};
-    if (
-      timesliceStartAsPercentageOfTimeRange !== input.timesliceStartAsPercentageOfTimeRange ||
-      timesliceEndAsPercentageOfTimeRange !== input.timesliceEndAsPercentageOfTimeRange
-    ) {
-      // Discarding edit mode changes results in replacing edited input with original input
-      // Re-sync with time range when edited input timeslice changes are discarded
-      if (
-        !input.timesliceStartAsPercentageOfTimeRange &&
-        !input.timesliceEndAsPercentageOfTimeRange
-      ) {
-        // If no selections have been saved into the timeslider, then both `timesliceStartAsPercentageOfTimeRange`
-        // and `timesliceEndAsPercentageOfTimeRange` will be undefined - so, need to reset component state to match
-        this.dispatch.publishValue({ value: undefined });
-        this.dispatch.setValue({ value: undefined });
-      } else {
-        // Otherwise, need to call `syncWithTimeRange` so that the component state value can be calculated and set
-        this.syncWithTimeRange();
-      }
-    } else if (input.timeRange && !_.isEqual(input.timeRange, this.prevTimeRange)) {
-      const nextBounds = this.timeRangeToBounds(input.timeRange);
-      const ticks = getTicks(nextBounds[FROM_INDEX], nextBounds[TO_INDEX], this.getTimezone());
-      this.dispatch.setTimeRangeBounds({
-        ...getStepSize(ticks),
-        ticks,
-        timeRangeBounds: nextBounds,
-      });
-      this.syncWithTimeRange();
-    }
-  }
-
-  private syncWithTimeRange() {
-    this.prevTimeRange = this.getInput().timeRange;
-    const { explicitInput: currentInput } = this.getState();
-    const { timesliceStartAsPercentageOfTimeRange, timesliceEndAsPercentageOfTimeRange } =
-      currentInput;
-    if (
-      timesliceStartAsPercentageOfTimeRange !== undefined &&
-      timesliceEndAsPercentageOfTimeRange !== undefined
-    ) {
-      this.selectionsToFilters(currentInput).then(({ timeslice }) => {
-        this.dispatch.publishValue({ value: timeslice });
-        this.dispatch.setValue({ value: timeslice });
-        if (timeslice) this.onRangeChange(timeslice[TO_INDEX] - timeslice[FROM_INDEX]);
-      });
-    }
-  }
-
-  private timeRangeToBounds(timeRange: TimeRange): [number, number] {
-    const timeRangeBounds = this.timefilter.calculateBounds(timeRange);
-    return timeRangeBounds.min === undefined || timeRangeBounds.max === undefined
-      ? [Date.now() - 1000 * 60 * 15, Date.now()]
-      : [timeRangeBounds.min.valueOf(), timeRangeBounds.max.valueOf()];
-  }
-
-  public reload() {
-    return;
-  }
-
-  private debouncedPublishChange = _.debounce((value?: TimeSlice) => {
-    this.dispatch.publishValue({ value });
-  }, 500);
-
-  private getTimeSliceAsPercentageOfTimeRange(value?: TimeSlice) {
-    let timesliceStartAsPercentageOfTimeRange: number | undefined;
-    let timesliceEndAsPercentageOfTimeRange: number | undefined;
-    if (value) {
-      const timeRangeBounds = this.getState().componentState.timeRangeBounds;
-      const timeRange = timeRangeBounds[TO_INDEX] - timeRangeBounds[FROM_INDEX];
-      timesliceStartAsPercentageOfTimeRange =
-        (value[FROM_INDEX] - timeRangeBounds[FROM_INDEX]) / timeRange;
-      timesliceEndAsPercentageOfTimeRange =
-        (value[TO_INDEX] - timeRangeBounds[FROM_INDEX]) / timeRange;
-    }
-    this.prevTimesliceAsPercentage = {
-      timesliceStartAsPercentageOfTimeRange,
-      timesliceEndAsPercentageOfTimeRange,
-    };
-    return { timesliceStartAsPercentageOfTimeRange, timesliceEndAsPercentageOfTimeRange };
-  }
-
-  private onTimesliceChange = (value?: TimeSlice) => {
-    const { timesliceStartAsPercentageOfTimeRange, timesliceEndAsPercentageOfTimeRange } =
-      this.getTimeSliceAsPercentageOfTimeRange(value);
-
-    this.dispatch.setValueAsPercentageOfTimeRange({
-      timesliceStartAsPercentageOfTimeRange,
-      timesliceEndAsPercentageOfTimeRange,
-    });
-    this.dispatch.setValue({ value });
-    this.debouncedPublishChange(value);
-  };
-
-  private onRangeChange = (range?: number) => {
-    const timeRangeBounds = this.getState().componentState.timeRangeBounds;
-    const timeRange = timeRangeBounds[TO_INDEX] - timeRangeBounds[FROM_INDEX];
-    this.dispatch.setRange({
-      range: range !== undefined && range < timeRange ? range : undefined,
-    });
-  };
-
-  private onNext = () => {
-    const { value, range, ticks } = this.getState().componentState;
-    const isAnchored = getIsAnchored(this.getState());
-    const tickRange = ticks[1].value - ticks[0].value;
-    const timeRangeBounds = getRoundedTimeRangeBounds(this.getState());
-
-    if (isAnchored) {
-      if (value === undefined || value[TO_INDEX] >= timeRangeBounds[TO_INDEX]) {
-        this.onTimesliceChange([timeRangeBounds[FROM_INDEX], ticks[0].value]);
-        return;
-      }
-
-      const nextTick = ticks.find((tick) => {
-        return tick.value > value[TO_INDEX];
-      });
-      this.onTimesliceChange([
-        timeRangeBounds[FROM_INDEX],
-        nextTick ? nextTick.value : timeRangeBounds[TO_INDEX],
-      ]);
-      return;
-    }
-
-    if (value === undefined || value[TO_INDEX] >= timeRangeBounds[TO_INDEX]) {
-      const from = timeRangeBounds[FROM_INDEX];
-      if (range === undefined || range === tickRange) {
-        const firstTickValue = ticks[0].value;
-        const secondTickValue = ticks[1].value;
-        const to = firstTickValue === from ? secondTickValue : firstTickValue;
-        this.onTimesliceChange([from, to]);
-        this.onRangeChange(tickRange);
-      } else {
-        const to = from + range;
-        this.onTimesliceChange([from, Math.min(to, timeRangeBounds[TO_INDEX])]);
-      }
-      return;
-    }
-
-    const from = value[TO_INDEX];
-    const safeRange = range === undefined ? tickRange : range;
-    const to = from + safeRange;
-    this.onTimesliceChange([from, Math.min(to, timeRangeBounds[TO_INDEX])]);
-  };
-
-  private onPrevious = () => {
-    const { value, range, ticks } = this.getState().componentState;
-    const isAnchored = getIsAnchored(this.getState());
-    const tickRange = ticks[1].value - ticks[0].value;
-    const timeRangeBounds = getRoundedTimeRangeBounds(this.getState());
-
-    if (isAnchored) {
-      const prevTick = value
-        ? [...ticks].reverse().find((tick) => {
-            return tick.value < value[TO_INDEX];
-          })
-        : ticks[ticks.length - 1];
-      this.onTimesliceChange([
-        timeRangeBounds[FROM_INDEX],
-        prevTick ? prevTick.value : timeRangeBounds[TO_INDEX],
-      ]);
-      return;
-    }
-
-    if (value === undefined || value[FROM_INDEX] <= timeRangeBounds[FROM_INDEX]) {
-      const to = timeRangeBounds[TO_INDEX];
-      if (range === undefined || range === tickRange) {
-        const lastTickValue = ticks[ticks.length - 1].value;
-        const secondToLastTickValue = ticks[ticks.length - 2].value;
-        const from = lastTickValue === to ? secondToLastTickValue : lastTickValue;
-        this.onTimesliceChange([from, to]);
-        this.onRangeChange(tickRange);
-      } else {
-        const from = to - range;
-        this.onTimesliceChange([Math.max(from, timeRangeBounds[FROM_INDEX]), to]);
-      }
-      return;
-    }
-
-    const to = value[FROM_INDEX];
-    const safeRange = range === undefined ? tickRange : range;
-    const from = to - safeRange;
-    this.onTimesliceChange([Math.max(from, timeRangeBounds[FROM_INDEX]), to]);
-  };
-
-  private formatDate = (epoch: number) => {
-    return moment
-      .tz(epoch, getMomentTimezone(this.getTimezone()))
-      .locale(i18n.getLocale())
-      .format(this.getState().componentState.format);
-  };
-
-  public clearSelections() {
-    this.onTimesliceChange();
-  }
-
-  public render = (node: HTMLElement) => {
-    if (this.node) {
-      ReactDOM.unmountComponentAtNode(this.node);
-    }
-    this.node = node;
-    ReactDOM.render(
-      <KibanaRenderContextProvider {...pluginServices.getServices().core}>
-        <TimeSliderControlContext.Provider value={this}>
-          <TimeSlider
-            formatDate={this.formatDate}
-            onChange={(value?: TimeSlice) => {
-              this.onTimesliceChange(value);
-              const range = value ? value[TO_INDEX] - value[FROM_INDEX] : undefined;
-              this.onRangeChange(range);
-            }}
-          />
-        </TimeSliderControlContext.Provider>
-      </KibanaRenderContextProvider>,
-      node
-    );
-  };
-
-  public renderPrepend() {
-    return (
-      <TimeSliderControlContext.Provider value={this}>
-        <TimeSliderPrepend
-          onNext={this.onNext}
-          onPrevious={this.onPrevious}
-          waitForControlOutputConsumersToLoad$={this.waitForControlOutputConsumersToLoad$}
-        />
-      </TimeSliderControlContext.Provider>
-    );
-  }
-
-  public isChained() {
-    return false;
-  }
-}
diff --git a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable_factory.tsx b/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable_factory.tsx
deleted file mode 100644
index a593a67b3a5de..0000000000000
--- a/src/plugins/controls/public/time_slider/embeddable/time_slider_embeddable_factory.tsx
+++ /dev/null
@@ -1,53 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { i18n } from '@kbn/i18n';
-import { EmbeddableFactoryDefinition, IContainer } from '@kbn/embeddable-plugin/public';
-import { lazyLoadReduxToolsPackage } from '@kbn/presentation-util-plugin/public';
-import {
-  createTimeSliderExtract,
-  createTimeSliderInject,
-} from '../../../common/time_slider/time_slider_persistable_state';
-import { TIME_SLIDER_CONTROL } from '../..';
-import { ControlInput, IEditableControlFactory } from '../../types';
-
-export class TimeSliderEmbeddableFactory
-  implements EmbeddableFactoryDefinition, IEditableControlFactory<ControlInput>
-{
-  public type = TIME_SLIDER_CONTROL;
-
-  constructor() {}
-
-  public async create(initialInput: any, parent?: IContainer) {
-    const reduxEmbeddablePackage = await lazyLoadReduxToolsPackage();
-    const { TimeSliderControlEmbeddable } = await import('./time_slider_embeddable');
-
-    return Promise.resolve(
-      new TimeSliderControlEmbeddable(reduxEmbeddablePackage, initialInput, {}, parent)
-    );
-  }
-
-  public isFieldCompatible = () => false;
-
-  public isEditable = () => Promise.resolve(false);
-  public canCreateNew = () => false;
-
-  public getDisplayName = () =>
-    i18n.translate('controls.timeSlider.displayName', {
-      defaultMessage: 'Time slider',
-    });
-  public getIconType = () => 'clock';
-  public getDescription = () =>
-    i18n.translate('controls.timeSlider.description', {
-      defaultMessage: 'Add a slider for selecting a time range',
-    });
-
-  public inject = createTimeSliderInject();
-  public extract = createTimeSliderExtract();
-}
diff --git a/src/plugins/controls/public/time_slider/index.ts b/src/plugins/controls/public/time_slider/index.ts
deleted file mode 100644
index a2c92841d1fdd..0000000000000
--- a/src/plugins/controls/public/time_slider/index.ts
+++ /dev/null
@@ -1,12 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-export { TimeSliderEmbeddableFactory } from './embeddable/time_slider_embeddable_factory';
-export type { TimeSliderControlEmbeddableInput } from '../../common/time_slider/types';
-export { TIME_SLIDER_CONTROL } from '../../common/time_slider/types';
diff --git a/src/plugins/controls/public/time_slider/time_slider_reducers.ts b/src/plugins/controls/public/time_slider/time_slider_reducers.ts
deleted file mode 100644
index 38e98afc25b85..0000000000000
--- a/src/plugins/controls/public/time_slider/time_slider_reducers.ts
+++ /dev/null
@@ -1,76 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { EuiRangeTick } from '@elastic/eui';
-import { PayloadAction } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/types/types-external';
-
-import { TimeSlice } from '../../common/types';
-import { TimeSliderReduxState } from './types';
-
-export const timeSliderReducers = {
-  publishValue: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{ value?: TimeSlice }>
-  ) => {
-    state.output.timeslice = action.payload.value;
-  },
-  setTimeRangeBounds: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{
-      format: string;
-      stepSize: number;
-      timeRangeBounds: [number, number];
-      ticks: EuiRangeTick[];
-    }>
-  ) => {
-    state.componentState.format = action.payload.format;
-    state.componentState.stepSize = action.payload.stepSize;
-    state.componentState.ticks = action.payload.ticks;
-    state.componentState.timeRangeBounds = action.payload.timeRangeBounds;
-  },
-  setValueAsPercentageOfTimeRange: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{
-      timesliceStartAsPercentageOfTimeRange?: number;
-      timesliceEndAsPercentageOfTimeRange?: number;
-    }>
-  ) => {
-    state.explicitInput.timesliceStartAsPercentageOfTimeRange =
-      action.payload.timesliceStartAsPercentageOfTimeRange;
-    state.explicitInput.timesliceEndAsPercentageOfTimeRange =
-      action.payload.timesliceEndAsPercentageOfTimeRange;
-  },
-  setValue: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{
-      value?: TimeSlice;
-    }>
-  ) => {
-    state.componentState.value = action.payload.value;
-  },
-  setRange: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{ range?: number }>
-  ) => {
-    state.componentState.range = action.payload.range;
-  },
-  setIsAnchored: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{ isAnchored: boolean }>
-  ) => {
-    state.explicitInput.isAnchored = action.payload.isAnchored;
-  },
-  setIsOpen: (
-    state: WritableDraft<TimeSliderReduxState>,
-    action: PayloadAction<{ isOpen: boolean }>
-  ) => {
-    state.componentState.isOpen = action.payload.isOpen;
-  },
-};
diff --git a/src/plugins/controls/public/time_slider/time_slider_selectors.ts b/src/plugins/controls/public/time_slider/time_slider_selectors.ts
deleted file mode 100644
index 2da171e624928..0000000000000
--- a/src/plugins/controls/public/time_slider/time_slider_selectors.ts
+++ /dev/null
@@ -1,31 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import type { TimeSliderReduxState } from './types';
-import {
-  FROM_INDEX,
-  TO_INDEX,
-  roundDownToNextStepSizeFactor,
-  roundUpToNextStepSizeFactor,
-} from './time_utils';
-
-export function getRoundedTimeRangeBounds(state: TimeSliderReduxState): [number, number] {
-  const stepSize = state.componentState.stepSize;
-  const timeRangeBounds = state.componentState.timeRangeBounds;
-  return [
-    roundDownToNextStepSizeFactor(timeRangeBounds[FROM_INDEX], stepSize),
-    roundUpToNextStepSizeFactor(timeRangeBounds[TO_INDEX], stepSize),
-  ];
-}
-
-export function getIsAnchored(state: TimeSliderReduxState): boolean {
-  return typeof state.explicitInput.isAnchored === 'boolean'
-    ? state.explicitInput.isAnchored
-    : false;
-}
diff --git a/src/plugins/controls/public/time_slider/time_utils.ts b/src/plugins/controls/public/time_slider/time_utils.ts
deleted file mode 100644
index 38f68b4877710..0000000000000
--- a/src/plugins/controls/public/time_slider/time_utils.ts
+++ /dev/null
@@ -1,152 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import moment from 'moment-timezone';
-import { EuiRangeTick } from '@elastic/eui';
-import { calcAutoIntervalNear } from '@kbn/data-plugin/common';
-
-const MAX_TICKS = 20; // eui range has hard limit of 20 ticks and throws when exceeded
-
-export const FROM_INDEX = 0;
-export const TO_INDEX = 1;
-
-export function getMomentTimezone(dateFormatTZ: string) {
-  const detectedTimezone = moment.tz.guess();
-  return dateFormatTZ === undefined || dateFormatTZ === 'Browser' ? detectedTimezone : dateFormatTZ;
-}
-
-function getScaledDateFormat(interval: number): string {
-  if (interval >= moment.duration(1, 'y').asMilliseconds()) {
-    return 'YYYY';
-  }
-
-  if (interval >= moment.duration(30, 'd').asMilliseconds()) {
-    return 'MMM YYYY';
-  }
-
-  if (interval >= moment.duration(1, 'd').asMilliseconds()) {
-    return 'MMM D';
-  }
-
-  if (interval >= moment.duration(6, 'h').asMilliseconds()) {
-    return 'Do HH';
-  }
-
-  if (interval >= moment.duration(1, 'h').asMilliseconds()) {
-    return 'HH:mm';
-  }
-
-  if (interval >= moment.duration(1, 'm').asMilliseconds()) {
-    return 'HH:mm';
-  }
-
-  if (interval >= moment.duration(1, 's').asMilliseconds()) {
-    return 'mm:ss';
-  }
-
-  return 'ss.SSS';
-}
-
-export function getInterval(min: number, max: number, steps = MAX_TICKS): number {
-  const duration = max - min;
-  let interval = calcAutoIntervalNear(MAX_TICKS, duration).asMilliseconds();
-  // Sometimes auto interval is not quite right and returns 2X, 3X, 1/2X, or 1/3X  requested ticks
-  const actualSteps = duration / interval;
-  if (actualSteps > MAX_TICKS) {
-    // EuiRange throws if ticks exceeds MAX_TICKS
-    // Adjust the interval to ensure MAX_TICKS is never exceeded
-    const factor = Math.ceil(actualSteps / MAX_TICKS);
-    interval = interval * factor;
-  } else if (actualSteps < MAX_TICKS / 2) {
-    // Increase number of ticks when ticks is less then half MAX_TICKS
-    interval = interval / 2;
-  }
-  return interval;
-}
-
-export function getTicks(min: number, max: number, timezone: string): EuiRangeTick[] {
-  const interval = getInterval(min, max);
-  const format = getScaledDateFormat(interval);
-
-  let tick = Math.ceil(min / interval) * interval;
-  const ticks: EuiRangeTick[] = [];
-  while (tick <= max) {
-    ticks.push({
-      value: tick,
-      label: moment.tz(tick, getMomentTimezone(timezone)).format(format),
-    });
-    tick += interval;
-  }
-
-  return ticks;
-}
-
-export function getStepSize(ticks: EuiRangeTick[]): {
-  stepSize: number;
-  format: string;
-} {
-  if (ticks.length < 2) {
-    return {
-      stepSize: 1,
-      format: 'MMM D, YYYY @ HH:mm:ss.SSS',
-    };
-  }
-
-  const tickRange = ticks[1].value - ticks[0].value;
-
-  if (tickRange >= moment.duration(2, 'y').asMilliseconds()) {
-    return {
-      stepSize: moment.duration(1, 'y').asMilliseconds(),
-      format: 'YYYY',
-    };
-  }
-
-  if (tickRange >= moment.duration(2, 'd').asMilliseconds()) {
-    return {
-      stepSize: moment.duration(1, 'd').asMilliseconds(),
-      format: 'MMM D, YYYY',
-    };
-  }
-
-  if (tickRange >= moment.duration(2, 'h').asMilliseconds()) {
-    return {
-      stepSize: moment.duration(1, 'h').asMilliseconds(),
-      format: 'MMM D, YYYY @ HH:mm',
-    };
-  }
-
-  if (tickRange >= moment.duration(2, 'm').asMilliseconds()) {
-    return {
-      stepSize: moment.duration(1, 'm').asMilliseconds(),
-      format: 'MMM D, YYYY @ HH:mm',
-    };
-  }
-
-  if (tickRange >= moment.duration(2, 's').asMilliseconds()) {
-    return {
-      stepSize: moment.duration(1, 's').asMilliseconds(),
-      format: 'MMM D, YYYY @ HH:mm:ss',
-    };
-  }
-
-  return {
-    stepSize: 1,
-    format: 'MMM D, YYYY @ HH:mm:ss.SSS',
-  };
-}
-
-export function roundDownToNextStepSizeFactor(value: number, stepSize: number) {
-  const remainder = value % stepSize;
-  return remainder === 0 ? value : value - remainder;
-}
-
-export function roundUpToNextStepSizeFactor(value: number, stepSize: number) {
-  const remainder = value % stepSize;
-  return remainder === 0 ? value : value + (stepSize - remainder);
-}
diff --git a/src/plugins/controls/public/time_slider/types.ts b/src/plugins/controls/public/time_slider/types.ts
deleted file mode 100644
index 2ae12115f831f..0000000000000
--- a/src/plugins/controls/public/time_slider/types.ts
+++ /dev/null
@@ -1,35 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-import { EuiRangeTick } from '@elastic/eui';
-
-import { ControlOutput } from '../types';
-import { TimeSliderControlEmbeddableInput } from '../../common/time_slider/types';
-import { TimeSlice } from '../../common/types';
-
-export * from '../../common/time_slider/types';
-
-// Component state is only used by public components.
-export interface TimeSliderSubjectState {
-  format: string;
-  range?: number;
-  isOpen: boolean;
-  stepSize: number;
-  ticks: EuiRangeTick[];
-  timeRangeBounds: [number, number];
-  value?: TimeSlice;
-}
-
-// public only - redux embeddable state type
-export type TimeSliderReduxState = ReduxEmbeddableState<
-  TimeSliderControlEmbeddableInput,
-  ControlOutput,
-  TimeSliderSubjectState
->;
diff --git a/src/plugins/controls/public/types.ts b/src/plugins/controls/public/types.ts
index 8022f9f8b0501..2ecbd38763603 100644
--- a/src/plugins/controls/public/types.ts
+++ b/src/plugins/controls/public/types.ts
@@ -7,47 +7,14 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ReactNode } from 'react';
-
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { DataViewField, DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
-import {
-  EmbeddableFactory,
-  EmbeddableOutput,
-  EmbeddableSetup,
-  EmbeddableStart,
-  IEmbeddable,
-} from '@kbn/embeddable-plugin/public';
+import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
+import { EmbeddableSetup, EmbeddableStart } from '@kbn/embeddable-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
 import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public';
 
-import { ControlInput, ControlWidth, DataControlInput } from '../common/types';
-import { ControlGroupFilterOutput } from './control_group/types';
 import { ControlsServiceType } from './services/controls/types';
 
-export type CommonControlOutput = ControlGroupFilterOutput & {
-  dataViewId?: string;
-};
-
-export type ControlOutput = EmbeddableOutput & CommonControlOutput;
-
-export type ControlFactory<T extends ControlInput = ControlInput> = EmbeddableFactory<
-  ControlInput,
-  ControlOutput,
-  ControlEmbeddable
->;
-
-export interface ControlEmbeddable<
-  TControlEmbeddableInput extends ControlInput = ControlInput,
-  TControlEmbeddableOutput extends ControlOutput = ControlOutput
-> extends IEmbeddable<TControlEmbeddableInput, TControlEmbeddableOutput> {
-  isChained?: () => boolean;
-  renderPrepend?: () => ReactNode | undefined;
-  selectionsToFilters?: (
-    input: Partial<TControlEmbeddableInput>
-  ) => Promise<ControlGroupFilterOutput>;
-}
-
 export interface CanClearSelections {
   clearSelections: () => void;
 }
@@ -56,51 +23,16 @@ export const isClearableControl = (control: unknown): control is CanClearSelecti
   return typeof (control as CanClearSelections).clearSelections === 'function';
 };
 
-/**
- * Control embeddable editor types
- */
-export interface IEditableControlFactory<T extends ControlInput = ControlInput>
-  extends Pick<EmbeddableFactory, 'type'> {
-  controlEditorOptionsComponent?: (props: ControlEditorProps<T>) => JSX.Element;
-  presaveTransformFunction?: (
-    newState: Partial<T>,
-    embeddable?: ControlEmbeddable<T>
-  ) => Partial<T>;
-  isFieldCompatible?: (field: DataViewField) => boolean;
-}
-
-export interface ControlEditorProps<T extends ControlInput = ControlInput> {
-  initialInput?: Partial<T>;
-  fieldType: string;
-  onChange: (partial: Partial<T>) => void;
-  setControlEditorValid: (isValid: boolean) => void;
-}
-
-export interface DataControlField {
-  field: DataViewField;
-  compatibleControlTypes: string[];
-}
-
-export interface DataControlFieldRegistry {
-  [fieldName: string]: DataControlField;
-}
-
-export interface DataControlEditorChanges {
-  input: Partial<DataControlInput>;
-  width?: ControlWidth;
-  grow?: boolean;
-}
-
 /**
  * Plugin types
  */
 export interface ControlsPluginSetup {
-  registerControlType: ControlsServiceType['registerControlType'];
+  registerControlFactory: ControlsServiceType['registerControlFactory'];
 }
 
 export interface ControlsPluginStart {
   getControlFactory: ControlsServiceType['getControlFactory'];
-  getControlTypes: ControlsServiceType['getControlTypes'];
+  getAllControlTypes: ControlsServiceType['getAllControlTypes'];
 }
 
 export interface ControlsPluginSetupDeps {
@@ -113,6 +45,3 @@ export interface ControlsPluginStartDeps {
   dataViews: DataViewsPublicPluginStart;
   unifiedSearch: UnifiedSearchPublicPluginStart;
 }
-
-// re-export from common
-export type { ControlInput, ControlStyle, ControlWidth, DataControlInput } from '../common/types';
diff --git a/src/plugins/controls/server/control_group/control_group_container_factory.ts b/src/plugins/controls/server/control_group/control_group_container_factory.ts
index fdef1bfd6cc07..fb86a5d2d4f19 100644
--- a/src/plugins/controls/server/control_group/control_group_container_factory.ts
+++ b/src/plugins/controls/server/control_group/control_group_container_factory.ts
@@ -14,7 +14,7 @@ import {
   createControlGroupExtract,
   createControlGroupInject,
   migrations,
-} from '../../common/control_group/control_group_persistable_state';
+} from './control_group_persistable_state';
 import { controlGroupTelemetry } from './control_group_telemetry';
 
 export const controlGroupContainerPersistableStateServiceFactory = (
diff --git a/src/plugins/controls/server/control_group/control_group_migrations.test.ts b/src/plugins/controls/server/control_group/control_group_migrations.test.ts
new file mode 100644
index 0000000000000..69b19225218e3
--- /dev/null
+++ b/src/plugins/controls/server/control_group/control_group_migrations.test.ts
@@ -0,0 +1,134 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import {
+  OPTIONS_LIST_CONTROL,
+  RANGE_SLIDER_CONTROL,
+  type ControlPanelState,
+  type ControlWidth,
+  type DefaultDataControlState,
+  type SerializedControlState,
+} from '../../common';
+import { OptionsListControlState } from '../../common/options_list';
+import { mockDataControlState, mockOptionsListControlState } from '../mocks';
+import { removeHideExcludeAndHideExists } from './control_group_migrations';
+import {
+  SerializableControlGroupState,
+  getDefaultControlGroupState,
+} from './control_group_persistence';
+
+describe('migrate control group', () => {
+  const getOptionsListControl = (
+    order: number,
+    input?: Partial<OptionsListControlState & { id: string }>
+  ) => {
+    return {
+      type: OPTIONS_LIST_CONTROL,
+      order,
+      width: 'small' as ControlWidth,
+      grow: true,
+      explicitInput: { ...mockOptionsListControlState, ...input },
+    } as ControlPanelState<SerializedControlState<OptionsListControlState>>;
+  };
+
+  const getRangeSliderControl = (
+    order: number,
+    input?: Partial<DefaultDataControlState & { id: string }>
+  ) => {
+    return {
+      type: RANGE_SLIDER_CONTROL,
+      order,
+      width: 'medium' as ControlWidth,
+      grow: false,
+      explicitInput: { ...mockDataControlState, ...input },
+    } as ControlPanelState<SerializedControlState<DefaultDataControlState>>;
+  };
+
+  const getControlGroupState = (
+    panels: Array<ControlPanelState<SerializedControlState>>
+  ): SerializableControlGroupState => {
+    const panelsObjects = panels.reduce((acc, panel) => {
+      return { ...acc, [panel.explicitInput.id]: panel };
+    }, {});
+
+    return {
+      ...getDefaultControlGroupState(),
+      panels: panelsObjects,
+    };
+  };
+
+  describe('remove hideExclude and hideExists', () => {
+    test('should migrate single options list control', () => {
+      const migratedControlGroupState: SerializableControlGroupState =
+        removeHideExcludeAndHideExists(
+          getControlGroupState([getOptionsListControl(0, { id: 'testPanelId', hideExclude: true })])
+        );
+      expect(migratedControlGroupState.panels).toEqual({
+        testPanelId: getOptionsListControl(0, { id: 'testPanelId' }),
+      });
+    });
+
+    test('should migrate multiple options list controls', () => {
+      const migratedControlGroupInput: SerializableControlGroupState =
+        removeHideExcludeAndHideExists(
+          getControlGroupState([
+            getOptionsListControl(0, { id: 'testPanelId1' }),
+            getOptionsListControl(1, { id: 'testPanelId2', hideExclude: false }),
+            getOptionsListControl(2, { id: 'testPanelId3', hideExists: true }),
+            getOptionsListControl(3, {
+              id: 'testPanelId4',
+              hideExclude: true,
+              hideExists: false,
+            }),
+            getOptionsListControl(4, {
+              id: 'testPanelId5',
+              hideExists: true,
+              hideExclude: false,
+              singleSelect: true,
+              runPastTimeout: true,
+              selectedOptions: ['test'],
+            }),
+          ])
+        );
+      expect(migratedControlGroupInput.panels).toEqual({
+        testPanelId1: getOptionsListControl(0, { id: 'testPanelId1' }),
+        testPanelId2: getOptionsListControl(1, { id: 'testPanelId2' }),
+        testPanelId3: getOptionsListControl(2, { id: 'testPanelId3' }),
+        testPanelId4: getOptionsListControl(3, {
+          id: 'testPanelId4',
+        }),
+        testPanelId5: getOptionsListControl(4, {
+          id: 'testPanelId5',
+          singleSelect: true,
+          runPastTimeout: true,
+          selectedOptions: ['test'],
+        }),
+      });
+    });
+
+    test('should migrate multiple different types of controls', () => {
+      const migratedControlGroupInput: SerializableControlGroupState =
+        removeHideExcludeAndHideExists(
+          getControlGroupState([
+            getOptionsListControl(0, {
+              id: 'testPanelId1',
+              hideExists: true,
+              hideExclude: true,
+              runPastTimeout: true,
+            }),
+            getRangeSliderControl(1, { id: 'testPanelId2' }),
+          ])
+        );
+      expect(migratedControlGroupInput.panels).toEqual({
+        testPanelId1: getOptionsListControl(0, { id: 'testPanelId1', runPastTimeout: true }),
+        testPanelId2: getRangeSliderControl(1, { id: 'testPanelId2' }),
+      });
+    });
+  });
+});
diff --git a/src/plugins/controls/server/control_group/control_group_migrations.ts b/src/plugins/controls/server/control_group/control_group_migrations.ts
new file mode 100644
index 0000000000000..a3d3d06aadafc
--- /dev/null
+++ b/src/plugins/controls/server/control_group/control_group_migrations.ts
@@ -0,0 +1,67 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { SerializableRecord } from '@kbn/utility-types';
+import {
+  OPTIONS_LIST_CONTROL,
+  type ControlPanelsState,
+  type SerializedControlState,
+} from '../../common';
+import { OptionsListControlState } from '../../common/options_list';
+import { SerializableControlGroupState } from './control_group_persistence';
+
+export const makeControlOrdersZeroBased = (state: SerializableControlGroupState) => {
+  if (
+    state.panels &&
+    typeof state.panels === 'object' &&
+    Object.keys(state.panels).length > 0 &&
+    !Object.values(state.panels).find((panel) => (panel?.order ?? 0) === 0)
+  ) {
+    // 0th element could not be found. Reorder all panels from 0;
+    const newPanels = Object.entries(state.panels)
+      .sort(([, a], [, b]) => (a.order > b.order ? 1 : -1))
+      .map(([id, panel], index) => {
+        panel.order = index;
+        return { id, panel };
+      })
+      .reduce((acc, { id, panel: currentPanel }) => {
+        acc[id] = currentPanel;
+        return acc;
+      }, {} as SerializableRecord & ControlPanelsState<SerializedControlState>);
+    state.panels = newPanels;
+  }
+  return state;
+};
+
+/**
+ * The UX for the "Allow include/exclude" and "Allow exists query" toggles was removed in 8.7.0 so, to
+ * prevent users from getting stuck when migrating from 8.6.0 (when the toggles were introduced) to 8.7.0
+ * we must set both the `hideExclude` and `hideExists` keys to `undefined` for all existing options
+ * list controls.
+ */
+export const removeHideExcludeAndHideExists = (state: SerializableControlGroupState) => {
+  if (state.panels && typeof state.panels === 'object' && Object.keys(state.panels).length > 0) {
+    const newPanels = Object.keys(state.panels).reduce((panelAccumulator, panelId) => {
+      const panel = (
+        state.panels as ControlPanelsState<SerializedControlState<OptionsListControlState>>
+      )[panelId];
+      if (panel.type === OPTIONS_LIST_CONTROL) {
+        const explicitInput = panel.explicitInput;
+        delete explicitInput.hideExclude;
+        delete explicitInput.hideExists;
+      }
+      return {
+        ...panelAccumulator,
+        [panelId]: panel,
+      };
+    }, {});
+    state.panels = newPanels;
+  }
+  return state;
+};
diff --git a/src/plugins/controls/common/control_group/control_group_persistable_state.ts b/src/plugins/controls/server/control_group/control_group_persistable_state.ts
similarity index 75%
rename from src/plugins/controls/common/control_group/control_group_persistable_state.ts
rename to src/plugins/controls/server/control_group/control_group_persistable_state.ts
index 9574ddb3f9d44..d59ffb2161934 100644
--- a/src/plugins/controls/common/control_group/control_group_persistable_state.ts
+++ b/src/plugins/controls/server/control_group/control_group_persistable_state.ts
@@ -7,34 +7,37 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { SavedObjectReference } from '@kbn/core/types';
 import {
   EmbeddableInput,
   EmbeddablePersistableStateService,
   EmbeddableStateWithType,
 } from '@kbn/embeddable-plugin/common/types';
-import { SavedObjectReference } from '@kbn/core/types';
 import { MigrateFunctionsObject } from '@kbn/kibana-utils-plugin/common';
-import { ControlGroupInput, ControlPanelState } from './types';
+
+import type { ControlPanelsState, SerializedControlState } from '../../common';
 import {
   makeControlOrdersZeroBased,
   removeHideExcludeAndHideExists,
 } from './control_group_migrations';
+import type { SerializableControlGroupState } from './control_group_persistence';
 
-type ControlGroupInputWithType = Partial<ControlGroupInput> & { type: string };
-
-const getPanelStatePrefix = (state: ControlPanelState) => `${state.explicitInput.id}:`;
+const getPanelStatePrefix = (state: SerializedControlState) => `${state.explicitInput.id}:`;
 
 export const createControlGroupInject = (
   persistableStateService: EmbeddablePersistableStateService
 ): EmbeddablePersistableStateService['inject'] => {
   return (state: EmbeddableStateWithType, references: SavedObjectReference[]) => {
-    const workingState = { ...state } as EmbeddableStateWithType | ControlGroupInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType | SerializableControlGroupState;
 
+    let workingPanels: ControlPanelsState<SerializedControlState> = {};
     if ('panels' in workingState) {
-      workingState.panels = { ...workingState.panels };
+      workingPanels = { ...workingState.panels };
 
-      for (const [key, panel] of Object.entries(workingState.panels)) {
-        workingState.panels[key] = { ...panel };
+      for (const [key, panel] of Object.entries(workingPanels)) {
+        workingPanels[key] = {
+          ...panel,
+        };
         // Find the references for this panel
         const prefix = getPanelStatePrefix(panel);
 
@@ -45,13 +48,13 @@ export const createControlGroupInject = (
         const panelReferences = filteredReferences.length === 0 ? references : filteredReferences;
 
         const { type, ...injectedState } = persistableStateService.inject(
-          { ...workingState.panels[key].explicitInput, type: workingState.panels[key].type },
+          { ...workingPanels[key].explicitInput, type: workingPanels[key].type },
           panelReferences
         );
-        workingState.panels[key].explicitInput = injectedState as EmbeddableInput;
+        workingPanels[key].explicitInput = injectedState as EmbeddableInput;
       }
     }
-    return workingState as EmbeddableStateWithType;
+    return { ...workingState, panels: workingPanels } as unknown as EmbeddableStateWithType;
   };
 };
 
@@ -59,7 +62,7 @@ export const createControlGroupExtract = (
   persistableStateService: EmbeddablePersistableStateService
 ): EmbeddablePersistableStateService['extract'] => {
   return (state: EmbeddableStateWithType) => {
-    const workingState = { ...state } as EmbeddableStateWithType | ControlGroupInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType | SerializableControlGroupState;
     const references: SavedObjectReference[] = [];
 
     if ('panels' in workingState) {
@@ -83,7 +86,8 @@ export const createControlGroupExtract = (
         references.push(...mappedReferences);
 
         const { type, ...restOfState } = panelState;
-        workingState.panels[key].explicitInput = restOfState as EmbeddableInput;
+        (workingState.panels as ControlPanelsState<SerializedControlState>)[key].explicitInput =
+          restOfState as EmbeddableInput;
       }
     }
     return { state: workingState as EmbeddableStateWithType, references };
@@ -92,12 +96,12 @@ export const createControlGroupExtract = (
 
 export const migrations: MigrateFunctionsObject = {
   '8.2.0': (state) => {
-    const controlInput = state as unknown as ControlGroupInput;
+    const controlInput = state as unknown as SerializableControlGroupState;
     // for hierarchical chaining it is required that all control orders start at 0.
     return makeControlOrdersZeroBased(controlInput);
   },
   '8.7.0': (state) => {
-    const controlInput = state as unknown as ControlGroupInput;
+    const controlInput = state as unknown as SerializableControlGroupState;
     // need to set `hideExclude` and `hideExists` to `undefined` for all options list controls.
     return removeHideExcludeAndHideExists(controlInput);
   },
diff --git a/src/plugins/controls/server/control_group/control_group_persistence.ts b/src/plugins/controls/server/control_group/control_group_persistence.ts
new file mode 100644
index 0000000000000..eb63b28ccecba
--- /dev/null
+++ b/src/plugins/controls/server/control_group/control_group_persistence.ts
@@ -0,0 +1,75 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { SerializableRecord } from '@kbn/utility-types';
+
+import {
+  DEFAULT_CONTROL_STYLE,
+  type ControlGroupRuntimeState,
+  type ControlGroupSerializedState,
+  type ControlPanelState,
+  type SerializedControlState,
+} from '../../common';
+
+export const getDefaultControlGroupState = (): SerializableControlGroupState => ({
+  panels: {},
+  labelPosition: DEFAULT_CONTROL_STYLE,
+  chainingSystem: 'HIERARCHICAL',
+  autoApplySelections: true,
+  ignoreParentSettings: {
+    ignoreFilters: false,
+    ignoreQuery: false,
+    ignoreTimerange: false,
+    ignoreValidations: false,
+  },
+});
+
+// using SerializableRecord to force type to be read as serializable
+export type SerializableControlGroupState = SerializableRecord &
+  Omit<
+    ControlGroupRuntimeState,
+    'initialChildControlState' | 'ignoreParentSettings' | 'editorConfig' // editor config is not persisted
+  > & {
+    ignoreParentSettings: Record<string, boolean>;
+    panels: Record<string, ControlPanelState<SerializedControlState>> | {};
+  };
+
+const safeJSONParse = <OutType>(jsonString?: string): OutType | undefined => {
+  if (!jsonString && typeof jsonString !== 'string') return;
+  try {
+    return JSON.parse(jsonString) as OutType;
+  } catch {
+    return;
+  }
+};
+
+export const controlGroupSerializedStateToSerializableRuntimeState = (
+  serializedState: ControlGroupSerializedState
+): SerializableControlGroupState => {
+  const defaultControlGroupInput = getDefaultControlGroupState();
+  return {
+    chainingSystem: serializedState?.chainingSystem,
+    labelPosition: serializedState?.controlStyle ?? defaultControlGroupInput.labelPosition,
+    autoApplySelections: !serializedState?.showApplySelections,
+    ignoreParentSettings: safeJSONParse(serializedState?.ignoreParentSettingsJSON) ?? {},
+    panels: safeJSONParse(serializedState?.panelsJSON) ?? {},
+  };
+};
+
+export const serializableRuntimeStateToControlGroupSerializedState = (
+  serializable: SerializableRecord // It is safe to treat this as SerializableControlGroupState
+): ControlGroupSerializedState => {
+  return {
+    controlStyle: serializable.labelPosition as SerializableControlGroupState['labelPosition'],
+    chainingSystem: serializable.chainingSystem as SerializableControlGroupState['chainingSystem'],
+    showApplySelections: !Boolean(serializable.autoApplySelections),
+    ignoreParentSettingsJSON: JSON.stringify(serializable.ignoreParentSettings),
+    panelsJSON: JSON.stringify(serializable.panels),
+  };
+};
diff --git a/src/plugins/controls/server/control_group/control_group_telemetry.test.ts b/src/plugins/controls/server/control_group/control_group_telemetry.test.ts
index e04ef2973120e..da2800a7d744f 100644
--- a/src/plugins/controls/server/control_group/control_group_telemetry.test.ts
+++ b/src/plugins/controls/server/control_group/control_group_telemetry.test.ts
@@ -7,13 +7,19 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ControlGroupTelemetry, RawControlGroupAttributes } from '../../common';
-import { controlGroupTelemetry, initializeControlGroupTelemetry } from './control_group_telemetry';
+import { SerializableRecord } from '@kbn/utility-types';
+import { type ControlGroupSerializedState } from '../../common';
+import {
+  type ControlGroupTelemetry,
+  controlGroupTelemetry,
+  initializeControlGroupTelemetry,
+} from './control_group_telemetry';
 
 // controls attributes with all settings ignored + 3 options lists + hierarchical chaining + label above
-const rawControlAttributes1: RawControlGroupAttributes = {
+const rawControlAttributes1: SerializableRecord & ControlGroupSerializedState = {
   controlStyle: 'twoLine',
   chainingSystem: 'NONE',
+  showApplySelections: true,
   panelsJSON:
     '{"6fc71ac6-62f9-4ff4-bf5a-d1e066065376":{"order":0,"width":"auto","type":"optionsListControl","explicitInput":{"title":"Carrier","fieldName":"Carrier","id":"6fc71ac6-62f9-4ff4-bf5a-d1e066065376","enhancements":{}}},"1ca90451-908b-4eae-ac4d-535f2e30c4ad":{"order":2,"width":"auto","type":"optionsListControl","explicitInput":{"title":"DestAirportID","fieldName":"DestAirportID","id":"1ca90451-908b-4eae-ac4d-535f2e30c4ad","enhancements":{}}},"71086bac-316d-415f-8aa8-b9a921bc7f58":{"order":1,"width":"auto","type":"optionsListControl","explicitInput":{"title":"DestRegion","fieldName":"DestRegion","id":"71086bac-316d-415f-8aa8-b9a921bc7f58","enhancements":{}}}}',
   ignoreParentSettingsJSON:
@@ -21,9 +27,10 @@ const rawControlAttributes1: RawControlGroupAttributes = {
 };
 
 // controls attributes with some settings ignored + 2 range sliders, 1 time slider + No chaining  + label inline
-const rawControlAttributes2: RawControlGroupAttributes = {
+const rawControlAttributes2: SerializableRecord & ControlGroupSerializedState = {
   controlStyle: 'oneLine',
   chainingSystem: 'NONE',
+  showApplySelections: false,
   panelsJSON:
     '{"9cf90205-e94d-43c9-a3aa-45f359a7522f":{"order":0,"width":"auto","type":"rangeSliderControl","explicitInput":{"title":"DistanceKilometers","fieldName":"DistanceKilometers","id":"9cf90205-e94d-43c9-a3aa-45f359a7522f","enhancements":{}}},"f6b076c6-9ef5-483e-b08d-d313d60d4b8c":{"order":2,"width":"auto","type":"rangeSliderControl","explicitInput":{"title":"DistanceMiles","fieldName":"DistanceMiles","id":"f6b076c6-9ef5-483e-b08d-d313d60d4b8c","enhancements":{}}}}',
   ignoreParentSettingsJSON:
@@ -31,9 +38,10 @@ const rawControlAttributes2: RawControlGroupAttributes = {
 };
 
 // controls attributes with no settings ignored + 2 options lists, 1 range slider, 1 time slider + hierarchical chaining + label inline
-const rawControlAttributes3: RawControlGroupAttributes = {
+const rawControlAttributes3: SerializableRecord & ControlGroupSerializedState = {
   controlStyle: 'oneLine',
   chainingSystem: 'HIERARCHICAL',
+  showApplySelections: false,
   panelsJSON:
     '{"9cf90205-e94d-43c9-a3aa-45f359a7522f":{"order":0,"width":"auto","type":"rangeSliderControl","explicitInput":{"title":"DistanceKilometers","fieldName":"DistanceKilometers","id":"9cf90205-e94d-43c9-a3aa-45f359a7522f","enhancements":{}}},"ee325e9e-6ec1-41f9-953f-423d59850d44":{"order":2,"width":"auto","type":"optionsListControl","explicitInput":{"title":"Carrier","fieldName":"Carrier","id":"ee325e9e-6ec1-41f9-953f-423d59850d44","enhancements":{}}},"cb0f5fcd-9ad9-4d4a-b489-b75bd060399b":{"order":3,"width":"auto","type":"optionsListControl","explicitInput":{"title":"DestCityName","fieldName":"DestCityName","id":"cb0f5fcd-9ad9-4d4a-b489-b75bd060399b","enhancements":{}}}}',
   ignoreParentSettingsJSON:
diff --git a/src/plugins/controls/server/control_group/control_group_telemetry.ts b/src/plugins/controls/server/control_group/control_group_telemetry.ts
index 1410a28bb9bf4..21d1baf40116c 100644
--- a/src/plugins/controls/server/control_group/control_group_telemetry.ts
+++ b/src/plugins/controls/server/control_group/control_group_telemetry.ts
@@ -7,14 +7,33 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { set } from '@kbn/safer-lodash-set';
 import { PersistableStateService } from '@kbn/kibana-utils-plugin/common';
+import { set } from '@kbn/safer-lodash-set';
+import type { ControlGroupSerializedState } from '../../common';
 import {
-  ControlGroupTelemetry,
-  RawControlGroupAttributes,
-  rawControlGroupAttributesToControlGroupInput,
-} from '../../common';
-import { ControlGroupInput } from '../../common/control_group/types';
+  type SerializableControlGroupState,
+  controlGroupSerializedStateToSerializableRuntimeState,
+  getDefaultControlGroupState,
+} from './control_group_persistence';
+
+export interface ControlGroupTelemetry {
+  total: number;
+  chaining_system: {
+    [key: string]: number;
+  };
+  label_position: {
+    [key: string]: number;
+  };
+  ignore_settings: {
+    [key: string]: number;
+  };
+  by_type: {
+    [key: string]: {
+      total: number;
+      details: { [key: string]: number };
+    };
+  };
+}
 
 export const initializeControlGroupTelemetry = (
   statsSoFar: Record<string, unknown>
@@ -32,7 +51,7 @@ export const initializeControlGroupTelemetry = (
 
 const reportChainingSystemInUse = (
   chainingSystemsStats: ControlGroupTelemetry['chaining_system'],
-  chainingSystem: ControlGroupInput['chainingSystem']
+  chainingSystem: SerializableControlGroupState['chainingSystem']
 ): ControlGroupTelemetry['chaining_system'] => {
   if (!chainingSystem) return chainingSystemsStats;
   if (Boolean(chainingSystemsStats[chainingSystem])) {
@@ -45,7 +64,7 @@ const reportChainingSystemInUse = (
 
 const reportLabelPositionsInUse = (
   labelPositionStats: ControlGroupTelemetry['label_position'],
-  labelPosition: ControlGroupInput['controlStyle'] // controlStyle was renamed labelPosition
+  labelPosition: SerializableControlGroupState['labelPosition']
 ): ControlGroupTelemetry['label_position'] => {
   if (!labelPosition) return labelPositionStats;
   if (Boolean(labelPositionStats[labelPosition])) {
@@ -58,7 +77,7 @@ const reportLabelPositionsInUse = (
 
 const reportIgnoreSettingsInUse = (
   settingsStats: ControlGroupTelemetry['ignore_settings'],
-  settings: ControlGroupInput['ignoreParentSettings']
+  settings: SerializableControlGroupState['ignoreParentSettings']
 ): ControlGroupTelemetry['ignore_settings'] => {
   if (!settings) return settingsStats;
   for (const [settingKey, settingValue] of Object.entries(settings)) {
@@ -73,7 +92,7 @@ const reportIgnoreSettingsInUse = (
 
 const reportControlTypes = (
   controlTypeStats: ControlGroupTelemetry['by_type'],
-  panels: ControlGroupInput['panels']
+  panels: SerializableControlGroupState['panels']
 ): ControlGroupTelemetry['by_type'] => {
   for (const { type } of Object.values(panels)) {
     const currentTypeCount = controlTypeStats[type]?.total ?? 0;
@@ -92,31 +111,34 @@ export const controlGroupTelemetry: PersistableStateService['telemetry'] = (
   stats
 ): ControlGroupTelemetry => {
   const controlGroupStats = initializeControlGroupTelemetry(stats);
-  const controlGroupInput = rawControlGroupAttributesToControlGroupInput(
-    state as unknown as RawControlGroupAttributes
-  );
-  if (!controlGroupInput) return controlGroupStats;
+  const controlGroupState = {
+    ...getDefaultControlGroupState(),
+    ...controlGroupSerializedStateToSerializableRuntimeState(
+      state as unknown as ControlGroupSerializedState
+    ),
+  };
+  if (!controlGroupState) return controlGroupStats;
 
-  controlGroupStats.total += Object.keys(controlGroupInput?.panels ?? {}).length;
+  controlGroupStats.total += Object.keys(controlGroupState?.panels ?? {}).length;
 
   controlGroupStats.chaining_system = reportChainingSystemInUse(
     controlGroupStats.chaining_system,
-    controlGroupInput.chainingSystem
+    controlGroupState.chainingSystem
   );
 
   controlGroupStats.label_position = reportLabelPositionsInUse(
     controlGroupStats.label_position,
-    controlGroupInput.controlStyle
+    controlGroupState.labelPosition
   );
 
   controlGroupStats.ignore_settings = reportIgnoreSettingsInUse(
     controlGroupStats.ignore_settings,
-    controlGroupInput.ignoreParentSettings
+    controlGroupState.ignoreParentSettings
   );
 
   controlGroupStats.by_type = reportControlTypes(
     controlGroupStats.by_type,
-    controlGroupInput.panels
+    controlGroupState.panels
   );
 
   return controlGroupStats;
diff --git a/src/plugins/controls/server/index.ts b/src/plugins/controls/server/index.ts
index c69a8254f10b6..541d9e2a46204 100644
--- a/src/plugins/controls/server/index.ts
+++ b/src/plugins/controls/server/index.ts
@@ -12,4 +12,11 @@ export const plugin = async () => {
   return new ControlsPlugin();
 };
 
-export { initializeControlGroupTelemetry } from './control_group/control_group_telemetry';
+export {
+  controlGroupSerializedStateToSerializableRuntimeState,
+  serializableRuntimeStateToControlGroupSerializedState,
+} from './control_group/control_group_persistence';
+export {
+  type ControlGroupTelemetry,
+  initializeControlGroupTelemetry,
+} from './control_group/control_group_telemetry';
diff --git a/src/plugins/controls/server/mocks.tsx b/src/plugins/controls/server/mocks.tsx
new file mode 100644
index 0000000000000..4b48c818f175c
--- /dev/null
+++ b/src/plugins/controls/server/mocks.tsx
@@ -0,0 +1,26 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import type { OptionsListControlState } from '../common/options_list';
+import type { DefaultDataControlState } from '../common/types';
+
+export const mockDataControlState = {
+  id: 'id',
+  fieldName: 'sample field',
+  dataViewId: 'sample id',
+  value: ['0', '10'],
+} as DefaultDataControlState & { id: string };
+
+export const mockOptionsListControlState = {
+  ...mockDataControlState,
+  selectedOptions: [],
+  runPastTimeout: false,
+  singleSelect: false,
+  exclude: false,
+} as OptionsListControlState;
diff --git a/src/plugins/controls/server/options_list/options_list_embeddable_factory.ts b/src/plugins/controls/server/options_list/options_list_embeddable_factory.ts
index b4b52c5828cad..d1ca71783fd09 100644
--- a/src/plugins/controls/server/options_list/options_list_embeddable_factory.ts
+++ b/src/plugins/controls/server/options_list/options_list_embeddable_factory.ts
@@ -12,7 +12,7 @@ import { OPTIONS_LIST_CONTROL } from '../../common';
 import {
   createOptionsListExtract,
   createOptionsListInject,
-} from '../../common/options_list/options_list_persistable_state';
+} from './options_list_persistable_state';
 
 export const optionsListPersistableStateServiceFactory = (): EmbeddableRegistryDefinition => {
   return {
diff --git a/src/plugins/controls/common/options_list/options_list_persistable_state.ts b/src/plugins/controls/server/options_list/options_list_persistable_state.ts
similarity index 84%
rename from src/plugins/controls/common/options_list/options_list_persistable_state.ts
rename to src/plugins/controls/server/options_list/options_list_persistable_state.ts
index 4fcf41d6ee729..fecfa570d847e 100644
--- a/src/plugins/controls/common/options_list/options_list_persistable_state.ts
+++ b/src/plugins/controls/server/options_list/options_list_persistable_state.ts
@@ -13,17 +13,16 @@ import {
 } from '@kbn/embeddable-plugin/common';
 import { SavedObjectReference } from '@kbn/core/types';
 import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common';
-import { OptionsListEmbeddableInput } from './types';
+import { DefaultDataControlState } from '../../common';
 
-type OptionsListInputWithType = Partial<OptionsListEmbeddableInput> & { type: string };
 const dataViewReferenceName = 'optionsListDataView';
 
 export const createOptionsListInject = (): EmbeddablePersistableStateService['inject'] => {
   return (state: EmbeddableStateWithType, references: SavedObjectReference[]) => {
-    const workingState = { ...state } as EmbeddableStateWithType | OptionsListInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     references.forEach((reference) => {
       if (reference.name === dataViewReferenceName) {
-        (workingState as OptionsListInputWithType).dataViewId = reference.id;
+        (workingState as Partial<DefaultDataControlState>).dataViewId = reference.id;
       }
     });
     return workingState as EmbeddableStateWithType;
@@ -32,14 +31,14 @@ export const createOptionsListInject = (): EmbeddablePersistableStateService['in
 
 export const createOptionsListExtract = (): EmbeddablePersistableStateService['extract'] => {
   return (state: EmbeddableStateWithType) => {
-    const workingState = { ...state } as EmbeddableStateWithType | OptionsListInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     const references: SavedObjectReference[] = [];
 
     if ('dataViewId' in workingState) {
       references.push({
         name: dataViewReferenceName,
         type: DATA_VIEW_SAVED_OBJECT_TYPE,
-        id: workingState.dataViewId!,
+        id: (workingState as Partial<DefaultDataControlState>).dataViewId!,
       });
       delete workingState.dataViewId;
     }
diff --git a/src/plugins/controls/server/range_slider/range_slider_embeddable_factory.ts b/src/plugins/controls/server/range_slider/range_slider_embeddable_factory.ts
index 2c5eec6dfb1cc..bed8aed5e3904 100644
--- a/src/plugins/controls/server/range_slider/range_slider_embeddable_factory.ts
+++ b/src/plugins/controls/server/range_slider/range_slider_embeddable_factory.ts
@@ -13,7 +13,7 @@ import { RANGE_SLIDER_CONTROL } from '../../common';
 import {
   createRangeSliderExtract,
   createRangeSliderInject,
-} from '../../common/range_slider/range_slider_persistable_state';
+} from './range_slider_persistable_state';
 
 export const rangeSliderPersistableStateServiceFactory = (): EmbeddableRegistryDefinition => {
   return {
diff --git a/src/plugins/controls/common/range_slider/range_slider_persistable_state.ts b/src/plugins/controls/server/range_slider/range_slider_persistable_state.ts
similarity index 88%
rename from src/plugins/controls/common/range_slider/range_slider_persistable_state.ts
rename to src/plugins/controls/server/range_slider/range_slider_persistable_state.ts
index a58823a95a269..ee289c16fb961 100644
--- a/src/plugins/controls/common/range_slider/range_slider_persistable_state.ts
+++ b/src/plugins/controls/server/range_slider/range_slider_persistable_state.ts
@@ -13,16 +13,16 @@ import {
 } from '@kbn/embeddable-plugin/common';
 import { SavedObjectReference } from '@kbn/core/types';
 import { DATA_VIEW_SAVED_OBJECT_TYPE } from '@kbn/data-views-plugin/common';
-import { RangeSliderInputWithType } from './types';
+import { DefaultDataControlState } from '../../common';
 
 const dataViewReferenceName = 'rangeSliderDataView';
 
 export const createRangeSliderInject = (): EmbeddablePersistableStateService['inject'] => {
   return (state: EmbeddableStateWithType, references: SavedObjectReference[]) => {
-    const workingState = { ...state } as EmbeddableStateWithType | RangeSliderInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     references.forEach((reference) => {
       if (reference.name === dataViewReferenceName) {
-        (workingState as RangeSliderInputWithType).dataViewId = reference.id;
+        (workingState as Partial<DefaultDataControlState>).dataViewId = reference.id;
       }
     });
     return workingState as EmbeddableStateWithType;
@@ -31,14 +31,14 @@ export const createRangeSliderInject = (): EmbeddablePersistableStateService['in
 
 export const createRangeSliderExtract = (): EmbeddablePersistableStateService['extract'] => {
   return (state: EmbeddableStateWithType) => {
-    const workingState = { ...state } as EmbeddableStateWithType | RangeSliderInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     const references: SavedObjectReference[] = [];
 
     if ('dataViewId' in workingState) {
       references.push({
         name: dataViewReferenceName,
         type: DATA_VIEW_SAVED_OBJECT_TYPE,
-        id: workingState.dataViewId!,
+        id: (workingState as Partial<DefaultDataControlState>).dataViewId!,
       });
       delete workingState.dataViewId;
     }
diff --git a/src/plugins/controls/server/time_slider/time_slider_embeddable_factory.ts b/src/plugins/controls/server/time_slider/time_slider_embeddable_factory.ts
index 2ee2519c95020..848fa3e0bd553 100644
--- a/src/plugins/controls/server/time_slider/time_slider_embeddable_factory.ts
+++ b/src/plugins/controls/server/time_slider/time_slider_embeddable_factory.ts
@@ -9,10 +9,7 @@
 
 import { EmbeddableRegistryDefinition } from '@kbn/embeddable-plugin/server';
 import { TIME_SLIDER_CONTROL } from '../../common';
-import {
-  createTimeSliderExtract,
-  createTimeSliderInject,
-} from '../../common/time_slider/time_slider_persistable_state';
+import { createTimeSliderExtract, createTimeSliderInject } from './time_slider_persistable_state';
 
 export const timeSliderPersistableStateServiceFactory = (): EmbeddableRegistryDefinition => {
   return {
diff --git a/src/plugins/controls/common/time_slider/time_slider_persistable_state.ts b/src/plugins/controls/server/time_slider/time_slider_persistable_state.ts
similarity index 85%
rename from src/plugins/controls/common/time_slider/time_slider_persistable_state.ts
rename to src/plugins/controls/server/time_slider/time_slider_persistable_state.ts
index 82d4855171a85..efa23cc084c31 100644
--- a/src/plugins/controls/common/time_slider/time_slider_persistable_state.ts
+++ b/src/plugins/controls/server/time_slider/time_slider_persistable_state.ts
@@ -12,20 +12,17 @@ import {
   EmbeddablePersistableStateService,
 } from '@kbn/embeddable-plugin/common';
 import { SavedObjectReference } from '@kbn/core/types';
-import { TimeSliderControlEmbeddableInput } from './types';
-
-type TimeSliderInputWithType = Partial<TimeSliderControlEmbeddableInput> & { type: string };
 
 export const createTimeSliderInject = (): EmbeddablePersistableStateService['inject'] => {
   return (state: EmbeddableStateWithType, references: SavedObjectReference[]) => {
-    const workingState = { ...state } as EmbeddableStateWithType | TimeSliderInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     return workingState as EmbeddableStateWithType;
   };
 };
 
 export const createTimeSliderExtract = (): EmbeddablePersistableStateService['extract'] => {
   return (state: EmbeddableStateWithType) => {
-    const workingState = { ...state } as EmbeddableStateWithType | TimeSliderInputWithType;
+    const workingState = { ...state } as EmbeddableStateWithType;
     const references: SavedObjectReference[] = [];
 
     return { state: workingState as EmbeddableStateWithType, references };
diff --git a/src/plugins/controls/storybook/decorator.tsx b/src/plugins/controls/storybook/decorator.tsx
deleted file mode 100644
index c6acc420ff735..0000000000000
--- a/src/plugins/controls/storybook/decorator.tsx
+++ /dev/null
@@ -1,47 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-
-import { DecoratorFn } from '@storybook/react';
-import { I18nProvider } from '@kbn/i18n-react';
-import { PluginServiceRegistry } from '@kbn/presentation-util-plugin/public';
-import { KibanaContextProvider as KibanaReactProvider } from '@kbn/kibana-react-plugin/public';
-import { pluginServices } from '../public/services';
-import { ControlsServices } from '../public/services/types';
-import { providers } from '../public/services/plugin_services.story';
-
-const settings = new Map();
-settings.set('darkMode', true);
-
-const services = {
-  http: {
-    basePath: {
-      get: () => '',
-      prepend: () => '',
-      remove: () => '',
-      serverBasePath: '',
-    },
-  },
-  uiSettings: settings,
-};
-
-export const servicesContextDecorator: DecoratorFn = (story: Function, storybook) => {
-  const registry = new PluginServiceRegistry<ControlsServices>(providers);
-  pluginServices.setRegistry(registry.start(storybook.args));
-  const ContextProvider = pluginServices.getContextProvider();
-
-  return (
-    <I18nProvider>
-      <KibanaReactProvider services={services}>
-        <ContextProvider>{story()}</ContextProvider>
-      </KibanaReactProvider>
-    </I18nProvider>
-  );
-};
diff --git a/src/plugins/controls/storybook/manager.ts b/src/plugins/controls/storybook/manager.ts
deleted file mode 100644
index 935547c2aaa0c..0000000000000
--- a/src/plugins/controls/storybook/manager.ts
+++ /dev/null
@@ -1,26 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { addons } from '@storybook/addons';
-import { create } from '@storybook/theming';
-import { PANEL_ID } from '@storybook/addon-actions';
-
-import { registerThemeSwitcherAddon } from '@kbn/storybook/src/lib/register_theme_switcher_addon';
-
-addons.setConfig({
-  theme: create({
-    base: 'light',
-    brandTitle: 'Kibana Controls Storybook',
-    brandUrl: 'https://github.com/elastic/kibana/tree/main/src/plugins/controls',
-  }),
-  showPanel: true.valueOf,
-  selectedPanel: PANEL_ID,
-});
-
-registerThemeSwitcherAddon();
diff --git a/src/plugins/controls/storybook/preview.tsx b/src/plugins/controls/storybook/preview.tsx
deleted file mode 100644
index 4ddf9e5080d29..0000000000000
--- a/src/plugins/controls/storybook/preview.tsx
+++ /dev/null
@@ -1,30 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import React from 'react';
-import { addDecorator } from '@storybook/react';
-import { Title, Subtitle, Description, Primary, Stories } from '@storybook/addon-docs/blocks';
-
-import { servicesContextDecorator } from './decorator';
-
-addDecorator(servicesContextDecorator);
-
-export const parameters = {
-  docs: {
-    page: () => (
-      <>
-        <Title />
-        <Subtitle />
-        <Description />
-        <Primary />
-        <Stories />
-      </>
-    ),
-  },
-};
diff --git a/src/plugins/controls/tsconfig.json b/src/plugins/controls/tsconfig.json
index 5eb503d1e68c3..fc9d6572ccf2f 100644
--- a/src/plugins/controls/tsconfig.json
+++ b/src/plugins/controls/tsconfig.json
@@ -9,16 +9,13 @@
     "public/**/*",
     "public/**/*.json",
     "server/**/*",
-    "storybook/**/*",
     "../../../typings/**/*",
     "./jest_setup.ts"
   ],
   "kbn_references": [
     "@kbn/core",
-    "@kbn/kibana-react-plugin",
     "@kbn/embeddable-plugin",
     "@kbn/presentation-util-plugin",
-    "@kbn/kibana-react-plugin",
     "@kbn/data-plugin",
     "@kbn/unified-search-plugin",
     "@kbn/es-query",
@@ -27,18 +24,14 @@
     "@kbn/utility-types",
     "@kbn/i18n",
     "@kbn/i18n-react",
-    "@kbn/core-mount-utils-browser-internal",
     "@kbn/datemath",
-    "@kbn/test-jest-helpers",
     "@kbn/config-schema",
-    "@kbn/storybook",
     "@kbn/ui-theme",
     "@kbn/safer-lodash-set",
     "@kbn/ui-actions-plugin",
     "@kbn/core-mount-utils-browser",
     "@kbn/react-kibana-mount",
     "@kbn/shared-ux-markdown",
-    "@kbn/react-kibana-context-render",
     "@kbn/presentation-containers",
     "@kbn/presentation-publishing",
     "@kbn/content-management-utils",
diff --git a/src/plugins/dashboard/common/content_management/v1/types.ts b/src/plugins/dashboard/common/content_management/v1/types.ts
index 63c5e64197262..9b7c2973d9713 100644
--- a/src/plugins/dashboard/common/content_management/v1/types.ts
+++ b/src/plugins/dashboard/common/content_management/v1/types.ts
@@ -14,7 +14,7 @@ import type {
 } from '@kbn/content-management-utils';
 import { Serializable } from '@kbn/utility-types';
 import { RefreshInterval } from '@kbn/data-plugin/common';
-import { RawControlGroupAttributes } from '@kbn/controls-plugin/common';
+import { ControlGroupSerializedState } from '@kbn/controls-plugin/common';
 
 import { DashboardContentType } from '../types';
 
@@ -63,7 +63,7 @@ export interface SavedDashboardPanel {
 }
 
 type ControlGroupAttributesV1 = Pick<
-  RawControlGroupAttributes,
+  ControlGroupSerializedState,
   'panelsJSON' | 'chainingSystem' | 'controlStyle' | 'ignoreParentSettingsJSON'
 >;
 
diff --git a/src/plugins/dashboard/common/content_management/v2/types.ts b/src/plugins/dashboard/common/content_management/v2/types.ts
index 6a6531dd54053..3f009b749a2ab 100644
--- a/src/plugins/dashboard/common/content_management/v2/types.ts
+++ b/src/plugins/dashboard/common/content_management/v2/types.ts
@@ -12,12 +12,12 @@ import type {
   SavedObjectCreateOptions,
   SavedObjectUpdateOptions,
 } from '@kbn/content-management-utils';
-import { RawControlGroupAttributes } from '@kbn/controls-plugin/common';
+import { ControlGroupSerializedState } from '@kbn/controls-plugin/common';
 import { DashboardContentType } from '../types';
 import { DashboardAttributes as DashboardAttributesV1 } from '../v1/types';
 
 type ControlGroupAttributesV2 = Pick<
-  RawControlGroupAttributes,
+  ControlGroupSerializedState,
   | 'panelsJSON'
   | 'chainingSystem'
   | 'controlStyle'
diff --git a/src/plugins/dashboard/public/dashboard_container/embeddable/create/controls/dashboard_control_group_integration.test.ts b/src/plugins/dashboard/public/dashboard_container/embeddable/create/controls/dashboard_control_group_integration.test.ts
index 19094cd42ddb5..1659d3673e43d 100644
--- a/src/plugins/dashboard/public/dashboard_container/embeddable/create/controls/dashboard_control_group_integration.test.ts
+++ b/src/plugins/dashboard/public/dashboard_container/embeddable/create/controls/dashboard_control_group_integration.test.ts
@@ -11,7 +11,7 @@ import { Filter } from '@kbn/es-query';
 import { combineDashboardFiltersWithControlGroupFilters } from './dashboard_control_group_integration';
 import { BehaviorSubject } from 'rxjs';
 
-jest.mock('@kbn/controls-plugin/public/control_group/embeddable/control_group_container');
+jest.mock('@kbn/controls-plugin/public/react_controls/control_group/get_control_group_factory');
 
 const testFilter1: Filter = {
   meta: {
diff --git a/src/plugins/dashboard/server/dashboard_saved_object/migrations/migrate_by_value_dashboard_panels.ts b/src/plugins/dashboard/server/dashboard_saved_object/migrations/migrate_by_value_dashboard_panels.ts
index e998b7aa6e6f4..1b1d04cdebf77 100644
--- a/src/plugins/dashboard/server/dashboard_saved_object/migrations/migrate_by_value_dashboard_panels.ts
+++ b/src/plugins/dashboard/server/dashboard_saved_object/migrations/migrate_by_value_dashboard_panels.ts
@@ -7,12 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
+import { CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
 import {
-  CONTROL_GROUP_TYPE,
-  rawControlGroupAttributesToSerializable,
-  serializableToRawControlGroupAttributes,
-} from '@kbn/controls-plugin/common';
-import { Serializable } from '@kbn/utility-types';
+  controlGroupSerializedStateToSerializableRuntimeState,
+  serializableRuntimeStateToControlGroupSerializedState,
+} from '@kbn/controls-plugin/server';
+import { Serializable, SerializableRecord } from '@kbn/utility-types';
 import { SavedObjectMigrationFn } from '@kbn/core/server';
 import { MigrateFunction } from '@kbn/kibana-utils-plugin/common';
 import { SavedObjectEmbeddableInput } from '@kbn/embeddable-plugin/common';
@@ -35,15 +35,15 @@ export const migrateByValueDashboardPanels =
     const { attributes } = doc;
 
     if (attributes?.controlGroupInput) {
-      const controlGroupInput = rawControlGroupAttributesToSerializable(
+      const controlGroupState = controlGroupSerializedStateToSerializableRuntimeState(
         attributes.controlGroupInput
       );
       const migratedControlGroupInput = migrate({
-        ...controlGroupInput,
+        ...controlGroupState,
         type: CONTROL_GROUP_TYPE,
-      });
+      } as SerializableRecord);
       attributes.controlGroupInput =
-        serializableToRawControlGroupAttributes(migratedControlGroupInput);
+        serializableRuntimeStateToControlGroupSerializedState(migratedControlGroupInput);
     }
 
     // Skip if panelsJSON is missing otherwise this will cause saved object import to fail when
diff --git a/src/plugins/dashboard/server/usage/dashboard_telemetry.ts b/src/plugins/dashboard/server/usage/dashboard_telemetry.ts
index 4347d027c3e19..0048e081e6f61 100644
--- a/src/plugins/dashboard/server/usage/dashboard_telemetry.ts
+++ b/src/plugins/dashboard/server/usage/dashboard_telemetry.ts
@@ -9,10 +9,13 @@
 
 import { isEmpty } from 'lodash';
 
-import { TaskManagerStartContract } from '@kbn/task-manager-plugin/server';
-import { initializeControlGroupTelemetry } from '@kbn/controls-plugin/server';
+import { CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
+import {
+  initializeControlGroupTelemetry,
+  type ControlGroupTelemetry,
+} from '@kbn/controls-plugin/server';
 import { EmbeddablePersistableStateService } from '@kbn/embeddable-plugin/common';
-import { type ControlGroupTelemetry, CONTROL_GROUP_TYPE } from '@kbn/controls-plugin/common';
+import { TaskManagerStartContract } from '@kbn/task-manager-plugin/server';
 
 import { DashboardAttributes, SavedDashboardPanel } from '../../common/content_management';
 import { TASK_ID } from './dashboard_telemetry_collection_task';
diff --git a/src/plugins/dev_tools/public/application.tsx b/src/plugins/dev_tools/public/application.tsx
index 9e56f344700cc..f58441cd6ddcc 100644
--- a/src/plugins/dev_tools/public/application.tsx
+++ b/src/plugins/dev_tools/public/application.tsx
@@ -36,7 +36,7 @@ export interface AppServices {
 interface DevToolsWrapperProps {
   devTools: readonly DevToolApp[];
   activeDevTool: DevToolApp;
-  updateRoute: (newRoute: string) => void;
+  history: RouteComponentProps['history'];
   appServices: AppServices;
   location: RouteComponentProps['location'];
   startServices: DevToolsStartServices;
@@ -51,7 +51,7 @@ interface MountedDevToolDescriptor {
 function DevToolsWrapper({
   devTools,
   activeDevTool,
-  updateRoute,
+  history,
   appServices,
   location,
   startServices,
@@ -83,7 +83,7 @@ function DevToolsWrapper({
             isSelected={currentDevTool === activeDevTool}
             onClick={() => {
               if (!currentDevTool.isDisabled()) {
-                updateRoute(`/${currentDevTool.id}`);
+                history.push(`/${currentDevTool.id}`);
               }
             }}
           >
@@ -122,6 +122,7 @@ function DevToolsWrapper({
             const params = {
               element,
               location,
+              history,
               ...startServices,
             };
 
@@ -192,7 +193,7 @@ export function renderApp(
                 exact={!devTool.enableRouting}
                 render={(props) => (
                   <DevToolsWrapper
-                    updateRoute={props.history.push}
+                    history={props.history}
                     location={props.location}
                     activeDevTool={devTool}
                     devTools={devTools}
diff --git a/src/plugins/dev_tools/public/dev_tool.ts b/src/plugins/dev_tools/public/dev_tool.ts
index 32e473e074129..2ceb6aacdc7d0 100644
--- a/src/plugins/dev_tools/public/dev_tool.ts
+++ b/src/plugins/dev_tools/public/dev_tool.ts
@@ -22,6 +22,7 @@ export type CreateDevToolArgs = Omit<DevToolApp, 'enable' | 'disable' | 'isDisab
 
 interface DevToolMountParams extends DevToolsStartServices {
   element: HTMLDivElement;
+  history: RouteComponentProps['history'];
   location: RouteComponentProps['location'];
 }
 
diff --git a/src/plugins/discover/public/application/main/state_management/utils/get_esql_data_view.test.ts b/src/plugins/discover/public/application/main/state_management/utils/get_esql_data_view.test.ts
index f9cd58bfbad56..cf50544dc2c5e 100644
--- a/src/plugins/discover/public/application/main/state_management/utils/get_esql_data_view.test.ts
+++ b/src/plugins/discover/public/application/main/state_management/utils/get_esql_data_view.test.ts
@@ -34,7 +34,7 @@ describe('getEsqlDataView', () => {
   });
 
   it('returns an adhoc dataview if it is adhoc with named params and query index pattern is the same as the dataview index pattern', async () => {
-    const query = { esql: 'from data-view-ad-hoc-title | where time >= ?t_start' };
+    const query = { esql: 'from data-view-ad-hoc-title | where time >= ?_tstart' };
     const dataView = await getEsqlDataView(query, dataViewAdHocNoAtTimestamp, services);
     expect(dataView.timeFieldName).toBe('time');
   });
diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
index 52c0df738246a..1c118620773ae 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/management/schema.ts
@@ -484,10 +484,6 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'integer',
     _meta: { description: 'Non-default value of setting.' },
   },
-  'observability:aiAssistantLogsIndexPattern': {
-    type: 'keyword',
-    _meta: { description: 'Non-default value of setting.' },
-  },
   'observability:aiAssistantSimulatedFunctionCalling': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },
diff --git a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts
index 0a0ebe8ebbac6..71c692b6fdf34 100644
--- a/src/plugins/kibana_usage_collection/server/collectors/management/types.ts
+++ b/src/plugins/kibana_usage_collection/server/collectors/management/types.ts
@@ -55,7 +55,6 @@ export interface UsageStats {
   'observability:apmEnableServiceInventoryTableSearchBar': boolean;
   'observability:logsExplorer:allowedDataViews': string[];
   'observability:logSources': string[];
-  'observability:aiAssistantLogsIndexPattern': string;
   'observability:aiAssistantSimulatedFunctionCalling': boolean;
   'observability:aiAssistantSearchConnectorIndexPattern': string;
   'visualization:heatmap:maxBuckets': number;
diff --git a/src/plugins/telemetry/schema/oss_plugins.json b/src/plugins/telemetry/schema/oss_plugins.json
index 77e050334803b..ce626c90c2d82 100644
--- a/src/plugins/telemetry/schema/oss_plugins.json
+++ b/src/plugins/telemetry/schema/oss_plugins.json
@@ -10319,12 +10319,6 @@
             "description": "Non-default value of setting."
           }
         },
-        "observability:aiAssistantLogsIndexPattern": {
-          "type": "keyword",
-          "_meta": {
-            "description": "Non-default value of setting."
-          }
-        },
         "observability:aiAssistantSimulatedFunctionCalling": {
           "type": "boolean",
           "_meta": {
diff --git a/src/plugins/telemetry/server/telemetry_collection/get_data_telemetry/constants.ts b/src/plugins/telemetry/server/telemetry_collection/get_data_telemetry/constants.ts
index bd76ea04cb667..60bd01c2bd78c 100644
--- a/src/plugins/telemetry/server/telemetry_collection/get_data_telemetry/constants.ts
+++ b/src/plugins/telemetry/server/telemetry_collection/get_data_telemetry/constants.ts
@@ -55,6 +55,7 @@ export const DATA_DATASETS_INDEX_PATTERNS = [
   { pattern: 'telegraf*', patternName: 'telegraf' },
   { pattern: 'prometheusbeat*', patternName: 'prometheusbeat' },
   { pattern: 'fluentbit*', patternName: 'fluentbit' },
+  { pattern: 'fluent-bit*', patternName: 'fluentbit' },
   { pattern: '*nginx*', patternName: 'nginx' },
   { pattern: '*apache*', patternName: 'apache' }, // Already in Security (keeping it in here for documentation)
   { pattern: '*logs*', patternName: 'generic-logs' },
diff --git a/test/accessibility/apps/console.ts b/test/accessibility/apps/console.ts
index 975d201780f65..4fad9eeac420f 100644
--- a/test/accessibility/apps/console.ts
+++ b/test/accessibility/apps/console.ts
@@ -22,7 +22,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await a11y.testAppSnapshot();
     });
 
-    it('Dev tools settings page', async () => {
+    it.skip('Dev tools settings page', async () => {
       await PageObjects.console.setFontSizeSetting(20);
       await a11y.testAppSnapshot();
     });
diff --git a/test/functional/apps/console/ace/_autocomplete.ts b/test/functional/apps/console/_autocomplete.ts
similarity index 74%
rename from test/functional/apps/console/ace/_autocomplete.ts
rename to test/functional/apps/console/_autocomplete.ts
index ec1257245a4bd..1123c93cab49c 100644
--- a/test/functional/apps/console/ace/_autocomplete.ts
+++ b/test/functional/apps/console/_autocomplete.ts
@@ -9,7 +9,7 @@
 
 import _ from 'lodash';
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
@@ -18,9 +18,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const find = getService('find');
 
   async function runTemplateTest(type: string, template: string) {
-    await PageObjects.console.enterText(`{\n\t"type": "${type}"`);
-    await PageObjects.console.pressEnter();
-    await PageObjects.console.sleepForDebouncePeriod();
+    await PageObjects.console.enterText(`{\n\t"type": "${type}",\n`);
+    await PageObjects.console.sleepForDebouncePeriod(500);
     // Prompt autocomplete for 'settings'
     await PageObjects.console.promptAutocomplete('s');
 
@@ -29,20 +28,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     );
     await PageObjects.console.pressEnter();
     await retry.try(async () => {
-      const request = await PageObjects.console.getRequest();
+      const request = await PageObjects.console.getEditorText();
       log.debug(request);
       expect(request).to.contain(`${template}`);
     });
   }
 
-  describe('console autocomplete feature', function describeIndexTests() {
+  // Failing: See https://github.com/elastic/kibana/issues/191808
+  describe.skip('console autocomplete feature', function describeIndexTests() {
     this.tags('includeFirefox');
     before(async () => {
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
       // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.clearTextArea();
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
       log.debug('setAutocompleteTrace true');
       await PageObjects.console.setAutocompleteTrace(true);
     });
@@ -53,7 +53,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should provide basic auto-complete functionality', async () => {
-      await PageObjects.console.enterRequest();
+      await PageObjects.console.enterText(`GET _search\n`);
       await PageObjects.console.pressEnter();
       await PageObjects.console.enterText(`{\n\t"query": {`);
       await PageObjects.console.pressEnter();
@@ -62,17 +62,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       expect(PageObjects.console.isAutocompleteVisible()).to.be.eql(true);
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/165465
+    // FLAKY: https://github.com/elastic/kibana/issues/186501
     describe.skip('Autocomplete behavior', () => {
       beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.pressEnter();
+        await PageObjects.console.clearEditorText();
       });
 
       it('HTTP methods', async () => {
         const suggestions = {
           G: ['GET'],
-          P: ['PUT', 'POST', 'PATCH'],
+          P: ['PATCH', 'POST', 'PUT'],
           D: ['DELETE'],
           H: ['HEAD'],
         };
@@ -91,7 +90,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           }
 
           await PageObjects.console.pressEscape();
-          await PageObjects.console.pressEnter();
+          await PageObjects.console.clearEditorText();
         }
       });
 
@@ -125,7 +124,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('JSON autocompletion with placeholder fields', async () => {
-        await PageObjects.console.enterText('GET _search\n{');
+        await PageObjects.console.enterText('GET _search\n');
+        await PageObjects.console.enterText('{');
         await PageObjects.console.pressEnter();
 
         for (const char of '"ag') {
@@ -140,58 +140,22 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.console.pressEnter();
         await PageObjects.console.sleepForDebouncePeriod();
 
-        expect(await PageObjects.console.getAllVisibleText()).to.be.eql(
-          `
-GET _search
-{
-  "aggs": {
-    "NAME": {
-      "AGG_TYPE": {}
-    }
-  }
-}
-`.replace(/\n/g, '')
-        );
-        // cursor should be located between '"' and 'N'
-        expect(await PageObjects.console.getCurrentLineNumber()).to.be.eql(5);
-
-        await PageObjects.console.pressDown();
-        await PageObjects.console.pressRight();
-        await PageObjects.console.pressRight();
-        for (let i = 0; i < 8; i++) {
-          await PageObjects.console.pressRight(true); // select 'AGG_TYPE'
-        }
-
-        for (const char of 'ter') {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key type "%s"', char);
-          await PageObjects.console.enterText(char);
-        }
-        await retry.waitFor('autocomplete to be visible', () =>
-          PageObjects.console.isAutocompleteVisible()
-        );
-        expect(await PageObjects.console.isAutocompleteVisible()).to.be.eql(true);
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.sleepForDebouncePeriod();
-
-        expect(await PageObjects.console.getAllVisibleText()).to.be.eql(
+        expect((await PageObjects.console.getEditorText()).replace(/\s/g, '')).to.be.eql(
           `
 GET _search
 {
-  "aggs": {
-    "NAME": {
-      "terms": {
-        "field": ""
+    "aggs": {
+      "NAME": {
+        "AGG_TYPE": {}
       }
     }
-  }
 }
-`.replace(/\n/g, '')
+`.replace(/\s/g, '')
         );
       });
 
       it('Dynamic autocomplete', async () => {
-        await PageObjects.console.enterRequest('POST test/_doc\n{}');
+        await PageObjects.console.enterText('POST test/_doc\n{}');
         await PageObjects.console.clickPlay();
 
         await PageObjects.header.waitUntilLoadingHasFinished();
@@ -212,15 +176,14 @@ GET _search
       });
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/164584
-    describe.skip('anti-regression watchdogs', () => {
+    describe('anti-regression watchdogs', () => {
       beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
+        await PageObjects.console.clearEditorText();
       });
 
-      it('should suppress auto-complete on arrow keys', async () => {
-        await PageObjects.console.enterRequest();
-        await PageObjects.console.enterRequest();
+      // flaky
+      it.skip('should suppress auto-complete on arrow keys', async () => {
+        await PageObjects.console.enterText(`\nGET _search\nGET _search`);
         await PageObjects.console.pressEnter();
         const keyPresses = [
           'pressUp',
@@ -252,15 +215,13 @@ GET _search
             dELETE dELETe dELEtE dELEte dELeTE dELeTe dELetE dELete dElETE dElETe dElEtE dElEte dEleTE dEleTe dEletE dElete
             deLETE deLETe deLEtE deLEte deLeTE deLeTe deLetE deLete delETE delETe delEtE delEte deleTE deleTe deletE delete
             HEAD HEAd HEaD HEad HeAD HeAd HeaD Head hEAD hEAd hEaD hEad heAD heAd heaD head
-            PATCH PATCh PATcH PATch PAtCH PAtCh PAtcH PAtch PaTCH PaTCh PaTcH PaTch PatCH PatCh PatcH Patch pATCH pATCh pATcH
-            pATch pAtCH pAtCh pAtcH pAtch paTCH paTCh paTcH paTch patCH patCh patcH patch
             `.split(/\s+/m)
           ),
           20 // 20 of 112 (approx. one-fifth) should be enough for testing
         );
 
         for (const method of methods) {
-          await PageObjects.console.clearTextArea();
+          await PageObjects.console.clearEditorText();
 
           for (const char of method.slice(0, -1)) {
             await PageObjects.console.sleepForDebouncePeriod();
@@ -301,7 +262,7 @@ GET _search
       });
 
       it('should activate auto-complete for multiple indices after comma in URL', async () => {
-        await PageObjects.console.enterText('GET /_cat/indices/.kibana');
+        await PageObjects.console.enterText('GET _cat/indices/.kibana');
 
         await PageObjects.console.sleepForDebouncePeriod();
         log.debug('Key type ","');
@@ -316,27 +277,14 @@ GET _search
         );
         expect(await PageObjects.console.isAutocompleteVisible()).to.be.eql(true);
       });
-
-      it('should not activate auto-complete after comma following endpoint in URL', async () => {
-        await PageObjects.console.enterText('GET _search');
-
-        await PageObjects.console.sleepForDebouncePeriod();
-        log.debug('Key type ","');
-        await PageObjects.console.enterText(','); // i.e. 'GET _search,'
-
-        await PageObjects.console.sleepForDebouncePeriod();
-        log.debug('Key type Ctrl+SPACE');
-        await PageObjects.console.pressCtrlSpace();
-
-        expect(await PageObjects.console.isAutocompleteVisible()).to.be.eql(false);
-      });
     });
 
-    describe('with a missing comma in query', () => {
+    // not implemented for monaco yet https://github.com/elastic/kibana/issues/184856
+    describe.skip('with a missing comma in query', () => {
       const LINE_NUMBER = 4;
       beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.enterRequest();
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText('\nGET _search');
         await PageObjects.console.pressEnter();
       });
 
@@ -356,11 +304,11 @@ GET _search
           const secondInnerHtml = await conApp.getAttribute('innerHTML');
           return firstInnerHtml === secondInnerHtml;
         });
-        const textAreaString = await PageObjects.console.getAllVisibleText();
+        const textAreaString = await PageObjects.console.getEditorText();
         log.debug('Text Area String Value==================\n');
         log.debug(textAreaString);
         expect(textAreaString).to.contain(',');
-        const text = await PageObjects.console.getVisibleTextAt(LINE_NUMBER);
+        const text = await PageObjects.console.getEditorTextAtLine(LINE_NUMBER);
         const lastChar = text.charAt(text.length - 1);
         expect(lastChar).to.be.eql(',');
       });
@@ -373,11 +321,11 @@ GET _search
         await PageObjects.console.pressEnter();
 
         await retry.waitForWithTimeout('text area to contain comma', 25000, async () => {
-          const textAreaString = await PageObjects.console.getAllVisibleText();
+          const textAreaString = await PageObjects.console.getEditorText();
           return textAreaString.includes(',');
         });
 
-        const text = await PageObjects.console.getVisibleTextAt(LINE_NUMBER);
+        const text = await PageObjects.console.getEditorTextAtLine(LINE_NUMBER);
         const lastChar = text.charAt(text.length - 1);
         expect(lastChar).to.be.eql(',');
       });
@@ -385,9 +333,8 @@ GET _search
 
     describe('with conditional templates', () => {
       beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.enterRequest('\n POST _snapshot/test_repo');
-        await PageObjects.console.pressEnter();
+        await PageObjects.console.clickClearInput();
+        await PageObjects.console.enterText('POST _snapshot/test_repo\n');
       });
 
       it('should insert fs template', async () => {
@@ -406,5 +353,32 @@ GET _search
         await runTemplateTest('azure', `"path": ""`);
       });
     });
+
+    // FLAKY: https://github.com/elastic/kibana/issues/186935
+    describe.skip('index fields autocomplete', () => {
+      const indexName = `index_field_test-${Date.now()}-${Math.random()}`;
+
+      before(async () => {
+        await PageObjects.console.clearEditorText();
+        // create an index with only 1 field
+        await PageObjects.console.enterText(`PUT ${indexName}/_doc/1\n{\n"test":1\n}`);
+        await PageObjects.console.clickPlay();
+      });
+
+      after(async () => {
+        await PageObjects.console.clearEditorText();
+        // delete the test index
+        await PageObjects.console.enterText(`DELETE ${indexName}`);
+        await PageObjects.console.clickPlay();
+      });
+
+      it('fields autocomplete only shows fields of the index', async () => {
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText('GET _search\n{\n"fields": ["');
+
+        expect(await PageObjects.console.getAutocompleteSuggestion(0)).to.be.eql('test');
+        expect(await PageObjects.console.getAutocompleteSuggestion(1)).to.be.eql(undefined);
+      });
+    });
   });
 }
diff --git a/test/functional/apps/console/monaco/_comments.ts b/test/functional/apps/console/_comments.ts
similarity index 88%
rename from test/functional/apps/console/monaco/_comments.ts
rename to test/functional/apps/console/_comments.ts
index 61c68ba39009d..0e004151d0149 100644
--- a/test/functional/apps/console/monaco/_comments.ts
+++ b/test/functional/apps/console/_comments.ts
@@ -9,7 +9,7 @@
 
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
@@ -21,13 +21,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     before(async () => {
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
+      await PageObjects.console.skipTourIfExists();
     });
 
     describe('with comments', () => {
       const enterRequest = async (url: string, body: string) => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText(`${url}\n${body}`);
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText(`${url}\n${body}`);
       };
 
       async function runTests(
@@ -82,7 +82,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             },
           ],
           async () => {
-            expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+            expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
           }
         );
       });
@@ -110,7 +110,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             },
           ],
           async () => {
-            expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+            expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
           }
         );
       });
@@ -126,7 +126,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
           ],
 
           async () => {
-            expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(true);
+            expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
           }
         );
       });
@@ -145,7 +145,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
             },
           ],
           async () => {
-            expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(true);
+            expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
           }
         );
       });
diff --git a/test/functional/apps/console/monaco/_console.ts b/test/functional/apps/console/_console.ts
similarity index 50%
rename from test/functional/apps/console/monaco/_console.ts
rename to test/functional/apps/console/_console.ts
index c27b23c828212..ffba2a7ac41c4 100644
--- a/test/functional/apps/console/monaco/_console.ts
+++ b/test/functional/apps/console/_console.ts
@@ -10,7 +10,7 @@
 import expect from '@kbn/expect';
 import { asyncForEach } from '@kbn/std';
 import { DEFAULT_INPUT_VALUE } from '@kbn/console-plugin/common/constants';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
@@ -24,33 +24,38 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     before(async () => {
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
-    });
-    beforeEach(async () => {
-      await PageObjects.console.closeHelpIfExists();
+      await PageObjects.console.skipTourIfExists();
     });
 
     it('should show the default request', async () => {
       await retry.try(async () => {
-        const actualRequest = await PageObjects.console.monaco.getEditorText();
+        const actualRequest = await PageObjects.console.getEditorText();
         log.debug(actualRequest);
-        expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
+        expect(DEFAULT_INPUT_VALUE.replace(/\s/g, '')).to.contain(actualRequest.replace(/\s/g, ''));
       });
     });
 
+    it('output panel should initially be in empty state', async () => {
+      expect(await PageObjects.console.isOutputPanelEmptyStateVisible()).to.be(true);
+    });
+
     it('default request response should include `"timed_out" : false`', async () => {
+      await PageObjects.console.clickClearOutput();
       const expectedResponseContains = `"timed_out": false`;
-      await PageObjects.console.monaco.selectAllRequests();
+      await PageObjects.console.selectAllRequests();
       await PageObjects.console.clickPlay();
       await retry.try(async () => {
-        const actualResponse = await PageObjects.console.monaco.getOutputText();
+        const actualResponse = await PageObjects.console.getOutputText();
         log.debug(actualResponse);
         expect(actualResponse).to.contain(expectedResponseContains);
       });
+      // Output panel should not longer be in empty state
+      expect(await PageObjects.console.isOutputPanelEmptyStateVisible()).to.be(false);
     });
 
     // the resizer doesn't work the same as in ace https://github.com/elastic/kibana/issues/184352
     it.skip('should resize the editor', async () => {
-      const editor = await PageObjects.console.monaco.getEditor();
+      const editor = await PageObjects.console.getEditor();
       await browser.setWindowSize(1300, 1100);
       const initialSize = await editor.getSize();
       await browser.setWindowSize(1000, 1100);
@@ -58,13 +63,27 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       expect(initialSize.width).to.be.greaterThan(afterSize.width);
     });
 
+    it('should allow clearing the input editor', async () => {
+      await PageObjects.console.enterText('GET _all');
+
+      // Check current input is not empty
+      const input = await PageObjects.console.getEditorText();
+      expect(input).to.not.be.empty();
+
+      // Clear the output
+      await PageObjects.console.clickClearInput();
+
+      // Check that after clearing the input, the editor is empty
+      expect(await PageObjects.console.getEditorText()).to.be.empty();
+    });
+
     it('should return statusCode 400 to unsupported HTTP verbs', async () => {
       const expectedResponseContains = '"statusCode": 400';
-      await PageObjects.console.monaco.clearEditorText();
-      await PageObjects.console.monaco.enterText('OPTIONS /');
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('OPTIONS /');
       await PageObjects.console.clickPlay();
       await retry.try(async () => {
-        const actualResponse = await PageObjects.console.monaco.getOutputText();
+        const actualResponse = await PageObjects.console.getOutputText();
         log.debug(actualResponse);
         expect(actualResponse).to.contain(expectedResponseContains);
 
@@ -72,28 +91,80 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
     });
 
+    describe('tabs navigation', () => {
+      let currentUrl: string;
+
+      beforeEach(async () => {
+        // Starting from Shell tab
+        await PageObjects.console.openConsole();
+      });
+
+      it('navigating to a tab updates the URL', async () => {
+        // Verify url at initial tab - Shell
+        currentUrl = await browser.getCurrentUrl();
+        expect(await PageObjects.console.isShellOpen()).to.be(true);
+        expect(currentUrl).to.contain(`/shell`);
+
+        // Select History tab and verify URL
+        await PageObjects.console.openHistory();
+        expect(await PageObjects.console.isHistoryOpen()).to.be(true);
+        currentUrl = await browser.getCurrentUrl();
+        expect(currentUrl).to.contain(`/history`);
+
+        // Select Config tab and verify URL
+        await PageObjects.console.openConfig();
+        expect(await PageObjects.console.isConfigOpen()).to.be(true);
+        currentUrl = await browser.getCurrentUrl();
+        expect(currentUrl).to.contain(`/config`);
+      });
+
+      it('tabs should be navigable through URL', async () => {
+        const shellTabUrl = await browser.getCurrentUrl();
+
+        // Navigate to History tab via URL
+        await browser.get(shellTabUrl.replace('/shell', '/history'));
+        currentUrl = await browser.getCurrentUrl();
+        log.debug('Current URL: ' + currentUrl);
+        expect(currentUrl).to.contain(`/history`);
+        expect(await PageObjects.console.isHistoryOpen()).to.be(true);
+
+        // Navigate to Config tab via URL
+        await browser.get(shellTabUrl.replace('/shell', '/config'));
+        currentUrl = await browser.getCurrentUrl();
+        log.debug('Current URL: ' + currentUrl);
+        expect(currentUrl).to.contain(`/config`);
+        expect(await PageObjects.console.isConfigOpen()).to.be(true);
+
+        // Navigate to Shell tab via URL
+        await browser.get(currentUrl.replace('/config', '/shell'));
+        currentUrl = await browser.getCurrentUrl();
+        log.debug('Current URL: ' + currentUrl);
+        expect(currentUrl).to.contain(`/shell`);
+        expect(await PageObjects.console.isShellOpen()).to.be(true);
+      });
+    });
+
     describe('with kbn: prefix in request', () => {
       before(async () => {
-        await PageObjects.console.monaco.clearEditorText();
+        await PageObjects.console.clearEditorText();
       });
       it('it should send successful request to Kibana API', async () => {
         const expectedResponseContains = 'default space';
-        await PageObjects.console.monaco.enterText('GET kbn:/api/spaces/space');
+        await PageObjects.console.enterText('GET kbn:/api/spaces/space');
         await PageObjects.console.clickPlay();
         await retry.try(async () => {
-          const actualResponse = await PageObjects.console.monaco.getOutputText();
+          const actualResponse = await PageObjects.console.getOutputText();
           log.debug(actualResponse);
           expect(actualResponse).to.contain(expectedResponseContains);
         });
       });
     });
 
-    describe('with query params', () => {
+    // Status badge is not yet implented in phase 2
+    describe.skip('with query params', () => {
       it('should issue a successful request', async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText(
-          'GET _cat/aliases?format=json&v=true&pretty=true'
-        );
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText('GET _cat/aliases?format=json&v=true&pretty=true');
         await PageObjects.console.clickPlay();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
@@ -109,9 +180,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('multiple requests output', function () {
       const sendMultipleRequests = async (requests: string[]) => {
         await asyncForEach(requests, async (request) => {
-          await PageObjects.console.monaco.enterText(request);
+          await PageObjects.console.enterText(request);
         });
-        await PageObjects.console.monaco.selectAllRequests();
+        await PageObjects.console.selectAllRequests();
         await PageObjects.console.clickPlay();
       };
 
@@ -124,17 +195,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       beforeEach(async () => {
-        await PageObjects.console.closeHelpIfExists();
-        await PageObjects.console.monaco.clearEditorText();
+        await PageObjects.console.clearEditorText();
       });
 
       it('should contain comments starting with # symbol', async () => {
         await sendMultipleRequests(['\n PUT test-index', '\n DELETE test-index']);
         await retry.try(async () => {
-          const response = await PageObjects.console.monaco.getOutputText();
+          const response = await PageObjects.console.getOutputText();
           log.debug(response);
-          expect(response).to.contain('# PUT test-index 200');
-          expect(response).to.contain('# DELETE test-index 200');
+          expect(response).to.contain('# 2: PUT test-index 200');
+          expect(response).to.contain('# 3: DELETE test-index 200');
         });
       });
 
diff --git a/test/functional/apps/console/monaco/_console_ccs.ts b/test/functional/apps/console/_console_ccs.ts
similarity index 84%
rename from test/functional/apps/console/monaco/_console_ccs.ts
rename to test/functional/apps/console/_console_ccs.ts
index 2ad6f821ef5a6..9f0a47954fae0 100644
--- a/test/functional/apps/console/monaco/_console_ccs.ts
+++ b/test/functional/apps/console/_console_ccs.ts
@@ -8,7 +8,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
@@ -27,9 +27,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await browser.setWindowSize(1200, 1800);
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
-      await retry.try(async () => {
-        await PageObjects.console.collapseHelp();
-      });
+      await PageObjects.console.skipTourIfExists();
     });
 
     after(async () => {
@@ -38,15 +36,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     describe('Perform CCS Search in Console', () => {
       before(async () => {
-        await PageObjects.console.monaco.clearEditorText();
+        await PageObjects.console.clearEditorText();
       });
       it('it should be able to access remote data', async () => {
-        await PageObjects.console.monaco.enterText(
+        await PageObjects.console.enterText(
           '\nGET ftr-remote:logstash-*/_search\n {\n "query": {\n "bool": {\n "must": [\n {"match": {"extension" : "jpg"} \n}\n]\n}\n}\n}'
         );
         await PageObjects.console.clickPlay();
         await retry.try(async () => {
-          const actualResponse = await PageObjects.console.monaco.getOutputText();
+          const actualResponse = await PageObjects.console.getOutputText();
           expect(actualResponse).to.contain('"_index": "ftr-remote:logstash-2015.09.20"');
         });
       });
diff --git a/test/functional/apps/console/monaco/_context_menu.ts b/test/functional/apps/console/_context_menu.ts
similarity index 85%
rename from test/functional/apps/console/monaco/_context_menu.ts
rename to test/functional/apps/console/_context_menu.ts
index 21b75b50355aa..4ee3c2cca40a7 100644
--- a/test/functional/apps/console/monaco/_context_menu.ts
+++ b/test/functional/apps/console/_context_menu.ts
@@ -8,7 +8,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
@@ -22,9 +22,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     before(async () => {
       await PageObjects.common.navigateToApp('console');
       // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.monaco.clearEditorText();
-      await PageObjects.console.monaco.enterText('GET _search');
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('GET _search');
     });
 
     it('should open context menu', async () => {
@@ -44,9 +44,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     describe('Copy as', () => {
       beforeEach(async () => {
         await PageObjects.common.navigateToApp('console');
-        await PageObjects.console.closeHelpIfExists();
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText('GET _search');
+        await PageObjects.console.skipTourIfExists();
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText('GET _search');
       });
 
       it('by default it should copy as curl and show toast when copy as button is clicked', async () => {
@@ -114,8 +114,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should open documentation when open documentation button is clicked', async () => {
-      await PageObjects.console.monaco.clearEditorText();
-      await PageObjects.console.monaco.enterText('GET _search');
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('GET _search');
       await PageObjects.console.clickContextMenu();
       await PageObjects.console.clickOpenDocumentationButton();
 
@@ -135,26 +135,26 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('should auto indent when auto indent button is clicked', async () => {
-      await PageObjects.console.monaco.clearEditorText();
-      await PageObjects.console.monaco.enterText('GET _search\n{"query": {"match_all": {}}}');
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('GET _search\n{"query": {"match_all": {}}}');
       await PageObjects.console.clickContextMenu();
       await PageObjects.console.clickAutoIndentButton();
       // Retry until the request is auto indented
       await retry.try(async () => {
-        const request = await PageObjects.console.monaco.getEditorText();
+        const request = await PageObjects.console.getEditorText();
         expect(request).to.be.eql('GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}');
       });
     });
 
     // not implemented for monaco yet https://github.com/elastic/kibana/issues/185891
     it.skip('should collapse the request when auto indent button is clicked again', async () => {
-      await PageObjects.console.monaco.clearEditorText();
-      await PageObjects.console.monaco.enterText('GET _search\n{"query": {"match_all": {}}}');
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('GET _search\n{"query": {"match_all": {}}}');
       await PageObjects.console.clickContextMenu();
       await PageObjects.console.clickAutoIndentButton();
       // Retry until the request is auto indented
       await retry.try(async () => {
-        const request = await PageObjects.console.monaco.getEditorText();
+        const request = await PageObjects.console.getEditorText();
         expect(request).to.be.eql('GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}');
       });
 
@@ -163,7 +163,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.console.clickAutoIndentButton();
       // Retry until the request is condensed
       await retry.try(async () => {
-        const request = await PageObjects.console.monaco.getEditorText();
+        const request = await PageObjects.console.getEditorText();
         expect(request).to.be.eql('GET _search\n{"query":{"match_all":{}}}');
       });
     });
diff --git a/test/functional/apps/console/_misc_console_behavior.ts b/test/functional/apps/console/_misc_console_behavior.ts
new file mode 100644
index 0000000000000..c0f4ffdd0654a
--- /dev/null
+++ b/test/functional/apps/console/_misc_console_behavior.ts
@@ -0,0 +1,262 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import expect from '@kbn/expect';
+import { REPO_ROOT } from '@kbn/repo-info';
+import { existsSync, readFileSync, writeFileSync, unlinkSync } from 'fs';
+import { resolve } from 'path';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const retry = getService('retry');
+  const browser = getService('browser');
+  const PageObjects = getPageObjects(['common', 'console', 'header']);
+
+  describe('misc console behavior', function testMiscConsoleBehavior() {
+    this.tags('includeFirefox');
+    before(async () => {
+      await browser.setWindowSize(1200, 800);
+      await PageObjects.common.navigateToApp('console');
+      // Ensure that the text area can be interacted with
+      await PageObjects.console.skipTourIfExists();
+    });
+
+    beforeEach(async () => {
+      await PageObjects.console.clearEditorText();
+    });
+
+    describe('keyboard shortcuts', () => {
+      let tabOpened = false;
+      afterEach(async () => {
+        if (tabOpened) {
+          await browser.closeCurrentWindow();
+          tabOpened = false;
+          await browser.switchTab(0);
+        }
+      });
+
+      it('can open and close Shortcuts popover', async () => {
+        // The popover should initially be closed
+        expect(await PageObjects.console.isShortcutsPopoverOpen()).to.be(false);
+
+        // Opening the popover
+        await PageObjects.console.clickShortcutsIcon();
+        expect(await PageObjects.console.isShortcutsPopoverOpen()).to.be(true);
+
+        // Closing the popover
+        await PageObjects.console.clickShortcutsIcon();
+        expect(await PageObjects.console.isShortcutsPopoverOpen()).to.be(false);
+      });
+
+      it('should execute the request when Ctrl+Enter is pressed', async () => {
+        await PageObjects.console.enterText('GET _search');
+        await PageObjects.console.pressCtrlEnter();
+        await retry.try(async () => {
+          const response = await PageObjects.console.getOutputText();
+          expect(response).to.contain('"timed_out": false');
+        });
+      });
+
+      it('should auto indent current request when Ctrl+I is pressed', async () => {
+        await PageObjects.console.enterText('GET _search\n{"query": {"match_all": {}}}');
+        await PageObjects.console.selectCurrentRequest();
+        await PageObjects.console.pressCtrlI();
+        await retry.waitFor('request to be auto indented', async () => {
+          const request = await PageObjects.console.getEditorText();
+          return request === 'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}';
+        });
+      });
+
+      it('should jump to the previous request when Ctrl+Up is pressed', async () => {
+        await PageObjects.console.enterText('\nGET _search/foo');
+        await PageObjects.console.enterText('\nGET _search/bar');
+        await PageObjects.console.pressCtrlUp();
+        await retry.waitFor('request to be selected', async () => {
+          const request = await PageObjects.console.getEditorTextAtLine(1);
+          return request === 'GET _search/foo';
+        });
+      });
+
+      it('should jump to the next request when Ctrl+Down is pressed', async () => {
+        await PageObjects.console.enterText('\nGET _search/foo');
+        await PageObjects.console.enterText('\nGET _search/bar');
+        await PageObjects.console.pressCtrlUp();
+        await PageObjects.console.pressCtrlDown();
+        await retry.waitFor('request to be selected', async () => {
+          const request = await PageObjects.console.getEditorTextAtLine(2);
+          return request === 'GET _search/bar';
+        });
+      });
+
+      // flaky
+      it.skip('should go to line number when Ctrl+L is pressed', async () => {
+        await PageObjects.console.enterText(
+          '\nGET _search/foo\n{\n  "query": {\n    "match_all": {} \n} \n}'
+        );
+        await PageObjects.console.pressCtrlL();
+        // Sleep to allow the line number input to be focused
+        await PageObjects.common.sleep(1000);
+        const alert = await browser.getAlert();
+        await alert?.sendKeys('4');
+        await alert?.accept();
+        await PageObjects.common.sleep(1000);
+        expect(await PageObjects.console.getCurrentLineNumber()).to.be(4);
+      });
+
+      describe('open documentation', () => {
+        const requests = ['GET _search', 'GET test_index/_search', 'GET /_search'];
+        requests.forEach((request) => {
+          it('should open documentation when Ctrl+/ is pressed', async () => {
+            await PageObjects.console.enterText(request);
+            await PageObjects.console.pressEscape();
+            await PageObjects.console.pressCtrlSlash();
+            await retry.tryForTime(10000, async () => {
+              await browser.switchTab(1);
+              tabOpened = true;
+            });
+
+            // Retry until the documentation is loaded
+            await retry.try(async () => {
+              const url = await browser.getCurrentUrl();
+              expect(url).to.contain('search-search.html');
+            });
+          });
+        });
+      });
+    });
+
+    // Settings not yet implemented
+    it.skip('can toggle keyboard shortcuts', async () => {
+      // Enter a sample command
+      await PageObjects.console.enterText('GET _search');
+
+      // Disable keyboard shorcuts
+      await PageObjects.console.toggleKeyboardShortcuts(false);
+
+      // Upon clicking ctrl enter a newline character should be added to the editor
+      await PageObjects.console.pressCtrlEnter();
+      // Shortcut shouldn't have generated any request so output panel should still be in empty state
+      expect(await PageObjects.console.isOutputPanelEmptyStateVisible()).to.be(true);
+
+      // Restore setting
+      await PageObjects.console.toggleKeyboardShortcuts(true);
+    });
+
+    describe('customizable font size', () => {
+      // flaky
+      it('should allow the font size to be customized', async () => {
+        await PageObjects.console.openConfig();
+        await PageObjects.console.setFontSizeSetting(20);
+        await PageObjects.console.openConsole();
+
+        await retry.try(async () => {
+          // the settings are not applied synchronously, so we retry for a time
+          expect(await PageObjects.console.getFontSize()).to.be('20px');
+        });
+
+        await PageObjects.console.openConfig();
+        await PageObjects.console.setFontSizeSetting(24);
+        await PageObjects.console.openConsole();
+
+        await retry.try(async () => {
+          // the settings are not applied synchronously, so we retry for a time
+          expect(await PageObjects.console.getFontSize()).to.be('24px');
+        });
+      });
+    });
+
+    it('can open and close Help popover', async () => {
+      // The popover should initially be closed
+      expect(await PageObjects.console.isHelpPopoverOpen()).to.be(false);
+
+      // Opening the popover
+      await PageObjects.console.clickHelpIcon();
+      expect(await PageObjects.console.isHelpPopoverOpen()).to.be(true);
+
+      // Closing the popover
+      await PageObjects.console.clickHelpIcon();
+      expect(await PageObjects.console.isHelpPopoverOpen()).to.be(false);
+    });
+
+    describe('invalid requests', () => {
+      const invalidRequestText = 'GET _search\n{"query": {"match_all": {';
+      it(`should not delete any text if indentations applied to an invalid request`, async () => {
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText(invalidRequestText);
+        await PageObjects.console.selectCurrentRequest();
+        await PageObjects.console.pressCtrlI();
+        // Sleep for a bit and then check that the text has not changed
+        await PageObjects.common.sleep(1000);
+        await retry.try(async () => {
+          const request = await PageObjects.console.getEditorText();
+          expect(request).to.be.eql(invalidRequestText);
+        });
+      });
+
+      it(`should include an invalid json when sending a request`, async () => {
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.enterText(invalidRequestText);
+        await PageObjects.console.selectCurrentRequest();
+        await PageObjects.console.pressCtrlEnter();
+
+        await retry.try(async () => {
+          const actualResponse = await PageObjects.console.getOutputText();
+          expect(actualResponse).to.contain('parsing_exception');
+          expect(await PageObjects.console.hasSuccessBadge()).to.be(false);
+        });
+      });
+    });
+
+    describe('import/export file', () => {
+      it('can import file into the editor', async () => {
+        await PageObjects.console.clearEditorText();
+
+        // Create input file path
+        const filePath = resolve(REPO_ROOT, `target/functional-tests/downloads/console_import`);
+        writeFileSync(filePath, 'GET _search', 'utf8');
+
+        // Set file to upload and wait for the editor to be updated
+        await PageObjects.console.setFileToUpload(filePath);
+        await PageObjects.console.acceptFileImport();
+        await PageObjects.common.sleep(1000);
+
+        await retry.try(async () => {
+          const request = await PageObjects.console.getEditorText();
+          expect(request).to.be.eql('GET _search');
+        });
+
+        // Clean up input file
+        unlinkSync(filePath);
+      });
+
+      // It seems that the downloadPath is not being resolved correctly in the CI anymore?
+      // Also doesnt seem to work locally either.
+      it.skip('can export input as file', async () => {
+        await PageObjects.console.enterText('GET _search');
+        await PageObjects.console.clickExportButton();
+
+        // Wait for download to trigger
+        await PageObjects.common.sleep(1000);
+
+        const downloadPath = resolve(REPO_ROOT, `target/functional-tests/downloads/console_export`);
+        await retry.try(async () => {
+          const fileExists = existsSync(downloadPath);
+          expect(fileExists).to.be(true);
+        });
+
+        // Verify the downloaded file content
+        const fileContent = readFileSync(downloadPath, 'utf8');
+        expect(fileContent).to.be('GET _search');
+
+        // Clean up downloaded file
+        unlinkSync(downloadPath);
+      });
+    });
+  });
+}
diff --git a/test/functional/apps/console/_onboarding_tour.ts b/test/functional/apps/console/_onboarding_tour.ts
new file mode 100644
index 0000000000000..174c892281c0f
--- /dev/null
+++ b/test/functional/apps/console/_onboarding_tour.ts
@@ -0,0 +1,107 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const log = getService('log');
+  const browser = getService('browser');
+  const PageObjects = getPageObjects(['common', 'console', 'header']);
+  const testSubjects = getService('testSubjects');
+
+  describe('console onboarding tour', function describeIndexTests() {
+    this.tags('includeFirefox');
+    before(async () => {
+      log.debug('navigateTo console');
+      await PageObjects.common.navigateToApp('console');
+    });
+
+    beforeEach(async () => {
+      await browser.clearLocalStorage();
+      await browser.refresh();
+    });
+
+    const isTourStepOpen = async (tourStepDataSubj: string) => {
+      const classAttribute = await testSubjects.getAttribute(tourStepDataSubj, 'class');
+      return classAttribute?.includes('euiPopover-isOpen');
+    };
+
+    const expectAllStepsHidden = async () => {
+      expect(await isTourStepOpen('shellTourStep')).to.be(false);
+      expect(await isTourStepOpen('editorTourStep')).to.be(false);
+      expect(await isTourStepOpen('historyTourStep')).to.be(false);
+      expect(await isTourStepOpen('configTourStep')).to.be(false);
+      expect(await isTourStepOpen('filesTourStep')).to.be(false);
+    };
+
+    it('displays all five steps in the tour', async () => {
+      log.debug('on Shell tour step');
+      expect(await isTourStepOpen('shellTourStep')).to.be(true);
+      await PageObjects.console.clickNextTourStep();
+
+      log.debug('on Editor tour step');
+      expect(await isTourStepOpen('editorTourStep')).to.be(true);
+      await PageObjects.console.clickNextTourStep();
+
+      log.debug('on History tour step');
+      expect(await isTourStepOpen('historyTourStep')).to.be(true);
+      await PageObjects.console.clickNextTourStep();
+
+      log.debug('on Config tour step');
+      expect(await isTourStepOpen('configTourStep')).to.be(true);
+      await PageObjects.console.clickNextTourStep();
+
+      log.debug('on Files tour step');
+      expect(await isTourStepOpen('filesTourStep')).to.be(true);
+      // Last tour step should contain the "Complete" button
+      expect(await testSubjects.exists('consoleCompleteTourButton')).to.be(true);
+      await PageObjects.console.clickCompleteTour();
+
+      // All steps should now be hidden
+      await expectAllStepsHidden();
+
+      // Tour should not show after refreshing the browser
+      await browser.refresh();
+      await expectAllStepsHidden();
+
+      // Tour should reset after clearing local storage
+      await browser.clearLocalStorage();
+      await browser.refresh();
+      expect(await isTourStepOpen('shellTourStep')).to.be(true);
+    });
+
+    it('skipping the tour hides the tour steps', async () => {
+      expect(await isTourStepOpen('shellTourStep')).to.be(true);
+      expect(await testSubjects.exists('consoleSkipTourButton')).to.be(true);
+      await PageObjects.console.clickSkipTour();
+
+      // All steps should now be hidden
+      await expectAllStepsHidden();
+
+      // Tour should not show after refreshing the browser
+      await browser.refresh();
+      await expectAllStepsHidden();
+    });
+
+    it('allows re-running the tour', async () => {
+      await PageObjects.console.skipTourIfExists();
+
+      // Verify that tour is hiddern
+      await expectAllStepsHidden();
+
+      // Re-run tour
+      await PageObjects.console.clickHelpIcon();
+      await PageObjects.console.clickRerunTour();
+
+      // Verify that first tour step is visible
+      expect(await isTourStepOpen('shellTourStep')).to.be(true);
+    });
+  });
+}
diff --git a/test/functional/apps/console/_output_panel.ts b/test/functional/apps/console/_output_panel.ts
new file mode 100644
index 0000000000000..8aa548ce4b139
--- /dev/null
+++ b/test/functional/apps/console/_output_panel.ts
@@ -0,0 +1,85 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import expect from '@kbn/expect';
+import { asyncForEach } from '@kbn/std';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const log = getService('log');
+  const toasts = getService('toasts');
+  const browser = getService('browser');
+  const PageObjects = getPageObjects(['common', 'console', 'header']);
+  const testSubjects = getService('testSubjects');
+
+  describe('console output panel', function describeIndexTests() {
+    before(async () => {
+      log.debug('navigateTo console');
+      await PageObjects.common.navigateToApp('console');
+      await PageObjects.console.skipTourIfExists();
+    });
+
+    beforeEach(async () => {
+      await PageObjects.console.clearEditorText();
+    });
+
+    const sendRequest = async (request: string) => {
+      await PageObjects.console.enterText(request);
+      await PageObjects.console.clickPlay();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    };
+
+    const sendMultipleRequests = async (requests: string[]) => {
+      await asyncForEach(requests, async (request) => {
+        await PageObjects.console.enterText(request);
+      });
+      await PageObjects.console.selectAllRequests();
+      await PageObjects.console.clickPlay();
+      await PageObjects.header.waitUntilLoadingHasFinished();
+    };
+
+    it('should be able to copy the response of a request', async () => {
+      await sendRequest('GET /_search?pretty');
+
+      await PageObjects.console.clickCopyOutput();
+
+      const resultToast = await toasts.getElementByIndex(1);
+      const toastText = await resultToast.getVisibleText();
+
+      expect(toastText).to.be('Selected output copied to clipboard');
+
+      const canReadClipboard = await browser.checkBrowserPermission('clipboard-read');
+      if (canReadClipboard) {
+        const clipboardText = await browser.getClipboardValue();
+        expect(clipboardText).to.contain('"successful":');
+      }
+    });
+
+    it('should show the original request line number in the comment above response', async () => {
+      await sendMultipleRequests(['\n GET /_search?pretty', '\n GET /_search?pretty']);
+
+      const response = await PageObjects.console.getOutputText();
+      expect(response).to.contain('# 2: GET /_search?pretty');
+    });
+
+    it('should clear the console output', async () => {
+      await sendRequest('GET /_search?pretty');
+
+      // Check current output is not empty
+      const response = await PageObjects.console.getOutputText();
+      expect(response).to.not.be.empty();
+
+      // Clear the output
+      await PageObjects.console.clickClearOutput();
+
+      // Check that after clearing the output, the empty state is shown
+      expect(await testSubjects.exists('consoleOutputPanelEmptyState')).to.be.ok();
+    });
+  });
+}
diff --git a/test/functional/apps/console/ace/_settings.ts b/test/functional/apps/console/_settings.ts
similarity index 71%
rename from test/functional/apps/console/ace/_settings.ts
rename to test/functional/apps/console/_settings.ts
index f429daf8481d2..6f61e968ed990 100644
--- a/test/functional/apps/console/ace/_settings.ts
+++ b/test/functional/apps/console/_settings.ts
@@ -8,10 +8,11 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const log = getService('log');
+  const retry = getService('retry');
   const PageObjects = getPageObjects(['common', 'console']);
 
   describe('console settings', function testSettings() {
@@ -20,8 +21,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
       // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.clearTextArea();
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
     });
 
     it('displays the a11y overlay', async () => {
@@ -31,12 +32,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     });
 
     it('disables the a11y overlay via settings', async () => {
-      await PageObjects.console.openSettings();
+      await PageObjects.console.openConfig();
       await PageObjects.console.toggleA11yOverlaySetting();
+      await PageObjects.console.openConsole();
 
-      await PageObjects.console.pressEscape();
-      const isOverlayVisible = await PageObjects.console.isA11yOverlayVisible();
-      expect(isOverlayVisible).to.be(false);
+      await retry.try(async () => {
+        await PageObjects.console.pressEscape();
+        const isOverlayVisible = await PageObjects.console.isA11yOverlayVisible();
+        expect(isOverlayVisible).to.be(false);
+      });
     });
   });
 }
diff --git a/test/functional/apps/console/monaco/_text_input.ts b/test/functional/apps/console/_text_input.ts
similarity index 64%
rename from test/functional/apps/console/monaco/_text_input.ts
rename to test/functional/apps/console/_text_input.ts
index 55a1425703f60..640a31bd19edf 100644
--- a/test/functional/apps/console/monaco/_text_input.ts
+++ b/test/functional/apps/console/_text_input.ts
@@ -8,7 +8,9 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+const RESTORE_AND_EXECUTE = true;
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
@@ -18,11 +20,13 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   describe('text input', function testTextInput() {
     before(async () => {
       await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
+      await PageObjects.console.skipTourIfExists();
     });
 
     beforeEach(async () => {
-      await PageObjects.console.monaco.clearEditorText();
+      await PageObjects.console.openConsole();
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
     });
 
     describe('with a data URI in the load_from query', () => {
@@ -32,7 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         });
 
         await retry.try(async () => {
-          const actualRequest = await PageObjects.console.monaco.getEditorText();
+          const actualRequest = await PageObjects.console.getEditorText();
           expect(actualRequest.trim()).to.eql('hello');
         });
       });
@@ -53,14 +57,14 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     // not yet implemented for monaco https://github.com/elastic/kibana/issues/186001
     describe.skip('copy/pasting cURL commands into the console', () => {
       it('should convert cURL commands into the console request format', async () => {
-        await PageObjects.console.monaco.enterText(
+        await PageObjects.console.enterText(
           `\n curl -XGET "http://localhost:9200/_search?pretty" -d'\n{"query": {"match_all": {}}}'`
         );
-        await PageObjects.console.monaco.copyRequestsToClipboard();
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.pasteClipboardValue();
+        await PageObjects.console.copyRequestsToClipboard();
+        await PageObjects.console.clearEditorText();
+        await PageObjects.console.pasteClipboardValue();
         await retry.try(async () => {
-          const actualRequest = await PageObjects.console.monaco.getEditorText();
+          const actualRequest = await PageObjects.console.getEditorText();
           expect(actualRequest.trim()).to.eql('GET /_search?pretty\n {"query": {"match_all": {}}}');
         });
       });
@@ -68,36 +72,51 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     describe('console history', () => {
       const sendRequest = async (request: string) => {
-        await PageObjects.console.monaco.enterText(request);
+        await PageObjects.console.enterText(request);
         await PageObjects.console.clickPlay();
         await PageObjects.header.waitUntilLoadingHasFinished();
       };
 
       it('should show the history', async () => {
         await sendRequest('GET /_search?pretty');
-        await PageObjects.console.clickHistory();
+        await PageObjects.console.openHistory();
+        await PageObjects.header.waitUntilLoadingHasFinished();
+
         await retry.try(async () => {
           const history = await PageObjects.console.getHistoryEntries();
-          expect(history).to.eql(['/_search?pretty (a few seconds ago)']);
+          expect(history).to.eql(['/_search?pretty\na few seconds ago']);
         });
 
-        // Clear the history
         await PageObjects.console.clickClearHistory();
-        await PageObjects.console.closeHistory();
       });
 
       it('should load a request from history', async () => {
         await sendRequest('GET _search\n{"query": {"match_all": {}}}');
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.clickHistory();
+        await PageObjects.console.clearEditorText();
+
+        await PageObjects.console.openHistory();
         await PageObjects.console.loadRequestFromHistory(0);
+
         await retry.try(async () => {
-          const actualRequest = await PageObjects.console.monaco.getEditorText();
-          expect(actualRequest.trim()).to.eql(
+          const actualRequest = await PageObjects.console.getEditorText();
+          expect(actualRequest.trim()).to.contain(
             'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}'
           );
         });
       });
+
+      it('can restore and execute a request from history', async () => {
+        await sendRequest('GET _search\n{"query": {"match_all": {}}}');
+        await PageObjects.console.clearEditorText();
+
+        await PageObjects.console.openHistory();
+        await PageObjects.console.loadRequestFromHistory(0, RESTORE_AND_EXECUTE);
+
+        await retry.try(async () => {
+          const output = await PageObjects.console.getOutputText();
+          expect(output).to.contain('successful');
+        });
+      });
     });
   });
 }
diff --git a/test/functional/apps/console/monaco/_variables.ts b/test/functional/apps/console/_variables.ts
similarity index 74%
rename from test/functional/apps/console/monaco/_variables.ts
rename to test/functional/apps/console/_variables.ts
index 39736ef7bc328..8b5cc0f078e3f 100644
--- a/test/functional/apps/console/monaco/_variables.ts
+++ b/test/functional/apps/console/_variables.ts
@@ -8,7 +8,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const retry = getService('retry');
@@ -16,33 +16,45 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const PageObjects = getPageObjects(['common', 'console', 'header']);
 
   describe('Console variables', function testConsoleVariables() {
-    // FLAKY on firefox: https://github.com/elastic/kibana/issues/157776
-    // this.tags('includeFirefox');
+    this.tags('includeFirefox');
+
     before(async () => {
       log.debug('navigateTo console');
       await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.monaco.clearEditorText();
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
     });
 
     it('should allow creating a new variable', async () => {
+      await PageObjects.console.openConfig();
+
       await PageObjects.console.addNewVariable({ name: 'index1', value: 'test' });
+
       const variables = await PageObjects.console.getVariables();
       log.debug(variables);
-      expect(variables).to.contain('index1');
+      const variableNames = variables.map((variable) => variable.name);
+      expect(variableNames).to.contain('${index1}');
     });
 
     it('should allow removing a variable', async () => {
+      await PageObjects.console.openConfig();
+
       await PageObjects.console.addNewVariable({ name: 'index2', value: 'test' });
       await PageObjects.console.removeVariables();
+
       const variables = await PageObjects.console.getVariables();
+      log.debug(variables);
       expect(variables).to.eql([]);
     });
 
     describe('with variables in url', () => {
       it('should send a successful request', async () => {
+        await PageObjects.console.openConfig();
         await PageObjects.console.addNewVariable({ name: 'index3', value: '_search' });
-        await PageObjects.console.monaco.enterText('\n GET ${index3}');
+        await PageObjects.console.openConsole();
+
+        await PageObjects.console.clickClearInput();
+        await PageObjects.console.enterText('\n GET ${index3}');
         await PageObjects.console.clickPlay();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
@@ -53,12 +65,12 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
       });
     });
 
-    describe('with variables in request body', () => {
+    describe.skip('with variables in request body', () => {
       // bug in monaco https://github.com/elastic/kibana/issues/185999
       it.skip('should send a successful request', async () => {
         await PageObjects.console.addNewVariable({ name: 'query1', value: '{"match_all": {}}' });
-        await PageObjects.console.monaco.enterText('\n GET _search\n');
-        await PageObjects.console.monaco.enterText(`{\n\t"query": "\${query1}"`);
+        await PageObjects.console.enterText('\n GET _search\n');
+        await PageObjects.console.enterText(`{\n\t"query": "\${query1}"`);
         await PageObjects.console.clickPlay();
         await PageObjects.header.waitUntilLoadingHasFinished();
 
diff --git a/test/functional/apps/console/ace/_vector_tile.ts b/test/functional/apps/console/_vector_tile.ts
similarity index 88%
rename from test/functional/apps/console/ace/_vector_tile.ts
rename to test/functional/apps/console/_vector_tile.ts
index 9083b80ec9f99..2c87c34ed6761 100644
--- a/test/functional/apps/console/ace/_vector_tile.ts
+++ b/test/functional/apps/console/_vector_tile.ts
@@ -8,7 +8,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const PageObjects = getPageObjects(['common', 'console', 'header', 'home']);
@@ -25,15 +25,15 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.home.addSampleDataSet('logs');
       await PageObjects.header.waitUntilLoadingHasFinished();
       await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.clearTextArea();
+      await PageObjects.console.skipTourIfExists();
+      await PageObjects.console.clearEditorText();
     });
 
     it('should validate response', async () => {
       await PageObjects.console.enterText(`GET kibana_sample_data_logs/_mvt/geo.coordinates/0/0/0`);
       await PageObjects.console.clickPlay();
       await retry.try(async () => {
-        const actualResponse = await PageObjects.console.getResponse();
+        const actualResponse = await PageObjects.console.getOutputText();
         expect(actualResponse).to.contain('"meta": [');
       });
     });
diff --git a/test/functional/apps/console/monaco/_xjson.ts b/test/functional/apps/console/_xjson.ts
similarity index 62%
rename from test/functional/apps/console/monaco/_xjson.ts
rename to test/functional/apps/console/_xjson.ts
index 09f770897c48f..5203d62f82818 100644
--- a/test/functional/apps/console/monaco/_xjson.ts
+++ b/test/functional/apps/console/_xjson.ts
@@ -8,7 +8,7 @@
  */
 
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default ({ getService, getPageObjects }: FtrProviderContext) => {
   const retry = getService('retry');
@@ -18,101 +18,103 @@ export default ({ getService, getPageObjects }: FtrProviderContext) => {
     this.tags('includeFirefox');
     before(async () => {
       await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
+      await PageObjects.console.skipTourIfExists();
     });
 
     beforeEach(async () => {
-      await PageObjects.console.monaco.clearEditorText();
+      await PageObjects.console.clearEditorText();
     });
 
     const executeRequest = async (request = '\n GET _search') => {
-      await PageObjects.console.monaco.enterText(request);
+      await PageObjects.console.enterText(request);
       await PageObjects.console.clickPlay();
       await PageObjects.header.waitUntilLoadingHasFinished();
     };
 
     describe('inline http request', () => {
       it('should not have validation errors', async () => {
-        await PageObjects.console.monaco.enterText('\n GET foo/bar');
-        expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+        await PageObjects.console.enterText('\n GET foo/bar');
+        expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
       });
 
       it('should have validation error for invalid method', async () => {
-        await PageObjects.console.monaco.enterText('\n FOO foo/bar');
+        await PageObjects.console.enterText('\n FOO foo/bar');
         // Retry because the error marker is not always immediately visible.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(true);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
         });
       });
 
       it('should have validation error for invalid path', async () => {
-        await PageObjects.console.monaco.enterText('\n GET');
+        await PageObjects.console.enterText('\n GET');
         // Retry because the error marker is not always immediately visible.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(true);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
         });
       });
 
       it('should have validation error for invalid body', async () => {
-        await PageObjects.console.monaco.enterText('\n POST foo/bar\n {"foo": "bar"');
+        await PageObjects.console.enterText('\n POST foo/bar\n {"foo": "bar"');
         // Retry because the error marker is not always immediately visible.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(true);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
         });
       });
 
       it('should not trigger error for multiple bodies for _msearch requests', async () => {
-        await PageObjects.console.monaco.enterText(
+        await PageObjects.console.enterText(
           '\nGET foo/_msearch \n{}\n{"query": {"match_all": {}}}\n{"index": "bar"}\n{"query": {"match_all": {}}}'
         );
         // Retry until typing is finished.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
         });
       });
 
       it('should not trigger validation errors for multiple JSON blocks', async () => {
-        await PageObjects.console.monaco.enterText('\nPOST test/doc/1 \n{\n "foo": "bar"\n}');
-        await PageObjects.console.monaco.enterText('\nPOST test/doc/2 \n{\n "foo": "baz"\n}');
-        await PageObjects.console.monaco.enterText('\nPOST test/doc/3 \n{\n "foo": "qux"\n}');
+        await PageObjects.console.enterText('\nPOST test/doc/1 \n{\n "foo": "bar"\n}');
+        await PageObjects.console.enterText('\nPOST test/doc/2 \n{\n "foo": "baz"\n}');
+        await PageObjects.console.enterText('\nPOST test/doc/3 \n{\n "foo": "qux"\n}');
         // Retry until typing is finished.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
         });
       });
 
       it('should allow escaping quotation mark by wrapping it in triple quotes', async () => {
-        await PageObjects.console.monaco.enterText(
+        await PageObjects.console.enterText(
           '\nPOST test/_doc/1 \n{\n "foo": """look "escaped" quotes"""\n}'
         );
         // Retry until typing is finished and validation errors are gone.
         await retry.try(async () => {
-          expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+          expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
         });
       });
 
-      it('should allow inline comments in request url row', async () => {
+      // Status badge not yet implemented in phase 2
+      it.skip('should allow inline comments in request url row', async () => {
         await executeRequest('\n GET _search // inline comment');
-        expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+        expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
         expect(await PageObjects.console.getResponseStatus()).to.eql(200);
       });
 
-      it('should allow inline comments in request body', async () => {
+      // Status badge not yet implemented in phase 2
+      it.skip('should allow inline comments in request body', async () => {
         await executeRequest(
           '\n GET _search \n{\n "query": {\n "match_all": {} // inline comment\n}\n}'
         );
-        expect(await PageObjects.console.monaco.hasInvalidSyntax()).to.be(false);
+        expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
         expect(await PageObjects.console.getResponseStatus()).to.eql(200);
       });
 
       it('should print warning for deprecated request', async () => {
         await executeRequest('\nGET .kibana');
-        expect(await PageObjects.console.monaco.responseHasDeprecationWarning()).to.be(true);
+        expect(await PageObjects.console.responseHasDeprecationWarning()).to.be(true);
       });
 
       it('should not print warning for non-deprecated request', async () => {
         await executeRequest('\n GET _search');
-        expect(await PageObjects.console.monaco.responseHasDeprecationWarning()).to.be(false);
+        expect(await PageObjects.console.responseHasDeprecationWarning()).to.be(false);
       });
     });
   });
diff --git a/test/functional/apps/console/ace/_comments.ts b/test/functional/apps/console/ace/_comments.ts
deleted file mode 100644
index 42a0f79943ad1..0000000000000
--- a/test/functional/apps/console/ace/_comments.ts
+++ /dev/null
@@ -1,232 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const log = getService('log');
-  const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  const enterRequest = async (url: string, body: string) => {
-    await PageObjects.console.clearTextArea();
-    await PageObjects.console.enterRequest(url);
-    await PageObjects.console.pressEnter();
-    await PageObjects.console.enterText(body);
-  };
-
-  async function runTest(input: { url?: string; body: string }, fn: () => Promise<void>) {
-    await enterRequest(input.url ?? '\nGET search', input.body);
-    await fn();
-  }
-
-  // Failing: See https://github.com/elastic/kibana/issues/138160
-  describe.skip('console app', function testComments() {
-    this.tags('includeFirefox');
-    before(async () => {
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-      // blocks the close help button for several seconds so just retry until we can click it.
-      await retry.try(async () => {
-        await PageObjects.console.collapseHelp();
-      });
-    });
-
-    describe('with comments', () => {
-      describe('with single line comments', () => {
-        it('should allow in request url, using //', async () => {
-          await runTest(
-            {
-              url: '\n// GET _search',
-              body: '',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should allow in request body, using //', async () => {
-          await runTest(
-            {
-              body: '{\n\t\t"query": {\n\t\t\t// "match_all": {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should allow in request url, using #', async () => {
-          await runTest(
-            {
-              url: '\n # GET _search',
-              body: '',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should allow in request body, using #', async () => {
-          await runTest(
-            {
-              body: '{\n\t\t"query": {\n\t\t\t# "match_all": {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field names, using //', async () => {
-          await runTest(
-            {
-              body: '{\n "//": {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field values, using //', async () => {
-          await runTest(
-            {
-              body: '{\n "f": "//"',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field names, using #', async () => {
-          await runTest(
-            {
-              body: '{\n "#": {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field values, using #', async () => {
-          await runTest(
-            {
-              body: '{\n "f": "#"',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-      });
-
-      describe('with multiline comments', () => {
-        it('should allow in request url, using /* */', async () => {
-          await runTest(
-            {
-              url: '\n /* \nGET _search \n*/',
-              body: '',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should allow in request body, using /* */', async () => {
-          await runTest(
-            {
-              body: '{\n\t\t"query": {\n\t\t\t/* "match_all": {} */',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field names, using /*', async () => {
-          await runTest(
-            {
-              body: '{\n "/*": {} \n\t\t /* "f": 1 */',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-
-        it('should accept as field values, using */', async () => {
-          await runTest(
-            {
-              body: '{\n /* "f": 1 */ \n"f": "*/"',
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(false);
-              expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-            }
-          );
-        });
-      });
-
-      describe('with invalid syntax in request body', () => {
-        it('should highlight invalid syntax', async () => {
-          await runTest(
-            {
-              body: '{\n "query": \'\'', // E.g. using single quotes
-            },
-            async () => {
-              expect(await PageObjects.console.hasInvalidSyntax()).to.be(true);
-            }
-          );
-        });
-      });
-
-      describe('with invalid request', () => {
-        it('with invalid character should display error marker', async () => {
-          await runTest(
-            {
-              body: '{\n $ "query": {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasErrorMarker()).to.be(true);
-            }
-          );
-        });
-
-        it('with missing field name', async () => {
-          await runTest(
-            {
-              body: '{\n "query": {},\n {}',
-            },
-            async () => {
-              expect(await PageObjects.console.hasErrorMarker()).to.be(true);
-            }
-          );
-        });
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_console.ts b/test/functional/apps/console/ace/_console.ts
deleted file mode 100644
index c8519f53c3c0b..0000000000000
--- a/test/functional/apps/console/ace/_console.ts
+++ /dev/null
@@ -1,210 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { asyncForEach } from '@kbn/std';
-import { DEFAULT_INPUT_VALUE } from '@kbn/console-plugin/common/constants';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const retry = getService('retry');
-  const log = getService('log');
-  const browser = getService('browser');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-  const security = getService('security');
-  const testSubjects = getService('testSubjects');
-
-  describe('console app', function describeIndexTests() {
-    this.tags('includeFirefox');
-    before(async () => {
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-    });
-    beforeEach(async () => {
-      await PageObjects.console.closeHelpIfExists();
-    });
-
-    it('should show the default request', async () => {
-      await retry.try(async () => {
-        const actualRequest = await PageObjects.console.getRequest();
-        log.debug(actualRequest);
-        expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
-      });
-    });
-
-    it('default request response should include `"timed_out" : false`', async () => {
-      const expectedResponseContains = `"timed_out": false`;
-      await PageObjects.console.selectAllRequests();
-      await PageObjects.console.clickPlay();
-      await retry.try(async () => {
-        const actualResponse = await PageObjects.console.getResponse();
-        log.debug(actualResponse);
-        expect(actualResponse).to.contain(expectedResponseContains);
-      });
-    });
-
-    it('should resize the editor', async () => {
-      const editor = await PageObjects.console.getEditor();
-      await browser.setWindowSize(1300, 1100);
-      const initialSize = await editor.getSize();
-      await browser.setWindowSize(1000, 1100);
-      const afterSize = await editor.getSize();
-      expect(initialSize.width).to.be.greaterThan(afterSize.width);
-    });
-
-    it('should return statusCode 400 to unsupported HTTP verbs', async () => {
-      const expectedResponseContains = '"statusCode": 400';
-      await PageObjects.console.clearTextArea();
-      await PageObjects.console.enterRequest('OPTIONS /');
-      await PageObjects.console.clickPlay();
-      await retry.try(async () => {
-        const actualResponse = await PageObjects.console.getResponse();
-        log.debug(actualResponse);
-        expect(actualResponse).to.contain(expectedResponseContains);
-
-        expect(await PageObjects.console.hasSuccessBadge()).to.be(false);
-      });
-    });
-
-    describe('with kbn: prefix in request', () => {
-      before(async () => {
-        await PageObjects.console.clearTextArea();
-      });
-      it('it should send successful request to Kibana API', async () => {
-        const expectedResponseContains = 'default space';
-        await PageObjects.console.enterRequest('\n GET kbn:/api/spaces/space');
-        await PageObjects.console.clickPlay();
-        await retry.try(async () => {
-          const actualResponse = await PageObjects.console.getResponse();
-          log.debug(actualResponse);
-          expect(actualResponse).to.contain(expectedResponseContains);
-        });
-      });
-    });
-
-    describe('with query params', () => {
-      it('should issue a successful request', async () => {
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.enterRequest(
-          '\n GET _cat/aliases?format=json&v=true&pretty=true'
-        );
-        await PageObjects.console.clickPlay();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-
-        await retry.try(async () => {
-          const status = await PageObjects.console.getResponseStatus();
-          expect(status).to.eql(200);
-        });
-      });
-    });
-
-    describe('multiple requests output', function () {
-      const sendMultipleRequests = async (requests: string[]) => {
-        await asyncForEach(requests, async (request) => {
-          await PageObjects.console.enterRequest(request);
-        });
-        await PageObjects.console.selectAllRequests();
-        await PageObjects.console.clickPlay();
-      };
-
-      before(async () => {
-        await security.testUser.setRoles(['kibana_admin', 'test_index']);
-      });
-
-      after(async () => {
-        await security.testUser.restoreDefaults();
-      });
-
-      beforeEach(async () => {
-        // Welcome fly out exists sometimes
-        const flyOutExists = await testSubjects.exists('euiFlyoutCloseButton');
-        if (flyOutExists) {
-          await testSubjects.click('euiFlyoutCloseButton');
-        }
-        await PageObjects.console.clearTextArea();
-      });
-
-      it('should contain comments starting with # symbol', async () => {
-        await sendMultipleRequests(['\n PUT test-index', '\n DELETE test-index']);
-        await retry.try(async () => {
-          const response = await PageObjects.console.getResponse();
-          log.debug(response);
-          expect(response).to.contain('# PUT test-index 200');
-          expect(response).to.contain('# DELETE test-index 200');
-        });
-      });
-
-      it('should display status badges', async () => {
-        await sendMultipleRequests(['\n GET _search/test', '\n GET _search']);
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        expect(await PageObjects.console.hasWarningBadge()).to.be(true);
-        expect(await PageObjects.console.hasSuccessBadge()).to.be(true);
-      });
-    });
-
-    // FLAKY: https://github.com/elastic/kibana/issues/152825
-    describe.skip('with folded/unfolded lines in request body', () => {
-      const enterRequest = async () => {
-        await PageObjects.console.enterRequest('\nGET test/doc/1 \n{\n\t\t"_source": []');
-        await PageObjects.console.clickPlay();
-      };
-
-      beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
-      });
-
-      it('should restore the state of folding/unfolding when navigating back to Console', async () => {
-        await enterRequest();
-        await PageObjects.console.clickFoldWidget();
-        await PageObjects.common.navigateToApp('home');
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        await PageObjects.common.navigateToApp('console');
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        await PageObjects.console.closeHelpIfExists();
-        expect(await PageObjects.console.hasFolds()).to.be(true);
-      });
-
-      it('should restore the state of folding/unfolding when the page reloads', async () => {
-        await enterRequest();
-        await PageObjects.console.clickFoldWidget();
-        await browser.refresh();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        expect(await PageObjects.console.hasFolds()).to.be(true);
-      });
-
-      it('should not have folds by default', async () => {
-        await enterRequest();
-        await browser.refresh();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        expect(await PageObjects.console.hasFolds()).to.be(false);
-      });
-
-      it(`doesn't fail if a fold fails`, async () => {
-        // for more details, see https://github.com/elastic/kibana/issues/151563
-        await browser.clearLocalStorage();
-        await browser.setLocalStorageItem(
-          'sense:folds',
-          '[{"start":{"row":1,"column":1},"end":{"row":82,"column":4}}]'
-        );
-        await browser.setLocalStorageItem(
-          'sense:console_local_text-object_95a511b6-b6e1-4ea6-9344-428bf5183d88',
-          '{"id":"95a511b6-b6e1-4ea6-9344-428bf5183d88","createdAt":1677592109975,"updatedAt":1677592148666,"text":"GET _cat/indices"}'
-        );
-        await browser.refresh();
-
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        await PageObjects.console.closeHelpIfExists();
-        const request = await PageObjects.console.getRequest();
-        // the request is restored from the local storage value
-        expect(request).to.eql('GET _cat/indices');
-        await browser.clearLocalStorage();
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_console_ccs.ts b/test/functional/apps/console/ace/_console_ccs.ts
deleted file mode 100644
index d20efc4164809..0000000000000
--- a/test/functional/apps/console/ace/_console_ccs.ts
+++ /dev/null
@@ -1,52 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const retry = getService('retry');
-  const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'console']);
-  const remoteEsArchiver = getService('remoteEsArchiver' as 'esArchiver');
-
-  describe('Console App CCS', function describeIndexTests() {
-    this.tags('includeFirefox');
-    before(async () => {
-      await remoteEsArchiver.loadIfNeeded(
-        'test/functional/fixtures/es_archiver/logstash_functional'
-      );
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-      await retry.try(async () => {
-        await PageObjects.console.collapseHelp();
-      });
-    });
-
-    after(async () => {
-      await remoteEsArchiver.unload('test/functional/fixtures/es_archiver/logstash_functional');
-    });
-
-    describe('Perform CCS Search in Console', () => {
-      before(async () => {
-        await PageObjects.console.clearTextArea();
-      });
-      it('it should be able to access remote data', async () => {
-        await PageObjects.console.enterRequest(
-          '\nGET ftr-remote:logstash-*/_search\n {\n "query": {\n "bool": {\n "must": [\n {"match": {"extension" : "jpg"'
-        );
-        await PageObjects.console.clickPlay();
-        await retry.try(async () => {
-          const actualResponse = await PageObjects.console.getResponse();
-          expect(actualResponse).to.contain('"_index": "ftr-remote:logstash-2015.09.20"');
-        });
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_context_menu.ts b/test/functional/apps/console/ace/_context_menu.ts
deleted file mode 100644
index b2c103ca6f6bd..0000000000000
--- a/test/functional/apps/console/ace/_context_menu.ts
+++ /dev/null
@@ -1,104 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const log = getService('log');
-  const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'console']);
-  const browser = getService('browser');
-  const toasts = getService('toasts');
-
-  describe('console context menu', function testContextMenu() {
-    before(async () => {
-      await PageObjects.common.navigateToApp('console');
-      // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.clearTextArea();
-      await PageObjects.console.enterRequest();
-    });
-
-    it('should open context menu', async () => {
-      expect(await PageObjects.console.isContextMenuOpen()).to.be(false);
-      await PageObjects.console.clickContextMenu();
-      expect(PageObjects.console.isContextMenuOpen()).to.be.eql(true);
-    });
-
-    it('should have options to copy as curl, open documentation, and auto indent', async () => {
-      await PageObjects.console.clickContextMenu();
-      expect(PageObjects.console.isContextMenuOpen()).to.be.eql(true);
-      expect(PageObjects.console.isCopyAsCurlButtonVisible()).to.be.eql(true);
-      expect(PageObjects.console.isOpenDocumentationButtonVisible()).to.be.eql(true);
-      expect(PageObjects.console.isAutoIndentButtonVisible()).to.be.eql(true);
-    });
-
-    it('should copy as curl and show toast when copy as curl button is clicked', async () => {
-      await PageObjects.console.clickContextMenu();
-      await PageObjects.console.clickCopyAsCurlButton();
-
-      const resultToast = await toasts.getElementByIndex(1);
-      const toastText = await resultToast.getVisibleText();
-
-      if (toastText.includes('Write permission denied')) {
-        log.debug('Write permission denied, skipping test');
-        return;
-      }
-
-      expect(toastText).to.be('Request copied as cURL');
-
-      const canReadClipboard = await browser.checkBrowserPermission('clipboard-read');
-      if (canReadClipboard) {
-        const clipboardText = await browser.getClipboardValue();
-        expect(clipboardText).to.contain('curl -XGET');
-      }
-    });
-
-    it('should open documentation when open documentation button is clicked', async () => {
-      await PageObjects.console.clickContextMenu();
-      await PageObjects.console.clickOpenDocumentationButton();
-
-      await retry.tryForTime(10000, async () => {
-        await browser.switchTab(1);
-      });
-
-      // Retry until the documentation is loaded
-      await retry.try(async () => {
-        const url = await browser.getCurrentUrl();
-        expect(url).to.contain('search-search.html');
-      });
-
-      // Close the documentation tab
-      await browser.closeCurrentWindow();
-      await browser.switchTab(0);
-    });
-
-    it('should toggle auto indent when auto indent button is clicked', async () => {
-      await PageObjects.console.clearTextArea();
-      await PageObjects.console.enterRequest('GET _search\n{"query": {"match_all": {}}}');
-      await PageObjects.console.clickContextMenu();
-      await PageObjects.console.clickAutoIndentButton();
-      // Retry until the request is auto indented
-      await retry.try(async () => {
-        const request = await PageObjects.console.getRequest();
-        expect(request).to.be.eql('GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}');
-      });
-
-      await PageObjects.console.clickContextMenu();
-      // Click the auto-indent button again to condense request
-      await PageObjects.console.clickAutoIndentButton();
-      // Retry until the request is condensed
-      await retry.try(async () => {
-        const request = await PageObjects.console.getRequest();
-        expect(request).to.be.eql('GET _search\n{"query":{"match_all":{}}}');
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_misc_console_behavior.ts b/test/functional/apps/console/ace/_misc_console_behavior.ts
deleted file mode 100644
index 0cdf735de6e67..0000000000000
--- a/test/functional/apps/console/ace/_misc_console_behavior.ts
+++ /dev/null
@@ -1,142 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const retry = getService('retry');
-  const browser = getService('browser');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  describe('misc console behavior', function testMiscConsoleBehavior() {
-    this.tags('includeFirefox');
-    before(async () => {
-      await browser.setWindowSize(1200, 800);
-      await PageObjects.common.navigateToApp('console');
-      // Ensure that the text area can be interacted with
-      await PageObjects.console.collapseHelp();
-    });
-
-    beforeEach(async () => {
-      await PageObjects.console.clearTextArea();
-    });
-
-    // FLAKY: https://github.com/elastic/kibana/issues/151056
-    describe.skip('collapsible JSON blocks', () => {
-      it('should collapse and expand JSON blocks', async () => {
-        const blockNumber = 1;
-        await PageObjects.console.enterRequest(
-          'GET _search\n{\n  "query": {\n    "match_all": {}\n'
-        );
-        // Sleep to allow the JSON to be parsed and rendered
-        await PageObjects.common.sleep(1000);
-        await PageObjects.console.collapseJsonBlock(blockNumber);
-        expect(await PageObjects.console.isJsonBlockExpanded(blockNumber)).to.be(false);
-        await PageObjects.console.expandJsonBlock(blockNumber);
-        expect(await PageObjects.console.isJsonBlockExpanded(blockNumber)).to.be(true);
-      });
-    });
-
-    describe('keyboard shortcuts', () => {
-      let tabCount = 1;
-
-      after(async () => {
-        if (tabCount > 1) {
-          await browser.closeCurrentWindow();
-          await browser.switchTab(0);
-        }
-      });
-
-      it('should execute the request when Ctrl+Enter is pressed', async () => {
-        await PageObjects.console.enterRequest();
-        await PageObjects.console.pressCtrlEnter();
-        await retry.try(async () => {
-          const response = await PageObjects.console.getResponse();
-          expect(response).to.contain('"timed_out": false');
-        });
-      });
-
-      it('should auto indent current request when Ctrl+I is pressed', async () => {
-        await PageObjects.console.enterRequest('GET _search\n{"query": {"match_all": {}}}');
-        await PageObjects.console.selectCurrentRequest();
-        await PageObjects.console.pressCtrlI();
-        await retry.waitFor('request to be auto indented', async () => {
-          const request = await PageObjects.console.getRequest();
-          return request === 'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}';
-        });
-      });
-
-      it('should jump to the previous request when Ctrl+Up is pressed', async () => {
-        await PageObjects.console.enterRequest('\nGET _search/foo');
-        await PageObjects.console.enterRequest('\nGET _search/bar');
-        await PageObjects.console.pressCtrlUp();
-        await retry.waitFor('request to be selected', async () => {
-          const request = await PageObjects.console.getRequestAtLine(1);
-          return request === 'GET _search/foo';
-        });
-      });
-
-      it('should jump to the next request when Ctrl+Down is pressed', async () => {
-        await PageObjects.console.enterRequest('\nGET _search/foo');
-        await PageObjects.console.enterRequest('\nGET _search/bar');
-        await PageObjects.console.pressCtrlUp();
-        await PageObjects.console.pressCtrlDown();
-        await retry.waitFor('request to be selected', async () => {
-          const request = await PageObjects.console.getRequestAtLine(2);
-          return request === 'GET _search/bar';
-        });
-      });
-
-      it('should go to line number when Ctrl+L is pressed', async () => {
-        await PageObjects.console.enterRequest(
-          '\nGET _search/foo\n{\n  "query": {\n    "match_all": {}'
-        );
-        await PageObjects.console.pressCtrlL();
-        // Sleep to allow the line number input to be focused
-        await PageObjects.common.sleep(1000);
-        const alert = await browser.getAlert();
-        await alert?.sendKeys('4');
-        await alert?.accept();
-        expect(await PageObjects.console.getCurrentLineNumber()).to.be(4);
-      });
-
-      it('should open documentation when Ctrl+/ is pressed', async () => {
-        await PageObjects.console.enterRequest('GET _search');
-        await PageObjects.console.pressCtrlSlash();
-        await retry.tryForTime(10000, async () => {
-          await browser.switchTab(1);
-          tabCount++;
-        });
-
-        // Retry until the documentation is loaded
-        await retry.try(async () => {
-          const url = await browser.getCurrentUrl();
-          expect(url).to.contain('search-search.html');
-        });
-      });
-    });
-
-    describe('customizable font size', () => {
-      it('should allow the font size to be customized', async () => {
-        await PageObjects.console.setFontSizeSetting(20);
-        await retry.try(async () => {
-          // the settings are not applied synchronously, so we retry for a time
-          expect(await PageObjects.console.getRequestFontSize()).to.be('20px');
-        });
-
-        await PageObjects.console.setFontSizeSetting(24);
-        await retry.try(async () => {
-          // the settings are not applied synchronously, so we retry for a time
-          expect(await PageObjects.console.getRequestFontSize()).to.be('24px');
-        });
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_text_input.ts b/test/functional/apps/console/ace/_text_input.ts
deleted file mode 100644
index dbce66db2ed19..0000000000000
--- a/test/functional/apps/console/ace/_text_input.ts
+++ /dev/null
@@ -1,102 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const retry = getService('retry');
-  const toasts = getService('toasts');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  describe('text input', function testTextInput() {
-    before(async () => {
-      await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.collapseHelp();
-    });
-
-    beforeEach(async () => {
-      await PageObjects.console.clearTextArea();
-    });
-
-    describe('with a data URI in the load_from query', () => {
-      it('loads the data from the URI', async () => {
-        await PageObjects.common.navigateToApp('console', {
-          hash: '#/console?load_from=data:text/plain,BYUwNmD2Q',
-        });
-
-        await retry.try(async () => {
-          const actualRequest = await PageObjects.console.getRequest();
-          expect(actualRequest.trim()).to.eql('hello');
-        });
-      });
-
-      describe('with invalid data', () => {
-        it('shows a toast error', async () => {
-          await PageObjects.common.navigateToApp('console', {
-            hash: '#/console?load_from=data:text/plain,BYUwNmD2',
-          });
-
-          await retry.try(async () => {
-            expect(await toasts.getCount()).to.equal(1);
-          });
-        });
-      });
-    });
-
-    describe('copy/pasting cURL commands into the console', () => {
-      it('should convert cURL commands into the console request format', async () => {
-        await PageObjects.console.enterRequest(
-          `\n curl -XGET "http://localhost:9200/_search?pretty" -d'\n{"query": {"match_all": {}}}'`
-        );
-        await PageObjects.console.copyRequestsToClipboard();
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.pasteClipboardValue();
-        await retry.try(async () => {
-          const actualRequest = await PageObjects.console.getRequest();
-          expect(actualRequest.trim()).to.eql('GET /_search?pretty\n {"query": {"match_all": {}}}');
-        });
-      });
-    });
-
-    describe('console history', () => {
-      const sendRequest = async (request: string) => {
-        await PageObjects.console.enterRequest(request);
-        await PageObjects.console.clickPlay();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-      };
-
-      it('should show the history', async () => {
-        await sendRequest('GET /_search?pretty');
-        await PageObjects.console.clickHistory();
-        await retry.try(async () => {
-          const history = await PageObjects.console.getHistoryEntries();
-          expect(history).to.eql(['/_search?pretty (a few seconds ago)']);
-        });
-
-        // Clear the history
-        await PageObjects.console.clickClearHistory();
-        await PageObjects.console.closeHistory();
-      });
-
-      it('should load a request from history', async () => {
-        await sendRequest('GET _search\n{"query": {"match_all": {}}}');
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.clickHistory();
-        await PageObjects.console.loadRequestFromHistory(0);
-        await retry.try(async () => {
-          const actualRequest = await PageObjects.console.getRequest();
-          expect(actualRequest.trim()).to.eql(
-            'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}'
-          );
-        });
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/ace/_variables.ts b/test/functional/apps/console/ace/_variables.ts
deleted file mode 100644
index 6244bad661a36..0000000000000
--- a/test/functional/apps/console/ace/_variables.ts
+++ /dev/null
@@ -1,75 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default ({ getService, getPageObjects }: FtrProviderContext) => {
-  const retry = getService('retry');
-  const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  describe('Console variables', function testConsoleVariables() {
-    // FLAKY on firefox: https://github.com/elastic/kibana/issues/157776
-    // this.tags('includeFirefox');
-    before(async () => {
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-      await retry.try(async () => {
-        await PageObjects.console.collapseHelp();
-        await PageObjects.console.clearTextArea();
-      });
-    });
-
-    it('should allow creating a new variable', async () => {
-      await PageObjects.console.addNewVariable({ name: 'index1', value: 'test' });
-      const variables = await PageObjects.console.getVariables();
-      log.debug(variables);
-      expect(variables).to.contain('index1');
-    });
-
-    it('should allow removing a variable', async () => {
-      await PageObjects.console.addNewVariable({ name: 'index2', value: 'test' });
-      await PageObjects.console.removeVariables();
-      const variables = await PageObjects.console.getVariables();
-      expect(variables).to.eql([]);
-    });
-
-    describe('with variables in url', () => {
-      it('should send a successful request', async () => {
-        await PageObjects.console.addNewVariable({ name: 'index3', value: '_search' });
-        await PageObjects.console.enterRequest('\n GET ${index3}');
-        await PageObjects.console.clickPlay();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-
-        await retry.try(async () => {
-          const status = await PageObjects.console.getResponseStatus();
-          expect(status).to.eql(200);
-        });
-      });
-    });
-
-    describe('with variables in request body', () => {
-      it('should send a successful request', async () => {
-        await PageObjects.console.addNewVariable({ name: 'query1', value: '{"match_all": {}}' });
-        await PageObjects.console.enterRequest('\n GET _search');
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.enterText(`{\n\t"query": "\${query1}"`);
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.clickPlay();
-        await PageObjects.header.waitUntilLoadingHasFinished();
-
-        await retry.try(async () => {
-          const status = await PageObjects.console.getResponseStatus();
-          expect(status).to.eql(200);
-        });
-      });
-    });
-  });
-};
diff --git a/test/functional/apps/console/ace/_xjson.ts b/test/functional/apps/console/ace/_xjson.ts
deleted file mode 100644
index 438557b7c3016..0000000000000
--- a/test/functional/apps/console/ace/_xjson.ts
+++ /dev/null
@@ -1,189 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { rgbToHex } from '@elastic/eui';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default ({ getService, getPageObjects }: FtrProviderContext) => {
-  const retry = getService('retry');
-  const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  // FLAKY: https://github.com/elastic/kibana/issues/171259
-  // FLAKY: https://github.com/elastic/kibana/issues/158484
-  describe.skip('XJSON', function testXjson() {
-    this.tags('includeFirefox');
-    before(async () => {
-      await PageObjects.common.navigateToApp('console');
-      await retry.try(async () => {
-        await PageObjects.console.collapseHelp();
-      });
-    });
-
-    beforeEach(async () => {
-      await PageObjects.console.clearTextArea();
-    });
-
-    const executeRequest = async (request = '\n GET _search') => {
-      await PageObjects.console.enterRequest(request);
-      await PageObjects.console.clickPlay();
-      await PageObjects.header.waitUntilLoadingHasFinished();
-    };
-
-    describe('inline http request', () => {
-      it('should have method and path', async () => {
-        await PageObjects.console.enterRequest('\n PUT foo/bar');
-        expect(await PageObjects.console.getRequestMethod()).to.be('PUT');
-        expect(await PageObjects.console.getRequestPath()).to.be('foo/bar');
-      });
-
-      it('should have optional query parameters', async () => {
-        await PageObjects.console.enterRequest('\n GET foo/bar?pretty');
-        expect(await PageObjects.console.getRequestQueryParams()).to.be('pretty');
-      });
-
-      it('should have optional request body', async () => {
-        await PageObjects.console.enterRequest('\n POST foo/bar\n {"foo": "bar"}');
-        log.debug('request body: ' + (await PageObjects.console.getRequestBody()));
-        expect(await PageObjects.console.getRequestBody()).to.be('{"foo": "bar"}');
-      });
-
-      it('should not have validation errors', async () => {
-        await PageObjects.console.enterRequest('\n GET foo/bar');
-        expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-      });
-
-      it('should have validation error for invalid method', async () => {
-        await PageObjects.console.enterRequest('\n FOO foo/bar');
-        // Retry because the error marker is not always immediately visible.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(true);
-        });
-      });
-
-      it('should have validation error for invalid path', async () => {
-        await PageObjects.console.enterRequest('\n GET');
-        // Retry because the error marker is not always immediately visible.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(true);
-        });
-      });
-
-      it('should have validation error for invalid body', async () => {
-        await PageObjects.console.enterRequest('\n POST foo/bar\n {"foo": "bar"');
-        // Retry because the error marker is not always immediately visible.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(true);
-        });
-      });
-
-      it('should have correct syntax highlighting', async () => {
-        await PageObjects.console.enterRequest('\n GET foo/bar');
-        expect(await PageObjects.console.getRequestLineHighlighting()).to.contain(
-          'ace_method ace_whitespace ace_url ace_part ace_url ace_slash ace_url ace_part'
-        );
-      });
-
-      it('should have correct syntax highlighting for method', async () => {
-        await PageObjects.console.enterRequest('\n PUT foo/bar');
-        const color = await PageObjects.console.getRequestMethodColor();
-        expect(rgbToHex(color)).to.be('#c80a68');
-      });
-
-      it('should have correct syntax highlighting for path', async () => {
-        await PageObjects.console.enterRequest('\n PUT foo/bar');
-        const color = await PageObjects.console.getRequestPathColor();
-        expect(rgbToHex(color)).to.be('#00756c');
-      });
-
-      it('should have correct syntax highlighting for query', async () => {
-        await PageObjects.console.enterRequest('\n PUT foo/bar?pretty');
-        const color = await PageObjects.console.getRequestQueryColor();
-        expect(rgbToHex(color)).to.be('#00756c');
-      });
-
-      it('should have correct syntax highlighting for body', async () => {
-        await PageObjects.console.enterRequest('\n PUT foo/bar\n {"foo": "bar"}');
-        const color = await PageObjects.console.getRequestBodyColor();
-        expect(rgbToHex(color)).to.be('#343741');
-      });
-
-      it('should have multiple bodies for _msearch requests', async () => {
-        await PageObjects.console.enterRequest(
-          '\nGET foo/_msearch \n{}\n{"query": {"match_all": {}}}\n{"index": "bar"}\n{"query": {"match_all": {}}}'
-        );
-        // Retry because body elements are not always immediately visible.
-        await retry.try(async () => {
-          expect(await PageObjects.console.getRequestBodyCount()).to.be(4);
-        });
-      });
-
-      it('should not trigger error for multiple bodies for _msearch requests', async () => {
-        await PageObjects.console.enterRequest(
-          '\nGET foo/_msearch \n{}\n{"query": {"match_all": {}}}\n{"index": "bar"}\n{"query": {"match_all": {}}}'
-        );
-        // Retry until typing is finished.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-        });
-      });
-
-      it('should not trigger validation errors for multiple JSON blocks', async () => {
-        await PageObjects.console.enterRequest('\nPOST test/doc/1 \n{\n "foo": "bar"');
-        await PageObjects.console.enterRequest('\nPOST test/doc/2 \n{\n "foo": "baz"');
-        await PageObjects.console.enterRequest('\nPOST test/doc/3 \n{\n "foo": "qux"');
-        // Retry until typing is finished.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-        });
-      });
-
-      it('should allow escaping quotation mark by wrapping it in triple quotes', async () => {
-        await PageObjects.console.enterRequest(
-          '\nPOST test/_doc/1 \n{\n "foo": """look "escaped" quotes"""'
-        );
-        // Retry until typing is finished and validation errors are gone.
-        await retry.try(async () => {
-          expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-        });
-      });
-
-      it('should have correct syntax highlighting for inline comments', async () => {
-        await PageObjects.console.enterRequest(
-          '\nPOST test/_doc/1 \n{\n "foo": "bar" # inline comment'
-        );
-        const color = await PageObjects.console.getCommentColor();
-        expect(rgbToHex(color)).to.be('#41755c');
-      });
-
-      it('should allow inline comments in request url row', async () => {
-        await executeRequest('\n GET _search // inline comment');
-        expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-        expect(await PageObjects.console.getResponseStatus()).to.eql(200);
-      });
-
-      it('should allow inline comments in request body', async () => {
-        await executeRequest('\n GET _search \n{\n "query": {\n "match_all": {} // inline comment');
-        expect(await PageObjects.console.hasErrorMarker()).to.be(false);
-        expect(await PageObjects.console.getResponseStatus()).to.eql(200);
-      });
-
-      it('should print warning for deprecated request', async () => {
-        await executeRequest('\nGET .kibana');
-        expect(await PageObjects.console.responseHasDeprecationWarning()).to.be(true);
-      });
-
-      it('should not print warning for non-deprecated request', async () => {
-        await executeRequest('\n GET _search');
-        expect(await PageObjects.console.responseHasDeprecationWarning()).to.be(false);
-      });
-    });
-  });
-};
diff --git a/test/functional/apps/console/ace/config.ts b/test/functional/apps/console/ace/config.ts
deleted file mode 100644
index 9629d5c66cc78..0000000000000
--- a/test/functional/apps/console/ace/config.ts
+++ /dev/null
@@ -1,28 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { FtrConfigProviderContext } from '@kbn/test';
-import { configureHTTP2 } from '../../../../common/configure_http2';
-
-export default async function ({ readConfigFile }: FtrConfigProviderContext) {
-  const functionalConfig = await readConfigFile(require.resolve('../../../config.base.js'));
-
-  return configureHTTP2({
-    ...functionalConfig.getAll(),
-    testFiles: [require.resolve('.')],
-    kbnTestServer: {
-      ...functionalConfig.get('kbnTestServer'),
-      serverArgs: [
-        ...functionalConfig.get('kbnTestServer.serverArgs'),
-        // disabling the monaco editor to run tests for ace
-        `--console.dev.enableMonaco=false`,
-      ],
-    },
-  });
-}
diff --git a/test/functional/apps/console/monaco/config.ts b/test/functional/apps/console/config.ts
similarity index 88%
rename from test/functional/apps/console/monaco/config.ts
rename to test/functional/apps/console/config.ts
index 5bfa273811df4..3648df4218bd0 100644
--- a/test/functional/apps/console/monaco/config.ts
+++ b/test/functional/apps/console/config.ts
@@ -8,10 +8,10 @@
  */
 
 import { FtrConfigProviderContext } from '@kbn/test';
-import { configureHTTP2 } from '../../../../common/configure_http2';
+import { configureHTTP2 } from '../../../common/configure_http2';
 
 export default async function ({ readConfigFile }: FtrConfigProviderContext) {
-  const functionalConfig = await readConfigFile(require.resolve('../../../config.base.js'));
+  const functionalConfig = await readConfigFile(require.resolve('../../config.base.js'));
 
   return configureHTTP2({
     ...functionalConfig.getAll(),
diff --git a/test/functional/apps/console/ace/index.ts b/test/functional/apps/console/index.ts
similarity index 88%
rename from test/functional/apps/console/ace/index.ts
rename to test/functional/apps/console/index.ts
index b8d4d3ca4ee27..d73cc182de7d5 100644
--- a/test/functional/apps/console/ace/index.ts
+++ b/test/functional/apps/console/index.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { FtrProviderContext } from '../../../ftr_provider_context';
+import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function ({ getService, loadTestFile }: FtrProviderContext) {
   const browser = getService('browser');
@@ -30,6 +30,8 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
       loadTestFile(require.resolve('./_context_menu'));
       loadTestFile(require.resolve('./_text_input'));
       loadTestFile(require.resolve('./_settings'));
+      loadTestFile(require.resolve('./_output_panel'));
+      loadTestFile(require.resolve('./_onboarding_tour'));
     }
   });
 }
diff --git a/test/functional/apps/console/monaco/_autocomplete.ts b/test/functional/apps/console/monaco/_autocomplete.ts
deleted file mode 100644
index 6e0d83ffcd56e..0000000000000
--- a/test/functional/apps/console/monaco/_autocomplete.ts
+++ /dev/null
@@ -1,386 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import _ from 'lodash';
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const log = getService('log');
-  const retry = getService('retry');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-  const find = getService('find');
-
-  async function runTemplateTest(type: string, template: string) {
-    await PageObjects.console.monaco.enterText(`{\n\t"type": "${type}",\n`);
-    await PageObjects.console.sleepForDebouncePeriod();
-    // Prompt autocomplete for 'settings'
-    await PageObjects.console.monaco.promptAutocomplete('s');
-
-    await retry.waitFor('autocomplete to be visible', () =>
-      PageObjects.console.monaco.isAutocompleteVisible()
-    );
-    await PageObjects.console.monaco.pressEnter();
-    await retry.try(async () => {
-      const request = await PageObjects.console.monaco.getEditorText();
-      log.debug(request);
-      expect(request).to.contain(`${template}`);
-    });
-  }
-
-  // Failing: See https://github.com/elastic/kibana/issues/191808
-  describe.skip('console autocomplete feature', function describeIndexTests() {
-    this.tags('includeFirefox');
-    before(async () => {
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-      // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.monaco.clearEditorText();
-      log.debug('setAutocompleteTrace true');
-      await PageObjects.console.setAutocompleteTrace(true);
-    });
-
-    after(async () => {
-      log.debug('setAutocompleteTrace false');
-      await PageObjects.console.setAutocompleteTrace(false);
-    });
-
-    it('should provide basic auto-complete functionality', async () => {
-      await PageObjects.console.monaco.enterText(`GET _search\n`);
-      await PageObjects.console.monaco.pressEnter();
-      await PageObjects.console.monaco.enterText(`{\n\t"query": {`);
-      await PageObjects.console.monaco.pressEnter();
-      await PageObjects.console.sleepForDebouncePeriod();
-      await PageObjects.console.monaco.promptAutocomplete();
-      expect(PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-    });
-
-    // FLAKY: https://github.com/elastic/kibana/issues/186501
-    describe.skip('Autocomplete behavior', () => {
-      beforeEach(async () => {
-        await PageObjects.console.monaco.clearEditorText();
-      });
-
-      it('HTTP methods', async () => {
-        const suggestions = {
-          G: ['GET'],
-          P: ['PATCH', 'POST', 'PUT'],
-          D: ['DELETE'],
-          H: ['HEAD'],
-        };
-        for (const [char, methods] of Object.entries(suggestions)) {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key type "%s"', char);
-          await PageObjects.console.monaco.enterText(char);
-
-          await retry.waitFor('autocomplete to be visible', () =>
-            PageObjects.console.monaco.isAutocompleteVisible()
-          );
-          expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-
-          for (const [i, method] of methods.entries()) {
-            expect(await PageObjects.console.monaco.getAutocompleteSuggestion(i)).to.be.eql(method);
-          }
-
-          await PageObjects.console.monaco.pressEscape();
-          await PageObjects.console.monaco.clearEditorText();
-        }
-      });
-
-      it('ES API endpoints', async () => {
-        const suggestions = {
-          'GET _': ['_alias', '_all'],
-          'PUT _': ['_all'],
-          'POST _': ['_aliases', '_all'],
-          'DELETE _': ['_all'],
-          'HEAD _': ['_alias', '_all'],
-        };
-        for (const [text, endpoints] of Object.entries(suggestions)) {
-          for (const char of text) {
-            await PageObjects.console.sleepForDebouncePeriod();
-            log.debug('Key type "%s"', char);
-            await PageObjects.console.monaco.enterText(char);
-          }
-
-          await retry.waitFor('autocomplete to be visible', () =>
-            PageObjects.console.monaco.isAutocompleteVisible()
-          );
-          expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-
-          for (const [i, endpoint] of endpoints.entries()) {
-            expect(await PageObjects.console.monaco.getAutocompleteSuggestion(i)).to.be.eql(
-              endpoint
-            );
-          }
-
-          await PageObjects.console.monaco.pressEscape();
-          await PageObjects.console.monaco.pressEnter();
-        }
-      });
-
-      it('JSON autocompletion with placeholder fields', async () => {
-        await PageObjects.console.monaco.enterText('GET _search\n');
-        await PageObjects.console.monaco.enterText('{');
-        await PageObjects.console.monaco.pressEnter();
-
-        for (const char of '"ag') {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key type "%s"', char);
-          await PageObjects.console.monaco.enterText(char);
-        }
-        await retry.waitFor('autocomplete to be visible', () =>
-          PageObjects.console.monaco.isAutocompleteVisible()
-        );
-        expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-        await PageObjects.console.monaco.pressEnter();
-        await PageObjects.console.sleepForDebouncePeriod();
-
-        expect((await PageObjects.console.monaco.getEditorText()).replace(/\s/g, '')).to.be.eql(
-          `
-GET _search
-{
-    "aggs": {
-      "NAME": {
-        "AGG_TYPE": {}
-      }
-    }
-}
-`.replace(/\s/g, '')
-        );
-      });
-
-      it('Dynamic autocomplete', async () => {
-        await PageObjects.console.monaco.enterText('POST test/_doc\n{}');
-        await PageObjects.console.clickPlay();
-
-        await PageObjects.header.waitUntilLoadingHasFinished();
-        expect(await PageObjects.console.getResponseStatus()).to.be('201');
-
-        await PageObjects.console.monaco.pressEnter();
-        for (const char of 'POST t') {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key type "%s"', char);
-          await PageObjects.console.monaco.enterText(char);
-        }
-        await retry.waitFor('autocomplete to be visible', () =>
-          PageObjects.console.monaco.isAutocompleteVisible()
-        );
-        expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-
-        expect(await PageObjects.console.monaco.getAutocompleteSuggestion(0)).to.be.eql('test');
-      });
-    });
-
-    describe('anti-regression watchdogs', () => {
-      beforeEach(async () => {
-        await PageObjects.console.monaco.clearEditorText();
-      });
-
-      // flaky
-      it.skip('should suppress auto-complete on arrow keys', async () => {
-        await PageObjects.console.monaco.enterText(`\nGET _search\nGET _search`);
-        await PageObjects.console.monaco.pressEnter();
-        const keyPresses = [
-          'pressUp',
-          'pressUp',
-          'pressDown',
-          'pressDown',
-          'pressRight',
-          'pressRight',
-          'pressLeft',
-          'pressLeft',
-        ] as const;
-        for (const keyPress of keyPresses) {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key', keyPress);
-          await PageObjects.console.monaco[keyPress]();
-          expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(false);
-        }
-      });
-
-      it('should activate auto-complete for methods case-insensitively', async () => {
-        const methods = _.sampleSize(
-          _.compact(
-            `
-            GET GEt GeT Get gET gEt geT get
-            PUT PUt PuT Put pUT pUt puT put
-            POST POSt POsT POst PoST PoSt PosT Post pOST pOSt pOsT pOst poST poSt posT post
-            DELETE DELETe DELEtE DELEte DELeTE DELeTe DELetE DELete DElETE DElETe DElEtE DElEte DEleTE DEleTe DEletE DElete
-            DeLETE DeLETe DeLEtE DeLEte DeLeTE DeLeTe DeLetE DeLete DelETE DelETe DelEtE DelEte DeleTE DeleTe DeletE Delete
-            dELETE dELETe dELEtE dELEte dELeTE dELeTe dELetE dELete dElETE dElETe dElEtE dElEte dEleTE dEleTe dEletE dElete
-            deLETE deLETe deLEtE deLEte deLeTE deLeTe deLetE deLete delETE delETe delEtE delEte deleTE deleTe deletE delete
-            HEAD HEAd HEaD HEad HeAD HeAd HeaD Head hEAD hEAd hEaD hEad heAD heAd heaD head
-            `.split(/\s+/m)
-          ),
-          20 // 20 of 112 (approx. one-fifth) should be enough for testing
-        );
-
-        for (const method of methods) {
-          await PageObjects.console.monaco.clearEditorText();
-
-          for (const char of method.slice(0, -1)) {
-            await PageObjects.console.sleepForDebouncePeriod();
-            log.debug('Key type "%s"', char);
-            await PageObjects.console.monaco.enterText(char); // e.g. 'P' -> 'Po' -> 'Pos'
-            await retry.waitFor('autocomplete to be visible', () =>
-              PageObjects.console.monaco.isAutocompleteVisible()
-            );
-            expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-          }
-
-          for (const char of [method.at(-1), ' ', '_']) {
-            await PageObjects.console.sleepForDebouncePeriod();
-            log.debug('Key type "%s"', char);
-            await PageObjects.console.monaco.enterText(char!); // e.g. 'Post ' -> 'Post _'
-          }
-
-          await retry.waitFor('autocomplete to be visible', () =>
-            PageObjects.console.monaco.isAutocompleteVisible()
-          );
-          expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-        }
-      });
-
-      it('should activate auto-complete for a single character immediately following a slash in URL', async () => {
-        await PageObjects.console.monaco.enterText('GET .kibana');
-
-        for (const char of ['/', '_']) {
-          await PageObjects.console.sleepForDebouncePeriod();
-          log.debug('Key type "%s"', char);
-          await PageObjects.console.monaco.enterText(char); // i.e. 'GET .kibana/' -> 'GET .kibana/_'
-        }
-
-        await retry.waitFor('autocomplete to be visible', () =>
-          PageObjects.console.monaco.isAutocompleteVisible()
-        );
-        expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-      });
-
-      it('should activate auto-complete for multiple indices after comma in URL', async () => {
-        await PageObjects.console.monaco.enterText('GET _cat/indices/.kibana');
-
-        await PageObjects.console.sleepForDebouncePeriod();
-        log.debug('Key type ","');
-        await PageObjects.console.monaco.enterText(','); // i.e. 'GET /_cat/indices/.kibana,'
-
-        await PageObjects.console.sleepForDebouncePeriod();
-        log.debug('Key type Ctrl+SPACE');
-        await PageObjects.console.monaco.pressCtrlSpace();
-
-        await retry.waitFor('autocomplete to be visible', () =>
-          PageObjects.console.monaco.isAutocompleteVisible()
-        );
-        expect(await PageObjects.console.monaco.isAutocompleteVisible()).to.be.eql(true);
-      });
-    });
-
-    // not implemented for monaco yet https://github.com/elastic/kibana/issues/184856
-    describe.skip('with a missing comma in query', () => {
-      const LINE_NUMBER = 4;
-      beforeEach(async () => {
-        await PageObjects.console.clearTextArea();
-        await PageObjects.console.enterRequest();
-        await PageObjects.console.pressEnter();
-      });
-
-      it('should add a comma after previous non empty line', async () => {
-        await PageObjects.console.enterText(`{\n\t"query": {\n\t\t"match": {}`);
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.sleepForDebouncePeriod();
-        await PageObjects.console.promptAutocomplete();
-        await PageObjects.console.pressEnter();
-        await retry.try(async () => {
-          let conApp = await find.byCssSelector('.conApp');
-          const firstInnerHtml = await conApp.getAttribute('innerHTML');
-          await PageObjects.common.sleep(500);
-          conApp = await find.byCssSelector('.conApp');
-          const secondInnerHtml = await conApp.getAttribute('innerHTML');
-          return firstInnerHtml === secondInnerHtml;
-        });
-        const textAreaString = await PageObjects.console.getAllVisibleText();
-        log.debug('Text Area String Value==================\n');
-        log.debug(textAreaString);
-        expect(textAreaString).to.contain(',');
-        const text = await PageObjects.console.getVisibleTextAt(LINE_NUMBER);
-        const lastChar = text.charAt(text.length - 1);
-        expect(lastChar).to.be.eql(',');
-      });
-
-      it('should add a comma after the triple quoted strings', async () => {
-        await PageObjects.console.enterText(`{\n\t"query": {\n\t\t"term": """some data"""`);
-        await PageObjects.console.pressEnter();
-        await PageObjects.console.sleepForDebouncePeriod();
-        await PageObjects.console.promptAutocomplete();
-        await PageObjects.console.pressEnter();
-
-        await retry.waitForWithTimeout('text area to contain comma', 25000, async () => {
-          const textAreaString = await PageObjects.console.getAllVisibleText();
-          return textAreaString.includes(',');
-        });
-
-        const text = await PageObjects.console.getVisibleTextAt(LINE_NUMBER);
-        const lastChar = text.charAt(text.length - 1);
-        expect(lastChar).to.be.eql(',');
-      });
-    });
-
-    describe('with conditional templates', () => {
-      beforeEach(async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText('POST _snapshot/test_repo\n');
-      });
-
-      it('should insert fs template', async () => {
-        await runTemplateTest('fs', `"location": "path"`);
-      });
-
-      it('should insert url template', async () => {
-        await runTemplateTest('url', `"url": ""`);
-      });
-
-      it('should insert s3 template', async () => {
-        await runTemplateTest('s3', `"bucket": ""`);
-      });
-
-      it('should insert azure template', async () => {
-        await runTemplateTest('azure', `"path": ""`);
-      });
-    });
-
-    // FLAKY: https://github.com/elastic/kibana/issues/186935
-    describe.skip('index fields autocomplete', () => {
-      const indexName = `index_field_test-${Date.now()}-${Math.random()}`;
-
-      before(async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        // create an index with only 1 field
-        await PageObjects.console.monaco.enterText(`PUT ${indexName}/_doc/1\n{\n"test":1\n}`);
-        await PageObjects.console.clickPlay();
-      });
-
-      after(async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        // delete the test index
-        await PageObjects.console.monaco.enterText(`DELETE ${indexName}`);
-        await PageObjects.console.clickPlay();
-      });
-
-      it('fields autocomplete only shows fields of the index', async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText('GET _search\n{\n"fields": ["');
-
-        expect(await PageObjects.console.monaco.getAutocompleteSuggestion(0)).to.be.eql('test');
-        expect(await PageObjects.console.monaco.getAutocompleteSuggestion(1)).to.be.eql(undefined);
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/monaco/_misc_console_behavior.ts b/test/functional/apps/console/monaco/_misc_console_behavior.ts
deleted file mode 100644
index ad144c14346ab..0000000000000
--- a/test/functional/apps/console/monaco/_misc_console_behavior.ts
+++ /dev/null
@@ -1,183 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const retry = getService('retry');
-  const browser = getService('browser');
-  const PageObjects = getPageObjects(['common', 'console', 'header']);
-
-  describe('misc console behavior', function testMiscConsoleBehavior() {
-    this.tags('includeFirefox');
-    before(async () => {
-      await browser.setWindowSize(1200, 800);
-      await PageObjects.common.navigateToApp('console');
-      // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-    });
-
-    beforeEach(async () => {
-      await PageObjects.console.monaco.clearEditorText();
-    });
-
-    describe('keyboard shortcuts', () => {
-      let tabOpened = false;
-      afterEach(async () => {
-        if (tabOpened) {
-          await browser.closeCurrentWindow();
-          tabOpened = false;
-          await browser.switchTab(0);
-        }
-      });
-
-      it('should execute the request when Ctrl+Enter is pressed', async () => {
-        await PageObjects.console.monaco.enterText('GET _search');
-        await PageObjects.console.monaco.pressCtrlEnter();
-        await retry.try(async () => {
-          const response = await PageObjects.console.monaco.getOutputText();
-          expect(response).to.contain('"timed_out": false');
-        });
-      });
-
-      it('should auto indent current request when Ctrl+I is pressed', async () => {
-        await PageObjects.console.monaco.enterText('GET _search\n{"query": {"match_all": {}}}');
-        await PageObjects.console.monaco.selectCurrentRequest();
-        await PageObjects.console.monaco.pressCtrlI();
-        await retry.waitFor('request to be auto indented', async () => {
-          const request = await PageObjects.console.monaco.getEditorText();
-          return request === 'GET _search\n{\n  "query": {\n    "match_all": {}\n  }\n}';
-        });
-      });
-
-      it('should jump to the previous request when Ctrl+Up is pressed', async () => {
-        await PageObjects.console.monaco.enterText('\nGET _search/foo');
-        await PageObjects.console.monaco.enterText('\nGET _search/bar');
-        await PageObjects.console.monaco.pressCtrlUp();
-        await retry.waitFor('request to be selected', async () => {
-          const request = await PageObjects.console.monaco.getEditorTextAtLine(1);
-          return request === 'GET _search/foo';
-        });
-      });
-
-      it('should jump to the next request when Ctrl+Down is pressed', async () => {
-        await PageObjects.console.monaco.enterText('\nGET _search/foo');
-        await PageObjects.console.monaco.enterText('\nGET _search/bar');
-        await PageObjects.console.monaco.pressCtrlUp();
-        await PageObjects.console.monaco.pressCtrlDown();
-        await retry.waitFor('request to be selected', async () => {
-          const request = await PageObjects.console.monaco.getEditorTextAtLine(2);
-          return request === 'GET _search/bar';
-        });
-      });
-
-      // flaky
-      it.skip('should go to line number when Ctrl+L is pressed', async () => {
-        await PageObjects.console.monaco.enterText(
-          '\nGET _search/foo\n{\n  "query": {\n    "match_all": {} \n} \n}'
-        );
-        await PageObjects.console.monaco.pressCtrlL();
-        // Sleep to allow the line number input to be focused
-        await PageObjects.common.sleep(1000);
-        const alert = await browser.getAlert();
-        await alert?.sendKeys('4');
-        await alert?.accept();
-        await PageObjects.common.sleep(1000);
-        expect(await PageObjects.console.monaco.getCurrentLineNumber()).to.be(4);
-      });
-
-      // FLAKY: https://github.com/elastic/kibana/issues/190321
-      describe.skip('open documentation', () => {
-        const requests = ['GET _search', 'GET test_index/_search', 'GET /_search'];
-        requests.forEach((request) => {
-          it('should open documentation when Ctrl+/ is pressed', async () => {
-            await PageObjects.console.monaco.enterText(request);
-            await PageObjects.console.monaco.pressEscape();
-            await PageObjects.console.monaco.pressCtrlSlash();
-            await retry.tryForTime(10000, async () => {
-              await browser.switchTab(1);
-              tabOpened = true;
-            });
-
-            // Retry until the documentation is loaded
-            await retry.try(async () => {
-              const url = await browser.getCurrentUrl();
-              expect(url).to.contain('search-search.html');
-            });
-          });
-        });
-      });
-    });
-
-    it('can toggle keyboard shortcuts', async () => {
-      // Enter a sample command
-      await PageObjects.console.monaco.enterText('GET _search');
-
-      // Disable keyboard shorcuts
-      await PageObjects.console.toggleKeyboardShortcuts(false);
-
-      // Upon clicking ctrl enter a newline character should be added to the editor
-      await PageObjects.console.monaco.pressCtrlEnter();
-      await retry.waitFor('shortcut shouldnt have generated any request', async () => {
-        const response = await PageObjects.console.monaco.getOutputText();
-        return response === '';
-      });
-
-      // Restore setting
-      await PageObjects.console.toggleKeyboardShortcuts(true);
-    });
-
-    describe('customizable font size', () => {
-      // flaky
-      it.skip('should allow the font size to be customized', async () => {
-        await PageObjects.console.setFontSizeSetting(20);
-        await retry.try(async () => {
-          // the settings are not applied synchronously, so we retry for a time
-          expect(await PageObjects.console.monaco.getFontSize()).to.be('20px');
-        });
-
-        await PageObjects.console.setFontSizeSetting(24);
-        await retry.try(async () => {
-          // the settings are not applied synchronously, so we retry for a time
-          expect(await PageObjects.console.monaco.getFontSize()).to.be('24px');
-        });
-      });
-    });
-
-    describe('invalid requests', () => {
-      const invalidRequestText = 'GET _search\n{"query": {"match_all": {';
-      it(`should not delete any text if indentations applied to an invalid request`, async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText(invalidRequestText);
-        await PageObjects.console.monaco.selectCurrentRequest();
-        await PageObjects.console.monaco.pressCtrlI();
-        // Sleep for a bit and then check that the text has not changed
-        await PageObjects.common.sleep(1000);
-        await retry.try(async () => {
-          const request = await PageObjects.console.monaco.getEditorText();
-          expect(request).to.be.eql(invalidRequestText);
-        });
-      });
-
-      it(`should include an invalid json when sending a request`, async () => {
-        await PageObjects.console.monaco.clearEditorText();
-        await PageObjects.console.monaco.enterText(invalidRequestText);
-        await PageObjects.console.monaco.selectCurrentRequest();
-        await PageObjects.console.monaco.pressCtrlEnter();
-
-        await retry.try(async () => {
-          const actualResponse = await PageObjects.console.monaco.getOutputText();
-          expect(actualResponse).to.contain('parsing_exception');
-          expect(await PageObjects.console.hasSuccessBadge()).to.be(false);
-        });
-      });
-    });
-  });
-}
diff --git a/test/functional/apps/console/monaco/_settings.ts b/test/functional/apps/console/monaco/_settings.ts
deleted file mode 100644
index 8b6e25d892c19..0000000000000
--- a/test/functional/apps/console/monaco/_settings.ts
+++ /dev/null
@@ -1,42 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const log = getService('log');
-  const PageObjects = getPageObjects(['common', 'console']);
-
-  describe('console settings', function testSettings() {
-    this.tags('includeFirefox');
-    before(async () => {
-      log.debug('navigateTo console');
-      await PageObjects.common.navigateToApp('console');
-      // Ensure that the text area can be interacted with
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.monaco.clearEditorText();
-    });
-
-    it('displays the a11y overlay', async () => {
-      await PageObjects.console.monaco.pressEscape();
-      const isOverlayVisible = await PageObjects.console.monaco.isA11yOverlayVisible();
-      expect(isOverlayVisible).to.be(true);
-    });
-
-    it('disables the a11y overlay via settings', async () => {
-      await PageObjects.console.openSettings();
-      await PageObjects.console.toggleA11yOverlaySetting();
-
-      await PageObjects.console.monaco.pressEscape();
-      const isOverlayVisible = await PageObjects.console.monaco.isA11yOverlayVisible();
-      expect(isOverlayVisible).to.be(false);
-    });
-  });
-}
diff --git a/test/functional/apps/console/monaco/_vector_tile.ts b/test/functional/apps/console/monaco/_vector_tile.ts
deleted file mode 100644
index 3ed6f01c3411c..0000000000000
--- a/test/functional/apps/console/monaco/_vector_tile.ts
+++ /dev/null
@@ -1,52 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, getPageObjects }: FtrProviderContext) {
-  const PageObjects = getPageObjects(['common', 'console', 'header', 'home']);
-  const retry = getService('retry');
-  const security = getService('security');
-
-  describe('console vector tiles response validation', function describeIndexTests() {
-    before(async () => {
-      await security.testUser.setRoles(['kibana_admin', 'kibana_sample_admin']);
-      await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
-        useActualUrl: true,
-      });
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.home.addSampleDataSet('logs');
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.common.navigateToApp('console');
-      await PageObjects.console.closeHelpIfExists();
-      await PageObjects.console.monaco.clearEditorText();
-    });
-
-    it('should validate response', async () => {
-      await PageObjects.console.monaco.enterText(
-        `GET kibana_sample_data_logs/_mvt/geo.coordinates/0/0/0`
-      );
-      await PageObjects.console.clickPlay();
-      await retry.try(async () => {
-        const actualResponse = await PageObjects.console.monaco.getOutputText();
-        expect(actualResponse).to.contain('"meta": [');
-      });
-    });
-
-    after(async () => {
-      await PageObjects.common.navigateToUrl('home', '/tutorial_directory/sampleData', {
-        useActualUrl: true,
-      });
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await PageObjects.home.removeSampleDataSet('logs');
-      await security.testUser.restoreDefaults();
-    });
-  });
-}
diff --git a/test/functional/apps/console/monaco/index.ts b/test/functional/apps/console/monaco/index.ts
deleted file mode 100644
index b8d4d3ca4ee27..0000000000000
--- a/test/functional/apps/console/monaco/index.ts
+++ /dev/null
@@ -1,35 +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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
- * License v3.0 only", or the "Server Side Public License, v 1".
- */
-
-import { FtrProviderContext } from '../../../ftr_provider_context';
-
-export default function ({ getService, loadTestFile }: FtrProviderContext) {
-  const browser = getService('browser');
-  const config = getService('config');
-
-  describe('console app', function () {
-    before(async function () {
-      await browser.setWindowSize(1300, 1100);
-    });
-    if (config.get('esTestCluster.ccs')) {
-      loadTestFile(require.resolve('./_console_ccs'));
-    } else {
-      loadTestFile(require.resolve('./_console'));
-      loadTestFile(require.resolve('./_autocomplete'));
-      loadTestFile(require.resolve('./_vector_tile'));
-      loadTestFile(require.resolve('./_comments'));
-      loadTestFile(require.resolve('./_variables'));
-      loadTestFile(require.resolve('./_xjson'));
-      loadTestFile(require.resolve('./_misc_console_behavior'));
-      loadTestFile(require.resolve('./_context_menu'));
-      loadTestFile(require.resolve('./_text_input'));
-      loadTestFile(require.resolve('./_settings'));
-    }
-  });
-}
diff --git a/test/functional/apps/dashboard/group2/multiple_data_views.ts b/test/functional/apps/dashboard/group2/multiple_data_views.ts
index 21778771917a2..c7c4753072d4f 100644
--- a/test/functional/apps/dashboard/group2/multiple_data_views.ts
+++ b/test/functional/apps/dashboard/group2/multiple_data_views.ts
@@ -26,7 +26,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     'home',
   ]);
 
-  describe('dashboard multiple data views', () => {
+  // Failing: See https://github.com/elastic/kibana/issues/191880
+  describe.skip('dashboard multiple data views', () => {
     before(async () => {
       await kibanaServer.uiSettings.update({ 'courier:ignoreFilterIfFieldNotInIndex': true });
       await common.navigateToApp('home');
diff --git a/test/functional/apps/dashboard_elements/controls/common/config.ts b/test/functional/apps/dashboard_elements/controls/common/config.ts
index 74690b3b0a640..9b3b6fb3c1d9d 100644
--- a/test/functional/apps/dashboard_elements/controls/common/config.ts
+++ b/test/functional/apps/dashboard_elements/controls/common/config.ts
@@ -20,11 +20,6 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
     },
     kbnTestServer: {
       ...functionalConfig.get('kbnTestServer'),
-      serverArgs: [
-        ...functionalConfig.get('kbnTestServer.serverArgs'),
-        // disabling the monaco editor to run tests for ace
-        `--console.dev.enableMonaco=false`,
-      ],
     },
   };
 }
diff --git a/test/functional/apps/dashboard_elements/controls/common/control_group_chaining.ts b/test/functional/apps/dashboard_elements/controls/common/control_group_chaining.ts
index 7dac4610d0d2f..b5502c2b06427 100644
--- a/test/functional/apps/dashboard_elements/controls/common/control_group_chaining.ts
+++ b/test/functional/apps/dashboard_elements/controls/common/control_group_chaining.ts
@@ -32,10 +32,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     let controlIds: string[];
 
     const addDocument = async (index: string, document: string) => {
-      await console.enterRequest('\nPOST ' + index + '/_doc/ \n{\n ' + document);
+      await console.enterText('\nPOST ' + index + '/_doc/\n{\n ' + document + '\n}');
       await console.clickPlay();
       await header.waitUntilLoadingHasFinished();
-      const response = JSON.parse(await console.getResponse());
+      const response = JSON.parse(await console.getOutputText());
       newDocuments.push({ index, id: response._id });
     };
 
@@ -44,8 +44,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       /* start by adding some incomplete data so that we can test `exists` query */
       await common.navigateToApp('console');
-      await console.closeHelpIfExists();
-      await console.clearTextArea();
+      await console.skipTourIfExists();
+      await console.clearEditorText();
       await addDocument(
         'animals-cats-2018-01-01',
         '"@timestamp": "2018-01-01T16:00:00.000Z", \n"animal": "cat"'
@@ -88,10 +88,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     after(async () => {
       await common.navigateToApp('console');
-      await console.closeHelpIfExists();
-      await console.clearTextArea();
+      await console.clearEditorText();
       for (const { index, id } of newDocuments) {
-        await console.enterRequest(`\nDELETE /${index}/_doc/${id}`);
+        await console.enterText(`\nDELETE /${index}/_doc/${id}`);
         await console.clickPlay();
         await header.waitUntilLoadingHasFinished();
       }
diff --git a/test/functional/apps/dashboard_elements/controls/options_list/config.ts b/test/functional/apps/dashboard_elements/controls/options_list/config.ts
index 312c734df23d3..f190874e3f353 100644
--- a/test/functional/apps/dashboard_elements/controls/options_list/config.ts
+++ b/test/functional/apps/dashboard_elements/controls/options_list/config.ts
@@ -20,11 +20,6 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
     },
     kbnTestServer: {
       ...functionalConfig.get('kbnTestServer'),
-      serverArgs: [
-        ...functionalConfig.get('kbnTestServer.serverArgs'),
-        // disabling the monaco editor to run tests for ace
-        `--console.dev.enableMonaco=false`,
-      ],
     },
   };
 }
diff --git a/test/functional/apps/dashboard_elements/controls/options_list/options_list_allow_expensive_queries_off.ts b/test/functional/apps/dashboard_elements/controls/options_list/options_list_allow_expensive_queries_off.ts
index 0a455c21507d3..591d01b9ea40c 100644
--- a/test/functional/apps/dashboard_elements/controls/options_list/options_list_allow_expensive_queries_off.ts
+++ b/test/functional/apps/dashboard_elements/controls/options_list/options_list_allow_expensive_queries_off.ts
@@ -27,9 +27,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   const setAllowExpensiveQueries = async (value: boolean) => {
     await common.navigateToApp('console');
-    await console.closeHelpIfExists();
-    await console.clearTextArea();
-    await console.enterRequest(
+    await console.clearEditorText();
+    await console.enterText(
       '\nPUT _cluster/settings\n{"transient": {"search.allow_expensive_queries": ' + value + '}}'
     );
     await console.clickPlay();
diff --git a/test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts b/test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts
index 1c006093aae06..e8e01f0626efe 100644
--- a/test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts
+++ b/test/functional/apps/dashboard_elements/controls/options_list/options_list_dashboard_interaction.ts
@@ -365,17 +365,17 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const newDocuments: Array<{ index: string; id: string }> = [];
 
       const addDocument = async (index: string, document: string) => {
-        await console.enterRequest('\nPOST ' + index + '/_doc/ \n{\n ' + document);
+        await console.enterText('\nPOST ' + index + '/_doc/\n{\n ' + document + '\n}');
         await console.clickPlay();
         await header.waitUntilLoadingHasFinished();
-        const response = JSON.parse(await console.getResponse());
+        const response = JSON.parse(await console.getOutputText());
         newDocuments.push({ index, id: response._id });
       };
 
       before(async () => {
         await common.navigateToApp('console');
-        await console.collapseHelp();
-        await console.clearTextArea();
+        await console.skipTourIfExists();
+        await console.clearEditorText();
         await addDocument(
           'animals-cats-2018-01-01',
           '"@timestamp": "2018-01-01T16:00:00.000Z", \n"name": "Rosie", \n"sound": "hiss"'
@@ -416,9 +416,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       after(async () => {
         await common.navigateToApp('console');
-        await console.clearTextArea();
+        await console.clearEditorText();
         for (const { index, id } of newDocuments) {
-          await console.enterRequest(`\nDELETE /${index}/_doc/${id}`);
+          await console.enterText(`\nDELETE /${index}/_doc/${id}`);
           await console.clickPlay();
           await header.waitUntilLoadingHasFinished();
         }
diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts
index 5ac5a0d0e0c48..b1ca9e937d364 100644
--- a/test/functional/apps/discover/esql/_esql_view.ts
+++ b/test/functional/apps/discover/esql/_esql_view.ts
@@ -118,11 +118,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(await testSubjects.exists('unifiedHistogramChart')).to.be(false);
       });
 
-      it('should render the histogram for indices with no @timestamp field when the ?t_start, ?t_end params are in the query', async function () {
+      it('should render the histogram for indices with no @timestamp field when the ?_tstart, ?_tend params are in the query', async function () {
         await discover.selectTextBaseLang();
         await unifiedFieldList.waitUntilSidebarHasLoaded();
 
-        const testQuery = `from kibana_sample_data_flights | limit 10 | where timestamp >= ?t_start and timestamp <= ?t_end`;
+        const testQuery = `from kibana_sample_data_flights | limit 10 | where timestamp >= ?_tstart and timestamp <= ?_tend`;
 
         await monacoEditor.setCodeEditorValue(testQuery);
         await testSubjects.click('querySubmitButton');
diff --git a/test/functional/config.ccs.ts b/test/functional/config.ccs.ts
index 28213eb2bec25..227c3b74931a7 100644
--- a/test/functional/config.ccs.ts
+++ b/test/functional/config.ccs.ts
@@ -21,7 +21,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
     testFiles: [
       require.resolve('./apps/dashboard/group3'),
       require.resolve('./apps/discover/ccs_compatibility'),
-      require.resolve('./apps/console/monaco/_console_ccs'),
+      require.resolve('./apps/console/_console_ccs'),
       require.resolve('./apps/management/ccs_compatibility'),
       require.resolve('./apps/getting_started'),
     ],
diff --git a/test/functional/firefox/console.config.ts b/test/functional/firefox/console.config.ts
index 7ec19be5ec491..e59eb20ceb59e 100644
--- a/test/functional/firefox/console.config.ts
+++ b/test/functional/firefox/console.config.ts
@@ -17,7 +17,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
   return {
     ...baseConfig.getAll(),
 
-    testFiles: [require.resolve('../apps/console/monaco')],
+    testFiles: [require.resolve('../apps/console')],
 
     junit: {
       reportName: 'Firefox UI Functional Tests - Console',
diff --git a/test/functional/page_objects/console_page.ts b/test/functional/page_objects/console_page.ts
index e0fe4daa5b212..080167c995ccb 100644
--- a/test/functional/page_objects/console_page.ts
+++ b/test/functional/page_objects/console_page.ts
@@ -9,7 +9,6 @@
 
 import { Key } from 'selenium-webdriver';
 import { asyncForEach } from '@kbn/std';
-import { WebElementWrapper } from '@kbn/ftr-common-functional-ui-services';
 import { FtrService } from '../ftr_provider_context';
 
 export class ConsolePageObject extends FtrService {
@@ -19,599 +18,387 @@ export class ConsolePageObject extends FtrService {
   private readonly common = this.ctx.getPageObject('common');
   private readonly browser = this.ctx.getService('browser');
 
-  public monaco = {
-    getTextArea: async () => {
-      const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
-      return await codeEditor.findByTagName('textarea');
-    },
-    getEditorText: async () => {
-      const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
-      const editorViewDiv = await codeEditor.findByClassName('view-lines');
-      return await editorViewDiv.getVisibleText();
-    },
-    getEditorTextAtLine: async (line: number) => {
-      const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
-      const editorViewDiv = await codeEditor.findAllByClassName('view-line');
-      return await editorViewDiv[line].getVisibleText();
-    },
-    getCurrentLineNumber: async () => {
-      const textArea = await this.monaco.getTextArea();
-      const styleAttribute = (await textArea.getAttribute('style')) ?? '';
-      const height = parseFloat(styleAttribute.replace(/.*height: ([+-]?\d+(\.\d+)?).*/, '$1'));
-      const top = parseFloat(styleAttribute.replace(/.*top: ([+-]?\d+(\.\d+)?).*/, '$1'));
-      // calculate the line number by dividing the top position by the line height
-      // and adding 1 because line numbers start at 1
-      return Math.ceil(top / height) + 1;
-    },
-    clearEditorText: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.clickMouseButton();
-      await textArea.clearValueWithKeyboard();
-    },
-    getOutputText: async () => {
-      const outputPanel = await this.testSubjects.find('consoleMonacoOutput');
-      const outputViewDiv = await outputPanel.findByClassName('monaco-scrollable-element');
-      return await outputViewDiv.getVisibleText();
-    },
-    pressEnter: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(Key.ENTER);
-    },
-    enterText: async (text: string) => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.type(text);
-    },
-    promptAutocomplete: async (letter = 'b') => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.type(letter);
-      await this.retry.waitFor('autocomplete to be visible', () =>
-        this.monaco.isAutocompleteVisible()
-      );
-    },
-    isAutocompleteVisible: async () => {
-      const element = await this.find.byClassName('suggest-widget').catch(() => null);
-      if (!element) return false;
-
-      const attribute = await element.getAttribute('style');
-      return !attribute?.includes('display: none;');
-    },
-    getAutocompleteSuggestion: async (index: number) => {
-      const suggestionsWidget = await this.find.byClassName('suggest-widget');
-      const suggestions = await suggestionsWidget.findAllByClassName('monaco-list-row');
-      const suggestion = suggestions[index];
-      if (!suggestion) {
-        return undefined;
-      }
-      const label = await suggestion.findByClassName('label-name');
-      return label.getVisibleText();
-    },
-    pressUp: async (shift: boolean = false) => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(shift ? [Key.SHIFT, Key.UP] : Key.UP);
-    },
-    pressDown: async (shift: boolean = false) => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(shift ? [Key.SHIFT, Key.DOWN] : Key.DOWN);
-    },
-    pressRight: async (shift: boolean = false) => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(shift ? [Key.SHIFT, Key.RIGHT] : Key.RIGHT);
-    },
-    pressLeft: async (shift: boolean = false) => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(shift ? [Key.SHIFT, Key.LEFT] : Key.LEFT);
-    },
-    pressCtrlSpace: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([
-        Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-        Key.SPACE,
-      ]);
-    },
-    pressCtrlEnter: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([
-        Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-        Key.ENTER,
-      ]);
-    },
-    pressCtrlI: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'i']);
-    },
-    pressCtrlUp: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([
-        Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-        Key.UP,
-      ]);
-    },
-    pressCtrlDown: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([
-        Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-        Key.DOWN,
-      ]);
-    },
-    pressCtrlL: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'l']);
-    },
-    pressCtrlSlash: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], '/']);
-    },
-    pressEscape: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys(Key.ESCAPE);
-    },
-    selectAllRequests: async () => {
-      const textArea = await this.monaco.getTextArea();
-      const selectionKey = Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'];
-      await textArea.pressKeys([selectionKey, 'a']);
-    },
-    getEditor: async () => {
-      return await this.testSubjects.find('consoleMonacoEditor');
-    },
-    hasInvalidSyntax: async () => {
-      return await this.find.existsByCssSelector('.squiggly-error');
-    },
-    responseHasDeprecationWarning: async () => {
-      const response = await this.monaco.getOutputText();
-      return response.trim().startsWith('#!');
-    },
-    selectCurrentRequest: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.clickMouseButton();
-    },
-    getFontSize: async () => {
-      const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
-      const editorViewDiv = await codeEditor.findByClassName('view-line');
-      return await editorViewDiv.getComputedStyle('font-size');
-    },
-    pasteClipboardValue: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'v']);
-    },
-    copyRequestsToClipboard: async () => {
-      const textArea = await this.monaco.getTextArea();
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'a']);
-      await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'c']);
-    },
-    isA11yOverlayVisible: async () => {
-      return await this.testSubjects.exists('codeEditorAccessibilityOverlay');
-    },
-  };
-
-  public async getVisibleTextFromAceEditor(editor: WebElementWrapper) {
-    const lines = await editor.findAllByClassName('ace_line_group');
-    const linesText = await Promise.all(lines.map(async (line) => await line.getVisibleText()));
-    return linesText.join('\n');
-  }
-
-  public async getRequestEditor() {
-    return await this.testSubjects.find('request-editor');
-  }
-
-  public async getRequest() {
-    const requestEditor = await this.getRequestEditor();
-    return await this.getVisibleTextFromAceEditor(requestEditor);
-  }
-
-  public async getResponse() {
-    const responseEditor = await this.testSubjects.find('response-editor');
-    return await this.getVisibleTextFromAceEditor(responseEditor);
+  public async getTextArea() {
+    const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
+    return await codeEditor.findByTagName('textarea');
   }
 
-  public async clickPlay() {
-    await this.testSubjects.click('sendRequestButton');
+  public async getEditorText() {
+    const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
+    const editorViewDiv = await codeEditor.findByClassName('view-lines');
+    return await editorViewDiv.getVisibleText();
   }
 
-  public async collapseHelp() {
-    await this.testSubjects.click('help-close-button');
+  public async getEditorTextAtLine(line: number) {
+    const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
+    const editorViewDiv = await codeEditor.findAllByClassName('view-line');
+    return await editorViewDiv[line].getVisibleText();
   }
 
-  public async openSettings() {
-    await this.testSubjects.click('consoleSettingsButton');
+  public async getCurrentLineNumber() {
+    const textArea = await this.getTextArea();
+    const styleAttribute = (await textArea.getAttribute('style')) ?? '';
+    const height = parseFloat(styleAttribute.replace(/.*height: ([+-]?\d+(\.\d+)?).*/, '$1'));
+    const top = parseFloat(styleAttribute.replace(/.*top: ([+-]?\d+(\.\d+)?).*/, '$1'));
+    // calculate the line number by dividing the top position by the line height
+    // and adding 1 because line numbers start at 1
+    return Math.ceil(top / height) + 1;
   }
 
-  public async toggleA11yOverlaySetting() {
-    // while the settings form opens/loads this may fail, so retry for a while
-    await this.retry.try(async () => {
-      const toggle = await this.testSubjects.find('enableA11yOverlay');
-      await toggle.click();
-    });
+  public async clearEditorText() {
+    const textArea = await this.getTextArea();
+    await textArea.clickMouseButton();
+    await textArea.clearValueWithKeyboard();
+  }
 
-    await this.testSubjects.click('settings-save-button');
+  public async getOutputText() {
+    const outputPanel = await this.testSubjects.find('consoleMonacoOutput');
+    const outputViewDiv = await outputPanel.findByClassName('monaco-scrollable-element');
+    return await outputViewDiv.getVisibleText();
   }
 
-  public async openVariablesModal() {
-    await this.testSubjects.click('consoleVariablesButton');
+  public async pressEnter() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(Key.ENTER);
   }
 
-  public async closeVariablesModal() {
-    await this.testSubjects.click('variablesCancelButton');
+  public async enterText(text: string) {
+    const textArea = await this.getTextArea();
+    await textArea.type(text);
   }
 
-  public async addNewVariable({ name, value }: { name: string; value: string }) {
-    await this.openVariablesModal();
+  public async promptAutocomplete(letter = 'b') {
+    const textArea = await this.getTextArea();
+    await textArea.type(letter);
+    await this.retry.waitFor('autocomplete to be visible', () => this.isAutocompleteVisible());
+  }
 
-    // while the variables form opens/loads this may fail, so retry for a while
-    await this.retry.try(async () => {
-      await this.testSubjects.click('variablesAddButton');
+  public async isAutocompleteVisible() {
+    const element = await this.find.byClassName('suggest-widget').catch(() => null);
+    if (!element) return false;
 
-      const variableNameInputs = await this.testSubjects.findAll('variablesNameInput');
-      await variableNameInputs[variableNameInputs.length - 1].type(name);
+    const attribute = await element.getAttribute('style');
+    return !attribute?.includes('display: none;');
+  }
 
-      const variableValueInputs = await this.testSubjects.findAll('variablesValueInput');
-      await variableValueInputs[variableValueInputs.length - 1].type(value);
-    });
+  public async getAutocompleteSuggestion(index: number) {
+    const suggestionsWidget = await this.find.byClassName('suggest-widget');
+    const suggestions = await suggestionsWidget.findAllByClassName('monaco-list-row');
+    const suggestion = suggestions[index];
+    if (!suggestion) {
+      return undefined;
+    }
+    const label = await suggestion.findByClassName('label-name');
+    return label.getVisibleText();
+  }
 
-    await this.testSubjects.click('variablesSaveButton');
+  public async pressUp(shift: boolean = false) {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(shift ? [Key.SHIFT, Key.UP] : Key.UP);
   }
 
-  public async removeVariables() {
-    await this.openVariablesModal();
+  public async pressDown(shift: boolean = false) {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(shift ? [Key.SHIFT, Key.DOWN] : Key.DOWN);
+  }
 
-    // while the variables form opens/loads this may fail, so retry for a while
-    await this.retry.try(async () => {
-      const buttons = await this.testSubjects.findAll('variablesRemoveButton');
-      await asyncForEach(buttons, async (button) => {
-        await button.click();
-      });
-    });
-    await this.testSubjects.click('variablesSaveButton');
+  public async pressRight(shift: boolean = false) {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(shift ? [Key.SHIFT, Key.RIGHT] : Key.RIGHT);
   }
 
-  public async getVariables() {
-    await this.openVariablesModal();
-    const inputs = await this.testSubjects.findAll('variablesNameInput');
-    const variables = await Promise.all(
-      inputs.map(async (input) => await input.getAttribute('value'))
-    );
-    await this.closeVariablesModal();
-    return variables;
+  public async pressLeft(shift: boolean = false) {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(shift ? [Key.SHIFT, Key.LEFT] : Key.LEFT);
   }
 
-  public async setFontSizeSetting(newSize: number) {
-    await this.openSettings();
+  public async pressCtrlSpace() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([
+      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
+      Key.SPACE,
+    ]);
+  }
+  public async pressCtrlEnter() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([
+      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
+      Key.ENTER,
+    ]);
+  }
 
-    // while the settings form opens/loads this may fail, so retry for a while
-    await this.retry.try(async () => {
-      const fontSizeInput = await this.testSubjects.find('setting-font-size-input');
-      await fontSizeInput.clearValue({ withJS: true });
-      await fontSizeInput.click();
-      await fontSizeInput.type(String(newSize));
-    });
+  public async pressCtrlI() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'i']);
+  }
 
-    await this.testSubjects.click('settings-save-button');
+  public async pressCtrlUp() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], Key.UP]);
   }
 
-  public async toggleKeyboardShortcuts(enabled: boolean) {
-    await this.openSettings();
+  public async pressCtrlDown() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([
+      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
+      Key.DOWN,
+    ]);
+  }
 
-    // while the settings form opens/loads this may fail, so retry for a while
-    await this.retry.try(async () => {
-      const toggle = await this.testSubjects.find('enableKeyboardShortcuts');
-      await toggle.click();
-    });
+  public async pressCtrlL() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'l']);
+  }
 
-    await this.testSubjects.click('settings-save-button');
+  public async pressCtrlSlash() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], '/']);
   }
 
-  public async getFontSize(editor: WebElementWrapper) {
-    const aceLine = await editor.findByClassName('ace_line');
-    return await aceLine.getComputedStyle('font-size');
+  public async pressEscape() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys(Key.ESCAPE);
   }
 
-  public async getRequestFontSize() {
-    return await this.getFontSize(await this.getRequestEditor());
+  public async selectAllRequests() {
+    const textArea = await this.getTextArea();
+    const selectionKey = Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'];
+    await textArea.pressKeys([selectionKey, 'a']);
   }
 
   public async getEditor() {
-    return this.testSubjects.find('console-application');
+    return await this.testSubjects.find('consoleMonacoEditor');
   }
 
-  // Prompt autocomplete window and provide a initial letter of properties to narrow down the results. E.g. 'b' = 'bool'
-  public async promptAutocomplete(letter = 'b') {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.type(letter);
-    await this.retry.waitFor('autocomplete to be visible', () => this.isAutocompleteVisible());
+  public async hasInvalidSyntax() {
+    return await this.find.existsByCssSelector('.squiggly-error');
   }
 
-  public async isAutocompleteVisible() {
-    const element = await this.find.byCssSelector('.ace_autocomplete').catch(() => null);
-    if (!element) return false;
-
-    const attribute = await element.getAttribute('style');
-    return !attribute?.includes('display: none;');
+  public async responseHasDeprecationWarning() {
+    const response = await this.getOutputText();
+    return response.trim().startsWith('#!');
   }
 
-  public async getAutocompleteSuggestion(index: number = 0) {
-    const children1 = await this.find
-      .allByCssSelector('.ace_autocomplete .ace_line :nth-child(1)')
-      .catch(() => null);
-    const children2 = await this.find
-      .allByCssSelector('.ace_autocomplete .ace_line :nth-child(2)')
-      .catch(() => null);
-    if (!children1 || !children2) return null;
+  public async selectCurrentRequest() {
+    const textArea = await this.getTextArea();
+    await textArea.clickMouseButton();
+  }
 
-    return (await children1[index].getVisibleText()) + (await children2[index].getVisibleText());
+  public async getFontSize() {
+    const codeEditor = await this.testSubjects.find('consoleMonacoEditor');
+    const editorViewDiv = await codeEditor.findByClassName('view-line');
+    return await editorViewDiv.getComputedStyle('font-size');
   }
 
-  public async enterRequest(request: string = '\nGET _search') {
-    const textArea = await this.getEditorTextArea();
-    await textArea.pressKeys(request);
+  public async pasteClipboardValue() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'v']);
   }
 
-  public async enterText(text: string) {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.type(text);
+  public async copyRequestsToClipboard() {
+    const textArea = await this.getTextArea();
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'a']);
+    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'c']);
   }
 
-  private async getEditorTextArea() {
-    // This focusses the cursor on the bottom of the text area
-    await this.retry.try(async () => {
-      const editor = await this.getEditor();
-      const content = await editor.findByCssSelector('.ace_content');
-      await content.click();
-    });
-    return await this.testSubjects.find('console-textarea');
+  public async isA11yOverlayVisible() {
+    return await this.testSubjects.exists('codeEditorAccessibilityOverlay');
   }
 
-  public async getAllTextLines() {
-    const editor = await this.getEditor();
-    return await editor.findAllByClassName('ace_line_group');
+  public async clickPlay() {
+    await this.testSubjects.click('sendRequestButton');
   }
 
-  public async getAllVisibleText() {
-    let textString = '';
-    const textLineElements = await this.getAllTextLines();
-    for (let i = 0; i < textLineElements.length; i++) {
-      textString = textString.concat(await textLineElements[i].getVisibleText());
-    }
-    return textString;
+  public async clickCopyOutput() {
+    await this.testSubjects.click('copyOutputButton');
   }
 
-  public async getVisibleTextAt(lineIndex: number) {
-    const lines = await this.getAllTextLines();
-    if (lines.length < lineIndex) {
-      throw new Error(`No line with index: ${lineIndex}`);
+  public async clickClearInput() {
+    const hasClearButton = await this.testSubjects.exists('clearConsoleInput');
+
+    if (hasClearButton) {
+      await this.testSubjects.click('clearConsoleInput');
     }
+  }
 
-    const line = lines[lineIndex];
-    const text = await line.getVisibleText();
+  public async clickClearOutput() {
+    const hasClearButton = await this.testSubjects.exists('clearConsoleOutput');
 
-    return text.trim();
+    if (hasClearButton) {
+      await this.testSubjects.click('clearConsoleOutput');
+    }
   }
 
-  public async pressEnter() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(Key.ENTER);
+  public async clickExportButton() {
+    await this.testSubjects.click('consoleExportButton');
   }
 
-  public async pressEscape() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(Key.ESCAPE);
+  public async clickHelpIcon() {
+    await this.testSubjects.click('consoleHelpButton');
   }
 
-  public async pressDown(shift: boolean = false) {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(shift ? [Key.SHIFT, Key.DOWN] : Key.DOWN);
+  public async clickShortcutsIcon() {
+    await this.testSubjects.click('consoleShortcutsButton');
   }
 
-  public async pressLeft(shift: boolean = false) {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(shift ? [Key.SHIFT, Key.LEFT] : Key.LEFT);
+  public async setFileToUpload(path: string) {
+    const input = await this.find.byCssSelector('#importConsoleFile');
+    await input.type(path);
   }
 
-  public async pressRight(shift: boolean = false) {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(shift ? [Key.SHIFT, Key.RIGHT] : Key.RIGHT);
+  public async acceptFileImport() {
+    await this.testSubjects.click('confirmModalConfirmButton');
   }
 
-  public async pressUp(shift: boolean = false) {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys(shift ? [Key.SHIFT, Key.UP] : Key.UP);
+  public async isHelpPopoverOpen() {
+    const classAttribute = await this.testSubjects.getAttribute('consoleHelpPopover', 'class');
+    return classAttribute?.includes('euiPopover-isOpen');
   }
 
-  public async clearTextArea() {
-    await this.retry.waitForWithTimeout('text area is cleared', 20000, async () => {
-      const textArea = await this.testSubjects.find('console-textarea');
-      await textArea.clickMouseButton();
-      await textArea.clearValueWithKeyboard();
+  public async isShortcutsPopoverOpen() {
+    const classAttribute = await this.testSubjects.getAttribute('consoleShortcutsPopover', 'class');
+    return classAttribute?.includes('euiPopover-isOpen');
+  }
 
-      const editor = await this.getEditor();
-      const lines = await editor.findAllByClassName('ace_line_group');
-      // there should be only one empty line after clearing the textarea
-      const text = await lines[lines.length - 1].getVisibleText();
-      return lines.length === 1 && text.trim() === '';
-    });
+  public async clickSkipTour() {
+    await this.testSubjects.click('consoleSkipTourButton');
   }
 
-  public async selectAllRequests() {
-    const editor = await this.getEditorTextArea();
-    const selectionKey = Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'];
-    await editor.pressKeys([selectionKey, 'a']);
+  public async clickNextTourStep() {
+    await this.testSubjects.click('consoleNextTourStepButton');
   }
 
-  public async hasSuccessBadge() {
-    return await this.find.existsByCssSelector('.ace_badge--success');
+  public async clickCompleteTour() {
+    await this.testSubjects.click('consoleCompleteTourButton');
   }
 
-  public async hasWarningBadge() {
-    return await this.find.existsByCssSelector('.ace_badge--warning');
+  public async clickRerunTour() {
+    await this.testSubjects.click('consoleRerunTourButton');
   }
 
-  public async hasInvalidSyntax() {
-    return await this.find.existsByCssSelector('.ace_invalid');
+  public async openConsole() {
+    await this.testSubjects.click('consoleShellButton');
   }
 
-  public async hasErrorMarker() {
-    return await this.find.existsByCssSelector('.ace_error');
+  public async openConfig() {
+    await this.testSubjects.click('consoleConfigButton');
   }
 
-  public async getTokenColor(token: string) {
-    const element = await this.find.byClassName(token);
-    return await element.getComputedStyle('color');
+  public async openHistory() {
+    await this.testSubjects.click('consoleHistoryButton');
   }
 
-  public async responseHasDeprecationWarning() {
-    // Retry for a while to allow the deprecation warning to appear
-    return await this.retry.try(async () => {
-      const response = await this.getResponse();
-      return response.trim().startsWith('#!');
-    });
+  public async isShellOpen() {
+    return await this.testSubjects.exists('consoleEditorContainer');
   }
 
-  public async clickFoldWidget() {
-    const widget = await this.find.byCssSelector('.ace_fold-widget');
-    await widget.click();
+  public async isConfigOpen() {
+    return await this.testSubjects.exists('consoleConfigPanel');
   }
 
-  public async hasFolds() {
-    return await this.find.existsByCssSelector('.ace_fold');
+  public async isHistoryOpen() {
+    return await this.testSubjects.exists('consoleHistoryPanel');
   }
 
-  public async getResponseStatus() {
-    const statusBadge = await this.testSubjects.find('consoleResponseStatusBadge');
-    const text = await statusBadge.getVisibleText();
-    return text.replace(/[^\d.]+/, '');
+  public async openSettings() {
+    await this.testSubjects.click('consoleConfigButton');
   }
 
-  async closeHelpIfExists() {
+  public async toggleA11yOverlaySetting() {
+    // while the settings form opens/loads this may fail, so retry for a while
     await this.retry.try(async () => {
-      const helpPanelShown = await this.testSubjects.exists('help-close-button');
-      if (helpPanelShown) {
-        await this.collapseHelp();
-      }
+      const toggle = await this.testSubjects.find('enableA11yOverlay');
+      await toggle.click();
     });
   }
 
-  public async collapseJsonBlock(blockNumber: number) {
-    const blocks = await this.find.allByCssSelector('.ace_fold-widget');
+  public async addNewVariable({ name, value }: { name: string; value: string }) {
+    await this.retry.try(async () => {
+      await this.testSubjects.click('variablesAddButton');
 
-    if (blocks.length < blockNumber) {
-      throw new Error(`No block with index: ${blockNumber}`);
-    }
+      const nameField = await this.testSubjects.find('nameField');
+      await nameField.type(name);
 
-    await blocks[blockNumber].click();
-    await this.retry.waitFor('json block to be collapsed', async () => {
-      return blocks[blockNumber].getAttribute('class').then((classes) => {
-        return classes?.includes('ace_closed') ?? false;
-      });
+      const valueField = await this.testSubjects.find('valueField');
+      await valueField.type(value);
     });
-  }
 
-  public async expandJsonBlock(blockNumber: number) {
-    const blocks = await this.find.allByCssSelector('.ace_fold-widget');
-
-    if (blocks.length < blockNumber) {
-      throw new Error(`No block with index: ${blockNumber}`);
-    }
+    await this.testSubjects.click('addNewVariableButton');
+  }
 
-    await blocks[blockNumber].click();
-    await this.retry.waitFor('json block to be expanded', async () => {
-      return blocks[blockNumber].getAttribute('class').then((classes) => {
-        return classes?.includes('ace_open') ?? false;
+  public async removeVariables() {
+    // while the variables form opens/loads this may fail, so retry for a while
+    await this.retry.try(async () => {
+      const buttons = await this.testSubjects.findAll('variablesRemoveButton');
+      await asyncForEach(buttons, async (button) => {
+        await button.click();
+        await this.testSubjects.click('confirmModalConfirmButton');
       });
     });
   }
 
-  public async isJsonBlockExpanded(blockNumber: number) {
-    const blocks = await this.find.allByCssSelector('.ace_fold-widget');
-
-    if (blocks.length < blockNumber) {
-      throw new Error(`No block with index: ${blockNumber}`);
-    }
-
-    const classes = await blocks[blockNumber].getAttribute('class');
-    return classes?.includes('ace_open') ?? false;
-  }
-
-  public async selectCurrentRequest() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.clickMouseButton();
-  }
+  public async getVariables() {
+    const table = await this.testSubjects.find('variablesTable');
+    const rows = await table.findAllByClassName('euiTableRow');
+    const tableText = await table.getVisibleText();
 
-  public async getRequestAtLine(lineNumber: number) {
-    const editor = await this.getEditor();
-    const lines = await editor.findAllByClassName('ace_line_group');
-    if (lines.length < lineNumber) {
-      throw new Error(`No line with index: ${lineNumber}`);
+    if (tableText.includes('No variables have been added yet')) {
+      return [];
     }
 
-    const line = lines[lineNumber];
-    const text = await line.getVisibleText();
+    const rowsData = await Promise.all(
+      rows.map(async (row) => {
+        return {
+          name: await (await row.findByTestSubject('variableNameCell')).getVisibleText(),
+          value: await (await row.findByTestSubject('variableValueCell')).getVisibleText(),
+        };
+      })
+    );
 
-    return text.trim();
+    return rowsData;
   }
 
-  public async getCurrentLineNumber() {
-    const editor = await this.getRequestEditor();
-    let line = await editor.findByCssSelector('.ace_active-line');
-
+  public async setFontSizeSetting(newSize: number) {
+    // while the settings form opens/loads this may fail, so retry for a while
     await this.retry.try(async () => {
-      const firstInnerHtml = await line.getAttribute('innerHTML');
-      // The line number is not updated immediately after the click, so we need to wait for it.
-      await this.common.sleep(500);
-      line = await editor.findByCssSelector('.ace_active-line');
-      const secondInnerHtml = await line.getAttribute('innerHTML');
-      // The line number will change as the user types, but we want to wait until it's stable.
-      return firstInnerHtml === secondInnerHtml;
+      const fontSizeInput = await this.testSubjects.find('setting-font-size-input');
+      await fontSizeInput.clearValue({ withJS: true });
+      await fontSizeInput.click();
+      await fontSizeInput.type(String(newSize));
     });
-
-    // style attribute looks like this: "top: 0px; height: 18.5px;" height is the line height
-    const styleAttribute = (await line.getAttribute('style')) ?? '';
-    const height = parseFloat(styleAttribute.replace(/.*height: ([+-]?\d+(\.\d+)?).*/, '$1'));
-    const top = parseFloat(styleAttribute.replace(/.*top: ([+-]?\d+(\.\d+)?).*/, '$1'));
-    // calculate the line number by dividing the top position by the line height
-    // and adding 1 because line numbers start at 1
-    return Math.ceil(top / height) + 1;
   }
 
-  public async pressCtrlEnter() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([
-      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-      Key.ENTER,
-    ]);
-  }
-
-  public async pressCtrlI() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'i']);
-  }
+  public async toggleKeyboardShortcuts(enabled: boolean) {
+    await this.openSettings();
 
-  public async pressCtrlUp() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], Key.UP]);
+    // while the settings form opens/loads this may fail, so retry for a while
+    await this.retry.try(async () => {
+      const toggle = await this.testSubjects.find('enableKeyboardShortcuts');
+      await toggle.click();
+    });
   }
 
-  public async pressCtrlDown() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([
-      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-      Key.DOWN,
-    ]);
+  public async hasSuccessBadge() {
+    return await this.find.existsByCssSelector('.ace_badge--success');
   }
 
-  public async pressCtrlL() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'l']);
+  public async hasWarningBadge() {
+    return await this.find.existsByCssSelector('.ace_badge--warning');
   }
 
-  public async pressCtrlSlash() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], '/']);
+  public async getResponseStatus() {
+    const statusBadge = await this.testSubjects.find('consoleResponseStatusBadge');
+    const text = await statusBadge.getVisibleText();
+    return text.replace(/[^\d.]+/, '');
   }
 
-  public async pressCtrlSpace() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([
-      Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'],
-      Key.SPACE,
-    ]);
+  async skipTourIfExists() {
+    await this.retry.try(async () => {
+      const tourShown = await this.testSubjects.exists('consoleSkipTourButton');
+      if (tourShown) {
+        await this.clickSkipTour();
+      }
+    });
   }
 
   public async clickContextMenu() {
@@ -635,10 +422,6 @@ export class ConsolePageObject extends FtrService {
     return await this.testSubjects.exists('consoleMenuAutoIndent');
   }
 
-  public async isA11yOverlayVisible() {
-    return await this.testSubjects.exists('a11y-overlay');
-  }
-
   public async isCopyAsButtonVisible() {
     return await this.testSubjects.exists('consoleMenuCopyAsButton');
   }
@@ -687,121 +470,25 @@ export class ConsolePageObject extends FtrService {
     await button.click();
   }
 
-  public async getRequestMethod() {
-    const requestEditor = await this.getRequestEditor();
-    const requestMethod = await requestEditor.findByClassName('ace_method');
-    const method = await requestMethod.getVisibleText();
-    return method.trim();
-  }
-
-  public async getRequestPath() {
-    const requestEditor = await this.getRequestEditor();
-    const requestPath = await requestEditor.findAllByCssSelector('.ace_url');
-    const path = [];
-    for (const pathPart of requestPath) {
-      const className = await pathPart.getAttribute('class');
-      if (className?.includes('ace_param') ?? false) {
-        // This is a parameter, we don't want to include it in the path
-        break;
-      }
-      path.push(await pathPart.getVisibleText());
-    }
-    return path.join('').trim();
-  }
-
-  public async getRequestQueryParams() {
-    await this.sleepForDebouncePeriod();
-    const requestEditor = await this.getRequestEditor();
-    const requestQueryParams = await requestEditor.findAllByCssSelector('.ace_url.ace_param');
-
-    if (requestQueryParams.length === 0) {
-      // No query params
-      return;
-    }
-
-    const params = [];
-    for (const param of requestQueryParams) {
-      params.push(await param.getVisibleText());
-    }
-    return params.join('').trim();
-  }
-
-  public async getRequestBody() {
-    let request = await this.getRequest();
-    // Remove new lines at the beginning of the request
-    request = request.replace(/^\n/, '');
-    const method = await this.getRequestMethod();
-    const path = await this.getRequestPath();
-    const query = await this.getRequestQueryParams();
-
-    if (query) {
-      return request.replace(`${method} ${path}?${query}`, '').trim();
-    }
-
-    return request.replace(`${method} ${path}`, '').trim();
-  }
-
-  public async getRequestLineHighlighting() {
-    await this.sleepForDebouncePeriod();
-    const requestEditor = await this.getRequestEditor();
-    const requestLine = await requestEditor.findAllByCssSelector('.ace_line > *');
-    const line = [];
-    for (const linePart of requestLine) {
-      line.push(await linePart.getAttribute('class'));
-    }
-    return line.join(' ');
-  }
-
-  public async getRequestMethodColor() {
-    return await this.getTokenColor('ace_method');
-  }
-
-  public async getRequestPathColor() {
-    return await this.getTokenColor('ace_url');
-  }
-
-  public async getRequestQueryColor() {
-    return await this.getTokenColor('ace_param');
-  }
-
-  public async getRequestBodyColor() {
-    return await this.getTokenColor('ace_paren');
-  }
-
-  public async getCommentColor() {
-    return await this.getTokenColor('ace_comment');
-  }
-
-  public async getRequestBodyCount() {
-    const body = await this.getRequestBody();
-    return body.split('\n').length;
-  }
-
-  public async copyRequestsToClipboard() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'a']);
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'c']);
-  }
-
-  public async pasteClipboardValue() {
-    const textArea = await this.testSubjects.find('console-textarea');
-    await textArea.pressKeys([Key[process.platform === 'darwin' ? 'COMMAND' : 'CONTROL'], 'v']);
-  }
-
   public async clickHistory() {
     const historyButton = await this.testSubjects.find('consoleHistoryButton');
     await historyButton.click();
   }
 
   public async getHistoryEntries() {
-    const history = await this.find.allByCssSelector('.list-group-item');
+    const history = await this.testSubjects.findAll('historyItemFieldset');
     return await Promise.all(history.map(async (item) => await item.getVisibleText()));
   }
 
-  public async loadRequestFromHistory(index: number) {
-    const historyItem = await this.find.byCssSelector(`#historyReq${index}`);
+  public async loadRequestFromHistory(index: number, andExcute: boolean = false) {
+    const historyItem = await this.testSubjects.find(`historyItem-${index}`);
     await historyItem.click();
-    await this.testSubjects.click('consoleHistoryApplyButton');
+
+    if (andExcute) {
+      await this.testSubjects.click('consoleHistoryAddAndRunButton');
+    } else {
+      await this.testSubjects.click('consoleHistoryApplyButton');
+    }
   }
 
   public async clickClearHistory() {
@@ -830,4 +517,8 @@ export class ConsolePageObject extends FtrService {
       (window as any).autocomplete_trace = f;
     }, flag);
   }
+
+  public async isOutputPanelEmptyStateVisible() {
+    return await this.testSubjects.exists('consoleOutputPanelEmptyState');
+  }
 }
diff --git a/test/functional/page_objects/dashboard_page_controls.ts b/test/functional/page_objects/dashboard_page_controls.ts
index 28c7df0237b22..e59610a61a13b 100644
--- a/test/functional/page_objects/dashboard_page_controls.ts
+++ b/test/functional/page_objects/dashboard_page_controls.ts
@@ -12,7 +12,7 @@ import {
   OPTIONS_LIST_CONTROL,
   RANGE_SLIDER_CONTROL,
 } from '@kbn/controls-plugin/common';
-import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common/control_group/types';
+import { ControlGroupChainingSystem } from '@kbn/controls-plugin/common';
 import { OptionsListSearchTechnique } from '@kbn/controls-plugin/common/options_list/suggestions_searching';
 import { OptionsListSortingType } from '@kbn/controls-plugin/common/options_list/suggestions_sorting';
 import expect from '@kbn/expect';
diff --git a/test/functional/page_objects/embedded_console.ts b/test/functional/page_objects/embedded_console.ts
index 3a9b589910d8a..801b2a169deec 100644
--- a/test/functional/page_objects/embedded_console.ts
+++ b/test/functional/page_objects/embedded_console.ts
@@ -25,6 +25,9 @@ export function EmbeddedConsoleProvider(ctx: FtrProviderContext) {
     async clickEmbeddedConsoleControlBar() {
       await testSubjects.click('consoleEmbeddedControlBar');
     },
+    async expectEmbeddedConsoleHaveFullscreenToggle() {
+      await testSubjects.existOrFail('consoleToggleFullscreenButton');
+    },
     async expectEmbeddedConsoleNotebooksButtonExists() {
       await testSubjects.existOrFail('consoleEmbeddedNotebooksButton');
     },
diff --git a/test/plugin_functional/test_suites/core_plugins/rendering.ts b/test/plugin_functional/test_suites/core_plugins/rendering.ts
index a8c9fef0cfb96..b9d2f51cc8c16 100644
--- a/test/plugin_functional/test_suites/core_plugins/rendering.ts
+++ b/test/plugin_functional/test_suites/core_plugins/rendering.ts
@@ -102,7 +102,6 @@ export default function ({ getService }: PluginFunctionalProviderContext) {
         // When plugin owners make a change that exposes additional config values, the changes will be reflected in this test assertion.
         // Ensure that your change does not unintentionally expose any sensitive values!
         'console.autocompleteDefinitions.endpointsAvailability (stack?|serverless?)',
-        'console.dev.enableMonaco (boolean?)',
         'console.ui.enabled (boolean?)',
         'console.ui.embeddedEnabled (boolean?)',
         'dashboard.allowByValueEmbeddables (boolean?)',
diff --git a/x-pack/plugins/fleet/common/constants/epm.ts b/x-pack/plugins/fleet/common/constants/epm.ts
index f55a7294c0273..486175b4c73ab 100644
--- a/x-pack/plugins/fleet/common/constants/epm.ts
+++ b/x-pack/plugins/fleet/common/constants/epm.ts
@@ -27,6 +27,7 @@ export const FLEET_CLOUD_SECURITY_POSTURE_CSPM_POLICY_TEMPLATE = 'cspm';
 export const FLEET_CLOUD_SECURITY_POSTURE_CNVM_POLICY_TEMPLATE = 'vuln_mgmt';
 export const FLEET_CLOUD_DEFEND_PACKAGE = 'cloud_defend';
 export const FLEET_CLOUD_BEAT_PACKAGE = 'cloudbeat';
+export const FLEET_CONNECTORS_PACKAGE = 'elastic_connectors';
 
 export const GLOBAL_DATA_TAG_EXCLUDED_INPUTS = new Set<string>([
   FLEET_APM_PACKAGE,
diff --git a/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.test.ts b/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.test.ts
index b042684016199..9bf54b454b2b9 100644
--- a/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.test.ts
+++ b/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.test.ts
@@ -11,6 +11,7 @@ import type { PackagePolicy, RegistryDataStream } from '../../types';
 
 import type { DataStreamMeta } from './package_policies_to_agent_permissions';
 import {
+  ELASTIC_CONNECTORS_INDEX_PERMISSIONS,
   getDataStreamPrivileges,
   storedPackagePoliciesToAgentPermissions,
   UNIVERSAL_PROFILING_PERMISSIONS,
@@ -281,6 +282,48 @@ packageInfoCache.set('apm-8.9.0-preview', {
   },
 });
 
+packageInfoCache.set('elastic_connectors-1.0.0', {
+  format_version: '2.7.0',
+  name: 'elastic_connectors',
+  title: 'Elastic Connectors',
+  version: '1.0.0',
+  license: 'basic',
+  description: 'Sync data from source to the Elasticsearch index.',
+  type: 'integration',
+  release: 'beta',
+  categories: ['connector'],
+  icons: [],
+  owner: { github: 'elastic/ingestion-team' },
+  data_streams: [],
+  latestVersion: '1.0.0',
+  status: 'not_installed',
+  assets: {
+    kibana: {
+      csp_rule_template: [],
+      dashboard: [],
+      visualization: [],
+      search: [],
+      index_pattern: [],
+      map: [],
+      lens: [],
+      security_rule: [],
+      ml_module: [],
+      tag: [],
+      osquery_pack_asset: [],
+      osquery_saved_query: [],
+    },
+    elasticsearch: {
+      component_template: [],
+      ingest_pipeline: [],
+      ilm_policy: [],
+      transform: [],
+      index_template: [],
+      data_stream_ilm_policy: [],
+      ml_model: [],
+    },
+  },
+});
+
 describe('storedPackagePoliciesToAgentPermissions()', () => {
   it('Returns `undefined` if there are no package policies', async () => {
     const permissions = await storedPackagePoliciesToAgentPermissions(packageInfoCache, 'test', []);
@@ -761,3 +804,51 @@ describe('getDataStreamPrivileges()', () => {
     });
   });
 });
+
+it('Returns the Elastic Connectors permissions for elastic_connectors package', async () => {
+  const packagePolicies: PackagePolicy[] = [
+    {
+      id: 'package-policy-uuid-test-123',
+      name: 'test-policy',
+      namespace: '',
+      enabled: true,
+      package: { name: 'elastic_connectors', version: '1.0.0', title: 'Elastic Connectors' },
+      inputs: [
+        {
+          type: 'connectors-py',
+          enabled: true,
+          streams: [],
+        },
+      ],
+      created_at: '',
+      updated_at: '',
+      created_by: '',
+      updated_by: '',
+      revision: 1,
+      policy_id: '',
+      policy_ids: [''],
+    },
+  ];
+
+  const permissions = await storedPackagePoliciesToAgentPermissions(
+    packageInfoCache,
+    'test',
+    packagePolicies
+  );
+
+  expect(permissions).toMatchObject({
+    'package-policy-uuid-test-123': {
+      cluster: ['manage_connector'],
+      indices: [
+        {
+          names: ['.elastic-connectors*'],
+          privileges: ELASTIC_CONNECTORS_INDEX_PERMISSIONS,
+        },
+        {
+          names: ['content-*', '.search-acl-filter-*'],
+          privileges: ELASTIC_CONNECTORS_INDEX_PERMISSIONS,
+        },
+      ],
+    },
+  });
+});
diff --git a/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.ts b/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.ts
index a5fc2ba25de47..8530676ce0d03 100644
--- a/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.ts
+++ b/x-pack/plugins/fleet/server/services/agent_policies/package_policies_to_agent_permissions.ts
@@ -12,6 +12,7 @@ import type {
 
 import {
   FLEET_APM_PACKAGE,
+  FLEET_CONNECTORS_PACKAGE,
   FLEET_UNIVERSAL_PROFILING_COLLECTOR_PACKAGE,
   FLEET_UNIVERSAL_PROFILING_SYMBOLIZER_PACKAGE,
 } from '../../../common/constants';
@@ -41,6 +42,15 @@ export const UNIVERSAL_PROFILING_PERMISSIONS = [
   'view_index_metadata',
 ];
 
+export const ELASTIC_CONNECTORS_INDEX_PERMISSIONS = [
+  'read',
+  'write',
+  'monitor',
+  'create_index',
+  'auto_configure',
+  'maintenance',
+];
+
 export function storedPackagePoliciesToAgentPermissions(
   packageInfoCache: Map<string, PackageInfo>,
   agentPolicyNamespace: string,
@@ -79,6 +89,10 @@ export function storedPackagePoliciesToAgentPermissions(
       return apmPermissions(packagePolicy.id);
     }
 
+    if (pkg.name === FLEET_CONNECTORS_PACKAGE) {
+      return connectorServicePermissions(packagePolicy.id);
+    }
+
     const dataStreams = getNormalizedDataStreams(pkg);
     if (!dataStreams || dataStreams.length === 0) {
       return [packagePolicy.name, undefined];
@@ -247,3 +261,22 @@ function apmPermissions(packagePolicyId: string): [string, SecurityRoleDescripto
     },
   ];
 }
+
+function connectorServicePermissions(packagePolicyId: string): [string, SecurityRoleDescriptor] {
+  return [
+    packagePolicyId,
+    {
+      cluster: ['manage_connector'],
+      indices: [
+        {
+          names: ['.elastic-connectors*'],
+          privileges: ELASTIC_CONNECTORS_INDEX_PERMISSIONS,
+        },
+        {
+          names: ['content-*', '.search-acl-filter-*'],
+          privileges: ELASTIC_CONNECTORS_INDEX_PERMISSIONS,
+        },
+      ],
+    },
+  ];
+}
diff --git a/x-pack/plugins/integration_assistant/server/graphs/kv/prompts.ts b/x-pack/plugins/integration_assistant/server/graphs/kv/prompts.ts
index 0fd7f1262c251..2ab1073a4ba8b 100644
--- a/x-pack/plugins/integration_assistant/server/graphs/kv/prompts.ts
+++ b/x-pack/plugins/integration_assistant/server/graphs/kv/prompts.ts
@@ -68,15 +68,19 @@ export const KV_HEADER_PROMPT = ChatPromptTemplate.fromMessages([
   ],
   [
     'human',
-    `Looking at the multiple syslog samples provided in the context, our goal is to identify which RFC they belog to. Then create a regex pattern that can separate the header and the structured body.
+    `Looking at the multiple syslog samples provided in the context, your task is to separate the "header" and the "message body" from this log. Our goal is to identify which RFC they belong to. Then create a regex pattern that can separate the header and the structured body.
 You then have to create a grok pattern using the regex pattern.
+You are given a log entry in a structured format. 
+
+Follow these steps to identify the header pattern:
+1. Identify if the log samples fall under RFC5424 or RFC3164. If not, return 'Custom Format'.
+2. The log samples contain the header and structured body. The header may contain any or all of priority, timestamp, loglevel, hostname, ipAddress, messageId or any free-form text or non key-value information etc.,
+3. Make sure the regex and grok pattern matches all the header information. Only the structured message body should be under GREEDYDATA in grok pattern.
 
  You ALWAYS follow these guidelines when writing your response:
  <guidelines>
- - If you cannot match all the logs to the same RFC, return 'Custom Format' for RFC and provide the regex and grok patterns accordingly.
- - If the message part contains any unstructured data , make sure to add this in regex pattern and grok pattern.
  - Do not parse the message part in the regex. Just the header part should be in regex nad grok_pattern.
- - Make sure to map the remaining message part to \'message\' in grok pattern.
+ - Make sure to map the remaining message body to \'message\' in grok pattern.
  - Do not respond with anything except the processor as a JSON object enclosed with 3 backticks (\`), see example response above. Use strict JSON response format.
  </guidelines>
 
@@ -110,12 +114,15 @@ export const KV_HEADER_ERROR_PROMPT = ChatPromptTemplate.fromMessages([
 {errors}
 </errors>
 
- You ALWAYS follow these guidelines when writing your response:
+Follow these steps to fix the errors in the header pattern:
+1. Identify any mismatches, incorrect syntax, or logical errors in the pattern.
+2. The log samples contain the header and structured body. The header may contain any or all of priority, timestamp, loglevel, hostname, ipAddress, messageId or any free-form text or non key-value information etc.,
+3. The message body may start with a description, followed by structured key-value pairs.
+4. Make sure the regex and grok pattern matches all the header information. Only the structured message body should be under GREEDYDATA in grok pattern.
+You ALWAYS follow these guidelines when writing your response:
  <guidelines>
- - Identify any mismatches, incorrect syntax, or logical errors in the pattern.
- - If the message part contains any unstructured data , make sure to add this in grok pattern.
  - Do not parse the message part in the regex. Just the header part should be in regex nad grok_pattern.
- - Make sure to map the remaining message part to \'message\' in grok pattern.
+ - Make sure to map the remaining message body to \'message\' in grok pattern.
  - Do not respond with anything except the processor as a JSON object enclosed with 3 backticks (\`), see example response above. Use strict JSON response format.
  </guidelines>
 
diff --git a/x-pack/plugins/integration_assistant/server/graphs/log_type_detection/prompts.ts b/x-pack/plugins/integration_assistant/server/graphs/log_type_detection/prompts.ts
index 2ed547de00132..74ba8f719f875 100644
--- a/x-pack/plugins/integration_assistant/server/graphs/log_type_detection/prompts.ts
+++ b/x-pack/plugins/integration_assistant/server/graphs/log_type_detection/prompts.ts
@@ -20,15 +20,19 @@ Here is some context for you to reference for your task, read it carefully as yo
   [
     'human',
     `Looking at the log samples , our goal is to identify the syslog type based on the guidelines below.
+Follow these steps to identify the log format type:
+1. Go through each log sample and identify the log format type.
+2. If the samples have any or all of priority, timestamp, loglevel, hostname, ipAddress, messageId in the beginning information then set "header: true".
+3. If the samples have a syslog header then set "header: true" , else set "header: false". If you are unable to determine the syslog header presence then set "header: false".
+4. If the log samples have structured message body with key-value pairs then classify it as "log_type: structured". Look for a flat list of key-value pairs, often separated by spaces, commas, or other delimiters.
+5. Consider variations in formatting, such as quotes around values ("key=value", key="value"), special characters in keys or values, or escape sequences.
+6. If the log samples have unstructured body like a free-form text then classify it as "log_type: unstructured".
+7. If the log samples follow a csv format then classify it as "log_type: csv".
+8. If the samples are identified as "csv" and there is a csv header then set "header: true" , else set "header: false".
+9. If you do not find the log format in any of the above categories then classify it as "log_type: unsupported".
+
+ You ALWAYS follow these guidelines when writing your response:
 <guidelines>
-- Go through each log sample and identify the log format type.
-- If the samples have a timestamp , loglevel in the beginning information then set "header: true".
-- If the samples have a syslog header then set "header: true" , else set "header: false". If you are unable to determine the syslog header presence then set "header: false".
-- If the syslog samples have structured body then classify it as "log_type: structured".
-- If the syslog samples have unstructured body then classify it as "log_type: unstructured".
-- If the syslog samples follow a csv format then classify it as "log_type: csv".
-- If the samples are identified as "csv" and there is a csv header then set "header: true" , else set "header: false".
-- If you do not find the log format in any of the above categories then classify it as "log_type: unsupported".
 - Do not respond with anything except the updated current mapping JSON object enclosed with 3 backticks (\`). See example response below.
 </guidelines>
 
diff --git a/x-pack/plugins/lens/public/datasources/text_based/utils.test.ts b/x-pack/plugins/lens/public/datasources/text_based/utils.test.ts
index b7cd0da76e50f..77853e3052b24 100644
--- a/x-pack/plugins/lens/public/datasources/text_based/utils.test.ts
+++ b/x-pack/plugins/lens/public/datasources/text_based/utils.test.ts
@@ -291,7 +291,7 @@ describe('Text based languages utils', () => {
       const expressionsMock = expressionsPluginMock.createStartContract();
       const updatedState = await getStateFromAggregateQuery(
         state,
-        { esql: 'FROM my-fake-index-pattern | WHERE time <= ?t_end' },
+        { esql: 'FROM my-fake-index-pattern | WHERE time <= ?_tend' },
         {
           ...dataViewsMock,
           getIdsWithTitle: jest.fn().mockReturnValue(
@@ -361,7 +361,7 @@ describe('Text based languages utils', () => {
             errors: [],
             index: '4',
             query: {
-              esql: 'FROM my-fake-index-pattern | WHERE time <= ?t_end',
+              esql: 'FROM my-fake-index-pattern | WHERE time <= ?_tend',
             },
             timeField: 'time',
           },
diff --git a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_categories/index.ts b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_categories/index.ts
index 41af9a4a0360d..5f36325031ccb 100644
--- a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_categories/index.ts
+++ b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_categories/index.ts
@@ -7,8 +7,7 @@
 
 import datemath from '@elastic/datemath';
 import { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
-import type { CoreRequestHandlerContext } from '@kbn/core/server';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/server';
+import { LogSourcesService } from '@kbn/logs-data-access-plugin/common/types';
 import { flattenObject, KeyValuePair } from '../../../../common/utils/flatten_object';
 import { APMEventClient } from '../../../lib/helpers/create_es_client/create_apm_event_client';
 import { PROCESSOR_EVENT, TRACE_ID } from '../../../../common/es_fields/apm';
@@ -26,12 +25,12 @@ export interface LogCategory {
 export async function getLogCategories({
   apmEventClient,
   esClient,
-  coreContext,
+  logSourcesService,
   arguments: args,
 }: {
   apmEventClient: APMEventClient;
   esClient: ElasticsearchClient;
-  coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
+  logSourcesService: LogSourcesService;
   arguments: {
     start: string;
     end: string;
@@ -53,7 +52,7 @@ export async function getLogCategories({
     Object.entries(args.entities).map(([key, value]) => ({ field: key, value }))
   );
 
-  const index = await coreContext.uiSettings.client.get<string>(aiAssistantLogsIndexPattern);
+  const index = await logSourcesService.getFlattenedLogSources();
   const search = getTypedSearch(esClient);
 
   const query = {
diff --git a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_rate_analysis_for_alert/index.ts b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_rate_analysis_for_alert/index.ts
index 097eff91ced14..2d367780fc9dd 100644
--- a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_rate_analysis_for_alert/index.ts
+++ b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_log_rate_analysis_for_alert/index.ts
@@ -6,9 +6,8 @@
  */
 
 import { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
-import type { CoreRequestHandlerContext } from '@kbn/core/server';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/server';
 import { fetchLogRateAnalysisForAlert } from '@kbn/aiops-log-rate-analysis/queries/fetch_log_rate_analysis_for_alert';
+import { LogSourcesService } from '@kbn/logs-data-access-plugin/common/types';
 import { PROCESSOR_EVENT } from '../../../../common/es_fields/apm';
 import { getShouldMatchOrNotExistFilter } from '../utils/get_should_match_or_not_exist_filter';
 
@@ -17,11 +16,11 @@ import { getShouldMatchOrNotExistFilter } from '../utils/get_should_match_or_not
  */
 export async function getLogRateAnalysisForAlert({
   esClient,
-  coreContext,
+  logSourcesService,
   arguments: args,
 }: {
   esClient: ElasticsearchClient;
-  coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
+  logSourcesService: LogSourcesService;
   arguments: {
     alertStartedAt: string;
     alertRuleParameterTimeSize?: number;
@@ -34,7 +33,7 @@ export async function getLogRateAnalysisForAlert({
     };
   };
 }): ReturnType<typeof fetchLogRateAnalysisForAlert> {
-  const index = await coreContext.uiSettings.client.get<string>(aiAssistantLogsIndexPattern);
+  const index = await logSourcesService.getFlattenedLogSources();
 
   const keyValueFilters = getShouldMatchOrNotExistFilter(
     Object.entries(args.entities).map(([key, value]) => ({ field: key, value }))
diff --git a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_container_id_from_signals.ts b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_container_id_from_signals.ts
index 638903e813545..e7f3ace07e2a1 100644
--- a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_container_id_from_signals.ts
+++ b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_container_id_from_signals.ts
@@ -7,12 +7,12 @@
 
 import type { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
 import { CoreRequestHandlerContext } from '@kbn/core-http-request-handler-context-server';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/common';
 import { rangeQuery, typedSearch } from '@kbn/observability-plugin/server/utils/queries';
 import * as t from 'io-ts';
 import moment from 'moment';
 import { ESSearchRequest } from '@kbn/es-types';
 import { alertDetailsContextRt } from '@kbn/observability-plugin/server/services';
+import { LogSourcesService } from '@kbn/logs-data-access-plugin/common/types';
 import { ApmDocumentType } from '../../../../common/document_type';
 import {
   APMEventClient,
@@ -23,11 +23,12 @@ import { RollupInterval } from '../../../../common/rollup';
 export async function getContainerIdFromSignals({
   query,
   esClient,
-  coreContext,
+  logSourcesService,
   apmEventClient,
 }: {
   query: t.TypeOf<typeof alertDetailsContextRt>;
   esClient: ElasticsearchClient;
+  logSourcesService: LogSourcesService;
   coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
   apmEventClient: APMEventClient;
 }) {
@@ -66,19 +67,19 @@ export async function getContainerIdFromSignals({
     return containerId;
   }
 
-  return getContainerIdFromLogs({ params, esClient, coreContext });
+  return getContainerIdFromLogs({ params, esClient, logSourcesService });
 }
 
 async function getContainerIdFromLogs({
   params,
   esClient,
-  coreContext,
+  logSourcesService,
 }: {
   params: ESSearchRequest['body'];
   esClient: ElasticsearchClient;
-  coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
+  logSourcesService: LogSourcesService;
 }) {
-  const index = await coreContext.uiSettings.client.get<string>(aiAssistantLogsIndexPattern);
+  const index = await logSourcesService.getFlattenedLogSources();
   const res = await typedSearch<{ container: { id: string } }, any>(esClient, {
     index,
     ...params,
diff --git a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_service_name_from_signals.ts b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_service_name_from_signals.ts
index 284c286766c76..0168431d0ac4e 100644
--- a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_service_name_from_signals.ts
+++ b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/get_service_name_from_signals.ts
@@ -6,13 +6,12 @@
  */
 
 import type { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
-import { CoreRequestHandlerContext } from '@kbn/core-http-request-handler-context-server';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/common';
 import { rangeQuery, termQuery, typedSearch } from '@kbn/observability-plugin/server/utils/queries';
 import * as t from 'io-ts';
 import moment from 'moment';
 import { ESSearchRequest } from '@kbn/es-types';
 import { alertDetailsContextRt } from '@kbn/observability-plugin/server/services';
+import type { LogSourcesService } from '@kbn/logs-data-access-plugin/common/types';
 import { ApmDocumentType } from '../../../../common/document_type';
 import {
   APMEventClient,
@@ -23,12 +22,12 @@ import { RollupInterval } from '../../../../common/rollup';
 export async function getServiceNameFromSignals({
   query,
   esClient,
-  coreContext,
+  logSourcesService,
   apmEventClient,
 }: {
   query: t.TypeOf<typeof alertDetailsContextRt>;
   esClient: ElasticsearchClient;
-  coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
+  logSourcesService: LogSourcesService;
   apmEventClient: APMEventClient;
 }) {
   if (query['service.name']) {
@@ -75,19 +74,19 @@ export async function getServiceNameFromSignals({
     return serviceName;
   }
 
-  return getServiceNameFromLogs({ params, esClient, coreContext });
+  return getServiceNameFromLogs({ params, esClient, logSourcesService });
 }
 
 async function getServiceNameFromLogs({
   params,
   esClient,
-  coreContext,
+  logSourcesService,
 }: {
   params: ESSearchRequest['body'];
   esClient: ElasticsearchClient;
-  coreContext: Pick<CoreRequestHandlerContext, 'uiSettings'>;
+  logSourcesService: LogSourcesService;
 }) {
-  const index = await coreContext.uiSettings.client.get<string>(aiAssistantLogsIndexPattern);
+  const index = await logSourcesService.getFlattenedLogSources();
   const res = await typedSearch<{ service: { name: string } }, any>(esClient, {
     index,
     ...params,
diff --git a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/index.ts b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/index.ts
index e0f3f833a5ae2..84e51675233c9 100644
--- a/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/index.ts
+++ b/x-pack/plugins/observability_solution/apm/server/routes/assistant_functions/get_observability_alert_details_context/index.ts
@@ -87,6 +87,9 @@ export const getAlertDetailsContextHandler = (
       }),
     ]);
     const esClient = coreContext.elasticsearch.client.asCurrentUser;
+    const logSourcesService = await (
+      await resourcePlugins.logsDataAccess.start()
+    ).services.logSourcesServiceFactory.getScopedLogSourcesService(requestContext.request);
 
     const alertStartedAt = query.alert_started_at;
     const serviceEnvironment = query['service.environment'];
@@ -97,13 +100,14 @@ export const getAlertDetailsContextHandler = (
       getServiceNameFromSignals({
         query,
         esClient,
-        coreContext,
+        logSourcesService,
         apmEventClient,
       }),
       getContainerIdFromSignals({
         query,
         esClient,
         coreContext,
+        logSourcesService,
         apmEventClient,
       }),
     ]);
@@ -165,7 +169,7 @@ export const getAlertDetailsContextHandler = (
     dataFetchers.push(async () => {
       const { logRateAnalysisType, significantItems } = await getLogRateAnalysisForAlert({
         esClient,
-        coreContext,
+        logSourcesService,
         arguments: {
           alertStartedAt: moment(alertStartedAt).toISOString(),
           alertRuleParameterTimeSize: query.alert_rule_parameter_time_size
@@ -203,7 +207,7 @@ export const getAlertDetailsContextHandler = (
       const { logCategories, entities } = await getLogCategories({
         apmEventClient,
         esClient,
-        coreContext,
+        logSourcesService,
         arguments: {
           start: moment(alertStartedAt).subtract(15, 'minute').toISOString(),
           end: alertStartedAt,
diff --git a/x-pack/plugins/observability_solution/apm_data_access/server/lib/helpers/create_es_client/create_apm_event_client/index.test.ts b/x-pack/plugins/observability_solution/apm_data_access/server/lib/helpers/create_es_client/create_apm_event_client/index.test.ts
index c2a5676e85c28..2239f6d8d8fb0 100644
--- a/x-pack/plugins/observability_solution/apm_data_access/server/lib/helpers/create_es_client/create_apm_event_client/index.test.ts
+++ b/x-pack/plugins/observability_solution/apm_data_access/server/lib/helpers/create_es_client/create_apm_event_client/index.test.ts
@@ -76,8 +76,9 @@ describe('APMEventClient', () => {
             resolve(undefined);
           }, 100);
         });
+
         void incomingRequest.abort();
-      }, 100);
+      }, 200);
     });
 
     expect(abortSignal?.aborted).toBe(true);
diff --git a/x-pack/plugins/observability_solution/dataset_quality/kibana.jsonc b/x-pack/plugins/observability_solution/dataset_quality/kibana.jsonc
index 413917f62bd7f..cb16a7ce0455e 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/kibana.jsonc
+++ b/x-pack/plugins/observability_solution/dataset_quality/kibana.jsonc
@@ -23,9 +23,10 @@
       "fieldFormats",
       "dataViews",
       "lens",
-      "fieldsMetadata"
+      "fieldsMetadata",
+      "taskManager"
     ],
-    "optionalPlugins": [],
+    "optionalPlugins": ["telemetry"],
     "requiredBundles": ["unifiedHistogram", "discover"],
     "extraPublicDirs": [
       "common"
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/plugin.ts b/x-pack/plugins/observability_solution/dataset_quality/server/plugin.ts
index 5a1b7b947641e..7c51e40c870a1 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/server/plugin.ts
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/plugin.ts
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { CoreSetup, Logger, Plugin, PluginInitializerContext } from '@kbn/core/server';
+import { CoreSetup, CoreStart, Logger, Plugin, PluginInitializerContext } from '@kbn/core/server';
 import { mapValues } from 'lodash';
+import { DataTelemetryService } from './services';
 import { getDatasetQualityServerRouteRepository } from './routes';
 import { registerRoutes } from './routes/register_routes';
 import { DatasetQualityRouteHandlerResources } from './routes/types';
@@ -18,9 +19,11 @@ import {
 
 export class DatasetQualityServerPlugin implements Plugin {
   private readonly logger: Logger;
+  private readonly dataTelemetryService: DataTelemetryService;
 
   constructor(initializerContext: PluginInitializerContext) {
     this.logger = initializerContext.logger.get();
+    this.dataTelemetryService = new DataTelemetryService(this.logger);
   }
 
   setup(
@@ -53,10 +56,18 @@ export class DatasetQualityServerPlugin implements Plugin {
       getEsCapabilities,
     });
 
+    // Setup Data Telemetry Service
+    this.dataTelemetryService.setup(core.analytics, plugins.taskManager);
+
     return {};
   }
 
-  start() {
+  start(core: CoreStart, plugins: DatasetQualityPluginStartDependencies) {
+    // Start Data Telemetry Service
+    this.dataTelemetryService.start(plugins.telemetry, core, plugins.taskManager).catch((error) => {
+      this.logger.error(`[Data Telemetry Service]: ${error}`);
+    });
+
     return {};
   }
 }
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/constants.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/constants.ts
new file mode 100644
index 0000000000000..619a6efc3bfdd
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/constants.ts
@@ -0,0 +1,102 @@
+/*
+ * 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 { DATA_DATASETS_INDEX_PATTERNS_UNIQUE } from '@kbn/telemetry-plugin/server/telemetry_collection/get_data_telemetry/constants';
+
+import { DatasetIndexPattern } from './types';
+
+export const LOGS_DATA_TELEMETRY_TASK_TYPE = 'logs-data-telemetry';
+export const LOGS_DATA_TELEMETRY_TASK_ID = 'logs-data-telemetry:collect-and-report-task-2';
+
+export const TELEMETRY_TASK_INTERVAL = 24 * 60; // 24 hours (in minutes)
+export const TELEMETRY_TASK_TIMEOUT = 10; // 10 minutes
+
+export const BREATHE_DELAY_SHORT = 1000; // 1 seconds
+export const BREATHE_DELAY_MEDIUM = 5 * 1000; // 5 seconds
+
+export const MAX_STREAMS_TO_REPORT = 1000;
+
+export const NON_LOG_SIGNALS = ['metrics', 'traces', 'internal', 'synthetics'];
+export const EXCLUDE_ELASTIC_LOGS = ['logs-synth', 'logs-elastic', 'logs-endpoint'];
+
+export const TELEMETRY_CHANNEL = 'logs-data-telemetry';
+
+const LOGS_INDEX_PATTERN_NAMES = [
+  'filebeat',
+  'generic-filebeat',
+  'metricbeat',
+  'generic-metricbeat',
+  'apm',
+  'functionbeat',
+  'generic-functionbeat',
+  'heartbeat',
+  'generic-heartbeat',
+  'logstash',
+  'generic-logstash',
+  'fluentd',
+  'telegraf',
+  'prometheusbeat',
+  'fluentbit',
+  'nginx',
+  'apache',
+  'generic-logs',
+];
+
+const TELEMETRY_PATTERNS_BY_NAME = DATA_DATASETS_INDEX_PATTERNS_UNIQUE.reduce((acc, pattern) => {
+  acc[pattern.patternName] = [pattern, ...(acc[pattern.patternName] || [])];
+  return acc;
+}, {} as Record<string, DatasetIndexPattern[]>);
+
+export const LOGS_DATASET_INDEX_PATTERNS = LOGS_INDEX_PATTERN_NAMES.flatMap<DatasetIndexPattern>(
+  (patternName) => TELEMETRY_PATTERNS_BY_NAME[patternName] || []
+);
+
+export const LEVEL_2_RESOURCE_FIELDS = [
+  'host.name',
+  'service.name',
+  'host',
+  'hostname',
+  'host_name',
+];
+
+export const PROMINENT_LOG_ECS_FIELDS = [
+  'log.level',
+  'log.logger',
+  'log.origin.file.name',
+  'log.origin.function',
+  'log.origin.file.line',
+  'event.action',
+  'event.category',
+  'event.dataset',
+  'event.kind',
+  'log.file.path',
+];
+
+export const DATA_TELEMETRY_FIELDS = [
+  'container.id',
+  'log.level',
+  'container.name',
+  'host.name',
+  'host.hostname',
+  'kubernetes.pod.name',
+  'kubernetes.pod.uid',
+  'cloud.provider',
+  'agent.type',
+  'event.dataset',
+  'event.category',
+  'event.module',
+  'service.name',
+  'service.type',
+  'service.version',
+  'message',
+  'event.original',
+  'error.message',
+  '@timestamp',
+  'data_stream.dataset',
+  'data_stream.namespace',
+  'data_stream.type',
+];
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.test.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.test.ts
new file mode 100644
index 0000000000000..cbbdf8bbfa518
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.test.ts
@@ -0,0 +1,787 @@
+/*
+ * 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 { ElasticsearchClient, type Logger } from '@kbn/core/server';
+import type { AnalyticsServiceSetup } from '@kbn/core/public';
+import { TelemetryPluginStart } from '@kbn/telemetry-plugin/server';
+import { taskManagerMock } from '@kbn/task-manager-plugin/server/mocks';
+
+import { DataTelemetryEvent } from './types';
+import { BREATHE_DELAY_MEDIUM, MAX_STREAMS_TO_REPORT } from './constants';
+import { DataTelemetryService } from './data_telemetry_service';
+
+// Mock the constants module to speed up and simplify the tests
+jest.mock('./constants', () => ({
+  ...jest.requireActual('./constants'),
+  BREATHE_DELAY_SHORT: 10,
+  BREATHE_DELAY_MEDIUM: 50,
+  BREATHE_DELAY_LONG: 100,
+
+  MAX_STREAMS_TO_REPORT: 50,
+
+  LOGS_DATASET_INDEX_PATTERNS: [
+    {
+      pattern: 'test-pattern-*',
+      patternName: 'test',
+      shipper: 'custom',
+    },
+    {
+      pattern: 'test-pattern-2-*',
+      patternName: 'test-2',
+      shipper: 'custom-2',
+    },
+  ],
+}));
+
+const TEST_TIMEOUT = 60 * 1000;
+const SYNTH_DOCS = 6000000;
+
+describe('DataTelemetryService', () => {
+  let service: DataTelemetryService;
+  let mockEsClient: jest.Mocked<ElasticsearchClient>;
+  let mockAnalyticsSetup: jest.Mocked<AnalyticsServiceSetup>;
+  let mockTelemetryStart: jest.Mocked<TelemetryPluginStart>;
+  let mockLogger: jest.Mocked<Logger>;
+  let mockTaskManagerSetup: ReturnType<typeof taskManagerMock.createSetup>;
+  let mockTaskManagerStart: ReturnType<typeof taskManagerMock.createStart>;
+  let runTask: ReturnType<typeof setupMocks>['runTask'];
+
+  describe('Data Telemetry Task', () => {
+    beforeEach(async () => {
+      const mocks = setupMocks();
+      mockEsClient = mocks.mockEsClient;
+      mockLogger = mocks.mockLogger;
+      mockAnalyticsSetup = mocks.mockAnalyticsSetup;
+      mockTelemetryStart = mocks.mockTelemetryStart;
+      mockTaskManagerSetup = mocks.taskManagerSetup;
+      mockTaskManagerStart = mocks.taskManagerStart;
+      runTask = mocks.runTask;
+
+      service = new DataTelemetryService(mockLogger);
+      service.setup(mockAnalyticsSetup, mockTaskManagerSetup);
+      await service.start(
+        mockTelemetryStart,
+        {
+          elasticsearch: { client: { asInternalUser: mockEsClient } },
+        } as any,
+        mockTaskManagerStart
+      );
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+      jest.clearAllMocks();
+    });
+
+    it('should trigger task runner run method', async () => {
+      jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+      const collectAndSendSpy = jest.spyOn(service as any, 'collectAndSend');
+
+      await runTask();
+
+      // Assert collectAndSend is called
+      expect(collectAndSendSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Docs Info', () => {
+    beforeEach(async () => {
+      const mocks = setupMocks();
+      mockEsClient = mocks.mockEsClient;
+      mockLogger = mocks.mockLogger;
+      mockAnalyticsSetup = mocks.mockAnalyticsSetup;
+      mockTelemetryStart = mocks.mockTelemetryStart;
+      mockTaskManagerSetup = mocks.taskManagerSetup;
+      mockTaskManagerStart = mocks.taskManagerStart;
+      runTask = mocks.runTask;
+
+      service = new DataTelemetryService(mockLogger);
+      service.setup(mockAnalyticsSetup, mockTaskManagerSetup);
+      await service.start(
+        mockTelemetryStart,
+        {
+          elasticsearch: { client: { asInternalUser: mockEsClient } },
+        } as any,
+        mockTaskManagerStart
+      );
+
+      jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+      jest.clearAllMocks();
+    });
+
+    it(
+      'should collect and send telemetry after startup and every interval',
+      async () => {
+        const collectAndSendSpy = jest.spyOn(service as any, 'collectAndSend');
+
+        await runTask();
+        expect(collectAndSendSpy).toHaveBeenCalledTimes(1);
+
+        await sleepForBreathDelay();
+        expect(mockEsClient.indices.getMapping).toHaveBeenCalledTimes(1);
+
+        await runTask();
+        expect(collectAndSendSpy).toHaveBeenCalledTimes(2);
+
+        await sleepForBreathDelay();
+        expect(mockEsClient.indices.getMapping).toHaveBeenCalledTimes(2);
+      },
+      TEST_TIMEOUT
+    );
+
+    it(
+      'should stop collecting and sending telemetry if stopped',
+      async () => {
+        const collectAndSendSpy = jest.spyOn(service as any, 'collectAndSend');
+
+        await runTask();
+        expect(collectAndSendSpy).toHaveBeenCalledTimes(1);
+
+        service.stop();
+
+        await runTask();
+        await sleepForBreathDelay();
+        expect(collectAndSendSpy).toHaveBeenCalledTimes(1);
+      },
+      TEST_TIMEOUT
+    );
+
+    it(
+      'should not collect data if telemetry is not opted in',
+      async () => {
+        jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(false);
+
+        const collectAndSendSpy = jest.spyOn(service as any, 'collectAndSend');
+
+        await runTask();
+        expect(collectAndSendSpy).not.toHaveBeenCalled();
+
+        await runTask();
+        await sleepForBreathDelay();
+        expect(collectAndSendSpy).not.toHaveBeenCalled();
+
+        // Assert that logger.debug is called with appropriate message
+        expect(mockLogger.debug).toHaveBeenCalledWith(
+          '[Logs Data Telemetry] Telemetry is not opted-in.'
+        );
+      },
+      TEST_TIMEOUT
+    );
+
+    it(
+      'should not collect if number of data streams exceed MAX_STREAMS_TO_REPORT',
+      async () => {
+        (mockEsClient.indices.getDataStream as unknown as jest.Mock).mockResolvedValue({
+          data_streams: Array.from({ length: MAX_STREAMS_TO_REPORT + 1 }, (_, i) => ({
+            name: `logs-postgresql.log-default-${i}`,
+            indices: [
+              {
+                index_name: `.ds-logs-postgresql.log-default-${i}-000001`,
+              },
+            ],
+            _meta: {
+              managed: true,
+              description: 'default logs template installed by x-pack',
+            },
+          })),
+        });
+
+        await runTask();
+        await sleepForBreathDelay();
+        expect(mockEsClient.indices.getMapping).not.toHaveBeenCalled();
+      },
+      TEST_TIMEOUT
+    );
+
+    it(
+      'creates and sends the telemetry events',
+      async () => {
+        jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+
+        const reportEventsSpy = jest.spyOn(service as any, 'reportEvents');
+
+        await runTask();
+        await sleepForBreathDelay();
+
+        expect(reportEventsSpy).toHaveBeenCalledTimes(1);
+        expect(
+          (
+            reportEventsSpy.mock?.lastCall as [
+              [Partial<DataTelemetryEvent>],
+              [Partial<DataTelemetryEvent>]
+            ]
+          )?.[0]?.[0]
+        ).toEqual(
+          expect.objectContaining({
+            doc_count: 4000 + 500 + 200,
+            failure_store_doc_count: 300,
+            index_count: 2 + 1 + 1,
+            failure_store_index_count: 1,
+            namespace_count: 1 + 1,
+            size_in_bytes: 10089898 + 800000 + 500000,
+            pattern_name: 'test',
+            managed_by: ['fleet'],
+            package_name: ['activemq'],
+            beat: [],
+          })
+        );
+      },
+      TEST_TIMEOUT
+    );
+
+    it(
+      'should not include stats of excluded indices',
+      async () => {
+        jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+        const reportEventsSpy = jest.spyOn(service as any, 'reportEvents');
+        await runTask();
+        await sleepForBreathDelay();
+
+        expect(reportEventsSpy).toHaveBeenCalledTimes(1);
+        const events = reportEventsSpy.mock?.lastCall as [
+          [Partial<DataTelemetryEvent>],
+          [Partial<DataTelemetryEvent>]
+        ];
+        // doc_count should be less than SYNTH_DOCS for any event
+        (events[0] ?? []).forEach((event) => {
+          expect(event.doc_count).toBeLessThan(SYNTH_DOCS);
+        });
+      },
+      TEST_TIMEOUT
+    );
+  });
+
+  describe('Fields Info and Structure Levels', () => {
+    beforeEach(async () => {
+      jest.mock('./constants', () => ({
+        ...jest.requireActual('./constants'),
+        LOGS_DATASET_INDEX_PATTERNS: [
+          {
+            pattern: 'test-pattern-*',
+            patternName: 'test',
+            shipper: 'custom',
+          },
+          {
+            pattern: 'test-pattern-3-*',
+            patternName: 'test-3',
+            shipper: 'custom-3',
+          },
+        ],
+      }));
+
+      const mocks = setupMocks();
+      mockEsClient = mocks.mockEsClient;
+      mockLogger = mocks.mockLogger;
+      mockAnalyticsSetup = mocks.mockAnalyticsSetup;
+      mockTelemetryStart = mocks.mockTelemetryStart;
+      mockTaskManagerSetup = mocks.taskManagerSetup;
+      mockTaskManagerStart = mocks.taskManagerStart;
+      runTask = mocks.runTask;
+
+      service = new DataTelemetryService(mockLogger);
+      service.setup(mockAnalyticsSetup, mockTaskManagerSetup);
+      await service.start(
+        mockTelemetryStart,
+        {
+          elasticsearch: { client: { asInternalUser: mockEsClient } },
+        } as any,
+        mockTaskManagerStart
+      );
+
+      jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+    });
+
+    afterEach(() => {
+      jest.clearAllTimers();
+      jest.clearAllMocks();
+    });
+
+    it(
+      'should correctly calculate total fields and count of resource fields',
+      async () => {
+        jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+
+        const reportEventsSpy = jest.spyOn(service as any, 'reportEvents');
+
+        await runTask();
+        await sleepForBreathDelay();
+
+        expect(reportEventsSpy).toHaveBeenCalledTimes(1);
+        const lastCall = reportEventsSpy.mock?.lastCall?.[0] as [Partial<DataTelemetryEvent>];
+        expect(lastCall?.[0]?.field_count).toBe(8);
+        expect(lastCall?.[0]?.field_existence).toEqual({
+          'container.id': 3000 + 500,
+          'host.name': 3000 + 500,
+          message: 3000,
+          '@timestamp': 3000 + 500 + 200,
+          'data_stream.dataset': 3000 + 500 + 200,
+          'data_stream.namespace': 3000 + 500 + 200,
+          'data_stream.type': 3000 + 500 + 200,
+        });
+      },
+      TEST_TIMEOUT
+    );
+
+    it('should correctly calculate structure levels', async () => {
+      jest.spyOn(service as any, 'shouldCollectTelemetry').mockResolvedValue(true);
+
+      const reportEventsSpy = jest.spyOn(service as any, 'reportEvents');
+
+      await runTask();
+      await sleepForBreathDelay();
+
+      expect(reportEventsSpy).toHaveBeenCalledTimes(1);
+      const lastCall = reportEventsSpy.mock?.lastCall?.[0] as [
+        Partial<DataTelemetryEvent>,
+        Partial<DataTelemetryEvent>
+      ];
+      expect(lastCall?.[1]?.structure_level).toEqual({
+        '1': 1000,
+        '4': 500,
+        '6': 200,
+      });
+    });
+  });
+});
+
+function sleepForBreathDelay() {
+  return new Promise((resolve) => setTimeout(resolve, BREATHE_DELAY_MEDIUM * 10));
+}
+
+function setupMocks() {
+  const mockEsClient = {
+    indices: {
+      stats: jest.fn().mockImplementation(() => {
+        const emptyAllStats: any = { _all: {} };
+
+        // _all shouldn't be read hence overriding with empty here
+        return Promise.resolve({
+          ...emptyAllStats,
+          indices: {
+            ...emptyAllStats.indices,
+            ...MOCK_POSTGRES_DEFAULT_STATS.indices,
+            ...MOCK_POSTGRES_NON_DEFAULT_STATS.indices,
+            ...MOCK_ACTIVE_MQ_DEFAULT_STATS.indices,
+            ...MOCK_FLUENT_BIT_DEFAULT_STATS.indices,
+            ...MOCK_SYNTH_DATA_STATS.indices,
+          },
+        });
+      }),
+      getDataStream: jest.fn().mockImplementation((params) => {
+        if (params.name === 'test-pattern-2-*') {
+          return Promise.resolve({
+            data_streams: MOCK_FLUENT_BIT_DATA_STREAMS,
+          });
+        }
+
+        return Promise.resolve({
+          data_streams: [
+            ...MOCK_POSTGRES_DATA_STREAMS,
+            ...MOCK_SYNTH_DATA_STREAMS,
+            ...MOCK_ACTIVE_MQ_FLEET_DATA_STREAMS,
+          ],
+        });
+      }),
+      get: jest.fn().mockResolvedValue(MOCK_INDICES),
+      getMapping: jest.fn().mockImplementation(() => {
+        return Promise.resolve({
+          ...MOCK_APACHE_GENERIC_INDEX_MAPPING,
+          ...MOCK_POSTGRES_DEFAULT_MAPPINGS,
+          ...MOCK_POSTGRES_NON_DEFAULT_MAPPINGS,
+          ...MOCK_ACTIVE_MQ_DEFAULT_MAPPINGS,
+          ...MOCK_FLUENT_BIT_DEFAULT_MAPPINGS,
+        });
+      }),
+    },
+    info: jest.fn().mockResolvedValue({}),
+    transport: {
+      request: jest.fn().mockImplementation((params) => {
+        if (params.path?.includes('_stats') && params?.querystring?.failure_store === 'only') {
+          return MOCK_ACTIVE_MQ_FAILURE_STATS;
+        }
+
+        return MOCK_ACTIVE_MQ_FAILURE_STATS;
+      }),
+    },
+  } as unknown as jest.Mocked<ElasticsearchClient>;
+
+  const mockLogger = {
+    debug: jest.fn(),
+    warn: jest.fn(),
+    error: jest.fn(),
+  } as unknown as jest.Mocked<Logger>;
+
+  const mockAnalyticsSetup = {
+    getTelemetryUrl: jest.fn().mockResolvedValue(new URL('https://telemetry.elastic.co')),
+  } as unknown as jest.Mocked<AnalyticsServiceSetup>;
+
+  const mockTelemetryStart = {
+    getIsOptedIn: jest.fn().mockResolvedValue(true),
+  } as unknown as jest.Mocked<TelemetryPluginStart>;
+
+  const taskManagerSetup = taskManagerMock.createSetup();
+  const taskManagerStart = taskManagerMock.createStart();
+
+  const runTask = () => {
+    const taskDefinitions = taskManagerSetup.registerTaskDefinitions.mock.calls[0][0];
+    const taskType = Object.keys(taskDefinitions)[0];
+    const taskRunner = taskDefinitions[taskType].createTaskRunner({ taskInstance: {} as any });
+
+    return taskRunner.run();
+  };
+
+  return {
+    mockEsClient,
+    mockLogger,
+    mockAnalyticsSetup,
+    mockTelemetryStart,
+    taskManagerSetup,
+    taskManagerStart,
+    runTask,
+  };
+}
+
+const MOCK_INDICES = {
+  'apache-generic-index': {},
+  '.ds-logs-postgresql.log-default-2024.07.31-000001': {},
+  '.ds-logs-postgresql.log-default-2024.08.31-000002': {},
+  '.ds-logs-synth.01-default-2024.07.31-000001': {},
+  '.ds-logs-active-mq.fleet-2024.07.31-000001': {},
+};
+
+const MOCK_POSTGRES_DATA_STREAMS = [
+  {
+    name: 'logs-postgresql.log-default',
+    indices: [
+      {
+        index_name: '.ds-logs-postgresql.log-default-2024.07.31-000001',
+      },
+      {
+        index_name: '.ds-logs-postgresql.log-default-2024.08.31-000002',
+      },
+    ],
+    _meta: {
+      managed: true,
+      description: 'default logs template installed by x-pack',
+    },
+  },
+  {
+    name: 'logs-postgresql.log-non-default',
+    indices: [
+      {
+        index_name: '.ds-logs-postgresql.log-non-default-2024.07.31-000001',
+      },
+    ],
+    _meta: {
+      managed: true,
+      description: 'default logs template installed by x-pack',
+    },
+  },
+];
+const MOCK_POSTGRES_DEFAULT_STATS = {
+  _all: {
+    ...getPrimaryDocsAndStoreSize(1000 + 3000, 1000000 + 9089898),
+  },
+  indices: {
+    '.ds-logs-postgresql.log-default-2024.07.31-000001': getPrimaryDocsAndStoreSize(1000, 1000000),
+    '.ds-logs-postgresql.log-default-2024.08.31-000002': getPrimaryDocsAndStoreSize(3000, 9089898),
+  },
+};
+
+const MOCK_POSTGRES_NON_DEFAULT_STATS = {
+  _all: {},
+  indices: {
+    '.ds-logs-postgresql.log-non-default-2024.07.31-000001': getPrimaryDocsAndStoreSize(
+      500,
+      800000
+    ),
+  },
+};
+
+const MOCK_POSTGRES_DEFAULT_MAPPINGS = {
+  '.ds-logs-postgresql.log-default-2024.08.31-000002': {
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getContainerProp(),
+        ...getDataStreamProps('postgresql.log', 'default', 'logs'),
+        ...getHostProp(),
+        ...getMessageProp(),
+        custom_field_01: {
+          type: 'float',
+        },
+      },
+    },
+  },
+};
+
+const MOCK_POSTGRES_NON_DEFAULT_MAPPINGS = {
+  '.ds-logs-postgresql.log-non-default-2024.07.31-000001': {
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getContainerProp(),
+        ...getDataStreamProps('postgresql.log', 'non-default', 'logs'),
+        ...getHostProp(),
+        custom_field_01: {
+          type: 'float',
+        },
+      },
+    },
+  },
+};
+
+const MOCK_SYNTH_DATA_STREAMS = [
+  {
+    name: 'logs-synth.01-default',
+    indices: [
+      {
+        index_name: '.ds-logs-synth.01-default-2024.07.31-000001',
+      },
+      {
+        index_name: '.ds-logs-synth.01-default-2024.08.31-000002',
+      },
+    ],
+    _meta: {
+      managed: true,
+      description: 'default logs template installed by x-pack',
+    },
+  },
+];
+
+// Docs from synth data shouldn't be counted in the telemetry events
+const MOCK_SYNTH_DATA_STATS = {
+  _all: {},
+  indices: {
+    '.ds-logs-synth.01-default-2024.07.31-000001': getPrimaryDocsAndStoreSize(
+      SYNTH_DOCS,
+      1000000000
+    ),
+  },
+};
+
+const MOCK_APACHE_GENERIC_INDEX_MAPPING = {
+  'apache-generic-index': {
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+      },
+    },
+  },
+};
+
+const MOCK_ACTIVE_MQ_FLEET_DATA_STREAMS = [
+  {
+    name: 'logs-active-mq.fleet',
+    indices: [
+      {
+        index_name: '.ds-logs-active-mq.fleet-2024.07.31-000001',
+      },
+    ],
+    _meta: {
+      package: {
+        name: 'activemq',
+      },
+      managed_by: 'fleet',
+      managed: true,
+    },
+  },
+];
+
+const MOCK_ACTIVE_MQ_DEFAULT_STATS = {
+  _all: {},
+  indices: {
+    '.ds-logs-active-mq.fleet-2024.07.31-000001': getPrimaryDocsAndStoreSize(200, 500000),
+  },
+};
+
+const MOCK_ACTIVE_MQ_FAILURE_STATS = {
+  _all: {},
+  indices: {
+    '.fs-logs-active-mq.fleet-2024.07.31-000001': getPrimaryDocsAndStoreSize(300, 700000),
+  },
+};
+
+const MOCK_ACTIVE_MQ_DEFAULT_MAPPINGS = {
+  '.ds-logs-active-mq.fleet-2024.07.31-000001': {
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getDataStreamProps('active-mq.fleet', 'default', 'logs'),
+      },
+    },
+  },
+};
+
+const MOCK_FLUENT_BIT_DATA_STREAMS = [
+  {
+    name: 'logs-fluent-bit.fleet',
+    indices: [
+      {
+        index_name: '.ds-logs-fluent-bit.fleet-2024.07.31-000001',
+      },
+      {
+        index_name: '.ds-logs-fluent-bit.fleet-2024.07.31-000002',
+      },
+      {
+        index_name: '.ds-logs-fluent-bit.fleet-2024.07.31-000003',
+      },
+    ],
+    _meta: {
+      managed: true,
+      description: 'default logs template installed by x-pack',
+    },
+  },
+];
+
+const MOCK_FLUENT_BIT_DEFAULT_MAPPINGS = {
+  '.ds-logs-fluent-bit.fleet-2024.07.31-000001': {
+    // Level 01
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getDataStreamProps('fluent-bit.fleet', 'default', 'logs'),
+        ...getEcsVersionProp(),
+      },
+    },
+  },
+  '.ds-logs-fluent-bit.fleet-2024.07.31-000002': {
+    // Level 04
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getHostProp(),
+        ...getMessageProp(),
+      },
+    },
+  },
+  '.ds-logs-fluent-bit.fleet-2024.07.31-000003': {
+    // Level 06
+    mappings: {
+      properties: {
+        ...getTimestampProp(),
+        ...getHostProp(),
+        ...getMessageProp(),
+        ...getEcsVersionProp(),
+      },
+    },
+  },
+};
+
+const MOCK_FLUENT_BIT_DEFAULT_STATS = {
+  _all: {},
+  indices: {
+    '.ds-logs-fluent-bit.fleet-2024.07.31-000001': getPrimaryDocsAndStoreSize(1000, 1000000),
+    '.ds-logs-fluent-bit.fleet-2024.07.31-000002': getPrimaryDocsAndStoreSize(500, 800000),
+    '.ds-logs-fluent-bit.fleet-2024.07.31-000003': getPrimaryDocsAndStoreSize(200, 500000),
+  },
+};
+
+function getPrimaryDocsAndStoreSize(docs: number, storeSize: number) {
+  return {
+    primaries: {
+      docs: {
+        count: docs,
+        deleted: 0,
+        total_size_in_bytes: storeSize,
+      },
+      store: {
+        size_in_bytes: storeSize,
+      },
+    },
+  };
+}
+
+function getTimestampProp() {
+  return {
+    '@timestamp': {
+      type: 'date',
+      ignore_malformed: false,
+    },
+  };
+}
+
+function getDataStreamProps(dataset: string, namespace: string, type: string) {
+  return {
+    data_stream: {
+      properties: {
+        dataset: {
+          type: 'constant_keyword',
+          value: dataset,
+        },
+        namespace: {
+          type: 'constant_keyword',
+          value: namespace,
+        },
+        type: {
+          type: 'constant_keyword',
+          value: type,
+        },
+      },
+    },
+  };
+}
+
+function getContainerProp() {
+  return {
+    container: {
+      properties: {
+        id: {
+          type: 'text',
+          fields: {
+            keyword: {
+              type: 'keyword',
+              ignore_above: 256,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+function getHostProp() {
+  return {
+    host: {
+      properties: {
+        name: {
+          type: 'text',
+          fields: {
+            keyword: {
+              type: 'keyword',
+              ignore_above: 256,
+            },
+          },
+        },
+      },
+    },
+  };
+}
+
+function getEcsVersionProp() {
+  return {
+    ecs: {
+      properties: {
+        version: {
+          type: 'keyword',
+        },
+      },
+    },
+  };
+}
+
+function getMessageProp() {
+  return {
+    message: {
+      type: 'text',
+    },
+  };
+}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.ts
new file mode 100644
index 0000000000000..6f0ea294cfc0a
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/data_telemetry_service.ts
@@ -0,0 +1,261 @@
+/*
+ * 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 {
+  from,
+  defer,
+  delay,
+  filter,
+  tap,
+  take,
+  takeWhile,
+  exhaustMap,
+  switchMap,
+  map,
+  of,
+  EMPTY,
+} from 'rxjs';
+import type { CoreStart, ElasticsearchClient, Logger } from '@kbn/core/server';
+import type { AnalyticsServiceSetup } from '@kbn/core/public';
+import {
+  TaskInstance,
+  TaskManagerSetupContract,
+  TaskManagerStartContract,
+} from '@kbn/task-manager-plugin/server';
+import type { TelemetryPluginStart } from '@kbn/telemetry-plugin/server';
+
+import {
+  BREATHE_DELAY_MEDIUM,
+  BREATHE_DELAY_SHORT,
+  NON_LOG_SIGNALS,
+  EXCLUDE_ELASTIC_LOGS,
+  MAX_STREAMS_TO_REPORT,
+  LOGS_DATASET_INDEX_PATTERNS,
+  LOGS_DATA_TELEMETRY_TASK_TYPE,
+  TELEMETRY_TASK_INTERVAL,
+  LOGS_DATA_TELEMETRY_TASK_ID,
+  TELEMETRY_TASK_TIMEOUT,
+} from './constants';
+import {
+  getAllIndices,
+  addMappingsToIndices,
+  addNamespace,
+  groupStatsByPatternName,
+  getIndexBasicStats,
+  indexStatsToTelemetryEvents,
+  getIndexFieldStats,
+} from './helpers';
+
+import { DataTelemetryEvent } from './types';
+
+export class DataTelemetryService {
+  private readonly logger: Logger;
+  private isStopped = false;
+
+  private telemetryStart?: TelemetryPluginStart;
+
+  // @ts-ignore: Unused variable
+  private analytics?: AnalyticsServiceSetup;
+
+  // @ts-ignore: Unused variable
+  private isInProgress = false;
+
+  private isOptedIn?: boolean = true; // Assume true until the first check
+  private esClient?: ElasticsearchClient;
+
+  private run$ = defer(() => from(this.shouldCollectTelemetry())).pipe(
+    takeWhile(() => !this.isStopped),
+    tap((isOptedIn) => {
+      if (!isOptedIn) {
+        this.logTelemetryNotOptedIn();
+        this.isInProgress = false;
+      } else {
+        this.isInProgress = true;
+      }
+    }),
+    filter((isOptedIn) => isOptedIn),
+    exhaustMap(() => this.collectAndSend()),
+    tap(() => (this.isInProgress = false))
+  );
+
+  constructor(logger: Logger) {
+    this.logger = logger;
+  }
+
+  public setup(analytics: AnalyticsServiceSetup, taskManager: TaskManagerSetupContract) {
+    this.analytics = analytics;
+    this.registerTask(taskManager);
+  }
+
+  public async start(
+    telemetryStart: TelemetryPluginStart,
+    core: CoreStart,
+    taskManager: TaskManagerStartContract
+  ) {
+    this.telemetryStart = telemetryStart;
+    this.esClient = core?.elasticsearch.client.asInternalUser;
+
+    if (taskManager) {
+      const taskInstance = await this.scheduleTask(taskManager);
+      if (taskInstance) {
+        this.logger.debug(`Task ${taskInstance.id} scheduled.`);
+      }
+    }
+  }
+
+  public stop() {
+    this.isStopped = true;
+  }
+
+  private registerTask(taskManager: TaskManagerSetupContract) {
+    const service = this;
+    taskManager.registerTaskDefinitions({
+      [LOGS_DATA_TELEMETRY_TASK_TYPE]: {
+        title: 'Logs Data Telemetry',
+        description:
+          'This task collects data telemetry for logs data and sends it to the telemetry service.',
+        timeout: `${TELEMETRY_TASK_TIMEOUT}m`,
+        maxAttempts: 1, // Do not retry
+
+        createTaskRunner: () => {
+          return {
+            // Perform the work of the task. The return value should fit the TaskResult interface.
+            async run() {
+              service.logger.debug(`[Logs Data Telemetry] Running task`);
+
+              try {
+                service.run$.pipe(take(1)).subscribe({
+                  complete: () => {
+                    service.logger.debug(`[Logs Data Telemetry] Task completed`);
+                  },
+                });
+              } catch (e) {
+                service.logger.error(e);
+              }
+            },
+            async cancel() {
+              service.logger.debug(`[Logs Data Telemetry] Task cancelled`);
+            },
+          };
+        },
+      },
+    });
+  }
+
+  private async scheduleTask(taskManager: TaskManagerStartContract): Promise<TaskInstance | null> {
+    try {
+      const taskInstance = await taskManager.ensureScheduled({
+        id: LOGS_DATA_TELEMETRY_TASK_ID,
+        taskType: LOGS_DATA_TELEMETRY_TASK_TYPE,
+        schedule: {
+          interval: `${TELEMETRY_TASK_INTERVAL}m`,
+        },
+        params: {},
+        state: {},
+        scope: ['logs'],
+      });
+
+      this.logger?.debug(
+        `Task ${LOGS_DATA_TELEMETRY_TASK_ID} scheduled with interval ${taskInstance.schedule?.interval}.`
+      );
+
+      return taskInstance;
+    } catch (e) {
+      this.logger?.error(
+        `Failed to schedule task ${LOGS_DATA_TELEMETRY_TASK_ID} with interval ${TELEMETRY_TASK_INTERVAL}. ${e?.message}`
+      );
+
+      return null;
+    }
+  }
+
+  public async shouldCollectTelemetry() {
+    if (process.env.CI) {
+      return false; // Telemetry collection flow should not run in CI
+    }
+
+    this.isOptedIn = await this.telemetryStart?.getIsOptedIn();
+    return this.isOptedIn === true;
+  }
+
+  private collectAndSend() {
+    // Gather data streams and indices related to each stream of log
+    if (this.esClient) {
+      return getAllIndices({
+        esClient: this.esClient,
+        logsIndexPatterns: LOGS_DATASET_INDEX_PATTERNS,
+        excludeStreamsStartingWith: [...NON_LOG_SIGNALS, ...EXCLUDE_ELASTIC_LOGS],
+        breatheDelay: BREATHE_DELAY_MEDIUM,
+      }).pipe(
+        switchMap((dataStreamsAndIndicesInfo) => {
+          if (dataStreamsAndIndicesInfo.length > MAX_STREAMS_TO_REPORT) {
+            this.logger.debug(
+              `[Logs Data Telemetry] Number of data streams exceeds ${MAX_STREAMS_TO_REPORT}. Skipping telemetry collection.`
+            );
+            return EMPTY;
+          }
+          return of(dataStreamsAndIndicesInfo);
+        }),
+        delay(BREATHE_DELAY_MEDIUM),
+        switchMap((dataStreamsAndIndicesInfo) => {
+          return addMappingsToIndices({
+            esClient: this.esClient!,
+            dataStreamsInfo: dataStreamsAndIndicesInfo,
+            logsIndexPatterns: LOGS_DATASET_INDEX_PATTERNS,
+          });
+        }),
+        delay(BREATHE_DELAY_SHORT),
+        switchMap((dataStreamsAndIndicesInfo) => {
+          return addNamespace({
+            dataStreamsInfo: dataStreamsAndIndicesInfo,
+          });
+        }),
+        delay(BREATHE_DELAY_MEDIUM),
+        switchMap((infoWithNamespace) => {
+          return getIndexBasicStats({
+            esClient: this.esClient!,
+            indices: infoWithNamespace,
+            breatheDelay: BREATHE_DELAY_MEDIUM,
+          });
+        }),
+        delay(BREATHE_DELAY_SHORT),
+        switchMap((infoWithStats) => {
+          return getIndexFieldStats({
+            basicStats: infoWithStats,
+          });
+        }),
+        delay(BREATHE_DELAY_SHORT),
+        map((statsWithNamespace) => {
+          return groupStatsByPatternName(statsWithNamespace);
+        }),
+        map((statsByPattern) => {
+          return indexStatsToTelemetryEvents(statsByPattern);
+        }),
+        delay(BREATHE_DELAY_SHORT),
+        switchMap((dataTelemetryEvents) => {
+          return from(this.reportEvents(dataTelemetryEvents));
+        })
+      );
+    } else {
+      this.logger.warn(
+        `[Logs Data Telemetry] Elasticsearch client is unavailable: cannot retrieve data streams
+        for stream of logs`
+      );
+
+      return EMPTY;
+    }
+  }
+
+  private async reportEvents(events: DataTelemetryEvent[]) {
+    // TODO: Implement reporting events via analytics service
+    return Promise.resolve(events);
+  }
+
+  private logTelemetryNotOptedIn() {
+    this.logger.debug(`[Logs Data Telemetry] Telemetry is not opted-in.`);
+  }
+}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/helpers.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/helpers.ts
new file mode 100644
index 0000000000000..c22bc64d22086
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/helpers.ts
@@ -0,0 +1,575 @@
+/*
+ * 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 { intersection } from 'lodash';
+import { from, of, Observable, concatMap, delay, map, toArray, forkJoin } from 'rxjs';
+import {
+  MappingPropertyBase,
+  IndicesGetMappingResponse,
+  IndicesStatsResponse,
+} from '@elastic/elasticsearch/lib/api/types';
+import type { ElasticsearchClient } from '@kbn/core-elasticsearch-server';
+import { DataStreamFieldStatsPerNamespace, DatasetIndexPattern } from './types';
+
+import {
+  IndexBasicInfo,
+  DataStreamStatsPerNamespace,
+  DataStreamStats,
+  DataTelemetryEvent,
+} from './types';
+import {
+  DATA_TELEMETRY_FIELDS,
+  LEVEL_2_RESOURCE_FIELDS,
+  PROMINENT_LOG_ECS_FIELDS,
+} from './constants';
+
+/**
+ * Retrieves all indices and data streams for each stream of logs.
+ */
+export function getAllIndices({
+  esClient,
+  logsIndexPatterns,
+  excludeStreamsStartingWith,
+  breatheDelay,
+}: {
+  esClient: ElasticsearchClient;
+  logsIndexPatterns: DatasetIndexPattern[];
+  excludeStreamsStartingWith: string[];
+  breatheDelay: number; // Breathing time between each request to prioritize other cluster operations
+}): Observable<IndexBasicInfo[]> {
+  const uniqueIndices = new Set<string>();
+  const indicesInfo: IndexBasicInfo[] = [];
+
+  return from(logsIndexPatterns).pipe(
+    concatMap((pattern) =>
+      of(pattern).pipe(
+        delay(breatheDelay),
+        concatMap(() => {
+          return forkJoin([
+            from(getDataStreamsInfoForPattern({ esClient, pattern })),
+            from(getIndicesInfoForPattern({ esClient, pattern })),
+          ]);
+        }),
+        map(([patternDataStreamsInfo, patternIndicesInfo]) => {
+          return [...patternDataStreamsInfo, ...patternIndicesInfo];
+        }),
+        map((indicesAndDataStreams) => {
+          // Exclude indices that have already been dealt with
+          return indicesAndDataStreams.filter((dataStream) => {
+            return !uniqueIndices.has(dataStream.name);
+          });
+        }),
+        map((indicesAndDataStreams) => {
+          // Exclude internal or backing indices
+          return indicesAndDataStreams.filter((dataStream) => !dataStream.name.startsWith('.'));
+        }),
+        map((indicesAndDataStreams) => {
+          return indicesAndDataStreams.filter(
+            // Exclude streams starting with non log known signals
+            (dataStream) =>
+              !excludeStreamsStartingWith.some((excludeStream) =>
+                dataStream.name.startsWith(excludeStream)
+              )
+          );
+        }),
+        map((indicesAndDataStreams) => {
+          indicesAndDataStreams.forEach((dataStream) => {
+            uniqueIndices.add(dataStream.name);
+          });
+          return indicesAndDataStreams;
+        }),
+        map((dataStreamsInfoRecords) => {
+          indicesInfo.push(...dataStreamsInfoRecords);
+          return dataStreamsInfoRecords;
+        })
+      )
+    ),
+    toArray(),
+    map(() => indicesInfo)
+  );
+}
+
+/**
+ * Retrieves the mappings at once and adds to the indices info.
+ */
+export function addMappingsToIndices({
+  esClient,
+  dataStreamsInfo,
+  logsIndexPatterns,
+}: {
+  esClient: ElasticsearchClient;
+  dataStreamsInfo: IndexBasicInfo[];
+  logsIndexPatterns: DatasetIndexPattern[];
+}): Observable<IndexBasicInfo[]> {
+  return from(
+    esClient.indices.getMapping({
+      index: logsIndexPatterns.map((pattern) => pattern.pattern),
+    })
+  ).pipe(
+    map((mappings) => {
+      return dataStreamsInfo.map((info) => {
+        // Add mapping for each index
+        info.indices.forEach((index) => {
+          if (mappings[index]) {
+            info.mapping = { ...(info.mapping ?? {}), [index]: mappings[index] };
+          }
+        });
+
+        return info;
+      });
+    })
+  );
+}
+
+/**
+ * Adds the namespace of the index from index mapping if available.
+ */
+export function addNamespace({
+  dataStreamsInfo,
+}: {
+  dataStreamsInfo: IndexBasicInfo[];
+}): Observable<IndexBasicInfo[]> {
+  return from(dataStreamsInfo).pipe(
+    concatMap((indexInfo) =>
+      of(indexInfo).pipe(
+        map((dataStream) => getIndexNamespace(dataStream)),
+        map((namespace) => {
+          indexInfo.namespace = namespace;
+          return indexInfo;
+        })
+      )
+    ),
+    toArray()
+  );
+}
+
+export function groupStatsByPatternName(
+  dataStreamsStats: DataStreamFieldStatsPerNamespace[]
+): DataStreamStats[] {
+  const uniqueNamespaces = new Set<string>();
+  const uniqueFields = new Set<string>();
+  const statsByStream = dataStreamsStats.reduce<Map<string, DataStreamStats>>((acc, stats) => {
+    if (!stats.patternName) {
+      return acc;
+    }
+
+    if (!acc.get(stats.patternName)) {
+      acc.set(stats.patternName, {
+        streamName: stats.patternName,
+        shipper: stats.shipper,
+        totalNamespaces: 0,
+        totalDocuments: 0,
+        failureStoreDocuments: 0,
+        failureStoreIndices: 0,
+        totalSize: 0,
+        totalIndices: 0,
+        totalFields: 0,
+        structureLevel: {},
+        fieldsCount: {},
+        managedBy: [],
+        packageName: [],
+        beat: [],
+      });
+    }
+
+    const streamStats = acc.get(stats.patternName)!;
+
+    // Track unique namespaces
+    if (stats.namespace) {
+      uniqueNamespaces.add(stats.namespace);
+    }
+    streamStats.totalNamespaces = uniqueNamespaces.size;
+
+    // Track unique fields
+    stats.uniqueFields.forEach((field) => uniqueFields.add(field));
+    streamStats.totalFields = uniqueFields.size;
+
+    // Aggregate structure levels
+    for (const [level, count] of Object.entries(stats.structureLevel)) {
+      streamStats.structureLevel[Number(level)] =
+        (streamStats.structureLevel[Number(level)] ?? 0) + count;
+    }
+
+    streamStats.totalDocuments += stats.totalDocuments;
+    streamStats.totalIndices += stats.totalIndices;
+    streamStats.failureStoreDocuments += stats.failureStoreDocuments;
+    streamStats.failureStoreIndices += stats.failureStoreIndices;
+    streamStats.totalSize += stats.totalSize;
+
+    for (const [field, count] of Object.entries(stats.fieldsCount)) {
+      streamStats.fieldsCount[field] = (streamStats.fieldsCount[field] ?? 0) + count;
+    }
+
+    if (stats.meta?.managed_by) {
+      streamStats.managedBy.push(stats.meta.managed_by);
+    }
+
+    if (stats.meta?.package?.name) {
+      streamStats.packageName.push(stats.meta.package.name);
+    }
+
+    if (stats.meta?.beat) {
+      streamStats.beat.push(stats.meta.beat);
+    }
+
+    return acc;
+  }, new Map());
+
+  return Array.from(statsByStream.values());
+}
+
+export function getIndexBasicStats({
+  esClient,
+  indices,
+  breatheDelay,
+}: {
+  esClient: ElasticsearchClient;
+  indices: IndexBasicInfo[];
+  breatheDelay: number;
+}): Observable<DataStreamStatsPerNamespace[]> {
+  const indexNames = indices.map((info) => info.name);
+
+  return from(
+    esClient.indices.stats({
+      index: indexNames,
+    })
+  ).pipe(
+    delay(breatheDelay),
+    concatMap((allIndexStats) => {
+      return from(getFailureStoreStats({ esClient, indexName: indexNames.join(',') })).pipe(
+        map((allFailureStoreStats) => {
+          return indices.map((info) =>
+            getIndexStats(allIndexStats.indices, allFailureStoreStats, info)
+          );
+        })
+      );
+    })
+  );
+}
+
+export function getIndexFieldStats({
+  basicStats,
+}: {
+  basicStats: DataStreamStatsPerNamespace[];
+}): Observable<DataStreamFieldStatsPerNamespace[]> {
+  return from(basicStats).pipe(
+    map((stats) => getFieldStatsAndStructureLevels(stats, DATA_TELEMETRY_FIELDS)),
+    toArray()
+  );
+}
+
+export function indexStatsToTelemetryEvents(stats: DataStreamStats[]): DataTelemetryEvent[] {
+  return stats.map((stat) => ({
+    pattern_name: stat.streamName,
+    shipper: stat.shipper,
+    doc_count: stat.totalDocuments,
+    structure_level: stat.structureLevel,
+    index_count: stat.totalIndices,
+    failure_store_doc_count: stat.failureStoreDocuments,
+    failure_store_index_count: stat.failureStoreIndices,
+    namespace_count: stat.totalNamespaces,
+    field_count: stat.totalFields,
+    field_existence: stat.fieldsCount,
+    size_in_bytes: stat.totalSize,
+    managed_by: Array.from(new Set(stat.managedBy)),
+    package_name: Array.from(new Set(stat.packageName)),
+    beat: Array.from(new Set(stat.beat)),
+  }));
+}
+
+/**
+ * Retrieves information about data streams matching a given pattern.
+ */
+async function getDataStreamsInfoForPattern({
+  esClient,
+  pattern,
+}: {
+  esClient: ElasticsearchClient;
+  pattern: DatasetIndexPattern;
+}): Promise<IndexBasicInfo[]> {
+  const resp = await esClient.indices.getDataStream({
+    name: pattern.pattern,
+    expand_wildcards: 'all',
+  });
+
+  return resp.data_streams.map((dataStream) => ({
+    patternName: pattern.patternName,
+    shipper: pattern.shipper,
+    isDataStream: true,
+    name: dataStream.name,
+    indices: dataStream.indices.map((index) => index.index_name),
+    mapping: undefined,
+    meta: dataStream._meta,
+  }));
+}
+
+async function getIndicesInfoForPattern({
+  esClient,
+  pattern,
+}: {
+  esClient: ElasticsearchClient;
+  pattern: DatasetIndexPattern;
+}): Promise<IndexBasicInfo[]> {
+  const resp = await esClient.indices.get({
+    index: pattern.pattern,
+  });
+
+  return Object.entries(resp).map(([index, indexInfo]) => {
+    // This is needed to keep the format same for data streams and indices
+    const indexMapping: IndicesGetMappingResponse | undefined = indexInfo.mappings
+      ? {
+          [index]: { mappings: indexInfo.mappings },
+        }
+      : undefined;
+
+    return {
+      patternName: pattern.patternName,
+      shipper: pattern.shipper,
+      isDataStream: false,
+      name: index,
+      indices: [index],
+      mapping: indexMapping,
+      meta: indexInfo.mappings?._meta,
+    };
+  });
+}
+
+/**
+ * Retrieves the namespace of index by checking the mappings of backing indices.
+ *
+ * @param {Object} indexInfo - The information about the index.
+ * @returns {string | undefined} - The namespace of the data stream found in the mapping.
+ */
+function getIndexNamespace(indexInfo: IndexBasicInfo): string | undefined {
+  for (let i = 0; i < indexInfo.indices.length; i++) {
+    const index = indexInfo.indices[i];
+    const indexMapping = indexInfo.mapping?.[index]?.mappings;
+    const dataStreamMapping: MappingPropertyBase | undefined =
+      indexMapping?.properties?.data_stream;
+    if (!dataStreamMapping) {
+      continue;
+    }
+    const namespace = (dataStreamMapping?.properties?.namespace as { value?: string })?.value;
+    if (namespace) {
+      return namespace;
+    }
+  }
+
+  return undefined;
+}
+
+async function getFailureStoreStats({
+  esClient,
+  indexName,
+}: {
+  esClient: ElasticsearchClient;
+  indexName: string;
+}): Promise<IndicesStatsResponse['indices']> {
+  try {
+    // TODO: Use the failure store API when it is available
+    const resp = await esClient.transport.request<ReturnType<typeof esClient.indices.stats>>({
+      method: 'GET',
+      path: `/${indexName}/_stats`,
+      querystring: {
+        failure_store: 'only',
+      },
+    });
+
+    return (await resp).indices;
+  } catch (e) {
+    // Failure store API may not be available
+    return {};
+  }
+}
+
+export function getIndexStats(
+  allIndexStats: IndicesStatsResponse['indices'],
+  allFailureStoreStats: IndicesStatsResponse['indices'],
+  info: IndexBasicInfo
+): DataStreamStatsPerNamespace {
+  let totalDocs = 0;
+  let totalSize = 0;
+  let totalIndices = 0;
+  const indexStats: IndicesStatsResponse['indices'] = {};
+  let failureStoreDocs = 0;
+  let failureStoreIndices = 0;
+  const failureStoreStats: IndicesStatsResponse['indices'] = {};
+  Object.entries(allIndexStats ?? {}).forEach(([indexName, stats]) => {
+    if (indexName.includes(info.name)) {
+      totalDocs += stats.primaries?.docs?.count ?? 0;
+      totalSize += stats.primaries?.store?.size_in_bytes ?? 0;
+      totalIndices++;
+
+      indexStats[indexName] = stats;
+    }
+  });
+
+  Object.entries(allFailureStoreStats ?? {}).forEach(([indexName, stats]) => {
+    if (indexName.includes(info.name)) {
+      failureStoreDocs += stats.primaries?.docs?.count ?? 0;
+      failureStoreIndices++;
+
+      failureStoreStats[indexName] = stats;
+    }
+  });
+
+  return {
+    patternName: info.patternName,
+    shipper: info.shipper,
+    namespace: info.namespace,
+    totalDocuments: totalDocs,
+    totalSize,
+    totalIndices,
+    failureStoreDocuments: failureStoreDocs,
+    failureStoreIndices,
+    meta: info.meta,
+    mapping: info.mapping,
+    indexStats,
+    failureStoreStats,
+  };
+}
+
+function getFieldStatsAndStructureLevels(
+  stats: DataStreamStatsPerNamespace,
+  fieldsToCheck: string[]
+): DataStreamFieldStatsPerNamespace {
+  const uniqueFields = new Set<string>();
+  const structureLevel: Record<number, number> = {};
+
+  // Loop through each index and get the number of fields and gather how many documents have that field
+  const resourceFieldCounts: Record<string, number> = {};
+  const indexNames = Object.keys(stats.indexStats ?? {});
+  for (const backingIndex of indexNames) {
+    const indexStats = stats.indexStats?.[backingIndex];
+    const indexMapping = stats.mapping?.[backingIndex]?.mappings;
+    if (!indexMapping) {
+      continue;
+    }
+
+    // Get all fields from the mapping
+    const indexFieldsMap = getFieldPathsMapFromMapping(indexMapping);
+    const indexFieldsList = Object.keys(indexFieldsMap);
+    indexFieldsList.forEach((field) => uniqueFields.add(field));
+
+    const indexDocCount = indexStats?.primaries?.docs?.count ?? 0;
+    if (!indexDocCount) {
+      continue;
+    }
+
+    const indexStructureLevel = getStructureLevelForFieldsList(stats, indexFieldsMap);
+    structureLevel[indexStructureLevel] =
+      (structureLevel[indexStructureLevel] ?? 0) + indexDocCount;
+
+    for (const field of fieldsToCheck) {
+      if (indexFieldsMap[field]) {
+        resourceFieldCounts[field] = (resourceFieldCounts[field] ?? 0) + indexDocCount;
+      }
+    }
+  }
+
+  return {
+    ...stats,
+    uniqueFields: Array.from(uniqueFields),
+    structureLevel,
+    fieldsCount: resourceFieldCounts,
+  };
+}
+
+/**
+ * Determines the structure level of log documents based on the fields present in the list.
+ *
+ * Structure Levels:
+ * - Level 0: Unstructured data. No `@timestamp` or `timestamp` field.
+ * - Level 1: Contains `@timestamp` or `timestamp` field.
+ * - Level 2: Contains any of resource fields (`host.name`, `service.name`, `host`, `hostname`, `host_name`).
+ * - Level 3: Contains `@timestamp`, resource fields, and `message` field.
+ * - Level 4: Index name complies with a pattern of known shipper e.g. `logstash-*`, `heartbeat-*`.
+ * - Level 5a: Data stream naming scheme exists (`data_stream.dataset`, `data_stream.type`, `data_stream.namespace`).
+ * - Level 5b: Contains at least 3 ECS fields or `ecs.version` field.
+ * - Level 6: Part of an integration, managed by a known entity.
+ *
+ * @param stats - Container pattern, shipper and meta info
+ * @param fieldsMap - Dictionary/Map of fields present in the index with full path as key.
+ * @returns {number} - The structure level of the index.
+ */
+function getStructureLevelForFieldsList(
+  stats: DataStreamStatsPerNamespace,
+  fieldsMap: Record<string, boolean>
+): number {
+  // Check level 1, if @timestamp or timestamp exists
+  if (!fieldsMap['@timestamp'] && !fieldsMap.timestamp) {
+    return 0;
+  }
+
+  // Check level 2, if resource fields exist
+  if (!LEVEL_2_RESOURCE_FIELDS.some((field) => fieldsMap[field])) {
+    return 1;
+  }
+
+  // Check level 3, if basic structure of log message exist
+  if (
+    !fieldsMap['@timestamp'] ||
+    !fieldsMap.message ||
+    (!fieldsMap['host.name'] && !fieldsMap['service.name'])
+  ) {
+    return 2;
+  }
+
+  // Check level 4 (Shipper is known)
+  if (!stats.patternName || stats.patternName === 'generic-logs') {
+    return 3;
+  }
+
+  // Check level 5a (Data stream scheme exists)
+  if (
+    !fieldsMap['data_stream.dataset'] ||
+    !fieldsMap['data_stream.type'] ||
+    !fieldsMap['data_stream.namespace']
+  ) {
+    // Check level 5b (ECS fields exist)
+    const fieldsList = Object.keys(fieldsMap);
+    if (
+      !fieldsMap['ecs.version'] &&
+      intersection(PROMINENT_LOG_ECS_FIELDS, fieldsList).length < 3
+    ) {
+      return 4;
+    }
+  }
+
+  // Check level 6 (Index is managed)
+  if (!stats.meta?.managed_by && !stats.meta?.managed) {
+    return 5;
+  }
+
+  // All levels are fulfilled
+  return 6;
+}
+
+/**
+ * Recursively traverses a mapping and returns a dictionary of field paths.
+ * Each key in the dictionary represents a full field path in dot notation.
+ *
+ * @param {MappingPropertyBase} mapping - The mapping to traverse.
+ * @returns {Record<string, boolean>} - A dictionary of field paths.
+ */
+function getFieldPathsMapFromMapping(mapping: MappingPropertyBase): Record<string, boolean> {
+  const fieldPathsMap: Record<string, boolean> = {};
+
+  function traverseMapping(nestedMapping: MappingPropertyBase, parentField: string = ''): void {
+    for (const [fieldName, field] of Object.entries(nestedMapping.properties ?? {})) {
+      const fullFieldName = parentField ? `${parentField}.${fieldName}` : fieldName;
+      if ((field as MappingPropertyBase).properties) {
+        traverseMapping(field as MappingPropertyBase, fullFieldName);
+      } else {
+        fieldPathsMap[fullFieldName] = true;
+      }
+    }
+  }
+
+  traverseMapping(mapping);
+  return fieldPathsMap;
+}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/types.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/types.ts
new file mode 100644
index 0000000000000..0ccae5e83f1be
--- /dev/null
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/data_telemetry/types.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 {
+  IndexName,
+  IndicesGetMappingResponse,
+  IndicesStatsResponse,
+  Metadata,
+} from '@elastic/elasticsearch/lib/api/types';
+
+export interface DatasetIndexPattern {
+  pattern: string;
+  patternName: string;
+  shipper?: string;
+}
+
+export interface IndexBasicInfo {
+  patternName: string;
+  shipper?: string;
+  isDataStream: boolean;
+  name: string;
+  indices: IndexName[];
+  meta?: Metadata;
+  mapping?: IndicesGetMappingResponse;
+  namespace?: string;
+}
+
+export interface DataStreamStatsPerNamespace {
+  patternName: string;
+  shipper?: string;
+  namespace?: string;
+  totalDocuments: number;
+  totalSize: number;
+  totalIndices: number;
+  failureStoreDocuments: number;
+  failureStoreIndices: number;
+  meta?: Metadata;
+  mapping?: IndicesGetMappingResponse;
+  indexStats: IndicesStatsResponse['indices'];
+  failureStoreStats: IndicesStatsResponse['indices'];
+}
+
+export interface DataStreamStatsWithLevelsPerNamespace extends DataStreamStatsPerNamespace {
+  structureLevel: Record<number, number>;
+}
+
+export interface DataStreamFieldStatsPerNamespace extends DataStreamStatsWithLevelsPerNamespace {
+  uniqueFields: string[];
+  fieldsCount: Record<string, number>;
+}
+
+export interface DataStreamStats {
+  streamName: string;
+  shipper?: string;
+  totalNamespaces: number;
+  totalDocuments: number;
+  structureLevel: Record<number, number>;
+  failureStoreDocuments: number;
+  failureStoreIndices: number;
+  totalSize: number;
+  totalIndices: number;
+  totalFields: number;
+  fieldsCount: Record<string, number>;
+  managedBy: string[];
+  packageName: string[];
+  beat: string[];
+}
+
+export interface DataTelemetryEvent {
+  pattern_name: string;
+  shipper?: string;
+  doc_count: number;
+  structure_level: Record<string, number>;
+  failure_store_doc_count: number;
+  index_count: number;
+  namespace_count: number;
+  field_count: number;
+  field_existence: Record<string, number>;
+  size_in_bytes: number;
+  managed_by: string[];
+  package_name: string[];
+  beat: string[];
+}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/services/index.ts b/x-pack/plugins/observability_solution/dataset_quality/server/services/index.ts
index f1da1af720137..97106526e497c 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/server/services/index.ts
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/services/index.ts
@@ -8,3 +8,4 @@
 export { dataStreamService } from './data_stream';
 export { indexStatsService } from './index_stats';
 export { datasetQualityPrivileges } from './privileges';
+export { DataTelemetryService } from './data_telemetry/data_telemetry_service';
diff --git a/x-pack/plugins/observability_solution/dataset_quality/server/types.ts b/x-pack/plugins/observability_solution/dataset_quality/server/types.ts
index 3874040f5d3bf..0ba17c5bb22c6 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/server/types.ts
+++ b/x-pack/plugins/observability_solution/dataset_quality/server/types.ts
@@ -6,14 +6,26 @@
  */
 
 import { CustomRequestHandlerContext } from '@kbn/core/server';
-import { FleetSetupContract, FleetStartContract } from '@kbn/fleet-plugin/server';
+import type { AnalyticsServiceSetup, AnalyticsServiceStart } from '@kbn/core-analytics-server';
+import type { FleetSetupContract, FleetStartContract } from '@kbn/fleet-plugin/server';
+import {
+  TaskManagerSetupContract,
+  TaskManagerStartContract,
+} from '@kbn/task-manager-plugin/server';
+import type { TelemetryPluginSetup, TelemetryPluginStart } from '@kbn/telemetry-plugin/server';
 
 export interface DatasetQualityPluginSetupDependencies {
   fleet: FleetSetupContract;
+  analytics: AnalyticsServiceSetup;
+  telemetry: TelemetryPluginSetup;
+  taskManager: TaskManagerSetupContract;
 }
 
 export interface DatasetQualityPluginStartDependencies {
   fleet: FleetStartContract;
+  telemetry: TelemetryPluginStart;
+  analytics: AnalyticsServiceStart;
+  taskManager: TaskManagerStartContract;
 }
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
diff --git a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
index 8bec2d8cb1a63..aab3038a9436f 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
+++ b/x-pack/plugins/observability_solution/dataset_quality/tsconfig.json
@@ -53,10 +53,13 @@
     "@kbn/ebt-tools",
     "@kbn/fields-metadata-plugin",
     "@kbn/server-route-repository-utils",
+    "@kbn/core-analytics-server",
     "@kbn/core-analytics-browser",
     "@kbn/core-lifecycle-browser",
     "@kbn/core-notifications-browser",
-    "@kbn/rison"
+    "@kbn/telemetry-plugin",
+    "@kbn/rison",
+    "@kbn/task-manager-plugin"
   ],
   "exclude": [
     "target/**/*"
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/indices_configuration_panel.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/indices_configuration_panel.tsx
index 0aad03315c8e1..8f42b4cf1bc6a 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/indices_configuration_panel.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/indices_configuration_panel.tsx
@@ -140,11 +140,7 @@ export const IndicesConfigurationPanel = React.memo<{
         disabled={isReadOnly}
       >
         {isKibanaAdvancedSettingFormElement(indicesFormElement) && (
-          <KibanaAdvancedSettingConfigurationPanel
-            isLoading={isLoading}
-            isReadOnly={isReadOnly}
-            advancedSettingFormElement={indicesFormElement}
-          />
+          <KibanaAdvancedSettingConfigurationPanel />
         )}
       </EuiCheckableCard>
       <EuiSpacer size="m" />
diff --git a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/kibana_advanced_setting_configuration_panel.tsx b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/kibana_advanced_setting_configuration_panel.tsx
index 49636e4171f2f..a095b2825cd3e 100644
--- a/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/kibana_advanced_setting_configuration_panel.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/pages/logs/settings/kibana_advanced_setting_configuration_panel.tsx
@@ -5,33 +5,15 @@
  * 2.0.
  */
 
-import { EuiDescribedFormGroup, EuiFieldText, EuiFormRow } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import React, { useMemo } from 'react';
+import React from 'react';
 import { useTrackPageview } from '@kbn/observability-shared-plugin/public';
-import { LogSourcesKibanaAdvancedSettingReference } from '@kbn/logs-shared-plugin/common';
-import { ApplicationStart } from '@kbn/core-application-browser';
-import { EuiLink } from '@elastic/eui';
-import { useLogSourcesContext } from '@kbn/logs-data-access-plugin/public';
+import {
+  LogSourcesSettingSynchronisationInfo,
+  useLogSourcesContext,
+} from '@kbn/logs-data-access-plugin/public';
 import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
-import { FormElement } from './form_elements';
-import { getFormRowProps } from './form_field_props';
-import { FormValidationError } from './validation_errors';
 
-function getKibanaAdvancedSettingsHref(application: ApplicationStart) {
-  return application.getUrlForApp('management', {
-    path: `/kibana/settings?query=${encodeURIComponent('Log sources')}`,
-  });
-}
-
-export const KibanaAdvancedSettingConfigurationPanel: React.FC<{
-  isLoading: boolean;
-  isReadOnly: boolean;
-  advancedSettingFormElement: FormElement<
-    LogSourcesKibanaAdvancedSettingReference,
-    FormValidationError
-  >;
-}> = ({ isLoading, isReadOnly, advancedSettingFormElement }) => {
+export const KibanaAdvancedSettingConfigurationPanel: React.FC = () => {
   const {
     services: { application },
   } = useKibanaContextForPlugin();
@@ -43,71 +25,13 @@ export const KibanaAdvancedSettingConfigurationPanel: React.FC<{
     delay: 15000,
   });
 
-  const advancedSettingsHref = useMemo(
-    () => getKibanaAdvancedSettingsHref(application),
-    [application]
-  );
-
   const { isLoadingLogSources, combinedIndices } = useLogSourcesContext();
 
   return (
-    <>
-      <EuiDescribedFormGroup
-        title={
-          <h4>
-            <FormattedMessage
-              id="xpack.infra.sourceConfiguration.logSourcesSettingTitle"
-              defaultMessage="Advanced setting"
-            />
-          </h4>
-        }
-        description={
-          <FormattedMessage
-            id="xpack.infra.sourceConfiguration.logSourcesSettingDescription"
-            defaultMessage="This value is synchronised with the Kibana log sources advanced setting. It can be changed via the {advancedSettingsLink}."
-            values={{
-              advancedSettingsLink: (
-                <EuiLink
-                  data-test-subj="xpack.infra.sourceConfiguration.logSourcesSettingLink"
-                  href={advancedSettingsHref}
-                >
-                  <FormattedMessage
-                    id="xpack.infra.sourceConfiguration.logSourcesSettingLinkText"
-                    defaultMessage="advanced settings page"
-                  />
-                </EuiLink>
-              ),
-            }}
-          />
-        }
-      >
-        <EuiFormRow
-          fullWidth
-          helpText={
-            <FormattedMessage
-              id="xpack.infra.sourceConfiguration.logSourcesSettingValue"
-              defaultMessage="The current setting value"
-            />
-          }
-          label={
-            <FormattedMessage
-              id="xpack.infra.sourceConfiguration.logSourcesSettingLabel"
-              defaultMessage="Log sources advanced setting"
-            />
-          }
-          {...getFormRowProps(advancedSettingFormElement)}
-        >
-          <EuiFieldText
-            data-test-subj="logSourcesSettingInput"
-            fullWidth
-            disabled={isLoading}
-            isLoading={isLoadingLogSources}
-            readOnly={true}
-            value={combinedIndices}
-            isInvalid={false}
-          />
-        </EuiFormRow>
-      </EuiDescribedFormGroup>
-    </>
+    <LogSourcesSettingSynchronisationInfo
+      isLoading={isLoadingLogSources}
+      logSourcesValue={combinedIndices}
+      getUrlForApp={application.getUrlForApp}
+    />
   );
 };
diff --git a/x-pack/plugins/observability_solution/infra/server/routes/infra/lib/host/get_hosts_alerts_count.ts b/x-pack/plugins/observability_solution/infra/server/routes/infra/lib/host/get_hosts_alerts_count.ts
index 7da36dffda715..c3d8f0f674d55 100644
--- a/x-pack/plugins/observability_solution/infra/server/routes/infra/lib/host/get_hosts_alerts_count.ts
+++ b/x-pack/plugins/observability_solution/infra/server/routes/infra/lib/host/get_hosts_alerts_count.ts
@@ -6,6 +6,7 @@
  */
 
 import { termQuery, termsQuery } from '@kbn/observability-plugin/server';
+import { observabilityFeatureId } from '@kbn/observability-shared-plugin/common';
 import {
   ALERT_RULE_PRODUCER,
   ALERT_STATUS,
@@ -40,7 +41,7 @@ export async function getHostsAlertsCount({
     query: {
       bool: {
         filter: [
-          ...termQuery(ALERT_RULE_PRODUCER, INFRA_ALERT_FEATURE_ID),
+          ...termsQuery(ALERT_RULE_PRODUCER, INFRA_ALERT_FEATURE_ID, observabilityFeatureId),
           ...termQuery(ALERT_STATUS, ALERT_STATUS_ACTIVE),
           ...termsQuery(HOST_NAME_FIELD, ...hostNames),
           ...rangeQuery,
diff --git a/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/log_sources_service.mocks.ts b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/log_sources_service.mocks.ts
index 3f1f8b9db5979..8073adc35d627 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/log_sources_service.mocks.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/log_sources_service.mocks.ts
@@ -6,6 +6,7 @@
  */
 
 import { LogSource, LogSourcesService } from './types';
+import { flattenLogSources } from './utils';
 
 const LOG_SOURCES: LogSource[] = [{ indexPattern: 'logs-*-*' }];
 export const createLogSourcesServiceMock = (
@@ -16,6 +17,9 @@ export const createLogSourcesServiceMock = (
     async getLogSources() {
       return Promise.resolve(sources);
     },
+    async getFlattenedLogSources() {
+      return Promise.resolve(flattenLogSources(sources));
+    },
     async setLogSources(nextLogSources: LogSource[]) {
       sources = nextLogSources;
       return Promise.resolve();
diff --git a/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/types.ts b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/types.ts
index 0d4cb51051237..a2c1ae825c285 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/types.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/types.ts
@@ -11,5 +11,6 @@ export interface LogSource {
 
 export interface LogSourcesService {
   getLogSources: () => Promise<LogSource[]>;
+  getFlattenedLogSources: () => Promise<string>;
   setLogSources: (sources: LogSource[]) => Promise<void>;
 }
diff --git a/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/utils.ts b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/utils.ts
new file mode 100644
index 0000000000000..e6c7faa1c1140
--- /dev/null
+++ b/x-pack/plugins/observability_solution/logs_data_access/common/services/log_sources_service/utils.ts
@@ -0,0 +1,11 @@
+/*
+ * 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 { LogSource } from './types';
+
+export const flattenLogSources = (logSources: LogSource[]) =>
+  logSources.map((source) => source.indexPattern).join(',');
diff --git a/x-pack/plugins/observability_solution/logs_data_access/public/components/logs_sources_setting.tsx b/x-pack/plugins/observability_solution/logs_data_access/public/components/logs_sources_setting.tsx
new file mode 100644
index 0000000000000..0b970ecbb2d25
--- /dev/null
+++ b/x-pack/plugins/observability_solution/logs_data_access/public/components/logs_sources_setting.tsx
@@ -0,0 +1,81 @@
+/*
+ * 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 { EuiDescribedFormGroup, EuiFieldText, EuiFormRow, EuiLink } from '@elastic/eui';
+import { ApplicationStart } from '@kbn/core-application-browser';
+import { FormattedMessage } from '@kbn/i18n-react';
+import React, { useMemo } from 'react';
+
+export const LogSourcesSettingSynchronisationInfo: React.FC<{
+  isLoading: boolean;
+  logSourcesValue: string;
+  getUrlForApp: ApplicationStart['getUrlForApp'];
+  title?: string;
+}> = ({ isLoading, logSourcesValue, getUrlForApp, title }) => {
+  const advancedSettingsHref = useMemo(
+    () =>
+      getUrlForApp('management', {
+        path: `/kibana/settings?query=${encodeURIComponent('Log sources')}`,
+      }),
+    [getUrlForApp]
+  );
+
+  return (
+    <>
+      <EuiDescribedFormGroup
+        fullWidth
+        title={
+          <h4>
+            {title ?? (
+              <FormattedMessage
+                id="xpack.logsDataAccess.logSourcesSettingInfo.logSourcesSettingTitle"
+                defaultMessage="Log sources"
+              />
+            )}
+          </h4>
+        }
+        description={
+          <FormattedMessage
+            id="xpack.logsDataAccess.logSourcesSettingInfo.logSourcesSettingDescription"
+            defaultMessage="This value is synchronised with the Kibana log sources advanced setting. It can be changed via the {advancedSettingsLink}."
+            values={{
+              advancedSettingsLink: (
+                <EuiLink
+                  data-test-subj="xpack.infra.logSourcesSettingInfo.logSourcesSettingLink"
+                  href={advancedSettingsHref}
+                >
+                  <FormattedMessage
+                    id="xpack.logsDataAccess.logSourcesSettingInfo.logSourcesSettingLinkText"
+                    defaultMessage="advanced settings page"
+                  />
+                </EuiLink>
+              ),
+            }}
+          />
+        }
+      >
+        <EuiFormRow
+          fullWidth
+          label={
+            <FormattedMessage
+              id="xpack.logsDataAccess.logSourcesSettingInfo.logSourcesSettingLabel"
+              defaultMessage="Log sources advanced setting"
+            />
+          }
+        >
+          <EuiFieldText
+            data-test-subj="logSourcesSettingInput"
+            fullWidth
+            disabled={true}
+            isLoading={isLoading}
+            value={logSourcesValue}
+            isInvalid={false}
+          />
+        </EuiFormRow>
+      </EuiDescribedFormGroup>
+    </>
+  );
+};
diff --git a/x-pack/plugins/observability_solution/logs_data_access/public/hooks/use_log_sources.ts b/x-pack/plugins/observability_solution/logs_data_access/public/hooks/use_log_sources.ts
index ff463867a7a77..c69348c4c7275 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/public/hooks/use_log_sources.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/public/hooks/use_log_sources.ts
@@ -8,6 +8,7 @@
 import createContainer from 'constate';
 import { useTrackedPromise } from '@kbn/use-tracked-promise';
 import { useState, useEffect, useMemo } from 'react';
+import { flattenLogSources } from '../../common/services/log_sources_service/utils';
 import { LogSource, LogSourcesService } from '../../common/services/log_sources_service/types';
 
 export const useLogSources = ({ logSourcesService }: { logSourcesService: LogSourcesService }) => {
@@ -35,7 +36,7 @@ export const useLogSources = ({ logSourcesService }: { logSourcesService: LogSou
   }, [getLogSources]);
 
   const combinedIndices = useMemo(() => {
-    return logSources.map((logSource) => logSource.indexPattern).join(',');
+    return flattenLogSources(logSources);
   }, [logSources]);
 
   return {
diff --git a/x-pack/plugins/observability_solution/logs_data_access/public/index.ts b/x-pack/plugins/observability_solution/logs_data_access/public/index.ts
index cc09500ef0a84..ed8facea9b91b 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/public/index.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/public/index.ts
@@ -16,6 +16,7 @@ export type { LogsDataAccessPluginSetup, LogsDataAccessPluginStart };
 
 import { LogsDataAccessPluginSetupDeps, LogsDataAccessPluginStartDeps } from './types';
 export { LogSourcesProvider, useLogSourcesContext } from './hooks/use_log_sources';
+export { LogSourcesSettingSynchronisationInfo } from './components/logs_sources_setting';
 
 export const plugin: PluginInitializer<
   LogsDataAccessPluginSetup,
diff --git a/x-pack/plugins/observability_solution/logs_data_access/public/services/log_sources_service/index.ts b/x-pack/plugins/observability_solution/logs_data_access/public/services/log_sources_service/index.ts
index a75bbd65c26e3..f329907f145ef 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/public/services/log_sources_service/index.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/public/services/log_sources_service/index.ts
@@ -6,19 +6,24 @@
  */
 
 import { OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID } from '@kbn/management-settings-ids';
+import { flattenLogSources } from '../../../common/services/log_sources_service/utils';
 import { LogSource, LogSourcesService } from '../../../common/services/log_sources_service/types';
 import { RegisterServicesParams } from '../register_services';
 
 export function createLogSourcesService(params: RegisterServicesParams): LogSourcesService {
   const { uiSettings } = params.deps;
   return {
-    getLogSources: async () => {
+    async getLogSources() {
       const logSources = uiSettings.get<string[]>(OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID);
       return logSources.map((logSource) => ({
         indexPattern: logSource,
       }));
     },
-    setLogSources: async (sources: LogSource[]) => {
+    async getFlattenedLogSources() {
+      const logSources = await this.getLogSources();
+      return flattenLogSources(logSources);
+    },
+    async setLogSources(sources: LogSource[]) {
       await uiSettings.set(
         OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID,
         sources.map((source) => source.indexPattern)
diff --git a/x-pack/plugins/observability_solution/logs_data_access/server/services/log_sources_service/index.ts b/x-pack/plugins/observability_solution/logs_data_access/server/services/log_sources_service/index.ts
index e8907d7537932..925deb53524cd 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/server/services/log_sources_service/index.ts
+++ b/x-pack/plugins/observability_solution/logs_data_access/server/services/log_sources_service/index.ts
@@ -8,6 +8,7 @@
 import type { KibanaRequest } from '@kbn/core-http-server';
 import type { SavedObjectsClientContract } from '@kbn/core-saved-objects-api-server';
 import { OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID } from '@kbn/management-settings-ids';
+import { flattenLogSources } from '../../../common/services/log_sources_service/utils';
 import { LogSource, LogSourcesService } from '../../../common/services/log_sources_service/types';
 import { RegisterServicesParams } from '../register_services';
 
@@ -18,8 +19,8 @@ export function createLogSourcesServiceFactory(params: RegisterServicesParams) {
     ): Promise<LogSourcesService> {
       const { uiSettings } = params.deps;
       const uiSettingsClient = uiSettings.asScopedToClient(savedObjectsClient);
-      return {
-        getLogSources: async () => {
+      const logSourcesService: LogSourcesService = {
+        async getLogSources() {
           const logSources = await uiSettingsClient.get<string[]>(
             OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID
           );
@@ -27,13 +28,18 @@ export function createLogSourcesServiceFactory(params: RegisterServicesParams) {
             indexPattern: logSource,
           }));
         },
-        setLogSources: async (sources: LogSource[]) => {
+        async getFlattenedLogSources() {
+          const logSources = await this.getLogSources();
+          return flattenLogSources(logSources);
+        },
+        async setLogSources(sources: LogSource[]) {
           return await uiSettingsClient.set(
             OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID,
             sources.map((source) => source.indexPattern)
           );
         },
       };
+      return logSourcesService;
     },
     async getScopedLogSourcesService(request: KibanaRequest): Promise<LogSourcesService> {
       const { savedObjects } = params.deps;
diff --git a/x-pack/plugins/observability_solution/logs_data_access/tsconfig.json b/x-pack/plugins/observability_solution/logs_data_access/tsconfig.json
index fb2457edd993f..ff67c2f1c8f30 100644
--- a/x-pack/plugins/observability_solution/logs_data_access/tsconfig.json
+++ b/x-pack/plugins/observability_solution/logs_data_access/tsconfig.json
@@ -22,6 +22,8 @@
     "@kbn/logging",
     "@kbn/core-saved-objects-api-server",
     "@kbn/es-query",
-    "@kbn/use-tracked-promise"
+    "@kbn/use-tracked-promise",
+    "@kbn/core-application-browser",
+    "@kbn/i18n-react"
   ]
 }
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/common/ui_settings/settings_keys.ts b/x-pack/plugins/observability_solution/observability_ai_assistant/common/ui_settings/settings_keys.ts
index eae50d1116a8f..fdcb34f22ecde 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant/common/ui_settings/settings_keys.ts
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant/common/ui_settings/settings_keys.ts
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
+import { OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID } from '@kbn/management-settings-ids';
+
 // AI Assistant
-export const aiAssistantLogsIndexPattern = 'observability:aiAssistantLogsIndexPattern';
+export const aiAssistantLogsIndexPattern = OBSERVABILITY_LOGS_DATA_ACCESS_LOG_SOURCES_ID;
 export const aiAssistantSimulatedFunctionCalling =
   'observability:aiAssistantSimulatedFunctionCalling';
 export const aiAssistantSearchConnectorIndexPattern =
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant/tsconfig.json b/x-pack/plugins/observability_solution/observability_ai_assistant/tsconfig.json
index aeb103e041cae..d9c747731073b 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant/tsconfig.json
@@ -42,6 +42,10 @@
     "@kbn/features-plugin",
     "@kbn/cloud-plugin",
     "@kbn/serverless",
+    "@kbn/core-elasticsearch-server",
+    "@kbn/core-ui-settings-server",
+    "@kbn/inference-plugin",
+    "@kbn/management-settings-ids"
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/kibana.jsonc b/x-pack/plugins/observability_solution/observability_ai_assistant_app/kibana.jsonc
index 1e02cbd1e7792..1414912d39164 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/kibana.jsonc
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/kibana.jsonc
@@ -24,7 +24,8 @@
       "ml",
       "alerting",
       "features",
-      "inference"
+      "inference",
+      "logsDataAccess"
     ],
     "requiredBundles": ["kibanaReact", "esqlDataGrid"],
     "optionalPlugins": ["cloud"],
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/functions/changes/index.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/functions/changes/index.ts
index 987414214a17b..dc0e26ea9c777 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/functions/changes/index.ts
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/functions/changes/index.ts
@@ -7,7 +7,6 @@
 import { omit, orderBy } from 'lodash';
 import { fromKueryExpression, toElasticsearchQuery } from '@kbn/es-query';
 import type { AggregationsAutoDateHistogramAggregation } from '@elastic/elasticsearch/lib/api/types';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/server';
 import { createElasticsearchClient } from '../../clients/elasticsearch';
 import type { FunctionRegistrationParameters } from '..';
 import {
@@ -25,6 +24,7 @@ export function registerChangesFunction({
     logger,
     context: { core: corePromise },
   },
+  pluginsStart,
 }: FunctionRegistrationParameters) {
   functions.registerFunction(
     {
@@ -41,7 +41,11 @@ export function registerChangesFunction({
 
       const core = await corePromise;
 
-      const logsIndexPattern = await core.uiSettings.client.get(aiAssistantLogsIndexPattern);
+      const logSourcesService =
+        await pluginsStart.logsDataAccess.services.logSourcesServiceFactory.getLogSourcesService(
+          core.savedObjects.client
+        );
+      const logsIndexPattern = await logSourcesService.getFlattenedLogSources();
 
       const client = createElasticsearchClient({
         client: core.elasticsearch.client.asCurrentUser,
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/types.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/types.ts
index 320459d203f9e..fc39e0b7fb24e 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/types.ts
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/server/types.ts
@@ -36,6 +36,7 @@ import type { CloudSetup, CloudStart } from '@kbn/cloud-plugin/server';
 import type { SecurityPluginSetup, SecurityPluginStart } from '@kbn/security-plugin/server';
 import type { ObservabilityPluginSetup } from '@kbn/observability-plugin/server';
 import type { InferenceServerStart, InferenceServerSetup } from '@kbn/inference-plugin/server';
+import type { LogsDataAccessPluginStart } from '@kbn/logs-data-access-plugin/server';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface ObservabilityAIAssistantAppServerStart {}
@@ -55,6 +56,7 @@ export interface ObservabilityAIAssistantAppPluginStartDependencies {
   cloud?: CloudStart;
   serverless?: ServerlessPluginStart;
   inference: InferenceServerStart;
+  logsDataAccess: LogsDataAccessPluginStart;
 }
 
 export interface ObservabilityAIAssistantAppPluginSetupDependencies {
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_app/tsconfig.json b/x-pack/plugins/observability_solution/observability_ai_assistant_app/tsconfig.json
index 55d965c9c37e3..84fe8f0b93911 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_app/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_app/tsconfig.json
@@ -72,7 +72,8 @@
     "@kbn/esql-datagrid",
     "@kbn/alerting-comparators",
     "@kbn/core-lifecycle-browser",
-    "@kbn/inference-plugin"
+    "@kbn/inference-plugin",
+    "@kbn/logs-data-access-plugin"
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_management/common/ui_settings.ts b/x-pack/plugins/observability_solution/observability_ai_assistant_management/common/ui_settings.ts
index f972eb5742a91..3319860de6610 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_management/common/ui_settings.ts
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_management/common/ui_settings.ts
@@ -9,30 +9,11 @@ import { schema } from '@kbn/config-schema';
 import { UiSettingsParams } from '@kbn/core-ui-settings-common';
 import { i18n } from '@kbn/i18n';
 import {
-  aiAssistantLogsIndexPattern,
   aiAssistantSimulatedFunctionCalling,
   aiAssistantSearchConnectorIndexPattern,
 } from '@kbn/observability-ai-assistant-plugin/common';
 
 export const uiSettings: Record<string, UiSettingsParams> = {
-  [aiAssistantLogsIndexPattern]: {
-    category: ['observability'],
-    name: i18n.translate(
-      'xpack.observabilityAiAssistantManagement.settingsTab.h3.logIndexPatternLabel',
-      { defaultMessage: 'Logs index pattern' }
-    ),
-    value: 'logs-*',
-    description: i18n.translate(
-      'xpack.observabilityAiAssistantManagement.settingsPage.logIndexPatternDescription',
-      {
-        defaultMessage:
-          'Index pattern used by the AI Assistant when querying for logs. Logs are categorised and used for root cause analysis',
-      }
-    ),
-    schema: schema.string(),
-    type: 'string',
-    requiresPageReload: true,
-  },
   [aiAssistantSimulatedFunctionCalling]: {
     category: ['observability'],
     name: i18n.translate(
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_management/kibana.jsonc b/x-pack/plugins/observability_solution/observability_ai_assistant_management/kibana.jsonc
index 03d217d84e94f..ddf00c84c0ac3 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_management/kibana.jsonc
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_management/kibana.jsonc
@@ -9,6 +9,6 @@
     "configPath": ["xpack", "observabilityAiAssistantManagement"],
     "requiredPlugins": ["management", "observabilityAIAssistant", "observabilityShared"],
     "optionalPlugins": ["actions", "home", "serverless", "enterpriseSearch"],
-    "requiredBundles": ["kibanaReact"]
+    "requiredBundles": ["kibanaReact", "logsDataAccess"]
   }
 }
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/settings_tab.test.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/settings_tab.test.tsx
index 807bde0557d8d..2bed5aed37160 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/settings_tab.test.tsx
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/settings_tab.test.tsx
@@ -6,11 +6,9 @@
  */
 
 import React from 'react';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { render } from '../../../helpers/test_helper';
 import { SettingsTab } from './settings_tab';
-import { aiAssistantLogsIndexPattern } from '@kbn/observability-ai-assistant-plugin/server';
-import { uiSettings } from '../../../../common/ui_settings';
 
 jest.mock('../../../hooks/use_app_context');
 
@@ -42,51 +40,4 @@ describe('SettingsTab', () => {
       path: '/insightsAndAlerting/triggersActionsConnectors/connectors',
     });
   });
-
-  describe('allows updating the AI Assistant settings', () => {
-    const windowLocationReloadMock = jest.fn();
-    const windowLocationOriginal = window.location;
-    const settingsClientSet = jest.fn();
-
-    beforeEach(async () => {
-      Object.defineProperty(window, 'location', {
-        value: {
-          reload: windowLocationReloadMock,
-        },
-        writable: true,
-      });
-
-      const { getByTestId, container } = render(<SettingsTab />, {
-        coreStart: {
-          settings: {
-            client: {
-              set: settingsClientSet,
-              getAll: () => uiSettings,
-            },
-          },
-        },
-      });
-
-      await waitFor(() => expect(container.querySelector('.euiLoadingSpinner')).toBeNull());
-
-      fireEvent.input(getByTestId(`management-settings-editField-${aiAssistantLogsIndexPattern}`), {
-        target: { value: 'observability-ai-assistant-*' },
-      });
-
-      fireEvent.click(getByTestId('observabilityAiAssistantManagementBottomBarActionsButton'));
-
-      await waitFor(() => expect(windowLocationReloadMock).toHaveBeenCalledTimes(1));
-    });
-
-    afterEach(() => {
-      window.location = windowLocationOriginal;
-    });
-
-    it('calls the settings client with correct args', async () => {
-      expect(settingsClientSet).toBeCalledWith(
-        aiAssistantLogsIndexPattern,
-        'observability-ai-assistant-*'
-      );
-    });
-  });
 });
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/ui_settings.tsx b/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/ui_settings.tsx
index 5be8456954d64..a8c20a641f042 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/ui_settings.tsx
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_management/public/routes/components/settings_tab/ui_settings.tsx
@@ -17,10 +17,10 @@ import { FieldRow, FieldRowProvider } from '@kbn/management-settings-components-
 import { EuiSpacer } from '@elastic/eui';
 import { isEmpty } from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { LogSourcesSettingSynchronisationInfo } from '@kbn/logs-data-access-plugin/public';
 import { useKibana } from '../../../hooks/use_kibana';
 
 const settingsKeys = [
-  aiAssistantLogsIndexPattern,
   aiAssistantSimulatedFunctionCalling,
   aiAssistantSearchConnectorIndexPattern,
   aiAssistantPreferredAIAssistantType,
@@ -31,7 +31,7 @@ export function UISettings() {
     docLinks,
     settings,
     notifications,
-    application: { capabilities },
+    application: { capabilities, getUrlForApp },
   } = useKibana().services;
 
   const { fields, handleFieldChange, unsavedChanges, saveAll, isSaving, cleanUnsavedChanges } =
@@ -84,6 +84,13 @@ export function UISettings() {
           </FieldRowProvider>
         );
       })}
+
+      <LogSourcesSettingSynchronisationInfo
+        isLoading={false}
+        logSourcesValue={settings.client.get(aiAssistantLogsIndexPattern)}
+        getUrlForApp={getUrlForApp}
+      />
+
       {!isEmpty(unsavedChanges) && (
         <BottomBarActions
           isLoading={isSaving}
diff --git a/x-pack/plugins/observability_solution/observability_ai_assistant_management/tsconfig.json b/x-pack/plugins/observability_solution/observability_ai_assistant_management/tsconfig.json
index 54a428c60315e..d8a03acbae61b 100644
--- a/x-pack/plugins/observability_solution/observability_ai_assistant_management/tsconfig.json
+++ b/x-pack/plugins/observability_solution/observability_ai_assistant_management/tsconfig.json
@@ -20,7 +20,8 @@
     "@kbn/management-settings-components-field-row",
     "@kbn/observability-shared-plugin",
     "@kbn/config-schema",
-    "@kbn/core-ui-settings-common"
+    "@kbn/core-ui-settings-common",
+    "@kbn/logs-data-access-plugin"
   ],
   "exclude": ["target/**/*"]
 }
diff --git a/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts b/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts
index 4982f0f408fcf..ad91fedeccdf1 100644
--- a/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts
+++ b/x-pack/plugins/observability_solution/synthetics/common/types/overview.ts
@@ -22,11 +22,16 @@ export interface OverviewTrend {
   locationId: string;
   data: TrendDatum[];
   count: number;
-  min: number;
-  max: number;
-  avg: number;
-  sum: number;
-  median: number;
+  min: number | null;
+  max: number | null;
+  avg: number | null;
+  sum: number | null;
+  median: number | null;
 }
 
-export type TrendTable = Record<string, OverviewTrend | null>;
+export type TrendTable = Record<string, OverviewTrend | null | 'loading'>;
+
+export interface GetTrendPayload {
+  trendStats: TrendTable;
+  batch: TrendRequest[];
+}
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
index 57c50bc54a5bf..4f8a97c6b8915 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item.tsx
@@ -141,26 +141,27 @@ export const MetricItem = ({
                 {
                   title: monitor.name,
                   subtitle: locationName,
-                  value: trendData?.median ?? 0,
+                  value: trendData !== 'loading' ? trendData?.median ?? 0 : 0,
                   trendShape: MetricTrendShape.Area,
-                  trend: trendData?.data ?? [],
-                  extra: trendData ? (
-                    <MetricItemExtra
-                      stats={{
-                        medianDuration: trendData.median,
-                        minDuration: trendData.min,
-                        maxDuration: trendData.max,
-                        avgDuration: trendData.avg,
-                      }}
-                    />
-                  ) : (
-                    <div>
-                      <FormattedMessage
-                        defaultMessage="Loading metrics"
-                        id="xpack.synthetics.overview.metricItem.loadingMessage"
+                  trend: trendData !== 'loading' && !!trendData?.data ? trendData.data : [],
+                  extra:
+                    trendData !== 'loading' && !!trendData ? (
+                      <MetricItemExtra
+                        stats={{
+                          medianDuration: trendData.median,
+                          minDuration: trendData.min,
+                          maxDuration: trendData.max,
+                          avgDuration: trendData.avg,
+                        }}
                       />
-                    </div>
-                  ),
+                    ) : trendData === 'loading' ? (
+                      <div>
+                        <FormattedMessage
+                          defaultMessage="Loading metrics"
+                          id="xpack.synthetics.overview.metricItem.loadingMessage"
+                        />
+                      </div>
+                    ) : undefined,
                   valueFormatter: (d: number) => formatDuration(d),
                   color: getColor(theme, monitor.isEnabled, status),
                   body: <MetricItemBody monitor={monitor} />,
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.test.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.test.tsx
new file mode 100644
index 0000000000000..4270d2a1967c9
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.test.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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';
+import { render } from '../../../../../utils/testing/rtl_helpers';
+import { MetricItemExtra } from './metric_item_extra';
+import { fireEvent, waitFor } from '@testing-library/dom';
+
+describe('<MetricItemExtra />', () => {
+  it('renders the tooltip when there is content', async () => {
+    const { getByText } = render(
+      <MetricItemExtra
+        stats={{ medianDuration: 10, avgDuration: 10, minDuration: 5, maxDuration: 15 }}
+      />
+    );
+    expect(getByText('Duration')).toBeInTheDocument();
+    fireEvent.mouseOver(getByText('Info'));
+    await waitFor(() => expect(getByText('Median duration of last 50 checks')).toBeInTheDocument());
+  });
+
+  it('renders the empty tooltip when there is no content', async () => {
+    const { getByText } = render(
+      <MetricItemExtra
+        stats={{
+          medianDuration: null,
+          avgDuration: null,
+          minDuration: null,
+          maxDuration: null,
+        }}
+      />
+    );
+    expect(getByText('Duration')).toBeInTheDocument();
+    fireEvent.mouseOver(getByText('Info'));
+    await waitFor(() => expect(getByText('Metric data is not available')).toBeInTheDocument());
+  });
+});
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.tsx
index 584124bf22747..2383c840dd088 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item_extra.tsx
@@ -14,10 +14,10 @@ export const MetricItemExtra = ({
   stats,
 }: {
   stats: {
-    medianDuration: number;
-    avgDuration: number;
-    minDuration: number;
-    maxDuration: number;
+    medianDuration: number | null;
+    avgDuration: number | null;
+    minDuration: number | null;
+    maxDuration: number | null;
   };
 }) => {
   const { avgDuration, minDuration, maxDuration } = stats;
@@ -36,20 +36,31 @@ export const MetricItemExtra = ({
         })}
       </EuiFlexItem>
       <EuiFlexItem grow={false} component="span">
-        <EuiIconTip
-          title={i18n.translate('xpack.synthetics.overview.duration.description', {
-            defaultMessage: 'Median duration of last 50 checks',
-          })}
-          content={i18n.translate('xpack.synthetics.overview.duration.description.values', {
-            defaultMessage: 'Avg: {avg}, Min: {min}, Max: {max}',
-            values: {
-              avg: formatDuration(avgDuration, { noSpace: true }),
-              min: formatDuration(minDuration, { noSpace: true }),
-              max: formatDuration(maxDuration, { noSpace: true }),
-            },
-          })}
-          position="top"
-        />
+        {avgDuration && minDuration && maxDuration ? (
+          <EuiIconTip
+            title={i18n.translate('xpack.synthetics.overview.duration.description', {
+              defaultMessage: 'Median duration of last 50 checks',
+            })}
+            content={i18n.translate('xpack.synthetics.overview.duration.description.values', {
+              defaultMessage: 'Avg: {avg}, Min: {min}, Max: {max}',
+              values: {
+                avg: formatDuration(avgDuration, { noSpace: true }),
+                min: formatDuration(minDuration, { noSpace: true }),
+                max: formatDuration(maxDuration, { noSpace: true }),
+              },
+            })}
+            position="top"
+          />
+        ) : (
+          <EuiIconTip
+            title={i18n.translate('xpack.synthetics.overview.metricsTooltip.noMetrics.title', {
+              defaultMessage: 'Metric data is not available',
+            })}
+            content={i18n.translate('xpack.synthetics.overview.metricsTooltip.noMetrics.content', {
+              defaultMessage: 'No metric data available for this monitor',
+            })}
+          />
+        )}
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
index 691556a94278e..ec453ba30c973 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/overview_grid.tsx
@@ -93,7 +93,7 @@ export const OverviewGrid = memo(() => {
   );
 
   useEffect(() => {
-    if (monitorsSortedByStatus.length && maxItem) {
+    if (monitorsSortedByStatus.length) {
       const batch: TrendRequest[] = [];
       const chunk = monitorsSortedByStatus.slice(0, (maxItem + 1) * ROW_COUNT);
       for (const item of chunk) {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/actions.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/actions.ts
index b5098aaa7cbf6..d7970f720e803 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/actions.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/actions.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import { createAction } from '@reduxjs/toolkit';
-import { TrendRequest, TrendTable } from '../../../../../common/types';
+import { GetTrendPayload, TrendRequest, TrendTable } from '../../../../../common/types';
 import { createAsyncAction } from '../utils/actions';
 
 import type {
@@ -39,6 +39,6 @@ export const refreshOverviewTrends = createAsyncAction<void, TrendTable, any>(
   'refreshOverviewTrendStats'
 );
 
-export const trendStatsBatch = createAsyncAction<TrendRequest[], TrendTable, any>(
+export const trendStatsBatch = createAsyncAction<TrendRequest[], GetTrendPayload, TrendRequest[]>(
   'batchTrendStats'
 );
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.test.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.test.ts
index ceef406ebbd1b..4a44b2d56c11c 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.test.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.test.ts
@@ -7,7 +7,7 @@
 
 import sagaHelper from 'redux-saga-testing';
 import { call, put, select } from 'redux-saga/effects';
-import { TrendKey, TrendRequest, TrendTable } from '../../../../../common/types';
+import { GetTrendPayload, TrendKey, TrendRequest, TrendTable } from '../../../../../common/types';
 import { TRENDS_CHUNK_SIZE, fetchTrendEffect, refreshTrends } from './effects';
 import { trendStatsBatch } from './actions';
 import { fetchOverviewTrendStats as trendsApi } from './api';
@@ -48,7 +48,9 @@ describe('overview effects', () => {
     });
 
     it('sends trends stats success action', (putResult) => {
-      expect(putResult).toEqual(put(trendStatsBatch.success(firstChunkResponse)));
+      expect(putResult).toEqual(
+        put(trendStatsBatch.success({ trendStats: firstChunkResponse, batch: firstChunk }))
+      );
     });
 
     it('calls the api for the second chunk', (callResult) => {
@@ -57,7 +59,9 @@ describe('overview effects', () => {
     });
 
     it('sends trends stats success action', (putResult) => {
-      expect(putResult).toEqual(put(trendStatsBatch.success(secondChunkResponse)));
+      expect(putResult).toEqual(
+        put(trendStatsBatch.success({ trendStats: secondChunkResponse, batch: secondChunk }))
+      );
     });
 
     it('terminates', (result) => {
@@ -111,6 +115,10 @@ describe('overview effects', () => {
       },
     };
 
+    const batch = [
+      { configId: 'monitor1', locationId: 'location', schedule: '3' },
+      { configId: 'monitor3', locationId: 'location', schedule: '3' },
+    ];
     const apiResponse: TrendTable = {
       monitor1: {
         configId: 'monitor1',
@@ -142,6 +150,11 @@ describe('overview effects', () => {
       },
     };
 
+    const successPayload: GetTrendPayload = {
+      trendStats: apiResponse,
+      batch,
+    };
+
     it('selects the trends in the table', (selectResult) => {
       expect(selectResult).toEqual(select(selectOverviewTrends));
 
@@ -161,18 +174,13 @@ describe('overview effects', () => {
     });
 
     it('calls the api for the first chunk', (callResult) => {
-      expect(callResult).toEqual(
-        call(trendsApi, [
-          { configId: 'monitor1', locationId: 'location', schedule: '3' },
-          { configId: 'monitor3', locationId: 'location', schedule: '3' },
-        ])
-      );
+      expect(callResult).toEqual(call(trendsApi, batch));
 
       return apiResponse;
     });
 
     it('sends trends stats success action', (putResult) => {
-      expect(putResult).toEqual(put(trendStatsBatch.success(apiResponse)));
+      expect(putResult).toEqual(put(trendStatsBatch.success(successPayload)));
     });
   });
 });
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.ts
index 930c729bde4f7..591527435afb8 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/effects.ts
@@ -6,7 +6,7 @@
  */
 
 import { debounce, call, takeLeading, takeEvery, put, select } from 'redux-saga/effects';
-import type { TrendTable } from '../../../../../common/types';
+import type { OverviewTrend, TrendTable } from '../../../../../common/types';
 import { fetchEffectFactory } from '../utils/fetch_effect';
 import { selectOverviewState, selectOverviewTrends } from './selectors';
 import {
@@ -41,11 +41,11 @@ export function* fetchTrendEffect(
       const chunk = action.payload.slice(Math.max(i - TRENDS_CHUNK_SIZE, 0), i);
       if (chunk.length > 0) {
         const trendStats = yield call(trendsApi, chunk);
-        yield put(trendStatsBatch.success(trendStats));
+        yield put(trendStatsBatch.success({ trendStats, batch: chunk }));
       }
     }
   } catch (e: any) {
-    yield put(trendStatsBatch.fail(e));
+    yield put(trendStatsBatch.fail(action.payload));
   }
 }
 
@@ -57,7 +57,6 @@ export function* refreshTrends(): Generator<unknown, void, any> {
   const existingTrends: TrendTable = yield select(selectOverviewTrends);
   const overviewState: MonitorOverviewState = yield select(selectOverviewState);
 
-  let acc = {};
   const keys = Object.keys(existingTrends);
   while (keys.length) {
     const chunk = keys
@@ -65,25 +64,25 @@ export function* refreshTrends(): Generator<unknown, void, any> {
       .filter(
         (key: string) =>
           existingTrends[key] !== null &&
+          existingTrends[key] !== 'loading' &&
           overviewState.data.monitors.some(
-            ({ configId }) => configId === existingTrends[key]!.configId
+            ({ configId }) => configId === (existingTrends[key] as OverviewTrend)!.configId
           )
       )
-      .map((key: string) => ({
-        configId: existingTrends[key]!.configId,
-        locationId: existingTrends[key]!.locationId,
-        schedule: overviewState.data.monitors.find(
-          ({ configId }) => configId === existingTrends[key]!.configId
-        )!.schedule,
-      }));
+      .map((key: string) => {
+        const trend = existingTrends[key] as OverviewTrend;
+        return {
+          configId: trend.configId,
+          locationId: trend.locationId,
+          schedule: overviewState.data.monitors.find(({ configId }) => configId === trend.configId)!
+            .schedule,
+        };
+      });
     if (chunk.length) {
-      const res = yield call(trendsApi, chunk);
-      acc = { ...acc, ...res };
+      const trendStats = yield call(trendsApi, chunk);
+      yield put(trendStatsBatch.success({ trendStats, batch: chunk }));
     }
   }
-  if (Object.keys(acc).length) {
-    yield put(trendStatsBatch.success(acc));
-  }
 }
 
 export function* refreshOverviewTrendStats() {
diff --git a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/index.ts b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/index.ts
index 74ad8bb7a2a57..fef85b1cbeb9d 100644
--- a/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/index.ts
+++ b/x-pack/plugins/observability_solution/synthetics/public/apps/synthetics/state/overview/index.ts
@@ -99,13 +99,25 @@ export const monitorOverviewReducer = createReducer(initialState, (builder) => {
     .addCase(trendStatsBatch.get, (state, action) => {
       for (const { configId, locationId } of action.payload) {
         if (!state.trendStats[configId + locationId]) {
+          state.trendStats[configId + locationId] = 'loading';
+        }
+      }
+    })
+    .addCase(trendStatsBatch.fail, (state, action) => {
+      for (const { configId, locationId } of action.payload) {
+        if (state.trendStats[configId + locationId] === 'loading') {
           state.trendStats[configId + locationId] = null;
         }
       }
     })
     .addCase(trendStatsBatch.success, (state, action) => {
-      for (const key of Object.keys(action.payload)) {
-        state.trendStats[key] = action.payload[key];
+      for (const key of Object.keys(action.payload.trendStats)) {
+        state.trendStats[key] = action.payload.trendStats[key];
+      }
+      for (const { configId, locationId } of action.payload.batch) {
+        if (!action.payload.trendStats[configId + locationId]) {
+          state.trendStats[configId + locationId] = null;
+        }
       }
     });
 });
diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.test.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.test.ts
new file mode 100644
index 0000000000000..bca95e35c7362
--- /dev/null
+++ b/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.test.ts
@@ -0,0 +1,126 @@
+/*
+ * 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 type { SyntheticsEsClient } from '../../lib';
+import { fetchTrends } from './overview_trends';
+
+const mockEsClient: Partial<SyntheticsEsClient> = {
+  msearch: jest.fn(),
+};
+
+describe('fetchTrends', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should return correctly formatted trend data with valid input', async () => {
+    const configs = {
+      config1: { locations: ['location1'], interval: 10 },
+    };
+
+    const stats = { avg: 15, min: 10, max: 20, sum: 30, count: 2 };
+
+    const mockResponse = {
+      responses: [
+        {
+          aggregations: {
+            byId: {
+              buckets: [
+                {
+                  key: 'config1',
+                  byLocation: {
+                    buckets: [
+                      {
+                        key: 'location1',
+                        last50: {
+                          buckets: [{ max: { value: 10 } }, { max: { value: 20 } }],
+                        },
+                        stats,
+                        median: { values: { '50.0': 18 } },
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+    };
+
+    (mockEsClient.msearch as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+    const result = await fetchTrends(mockEsClient as SyntheticsEsClient, configs);
+
+    const expectedOutput = {
+      config1location1: {
+        configId: 'config1',
+        locationId: 'location1',
+        data: [
+          { x: 0, y: 10 },
+          { x: 1, y: 20 },
+        ],
+        ...stats,
+        median: 18,
+      },
+    };
+
+    expect(result).toEqual(expectedOutput);
+    expect(mockEsClient.msearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should return an empty object when no responses are returned', async () => {
+    const configs = {
+      config1: { locations: ['location1'], interval: 10 },
+    };
+
+    const mockResponse = {
+      responses: [],
+    };
+
+    (mockEsClient.msearch as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+    const result = await fetchTrends(mockEsClient as SyntheticsEsClient, configs);
+
+    expect(result).toEqual({});
+    expect(mockEsClient.msearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle missing aggregations and return an empty object', async () => {
+    const configs = {
+      config1: { locations: ['location1'], interval: 10 },
+    };
+
+    const mockResponse = {
+      responses: [
+        {
+          aggregations: null,
+        },
+      ],
+    };
+
+    (mockEsClient.msearch as jest.Mock).mockResolvedValueOnce(mockResponse);
+
+    const result = await fetchTrends(mockEsClient as SyntheticsEsClient, configs);
+
+    expect(result).toEqual({});
+    expect(mockEsClient.msearch).toHaveBeenCalledTimes(1);
+  });
+
+  it('should throw an error if msearch fails', async () => {
+    const configs = {
+      config1: { locations: ['location1'], interval: 10 },
+    };
+
+    (mockEsClient.msearch as jest.Mock).mockRejectedValueOnce(new Error('Elasticsearch error'));
+
+    await expect(fetchTrends(mockEsClient as SyntheticsEsClient, configs)).rejects.toThrow(
+      'Elasticsearch error'
+    );
+    expect(mockEsClient.msearch).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.ts b/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.ts
index e3d7589160c02..d68fc71c59b11 100644
--- a/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.ts
+++ b/x-pack/plugins/observability_solution/synthetics/server/routes/overview_trends/overview_trends.ts
@@ -7,13 +7,50 @@
 
 import { ObjectType, schema } from '@kbn/config-schema';
 import { SYNTHETICS_API_URLS } from '../../../common/constants';
-import { TrendRequest, TrendTable } from '../../../common/types';
+import type { TrendRequest, TrendTable } from '../../../common/types';
 import { getFetchTrendsQuery, TrendsQuery } from './fetch_trends';
 import { SyntheticsRestApiRouteFactory } from '../types';
+import { SyntheticsEsClient } from '../../lib';
 
 export const getIntervalForCheckCount = (schedule: string, numChecks = 50) =>
   Number(schedule) * numChecks;
 
+export async function fetchTrends(
+  esClient: SyntheticsEsClient,
+  configs: Record<
+    string,
+    {
+      locations: string[];
+      interval: number;
+    }
+  >
+): Promise<TrendTable> {
+  const requests = Object.keys(configs).map(
+    (key) => getFetchTrendsQuery(key, configs[key].locations, configs[key].interval).body
+  );
+  const results = await esClient.msearch<TrendsQuery>(requests);
+
+  return results.responses.reduce((table, res): TrendTable => {
+    res.aggregations?.byId.buckets.map(({ key, byLocation }) => {
+      const nTable: TrendTable = {};
+      for (const location of byLocation.buckets) {
+        nTable[String(key) + String(location.key)] = {
+          configId: String(key),
+          locationId: String(location.key),
+          data: location.last50.buckets.map((durationBucket, x) => ({
+            x,
+            y: durationBucket.max.value!,
+          })),
+          ...location.stats,
+          median: location.median.values['50.0']!,
+        };
+      }
+      table = { ...table, ...nTable };
+    });
+    return table;
+  }, {});
+}
+
 export const createOverviewTrendsRoute: SyntheticsRestApiRouteFactory = () => ({
   method: 'POST',
   path: SYNTHETICS_API_URLS.OVERVIEW_TRENDS,
@@ -45,30 +82,6 @@ export const createOverviewTrendsRoute: SyntheticsRestApiRouteFactory = () => ({
       {}
     );
 
-    const requests = Object.keys(configs).map(
-      (key) => getFetchTrendsQuery(key, configs[key].locations, configs[key].interval).body
-    );
-    const results = await esClient.msearch<TrendsQuery>(requests);
-
-    let main = {};
-    for (const res of results.responses) {
-      res.aggregations?.byId.buckets.map(({ key, byLocation }) => {
-        const ret: Record<string, any> = {};
-        for (const location of byLocation.buckets) {
-          ret[String(key) + String(location.key)] = {
-            configId: key,
-            locationId: location.key,
-            data: location.last50.buckets.map((durationBucket, x) => ({
-              x,
-              y: durationBucket.max.value,
-            })),
-            ...location.stats,
-            median: location.median.values['50.0'],
-          };
-        }
-        main = { ...main, ...ret };
-      });
-    }
-    return main;
+    return fetchTrends(esClient, configs);
   },
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/local_storage/migrate_alert_page_controls.ts b/x-pack/plugins/security_solution/public/timelines/containers/local_storage/migrate_alert_page_controls.ts
index d3e17f47983d9..ac46d42035155 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/local_storage/migrate_alert_page_controls.ts
+++ b/x-pack/plugins/security_solution/public/timelines/containers/local_storage/migrate_alert_page_controls.ts
@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import type { ControlGroupRuntimeState } from '@kbn/controls-plugin/public';
-import type { DefaultControlState } from '@kbn/controls-plugin/public/react_controls/controls/types';
+import type { DefaultControlState, ControlGroupRuntimeState } from '@kbn/controls-plugin/common';
 import type { Storage } from '@kbn/kibana-utils-plugin/public';
 
 export const PAGE_FILTER_STORAGE_KEY = 'siem.default.pageFilters';
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
index aa80184194c94..83d317d73cf65 100644
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@@ -348,38 +348,15 @@
     "console.embeddableConsole.customScreenReaderAnnouncement": "Il y a un nouveau repère de région nommé {landmarkHeading} avec des commandes de niveau de page à la fin du document.",
     "console.embeddableConsole.landmarkHeading": "Console développeur",
     "console.embeddableConsole.title": "Console",
-    "console.exampleOutputTextarea": "Outils de développement de la console - Exemple d’éditeur",
-    "console.helpPage.keyboardCommands.autoIndentDescription": "Appliquer un retrait automatique à la requête en cours",
-    "console.helpPage.keyboardCommands.closeAutoCompleteMenuDescription": "Fermer le menu de saisie semi-automatique",
-    "console.helpPage.keyboardCommands.collapseAllScopesDescription": "Réduire tout sauf l’élément actif. Ajouter un décalage pour développer.",
-    "console.helpPage.keyboardCommands.collapseExpandCurrentScopeDescription": "Réduire/développer l’élément actif",
-    "console.helpPage.keyboardCommands.goToLineNumberDescription": "Aller au numéro de ligne",
-    "console.helpPage.keyboardCommands.jumpToPreviousNextRequestDescription": "Aller au début ou à la fin de la requête précédente/suivante",
-    "console.helpPage.keyboardCommands.openAutoCompleteDescription": "Ouvrir la saisie semi-automatique (même sans saisie)",
-    "console.helpPage.keyboardCommands.openDocumentationDescription": "Ouvrir la documentation pour la requête en cours",
-    "console.helpPage.keyboardCommands.selectCurrentlySelectedInAutoCompleteMenuDescription": "Sélectionner le terme en surbrillance ou le premier terme du menu de saisie semi-automatique",
-    "console.helpPage.keyboardCommands.submitRequestDescription": "Envoyer la requête",
-    "console.helpPage.keyboardCommands.switchFocusToAutoCompleteMenuDescription": "Permet d’accéder au menu de saisie semi-automatique. Utilisez les flèches pour sélectionner un terme.",
-    "console.helpPage.keyboardCommandsTitle": "Commandes du clavier",
-    "console.helpPage.learnAboutConsoleAndQueryDslText": "Découvrez plus d'informations sur {console} et {queryDsl}",
-    "console.helpPage.pageTitle": "Aide",
-    "console.helpPage.requestFormatDescription": "Vous pouvez saisir une ou plusieurs requêtes dans l'éditeur. La console est compatible avec les requêtes dans un format compact.",
-    "console.helpPage.requestFormatTitle": "Format de la requête",
     "console.historyPage.applyHistoryButtonLabel": "Appliquer",
     "console.historyPage.clearHistoryButtonLabel": "Effacer",
-    "console.historyPage.closehistoryButtonLabel": "Fermer",
-    "console.historyPage.itemOfRequestListAriaLabel": "Requête : {historyItem}",
-    "console.historyPage.noHistoryTextMessage": "Aucun historique disponible",
     "console.historyPage.pageTitle": "Historique",
-    "console.historyPage.requestListAriaLabel": "Historique des requêtes envoyées",
-    "console.inputTextarea": "Outils de développement de la console",
     "console.keyboardCommandActionLabel.autoIndent": "Appliquer les indentations",
     "console.keyboardCommandActionLabel.moveToLine": "Déplacer le curseur sur une ligne",
     "console.keyboardCommandActionLabel.moveToNextRequestEdge": "Accéder au début ou à la fin de la requête suivante",
     "console.keyboardCommandActionLabel.moveToPreviousRequestEdge": "Accéder au début ou à la fin de la requête précédente",
     "console.keyboardCommandActionLabel.openDocs": "Ouvrir la documentation",
     "console.keyboardCommandActionLabel.sendRequest": "Envoyer la requête",
-    "console.loadFromDataUriErrorMessage": "Impossible de charger les données du paramètre de requête load_from dans l'URL",
     "console.loadingError.buttonLabel": "Recharger la console",
     "console.loadingError.message": "Essayez de recharger pour obtenir les données les plus récentes.",
     "console.loadingError.title": "Impossible de charger la console",
@@ -389,7 +366,6 @@
     "console.notification.error.historyQuotaReachedMessage": "L'historique des requêtes est arrivé à saturation. Effacez l'historique de la console ou désactivez l'enregistrement de nouvelles requêtes.",
     "console.notification.error.noRequestSelectedTitle": "Aucune requête sélectionnée. Sélectionnez une requête en positionnant le curseur dessus.",
     "console.notification.error.unknownErrorTitle": "Erreur de requête inconnue",
-    "console.outputTextarea": "Outils de développement de la console - Sortie",
     "console.pageHeading": "Console",
     "console.requestInProgressBadgeText": "Requête en cours",
     "console.requestOptions.autoIndentButtonLabel": "Appliquer les indentations",
@@ -397,64 +373,27 @@
     "console.requestOptions.openDocumentationButtonLabel": "Afficher la documentation",
     "console.requestOptionsButtonAriaLabel": "Options de requête",
     "console.requestTimeElapasedBadgeTooltipContent": "Temps écoulé",
-    "console.sendRequestButtonTooltipAriaLabel": "Cliquer pour envoyer la requête",
-    "console.sendRequestButtonTooltipContent": "Cliquer pour envoyer la requête",
-    "console.settingsPage.accessibilityOverlayLabel": "Superposition d’accessibilité",
-    "console.settingsPage.autocompleteLabel": "Saisie semi-automatique",
-    "console.settingsPage.cancelButtonLabel": "Annuler",
     "console.settingsPage.dataStreamsLabelText": "Flux de données",
     "console.settingsPage.enableAccessibilityOverlayLabel": "Activer la superposition d’accessibilité",
     "console.settingsPage.enableKeyboardShortcutsLabel": "Activer les raccourcis clavier",
     "console.settingsPage.fieldsLabelText": "Champs",
     "console.settingsPage.fontSizeLabel": "Taille de la police",
-    "console.settingsPage.historyLabel": "Historique",
     "console.settingsPage.indicesAndAliasesLabelText": "Index et alias",
-    "console.settingsPage.jsonSyntaxLabel": "Syntaxe JSON",
-    "console.settingsPage.keyboardShortcutsLabel": "Raccourcis clavier",
     "console.settingsPage.pageTitle": "Paramètres de la console",
     "console.settingsPage.refreshButtonLabel": "Actualiser les suggestions de saisie semi-automatique",
-    "console.settingsPage.refreshingDataDescription": "La console actualise les suggestions de saisie semi-automatique en interrogeant Elasticsearch. Utilisez des actualisations moins fréquentes pour réduire les coûts de bande passante.",
     "console.settingsPage.refreshingDataLabel": "Fréquence d'actualisation",
     "console.settingsPage.refreshInterval.everyHourTimeInterval": "Toutes les heures",
     "console.settingsPage.refreshInterval.everyNMinutesTimeInterval": "Toutes les {value} {value, plural, one {minute} other {minutes}}",
     "console.settingsPage.refreshInterval.onceTimeInterval": "Une fois, au chargement de la console",
-    "console.settingsPage.saveButtonLabel": "Enregistrer",
     "console.settingsPage.saveRequestsToHistoryLabel": "Enregistrer les requêtes dans l'historique",
     "console.settingsPage.templatesLabelText": "Modèles",
     "console.settingsPage.tripleQuotesMessage": "Utiliser des guillemets triples dans la sortie",
-    "console.settingsPage.wrapLongLinesLabelText": "Formater les longues lignes",
-    "console.splitPanel.adjustPanelSizeAriaLabel": "Utilisez les flèches gauche et droite pour ajuster la taille des panneaux.",
-    "console.topNav.helpTabDescription": "Aide",
-    "console.topNav.helpTabLabel": "Aide",
     "console.topNav.historyTabDescription": "Historique",
     "console.topNav.historyTabLabel": "Historique",
-    "console.topNav.settingsTabDescription": "Paramètres",
-    "console.topNav.settingsTabLabel": "Paramètres",
-    "console.topNav.variablesTabDescription": "Variables",
-    "console.topNav.variablesTabLabel": "Variables",
     "console.variablesPage.addButtonLabel": "Ajouter",
-    "console.variablesPage.cancelButtonLabel": "Annuler",
-    "console.variablesPage.descriptionText": "Définir les variables et les utiliser dans vos requêtes sous la forme {variable}.",
-    "console.variablesPage.descriptionText.variableNameText": "{variableName}",
     "console.variablesPage.pageTitle": "Variables",
-    "console.variablesPage.saveButtonLabel": "Enregistrer",
     "console.variablesPage.variablesTable.columns.valueHeader": "Valeur",
     "console.variablesPage.variablesTable.columns.variableHeader": "Nom de la variable",
-    "console.variablesPage.variablesTable.valueInput.ariaLabel": "Valeur de la variable",
-    "console.variablesPage.variablesTable.variableInput.ariaLabel": "Nom de la variable",
-    "console.variablesPage.variablesTable.variableInputError.validCharactersText": "Seuls les lettres, les chiffres et les traits de soulignement sont autorisés",
-    "console.welcomePage.addCommentsDescription": "Pour ajouter un commentaire d'une seule ligne, utilisez {hash} ou {doubleSlash}. Pour un commentaire de plusieurs lignes, marquez le début avec {slashAsterisk} et la fin avec {asteriskSlash}.",
-    "console.welcomePage.addCommentsTitle": "Ajouter des commentaires dans le corps des requêtes",
-    "console.welcomePage.closeButtonLabel": "Rejeter",
-    "console.welcomePage.kibanaAPIsDescription": "Pour envoyer une requête à l'API Kibana, faites précéder le chemin de {kibanaApiPrefix}.",
-    "console.welcomePage.pageTitle": "Envoyer des requêtes avec la Console",
-    "console.welcomePage.quickIntroDescription": "La Console comprend les commandes d'une syntaxe de type cURL. Voici une requête envoyée à l'API _search d'Elasticsearch.",
-    "console.welcomePage.sendMultipleRequestsDescription": "Sélectionnez plusieurs requêtes et envoyez-les ensemble. Vous recevrez des réponses à toutes vos requêtes, qu'elles réussissent ou qu'elles échouent.",
-    "console.welcomePage.sendMultipleRequestsTitle": "Envoyer plusieurs requêtes",
-    "console.welcomePage.useVariables.step1": "Cliquez sur {variableText}, puis saisissez le nom et la valeur de la variable.",
-    "console.welcomePage.useVariables.step2": "Invoquez les variables dans les chemins et corps de vos requêtes autant de fois que souhaité.",
-    "console.welcomePage.useVariablesDescription": "Définissez les variables dans la Console, puis utilisez-les dans vos requêtes sous la forme {variableName}.",
-    "console.welcomePage.useVariablesTitle": "Réutiliser les valeurs avec les variables",
     "contentManagement.contentEditor.activity.createdByLabelText": "Créé par",
     "contentManagement.contentEditor.activity.lastUpdatedByDateTime": "le {dateTime}",
     "contentManagement.contentEditor.activity.lastUpdatedByLabelText": "Dernière mise à jour par",
@@ -520,11 +459,6 @@
     "controls.controlGroup.floatingActions.clearTitle": "Effacer",
     "controls.controlGroup.floatingActions.editTitle": "Modifier",
     "controls.controlGroup.floatingActions.removeTitle": "Supprimer",
-    "controls.controlGroup.invalidControlWarning.dismissButtonLabel": "Rejeter",
-    "controls.controlGroup.invalidControlWarning.suppressTourLabel": "Ne plus afficher",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.default": "Certaines sélections ne donnent aucun résultat. Essayez de changer les sélections.",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.rangeSlider": "La plage sélectionnée ne donne aucun résultat. Essayez de changer la plage.",
-    "controls.controlGroup.invalidControlWarning.tourStepTitle.default": "Les sélections non valides ne sont plus ignorées",
     "controls.controlGroup.manageControl.cancelTitle": "Annuler",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupDescription": "Paramètres personnalisés pour votre contrôle {controlType}.",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupTitle": "Paramètres {controlType}",
@@ -545,7 +479,6 @@
     "controls.controlGroup.manageControl.displaySettings.widthInputTitle": "Largeur minimale",
     "controls.controlGroup.manageControl.editFlyoutTitle": "Modifier le contrôle",
     "controls.controlGroup.manageControl.saveChangesTitle": "Enregistrer et fermer",
-    "controls.controlGroup.management.addControl": "Ajouter un contrôle",
     "controls.controlGroup.management.applyButtonTooltip.disabled": "Aucune nouvelle sélection à appliquer",
     "controls.controlGroup.management.applyButtonTooltip.enabled": "Appliquer les sélections",
     "controls.controlGroup.management.delete": "Supprimer le contrôle",
@@ -555,10 +488,6 @@
     "controls.controlGroup.management.delete.deleteTitle": "Supprimer le contrôle ?",
     "controls.controlGroup.management.delete.sub": "Une fois supprimés, les contrôles ne peuvent pas être récupérés.",
     "controls.controlGroup.management.deleteAll": "Tout supprimer",
-    "controls.controlGroup.management.deleteNew.cancel": "Annuler",
-    "controls.controlGroup.management.deleteNew.confirm": "Supprimer le contrôle",
-    "controls.controlGroup.management.deleteNew.sub": "Les modifications apportées à ce contrôle seront ignorées. Voulez-vous vraiment continuer ?",
-    "controls.controlGroup.management.deleteNew.title": "Supprimer le nouveau contrôle",
     "controls.controlGroup.management.discard.cancel": "Annuler",
     "controls.controlGroup.management.discard.confirm": "Abandonner les modifications",
     "controls.controlGroup.management.discard.sub": "Les modifications apportées à ce contrôle seront ignorées. Voulez-vous vraiment continuer ?",
@@ -573,7 +502,6 @@
     "controls.controlGroup.management.labelPosition.designSwitchLegend": "Modifier la position de l'étiquette entre Aligné et Au-dessus",
     "controls.controlGroup.management.labelPosition.inline": "Aligné",
     "controls.controlGroup.management.labelPosition.title": "Position de l'étiquette",
-    "controls.controlGroup.management.layout.auto": "Auto",
     "controls.controlGroup.management.layout.controlWidthLegend": "Modifier la taille du contrôle",
     "controls.controlGroup.management.layout.large": "Large",
     "controls.controlGroup.management.layout.medium": "Moyenne",
@@ -583,8 +511,6 @@
     "controls.controlGroup.management.showApplySelections.tooltip": "Si cette option est désactivée, les sélections de contrôle ne seront appliquées qu'après avoir cliqué sur \"Appliquer\".",
     "controls.controlGroup.management.validate.title": "Valider les sélections utilisateur",
     "controls.controlGroup.management.validate.tooltip": "Mettez en évidence les sélections de contrôle qui n'aboutissent à aucune donnée.",
-    "controls.controlGroup.timeSlider.title": "Curseur temporel",
-    "controls.controlGroup.title": "Groupe de contrôle",
     "controls.frame.error.message": "Une erreur s'est produite. Voir plus",
     "controls.optionsList.control.dateSeparator": ";  ",
     "controls.optionsList.control.excludeExists": "NE PAS",
@@ -593,7 +519,6 @@
     "controls.optionsList.control.placeholder": "N'importe lequel",
     "controls.optionsList.control.separator": ", ",
     "controls.optionsList.controlAndPopover.exists": "{negate, plural, one {Existe} other {Existent}}",
-    "controls.optionsList.description": "Ajoutez un menu pour la sélection de valeurs de champ.",
     "controls.optionsList.displayName": "Liste des options",
     "controls.optionsList.editor.additionalSettingsTitle": "Paramètres supplémentaires",
     "controls.optionsList.editor.exactSearchLabel": "Exact",
@@ -608,7 +533,6 @@
     "controls.optionsList.editor.singleSelectLabel": "N’autoriser qu’une sélection unique",
     "controls.optionsList.editor.wildcardSearchLabel": "Contient",
     "controls.optionsList.editor.wildcardSearchTooltip": "Correspond aux valeurs qui contiennent la chaîne de recherche donnée. Les résultats peuvent prendre plus de temps à s'afficher.",
-    "controls.optionsList.errors.fieldNotFound": "Impossible de localiser le champ : {fieldName}",
     "controls.optionsList.popover.allOptionsTitle": "Afficher toutes les options",
     "controls.optionsList.popover.allowExpensiveQueriesWarning": "Le paramètre de cluster permettant d'autoriser les requêtes lourdes est désactivé, impliquant la désactivation d'autres fonctionnalités.",
     "controls.optionsList.popover.ariaLabel": "Fenêtre contextuelle pour le contrôle {fieldName}",
@@ -645,13 +569,8 @@
     "controls.optionsList.popover.suggestionsAriaLabel": "{optionCount, plural, one {option disponible} other {options disponibles}} pour {fieldName}",
     "controls.optionsList.popover.wildcardSearchPlaceholder": "Contient...",
     "controls.rangeSlider.control.invalidSelectionWarningLabel": "La plage sélectionnée n'a donné aucun résultat.",
-    "controls.rangeSlider.description": "Ajoutez un contrôle pour la sélection d'une plage de valeurs de champ.",
-    "controls.rangeSlider.displayName": "Curseur de plage",
     "controls.rangeSlider.editor.stepSizeTitle": "Taille de l'étape",
-    "controls.rangeSlider.errors.fieldNotFound": "Impossible de localiser le champ : {fieldName}",
     "controls.rangeSlider.popover.noAvailableDataHelpText": "Il n'y a aucune donnée à afficher. Ajustez la plage temporelle et les filtres.",
-    "controls.timeSlider.description": "Ajouter un curseur pour la sélection d'une plage temporelle",
-    "controls.timeSlider.displayName": "Curseur temporel",
     "controls.timeSlider.nextLabel": "Fenêtre temporelle suivante",
     "controls.timeSlider.pauseLabel": "Pause",
     "controls.timeSlider.playButtonTooltip.disabled": "\"Appliquer automatiquement les sélections\" est désactivé dans les paramètres du contrôle.",
@@ -764,8 +683,8 @@
     "core.euiDataGridCell.focusTrapEnterPrompt": "Appuyez sur Entrée pour interagir avec le contenu de cette cellule.",
     "core.euiDataGridCell.position": "{columnId}, colonne {col}, ligne {row}",
     "core.euiDataGridCellActions.expandButtonTitle": "Cliquez ou appuyez sur Entrée pour interagir avec le contenu de la cellule.",
-    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.",
     "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}. Cliquez pour afficher les actions d'en-tête de colonne",
+    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "Pour naviguer dans la liste des actions de la colonne, appuyez sur la touche Tab ou sur les flèches vers le haut et vers le bas.",
     "core.euiDataGridHeaderCell.sortedByAscendingFirst": "Trié par {columnId}, ordre croissant",
     "core.euiDataGridHeaderCell.sortedByAscendingMultiple": ", puis par {columnId}, ordre croissant",
     "core.euiDataGridHeaderCell.sortedByAscendingSingle": "Trié par ordre croissant",
@@ -32967,7 +32886,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.goToFeatureControlsButtonLabel": "Aller dans les espaces",
     "xpack.observabilityAiAssistantManagement.settingsPage.h2.settingsLabel": "Paramètres",
     "xpack.observabilityAiAssistantManagement.settingsPage.knowledgeBaseLabel": "Base de connaissances",
-    "xpack.observabilityAiAssistantManagement.settingsPage.logIndexPatternDescription": "Modèle d'index utilisé par l'assistant d'IA lorsqu'il recherche des logs. Les logs sont classés par catégories et utilisés pour l'analyse des causes premières",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnector": "Connecteurs Search",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnectorIndexPatternDescription": "Modèle d'index utilisé par l’assistant d’IA lors de l'interrogation des index des connecteurs de recherche (une partie de la base de connaissances). L'index de chaque connecteur de recherche sera interrogé par défaut",
     "xpack.observabilityAiAssistantManagement.settingsPage.settingsLabel": "Paramètres",
@@ -32975,7 +32893,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.showAIAssistantDescriptionLabel": "Affichez/masquez le bouton de l'Assistant d'IA et les informations contextuelles dans les applications d'Observability en cochant ou en décochant la fonctionnalité Assistant d'IA dans Espaces > <your space> > Fonctionnalités.",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingDescription": "<em>[version d'évaluation technique]</em> Utilisez l'appel de fonction simulé. L’appel de fonction simulé ne nécessite pas la prise en charge de l'API pour les fonctions ou les outils, mais il peut réduire les performances. L'appel de fonction simulé est actuellement toujours activé pour les connecteurs non-OpenAI, indépendamment de ce paramètre.",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingLabel": "Simuler un appel de fonction",
-    "xpack.observabilityAiAssistantManagement.settingsTab.h3.logIndexPatternLabel": "Modèle d'indexation des logs",
     "xpack.observabilityAiAssistantManagement.settingsTab.h3.searchConnectorIndexPatternLabel": "Modèle d'indexation de connecteur de recherche",
     "xpack.observabilityAiAssistantManagement.span.expandRowLabel": "Développer la ligne",
     "xpack.observabilityLogsExplorer.alertsPopover.buttonLabel": "Alertes",
@@ -47895,4 +47812,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "Ce champ est requis.",
     "xpack.watcher.watcherDescription": "Détectez les modifications survenant dans vos données en créant, gérant et monitorant des alertes."
   }
-}
\ No newline at end of file
+}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 9280f3b99b867..3eaf556485210 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -348,38 +348,15 @@
     "console.embeddableConsole.customScreenReaderAnnouncement": "ドキュメントの最後には、新しいリージョンランドマーク{landmarkHeading}とページレベルのコントロールがあります。",
     "console.embeddableConsole.landmarkHeading": "開発者コンソール",
     "console.embeddableConsole.title": "コンソール",
-    "console.exampleOutputTextarea": "開発ツールコンソールエディターの例",
-    "console.helpPage.keyboardCommands.autoIndentDescription": "現在のリクエストを自動インデントします",
-    "console.helpPage.keyboardCommands.closeAutoCompleteMenuDescription": "自動入力メニューを閉じます",
-    "console.helpPage.keyboardCommands.collapseAllScopesDescription": "現在のスコープを除きすべてのスコープを最小表示します。シフトを追加して拡張します。",
-    "console.helpPage.keyboardCommands.collapseExpandCurrentScopeDescription": "現在のスコープを最小/拡張表示します。",
-    "console.helpPage.keyboardCommands.goToLineNumberDescription": "行番号に移動",
-    "console.helpPage.keyboardCommands.jumpToPreviousNextRequestDescription": "前/次のリクエストの開始または終了に移動します。",
-    "console.helpPage.keyboardCommands.openAutoCompleteDescription": "自動入力を開きます（未入力時を含む）",
-    "console.helpPage.keyboardCommands.openDocumentationDescription": "現在のリクエストのドキュメントを開きます",
-    "console.helpPage.keyboardCommands.selectCurrentlySelectedInAutoCompleteMenuDescription": "現在の選択項目または自動入力メニューで最も使用されている用語を選択します",
-    "console.helpPage.keyboardCommands.submitRequestDescription": "リクエストを送信します",
-    "console.helpPage.keyboardCommands.switchFocusToAutoCompleteMenuDescription": "自動入力メニューに焦点を切り替えます。矢印を使用してさらに用語を選択します",
-    "console.helpPage.keyboardCommandsTitle": "キーボードコマンド",
-    "console.helpPage.learnAboutConsoleAndQueryDslText": "{console}および{queryDsl}の詳細",
-    "console.helpPage.pageTitle": "ヘルプ",
-    "console.helpPage.requestFormatDescription": "エディターに1つ以上のリクエストを入力できます。コンソールはコンパクトなフォーマットのリクエストを理解できます。",
-    "console.helpPage.requestFormatTitle": "リクエストフォーマット",
     "console.historyPage.applyHistoryButtonLabel": "適用",
     "console.historyPage.clearHistoryButtonLabel": "クリア",
-    "console.historyPage.closehistoryButtonLabel": "閉じる",
-    "console.historyPage.itemOfRequestListAriaLabel": "リクエスト：{historyItem}",
-    "console.historyPage.noHistoryTextMessage": "履歴がありません",
     "console.historyPage.pageTitle": "履歴",
-    "console.historyPage.requestListAriaLabel": "リクエストの送信履歴",
-    "console.inputTextarea": "開発ツールコンソール",
     "console.keyboardCommandActionLabel.autoIndent": "インデントを適用",
     "console.keyboardCommandActionLabel.moveToLine": "カーソルを行に移動",
     "console.keyboardCommandActionLabel.moveToNextRequestEdge": "次のリクエスト開始または終了に移動",
     "console.keyboardCommandActionLabel.moveToPreviousRequestEdge": "前のリクエスト開始または終了に移動",
     "console.keyboardCommandActionLabel.openDocs": "ドキュメントを開く",
     "console.keyboardCommandActionLabel.sendRequest": "リクエストの送信",
-    "console.loadFromDataUriErrorMessage": "URLのload_fromクエリーパラメーターからデータを読み込めません",
     "console.loadingError.buttonLabel": "コンソールの再読み込み",
     "console.loadingError.message": "最新データを取得するために再読み込みを試してください。",
     "console.loadingError.title": "コンソールを読み込めません",
@@ -389,7 +366,6 @@
     "console.notification.error.historyQuotaReachedMessage": "リクエスト履歴が満杯です。コンソール履歴を消去するか、新しいリクエストの保存を無効にしてください。",
     "console.notification.error.noRequestSelectedTitle": "リクエストを選択していません。リクエストの中にカーソルを置いて選択します。",
     "console.notification.error.unknownErrorTitle": "不明なリクエストエラー",
-    "console.outputTextarea": "開発ツールコンソール出力",
     "console.pageHeading": "コンソール",
     "console.requestInProgressBadgeText": "リクエストが進行中",
     "console.requestOptions.autoIndentButtonLabel": "インデントを適用",
@@ -397,64 +373,27 @@
     "console.requestOptions.openDocumentationButtonLabel": "ドキュメンテーションを表示",
     "console.requestOptionsButtonAriaLabel": "リクエストオプション",
     "console.requestTimeElapasedBadgeTooltipContent": "経過時間",
-    "console.sendRequestButtonTooltipAriaLabel": "クリックしてリクエストを送信",
-    "console.sendRequestButtonTooltipContent": "クリックしてリクエストを送信",
-    "console.settingsPage.accessibilityOverlayLabel": "アクセシビリティオーバーレイ",
-    "console.settingsPage.autocompleteLabel": "自動入力",
-    "console.settingsPage.cancelButtonLabel": "キャンセル",
     "console.settingsPage.dataStreamsLabelText": "データストリーム",
     "console.settingsPage.enableAccessibilityOverlayLabel": "アクセシビリティオーバーレイを有効にする",
     "console.settingsPage.enableKeyboardShortcutsLabel": "キーボードショートカットを有効にする",
     "console.settingsPage.fieldsLabelText": "フィールド",
     "console.settingsPage.fontSizeLabel": "フォントサイズ",
-    "console.settingsPage.historyLabel": "履歴",
     "console.settingsPage.indicesAndAliasesLabelText": "インデックスとエイリアス",
-    "console.settingsPage.jsonSyntaxLabel": "JSON構文",
-    "console.settingsPage.keyboardShortcutsLabel": "キーボードショートカット",
     "console.settingsPage.pageTitle": "コンソール設定",
     "console.settingsPage.refreshButtonLabel": "自動入力候補の更新",
-    "console.settingsPage.refreshingDataDescription": "コンソールは、Elasticsearchをクエリーして自動入力候補を更新します。帯域幅コストを削減するには、更新頻度を下げます。",
     "console.settingsPage.refreshingDataLabel": "更新頻度",
     "console.settingsPage.refreshInterval.everyHourTimeInterval": "毎時",
     "console.settingsPage.refreshInterval.everyNMinutesTimeInterval": "{value} {value, plural, other  {分}}ごと",
     "console.settingsPage.refreshInterval.onceTimeInterval": "コンソールの読み込み時に1回",
-    "console.settingsPage.saveButtonLabel": "保存",
     "console.settingsPage.saveRequestsToHistoryLabel": "リクエストを履歴に保存します",
     "console.settingsPage.templatesLabelText": "テンプレート",
     "console.settingsPage.tripleQuotesMessage": "出力では三重引用符を使用します",
-    "console.settingsPage.wrapLongLinesLabelText": "長い行を改行",
-    "console.splitPanel.adjustPanelSizeAriaLabel": "左右のキーを押してパネルサイズを調整します",
-    "console.topNav.helpTabDescription": "ヘルプ",
-    "console.topNav.helpTabLabel": "ヘルプ",
     "console.topNav.historyTabDescription": "履歴",
     "console.topNav.historyTabLabel": "履歴",
-    "console.topNav.settingsTabDescription": "設定",
-    "console.topNav.settingsTabLabel": "設定",
-    "console.topNav.variablesTabDescription": "変数",
-    "console.topNav.variablesTabLabel": "変数",
     "console.variablesPage.addButtonLabel": "追加",
-    "console.variablesPage.cancelButtonLabel": "キャンセル",
-    "console.variablesPage.descriptionText": "変数を定義し、{variable}の形式でリクエストで使用します。",
-    "console.variablesPage.descriptionText.variableNameText": "{variableName}",
     "console.variablesPage.pageTitle": "変数",
-    "console.variablesPage.saveButtonLabel": "保存",
     "console.variablesPage.variablesTable.columns.valueHeader": "値",
     "console.variablesPage.variablesTable.columns.variableHeader": "変数名",
-    "console.variablesPage.variablesTable.valueInput.ariaLabel": "変数値",
-    "console.variablesPage.variablesTable.variableInput.ariaLabel": "変数名",
-    "console.variablesPage.variablesTable.variableInputError.validCharactersText": "文字、数字、アンダースコアのみを使用できます。",
-    "console.welcomePage.addCommentsDescription": "1行のコメントを追加するには、{hash}または{doubleSlash}を使用します。複数行のコメントの場合は、先頭に{slashAsterisk}を付け、末尾に{asteriskSlash}を付けます。",
-    "console.welcomePage.addCommentsTitle": "リクエスト本文にコメントを追加",
-    "console.welcomePage.closeButtonLabel": "閉じる",
-    "console.welcomePage.kibanaAPIsDescription": "リクエストをKibana APIに送信するには、パスに{kibanaApiPrefix}のプレフィックスを付けます。",
-    "console.welcomePage.pageTitle": "コンソールでリクエストを送信",
-    "console.welcomePage.quickIntroDescription": "コンソールはcURLのような構文でコマンドを解釈します。次に、Elasticsearch _search APIへのリクエストを示します。",
-    "console.welcomePage.sendMultipleRequestsDescription": "複数のリクエストを選択し、まとめて送信します。成否に関係なく、すべてのリクエストへの応答を受信します。",
-    "console.welcomePage.sendMultipleRequestsTitle": "複数のリクエストを送信",
-    "console.welcomePage.useVariables.step1": "{variableText}をクリックして、変数名と値を入力します。",
-    "console.welcomePage.useVariables.step2": "任意の回数だけリクエストのパスと本文で変数を参照します。",
-    "console.welcomePage.useVariablesDescription": "コンソールで変数を定義し、{variableName}の形式でリクエストで使用します。",
-    "console.welcomePage.useVariablesTitle": "変数で値を再利用",
     "contentManagement.contentEditor.activity.createdByLabelText": "作成者",
     "contentManagement.contentEditor.activity.lastUpdatedByDateTime": "{dateTime}に",
     "contentManagement.contentEditor.activity.lastUpdatedByLabelText": "最終更新者",
@@ -522,11 +461,6 @@
     "controls.controlGroup.floatingActions.clearTitle": "クリア",
     "controls.controlGroup.floatingActions.editTitle": "編集",
     "controls.controlGroup.floatingActions.removeTitle": "削除",
-    "controls.controlGroup.invalidControlWarning.dismissButtonLabel": "閉じる",
-    "controls.controlGroup.invalidControlWarning.suppressTourLabel": "今後表示しない",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.default": "一部の選択項目では結果が返されていません。選択項目を変更してください。",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.rangeSlider": "選択した範囲では結果が返されていません。範囲を変更してください。",
-    "controls.controlGroup.invalidControlWarning.tourStepTitle.default": "無効な選択項目は無視されません",
     "controls.controlGroup.manageControl.cancelTitle": "キャンセル",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupDescription": "{controlType} コントロールのカスタム設定",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupTitle": "{controlType}設定",
@@ -547,7 +481,6 @@
     "controls.controlGroup.manageControl.displaySettings.widthInputTitle": "最小幅",
     "controls.controlGroup.manageControl.editFlyoutTitle": "コントロールを編集",
     "controls.controlGroup.manageControl.saveChangesTitle": "保存して閉じる",
-    "controls.controlGroup.management.addControl": "コントロールを追加",
     "controls.controlGroup.management.applyButtonTooltip.disabled": "適用する新しい選択項目がありません",
     "controls.controlGroup.management.applyButtonTooltip.enabled": "選択項目を適用",
     "controls.controlGroup.management.delete": "コントロールを削除",
@@ -557,10 +490,6 @@
     "controls.controlGroup.management.delete.deleteTitle": "コントロールを削除しますか?",
     "controls.controlGroup.management.delete.sub": "コントロールを削除した後は、復元できません。",
     "controls.controlGroup.management.deleteAll": "すべて削除",
-    "controls.controlGroup.management.deleteNew.cancel": "キャンセル",
-    "controls.controlGroup.management.deleteNew.confirm": "コントロールを破棄",
-    "controls.controlGroup.management.deleteNew.sub": "このコントロールの変更は破棄されます。続行しますか？",
-    "controls.controlGroup.management.deleteNew.title": "新しいコントロールを破棄",
     "controls.controlGroup.management.discard.cancel": "キャンセル",
     "controls.controlGroup.management.discard.confirm": "変更を破棄",
     "controls.controlGroup.management.discard.sub": "このコントロールの変更は破棄されます。続行しますか？",
@@ -575,7 +504,6 @@
     "controls.controlGroup.management.labelPosition.designSwitchLegend": "インラインと上記との間でラベル位置を切り替える",
     "controls.controlGroup.management.labelPosition.inline": "インライン",
     "controls.controlGroup.management.labelPosition.title": "ラベル位置",
-    "controls.controlGroup.management.layout.auto": "自動",
     "controls.controlGroup.management.layout.controlWidthLegend": "コントロールサイズを変更",
     "controls.controlGroup.management.layout.large": "大",
     "controls.controlGroup.management.layout.medium": "中",
@@ -585,8 +513,6 @@
     "controls.controlGroup.management.showApplySelections.tooltip": "無効な場合、コントロール選択は、［適用］をクリックした後にのみ適用されます。",
     "controls.controlGroup.management.validate.title": "ユーザー選択を検証",
     "controls.controlGroup.management.validate.tooltip": "データがないコントロール選択項目をハイライト表示します。",
-    "controls.controlGroup.timeSlider.title": "時間スライダー",
-    "controls.controlGroup.title": "コントロールグループ",
     "controls.frame.error.message": "エラーが発生しました。他を表示",
     "controls.optionsList.control.dateSeparator": ";  ",
     "controls.optionsList.control.excludeExists": "DOES NOT",
@@ -595,7 +521,6 @@
     "controls.optionsList.control.placeholder": "すべて",
     "controls.optionsList.control.separator": "、",
     "controls.optionsList.controlAndPopover.exists": "{negate, plural, other {存在します}}",
-    "controls.optionsList.description": "フィールド値を選択するメニューを追加",
     "controls.optionsList.displayName": "オプションリスト",
     "controls.optionsList.editor.additionalSettingsTitle": "追加設定",
     "controls.optionsList.editor.exactSearchLabel": "完全一致",
@@ -610,7 +535,6 @@
     "controls.optionsList.editor.singleSelectLabel": "1つの項目の選択のみを許可",
     "controls.optionsList.editor.wildcardSearchLabel": "を含む",
     "controls.optionsList.editor.wildcardSearchTooltip": "特定の検索文字列を含む値と一致します。結果が表示されるまでに時間がかかる場合があります。",
-    "controls.optionsList.errors.fieldNotFound": "フィールド{fieldName}が見つかりませんでした",
     "controls.optionsList.popover.allOptionsTitle": "すべてのオプションを表示",
     "controls.optionsList.popover.allowExpensiveQueriesWarning": "コストがかかるクエリーを許可するクラスター設定がオフであるため、一部の機能が無効です。",
     "controls.optionsList.popover.ariaLabel": "{fieldName}コントロールのポップオーバー",
@@ -647,13 +571,8 @@
     "controls.optionsList.popover.suggestionsAriaLabel": "{fieldName}の使用可能な{optionCount, plural, other {オプション}}",
     "controls.optionsList.popover.wildcardSearchPlaceholder": "...を含む",
     "controls.rangeSlider.control.invalidSelectionWarningLabel": "選択した範囲では結果が返されません。",
-    "controls.rangeSlider.description": "フィールド値の範囲を選択するためのコントロールを追加",
-    "controls.rangeSlider.displayName": "範囲スライダー",
     "controls.rangeSlider.editor.stepSizeTitle": "ステップサイズ",
-    "controls.rangeSlider.errors.fieldNotFound": "フィールド{fieldName}が見つかりませんでした",
     "controls.rangeSlider.popover.noAvailableDataHelpText": "表示するデータがありません。時間範囲とフィルターを調整します。",
-    "controls.timeSlider.description": "時間範囲を選択するためのスライダーを追加",
-    "controls.timeSlider.displayName": "時間スライダー",
     "controls.timeSlider.nextLabel": "次の時間ウィンドウ",
     "controls.timeSlider.pauseLabel": "一時停止",
     "controls.timeSlider.playButtonTooltip.disabled": "コントロール設定で［選択項目を自動的に適用］が無効です。",
@@ -766,8 +685,8 @@
     "core.euiDataGridCell.focusTrapEnterPrompt": "このセルの内容を操作するには、Enterキーを押してください。",
     "core.euiDataGridCell.position": "{columnId}, 列{col}, 行{row}",
     "core.euiDataGridCellActions.expandButtonTitle": "クリックするか enter を押すと、セルのコンテンツとインタラクトできます。",
-    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。",
     "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。クリックすると、列ヘッダーアクションが表示されます",
+    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "列アクションのリストを移動するには、Tabまたは上下矢印キーを押します。",
     "core.euiDataGridHeaderCell.sortedByAscendingFirst": "{columnId}の昇順で並べ替え",
     "core.euiDataGridHeaderCell.sortedByAscendingMultiple": "、{columnId}の昇順で並べ替え",
     "core.euiDataGridHeaderCell.sortedByAscendingSingle": "昇順で並べ替えます",
@@ -32954,7 +32873,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.goToFeatureControlsButtonLabel": "スペースに移動",
     "xpack.observabilityAiAssistantManagement.settingsPage.h2.settingsLabel": "設定",
     "xpack.observabilityAiAssistantManagement.settingsPage.knowledgeBaseLabel": "ナレッジベース",
-    "xpack.observabilityAiAssistantManagement.settingsPage.logIndexPatternDescription": "ログのクエリを実行するときにAI Assistantによって使用されるインデックスパターン。ログは分類され、根本原因分析で使用されます。",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnector": "検索コネクター",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnectorIndexPatternDescription": "検索コネクターインデックス（ナレッジベースの一部）をクエリするときに、AI Assistantによって使用されるインデックスパターン。デフォルトでは、すべての検索コネクターのインデックスに対してクエリが実行されます。",
     "xpack.observabilityAiAssistantManagement.settingsPage.settingsLabel": "設定",
@@ -32962,7 +32880,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.showAIAssistantDescriptionLabel": "オブザーバビリティアプリでAI Assistantボタンと状況に応じたインサイトのオン/オフを切り替えるには、［スペース］&gt;［<your space>］&gt;［機能］でAI Assistant機能のチェックをオンまたはオフにします。",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingDescription": "<em>[technical preview]</em> シミュレートされた関数呼び出しを使用します。シミュレートされた関数呼び出しでは、関数またはツールのAPIサポートは必要ありませんが、パフォーマンスが低下する可能性があります。現在、シミュレートされた関数呼び出しは、この設定に関係なく、非OpenAIコネクターで常に有効です。",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingLabel": "関数呼び出しをシミュレート",
-    "xpack.observabilityAiAssistantManagement.settingsTab.h3.logIndexPatternLabel": "ログインデックスパターン",
     "xpack.observabilityAiAssistantManagement.settingsTab.h3.searchConnectorIndexPatternLabel": "検索コネクターインデックスパターン",
     "xpack.observabilityAiAssistantManagement.span.expandRowLabel": "行を展開",
     "xpack.observabilityLogsExplorer.alertsPopover.buttonLabel": "アラート",
@@ -47878,4 +47795,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
     "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
   }
-}
\ No newline at end of file
+}
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 08826a2d5775e..4f32f919f5d29 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -347,38 +347,15 @@
     "console.embeddableConsole.customScreenReaderAnnouncement": "有称作 {landmarkHeading} 且页面级别控件位于文档结尾的新地区地标。",
     "console.embeddableConsole.landmarkHeading": "开发人员控制台",
     "console.embeddableConsole.title": "控制台",
-    "console.exampleOutputTextarea": "开发工具控制台编辑器示例",
-    "console.helpPage.keyboardCommands.autoIndentDescription": "自动缩进当前请求",
-    "console.helpPage.keyboardCommands.closeAutoCompleteMenuDescription": "关闭自动完成菜单",
-    "console.helpPage.keyboardCommands.collapseAllScopesDescription": "折叠当前范围除外的所有范围。通过加按 Shift 键来展开。",
-    "console.helpPage.keyboardCommands.collapseExpandCurrentScopeDescription": "折叠/展开当前范围。",
-    "console.helpPage.keyboardCommands.goToLineNumberDescription": "转到行号",
-    "console.helpPage.keyboardCommands.jumpToPreviousNextRequestDescription": "跳转至前一/后一请求开头或结尾。",
-    "console.helpPage.keyboardCommands.openAutoCompleteDescription": "打开自动完成（即使未键入）",
-    "console.helpPage.keyboardCommands.openDocumentationDescription": "打开当前请求的文档",
-    "console.helpPage.keyboardCommands.selectCurrentlySelectedInAutoCompleteMenuDescription": "选择自动完成菜单中当前选定的词或最顶部的词",
-    "console.helpPage.keyboardCommands.submitRequestDescription": "提交请求",
-    "console.helpPage.keyboardCommands.switchFocusToAutoCompleteMenuDescription": "将焦点切换到自动完成菜单。使用箭头进一步选择词",
-    "console.helpPage.keyboardCommandsTitle": "键盘命令",
-    "console.helpPage.learnAboutConsoleAndQueryDslText": "了解有关 {console} 和 {queryDsl} 的信息",
-    "console.helpPage.pageTitle": "帮助",
-    "console.helpPage.requestFormatDescription": "您可以在编辑器中键入一个或多个请求。控制台理解紧凑格式的请求。",
-    "console.helpPage.requestFormatTitle": "请求格式",
     "console.historyPage.applyHistoryButtonLabel": "应用",
     "console.historyPage.clearHistoryButtonLabel": "清除",
-    "console.historyPage.closehistoryButtonLabel": "关闭",
-    "console.historyPage.itemOfRequestListAriaLabel": "请求：{historyItem}",
-    "console.historyPage.noHistoryTextMessage": "没有可用的历史记录",
     "console.historyPage.pageTitle": "历史记录",
-    "console.historyPage.requestListAriaLabel": "已发送请求的历史记录",
-    "console.inputTextarea": "开发工具控制台",
     "console.keyboardCommandActionLabel.autoIndent": "应用行首缩进",
     "console.keyboardCommandActionLabel.moveToLine": "将光标移至线上",
     "console.keyboardCommandActionLabel.moveToNextRequestEdge": "移至后一请求开头或结尾",
     "console.keyboardCommandActionLabel.moveToPreviousRequestEdge": "移至前一请求开头或结尾",
     "console.keyboardCommandActionLabel.openDocs": "打开文档",
     "console.keyboardCommandActionLabel.sendRequest": "发送请求",
-    "console.loadFromDataUriErrorMessage": "无法从 URL 中的 load_from 查询参数加载数据",
     "console.loadingError.buttonLabel": "重新加载控制台",
     "console.loadingError.message": "尝试重新加载以获取最新的数据。",
     "console.loadingError.title": "无法加载控制台",
@@ -388,7 +365,6 @@
     "console.notification.error.historyQuotaReachedMessage": "请求历史记录已满。请清除控制台历史记录或禁止保存新的请求。",
     "console.notification.error.noRequestSelectedTitle": "未选择任何请求。将鼠标置于请求内即可选择。",
     "console.notification.error.unknownErrorTitle": "未知请求错误",
-    "console.outputTextarea": "开发工具控制台输出",
     "console.pageHeading": "控制台",
     "console.requestInProgressBadgeText": "进行中的请求",
     "console.requestOptions.autoIndentButtonLabel": "应用行首缩进",
@@ -396,64 +372,27 @@
     "console.requestOptions.openDocumentationButtonLabel": "查看文档",
     "console.requestOptionsButtonAriaLabel": "请求选项",
     "console.requestTimeElapasedBadgeTooltipContent": "已用时间",
-    "console.sendRequestButtonTooltipAriaLabel": "单击以发送请求",
-    "console.sendRequestButtonTooltipContent": "单击以发送请求",
-    "console.settingsPage.accessibilityOverlayLabel": "辅助功能覆盖",
-    "console.settingsPage.autocompleteLabel": "自动完成",
-    "console.settingsPage.cancelButtonLabel": "取消",
     "console.settingsPage.dataStreamsLabelText": "数据流",
     "console.settingsPage.enableAccessibilityOverlayLabel": "启用辅助功能覆盖",
     "console.settingsPage.enableKeyboardShortcutsLabel": "启用键盘快捷键",
     "console.settingsPage.fieldsLabelText": "字段",
     "console.settingsPage.fontSizeLabel": "字体大小",
-    "console.settingsPage.historyLabel": "历史记录",
     "console.settingsPage.indicesAndAliasesLabelText": "索引和别名",
-    "console.settingsPage.jsonSyntaxLabel": "JSON 语法",
-    "console.settingsPage.keyboardShortcutsLabel": "快捷键",
     "console.settingsPage.pageTitle": "控制台设置",
     "console.settingsPage.refreshButtonLabel": "刷新自动完成建议",
-    "console.settingsPage.refreshingDataDescription": "控制台通过查询 Elasticsearch 来刷新自动完成建议。降低刷新频率以节省带宽成本。",
     "console.settingsPage.refreshingDataLabel": "刷新频率",
     "console.settingsPage.refreshInterval.everyHourTimeInterval": "每小时",
     "console.settingsPage.refreshInterval.everyNMinutesTimeInterval": "每 {value} {value, plural, other {分钟}}",
     "console.settingsPage.refreshInterval.onceTimeInterval": "一次，控制台加载时",
-    "console.settingsPage.saveButtonLabel": "保存",
     "console.settingsPage.saveRequestsToHistoryLabel": "将请求保存到历史记录",
     "console.settingsPage.templatesLabelText": "模板",
     "console.settingsPage.tripleQuotesMessage": "在输出中使用三重引号",
-    "console.settingsPage.wrapLongLinesLabelText": "长行换行",
-    "console.splitPanel.adjustPanelSizeAriaLabel": "按左/右箭头键调整面板大小",
-    "console.topNav.helpTabDescription": "帮助",
-    "console.topNav.helpTabLabel": "帮助",
     "console.topNav.historyTabDescription": "历史记录",
     "console.topNav.historyTabLabel": "历史记录",
-    "console.topNav.settingsTabDescription": "设置",
-    "console.topNav.settingsTabLabel": "设置",
-    "console.topNav.variablesTabDescription": "变量",
-    "console.topNav.variablesTabLabel": "变量",
     "console.variablesPage.addButtonLabel": "添加",
-    "console.variablesPage.cancelButtonLabel": "取消",
-    "console.variablesPage.descriptionText": "定义变量并在请求中以 {variable} 的形式使用它们。",
-    "console.variablesPage.descriptionText.variableNameText": "{variableName}",
     "console.variablesPage.pageTitle": "变量",
-    "console.variablesPage.saveButtonLabel": "保存",
     "console.variablesPage.variablesTable.columns.valueHeader": "值",
     "console.variablesPage.variablesTable.columns.variableHeader": "变量名称",
-    "console.variablesPage.variablesTable.valueInput.ariaLabel": "变量值",
-    "console.variablesPage.variablesTable.variableInput.ariaLabel": "变量名称",
-    "console.variablesPage.variablesTable.variableInputError.validCharactersText": "只允许使用字母、数字和下划线",
-    "console.welcomePage.addCommentsDescription": "要添加单行注释，请使用 {hash} 或 {doubleSlash}。对于多行注释，请用 {slashAsterisk} 标记开头，用 {asteriskSlash} 标记结尾。",
-    "console.welcomePage.addCommentsTitle": "在请求正文中添加注释",
-    "console.welcomePage.closeButtonLabel": "关闭",
-    "console.welcomePage.kibanaAPIsDescription": "要向 Kibana API 发送请求，请以 {kibanaApiPrefix} 作为路径前缀。",
-    "console.welcomePage.pageTitle": "通过控制台发送请求",
-    "console.welcomePage.quickIntroDescription": "控制台理解语法与 cURL 类似的命令。这里提供了一个发送到 Elasticsearch _search API 的请求。",
-    "console.welcomePage.sendMultipleRequestsDescription": "选择多个请求，然后一起发送。您将获得所有请求的响应，无论它们是成功还是失败。",
-    "console.welcomePage.sendMultipleRequestsTitle": "发送多个请求",
-    "console.welcomePage.useVariables.step1": "单击 {variableText}，然后输入变量名称和值。",
-    "console.welcomePage.useVariables.step2": "请参阅请求路径和正文中的变量，无论多少次均可。",
-    "console.welcomePage.useVariablesDescription": "在控制台中定义变量，然后在请求中以 {variableName} 的形式使用它们。",
-    "console.welcomePage.useVariablesTitle": "重复使用包含变量的值",
     "contentManagement.contentEditor.activity.createdByLabelText": "创建者",
     "contentManagement.contentEditor.activity.lastUpdatedByLabelText": "最后更新者",
     "contentManagement.contentEditor.activity.managedUserLabel": "系统",
@@ -520,11 +459,6 @@
     "controls.controlGroup.floatingActions.clearTitle": "清除",
     "controls.controlGroup.floatingActions.editTitle": "编辑",
     "controls.controlGroup.floatingActions.removeTitle": "删除",
-    "controls.controlGroup.invalidControlWarning.dismissButtonLabel": "关闭",
-    "controls.controlGroup.invalidControlWarning.suppressTourLabel": "不再显示",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.default": "某些选择不会返回任何结果。请尝试更改选择。",
-    "controls.controlGroup.invalidControlWarning.tourStepContent.rangeSlider": "选定范围不会返回任何结果。请尝试更改范围。",
-    "controls.controlGroup.invalidControlWarning.tourStepTitle.default": "不再忽略无效选择",
     "controls.controlGroup.manageControl.cancelTitle": "取消",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupDescription": "{controlType} 控件的定制设置。",
     "controls.controlGroup.manageControl.controlTypeSettings.formGroupTitle": "{controlType} 设置",
@@ -545,7 +479,6 @@
     "controls.controlGroup.manageControl.displaySettings.widthInputTitle": "最小宽度",
     "controls.controlGroup.manageControl.editFlyoutTitle": "编辑控件",
     "controls.controlGroup.manageControl.saveChangesTitle": "保存并关闭",
-    "controls.controlGroup.management.addControl": "添加控件",
     "controls.controlGroup.management.applyButtonTooltip.disabled": "没有可应用的新选择",
     "controls.controlGroup.management.applyButtonTooltip.enabled": "应用选择",
     "controls.controlGroup.management.delete": "删除控件",
@@ -555,10 +488,6 @@
     "controls.controlGroup.management.delete.deleteTitle": "删除控件？",
     "controls.controlGroup.management.delete.sub": "控件一旦删除，将无法恢复。",
     "controls.controlGroup.management.deleteAll": "全部删除",
-    "controls.controlGroup.management.deleteNew.cancel": "取消",
-    "controls.controlGroup.management.deleteNew.confirm": "放弃控件",
-    "controls.controlGroup.management.deleteNew.sub": "将放弃您对此控件所做的更改，是否确定要继续？",
-    "controls.controlGroup.management.deleteNew.title": "放弃新控件",
     "controls.controlGroup.management.discard.cancel": "取消",
     "controls.controlGroup.management.discard.confirm": "放弃更改",
     "controls.controlGroup.management.discard.sub": "将放弃您对此控件所做的更改，是否确定要继续？",
@@ -573,7 +502,6 @@
     "controls.controlGroup.management.labelPosition.designSwitchLegend": "在内联与之上之间切换标签位置",
     "controls.controlGroup.management.labelPosition.inline": "内联",
     "controls.controlGroup.management.labelPosition.title": "标签位置",
-    "controls.controlGroup.management.layout.auto": "自动",
     "controls.controlGroup.management.layout.controlWidthLegend": "更改控件大小",
     "controls.controlGroup.management.layout.large": "大",
     "controls.controlGroup.management.layout.medium": "中",
@@ -583,8 +511,6 @@
     "controls.controlGroup.management.showApplySelections.tooltip": "如果禁用，将仅在单击“应用”后应用控件选择。",
     "controls.controlGroup.management.validate.title": "验证用户选择",
     "controls.controlGroup.management.validate.tooltip": "突出显示不会生成数据的控件选择。",
-    "controls.controlGroup.timeSlider.title": "时间滑块",
-    "controls.controlGroup.title": "控件组",
     "controls.frame.error.message": "发生错误。查看更多内容",
     "controls.optionsList.control.dateSeparator": ";  ",
     "controls.optionsList.control.excludeExists": "不",
@@ -593,7 +519,6 @@
     "controls.optionsList.control.placeholder": "任意",
     "controls.optionsList.control.separator": ",",
     "controls.optionsList.controlAndPopover.exists": "{negate, plural, other {存在}}",
-    "controls.optionsList.description": "添加用于选择字段值的菜单。",
     "controls.optionsList.displayName": "选项列表",
     "controls.optionsList.editor.additionalSettingsTitle": "其他设置",
     "controls.optionsList.editor.exactSearchLabel": "完全",
@@ -608,7 +533,6 @@
     "controls.optionsList.editor.singleSelectLabel": "只允许单一选择",
     "controls.optionsList.editor.wildcardSearchLabel": "Contains",
     "controls.optionsList.editor.wildcardSearchTooltip": "匹配包含给定搜索字符串的值。可能需要更长时间来填充结果。",
-    "controls.optionsList.errors.fieldNotFound": "找不到字段：{fieldName}",
     "controls.optionsList.popover.allOptionsTitle": "显示所有选项",
     "controls.optionsList.popover.allowExpensiveQueriesWarning": "允许资源密集型查询的集群设置已关闭，因此会禁用某些功能。",
     "controls.optionsList.popover.ariaLabel": "{fieldName} 控件的弹出框",
@@ -645,13 +569,8 @@
     "controls.optionsList.popover.suggestionsAriaLabel": "{fieldName} 的可用{optionCount, plural, other {选项}}",
     "controls.optionsList.popover.wildcardSearchPlaceholder": "包含……",
     "controls.rangeSlider.control.invalidSelectionWarningLabel": "选定范围未返回任何结果。",
-    "controls.rangeSlider.description": "添加用于选择字段值范围的控件。",
-    "controls.rangeSlider.displayName": "范围滑块",
     "controls.rangeSlider.editor.stepSizeTitle": "步长",
-    "controls.rangeSlider.errors.fieldNotFound": "找不到字段：{fieldName}",
     "controls.rangeSlider.popover.noAvailableDataHelpText": "没有可显示的数据。调整时间范围和筛选。",
-    "controls.timeSlider.description": "添加用于选择时间范围的滑块",
-    "controls.timeSlider.displayName": "时间滑块",
     "controls.timeSlider.nextLabel": "下一时间窗口",
     "controls.timeSlider.pauseLabel": "暂停",
     "controls.timeSlider.playButtonTooltip.disabled": "已在控制设置中禁用“自动应用选择”。",
@@ -764,8 +683,8 @@
     "core.euiDataGridCell.focusTrapEnterPrompt": "按 Enter 键与此单元格的内容进行交互。",
     "core.euiDataGridCell.position": "{columnId}，列 {col}，行 {row}",
     "core.euiDataGridCellActions.expandButtonTitle": "单击或按 Enter 键以便与单元格内容进行交互",
-    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "要在列操作列表中导航，请按 Tab 键或向上和向下箭头键。",
     "core.euiDataGridHeaderCell.actionsButtonAriaLabel": "{title}。单击以查看列标题操作",
+    "core.euiDataGridHeaderCell.actionsPopoverScreenReaderText": "要在列操作列表中导航，请按 Tab 键或向上和向下箭头键。",
     "core.euiDataGridHeaderCell.sortedByAscendingFirst": "按 {columnId} 排序，升序",
     "core.euiDataGridHeaderCell.sortedByAscendingMultiple": "，然后按 {columnId} 排序，升序",
     "core.euiDataGridHeaderCell.sortedByAscendingSingle": "已升序",
@@ -32994,7 +32913,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.goToFeatureControlsButtonLabel": "前往工作区",
     "xpack.observabilityAiAssistantManagement.settingsPage.h2.settingsLabel": "设置",
     "xpack.observabilityAiAssistantManagement.settingsPage.knowledgeBaseLabel": "知识库",
-    "xpack.observabilityAiAssistantManagement.settingsPage.logIndexPatternDescription": "AI 助手查询日志时使用的索引模式。日志将进行归类并用于根本原因分析",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnector": "搜索连接器",
     "xpack.observabilityAiAssistantManagement.settingsPage.searchConnectorIndexPatternDescription": "查询搜索连接器索引（知识库的一部分）时 AI 助手使用的索引模式。默认情况下，将查询每个搜索连接器的索引",
     "xpack.observabilityAiAssistantManagement.settingsPage.settingsLabel": "设置",
@@ -33002,7 +32920,6 @@
     "xpack.observabilityAiAssistantManagement.settingsPage.showAIAssistantDescriptionLabel": "通过在“工作区 > <your space> > 功能”中选中或取消选中 AI 助手功能，在 Observability 应用中打开或关闭 AI 助手按钮和上下文洞察。",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingDescription": "<em>[技术预览]</em> 使用模拟函数调用。模拟函数调用不需要函数或工具的 API 支持，但可能会降低性能。无论此设置如何，当前会始终对非 OpenAI 连接器启用模拟函数调用。",
     "xpack.observabilityAiAssistantManagement.settingsPage.simulatedFunctionCallingLabel": "模拟函数调用",
-    "xpack.observabilityAiAssistantManagement.settingsTab.h3.logIndexPatternLabel": "日志索引模式",
     "xpack.observabilityAiAssistantManagement.settingsTab.h3.searchConnectorIndexPatternLabel": "搜索连接器索引模式",
     "xpack.observabilityAiAssistantManagement.span.expandRowLabel": "展开行",
     "xpack.observabilityLogsExplorer.alertsPopover.buttonLabel": "告警",
@@ -47929,4 +47846,4 @@
     "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
     "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
   }
-}
\ No newline at end of file
+}
diff --git a/x-pack/test/functional/apps/dev_tools/embedded_console.ts b/x-pack/test/functional/apps/dev_tools/embedded_console.ts
index 8b663ea4aa5a7..47b6508ffbd58 100644
--- a/x-pack/test/functional/apps/dev_tools/embedded_console.ts
+++ b/x-pack/test/functional/apps/dev_tools/embedded_console.ts
@@ -14,6 +14,7 @@ export async function testEmbeddedConsole(pageObjects: PageObjects) {
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeClosed();
   await pageObjects.embeddedConsole.clickEmbeddedConsoleControlBar();
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeOpen();
+  await pageObjects.embeddedConsole.expectEmbeddedConsoleHaveFullscreenToggle();
   await pageObjects.embeddedConsole.clickEmbeddedConsoleControlBar();
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeClosed();
 }
diff --git a/x-pack/test/functional/apps/reporting_management/config.ts b/x-pack/test/functional/apps/reporting_management/config.ts
index af7abdc5122e1..a0b91502568f1 100644
--- a/x-pack/test/functional/apps/reporting_management/config.ts
+++ b/x-pack/test/functional/apps/reporting_management/config.ts
@@ -15,11 +15,6 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
     testFiles: [require.resolve('.')],
     kbnTestServer: {
       ...functionalConfig.get('kbnTestServer'),
-      serverArgs: [
-        ...functionalConfig.get('kbnTestServer.serverArgs'),
-        // disabling the monaco editor to run tests for ace
-        `--console.dev.enableMonaco=false`,
-      ],
     },
   };
 }
diff --git a/x-pack/test/functional/apps/reporting_management/report_listing.ts b/x-pack/test/functional/apps/reporting_management/report_listing.ts
index 1226842b26ef5..cd2cdfba1ea31 100644
--- a/x-pack/test/functional/apps/reporting_management/report_listing.ts
+++ b/x-pack/test/functional/apps/reporting_management/report_listing.ts
@@ -18,6 +18,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
   const find = getService('find');
+  const browser = getService('browser');
 
   describe('Listing of Reports', function () {
     const kbnArchive =
@@ -104,10 +105,16 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       await pageObjects.common.waitUntilUrlIncludes('dev_tools#/console');
 
       await retry.try(async () => {
-        const actualRequest = await pageObjects.console.getRequest();
+        // Getting the text of the console directly will only return the visible
+        // text, not the full content so this test could fail on smaller screens.
+        // So we need to copy the content to the clipboard and then read it from there.
+        await pageObjects.console.copyRequestsToClipboard();
+        const actualRequest = await browser.execute(() => navigator.clipboard.readText());
+
         expect(actualRequest.trim()).to.contain(
           '# These are the queries used when exporting data for\n# the CSV report'
         );
+
         expect(actualRequest).to.contain('POST /_search');
       });
     });
diff --git a/x-pack/test/functional/page_objects/embedded_console.ts b/x-pack/test/functional/page_objects/embedded_console.ts
index b6b54365f7031..30271d66044e5 100644
--- a/x-pack/test/functional/page_objects/embedded_console.ts
+++ b/x-pack/test/functional/page_objects/embedded_console.ts
@@ -16,6 +16,9 @@ export function EmbeddedConsoleProvider({ getService }: FtrProviderContext) {
     async expectEmbeddedConsoleToBeOpen() {
       await testSubjects.existOrFail('consoleEmbeddedBody');
     },
+    async expectEmbeddedConsoleHaveFullscreenToggle() {
+      await testSubjects.existOrFail('consoleToggleFullscreenButton');
+    },
     async expectEmbeddedConsoleToBeClosed() {
       await testSubjects.missingOrFail('consoleEmbeddedBody');
     },
diff --git a/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts b/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
index a5d2802dfbcc5..2c6852988cde5 100644
--- a/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
+++ b/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
@@ -57,8 +57,9 @@ const pages = {
   settings: {
     settingsPage: 'aiAssistantSettingsPage',
     managementLink: 'aiAssistantManagementSelection',
-    logsIndexPatternInput:
-      'management-settings-editField-observability:aiAssistantLogsIndexPattern',
+    logsIndexPatternInput: 'management-settings-editField-observability:logSources',
+    searchConnectorIndexPatternInput:
+      'management-settings-editField-observability:aiAssistantSearchConnectorIndexPattern',
     saveButton: 'observabilityAiAssistantManagementBottomBarActionsButton',
     aiAssistantCard: 'aiAssistantSelectionPageObservabilityCard',
   },
diff --git a/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts b/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
index ef87707c62a2c..96f2ff4b00f7f 100644
--- a/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
+++ b/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
@@ -58,20 +58,21 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await testSubjects.existOrFail(ui.pages.settings.settingsPage);
       });
       it('allows updating of an advanced setting', async () => {
-        const testLogsIndexPattern = 'my-logs-index-pattern';
-        const logsIndexPatternInput = await testSubjects.find(
-          ui.pages.settings.logsIndexPatternInput
+        const testSearchConnectorIndexPattern = 'my-logs-index-pattern';
+        const searchConnectorIndexPatternInput = await testSubjects.find(
+          ui.pages.settings.searchConnectorIndexPatternInput
         );
-        await logsIndexPatternInput.clearValue();
-        await logsIndexPatternInput.type(testLogsIndexPattern);
+        await searchConnectorIndexPatternInput.clearValue();
+        await searchConnectorIndexPatternInput.type(testSearchConnectorIndexPattern);
         const saveButton = await testSubjects.find(ui.pages.settings.saveButton);
         await saveButton.click();
         await browser.refresh();
-        const logsIndexPatternInputValue = await logsIndexPatternInput.getAttribute('value');
-        expect(logsIndexPatternInputValue).to.be(testLogsIndexPattern);
+        const searchConnectorIndexPatternInputValue =
+          await searchConnectorIndexPatternInput.getAttribute('value');
+        expect(searchConnectorIndexPatternInputValue).to.be(testSearchConnectorIndexPattern);
         // reset the value
-        await logsIndexPatternInput.clearValue();
-        await logsIndexPatternInput.type('logs-*');
+        await searchConnectorIndexPatternInput.clearValue();
+        await searchConnectorIndexPatternInput.type('logs-*');
         await saveButton.click();
       });
     });
@@ -114,10 +115,10 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await testSubjects.existOrFail(ui.pages.settings.settingsPage);
       });
       it('has disabled inputs', async () => {
-        const logsIndexPatternInput = await testSubjects.find(
-          ui.pages.settings.logsIndexPatternInput
+        const searchConnectorIndexPatternInput = await testSubjects.find(
+          ui.pages.settings.searchConnectorIndexPatternInput
         );
-        expect(await logsIndexPatternInput.getAttribute('disabled')).to.be('true');
+        expect(await searchConnectorIndexPatternInput.getAttribute('disabled')).to.be('true');
       });
     });
     describe('observabilityAIAssistant privilege with no aiAssistantManagementSelection privilege', () => {
diff --git a/x-pack/test/plugin_api_integration/test_suites/task_manager/check_registered_task_types.ts b/x-pack/test/plugin_api_integration/test_suites/task_manager/check_registered_task_types.ts
index cdc826919d0ab..df9cbaf33e1d6 100644
--- a/x-pack/test/plugin_api_integration/test_suites/task_manager/check_registered_task_types.ts
+++ b/x-pack/test/plugin_api_integration/test_suites/task_manager/check_registered_task_types.ts
@@ -146,6 +146,7 @@ export default function ({ getService }: FtrProviderContext) {
         'fleet:unenroll_action:retry',
         'fleet:update_agent_tags:retry',
         'fleet:upgrade_action:retry',
+        'logs-data-telemetry',
         'observabilityAIAssistant:indexQueuedDocumentsTaskType',
         'osquery:telemetry-configs',
         'osquery:telemetry-packs',
diff --git a/x-pack/test/stack_functional_integration/apps/ccs/ccs_console.js b/x-pack/test/stack_functional_integration/apps/ccs/ccs_console.js
index e105ceecf6cf7..d52611dd3c6c9 100644
--- a/x-pack/test/stack_functional_integration/apps/ccs/ccs_console.js
+++ b/x-pack/test/stack_functional_integration/apps/ccs/ccs_console.js
@@ -27,15 +27,15 @@ export default function ({ getService, getPageObjects }) {
     describe('Perform CCS Search in Console', () => {
       before(async () => {
         await browser.setScreenshotSize(1800, 2937); //add the full response in getVisibleText
-        await PageObjects.console.monaco.clearEditorText();
+        await PageObjects.console.clearEditorText();
       });
       it('it should be able to access remote data', async () => {
-        await PageObjects.console.monaco.enterText(
+        await PageObjects.console.enterText(
           '\nGET ftr-remote:makelogs工程-*/_search\n {\n "query": {\n "bool": {\n "must": [\n {"match": {"extension" : "jpg"} \n}\n]\n}\n}\n}'
         );
         await PageObjects.console.clickPlay();
         await retry.try(async () => {
-          const actualResponse = await PageObjects.console.monaco.getOutputText();
+          const actualResponse = await PageObjects.console.getOutputText();
           expect(actualResponse).to.contain('"_index": "ftr-remote:makelogs工程-0"');
         });
       });
diff --git a/x-pack/test_serverless/functional/test_suites/common/console/console.ts b/x-pack/test_serverless/functional/test_suites/common/console/console.ts
index b7eec68c637af..c9310dcc3bc8d 100644
--- a/x-pack/test_serverless/functional/test_suites/common/console/console.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/console/console.ts
@@ -13,6 +13,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
   const log = getService('log');
   const PageObjects = getPageObjects(['svlCommonPage', 'common', 'console', 'header']);
+  const browser = getService('browser');
 
   describe('console app', function describeIndexTests() {
     before(async () => {
@@ -25,13 +26,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.common.navigateToApp('dev_tools', { hash: '/console' });
     });
 
-    beforeEach(async () => {
-      await PageObjects.console.closeHelpIfExists();
-    });
-
     it('should show the default request', async () => {
       await retry.try(async () => {
-        const actualRequest = await PageObjects.console.monaco.getEditorText();
+        const actualRequest = await PageObjects.console.getEditorText();
         log.debug(actualRequest);
         expect(actualRequest.replace(/\s/g, '')).to.eql(DEFAULT_INPUT_VALUE.replace(/\s/g, ''));
       });
@@ -39,13 +36,34 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('default request response should include `"timed_out" : false`', async () => {
       const expectedResponseContains = `"timed_out": false`;
-      await PageObjects.console.monaco.selectAllRequests();
+      await PageObjects.console.selectAllRequests();
       await PageObjects.console.clickPlay();
       await retry.try(async () => {
-        const actualResponse = await PageObjects.console.monaco.getOutputText();
+        const actualResponse = await PageObjects.console.getOutputText();
         log.debug(actualResponse);
         expect(actualResponse).to.contain(expectedResponseContains);
       });
     });
+
+    it('should open API Reference documentation page when open documentation button is clicked', async () => {
+      await PageObjects.console.clearEditorText();
+      await PageObjects.console.enterText('GET _search');
+      await PageObjects.console.clickContextMenu();
+      await PageObjects.console.clickOpenDocumentationButton();
+
+      await retry.tryForTime(10000, async () => {
+        await browser.switchTab(1);
+      });
+
+      // Retry until the documentation is loaded
+      await retry.try(async () => {
+        const url = await browser.getCurrentUrl();
+        expect(url).to.contain('/docs/api');
+      });
+
+      // Close the documentation tab
+      await browser.closeCurrentWindow();
+      await browser.switchTab(0);
+    });
   });
 }
diff --git a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts
index 1f57223ad7ea4..b0cc636dea578 100644
--- a/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts
+++ b/x-pack/test_serverless/functional/test_suites/common/discover/esql/_esql_view.ts
@@ -118,11 +118,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         expect(await testSubjects.exists('unifiedHistogramChart')).to.be(false);
       });
 
-      it('should render the histogram for indices with no @timestamp field when the ?t_start, ?t_end params are in the query', async function () {
+      it('should render the histogram for indices with no @timestamp field when the ?_tstart, ?_tend params are in the query', async function () {
         await PageObjects.discover.selectTextBaseLang();
         await PageObjects.unifiedFieldList.waitUntilSidebarHasLoaded();
 
-        const testQuery = `from kibana_sample_data_flights | limit 10 | where timestamp >= ?t_start and timestamp <= ?t_end`;
+        const testQuery = `from kibana_sample_data_flights | limit 10 | where timestamp >= ?_tstart and timestamp <= ?_tend`;
 
         await monacoEditor.setCodeEditorValue(testQuery);
         await testSubjects.click('querySubmitButton');
diff --git a/x-pack/test_serverless/functional/test_suites/search/embedded_console.ts b/x-pack/test_serverless/functional/test_suites/search/embedded_console.ts
index 2a14fab24f81a..cbb61aa31ad4c 100644
--- a/x-pack/test_serverless/functional/test_suites/search/embedded_console.ts
+++ b/x-pack/test_serverless/functional/test_suites/search/embedded_console.ts
@@ -13,6 +13,7 @@ export async function testHasEmbeddedConsole(pageObjects: PageObjects) {
   await pageObjects.embeddedConsole.expectEmbeddedConsoleControlBarExists();
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeClosed();
   await pageObjects.embeddedConsole.clickEmbeddedConsoleControlBar();
+  await pageObjects.embeddedConsole.expectEmbeddedConsoleHaveFullscreenToggle();
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeOpen();
   await pageObjects.embeddedConsole.clickEmbeddedConsoleControlBar();
   await pageObjects.embeddedConsole.expectEmbeddedConsoleToBeClosed();