diff --git a/.eslintrc.js b/.eslintrc.js
index 2eea41984b30e..09de32a91bca3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -445,6 +445,7 @@ module.exports = {
                   '(src|x-pack)/plugins/**/(public|server)/**/*',
                   '!(src|x-pack)/plugins/**/(public|server)/mocks/index.{js,mjs,ts}',
                   '!(src|x-pack)/plugins/**/(public|server)/(index|mocks).{js,mjs,ts,tsx}',
+                  '!(src|x-pack)/plugins/**/__stories__/index.{js,mjs,ts,tsx}',
                 ],
                 allowSameFolder: true,
                 errorMessage: 'Plugins may only import from top-level public and server modules.',
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 726e4257a5aac..1ea9e5a5a75bc 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -12,7 +12,7 @@ Delete any items that are not applicable to this PR.
 - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
 - [ ] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
 - [ ] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
-- [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the [cloud](https://github.com/elastic/cloud) and added to the [docker list](https://github.com/elastic/kibana/blob/c29adfef29e921cc447d2a5ed06ac2047ceab552/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker)
+- [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/master/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
 - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
 - [ ] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
 
diff --git a/.i18nrc.json b/.i18nrc.json
index 0926f73722731..390e5e917d08e 100644
--- a/.i18nrc.json
+++ b/.i18nrc.json
@@ -16,6 +16,7 @@
     "esUi": "src/plugins/es_ui_shared",
     "devTools": "src/plugins/dev_tools",
     "expressions": "src/plugins/expressions",
+    "expressionRevealImage": "src/plugins/expression_reveal_image",
     "inputControl": "src/plugins/input_control_vis",
     "inspector": "src/plugins/inspector",
     "inspectorViews": "src/legacy/core_plugins/inspector_views",
diff --git a/WORKSPACE.bazel b/WORKSPACE.bazel
index acb62043a15ca..ebf7bbc8488ac 100644
--- a/WORKSPACE.bazel
+++ b/WORKSPACE.bazel
@@ -10,15 +10,15 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Fetch Node.js rules
 http_archive(
   name = "build_bazel_rules_nodejs",
-  sha256 = "4a5d654a4ccd4a4c24eca5d319d85a88a650edf119601550c95bf400c8cc897e",
-  urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.5.1/rules_nodejs-3.5.1.tar.gz"],
+  sha256 = "0fa2d443571c9e02fcb7363a74ae591bdcce2dd76af8677a95965edf329d778a",
+  urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.6.0/rules_nodejs-3.6.0.tar.gz"],
 )
 
 # Now that we have the rules let's import from them to complete the work
 load("@build_bazel_rules_nodejs//:index.bzl", "check_rules_nodejs_version", "node_repositories", "yarn_install")
 
 # Assure we have at least a given rules_nodejs version
-check_rules_nodejs_version(minimum_version_string = "3.5.1")
+check_rules_nodejs_version(minimum_version_string = "3.6.0")
 
 # Setup the Node.js toolchain for the architectures we want to support
 #
diff --git a/docs/developer/plugin-list.asciidoc b/docs/developer/plugin-list.asciidoc
index 231e089950a28..b4be27eee5ed2 100644
--- a/docs/developer/plugin-list.asciidoc
+++ b/docs/developer/plugin-list.asciidoc
@@ -72,6 +72,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |This plugin contains reusable code in the form of self-contained modules (or libraries). Each of these modules exports a set of functionality relevant to the domain of the module.
 
 
+|{kib-repo}blob/{branch}/src/plugins/expression_reveal_image/README.md[expressionRevealImage]
+|Expression Reveal Image plugin adds a revealImage function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image.
+
+
 |<<kibana-expressions-plugin>>
 |Expression pipeline is a chain of functions that *pipe* its output to the
 input of the next function. Functions can be configured using arguments provided
diff --git a/docs/setup/upgrade.asciidoc b/docs/setup/upgrade.asciidoc
index 92cd6e9ead5a1..bd93517a7a82f 100644
--- a/docs/setup/upgrade.asciidoc
+++ b/docs/setup/upgrade.asciidoc
@@ -1,8 +1,54 @@
 [[upgrade]]
 == Upgrade {kib}
 
-Depending on the {kib} version you're upgrading from, the upgrade process to 7.0
-varies.
+Depending on the {kib} version you're upgrading from, the upgrade process to {version}
+varies. The following upgrades are supported:
+
+* Between minor versions
+* From 5.6 to 6.8
+* From 6.8 to {prev-major-version}
+* From {prev-major-version} to {version}
+ifeval::[ "{version}" != "{minor-version}.0" ]
+* From any version since {minor-version}.0 to {version}
+endif::[]
+
+The following table shows the recommended upgrade paths to {version}.
+
+[cols="<1,3",options="header",]
+|====
+|Upgrade from   
+|Recommended upgrade path to {version}
+
+ifeval::[ "{version}" != "{minor-version}.0" ]
+|A previous {minor-version} version (e.g., {minor-version}.0)
+|Upgrade to {version}
+endif::[]
+
+|{prev-major-version}
+|Upgrade to {version}
+
+|7.0–7.7
+a|
+. Upgrade to {prev-major-version}
+. Upgrade to {version}
+
+|6.8
+a|
+. Upgrade to {prev-major-version}
+. Upgrade to {version}
+
+|6.0–6.7
+a|
+
+. Upgrade to 6.8
+. Upgrade to {prev-major-version}
+. Upgrade to {version}
+|====
+
+[WARNING]
+====
+The upgrade path from 6.8 to 7.0 is *not* supported.
+====
 
 [float]
 [[upgrade-before-you-begin]]
diff --git a/docs/spaces/index.asciidoc b/docs/spaces/index.asciidoc
index 81f3945779503..8eea3b1ee4552 100644
--- a/docs/spaces/index.asciidoc
+++ b/docs/spaces/index.asciidoc
@@ -30,6 +30,8 @@ Kibana supports spaces in several ways.  You can:
 
 The `kibana_admin` role or equivilent is required to manage **Spaces**.
 
+TIP: Looking to support multiple tenants? See <<xpack-security-multiple-tenants, the Security documentation>> for more information.
+
 [float]
 [[spaces-managing]]
 === View, create, and delete spaces
diff --git a/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png b/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png
new file mode 100644
index 0000000000000..ef72f291850e4
Binary files /dev/null and b/docs/user/dashboard/images/tsvb_index_pattern_selection_mode.png differ
diff --git a/docs/user/dashboard/tsvb.asciidoc b/docs/user/dashboard/tsvb.asciidoc
index 93ee3627bd8a0..9320b062a8ba9 100644
--- a/docs/user/dashboard/tsvb.asciidoc
+++ b/docs/user/dashboard/tsvb.asciidoc
@@ -30,6 +30,29 @@ By default, *TSVB* drops the last bucket because the time filter intersects the
 
 .. In the *Panel filter* field, enter <<kuery-query, KQL filters>> to view specific documents.
 
+[float]
+[[tsvb-index-pattern-mode]]
+==== Index pattern mode
+Create *TSVB* visualizations with {kib} index patterns. 
+
+IMPORTANT: Creating *TSVB* visualizations with an {es} index string is deprecated and will be removed in a future release.
+It is the default one for new visualizations but it can also be switched for the old implementations:
+
+. Click *Panel options*, then click the gear icon to open the *Index pattern selection mode* options.
+. Select *Use only Kibana index patterns*.
+. Reselect the index pattern from the dropdown, then select the *Time field*.
+
+image::images/tsvb_index_pattern_selection_mode.png[Change index pattern selection mode action]
+
+The index pattern mode unlocks many new features, such as:
+* Runtime fields
+
+* URL drilldowns
+
+* Interactive filters for time series visualizations
+
+* Better performance
+
 [float]
 [[configure-the-data-series]]
 ==== Configure the series
@@ -177,4 +200,4 @@ To group with multiple fields, create runtime fields in the index pattern you ar
 [role="screenshot"]
 image::images/tsvb_group_by_multiple_fields.png[Group by multiple fields]
 
-. Create a new TSVB visualization and group by this field.
\ No newline at end of file
+. Create a new TSVB visualization and group by this field.
diff --git a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc
index 363562d4cd193..98201087b9aae 100644
--- a/docs/user/production-considerations/task-manager-troubleshooting.asciidoc
+++ b/docs/user/production-considerations/task-manager-troubleshooting.asciidoc
@@ -248,7 +248,7 @@ The API returns the following:
         "overdue": 10,
         "overdue_non_recurring": 10,
         "estimated_schedule_density": [0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 0, 3, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0],
-        "capacity_requirments": {
+        "capacity_requirements": {
           "per_minute": 6,
           "per_hour": 28,
           "per_day": 2
@@ -737,7 +737,7 @@ Evaluating the preceding health stats in the previous example, you see the follo
     0, 3, 0, 0, 0, 1, 0, 1, 0, 1,
     0, 0, 0, 1, 0, 0, 1, 1, 1, 0
   ],
-  "capacity_requirments": { # <10>
+  "capacity_requirements": { # <10>
     "per_minute": 14,
     "per_hour": 240,
     "per_day": 0
@@ -819,7 +819,7 @@ Suppose the output of `stats.workload.value` looked something like this:
     0, 31, 0, 12, 16, 31, 0, 10, 0, 10,
     3, 22, 0, 10, 0, 2, 10, 10, 1, 0
   ],
-  "capacity_requirments": {
+  "capacity_requirements": {
     "per_minute": 329, # <4>
     "per_hour": 4272, # <5>
     "per_day": 61 # <6>
diff --git a/docs/user/security/authorization/index.asciidoc b/docs/user/security/authorization/index.asciidoc
index c62f137f98528..523a90bdf07ce 100644
--- a/docs/user/security/authorization/index.asciidoc
+++ b/docs/user/security/authorization/index.asciidoc
@@ -6,7 +6,21 @@ The Elastic Stack comes with the `kibana_admin` {ref}/built-in-roles.html[built-
 
 When you assign a user multiple roles, the user receives a union of the roles’ privileges. Therefore, assigning the `kibana_admin` role in addition to a custom role that grants {kib} privileges is ineffective because `kibana_admin` has access to all the features in all spaces.
 
-NOTE: When running multiple tenants of {kib} by changing the `kibana.index` in your `kibana.yml`, you cannot use `kibana_admin` to grant access. You must create custom roles that authorize the user for that specific tenant. Although multi-tenant installations are supported, the recommended approach to securing access to {kib} segments is to grant users access to specific spaces.
+[[xpack-security-multiple-tenants]]
+==== Supporting multiple tenants
+
+There are two approaches to supporting multi-tenancy in {kib}:
+
+1. *Recommended:* Create a space and a limited role for each tenant, and configure each user with the appropriate role. See
+<<tutorial-secure-access-to-kibana, Securing access to {kib}>> for more details.
+2. deprecated:[7.13.0,"In 8.0 and later, the `kibana.index` setting will no longer be supported."] Set up separate {kib} instances to work
+with a single {es} cluster by changing the `kibana.index` setting in your `kibana.yml` file.
++
+NOTE: When using multiple {kib} instances this way, you cannot use the `kibana_admin` role to grant access. You must create custom roles
+that authorize the user for each specific instance.
+
+Whichever approach you use, be careful when granting cluster privileges and index privileges. Both of these approaches share the same {es}
+cluster, and {kib} spaces do not prevent you from granting users of two different tenants access to the same index.
 
 [role="xpack"]
 [[xpack-kibana-role-management]]
diff --git a/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc b/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc
index 63b83712e3e6e..199f138347fa0 100644
--- a/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc
+++ b/docs/user/security/tutorials/how-to-secure-access-to-kibana.asciidoc
@@ -11,7 +11,7 @@ This guide introduces you to three of {kib}'s security features: spaces, roles,
 [float]
 === Spaces
 
-Do you have multiple teams using {kib}? Do you want a “playground” to experiment with new visualizations or alerts? If so, then <<xpack-spaces,{kib} Spaces>> can help.
+Do you have multiple teams or tenants using {kib}? Do you want a “playground” to experiment with new visualizations or alerts? If so, then <<xpack-spaces,{kib} Spaces>> can help.
 
 Think of a space as another instance of {kib}. A space allows you to organize your <<dashboard, dashboards>>, <<alerting-getting-started, alerts>>, <<xpack-ml, machine learning jobs>>, and much more into their own categories. For example, you might have a Marketing space for your marketeers to track the results of their campaigns, and an Engineering space for your developers to {apm-get-started-ref}/overview.html[monitor application performance].
 
diff --git a/package.json b/package.json
index b1d57d54838bc..1cc379fb807d0 100644
--- a/package.json
+++ b/package.json
@@ -447,7 +447,7 @@
     "@babel/traverse": "^7.12.12",
     "@babel/types": "^7.12.12",
     "@bazel/ibazel": "^0.15.10",
-    "@bazel/typescript": "^3.5.1",
+    "@bazel/typescript": "^3.6.0",
     "@cypress/snapshot": "^2.1.7",
     "@cypress/webpack-preprocessor": "^5.6.0",
     "@elastic/eslint-config-kibana": "link:bazel-bin/packages/elastic-eslint-config-kibana",
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index c6960621359c7..6627b644daec7 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -99,7 +99,7 @@ pageLoadAssetSize:
   watcher: 43598
   runtimeFields: 41752
   stackAlerts: 29684
-  presentationUtil: 49767
+  presentationUtil: 94301
   spacesOss: 18817
   indexPatternFieldEditor: 90489
   osquery: 107090
@@ -110,4 +110,5 @@ pageLoadAssetSize:
   timelines: 230410
   screenshotMode: 17856
   visTypePie: 35583
+  expressionRevealImage: 25675
   cases: 144442
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index 1efe1e560bce1..6bb714e913838 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -263,6 +263,7 @@ export class DocLinksService {
           lensPanels: `${KIBANA_DOCS}lens.html`,
           maps: `${ELASTIC_WEBSITE_URL}maps`,
           vega: `${KIBANA_DOCS}vega.html`,
+          tsvbIndexPatternMode: `${KIBANA_DOCS}tsvb.html#tsvb-index-pattern-mode`,
         },
         observability: {
           guide: `${ELASTIC_WEBSITE_URL}guide/en/observability/${DOC_LINK_VERSION}/index.html`,
@@ -328,7 +329,7 @@ export class DocLinksService {
         },
         apis: {
           bulkIndexAlias: `${ELASTICSEARCH_DOCS}indices-aliases.html`,
-          byteSizeUnits: `${ELASTICSEARCH_DOCS}common-options.html#byte-units`,
+          byteSizeUnits: `${ELASTICSEARCH_DOCS}api-conventions.html#byte-units`,
           createAutoFollowPattern: `${ELASTICSEARCH_DOCS}ccr-put-auto-follow-pattern.html`,
           createFollower: `${ELASTICSEARCH_DOCS}ccr-put-follow.html`,
           createIndex: `${ELASTICSEARCH_DOCS}indices-create-index.html`,
@@ -352,7 +353,7 @@ export class DocLinksService {
           putSnapshotLifecyclePolicy: `${ELASTICSEARCH_DOCS}slm-api-put-policy.html`,
           putWatch: `${ELASTICSEARCH_DOCS}watcher-api-put-watch.html`,
           simulatePipeline: `${ELASTICSEARCH_DOCS}simulate-pipeline-api.html`,
-          timeUnits: `${ELASTICSEARCH_DOCS}common-options.html#time-units`,
+          timeUnits: `${ELASTICSEARCH_DOCS}api-conventions.html#time-units`,
           updateTransform: `${ELASTICSEARCH_DOCS}update-transform.html`,
         },
         plugins: {
diff --git a/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker b/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
index a224793bace3f..643080fda381f 100755
--- a/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
+++ b/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker
@@ -380,6 +380,16 @@ kibana_vars=(
     xpack.security.session.idleTimeout
     xpack.security.session.lifespan
     xpack.security.sessionTimeout
+    xpack.securitySolution.alertMergeStrategy
+    xpack.securitySolution.alertResultListDefaultDateRange
+    xpack.securitySolution.endpointResultListDefaultFirstPageIndex
+    xpack.securitySolution.endpointResultListDefaultPageSize
+    xpack.securitySolution.maxRuleImportExportSize
+    xpack.securitySolution.maxRuleImportPayloadBytes
+    xpack.securitySolution.maxTimelineImportExportSize
+    xpack.securitySolution.maxTimelineImportPayloadBytes
+    xpack.securitySolution.packagerTaskInterval
+    xpack.securitySolution.validateArtifactDownloads
     xpack.spaces.enabled
     xpack.spaces.maxSpaces
     xpack.task_manager.enabled
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index e0f0432c61463..6fc0841551fad 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -17,6 +17,7 @@ export const storybookAliases = {
   dashboard_enhanced: 'x-pack/plugins/dashboard_enhanced/.storybook',
   data_enhanced: 'x-pack/plugins/data_enhanced/.storybook',
   embeddable: 'src/plugins/embeddable/.storybook',
+  expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
diff --git a/src/plugins/data/common/field_formats/converters/string.test.ts b/src/plugins/data/common/field_formats/converters/string.test.ts
index ccb7a58285b20..d691712b674dd 100644
--- a/src/plugins/data/common/field_formats/converters/string.test.ts
+++ b/src/plugins/data/common/field_formats/converters/string.test.ts
@@ -8,6 +8,14 @@
 
 import { StringFormat } from './string';
 
+/**
+ * Removes a wrapping span, that is created by the field formatter infrastructure
+ * and we're not caring about in these tests.
+ */
+function stripSpan(input: string): string {
+  return input.replace(/^\<span ng-non-bindable\>(.*)\<\/span\>$/, '$1');
+}
+
 describe('String Format', () => {
   test('convert a string to lower case', () => {
     const string = new StringFormat(
@@ -17,6 +25,7 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('Kibana')).toBe('kibana');
+    expect(stripSpan(string.convert('Kibana', 'html'))).toBe('kibana');
   });
 
   test('convert a string to upper case', () => {
@@ -27,6 +36,7 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('Kibana')).toBe('KIBANA');
+    expect(stripSpan(string.convert('Kibana', 'html'))).toBe('KIBANA');
   });
 
   test('decode a base64 string', () => {
@@ -37,6 +47,7 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('Zm9vYmFy')).toBe('foobar');
+    expect(stripSpan(string.convert('Zm9vYmFy', 'html'))).toBe('foobar');
   });
 
   test('convert a string to title case', () => {
@@ -47,10 +58,15 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('PLEASE DO NOT SHOUT')).toBe('Please Do Not Shout');
+    expect(stripSpan(string.convert('PLEASE DO NOT SHOUT', 'html'))).toBe('Please Do Not Shout');
     expect(string.convert('Mean, variance and standard_deviation.')).toBe(
       'Mean, Variance And Standard_deviation.'
     );
+    expect(stripSpan(string.convert('Mean, variance and standard_deviation.', 'html'))).toBe(
+      'Mean, Variance And Standard_deviation.'
+    );
     expect(string.convert('Stay CALM!')).toBe('Stay Calm!');
+    expect(stripSpan(string.convert('Stay CALM!', 'html'))).toBe('Stay Calm!');
   });
 
   test('convert a string to short case', () => {
@@ -61,6 +77,7 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('dot.notated.string')).toBe('d.n.string');
+    expect(stripSpan(string.convert('dot.notated.string', 'html'))).toBe('d.n.string');
   });
 
   test('convert a string to unknown transform case', () => {
@@ -82,5 +99,16 @@ describe('String Format', () => {
       jest.fn()
     );
     expect(string.convert('%EC%95%88%EB%85%95%20%ED%82%A4%EB%B0%94%EB%82%98')).toBe('안녕 키바나');
+    expect(
+      stripSpan(string.convert('%EC%95%88%EB%85%95%20%ED%82%A4%EB%B0%94%EB%82%98', 'html'))
+    ).toBe('안녕 키바나');
+  });
+
+  test('outputs specific empty value', () => {
+    const string = new StringFormat();
+    expect(string.convert('')).toBe('(empty)');
+    expect(stripSpan(string.convert('', 'html'))).toBe(
+      '<span class="ffString__emptyValue">(empty)</span>'
+    );
   });
 });
diff --git a/src/plugins/data/common/field_formats/converters/string.ts b/src/plugins/data/common/field_formats/converters/string.ts
index 64367df5d90dd..28dd714abaf41 100644
--- a/src/plugins/data/common/field_formats/converters/string.ts
+++ b/src/plugins/data/common/field_formats/converters/string.ts
@@ -6,14 +6,15 @@
  * Side Public License, v 1.
  */
 
+import escape from 'lodash/escape';
 import { i18n } from '@kbn/i18n';
-import { asPrettyString } from '../utils';
+import { asPrettyString, getHighlightHtml } from '../utils';
 import { KBN_FIELD_TYPES } from '../../kbn_field_types/types';
 import { FieldFormat } from '../field_format';
-import { TextContextTypeConvert, FIELD_FORMAT_IDS } from '../types';
+import { TextContextTypeConvert, FIELD_FORMAT_IDS, HtmlContextTypeConvert } from '../types';
 import { shortenDottedString } from '../../utils';
 
-export const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', {
+const emptyLabel = i18n.translate('data.fieldFormats.string.emptyLabel', {
   defaultMessage: '(empty)',
 });
 
@@ -127,4 +128,14 @@ export class StringFormat extends FieldFormat {
         return asPrettyString(val);
     }
   };
+
+  htmlConvert: HtmlContextTypeConvert = (val, { hit, field } = {}) => {
+    if (val === '') {
+      return `<span class="ffString__emptyValue">${emptyLabel}</span>`;
+    }
+
+    return hit?.highlight?.[field?.name]
+      ? getHighlightHtml(val, hit.highlight[field.name])
+      : escape(this.textConvert(val));
+  };
 }
diff --git a/src/plugins/data/public/field_formats/converters/_index.scss b/src/plugins/data/public/field_formats/converters/_index.scss
new file mode 100644
index 0000000000000..cc13062a3ef8b
--- /dev/null
+++ b/src/plugins/data/public/field_formats/converters/_index.scss
@@ -0,0 +1 @@
+@import './string';
diff --git a/src/plugins/data/public/field_formats/converters/_string.scss b/src/plugins/data/public/field_formats/converters/_string.scss
new file mode 100644
index 0000000000000..9d97f0195780c
--- /dev/null
+++ b/src/plugins/data/public/field_formats/converters/_string.scss
@@ -0,0 +1,3 @@
+.ffString__emptyValue {
+  color: $euiColorDarkShade;
+}
diff --git a/src/plugins/data/public/index.scss b/src/plugins/data/public/index.scss
index 467efa98934ec..c0eebf3402771 100644
--- a/src/plugins/data/public/index.scss
+++ b/src/plugins/data/public/index.scss
@@ -1,2 +1,3 @@
 @import './ui/index';
 @import './utils/table_inspector_view/index';
+@import './field_formats/converters/index';
diff --git a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss
index 139230fbdb66a..9ef123fa1a60f 100644
--- a/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss
+++ b/src/plugins/discover/public/application/apps/main/components/sidebar/discover_sidebar.scss
@@ -1,4 +1,5 @@
 .dscSidebar {
+  overflow: hidden;
   margin: 0 !important;
   flex-grow: 1;
   padding-left: $euiSize;
diff --git a/src/plugins/expression_reveal_image/.i18nrc.json b/src/plugins/expression_reveal_image/.i18nrc.json
new file mode 100755
index 0000000000000..5b073e4374519
--- /dev/null
+++ b/src/plugins/expression_reveal_image/.i18nrc.json
@@ -0,0 +1,7 @@
+{
+  "prefix": "expressionRevealImage",
+  "paths": {
+    "expressionRevealImage": "."
+  },
+  "translations": ["translations/ja-JP.json"]
+}
diff --git a/src/plugins/expression_reveal_image/.storybook/main.js b/src/plugins/expression_reveal_image/.storybook/main.js
new file mode 100644
index 0000000000000..742239e638b8a
--- /dev/null
+++ b/src/plugins/expression_reveal_image/.storybook/main.js
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// eslint-disable-next-line import/no-commonjs
+module.exports = require('@kbn/storybook').defaultConfig;
diff --git a/src/plugins/expression_reveal_image/README.md b/src/plugins/expression_reveal_image/README.md
new file mode 100755
index 0000000000000..21c27a6eee05b
--- /dev/null
+++ b/src/plugins/expression_reveal_image/README.md
@@ -0,0 +1,9 @@
+# expressionRevealImage
+
+Expression Reveal Image plugin adds a `revealImage` function to the expression plugin and an associated renderer. The renderer will display the given percentage of a given image.
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md) for instructions setting up your development environment.
diff --git a/src/plugins/expression_reveal_image/common/constants.ts b/src/plugins/expression_reveal_image/common/constants.ts
new file mode 100644
index 0000000000000..68ac53171ee7f
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/constants.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export const PLUGIN_ID = 'expressionRevealImage';
+export const PLUGIN_NAME = 'expressionRevealImage';
diff --git a/src/plugins/expression_reveal_image/common/expression_functions/index.ts b/src/plugins/expression_reveal_image/common/expression_functions/index.ts
new file mode 100644
index 0000000000000..dba24e8a0cb0a
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/expression_functions/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { revealImageFunction } from './reveal_image_function';
+
+export const functions = [revealImageFunction];
+
+export { revealImageFunction };
diff --git a/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts
new file mode 100644
index 0000000000000..633a132fea5e3
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image.test.ts
@@ -0,0 +1,168 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  functionWrapper,
+  elasticOutline,
+  elasticLogo,
+} from '../../../presentation_util/common/lib';
+import { getFunctionErrors } from '../i18n';
+import { revealImageFunction } from './reveal_image_function';
+import { Origin } from '../types';
+import { ExecutionContext } from 'src/plugins/expressions';
+
+const errors = getFunctionErrors().revealImage;
+
+describe('revealImageFunction', () => {
+  const fn = functionWrapper(revealImageFunction);
+
+  it('returns a render as revealImage', () => {
+    const result = fn(
+      0.5,
+      {
+        image: null,
+        emptyImage: null,
+        origin: Origin.BOTTOM,
+      },
+      {} as ExecutionContext
+    );
+    expect(result).toHaveProperty('type', 'render');
+    expect(result).toHaveProperty('as', 'revealImage');
+  });
+
+  describe('context', () => {
+    it('throws when context is not a number between 0 and 1', () => {
+      expect(() => {
+        fn(
+          10,
+          {
+            image: elasticLogo,
+            emptyImage: elasticOutline,
+            origin: Origin.TOP,
+          },
+          {} as ExecutionContext
+        );
+      }).toThrow(new RegExp(errors.invalidPercent(10).message));
+
+      expect(() => {
+        fn(
+          -0.1,
+          {
+            image: elasticLogo,
+            emptyImage: elasticOutline,
+            origin: Origin.TOP,
+          },
+          {} as ExecutionContext
+        );
+      }).toThrow(new RegExp(errors.invalidPercent(-0.1).message));
+    });
+  });
+
+  describe('args', () => {
+    describe('image', () => {
+      it('sets the image', () => {
+        const result = fn(
+          0.89,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: elasticLogo,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('image', elasticLogo);
+      });
+
+      it('defaults to the Elastic outline logo', () => {
+        const result = fn(
+          0.89,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('image', elasticOutline);
+      });
+    });
+
+    describe('emptyImage', () => {
+      it('sets the background image', () => {
+        const result = fn(
+          0,
+          {
+            emptyImage: elasticLogo,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('emptyImage', elasticLogo);
+      });
+
+      it('sets emptyImage to null', () => {
+        const result = fn(
+          0,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('emptyImage', null);
+      });
+    });
+
+    describe('origin', () => {
+      it('sets which side to start the reveal from', () => {
+        let result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.TOP,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'top');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.LEFT,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'left');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.BOTTOM,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'bottom');
+        result = fn(
+          1,
+          {
+            emptyImage: null,
+            origin: Origin.RIGHT,
+            image: null,
+          },
+          {} as ExecutionContext
+        ).value;
+        expect(result).toHaveProperty('origin', 'right');
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts
similarity index 59%
rename from x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts
rename to src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts
index 91d70609ab708..33e61e85f9531 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/revealImage.ts
+++ b/src/plugins/expression_reveal_image/common/expression_functions/reveal_image_function.ts
@@ -1,41 +1,16 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
-import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-import { elasticOutline } from '../../lib/elastic_outline';
-import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
+import { resolveWithMissingImage, elasticOutline } from '../../../presentation_util/common/lib';
+import { getFunctionHelp, getFunctionErrors } from '../i18n';
+import { ExpressionRevealImageFunction, Origin } from '../types';
 
-export enum Origin {
-  TOP = 'top',
-  LEFT = 'left',
-  BOTTOM = 'bottom',
-  RIGHT = 'right',
-}
-
-interface Arguments {
-  image: string | null;
-  emptyImage: string | null;
-  origin: Origin;
-}
-
-export interface Output {
-  image: string;
-  emptyImage: string;
-  origin: Origin;
-  percent: number;
-}
-
-export function revealImage(): ExpressionFunctionDefinition<
-  'revealImage',
-  number,
-  Arguments,
-  ExpressionValueRender<Output>
-> {
+export const revealImageFunction: ExpressionRevealImageFunction = () => {
   const { help, args: argHelp } = getFunctionHelp().revealImage;
   const errors = getFunctionErrors().revealImage;
 
@@ -80,4 +55,4 @@ export function revealImage(): ExpressionFunctionDefinition<
       };
     },
   };
-}
+};
diff --git a/src/plugins/expression_reveal_image/common/i18n/constants.ts b/src/plugins/expression_reveal_image/common/i18n/constants.ts
new file mode 100644
index 0000000000000..413f376515a33
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/constants.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const BASE64 = '`base64`';
+export const URL = 'URL';
diff --git a/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts
similarity index 52%
rename from x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts
rename to src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts
index 374334824d61a..ccf9967bd6a65 100644
--- a/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/dict/reveal_image.ts
@@ -1,23 +1,21 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import { i18n } from '@kbn/i18n';
-import { revealImage } from '../../../canvas_plugin_src/functions/common/revealImage';
-import { FunctionHelp } from '../function_help';
-import { FunctionFactory } from '../../../types';
 import { Position } from '../../../types';
 import { BASE64, URL } from '../../constants';
 
-export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
-  help: i18n.translate('xpack.canvas.functions.revealImageHelpText', {
+export const help = {
+  help: i18n.translate('expressionRevealImage.functions.revealImageHelpText', {
     defaultMessage: 'Configures an image reveal element.',
   }),
   args: {
-    image: i18n.translate('xpack.canvas.functions.revealImage.args.imageHelpText', {
+    image: i18n.translate('expressionRevealImage.functions.revealImage.args.imageHelpText', {
       defaultMessage:
         'The image to reveal. Provide an image asset as a {BASE64} data {URL}, ' +
         'or pass in a sub-expression.',
@@ -26,16 +24,19 @@ export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
         URL,
       },
     }),
-    emptyImage: i18n.translate('xpack.canvas.functions.revealImage.args.emptyImageHelpText', {
-      defaultMessage:
-        'An optional background image to reveal over. ' +
-        'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.',
-      values: {
-        BASE64,
-        URL,
-      },
-    }),
-    origin: i18n.translate('xpack.canvas.functions.revealImage.args.originHelpText', {
+    emptyImage: i18n.translate(
+      'expressionRevealImage.functions.revealImage.args.emptyImageHelpText',
+      {
+        defaultMessage:
+          'An optional background image to reveal over. ' +
+          'Provide an image asset as a `{BASE64}` data {URL}, or pass in a sub-expression.',
+        values: {
+          BASE64,
+          URL,
+        },
+      }
+    ),
+    origin: i18n.translate('expressionRevealImage.functions.revealImage.args.originHelpText', {
       defaultMessage: 'The position to start the image fill. For example, {list}, or {end}.',
       values: {
         list: Object.values(Position)
@@ -50,7 +51,7 @@ export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
 export const errors = {
   invalidPercent: (percent: number) =>
     new Error(
-      i18n.translate('xpack.canvas.functions.revealImage.invalidPercentErrorMessage', {
+      i18n.translate('expressionRevealImage.functions.revealImage.invalidPercentErrorMessage', {
         defaultMessage: "Invalid value: '{percent}'. Percentage must be between 0 and 1",
         values: {
           percent,
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts
new file mode 100644
index 0000000000000..09cd26c9e620b
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_errors.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { errors as revealImage } from './dict/reveal_image';
+
+export const getFunctionErrors = () => ({
+  revealImage,
+});
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts
new file mode 100644
index 0000000000000..30e79b120771b
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/function_help.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { help as revealImage } from './dict/reveal_image';
+
+/**
+ * Help text for Canvas Functions should be properly localized. This function will
+ * return a dictionary of help strings, organized by `ExpressionFunctionDefinition`
+ * specification and then by available arguments within each `ExpressionFunctionDefinition`.
+ *
+ * This a function, rather than an object, to future-proof string initialization,
+ * if ever necessary.
+ */
+export const getFunctionHelp = () => ({
+  revealImage,
+});
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts
new file mode 100644
index 0000000000000..3d36b123421f4
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_functions/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './function_help';
+export * from './function_errors';
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts
new file mode 100644
index 0000000000000..4f70f9d30b74b
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { strings as revealImage } from './reveal_image';
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts
new file mode 100644
index 0000000000000..a32fdbd4c0b50
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/dict/reveal_image.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { i18n } from '@kbn/i18n';
+
+export const strings = {
+  getDisplayName: () =>
+    i18n.translate('expressionRevealImage.renderer.revealImage.displayName', {
+      defaultMessage: 'Image reveal',
+    }),
+  getHelpDescription: () =>
+    i18n.translate('expressionRevealImage.renderer.revealImage.helpDescription', {
+      defaultMessage: 'Reveal a percentage of an image to make a custom gauge-style chart',
+    }),
+};
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts
new file mode 100644
index 0000000000000..7e637f240d15c
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './renderer_strings';
diff --git a/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts
new file mode 100644
index 0000000000000..b74230a2a5d76
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/expression_renderers/renderer_strings.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { revealImage } from './dict';
+
+/**
+ * Help text for Canvas Functions should be properly localized. This function will
+ * return a dictionary of help strings, organized by `ExpressionFunctionDefinition`
+ * specification and then by available arguments within each `ExpressionFunctionDefinition`.
+ *
+ * This a function, rather than an object, to future-proof string initialization,
+ * if ever necessary.
+ */
+export const getRendererStrings = () => ({
+  revealImage,
+});
diff --git a/src/plugins/expression_reveal_image/common/i18n/index.ts b/src/plugins/expression_reveal_image/common/i18n/index.ts
new file mode 100644
index 0000000000000..9c50bfab1305d
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/i18n/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './expression_functions';
+export * from './expression_renderers';
diff --git a/src/plugins/expression_reveal_image/common/index.ts b/src/plugins/expression_reveal_image/common/index.ts
new file mode 100755
index 0000000000000..95503b36acdb6
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './constants';
+export * from './expression_functions';
diff --git a/src/plugins/expression_reveal_image/common/types/expression_functions.ts b/src/plugins/expression_reveal_image/common/types/expression_functions.ts
new file mode 100644
index 0000000000000..ee291e204acfb
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/types/expression_functions.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { ExpressionFunctionDefinition, ExpressionValueRender } from 'src/plugins/expressions';
+
+export enum Origin {
+  TOP = 'top',
+  LEFT = 'left',
+  BOTTOM = 'bottom',
+  RIGHT = 'right',
+}
+
+interface Arguments {
+  image: string | null;
+  emptyImage: string | null;
+  origin: Origin;
+}
+
+export interface Output {
+  image: string;
+  emptyImage: string;
+  origin: Origin;
+  percent: number;
+}
+
+export type ExpressionRevealImageFunction = () => ExpressionFunctionDefinition<
+  'revealImage',
+  number,
+  Arguments,
+  ExpressionValueRender<Output>
+>;
+
+export enum Position {
+  TOP = 'top',
+  BOTTOM = 'bottom',
+  LEFT = 'left',
+  RIGHT = 'right',
+}
diff --git a/src/plugins/expression_reveal_image/common/types/expression_renderers.ts b/src/plugins/expression_reveal_image/common/types/expression_renderers.ts
new file mode 100644
index 0000000000000..77dacaefc1bd1
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/types/expression_renderers.ts
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type OriginString = 'bottom' | 'left' | 'top' | 'right';
+
+export interface RevealImageRendererConfig {
+  percent: number;
+  origin?: OriginString;
+  image?: string;
+  emptyImage?: string;
+}
+
+export interface NodeDimensions {
+  width: number;
+  height: number;
+}
diff --git a/src/plugins/expression_reveal_image/common/types/index.ts b/src/plugins/expression_reveal_image/common/types/index.ts
new file mode 100644
index 0000000000000..ec934e7affe88
--- /dev/null
+++ b/src/plugins/expression_reveal_image/common/types/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export * from './expression_functions';
+export * from './expression_renderers';
diff --git a/src/plugins/expression_reveal_image/jest.config.js b/src/plugins/expression_reveal_image/jest.config.js
new file mode 100644
index 0000000000000..aac5fad293846
--- /dev/null
+++ b/src/plugins/expression_reveal_image/jest.config.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/expression_reveal_image'],
+};
diff --git a/src/plugins/expression_reveal_image/kibana.json b/src/plugins/expression_reveal_image/kibana.json
new file mode 100755
index 0000000000000..9af9a5857dcfb
--- /dev/null
+++ b/src/plugins/expression_reveal_image/kibana.json
@@ -0,0 +1,10 @@
+{
+  "id": "expressionRevealImage",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": ["expressions", "presentationUtil"],
+  "optionalPlugins": [],
+  "requiredBundles": []
+}
diff --git a/src/plugins/expression_reveal_image/public/components/index.ts b/src/plugins/expression_reveal_image/public/components/index.ts
new file mode 100644
index 0000000000000..23cb4d7a20cb8
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/components/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './reveal_image_component';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss b/src/plugins/expression_reveal_image/public/components/reveal_image.scss
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss
rename to src/plugins/expression_reveal_image/public/components/reveal_image.scss
diff --git a/src/plugins/expression_reveal_image/public/components/reveal_image_component.tsx b/src/plugins/expression_reveal_image/public/components/reveal_image_component.tsx
new file mode 100644
index 0000000000000..a9c24fca78d9b
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/components/reveal_image_component.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import { useResizeObserver } from '@elastic/eui';
+import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { NodeDimensions, RevealImageRendererConfig, OriginString } from '../../common/types';
+import { isValidUrl, elasticOutline } from '../../../presentation_util/public';
+import './reveal_image.scss';
+
+interface RevealImageComponentProps extends RevealImageRendererConfig {
+  onLoaded: IInterpreterRenderHandlers['done'];
+  parentNode: HTMLElement;
+}
+
+interface ImageStyles {
+  width?: string;
+  height?: string;
+  clipPath?: string;
+}
+
+interface AlignerStyles {
+  backgroundImage?: string;
+}
+
+function RevealImageComponent({
+  onLoaded,
+  parentNode,
+  percent,
+  origin,
+  image,
+  emptyImage,
+}: RevealImageComponentProps) {
+  const [loaded, setLoaded] = useState(false);
+  const [dimensions, setDimensions] = useState<NodeDimensions>({
+    width: 1,
+    height: 1,
+  });
+
+  const imgRef = useRef<HTMLImageElement>(null);
+
+  const parentNodeDimensions = useResizeObserver(parentNode);
+
+  // modify the top-level container class
+  parentNode.className = 'revealImage';
+
+  // set up the overlay image
+  const updateImageView = useCallback(() => {
+    if (imgRef.current) {
+      setDimensions({
+        height: imgRef.current.naturalHeight,
+        width: imgRef.current.naturalWidth,
+      });
+
+      setLoaded(true);
+      onLoaded();
+    }
+  }, [imgRef, onLoaded]);
+
+  useEffect(() => {
+    updateImageView();
+  }, [parentNodeDimensions, updateImageView]);
+
+  function getClipPath(percentParam: number, originParam: OriginString = 'bottom') {
+    const directions: Record<OriginString, number> = { bottom: 0, left: 1, top: 2, right: 3 };
+    const values: Array<number | string> = [0, 0, 0, 0];
+    values[directions[originParam]] = `${100 - percentParam * 100}%`;
+    return `inset(${values.join(' ')})`;
+  }
+
+  function getImageSizeStyle() {
+    const imgStyles: ImageStyles = {};
+
+    const imgDimensions = {
+      height: dimensions.height,
+      width: dimensions.width,
+      ratio: dimensions.height / dimensions.width,
+    };
+
+    const domNodeDimensions = {
+      width: parentNode.clientWidth,
+      height: parentNode.clientHeight,
+      ratio: parentNode.clientHeight / parentNode.clientWidth,
+    };
+
+    if (imgDimensions.ratio > domNodeDimensions.ratio) {
+      imgStyles.height = `${domNodeDimensions.height}px`;
+      imgStyles.width = 'initial';
+    } else {
+      imgStyles.width = `${domNodeDimensions.width}px`;
+      imgStyles.height = 'initial';
+    }
+
+    return imgStyles;
+  }
+
+  const imgSrc = isValidUrl(image ?? '') ? image : elasticOutline;
+
+  const alignerStyles: AlignerStyles = {};
+
+  if (isValidUrl(emptyImage ?? '')) {
+    // only use empty image if one is provided
+    alignerStyles.backgroundImage = `url(${emptyImage})`;
+  }
+
+  let imgStyles: ImageStyles = {};
+  if (imgRef.current && loaded) imgStyles = getImageSizeStyle();
+
+  imgStyles.clipPath = getClipPath(percent, origin);
+  if (imgRef.current && loaded) {
+    imgRef.current.style.setProperty('-webkit-clip-path', getClipPath(percent, origin));
+  }
+
+  return (
+    <div className="revealImageAligner" style={alignerStyles}>
+      <img
+        ref={imgRef}
+        onLoad={updateImageView}
+        className="revealImage__image"
+        src={imgSrc ?? ''}
+        alt=""
+        role="presentation"
+        style={imgStyles}
+      />
+    </div>
+  );
+}
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { RevealImageComponent as default };
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot
similarity index 100%
rename from x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/__snapshots__/reveal_image.stories.storyshot
rename to src/plugins/expression_reveal_image/public/expression_renderers/__stories__/__snapshots__/reveal_image.stories.storyshot
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.tsx
new file mode 100644
index 0000000000000..bc70b3685e24e
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/expression_renderers/__stories__/reveal_image_renderer.stories.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { revealImageRenderer } from '../';
+import { elasticOutline, elasticLogo } from '../../../../presentation_util/public';
+import { Render } from '../../../../presentation_util/public/__stories__';
+
+import { Origin } from '../../../common/types/expression_functions';
+
+storiesOf('renderers/revealImage', module).add('default', () => {
+  const config = {
+    image: elasticLogo,
+    emptyImage: elasticOutline,
+    origin: Origin.LEFT,
+    percent: 0.45,
+  };
+
+  return <Render renderer={revealImageRenderer} config={config} />;
+});
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/index.ts b/src/plugins/expression_reveal_image/public/expression_renderers/index.ts
new file mode 100644
index 0000000000000..433a81884f157
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/expression_renderers/index.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { revealImageRenderer } from './reveal_image_renderer';
+
+export const renderers = [revealImageRenderer];
+
+export { revealImageRenderer };
diff --git a/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx b/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx
new file mode 100644
index 0000000000000..4d84de3da994c
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/expression_renderers/reveal_image_renderer.tsx
@@ -0,0 +1,42 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { lazy } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { I18nProvider } from '@kbn/i18n/react';
+import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { withSuspense } from '../../../presentation_util/public';
+import { getRendererStrings } from '../../common/i18n';
+import { RevealImageRendererConfig } from '../../common/types';
+
+const { revealImage: revealImageStrings } = getRendererStrings();
+
+const LazyRevealImageComponent = lazy(() => import('../components/reveal_image_component'));
+const RevealImageComponent = withSuspense(LazyRevealImageComponent, null);
+
+export const revealImageRenderer = (): ExpressionRenderDefinition<RevealImageRendererConfig> => ({
+  name: 'revealImage',
+  displayName: revealImageStrings.getDisplayName(),
+  help: revealImageStrings.getHelpDescription(),
+  reuseDomNode: true,
+  render: async (
+    domNode: HTMLElement,
+    config: RevealImageRendererConfig,
+    handlers: IInterpreterRenderHandlers
+  ) => {
+    handlers.onDestroy(() => {
+      unmountComponentAtNode(domNode);
+    });
+
+    render(
+      <I18nProvider>
+        <RevealImageComponent {...config} parentNode={domNode} onLoaded={handlers.done} />
+      </I18nProvider>,
+      domNode
+    );
+  },
+});
diff --git a/src/plugins/expression_reveal_image/public/index.ts b/src/plugins/expression_reveal_image/public/index.ts
new file mode 100755
index 0000000000000..00cb14e0fc064
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/index.ts
@@ -0,0 +1,17 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionRevealImagePlugin } from './plugin';
+
+export type { ExpressionRevealImagePluginSetup, ExpressionRevealImagePluginStart } from './plugin';
+
+export function plugin() {
+  return new ExpressionRevealImagePlugin();
+}
+
+export * from './expression_renderers';
diff --git a/src/plugins/expression_reveal_image/public/plugin.ts b/src/plugins/expression_reveal_image/public/plugin.ts
new file mode 100755
index 0000000000000..5f6496a25f820
--- /dev/null
+++ b/src/plugins/expression_reveal_image/public/plugin.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { ExpressionsStart, ExpressionsSetup } from '../../expressions/public';
+import { revealImageRenderer } from './expression_renderers';
+
+interface SetupDeps {
+  expressions: ExpressionsSetup;
+}
+
+interface StartDeps {
+  expression: ExpressionsStart;
+}
+
+export type ExpressionRevealImagePluginSetup = void;
+export type ExpressionRevealImagePluginStart = void;
+
+export class ExpressionRevealImagePlugin
+  implements
+    Plugin<
+      ExpressionRevealImagePluginSetup,
+      ExpressionRevealImagePluginStart,
+      SetupDeps,
+      StartDeps
+    > {
+  public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRevealImagePluginSetup {
+    expressions.registerRenderer(revealImageRenderer);
+  }
+
+  public start(core: CoreStart): ExpressionRevealImagePluginStart {}
+
+  public stop() {}
+}
diff --git a/src/plugins/expression_reveal_image/server/index.ts b/src/plugins/expression_reveal_image/server/index.ts
new file mode 100644
index 0000000000000..b86c356974321
--- /dev/null
+++ b/src/plugins/expression_reveal_image/server/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionRevealImagePlugin } from './plugin';
+
+export type { ExpressionRevealImagePluginSetup, ExpressionRevealImagePluginStart } from './plugin';
+
+export function plugin() {
+  return new ExpressionRevealImagePlugin();
+}
diff --git a/src/plugins/expression_reveal_image/server/plugin.ts b/src/plugins/expression_reveal_image/server/plugin.ts
new file mode 100644
index 0000000000000..446ef018eb7d3
--- /dev/null
+++ b/src/plugins/expression_reveal_image/server/plugin.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
+import { ExpressionsServerStart, ExpressionsServerSetup } from '../../expressions/server';
+import { revealImageFunction } from '../common';
+
+interface SetupDeps {
+  expressions: ExpressionsServerSetup;
+}
+
+interface StartDeps {
+  expression: ExpressionsServerStart;
+}
+
+export type ExpressionRevealImagePluginSetup = void;
+export type ExpressionRevealImagePluginStart = void;
+
+export class ExpressionRevealImagePlugin
+  implements
+    Plugin<
+      ExpressionRevealImagePluginSetup,
+      ExpressionRevealImagePluginStart,
+      SetupDeps,
+      StartDeps
+    > {
+  public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionRevealImagePluginSetup {
+    expressions.registerFunction(revealImageFunction);
+  }
+
+  public start(core: CoreStart): ExpressionRevealImagePluginStart {}
+
+  public stop() {}
+}
diff --git a/src/plugins/expression_reveal_image/tsconfig.json b/src/plugins/expression_reveal_image/tsconfig.json
new file mode 100644
index 0000000000000..aa4562ec73576
--- /dev/null
+++ b/src/plugins/expression_reveal_image/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./target/types",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+  ],
+  "references": [
+    { "path": "../../core/tsconfig.json" },
+    { "path": "../presentation_util/tsconfig.json" },
+    { "path": "../expressions/tsconfig.json" },
+  ]
+}
diff --git a/src/plugins/presentation_util/common/lib/index.ts b/src/plugins/presentation_util/common/lib/index.ts
new file mode 100644
index 0000000000000..3fe90009ad8df
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/index.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './utils';
+export * from './test_helpers';
diff --git a/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts b/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts
new file mode 100644
index 0000000000000..4ec02fd622cf7
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/test_helpers/function_wrapper.ts
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { mapValues } from 'lodash';
+import {
+  ExpressionValueBoxed,
+  typeSpecs,
+  ExpressionFunctionDefinition,
+} from '../../../../expressions/common';
+
+type FnType = () => typeof typeSpecs[number] &
+  ExpressionFunctionDefinition<string, any, Record<string, any>, ExpressionValueBoxed<any, any>>;
+
+// It takes a function spec and passes in default args into the spec fn
+export const functionWrapper = (fnSpec: FnType): ReturnType<FnType>['fn'] => {
+  const spec = fnSpec();
+  const defaultArgs = mapValues(spec.args, (argSpec) => {
+    return argSpec.default;
+  });
+
+  return (context, args, handlers) => spec.fn(context, { ...defaultArgs, ...args }, handlers);
+};
diff --git a/src/plugins/presentation_util/common/lib/test_helpers/index.ts b/src/plugins/presentation_util/common/lib/test_helpers/index.ts
new file mode 100644
index 0000000000000..a6ea8da6ac6e9
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/test_helpers/index.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './function_wrapper';
diff --git a/x-pack/plugins/canvas/common/lib/dataurl.test.ts b/src/plugins/presentation_util/common/lib/utils/dataurl.test.ts
similarity index 94%
rename from x-pack/plugins/canvas/common/lib/dataurl.test.ts
rename to src/plugins/presentation_util/common/lib/utils/dataurl.test.ts
index 9ddd0a50ea9d5..5820b10f589fe 100644
--- a/x-pack/plugins/canvas/common/lib/dataurl.test.ts
+++ b/src/plugins/presentation_util/common/lib/utils/dataurl.test.ts
@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import { isValidDataUrl, parseDataUrl } from './dataurl';
diff --git a/x-pack/plugins/canvas/common/lib/dataurl.ts b/src/plugins/presentation_util/common/lib/utils/dataurl.ts
similarity index 90%
rename from x-pack/plugins/canvas/common/lib/dataurl.ts
rename to src/plugins/presentation_util/common/lib/utils/dataurl.ts
index 2ae28b621c425..9ac232369cdc1 100644
--- a/x-pack/plugins/canvas/common/lib/dataurl.ts
+++ b/src/plugins/presentation_util/common/lib/utils/dataurl.ts
@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import { fromByteArray } from 'base64-js';
diff --git a/x-pack/plugins/canvas/public/lib/elastic_logo.ts b/src/plugins/presentation_util/common/lib/utils/elastic_logo.ts
similarity index 96%
rename from x-pack/plugins/canvas/public/lib/elastic_logo.ts
rename to src/plugins/presentation_util/common/lib/utils/elastic_logo.ts
index 81c79c39143d6..9a789d1a5fb03 100644
--- a/x-pack/plugins/canvas/public/lib/elastic_logo.ts
+++ b/src/plugins/presentation_util/common/lib/utils/elastic_logo.ts
@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 export const elasticLogo =
diff --git a/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts b/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts
new file mode 100644
index 0000000000000..4747be58127f7
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/utils/elastic_outline.ts
@@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const elasticOutline =
+  'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
diff --git a/x-pack/plugins/canvas/common/lib/httpurl.test.ts b/src/plugins/presentation_util/common/lib/utils/httpurl.test.ts
similarity index 89%
rename from x-pack/plugins/canvas/common/lib/httpurl.test.ts
rename to src/plugins/presentation_util/common/lib/utils/httpurl.test.ts
index 1cd00114bf7ca..20cd40480691d 100644
--- a/x-pack/plugins/canvas/common/lib/httpurl.test.ts
+++ b/src/plugins/presentation_util/common/lib/utils/httpurl.test.ts
@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import { isValidHttpUrl } from './httpurl';
diff --git a/x-pack/plugins/canvas/common/lib/httpurl.ts b/src/plugins/presentation_util/common/lib/utils/httpurl.ts
similarity index 67%
rename from x-pack/plugins/canvas/common/lib/httpurl.ts
rename to src/plugins/presentation_util/common/lib/utils/httpurl.ts
index 4f8b03aa2a062..4777eb4c8128d 100644
--- a/x-pack/plugins/canvas/common/lib/httpurl.ts
+++ b/src/plugins/presentation_util/common/lib/utils/httpurl.ts
@@ -1,8 +1,9 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 // A cheap regex to distinguish an HTTP URL string from a data URL string
diff --git a/src/plugins/presentation_util/common/lib/utils/index.ts b/src/plugins/presentation_util/common/lib/utils/index.ts
new file mode 100644
index 0000000000000..eed4acf78b2be
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/utils/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './dataurl';
+export * from './elastic_logo';
+export * from './elastic_outline';
+export * from './httpurl';
+export * from './missing_asset';
+export * from './resolve_dataurl';
+export * from './url';
diff --git a/src/plugins/presentation_util/common/lib/utils/missing_asset.ts b/src/plugins/presentation_util/common/lib/utils/missing_asset.ts
new file mode 100644
index 0000000000000..10d429870c88c
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/utils/missing_asset.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// CC0, source: https://pixabay.com/en/question-mark-confirmation-question-838656/
+export const missingImage =
+  'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJiIiB4PSItLjM2IiB5PSItLjM2IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNDY0Ii8+PC9maWx0ZXI+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTU5LjM0IiB4Mj0iMTg0LjQ4IiB5MT0iNzI3LjM2IiB5Mj0iNzQ5Ljg5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEuNTMgLTU0OS42OCkgc2NhbGUoLjc3MDAyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNlYmYwZWQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmYWZhZmEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xNS40MzcgMi42OTVsMTQuNTA2IDI0LjQ3NkgxLjI4N2wxNC4xNS0yNC40NzZ6IiBmaWxsPSJ1cmwoI2EpIiBzdHJva2U9InJlZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjgzMTk3IDAgMCAuNTU0NjYgLTc4LjU4MyAtMzgzLjUxKSIgZD0iTTExMS4zMSA3MzEuMmMtMy4yODMtMy45MjUtMy41OTUtNi4xNDgtMi4wMjQtMTAuNDM4IDMuMzM2LTYuMTQ1IDQuNDk2LTguMDY4IDUuNDEtOS40MDUgMS45MDEgNS4xNjIgMi4xMjYgMTkuMTQtMy4zODYgMTkuODQzeiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuODc2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNiKSIvPjxnIGZpbGwtb3BhY2l0eT0iLjgyIj48cGF0aCBkPSJNMTUuMDQ2IDIwLjIyN2gtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY3IDAtLjg5Ni0uMTc1LTEuNTU3LS41MjYtMS45ODItLjM1LS40MjUtLjc2NS0uNjM3LTEuMjQ0LS42MzctLjM2NCAwLS42Ny4wOTgtLjkyLjI5My0uMTg5LjE0OS0uMjgzLjMwNC0uMjgzLjQ2NiAwIC4xMDcuMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDk0IDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNTEuNTQtMS4wMjkgMS4xNC0yLjAzMyAxLjgtLjY3NC40NDUtMS4xMi44NDMtMS4zMzUgMS4xOTQtLjIxLjM0My0uMzM3Ljg3My0uMzg0IDEuNTg3bS0uMTEyIDEuNDc3Yy40NTIgMCAuODM2LjE1OCAxLjE1My40NzUuMzE3LjMxNy40NzYuNzAxLjQ3NiAxLjE1MyAwIC40NTItLjE1OS44NC0uNDc2IDEuMTYzYTEuNTcgMS41NyAwIDAgMS0xLjE1My40NzUgMS41NyAxLjU3IDAgMCAxLTEuMTUzLS40NzUgMS42MDQgMS42MDQgMCAwIDEtLjQ3NS0xLjE2M2MwLS40NTIuMTU5LS44MzYuNDc1LTEuMTUzYTEuNTcgMS41NyAwIDAgMSAxLjE1My0uNDc1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9Ii40ODYiLz48cGF0aCBkPSJNMTUuMzI3IDIwLjUwOGgtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY2IDAtLjg5Ny0uMTc1LTEuNTU4LS41MjYtMS45ODMtLjM1LS40MjQtLjc2NS0uNjM3LTEuMjQzLS42MzctLjM2NSAwLS42NzEuMDk4LS45Mi4yOTMtLjE5LjE0OS0uMjg0LjMwNC0uMjg0LjQ2NiAwIC4xMDguMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDkzIDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNS41NC0xLjAyOCAxLjE0LTIuMDMzIDEuOC0uNjc0LjQ0NS0uODUzLjg0My0xLjA2OCAxLjE5NC0uMjEuMzQzLS4zMzcuODczLS4zODUgMS41ODdtLS4zNzggMS40NzdjLjQ1MiAwIC44MzYuMTU4IDEuMTUzLjQ3NS4zMTcuMzE3LjQ3Ni43MDEuNDc2IDEuMTUzIDAgLjQ1Mi0uMTU5Ljg0LS40NzYgMS4xNjNhMS41NyAxLjU3IDAgMCAxLTEuMTUzLjQ3NiAxLjU3IDEuNTcgMCAwIDEtMS4xNTMtLjQ3NiAxLjYwNCAxLjYwNCAwIDAgMS0uNDc1LTEuMTYzYzAtLjQ1Mi4xNTktLjgzNi40NzUtMS4xNTNhMS41NyAxLjU3IDAgMCAxIDEuMTUzLS40NzUiIGZpbGwtb3BhY2l0eT0iLjgyIi8+PC9nPjwvc3ZnPg==';
diff --git a/x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts
similarity index 84%
rename from x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js
rename to src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts
index 72aaa1dfbd502..c2b9a444d20ef 100644
--- a/x-pack/plugins/canvas/common/lib/resolve_dataurl.test.js
+++ b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.test.ts
@@ -1,11 +1,12 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import { missingImage } from '../../common/lib/missing_asset';
+import { missingImage } from './missing_asset';
 import { resolveFromArgs, resolveWithMissingImage } from './resolve_dataurl';
 
 describe('resolve_dataurl', () => {
diff --git a/x-pack/plugins/canvas/common/lib/resolve_dataurl.ts b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts
similarity index 75%
rename from x-pack/plugins/canvas/common/lib/resolve_dataurl.ts
rename to src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts
index 79e49c0595355..db94bdf04c32b 100644
--- a/x-pack/plugins/canvas/common/lib/resolve_dataurl.ts
+++ b/src/plugins/presentation_util/common/lib/utils/resolve_dataurl.ts
@@ -1,13 +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; you may not use this file except in compliance with the Elastic License
- * 2.0.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import { get } from 'lodash';
-import { isValidUrl } from '../../common/lib/url';
-import { missingImage } from '../../common/lib/missing_asset';
+import { isValidUrl } from './url';
+import { missingImage } from './missing_asset';
 
 /*
  * NOTE: args.dataurl can come as an expression here.
diff --git a/x-pack/plugins/canvas/common/lib/url.test.ts b/src/plugins/presentation_util/common/lib/utils/url.test.ts
similarity index 70%
rename from x-pack/plugins/canvas/common/lib/url.test.ts
rename to src/plugins/presentation_util/common/lib/utils/url.test.ts
index 654602eea2093..4599e776a6266 100644
--- a/x-pack/plugins/canvas/common/lib/url.test.ts
+++ b/src/plugins/presentation_util/common/lib/utils/url.test.ts
@@ -1,11 +1,12 @@
 /*
  * 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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
-import { missingImage } from '../../common/lib/missing_asset';
+import { missingImage } from './missing_asset';
 import { isValidUrl } from './url';
 
 describe('resolve_dataurl', () => {
diff --git a/src/plugins/presentation_util/common/lib/utils/url.ts b/src/plugins/presentation_util/common/lib/utils/url.ts
new file mode 100644
index 0000000000000..e6a1064200cc1
--- /dev/null
+++ b/src/plugins/presentation_util/common/lib/utils/url.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { isValidDataUrl } from './dataurl';
+import { isValidHttpUrl } from './httpurl';
+
+export function isValidUrl(url: string) {
+  return isValidDataUrl(url) || isValidHttpUrl(url);
+}
diff --git a/src/plugins/presentation_util/jest.config.js b/src/plugins/presentation_util/jest.config.js
new file mode 100644
index 0000000000000..2250d70acb475
--- /dev/null
+++ b/src/plugins/presentation_util/jest.config.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/presentation_util'],
+};
diff --git a/src/plugins/presentation_util/kibana.json b/src/plugins/presentation_util/kibana.json
index c7d272dcd02a1..22ec919457cce 100644
--- a/src/plugins/presentation_util/kibana.json
+++ b/src/plugins/presentation_util/kibana.json
@@ -4,6 +4,9 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
+  "extraPublicDirs": [
+    "common/lib"
+  ],
   "requiredPlugins": [
     "savedObjects"
   ],
diff --git a/src/plugins/presentation_util/public/__stories__/index.tsx b/src/plugins/presentation_util/public/__stories__/index.tsx
new file mode 100644
index 0000000000000..078a16cb8cab2
--- /dev/null
+++ b/src/plugins/presentation_util/public/__stories__/index.tsx
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './render';
diff --git a/src/plugins/presentation_util/public/__stories__/render.tsx b/src/plugins/presentation_util/public/__stories__/render.tsx
new file mode 100644
index 0000000000000..29d95e6bf2819
--- /dev/null
+++ b/src/plugins/presentation_util/public/__stories__/render.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import React, { useRef, useEffect } from 'react';
+import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
+
+export const defaultHandlers: IInterpreterRenderHandlers = {
+  getRenderMode: () => 'display',
+  isSyncColorsEnabled: () => false,
+  done: action('done'),
+  onDestroy: action('onDestroy'),
+  reload: action('reload'),
+  update: action('update'),
+  event: action('event'),
+};
+
+/*
+  Uses a RenderDefinitionFactory and Config to render into an element.
+
+  Intended to be used for stories for RenderDefinitionFactory
+*/
+interface RenderAdditionalProps {
+  height?: string;
+  width?: string;
+  handlers?: IInterpreterRenderHandlers;
+}
+
+export const Render = <Renderer,>({
+  renderer,
+  config,
+  ...rest
+}: Renderer extends () => ExpressionRenderDefinition<infer Config>
+  ? { renderer: Renderer; config: Config } & RenderAdditionalProps
+  : { renderer: undefined; config: undefined } & RenderAdditionalProps) => {
+  const { height, width, handlers } = {
+    height: '200px',
+    width: '200px',
+    handlers: defaultHandlers,
+    ...rest,
+  };
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (renderer && containerRef.current !== null) {
+      renderer().render(containerRef.current, config, handlers);
+    }
+  }, [renderer, config, handlers]);
+
+  return (
+    <div style={{ width, height }} ref={containerRef}>
+      {' '}
+    </div>
+  );
+};
diff --git a/src/plugins/presentation_util/public/index.ts b/src/plugins/presentation_util/public/index.ts
index 5ad81c7e759bc..1e26011ff58ae 100644
--- a/src/plugins/presentation_util/public/index.ts
+++ b/src/plugins/presentation_util/public/index.ts
@@ -15,9 +15,20 @@ export {
   getStubPluginServices,
 } from './services';
 
+export {
+  KibanaPluginServiceFactory,
+  PluginServiceFactory,
+  PluginServices,
+  PluginServiceProviders,
+  PluginServiceProvider,
+  PluginServiceRegistry,
+  KibanaPluginServiceParams,
+} from './services/create';
+
 export { PresentationUtilPluginSetup, PresentationUtilPluginStart } from './types';
 export { SaveModalDashboardProps } from './components/types';
 export { projectIDs, ProjectID, Project } from '../common/labs';
+export * from '../common/lib';
 
 export {
   LazyLabsBeakerButton,
diff --git a/src/plugins/presentation_util/tsconfig.json b/src/plugins/presentation_util/tsconfig.json
index c0fafe8c3aaba..b389d94b19413 100644
--- a/src/plugins/presentation_util/tsconfig.json
+++ b/src/plugins/presentation_util/tsconfig.json
@@ -7,6 +7,9 @@
     "declaration": true,
     "declarationMap": true
   },
+  "extraPublicDirs": [
+    "common"
+  ],
   "include": [
     "common/**/*",
     "public/**/*",
diff --git a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
index da65b5b9fdda8..0a2e4ff78be26 100644
--- a/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
+++ b/src/plugins/saved_objects/public/finder/saved_object_finder.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -116,7 +116,7 @@ class SavedObjectFinderUi extends React.Component<
 
   private isComponentMounted: boolean = false;
 
-  private debouncedFetch = _.debounce(async (query: string) => {
+  private debouncedFetch = debounce(async (query: string) => {
     const metaDataMap = this.getSavedObjectMetaDataMap();
 
     const fields = Object.values(metaDataMap)
diff --git a/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts b/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts
index 1f2f7dc573dc7..40baff22f52c8 100644
--- a/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts
+++ b/src/plugins/saved_objects/public/saved_object/helpers/apply_es_resp.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { cloneDeep, defaults, forOwn, assign } from 'lodash';
 import { EsResponse, SavedObject, SavedObjectConfig, SavedObjectKibanaServices } from '../../types';
 import { SavedObjectNotFound } from '../../../../kibana_utils/public';
 import {
@@ -28,7 +28,7 @@ export async function applyESResp(
 ) {
   const mapping = expandShorthand(config.mapping ?? {});
   const savedObjectType = config.type || '';
-  savedObject._source = _.cloneDeep(resp._source);
+  savedObject._source = cloneDeep(resp._source);
   if (typeof resp.found === 'boolean' && !resp.found) {
     throw new SavedObjectNotFound(savedObjectType, savedObject.id || '');
   }
@@ -42,10 +42,10 @@ export async function applyESResp(
   }
 
   // assign the defaults to the response
-  _.defaults(savedObject._source, savedObject.defaults);
+  defaults(savedObject._source, savedObject.defaults);
 
   // transform the source using _deserializers
-  _.forOwn(mapping, (fieldMapping, fieldName) => {
+  forOwn(mapping, (fieldMapping, fieldName) => {
     if (fieldMapping._deserialize && typeof fieldName === 'string') {
       savedObject._source[fieldName] = fieldMapping._deserialize(
         savedObject._source[fieldName] as string
@@ -54,7 +54,7 @@ export async function applyESResp(
   });
 
   // Give obj all of the values in _source.fields
-  _.assign(savedObject, savedObject._source);
+  assign(savedObject, savedObject._source);
   savedObject.lastSavedTitle = savedObject.title;
 
   if (meta.searchSourceJSON) {
diff --git a/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts b/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts
index f1bc614dd1197..7ed729b4b7a0f 100644
--- a/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts
+++ b/src/plugins/saved_objects/public/saved_object/helpers/create_source.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { SavedObjectAttributes } from 'kibana/public';
 import { SavedObject, SavedObjectKibanaServices } from '../../types';
@@ -40,7 +40,7 @@ export async function createSource(
     return await savedObjectsClient.create(esType, source, options);
   } catch (err) {
     // record exists, confirm overwriting
-    if (_.get(err, 'res.status') === 409) {
+    if (get(err, 'res.status') === 409) {
       const confirmMessage = i18n.translate(
         'savedObjects.confirmModal.overwriteConfirmationMessage',
         {
diff --git a/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts b/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts
index cf0cea8d368da..b6dddf8d82b72 100644
--- a/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts
+++ b/src/plugins/saved_objects/public/saved_object/helpers/initialize_saved_object.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { cloneDeep, assign } from 'lodash';
 import { SavedObjectsClientContract } from 'kibana/public';
 import { SavedObject, SavedObjectConfig } from '../../types';
 
@@ -24,7 +24,7 @@ export async function intializeSavedObject(
 
   if (!savedObject.id) {
     // just assign the defaults and be done
-    _.assign(savedObject, savedObject.defaults);
+    assign(savedObject, savedObject.defaults);
     await savedObject.hydrateIndexPattern!();
     if (typeof config.afterESResp === 'function') {
       savedObject = await config.afterESResp(savedObject);
@@ -36,7 +36,7 @@ export async function intializeSavedObject(
   const respMapped = {
     _id: resp.id,
     _type: resp.type,
-    _source: _.cloneDeep(resp.attributes),
+    _source: cloneDeep(resp.attributes),
     references: resp.references,
     found: !!resp._version,
   };
diff --git a/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts b/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts
index eb9bef788fcdc..efe7a85f8f1e1 100644
--- a/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts
+++ b/src/plugins/saved_objects/public/saved_object/helpers/serialize_saved_object.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import _ from 'lodash';
+import { forOwn } from 'lodash';
 import { SavedObject, SavedObjectConfig } from '../../types';
 import { extractSearchSourceReferences } from '../../../../data/public';
 import { expandShorthand } from './field_mapping';
@@ -17,7 +17,7 @@ export function serializeSavedObject(savedObject: SavedObject, config: SavedObje
   const attributes = {} as Record<string, any>;
   const references = [];
 
-  _.forOwn(mapping, (fieldMapping, fieldName) => {
+  forOwn(mapping, (fieldMapping, fieldName) => {
     if (typeof fieldName !== 'string') {
       return;
     }
diff --git a/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.tsx b/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.tsx
new file mode 100644
index 0000000000000..6191df2ecce5b
--- /dev/null
+++ b/src/plugins/vis_type_timeseries/public/application/components/use_index_patter_mode_callout.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import useLocalStorage from 'react-use/lib/useLocalStorage';
+import { EuiButton, EuiCallOut, EuiFlexGroup, EuiLink } from '@elastic/eui';
+import { getCoreStart } from '../../services';
+
+const LOCAL_STORAGE_KEY = 'TSVB_INDEX_PATTERN_CALLOUT_HIDDEN';
+
+export const UseIndexPatternModeCallout = () => {
+  const [dismissed, setDismissed] = useLocalStorage(LOCAL_STORAGE_KEY, false);
+  const indexPatternModeLink = useMemo(
+    () => getCoreStart().docLinks.links.visualize.tsvbIndexPatternMode,
+    []
+  );
+
+  const dismissNotice = useCallback(() => {
+    setDismissed(true);
+  }, [setDismissed]);
+
+  if (dismissed) {
+    return null;
+  }
+
+  return (
+    <EuiCallOut
+      title={
+        <FormattedMessage
+          id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationTitle"
+          defaultMessage="TSVB now supports index patterns"
+        />
+      }
+      iconType="cheer"
+      size="s"
+    >
+      <p>
+        <FormattedMessage
+          id="visTypeTimeseries.visEditorVisualization.indexPatternMode.notificationMessage"
+          defaultMessage="Great news! You can now visualize the data from Elasticsearch indices or Kibana index patterns. {indexPatternModeLink}."
+          values={{
+            indexPatternModeLink: (
+              <EuiLink href={indexPatternModeLink} target="_blank" external>
+                <FormattedMessage
+                  id="visTypeTimeseries.visEditorVisualization.indexPatternMode.link"
+                  defaultMessage="Check it out."
+                />
+              </EuiLink>
+            ),
+          }}
+        />
+      </p>
+      <EuiFlexGroup gutterSize="none">
+        <EuiButton size="s" onClick={dismissNotice}>
+          <FormattedMessage
+            id="visTypeTimeseries.visEditorVisualization.indexPatternMode.dismissNoticeButtonText"
+            defaultMessage="Dismiss"
+          />
+        </EuiButton>
+      </EuiFlexGroup>
+    </EuiCallOut>
+  );
+};
diff --git a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx
index d11b5a60b31b7..424b39feff836 100644
--- a/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx
+++ b/src/plugins/vis_type_timeseries/public/application/components/vis_editor.tsx
@@ -12,7 +12,6 @@ import uuid from 'uuid/v4';
 import { share } from 'rxjs/operators';
 import { isEqual, isEmpty, debounce } from 'lodash';
 import { EventEmitter } from 'events';
-
 import type { IUiSettingsClient } from 'kibana/public';
 import {
   Vis,
@@ -35,6 +34,7 @@ import { VisPicker } from './vis_picker';
 import { fetchFields, VisFields } from '../lib/fetch_fields';
 import { getDataStart, getCoreStart } from '../../services';
 import { TimeseriesVisParams } from '../../types';
+import { UseIndexPatternModeCallout } from './use_index_patter_mode_callout';
 
 const VIS_STATE_DEBOUNCE_DELAY = 200;
 const APP_NAME = 'VisEditor';
@@ -182,6 +182,7 @@ export class VisEditor extends Component<TimeseriesEditorProps, TimeseriesEditor
       >
         <DefaultIndexPatternContext.Provider value={this.state.defaultIndex}>
           <div className="tvbEditor" data-test-subj="tvbVisEditor">
+            {!this.props.vis.params.use_kibana_indexes && <UseIndexPatternModeCallout />}
             <div className="tvbEditor--hideForReporting">
               <VisPicker currentVisType={model.type} onChange={this.handleChange} />
             </div>
diff --git a/x-pack/examples/embedded_lens_example/public/app.tsx b/x-pack/examples/embedded_lens_example/public/app.tsx
index a13ddbbd79ef0..bf43e200b902d 100644
--- a/x-pack/examples/embedded_lens_example/public/app.tsx
+++ b/x-pack/examples/embedded_lens_example/public/app.tsx
@@ -17,6 +17,7 @@ import {
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiTitle,
+  EuiCallOut,
 } from '@elastic/eui';
 import { IndexPattern } from 'src/plugins/data/public';
 import { CoreStart } from 'kibana/public';
@@ -149,6 +150,7 @@ export const App = (props: {
                 <EuiFlexGroup>
                   <EuiFlexItem grow={false}>
                     <EuiButton
+                      data-test-subj="lns-example-change-color"
                       isLoading={isLoading}
                       onClick={() => {
                         // eslint-disable-next-line no-bitwise
@@ -177,12 +179,32 @@ export const App = (props: {
                         setColor(newColor);
                       }}
                     >
-                      Edit in Lens
+                      Edit in Lens (new tab)
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      aria-label="Open lens in same tab"
+                      data-test-subj="lns-example-open-editor"
+                      isDisabled={!props.plugins.lens.canUseEditor()}
+                      onClick={() => {
+                        props.plugins.lens.navigateToPrefilledEditor(
+                          {
+                            id: '',
+                            timeRange: time,
+                            attributes: getLensAttributes(props.defaultIndexPattern!, color),
+                          },
+                          false
+                        );
+                      }}
+                    >
+                      Edit in Lens (same tab)
                     </EuiButton>
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       aria-label="Save visualization into library or embed directly into any dashboard"
+                      data-test-subj="lns-example-save"
                       isDisabled={!getLensAttributes(props.defaultIndexPattern, color)}
                       onClick={() => {
                         setIsSaveModalVisible(true);
@@ -191,6 +213,21 @@ export const App = (props: {
                       Save Visualization
                     </EuiButton>
                   </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      aria-label="Change time range"
+                      data-test-subj="lns-example-change-time-range"
+                      isDisabled={!getLensAttributes(props.defaultIndexPattern, color)}
+                      onClick={() => {
+                        setTime({
+                          from: '2015-09-18T06:31:44.000Z',
+                          to: '2015-09-23T18:31:44.000Z',
+                        });
+                      }}
+                    >
+                      Change time range
+                    </EuiButton>
+                  </EuiFlexItem>
                 </EuiFlexGroup>
                 <LensComponent
                   id=""
@@ -223,14 +260,19 @@ export const App = (props: {
                         color
                       ) as unknown) as LensEmbeddableInput
                     }
-                    isVisible={isSaveModalVisible}
                     onSave={() => {}}
                     onClose={() => setIsSaveModalVisible(false)}
                   />
                 )}
               </>
             ) : (
-              <p>This demo only works if your default index pattern is set and time based</p>
+              <EuiCallOut
+                title="Please define a default index pattern to use this demo"
+                color="danger"
+                iconType="alert"
+              >
+                <p>This demo only works if your default index pattern is set and time based</p>
+              </EuiCallOut>
             )}
           </EuiPageContentBody>
         </EuiPageContent>
diff --git a/x-pack/plugins/actions/server/plugin.ts b/x-pack/plugins/actions/server/plugin.ts
index 65b28015f7f93..2c5287525c597 100644
--- a/x-pack/plugins/actions/server/plugin.ts
+++ b/x-pack/plugins/actions/server/plugin.ts
@@ -152,7 +152,7 @@ export class ActionsPlugin implements Plugin<PluginSetupContract, PluginStartCon
   private readonly kibanaIndexConfig: { kibana: { index: string } };
 
   constructor(initContext: PluginInitializerContext) {
-    this.logger = initContext.logger.get('actions');
+    this.logger = initContext.logger.get();
     this.actionsConfig = getValidatedConfig(
       this.logger,
       resolveCustomHosts(this.logger, initContext.config.get<ActionsConfig>())
diff --git a/x-pack/plugins/alerting/server/plugin.ts b/x-pack/plugins/alerting/server/plugin.ts
index df63625bf242d..b906983017ff6 100644
--- a/x-pack/plugins/alerting/server/plugin.ts
+++ b/x-pack/plugins/alerting/server/plugin.ts
@@ -153,7 +153,7 @@ export class AlertingPlugin {
 
   constructor(initializerContext: PluginInitializerContext) {
     this.config = initializerContext.config.create<AlertsConfig>().pipe(first()).toPromise();
-    this.logger = initializerContext.logger.get('plugins', 'alerting');
+    this.logger = initializerContext.logger.get();
     this.taskRunnerFactory = new TaskRunnerFactory();
     this.alertsClientFactory = new AlertsClientFactory();
     this.alertingAuthorizationClientFactory = new AlertingAuthorizationClientFactory();
diff --git a/x-pack/plugins/apm/public/components/app/Settings/schema/confirm_switch_modal.tsx b/x-pack/plugins/apm/public/components/app/Settings/schema/confirm_switch_modal.tsx
index 47e83fa079e63..9900093253d2a 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/schema/confirm_switch_modal.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/schema/confirm_switch_modal.tsx
@@ -57,7 +57,7 @@ export function ConfirmSwitchModal({
       <p>
         {i18n.translate('xpack.apm.settings.schema.confirm.descriptionText', {
           defaultMessage:
-            'If you have custom dashboards, machine learning jobs, or source maps that use classic APM indices, you must reconfigure them for data streams. Stack monitoring is not currently supported with Fleet-managed APM.',
+            'Please note Stack monitoring is not currently supported with Fleet-managed APM.',
         })}
       </p>
       {!hasUnsupportedConfigs && (
diff --git a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
index cbe7b81486a64..ed9d1a15cdbca 100644
--- a/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/time_comparison/index.tsx
@@ -26,7 +26,8 @@ const PrependContainer = euiStyled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: ${({ theme }) => theme.eui.euiGradientMiddle};
+  background-color: ${({ theme }) =>
+    theme.eui.euiFormInputGroupLabelBackground};
   padding: 0 ${px(unit)};
 `;
 
diff --git a/x-pack/plugins/apm/server/lib/alerts/test_utils/index.ts b/x-pack/plugins/apm/server/lib/alerts/test_utils/index.ts
index ce1466bff01a9..9dc22844bb629 100644
--- a/x-pack/plugins/apm/server/lib/alerts/test_utils/index.ts
+++ b/x-pack/plugins/apm/server/lib/alerts/test_utils/index.ts
@@ -59,6 +59,7 @@ export const createRuleTypeMocks = () => {
             bulk: jest.fn(),
           };
         },
+        isWriteEnabled: jest.fn(() => true),
       } as unknown) as RuleDataClient,
     },
     services,
diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts
index 3f36515e72a7a..eb82a89811087 100644
--- a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts
+++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size/index.ts
@@ -13,24 +13,18 @@ export function getBucketSize({
   start,
   end,
   numBuckets = 100,
+  minBucketSize,
 }: {
   start: number;
   end: number;
   numBuckets?: number;
+  minBucketSize?: number;
 }) {
   const duration = moment.duration(end - start, 'ms');
   const bucketSize = Math.max(
     calculateAuto.near(numBuckets, duration).asSeconds(),
-    1
+    minBucketSize || 1
   );
-  const intervalString = `${bucketSize}s`;
 
-  if (bucketSize < 0) {
-    return {
-      bucketSize: 0,
-      intervalString: 'auto',
-    };
-  }
-
-  return { bucketSize, intervalString };
+  return { bucketSize, intervalString: `${bucketSize}s` };
 }
diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts
new file mode 100644
index 0000000000000..6af6d3342986c
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.test.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { getBucketSizeForAggregatedTransactions } from './';
+
+describe('getBucketSizeForAggregatedTransactions', () => {
+  describe('when searchAggregatedTransactions is enabled', () => {
+    it('returns min bucket size when date difference is lower than 60s', () => {
+      expect(
+        getBucketSizeForAggregatedTransactions({
+          start: new Date('2021-06-30T15:00:00.000Z').valueOf(),
+          end: new Date('2021-06-30T15:00:30.000Z').valueOf(),
+          numBuckets: 10,
+          searchAggregatedTransactions: true,
+        })
+      ).toEqual({ bucketSize: 60, intervalString: '60s' });
+    });
+    it('returns bucket size when date difference is greater than 60s', () => {
+      expect(
+        getBucketSizeForAggregatedTransactions({
+          start: new Date('2021-06-30T15:00:00.000Z').valueOf(),
+          end: new Date('2021-06-30T15:30:00.000Z').valueOf(),
+          numBuckets: 10,
+          searchAggregatedTransactions: true,
+        })
+      ).toEqual({ bucketSize: 300, intervalString: '300s' });
+    });
+  });
+  describe('when searchAggregatedTransactions is disabled', () => {
+    it('returns 1s as bucket size', () => {
+      expect(
+        getBucketSizeForAggregatedTransactions({
+          start: new Date('2021-06-30T15:00:00.000Z').valueOf(),
+          end: new Date('2021-06-30T15:00:30.000Z').valueOf(),
+          numBuckets: 10,
+          searchAggregatedTransactions: false,
+        })
+      ).toEqual({ bucketSize: 1, intervalString: '1s' });
+    });
+  });
+});
diff --git a/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts
new file mode 100644
index 0000000000000..b475e518ce982
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/helpers/get_bucket_size_for_aggregated_transactions/index.ts
@@ -0,0 +1,23 @@
+/*
+ * 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 { getBucketSize } from '../get_bucket_size';
+
+export function getBucketSizeForAggregatedTransactions({
+  start,
+  end,
+  numBuckets = 100,
+  searchAggregatedTransactions,
+}: {
+  start: number;
+  end: number;
+  numBuckets?: number;
+  searchAggregatedTransactions?: boolean;
+}) {
+  const minBucketSize = searchAggregatedTransactions ? 60 : undefined;
+  return getBucketSize({ start, end, numBuckets, minBucketSize });
+}
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts
index 7d9dca9b2a706..6110ad3459911 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_instances/get_service_instances_transaction_statistics.ts
@@ -20,7 +20,7 @@ import {
   getTransactionDurationFieldForAggregatedTransactions,
 } from '../../helpers/aggregated_transactions';
 import { calculateThroughput } from '../../helpers/calculate_throughput';
-import { getBucketSize } from '../../helpers/get_bucket_size';
+import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions';
 import {
   getLatencyAggregation,
   getLatencyValue,
@@ -78,11 +78,14 @@ export async function getServiceInstancesTransactionStatistics<
 }): Promise<Array<ServiceInstanceTransactionStatistics<T>>> {
   const { apmEventClient } = setup;
 
-  const { intervalString, bucketSize } = getBucketSize({
-    start,
-    end,
-    numBuckets,
-  });
+  const { intervalString, bucketSize } = getBucketSizeForAggregatedTransactions(
+    {
+      start,
+      end,
+      numBuckets,
+      searchAggregatedTransactions,
+    }
+  );
 
   const field = getTransactionDurationFieldForAggregatedTransactions(
     searchAggregatedTransactions
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts b/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts
index 36d372e322cbc..ea33c942cfc3b 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_transaction_group_detailed_statistics.ts
@@ -6,7 +6,6 @@
  */
 
 import { keyBy } from 'lodash';
-import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate';
 import {
   EVENT_OUTCOME,
   SERVICE_NAME,
@@ -15,10 +14,11 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import { EventOutcome } from '../../../common/event_outcome';
 import { LatencyAggregationType } from '../../../common/latency_aggregation_types';
+import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../server/utils/queries';
 import { Coordinate } from '../../../typings/timeseries';
 import {
@@ -26,7 +26,7 @@ import {
   getProcessorEventForAggregatedTransactions,
   getTransactionDurationFieldForAggregatedTransactions,
 } from '../helpers/aggregated_transactions';
-import { getBucketSize } from '../helpers/get_bucket_size';
+import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions';
 import {
   getLatencyAggregation,
   getLatencyValue,
@@ -68,7 +68,12 @@ export async function getServiceTransactionGroupDetailedStatistics({
   }>
 > {
   const { apmEventClient } = setup;
-  const { intervalString } = getBucketSize({ start, end, numBuckets });
+  const { intervalString } = getBucketSizeForAggregatedTransactions({
+    start,
+    end,
+    numBuckets,
+    searchAggregatedTransactions,
+  });
 
   const field = getTransactionDurationFieldForAggregatedTransactions(
     searchAggregatedTransactions
diff --git a/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts b/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts
index 019ab8770887a..7f48c591521e7 100644
--- a/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_services/get_service_transaction_stats.ts
@@ -17,8 +17,8 @@ import {
 } from '../../../../common/transaction_types';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../../server/utils/queries';
 import { AgentName } from '../../../../typings/es_schemas/ui/fields/agent';
 import {
@@ -26,8 +26,8 @@ import {
   getProcessorEventForAggregatedTransactions,
   getTransactionDurationFieldForAggregatedTransactions,
 } from '../../helpers/aggregated_transactions';
-import { getBucketSize } from '../../helpers/get_bucket_size';
 import { calculateThroughput } from '../../helpers/calculate_throughput';
+import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions';
 import {
   calculateTransactionErrorPercentage,
   getOutcomeAggregation,
@@ -117,10 +117,11 @@ export async function getServiceTransactionStats({
                   timeseries: {
                     date_histogram: {
                       field: '@timestamp',
-                      fixed_interval: getBucketSize({
+                      fixed_interval: getBucketSizeForAggregatedTransactions({
                         start,
                         end,
                         numBuckets: 20,
+                        searchAggregatedTransactions,
                       }).intervalString,
                       min_doc_count: 0,
                       extended_bounds: { min: start, max: end },
diff --git a/x-pack/plugins/apm/server/lib/services/get_throughput.ts b/x-pack/plugins/apm/server/lib/services/get_throughput.ts
index 0490c31e7c63d..7eacf47f15b7a 100644
--- a/x-pack/plugins/apm/server/lib/services/get_throughput.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_throughput.ts
@@ -12,14 +12,14 @@ import {
 } from '../../../common/elasticsearch_fieldnames';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../server/utils/queries';
 import {
   getDocumentTypeFilterForAggregatedTransactions,
   getProcessorEventForAggregatedTransactions,
 } from '../helpers/aggregated_transactions';
-import { getBucketSize } from '../helpers/get_bucket_size';
+import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions';
 import { Setup } from '../helpers/setup_request';
 
 interface Options {
@@ -44,7 +44,11 @@ function fetcher({
   end,
 }: Options) {
   const { apmEventClient } = setup;
-  const { intervalString } = getBucketSize({ start, end });
+  const { intervalString } = getBucketSizeForAggregatedTransactions({
+    start,
+    end,
+    searchAggregatedTransactions,
+  });
   const filter: ESFilter[] = [
     { term: { [SERVICE_NAME]: serviceName } },
     { term: { [TRANSACTION_TYPE]: transactionType } },
diff --git a/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts b/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts
index 6499e80be9302..cc3a13ef5c648 100644
--- a/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts
+++ b/x-pack/plugins/apm/server/lib/transaction_groups/get_error_rate.ts
@@ -5,9 +5,6 @@
  * 2.0.
  */
 
-import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate';
-import { Coordinate } from '../../../typings/timeseries';
-
 import {
   EVENT_OUTCOME,
   SERVICE_NAME,
@@ -15,16 +12,18 @@ import {
   TRANSACTION_TYPE,
 } from '../../../common/elasticsearch_fieldnames';
 import { EventOutcome } from '../../../common/event_outcome';
+import { offsetPreviousPeriodCoordinates } from '../../../common/utils/offset_previous_period_coordinate';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../server/utils/queries';
+import { Coordinate } from '../../../typings/timeseries';
 import {
   getDocumentTypeFilterForAggregatedTransactions,
   getProcessorEventForAggregatedTransactions,
 } from '../helpers/aggregated_transactions';
-import { getBucketSize } from '../helpers/get_bucket_size';
+import { getBucketSizeForAggregatedTransactions } from '../helpers/get_bucket_size_for_aggregated_transactions';
 import { Setup, SetupTimeRange } from '../helpers/setup_request';
 import {
   calculateTransactionErrorPercentage,
@@ -101,7 +100,11 @@ export async function getErrorRate({
         timeseries: {
           date_histogram: {
             field: '@timestamp',
-            fixed_interval: getBucketSize({ start, end }).intervalString,
+            fixed_interval: getBucketSizeForAggregatedTransactions({
+              start,
+              end,
+              searchAggregatedTransactions,
+            }).intervalString,
             min_doc_count: 0,
             extended_bounds: { min: start, max: end },
           },
diff --git a/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts
index 1f8170921aac3..e3f59ca2e4328 100644
--- a/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/get_latency_charts/index.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { offsetPreviousPeriodCoordinates } from '../../../../common/utils/offset_previous_period_coordinate';
 import { ESFilter } from '../../../../../../../src/core/types/elasticsearch';
 import { PromiseReturnType } from '../../../../../observability/typings/common';
 import {
@@ -14,18 +13,19 @@ import {
   TRANSACTION_TYPE,
 } from '../../../../common/elasticsearch_fieldnames';
 import { LatencyAggregationType } from '../../../../common/latency_aggregation_types';
+import { offsetPreviousPeriodCoordinates } from '../../../../common/utils/offset_previous_period_coordinate';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../../server/utils/queries';
 import {
   getDocumentTypeFilterForAggregatedTransactions,
   getProcessorEventForAggregatedTransactions,
   getTransactionDurationFieldForAggregatedTransactions,
 } from '../../../lib/helpers/aggregated_transactions';
-import { getBucketSize } from '../../../lib/helpers/get_bucket_size';
 import { Setup, SetupTimeRange } from '../../../lib/helpers/setup_request';
+import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions';
 import {
   getLatencyAggregation,
   getLatencyValue,
@@ -58,7 +58,11 @@ function searchLatency({
   end: number;
 }) {
   const { apmEventClient } = setup;
-  const { intervalString } = getBucketSize({ start, end });
+  const { intervalString } = getBucketSizeForAggregatedTransactions({
+    start,
+    end,
+    searchAggregatedTransactions,
+  });
 
   const filter: ESFilter[] = [
     { term: { [SERVICE_NAME]: serviceName } },
diff --git a/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts b/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts
index ed85e700c3473..ff3534159d19b 100644
--- a/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts
+++ b/x-pack/plugins/apm/server/lib/transactions/get_throughput_charts/index.ts
@@ -15,15 +15,15 @@ import {
 } from '../../../../common/elasticsearch_fieldnames';
 import {
   environmentQuery,
-  rangeQuery,
   kqlQuery,
+  rangeQuery,
 } from '../../../../server/utils/queries';
 import {
   getDocumentTypeFilterForAggregatedTransactions,
   getProcessorEventForAggregatedTransactions,
 } from '../../../lib/helpers/aggregated_transactions';
-import { getBucketSize } from '../../../lib/helpers/get_bucket_size';
 import { Setup, SetupTimeRange } from '../../../lib/helpers/setup_request';
+import { getBucketSizeForAggregatedTransactions } from '../../helpers/get_bucket_size_for_aggregated_transactions';
 import { getThroughputBuckets } from './transform';
 
 export type ThroughputChartsResponse = PromiseReturnType<
@@ -115,7 +115,12 @@ export async function getThroughputCharts({
   setup: Setup & SetupTimeRange;
   searchAggregatedTransactions: boolean;
 }) {
-  const { bucketSize, intervalString } = getBucketSize(setup);
+  const { bucketSize, intervalString } = getBucketSizeForAggregatedTransactions(
+    {
+      ...setup,
+      searchAggregatedTransactions,
+    }
+  );
 
   const response = await searchThroughput({
     environment,
diff --git a/x-pack/plugins/apm/server/plugin.ts b/x-pack/plugins/apm/server/plugin.ts
index 638880c9f3e4a..e617ed0510a8d 100644
--- a/x-pack/plugins/apm/server/plugin.ts
+++ b/x-pack/plugins/apm/server/plugin.ts
@@ -18,7 +18,6 @@ import {
 import { mapValues, once } from 'lodash';
 import { TECHNICAL_COMPONENT_TEMPLATE_NAME } from '../../rule_registry/common/assets';
 import { mappingFromFieldMap } from '../../rule_registry/common/mapping_from_field_map';
-import { RuleDataClient } from '../../rule_registry/server';
 import { APMConfig, APMXPackConfig } from '.';
 import { mergeConfigs } from './index';
 import { UI_SETTINGS } from '../../../../src/plugins/data/common';
@@ -128,7 +127,7 @@ export class APMPlugin
     const getCoreStart = () =>
       core.getStartServices().then(([coreStart]) => coreStart);
 
-    const ready = once(async () => {
+    const initializeRuleDataTemplates = once(async () => {
       const componentTemplateName = ruleDataService.getFullAssetName(
         'apm-mappings'
       );
@@ -176,18 +175,17 @@ export class APMPlugin
       });
     });
 
-    ready().catch((err) => {
-      this.logger!.error(err);
-    });
+    // initialize eagerly
+    const initializeRuleDataTemplatesPromise = initializeRuleDataTemplates().catch(
+      (err) => {
+        this.logger!.error(err);
+      }
+    );
 
-    const ruleDataClient = new RuleDataClient({
-      alias: ruleDataService.getFullAssetName('observability-apm'),
-      getClusterClient: async () => {
-        const coreStart = await getCoreStart();
-        return coreStart.elasticsearch.client.asInternalUser;
-      },
-      ready,
-    });
+    const ruleDataClient = ruleDataService.getRuleDataClient(
+      ruleDataService.getFullAssetName('observability-apm'),
+      () => initializeRuleDataTemplatesPromise
+    );
 
     const resourcePlugins = mapValues(plugins, (value, key) => {
       return {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js
index 0e7a1afb0dbb1..dcb6035dbb687 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/browser/markdown.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable } from '../common/__fixtures__/test_tables';
 import { fontStyle } from '../common/__fixtures__/test_styles';
 import { markdown } from './markdown';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js
index d61fef7abced8..fa831cacbcb18 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/__fixtures__/test_styles.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { elasticLogo } from '../../../lib/elastic_logo';
+import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/common/lib';
 
 export const fontStyle = {
   type: 'style',
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js
index c09c3ff99d89c..7d983e02f1123 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/all.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { all } from './all';
 
 describe('all', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js
index 7e018427dc4c7..85e062f454bc5 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/alterColumn.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { alterColumn } from './alterColumn';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js
index d95029fef8144..b691595409c62 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/any.test.js
@@ -4,8 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { any } from './any';
 
 describe('any', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js
index e7c2d3047bb91..fe297e00e7b35 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/as.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { asFn } from './as';
 
 describe('as', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js
index 491558486eb44..1538ee8254ec3 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/axis_config.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { testTable } from './__fixtures__/test_tables';
 import { axisConfig } from './axisConfig';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js
index adee8a56dea49..d5621943bccaf 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/case.test.js
@@ -7,7 +7,7 @@
 
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { caseFn } from './case';
 
 describe('case', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js
index 43c24f10c0465..0834dc27d321b 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/clear.test.js
@@ -4,8 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable } from './__fixtures__/test_tables';
 import { clear } from './clear';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js
index d76c7a9174b81..d7f28559ee0ef 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/columns.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { columns } from './columns';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js
index b0d80debf4ec3..c04f132a577fd 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/compare.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { compare } from './compare';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts
index d30324e0e2bfe..12aad5d609414 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/containerStyle.ts
@@ -8,7 +8,7 @@
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { ContainerStyle, Overflow, BackgroundRepeat, BackgroundSize } from '../../../types';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
-import { isValidUrl } from '../../../common/lib/url';
+import { isValidUrl } from '../../../../../../src/plugins/presentation_util/common/lib';
 
 interface Output extends ContainerStyle {
   type: 'containerStyle';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js
index b0a6ddf2caa74..7a3599f47ec86 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/container_style.test.js
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
-import { elasticLogo } from '../../lib/elastic_logo';
+import {
+  elasticLogo,
+  functionWrapper,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { containerStyle } from './containerStyle';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js
index 7cefb41754fd4..e4c45f228aa17 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/context.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable, emptyTable } from './__fixtures__/test_tables';
 import { context } from './context';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts
index 93cf07a9dd5dd..cfef618bee39d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/csv.test.ts
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-// @ts-expect-error untyped lib
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { csv } from './csv';
-import { Datatable } from 'src/plugins/expressions';
+import { Datatable, ExecutionContext, SerializableState } from 'src/plugins/expressions';
+import { Adapters } from 'src/plugins/inspector';
 
 const errors = getFunctionErrors().csv;
 
@@ -30,43 +30,59 @@ describe('csv', () => {
 
   it('should return a datatable', () => {
     expect(
-      fn(null, {
-        data: `name,number
+      fn(
+        null,
+        {
+          data: `name,number
 one,1
 two,2
 fourty two,42`,
-      })
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expected);
   });
 
   it('should allow custom delimiter', () => {
     expect(
-      fn(null, {
-        data: `name\tnumber
+      fn(
+        null,
+        {
+          data: `name\tnumber
 one\t1
 two\t2
 fourty two\t42`,
-        delimiter: '\t',
-      })
+          delimiter: '\t',
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expected);
 
     expect(
-      fn(null, {
-        data: `name%SPLIT%number
+      fn(
+        null,
+        {
+          data: `name%SPLIT%number
 one%SPLIT%1
 two%SPLIT%2
 fourty two%SPLIT%42`,
-        delimiter: '%SPLIT%',
-      })
+          delimiter: '%SPLIT%',
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expected);
   });
 
   it('should allow custom newline', () => {
     expect(
-      fn(null, {
-        data: `name,number\rone,1\rtwo,2\rfourty two,42`,
-        newline: '\r',
-      })
+      fn(
+        null,
+        {
+          data: `name,number\rone,1\rtwo,2\rfourty two,42`,
+          newline: '\r',
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expected);
   });
 
@@ -83,10 +99,14 @@ fourty two%SPLIT%42`,
     };
 
     expect(
-      fn(null, {
-        data: `foo," bar  ", baz, " buz "
+      fn(
+        null,
+        {
+          data: `foo," bar  ", baz, " buz "
 1,2,3,4`,
-      })
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expectedResult);
   });
 
@@ -106,22 +126,30 @@ fourty two%SPLIT%42`,
     };
 
     expect(
-      fn(null, {
-        data: `foo," bar  ", baz, " buz "
+      fn(
+        null,
+        {
+          data: `foo," bar  ", baz, " buz "
 1,"  best  ",3, "  ok"
 "  good", bad, better   , " worst    " `,
-      })
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
     ).toEqual(expectedResult);
   });
 
   it('throws when given invalid csv', () => {
     expect(() => {
-      fn(null, {
-        data: `name,number
+      fn(
+        null,
+        {
+          data: `name,number
 one|1
 two.2
 fourty two,42`,
-      });
+        },
+        {} as ExecutionContext<Adapters, SerializableState>
+      );
     }).toThrow(new RegExp(errors.invalidInputCSV().message));
   });
 });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js
index 08c43caaf8b9e..cd06ce5fbb463 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/date.test.js
@@ -6,7 +6,7 @@
  */
 
 import sinon from 'sinon';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { date } from './date';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js
index f19318753611c..00429779e2ff1 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/do.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { doFn } from './do';
 
 describe('do', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts
index d8f2e8518daf0..254efd9f5f0d9 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/dropdown_control.test.ts
@@ -5,23 +5,30 @@
  * 2.0.
  */
 
-// @ts-expect-error untyped local
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable, relationalTable } from './__fixtures__/test_tables';
 import { dropdownControl } from './dropdownControl';
+import { ExecutionContext, SerializableState } from 'src/plugins/expressions';
+import { Adapters } from 'src/plugins/inspector';
 
 describe('dropdownControl', () => {
   const fn = functionWrapper(dropdownControl);
 
   it('returns a render as dropdown_filter', () => {
-    expect(fn(testTable, { filterColumn: 'name', valueColumn: 'name' })).toHaveProperty(
-      'type',
-      'render'
-    );
-    expect(fn(testTable, { filterColumn: 'name', valueColumn: 'name' })).toHaveProperty(
-      'as',
-      'dropdown_filter'
-    );
+    expect(
+      fn(
+        testTable,
+        { filterColumn: 'name', valueColumn: 'name' },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
+    ).toHaveProperty('type', 'render');
+    expect(
+      fn(
+        testTable,
+        { filterColumn: 'name', valueColumn: 'name' },
+        {} as ExecutionContext<Adapters, SerializableState>
+      )
+    ).toHaveProperty('as', 'dropdown_filter');
   });
 
   describe('args', () => {
@@ -32,12 +39,24 @@ describe('dropdownControl', () => {
             unique.find(([value, label]) => value === name) ? unique : [...unique, [name, name]],
           []
         );
-        expect(fn(testTable, { valueColumn: 'name' }).value.choices).toEqual(uniqueNames);
+        expect(
+          fn(
+            testTable,
+            { valueColumn: 'name' },
+            {} as ExecutionContext<Adapters, SerializableState>
+          )?.value?.choices
+        ).toEqual(uniqueNames);
       });
 
       it('returns an empty array when provided an invalid column', () => {
-        expect(fn(testTable, { valueColumn: 'foo' }).value.choices).toEqual([]);
-        expect(fn(testTable, { valueColumn: '' }).value.choices).toEqual([]);
+        expect(
+          fn(testTable, { valueColumn: 'foo' }, {} as ExecutionContext<Adapters, SerializableState>)
+            ?.value?.choices
+        ).toEqual([]);
+        expect(
+          fn(testTable, { valueColumn: '' }, {} as ExecutionContext<Adapters, SerializableState>)
+            ?.value?.choices
+        ).toEqual([]);
       });
     });
 
@@ -45,7 +64,11 @@ describe('dropdownControl', () => {
       it('populates dropdown choices with labels from label column', () => {
         const expectedChoices = relationalTable.rows.map((row) => [row.id, row.name]);
         expect(
-          fn(relationalTable, { valueColumn: 'id', labelColumn: 'name' }).value.choices
+          fn(
+            relationalTable,
+            { valueColumn: 'id', labelColumn: 'name' },
+            {} as ExecutionContext<Adapters, SerializableState>
+          )?.value?.choices
         ).toEqual(expectedChoices);
       });
     });
@@ -53,19 +76,30 @@ describe('dropdownControl', () => {
 
   describe('filterColumn', () => {
     it('sets which column the filter is applied to', () => {
-      expect(fn(testTable, { filterColumn: 'name' }).value).toHaveProperty('column', 'name');
-      expect(fn(testTable, { filterColumn: 'name', valueColumn: 'price' }).value).toHaveProperty(
-        'column',
-        'name'
-      );
+      expect(
+        fn(testTable, { filterColumn: 'name' }, {} as ExecutionContext<Adapters, SerializableState>)
+          ?.value
+      ).toHaveProperty('column', 'name');
+      expect(
+        fn(
+          testTable,
+          { filterColumn: 'name', valueColumn: 'price' },
+          {} as ExecutionContext<Adapters, SerializableState>
+        )?.value
+      ).toHaveProperty('column', 'name');
     });
 
     it('defaults to valueColumn if not provided', () => {
-      expect(fn(testTable, { valueColumn: 'price' }).value).toHaveProperty('column', 'price');
+      expect(
+        fn(testTable, { valueColumn: 'price' }, {} as ExecutionContext<Adapters, SerializableState>)
+          ?.value
+      ).toHaveProperty('column', 'price');
     });
 
     it('sets column to undefined if no args are provided', () => {
-      expect(fn(testTable).value).toHaveProperty('column', undefined);
+      expect(
+        fn(testTable, {}, {} as ExecutionContext<Adapters, SerializableState>)?.value
+      ).toHaveProperty('column', undefined);
     });
   });
 });
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js
index 5f8d9e042125f..5e710fc109396 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/eq.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { eq } from './eq';
 
 describe('eq', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js
index 10781a7af452d..9d3dcb6a99167 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/exactly.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { emptyFilter } from './__fixtures__/test_filters';
 import { exactly } from './exactly';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js
index 8c328e3d8adf6..edc2c1db18f64 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/filterrows.test.js
@@ -7,7 +7,7 @@
 
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable } from './__fixtures__/test_tables';
 import { filterrows } from './filterrows';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js
index 6fda32dfef51a..e725dccc8ca34 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatdate.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { formatdate } from './formatdate';
 
 describe('formatdate', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js
index 37d3d2d905e67..e957bf115198f 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/formatnumber.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { formatnumber } from './formatnumber';
 
 describe('formatnumber', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js
index 2dda4d8f4258e..a556c2ddeb48a 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/getCell.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { getCell } from './getCell';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js
index 576d2a54dd59b..53675fca2b3ae 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gt.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { gt } from './gt';
 
 describe('gt', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js
index 174f617f47a8c..aefb2ccf926ae 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/gte.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { gte } from './gte';
 
 describe('gte', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js
index c25d0f7ae727f..4721eaf6cb530 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/head.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { head } from './head';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js
index cab331807e44c..df576a6a2507f 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.test.js
@@ -7,7 +7,7 @@
 
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { ifFn } from './if';
 
 describe('if', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js
index cd0809d9b30a2..45b26cd25937d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.test.js
@@ -6,14 +6,14 @@
  */
 
 import expect from '@kbn/expect';
-// import { functionWrapper } from '../../../test_helpers/function_wrapper';
-import { elasticLogo } from '../../lib/elastic_logo';
-import { elasticOutline } from '../../lib/elastic_outline';
+import {
+  elasticLogo,
+  elasticOutline,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 // import { image } from './image';
 
 // TODO: the test was not running and is not up to date
 describe.skip('image', () => {
-  // const fn = functionWrapper(image);
   const fn = jest.fn();
 
   it('returns an image object using a dataUrl', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts
index b4d067280cb69..c3e64e48b23fc 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/image.ts
@@ -7,9 +7,10 @@
 
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { getFunctionHelp, getFunctionErrors } from '../../../i18n';
-
-import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-import { elasticLogo } from '../../lib/elastic_logo';
+import {
+  elasticLogo,
+  resolveWithMissingImage,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 
 export enum ImageMode {
   CONTAIN = 'contain',
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts
index 5c4d1d55cff04..9da646e695861 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.ts
@@ -43,7 +43,6 @@ import { replace } from './replace';
 import { rounddate } from './rounddate';
 import { rowCount } from './rowCount';
 import { repeatImage } from './repeat_image';
-import { revealImage } from './revealImage';
 import { seriesStyle } from './seriesStyle';
 import { shape } from './shape';
 import { sort } from './sort';
@@ -94,7 +93,6 @@ export const functions = [
   render,
   repeatImage,
   replace,
-  revealImage,
   rounddate,
   rowCount,
   seriesStyle,
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js
index 12b1002d1e377..94fef857983bc 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/join_rows.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { testTable } from './__fixtures__/test_tables';
 import { joinRows } from './join_rows';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js
index 8f16e446997ea..1ecfca9fc2f94 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lt.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { lt } from './lt';
 
 describe('lt', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js
index 954b30e8c3c92..f32d2d23027c3 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/lte.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { lte } from './lte';
 
 describe('lte', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
index a99d4823e5930..3f2d0ad2cb76e 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { fontStyle } from './__fixtures__/test_styles';
 import { metric } from './metric';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js
index 0a1980760cd09..88c7a5c18bc7a 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { neq } from './neq';
 
 describe('neq', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js
index 5bf100eb90f4c..282cb2460d61c 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/ply.test.js
@@ -7,7 +7,7 @@
 
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { testTable } from './__fixtures__/test_tables';
 import { ply } from './ply';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js
index f516cbbe5258f..6438e2a4d19c0 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/progress.test.js
@@ -6,7 +6,7 @@
  */
 
 import expect from '@kbn/expect';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { progress } from './progress';
 import { fontStyle } from './__fixtures__/test_styles';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js
index 6a91f4c280692..3248af5504093 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { DEFAULT_ELEMENT_CSS } from '../../../common/lib/constants';
 import { testTable } from './__fixtures__/test_tables';
 import { fontStyle, containerStyle } from './__fixtures__/test_styles';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts
index cc7fc00a5df1f..7a52833693cc6 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/render.ts
@@ -49,7 +49,6 @@ export function render(): ExpressionFunctionDefinition<
           'plot',
           'progress',
           'repeatImage',
-          'revealImage',
           'shape',
           'table',
           'time_filter',
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js
index f95d3d0ec03d0..97f0552721ccf 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.test.js
@@ -5,9 +5,11 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
-import { elasticOutline } from '../../lib/elastic_outline';
-import { elasticLogo } from '../../lib/elastic_logo';
+import {
+  elasticLogo,
+  elasticOutline,
+  functionWrapper,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 import { repeatImage } from './repeat_image';
 
 describe('repeatImage', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts
index 6e62139e4da0d..904b2478760ab 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/repeat_image.ts
@@ -6,8 +6,10 @@
  */
 
 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
-import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
-import { elasticOutline } from '../../lib/elastic_outline';
+import {
+  elasticOutline,
+  resolveWithMissingImage,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 import { Render } from '../../../types';
 import { getFunctionHelp } from '../../../i18n';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js
index 26e44f48f685d..6025ff354cd8d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/replace.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { replace } from './replace';
 
 describe('replace', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js
deleted file mode 100644
index d97168c3aacc1..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/reveal_image.test.js
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
-import { elasticOutline } from '../../lib/elastic_outline';
-import { elasticLogo } from '../../lib/elastic_logo';
-import { getFunctionErrors } from '../../../i18n';
-import { revealImage } from './revealImage';
-
-const errors = getFunctionErrors().revealImage;
-
-describe('revealImage', () => {
-  const fn = functionWrapper(revealImage);
-
-  it('returns a render as revealImage', () => {
-    const result = fn(0.5);
-    expect(result).toHaveProperty('type', 'render');
-    expect(result).toHaveProperty('as', 'revealImage');
-  });
-
-  describe('context', () => {
-    it('throws when context is not a number between 0 and 1', () => {
-      expect(() => {
-        fn(10, {
-          image: elasticLogo,
-          emptyImage: elasticOutline,
-          origin: 'top',
-        });
-      }).toThrow(new RegExp(errors.invalidPercent(10).message));
-
-      expect(() => {
-        fn(-0.1, {
-          image: elasticLogo,
-          emptyImage: elasticOutline,
-          origin: 'top',
-        });
-      }).toThrow(new RegExp(errors.invalidPercent(-0.1).message));
-    });
-  });
-
-  describe('args', () => {
-    describe('image', () => {
-      it('sets the image', () => {
-        const result = fn(0.89, { image: elasticLogo }).value;
-        expect(result).toHaveProperty('image', elasticLogo);
-      });
-
-      it('defaults to the Elastic outline logo', () => {
-        const result = fn(0.89).value;
-        expect(result).toHaveProperty('image', elasticOutline);
-      });
-    });
-
-    describe('emptyImage', () => {
-      it('sets the background image', () => {
-        const result = fn(0, { emptyImage: elasticLogo }).value;
-        expect(result).toHaveProperty('emptyImage', elasticLogo);
-      });
-
-      it('sets emptyImage to null', () => {
-        const result = fn(0).value;
-        expect(result).toHaveProperty('emptyImage', null);
-      });
-    });
-
-    describe('origin', () => {
-      it('sets which side to start the reveal from', () => {
-        let result = fn(1, { origin: 'top' }).value;
-        expect(result).toHaveProperty('origin', 'top');
-        result = fn(1, { origin: 'left' }).value;
-        expect(result).toHaveProperty('origin', 'left');
-        result = fn(1, { origin: 'bottom' }).value;
-        expect(result).toHaveProperty('origin', 'bottom');
-        result = fn(1, { origin: 'right' }).value;
-        expect(result).toHaveProperty('origin', 'right');
-      });
-
-      it('defaults to bottom', () => {
-        const result = fn(1).value;
-        expect(result).toHaveProperty('origin', 'bottom');
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js
index f2c2f8af50a81..0ef832d973271 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rounddate.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { rounddate } from './rounddate';
 
 describe('rounddate', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js
index b47bb662f43d4..7a32849e9161a 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/rowCount.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { rowCount } from './rowCount';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js
index ebd1f370db343..6e91b84d82b6f 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/series_style.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { seriesStyle } from './seriesStyle';
 
 describe('seriesStyle', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js
index 97f8b20c57efa..f59c517c91d88 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/sort.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable } from './__fixtures__/test_tables';
 import { sort } from './sort';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js
index 3a3bb46e4d395..0260c9e77c424 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/staticColumn.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable, emptyTable } from './__fixtures__/test_tables';
 import { staticColumn } from './staticColumn';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js
index c598c036bcaa9..48af07b7cd880 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/string.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { string } from './string';
 
 describe('string', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js
index 7a6d483d6c72b..c6f592889c991 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.test.js
@@ -7,7 +7,7 @@
 
 import { of } from 'rxjs';
 import { TestScheduler } from 'rxjs/testing';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { switchFn } from './switch';
 
 describe('switch', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js
index 2eff610ac8ee5..42e5150b03637 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/table.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { testTable } from './__fixtures__/test_tables';
 import { fontStyle } from './__fixtures__/test_styles';
 import { table } from './table';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js
index 93461a2ef4575..420489754d20e 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { emptyTable, testTable } from './__fixtures__/test_tables';
 import { tail } from './tail';
 
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js
index e45a11b786d19..f45ec981b1a8a 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter.test.js
@@ -6,7 +6,7 @@
  */
 
 import sinon from 'sinon';
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { getFunctionErrors } from '../../../i18n';
 import { emptyFilter } from './__fixtures__/test_filters';
 import { timefilter } from './timefilter';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js
index cf2c316507c35..b4a476807b7ee 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/timefilter_control.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../../src/plugins/presentation_util/common/lib';
 import { timefilterControl } from './timefilterControl';
 
 describe('timefilterControl', () => {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts b/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts
deleted file mode 100644
index 1ade7f1f269c0..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_logo.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/* eslint-disable */
-export const elasticLogo = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts b/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts
deleted file mode 100644
index 7271f5b32d547..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/lib/elastic_outline.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-/* eslint-disable */
-export const elasticOutline = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx
index 7276a55bdf49d..8839910d78e0d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/image.stories.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { image } from '../image';
 import { Render } from './render';
-import { elasticLogo } from '../../lib/elastic_logo';
+import { elasticLogo } from '../../../../../../src/plugins/presentation_util/common/lib';
 
 storiesOf('renderers/image', module).add('default', () => {
   const config = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx
index 8dd059cf7a32f..ed2706389d83d 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/__stories__/repeat_image.stories.tsx
@@ -9,8 +9,10 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { repeatImage } from '../repeat_image';
 import { Render } from './render';
-import { elasticLogo } from '../../lib/elastic_logo';
-import { elasticOutline } from '../../lib/elastic_outline';
+import {
+  elasticLogo,
+  elasticOutline,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 
 storiesOf('renderers/repeatImage', module).add('default', () => {
   const config = {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
index c6b40936c288a..3295332bb6316 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/core.ts
@@ -14,7 +14,6 @@ import { pie } from './pie';
 import { plot } from './plot';
 import { progress } from './progress';
 import { repeatImage } from './repeat_image';
-import { revealImage } from './reveal_image';
 import { shape } from './shape';
 import { table } from './table';
 import { text } from './text';
@@ -29,7 +28,6 @@ export const renderFunctions = [
   plot,
   progress,
   repeatImage,
-  revealImage,
   shape,
   table,
   text,
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.ts
new file mode 100644
index 0000000000000..bf9b6a744e686
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/external.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 { revealImageRenderer } from '../../../../../src/plugins/expression_reveal_image/public';
+
+export const renderFunctions = [revealImageRenderer];
+export const renderFunctionFactories = [];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx
index 8c88fe820d5d3..86e9daed105db 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/image.tsx
@@ -7,8 +7,7 @@
 
 import ReactDOM from 'react-dom';
 import React from 'react';
-import { elasticLogo } from '../lib/elastic_logo';
-import { isValidUrl } from '../../common/lib/url';
+import { elasticLogo, isValidUrl } from '../../../../../src/plugins/presentation_util/common/lib';
 import { Return as Arguments } from '../functions/common/image';
 import { RendererStrings } from '../../i18n';
 import { RendererFactory } from '../../types';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts
index 3c2d90f81eedc..16a052edbbe82 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/index.ts
@@ -15,11 +15,23 @@ import {
   renderFunctionFactories as filterFactories,
 } from './filters';
 
+import {
+  renderFunctions as externalFunctions,
+  renderFunctionFactories as externalFactories,
+} from './external';
+
 import { renderFunctions as coreFunctions, renderFunctionFactories as coreFactories } from './core';
 
-export const renderFunctions = [...coreFunctions, ...filterFunctions, ...embeddableFunctions];
+export const renderFunctions = [
+  ...coreFunctions,
+  ...filterFunctions,
+  ...embeddableFunctions,
+  ...externalFunctions,
+];
+
 export const renderFunctionFactories = [
   ...coreFactories,
   ...embeddableFactories,
   ...filterFactories,
+  ...externalFactories,
 ];
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts
index 8286609aa334f..149a887683413 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/renderers/repeat_image.ts
@@ -7,8 +7,10 @@
 
 import $ from 'jquery';
 import { times } from 'lodash';
-import { elasticOutline } from '../lib/elastic_outline';
-import { isValidUrl } from '../../common/lib/url';
+import {
+  elasticOutline,
+  isValidUrl,
+} from '../../../../../src/plugins/presentation_util/common/lib';
 import { RendererStrings, ErrorStrings } from '../../i18n';
 import { Return as Arguments } from '../functions/common/repeat_image';
 import { RendererFactory } from '../../types';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx
deleted file mode 100644
index 672cecca1bead..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/__stories__/reveal_image.stories.tsx
+++ /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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { revealImage } from '../';
-import { Render } from '../../__stories__/render';
-import { elasticOutline } from '../../../lib/elastic_outline';
-import { elasticLogo } from '../../../lib/elastic_logo';
-import { Origin } from '../../../functions/common/revealImage';
-
-storiesOf('renderers/revealImage', module).add('default', () => {
-  const config = {
-    image: elasticLogo,
-    emptyImage: elasticOutline,
-    origin: Origin.LEFT,
-    percent: 0.45,
-  };
-
-  return <Render renderer={revealImage} config={config} />;
-});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts
deleted file mode 100644
index 8d9ceb70f17a6..0000000000000
--- a/x-pack/plugins/canvas/canvas_plugin_src/renderers/reveal_image/index.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { elasticOutline } from '../../lib/elastic_outline';
-import { isValidUrl } from '../../../common/lib/url';
-import { RendererStrings } from '../../../i18n';
-import { RendererFactory } from '../../../types';
-import { Output as Arguments } from '../../functions/common/revealImage';
-
-const { revealImage: strings } = RendererStrings;
-
-export const revealImage: RendererFactory<Arguments> = () => ({
-  name: 'revealImage',
-  displayName: strings.getDisplayName(),
-  help: strings.getHelpDescription(),
-  reuseDomNode: true,
-  render(domNode, config, handlers) {
-    const aligner = document.createElement('div');
-    const img = new Image();
-
-    // modify the top-level container class
-    domNode.className = 'revealImage';
-
-    // set up the overlay image
-    function onLoad() {
-      setSize();
-      finish();
-    }
-    img.onload = onLoad;
-
-    img.className = 'revealImage__image';
-    img.style.clipPath = getClipPath(config.percent, config.origin);
-    img.style.setProperty('-webkit-clip-path', getClipPath(config.percent, config.origin));
-    img.src = isValidUrl(config.image) ? config.image : elasticOutline;
-    handlers.onResize(onLoad);
-
-    // set up the underlay, "empty" image
-    aligner.className = 'revealImageAligner';
-    aligner.appendChild(img);
-    if (isValidUrl(config.emptyImage)) {
-      // only use empty image if one is provided
-      aligner.style.backgroundImage = `url(${config.emptyImage})`;
-    }
-
-    function finish() {
-      const firstChild = domNode.firstChild;
-      if (firstChild) {
-        domNode.replaceChild(aligner, firstChild);
-      } else {
-        domNode.appendChild(aligner);
-      }
-      handlers.done();
-    }
-
-    function getClipPath(percent: number, origin = 'bottom') {
-      const directions: Record<string, number> = { bottom: 0, left: 1, top: 2, right: 3 };
-      const values: Array<number | string> = [0, 0, 0, 0];
-      values[directions[origin]] = `${100 - percent * 100}%`;
-      return `inset(${values.join(' ')})`;
-    }
-
-    function setSize() {
-      const imgDimensions = {
-        height: img.naturalHeight,
-        width: img.naturalWidth,
-        ratio: img.naturalHeight / img.naturalWidth,
-      };
-
-      const domNodeDimensions = {
-        height: domNode.clientHeight,
-        width: domNode.clientWidth,
-        ratio: domNode.clientHeight / domNode.clientWidth,
-      };
-
-      if (imgDimensions.ratio > domNodeDimensions.ratio) {
-        img.style.height = `${domNodeDimensions.height}px`;
-        img.style.width = 'initial';
-      } else {
-        img.style.width = `${domNodeDimensions.width}px`;
-        img.style.height = 'initial';
-      }
-    }
-  },
-});
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
index 2caf41f0777e1..480d8ea364c42 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/image_upload/index.js
@@ -10,10 +10,12 @@ import PropTypes from 'prop-types';
 import { EuiSpacer, EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { get } from 'lodash';
 import { AssetPicker } from '../../../../public/components/asset_picker';
-import { elasticOutline } from '../../../lib/elastic_outline';
-import { resolveFromArgs } from '../../../../common/lib/resolve_dataurl';
-import { isValidHttpUrl } from '../../../../common/lib/httpurl';
-import { encode } from '../../../../common/lib/dataurl';
+import {
+  encode,
+  elasticOutline,
+  isValidHttpUrl,
+  resolveFromArgs,
+} from '../../../../../../../src/plugins/presentation_util/public';
 import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
 import { VALID_IMAGE_TYPES } from '../../../../common/lib/constants';
 import { ArgumentStrings } from '../../../../i18n';
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js
index 37b22e376141f..f974667b7fad9 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/image.js
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
-import { elasticLogo } from '../../lib/elastic_logo';
-import { resolveFromArgs } from '../../../common/lib/resolve_dataurl';
+import {
+  elasticLogo,
+  resolveFromArgs,
+} from '../../../../../../src/plugins/presentation_util/common/lib';
 import { ViewStrings } from '../../../i18n';
 
 const { Image: strings } = ViewStrings;
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js
index 30e0b9a640f92..f9bba68c56949 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/views/revealImage.js
@@ -6,7 +6,6 @@
  */
 
 import { ViewStrings } from '../../../i18n';
-
 const { RevealImage: strings } = ViewStrings;
 
 export const revealImage = () => ({
diff --git a/x-pack/plugins/canvas/common/lib/index.ts b/x-pack/plugins/canvas/common/lib/index.ts
index afce09c6d5ee9..a23b569640f5a 100644
--- a/x-pack/plugins/canvas/common/lib/index.ts
+++ b/x-pack/plugins/canvas/common/lib/index.ts
@@ -8,7 +8,6 @@
 export * from './datatable';
 export * from './autocomplete';
 export * from './constants';
-export * from './dataurl';
 export * from './errors';
 export * from './expression_form_handlers';
 export * from './fetch';
@@ -16,10 +15,6 @@ export * from './fonts';
 export * from './get_field_type';
 export * from './get_legend_config';
 export * from './hex_to_rgb';
-export * from './httpurl';
-export * from './missing_asset';
 export * from './palettes';
 export * from './pivot_object_array';
-export * from './resolve_dataurl';
 export * from './unquote_string';
-export * from './url';
diff --git a/x-pack/plugins/canvas/common/lib/missing_asset.ts b/x-pack/plugins/canvas/common/lib/missing_asset.ts
deleted file mode 100644
index d47648b44059c..0000000000000
--- a/x-pack/plugins/canvas/common/lib/missing_asset.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-/* eslint-disable */
-// CC0, source: https://pixabay.com/en/question-mark-confirmation-question-838656/
-export const missingImage = 'data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMSAzMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48ZmlsdGVyIGlkPSJiIiB4PSItLjM2IiB5PSItLjM2IiB3aWR0aD0iMS43MiIgaGVpZ2h0PSIxLjcyIiBjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM9InNSR0IiPjxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjIuNDY0Ii8+PC9maWx0ZXI+PGxpbmVhckdyYWRpZW50IGlkPSJhIiB4MT0iMTU5LjM0IiB4Mj0iMTg0LjQ4IiB5MT0iNzI3LjM2IiB5Mj0iNzQ5Ljg5IiBncmFkaWVudFRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMTEuNTMgLTU0OS42OCkgc2NhbGUoLjc3MDAyKSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIHN0b3AtY29sb3I9IiNlYmYwZWQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNmYWZhZmEiIG9mZnNldD0iMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxwYXRoIGQ9Ik0xNS40MzcgMi42OTVsMTQuNTA2IDI0LjQ3NkgxLjI4N2wxNC4xNS0yNC40NzZ6IiBmaWxsPSJ1cmwoI2EpIiBzdHJva2U9InJlZCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIi8+PHBhdGggdHJhbnNmb3JtPSJtYXRyaXgoLjgzMTk3IDAgMCAuNTU0NjYgLTc4LjU4MyAtMzgzLjUxKSIgZD0iTTExMS4zMSA3MzEuMmMtMy4yODMtMy45MjUtMy41OTUtNi4xNDgtMi4wMjQtMTAuNDM4IDMuMzM2LTYuMTQ1IDQuNDk2LTguMDY4IDUuNDEtOS40MDUgMS45MDEgNS4xNjIgMi4xMjYgMTkuMTQtMy4zODYgMTkuODQzeiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIuODc2IiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGZpbHRlcj0idXJsKCNiKSIvPjxnIGZpbGwtb3BhY2l0eT0iLjgyIj48cGF0aCBkPSJNMTUuMDQ2IDIwLjIyN2gtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY3IDAtLjg5Ni0uMTc1LTEuNTU3LS41MjYtMS45ODItLjM1LS40MjUtLjc2NS0uNjM3LTEuMjQ0LS42MzctLjM2NCAwLS42Ny4wOTgtLjkyLjI5My0uMTg5LjE0OS0uMjgzLjMwNC0uMjgzLjQ2NiAwIC4xMDcuMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDk0IDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNTEuNTQtMS4wMjkgMS4xNC0yLjAzMyAxLjgtLjY3NC40NDUtMS4xMi44NDMtMS4zMzUgMS4xOTQtLjIxLjM0My0uMzM3Ljg3My0uMzg0IDEuNTg3bS0uMTEyIDEuNDc3Yy40NTIgMCAuODM2LjE1OCAxLjE1My40NzUuMzE3LjMxNy40NzYuNzAxLjQ3NiAxLjE1MyAwIC40NTItLjE1OS44NC0uNDc2IDEuMTYzYTEuNTcgMS41NyAwIDAgMS0xLjE1My40NzUgMS41NyAxLjU3IDAgMCAxLTEuMTUzLS40NzUgMS42MDQgMS42MDQgMCAwIDEtLjQ3NS0xLjE2M2MwLS40NTIuMTU5LS44MzYuNDc1LTEuMTUzYTEuNTcgMS41NyAwIDAgMSAxLjE1My0uNDc1IiBmaWxsPSIjZmZmIiBmaWxsLW9wYWNpdHk9Ii40ODYiLz48cGF0aCBkPSJNMTUuMzI3IDIwLjUwOGgtLjQxNWMtLjAxMy0uNzQ4LjAyLTEuMzA4LjEwMS0xLjY3OC4wODgtLjM3MS4zMDctLjg4LjY1OC0xLjUyOC4zNTctLjY1NC41OS0xLjE3Ni42OTctMS41NjcuMTE1LS4zOTguMTcyLS44ODcuMTcyLTEuNDY2IDAtLjg5Ny0uMTc1LTEuNTU4LS41MjYtMS45ODMtLjM1LS40MjQtLjc2NS0uNjM3LTEuMjQzLS42MzctLjM2NSAwLS42NzEuMDk4LS45Mi4yOTMtLjE5LjE0OS0uMjg0LjMwNC0uMjg0LjQ2NiAwIC4xMDguMDY0LjI3Ni4xOTIuNTA1LjI5LjUyLjQzNS45NjEuNDM1IDEuMzI1IDAgLjMzLS4xMTUuNjA3LS4zNDQuODNhMS4xMzggMS4xMzggMCAwIDEtLjg0LjMzM2MtLjM3NyAwLS42OTQtLjEzMS0uOTUtLjM5NC0uMjU2LS4yNy0uMzg0LS42MjQtLjM4NC0xLjA2MiAwLS43OTYuMzQ0LTEuNDkzIDEuMDMxLTIuMDk0LjY4OC0uNiAxLjY0OS0uOSAyLjg4My0uOSAxLjMwOCAwIDIuMzAyLjMxNCAyLjk4My45NC42ODguNjIxIDEuMDMyIDEuMzczIDEuMDMyIDIuMjU2IDAgLjY0LS4xNzYgMS4yMzQtLjUyNiAxLjc4LS4zNS41NC0xLjAyOCAxLjE0LTIuMDMzIDEuOC0uNjc0LjQ0NS0uODUzLjg0My0xLjA2OCAxLjE5NC0uMjEuMzQzLS4zMzcuODczLS4zODUgMS41ODdtLS4zNzggMS40NzdjLjQ1MiAwIC44MzYuMTU4IDEuMTUzLjQ3NS4zMTcuMzE3LjQ3Ni43MDEuNDc2IDEuMTUzIDAgLjQ1Mi0uMTU5Ljg0LS40NzYgMS4xNjNhMS41NyAxLjU3IDAgMCAxLTEuMTUzLjQ3NiAxLjU3IDEuNTcgMCAwIDEtMS4xNTMtLjQ3NiAxLjYwNCAxLjYwNCAwIDAgMS0uNDc1LTEuMTYzYzAtLjQ1Mi4xNTktLjgzNi40NzUtMS4xNTNhMS41NyAxLjU3IDAgMCAxIDEuMTUzLS40NzUiIGZpbGwtb3BhY2l0eT0iLjgyIi8+PC9nPjwvc3ZnPg==';
diff --git a/x-pack/plugins/canvas/i18n/functions/function_errors.ts b/x-pack/plugins/canvas/i18n/functions/function_errors.ts
index 4a85018c1b4ac..a01cb09a38347 100644
--- a/x-pack/plugins/canvas/i18n/functions/function_errors.ts
+++ b/x-pack/plugins/canvas/i18n/functions/function_errors.ts
@@ -19,7 +19,6 @@ import { errors as joinRows } from './dict/join_rows';
 import { errors as ply } from './dict/ply';
 import { errors as pointseries } from './dict/pointseries';
 import { errors as progress } from './dict/progress';
-import { errors as revealImage } from './dict/reveal_image';
 import { errors as timefilter } from './dict/timefilter';
 import { errors as to } from './dict/to';
 
@@ -38,7 +37,6 @@ export const getFunctionErrors = () => ({
   ply,
   pointseries,
   progress,
-  revealImage,
   timefilter,
   to,
 });
diff --git a/x-pack/plugins/canvas/i18n/functions/function_help.ts b/x-pack/plugins/canvas/i18n/functions/function_help.ts
index 512ebc4ff8c93..b72d410ddd63f 100644
--- a/x-pack/plugins/canvas/i18n/functions/function_help.ts
+++ b/x-pack/plugins/canvas/i18n/functions/function_help.ts
@@ -57,7 +57,6 @@ import { help as progress } from './dict/progress';
 import { help as render } from './dict/render';
 import { help as repeatImage } from './dict/repeat_image';
 import { help as replace } from './dict/replace';
-import { help as revealImage } from './dict/reveal_image';
 import { help as rounddate } from './dict/rounddate';
 import { help as rowCount } from './dict/row_count';
 import { help as savedLens } from './dict/saved_lens';
@@ -218,7 +217,6 @@ export const getFunctionHelp = (): FunctionHelpDict => ({
   render,
   repeatImage,
   replace,
-  revealImage,
   rounddate,
   rowCount,
   savedLens,
diff --git a/x-pack/plugins/canvas/i18n/renderers.ts b/x-pack/plugins/canvas/i18n/renderers.ts
index f74516433f924..29687155818e7 100644
--- a/x-pack/plugins/canvas/i18n/renderers.ts
+++ b/x-pack/plugins/canvas/i18n/renderers.ts
@@ -139,16 +139,6 @@ export const RendererStrings = {
         defaultMessage: 'Repeat an image a given number of times',
       }),
   },
-  revealImage: {
-    getDisplayName: () =>
-      i18n.translate('xpack.canvas.renderer.revealImage.displayName', {
-        defaultMessage: 'Image reveal',
-      }),
-    getHelpDescription: () =>
-      i18n.translate('xpack.canvas.renderer.revealImage.helpDescription', {
-        defaultMessage: 'Reveal a percentage of an image to make a custom gauge-style chart',
-      }),
-  },
   shape: {
     getDisplayName: () =>
       i18n.translate('xpack.canvas.renderer.shape.displayName', {
diff --git a/x-pack/plugins/canvas/jest.config.js b/x-pack/plugins/canvas/jest.config.js
index 5d40aa984e480..7524e06159a41 100644
--- a/x-pack/plugins/canvas/jest.config.js
+++ b/x-pack/plugins/canvas/jest.config.js
@@ -9,4 +9,7 @@ module.exports = {
   preset: '@kbn/test',
   rootDir: '../../..',
   roots: ['<rootDir>/x-pack/plugins/canvas'],
+  transform: {
+    '^.+\\.stories\\.tsx?$': '@storybook/addon-storyshots/injectFileName',
+  },
 };
diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json
index 5faeaefc9e392..85d2e0709cb3e 100644
--- a/x-pack/plugins/canvas/kibana.json
+++ b/x-pack/plugins/canvas/kibana.json
@@ -10,6 +10,7 @@
       "charts",
       "data",
       "embeddable",
+      "expressionRevealImage",
       "expressions",
       "features",
       "inspector",
diff --git a/x-pack/plugins/canvas/public/application.tsx b/x-pack/plugins/canvas/public/application.tsx
index 4163cb88d5fef..b7910c8293d80 100644
--- a/x-pack/plugins/canvas/public/application.tsx
+++ b/x-pack/plugins/canvas/public/application.tsx
@@ -17,9 +17,11 @@ import { includes, remove } from 'lodash';
 
 import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from 'kibana/public';
 
+import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
+import { PluginServices } from '../../../../src/plugins/presentation_util/public';
+
 import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
 import { App } from './components/app';
-import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
 import { registerLanguage } from './lib/monaco_language_def';
 import { SetupRegistries } from './plugin_api';
 import { initRegistries, populateRegistries, destroyRegistries } from './registries';
@@ -30,7 +32,7 @@ import { init as initStatsReporter } from './lib/ui_metric';
 
 import { CapabilitiesStrings } from '../i18n';
 
-import { startServices, services, ServicesProvider } from './services';
+import { startServices, services, LegacyServicesProvider, CanvasPluginServices } from './services';
 import { initFunctions } from './functions';
 // @ts-expect-error untyped local
 import { appUnload } from './state/actions/app';
@@ -44,27 +46,38 @@ import './style/index.scss';
 
 const { ReadOnlyBadge: strings } = CapabilitiesStrings;
 
-export const renderApp = (
-  coreStart: CoreStart,
-  plugins: CanvasStartDeps,
-  { element }: AppMountParameters,
-  canvasStore: Store
-) => {
-  const { presentationUtil } = plugins;
+export const renderApp = ({
+  coreStart,
+  startPlugins,
+  params,
+  canvasStore,
+  pluginServices,
+}: {
+  coreStart: CoreStart;
+  startPlugins: CanvasStartDeps;
+  params: AppMountParameters;
+  canvasStore: Store;
+  pluginServices: PluginServices<CanvasPluginServices>;
+}) => {
+  const { presentationUtil } = startPlugins;
+  const { element } = params;
   element.classList.add('canvas');
   element.classList.add('canvasContainerWrapper');
+  const ServicesContextProvider = pluginServices.getContextProvider();
 
   ReactDOM.render(
-    <KibanaContextProvider services={{ ...plugins, ...coreStart }}>
-      <ServicesProvider providers={services}>
-        <presentationUtil.ContextProvider>
-          <I18nProvider>
-            <Provider store={canvasStore}>
-              <App />
-            </Provider>
-          </I18nProvider>
-        </presentationUtil.ContextProvider>
-      </ServicesProvider>
+    <KibanaContextProvider services={{ ...startPlugins, ...coreStart }}>
+      <ServicesContextProvider>
+        <LegacyServicesProvider providers={services}>
+          <presentationUtil.ContextProvider>
+            <I18nProvider>
+              <Provider store={canvasStore}>
+                <App />
+              </Provider>
+            </I18nProvider>
+          </presentationUtil.ContextProvider>
+        </LegacyServicesProvider>
+      </ServicesContextProvider>
     </KibanaContextProvider>,
     element
   );
@@ -89,7 +102,7 @@ export const initializeCanvas = async (
   // of our bundle entry point. Moving them here pushes that load to when canvas is actually loaded.
   const canvasFunctions = initFunctions({
     timefilter: setupPlugins.data.query.timefilter.timefilter,
-    prependBasePath: coreSetup.http.basePath.prepend,
+    prependBasePath: coreStart.http.basePath.prepend,
     types: setupPlugins.expressions.getTypes(),
     paletteService: await setupPlugins.charts.palettes.getPalettes(),
   });
@@ -99,7 +112,7 @@ export const initializeCanvas = async (
   }
 
   // Create Store
-  const canvasStore = await createStore(coreSetup, setupPlugins);
+  const canvasStore = await createStore(coreSetup);
 
   registerLanguage(Object.values(services.expressions.getService().getFunctions()));
 
@@ -147,7 +160,7 @@ export const initializeCanvas = async (
   return canvasStore;
 };
 
-export const teardownCanvas = (coreStart: CoreStart, startPlugins: CanvasStartDeps) => {
+export const teardownCanvas = (coreStart: CoreStart) => {
   destroyRegistries();
 
   // Canvas pollutes the jQuery plot plugins collection with custom plugins that only work in Canvas.
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts b/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts
index f8c6354d3935f..e3824798d1df1 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts
+++ b/x-pack/plugins/canvas/public/components/asset_manager/asset_manager.ts
@@ -13,7 +13,7 @@ import { getId } from '../../lib/get_id';
 // @ts-expect-error untyped local
 import { findExistingAsset } from '../../lib/find_existing_asset';
 import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
-import { encode } from '../../../common/lib/dataurl';
+import { encode } from '../../../../../../src/plugins/presentation_util/public';
 // @ts-expect-error untyped local
 import { elementsRegistry } from '../../lib/elements_registry';
 // @ts-expect-error untyped local
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx
index 2e6d83cb1c8ac..93574270757f6 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/custom_element_modal.stories.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { CustomElementModal } from '../custom_element_modal';
-import { elasticLogo } from '../../../lib/elastic_logo';
+import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/public';
 
 storiesOf('components/Elements/CustomElementModal', module)
   .add('with title', () => (
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx b/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
index 86d9cab4eeea1..51ffe57fe5e76 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/custom_element_modal.tsx
@@ -29,7 +29,7 @@ import {
 import { i18n } from '@kbn/i18n';
 
 import { VALID_IMAGE_TYPES } from '../../../common/lib/constants';
-import { encode } from '../../../common/lib/dataurl';
+import { encode } from '../../../../../../src/plugins/presentation_util/public';
 import { ElementCard } from '../element_card';
 
 const MAX_NAME_LENGTH = 40;
diff --git a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx
index 636b40c040e1f..5d9998b16a330 100644
--- a/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx
+++ b/x-pack/plugins/canvas/public/components/dom_preview/dom_preview.tsx
@@ -9,15 +9,22 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 
-interface Props {
+interface HeightProps {
   elementId: string;
   height: number;
+  width?: never;
+}
+interface WidthProps {
+  elementId: string;
+  width: number;
+  height?: never;
 }
 
-export class DomPreview extends PureComponent<Props> {
+export class DomPreview extends PureComponent<HeightProps | WidthProps> {
   static propTypes = {
     elementId: PropTypes.string.isRequired,
-    height: PropTypes.number.isRequired,
+    height: PropTypes.number,
+    width: PropTypes.number,
   };
 
   _container: HTMLDivElement | null = null;
@@ -78,9 +85,19 @@ export class DomPreview extends PureComponent<Props> {
     const originalWidth = parseInt(originalStyle.getPropertyValue('width'), 10);
     const originalHeight = parseInt(originalStyle.getPropertyValue('height'), 10);
 
-    const thumbHeight = this.props.height;
-    const scale = thumbHeight / originalHeight;
-    const thumbWidth = originalWidth * scale;
+    let thumbHeight = 0;
+    let thumbWidth = 0;
+    let scale = 1;
+
+    if (this.props.height) {
+      thumbHeight = this.props.height;
+      scale = thumbHeight / originalHeight;
+      thumbWidth = originalWidth * scale;
+    } else if (this.props.width) {
+      thumbWidth = this.props.width;
+      scale = thumbWidth / originalWidth;
+      thumbHeight = originalHeight * scale;
+    }
 
     if (this._content.firstChild) {
       this._content.removeChild(this._content.firstChild);
diff --git a/x-pack/plugins/canvas/public/components/download/download.tsx b/x-pack/plugins/canvas/public/components/download/download.tsx
index 856d6cb7e080e..89cd999481007 100644
--- a/x-pack/plugins/canvas/public/components/download/download.tsx
+++ b/x-pack/plugins/canvas/public/components/download/download.tsx
@@ -9,7 +9,7 @@ import { toByteArray } from 'base64-js';
 import fileSaver from 'file-saver';
 import PropTypes from 'prop-types';
 import React, { ReactElement } from 'react';
-import { parseDataUrl } from '../../../common/lib/dataurl';
+import { parseDataUrl } from '../../../../../../src/plugins/presentation_util/public';
 
 interface Props {
   children: ReactElement<any>;
diff --git a/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx b/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx
index ae0d4328aa98d..4c68f185b196f 100644
--- a/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/element_card/__stories__/element_card.stories.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { ElementCard } from '../element_card';
-import { elasticLogo } from '../../../lib/elastic_logo';
+import { elasticLogo } from '../../../../../../../src/plugins/presentation_util/public';
 
 storiesOf('components/Elements/ElementCard', module)
   .addDecorator((story) => (
diff --git a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
index 6f98baf944bac..81532816d9c83 100644
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 import { ExpressionFunction } from 'src/plugins/expressions';
 import { EuiButtonEmpty } from '@elastic/eui';
 import copy from 'copy-to-clipboard';
-import { notifyService } from '../../services';
+import { useNotifyService } from '../../services';
 import { generateFunctionReference } from './generate_function_reference';
 
 interface Props {
@@ -17,16 +17,15 @@ interface Props {
 }
 
 export const FunctionReferenceGenerator: FC<Props> = ({ functionRegistry }) => {
+  const notifyService = useNotifyService();
   const functionDefinitions = Object.values(functionRegistry);
 
   const copyDocs = () => {
     copy(generateFunctionReference(functionDefinitions));
-    notifyService
-      .getService()
-      .success(
-        `Please paste updated docs into '/kibana/docs/canvas/canvas-function-reference.asciidoc' and commit your changes.`,
-        { title: 'Copied function docs to clipboard' }
-      );
+    notifyService.success(
+      `Please paste updated docs into '/kibana/docs/canvas/canvas-function-reference.asciidoc' and commit your changes.`,
+      { title: 'Copied function docs to clipboard' }
+    );
   };
 
   return (
diff --git a/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts b/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts
index 8f9b3923ff120..075e65bc24dab 100644
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts
@@ -10,7 +10,8 @@ import pluralize from 'pluralize';
 import { ExpressionFunction, ExpressionFunctionParameter } from 'src/plugins/expressions';
 import { functions as browserFunctions } from '../../../canvas_plugin_src/functions/browser';
 import { functions as serverFunctions } from '../../../canvas_plugin_src/functions/server';
-import { isValidDataUrl, DATATABLE_COLUMN_TYPES } from '../../../common/lib';
+import { DATATABLE_COLUMN_TYPES } from '../../../common/lib';
+import { isValidDataUrl } from '../../../../../../src/plugins/presentation_util/public';
 import { getFunctionExamples, FunctionExample } from './function_examples';
 
 const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split('');
diff --git a/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot
new file mode 100644
index 0000000000000..770e94ec4b174
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home/__snapshots__/home.stories.storyshot
@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Home Home Page 1`] = `
+<div
+  className="euiPage euiPage--grow euiPageTemplate"
+  style={
+    Object {
+      "minHeight": 460,
+    }
+  }
+>
+  <div
+    className="euiPageBody euiPageBody--borderRadiusNone"
+  >
+    <header
+      className="euiPageHeader euiPageHeader--paddingLarge euiPageHeader--responsive euiPageHeader--tabsAtBottom euiPage--restrictWidth-default euiPageHeader--center"
+    >
+      <div
+        className="euiPageHeaderContent"
+      >
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive euiPageHeaderContent__top"
+        >
+          <div
+            className="euiFlexItem"
+          >
+            <h1
+              className="euiTitle euiTitle--large"
+            >
+              Canvas
+            </h1>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--wrap euiPageHeaderContent__rightSideItems"
+            >
+              <div
+                className="euiFlexItem euiFlexItem--flexGrowZero"
+              >
+                <button
+                  className="euiButton euiButton--primary euiButton--fill"
+                  data-test-subj="create-workpad-button"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "minWidth": undefined,
+                    }
+                  }
+                  type="button"
+                >
+                  <span
+                    className="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      data-euiicon-type="plusInCircleFilled"
+                      size="m"
+                    />
+                    <span
+                      className="euiButton__text"
+                    >
+                      Create workpad
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          className="euiPageHeaderContent__bottom"
+        >
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiTabs euiTabs--condensed euiTabs--large"
+            role="tablist"
+          >
+            <button
+              aria-selected={true}
+              className="euiTab euiTab-isSelected"
+              disabled={false}
+              id="myWorkpads"
+              onClick={[Function]}
+              role="tab"
+              type="button"
+            >
+              <span
+                className="euiTab__content"
+              >
+                My workpads
+              </span>
+            </button>
+            <button
+              aria-selected={false}
+              className="euiTab"
+              data-test-subj="workpadTemplates"
+              disabled={false}
+              id="workpadTemplates"
+              onClick={[Function]}
+              role="tab"
+              type="button"
+            >
+              <span
+                className="euiTab__content"
+              >
+                Templates
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </header>
+    <div
+      className="euiPanel euiPanel--borderRadiusNone euiPanel--plain euiPanel--noShadow euiPageContent euiPageContent--borderRadiusNone"
+      role="main"
+    >
+      <div
+        className="euiPageContentBody euiPage--paddingLarge euiPage--restrictWidth-default"
+      >
+        <span
+          className="euiLoadingSpinner euiLoadingSpinner--medium"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/home/home.stories.tsx b/x-pack/plugins/canvas/public/components/home/home.stories.tsx
index 186b916afa003..0130f9f3f894b 100644
--- a/x-pack/plugins/canvas/public/components/home/home.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/home/home.stories.tsx
@@ -7,24 +7,17 @@
 
 import React from 'react';
 
-import {
-  reduxDecorator,
-  getAddonPanelParameters,
-  servicesContextDecorator,
-  getDisableStoryshotsParameter,
-} from '../../../storybook';
+import { reduxDecorator } from '../../../storybook';
+import { argTypes } from '../../services/storybook';
 
-import { Home } from './home.component';
+import { Home } from './home';
 
 export default {
-  title: 'Home/Home Page',
-  argTypes: {},
+  title: 'Home',
+  component: Home,
+  argTypes,
   decorators: [reduxDecorator()],
-  parameters: { ...getAddonPanelParameters(), ...getDisableStoryshotsParameter() },
+  parameters: {},
 };
 
-export const NoContent = () => <Home />;
-export const HasContent = () => <Home />;
-
-NoContent.decorators = [servicesContextDecorator()];
-HasContent.decorators = [servicesContextDecorator({ findWorkpads: 5, findTemplates: true })];
+export const HomePage = () => <Home />;
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot
new file mode 100644
index 0000000000000..c6468cf5a6f0a
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Home/Components/Empty Prompt Empty Prompt 1`] = `
+<div
+  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
+  style={
+    Object {
+      "minHeight": 600,
+    }
+  }
+>
+  <div
+    className="euiFlexItem euiFlexItem--flexGrowZero"
+  >
+    <div
+      className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
+    >
+      <div
+        className="euiEmptyPrompt"
+        color="subdued"
+      >
+        <span
+          color="subdued"
+          data-euiicon-type="importAction"
+          size="xxl"
+        />
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+        <h2
+          className="euiTitle euiTitle--medium"
+        >
+          Add your first workpad
+        </h2>
+        <span
+          className="euiTextColor euiTextColor--subdued"
+        >
+          <div
+            className="euiSpacer euiSpacer--m"
+          />
+          <div
+            className="euiText euiText--medium"
+          >
+            <p>
+              Create a new workpad, start from a template, or import a workpad JSON file by dropping it here.
+            </p>
+            <p>
+              New to Canvas?
+               
+              <a
+                className="euiLink euiLink--primary"
+                href="home#/tutorial_directory/sampleData"
+                rel="noreferrer"
+              >
+                Add your first workpad
+              </a>
+              .
+            </p>
+          </div>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/my_workpads.stories.storyshot b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/my_workpads.stories.storyshot
new file mode 100644
index 0000000000000..d081dffd219b0
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/my_workpads.stories.storyshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Home/Tabs/My Workpads My Workpads 1`] = `
+<div
+  className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
+    style={
+      Object {
+        "minHeight": 600,
+      }
+    }
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiLoadingSpinner euiLoadingSpinner--xLarge"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot
new file mode 100644
index 0000000000000..44c9160cdf544
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot
@@ -0,0 +1,974 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
+<div
+  className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div>
+    <div
+      className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+    >
+      <div
+        className="euiFlexItem euiSearchBar__searchHolder"
+      >
+        <div
+          className="euiFormControlLayout euiFormControlLayout--fullWidth"
+        >
+          <div
+            className="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+              className="euiFieldSearch euiFieldSearch--fullWidth"
+              data-test-subj="tableListSearchBox"
+              defaultValue=""
+              onKeyUp={[Function]}
+              placeholder="Find workpad"
+              type="search"
+            />
+            <div
+              className="euiFormControlLayoutIcons"
+            >
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="search"
+                  size="m"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        className="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          className="euiFilePicker canvasWorkpad__upload--compressed"
+        >
+          <div
+            className="euiFilePicker__wrap"
+          >
+            <input
+              accept="application/json"
+              aria-describedby="generated-id"
+              aria-label="Import workpad JSON file"
+              className="euiFilePicker__input"
+              disabled={false}
+              onChange={[Function]}
+              onDragLeave={[Function]}
+              onDragOver={[Function]}
+              onDrop={[Function]}
+              type="file"
+            />
+            <div
+              className="euiFilePicker__prompt"
+              id="generated-id"
+            >
+              <span
+                aria-hidden="true"
+                className="euiFilePicker__icon"
+                data-euiicon-type="importAction"
+                size="m"
+              />
+              <div
+                className="euiFilePicker__promptText"
+              >
+                Import workpad JSON file
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      className="euiSpacer euiSpacer--l"
+    />
+    <div
+      className="euiBasicTable"
+      data-test-subj="canvasWorkpadTable"
+    >
+      <div>
+        <div
+          className="euiTableHeaderMobile"
+        >
+          <div
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <div
+                className="euiCheckbox"
+              >
+                <input
+                  aria-label="Select all rows"
+                  checked={false}
+                  className="euiCheckbox__input"
+                  disabled={false}
+                  id="_selection_column-checkbox_generated-id"
+                  onChange={[Function]}
+                  type="checkbox"
+                />
+                <div
+                  className="euiCheckbox__square"
+                />
+                <label
+                  className="euiCheckbox__label"
+                  htmlFor="_selection_column-checkbox_generated-id"
+                >
+                  Select all rows
+                </label>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+            >
+              <div
+                className="euiTableSortMobile"
+              >
+                <div
+                  className="euiPopover euiPopover--anchorDownRight"
+                >
+                  <div
+                    className="euiPopover__anchor"
+                  >
+                    <button
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
+                      disabled={false}
+                      onClick={[Function]}
+                      type="button"
+                    >
+                      <span
+                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                      >
+                        <span
+                          className="euiButtonContent__icon"
+                          color="inherit"
+                          data-euiicon-type="arrowDown"
+                          size="s"
+                        />
+                        <span
+                          className="euiButtonEmpty__text"
+                        >
+                          Sorting
+                        </span>
+                      </span>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <table
+          className="euiTable euiTable--responsive"
+          id="generated-id"
+          tabIndex={-1}
+        >
+          <caption
+            className="euiScreenReaderOnly euiTableCaption"
+          />
+          <thead>
+            <tr>
+              <th
+                className="euiTableHeaderCellCheckbox"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableCellContent"
+                >
+                  <div
+                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                  >
+                    <input
+                      aria-label="Select all rows"
+                      checked={false}
+                      className="euiCheckbox__input"
+                      data-test-subj="checkboxSelectAll"
+                      disabled={false}
+                      id="_selection_column-checkbox_generated-id"
+                      onChange={[Function]}
+                      type="checkbox"
+                    />
+                    <div
+                      className="euiCheckbox__square"
+                    />
+                  </div>
+                </div>
+              </th>
+              <th
+                aria-live="polite"
+                aria-sort="none"
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_name_0"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <button
+                  className="euiTableHeaderButton"
+                  data-test-subj="tableHeaderSortButton"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiTableCellContent"
+                  >
+                    <span
+                      className="euiTableCellContent__text"
+                    >
+                      Workpad name
+                    </span>
+                  </span>
+                </button>
+              </th>
+              <th
+                aria-live="polite"
+                aria-sort="none"
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_@created_1"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <button
+                  className="euiTableHeaderButton"
+                  data-test-subj="tableHeaderSortButton"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiTableCellContent"
+                  >
+                    <span
+                      className="euiTableCellContent__text"
+                    >
+                      Created
+                    </span>
+                  </span>
+                </button>
+              </th>
+              <th
+                aria-live="polite"
+                aria-sort="descending"
+                className="euiTableHeaderCell"
+                data-test-subj="tableHeaderCell_@timestamp_2"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <button
+                  className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+                  data-test-subj="tableHeaderSortButton"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiTableCellContent"
+                  >
+                    <span
+                      className="euiTableCellContent__text"
+                    >
+                      Updated
+                    </span>
+                    <span
+                      className="euiTableSortIcon"
+                      data-euiicon-type="sortDown"
+                      size="m"
+                    />
+                  </span>
+                </button>
+              </th>
+              <th
+                className="euiTableHeaderCell"
+                role="columnheader"
+                scope="col"
+                style={
+                  Object {
+                    "width": "100px",
+                  }
+                }
+              >
+                <span
+                  className="euiTableCellContent euiTableCellContent--alignRight"
+                >
+                  <span
+                    className="euiTableCellContent__text"
+                  >
+                    Actions
+                  </span>
+                </span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              className="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+            >
+              <td
+                className="euiTableRowCellCheckbox"
+              >
+                <div
+                  className="euiTableCellContent"
+                >
+                  <div
+                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                  >
+                    <input
+                      aria-label="Select this row"
+                      checked={false}
+                      className="euiCheckbox__input"
+                      data-test-subj="checkboxSelectRow-workpad-2"
+                      disabled={false}
+                      id="_selection_column_workpad-2-checkbox"
+                      onChange={[Function]}
+                      title="Select this row"
+                      type="checkbox"
+                    />
+                    <div
+                      className="euiCheckbox__square"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Workpad name
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <a
+                    aria-label="Load workpad 'Workpad 2'"
+                    className="euiLink euiLink--primary"
+                    data-test-subj="canvasWorkpadTableWorkpad"
+                    href="/workpad/workpad-2"
+                    rel="noreferrer"
+                  >
+                    <span>
+                      Workpad 2
+                    </span>
+                  </a>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Created
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 3, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Updated
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 4, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell euiTableRowCell--hasActions"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                >
+                  <div
+                    className="euiTableCellContent__hoverItem"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Export workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="exportAction"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Clone workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="copy"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+            >
+              <td
+                className="euiTableRowCellCheckbox"
+              >
+                <div
+                  className="euiTableCellContent"
+                >
+                  <div
+                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                  >
+                    <input
+                      aria-label="Select this row"
+                      checked={false}
+                      className="euiCheckbox__input"
+                      data-test-subj="checkboxSelectRow-workpad-1"
+                      disabled={false}
+                      id="_selection_column_workpad-1-checkbox"
+                      onChange={[Function]}
+                      title="Select this row"
+                      type="checkbox"
+                    />
+                    <div
+                      className="euiCheckbox__square"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Workpad name
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <a
+                    aria-label="Load workpad 'Workpad 1'"
+                    className="euiLink euiLink--primary"
+                    data-test-subj="canvasWorkpadTableWorkpad"
+                    href="/workpad/workpad-1"
+                    rel="noreferrer"
+                  >
+                    <span>
+                      Workpad 1
+                    </span>
+                  </a>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Created
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 2, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Updated
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 3, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell euiTableRowCell--hasActions"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                >
+                  <div
+                    className="euiTableCellContent__hoverItem"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Export workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="exportAction"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Clone workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="copy"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+            <tr
+              className="euiTableRow euiTableRow-isSelectable euiTableRow-hasActions"
+            >
+              <td
+                className="euiTableRowCellCheckbox"
+              >
+                <div
+                  className="euiTableCellContent"
+                >
+                  <div
+                    className="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel"
+                  >
+                    <input
+                      aria-label="Select this row"
+                      checked={false}
+                      className="euiCheckbox__input"
+                      data-test-subj="checkboxSelectRow-workpad-0"
+                      disabled={false}
+                      id="_selection_column_workpad-0-checkbox"
+                      onChange={[Function]}
+                      title="Select this row"
+                      type="checkbox"
+                    />
+                    <div
+                      className="euiCheckbox__square"
+                    />
+                  </div>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Workpad name
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  <a
+                    aria-label="Load workpad 'Workpad 0'"
+                    className="euiLink euiLink--primary"
+                    data-test-subj="canvasWorkpadTableWorkpad"
+                    href="/workpad/workpad-0"
+                    rel="noreferrer"
+                  >
+                    <span>
+                      Workpad 0
+                    </span>
+                  </a>
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Created
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 1, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell"
+                style={
+                  Object {
+                    "width": "20%",
+                  }
+                }
+              >
+                <div
+                  className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
+                >
+                  Updated
+                </div>
+                <div
+                  className="euiTableCellContent euiTableCellContent--overflowingContent"
+                >
+                  Jan 2, 2000 @ 00:00:00.000
+                </div>
+              </td>
+              <td
+                className="euiTableRowCell euiTableRowCell--hasActions"
+                style={
+                  Object {
+                    "width": undefined,
+                  }
+                }
+              >
+                <div
+                  className="euiTableCellContent euiTableCellContent--alignRight euiTableCellContent--showOnHover euiTableCellContent--overflowingContent"
+                >
+                  <div
+                    className="euiTableCellContent__hoverItem"
+                  >
+                    <div
+                      className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      onBlur={[Function]}
+                      onFocus={[Function]}
+                    >
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Export workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="exportAction"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                      <div
+                        className="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
+                        <span
+                          className="euiToolTipAnchor"
+                          onKeyUp={[Function]}
+                          onMouseOut={[Function]}
+                          onMouseOver={[Function]}
+                        >
+                          <button
+                            aria-label="Clone workpad"
+                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            disabled={false}
+                            onBlur={[Function]}
+                            onClick={[Function]}
+                            onFocus={[Function]}
+                            type="button"
+                          >
+                            <span
+                              aria-hidden="true"
+                              className="euiButtonIcon__icon"
+                              color="inherit"
+                              data-euiicon-type="copy"
+                              size="m"
+                            />
+                          </button>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div>
+        <div
+          className="euiSpacer euiSpacer--m"
+        />
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
+        >
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <div
+              className="euiPopover euiPopover--anchorUpRight"
+            >
+              <div
+                className="euiPopover__anchor"
+              >
+                <button
+                  className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
+                  data-test-subj="tablePaginationPopoverButton"
+                  disabled={false}
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <span
+                    className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
+                  >
+                    <span
+                      className="euiButtonContent__icon"
+                      color="inherit"
+                      data-euiicon-type="arrowDown"
+                      size="s"
+                    />
+                    <span
+                      className="euiButtonEmpty__text"
+                    >
+                      Rows per page
+                      : 
+                      10
+                    </span>
+                  </span>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <nav
+              className="euiPagination"
+            >
+              <button
+                aria-label="Previous page"
+                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                data-test-subj="pagination-button-previous"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="arrowLeft"
+                  size="m"
+                />
+              </button>
+              <ul
+                className="euiPagination__list"
+              >
+                <li
+                  className="euiPagination__item"
+                >
+                  <button
+                    aria-controls="generated-id"
+                    aria-current={true}
+                    aria-label="Page 1 of 1"
+                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    data-test-subj="pagination-button-0"
+                    disabled={true}
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiButtonContent euiButtonEmpty__content"
+                    >
+                      <span
+                        className="euiButtonEmpty__text"
+                      >
+                        1
+                      </span>
+                    </span>
+                  </button>
+                </li>
+              </ul>
+              <button
+                aria-label="Next page"
+                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                data-test-subj="pagination-button-next"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
+              >
+                <span
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  color="inherit"
+                  data-euiicon-type="arrowRight"
+                  size="m"
+                />
+              </button>
+            </nav>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/empty_prompt.stories.tsx b/x-pack/plugins/canvas/public/components/home/my_workpads/empty_prompt.stories.tsx
index aef1b0625b585..2d457b913c79f 100644
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/empty_prompt.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/empty_prompt.stories.tsx
@@ -8,12 +8,11 @@
 import React from 'react';
 
 import { HomeEmptyPrompt } from './empty_prompt';
-import { getDisableStoryshotsParameter } from '../../../../storybook';
 
 export default {
-  title: 'Home/Empty Prompt',
+  title: 'Home/Components/Empty Prompt',
   argTypes: {},
-  parameters: { ...getDisableStoryshotsParameter() },
+  parameters: {},
 };
 
 export const EmptyPrompt = () => <HomeEmptyPrompt />;
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.stories.tsx b/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.stories.tsx
index 0d5d6ca16f614..52afd552bbc49 100644
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/my_workpads.stories.tsx
@@ -5,52 +5,29 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React from 'react';
 import { EuiPanel } from '@elastic/eui';
 
-import {
-  reduxDecorator,
-  getAddonPanelParameters,
-  servicesContextDecorator,
-  getDisableStoryshotsParameter,
-} from '../../../../storybook';
-import { getSomeWorkpads } from '../../../services/stubs/workpad';
+import { reduxDecorator } from '../../../../storybook';
+import { argTypes } from '../../../services/storybook';
 
-import { MyWorkpads, WorkpadsContext } from './my_workpads';
-import { MyWorkpads as MyWorkpadsComponent } from './my_workpads.component';
+import { MyWorkpads as Component } from './my_workpads';
+
+const { workpadCount, useStaticData } = argTypes;
 
 export default {
-  title: 'Home/My Workpads',
-  argTypes: {},
+  title: 'Home/Tabs/My Workpads',
+  component: Component,
+  argTypes: {
+    workpadCount,
+    useStaticData,
+  },
   decorators: [reduxDecorator()],
-  parameters: { ...getAddonPanelParameters(), ...getDisableStoryshotsParameter() },
-};
-
-export const NoWorkpads = () => {
-  return <MyWorkpads />;
-};
-
-export const HasWorkpads = () => {
-  return (
-    <EuiPanel>
-      <MyWorkpads />
-    </EuiPanel>
-  );
-};
-
-NoWorkpads.decorators = [servicesContextDecorator()];
-HasWorkpads.decorators = [servicesContextDecorator({ findWorkpads: 5 })];
-
-export const Component = ({ workpadCount }: { workpadCount: number }) => {
-  const [workpads, setWorkpads] = useState(getSomeWorkpads(workpadCount));
-
-  return (
-    <WorkpadsContext.Provider value={{ workpads, setWorkpads }}>
-      <EuiPanel>
-        <MyWorkpadsComponent {...{ workpads }} />
-      </EuiPanel>
-    </WorkpadsContext.Provider>
-  );
+  parameters: {},
 };
 
-Component.args = { workpadCount: 5 };
+export const MyWorkpads = () => (
+  <EuiPanel>
+    <Component />
+  </EuiPanel>
+);
diff --git a/x-pack/plugins/canvas/public/components/home/my_workpads/workpad_table.stories.tsx b/x-pack/plugins/canvas/public/components/home/my_workpads/workpad_table.stories.tsx
index 501a0a76a8589..6675dea238cc4 100644
--- a/x-pack/plugins/canvas/public/components/home/my_workpads/workpad_table.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/home/my_workpads/workpad_table.stories.tsx
@@ -8,76 +8,35 @@
 import React, { useState, useEffect } from 'react';
 import { EuiPanel } from '@elastic/eui';
 
-import { action } from '@storybook/addon-actions';
-import {
-  reduxDecorator,
-  getAddonPanelParameters,
-  getDisableStoryshotsParameter,
-} from '../../../../storybook';
-import { getSomeWorkpads } from '../../../services/stubs/workpad';
+import { reduxDecorator } from '../../../../storybook';
 
-import { WorkpadTable } from './workpad_table';
-import { WorkpadTable as WorkpadTableComponent } from './workpad_table.component';
+import { argTypes } from '../../../services/storybook';
+import { getSomeWorkpads } from '../../../services/stubs/workpad';
+import { WorkpadTable as Component } from './workpad_table';
 import { WorkpadsContext } from './my_workpads';
 
+const { workpadCount } = argTypes;
+
 export default {
-  title: 'Home/Workpad Table',
-  argTypes: {},
+  title: 'Home/Components/Workpad Table',
+  argTypes: { workpadCount },
   decorators: [reduxDecorator()],
-  parameters: { ...getAddonPanelParameters(), ...getDisableStoryshotsParameter() },
-};
-
-export const NoWorkpads = () => {
-  const [workpads, setWorkpads] = useState(getSomeWorkpads(0));
-
-  return (
-    <WorkpadsContext.Provider value={{ workpads, setWorkpads }}>
-      <EuiPanel>
-        <WorkpadTable />
-      </EuiPanel>
-    </WorkpadsContext.Provider>
-  );
+  parameters: {},
 };
 
-export const HasWorkpads = () => {
-  const [workpads, setWorkpads] = useState(getSomeWorkpads(5));
-
-  return (
-    <WorkpadsContext.Provider value={{ workpads, setWorkpads }}>
-      <EuiPanel>
-        <WorkpadTable />
-      </EuiPanel>
-    </WorkpadsContext.Provider>
-  );
-};
-
-export const Component = ({
-  workpadCount,
-  canUserWrite,
-  dateFormat,
-}: {
-  workpadCount: number;
-  canUserWrite: boolean;
-  dateFormat: string;
-}) => {
-  const [workpads, setWorkpads] = useState(getSomeWorkpads(workpadCount));
+export const WorkpadTable = (args: { findWorkpads: number }) => {
+  const { findWorkpads } = args;
+  const [workpads, setWorkpads] = useState(getSomeWorkpads(findWorkpads));
 
   useEffect(() => {
-    setWorkpads(getSomeWorkpads(workpadCount));
-  }, [workpadCount]);
+    setWorkpads(getSomeWorkpads(findWorkpads));
+  }, [findWorkpads]);
 
   return (
-    <WorkpadsContext.Provider value={{ workpads, setWorkpads }}>
-      <EuiPanel>
-        <WorkpadTableComponent
-          {...{ workpads, canUserWrite, dateFormat }}
-          onCloneWorkpad={action('onCloneWorkpad')}
-          onExportWorkpad={action('onExportWorkpad')}
-        />
-      </EuiPanel>
-    </WorkpadsContext.Provider>
+    <EuiPanel>
+      <WorkpadsContext.Provider value={{ workpads, setWorkpads }}>
+        <Component />
+      </WorkpadsContext.Provider>
+    </EuiPanel>
   );
 };
-
-Component.args = { workpadCount: 5, canUserWrite: true, dateFormat: 'MMM D, YYYY @ HH:mm:ss.SSS' };
-Component.argTypes = {};
diff --git a/x-pack/plugins/canvas/public/components/home/workpad_templates/__snapshots__/workpad_templates.stories.storyshot b/x-pack/plugins/canvas/public/components/home/workpad_templates/__snapshots__/workpad_templates.stories.storyshot
new file mode 100644
index 0000000000000..7226726354834
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/home/workpad_templates/__snapshots__/workpad_templates.stories.storyshot
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Home/Tabs/Workpad Templates Workpad Templates 1`] = `
+<div
+  className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+>
+  <div
+    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceAround euiFlexGroup--directionRow euiFlexGroup--responsive"
+    style={
+      Object {
+        "minHeight": 600,
+      }
+    }
+  >
+    <div
+      className="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <span
+        className="euiLoadingSpinner euiLoadingSpinner--xLarge"
+      />
+    </div>
+  </div>
+</div>
+`;
diff --git a/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.stories.tsx b/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.stories.tsx
index cb2b872ea15f9..92583ca845aa8 100644
--- a/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/home/workpad_templates/workpad_templates.stories.tsx
@@ -6,57 +6,27 @@
  */
 
 import { EuiPanel } from '@elastic/eui';
-import { action } from '@storybook/addon-actions';
 import React from 'react';
 
-import {
-  reduxDecorator,
-  getAddonPanelParameters,
-  servicesContextDecorator,
-  getDisableStoryshotsParameter,
-} from '../../../../storybook';
-import { getSomeTemplates } from '../../../services/stubs/workpad';
+import { reduxDecorator } from '../../../../storybook';
+import { argTypes } from '../../../services/storybook';
 
-import { WorkpadTemplates } from './workpad_templates';
-import { WorkpadTemplates as WorkpadTemplatesComponent } from './workpad_templates.component';
+import { WorkpadTemplates as Component } from './workpad_templates';
+
+const { hasTemplates } = argTypes;
 
 export default {
-  title: 'Home/Workpad Templates',
-  argTypes: {},
+  title: 'Home/Tabs/Workpad Templates',
+  component: Component,
+  argTypes: {
+    hasTemplates,
+  },
   decorators: [reduxDecorator()],
-  parameters: { ...getAddonPanelParameters(), ...getDisableStoryshotsParameter() },
-};
-
-export const NoTemplates = () => {
-  return (
-    <EuiPanel>
-      <WorkpadTemplates />
-    </EuiPanel>
-  );
-};
-
-export const HasTemplates = () => {
-  return (
-    <EuiPanel>
-      <WorkpadTemplates />
-    </EuiPanel>
-  );
+  parameters: {},
 };
 
-NoTemplates.decorators = [servicesContextDecorator()];
-HasTemplates.decorators = [servicesContextDecorator({ findTemplates: true })];
-
-export const Component = ({ hasTemplates }: { hasTemplates: boolean }) => {
-  return (
-    <EuiPanel>
-      <WorkpadTemplatesComponent
-        onCreateWorkpad={action('onCreateWorkpad')}
-        templates={hasTemplates ? getSomeTemplates().templates : []}
-      />
-    </EuiPanel>
-  );
-};
-
-Component.args = {
-  hasTemplates: true,
-};
+export const WorkpadTemplates = () => (
+  <EuiPanel>
+    <Component />
+  </EuiPanel>
+);
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
index 9d1939db43fd5..c4d1e6fb91a69 100644
--- a/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
@@ -7,9 +7,18 @@
 
 import React, { Fragment, Component } from 'react';
 import PropTypes from 'prop-types';
-import { EuiIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
+import {
+  EuiIcon,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiText,
+  EuiToolTip,
+  EuiDragDropContext,
+  EuiDraggable,
+  EuiDroppable,
+  DragDropContextProps,
+} from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { DragDropContext, Droppable, Draggable, DragDropContextProps } from 'react-beautiful-dnd';
 
 // @ts-expect-error untyped dependency
 import Style from 'style-it';
@@ -173,46 +182,37 @@ export class PageManager extends Component<Props, State> {
     const pageNumber = i + 1;
 
     return (
-      <Draggable key={page.id} draggableId={page.id} index={i} isDragDisabled={!isWriteable}>
-        {(provided) => (
-          <div
-            key={page.id}
-            className={`canvasPageManager__page ${
-              page.id === selectedPage ? 'canvasPageManager__page-isActive' : ''
-            }`}
-            ref={(el) => {
-              if (page.id === selectedPage) {
-                this._activePageRef = el;
-              }
-              provided.innerRef(el);
-            }}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
-          >
-            <EuiFlexGroup gutterSize="s">
-              <EuiFlexItem grow={false}>
-                <EuiText size="xs" className="canvasPageManager__pageNumber">
-                  {pageNumber}
-                </EuiText>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <WorkpadRoutingContext.Consumer>
-                  {({ getUrl }) => (
-                    <RoutingLink to={getUrl(pageNumber)}>
-                      {Style.it(
-                        workpadCSS,
-                        <div>
-                          <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
-                        </div>
-                      )}
-                    </RoutingLink>
+      <EuiDraggable
+        key={page.id}
+        draggableId={page.id}
+        index={i}
+        isDragDisabled={!isWriteable}
+        className={`canvasPageManager__page ${
+          page.id === selectedPage ? 'canvasPageManager__page-isActive' : ''
+        }`}
+      >
+        <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiText size="xs" className="canvasPageManager__pageNumber">
+              {pageNumber}
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <WorkpadRoutingContext.Consumer>
+              {({ getUrl }) => (
+                <RoutingLink to={getUrl(pageNumber)}>
+                  {Style.it(
+                    workpadCSS,
+                    <div>
+                      <PagePreview height={100} page={page} onRemove={this.onConfirmRemove} />
+                    </div>
                   )}
-                </WorkpadRoutingContext.Consumer>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </div>
-        )}
-      </Draggable>
+                </RoutingLink>
+              )}
+            </WorkpadRoutingContext.Consumer>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiDraggable>
     );
   };
 
@@ -224,25 +224,17 @@ export class PageManager extends Component<Props, State> {
       <Fragment>
         <EuiFlexGroup gutterSize="none" className="canvasPageManager">
           <EuiFlexItem className="canvasPageManager__pages">
-            <DragDropContext onDragEnd={this.onDragEnd}>
-              <Droppable droppableId="droppable-page-manager" direction="horizontal">
-                {(provided) => (
-                  <div
-                    className={`canvasPageManager__pageList ${
-                      showTrayPop ? 'canvasPageManager--trayPop' : ''
-                    }`}
-                    ref={(el) => {
-                      this._pageListRef = el;
-                      provided.innerRef(el);
-                    }}
-                    {...provided.droppableProps}
-                  >
-                    {pages.map(this.renderPage)}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
+            <EuiDragDropContext onDragEnd={this.onDragEnd}>
+              <EuiDroppable droppableId="droppable-page-manager" grow={true} direction="horizontal">
+                <div
+                  className={`canvasPageManager__pageList ${
+                    showTrayPop ? 'canvasPageManager--trayPop' : ''
+                  }`}
+                >
+                  {pages.map(this.renderPage)}
+                </div>
+              </EuiDroppable>
+            </EuiDragDropContext>
           </EuiFlexItem>
           {isWriteable && (
             <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx
index 17d6a3d11b60f..ef48b9815062c 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/fixtures/test_elements.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { elasticLogo } from '../../../../lib/elastic_logo';
+import { elasticLogo } from '../../../../../../../../src/plugins/presentation_util/public';
 
 export const testCustomElements = [
   {
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
index 9b592d402f84c..524c1a48b6cee 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
@@ -11,7 +11,7 @@ import { compose, withState } from 'recompose';
 import { camelCase } from 'lodash';
 import { cloneSubgraphs } from '../../lib/clone_subgraphs';
 import * as customElementService from '../../lib/custom_element_service';
-import { withServices, WithServicesProps } from '../../services';
+import { withServices, WithServicesProps, pluginServices } from '../../services';
 // @ts-expect-error untyped local
 import { selectToplevelNodes } from '../../state/actions/transient';
 // @ts-expect-error untyped local
@@ -68,6 +68,7 @@ const mergeProps = (
   dispatchProps: DispatchProps,
   ownProps: OwnPropsWithState & WithServicesProps
 ): ComponentProps => {
+  const notifyService = pluginServices.getServices().notify;
   const { pageId } = stateProps;
   const { onClose, search, setCustomElements } = ownProps;
 
@@ -94,7 +95,7 @@ const mergeProps = (
       try {
         await findCustomElements();
       } catch (err) {
-        ownProps.services.notify.error(err, {
+        notifyService.error(err, {
           title: `Couldn't find custom elements`,
         });
       }
@@ -105,7 +106,7 @@ const mergeProps = (
         await customElementService.remove(id);
         await findCustomElements();
       } catch (err) {
-        ownProps.services.notify.error(err, {
+        notifyService.error(err, {
           title: `Couldn't delete custom elements`,
         });
       }
@@ -121,7 +122,7 @@ const mergeProps = (
         });
         await findCustomElements();
       } catch (err) {
-        ownProps.services.notify.error(err, {
+        notifyService.error(err, {
           title: `Couldn't update custom elements`,
         });
       }
diff --git a/x-pack/plugins/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx b/x-pack/plugins/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx
index bd47bb52e0030..e571cc12f4425 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/toolbar/__stories__/toolbar.stories.tsx
@@ -7,26 +7,28 @@
 
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { Toolbar } from '../toolbar.component';
 
-// @ts-expect-error untyped local
-import { getDefaultElement } from '../../../state/defaults';
+// @ts-expect-error
+import { getDefaultPage } from '../../../state/defaults';
+import { reduxDecorator } from '../../../../storybook';
+import { Toolbar } from '../toolbar';
+
+const pages = [...new Array(10)].map(() => getDefaultPage());
+
+const Pages = ({ story }: { story: Function }) => (
+  <div>
+    {story()}
+    <div style={{ visibility: 'hidden', position: 'absolute' }}>
+      {pages.map((page, index) => (
+        <div style={{ height: 66, width: 100, textAlign: 'center' }} id={page.id}>
+          <h1 style={{ paddingTop: 22 }}>Page {index}</h1>
+        </div>
+      ))}
+    </div>
+  </div>
+);
 
 storiesOf('components/Toolbar', module)
-  .add('no element selected', () => (
-    <Toolbar
-      isWriteable={true}
-      selectedPageNumber={1}
-      totalPages={1}
-      workpadName={'My Canvas Workpad'}
-    />
-  ))
-  .add('element selected', () => (
-    <Toolbar
-      isWriteable={true}
-      selectedElement={getDefaultElement()}
-      selectedPageNumber={1}
-      totalPages={1}
-      workpadName={'My Canvas Workpad'}
-    />
-  ));
+  .addDecorator((story) => <Pages story={story} />)
+  .addDecorator(reduxDecorator({ pages }))
+  .add('redux', () => <Toolbar />);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
index 6f4b6661ded53..80280d55a4e1c 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
@@ -95,17 +95,6 @@ You can use standard Markdown in here, but you can also access your piped-in dat
   | progress shape="gauge" label={formatnumber 0%} font={font size=24 family="Helvetica" color="#000000" align=center}
   | render`,
   },
-  revealImage: {
-    name: 'revealImage',
-    displayName: 'Image reveal',
-    type: 'image',
-    help: 'Reveals a percentage of an image',
-    expression: `filters
-  | demodata
-  | math "mean(percent_uptime)"
-  | revealImage origin=bottom image=null
-  | render`,
-  },
   shape: {
     name: 'shape',
     displayName: 'Shape',
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
index 20e52b40bc702..59a7f263fea08 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
@@ -8,8 +8,8 @@
 import { action } from '@storybook/addon-actions';
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import { platformService } from '../../../../services/stubs/platform';
-import { reportingService } from '../../../../services/stubs/reporting';
+import { platformService } from '../../../../services/legacy/stubs/platform';
+import { reportingService } from '../../../../services/legacy/stubs/reporting';
 import { ShareMenu } from '../share_menu.component';
 
 storiesOf('components/WorkpadHeader/ShareMenu', module).add('minimal', () => (
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
index 65c9d6598578d..9b9c3d3dfee9f 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
@@ -30,6 +30,7 @@ import { withKibana } from '../../../../../../../../src/plugins/kibana_react/pub
 import { OnCloseFn } from '../share_menu.component';
 import { ZIP } from '../../../../../i18n/constants';
 import { WithKibanaProps } from '../../../../index';
+import { pluginServices } from '../../../../services';
 
 export { OnDownloadFn, OnCopyFn } from './flyout.component';
 
@@ -95,7 +96,7 @@ export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>
       unsupportedRenderers,
       onClose,
       onCopy: () => {
-        kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage());
+        pluginServices.getServices().notify.info(strings.getCopyShareConfigMessage());
       },
       onDownload: (type) => {
         switch (type) {
@@ -111,7 +112,7 @@ export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>
               .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad))
               .then((blob) => downloadZippedRuntime(blob.data))
               .catch((err: Error) => {
-                kibana.services.canvas.notify.error(err, {
+                pluginServices.getServices().notify.error(err, {
                   title: strings.getShareableZipErrorTitle(workpad.name),
                 });
               });
diff --git a/x-pack/plugins/canvas/public/functions/pie.test.js b/x-pack/plugins/canvas/public/functions/pie.test.js
index b1c1746340892..5e35cc3bf523c 100644
--- a/x-pack/plugins/canvas/public/functions/pie.test.js
+++ b/x-pack/plugins/canvas/public/functions/pie.test.js
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../test_helpers/function_wrapper';
 import { testPie } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries';
+import { functionWrapper } from '../../../../../src/plugins/presentation_util/public';
 import {
   fontStyle,
   grayscalePalette,
diff --git a/x-pack/plugins/canvas/public/functions/plot.test.js b/x-pack/plugins/canvas/public/functions/plot.test.js
index 5ed858961d798..8dd2470ea17dc 100644
--- a/x-pack/plugins/canvas/public/functions/plot.test.js
+++ b/x-pack/plugins/canvas/public/functions/plot.test.js
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { functionWrapper } from '../../test_helpers/function_wrapper';
+import { functionWrapper } from '../../../../../src/plugins/presentation_util/public';
 import { testPlot } from '../../canvas_plugin_src/functions/common/__fixtures__/test_pointseries';
 import {
   fontStyle,
diff --git a/x-pack/plugins/canvas/public/lib/download_workpad.ts b/x-pack/plugins/canvas/public/lib/download_workpad.ts
index 8deda818a43d3..a346de3322d09 100644
--- a/x-pack/plugins/canvas/public/lib/download_workpad.ts
+++ b/x-pack/plugins/canvas/public/lib/download_workpad.ts
@@ -8,7 +8,10 @@
 import fileSaver from 'file-saver';
 import { API_ROUTE_SHAREABLE_RUNTIME_DOWNLOAD } from '../../common/lib/constants';
 import { ErrorStrings } from '../../i18n';
-import { notifyService } from '../services';
+
+// TODO: clint - convert this whole file to hooks
+import { pluginServices } from '../services';
+
 // @ts-expect-error untyped local
 import * as workpadService from './workpad_service';
 import { CanvasRenderedWorkpad } from '../../shareable_runtime/types';
@@ -21,7 +24,8 @@ export const downloadWorkpad = async (workpadId: string) => {
     const jsonBlob = new Blob([JSON.stringify(workpad)], { type: 'application/json' });
     fileSaver.saveAs(jsonBlob, `canvas-workpad-${workpad.name}-${workpad.id}.json`);
   } catch (err) {
-    notifyService.getService().error(err, { title: strings.getDownloadFailureErrorMessage() });
+    const notifyService = pluginServices.getServices().notify;
+    notifyService.error(err, { title: strings.getDownloadFailureErrorMessage() });
   }
 };
 
@@ -33,9 +37,8 @@ export const downloadRenderedWorkpad = async (renderedWorkpad: CanvasRenderedWor
       `canvas-embed-workpad-${renderedWorkpad.name}-${renderedWorkpad.id}.json`
     );
   } catch (err) {
-    notifyService
-      .getService()
-      .error(err, { title: strings.getDownloadRenderedWorkpadFailureErrorMessage() });
+    const notifyService = pluginServices.getServices().notify;
+    notifyService.error(err, { title: strings.getDownloadRenderedWorkpadFailureErrorMessage() });
   }
 };
 
@@ -45,9 +48,8 @@ export const downloadRuntime = async (basePath: string) => {
     window.open(path);
     return;
   } catch (err) {
-    notifyService
-      .getService()
-      .error(err, { title: strings.getDownloadRuntimeFailureErrorMessage() });
+    const notifyService = pluginServices.getServices().notify;
+    notifyService.error(err, { title: strings.getDownloadRuntimeFailureErrorMessage() });
   }
 };
 
@@ -56,8 +58,7 @@ export const downloadZippedRuntime = async (data: any) => {
     const zip = new Blob([data], { type: 'octet/stream' });
     fileSaver.saveAs(zip, 'canvas-workpad-embed.zip');
   } catch (err) {
-    notifyService
-      .getService()
-      .error(err, { title: strings.getDownloadZippedRuntimeFailureErrorMessage() });
+    const notifyService = pluginServices.getServices().notify;
+    notifyService.error(err, { title: strings.getDownloadZippedRuntimeFailureErrorMessage() });
   }
 };
diff --git a/x-pack/plugins/canvas/public/lib/elastic_outline.js b/x-pack/plugins/canvas/public/lib/elastic_outline.js
deleted file mode 100644
index 7271f5b32d547..0000000000000
--- a/x-pack/plugins/canvas/public/lib/elastic_outline.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/* eslint-disable */
-export const elasticOutline = 'data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20viewBox%3D%22-3.948730230331421%20-1.7549896240234375%20245.25946044921875%20241.40370178222656%22%20width%3D%22245.25946044921875%22%20height%3D%22241.40370178222656%22%20style%3D%22enable-background%3Anew%200%200%20686.2%20235.7%3B%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%09.st0%7Bfill%3A%232D2D2D%3B%7D%0A%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22matrix%281%2C%200%2C%200%2C%201%2C%200%2C%200%29%22%3E%0A%20%20%20%20%3Cg%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M329.4%2C160.3l4.7-0.5l0.3%2C9.6c-12.4%2C1.7-23%2C2.6-31.8%2C2.6c-11.7%2C0-20-3.4-24.9-10.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-4.9-6.8-7.3-17.4-7.3-31.7c0-28.6%2C11.4-42.9%2C34.1-42.9c11%2C0%2C19.2%2C3.1%2C24.6%2C9.2c5.4%2C6.1%2C8.1%2C15.8%2C8.1%2C28.9l-0.7%2C9.3h-53.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0%2C9%2C1.6%2C15.7%2C4.9%2C20c3.3%2C4.3%2C8.9%2C6.5%2C17%2C6.5C312.8%2C161.2%2C321.1%2C160.9%2C329.4%2C160.3z%20M325%2C124.9c0-10-1.6-17.1-4.8-21.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.2-4.1-8.4-6.2-15.6-6.2c-7.2%2C0-12.7%2C2.2-16.3%2C6.5c-3.6%2C4.3-5.5%2C11.3-5.6%2C20.9H325z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M354.3%2C171.4V64h12.2v107.4H354.3z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M443.5%2C113.5v41.1c0%2C4.1%2C10.1%2C3.9%2C10.1%2C3.9l-0.6%2C10.8c-8.6%2C0-15.7%2C0.7-20-3.4c-9.8%2C4.3-19.5%2C6.1-29.3%2C6.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.5%2C0-13.2-2.1-17.1-6.4c-3.9-4.2-5.9-10.3-5.9-18.3c0-7.9%2C2-13.8%2C6-17.5c4-3.7%2C10.3-6.1%2C18.9-6.9l25.6-2.4v-7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc0-5.5-1.2-9.5-3.6-11.9c-2.4-2.4-5.7-3.6-9.8-3.6l-32.1%2C0V87.2h31.3c9.2%2C0%2C15.9%2C2.1%2C20.1%2C6.4C441.4%2C97.8%2C443.5%2C104.5%2C443.5%2C113.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bz%20M393.3%2C146.7c0%2C10%2C4.1%2C15%2C12.4%2C15c7.4%2C0%2C14.7-1.2%2C21.8-3.7l3.7-1.3v-26.9l-24.1%2C2.3c-4.9%2C0.4-8.4%2C1.8-10.6%2C4.2%26%2310%3B%26%239%3B%26%239%3B%26%239%3BC394.4%2C138.7%2C393.3%2C142.2%2C393.3%2C146.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M491.2%2C98.2c-11.8%2C0-17.8%2C4.1-17.8%2C12.4c0%2C3.8%2C1.4%2C6.5%2C4.1%2C8.1c2.7%2C1.6%2C8.9%2C3.2%2C18.6%2C4.9%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc9.7%2C1.7%2C16.5%2C4%2C20.5%2C7.1c4%2C3%2C6%2C8.7%2C6%2C17.1c0%2C8.4-2.7%2C14.5-8.1%2C18.4c-5.4%2C3.9-13.2%2C5.9-23.6%2C5.9c-6.7%2C0-29.2-2.5-29.2-2.5%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bl0.7-10.6c12.9%2C1.2%2C22.3%2C2.2%2C28.6%2C2.2c6.3%2C0%2C11.1-1%2C14.4-3c3.3-2%2C5-5.4%2C5-10.1c0-4.7-1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-9.6-1.5-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3c0-7.9%2C2.8-13.8%2C8.4-17.6c5.6-3.8%2C12.6-5.7%2C20.9-5.7c6.6%2C0%2C29.6%2C1.7%2C29.6%2C1.7%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bv10.7C508.1%2C99%2C498.2%2C98.2%2C491.2%2C98.2z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M581.7%2C99.5h-25.9v39c0%2C9.3%2C0.7%2C15.5%2C2%2C18.4c1.4%2C2.9%2C4.6%2C4.4%2C9.7%2C4.4l14.5-1l0.8%2C10.1%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-7.3%2C1.2-12.8%2C1.8-16.6%2C1.8c-8.5%2C0-14.3-2.1-17.6-6.2c-3.3-4.1-4.9-12-4.9-23.6V99.5h-11.6V88.9h11.6V63.9h12.1v24.9h25.9V99.5z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M598.7%2C78.4V64.3h12.2v14.2H598.7z%20M598.7%2C171.4V88.9h12.2v82.5H598.7z%22%2F%3E%0A%20%20%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M663.8%2C87.2c3.6%2C0%2C9.7%2C0.7%2C18.3%2C2l3.9%2C0.5l-0.5%2C9.9c-8.7-1-15.1-1.5-19.2-1.5c-9.2%2C0-15.5%2C2.2-18.8%2C6.6%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-3.3%2C4.4-5%2C12.6-5%2C24.5c0%2C11.9%2C1.5%2C20.2%2C4.6%2C24.9c3.1%2C4.7%2C9.5%2C7%2C19.3%2C7l19.2-1.5l0.5%2C10.1c-10.1%2C1.5-17.7%2C2.3-22.7%2C2.3%26%2310%3B%26%239%3B%26%239%3B%26%239%3Bc-12.7%2C0-21.5-3.3-26.3-9.8c-4.8-6.5-7.3-17.5-7.3-33c0-15.5%2C2.6-26.4%2C7.8-32.6C643%2C90.4%2C651.7%2C87.2%2C663.8%2C87.2z%22%2F%3E%0A%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3Cpath%20class%3D%22st0%22%20d%3D%22M236.6%2C123.5c0-19.8-12.3-37.2-30.8-43.9c0.8-4.2%2C1.2-8.4%2C1.2-12.7C207%2C30%2C177%2C0%2C140.2%2C0%26%2310%3B%26%239%3B%26%239%3BC118.6%2C0%2C98.6%2C10.3%2C86%2C27.7c-6.2-4.8-13.8-7.4-21.7-7.4c-19.6%2C0-35.5%2C15.9-35.5%2C35.5c0%2C4.3%2C0.8%2C8.5%2C2.2%2C12.4%26%2310%3B%26%239%3B%26%239%3BC12.6%2C74.8%2C0%2C92.5%2C0%2C112.2c0%2C19.9%2C12.4%2C37.3%2C30.9%2C44c-0.8%2C4.1-1.2%2C8.4-1.2%2C12.7c0%2C36.8%2C29.9%2C66.7%2C66.7%2C66.7%26%2310%3B%26%239%3B%26%239%3Bc21.6%2C0%2C41.6-10.4%2C54.1-27.8c6.2%2C4.9%2C13.8%2C7.6%2C21.7%2C7.6c19.6%2C0%2C35.5-15.9%2C35.5-35.5c0-4.3-0.8-8.5-2.2-12.4%26%2310%3B%26%239%3B%26%239%3BC223.9%2C160.9%2C236.6%2C143.2%2C236.6%2C123.5z%20M91.6%2C34.8c10.9-15.9%2C28.9-25.4%2C48.1-25.4c32.2%2C0%2C58.4%2C26.2%2C58.4%2C58.4%26%2310%3B%26%239%3B%26%239%3Bc0%2C3.9-0.4%2C7.7-1.1%2C11.5l-52.2%2C45.8L93%2C101.5L82.9%2C79.9L91.6%2C34.8z%20M65.4%2C29c6.2%2C0%2C12.1%2C2%2C17%2C5.7l-7.8%2C40.3l-35.5-8.4%26%2310%3B%26%239%3B%26%239%3Bc-1.1-3.1-1.7-6.3-1.7-9.7C37.4%2C41.6%2C49.9%2C29%2C65.4%2C29z%20M9.1%2C112.3c0-16.7%2C11-31.9%2C26.9-37.2L75%2C84.4l9.1%2C19.5l-49.8%2C45%26%2310%3B%26%239%3B%26%239%3BC19.2%2C143.1%2C9.1%2C128.6%2C9.1%2C112.3z%20M145.2%2C200.9c-10.9%2C16.1-29%2C25.6-48.4%2C25.6c-32.3%2C0-58.6-26.3-58.6-58.5c0-4%2C0.4-7.9%2C1.1-11.7%26%2310%3B%26%239%3B%26%239%3Bl50.9-46l52%2C23.7l11.5%2C22L145.2%2C200.9z%20M171.2%2C206.6c-6.1%2C0-12-2-16.9-5.8l7.7-40.2l35.4%2C8.3c1.1%2C3.1%2C1.7%2C6.3%2C1.7%2C9.7%26%2310%3B%26%239%3B%26%239%3BC199.2%2C194.1%2C186.6%2C206.6%2C171.2%2C206.6z%20M200.5%2C160.5l-39-9.1l-10.4-19.8l51-44.7c15.1%2C5.7%2C25.2%2C20.2%2C25.2%2C36.5%26%2310%3B%26%239%3B%26%239%3BC227.4%2C140.1%2C216.4%2C155.3%2C200.5%2C160.5z%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E';
diff --git a/x-pack/plugins/canvas/public/lib/element_handler_creators.ts b/x-pack/plugins/canvas/public/lib/element_handler_creators.ts
index cdf9324e947da..a46252081e672 100644
--- a/x-pack/plugins/canvas/public/lib/element_handler_creators.ts
+++ b/x-pack/plugins/canvas/public/lib/element_handler_creators.ts
@@ -8,7 +8,7 @@
 import { camelCase } from 'lodash';
 import { getClipboardData, setClipboardData } from './clipboard';
 import { cloneSubgraphs } from './clone_subgraphs';
-import { notifyService } from '../services';
+import { pluginServices } from '../services';
 import * as customElementService from './custom_element_service';
 import { getId } from './get_id';
 import { PositionedElement } from '../../types';
@@ -70,6 +70,8 @@ export const basicHandlerCreators = {
     description = '',
     image = ''
   ): void => {
+    const notifyService = pluginServices.getServices().notify;
+
     if (selectedNodes.length) {
       const content = JSON.stringify({ selectedNodes });
       const customElement = {
@@ -83,17 +85,15 @@ export const basicHandlerCreators = {
       customElementService
         .create(customElement)
         .then(() =>
-          notifyService
-            .getService()
-            .success(
-              `Custom element '${customElement.displayName || customElement.id}' was saved`,
-              {
-                'data-test-subj': 'canvasCustomElementCreate-success',
-              }
-            )
+          notifyService.success(
+            `Custom element '${customElement.displayName || customElement.id}' was saved`,
+            {
+              'data-test-subj': 'canvasCustomElementCreate-success',
+            }
+          )
         )
         .catch((error: Error) =>
-          notifyService.getService().warning(error, {
+          notifyService.warning(error, {
             title: `Custom element '${
               customElement.displayName || customElement.id
             }' was not saved`,
@@ -135,16 +135,20 @@ export const groupHandlerCreators = {
 // handlers for cut/copy/paste
 export const clipboardHandlerCreators = {
   cutNodes: ({ pageId, removeNodes, selectedNodes }: Props) => (): void => {
+    const notifyService = pluginServices.getServices().notify;
+
     if (selectedNodes.length) {
       setClipboardData({ selectedNodes });
       removeNodes(selectedNodes.map(extractId), pageId);
-      notifyService.getService().success('Cut element to clipboard');
+      notifyService.success('Cut element to clipboard');
     }
   },
   copyNodes: ({ selectedNodes }: Props) => (): void => {
+    const notifyService = pluginServices.getServices().notify;
+
     if (selectedNodes.length) {
       setClipboardData({ selectedNodes });
-      notifyService.getService().success('Copied element to clipboard');
+      notifyService.success('Copied element to clipboard');
     }
   },
   pasteNodes: ({ insertNodes, pageId, selectToplevelNodes }: Props) => (): void => {
diff --git a/x-pack/plugins/canvas/public/lib/es_service.ts b/x-pack/plugins/canvas/public/lib/es_service.ts
index 25b63bf26c5bb..c1a4a17970ffa 100644
--- a/x-pack/plugins/canvas/public/lib/es_service.ts
+++ b/x-pack/plugins/canvas/public/lib/es_service.ts
@@ -5,12 +5,14 @@
  * 2.0.
  */
 
+// TODO - clint: convert to service abstraction
+
 import { IndexPatternAttributes } from 'src/plugins/data/public';
 
 import { API_ROUTE } from '../../common/lib/constants';
 import { fetch } from '../../common/lib/fetch';
 import { ErrorStrings } from '../../i18n';
-import { notifyService } from '../services';
+import { pluginServices } from '../services';
 import { platformService } from '../services';
 
 const { esService: strings } = ErrorStrings;
@@ -36,11 +38,12 @@ export const getFields = (index = '_all') => {
         .filter((field) => !field.startsWith('_')) // filters out meta fields
         .sort()
     )
-    .catch((err: Error) =>
-      notifyService.getService().error(err, {
+    .catch((err: Error) => {
+      const notifyService = pluginServices.getServices().notify;
+      notifyService.error(err, {
         title: strings.getFieldsFetchErrorMessage(index),
-      })
-    );
+      });
+    });
 };
 
 export const getIndices = () =>
@@ -56,9 +59,10 @@ export const getIndices = () =>
         return savedObject.attributes.title;
       });
     })
-    .catch((err: Error) =>
-      notifyService.getService().error(err, { title: strings.getIndicesFetchErrorMessage() })
-    );
+    .catch((err: Error) => {
+      const notifyService = pluginServices.getServices().notify;
+      notifyService.error(err, { title: strings.getIndicesFetchErrorMessage() });
+    });
 
 export const getDefaultIndex = () => {
   const defaultIndexId = getAdvancedSettings().get('defaultIndex');
@@ -67,10 +71,9 @@ export const getDefaultIndex = () => {
     ? getSavedObjectsClient()
         .get<IndexPatternAttributes>('index-pattern', defaultIndexId)
         .then((defaultIndex) => defaultIndex.attributes.title)
-        .catch((err) =>
-          notifyService
-            .getService()
-            .error(err, { title: strings.getDefaultIndexFetchErrorMessage() })
-        )
+        .catch((err) => {
+          const notifyService = pluginServices.getServices().notify;
+          notifyService.error(err, { title: strings.getDefaultIndexFetchErrorMessage() });
+        })
     : Promise.resolve('');
 };
diff --git a/x-pack/plugins/canvas/public/lib/run_interpreter.ts b/x-pack/plugins/canvas/public/lib/run_interpreter.ts
index eb9be96c5367b..149e90a8f6b73 100644
--- a/x-pack/plugins/canvas/public/lib/run_interpreter.ts
+++ b/x-pack/plugins/canvas/public/lib/run_interpreter.ts
@@ -7,7 +7,7 @@
 
 import { fromExpression, getType } from '@kbn/interpreter/common';
 import { ExpressionValue, ExpressionAstExpression } from 'src/plugins/expressions/public';
-import { notifyService, expressionsService } from '../services';
+import { pluginServices, expressionsService } from '../services';
 
 interface Options {
   castToRender?: boolean;
@@ -57,7 +57,8 @@ export async function runInterpreter(
 
     throw new Error(`Ack! I don't know how to render a '${getType(renderable)}'`);
   } catch (err) {
-    notifyService.getService().error(err);
+    const { error: displayError } = pluginServices.getServices().notify;
+    displayError(err);
     throw err;
   }
 }
diff --git a/x-pack/plugins/canvas/public/plugin.tsx b/x-pack/plugins/canvas/public/plugin.tsx
index d31a5a18cecc1..543c159bae145 100644
--- a/x-pack/plugins/canvas/public/plugin.tsx
+++ b/x-pack/plugins/canvas/public/plugin.tsx
@@ -31,6 +31,9 @@ import { BfetchPublicSetup } from '../../../../src/plugins/bfetch/public';
 import { PresentationUtilPluginStart } from '../../../../src/plugins/presentation_util/public';
 import { getPluginApi, CanvasApi } from './plugin_api';
 import { CanvasSrcPlugin } from '../canvas_plugin_src/plugin';
+import { pluginServices } from './services';
+import { pluginServiceRegistry } from './services/kibana';
+
 export { CoreStart, CoreSetup };
 
 /**
@@ -75,14 +78,14 @@ export class CanvasPlugin
   // TODO: Do we want to completely move canvas_plugin_src into it's own plugin?
   private srcPlugin = new CanvasSrcPlugin();
 
-  public setup(core: CoreSetup<CanvasStartDeps>, plugins: CanvasSetupDeps) {
-    const { api: canvasApi, registries } = getPluginApi(plugins.expressions);
+  public setup(coreSetup: CoreSetup<CanvasStartDeps>, setupPlugins: CanvasSetupDeps) {
+    const { api: canvasApi, registries } = getPluginApi(setupPlugins.expressions);
 
-    this.srcPlugin.setup(core, { canvas: canvasApi });
+    this.srcPlugin.setup(coreSetup, { canvas: canvasApi });
 
     // Set the nav link to the last saved url if we have one in storage
     const lastPath = getSessionStorage().get(
-      `${SESSIONSTORAGE_LASTPATH}:${core.http.basePath.get()}`
+      `${SESSIONSTORAGE_LASTPATH}:${coreSetup.http.basePath.get()}`
     );
     if (lastPath) {
       this.appUpdater.next(() => ({
@@ -90,7 +93,7 @@ export class CanvasPlugin
       }));
     }
 
-    core.application.register({
+    coreSetup.application.register({
       category: DEFAULT_APP_CATEGORIES.kibana,
       id: 'canvas',
       title: 'Canvas',
@@ -102,28 +105,28 @@ export class CanvasPlugin
         const { renderApp, initializeCanvas, teardownCanvas } = await import('./application');
 
         // Get start services
-        const [coreStart, depsStart] = await core.getStartServices();
+        const [coreStart, startPlugins] = await coreSetup.getStartServices();
 
         const canvasStore = await initializeCanvas(
-          core,
+          coreSetup,
           coreStart,
-          plugins,
-          depsStart,
+          setupPlugins,
+          startPlugins,
           registries,
           this.appUpdater
         );
 
-        const unmount = renderApp(coreStart, depsStart, params, canvasStore);
+        const unmount = renderApp({ coreStart, startPlugins, params, canvasStore, pluginServices });
 
         return () => {
           unmount();
-          teardownCanvas(coreStart, depsStart);
+          teardownCanvas(coreStart);
         };
       },
     });
 
-    if (plugins.home) {
-      plugins.home.featureCatalogue.register(featureCatalogueEntry);
+    if (setupPlugins.home) {
+      setupPlugins.home.featureCatalogue.register(featureCatalogueEntry);
     }
 
     canvasApi.addArgumentUIs(async () => {
@@ -141,8 +144,9 @@ export class CanvasPlugin
     };
   }
 
-  public start(core: CoreStart, plugins: CanvasStartDeps) {
-    this.srcPlugin.start(core, plugins);
-    initLoadingIndicator(core.http.addLoadingCountSource);
+  public start(coreStart: CoreStart, startPlugins: CanvasStartDeps) {
+    this.srcPlugin.start(coreStart, startPlugins);
+    pluginServices.setRegistry(pluginServiceRegistry.start({ coreStart, startPlugins }));
+    initLoadingIndicator(coreStart.http.addLoadingCountSource);
   }
 }
diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx
index e77b878359d11..0fd4d3d2401f7 100644
--- a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx
+++ b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.test.tsx
@@ -32,10 +32,8 @@ jest.mock('react-redux', () => ({
 }));
 
 jest.mock('../../../services', () => ({
-  useServices: () => ({
-    workpad: {
-      get: mockGetWorkpad,
-    },
+  useWorkpadService: () => ({
+    get: mockGetWorkpad,
   }),
 }));
 
diff --git a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.ts b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.ts
index 29b869b46e416..983622dad264d 100644
--- a/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.ts
+++ b/x-pack/plugins/canvas/public/routes/workpad/hooks/use_workpad.ts
@@ -7,7 +7,7 @@
 
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useServices } from '../../../services';
+import { useWorkpadService } from '../../../services';
 import { getWorkpad } from '../../../state/selectors/workpad';
 import { setWorkpad } from '../../../state/actions/workpad';
 // @ts-expect-error
@@ -20,7 +20,7 @@ export const useWorkpad = (
   workpadId: string,
   loadPages: boolean = true
 ): [CanvasWorkpad | undefined, string | Error | undefined] => {
-  const services = useServices();
+  const workpadService = useWorkpadService();
   const dispatch = useDispatch();
   const storedWorkpad = useSelector(getWorkpad);
   const [error, setError] = useState<string | Error | undefined>(undefined);
@@ -28,7 +28,7 @@ export const useWorkpad = (
   useEffect(() => {
     (async () => {
       try {
-        const { assets, ...workpad } = await services.workpad.get(workpadId);
+        const { assets, ...workpad } = await workpadService.get(workpadId);
         dispatch(setAssets(assets));
         dispatch(setWorkpad(workpad, { loadPages }));
         dispatch(setZoomScale(1));
@@ -36,7 +36,7 @@ export const useWorkpad = (
         setError(e);
       }
     })();
-  }, [workpadId, services.workpad, dispatch, setError, loadPages]);
+  }, [workpadId, dispatch, setError, loadPages, workpadService]);
 
   return [storedWorkpad.id === workpadId ? storedWorkpad : undefined, error];
 };
diff --git a/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx b/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx
index 7683b3413f681..95caba08517ee 100644
--- a/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx
+++ b/x-pack/plugins/canvas/public/routes/workpad/workpad_route.tsx
@@ -13,7 +13,7 @@ import { ExportApp } from '../../components/export_app';
 import { CanvasLoading } from '../../components/canvas_loading';
 // @ts-expect-error
 import { fetchAllRenderables } from '../../state/actions/elements';
-import { useServices } from '../../services';
+import { useNotifyService } from '../../services';
 import { CanvasWorkpad } from '../../../types';
 import { ErrorStrings } from '../../../i18n';
 import { useWorkpad } from './hooks/use_workpad';
@@ -98,13 +98,13 @@ const WorkpadLoaderComponent: FC<{
   children: (workpad: CanvasWorkpad) => JSX.Element;
 }> = ({ params, children, loadPages }) => {
   const [workpad, error] = useWorkpad(params.id, loadPages);
-  const services = useServices();
+  const notifyService = useNotifyService();
 
   useEffect(() => {
     if (error) {
-      services.notify.error(error, { title: strings.getLoadFailureErrorMessage() });
+      notifyService.error(error, { title: strings.getLoadFailureErrorMessage() });
     }
-  }, [error, services.notify]);
+  }, [error, notifyService]);
 
   if (error) {
     return <Redirect to="/" />;
diff --git a/x-pack/plugins/canvas/public/services/index.ts b/x-pack/plugins/canvas/public/services/index.ts
index 3f8f58367171a..83a54a8a673a1 100644
--- a/x-pack/plugins/canvas/public/services/index.ts
+++ b/x-pack/plugins/canvas/public/services/index.ts
@@ -5,128 +5,18 @@
  * 2.0.
  */
 
-import { BehaviorSubject } from 'rxjs';
-import { CoreSetup, CoreStart, AppUpdater } from '../../../../../src/core/public';
-import { CanvasSetupDeps, CanvasStartDeps } from '../plugin';
-import { notifyServiceFactory } from './notify';
-import { platformServiceFactory } from './platform';
-import { navLinkServiceFactory } from './nav_link';
-import { embeddablesServiceFactory } from './embeddables';
-import { expressionsServiceFactory } from './expressions';
-import { searchServiceFactory } from './search';
-import { labsServiceFactory } from './labs';
-import { reportingServiceFactory } from './reporting';
-import { workpadServiceFactory } from './workpad';
+export * from './legacy';
 
-export { NotifyService } from './notify';
-export { SearchService } from './search';
-export { PlatformService } from './platform';
-export { NavLinkService } from './nav_link';
-export { EmbeddablesService } from './embeddables';
-export { ExpressionsService } from '../../../../../src/plugins/expressions/common';
-export * from './context';
+import { PluginServices } from '../../../../../src/plugins/presentation_util/public';
+import { CanvasWorkpadService } from './workpad';
+import { CanvasNotifyService } from './notify';
 
-export type CanvasServiceFactory<Service> = (
-  coreSetup: CoreSetup,
-  coreStart: CoreStart,
-  canvasSetupPlugins: CanvasSetupDeps,
-  canvasStartPlugins: CanvasStartDeps,
-  appUpdater: BehaviorSubject<AppUpdater>
-) => Service | Promise<Service>;
-
-export class CanvasServiceProvider<Service> {
-  private factory: CanvasServiceFactory<Service>;
-  private service: Service | undefined;
-
-  constructor(factory: CanvasServiceFactory<Service>) {
-    this.factory = factory;
-  }
-
-  setService(service: Service) {
-    this.service = service;
-  }
-
-  async start(
-    coreSetup: CoreSetup,
-    coreStart: CoreStart,
-    canvasSetupPlugins: CanvasSetupDeps,
-    canvasStartPlugins: CanvasStartDeps,
-    appUpdater: BehaviorSubject<AppUpdater>
-  ) {
-    this.service = await this.factory(
-      coreSetup,
-      coreStart,
-      canvasSetupPlugins,
-      canvasStartPlugins,
-      appUpdater
-    );
-  }
-
-  getService(): Service {
-    if (!this.service) {
-      throw new Error('Service not ready');
-    }
-
-    return this.service;
-  }
-
-  stop() {
-    this.service = undefined;
-  }
+export interface CanvasPluginServices {
+  workpad: CanvasWorkpadService;
+  notify: CanvasNotifyService;
 }
 
-export type ServiceFromProvider<P> = P extends CanvasServiceProvider<infer T> ? T : never;
-
-export const services = {
-  embeddables: new CanvasServiceProvider(embeddablesServiceFactory),
-  expressions: new CanvasServiceProvider(expressionsServiceFactory),
-  notify: new CanvasServiceProvider(notifyServiceFactory),
-  platform: new CanvasServiceProvider(platformServiceFactory),
-  navLink: new CanvasServiceProvider(navLinkServiceFactory),
-  search: new CanvasServiceProvider(searchServiceFactory),
-  reporting: new CanvasServiceProvider(reportingServiceFactory),
-  labs: new CanvasServiceProvider(labsServiceFactory),
-  workpad: new CanvasServiceProvider(workpadServiceFactory),
-};
-
-export type CanvasServiceProviders = typeof services;
-
-export interface CanvasServices {
-  embeddables: ServiceFromProvider<typeof services.embeddables>;
-  expressions: ServiceFromProvider<typeof services.expressions>;
-  notify: ServiceFromProvider<typeof services.notify>;
-  platform: ServiceFromProvider<typeof services.platform>;
-  navLink: ServiceFromProvider<typeof services.navLink>;
-  search: ServiceFromProvider<typeof services.search>;
-  reporting: ServiceFromProvider<typeof services.reporting>;
-  labs: ServiceFromProvider<typeof services.labs>;
-  workpad: ServiceFromProvider<typeof services.workpad>;
-}
-
-export const startServices = async (
-  coreSetup: CoreSetup,
-  coreStart: CoreStart,
-  canvasSetupPlugins: CanvasSetupDeps,
-  canvasStartPlugins: CanvasStartDeps,
-  appUpdater: BehaviorSubject<AppUpdater>
-) => {
-  const startPromises = Object.values(services).map((provider) =>
-    provider.start(coreSetup, coreStart, canvasSetupPlugins, canvasStartPlugins, appUpdater)
-  );
-
-  await Promise.all(startPromises);
-};
-
-export const stopServices = () => {
-  Object.values(services).forEach((provider) => provider.stop());
-};
+export const pluginServices = new PluginServices<CanvasPluginServices>();
 
-export const {
-  embeddables: embeddableService,
-  notify: notifyService,
-  platform: platformService,
-  navLink: navLinkService,
-  expressions: expressionsService,
-  search: searchService,
-  reporting: reportingService,
-} = services;
+export const useWorkpadService = () => (() => pluginServices.getHooks().workpad.useService())();
+export const useNotifyService = () => (() => pluginServices.getHooks().notify.useService())();
diff --git a/x-pack/plugins/canvas/public/services/kibana/index.ts b/x-pack/plugins/canvas/public/services/kibana/index.ts
new file mode 100644
index 0000000000000..7bb2be3f77e27
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/kibana/index.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 {
+  PluginServiceProviders,
+  PluginServiceProvider,
+  PluginServiceRegistry,
+  KibanaPluginServiceParams,
+} from '../../../../../../src/plugins/presentation_util/public';
+
+import { workpadServiceFactory } from './workpad';
+import { notifyServiceFactory } from './notify';
+import { CanvasPluginServices } from '..';
+import { CanvasStartDeps } from '../../plugin';
+
+export { workpadServiceFactory } from './workpad';
+export { notifyServiceFactory } from './notify';
+
+export const pluginServiceProviders: PluginServiceProviders<
+  CanvasPluginServices,
+  KibanaPluginServiceParams<CanvasStartDeps>
+> = {
+  workpad: new PluginServiceProvider(workpadServiceFactory),
+  notify: new PluginServiceProvider(notifyServiceFactory),
+};
+
+export const pluginServiceRegistry = new PluginServiceRegistry<
+  CanvasPluginServices,
+  KibanaPluginServiceParams<CanvasStartDeps>
+>(pluginServiceProviders);
diff --git a/x-pack/plugins/canvas/public/services/kibana/notify.ts b/x-pack/plugins/canvas/public/services/kibana/notify.ts
new file mode 100644
index 0000000000000..0082b523d050e
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/kibana/notify.ts
@@ -0,0 +1,60 @@
+/*
+ * 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 { get } from 'lodash';
+import { KibanaPluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { formatMsg } from '../../../../../../src/plugins/kibana_legacy/public';
+import { ToastInputFields } from '../../../../../../src/core/public';
+import { CanvasStartDeps } from '../../plugin';
+import { CanvasNotifyService } from '../notify';
+
+export type CanvasNotifyServiceFactory = KibanaPluginServiceFactory<
+  CanvasNotifyService,
+  CanvasStartDeps
+>;
+
+const getToast = (err: Error | string, opts: ToastInputFields = {}) => {
+  const errData = (get(err, 'response') || err) as Error | string;
+  const errBody = get(err, 'body', undefined);
+  const errMsg = formatMsg(errBody !== undefined ? err : errData);
+  const { title, ...rest } = opts;
+  let text;
+
+  if (title) {
+    text = errMsg;
+  }
+
+  return {
+    ...rest,
+    title: title || errMsg,
+    text,
+  };
+};
+
+export const notifyServiceFactory: CanvasNotifyServiceFactory = ({ coreStart }) => {
+  const toasts = coreStart.notifications.toasts;
+
+  return {
+    /*
+     * @param {(string | Object)} err: message or Error object
+     * @param {Object} opts: option to override toast title or icon, see https://github.com/elastic/kibana/blob/master/src/legacy/ui/public/notify/toasts/TOAST_NOTIFICATIONS.md
+     */
+    error(err, opts) {
+      toasts.addDanger(getToast(err, opts));
+    },
+    warning(err, opts) {
+      toasts.addWarning(getToast(err, opts));
+    },
+    info(err, opts) {
+      toasts.add(getToast(err, opts));
+    },
+    success(err, opts) {
+      toasts.addSuccess(getToast(err, opts));
+    },
+  };
+};
diff --git a/x-pack/plugins/canvas/public/services/kibana/workpad.ts b/x-pack/plugins/canvas/public/services/kibana/workpad.ts
new file mode 100644
index 0000000000000..36ad1c568f9e6
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/kibana/workpad.ts
@@ -0,0 +1,97 @@
+/*
+ * 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 { KibanaPluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { CanvasStartDeps } from '../../plugin';
+import { CanvasWorkpadService } from '../workpad';
+
+import {
+  API_ROUTE_WORKPAD,
+  DEFAULT_WORKPAD_CSS,
+  API_ROUTE_TEMPLATES,
+} from '../../../common/lib/constants';
+import { CanvasWorkpad } from '../../../types';
+
+export type CanvasWorkpadServiceFactory = KibanaPluginServiceFactory<
+  CanvasWorkpadService,
+  CanvasStartDeps
+>;
+
+/*
+  Remove any top level keys from the workpad which will be rejected by validation
+*/
+const validKeys = [
+  '@created',
+  '@timestamp',
+  'assets',
+  'colors',
+  'css',
+  'variables',
+  'height',
+  'id',
+  'isWriteable',
+  'name',
+  'page',
+  'pages',
+  'width',
+];
+
+const sanitizeWorkpad = function (workpad: CanvasWorkpad) {
+  const workpadKeys = Object.keys(workpad);
+
+  for (const key of workpadKeys) {
+    if (!validKeys.includes(key)) {
+      delete (workpad as { [key: string]: any })[key];
+    }
+  }
+
+  return workpad;
+};
+
+export const workpadServiceFactory: CanvasWorkpadServiceFactory = ({ coreStart, startPlugins }) => {
+  const getApiPath = function () {
+    return `${API_ROUTE_WORKPAD}`;
+  };
+
+  return {
+    get: async (id: string) => {
+      const workpad = await coreStart.http.get(`${getApiPath()}/${id}`);
+
+      return { css: DEFAULT_WORKPAD_CSS, variables: [], ...workpad };
+    },
+    create: (workpad: CanvasWorkpad) => {
+      return coreStart.http.post(getApiPath(), {
+        body: JSON.stringify({
+          ...sanitizeWorkpad({ ...workpad }),
+          assets: workpad.assets || {},
+          variables: workpad.variables || [],
+        }),
+      });
+    },
+    createFromTemplate: (templateId: string) => {
+      return coreStart.http.post(getApiPath(), {
+        body: JSON.stringify({ templateId }),
+      });
+    },
+    findTemplates: async () => coreStart.http.get(API_ROUTE_TEMPLATES),
+    find: (searchTerm: string) => {
+      // TODO: this shouldn't be necessary.  Check for usage.
+      const validSearchTerm = typeof searchTerm === 'string' && searchTerm.length > 0;
+
+      return coreStart.http.get(`${getApiPath()}/find`, {
+        query: {
+          perPage: 10000,
+          name: validSearchTerm ? searchTerm : '',
+        },
+      });
+    },
+    remove: (id: string) => {
+      return coreStart.http.delete(`${getApiPath()}/${id}`);
+    },
+  };
+};
diff --git a/x-pack/plugins/canvas/public/services/context.tsx b/x-pack/plugins/canvas/public/services/legacy/context.tsx
similarity index 87%
rename from x-pack/plugins/canvas/public/services/context.tsx
rename to x-pack/plugins/canvas/public/services/legacy/context.tsx
index 3a78e314b9635..dd2e45740f041 100644
--- a/x-pack/plugins/canvas/public/services/context.tsx
+++ b/x-pack/plugins/canvas/public/services/legacy/context.tsx
@@ -22,11 +22,9 @@ export interface WithServicesProps {
 const defaultContextValue = {
   embeddables: {},
   expressions: {},
-  notify: {},
   platform: {},
   navLink: {},
   search: {},
-  workpad: {},
 };
 
 const context = createContext<CanvasServices>(defaultContextValue as CanvasServices);
@@ -35,10 +33,8 @@ export const useServices = () => useContext(context);
 export const usePlatformService = () => useServices().platform;
 export const useEmbeddablesService = () => useServices().embeddables;
 export const useExpressionsService = () => useServices().expressions;
-export const useNotifyService = () => useServices().notify;
 export const useNavLinkService = () => useServices().navLink;
 export const useLabsService = () => useServices().labs;
-export const useWorkpadService = () => useServices().workpad;
 
 export const withServices = <Props extends WithServicesProps>(type: ComponentType<Props>) => {
   const EnhancedType: FC<Props> = (props) =>
@@ -46,7 +42,7 @@ export const withServices = <Props extends WithServicesProps>(type: ComponentTyp
   return EnhancedType;
 };
 
-export const ServicesProvider: FC<{
+export const LegacyServicesProvider: FC<{
   providers?: Partial<CanvasServiceProviders>;
   children: ReactElement<any>;
 }> = ({ providers = {}, children }) => {
@@ -54,13 +50,11 @@ export const ServicesProvider: FC<{
   const value = {
     embeddables: specifiedProviders.embeddables.getService(),
     expressions: specifiedProviders.expressions.getService(),
-    notify: specifiedProviders.notify.getService(),
     platform: specifiedProviders.platform.getService(),
     navLink: specifiedProviders.navLink.getService(),
     search: specifiedProviders.search.getService(),
     reporting: specifiedProviders.reporting.getService(),
     labs: specifiedProviders.labs.getService(),
-    workpad: specifiedProviders.workpad.getService(),
   };
   return <context.Provider value={value}>{children}</context.Provider>;
 };
diff --git a/x-pack/plugins/canvas/public/services/embeddables.ts b/x-pack/plugins/canvas/public/services/legacy/embeddables.ts
similarity index 88%
rename from x-pack/plugins/canvas/public/services/embeddables.ts
rename to x-pack/plugins/canvas/public/services/legacy/embeddables.ts
index 1281c60f31782..05a4205c23f9e 100644
--- a/x-pack/plugins/canvas/public/services/embeddables.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/embeddables.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EmbeddableFactory } from '../../../../../src/plugins/embeddable/public';
+import { EmbeddableFactory } from '../../../../../../src/plugins/embeddable/public';
 import { CanvasServiceFactory } from '.';
 
 export interface EmbeddablesService {
diff --git a/x-pack/plugins/canvas/public/services/expressions.ts b/x-pack/plugins/canvas/public/services/legacy/expressions.ts
similarity index 93%
rename from x-pack/plugins/canvas/public/services/expressions.ts
rename to x-pack/plugins/canvas/public/services/legacy/expressions.ts
index 219edb667efc6..99915cad745e3 100644
--- a/x-pack/plugins/canvas/public/services/expressions.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/expressions.ts
@@ -9,8 +9,8 @@ import { CanvasServiceFactory } from '.';
 import {
   ExpressionsService,
   serializeProvider,
-} from '../../../../../src/plugins/expressions/common';
-import { API_ROUTE_FUNCTIONS } from '../../common/lib/constants';
+} from '../../../../../../src/plugins/expressions/common';
+import { API_ROUTE_FUNCTIONS } from '../../../common/lib/constants';
 
 export const expressionsServiceFactory: CanvasServiceFactory<ExpressionsService> = async (
   coreSetup,
diff --git a/x-pack/plugins/canvas/public/services/legacy/index.ts b/x-pack/plugins/canvas/public/services/legacy/index.ts
new file mode 100644
index 0000000000000..763fd657ad800
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/legacy/index.ts
@@ -0,0 +1,124 @@
+/*
+ * 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 { BehaviorSubject } from 'rxjs';
+import { CoreSetup, CoreStart, AppUpdater } from '../../../../../../src/core/public';
+import { CanvasSetupDeps, CanvasStartDeps } from '../../plugin';
+import { platformServiceFactory } from './platform';
+import { navLinkServiceFactory } from './nav_link';
+import { embeddablesServiceFactory } from './embeddables';
+import { expressionsServiceFactory } from './expressions';
+import { searchServiceFactory } from './search';
+import { labsServiceFactory } from './labs';
+import { reportingServiceFactory } from './reporting';
+
+export { SearchService } from './search';
+export { PlatformService } from './platform';
+export { NavLinkService } from './nav_link';
+export { EmbeddablesService } from './embeddables';
+export { ExpressionsService } from '../../../../../../src/plugins/expressions/common';
+export * from './context';
+
+export type CanvasServiceFactory<Service> = (
+  coreSetup: CoreSetup,
+  coreStart: CoreStart,
+  canvasSetupPlugins: CanvasSetupDeps,
+  canvasStartPlugins: CanvasStartDeps,
+  appUpdater: BehaviorSubject<AppUpdater>
+) => Service | Promise<Service>;
+
+export class CanvasServiceProvider<Service> {
+  private factory: CanvasServiceFactory<Service>;
+  private service: Service | undefined;
+
+  constructor(factory: CanvasServiceFactory<Service>) {
+    this.factory = factory;
+  }
+
+  setService(service: Service) {
+    this.service = service;
+  }
+
+  async start(
+    coreSetup: CoreSetup,
+    coreStart: CoreStart,
+    canvasSetupPlugins: CanvasSetupDeps,
+    canvasStartPlugins: CanvasStartDeps,
+    appUpdater: BehaviorSubject<AppUpdater>
+  ) {
+    this.service = await this.factory(
+      coreSetup,
+      coreStart,
+      canvasSetupPlugins,
+      canvasStartPlugins,
+      appUpdater
+    );
+  }
+
+  getService(): Service {
+    if (!this.service) {
+      throw new Error('Service not ready');
+    }
+
+    return this.service;
+  }
+
+  stop() {
+    this.service = undefined;
+  }
+}
+
+export type ServiceFromProvider<P> = P extends CanvasServiceProvider<infer T> ? T : never;
+
+export const services = {
+  embeddables: new CanvasServiceProvider(embeddablesServiceFactory),
+  expressions: new CanvasServiceProvider(expressionsServiceFactory),
+  platform: new CanvasServiceProvider(platformServiceFactory),
+  navLink: new CanvasServiceProvider(navLinkServiceFactory),
+  search: new CanvasServiceProvider(searchServiceFactory),
+  reporting: new CanvasServiceProvider(reportingServiceFactory),
+  labs: new CanvasServiceProvider(labsServiceFactory),
+};
+
+export type CanvasServiceProviders = typeof services;
+
+export interface CanvasServices {
+  embeddables: ServiceFromProvider<typeof services.embeddables>;
+  expressions: ServiceFromProvider<typeof services.expressions>;
+  platform: ServiceFromProvider<typeof services.platform>;
+  navLink: ServiceFromProvider<typeof services.navLink>;
+  search: ServiceFromProvider<typeof services.search>;
+  reporting: ServiceFromProvider<typeof services.reporting>;
+  labs: ServiceFromProvider<typeof services.labs>;
+}
+
+export const startServices = async (
+  coreSetup: CoreSetup,
+  coreStart: CoreStart,
+  canvasSetupPlugins: CanvasSetupDeps,
+  canvasStartPlugins: CanvasStartDeps,
+  appUpdater: BehaviorSubject<AppUpdater>
+) => {
+  const startPromises = Object.values(services).map((provider) =>
+    provider.start(coreSetup, coreStart, canvasSetupPlugins, canvasStartPlugins, appUpdater)
+  );
+
+  await Promise.all(startPromises);
+};
+
+export const stopServices = () => {
+  Object.values(services).forEach((provider) => provider.stop());
+};
+
+export const {
+  embeddables: embeddableService,
+  platform: platformService,
+  navLink: navLinkService,
+  expressions: expressionsService,
+  search: searchService,
+  reporting: reportingService,
+} = services;
diff --git a/x-pack/plugins/canvas/public/services/labs.ts b/x-pack/plugins/canvas/public/services/legacy/labs.ts
similarity index 87%
rename from x-pack/plugins/canvas/public/services/labs.ts
rename to x-pack/plugins/canvas/public/services/legacy/labs.ts
index 7f5de8d1e6570..2a506d813bde9 100644
--- a/x-pack/plugins/canvas/public/services/labs.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/labs.ts
@@ -8,10 +8,10 @@
 import {
   projectIDs,
   PresentationLabsService,
-} from '../../../../../src/plugins/presentation_util/public';
+} from '../../../../../../src/plugins/presentation_util/public';
 
 import { CanvasServiceFactory } from '.';
-import { UI_SETTINGS } from '../../common';
+import { UI_SETTINGS } from '../../../common';
 export interface CanvasLabsService extends PresentationLabsService {
   projectIDs: typeof projectIDs;
   isLabsEnabled: () => boolean;
diff --git a/x-pack/plugins/canvas/public/services/nav_link.ts b/x-pack/plugins/canvas/public/services/legacy/nav_link.ts
similarity index 85%
rename from x-pack/plugins/canvas/public/services/nav_link.ts
rename to x-pack/plugins/canvas/public/services/legacy/nav_link.ts
index 068874b745d9d..49088c08a8a71 100644
--- a/x-pack/plugins/canvas/public/services/nav_link.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/nav_link.ts
@@ -6,8 +6,8 @@
  */
 
 import { CanvasServiceFactory } from '.';
-import { SESSIONSTORAGE_LASTPATH } from '../../common/lib/constants';
-import { getSessionStorage } from '../lib/storage';
+import { SESSIONSTORAGE_LASTPATH } from '../../../common/lib/constants';
+import { getSessionStorage } from '../../lib/storage';
 
 export interface NavLinkService {
   updatePath: (path: string) => void;
diff --git a/x-pack/plugins/canvas/public/services/platform.ts b/x-pack/plugins/canvas/public/services/legacy/platform.ts
similarity index 98%
rename from x-pack/plugins/canvas/public/services/platform.ts
rename to x-pack/plugins/canvas/public/services/legacy/platform.ts
index c4be5097a18f0..b867622f5d302 100644
--- a/x-pack/plugins/canvas/public/services/platform.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/platform.ts
@@ -12,7 +12,7 @@ import {
   ChromeBreadcrumb,
   IBasePath,
   ChromeStart,
-} from '../../../../../src/core/public';
+} from '../../../../../../src/core/public';
 import { CanvasServiceFactory } from '.';
 
 export interface PlatformService {
diff --git a/x-pack/plugins/canvas/public/services/reporting.ts b/x-pack/plugins/canvas/public/services/legacy/reporting.ts
similarity index 94%
rename from x-pack/plugins/canvas/public/services/reporting.ts
rename to x-pack/plugins/canvas/public/services/legacy/reporting.ts
index 4fa40401472c6..e594475360dff 100644
--- a/x-pack/plugins/canvas/public/services/reporting.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/reporting.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { ReportingStart } from '../../../reporting/public';
+import { ReportingStart } from '../../../../reporting/public';
 import { CanvasServiceFactory } from './';
 
 export interface ReportingService {
diff --git a/x-pack/plugins/canvas/public/services/search.ts b/x-pack/plugins/canvas/public/services/legacy/search.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/search.ts
rename to x-pack/plugins/canvas/public/services/legacy/search.ts
diff --git a/x-pack/plugins/canvas/public/services/stubs/embeddables.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/embeddables.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/stubs/embeddables.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/embeddables.ts
diff --git a/x-pack/plugins/canvas/public/services/stubs/expressions.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/expressions.ts
similarity index 75%
rename from x-pack/plugins/canvas/public/services/stubs/expressions.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/expressions.ts
index 497ec9b162045..bd1076ab0bf80 100644
--- a/x-pack/plugins/canvas/public/services/stubs/expressions.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/stubs/expressions.ts
@@ -7,9 +7,9 @@
 
 import { AnyExpressionRenderDefinition } from 'src/plugins/expressions';
 import { ExpressionsService } from '../';
-import { plugin } from '../../../../../../src/plugins/expressions/public';
-import { functions as functionDefinitions } from '../../../canvas_plugin_src/functions/common';
-import { renderFunctions } from '../../../canvas_plugin_src/renderers/core';
+import { plugin } from '../../../../../../../src/plugins/expressions/public';
+import { functions as functionDefinitions } from '../../../../canvas_plugin_src/functions/common';
+import { renderFunctions } from '../../../../canvas_plugin_src/renderers/core';
 
 const placeholder = {} as any;
 const expressionsPlugin = plugin(placeholder);
diff --git a/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts
new file mode 100644
index 0000000000000..cebefdd7682cc
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/legacy/stubs/index.ts
@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { CanvasServices, services } from '../';
+import { embeddablesService } from './embeddables';
+import { expressionsService } from './expressions';
+import { reportingService } from './reporting';
+import { navLinkService } from './nav_link';
+import { labsService } from './labs';
+import { platformService } from './platform';
+import { searchService } from './search';
+
+export const stubs: CanvasServices = {
+  embeddables: embeddablesService,
+  expressions: expressionsService,
+  reporting: reportingService,
+  navLink: navLinkService,
+  platform: platformService,
+  search: searchService,
+  labs: labsService,
+};
+
+export const startServices = async (providedServices: Partial<CanvasServices> = {}) => {
+  Object.entries(services).forEach(([key, provider]) => {
+    // @ts-expect-error Object.entries isn't strongly typed
+    const stub = providedServices[key] || stubs[key];
+    provider.setService(stub);
+  });
+};
diff --git a/x-pack/plugins/canvas/public/services/stubs/labs.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/labs.ts
similarity index 86%
rename from x-pack/plugins/canvas/public/services/stubs/labs.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/labs.ts
index db89c5c35d5fb..fc65d45d2dd34 100644
--- a/x-pack/plugins/canvas/public/services/stubs/labs.ts
+++ b/x-pack/plugins/canvas/public/services/legacy/stubs/labs.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { projectIDs } from '../../../../../../src/plugins/presentation_util/public';
+import { projectIDs } from '../../../../../../../src/plugins/presentation_util/public';
 import { CanvasLabsService } from '../labs';
 
 const noop = (..._args: any[]): any => {};
diff --git a/x-pack/plugins/canvas/public/services/stubs/nav_link.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/nav_link.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/stubs/nav_link.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/nav_link.ts
diff --git a/x-pack/plugins/canvas/public/services/stubs/platform.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/platform.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/stubs/platform.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/platform.ts
diff --git a/x-pack/plugins/canvas/public/services/stubs/reporting.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/reporting.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/stubs/reporting.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/reporting.ts
diff --git a/x-pack/plugins/canvas/public/services/stubs/search.ts b/x-pack/plugins/canvas/public/services/legacy/stubs/search.ts
similarity index 100%
rename from x-pack/plugins/canvas/public/services/stubs/search.ts
rename to x-pack/plugins/canvas/public/services/legacy/stubs/search.ts
diff --git a/x-pack/plugins/canvas/public/services/notify.ts b/x-pack/plugins/canvas/public/services/notify.ts
index 6ee5eec6291ab..67c5cb6bf79c4 100644
--- a/x-pack/plugins/canvas/public/services/notify.ts
+++ b/x-pack/plugins/canvas/public/services/notify.ts
@@ -5,55 +5,11 @@
  * 2.0.
  */
 
-import { get } from 'lodash';
-import { CanvasServiceFactory } from '.';
-import { formatMsg } from '../../../../../src/plugins/kibana_legacy/public';
 import { ToastInputFields } from '../../../../../src/core/public';
 
-const getToast = (err: Error | string, opts: ToastInputFields = {}) => {
-  const errData = (get(err, 'response') || err) as Error | string;
-  const errBody = get(err, 'body', undefined);
-  const errMsg = formatMsg(errBody !== undefined ? err : errData);
-  const { title, ...rest } = opts;
-  let text;
-
-  if (title) {
-    text = errMsg;
-  }
-
-  return {
-    ...rest,
-    title: title || errMsg,
-    text,
-  };
-};
-
-export interface NotifyService {
+export interface CanvasNotifyService {
   error: (err: string | Error, opts?: ToastInputFields) => void;
   warning: (err: string | Error, opts?: ToastInputFields) => void;
   info: (err: string | Error, opts?: ToastInputFields) => void;
   success: (err: string | Error, opts?: ToastInputFields) => void;
 }
-
-export const notifyServiceFactory: CanvasServiceFactory<NotifyService> = (setup, start) => {
-  const toasts = start.notifications.toasts;
-
-  return {
-    /*
-     * @param {(string | Object)} err: message or Error object
-     * @param {Object} opts: option to override toast title or icon, see https://github.com/elastic/kibana/blob/master/src/legacy/ui/public/notify/toasts/TOAST_NOTIFICATIONS.md
-     */
-    error(err, opts) {
-      toasts.addDanger(getToast(err, opts));
-    },
-    warning(err, opts) {
-      toasts.addWarning(getToast(err, opts));
-    },
-    info(err, opts) {
-      toasts.add(getToast(err, opts));
-    },
-    success(err, opts) {
-      toasts.addSuccess(getToast(err, opts));
-    },
-  };
-};
diff --git a/x-pack/plugins/canvas/public/services/storybook/index.ts b/x-pack/plugins/canvas/public/services/storybook/index.ts
new file mode 100644
index 0000000000000..86ff52155a0bf
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/storybook/index.ts
@@ -0,0 +1,62 @@
+/*
+ * 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 {
+  PluginServiceProviders,
+  PluginServiceProvider,
+} from '../../../../../../src/plugins/presentation_util/public';
+
+import { CanvasPluginServices } from '..';
+import { pluginServiceProviders as stubProviders } from '../stubs';
+import { workpadServiceFactory } from './workpad';
+import { notifyServiceFactory } from './notify';
+
+export interface StorybookParams {
+  hasTemplates?: boolean;
+  useStaticData?: boolean;
+  workpadCount?: number;
+}
+
+export const pluginServiceProviders: PluginServiceProviders<
+  CanvasPluginServices,
+  StorybookParams
+> = {
+  ...stubProviders,
+  workpad: new PluginServiceProvider(workpadServiceFactory),
+  notify: new PluginServiceProvider(notifyServiceFactory),
+};
+
+export const argTypes = {
+  hasTemplates: {
+    name: 'Has templates?',
+    type: {
+      name: 'boolean',
+    },
+    defaultValue: true,
+    control: {
+      type: 'boolean',
+    },
+  },
+  useStaticData: {
+    name: 'Use static data?',
+    type: {
+      name: 'boolean',
+    },
+    defaultValue: false,
+    control: {
+      type: 'boolean',
+    },
+  },
+  workpadCount: {
+    name: 'Number of workpads',
+    type: { name: 'number' },
+    defaultValue: 5,
+    control: {
+      type: 'range',
+    },
+  },
+};
diff --git a/x-pack/plugins/canvas/public/services/storybook/notify.ts b/x-pack/plugins/canvas/public/services/storybook/notify.ts
new file mode 100644
index 0000000000000..7ffd2ef9d1453
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/storybook/notify.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+
+import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { StorybookParams } from '.';
+import { CanvasNotifyService } from '../notify';
+
+type CanvasNotifyServiceFactory = PluginServiceFactory<CanvasNotifyService, StorybookParams>;
+
+export const notifyServiceFactory: CanvasNotifyServiceFactory = () => ({
+  success: (message) => action(`success: ${message}`)(),
+  error: (message) => action(`error: ${message}`)(),
+  info: (message) => action(`info: ${message}`)(),
+  warning: (message) => action(`warning: ${message}`)(),
+});
diff --git a/x-pack/plugins/canvas/public/services/storybook/workpad.ts b/x-pack/plugins/canvas/public/services/storybook/workpad.ts
new file mode 100644
index 0000000000000..a494f634141bc
--- /dev/null
+++ b/x-pack/plugins/canvas/public/services/storybook/workpad.ts
@@ -0,0 +1,100 @@
+/*
+ * 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 moment from 'moment';
+
+import { action } from '@storybook/addon-actions';
+import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { getId } from '../../lib/get_id';
+// @ts-expect-error
+import { getDefaultWorkpad } from '../../state/defaults';
+
+import { StorybookParams } from '.';
+import { CanvasWorkpadService } from '../workpad';
+
+import * as stubs from '../stubs/workpad';
+
+export {
+  findNoTemplates,
+  findNoWorkpads,
+  findSomeTemplates,
+  getNoTemplates,
+  getSomeTemplates,
+} from '../stubs/workpad';
+
+type CanvasWorkpadServiceFactory = PluginServiceFactory<CanvasWorkpadService, StorybookParams>;
+
+const TIMEOUT = 500;
+const promiseTimeout = (time: number) => () => new Promise((resolve) => setTimeout(resolve, time));
+
+const { findNoTemplates, findNoWorkpads, findSomeTemplates } = stubs;
+
+const getRandomName = () => {
+  const lorem = 'Lorem ipsum dolor sit amet consectetur adipiscing elit Fusce lobortis aliquet arcu ut turpis duis'.split(
+    ' '
+  );
+  return [1, 2, 3].map(() => lorem[Math.floor(Math.random() * lorem.length)]).join(' ');
+};
+
+const getRandomDate = (
+  start: Date = moment().toDate(),
+  end: Date = moment().subtract(7, 'days').toDate()
+) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString();
+
+export const getSomeWorkpads = (count = 3) =>
+  Array.from({ length: count }, () => ({
+    '@created': getRandomDate(
+      moment().subtract(3, 'days').toDate(),
+      moment().subtract(10, 'days').toDate()
+    ),
+    '@timestamp': getRandomDate(),
+    id: getId('workpad'),
+    name: getRandomName(),
+  }));
+
+export const findSomeWorkpads = (count = 3, useStaticData = false, timeout = TIMEOUT) => (
+  _term: string
+) => {
+  return Promise.resolve()
+    .then(promiseTimeout(timeout))
+    .then(() => ({
+      total: count,
+      workpads: useStaticData ? stubs.getSomeWorkpads(count) : getSomeWorkpads(count),
+    }));
+};
+
+export const workpadServiceFactory: CanvasWorkpadServiceFactory = ({
+  workpadCount,
+  hasTemplates,
+  useStaticData,
+}) => ({
+  get: (id: string) => {
+    action('workpadService.get')(id);
+    return Promise.resolve({ ...getDefaultWorkpad(), id });
+  },
+  findTemplates: () => {
+    action('workpadService.findTemplates')();
+    return (hasTemplates ? findSomeTemplates() : findNoTemplates())();
+  },
+  create: (workpad) => {
+    action('workpadService.create')(workpad);
+    return Promise.resolve(workpad);
+  },
+  createFromTemplate: (templateId: string) => {
+    action('workpadService.createFromTemplate')(templateId);
+    return Promise.resolve(getDefaultWorkpad());
+  },
+  find: (term: string) => {
+    action('workpadService.find')(term);
+    return (workpadCount ? findSomeWorkpads(workpadCount, useStaticData) : findNoWorkpads())(term);
+  },
+  remove: (id: string) => {
+    action('workpadService.remove')(id);
+    return Promise.resolve();
+  },
+});
diff --git a/x-pack/plugins/canvas/public/services/stubs/index.ts b/x-pack/plugins/canvas/public/services/stubs/index.ts
index 3b00e0e6195f3..5c3440cc4cdbc 100644
--- a/x-pack/plugins/canvas/public/services/stubs/index.ts
+++ b/x-pack/plugins/canvas/public/services/stubs/index.ts
@@ -5,33 +5,26 @@
  * 2.0.
  */
 
-import { CanvasServices, services } from '../';
-import { embeddablesService } from './embeddables';
-import { expressionsService } from './expressions';
-import { reportingService } from './reporting';
-import { navLinkService } from './nav_link';
-import { notifyService } from './notify';
-import { labsService } from './labs';
-import { platformService } from './platform';
-import { searchService } from './search';
-import { workpadService } from './workpad';
+export * from '../legacy/stubs';
 
-export const stubs: CanvasServices = {
-  embeddables: embeddablesService,
-  expressions: expressionsService,
-  reporting: reportingService,
-  navLink: navLinkService,
-  notify: notifyService,
-  platform: platformService,
-  search: searchService,
-  labs: labsService,
-  workpad: workpadService,
-};
+import {
+  PluginServiceProviders,
+  PluginServiceProvider,
+  PluginServiceRegistry,
+} from '../../../../../../src/plugins/presentation_util/public';
+
+import { CanvasPluginServices } from '..';
+import { workpadServiceFactory } from './workpad';
+import { notifyServiceFactory } from './notify';
 
-export const startServices = async (providedServices: Partial<CanvasServices> = {}) => {
-  Object.entries(services).forEach(([key, provider]) => {
-    // @ts-expect-error Object.entries isn't strongly typed
-    const stub = providedServices[key] || stubs[key];
-    provider.setService(stub);
-  });
+export { workpadServiceFactory } from './workpad';
+export { notifyServiceFactory } from './notify';
+
+export const pluginServiceProviders: PluginServiceProviders<CanvasPluginServices> = {
+  workpad: new PluginServiceProvider(workpadServiceFactory),
+  notify: new PluginServiceProvider(notifyServiceFactory),
 };
+
+export const pluginServiceRegistry = new PluginServiceRegistry<CanvasPluginServices>(
+  pluginServiceProviders
+);
diff --git a/x-pack/plugins/canvas/public/services/stubs/notify.ts b/x-pack/plugins/canvas/public/services/stubs/notify.ts
index 866da3d459ed3..0ad322a414f0d 100644
--- a/x-pack/plugins/canvas/public/services/stubs/notify.ts
+++ b/x-pack/plugins/canvas/public/services/stubs/notify.ts
@@ -5,13 +5,17 @@
  * 2.0.
  */
 
-import { NotifyService } from '../notify';
+import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
+import { CanvasNotifyService } from '../notify';
+
+type CanvasNotifyServiceFactory = PluginServiceFactory<CanvasNotifyService>;
 
 const noop = (..._args: any[]): any => {};
 
-export const notifyService: NotifyService = {
+export const notifyServiceFactory: CanvasNotifyServiceFactory = () => ({
   error: noop,
   info: noop,
   success: noop,
   warning: noop,
-};
+});
diff --git a/x-pack/plugins/canvas/public/services/stubs/workpad.ts b/x-pack/plugins/canvas/public/services/stubs/workpad.ts
index 4e3612feb67c8..eef7508e7c1eb 100644
--- a/x-pack/plugins/canvas/public/services/stubs/workpad.ts
+++ b/x-pack/plugins/canvas/public/services/stubs/workpad.ts
@@ -7,26 +7,46 @@
 
 import moment from 'moment';
 
+import { PluginServiceFactory } from '../../../../../../src/plugins/presentation_util/public';
+
 // @ts-expect-error
 import { getDefaultWorkpad } from '../../state/defaults';
-import { WorkpadService } from '../workpad';
-import { getId } from '../../lib/get_id';
+import { CanvasWorkpadService } from '../workpad';
 import { CanvasTemplate } from '../../../types';
 
-const TIMEOUT = 500;
+type CanvasWorkpadServiceFactory = PluginServiceFactory<CanvasWorkpadService>;
+
+export const TIMEOUT = 500;
+export const promiseTimeout = (time: number) => () =>
+  new Promise((resolve) => setTimeout(resolve, time));
+
+const DAY = 86400000;
+const JAN_1_2000 = 946684800000;
 
-const promiseTimeout = (time: number) => () => new Promise((resolve) => setTimeout(resolve, time));
-const getName = () => {
-  const lorem = 'Lorem ipsum dolor sit amet consectetur adipiscing elit Fusce lobortis aliquet arcu ut turpis duis'.split(
-    ' '
-  );
-  return [1, 2, 3].map(() => lorem[Math.floor(Math.random() * lorem.length)]).join(' ');
+const getWorkpads = (count = 3) => {
+  const workpads = [];
+  for (let i = 0; i < count; i++) {
+    workpads[i] = {
+      ...getDefaultWorkpad(),
+      name: `Workpad ${i}`,
+      id: `workpad-${i}`,
+      '@created': moment(JAN_1_2000 + DAY * i).toDate(),
+      '@timestamp': moment(JAN_1_2000 + DAY * (i + 1)).toDate(),
+    };
+  }
+  return workpads;
 };
 
-const randomDate = (
-  start: Date = moment().toDate(),
-  end: Date = moment().subtract(7, 'days').toDate()
-) => new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime())).toISOString();
+export const getSomeWorkpads = (count = 3) => getWorkpads(count);
+
+export const findSomeWorkpads = (count = 3, timeout = TIMEOUT) => (_term: string) => {
+  return Promise.resolve()
+    .then(promiseTimeout(timeout))
+    .then(() => ({
+      total: count,
+      workpads: getSomeWorkpads(count),
+    }));
+};
 
 const templates: CanvasTemplate[] = [
   {
@@ -45,26 +65,6 @@ const templates: CanvasTemplate[] = [
   },
 ];
 
-export const getSomeWorkpads = (count = 3) =>
-  Array.from({ length: count }, () => ({
-    '@created': randomDate(
-      moment().subtract(3, 'days').toDate(),
-      moment().subtract(10, 'days').toDate()
-    ),
-    '@timestamp': randomDate(),
-    id: getId('workpad'),
-    name: getName(),
-  }));
-
-export const findSomeWorkpads = (count = 3, timeout = TIMEOUT) => (_term: string) => {
-  return Promise.resolve()
-    .then(promiseTimeout(timeout))
-    .then(() => ({
-      total: count,
-      workpads: getSomeWorkpads(count),
-    }));
-};
-
 export const findNoWorkpads = (timeout = TIMEOUT) => (_term: string) => {
   return Promise.resolve()
     .then(promiseTimeout(timeout))
@@ -89,11 +89,11 @@ export const findNoTemplates = (timeout = TIMEOUT) => () => {
 export const getNoTemplates = () => ({ templates: [] });
 export const getSomeTemplates = () => ({ templates });
 
-export const workpadService: WorkpadService = {
+export const workpadServiceFactory: CanvasWorkpadServiceFactory = () => ({
   get: (id: string) => Promise.resolve({ ...getDefaultWorkpad(), id }),
   findTemplates: findNoTemplates(),
   create: (workpad) => Promise.resolve(workpad),
   createFromTemplate: (_templateId: string) => Promise.resolve(getDefaultWorkpad()),
   find: findNoWorkpads(),
-  remove: (id: string) => Promise.resolve(),
-};
+  remove: (_id: string) => Promise.resolve(),
+});
diff --git a/x-pack/plugins/canvas/public/services/workpad.ts b/x-pack/plugins/canvas/public/services/workpad.ts
index 7d2f1550a312f..6b90cc346834b 100644
--- a/x-pack/plugins/canvas/public/services/workpad.ts
+++ b/x-pack/plugins/canvas/public/services/workpad.ts
@@ -5,44 +5,7 @@
  * 2.0.
  */
 
-import {
-  API_ROUTE_WORKPAD,
-  DEFAULT_WORKPAD_CSS,
-  API_ROUTE_TEMPLATES,
-} from '../../common/lib/constants';
 import { CanvasWorkpad, CanvasTemplate } from '../../types';
-import { CanvasServiceFactory } from './';
-
-/*
-  Remove any top level keys from the workpad which will be rejected by validation
-*/
-const validKeys = [
-  '@created',
-  '@timestamp',
-  'assets',
-  'colors',
-  'css',
-  'variables',
-  'height',
-  'id',
-  'isWriteable',
-  'name',
-  'page',
-  'pages',
-  'width',
-];
-
-const sanitizeWorkpad = function (workpad: CanvasWorkpad) {
-  const workpadKeys = Object.keys(workpad);
-
-  for (const key of workpadKeys) {
-    if (!validKeys.includes(key)) {
-      delete (workpad as { [key: string]: any })[key];
-    }
-  }
-
-  return workpad;
-};
 
 export type FoundWorkpads = Array<Pick<CanvasWorkpad, 'name' | 'id' | '@timestamp' | '@created'>>;
 export type FoundWorkpad = FoundWorkpads[number];
@@ -54,8 +17,7 @@ export interface WorkpadFindResponse {
 export interface TemplateFindResponse {
   templates: CanvasTemplate[];
 }
-
-export interface WorkpadService {
+export interface CanvasWorkpadService {
   get: (id: string) => Promise<CanvasWorkpad>;
   create: (workpad: CanvasWorkpad) => Promise<CanvasWorkpad>;
   createFromTemplate: (templateId: string) => Promise<CanvasWorkpad>;
@@ -63,50 +25,3 @@ export interface WorkpadService {
   remove: (id: string) => Promise<void>;
   findTemplates: () => Promise<TemplateFindResponse>;
 }
-
-export const workpadServiceFactory: CanvasServiceFactory<WorkpadService> = (
-  _coreSetup,
-  coreStart,
-  _setupPlugins,
-  startPlugins
-): WorkpadService => {
-  const getApiPath = function () {
-    return `${API_ROUTE_WORKPAD}`;
-  };
-  return {
-    get: async (id: string) => {
-      const workpad = await coreStart.http.get(`${getApiPath()}/${id}`);
-
-      return { css: DEFAULT_WORKPAD_CSS, variables: [], ...workpad };
-    },
-    create: (workpad: CanvasWorkpad) => {
-      return coreStart.http.post(getApiPath(), {
-        body: JSON.stringify({
-          ...sanitizeWorkpad({ ...workpad }),
-          assets: workpad.assets || {},
-          variables: workpad.variables || [],
-        }),
-      });
-    },
-    createFromTemplate: (templateId: string) => {
-      return coreStart.http.post(getApiPath(), {
-        body: JSON.stringify({ templateId }),
-      });
-    },
-    findTemplates: async () => coreStart.http.get(API_ROUTE_TEMPLATES),
-    find: (searchTerm: string) => {
-      // TODO: this shouldn't be necessary.  Check for usage.
-      const validSearchTerm = typeof searchTerm === 'string' && searchTerm.length > 0;
-
-      return coreStart.http.get(`${getApiPath()}/find`, {
-        query: {
-          perPage: 10000,
-          name: validSearchTerm ? searchTerm : '',
-        },
-      });
-    },
-    remove: (id: string) => {
-      return coreStart.http.delete(`${getApiPath()}/${id}`);
-    },
-  };
-};
diff --git a/x-pack/plugins/canvas/public/state/actions/elements.js b/x-pack/plugins/canvas/public/state/actions/elements.js
index ac5d768de53b9..a8302cf094016 100644
--- a/x-pack/plugins/canvas/public/state/actions/elements.js
+++ b/x-pack/plugins/canvas/public/state/actions/elements.js
@@ -22,7 +22,7 @@ import { getDefaultElement } from '../defaults';
 import { ErrorStrings } from '../../../i18n';
 import { runInterpreter, interpretAst } from '../../lib/run_interpreter';
 import { subMultitree } from '../../lib/aeroelastic/functional';
-import { services } from '../../services';
+import { pluginServices } from '../../services';
 import { selectToplevelNodes } from './transient';
 import * as args from './resolved_args';
 
@@ -144,7 +144,8 @@ const fetchRenderableWithContextFn = ({ dispatch, getState }, element, ast, cont
       dispatch(getAction(renderable));
     })
     .catch((err) => {
-      services.notify.getService().error(err);
+      const notifyService = pluginServices.getServices().notify;
+      notifyService.error(err);
       dispatch(getAction(err));
     });
 };
@@ -188,7 +189,8 @@ export const fetchAllRenderables = createThunk(
         return runInterpreter(ast, null, variables, { castToRender: true })
           .then((renderable) => ({ path: argumentPath, value: renderable }))
           .catch((err) => {
-            services.notify.getService().error(err);
+            const notifyService = pluginServices.getServices().notify;
+            notifyService.error(err);
             return { path: argumentPath, value: err };
           });
       });
@@ -307,7 +309,8 @@ const setAst = createThunk('setAst', ({ dispatch }, ast, element, pageId, doRend
     const expression = toExpression(ast);
     dispatch(setExpression(expression, element.id, pageId, doRender));
   } catch (err) {
-    services.notify.getService().error(err);
+    const notifyService = pluginServices.getServices().notify;
+    notifyService.error(err);
 
     // TODO: remove this, may have been added just to cause a re-render, but why?
     dispatch(setExpression(element.expression, element.id, pageId, doRender));
diff --git a/x-pack/plugins/canvas/public/state/middleware/es_persist.js b/x-pack/plugins/canvas/public/state/middleware/es_persist.js
index 61a2e612215b5..17d0c9649b912 100644
--- a/x-pack/plugins/canvas/public/state/middleware/es_persist.js
+++ b/x-pack/plugins/canvas/public/state/middleware/es_persist.js
@@ -15,7 +15,7 @@ import { setAssets, resetAssets } from '../actions/assets';
 import * as transientActions from '../actions/transient';
 import * as resolvedArgsActions from '../actions/resolved_args';
 import { update, updateAssets, updateWorkpad } from '../../lib/workpad_service';
-import { services } from '../../services';
+import { pluginServices } from '../../services';
 import { canUserWrite } from '../selectors/app';
 
 const { esPersist: strings } = ErrorStrings;
@@ -61,17 +61,19 @@ export const esPersistMiddleware = ({ getState }) => {
 
     const notifyError = (err) => {
       const statusCode = err.response && err.response.status;
+      const notifyService = pluginServices.getServices().notify;
+
       switch (statusCode) {
         case 400:
-          return services.notify.getService().error(err.response, {
+          return notifyService.error(err.response, {
             title: strings.getSaveFailureTitle(),
           });
         case 413:
-          return services.notify.getService().error(strings.getTooLargeErrorMessage(), {
+          return notifyService.error(strings.getTooLargeErrorMessage(), {
             title: strings.getSaveFailureTitle(),
           });
         default:
-          return services.notify.getService().error(err, {
+          return notifyService.error(err, {
             title: strings.getUpdateFailureTitle(),
           });
       }
diff --git a/x-pack/plugins/canvas/public/store.ts b/x-pack/plugins/canvas/public/store.ts
index a199599d8c0ff..e8821bafbb052 100644
--- a/x-pack/plugins/canvas/public/store.ts
+++ b/x-pack/plugins/canvas/public/store.ts
@@ -17,17 +17,16 @@ import { getInitialState } from './state/initial_state';
 
 import { CoreSetup } from '../../../../src/core/public';
 import { API_ROUTE_FUNCTIONS } from '../common/lib/constants';
-import { CanvasSetupDeps } from './plugin';
 
-export async function createStore(core: CoreSetup, plugins: CanvasSetupDeps) {
+export async function createStore(core: CoreSetup) {
   if (getStore()) {
     return cloneStore();
   }
 
-  return createFreshStore(core, plugins);
+  return createFreshStore(core);
 }
 
-export async function createFreshStore(core: CoreSetup, plugins: CanvasSetupDeps) {
+export async function createFreshStore(core: CoreSetup) {
   const initialState = getInitialState();
 
   const basePath = core.http.basePath.get();
diff --git a/x-pack/plugins/canvas/public/style/index.scss b/x-pack/plugins/canvas/public/style/index.scss
index e866eada1f85f..aac898c3dd374 100644
--- a/x-pack/plugins/canvas/public/style/index.scss
+++ b/x-pack/plugins/canvas/public/style/index.scss
@@ -45,16 +45,13 @@
 @import '../components/workpad_page/workpad_static_page/workpad_static_page';
 @import '../components/var_config/edit_var';
 @import '../components/var_config/var_config';
-
 @import '../transitions/fade/fade';
 @import '../transitions/rotate/rotate';
 @import '../transitions/slide/slide';
 @import '../transitions/zoom/zoom';
-
 @import '../../canvas_plugin_src/renderers/filters/advanced_filter/component/advanced_filter.scss';
 @import '../../canvas_plugin_src/renderers/filters/dropdown_filter/component/dropdown_filter.scss';
 @import '../../canvas_plugin_src/renderers/embeddable/embeddable.scss';
 @import '../../canvas_plugin_src/renderers/plot/plot.scss';
-@import '../../canvas_plugin_src/renderers/reveal_image/reveal_image.scss';
 @import '../../canvas_plugin_src/renderers/filters/time_filter/time_filter.scss';
 @import '../../canvas_plugin_src/uis/arguments/image_upload/image_upload.scss';
diff --git a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
index 8ee96aeec2951..60987e987f63a 100644
--- a/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
+++ b/x-pack/plugins/canvas/shareable_runtime/supported_renderers.js
@@ -9,7 +9,6 @@ import { debug } from '../canvas_plugin_src/renderers/debug';
 import { error } from '../canvas_plugin_src/renderers/error';
 import { image } from '../canvas_plugin_src/renderers/image';
 import { repeatImage } from '../canvas_plugin_src/renderers/repeat_image';
-import { revealImage } from '../canvas_plugin_src/renderers/reveal_image';
 import { markdown } from '../canvas_plugin_src/renderers/markdown';
 import { metric } from '../canvas_plugin_src/renderers/metric';
 import { pie } from '../canvas_plugin_src/renderers/pie';
@@ -18,6 +17,7 @@ import { progress } from '../canvas_plugin_src/renderers/progress';
 import { shape } from '../canvas_plugin_src/renderers/shape';
 import { table } from '../canvas_plugin_src/renderers/table';
 import { text } from '../canvas_plugin_src/renderers/text';
+import { revealImageRenderer as revealImage } from '../../../../src/plugins/expression_reveal_image/public';
 
 /**
  * This is a collection of renderers which are bundled with the runtime.  If
diff --git a/x-pack/plugins/canvas/storybook/decorators/index.ts b/x-pack/plugins/canvas/storybook/decorators/index.ts
index 598a2333be554..a4ea3226b7760 100644
--- a/x-pack/plugins/canvas/storybook/decorators/index.ts
+++ b/x-pack/plugins/canvas/storybook/decorators/index.ts
@@ -8,7 +8,7 @@
 import { addDecorator } from '@storybook/react';
 import { routerContextDecorator } from './router_decorator';
 import { kibanaContextDecorator } from './kibana_decorator';
-import { servicesContextDecorator } from './services_decorator';
+import { servicesContextDecorator, legacyContextDecorator } from './services_decorator';
 
 export { reduxDecorator } from './redux_decorator';
 export { servicesContextDecorator } from './services_decorator';
@@ -21,5 +21,6 @@ export const addDecorators = () => {
 
   addDecorator(kibanaContextDecorator);
   addDecorator(routerContextDecorator);
-  addDecorator(servicesContextDecorator());
+  addDecorator(servicesContextDecorator);
+  addDecorator(legacyContextDecorator());
 };
diff --git a/x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx b/x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx
index 289171f136ab5..e81ae50ac6dd0 100644
--- a/x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx
+++ b/x-pack/plugins/canvas/storybook/decorators/redux_decorator.tsx
@@ -15,7 +15,7 @@ import { set } from '@elastic/safer-lodash-set';
 
 // @ts-expect-error Untyped local
 import { getDefaultWorkpad } from '../../public/state/defaults';
-import { CanvasWorkpad, CanvasElement, CanvasAsset } from '../../types';
+import { CanvasWorkpad, CanvasElement, CanvasAsset, CanvasPage } from '../../types';
 
 // @ts-expect-error untyped local
 import { elementsRegistry } from '../../public/lib/elements_registry';
@@ -27,18 +27,23 @@ export { ADDON_ID, ACTIONS_PANEL_ID } from '../addon/src/constants';
 
 export interface Params {
   workpad?: CanvasWorkpad;
+  pages?: CanvasPage[];
   elements?: CanvasElement[];
   assets?: CanvasAsset[];
 }
 
 export const reduxDecorator = (params: Params = {}) => {
   const state = cloneDeep(getInitialState());
-  const { workpad, elements, assets } = params;
+  const { workpad, elements, assets, pages } = params;
 
   if (workpad) {
     set(state, 'persistent.workpad', workpad);
   }
 
+  if (pages) {
+    set(state, 'persistent.workpad.pages', pages);
+  }
+
   if (elements) {
     set(state, 'persistent.workpad.pages.0.elements', elements);
   }
diff --git a/x-pack/plugins/canvas/storybook/decorators/services_decorator.tsx b/x-pack/plugins/canvas/storybook/decorators/services_decorator.tsx
index def5a5681a8c4..fbc3f140bffcc 100644
--- a/x-pack/plugins/canvas/storybook/decorators/services_decorator.tsx
+++ b/x-pack/plugins/canvas/storybook/decorators/services_decorator.tsx
@@ -7,40 +7,34 @@
 
 import React from 'react';
 
-import {
-  CanvasServiceFactory,
-  CanvasServiceProvider,
-  ServicesProvider,
-} from '../../public/services';
-import {
-  findNoWorkpads,
-  findSomeWorkpads,
-  workpadService,
-  findSomeTemplates,
-  findNoTemplates,
-} from '../../public/services/stubs/workpad';
-import { WorkpadService } from '../../public/services/workpad';
-
-interface Params {
-  findWorkpads?: number;
-  findTemplates?: boolean;
-}
-
-export const servicesContextDecorator = ({
-  findWorkpads = 0,
-  findTemplates: findTemplatesOption = false,
-}: Params = {}) => {
-  const workpadServiceFactory: CanvasServiceFactory<WorkpadService> = (): WorkpadService => ({
-    ...workpadService,
-    find: findWorkpads > 0 ? findSomeWorkpads(findWorkpads) : findNoWorkpads(),
-    findTemplates: findTemplatesOption ? findSomeTemplates() : findNoTemplates(),
-  });
-
-  const workpad = new CanvasServiceProvider(workpadServiceFactory);
-  // @ts-expect-error This is a hack at the moment, until we can get Canvas moved over to the new services architecture.
-  workpad.start();
-
-  return (story: Function) => (
-    <ServicesProvider providers={{ workpad }}>{story()}</ServicesProvider>
+import { DecoratorFn } from '@storybook/react';
+import { I18nProvider } from '@kbn/i18n/react';
+
+import { PluginServiceRegistry } from '../../../../../src/plugins/presentation_util/public';
+import { pluginServices, LegacyServicesProvider } from '../../public/services';
+import { CanvasPluginServices } from '../../public/services';
+import { pluginServiceProviders, StorybookParams } from '../../public/services/storybook';
+
+export const servicesContextDecorator: DecoratorFn = (story: Function, storybook) => {
+  if (process.env.JEST_WORKER_ID !== undefined) {
+    storybook.args.useStaticData = true;
+  }
+
+  const pluginServiceRegistry = new PluginServiceRegistry<CanvasPluginServices, StorybookParams>(
+    pluginServiceProviders
+  );
+
+  pluginServices.setRegistry(pluginServiceRegistry.start(storybook.args));
+
+  const ContextProvider = pluginServices.getContextProvider();
+
+  return (
+    <I18nProvider>
+      <ContextProvider>{story()}</ContextProvider>
+    </I18nProvider>
   );
 };
+
+export const legacyContextDecorator = () => (story: Function) => (
+  <LegacyServicesProvider>{story()}</LegacyServicesProvider>
+);
diff --git a/x-pack/plugins/canvas/storybook/index.ts b/x-pack/plugins/canvas/storybook/index.ts
index ff60b84c88a69..01dda057dac81 100644
--- a/x-pack/plugins/canvas/storybook/index.ts
+++ b/x-pack/plugins/canvas/storybook/index.ts
@@ -9,7 +9,9 @@ import { ACTIONS_PANEL_ID } from './addon/src/constants';
 
 export * from './decorators';
 export { ACTIONS_PANEL_ID } from './addon/src/constants';
+
 export const getAddonPanelParameters = () => ({ options: { selectedPanel: ACTIONS_PANEL_ID } });
+
 export const getDisableStoryshotsParameter = () => ({
   storyshots: {
     disable: true,
diff --git a/x-pack/plugins/canvas/storybook/preview.ts b/x-pack/plugins/canvas/storybook/preview.ts
index f885a654cdab8..8eae76abaf415 100644
--- a/x-pack/plugins/canvas/storybook/preview.ts
+++ b/x-pack/plugins/canvas/storybook/preview.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { action } from '@storybook/addon-actions';
+import { addParameters } from '@storybook/react';
 
 import { startServices } from '../public/services/stubs';
 import { addDecorators } from './decorators';
@@ -13,13 +13,9 @@ import { addDecorators } from './decorators';
 // Import Canvas CSS
 import '../public/style/index.scss';
 
-startServices({
-  notify: {
-    success: (message) => action(`success: ${message}`)(),
-    error: (message) => action(`error: ${message}`)(),
-    info: (message) => action(`info: ${message}`)(),
-    warning: (message) => action(`warning: ${message}`)(),
-  },
-});
+startServices();
 
 addDecorators();
+addParameters({
+  controls: { hideNoControlsWarning: true },
+});
diff --git a/x-pack/plugins/canvas/storybook/storyshots.test.tsx b/x-pack/plugins/canvas/storybook/storyshots.test.tsx
index 7f0ea077c7569..84ac1a26281e0 100644
--- a/x-pack/plugins/canvas/storybook/storyshots.test.tsx
+++ b/x-pack/plugins/canvas/storybook/storyshots.test.tsx
@@ -118,7 +118,7 @@ addSerializer(styleSheetSerializer);
 initStoryshots({
   configPath: path.resolve(__dirname),
   framework: 'react',
-  test: multiSnapshotWithOptions({}),
+  test: multiSnapshotWithOptions(),
   // Don't snapshot tests that start with 'redux'
   storyNameRegex: /^((?!.*?redux).)*$/,
 });
diff --git a/x-pack/plugins/canvas/test_helpers/function_wrapper.js b/x-pack/plugins/canvas/test_helpers/function_wrapper.js
deleted file mode 100644
index d20cac18cbb54..0000000000000
--- a/x-pack/plugins/canvas/test_helpers/function_wrapper.js
+++ /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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { mapValues } from 'lodash';
-
-// It takes a function spec and passes in default args into the spec fn
-export const functionWrapper = (fnSpec, mockReduxStore) => {
-  const spec = fnSpec();
-  const defaultArgs = mapValues(spec.args, (argSpec) => {
-    return argSpec.default;
-  });
-
-  return (context, args, handlers) =>
-    spec.fn(context, { ...defaultArgs, ...args }, handlers, mockReduxStore);
-};
diff --git a/x-pack/plugins/canvas/tsconfig.json b/x-pack/plugins/canvas/tsconfig.json
index 487b68ba3542b..84581d7be85a3 100644
--- a/x-pack/plugins/canvas/tsconfig.json
+++ b/x-pack/plugins/canvas/tsconfig.json
@@ -31,6 +31,7 @@
     { "path": "../../../src/plugins/discover/tsconfig.json" },
     { "path": "../../../src/plugins/embeddable/tsconfig.json" },
     { "path": "../../../src/plugins/expressions/tsconfig.json" },
+    { "path": "../../../src/plugins/expression_reveal_image/tsconfig.json" },
     { "path": "../../../src/plugins/home/tsconfig.json" },
     { "path": "../../../src/plugins/inspector/tsconfig.json" },
     { "path": "../../../src/plugins/kibana_legacy/tsconfig.json" },
diff --git a/x-pack/plugins/canvas/types/renderers.ts b/x-pack/plugins/canvas/types/renderers.ts
index e840ebee43ed3..2c3931485757d 100644
--- a/x-pack/plugins/canvas/types/renderers.ts
+++ b/x-pack/plugins/canvas/types/renderers.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { IInterpreterRenderHandlers } from 'src/plugins/expressions';
+import { ExpressionRenderDefinition, IInterpreterRenderHandlers } from 'src/plugins/expressions';
 
 type GenericRendererCallback = (callback: () => void) => void;
 
@@ -35,9 +35,9 @@ export interface RendererSpec<RendererConfig = {}> {
   /** The render type */
   name: string;
   /** The name to display */
-  displayName: string;
+  displayName?: string;
   /** A description of what is rendered */
-  help: string;
+  help?: string;
   /** Indicate whether the element should reuse the existing DOM element when re-rendering */
   reuseDomNode: boolean;
   /** The default width of the element in pixels */
@@ -50,5 +50,7 @@ export interface RendererSpec<RendererConfig = {}> {
 
 export type RendererFactory<RendererConfig = {}> = () => RendererSpec<RendererConfig>;
 
-export type AnyRendererFactory = RendererFactory<any>;
+export type AnyRendererFactory =
+  | RendererFactory<any>
+  | Array<() => ExpressionRenderDefinition<any>>;
 export type AnyRendererSpec = RendererSpec<any>;
diff --git a/x-pack/plugins/cases/common/constants.ts b/x-pack/plugins/cases/common/constants.ts
index 5d7ee47bb8ea0..fb3a0475d627a 100644
--- a/x-pack/plugins/cases/common/constants.ts
+++ b/x-pack/plugins/cases/common/constants.ts
@@ -94,3 +94,9 @@ if (ENABLE_CASE_CONNECTOR) {
 
 export const MAX_DOCS_PER_PAGE = 10000;
 export const MAX_CONCURRENT_SEARCHES = 10;
+
+/**
+ * Validation
+ */
+
+export const MAX_TITLE_LENGTH = 64;
diff --git a/x-pack/plugins/cases/public/common/translations.ts b/x-pack/plugins/cases/public/common/translations.ts
index 020d301c8e30e..c81ec1c25d84f 100644
--- a/x-pack/plugins/cases/public/common/translations.ts
+++ b/x-pack/plugins/cases/public/common/translations.ts
@@ -228,3 +228,9 @@ export const SELECTABLE_MESSAGE_COLLECTIONS = i18n.translate(
 export const SELECT_CASE_TITLE = i18n.translate('xpack.cases.common.allCases.caseModal.title', {
   defaultMessage: 'Select case',
 });
+
+export const MAX_LENGTH_ERROR = (field: string, length: number) =>
+  i18n.translate('xpack.cases.createCase.maxLengthError', {
+    values: { field, length },
+    defaultMessage: 'The length of the {field} is too long. The maximum length is {length}.',
+  });
diff --git a/x-pack/plugins/cases/public/components/all_cases/columns.tsx b/x-pack/plugins/cases/public/components/all_cases/columns.tsx
index ad4447223837c..140dbf2f53c25 100644
--- a/x-pack/plugins/cases/public/components/all_cases/columns.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/columns.tsx
@@ -34,6 +34,7 @@ import { useDeleteCases } from '../../containers/use_delete_cases';
 import { ConfirmDeleteCaseModal } from '../confirm_delete_case';
 import { useKibana } from '../../common/lib/kibana';
 import { StatusContextMenu } from '../case_action_bar/status_context_menu';
+import { TruncatedText } from '../truncated_text';
 
 export type CasesColumns =
   | EuiTableActionsColumnType<Case>
@@ -145,10 +146,10 @@ export const useCasesColumns = ({
                 subCaseId={isSubCase(theCase) ? theCase.id : undefined}
                 title={theCase.title}
               >
-                {theCase.title}
+                <TruncatedText text={theCase.title} />
               </CaseDetailsLink>
             ) : (
-              <span>{theCase.title}</span>
+              <TruncatedText text={theCase.title} />
             );
           return theCase.status !== CaseStatuses.closed ? (
             caseDetailsLinkComponent
diff --git a/x-pack/plugins/cases/public/components/all_cases/count.tsx b/x-pack/plugins/cases/public/components/all_cases/count.tsx
index e42e52cfdc934..eb33cf1069a9b 100644
--- a/x-pack/plugins/cases/public/components/all_cases/count.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/count.tsx
@@ -28,7 +28,7 @@ export const Count: FunctionComponent<CountProps> = ({ refresh }) => {
     }
   }, [fetchCasesStatus, refresh]);
   return (
-    <EuiFlexGroup>
+    <EuiFlexGroup responsive={false}>
       <EuiFlexItem grow={false}>
         <Stats
           dataTestSubj="openStatsHeader"
diff --git a/x-pack/plugins/cases/public/components/all_cases/header.tsx b/x-pack/plugins/cases/public/components/all_cases/header.tsx
index ee33979e5624f..862f4a72c8cb5 100644
--- a/x-pack/plugins/cases/public/components/all_cases/header.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/header.tsx
@@ -8,7 +8,7 @@
 import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import styled, { css } from 'styled-components';
-import { CaseHeaderPage } from '../case_header_page';
+import { HeaderPage } from '../header_page';
 import * as i18n from './translations';
 import { Count } from './count';
 import { CasesNavigation } from '../links';
@@ -32,6 +32,11 @@ const FlexItemDivider = styled(EuiFlexItem)`
       border-right: ${theme.eui.euiBorderThin};
       padding-right: ${theme.eui.euiSize};
       margin-right: ${theme.eui.euiSize};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.l}) {
+        padding-right: 0;
+        border-right: 0;
+        margin-right: 0;
+      }
     }
   `}
 `;
@@ -44,21 +49,15 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
   showTitle = true,
   userCanCrud,
 }) => (
-  <CaseHeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="m"
-      responsive={false}
-      wrap={true}
-      data-test-subj="all-cases-header"
-    >
+  <HeaderPage title={showTitle ? i18n.PAGE_TITLE : ''}>
+    <EuiFlexGroup alignItems="center" gutterSize="m" wrap={true} data-test-subj="all-cases-header">
       {userCanCrud ? (
         <>
-          <FlexItemDivider grow={false}>
+          <FlexItemDivider>
             <Count refresh={refresh} />
           </FlexItemDivider>
 
-          <EuiFlexItem grow={false}>
+          <EuiFlexItem>
             <NavButtons
               actionsErrors={actionsErrors}
               configureCasesNavigation={configureCasesNavigation}
@@ -74,5 +73,5 @@ export const CasesTableHeader: FunctionComponent<Props> = ({
         </EuiFlexItem>
       )}
     </EuiFlexGroup>
-  </CaseHeaderPage>
+  </HeaderPage>
 );
diff --git a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx
index ec83604987180..0e55abd00a706 100644
--- a/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/nav_buttons.tsx
@@ -8,11 +8,22 @@
 import React, { FunctionComponent } from 'react';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
+import styled, { css } from 'styled-components';
 import { ConfigureCaseButton } from '../configure_cases/button';
 import * as i18n from './translations';
 import { CasesNavigation, LinkButton } from '../links';
 import { ErrorMessage } from '../use_push_to_service/callout/types';
 
+const ButtonFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    & {
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
+        flex-direction: column;
+      }
+    }
+  `}
+`;
+
 interface OwnProps {
   actionsErrors: ErrorMessage[];
   configureCasesNavigation: CasesNavigation;
@@ -26,7 +37,7 @@ export const NavButtons: FunctionComponent<Props> = ({
   configureCasesNavigation,
   createCaseNavigation,
 }) => (
-  <EuiFlexGroup>
+  <ButtonFlexGroup responsive={false}>
     <EuiFlexItem grow={false}>
       <ConfigureCaseButton
         configureCasesNavigation={configureCasesNavigation}
@@ -37,7 +48,7 @@ export const NavButtons: FunctionComponent<Props> = ({
         titleTooltip={!isEmpty(actionsErrors) ? actionsErrors[0].title : ''}
       />
     </EuiFlexItem>
-    <EuiFlexItem grow={false}>
+    <EuiFlexItem>
       <LinkButton
         fill
         onClick={createCaseNavigation.onClick}
@@ -48,5 +59,5 @@ export const NavButtons: FunctionComponent<Props> = ({
         {i18n.CREATE_TITLE}
       </LinkButton>
     </EuiFlexItem>
-  </EuiFlexGroup>
+  </ButtonFlexGroup>
 );
diff --git a/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx b/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx
index 7d02bf2c441d3..bb54fbe410951 100644
--- a/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx
+++ b/x-pack/plugins/cases/public/components/all_cases/status_filter.tsx
@@ -29,9 +29,11 @@ const StatusFilterComponent: React.FC<Props> = ({
     .map((status) => ({
       value: status,
       inputDisplay: (
-        <EuiFlexGroup gutterSize="xs" alignItems={'center'}>
+        <EuiFlexGroup gutterSize="xs" alignItems={'center'} responsive={false}>
           <EuiFlexItem grow={false}>
-            <Status type={status} />
+            <span>
+              <Status type={status} />
+            </span>
           </EuiFlexItem>
           {status !== StatusAll && <EuiFlexItem grow={false}>{` (${stats[status]})`}</EuiFlexItem>}
         </EuiFlexGroup>
diff --git a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx
index 3448d112dadd1..af17ea0dca895 100644
--- a/x-pack/plugins/cases/public/components/case_action_bar/index.tsx
+++ b/x-pack/plugins/cases/public/components/case_action_bar/index.tsx
@@ -32,6 +32,10 @@ const MyDescriptionList = styled(EuiDescriptionList)`
     & {
       padding-right: ${theme.eui.euiSizeL};
       border-right: ${theme.eui.euiBorderThin};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) {
+        padding-right: 0;
+        border-right: 0;
+      }
     }
   `}
 `;
@@ -80,9 +84,9 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
     <EuiFlexGroup gutterSize="l" justifyContent="flexEnd" data-test-subj="case-action-bar-wrapper">
       <EuiFlexItem grow={false}>
         <MyDescriptionList compressed>
-          <EuiFlexGroup>
+          <EuiFlexGroup responsive={false} justifyContent="spaceBetween">
             {caseData.type !== CaseType.collection && (
-              <EuiFlexItem grow={false} data-test-subj="case-view-status">
+              <EuiFlexItem data-test-subj="case-view-status">
                 <EuiDescriptionListTitle>{i18n.STATUS}</EuiDescriptionListTitle>
                 <EuiDescriptionListDescription>
                   <StatusContextMenu
@@ -107,11 +111,21 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
         <EuiDescriptionList compressed>
-          <EuiFlexGroup gutterSize="l" alignItems="center">
+          <EuiFlexGroup
+            gutterSize="l"
+            alignItems="center"
+            responsive={false}
+            justifyContent="spaceBetween"
+          >
             {userCanCrud && !disableAlerting && (
-              <EuiFlexItem>
+              <EuiFlexItem grow={false}>
                 <EuiDescriptionListTitle>
-                  <EuiFlexGroup component="span" alignItems="center" gutterSize="xs">
+                  <EuiFlexGroup
+                    component="span"
+                    alignItems="center"
+                    gutterSize="xs"
+                    responsive={false}
+                  >
                     <EuiFlexItem grow={false}>
                       <span>{i18n.SYNC_ALERTS}</span>
                     </EuiFlexItem>
@@ -129,10 +143,17 @@ const CaseActionBarComponent: React.FC<CaseActionBarProps> = ({
                 </EuiDescriptionListDescription>
               </EuiFlexItem>
             )}
-            <EuiFlexItem>
-              <EuiButtonEmpty data-test-subj="case-refresh" iconType="refresh" onClick={onRefresh}>
-                {i18n.CASE_REFRESH}
-              </EuiButtonEmpty>
+            <EuiFlexItem grow={false}>
+              <span>
+                <EuiButtonEmpty
+                  data-test-subj="case-refresh"
+                  flush="left"
+                  iconType="refresh"
+                  onClick={onRefresh}
+                >
+                  {i18n.CASE_REFRESH}
+                </EuiButtonEmpty>
+              </span>
             </EuiFlexItem>
             {userCanCrud && (
               <EuiFlexItem grow={false} data-test-subj="case-view-actions">
diff --git a/x-pack/plugins/cases/public/components/case_header_page/index.tsx b/x-pack/plugins/cases/public/components/case_header_page/index.tsx
deleted file mode 100644
index 7e60db1030587..0000000000000
--- a/x-pack/plugins/cases/public/components/case_header_page/index.tsx
+++ /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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-
-import { HeaderPage, HeaderPageProps } from '../header_page';
-
-const CaseHeaderPageComponent: React.FC<HeaderPageProps> = (props) => <HeaderPage {...props} />;
-
-export const CaseHeaderPage = React.memo(CaseHeaderPageComponent);
diff --git a/x-pack/plugins/cases/public/components/case_view/index.tsx b/x-pack/plugins/cases/public/components/case_view/index.tsx
index ac7c9ebe08b5a..a44c2cb22010e 100644
--- a/x-pack/plugins/cases/public/components/case_view/index.tsx
+++ b/x-pack/plugins/cases/public/components/case_view/index.tsx
@@ -26,7 +26,7 @@ import { UserActionTree } from '../user_action_tree';
 import { UserList } from '../user_list';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { getTypedPayload } from '../../containers/utils';
-import { WhitePageWrapper, HeaderWrapper } from '../wrappers';
+import { ContentWrapper, WhitePageWrapper, HeaderWrapper } from '../wrappers';
 import { CaseActionBar } from '../case_action_bar';
 import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
 import { EditConnector } from '../edit_connector';
@@ -41,8 +41,6 @@ import { OwnerProvider } from '../owner_context';
 import { getConnectorById } from '../utils';
 import { DoesNotExist } from './does_not_exist';
 
-const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
-
 export interface CaseViewComponentProps {
   allCasesNavigation: CasesNavigation;
   caseDetailsNavigation: CasesNavigation;
@@ -75,11 +73,6 @@ export interface OnUpdateFields {
   onError?: () => void;
 }
 
-const MyWrapper = styled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l}`};
-`;
-
 const MyEuiFlexGroup = styled(EuiFlexGroup)`
   height: 100%;
 `;
@@ -404,7 +397,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
           </HeaderPage>
         </HeaderWrapper>
         <WhitePageWrapper>
-          <MyWrapper>
+          <ContentWrapper>
             <EuiFlexGroup>
               <EuiFlexItem grow={6}>
                 {initLoadingData && (
@@ -491,7 +484,7 @@ export const CaseComponent = React.memo<CaseComponentProps>(
                 />
               </EuiFlexItem>
             </EuiFlexGroup>
-          </MyWrapper>
+          </ContentWrapper>
         </WhitePageWrapper>
         {timelineUi?.renderTimelineDetailsPanel ? timelineUi.renderTimelineDetailsPanel() : null}
       </>
diff --git a/x-pack/plugins/cases/public/components/create/form_context.test.tsx b/x-pack/plugins/cases/public/components/create/form_context.test.tsx
index e083f11ced777..0ddab55c621d3 100644
--- a/x-pack/plugins/cases/public/components/create/form_context.test.tsx
+++ b/x-pack/plugins/cases/public/components/create/form_context.test.tsx
@@ -183,6 +183,36 @@ describe('Create case', () => {
       await waitFor(() => expect(postCase).toBeCalledWith(sampleData));
     });
 
+    it('it does not submits the title when the length is longer than 64 characters', async () => {
+      const longTitle =
+        'This is a title that should not be saved as it is longer than 64 characters.';
+
+      const wrapper = mount(
+        <TestProviders>
+          <FormContext onSuccess={onFormSubmitSuccess}>
+            <CreateCaseForm {...defaultCreateCaseForm} />
+            <SubmitCaseButton />
+          </FormContext>
+        </TestProviders>
+      );
+
+      act(() => {
+        wrapper
+          .find(`[data-test-subj="caseTitle"] input`)
+          .first()
+          .simulate('change', { target: { value: longTitle } });
+        wrapper.find(`[data-test-subj="create-case-submit"]`).first().simulate('click');
+      });
+
+      await waitFor(() => {
+        wrapper.update();
+        expect(wrapper.find('[data-test-subj="caseTitle"] .euiFormErrorText').text()).toBe(
+          'The length of the title is too long. The maximum length is 64.'
+        );
+      });
+      expect(postCase).not.toHaveBeenCalled();
+    });
+
     it('should toggle sync settings', async () => {
       useConnectorsMock.mockReturnValue({
         ...sampleConnectorData,
diff --git a/x-pack/plugins/cases/public/components/create/schema.tsx b/x-pack/plugins/cases/public/components/create/schema.tsx
index bea1a46d93760..41709a74d2fa5 100644
--- a/x-pack/plugins/cases/public/components/create/schema.tsx
+++ b/x-pack/plugins/cases/public/components/create/schema.tsx
@@ -5,12 +5,12 @@
  * 2.0.
  */
 
-import { CasePostRequest, ConnectorTypeFields } from '../../../common';
+import { CasePostRequest, ConnectorTypeFields, MAX_TITLE_LENGTH } from '../../../common';
 import { FIELD_TYPES, fieldValidators, FormSchema } from '../../common/shared_imports';
 import * as i18n from './translations';
 
 import { OptionalFieldLabel } from './optional_field_label';
-const { emptyField } = fieldValidators;
+const { emptyField, maxLengthField } = fieldValidators;
 
 export const schemaTags = {
   type: FIELD_TYPES.COMBO_BOX,
@@ -33,6 +33,12 @@ export const schema: FormSchema<FormProps> = {
       {
         validator: emptyField(i18n.TITLE_REQUIRED),
       },
+      {
+        validator: maxLengthField({
+          length: MAX_TITLE_LENGTH,
+          message: i18n.MAX_LENGTH_ERROR('title', MAX_TITLE_LENGTH),
+        }),
+      },
     ],
   },
   description: {
diff --git a/x-pack/plugins/cases/public/components/edit_connector/index.tsx b/x-pack/plugins/cases/public/components/edit_connector/index.tsx
index 0a20d2f5c8303..df7855fb9ce33 100644
--- a/x-pack/plugins/cases/public/components/edit_connector/index.tsx
+++ b/x-pack/plugins/cases/public/components/edit_connector/index.tsx
@@ -68,6 +68,9 @@ const DisappearingFlexItem = styled(EuiFlexItem)`
     $isHidden &&
     `
       margin: 0 !important;
+      & .euiFlexItem {
+        margin: 0 !important;
+      }
     `}
 `;
 
@@ -244,7 +247,12 @@ export const EditConnector = React.memo(
 
     return (
       <EuiText>
-        <MyFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+        <MyFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          justifyContent="spaceBetween"
+          responsive={false}
+        >
           <EuiFlexItem grow={false}>
             <h4>{i18n.CONNECTORS}</h4>
           </EuiFlexItem>
@@ -304,7 +312,7 @@ export const EditConnector = React.memo(
           </EuiFlexItem>
           {editConnector && (
             <EuiFlexItem>
-              <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiButton
                     color="secondary"
diff --git a/x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap b/x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
index 24b1756aade2e..1348e26ebdf6d 100644
--- a/x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
+++ b/x-pack/plugins/cases/public/components/header_page/__snapshots__/editable_title.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`EditableTitle it renders 1`] = `
 <EuiFlexGroup
   alignItems="center"
   gutterSize="none"
+  responsive={false}
 >
   <EuiFlexItem
     grow={false}
diff --git a/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap b/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap
index 05af2fee2c2a2..9ff9b0616c57e 100644
--- a/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap
+++ b/x-pack/plugins/cases/public/components/header_page/__snapshots__/title.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`Title it renders 1`] = `
   <h1
     data-test-subj="header-page-title"
   >
-    Test title
+    <Memo(TruncatedTextComponent)
+      text="Test title"
+    />
      
     <StyledEuiBetaBadge
       label="Beta"
@@ -17,3 +19,17 @@ exports[`Title it renders 1`] = `
   </h1>
 </EuiTitle>
 `;
+
+exports[`Title it renders the title if is not a string 1`] = `
+<EuiTitle
+  size="l"
+>
+  <h1
+    data-test-subj="header-page-title"
+  >
+    <span>
+      Test title
+    </span>
+  </h1>
+</EuiTitle>
+`;
diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx
index babfeb584677b..19aea39f1f793 100644
--- a/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/editable_title.test.tsx
@@ -187,4 +187,33 @@ describe('EditableTitle', () => {
     expect(submitTitle.mock.calls[0][0]).toEqual(newTitle);
     expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(true);
   });
+
+  test('it does not submits the title when the length is longer than 64 characters', () => {
+    const longTitle =
+      'This is a title that should not be saved as it is longer than 64 characters.';
+
+    const wrapper = mount(
+      <TestProviders>
+        <EditableTitle {...defaultProps} />
+      </TestProviders>
+    );
+
+    wrapper.find('button[data-test-subj="editable-title-edit-icon"]').simulate('click');
+    wrapper.update();
+
+    wrapper
+      .find('input[data-test-subj="editable-title-input-field"]')
+      .simulate('change', { target: { value: longTitle } });
+
+    wrapper.find('button[data-test-subj="editable-title-submit-btn"]').simulate('click');
+    wrapper.update();
+    expect(wrapper.find('.euiFormErrorText').text()).toBe(
+      'The length of the title is too long. The maximum length is 64.'
+    );
+
+    expect(submitTitle).not.toHaveBeenCalled();
+    expect(wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()).toBe(
+      false
+    );
+  });
 });
diff --git a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
index c897f8a7bf832..4dcfa9ad98fde 100644
--- a/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/editable_title.tsx
@@ -16,10 +16,11 @@ import {
   EuiFieldText,
   EuiButtonIcon,
   EuiLoadingSpinner,
+  EuiFormRow,
 } from '@elastic/eui';
 
+import { MAX_TITLE_LENGTH } from '../../../common';
 import * as i18n from './translations';
-
 import { Title } from './title';
 
 const MyEuiButtonIcon = styled(EuiButtonIcon)`
@@ -37,7 +38,7 @@ const MySpinner = styled(EuiLoadingSpinner)`
 export interface EditableTitleProps {
   userCanCrud: boolean;
   isLoading: boolean;
-  title: string | React.ReactNode;
+  title: string;
   onSubmit: (title: string) => void;
 }
 
@@ -48,59 +49,74 @@ const EditableTitleComponent: React.FC<EditableTitleProps> = ({
   title,
 }) => {
   const [editMode, setEditMode] = useState(false);
-  const [changedTitle, onTitleChange] = useState<string>(typeof title === 'string' ? title : '');
+  const [errors, setErrors] = useState<string[]>([]);
+  const [newTitle, setNewTitle] = useState<string>(title);
 
-  const onCancel = useCallback(() => setEditMode(false), []);
-  const onClickEditIcon = useCallback(() => setEditMode(true), []);
+  const onCancel = useCallback(() => {
+    setEditMode(false);
+    setErrors([]);
+    setNewTitle(title);
+  }, [title]);
 
+  const onClickEditIcon = useCallback(() => setEditMode(true), []);
   const onClickSubmit = useCallback((): void => {
-    if (changedTitle !== title) {
-      onSubmit(changedTitle);
+    if (newTitle.length > MAX_TITLE_LENGTH) {
+      setErrors([i18n.MAX_LENGTH_ERROR('title', MAX_TITLE_LENGTH)]);
+      return;
+    }
+
+    if (newTitle !== title) {
+      onSubmit(newTitle);
     }
     setEditMode(false);
-  }, [changedTitle, onSubmit, title]);
+  }, [newTitle, onSubmit, title]);
 
   const handleOnChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => onTitleChange(e.target.value),
+    (e: ChangeEvent<HTMLInputElement>) => setNewTitle(e.target.value),
     []
   );
+
+  const hasErrors = errors.length > 0;
+
   return editMode ? (
-    <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>
-        <EuiFieldText
-          onChange={handleOnChange}
-          value={`${changedTitle}`}
-          data-test-subj="editable-title-input-field"
-        />
-      </EuiFlexItem>
-      <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
+    <EuiFormRow isInvalid={hasErrors} error={errors} fullWidth>
+      <EuiFlexGroup alignItems="center" gutterSize="m" justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
-          <EuiButton
-            color="secondary"
-            data-test-subj="editable-title-submit-btn"
-            fill
-            iconType="save"
-            onClick={onClickSubmit}
-            size="s"
-          >
-            {i18n.SAVE}
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            data-test-subj="editable-title-cancel-btn"
-            iconType="cross"
-            onClick={onCancel}
-            size="s"
-          >
-            {i18n.CANCEL}
-          </EuiButtonEmpty>
+          <EuiFieldText
+            onChange={handleOnChange}
+            value={`${newTitle}`}
+            data-test-subj="editable-title-input-field"
+          />
         </EuiFlexItem>
+        <EuiFlexGroup gutterSize="none" responsive={false} wrap={true}>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              color="secondary"
+              data-test-subj="editable-title-submit-btn"
+              fill
+              iconType="save"
+              onClick={onClickSubmit}
+              size="s"
+            >
+              {i18n.SAVE}
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty
+              data-test-subj="editable-title-cancel-btn"
+              iconType="cross"
+              onClick={onCancel}
+              size="s"
+            >
+              {i18n.CANCEL}
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+        <EuiFlexItem />
       </EuiFlexGroup>
-      <EuiFlexItem />
-    </EuiFlexGroup>
+    </EuiFormRow>
   ) : (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexGroup alignItems="center" gutterSize="none" responsive={false}>
       <EuiFlexItem grow={false}>
         <Title title={title} />
       </EuiFlexItem>
diff --git a/x-pack/plugins/cases/public/components/header_page/title.test.tsx b/x-pack/plugins/cases/public/components/header_page/title.test.tsx
index 2423104eb8819..063b21e4d8906 100644
--- a/x-pack/plugins/cases/public/components/header_page/title.test.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/title.test.tsx
@@ -36,4 +36,10 @@ describe('Title', () => {
 
     expect(wrapper.find('[data-test-subj="header-page-title"]').first().exists()).toBe(true);
   });
+
+  test('it renders the title if is not a string', () => {
+    const wrapper = shallow(<Title title={<span>{'Test title'}</span>} />);
+
+    expect(wrapper).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/cases/public/components/header_page/title.tsx b/x-pack/plugins/cases/public/components/header_page/title.tsx
index 3a0390a436e1c..629aa612610ee 100644
--- a/x-pack/plugins/cases/public/components/header_page/title.tsx
+++ b/x-pack/plugins/cases/public/components/header_page/title.tsx
@@ -6,10 +6,12 @@
  */
 
 import React from 'react';
+import { isString } from 'lodash';
 import { EuiBetaBadge, EuiBadge, EuiTitle } from '@elastic/eui';
 import styled from 'styled-components';
 
 import { BadgeOptions, TitleProp } from './types';
+import { TruncatedText } from '../truncated_text';
 
 const StyledEuiBetaBadge = styled(EuiBetaBadge)`
   vertical-align: middle;
@@ -30,7 +32,7 @@ interface Props {
 const TitleComponent: React.FC<Props> = ({ title, badgeOptions }) => (
   <EuiTitle size="l">
     <h1 data-test-subj="header-page-title">
-      {title}
+      {isString(title) ? <TruncatedText text={title} /> : title}
       {badgeOptions && (
         <>
           {' '}
diff --git a/x-pack/plugins/cases/public/components/header_page/translations.ts b/x-pack/plugins/cases/public/components/header_page/translations.ts
index b24c347857a6c..ba987d1f45f15 100644
--- a/x-pack/plugins/cases/public/components/header_page/translations.ts
+++ b/x-pack/plugins/cases/public/components/header_page/translations.ts
@@ -7,6 +7,8 @@
 
 import { i18n } from '@kbn/i18n';
 
+export * from '../../common/translations';
+
 export const SAVE = i18n.translate('xpack.cases.header.editableTitle.save', {
   defaultMessage: 'Save',
 });
diff --git a/x-pack/plugins/cases/public/components/property_actions/index.tsx b/x-pack/plugins/cases/public/components/property_actions/index.tsx
index 170af5fd3b28c..9fa874344864b 100644
--- a/x-pack/plugins/cases/public/components/property_actions/index.tsx
+++ b/x-pack/plugins/cases/public/components/property_actions/index.tsx
@@ -22,9 +22,9 @@ const ComponentId = 'property-actions';
 const PropertyActionButton = React.memo<PropertyActionButtonProps>(
   ({ disabled = false, onClick, iconType, label }) => (
     <EuiButtonEmpty
-      data-test-subj={`${ComponentId}-${iconType}`}
       aria-label={label}
       color="text"
+      data-test-subj={`${ComponentId}-${iconType}`}
       iconSide="left"
       iconType={iconType}
       isDisabled={disabled}
@@ -56,44 +56,43 @@ export const PropertyActions = React.memo<PropertyActionsProps>(({ propertyActio
   }, []);
 
   return (
-    <EuiFlexGroup alignItems="flexStart" data-test-subj={ComponentId} gutterSize="none">
-      <EuiFlexItem grow={false}>
-        <EuiPopover
-          anchorPosition="downRight"
-          ownFocus
-          button={
-            <EuiButtonIcon
-              data-test-subj={`${ComponentId}-ellipses`}
-              aria-label={i18n.ACTIONS_ARIA}
-              iconType="boxesHorizontal"
-              onClick={onButtonClick}
-            />
-          }
-          id="settingsPopover"
-          isOpen={showActions}
-          closePopover={onClosePopover}
-          repositionOnScroll
-        >
-          <EuiFlexGroup
-            alignItems="flexStart"
-            data-test-subj={`${ComponentId}-group`}
-            direction="column"
-            gutterSize="none"
-          >
-            {propertyActions.map((action, key) => (
-              <EuiFlexItem grow={false} key={`${action.label}${key}`}>
-                <PropertyActionButton
-                  disabled={action.disabled}
-                  iconType={action.iconType}
-                  label={action.label}
-                  onClick={() => onClosePopover(action.onClick)}
-                />
-              </EuiFlexItem>
-            ))}
-          </EuiFlexGroup>
-        </EuiPopover>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <EuiPopover
+      anchorPosition="downRight"
+      data-test-subj={ComponentId}
+      ownFocus
+      button={
+        <EuiButtonIcon
+          data-test-subj={`${ComponentId}-ellipses`}
+          aria-label={i18n.ACTIONS_ARIA}
+          iconType="boxesHorizontal"
+          onClick={onButtonClick}
+        />
+      }
+      id="settingsPopover"
+      isOpen={showActions}
+      closePopover={onClosePopover}
+      repositionOnScroll
+    >
+      <EuiFlexGroup
+        alignItems="flexStart"
+        data-test-subj={`${ComponentId}-group`}
+        direction="column"
+        gutterSize="none"
+      >
+        {propertyActions.map((action, key) => (
+          <EuiFlexItem grow={false} key={`${action.label}${key}`}>
+            <span>
+              <PropertyActionButton
+                disabled={action.disabled}
+                iconType={action.iconType}
+                label={action.label}
+                onClick={() => onClosePopover(action.onClick)}
+              />
+            </span>
+          </EuiFlexItem>
+        ))}
+      </EuiFlexGroup>
+    </EuiPopover>
   );
 });
 
diff --git a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx
index bfe44dda6c6ef..e08c629913258 100644
--- a/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx
+++ b/x-pack/plugins/cases/public/components/recent_cases/recent_cases.tsx
@@ -19,6 +19,7 @@ import { NoCases } from './no_cases';
 import { isSubCase } from '../all_cases/helpers';
 import { MarkdownRenderer } from '../markdown_editor';
 import { FilterOptions } from '../../containers/types';
+import { TruncatedText } from '../truncated_text';
 
 const MarkdownContainer = styled.div`
   max-height: 150px;
@@ -80,7 +81,7 @@ export const RecentCasesComp = ({
                 title={c.title}
                 subCaseId={isSubCase(c) ? c.id : undefined}
               >
-                {c.title}
+                <TruncatedText text={c.title} />
               </CaseDetailsLink>
             </EuiText>
 
diff --git a/x-pack/plugins/cases/public/components/tag_list/index.tsx b/x-pack/plugins/cases/public/components/tag_list/index.tsx
index 4e8946a6589a3..925e198e4a478 100644
--- a/x-pack/plugins/cases/public/components/tag_list/index.tsx
+++ b/x-pack/plugins/cases/public/components/tag_list/index.tsx
@@ -36,6 +36,7 @@ export interface TagListProps {
 
 const MyFlexGroup = styled(EuiFlexGroup)`
   ${({ theme }) => css`
+    width: 100%;
     margin-top: ${theme.eui.euiSizeM};
     p {
       font-size: ${theme.eui.euiSizeM};
@@ -43,6 +44,17 @@ const MyFlexGroup = styled(EuiFlexGroup)`
   `}
 `;
 
+const ColumnFlexGroup = styled(EuiFlexGroup)`
+  ${({ theme }) => css`
+    & {
+      max-width: 100%;
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.m}) {
+        flex-direction: row;
+      }
+    }
+  `}
+`;
+
 export const TagList = React.memo(
   ({ userCanCrud = true, isLoading, onSubmit, tags }: TagListProps) => {
     const initialState = { tags };
@@ -80,7 +92,12 @@ export const TagList = React.memo(
     );
     return (
       <EuiText>
-        <EuiFlexGroup alignItems="center" gutterSize="xs" justifyContent="spaceBetween">
+        <EuiFlexGroup
+          alignItems="center"
+          gutterSize="xs"
+          justifyContent="spaceBetween"
+          responsive={false}
+        >
           <EuiFlexItem grow={false}>
             <h4>{i18n.TAGS}</h4>
           </EuiFlexItem>
@@ -99,9 +116,13 @@ export const TagList = React.memo(
         <EuiHorizontalRule margin="xs" />
         <MyFlexGroup gutterSize="none" data-test-subj="case-tags">
           {tags.length === 0 && !isEditTags && <p data-test-subj="no-tags">{i18n.NO_TAGS}</p>}
-          {!isEditTags && <Tags tags={tags} color="hollow" />}
+          {!isEditTags && (
+            <EuiFlexItem>
+              <Tags tags={tags} color="hollow" />
+            </EuiFlexItem>
+          )}
           {isEditTags && (
-            <EuiFlexGroup data-test-subj="edit-tags" direction="column">
+            <ColumnFlexGroup data-test-subj="edit-tags" direction="column">
               <EuiFlexItem>
                 <Form form={form}>
                   <CommonUseField
@@ -139,7 +160,7 @@ export const TagList = React.memo(
                 </Form>
               </EuiFlexItem>
               <EuiFlexItem>
-                <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       color="secondary"
@@ -164,7 +185,7 @@ export const TagList = React.memo(
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiFlexItem>
-            </EuiFlexGroup>
+            </ColumnFlexGroup>
           )}
         </MyFlexGroup>
       </EuiText>
diff --git a/x-pack/plugins/cases/public/components/tag_list/tags.tsx b/x-pack/plugins/cases/public/components/tag_list/tags.tsx
index c91953c3077ca..f3b05972a24a9 100644
--- a/x-pack/plugins/cases/public/components/tag_list/tags.tsx
+++ b/x-pack/plugins/cases/public/components/tag_list/tags.tsx
@@ -7,21 +7,24 @@
 
 import React, { memo } from 'react';
 import { EuiBadgeGroup, EuiBadge, EuiBadgeGroupProps } from '@elastic/eui';
+import styled from 'styled-components';
 
 interface TagsProps {
   tags: string[];
   color?: string;
   gutterSize?: EuiBadgeGroupProps['gutterSize'];
 }
-
+const MyEuiBadge = styled(EuiBadge)`
+  max-width: 200px;
+`;
 const TagsComponent: React.FC<TagsProps> = ({ tags, color = 'default', gutterSize }) => (
   <>
     {tags.length > 0 && (
       <EuiBadgeGroup gutterSize={gutterSize}>
         {tags.map((tag) => (
-          <EuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}>
+          <MyEuiBadge data-test-subj={`tag-${tag}`} color={color} key={tag}>
             {tag}
-          </EuiBadge>
+          </MyEuiBadge>
         ))}
       </EuiBadgeGroup>
     )}
diff --git a/x-pack/plugins/cases/public/components/truncated_text/index.tsx b/x-pack/plugins/cases/public/components/truncated_text/index.tsx
new file mode 100644
index 0000000000000..8a480ed9dbdd1
--- /dev/null
+++ b/x-pack/plugins/cases/public/components/truncated_text/index.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 styled from 'styled-components';
+
+const LINE_CLAMP = 3;
+
+const Text = styled.span`
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: ${LINE_CLAMP};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
+interface Props {
+  text: string;
+}
+
+const TruncatedTextComponent: React.FC<Props> = ({ text }) => {
+  return <Text title={text}>{text}</Text>;
+};
+
+export const TruncatedText = React.memo(TruncatedTextComponent);
diff --git a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
index 5d234296dd503..338b8577458e3 100644
--- a/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
+++ b/x-pack/plugins/cases/public/components/user_action_tree/helpers.tsx
@@ -44,8 +44,9 @@ export type ActionsNavigation = CasesNavigation<string, 'configurable'>;
 const getStatusTitle = (id: string, status: CaseStatuses) => (
   <EuiFlexGroup
     gutterSize="s"
-    alignItems={'center'}
+    alignItems="center"
     data-test-subj={`${id}-user-action-status-title`}
+    responsive={false}
   >
     <EuiFlexItem grow={false}>{i18n.MARKED_CASE_AS}</EuiFlexItem>
     <EuiFlexItem grow={false}>
@@ -110,7 +111,7 @@ const getTagsLabelTitle = (action: CaseUserActions) => {
   const tags = action.newValue != null ? action.newValue.split(',') : [];
 
   return (
-    <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span">
+    <EuiFlexGroup alignItems="baseline" gutterSize="xs" component="span" responsive={false}>
       <EuiFlexItem data-test-subj="ua-tags-label" grow={false}>
         {action.action === 'add' && i18n.ADDED_FIELD}
         {action.action === 'delete' && i18n.REMOVED_FIELD} {i18n.TAGS.toLowerCase()}
@@ -125,7 +126,12 @@ const getTagsLabelTitle = (action: CaseUserActions) => {
 export const getPushedServiceLabelTitle = (action: CaseUserActions, firstPush: boolean) => {
   const pushedVal = JSON.parse(action.newValue ?? '') as CaseFullExternalService;
   return (
-    <EuiFlexGroup alignItems="baseline" gutterSize="xs" data-test-subj="pushed-service-label-title">
+    <EuiFlexGroup
+      alignItems="baseline"
+      gutterSize="xs"
+      data-test-subj="pushed-service-label-title"
+      responsive={false}
+    >
       <EuiFlexItem data-test-subj="pushed-label">
         {`${firstPush ? i18n.PUSHED_NEW_INCIDENT : i18n.UPDATE_INCIDENT} ${
           pushedVal?.connector_name
@@ -190,15 +196,15 @@ export const getUpdateAction = ({
   timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
   timelineIcon: getUpdateActionIcon(action.actionField[0]),
   actions: (
-    <EuiFlexGroup>
-      <EuiFlexItem>
+    <EuiFlexGroup responsive={false}>
+      <EuiFlexItem grow={false}>
         <UserActionCopyLink
           getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
           id={action.actionId}
         />
       </EuiFlexItem>
       {action.action === 'update' && action.commentId != null && (
-        <EuiFlexItem>
+        <EuiFlexItem grow={false}>
           <UserActionMoveToReference id={action.commentId} outlineComment={handleOutlineComment} />
         </EuiFlexItem>
       )}
@@ -252,14 +258,14 @@ export const getAlertAttachment = ({
   timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
   timelineIcon: 'bell',
   actions: (
-    <EuiFlexGroup>
-      <EuiFlexItem>
+    <EuiFlexGroup responsive={false}>
+      <EuiFlexItem grow={false}>
         <UserActionCopyLink
           id={action.actionId}
           getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <UserActionShowAlert
           id={action.actionId}
           alertId={alertId}
@@ -343,15 +349,17 @@ export const getGeneratedAlertsAttachment = ({
   timestamp: <UserActionTimestamp createdAt={action.actionAt} />,
   timelineIcon: 'bell',
   actions: (
-    <EuiFlexGroup>
-      <EuiFlexItem>
+    <EuiFlexGroup responsive={false}>
+      <EuiFlexItem grow={false}>
         <UserActionCopyLink
           getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId}
           id={action.actionId}
         />
       </EuiFlexItem>
       {renderInvestigateInTimelineActionComponent ? (
-        <EuiFlexItem>{renderInvestigateInTimelineActionComponent(alertIds)}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {renderInvestigateInTimelineActionComponent(alertIds)}
+        </EuiFlexItem>
       ) : null}
     </EuiFlexGroup>
   ),
diff --git a/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx b/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx
index 5fa12b8cfa434..d19ed697f97fe 100644
--- a/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx
+++ b/x-pack/plugins/cases/public/components/user_action_tree/user_action_content_toolbar.tsx
@@ -32,12 +32,12 @@ const UserActionContentToolbarComponent = ({
   onQuote,
   userCanCrud,
 }: UserActionContentToolbarProps) => (
-  <EuiFlexGroup>
-    <EuiFlexItem>
+  <EuiFlexGroup responsive={false} alignItems="center">
+    <EuiFlexItem grow={false}>
       <UserActionCopyLink id={id} getCaseDetailHrefWithCommentId={getCaseDetailHrefWithCommentId} />
     </EuiFlexItem>
     {userCanCrud && (
-      <EuiFlexItem>
+      <EuiFlexItem grow={false}>
         <UserActionPropertyActions
           id={id}
           editLabel={editLabel}
diff --git a/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx b/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx
index 19cc804786af1..1522527468fc4 100644
--- a/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx
+++ b/x-pack/plugins/cases/public/components/user_action_tree/user_action_markdown.tsx
@@ -56,7 +56,7 @@ export const UserActionMarkdown = ({
 
   const renderButtons = useCallback(
     ({ cancelAction, saveAction }) => (
-      <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty
             data-test-subj="user-action-cancel-markdown"
diff --git a/x-pack/plugins/cases/public/components/user_list/index.tsx b/x-pack/plugins/cases/public/components/user_list/index.tsx
index d4d5d56ccc0d5..6a252cfaea20d 100644
--- a/x-pack/plugins/cases/public/components/user_list/index.tsx
+++ b/x-pack/plugins/cases/public/components/user_list/index.tsx
@@ -49,13 +49,13 @@ const renderUsers = (
   handleSendEmail: (emailAddress: string | undefined | null) => void
 ) =>
   users.map(({ fullName, username, email }, key) => (
-    <MyFlexGroup key={key} justifyContent="spaceBetween">
+    <MyFlexGroup key={key} justifyContent="spaceBetween" responsive={false}>
       <EuiFlexItem grow={false}>
-        <EuiFlexGroup gutterSize="xs">
-          <EuiFlexItem>
+        <EuiFlexGroup gutterSize="xs" responsive={false}>
+          <EuiFlexItem grow={false}>
             <MyAvatar name={fullName ? fullName : username ?? ''} />
           </EuiFlexItem>
-          <EuiFlexItem>
+          <EuiFlexItem grow={false}>
             <EuiToolTip position="top" content={<p>{fullName ? fullName : username ?? ''}</p>}>
               <p>
                 <strong>
diff --git a/x-pack/plugins/cases/public/components/wrappers/index.tsx b/x-pack/plugins/cases/public/components/wrappers/index.tsx
index 3b33e9304da83..4c8a3a681f024 100644
--- a/x-pack/plugins/cases/public/components/wrappers/index.tsx
+++ b/x-pack/plugins/cases/public/components/wrappers/index.tsx
@@ -21,6 +21,23 @@ export const SectionWrapper = styled.div`
 `;
 
 export const HeaderWrapper = styled.div`
-  padding: ${({ theme }) =>
-    `${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l}`};
+  ${({ theme }) =>
+    `
+      padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} 0 ${theme.eui.paddingSizes.l};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
+        padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} 0
+          ${theme.eui.paddingSizes.s};
+      }
+    `};
+`;
+const gutterTimeline = '70px'; // seems to be a timeline reference from the original file
+export const ContentWrapper = styled.div`
+  ${({ theme }) =>
+    `
+      padding: ${theme.eui.paddingSizes.l} ${theme.eui.paddingSizes.l} ${gutterTimeline} ${theme.eui.paddingSizes.l};
+      @media only screen and (max-width: ${theme.eui.euiBreakpoints.s}) {
+        padding: ${theme.eui.paddingSizes.s} ${theme.eui.paddingSizes.s} ${gutterTimeline}
+          ${theme.eui.paddingSizes.s};
+      }
+    `};
 `;
diff --git a/x-pack/plugins/cases/server/client/cases/create.ts b/x-pack/plugins/cases/server/client/cases/create.ts
index 0eebeb343e814..03ea76ede5c2e 100644
--- a/x-pack/plugins/cases/server/client/cases/create.ts
+++ b/x-pack/plugins/cases/server/client/cases/create.ts
@@ -22,6 +22,7 @@ import {
   CaseType,
   OWNER_FIELD,
   ENABLE_CASE_CONNECTOR,
+  MAX_TITLE_LENGTH,
 } from '../../../common';
 import { buildCaseUserActionItem } from '../../services/user_actions/helpers';
 import { getConnectorFromConfiguration } from '../utils';
@@ -72,6 +73,12 @@ export const create = async (
     fold(throwErrors(Boom.badRequest), identity)
   );
 
+  if (query.title.length > MAX_TITLE_LENGTH) {
+    throw Boom.badRequest(
+      `The length of the title is too long. The maximum length is ${MAX_TITLE_LENGTH}.`
+    );
+  }
+
   try {
     const savedObjectID = SavedObjectsUtils.generateId();
 
diff --git a/x-pack/plugins/cases/server/client/cases/update.ts b/x-pack/plugins/cases/server/client/cases/update.ts
index e5d9e1cddeee6..afe43171563ce 100644
--- a/x-pack/plugins/cases/server/client/cases/update.ts
+++ b/x-pack/plugins/cases/server/client/cases/update.ts
@@ -40,6 +40,7 @@ import {
   MAX_CONCURRENT_SEARCHES,
   SUB_CASE_SAVED_OBJECT,
   throwErrors,
+  MAX_TITLE_LENGTH,
 } from '../../../common';
 import { buildCaseUserActions } from '../../services/user_actions/helpers';
 import { getCaseToUpdate } from '../utils';
@@ -181,6 +182,24 @@ async function throwIfInvalidUpdateOfTypeWithAlerts({
   }
 }
 
+/**
+ * Throws an error if any of the requests updates a title and the length is over MAX_TITLE_LENGTH.
+ */
+function throwIfTitleIsInvalid(requests: ESCasePatchRequest[]) {
+  const requestsInvalidTitle = requests.filter(
+    (req) => req.title !== undefined && req.title.length > MAX_TITLE_LENGTH
+  );
+
+  if (requestsInvalidTitle.length > 0) {
+    const ids = requestsInvalidTitle.map((req) => req.id);
+    throw Boom.badRequest(
+      `The length of the title is too long. The maximum length is ${MAX_TITLE_LENGTH}, ids: [${ids.join(
+        ', '
+      )}]`
+    );
+  }
+}
+
 /**
  * Get the id from a reference in a comment for a specific type.
  */
@@ -477,6 +496,7 @@ export const update = async (
     }
 
     throwIfUpdateOwner(updateFilterCases);
+    throwIfTitleIsInvalid(updateFilterCases);
     throwIfUpdateStatusOfCollection(updateFilterCases, casesMap);
     throwIfUpdateTypeCollectionToIndividual(updateFilterCases, casesMap);
     await throwIfInvalidUpdateOfTypeWithAlerts({
diff --git a/x-pack/plugins/cloud/public/fullstory.ts b/x-pack/plugins/cloud/public/fullstory.ts
index 31e5ec128b9a3..b118688f31ae1 100644
--- a/x-pack/plugins/cloud/public/fullstory.ts
+++ b/x-pack/plugins/cloud/public/fullstory.ts
@@ -12,7 +12,7 @@ export interface FullStoryDeps {
   basePath: IBasePath;
   orgId: string;
   packageInfo: PackageInfo;
-  userIdPromise: Promise<string | undefined>;
+  userId?: string;
 }
 
 interface FullStoryApi {
@@ -24,7 +24,7 @@ export const initializeFullStory = async ({
   basePath,
   orgId,
   packageInfo,
-  userIdPromise,
+  userId,
 }: FullStoryDeps) => {
   // @ts-expect-error
   window._fs_debug = false;
@@ -73,28 +73,23 @@ export const initializeFullStory = async ({
   /* eslint-enable */
 
   // @ts-expect-error
-  const fullstory: FullStoryApi = window.FSKibana;
+  const fullStory: FullStoryApi = window.FSKibana;
+
+  try {
+    // This needs to be called syncronously to be sure that we populate the user ID soon enough to make sessions merging
+    // across domains work
+    if (!userId) return;
+    // Do the hashing here to keep it at clear as possible in our source code that we do not send literal user IDs
+    const hashedId = sha256(userId.toString());
+    fullStory.identify(hashedId);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(`[cloud.full_story] Could not call FS.identify due to error: ${e.toString()}`, e);
+  }
 
   // Record an event that Kibana was opened so we can easily search for sessions that use Kibana
-  // @ts-expect-error
-  window.FSKibana.event('Loaded Kibana', {
+  fullStory.event('Loaded Kibana', {
+    // `str` suffix is required, see docs: https://help.fullstory.com/hc/en-us/articles/360020623234
     kibana_version_str: packageInfo.version,
   });
-
-  // Use a promise here so we don't have to wait to retrieve the user to start recording the session
-  userIdPromise
-    .then((userId) => {
-      if (!userId) return;
-      // Do the hashing here to keep it at clear as possible in our source code that we do not send literal user IDs
-      const hashedId = sha256(userId.toString());
-      // @ts-expect-error
-      window.FSKibana.identify(hashedId);
-    })
-    .catch((e) => {
-      // eslint-disable-next-line no-console
-      console.error(
-        `[cloud.full_story] Could not call FS.identify due to error: ${e.toString()}`,
-        e
-      );
-    });
 };
diff --git a/x-pack/plugins/cloud/public/plugin.test.ts b/x-pack/plugins/cloud/public/plugin.test.ts
index af4d3c4c9005d..264ae61c050e8 100644
--- a/x-pack/plugins/cloud/public/plugin.test.ts
+++ b/x-pack/plugins/cloud/public/plugin.test.ts
@@ -63,16 +63,11 @@ describe('Cloud Plugin', () => {
         });
 
         expect(initializeFullStoryMock).toHaveBeenCalled();
-        const {
-          basePath,
-          orgId,
-          packageInfo,
-          userIdPromise,
-        } = initializeFullStoryMock.mock.calls[0][0];
+        const { basePath, orgId, packageInfo, userId } = initializeFullStoryMock.mock.calls[0][0];
         expect(basePath.prepend).toBeDefined();
         expect(orgId).toEqual('foo');
         expect(packageInfo).toEqual(initContext.env.packageInfo);
-        expect(await userIdPromise).toEqual('1234');
+        expect(userId).toEqual('1234');
       });
 
       it('passes undefined user ID when security is not available', async () => {
@@ -82,9 +77,9 @@ describe('Cloud Plugin', () => {
         });
 
         expect(initializeFullStoryMock).toHaveBeenCalled();
-        const { orgId, userIdPromise } = initializeFullStoryMock.mock.calls[0][0];
+        const { orgId, userId } = initializeFullStoryMock.mock.calls[0][0];
         expect(orgId).toEqual('foo');
-        expect(await userIdPromise).toEqual(undefined);
+        expect(userId).toEqual(undefined);
       });
 
       it('does not call initializeFullStory when enabled=false', async () => {
diff --git a/x-pack/plugins/cloud/public/plugin.ts b/x-pack/plugins/cloud/public/plugin.ts
index 68dece1bc5d3d..98017d09ef807 100644
--- a/x-pack/plugins/cloud/public/plugin.ts
+++ b/x-pack/plugins/cloud/public/plugin.ts
@@ -166,16 +166,21 @@ export class CloudPlugin implements Plugin<CloudSetup> {
     }
 
     // Keep this import async so that we do not load any FullStory code into the browser when it is disabled.
-    const { initializeFullStory } = await import('./fullstory');
+    const fullStoryChunkPromise = import('./fullstory');
     const userIdPromise: Promise<string | undefined> = security
       ? loadFullStoryUserId({ getCurrentUser: security.authc.getCurrentUser })
       : Promise.resolve(undefined);
 
+    const [{ initializeFullStory }, userId] = await Promise.all([
+      fullStoryChunkPromise,
+      userIdPromise,
+    ]);
+
     initializeFullStory({
       basePath,
       orgId,
       packageInfo: this.initializerContext.env.packageInfo,
-      userIdPromise,
+      userId,
     });
   }
 }
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss
index f57abbbe6396b..02a8766b3d24c 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss
+++ b/x-pack/plugins/data_visualizer/public/application/common/components/_index.scss
@@ -1,4 +1,3 @@
 @import 'embedded_map/index';
-@import 'experimental_badge/index';
 @import 'stats_table/index';
 @import 'top_values/top_values';
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss
deleted file mode 100644
index 8b21620542ff7..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_experimental_badge.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.experimental-badge.euiBetaBadge {
-  font-size: 10px;
-  vertical-align: middle;
-  margin-bottom: 5px;
-  padding: 0 20px;
-  line-height: 20px;
-}
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss
deleted file mode 100644
index 9e25affd5e5f6..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'experimental_badge'
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx b/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx
deleted file mode 100644
index 9c39ee54a2a86..0000000000000
--- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/experimental_badge.tsx
+++ /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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { FormattedMessage } from '@kbn/i18n/react';
-import React, { FC } from 'react';
-
-import { EuiBetaBadge } from '@elastic/eui';
-
-export const ExperimentalBadge: FC<{ tooltipContent: string }> = ({ tooltipContent }) => {
-  return (
-    <span>
-      <EuiBetaBadge
-        className="experimental-badge"
-        label={
-          <FormattedMessage
-            id="xpack.dataVisualizer.experimentalBadge.experimentalLabel"
-            defaultMessage="Experimental"
-          />
-        }
-        tooltipContent={tooltipContent}
-      />
-    </span>
-  );
-};
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
index 86b869fe06fa1..7b091e699b617 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/about_panel/welcome_content.tsx
@@ -7,30 +7,12 @@
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { FC } from 'react';
-import { i18n } from '@kbn/i18n';
 
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiLink,
-  EuiSpacer,
-  EuiText,
-  EuiTitle,
-} from '@elastic/eui';
-
-import { ExperimentalBadge } from '../../../common/components/experimental_badge';
+import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
 
 import { useDataVisualizerKibana } from '../../../kibana_context';
 
 export const WelcomeContent: FC = () => {
-  const toolTipContent = i18n.translate(
-    'xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip',
-    {
-      defaultMessage: "Experimental feature. We'd love to hear your feedback.",
-    }
-  );
-
   const {
     services: {
       fileUpload: { getMaxBytesFormatted },
@@ -48,10 +30,7 @@ export const WelcomeContent: FC = () => {
           <h1>
             <FormattedMessage
               id="xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle"
-              defaultMessage="Visualize data from a log file&nbsp;{experimentalBadge}"
-              values={{
-                experimentalBadge: <ExperimentalBadge tooltipContent={toolTipContent} />,
-              }}
+              defaultMessage="Visualize data from a log file"
             />
           </h1>
         </EuiTitle>
@@ -132,25 +111,6 @@ export const WelcomeContent: FC = () => {
             />
           </p>
         </EuiText>
-        <EuiSpacer size="s" />
-        <EuiText>
-          <p>
-            <FormattedMessage
-              id="xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription"
-              defaultMessage="This feature is experimental. Got feedback? Please create an issue in&nbsp;{githubLink}."
-              values={{
-                githubLink: (
-                  <EuiLink
-                    href="https://github.com/elastic/kibana/issues/new/choose"
-                    target="_blank"
-                  >
-                    GitHub
-                  </EuiLink>
-                ),
-              }}
-            />
-          </p>
-        </EuiText>
       </EuiFlexItem>
     </EuiFlexGroup>
   );
diff --git a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js
index 74a3638f555d0..232a32c75dc29 100644
--- a/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js
+++ b/x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_view/import_view.js
@@ -31,7 +31,6 @@ import {
   addCombinedFieldsToMappings,
   getDefaultCombinedFields,
 } from '../../../common/components/combined_fields';
-import { ExperimentalBadge } from '../../../common/components/experimental_badge';
 
 const DEFAULT_TIME_FIELD = '@timestamp';
 const DEFAULT_INDEX_SETTINGS = { number_of_shards: 1 };
@@ -510,15 +509,6 @@ export class ImportView extends Component {
                   id="xpack.dataVisualizer.file.importView.importDataTitle"
                   defaultMessage="Import data"
                 />
-                &nbsp;
-                <ExperimentalBadge
-                  tooltipContent={
-                    <FormattedMessage
-                      id="xpack.dataVisualizer.file.importView.experimentalFeatureTooltip"
-                      defaultMessage="Experimental feature. We'd love to hear your feedback."
-                    />
-                  }
-                />
               </h2>
             </EuiTitle>
 
diff --git a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx
index f064cf1e72f18..1dbbe937c23cf 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/components/search_bar.tsx
@@ -98,6 +98,7 @@ export const SearchBar: React.FunctionComponent<Props> = ({
       }}
       submitOnBlur
       isClearable
+      autoSubmit
     />
   );
 };
diff --git a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
index ecc538bd95e2a..d8f13da64257b 100644
--- a/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
+++ b/x-pack/plugins/fleet/public/applications/fleet/sections/agent_policy/components/actions_menu.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { memo, useState, useMemo } from 'react';
+import React, { memo, useState, useMemo, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiContextMenuItem, EuiPortal } from '@elastic/eui';
 
@@ -36,6 +36,15 @@ export const AgentPolicyActionMenu = memo<{
       enrollmentFlyoutOpenByDefault
     );
 
+    const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+
+    const onContextMenuChange = useCallback(
+      (open: boolean) => {
+        setIsContextMenuOpen(open);
+      },
+      [setIsContextMenuOpen]
+    );
+
     const onClose = useMemo(() => {
       if (onCancelEnrollment) {
         return onCancelEnrollment;
@@ -50,7 +59,10 @@ export const AgentPolicyActionMenu = memo<{
           const viewPolicyItem = (
             <EuiContextMenuItem
               icon="inspect"
-              onClick={() => setIsYamlFlyoutOpen(!isYamlFlyoutOpen)}
+              onClick={() => {
+                setIsContextMenuOpen(false);
+                setIsYamlFlyoutOpen(!isYamlFlyoutOpen);
+              }}
               key="viewPolicy"
             >
               <FormattedMessage
@@ -66,7 +78,10 @@ export const AgentPolicyActionMenu = memo<{
                 <EuiContextMenuItem
                   disabled={!hasWriteCapabilities}
                   icon="plusInCircle"
-                  onClick={() => setIsEnrollmentFlyoutOpen(true)}
+                  onClick={() => {
+                    setIsContextMenuOpen(false);
+                    setIsEnrollmentFlyoutOpen(true);
+                  }}
                   key="enrollAgents"
                 >
                   <FormattedMessage
@@ -79,6 +94,7 @@ export const AgentPolicyActionMenu = memo<{
                   disabled={!hasWriteCapabilities}
                   icon="copy"
                   onClick={() => {
+                    setIsContextMenuOpen(false);
                     copyAgentPolicyPrompt(agentPolicy, onCopySuccess);
                   }}
                   key="copyPolicy"
@@ -105,6 +121,8 @@ export const AgentPolicyActionMenu = memo<{
                 </EuiPortal>
               )}
               <ContextMenuActions
+                isOpen={isContextMenuOpen}
+                onChange={onContextMenuChange}
                 button={
                   fullButton
                     ? {
diff --git a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx
index 43db5657b0615..fc2966697418a 100644
--- a/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx
+++ b/x-pack/plugins/fleet/public/applications/integrations/hooks/use_local_search.tsx
@@ -5,19 +5,20 @@
  * 2.0.
  */
 
-import { Search as LocalSearch } from 'js-search';
+import { Search as LocalSearch, AllSubstringsIndexStrategy } from 'js-search';
 import { useEffect, useRef } from 'react';
 
 import type { PackageList } from '../../../types';
 
 export const searchIdField = 'id';
-export const fieldsToSearch = ['description', 'name', 'title'];
+export const fieldsToSearch = ['name', 'title'];
 
 export function useLocalSearch(packageList: PackageList) {
   const localSearchRef = useRef<LocalSearch | null>(null);
 
   useEffect(() => {
     const localSearch = new LocalSearch(searchIdField);
+    localSearch.indexStrategy = new AllSubstringsIndexStrategy();
     fieldsToSearch.forEach((field) => localSearch.addIndex(field));
     localSearch.addDocuments(packageList);
     localSearchRef.current = localSearch;
diff --git a/x-pack/plugins/infra/common/constants.ts b/x-pack/plugins/infra/common/constants.ts
index 5361434302a7d..9362293fce82f 100644
--- a/x-pack/plugins/infra/common/constants.ts
+++ b/x-pack/plugins/infra/common/constants.ts
@@ -9,3 +9,5 @@ export const DEFAULT_SOURCE_ID = 'default';
 export const METRICS_INDEX_PATTERN = 'metrics-*,metricbeat-*';
 export const LOGS_INDEX_PATTERN = 'logs-*,filebeat-*,kibana_sample_data_logs*';
 export const TIMESTAMP_FIELD = '@timestamp';
+export const METRICS_APP = 'metrics';
+export const LOGS_APP = 'logs';
diff --git a/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
index c3327dc3fe85d..cf84ea40d64cc 100644
--- a/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/common/components/metrics_alert_dropdown.tsx
@@ -40,7 +40,7 @@ export const MetricsAlertDropdown = () => {
       }),
       items: [
         {
-          name: i18n.translate('xpack.infra.alerting.createInventoryAlertButton', {
+          name: i18n.translate('xpack.infra.alerting.createInventoryRuleButton', {
             defaultMessage: 'Create inventory rule',
           }),
           onClick: () => setVisibleFlyoutType('inventory'),
@@ -58,7 +58,7 @@ export const MetricsAlertDropdown = () => {
       }),
       items: [
         {
-          name: i18n.translate('xpack.infra.alerting.createThresholdAlertButton', {
+          name: i18n.translate('xpack.infra.alerting.createThresholdRuleButton', {
             defaultMessage: 'Create threshold rule',
           }),
           onClick: () => setVisibleFlyoutType('threshold'),
@@ -75,7 +75,7 @@ export const MetricsAlertDropdown = () => {
 
   const manageAlertsMenuItem = useMemo(
     () => ({
-      name: i18n.translate('xpack.infra.alerting.manageAlerts', {
+      name: i18n.translate('xpack.infra.alerting.manageRules', {
         defaultMessage: 'Manage rules',
       }),
       icon: 'tableOfContents',
@@ -141,7 +141,10 @@ export const MetricsAlertDropdown = () => {
             iconType={'arrowDown'}
             onClick={openPopover}
           >
-            <FormattedMessage id="xpack.infra.alerting.alertsButton" defaultMessage="Alerts" />
+            <FormattedMessage
+              id="xpack.infra.alerting.alertsButton"
+              defaultMessage="Alerts and rules"
+            />
           </EuiButtonEmpty>
         }
         isOpen={popoverOpen}
diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
index c1733d4af0589..f3481cab73360 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/alert_dropdown.tsx
@@ -90,7 +90,10 @@ export const AlertDropdown = () => {
             iconType={'arrowDown'}
             onClick={openPopover}
           >
-            <FormattedMessage id="xpack.infra.alerting.logs.alertsButton" defaultMessage="Alerts" />
+            <FormattedMessage
+              id="xpack.infra.alerting.logs.alertsButton"
+              defaultMessage="Alerts and rules"
+            />
           </EuiButtonEmpty>
         }
         isOpen={popoverOpen}
diff --git a/x-pack/plugins/infra/public/components/header/header.tsx b/x-pack/plugins/infra/public/components/header/header.tsx
deleted file mode 100644
index 6196a0b117879..0000000000000
--- a/x-pack/plugins/infra/public/components/header/header.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { useCallback, useEffect } from 'react';
-import { i18n } from '@kbn/i18n';
-import { ChromeBreadcrumb } from 'src/core/public';
-import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
-
-interface HeaderProps {
-  breadcrumbs?: ChromeBreadcrumb[];
-  readOnlyBadge?: boolean;
-}
-
-export const Header = ({ breadcrumbs = [], readOnlyBadge = false }: HeaderProps) => {
-  const chrome = useKibana().services.chrome;
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const badge = readOnlyBadge
-    ? {
-        text: i18n.translate('xpack.infra.header.badge.readOnly.text', {
-          defaultMessage: 'Read only',
-        }),
-        tooltip: i18n.translate('xpack.infra.header.badge.readOnly.tooltip', {
-          defaultMessage: 'Unable to change source configuration',
-        }),
-        iconType: 'glasses',
-      }
-    : undefined;
-
-  const setBreadcrumbs = useCallback(() => {
-    return chrome?.setBreadcrumbs(breadcrumbs || []);
-  }, [breadcrumbs, chrome]);
-
-  const setBadge = useCallback(() => {
-    return chrome?.setBadge(badge);
-  }, [badge, chrome]);
-
-  useEffect(() => {
-    setBreadcrumbs();
-    setBadge();
-  }, [setBreadcrumbs, setBadge]);
-
-  useEffect(() => {
-    setBreadcrumbs();
-  }, [breadcrumbs, setBreadcrumbs]);
-
-  useEffect(() => {
-    setBadge();
-  }, [badge, setBadge]);
-
-  return null;
-};
diff --git a/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts b/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts
new file mode 100644
index 0000000000000..32127f21b75f5
--- /dev/null
+++ b/x-pack/plugins/infra/public/hooks/use_breadcrumbs.ts
@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ChromeBreadcrumb } from 'kibana/public';
+import { useEffect } from 'react';
+import { observabilityTitle } from '../translations';
+import { useKibanaContextForPlugin } from './use_kibana';
+import { useLinkProps } from './use_link_props';
+
+type AppId = 'logs' | 'metrics';
+
+export const useBreadcrumbs = (app: AppId, appTitle: string, extraCrumbs: ChromeBreadcrumb[]) => {
+  const {
+    services: { chrome },
+  } = useKibanaContextForPlugin();
+
+  const observabilityLinkProps = useLinkProps({ app: 'observability-overview' });
+  const appLinkProps = useLinkProps({ app });
+
+  useEffect(() => {
+    chrome?.setBreadcrumbs?.([
+      {
+        ...observabilityLinkProps,
+        text: observabilityTitle,
+      },
+      {
+        ...appLinkProps,
+        text: appTitle,
+      },
+      ...extraCrumbs,
+    ]);
+  }, [appLinkProps, appTitle, chrome, extraCrumbs, observabilityLinkProps]);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx
new file mode 100644
index 0000000000000..e00e5b4818ba6
--- /dev/null
+++ b/x-pack/plugins/infra/public/hooks/use_logs_breadcrumbs.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { useBreadcrumbs } from './use_breadcrumbs';
+import { LOGS_APP } from '../../common/constants';
+import { logsTitle } from '../translations';
+
+export const useLogsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
+  useBreadcrumbs(LOGS_APP, logsTitle, extraCrumbs);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx b/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx
new file mode 100644
index 0000000000000..e55f65a97b63e
--- /dev/null
+++ b/x-pack/plugins/infra/public/hooks/use_metrics_breadcrumbs.tsx
@@ -0,0 +1,15 @@
+/*
+ * 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 { ChromeBreadcrumb } from 'kibana/public';
+import { useBreadcrumbs } from './use_breadcrumbs';
+import { METRICS_APP } from '../../common/constants';
+import { metricsTitle } from '../translations';
+
+export const useMetricsBreadcrumbs = (extraCrumbs: ChromeBreadcrumb[]) => {
+  useBreadcrumbs(METRICS_APP, metricsTitle, extraCrumbs);
+};
diff --git a/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx b/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx
new file mode 100644
index 0000000000000..a0b0558e0393d
--- /dev/null
+++ b/x-pack/plugins/infra/public/hooks/use_readonly_badge.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 { useEffect } from 'react';
+import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../src/plugins/kibana_react/public';
+
+export const useReadOnlyBadge = (isReadOnly = false) => {
+  const chrome = useKibana().services.chrome;
+
+  useEffect(() => {
+    chrome?.setBadge(
+      isReadOnly
+        ? {
+            text: i18n.translate('xpack.infra.header.badge.readOnly.text', {
+              defaultMessage: 'Read only',
+            }),
+            tooltip: i18n.translate('xpack.infra.header.badge.readOnly.tooltip', {
+              defaultMessage: 'Unable to change source configuration',
+            }),
+            iconType: 'glasses',
+          }
+        : undefined
+    );
+  }, [chrome, isReadOnly]);
+
+  return null;
+};
diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx
index 6b6eaf98b1db6..18cb2a14a9214 100644
--- a/x-pack/plugins/infra/public/pages/error.tsx
+++ b/x-pack/plugins/infra/public/pages/error.tsx
@@ -18,7 +18,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
 import { euiStyled } from '../../../../../src/plugins/kibana_react/common';
-import { Header } from '../components/header';
 import { ColumnarPage, PageContent } from '../components/page';
 
 const DetailPageContent = euiStyled(PageContent)`
@@ -33,7 +32,6 @@ interface Props {
 export const Error: React.FC<Props> = ({ message }) => {
   return (
     <ColumnarPage>
-      <Header />
       <DetailPageContent>
         <ErrorPageBody message={message} />
       </DetailPageContent>
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx
index 64dbcbdfe2258..34634b194cb85 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page.tsx
@@ -7,10 +7,18 @@
 
 import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { LogEntryCategoriesPageContent } from './page_content';
 import { LogEntryCategoriesPageProviders } from './page_providers';
+import { logCategoriesTitle } from '../../../translations';
 
 export const LogEntryCategoriesPage = () => {
+  useLogsBreadcrumbs([
+    {
+      text: logCategoriesTitle,
+    },
+  ]);
+
   return (
     <EuiErrorBoundary>
       <LogEntryCategoriesPageProviders>
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx
index ff4cba731b616..94950b24b1a94 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page.tsx
@@ -9,8 +9,15 @@ import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { LogEntryRatePageContent } from './page_content';
 import { LogEntryRatePageProviders } from './page_providers';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
+import { anomaliesTitle } from '../../../translations';
 
 export const LogEntryRatePage = () => {
+  useLogsBreadcrumbs([
+    {
+      text: anomaliesTitle,
+    },
+  ]);
   return (
     <EuiErrorBoundary>
       <LogEntryRatePageProviders>
diff --git a/x-pack/plugins/infra/public/pages/logs/page_content.tsx b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
index c7b145b4b0143..8175a95f6a064 100644
--- a/x-pack/plugins/infra/public/pages/logs/page_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/page_content.tsx
@@ -14,7 +14,6 @@ import useMount from 'react-use/lib/useMount';
 import { AlertDropdown } from '../../alerting/log_threshold';
 import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
 import { DocumentTitle } from '../../components/document_title';
-import { Header } from '../../components/header';
 import { HelpCenterContent } from '../../components/help_center_content';
 import { useLogSourceContext } from '../../containers/logs/log_source';
 import { RedirectWithQueryParams } from '../../utils/redirect_with_query_params';
@@ -25,6 +24,7 @@ import { StreamPage } from './stream';
 import { HeaderMenuPortal } from '../../../../observability/public';
 import { HeaderActionMenuContext } from '../../utils/header_action_menu_provider';
 import { useLinkProps } from '../../hooks/use_link_props';
+import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 
 export const LogsPageContent: React.FunctionComponent = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -34,6 +34,8 @@ export const LogsPageContent: React.FunctionComponent = () => {
 
   const kibana = useKibana();
 
+  useReadOnlyBadge(!uiCapabilities?.logs?.save);
+
   useMount(() => {
     initialize();
   });
@@ -101,14 +103,6 @@ export const LogsPageContent: React.FunctionComponent = () => {
         </HeaderMenuPortal>
       )}
 
-      <Header
-        breadcrumbs={[
-          {
-            text: pageTitle,
-          },
-        ]}
-        readOnlyBadge={!uiCapabilities?.logs?.save}
-      />
       <Switch>
         <Route path={streamTab.pathname} component={StreamPage} />
         <Route path={anomaliesTab.pathname} component={LogEntryRatePage} />
diff --git a/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx b/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx
index 180949572b086..a765cf074271c 100644
--- a/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/settings/source_configuration_settings.tsx
@@ -18,6 +18,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback, useMemo } from 'react';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { useLogSourceContext } from '../../../containers/logs/log_source';
 import { Prompt } from '../../../utils/navigation_warning_prompt';
@@ -27,10 +28,7 @@ import { NameConfigurationPanel } from './name_configuration_panel';
 import { LogSourceConfigurationFormErrors } from './source_configuration_form_errors';
 import { useLogSourceConfigurationFormState } from './source_configuration_form_state';
 import { LogsPageTemplate } from '../page_template';
-
-const settingsTitle = i18n.translate('xpack.infra.logs.settingsTitle', {
-  defaultMessage: 'Settings',
-});
+import { settingsTitle } from '../../../translations';
 
 export const LogsSettingsPage = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -43,6 +41,12 @@ export const LogsSettingsPage = () => {
     delay: 15000,
   });
 
+  useLogsBreadcrumbs([
+    {
+      text: settingsTitle,
+    },
+  ]);
+
   const {
     sourceConfiguration: source,
     hasFailedLoadingSource,
diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx
index 99b66d2d4ab7b..2ac307570cc97 100644
--- a/x-pack/plugins/infra/public/pages/logs/stream/page.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/stream/page.tsx
@@ -8,13 +8,21 @@
 import { EuiErrorBoundary } from '@elastic/eui';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useLogsBreadcrumbs } from '../../../hooks/use_logs_breadcrumbs';
 import { StreamPageContent } from './page_content';
 import { StreamPageHeader } from './page_header';
 import { LogsPageProviders } from './page_providers';
+import { streamTitle } from '../../../translations';
 
 export const StreamPage = () => {
   useTrackPageview({ app: 'infra_logs', path: 'stream' });
   useTrackPageview({ app: 'infra_logs', path: 'stream', delay: 15000 });
+
+  useLogsBreadcrumbs([
+    {
+      text: streamTitle,
+    },
+  ]);
   return (
     <EuiErrorBoundary>
       <LogsPageProviders>
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index e52d1e90d7efd..045fcb57ae943 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -15,7 +15,7 @@ import { IIndexPattern } from 'src/plugins/data/common';
 import { MetricsSourceConfigurationProperties } from '../../../common/metrics_sources';
 import { DocumentTitle } from '../../components/document_title';
 import { HelpCenterContent } from '../../components/help_center_content';
-import { Header } from '../../components/header';
+import { useReadOnlyBadge } from '../../hooks/use_readonly_badge';
 import {
   MetricsExplorerOptionsContainer,
   DEFAULT_METRICS_EXPLORER_VIEW_STATE,
@@ -56,6 +56,8 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
 
   const kibana = useKibana();
 
+  useReadOnlyBadge(!uiCapabilities?.infrastructure?.save);
+
   const settingsLinkProps = useLinkProps({
     app: 'metrics',
     pathname: 'settings',
@@ -111,17 +113,6 @@ export const InfrastructurePage = ({ match }: RouteComponentProps) => {
                       </EuiFlexGroup>
                     </HeaderMenuPortal>
                   )}
-
-                  <Header
-                    breadcrumbs={[
-                      {
-                        text: i18n.translate('xpack.infra.header.infrastructureTitle', {
-                          defaultMessage: 'Metrics',
-                        }),
-                      },
-                    ]}
-                    readOnlyBadge={!uiCapabilities?.infrastructure?.save}
-                  />
                   <Switch>
                     <Route path={'/inventory'} component={SnapshotPage} />
                     <Route
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
index eb5a3f3f9fee1..7f6d592fce6e6 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/overlay.tsx
@@ -119,7 +119,7 @@ export const NodeContextPopover = ({
                       >
                         <FormattedMessage
                           id="xpack.infra.infra.nodeDetails.createAlertLink"
-                          defaultMessage="Create alert"
+                          defaultMessage="Create inventory rule"
                         />
                       </EuiButtonEmpty>
                     </EuiFlexItem>
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
index ea80bd13e8a4d..46534f278fd45 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/components/waffle/node_context_menu.tsx
@@ -138,8 +138,8 @@ export const NodeContextMenu: React.FC<Props & { theme?: EuiTheme }> = withTheme
     };
 
     const createAlertMenuItem: SectionLinkProps = {
-      label: i18n.translate('xpack.infra.nodeContextMenu.createAlertLink', {
-        defaultMessage: 'Create alert',
+      label: i18n.translate('xpack.infra.nodeContextMenu.createRuleLink', {
+        defaultMessage: 'Create inventory rule',
       }),
       onClick: () => {
         setFlyoutVisible(true);
diff --git a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
index 4fb4b4d4eb0a6..9671699dadbad 100644
--- a/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/inventory_view/index.tsx
@@ -8,7 +8,6 @@
 import { EuiButton, EuiErrorBoundary, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useContext } from 'react';
-
 import { FilterBar } from './components/filter_bar';
 
 import { DocumentTitle } from '../../../components/document_title';
@@ -19,6 +18,7 @@ import { SourceLoadingPage } from '../../../components/source_loading_page';
 import { ViewSourceConfigurationButton } from '../../../components/source_configuration/view_source_configuration_button';
 import { Source } from '../../../containers/metrics_source';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { LayoutView } from './components/layout_view';
 import { useLinkProps } from '../../../hooks/use_link_props';
@@ -28,10 +28,7 @@ import { useWaffleOptionsContext } from './hooks/use_waffle_options';
 import { MetricsPageTemplate } from '../page_template';
 import { euiStyled } from '../../../../../../../src/plugins/kibana_react/common';
 import { APP_WRAPPER_CLASS } from '../../../../../../../src/core/public';
-
-const inventoryTitle = i18n.translate('xpack.infra.metrics.inventoryPageTitle', {
-  defaultMessage: 'Inventory',
-});
+import { inventoryTitle } from '../../../translations';
 
 export const SnapshotPage = () => {
   const uiCapabilities = useKibana().services.application?.capabilities;
@@ -52,6 +49,12 @@ export const SnapshotPage = () => {
     hash: '/tutorial_directory/metrics',
   });
 
+  useMetricsBreadcrumbs([
+    {
+      text: inventoryTitle,
+    },
+  ]);
+
   return (
     <EuiErrorBoundary>
       <DocumentTitle
diff --git a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
index a447989530727..7ec43ef64f4a0 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metric_detail/index.tsx
@@ -9,19 +9,19 @@ import { i18n } from '@kbn/i18n';
 import React, { useContext, useState } from 'react';
 import { EuiTheme, withTheme } from '../../../../../../../src/plugins/kibana_react/common';
 import { DocumentTitle } from '../../../components/document_title';
-import { Header } from '../../../components/header';
 import { withMetricPageProviders } from './page_providers';
 import { useMetadata } from './hooks/use_metadata';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
 import { Source } from '../../../containers/metrics_source';
 import { InfraLoadingPanel } from '../../../components/loading';
 import { findInventoryModel } from '../../../../common/inventory_models';
 import { NavItem } from './lib/side_nav_context';
 import { NodeDetailsPage } from './components/node_details_page';
-import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { InventoryItemType } from '../../../../common/inventory_models/types';
 import { useMetricsTimeContext } from './hooks/use_metrics_time';
 import { useLinkProps } from '../../../hooks/use_link_props';
 import { MetricsPageTemplate } from '../page_template';
+import { inventoryTitle } from '../../../translations';
 
 interface Props {
   theme: EuiTheme | undefined;
@@ -35,7 +35,6 @@ interface Props {
 
 export const MetricDetail = withMetricPageProviders(
   withTheme(({ match }: Props) => {
-    const uiCapabilities = useKibana().services.application?.capabilities;
     const nodeId = match.params.node;
     const nodeType = match.params.type as InventoryItemType;
     const inventoryModel = findInventoryModel(nodeType);
@@ -70,20 +69,20 @@ export const MetricDetail = withMetricPageProviders(
       [sideNav]
     );
 
-    const metricsLinkProps = useLinkProps({
+    const inventoryLinkProps = useLinkProps({
       app: 'metrics',
-      pathname: '/',
+      pathname: '/inventory',
     });
 
-    const breadcrumbs = [
+    useMetricsBreadcrumbs([
       {
-        ...metricsLinkProps,
-        text: i18n.translate('xpack.infra.header.infrastructureTitle', {
-          defaultMessage: 'Metrics',
-        }),
+        ...inventoryLinkProps,
+        text: inventoryTitle,
       },
-      { text: name },
-    ];
+      {
+        text: name,
+      },
+    ]);
 
     if (metadataLoading && !filteredRequiredMetrics.length) {
       return (
@@ -101,7 +100,6 @@ export const MetricDetail = withMetricPageProviders(
 
     return (
       <>
-        <Header breadcrumbs={breadcrumbs} readOnlyBadge={!uiCapabilities?.infrastructure?.save} />
         <DocumentTitle
           title={i18n.translate('xpack.infra.metricDetailPage.documentTitle', {
             defaultMessage: 'Infrastructure | Metrics | {name}',
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
index 8f281bda0229d..005dd5cc8c078 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart_context_menu.tsx
@@ -155,8 +155,8 @@ export const MetricsExplorerChartContextMenu: React.FC<Props> = ({
   const createAlert = uiCapabilities?.infrastructure?.save
     ? [
         {
-          name: i18n.translate('xpack.infra.metricsExplorer.alerts.createAlertButton', {
-            defaultMessage: 'Create alert',
+          name: i18n.translate('xpack.infra.metricsExplorer.alerts.createRuleButton', {
+            defaultMessage: 'Create threshold rule',
           }),
           icon: 'bell',
           onClick() {
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
index c1e5be94acc03..8bf64edcf8970 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/hooks/use_metrics_explorer_options.ts
@@ -99,7 +99,7 @@ export const DEFAULT_CHART_OPTIONS: MetricsExplorerChartOptions = {
 export const DEFAULT_METRICS: MetricsExplorerOptionsMetric[] = [
   {
     aggregation: 'avg',
-    field: 'system.cpu.user.pct',
+    field: 'system.cpu.total.norm.pct',
     color: Color.color0,
   },
   {
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
index 1ecadcac4e287..28e56c8337bf8 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/index.tsx
@@ -11,6 +11,8 @@ import React, { useEffect } from 'react';
 import { IIndexPattern } from 'src/plugins/data/public';
 import { MetricsSourceConfigurationProperties } from '../../../../common/metrics_sources';
 import { useTrackPageview } from '../../../../../observability/public';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
+
 import { DocumentTitle } from '../../../components/document_title';
 import { NoData } from '../../../components/empty_states';
 import { MetricsExplorerCharts } from './components/charts';
@@ -18,16 +20,13 @@ import { MetricsExplorerToolbar } from './components/toolbar';
 import { useMetricsExplorerState } from './hooks/use_metric_explorer_state';
 import { useSavedViewContext } from '../../../containers/saved_view/saved_view';
 import { MetricsPageTemplate } from '../page_template';
+import { metricsExplorerTitle } from '../../../translations';
 
 interface MetricsExplorerPageProps {
   source: MetricsSourceConfigurationProperties;
   derivedIndexPattern: IIndexPattern;
 }
 
-const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsExplorerTitle', {
-  defaultMessage: 'Metrics Explorer',
-});
-
 export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExplorerPageProps) => {
   const {
     loading,
@@ -66,6 +65,12 @@ export const MetricsExplorerPage = ({ source, derivedIndexPattern }: MetricsExpl
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, [loadData, shouldLoadDefault]);
 
+  useMetricsBreadcrumbs([
+    {
+      text: metricsExplorerTitle,
+    },
+  ]);
+
   return (
     <EuiErrorBoundary>
       <DocumentTitle
diff --git a/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx b/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx
index 1066dddad6b5f..7224da4429a36 100644
--- a/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/settings/source_configuration_settings.tsx
@@ -25,18 +25,23 @@ import { IndicesConfigurationPanel } from './indices_configuration_panel';
 import { MLConfigurationPanel } from './ml_configuration_panel';
 import { NameConfigurationPanel } from './name_configuration_panel';
 import { useSourceConfigurationFormState } from './source_configuration_form_state';
+import { useMetricsBreadcrumbs } from '../../../hooks/use_metrics_breadcrumbs';
+import { settingsTitle } from '../../../translations';
+
 import { MetricsPageTemplate } from '../page_template';
 interface SourceConfigurationSettingsProps {
   shouldAllowEdit: boolean;
 }
 
-const settingsTitle = i18n.translate('xpack.infra.metrics.settingsTitle', {
-  defaultMessage: 'Settings',
-});
-
 export const SourceConfigurationSettings = ({
   shouldAllowEdit,
 }: SourceConfigurationSettingsProps) => {
+  useMetricsBreadcrumbs([
+    {
+      text: settingsTitle,
+    },
+  ]);
+
   const {
     createSourceConfiguration,
     source,
diff --git a/x-pack/plugins/infra/public/translations.ts b/x-pack/plugins/infra/public/translations.ts
new file mode 100644
index 0000000000000..4a9b19fde6ef2
--- /dev/null
+++ b/x-pack/plugins/infra/public/translations.ts
@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const observabilityTitle = i18n.translate('xpack.infra.header.observabilityTitle', {
+  defaultMessage: 'Observability',
+});
+
+export const logsTitle = i18n.translate('xpack.infra.header.logsTitle', {
+  defaultMessage: 'Logs',
+});
+
+export const streamTitle = i18n.translate('xpack.infra.logs.index.streamTabTitle', {
+  defaultMessage: 'Stream',
+});
+
+export const anomaliesTitle = i18n.translate('xpack.infra.logs.index.anomaliesTabTitle', {
+  defaultMessage: 'Anomalies',
+});
+
+export const logCategoriesTitle = i18n.translate(
+  'xpack.infra.logs.index.logCategoriesBetaBadgeTitle',
+  {
+    defaultMessage: 'Categories',
+  }
+);
+
+export const settingsTitle = i18n.translate('xpack.infra.logs.index.settingsTabTitle', {
+  defaultMessage: 'Settings',
+});
+
+export const metricsTitle = i18n.translate('xpack.infra.header.infrastructureTitle', {
+  defaultMessage: 'Metrics',
+});
+
+export const inventoryTitle = i18n.translate('xpack.infra.metrics.inventoryPageTitle', {
+  defaultMessage: 'Inventory',
+});
+
+export const metricsExplorerTitle = i18n.translate('xpack.infra.metrics.metricsExplorerTitle', {
+  defaultMessage: 'Metrics Explorer',
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx
index 555ed7a09fe4f..390f8e0191ce9 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date.test.tsx
@@ -95,22 +95,19 @@ describe('Processor: Date', () => {
       component,
     } = testBed;
 
+    // Set required parameters
     form.setInputValue('fieldNameField.input', 'field_1');
 
-    // Set optional parameteres
     await act(async () => {
       find('formatsValueField.input').simulate('change', [{ label: 'ISO8601' }]);
     });
     component.update();
 
-    // Set target field
+    // Set optional parameters
     form.setInputValue('targetField.input', 'target_field');
-
-    // Set locale field
     form.setInputValue('localeField.input', 'SPANISH');
-
-    // Set timezone field.
     form.setInputValue('timezoneField.input', 'EST');
+    form.setInputValue('outputFormatField.input', 'yyyy-MM-dd');
 
     // Save the field with new changes
     await saveNewProcessor();
@@ -122,6 +119,7 @@ describe('Processor: Date', () => {
       target_field: 'target_field',
       locale: 'SPANISH',
       timezone: 'EST',
+      output_format: 'yyyy-MM-dd',
     });
   });
 });
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date_index.test.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date_index.test.tsx
new file mode 100644
index 0000000000000..264db2c5b65c0
--- /dev/null
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/date_index.test.tsx
@@ -0,0 +1,124 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { setup, SetupResult, getProcessorValue } from './processor.helpers';
+
+const DATE_INDEX_TYPE = 'date_index_name';
+
+describe('Processor: Date Index Name', () => {
+  let onUpdate: jest.Mock;
+  let testBed: SetupResult;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+  });
+
+  beforeEach(async () => {
+    onUpdate = jest.fn();
+
+    await act(async () => {
+      testBed = await setup({
+        value: {
+          processors: [],
+        },
+        onFlyoutOpen: jest.fn(),
+        onUpdate,
+      });
+    });
+    testBed.component.update();
+    const {
+      actions: { addProcessor, addProcessorType },
+    } = testBed;
+    // Open the processor flyout
+    addProcessor();
+
+    // Add type (the other fields are not visible until a type is selected)
+    await addProcessorType(DATE_INDEX_TYPE);
+  });
+
+  test('prevents form submission if required fields are not provided', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Click submit button with only the type defined
+    await saveNewProcessor();
+
+    // Expect form error as "field" and "date rounding" are required parameters
+    expect(form.getErrorsMessages()).toEqual([
+      'A field value is required.',
+      'A date rounding value is required.',
+    ]);
+  });
+
+  test('saves with required field and date rounding parameter values', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+    } = testBed;
+
+    // Add "field" value (required)
+    form.setInputValue('fieldNameField.input', '@timestamp');
+
+    // Select second value for date rounding
+    form.setSelectValue('dateRoundingField', 's');
+
+    // Save the field
+    await saveNewProcessor();
+
+    const processors = await getProcessorValue(onUpdate, DATE_INDEX_TYPE);
+    expect(processors[0].date_index_name).toEqual({
+      field: '@timestamp',
+      date_rounding: 's',
+    });
+  });
+
+  test('allows optional parameters to be set', async () => {
+    const {
+      actions: { saveNewProcessor },
+      form,
+      find,
+      component,
+    } = testBed;
+
+    form.setInputValue('fieldNameField.input', 'field_1');
+
+    form.setSelectValue('dateRoundingField', 'd');
+
+    form.setInputValue('indexNamePrefixField.input', 'prefix');
+
+    form.setInputValue('indexNameFormatField.input', 'yyyy-MM');
+
+    await act(async () => {
+      find('dateFormatsField.input').simulate('change', [{ label: 'ISO8601' }]);
+    });
+    component.update();
+
+    form.setInputValue('timezoneField.input', 'GMT');
+
+    form.setInputValue('localeField.input', 'SPANISH');
+    // Save the field with new changes
+    await saveNewProcessor();
+
+    const processors = await getProcessorValue(onUpdate, DATE_INDEX_TYPE);
+    expect(processors[0].date_index_name).toEqual({
+      field: 'field_1',
+      date_rounding: 'd',
+      index_name_format: 'yyyy-MM',
+      index_name_prefix: 'prefix',
+      date_formats: ['ISO8601'],
+      locale: 'SPANISH',
+      timezone: 'GMT',
+    });
+  });
+});
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
index 78bc261aed7df..24e1ddce008ea 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/__jest__/processors/processor.helpers.tsx
@@ -140,6 +140,7 @@ type TestSubject =
   | 'appendValueField.input'
   | 'formatsValueField.input'
   | 'timezoneField.input'
+  | 'outputFormatField.input'
   | 'localeField.input'
   | 'processorTypeSelector.input'
   | 'fieldNameField.input'
@@ -147,8 +148,14 @@ type TestSubject =
   | 'mockCodeEditor'
   | 'tagField.input'
   | 'typeSelectorField'
+  | 'dateRoundingField'
   | 'ignoreMissingSwitch.input'
   | 'ignoreFailureSwitch.input'
+  | 'indexNamePrefixField.input'
+  | 'indexNameFormatField.input'
+  | 'dateFormatsField.input'
+  | 'timezoneField.input'
+  | 'localeField.input'
   | 'ifField.textarea'
   | 'targetField.input'
   | 'targetFieldsField.input'
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx
index b1e42d067e56e..90138757c97aa 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date.tsx
@@ -32,10 +32,20 @@ const fieldsConfig: FieldsConfig = {
     label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel', {
       defaultMessage: 'Formats',
     }),
-    helpText: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText', {
-      defaultMessage:
-        'Expected date formats. Provided formats are applied sequentially. Accepts a Java time pattern, ISO8601, UNIX, UNIX_MS, or TAI64N formats.',
-    }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText"
+        defaultMessage="Expected date formats. Provided formats are applied sequentially. Accepts a Java time pattern or one of the following formats: {allowedFormats}."
+        values={{
+          allowedFormats: (
+            <>
+              <EuiCode>{'ISO8601'}</EuiCode>,<EuiCode>{'UNIX'}</EuiCode>,
+              <EuiCode>{'UNIX_MS'}</EuiCode>,<EuiCode>{'TAI64N'}</EuiCode>
+            </>
+          ),
+        }}
+      />
+    ),
     validations: [
       {
         validator: minLengthField({
@@ -79,6 +89,29 @@ const fieldsConfig: FieldsConfig = {
       />
     ),
   },
+  output_format: {
+    type: FIELD_TYPES.TEXT,
+    serializer: from.emptyStringToUndefined,
+    label: i18n.translate('xpack.ingestPipelines.pipelineEditor.dateForm.outputFormatFieldLabel', {
+      defaultMessage: 'Output format (optional)',
+    }),
+    helpText: (
+      <FormattedMessage
+        id="xpack.ingestPipelines.pipelineEditor.dateForm.outputFormatHelpText"
+        defaultMessage="Format to use when writing the date to {targetField}. Accepts a Java time pattern or one of the following formats: {allowedFormats}. Defaults to {defaultFormat}."
+        values={{
+          targetField: <EuiCode>{'target_field'}</EuiCode>,
+          allowedFormats: (
+            <>
+              <EuiCode>{'ISO8601'}</EuiCode>,<EuiCode>{'UNIX'}</EuiCode>,
+              <EuiCode>{'UNIX_MS'}</EuiCode>,<EuiCode>{'TAI64N'}</EuiCode>
+            </>
+          ),
+          defaultFormat: <EuiCode>{`yyyy-MM-dd'T'HH:mm:ss.SSSXXX`}</EuiCode>,
+        }}
+      />
+    ),
+  },
 };
 
 /**
@@ -126,6 +159,13 @@ export const DateProcessor: FunctionComponent = () => {
         component={Field}
         path="fields.locale"
       />
+
+      <UseField
+        data-test-subj="outputFormatField"
+        config={fieldsConfig.output_format}
+        component={Field}
+        path="fields.output_format"
+      />
     </>
   );
 };
diff --git a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date_index_name.tsx b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date_index_name.tsx
index 5c5b5ff89fd20..d4fb74c73ff0c 100644
--- a/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date_index_name.tsx
+++ b/x-pack/plugins/ingest_pipelines/public/application/components/pipeline_editor/components/processor_form/processors/date_index_name.tsx
@@ -47,7 +47,7 @@ const fieldsConfig: FieldsConfig = {
           i18n.translate(
             'xpack.ingestPipelines.pipelineEditor.dateIndexNameForm.dateRoundingRequiredError',
             {
-              defaultMessage: 'A field value is required.',
+              defaultMessage: 'A date rounding value is required.',
             }
           )
         ),
@@ -160,6 +160,7 @@ export const DateIndexName: FunctionComponent = () => {
         component={SelectField}
         componentProps={{
           euiFieldProps: {
+            'data-test-subj': 'dateRoundingField',
             options: [
               {
                 value: 'y',
@@ -217,26 +218,39 @@ export const DateIndexName: FunctionComponent = () => {
       />
 
       <UseField
+        data-test-subj="indexNamePrefixField"
         config={fieldsConfig.index_name_prefix}
         component={Field}
         path="fields.index_name_prefix"
       />
 
       <UseField
+        data-test-subj="indexNameFormatField"
         config={fieldsConfig.index_name_format}
         component={Field}
         path="fields.index_name_format"
       />
 
       <UseField
+        data-test-subj="dateFormatsField"
         config={fieldsConfig.date_formats}
         component={ComboBoxField}
         path="fields.date_formats"
       />
 
-      <UseField config={fieldsConfig.timezone} component={Field} path="fields.timezone" />
+      <UseField
+        data-test-subj="timezoneField"
+        config={fieldsConfig.timezone}
+        component={Field}
+        path="fields.timezone"
+      />
 
-      <UseField config={fieldsConfig.locale} component={Field} path="fields.locale" />
+      <UseField
+        data-test-subj="localeField"
+        config={fieldsConfig.locale}
+        component={Field}
+        path="fields.locale"
+      />
     </>
   );
 };
diff --git a/x-pack/plugins/lens/public/app_plugin/app.test.tsx b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
index bced8bf7c04fe..1c49527d9eca8 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -13,7 +13,13 @@ import { App } from './app';
 import { LensAppProps, LensAppServices } from './types';
 import { EditorFrameInstance, EditorFrameProps } from '../types';
 import { Document } from '../persistence';
-import { makeDefaultServices, mountWithProvider } from '../mocks';
+import {
+  createMockDatasource,
+  createMockVisualization,
+  DatasourceMock,
+  makeDefaultServices,
+  mountWithProvider,
+} from '../mocks';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
   SavedObjectSaveModal,
@@ -25,7 +31,6 @@ import {
   FilterManager,
   IFieldType,
   IIndexPattern,
-  IndexPattern,
   Query,
 } from '../../../../../src/plugins/data/public';
 import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
@@ -60,17 +65,41 @@ jest.mock('lodash', () => {
 
 // const navigationStartMock = navigationPluginMock.createStartContract();
 
-function createMockFrame(): jest.Mocked<EditorFrameInstance> {
-  return {
-    EditorFrameContainer: jest.fn((props: EditorFrameProps) => <div />),
-  };
-}
-
 const sessionIdSubject = new Subject<string>();
 
 describe('Lens App', () => {
   let defaultDoc: Document;
   let defaultSavedObjectId: string;
+  const mockDatasource: DatasourceMock = createMockDatasource('testDatasource');
+  const mockDatasource2: DatasourceMock = createMockDatasource('testDatasource2');
+  const datasourceMap = {
+    testDatasource2: mockDatasource2,
+    testDatasource: mockDatasource,
+  };
+
+  const mockVisualization = {
+    ...createMockVisualization(),
+    id: 'testVis',
+    visualizationTypes: [
+      {
+        icon: 'empty',
+        id: 'testVis',
+        label: 'TEST1',
+        groupLabel: 'testVisGroup',
+      },
+    ],
+  };
+  const visualizationMap = {
+    testVis: mockVisualization,
+  };
+
+  function createMockFrame(): jest.Mocked<EditorFrameInstance> {
+    return {
+      EditorFrameContainer: jest.fn((props: EditorFrameProps) => <div />),
+      datasourceMap,
+      visualizationMap,
+    };
+  }
 
   const navMenuItems = {
     expectedSaveButton: { emphasize: true, testId: 'lnsApp_saveButton' },
@@ -86,17 +115,19 @@ describe('Lens App', () => {
       redirectToOrigin: jest.fn(),
       onAppLeave: jest.fn(),
       setHeaderActionMenu: jest.fn(),
+      datasourceMap,
+      visualizationMap,
     };
   }
 
   async function mountWith({
     props = makeDefaultProps(),
     services = makeDefaultServices(sessionIdSubject),
-    storePreloadedState,
+    preloadedState,
   }: {
     props?: jest.Mocked<LensAppProps>;
     services?: jest.Mocked<LensAppServices>;
-    storePreloadedState?: Partial<LensAppState>;
+    preloadedState?: Partial<LensAppState>;
   }) {
     const wrappingComponent: React.FC<{
       children: React.ReactNode;
@@ -110,9 +141,11 @@ describe('Lens App', () => {
 
     const { instance, lensStore } = await mountWithProvider(
       <App {...props} />,
-      services.data,
-      storePreloadedState,
-      wrappingComponent
+      {
+        data: services.data,
+        preloadedState,
+      },
+      { wrappingComponent }
     );
 
     const frame = props.editorFrame as ReturnType<typeof createMockFrame>;
@@ -139,8 +172,6 @@ describe('Lens App', () => {
       Array [
         Array [
           Object {
-            "initialContext": undefined,
-            "onError": [Function],
             "showNoDataPopover": [Function],
           },
           Object {},
@@ -164,7 +195,7 @@ describe('Lens App', () => {
 
     instance.update();
     expect(lensStore.getState()).toEqual({
-      app: expect.objectContaining({
+      lens: expect.objectContaining({
         query: { query: '', language: 'lucene' },
         filters: [pinnedFilter],
         resolvedDateRange: {
@@ -177,14 +208,6 @@ describe('Lens App', () => {
     expect(services.data.query.filterManager.getFilters).not.toHaveBeenCalled();
   });
 
-  it('displays errors from the frame in a toast', async () => {
-    const { instance, frame, services } = await mountWith({});
-    const onError = frame.EditorFrameContainer.mock.calls[0][0].onError;
-    onError({ message: 'error' });
-    instance.update();
-    expect(services.notifications.toasts.addDanger).toHaveBeenCalled();
-  });
-
   describe('breadcrumbs', () => {
     const breadcrumbDocSavedObjectId = defaultSavedObjectId;
     const breadcrumbDoc = ({
@@ -237,7 +260,7 @@ describe('Lens App', () => {
       const { instance, lensStore } = await mountWith({
         props,
         services,
-        storePreloadedState: {
+        preloadedState: {
           isLinkedToOriginatingApp: true,
         },
       });
@@ -275,8 +298,8 @@ describe('Lens App', () => {
   });
 
   describe('persistence', () => {
-    it('loads a document and uses query and filters if initial input is provided', async () => {
-      const { instance, lensStore, services } = await mountWith({});
+    it('passes query and indexPatterns to TopNavMenu', async () => {
+      const { instance, lensStore, services } = await mountWith({ preloadedState: {} });
       const document = ({
         savedObjectId: defaultSavedObjectId,
         state: {
@@ -290,8 +313,6 @@ describe('Lens App', () => {
         lensStore.dispatch(
           setState({
             query: ('fake query' as unknown) as Query,
-            indexPatternsForTopNav: ([{ id: '1' }] as unknown) as IndexPattern[],
-            lastKnownDoc: document,
             persistedDoc: document,
           })
         );
@@ -301,7 +322,7 @@ describe('Lens App', () => {
       expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith(
         expect.objectContaining({
           query: 'fake query',
-          indexPatterns: [{ id: '1' }],
+          indexPatterns: [{ id: 'mockip' }],
         }),
         {}
       );
@@ -332,16 +353,11 @@ describe('Lens App', () => {
       }
 
       async function save({
-        lastKnownDoc = {
-          references: [],
-          state: {
-            filters: [],
-          },
-        },
+        preloadedState,
         initialSavedObjectId,
         ...saveProps
       }: SaveProps & {
-        lastKnownDoc?: object;
+        preloadedState?: Partial<LensAppState>;
         initialSavedObjectId?: string;
       }) {
         const props = {
@@ -366,18 +382,14 @@ describe('Lens App', () => {
           },
         } as jest.ResolvedValue<Document>);
 
-        const { frame, instance, lensStore } = await mountWith({ services, props });
-
-        act(() => {
-          lensStore.dispatch(
-            setState({
-              isSaveable: true,
-              lastKnownDoc: { savedObjectId: initialSavedObjectId, ...lastKnownDoc } as Document,
-            })
-          );
+        const { frame, instance, lensStore } = await mountWith({
+          services,
+          props,
+          preloadedState: {
+            isSaveable: true,
+            ...preloadedState,
+          },
         });
-
-        instance.update();
         expect(getButton(instance).disableButton).toEqual(false);
         await act(async () => {
           testSave(instance, { ...saveProps });
@@ -399,7 +411,6 @@ describe('Lens App', () => {
         act(() => {
           lensStore.dispatch(
             setState({
-              lastKnownDoc: ({ savedObjectId: 'will save this' } as unknown) as Document,
               isSaveable: true,
             })
           );
@@ -415,7 +426,6 @@ describe('Lens App', () => {
           lensStore.dispatch(
             setState({
               isSaveable: true,
-              lastKnownDoc: ({ savedObjectId: 'will save this' } as unknown) as Document,
             })
           );
         });
@@ -455,7 +465,7 @@ describe('Lens App', () => {
         const { instance } = await mountWith({
           props,
           services,
-          storePreloadedState: {
+          preloadedState: {
             isLinkedToOriginatingApp: true,
           },
         });
@@ -483,7 +493,7 @@ describe('Lens App', () => {
 
         const { instance, services } = await mountWith({
           props,
-          storePreloadedState: {
+          preloadedState: {
             isLinkedToOriginatingApp: true,
           },
         });
@@ -540,6 +550,7 @@ describe('Lens App', () => {
           initialSavedObjectId: defaultSavedObjectId,
           newCopyOnSave: true,
           newTitle: 'hello there',
+          preloadedState: { persistedDoc: defaultDoc },
         });
         expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -559,10 +570,11 @@ describe('Lens App', () => {
       });
 
       it('saves existing docs', async () => {
-        const { props, services, instance, lensStore } = await save({
+        const { props, services, instance } = await save({
           initialSavedObjectId: defaultSavedObjectId,
           newCopyOnSave: false,
           newTitle: 'hello there',
+          preloadedState: { persistedDoc: defaultDoc },
         });
         expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith(
           expect.objectContaining({
@@ -576,22 +588,6 @@ describe('Lens App', () => {
         await act(async () => {
           instance.setProps({ initialInput: { savedObjectId: defaultSavedObjectId } });
         });
-
-        expect(lensStore.dispatch).toHaveBeenCalledWith({
-          payload: {
-            lastKnownDoc: expect.objectContaining({
-              savedObjectId: defaultSavedObjectId,
-              title: 'hello there',
-            }),
-            persistedDoc: expect.objectContaining({
-              savedObjectId: defaultSavedObjectId,
-              title: 'hello there',
-            }),
-            isLinkedToOriginatingApp: false,
-          },
-          type: 'app/setState',
-        });
-
         expect(services.notifications.toasts.addSuccess).toHaveBeenCalledWith(
           "Saved 'hello there'"
         );
@@ -602,18 +598,13 @@ describe('Lens App', () => {
         services.attributeService.wrapAttributes = jest
           .fn()
           .mockRejectedValue({ message: 'failed' });
-        const { instance, props, lensStore } = await mountWith({ services });
-        act(() => {
-          lensStore.dispatch(
-            setState({
-              isSaveable: true,
-              lastKnownDoc: ({ id: undefined } as unknown) as Document,
-            })
-          );
+        const { instance, props } = await mountWith({
+          services,
+          preloadedState: {
+            isSaveable: true,
+          },
         });
 
-        instance.update();
-
         await act(async () => {
           testSave(instance, { newCopyOnSave: false, newTitle: 'hello there' });
         });
@@ -655,22 +646,19 @@ describe('Lens App', () => {
           initialSavedObjectId: defaultSavedObjectId,
           newCopyOnSave: false,
           newTitle: 'hello there2',
-          lastKnownDoc: {
-            expression: 'kibana 3',
-            state: {
-              filters: [pinned, unpinned],
-            },
+          preloadedState: {
+            persistedDoc: defaultDoc,
+            filters: [pinned, unpinned],
           },
         });
         expect(services.attributeService.wrapAttributes).toHaveBeenCalledWith(
-          {
+          expect.objectContaining({
             savedObjectId: defaultSavedObjectId,
             title: 'hello there2',
-            expression: 'kibana 3',
-            state: {
+            state: expect.objectContaining({
               filters: [unpinned],
-            },
-          },
+            }),
+          }),
           true,
           { id: '5678', savedObjectId: defaultSavedObjectId }
         );
@@ -681,17 +669,13 @@ describe('Lens App', () => {
         services.attributeService.wrapAttributes = jest
           .fn()
           .mockReturnValue(Promise.resolve({ savedObjectId: '123' }));
-        const { instance, lensStore } = await mountWith({ services });
-        await act(async () => {
-          lensStore.dispatch(
-            setState({
-              isSaveable: true,
-              lastKnownDoc: ({ savedObjectId: '123' } as unknown) as Document,
-            })
-          );
+        const { instance } = await mountWith({
+          services,
+          preloadedState: {
+            isSaveable: true,
+            persistedDoc: ({ savedObjectId: '123' } as unknown) as Document,
+          },
         });
-
-        instance.update();
         await act(async () => {
           instance.setProps({ initialInput: { savedObjectId: '123' } });
           getButton(instance).run(instance.getDOMNode());
@@ -716,17 +700,7 @@ describe('Lens App', () => {
       });
 
       it('does not show the copy button on first save', async () => {
-        const { instance, lensStore } = await mountWith({});
-        await act(async () => {
-          lensStore.dispatch(
-            setState({
-              isSaveable: true,
-              lastKnownDoc: ({} as unknown) as Document,
-            })
-          );
-        });
-
-        instance.update();
+        const { instance } = await mountWith({ preloadedState: { isSaveable: true } });
         await act(async () => getButton(instance).run(instance.getDOMNode()));
         instance.update();
         expect(instance.find(SavedObjectSaveModal).prop('showCopyOnSave')).toEqual(false);
@@ -744,33 +718,18 @@ describe('Lens App', () => {
     }
 
     it('should be disabled when no data is available', async () => {
-      const { instance, lensStore } = await mountWith({});
-      await act(async () => {
-        lensStore.dispatch(
-          setState({
-            isSaveable: true,
-            lastKnownDoc: ({} as unknown) as Document,
-          })
-        );
-      });
-      instance.update();
+      const { instance } = await mountWith({ preloadedState: { isSaveable: true } });
       expect(getButton(instance).disableButton).toEqual(true);
     });
 
     it('should disable download when not saveable', async () => {
-      const { instance, lensStore } = await mountWith({});
-
-      await act(async () => {
-        lensStore.dispatch(
-          setState({
-            lastKnownDoc: ({} as unknown) as Document,
-            isSaveable: false,
-            activeData: { layer1: { type: 'datatable', columns: [], rows: [] } },
-          })
-        );
+      const { instance } = await mountWith({
+        preloadedState: {
+          isSaveable: false,
+          activeData: { layer1: { type: 'datatable', columns: [], rows: [] } },
+        },
       });
 
-      instance.update();
       expect(getButton(instance).disableButton).toEqual(true);
     });
 
@@ -784,17 +743,13 @@ describe('Lens App', () => {
         },
       };
 
-      const { instance, lensStore } = await mountWith({ services });
-      await act(async () => {
-        lensStore.dispatch(
-          setState({
-            lastKnownDoc: ({} as unknown) as Document,
-            isSaveable: true,
-            activeData: { layer1: { type: 'datatable', columns: [], rows: [] } },
-          })
-        );
+      const { instance } = await mountWith({
+        services,
+        preloadedState: {
+          isSaveable: true,
+          activeData: { layer1: { type: 'datatable', columns: [], rows: [] } },
+        },
       });
-      instance.update();
       expect(getButton(instance).disableButton).toEqual(false);
     });
   });
@@ -812,7 +767,7 @@ describe('Lens App', () => {
       );
 
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           query: { query: '', language: 'lucene' },
           resolvedDateRange: {
             fromDate: '2021-01-10T04:00:00.000Z',
@@ -822,49 +777,6 @@ describe('Lens App', () => {
       });
     });
 
-    it('updates the index patterns when the editor frame is changed', async () => {
-      const { instance, lensStore, services } = await mountWith({});
-      expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith(
-        expect.objectContaining({
-          indexPatterns: [],
-        }),
-        {}
-      );
-      await act(async () => {
-        lensStore.dispatch(
-          setState({
-            indexPatternsForTopNav: [{ id: '1' }] as IndexPattern[],
-            lastKnownDoc: ({} as unknown) as Document,
-            isSaveable: true,
-          })
-        );
-      });
-      instance.update();
-      expect(services.navigation.ui.TopNavMenu).toHaveBeenCalledWith(
-        expect.objectContaining({
-          indexPatterns: [{ id: '1' }],
-        }),
-        {}
-      );
-      // Do it again to verify that the dirty checking is done right
-      await act(async () => {
-        lensStore.dispatch(
-          setState({
-            indexPatternsForTopNav: [{ id: '2' }] as IndexPattern[],
-            lastKnownDoc: ({} as unknown) as Document,
-            isSaveable: true,
-          })
-        );
-      });
-      instance.update();
-      expect(services.navigation.ui.TopNavMenu).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          indexPatterns: [{ id: '2' }],
-        }),
-        {}
-      );
-    });
-
     it('updates the editor frame when the user changes query or time in the search bar', async () => {
       const { instance, services, lensStore } = await mountWith({});
       (services.data.query.timefilter.timefilter.calculateBounds as jest.Mock).mockReturnValue({
@@ -892,7 +804,7 @@ describe('Lens App', () => {
       });
 
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           query: { query: 'new', language: 'lucene' },
           resolvedDateRange: {
             fromDate: '2021-01-09T04:00:00.000Z',
@@ -907,7 +819,7 @@ describe('Lens App', () => {
       const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern;
       const field = ({ name: 'myfield' } as unknown) as IFieldType;
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           filters: [],
         }),
       });
@@ -918,7 +830,7 @@ describe('Lens App', () => {
       );
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           filters: [esFilters.buildExistsFilter(field, indexPattern)],
         }),
       });
@@ -928,7 +840,7 @@ describe('Lens App', () => {
       const { instance, services, lensStore } = await mountWith({});
 
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-1`,
         }),
       });
@@ -942,7 +854,7 @@ describe('Lens App', () => {
       instance.update();
 
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-2`,
         }),
       });
@@ -955,7 +867,7 @@ describe('Lens App', () => {
       );
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-3`,
         }),
       });
@@ -968,7 +880,7 @@ describe('Lens App', () => {
       );
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-4`,
         }),
       });
@@ -1105,7 +1017,7 @@ describe('Lens App', () => {
       act(() => instance.find(services.navigation.ui.TopNavMenu).prop('onClearSavedQuery')!());
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           filters: [pinned],
         }),
       });
@@ -1137,7 +1049,7 @@ describe('Lens App', () => {
       });
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-2`,
         }),
       });
@@ -1162,30 +1074,12 @@ describe('Lens App', () => {
       act(() => instance.find(services.navigation.ui.TopNavMenu).prop('onClearSavedQuery')!());
       instance.update();
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-4`,
         }),
       });
     });
 
-    const mockUpdate = {
-      filterableIndexPatterns: [],
-      doc: {
-        title: '',
-        description: '',
-        visualizationType: '',
-        state: {
-          datasourceStates: {},
-          visualization: {},
-          filters: [],
-          query: { query: '', language: 'lucene' },
-        },
-        references: [],
-      },
-      isSaveable: true,
-      activeData: undefined,
-    };
-
     it('updates the state if session id changes from the outside', async () => {
       const services = makeDefaultServices(sessionIdSubject);
       const { lensStore } = await mountWith({ props: undefined, services });
@@ -1197,25 +1091,16 @@ describe('Lens App', () => {
         await new Promise((r) => setTimeout(r, 0));
       });
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `new-session-id`,
         }),
       });
     });
 
     it('does not update the searchSessionId when the state changes', async () => {
-      const { lensStore } = await mountWith({});
-      act(() => {
-        lensStore.dispatch(
-          setState({
-            indexPatternsForTopNav: [],
-            lastKnownDoc: mockUpdate.doc,
-            isSaveable: true,
-          })
-        );
-      });
+      const { lensStore } = await mountWith({ preloadedState: { isSaveable: true } });
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
+        lens: expect.objectContaining({
           searchSessionId: `sessionId-1`,
         }),
       });
@@ -1248,20 +1133,7 @@ describe('Lens App', () => {
           visualize: { save: false, saveQuery: false, show: true },
         },
       };
-      const { instance, props, lensStore } = await mountWith({ services });
-      act(() => {
-        lensStore.dispatch(
-          setState({
-            indexPatternsForTopNav: [] as IndexPattern[],
-            lastKnownDoc: ({
-              savedObjectId: undefined,
-              references: [],
-            } as unknown) as Document,
-            isSaveable: true,
-          })
-        );
-      });
-      instance.update();
+      const { props } = await mountWith({ services, preloadedState: { isSaveable: true } });
       const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0];
       lastCall({ default: defaultLeave, confirm: confirmLeave });
       expect(defaultLeave).toHaveBeenCalled();
@@ -1269,14 +1141,14 @@ describe('Lens App', () => {
     });
 
     it('should confirm when leaving with an unsaved doc', async () => {
-      const { lensStore, props } = await mountWith({});
-      act(() => {
-        lensStore.dispatch(
-          setState({
-            lastKnownDoc: ({ savedObjectId: undefined, state: {} } as unknown) as Document,
-            isSaveable: true,
-          })
-        );
+      const { props } = await mountWith({
+        preloadedState: {
+          visualization: {
+            activeId: 'testVis',
+            state: {},
+          },
+          isSaveable: true,
+        },
       });
       const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0];
       lastCall({ default: defaultLeave, confirm: confirmLeave });
@@ -1285,18 +1157,15 @@ describe('Lens App', () => {
     });
 
     it('should confirm when leaving with unsaved changes to an existing doc', async () => {
-      const { lensStore, props } = await mountWith({});
-      act(() => {
-        lensStore.dispatch(
-          setState({
-            persistedDoc: defaultDoc,
-            lastKnownDoc: ({
-              savedObjectId: defaultSavedObjectId,
-              references: [],
-            } as unknown) as Document,
-            isSaveable: true,
-          })
-        );
+      const { props } = await mountWith({
+        preloadedState: {
+          persistedDoc: defaultDoc,
+          visualization: {
+            activeId: 'testVis',
+            state: {},
+          },
+          isSaveable: true,
+        },
       });
       const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0];
       lastCall({ default: defaultLeave, confirm: confirmLeave });
@@ -1305,15 +1174,23 @@ describe('Lens App', () => {
     });
 
     it('should not confirm when changes are saved', async () => {
-      const { lensStore, props } = await mountWith({});
-      act(() => {
-        lensStore.dispatch(
-          setState({
-            lastKnownDoc: defaultDoc,
-            persistedDoc: defaultDoc,
-            isSaveable: true,
-          })
-        );
+      const { props } = await mountWith({
+        preloadedState: {
+          persistedDoc: {
+            ...defaultDoc,
+            state: {
+              ...defaultDoc.state,
+              datasourceStates: { testDatasource: '' },
+              visualization: {},
+            },
+          },
+          isSaveable: true,
+          ...(defaultDoc.state as Partial<LensAppState>),
+          visualization: {
+            activeId: 'testVis',
+            state: {},
+          },
+        },
       });
       const lastCall = props.onAppLeave.mock.calls[props.onAppLeave.mock.calls.length - 1][0];
       lastCall({ default: defaultLeave, confirm: confirmLeave });
@@ -1321,16 +1198,13 @@ describe('Lens App', () => {
       expect(confirmLeave).not.toHaveBeenCalled();
     });
 
+    // not sure how to test it
     it('should confirm when the latest doc is invalid', async () => {
       const { lensStore, props } = await mountWith({});
       act(() => {
         lensStore.dispatch(
           setState({
             persistedDoc: defaultDoc,
-            lastKnownDoc: ({
-              savedObjectId: defaultSavedObjectId,
-              references: [],
-            } as unknown) as Document,
             isSaveable: true,
           })
         );
diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
index fee64a532553d..8faee830d52bb 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -10,8 +10,6 @@ import './app.scss';
 import { isEqual } from 'lodash';
 import React, { useState, useEffect, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { Toast } from 'kibana/public';
-import { VisualizeFieldContext } from 'src/plugins/ui_actions/public';
 import { EuiBreadcrumb } from '@elastic/eui';
 import {
   createKbnUrlStateStorage,
@@ -24,8 +22,9 @@ import { LensAppProps, LensAppServices } from './types';
 import { LensTopNavMenu } from './lens_top_nav';
 import { LensByReferenceInput } from '../embeddable';
 import { EditorFrameInstance } from '../types';
+import { Document } from '../persistence/saved_object_store';
 import {
-  setState as setAppState,
+  setState,
   useLensSelector,
   useLensDispatch,
   LensAppState,
@@ -36,6 +35,7 @@ import {
   getLastKnownDocWithoutPinnedFilters,
   runSaveLensVisualization,
 } from './save_modal_container';
+import { getSavedObjectFormat } from '../utils';
 
 export type SaveProps = Omit<OnSaveProps, 'onTitleDuplicate' | 'newDescription'> & {
   returnToOrigin: boolean;
@@ -54,7 +54,8 @@ export function App({
   incomingState,
   redirectToOrigin,
   setHeaderActionMenu,
-  initialContext,
+  datasourceMap,
+  visualizationMap,
 }: LensAppProps) {
   const lensAppServices = useKibana<LensAppServices>().services;
 
@@ -73,16 +74,69 @@ export function App({
 
   const dispatch = useLensDispatch();
   const dispatchSetState: DispatchSetState = useCallback(
-    (state: Partial<LensAppState>) => dispatch(setAppState(state)),
+    (state: Partial<LensAppState>) => dispatch(setState(state)),
     [dispatch]
   );
 
-  const appState = useLensSelector((state) => state.app);
+  const {
+    datasourceStates,
+    visualization,
+    filters,
+    query,
+    activeDatasourceId,
+    persistedDoc,
+    isLinkedToOriginatingApp,
+    searchSessionId,
+    isLoading,
+    isSaveable,
+  } = useLensSelector((state) => state.lens);
 
   // Used to show a popover that guides the user towards changing the date range when no data is available.
   const [indicateNoData, setIndicateNoData] = useState(false);
   const [isSaveModalVisible, setIsSaveModalVisible] = useState(false);
-  const { lastKnownDoc } = appState;
+  const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(undefined);
+
+  useEffect(() => {
+    const activeVisualization = visualization.activeId && visualizationMap[visualization.activeId];
+    const activeDatasource =
+      activeDatasourceId && !datasourceStates[activeDatasourceId].isLoading
+        ? datasourceMap[activeDatasourceId]
+        : undefined;
+
+    if (!activeDatasource || !activeVisualization || !visualization.state) {
+      return;
+    }
+    setLastKnownDoc(
+      // todo: that should be redux store selector
+      getSavedObjectFormat({
+        activeDatasources: Object.keys(datasourceStates).reduce(
+          (acc, datasourceId) => ({
+            ...acc,
+            [datasourceId]: datasourceMap[datasourceId],
+          }),
+          {}
+        ),
+        datasourceStates,
+        visualization,
+        filters,
+        query,
+        title: persistedDoc?.title || '',
+        description: persistedDoc?.description,
+        persistedId: persistedDoc?.savedObjectId,
+      })
+    );
+  }, [
+    persistedDoc?.title,
+    persistedDoc?.description,
+    persistedDoc?.savedObjectId,
+    datasourceStates,
+    visualization,
+    filters,
+    query,
+    activeDatasourceId,
+    datasourceMap,
+    visualizationMap,
+  ]);
 
   const showNoDataPopover = useCallback(() => {
     setIndicateNoData(true);
@@ -92,30 +146,17 @@ export function App({
     if (indicateNoData) {
       setIndicateNoData(false);
     }
-  }, [
-    setIndicateNoData,
-    indicateNoData,
-    appState.indexPatternsForTopNav,
-    appState.searchSessionId,
-  ]);
-
-  const onError = useCallback(
-    (e: { message: string }) =>
-      notifications.toasts.addDanger({
-        title: e.message,
-      }),
-    [notifications.toasts]
-  );
+  }, [setIndicateNoData, indicateNoData, searchSessionId]);
 
   const getIsByValueMode = useCallback(
     () =>
       Boolean(
         // Temporarily required until the 'by value' paradigm is default.
         dashboardFeatureFlag.allowByValueEmbeddables &&
-          appState.isLinkedToOriginatingApp &&
+          isLinkedToOriginatingApp &&
           !(initialInput as LensByReferenceInput)?.savedObjectId
       ),
-    [dashboardFeatureFlag.allowByValueEmbeddables, appState.isLinkedToOriginatingApp, initialInput]
+    [dashboardFeatureFlag.allowByValueEmbeddables, isLinkedToOriginatingApp, initialInput]
   );
 
   useEffect(() => {
@@ -138,13 +179,11 @@ export function App({
     onAppLeave((actions) => {
       // Confirm when the user has made any changes to an existing doc
       // or when the user has configured something without saving
+
       if (
         application.capabilities.visualize.save &&
-        !isEqual(
-          appState.persistedDoc?.state,
-          getLastKnownDocWithoutPinnedFilters(lastKnownDoc)?.state
-        ) &&
-        (appState.isSaveable || appState.persistedDoc)
+        !isEqual(persistedDoc?.state, getLastKnownDocWithoutPinnedFilters(lastKnownDoc)?.state) &&
+        (isSaveable || persistedDoc)
       ) {
         return actions.confirm(
           i18n.translate('xpack.lens.app.unsavedWorkMessage', {
@@ -158,19 +197,13 @@ export function App({
         return actions.default();
       }
     });
-  }, [
-    onAppLeave,
-    lastKnownDoc,
-    appState.isSaveable,
-    appState.persistedDoc,
-    application.capabilities.visualize.save,
-  ]);
+  }, [onAppLeave, lastKnownDoc, isSaveable, persistedDoc, application.capabilities.visualize.save]);
 
   // Sync Kibana breadcrumbs any time the saved document's title changes
   useEffect(() => {
     const isByValueMode = getIsByValueMode();
     const breadcrumbs: EuiBreadcrumb[] = [];
-    if (appState.isLinkedToOriginatingApp && getOriginatingAppName() && redirectToOrigin) {
+    if (isLinkedToOriginatingApp && getOriginatingAppName() && redirectToOrigin) {
       breadcrumbs.push({
         onClick: () => {
           redirectToOrigin();
@@ -193,10 +226,10 @@ export function App({
     let currentDocTitle = i18n.translate('xpack.lens.breadcrumbsCreate', {
       defaultMessage: 'Create',
     });
-    if (appState.persistedDoc) {
+    if (persistedDoc) {
       currentDocTitle = isByValueMode
         ? i18n.translate('xpack.lens.breadcrumbsByValue', { defaultMessage: 'Edit visualization' })
-        : appState.persistedDoc.title;
+        : persistedDoc.title;
     }
     breadcrumbs.push({ text: currentDocTitle });
     chrome.setBreadcrumbs(breadcrumbs);
@@ -207,39 +240,55 @@ export function App({
     getIsByValueMode,
     application,
     chrome,
-    appState.isLinkedToOriginatingApp,
-    appState.persistedDoc,
+    isLinkedToOriginatingApp,
+    persistedDoc,
   ]);
 
-  const runSave = (saveProps: SaveProps, options: { saveToLibrary: boolean }) => {
-    return runSaveLensVisualization(
-      {
-        lastKnownDoc,
-        getIsByValueMode,
-        savedObjectsTagging,
-        initialInput,
-        redirectToOrigin,
-        persistedDoc: appState.persistedDoc,
-        onAppLeave,
-        redirectTo,
-        originatingApp: incomingState?.originatingApp,
-        ...lensAppServices,
-      },
-      saveProps,
-      options
-    ).then(
-      (newState) => {
-        if (newState) {
-          dispatchSetState(newState);
-          setIsSaveModalVisible(false);
+  const runSave = useCallback(
+    (saveProps: SaveProps, options: { saveToLibrary: boolean }) => {
+      return runSaveLensVisualization(
+        {
+          lastKnownDoc,
+          getIsByValueMode,
+          savedObjectsTagging,
+          initialInput,
+          redirectToOrigin,
+          persistedDoc,
+          onAppLeave,
+          redirectTo,
+          originatingApp: incomingState?.originatingApp,
+          ...lensAppServices,
+        },
+        saveProps,
+        options
+      ).then(
+        (newState) => {
+          if (newState) {
+            dispatchSetState(newState);
+            setIsSaveModalVisible(false);
+          }
+        },
+        () => {
+          // error is handled inside the modal
+          // so ignoring it here
         }
-      },
-      () => {
-        // error is handled inside the modal
-        // so ignoring it here
-      }
-    );
-  };
+      );
+    },
+    [
+      incomingState?.originatingApp,
+      lastKnownDoc,
+      persistedDoc,
+      getIsByValueMode,
+      savedObjectsTagging,
+      initialInput,
+      redirectToOrigin,
+      onAppLeave,
+      redirectTo,
+      lensAppServices,
+      dispatchSetState,
+      setIsSaveModalVisible,
+    ]
+  );
 
   return (
     <>
@@ -253,64 +302,53 @@ export function App({
           setIsSaveModalVisible={setIsSaveModalVisible}
           setHeaderActionMenu={setHeaderActionMenu}
           indicateNoData={indicateNoData}
+          datasourceMap={datasourceMap}
+          title={persistedDoc?.title}
         />
-        {(!appState.isAppLoading || appState.persistedDoc) && (
+        {(!isLoading || persistedDoc) && (
           <MemoizedEditorFrameWrapper
             editorFrame={editorFrame}
-            onError={onError}
             showNoDataPopover={showNoDataPopover}
-            initialContext={initialContext}
           />
         )}
       </div>
-      <SaveModalContainer
-        isVisible={isSaveModalVisible}
-        lensServices={lensAppServices}
-        originatingApp={
-          appState.isLinkedToOriginatingApp ? incomingState?.originatingApp : undefined
-        }
-        isSaveable={appState.isSaveable}
-        runSave={runSave}
-        onClose={() => {
-          setIsSaveModalVisible(false);
-        }}
-        getAppNameFromId={() => getOriginatingAppName()}
-        lastKnownDoc={lastKnownDoc}
-        onAppLeave={onAppLeave}
-        persistedDoc={appState.persistedDoc}
-        initialInput={initialInput}
-        redirectTo={redirectTo}
-        redirectToOrigin={redirectToOrigin}
-        returnToOriginSwitchLabel={
-          getIsByValueMode() && initialInput
-            ? i18n.translate('xpack.lens.app.updatePanel', {
-                defaultMessage: 'Update panel on {originatingAppName}',
-                values: { originatingAppName: getOriginatingAppName() },
-              })
-            : undefined
-        }
-      />
+      {isSaveModalVisible && (
+        <SaveModalContainer
+          lensServices={lensAppServices}
+          originatingApp={isLinkedToOriginatingApp ? incomingState?.originatingApp : undefined}
+          isSaveable={isSaveable}
+          runSave={runSave}
+          onClose={() => {
+            setIsSaveModalVisible(false);
+          }}
+          getAppNameFromId={() => getOriginatingAppName()}
+          lastKnownDoc={lastKnownDoc}
+          onAppLeave={onAppLeave}
+          persistedDoc={persistedDoc}
+          initialInput={initialInput}
+          redirectTo={redirectTo}
+          redirectToOrigin={redirectToOrigin}
+          returnToOriginSwitchLabel={
+            getIsByValueMode() && initialInput
+              ? i18n.translate('xpack.lens.app.updatePanel', {
+                  defaultMessage: 'Update panel on {originatingAppName}',
+                  values: { originatingAppName: getOriginatingAppName() },
+                })
+              : undefined
+          }
+        />
+      )}
     </>
   );
 }
 
 const MemoizedEditorFrameWrapper = React.memo(function EditorFrameWrapper({
   editorFrame,
-  onError,
   showNoDataPopover,
-  initialContext,
 }: {
   editorFrame: EditorFrameInstance;
-  onError: (e: { message: string }) => Toast;
   showNoDataPopover: () => void;
-  initialContext: VisualizeFieldContext | undefined;
 }) {
   const { EditorFrameContainer } = editorFrame;
-  return (
-    <EditorFrameContainer
-      onError={onError}
-      showNoDataPopover={showNoDataPopover}
-      initialContext={initialContext}
-    />
-  );
+  return <EditorFrameContainer showNoDataPopover={showNoDataPopover} />;
 });
diff --git a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
index ecaae04232f8a..5034069b448af 100644
--- a/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/lens_top_nav.tsx
@@ -7,21 +7,21 @@
 
 import { isEqual } from 'lodash';
 import { i18n } from '@kbn/i18n';
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
 import { LensAppServices, LensTopNavActions, LensTopNavMenuProps } from './types';
 import { downloadMultipleAs } from '../../../../../src/plugins/share/public';
 import { trackUiEvent } from '../lens_ui_telemetry';
-import { exporters } from '../../../../../src/plugins/data/public';
-
+import { exporters, IndexPattern } from '../../../../../src/plugins/data/public';
 import { useKibana } from '../../../../../src/plugins/kibana_react/public';
 import {
-  setState as setAppState,
+  setState,
   useLensSelector,
   useLensDispatch,
   LensAppState,
   DispatchSetState,
 } from '../state_management';
+import { getIndexPatternsObjects, getIndexPatternsIds } from '../utils';
 
 function getLensTopNavConfig(options: {
   showSaveAndReturn: boolean;
@@ -127,6 +127,8 @@ export const LensTopNavMenu = ({
   runSave,
   onAppLeave,
   redirectToOrigin,
+  datasourceMap,
+  title,
 }: LensTopNavMenuProps) => {
   const {
     data,
@@ -139,19 +141,52 @@ export const LensTopNavMenu = ({
 
   const dispatch = useLensDispatch();
   const dispatchSetState: DispatchSetState = React.useCallback(
-    (state: Partial<LensAppState>) => dispatch(setAppState(state)),
+    (state: Partial<LensAppState>) => dispatch(setState(state)),
     [dispatch]
   );
 
+  const [indexPatterns, setIndexPatterns] = useState<IndexPattern[]>([]);
+
   const {
     isSaveable,
     isLinkedToOriginatingApp,
-    indexPatternsForTopNav,
     query,
-    lastKnownDoc,
     activeData,
     savedQuery,
-  } = useLensSelector((state) => state.app);
+    activeDatasourceId,
+    datasourceStates,
+  } = useLensSelector((state) => state.lens);
+
+  useEffect(() => {
+    const activeDatasource =
+      datasourceMap && activeDatasourceId && !datasourceStates[activeDatasourceId].isLoading
+        ? datasourceMap[activeDatasourceId]
+        : undefined;
+    if (!activeDatasource) {
+      return;
+    }
+    const indexPatternIds = getIndexPatternsIds({
+      activeDatasources: Object.keys(datasourceStates).reduce(
+        (acc, datasourceId) => ({
+          ...acc,
+          [datasourceId]: datasourceMap[datasourceId],
+        }),
+        {}
+      ),
+      datasourceStates,
+    });
+    const hasIndexPatternsChanged =
+      indexPatterns.length !== indexPatternIds.length ||
+      indexPatternIds.some((id) => !indexPatterns.find((indexPattern) => indexPattern.id === id));
+    // Update the cached index patterns if the user made a change to any of them
+    if (hasIndexPatternsChanged) {
+      getIndexPatternsObjects(indexPatternIds, data.indexPatterns).then(
+        ({ indexPatterns: indexPatternObjects }) => {
+          setIndexPatterns(indexPatternObjects);
+        }
+      );
+    }
+  }, [datasourceStates, activeDatasourceId, data.indexPatterns, datasourceMap, indexPatterns]);
 
   const { TopNavMenu } = navigation.ui;
   const { from, to } = data.query.timefilter.timefilter.getTime();
@@ -190,7 +225,7 @@ export const LensTopNavMenu = ({
                 if (datatable) {
                   const postFix = datatables.length > 1 ? `-${i + 1}` : '';
 
-                  memo[`${lastKnownDoc?.title || unsavedTitle}${postFix}.csv`] = {
+                  memo[`${title || unsavedTitle}${postFix}.csv`] = {
                     content: exporters.datatableToCSV(datatable, {
                       csvSeparator: uiSettings.get('csv:separator', ','),
                       quoteValues: uiSettings.get('csv:quoteValues', true),
@@ -208,14 +243,14 @@ export const LensTopNavMenu = ({
             }
           },
           saveAndReturn: () => {
-            if (savingToDashboardPermitted && lastKnownDoc) {
+            if (savingToDashboardPermitted) {
               // disabling the validation on app leave because the document has been saved.
               onAppLeave((actions) => {
                 return actions.default();
               });
               runSave(
                 {
-                  newTitle: lastKnownDoc.title,
+                  newTitle: title || '',
                   newCopyOnSave: false,
                   isTitleDuplicateConfirmed: false,
                   returnToOrigin: true,
@@ -248,7 +283,7 @@ export const LensTopNavMenu = ({
       initialInput,
       isLinkedToOriginatingApp,
       isSaveable,
-      lastKnownDoc,
+      title,
       onAppLeave,
       redirectToOrigin,
       runSave,
@@ -321,7 +356,7 @@ export const LensTopNavMenu = ({
       onSaved={onSavedWrapped}
       onSavedQueryUpdated={onSavedQueryUpdatedWrapped}
       onClearSavedQuery={onClearSavedQueryWrapped}
-      indexPatterns={indexPatternsForTopNav}
+      indexPatterns={indexPatterns}
       query={query}
       dateRangeFrom={from}
       dateRangeTo={to}
diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx
index 4f890a51f9b6a..03eec4f617cfc 100644
--- a/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/mounter.test.tsx
@@ -4,45 +4,150 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { makeDefaultServices, mockLensStore } from '../mocks';
+import { makeDefaultServices, makeLensStore, defaultDoc, createMockVisualization } from '../mocks';
+import { createMockDatasource, DatasourceMock } from '../mocks';
 import { act } from 'react-dom/test-utils';
-import { loadDocument } from './mounter';
+import { loadInitialStore } from './mounter';
 import { LensEmbeddableInput } from '../embeddable/embeddable';
 
 const defaultSavedObjectId = '1234';
+const preloadedState = {
+  isLoading: true,
+  visualization: {
+    state: null,
+    activeId: 'testVis',
+  },
+};
 
 describe('Mounter', () => {
   const byValueFlag = { allowByValueEmbeddables: true };
-  describe('loadDocument', () => {
+  const mockDatasource: DatasourceMock = createMockDatasource('testDatasource');
+  const mockDatasource2: DatasourceMock = createMockDatasource('testDatasource2');
+  const datasourceMap = {
+    testDatasource2: mockDatasource2,
+    testDatasource: mockDatasource,
+  };
+  const mockVisualization = {
+    ...createMockVisualization(),
+    id: 'testVis',
+    visualizationTypes: [
+      {
+        icon: 'empty',
+        id: 'testVis',
+        label: 'TEST1',
+        groupLabel: 'testVisGroup',
+      },
+    ],
+  };
+  const mockVisualization2 = {
+    ...createMockVisualization(),
+    id: 'testVis2',
+    visualizationTypes: [
+      {
+        icon: 'empty',
+        id: 'testVis2',
+        label: 'TEST2',
+        groupLabel: 'testVis2Group',
+      },
+    ],
+  };
+  const visualizationMap = {
+    testVis: mockVisualization,
+    testVis2: mockVisualization2,
+  };
+
+  it('should initialize initial datasource', async () => {
+    const services = makeDefaultServices();
+    const redirectCallback = jest.fn();
+    services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc);
+
+    const lensStore = await makeLensStore({
+      data: services.data,
+      preloadedState,
+    });
+    await act(async () => {
+      await loadInitialStore(
+        redirectCallback,
+        undefined,
+        services,
+        lensStore,
+        undefined,
+        byValueFlag,
+        datasourceMap,
+        visualizationMap
+      );
+    });
+    expect(mockDatasource.initialize).toHaveBeenCalled();
+  });
+
+  it('should have initialized only the initial datasource and visualization', async () => {
+    const services = makeDefaultServices();
+    const redirectCallback = jest.fn();
+    services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc);
+
+    const lensStore = await makeLensStore({ data: services.data, preloadedState });
+    await act(async () => {
+      await loadInitialStore(
+        redirectCallback,
+        undefined,
+        services,
+        lensStore,
+        undefined,
+        byValueFlag,
+        datasourceMap,
+        visualizationMap
+      );
+    });
+    expect(mockDatasource.initialize).toHaveBeenCalled();
+    expect(mockDatasource2.initialize).not.toHaveBeenCalled();
+
+    expect(mockVisualization.initialize).toHaveBeenCalled();
+    expect(mockVisualization2.initialize).not.toHaveBeenCalled();
+  });
+
+  // it('should initialize all datasources with state from doc', async () => {})
+  // it('should pass the datasource api for each layer to the visualization', async () => {})
+  // it('should create a separate datasource public api for each layer', async () => {})
+  // it('should not initialize visualization before datasource is initialized', async () => {})
+  // it('should pass the public frame api into visualization initialize', async () => {})
+  // it('should fetch suggestions of currently active datasource when initializes from visualization trigger', async () => {})
+  // it.skip('should pass the datasource api for each layer to the visualization', async () => {})
+  // it('displays errors from the frame in a toast', async () => {
+
+  describe('loadInitialStore', () => {
     it('does not load a document if there is no initial input', async () => {
       const services = makeDefaultServices();
       const redirectCallback = jest.fn();
-      const lensStore = mockLensStore({ data: services.data });
-      await loadDocument(redirectCallback, undefined, services, lensStore, undefined, byValueFlag);
+      const lensStore = makeLensStore({ data: services.data, preloadedState });
+      await loadInitialStore(
+        redirectCallback,
+        undefined,
+        services,
+        lensStore,
+        undefined,
+        byValueFlag,
+        datasourceMap,
+        visualizationMap
+      );
       expect(services.attributeService.unwrapAttributes).not.toHaveBeenCalled();
     });
 
     it('loads a document and uses query and filters if initial input is provided', async () => {
       const services = makeDefaultServices();
       const redirectCallback = jest.fn();
-      services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue({
-        savedObjectId: defaultSavedObjectId,
-        state: {
-          query: 'fake query',
-          filters: [{ query: { match_phrase: { src: 'test' } } }],
-        },
-        references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
-      });
+      services.attributeService.unwrapAttributes = jest.fn().mockResolvedValue(defaultDoc);
 
-      const lensStore = await mockLensStore({ data: services.data });
+      const lensStore = await makeLensStore({ data: services.data, preloadedState });
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
 
@@ -50,21 +155,16 @@ describe('Mounter', () => {
         savedObjectId: defaultSavedObjectId,
       });
 
-      expect(services.data.indexPatterns.get).toHaveBeenCalledWith('1');
-
       expect(services.data.query.filterManager.setAppFilters).toHaveBeenCalledWith([
         { query: { match_phrase: { src: 'test' } } },
       ]);
 
       expect(lensStore.getState()).toEqual({
-        app: expect.objectContaining({
-          persistedDoc: expect.objectContaining({
-            savedObjectId: defaultSavedObjectId,
-            state: expect.objectContaining({
-              query: 'fake query',
-              filters: [{ query: { match_phrase: { src: 'test' } } }],
-            }),
-          }),
+        lens: expect.objectContaining({
+          persistedDoc: { ...defaultDoc, type: 'lens' },
+          query: 'kuery',
+          isLoading: false,
+          activeDatasourceId: 'testDatasource',
         }),
       });
     });
@@ -72,40 +172,46 @@ describe('Mounter', () => {
     it('does not load documents on sequential renders unless the id changes', async () => {
       const redirectCallback = jest.fn();
       const services = makeDefaultServices();
-      const lensStore = mockLensStore({ data: services.data });
+      const lensStore = makeLensStore({ data: services.data, preloadedState });
 
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
 
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
 
       expect(services.attributeService.unwrapAttributes).toHaveBeenCalledTimes(1);
 
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           { savedObjectId: '5678' } as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
 
@@ -116,18 +222,20 @@ describe('Mounter', () => {
       const services = makeDefaultServices();
       const redirectCallback = jest.fn();
 
-      const lensStore = mockLensStore({ data: services.data });
+      const lensStore = makeLensStore({ data: services.data, preloadedState });
 
       services.attributeService.unwrapAttributes = jest.fn().mockRejectedValue('failed to load');
 
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           { savedObjectId: defaultSavedObjectId } as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
       expect(services.attributeService.unwrapAttributes).toHaveBeenCalledWith({
@@ -141,15 +249,17 @@ describe('Mounter', () => {
       const redirectCallback = jest.fn();
 
       const services = makeDefaultServices();
-      const lensStore = mockLensStore({ data: services.data });
+      const lensStore = makeLensStore({ data: services.data, preloadedState });
       await act(async () => {
-        await loadDocument(
+        await loadInitialStore(
           redirectCallback,
           ({ savedObjectId: defaultSavedObjectId } as unknown) as LensEmbeddableInput,
           services,
           lensStore,
           undefined,
-          byValueFlag
+          byValueFlag,
+          datasourceMap,
+          visualizationMap
         );
       });
 
diff --git a/x-pack/plugins/lens/public/app_plugin/mounter.tsx b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
index 7f27b06c51ba4..1fd12460ba3b6 100644
--- a/x-pack/plugins/lens/public/app_plugin/mounter.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/mounter.tsx
@@ -23,7 +23,7 @@ import { Storage } from '../../../../../src/plugins/kibana_utils/public';
 import { LensReportManager, setReportManager, trackUiEvent } from '../lens_ui_telemetry';
 
 import { App } from './app';
-import { EditorFrameStart } from '../types';
+import { Datasource, EditorFrameStart, Visualization } from '../types';
 import { addHelpMenuToAppChrome } from '../help_menu_util';
 import { LensPluginStartDependencies } from '../plugin';
 import { LENS_EMBEDDABLE_TYPE, LENS_EDIT_BY_VALUE, APP_ID } from '../../common';
@@ -32,7 +32,10 @@ import {
   LensByReferenceInput,
   LensByValueInput,
 } from '../embeddable/embeddable';
-import { ACTION_VISUALIZE_LENS_FIELD } from '../../../../../src/plugins/ui_actions/public';
+import {
+  ACTION_VISUALIZE_LENS_FIELD,
+  VisualizeFieldContext,
+} from '../../../../../src/plugins/ui_actions/public';
 import { LensAttributeService } from '../lens_attribute_service';
 import { LensAppServices, RedirectToOriginProps, HistoryLocationState } from './types';
 import { KibanaContextProvider } from '../../../../../src/plugins/kibana_react/public';
@@ -43,9 +46,18 @@ import {
   getPreloadedState,
   LensRootStore,
   setState,
+  LensAppState,
+  updateLayer,
+  updateVisualizationState,
 } from '../state_management';
-import { getResolvedDateRange } from '../utils';
-import { getLastKnownDoc } from './save_modal_container';
+import { getPersistedDoc } from './save_modal_container';
+import { getResolvedDateRange, getInitialDatasourceId } from '../utils';
+import { initializeDatasources } from '../editor_frame_service/editor_frame';
+import { generateId } from '../id_generator';
+import {
+  getVisualizeFieldSuggestions,
+  switchToSuggestion,
+} from '../editor_frame_service/editor_frame/suggestion_helpers';
 
 export async function getLensServices(
   coreStart: CoreStart,
@@ -166,7 +178,19 @@ export async function mountApp(
   if (!initialContext) {
     data.query.filterManager.setAppFilters([]);
   }
+  const { datasourceMap, visualizationMap } = instance;
+
+  const initialDatasourceId = getInitialDatasourceId(datasourceMap);
+  const datasourceStates: LensAppState['datasourceStates'] = {};
+  if (initialDatasourceId) {
+    datasourceStates[initialDatasourceId] = {
+      state: null,
+      isLoading: true,
+    };
+  }
+
   const preloadedState = getPreloadedState({
+    isLoading: true,
     query: data.query.queryString.getQuery(),
     // Do not use app-specific filters from previous app,
     // only if Lens was opened with the intention to visualize a field (e.g. coming from Discover)
@@ -176,10 +200,15 @@ export async function mountApp(
     searchSessionId: data.search.session.getSessionId(),
     resolvedDateRange: getResolvedDateRange(data.query.timefilter.timefilter),
     isLinkedToOriginatingApp: Boolean(embeddableEditorIncomingState?.originatingApp),
+    activeDatasourceId: initialDatasourceId,
+    datasourceStates,
+    visualization: {
+      state: null,
+      activeId: Object.keys(visualizationMap)[0] || null,
+    },
   });
 
   const lensStore: LensRootStore = makeConfigureStore(preloadedState, { data });
-
   const EditorRenderer = React.memo(
     (props: { id?: string; history: History<unknown>; editByValue?: boolean }) => {
       const redirectCallback = useCallback(
@@ -190,14 +219,18 @@ export async function mountApp(
       );
       trackUiEvent('loaded');
       const initialInput = getInitialInput(props.id, props.editByValue);
-      loadDocument(
+      loadInitialStore(
         redirectCallback,
         initialInput,
         lensServices,
         lensStore,
         embeddableEditorIncomingState,
-        dashboardFeatureFlag
+        dashboardFeatureFlag,
+        datasourceMap,
+        visualizationMap,
+        initialContext
       );
+
       return (
         <Provider store={lensStore}>
           <App
@@ -209,7 +242,8 @@ export async function mountApp(
             onAppLeave={params.onAppLeave}
             setHeaderActionMenu={params.setHeaderActionMenu}
             history={props.history}
-            initialContext={initialContext}
+            datasourceMap={datasourceMap}
+            visualizationMap={visualizationMap}
           />
         </Provider>
       );
@@ -270,64 +304,180 @@ export async function mountApp(
   };
 }
 
-export function loadDocument(
+export function loadInitialStore(
   redirectCallback: (savedObjectId?: string) => void,
   initialInput: LensEmbeddableInput | undefined,
   lensServices: LensAppServices,
   lensStore: LensRootStore,
   embeddableEditorIncomingState: EmbeddableEditorState | undefined,
-  dashboardFeatureFlag: DashboardFeatureFlagConfig
+  dashboardFeatureFlag: DashboardFeatureFlagConfig,
+  datasourceMap: Record<string, Datasource>,
+  visualizationMap: Record<string, Visualization>,
+  initialContext?: VisualizeFieldContext
 ) {
   const { attributeService, chrome, notifications, data } = lensServices;
-  const { persistedDoc } = lensStore.getState().app;
+  const { persistedDoc } = lensStore.getState().lens;
   if (
     !initialInput ||
     (attributeService.inputIsRefType(initialInput) &&
       initialInput.savedObjectId === persistedDoc?.savedObjectId)
   ) {
-    return;
+    return initializeDatasources(
+      datasourceMap,
+      lensStore.getState().lens.datasourceStates,
+      undefined,
+      initialContext,
+      {
+        isFullEditor: true,
+      }
+    )
+      .then((result) => {
+        const datasourceStates = Object.entries(result).reduce(
+          (state, [datasourceId, datasourceState]) => ({
+            ...state,
+            [datasourceId]: {
+              ...datasourceState,
+              isLoading: false,
+            },
+          }),
+          {}
+        );
+        lensStore.dispatch(
+          setState({
+            datasourceStates,
+            isLoading: false,
+          })
+        );
+        if (initialContext) {
+          const selectedSuggestion = getVisualizeFieldSuggestions({
+            datasourceMap,
+            datasourceStates,
+            visualizationMap,
+            activeVisualizationId: Object.keys(visualizationMap)[0] || null,
+            visualizationState: null,
+            visualizeTriggerFieldContext: initialContext,
+          });
+          if (selectedSuggestion) {
+            switchToSuggestion(lensStore.dispatch, selectedSuggestion, 'SWITCH_VISUALIZATION');
+          }
+        }
+        const activeDatasourceId = getInitialDatasourceId(datasourceMap);
+        const visualization = lensStore.getState().lens.visualization;
+        const activeVisualization =
+          visualization.activeId && visualizationMap[visualization.activeId];
+
+        if (visualization.state === null && activeVisualization) {
+          const newLayerId = generateId();
+
+          const initialVisualizationState = activeVisualization.initialize(() => newLayerId);
+          lensStore.dispatch(
+            updateLayer({
+              datasourceId: activeDatasourceId!,
+              layerId: newLayerId,
+              updater: datasourceMap[activeDatasourceId!].insertLayer,
+            })
+          );
+          lensStore.dispatch(
+            updateVisualizationState({
+              visualizationId: activeVisualization.id,
+              updater: initialVisualizationState,
+            })
+          );
+        }
+      })
+      .catch((e: { message: string }) => {
+        notifications.toasts.addDanger({
+          title: e.message,
+        });
+        redirectCallback();
+      });
   }
-  lensStore.dispatch(setState({ isAppLoading: true }));
 
-  getLastKnownDoc({
+  getPersistedDoc({
     initialInput,
     attributeService,
     data,
     chrome,
     notifications,
-  }).then(
-    (newState) => {
-      if (newState) {
-        const { doc, indexPatterns } = newState;
-        const currentSessionId = data.search.session.getSessionId();
+  })
+    .then(
+      (doc) => {
+        if (doc) {
+          const currentSessionId = data.search.session.getSessionId();
+          const docDatasourceStates = Object.entries(doc.state.datasourceStates).reduce(
+            (stateMap, [datasourceId, datasourceState]) => ({
+              ...stateMap,
+              [datasourceId]: {
+                isLoading: true,
+                state: datasourceState,
+              },
+            }),
+            {}
+          );
+
+          initializeDatasources(
+            datasourceMap,
+            docDatasourceStates,
+            doc.references,
+            initialContext,
+            {
+              isFullEditor: true,
+            }
+          )
+            .then((result) => {
+              const activeDatasourceId = getInitialDatasourceId(datasourceMap, doc);
+
+              lensStore.dispatch(
+                setState({
+                  query: doc.state.query,
+                  searchSessionId:
+                    dashboardFeatureFlag.allowByValueEmbeddables &&
+                    Boolean(embeddableEditorIncomingState?.originatingApp) &&
+                    !(initialInput as LensByReferenceInput)?.savedObjectId &&
+                    currentSessionId
+                      ? currentSessionId
+                      : data.search.session.start(),
+                  ...(!isEqual(persistedDoc, doc) ? { persistedDoc: doc } : null),
+                  activeDatasourceId,
+                  visualization: {
+                    activeId: doc.visualizationType,
+                    state: doc.state.visualization,
+                  },
+                  datasourceStates: Object.entries(result).reduce(
+                    (state, [datasourceId, datasourceState]) => ({
+                      ...state,
+                      [datasourceId]: {
+                        ...datasourceState,
+                        isLoading: false,
+                      },
+                    }),
+                    {}
+                  ),
+                  isLoading: false,
+                })
+              );
+            })
+            .catch((e: { message: string }) =>
+              notifications.toasts.addDanger({
+                title: e.message,
+              })
+            );
+        } else {
+          redirectCallback();
+        }
+      },
+      () => {
         lensStore.dispatch(
           setState({
-            query: doc.state.query,
-            isAppLoading: false,
-            indexPatternsForTopNav: indexPatterns,
-            lastKnownDoc: doc,
-            searchSessionId:
-              dashboardFeatureFlag.allowByValueEmbeddables &&
-              Boolean(embeddableEditorIncomingState?.originatingApp) &&
-              !(initialInput as LensByReferenceInput)?.savedObjectId &&
-              currentSessionId
-                ? currentSessionId
-                : data.search.session.start(),
-            ...(!isEqual(persistedDoc, doc) ? { persistedDoc: doc } : null),
+            isLoading: false,
           })
         );
-      } else {
         redirectCallback();
       }
-    },
-    () => {
-      lensStore.dispatch(
-        setState({
-          isAppLoading: false,
-        })
-      );
-
-      redirectCallback();
-    }
-  );
+    )
+    .catch((e: { message: string }) =>
+      notifications.toasts.addDanger({
+        title: e.message,
+      })
+    );
 }
diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal.tsx
index cb4c5325aefbb..124702e0dd90e 100644
--- a/x-pack/plugins/lens/public/app_plugin/save_modal.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/save_modal.tsx
@@ -7,8 +7,6 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-
-import { Document } from '../persistence';
 import type { SavedObjectTaggingPluginStart } from '../../../saved_objects_tagging/public';
 
 import {
@@ -23,7 +21,6 @@ import {
 export type SaveProps = OriginSaveProps | DashboardSaveProps;
 
 export interface Props {
-  isVisible: boolean;
   savingToLibraryPermitted?: boolean;
 
   originatingApp?: string;
@@ -32,7 +29,9 @@ export interface Props {
   savedObjectsTagging?: SavedObjectTaggingPluginStart;
   tagsIds: string[];
 
-  lastKnownDoc?: Document;
+  title?: string;
+  savedObjectId?: string;
+  description?: string;
 
   getAppNameFromId: () => string | undefined;
   returnToOriginSwitchLabel?: string;
@@ -42,16 +41,14 @@ export interface Props {
 }
 
 export const SaveModal = (props: Props) => {
-  if (!props.isVisible || !props.lastKnownDoc) {
-    return null;
-  }
-
   const {
     originatingApp,
     savingToLibraryPermitted,
     savedObjectsTagging,
     tagsIds,
-    lastKnownDoc,
+    savedObjectId,
+    title,
+    description,
     allowByValueEmbeddables,
     returnToOriginSwitchLabel,
     getAppNameFromId,
@@ -70,9 +67,9 @@ export const SaveModal = (props: Props) => {
         onSave={(saveProps) => onSave(saveProps, { saveToLibrary: true })}
         getAppNameFromId={getAppNameFromId}
         documentInfo={{
-          id: lastKnownDoc.savedObjectId,
-          title: lastKnownDoc.title || '',
-          description: lastKnownDoc.description || '',
+          id: savedObjectId,
+          title: title || '',
+          description: description || '',
         }}
         returnToOriginSwitchLabel={returnToOriginSwitchLabel}
         objectType={i18n.translate('xpack.lens.app.saveModalType', {
@@ -95,9 +92,9 @@ export const SaveModal = (props: Props) => {
       onClose={onClose}
       documentInfo={{
         // if the user cannot save to the library - treat this as a new document.
-        id: savingToLibraryPermitted ? lastKnownDoc.savedObjectId : undefined,
-        title: lastKnownDoc.title || '',
-        description: lastKnownDoc.description || '',
+        id: savingToLibraryPermitted ? savedObjectId : undefined,
+        title: title || '',
+        description: description || '',
       }}
       objectType={i18n.translate('xpack.lens.app.saveModalType', {
         defaultMessage: 'Lens visualization',
diff --git a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
index facf85d45bcbb..2912daccf8899 100644
--- a/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/save_modal_container.tsx
@@ -8,21 +8,16 @@
 import React, { useEffect, useState } from 'react';
 import { ChromeStart, NotificationsStart } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
-import { partition, uniq } from 'lodash';
 import { METRIC_TYPE } from '@kbn/analytics';
+import { partition } from 'lodash';
 import { SaveModal } from './save_modal';
 import { LensAppProps, LensAppServices } from './types';
 import type { SaveProps } from './app';
 import { Document, injectFilterReferences } from '../persistence';
 import { LensByReferenceInput, LensEmbeddableInput } from '../embeddable';
 import { LensAttributeService } from '../lens_attribute_service';
-import {
-  DataPublicPluginStart,
-  esFilters,
-  IndexPattern,
-} from '../../../../../src/plugins/data/public';
+import { DataPublicPluginStart, esFilters } from '../../../../../src/plugins/data/public';
 import { APP_ID, getFullPath, LENS_EMBEDDABLE_TYPE } from '../../common';
-import { getAllIndexPatterns } from '../utils';
 import { trackUiEvent } from '../lens_ui_telemetry';
 import { checkForDuplicateTitle } from '../../../../../src/plugins/saved_objects/public';
 import { LensAppState } from '../state_management';
@@ -31,7 +26,6 @@ type ExtraProps = Pick<LensAppProps, 'initialInput'> &
   Partial<Pick<LensAppProps, 'redirectToOrigin' | 'redirectTo' | 'onAppLeave'>>;
 
 export type SaveModalContainerProps = {
-  isVisible: boolean;
   originatingApp?: string;
   persistedDoc?: Document;
   lastKnownDoc?: Document;
@@ -49,7 +43,6 @@ export function SaveModalContainer({
   onClose,
   onSave,
   runSave,
-  isVisible,
   persistedDoc,
   originatingApp,
   initialInput,
@@ -61,6 +54,14 @@ export function SaveModalContainer({
   lensServices,
 }: SaveModalContainerProps) {
   const [lastKnownDoc, setLastKnownDoc] = useState<Document | undefined>(initLastKnowDoc);
+  let title = '';
+  let description;
+  let savedObjectId;
+  if (lastKnownDoc) {
+    title = lastKnownDoc.title;
+    description = lastKnownDoc.description;
+    savedObjectId = lastKnownDoc.savedObjectId;
+  }
 
   const {
     attributeService,
@@ -77,22 +78,26 @@ export function SaveModalContainer({
   }, [initLastKnowDoc]);
 
   useEffect(() => {
-    async function loadLastKnownDoc() {
-      if (initialInput && isVisible) {
-        getLastKnownDoc({
+    let isMounted = true;
+    async function loadPersistedDoc() {
+      if (initialInput) {
+        getPersistedDoc({
           data,
           initialInput,
           chrome,
           notifications,
           attributeService,
-        }).then((result) => {
-          if (result) setLastKnownDoc(result.doc);
+        }).then((doc) => {
+          if (doc && isMounted) setLastKnownDoc(doc);
         });
       }
     }
 
-    loadLastKnownDoc();
-  }, [chrome, data, initialInput, notifications, attributeService, isVisible]);
+    loadPersistedDoc();
+    return () => {
+      isMounted = false;
+    };
+  }, [chrome, data, initialInput, notifications, attributeService]);
 
   const tagsIds =
     persistedDoc && savedObjectsTagging
@@ -131,7 +136,6 @@ export function SaveModalContainer({
 
   return (
     <SaveModal
-      isVisible={isVisible}
       originatingApp={originatingApp}
       savingToLibraryPermitted={savingToLibraryPermitted}
       allowByValueEmbeddables={dashboardFeatureFlag?.allowByValueEmbeddables}
@@ -142,7 +146,9 @@ export function SaveModalContainer({
       }}
       onClose={onClose}
       getAppNameFromId={getAppNameFromId}
-      lastKnownDoc={lastKnownDoc}
+      title={title}
+      description={description}
+      savedObjectId={savedObjectId}
       returnToOriginSwitchLabel={returnToOriginSwitchLabel}
     />
   );
@@ -330,7 +336,10 @@ export const runSaveLensVisualization = async (
       ...newInput,
     };
 
-    return { persistedDoc: newDoc, lastKnownDoc: newDoc, isLinkedToOriginatingApp: false };
+    return {
+      persistedDoc: newDoc,
+      isLinkedToOriginatingApp: false,
+    };
   } catch (e) {
     // eslint-disable-next-line no-console
     console.dir(e);
@@ -356,7 +365,7 @@ export function getLastKnownDocWithoutPinnedFilters(doc?: Document) {
     : doc;
 }
 
-export const getLastKnownDoc = async ({
+export const getPersistedDoc = async ({
   initialInput,
   attributeService,
   data,
@@ -368,7 +377,7 @@ export const getLastKnownDoc = async ({
   data: DataPublicPluginStart;
   notifications: NotificationsStart;
   chrome: ChromeStart;
-}): Promise<{ doc: Document; indexPatterns: IndexPattern[] } | undefined> => {
+}): Promise<Document | undefined> => {
   let doc: Document;
 
   try {
@@ -387,19 +396,12 @@ export const getLastKnownDoc = async ({
         initialInput.savedObjectId
       );
     }
-    const indexPatternIds = uniq(
-      doc.references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id)
-    );
-    const { indexPatterns } = await getAllIndexPatterns(indexPatternIds, data.indexPatterns);
 
     // Don't overwrite any pinned filters
     data.query.filterManager.setAppFilters(
       injectFilterReferences(doc.state.filters, doc.references)
     );
-    return {
-      doc,
-      indexPatterns,
-    };
+    return doc;
   } catch (e) {
     notifications.toasts.addDanger(
       i18n.translate('xpack.lens.app.docLoadingError', {
diff --git a/x-pack/plugins/lens/public/app_plugin/types.ts b/x-pack/plugins/lens/public/app_plugin/types.ts
index b4e7f18ccfeb8..7f1c21fa5a9bd 100644
--- a/x-pack/plugins/lens/public/app_plugin/types.ts
+++ b/x-pack/plugins/lens/public/app_plugin/types.ts
@@ -34,7 +34,7 @@ import {
   EmbeddableEditorState,
   EmbeddableStateTransfer,
 } from '../../../../../src/plugins/embeddable/public';
-import { EditorFrameInstance } from '../types';
+import { Datasource, EditorFrameInstance, Visualization } from '../types';
 import { PresentationUtilPluginStart } from '../../../../../src/plugins/presentation_util/public';
 export interface RedirectToOriginProps {
   input?: LensEmbeddableInput;
@@ -54,7 +54,8 @@ export interface LensAppProps {
 
   // State passed in by the container which is used to determine the id of the Originating App.
   incomingState?: EmbeddableEditorState;
-  initialContext?: VisualizeFieldContext;
+  datasourceMap: Record<string, Datasource>;
+  visualizationMap: Record<string, Visualization>;
 }
 
 export type RunSave = (
@@ -81,6 +82,8 @@ export interface LensTopNavMenuProps {
   indicateNoData: boolean;
   setIsSaveModalVisible: React.Dispatch<React.SetStateAction<boolean>>;
   runSave: RunSave;
+  datasourceMap: Record<string, Datasource>;
+  title?: string;
 }
 
 export interface HistoryLocationState {
diff --git a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
index 3479a9e964d53..d755c5c297d04 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { EuiButtonGroup, EuiComboBox, EuiFieldText } from '@elastic/eui';
 import { FramePublicAPI, Operation, VisualizationDimensionEditorProps } from '../../types';
 import { DatatableVisualizationState } from '../visualization';
-import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
 import { mountWithIntl } from '@kbn/test/jest';
 import { TableDimensionEditor } from './dimension_editor';
 import { chartPluginMock } from 'src/plugins/charts/public/mocks';
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
index ea8237defc291..552f0f94a67de 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
@@ -7,7 +7,7 @@
 
 import { Ast } from '@kbn/interpreter/common';
 import { buildExpression } from '../../../../../src/plugins/expressions/public';
-import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../mocks';
 import { DatatableVisualizationState, getDatatableVisualization } from './visualization';
 import {
   Operation,
@@ -21,8 +21,6 @@ import { chartPluginMock } from 'src/plugins/charts/public/mocks';
 function mockFrame(): FramePublicAPI {
   return {
     ...createMockFramePublicAPI(),
-    addNewLayer: () => 'aaa',
-    removeLayers: () => {},
     datasourceLayers: {},
     query: { query: '', language: 'lucene' },
     dateRange: {
@@ -40,7 +38,7 @@ const datatableVisualization = getDatatableVisualization({
 describe('Datatable Visualization', () => {
   describe('#initialize', () => {
     it('should initialize from the empty state', () => {
-      expect(datatableVisualization.initialize(mockFrame(), undefined)).toEqual({
+      expect(datatableVisualization.initialize(() => 'aaa', undefined)).toEqual({
         layerId: 'aaa',
         columns: [],
       });
@@ -51,7 +49,7 @@ describe('Datatable Visualization', () => {
         layerId: 'foo',
         columns: [{ columnId: 'saved' }],
       };
-      expect(datatableVisualization.initialize(mockFrame(), expectedState)).toEqual(expectedState);
+      expect(datatableVisualization.initialize(() => 'foo', expectedState)).toEqual(expectedState);
     });
   });
 
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index e48cb1b28c084..e7ab4aab88f2e 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -101,11 +101,11 @@ export const getDatatableVisualization = ({
 
   switchVisualizationType: (_, state) => state,
 
-  initialize(frame, state) {
+  initialize(addNewLayer, state) {
     return (
       state || {
         columns: [],
-        layerId: frame.addNewLayer(),
+        layerId: addNewLayer(),
       }
     );
   },
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
index 1ec48f516bd32..25d99ed9bfd41 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.test.tsx
@@ -12,13 +12,13 @@ import {
   createMockFramePublicAPI,
   createMockDatasource,
   DatasourceMock,
-} from '../../mocks';
+} from '../../../mocks';
 import { Visualization } from '../../../types';
-import { mountWithIntl } from '@kbn/test/jest';
 import { LayerPanels } from './config_panel';
 import { LayerPanel } from './layer_panel';
 import { coreMock } from 'src/core/public/mocks';
 import { generateId } from '../../../id_generator';
+import { mountWithProvider } from '../../../mocks';
 
 jest.mock('../../../id_generator');
 
@@ -54,17 +54,17 @@ describe('ConfigPanel', () => {
         vis1: mockVisualization,
         vis2: mockVisualization2,
       },
-      activeDatasourceId: 'ds1',
+      activeDatasourceId: 'mockindexpattern',
       datasourceMap: {
-        ds1: mockDatasource,
+        mockindexpattern: mockDatasource,
       },
       activeVisualization: ({
         ...mockVisualization,
         getLayerIds: () => Object.keys(frame.datasourceLayers),
-        appendLayer: true,
+        appendLayer: jest.fn(),
       } as unknown) as Visualization,
       datasourceStates: {
-        ds1: {
+        mockindexpattern: {
           isLoading: false,
           state: 'state',
         },
@@ -110,113 +110,184 @@ describe('ConfigPanel', () => {
     };
 
     mockVisualization.getLayerIds.mockReturnValue(Object.keys(frame.datasourceLayers));
-    mockDatasource = createMockDatasource('ds1');
+    mockDatasource = createMockDatasource('mockindexpattern');
   });
 
   // in what case is this test needed?
-  it('should fail to render layerPanels if the public API is out of date', () => {
+  it('should fail to render layerPanels if the public API is out of date', async () => {
     const props = getDefaultProps();
     props.framePublicAPI.datasourceLayers = {};
-    const component = mountWithIntl(<LayerPanels {...props} />);
-    expect(component.find(LayerPanel).exists()).toBe(false);
+    const { instance } = await mountWithProvider(<LayerPanels {...props} />);
+    expect(instance.find(LayerPanel).exists()).toBe(false);
   });
 
   it('allow datasources and visualizations to use setters', async () => {
     const props = getDefaultProps();
-    const component = mountWithIntl(<LayerPanels {...props} />);
-    const { updateDatasource, updateAll } = component.find(LayerPanel).props();
+    const { instance, lensStore } = await mountWithProvider(<LayerPanels {...props} />, {
+      preloadedState: {
+        datasourceStates: {
+          mockindexpattern: {
+            isLoading: false,
+            state: 'state',
+          },
+        },
+      },
+    });
+    const { updateDatasource, updateAll } = instance.find(LayerPanel).props();
 
     const updater = () => 'updated';
-    updateDatasource('ds1', updater);
-    // wait for one tick so async updater has a chance to trigger
+    updateDatasource('mockindexpattern', updater);
     await new Promise((r) => setTimeout(r, 0));
-    expect(props.dispatch).toHaveBeenCalledTimes(1);
-    expect(props.dispatch.mock.calls[0][0].updater(props.datasourceStates.ds1.state)).toEqual(
-      'updated'
-    );
+    expect(lensStore.dispatch).toHaveBeenCalledTimes(1);
+    expect(
+      (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater(
+        props.datasourceStates.mockindexpattern.state
+      )
+    ).toEqual('updated');
 
-    updateAll('ds1', updater, props.visualizationState);
+    updateAll('mockindexpattern', updater, props.visualizationState);
     // wait for one tick so async updater has a chance to trigger
     await new Promise((r) => setTimeout(r, 0));
-    expect(props.dispatch).toHaveBeenCalledTimes(2);
-    expect(props.dispatch.mock.calls[0][0].updater(props.datasourceStates.ds1.state)).toEqual(
-      'updated'
-    );
+    expect(lensStore.dispatch).toHaveBeenCalledTimes(2);
+    expect(
+      (lensStore.dispatch as jest.Mock).mock.calls[0][0].payload.updater(
+        props.datasourceStates.mockindexpattern.state
+      )
+    ).toEqual('updated');
   });
 
   describe('focus behavior when adding or removing layers', () => {
-    it('should focus the only layer when resetting the layer', () => {
-      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} />, {
-        attachTo: container,
-      });
-      const firstLayerFocusable = component
+    it('should focus the only layer when resetting the layer', async () => {
+      const { instance } = await mountWithProvider(
+        <LayerPanels {...getDefaultProps()} />,
+        {
+          preloadedState: {
+            datasourceStates: {
+              mockindexpattern: {
+                isLoading: false,
+                state: 'state',
+              },
+            },
+          },
+        },
+        {
+          attachTo: container,
+        }
+      );
+      const firstLayerFocusable = instance
         .find(LayerPanel)
         .first()
         .find('section')
         .first()
         .instance();
       act(() => {
-        component.find('[data-test-subj="lnsLayerRemove"]').first().simulate('click');
+        instance.find('[data-test-subj="lnsLayerRemove"]').first().simulate('click');
       });
       const focusedEl = document.activeElement;
       expect(focusedEl).toEqual(firstLayerFocusable);
     });
 
-    it('should focus the second layer when removing the first layer', () => {
+    it('should focus the second layer when removing the first layer', async () => {
       const defaultProps = getDefaultProps();
       // overwriting datasourceLayers to test two layers
       frame.datasourceLayers = {
         first: mockDatasource.publicAPIMock,
         second: mockDatasource.publicAPIMock,
       };
-      const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container });
-      const secondLayerFocusable = component
+      const { instance } = await mountWithProvider(
+        <LayerPanels {...defaultProps} />,
+        {
+          preloadedState: {
+            datasourceStates: {
+              mockindexpattern: {
+                isLoading: false,
+                state: 'state',
+              },
+            },
+          },
+        },
+        {
+          attachTo: container,
+        }
+      );
+
+      const secondLayerFocusable = instance
         .find(LayerPanel)
         .at(1)
         .find('section')
         .first()
         .instance();
       act(() => {
-        component.find('[data-test-subj="lnsLayerRemove"]').at(0).simulate('click');
+        instance.find('[data-test-subj="lnsLayerRemove"]').at(0).simulate('click');
       });
       const focusedEl = document.activeElement;
       expect(focusedEl).toEqual(secondLayerFocusable);
     });
 
-    it('should focus the first layer when removing the second layer', () => {
+    it('should focus the first layer when removing the second layer', async () => {
       const defaultProps = getDefaultProps();
       // overwriting datasourceLayers to test two layers
       frame.datasourceLayers = {
         first: mockDatasource.publicAPIMock,
         second: mockDatasource.publicAPIMock,
       };
-      const component = mountWithIntl(<LayerPanels {...defaultProps} />, { attachTo: container });
-      const firstLayerFocusable = component
+      const { instance } = await mountWithProvider(
+        <LayerPanels {...defaultProps} />,
+        {
+          preloadedState: {
+            datasourceStates: {
+              mockindexpattern: {
+                isLoading: false,
+                state: 'state',
+              },
+            },
+          },
+        },
+        {
+          attachTo: container,
+        }
+      );
+      const firstLayerFocusable = instance
         .find(LayerPanel)
         .first()
         .find('section')
         .first()
         .instance();
       act(() => {
-        component.find('[data-test-subj="lnsLayerRemove"]').at(2).simulate('click');
+        instance.find('[data-test-subj="lnsLayerRemove"]').at(2).simulate('click');
       });
       const focusedEl = document.activeElement;
       expect(focusedEl).toEqual(firstLayerFocusable);
     });
 
-    it('should focus the added layer', () => {
+    it('should focus the added layer', async () => {
       (generateId as jest.Mock).mockReturnValue(`second`);
-      const dispatch = jest.fn((x) => {
-        if (x.subType === 'ADD_LAYER') {
-          frame.datasourceLayers.second = mockDatasource.publicAPIMock;
-        }
-      });
 
-      const component = mountWithIntl(<LayerPanels {...getDefaultProps()} dispatch={dispatch} />, {
-        attachTo: container,
-      });
+      const { instance } = await mountWithProvider(
+        <LayerPanels {...getDefaultProps()} />,
+
+        {
+          preloadedState: {
+            datasourceStates: {
+              mockindexpattern: {
+                isLoading: false,
+                state: 'state',
+              },
+            },
+            activeDatasourceId: 'mockindexpattern',
+          },
+          dispatch: jest.fn((x) => {
+            if (x.payload.subType === 'ADD_LAYER') {
+              frame.datasourceLayers.second = mockDatasource.publicAPIMock;
+            }
+          }),
+        },
+        {
+          attachTo: container,
+        }
+      );
       act(() => {
-        component.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
+        instance.find('[data-test-subj="lnsLayerAddButton"]').first().simulate('click');
       });
       const focusedEl = document.activeElement;
       expect(focusedEl?.children[0].getAttribute('data-test-subj')).toEqual('lns-layerPanel-1');
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
index 81c044af532fb..c7147e75af59a 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx
@@ -10,13 +10,21 @@ import './config_panel.scss';
 import React, { useMemo, memo } from 'react';
 import { EuiFlexItem, EuiToolTip, EuiButton, EuiForm } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { mapValues } from 'lodash';
 import { Visualization } from '../../../types';
 import { LayerPanel } from './layer_panel';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { generateId } from '../../../id_generator';
-import { removeLayer, appendLayer } from './layer_actions';
+import { appendLayer } from './layer_actions';
 import { ConfigPanelWrapperProps } from './types';
 import { useFocusUpdate } from './use_focus_update';
+import {
+  useLensDispatch,
+  updateState,
+  updateDatasourceState,
+  updateVisualizationState,
+  setToggleFullscreen,
+} from '../../../state_management';
 
 export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: ConfigPanelWrapperProps) {
   const activeVisualization = props.visualizationMap[props.activeVisualizationId || ''];
@@ -33,13 +41,8 @@ export function LayerPanels(
     activeVisualization: Visualization;
   }
 ) {
-  const {
-    activeVisualization,
-    visualizationState,
-    dispatch,
-    activeDatasourceId,
-    datasourceMap,
-  } = props;
+  const { activeVisualization, visualizationState, activeDatasourceId, datasourceMap } = props;
+  const dispatchLens = useLensDispatch();
 
   const layerIds = activeVisualization.getLayerIds(visualizationState);
   const {
@@ -50,26 +53,28 @@ export function LayerPanels(
 
   const setVisualizationState = useMemo(
     () => (newState: unknown) => {
-      dispatch({
-        type: 'UPDATE_VISUALIZATION_STATE',
-        visualizationId: activeVisualization.id,
-        updater: newState,
-        clearStagedPreview: false,
-      });
+      dispatchLens(
+        updateVisualizationState({
+          visualizationId: activeVisualization.id,
+          updater: newState,
+          clearStagedPreview: false,
+        })
+      );
     },
-    [dispatch, activeVisualization]
+    [activeVisualization, dispatchLens]
   );
   const updateDatasource = useMemo(
     () => (datasourceId: string, newState: unknown) => {
-      dispatch({
-        type: 'UPDATE_DATASOURCE_STATE',
-        updater: (prevState: unknown) =>
-          typeof newState === 'function' ? newState(prevState) : newState,
-        datasourceId,
-        clearStagedPreview: false,
-      });
+      dispatchLens(
+        updateDatasourceState({
+          updater: (prevState: unknown) =>
+            typeof newState === 'function' ? newState(prevState) : newState,
+          datasourceId,
+          clearStagedPreview: false,
+        })
+      );
     },
-    [dispatch]
+    [dispatchLens]
   );
   const updateDatasourceAsync = useMemo(
     () => (datasourceId: string, newState: unknown) => {
@@ -86,42 +91,42 @@ export function LayerPanels(
       // React will synchronously update if this is triggered from a third party component,
       // which we don't want. The timeout lets user interaction have priority, then React updates.
       setTimeout(() => {
-        dispatch({
-          type: 'UPDATE_STATE',
-          subType: 'UPDATE_ALL_STATES',
-          updater: (prevState) => {
-            const updatedDatasourceState =
-              typeof newDatasourceState === 'function'
-                ? newDatasourceState(prevState.datasourceStates[datasourceId].state)
-                : newDatasourceState;
-            return {
-              ...prevState,
-              datasourceStates: {
-                ...prevState.datasourceStates,
-                [datasourceId]: {
-                  state: updatedDatasourceState,
-                  isLoading: false,
+        dispatchLens(
+          updateState({
+            subType: 'UPDATE_ALL_STATES',
+            updater: (prevState) => {
+              const updatedDatasourceState =
+                typeof newDatasourceState === 'function'
+                  ? newDatasourceState(prevState.datasourceStates[datasourceId].state)
+                  : newDatasourceState;
+              return {
+                ...prevState,
+                datasourceStates: {
+                  ...prevState.datasourceStates,
+                  [datasourceId]: {
+                    state: updatedDatasourceState,
+                    isLoading: false,
+                  },
+                },
+                visualization: {
+                  ...prevState.visualization,
+                  state: newVisualizationState,
                 },
-              },
-              visualization: {
-                ...prevState.visualization,
-                state: newVisualizationState,
-              },
-              stagedPreview: undefined,
-            };
-          },
-        });
+                stagedPreview: undefined,
+              };
+            },
+          })
+        );
       }, 0);
     },
-    [dispatch]
+    [dispatchLens]
   );
+
   const toggleFullscreen = useMemo(
     () => () => {
-      dispatch({
-        type: 'TOGGLE_FULLSCREEN',
-      });
+      dispatchLens(setToggleFullscreen());
     },
-    [dispatch]
+    [dispatchLens]
   );
 
   const datasourcePublicAPIs = props.framePublicAPI.datasourceLayers;
@@ -144,18 +149,41 @@ export function LayerPanels(
             updateAll={updateAll}
             isOnlyLayer={layerIds.length === 1}
             onRemoveLayer={() => {
-              dispatch({
-                type: 'UPDATE_STATE',
-                subType: 'REMOVE_OR_CLEAR_LAYER',
-                updater: (state) =>
-                  removeLayer({
-                    activeVisualization,
-                    layerId,
-                    trackUiEvent,
-                    datasourceMap,
-                    state,
-                  }),
-              });
+              dispatchLens(
+                updateState({
+                  subType: 'REMOVE_OR_CLEAR_LAYER',
+                  updater: (state) => {
+                    const isOnlyLayer = activeVisualization
+                      .getLayerIds(state.visualization.state)
+                      .every((id) => id === layerId);
+
+                    return {
+                      ...state,
+                      datasourceStates: mapValues(
+                        state.datasourceStates,
+                        (datasourceState, datasourceId) => {
+                          const datasource = datasourceMap[datasourceId!];
+                          return {
+                            ...datasourceState,
+                            state: isOnlyLayer
+                              ? datasource.clearLayer(datasourceState.state, layerId)
+                              : datasource.removeLayer(datasourceState.state, layerId),
+                          };
+                        }
+                      ),
+                      visualization: {
+                        ...state.visualization,
+                        state:
+                          isOnlyLayer || !activeVisualization.removeLayer
+                            ? activeVisualization.clearLayer(state.visualization.state, layerId)
+                            : activeVisualization.removeLayer(state.visualization.state, layerId),
+                      },
+                      stagedPreview: undefined,
+                    };
+                  },
+                })
+              );
+
               removeLayerRef(layerId);
             }}
             toggleFullscreen={toggleFullscreen}
@@ -187,18 +215,19 @@ export function LayerPanels(
               color="text"
               onClick={() => {
                 const id = generateId();
-                dispatch({
-                  type: 'UPDATE_STATE',
-                  subType: 'ADD_LAYER',
-                  updater: (state) =>
-                    appendLayer({
-                      activeVisualization,
-                      generateId: () => id,
-                      trackUiEvent,
-                      activeDatasource: datasourceMap[activeDatasourceId],
-                      state,
-                    }),
-                });
+                dispatchLens(
+                  updateState({
+                    subType: 'ADD_LAYER',
+                    updater: (state) =>
+                      appendLayer({
+                        activeVisualization,
+                        generateId: () => id,
+                        trackUiEvent,
+                        activeDatasource: datasourceMap[activeDatasourceId],
+                        state,
+                      }),
+                  })
+                );
                 setNextFocusedLayerId(id);
               }}
               iconType="plusInCircleFilled"
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts
index d28d3acbf3bae..ad15be170e631 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.test.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { initialState } from '../../../state_management/lens_slice';
 import { removeLayer, appendLayer } from './layer_actions';
 
 function createTestArgs(initialLayerIds: string[]) {
@@ -42,6 +43,7 @@ function createTestArgs(initialLayerIds: string[]) {
 
   return {
     state: {
+      ...initialState,
       activeDatasourceId: 'ds1',
       datasourceStates,
       title: 'foo',
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts
index 7d8a373192ee5..328a868cfb893 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_actions.ts
@@ -6,12 +6,13 @@
  */
 
 import { mapValues } from 'lodash';
-import { EditorFrameState } from '../state_management';
+import { LensAppState } from '../../../state_management';
+
 import { Datasource, Visualization } from '../../../types';
 
 interface RemoveLayerOptions {
   trackUiEvent: (name: string) => void;
-  state: EditorFrameState;
+  state: LensAppState;
   layerId: string;
   activeVisualization: Pick<Visualization, 'getLayerIds' | 'clearLayer' | 'removeLayer'>;
   datasourceMap: Record<string, Pick<Datasource, 'clearLayer' | 'removeLayer'>>;
@@ -19,13 +20,13 @@ interface RemoveLayerOptions {
 
 interface AppendLayerOptions {
   trackUiEvent: (name: string) => void;
-  state: EditorFrameState;
+  state: LensAppState;
   generateId: () => string;
   activeDatasource: Pick<Datasource, 'insertLayer' | 'id'>;
   activeVisualization: Pick<Visualization, 'appendLayer'>;
 }
 
-export function removeLayer(opts: RemoveLayerOptions): EditorFrameState {
+export function removeLayer(opts: RemoveLayerOptions): LensAppState {
   const { state, trackUiEvent: trackUiEvent, activeVisualization, layerId, datasourceMap } = opts;
   const isOnlyLayer = activeVisualization
     .getLayerIds(state.visualization.state)
@@ -61,7 +62,7 @@ export function appendLayer({
   state,
   generateId,
   activeDatasource,
-}: AppendLayerOptions): EditorFrameState {
+}: AppendLayerOptions): LensAppState {
   trackUiEvent('layer_added');
 
   if (!activeVisualization.appendLayer) {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
index dd1241af14f5a..3bb5fca2141a0 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx
@@ -19,7 +19,7 @@ import {
   createMockFramePublicAPI,
   createMockDatasource,
   DatasourceMock,
-} from '../../mocks';
+} from '../../../mocks';
 
 jest.mock('../../../id_generator');
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
index 1af8c16fa1395..683b96c6b8773 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/types.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { Action } from '../state_management';
 import {
   Visualization,
   FramePublicAPI,
@@ -18,7 +17,6 @@ export interface ConfigPanelWrapperProps {
   visualizationState: unknown;
   visualizationMap: Record<string, Visualization>;
   activeVisualizationId: string | null;
-  dispatch: (action: Action) => void;
   framePublicAPI: FramePublicAPI;
   datasourceMap: Record<string, Datasource>;
   datasourceStates: Record<
@@ -37,7 +35,6 @@ export interface LayerPanelProps {
   visualizationState: unknown;
   datasourceMap: Record<string, Datasource>;
   activeVisualization: Visualization;
-  dispatch: (action: Action) => void;
   framePublicAPI: FramePublicAPI;
   datasourceStates: Record<
     string,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx
index 9bf03025e400f..c50d3f41479f1 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/data_panel_wrapper.tsx
@@ -7,54 +7,94 @@
 
 import './data_panel_wrapper.scss';
 
-import React, { useMemo, memo, useContext, useState } from 'react';
+import React, { useMemo, memo, useContext, useState, useEffect } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiPopover, EuiButtonIcon, EuiContextMenuPanel, EuiContextMenuItem } from '@elastic/eui';
+import { createSelector } from '@reduxjs/toolkit';
 import { NativeRenderer } from '../../native_renderer';
-import { Action } from './state_management';
 import { DragContext, DragDropIdentifier } from '../../drag_drop';
-import { StateSetter, FramePublicAPI, DatasourceDataPanelProps, Datasource } from '../../types';
-import { Query, Filter } from '../../../../../../src/plugins/data/public';
+import { StateSetter, DatasourceDataPanelProps, Datasource } from '../../types';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
+import {
+  switchDatasource,
+  useLensDispatch,
+  updateDatasourceState,
+  LensState,
+  useLensSelector,
+  setState,
+} from '../../state_management';
+import { initializeDatasources } from './state_helpers';
 
 interface DataPanelWrapperProps {
   datasourceState: unknown;
   datasourceMap: Record<string, Datasource>;
   activeDatasource: string | null;
   datasourceIsLoading: boolean;
-  dispatch: (action: Action) => void;
   showNoDataPopover: () => void;
   core: DatasourceDataPanelProps['core'];
-  query: Query;
-  dateRange: FramePublicAPI['dateRange'];
-  filters: Filter[];
   dropOntoWorkspace: (field: DragDropIdentifier) => void;
   hasSuggestionForField: (field: DragDropIdentifier) => boolean;
   plugins: { uiActions: UiActionsStart };
 }
 
+const getExternals = createSelector(
+  (state: LensState) => state.lens,
+  ({ resolvedDateRange, query, filters, datasourceStates, activeDatasourceId }) => ({
+    dateRange: resolvedDateRange,
+    query,
+    filters,
+    datasourceStates,
+    activeDatasourceId,
+  })
+);
+
 export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
-  const { dispatch, activeDatasource } = props;
-  const setDatasourceState: StateSetter<unknown> = useMemo(
-    () => (updater) => {
-      dispatch({
-        type: 'UPDATE_DATASOURCE_STATE',
-        updater,
-        datasourceId: activeDatasource!,
-        clearStagedPreview: true,
-      });
-    },
-    [dispatch, activeDatasource]
+  const { activeDatasource } = props;
+
+  const { filters, query, dateRange, datasourceStates, activeDatasourceId } = useLensSelector(
+    getExternals
   );
+  const dispatchLens = useLensDispatch();
+  const setDatasourceState: StateSetter<unknown> = useMemo(() => {
+    return (updater) => {
+      dispatchLens(
+        updateDatasourceState({
+          updater,
+          datasourceId: activeDatasource!,
+          clearStagedPreview: true,
+        })
+      );
+    };
+  }, [activeDatasource, dispatchLens]);
+
+  useEffect(() => {
+    if (activeDatasourceId && datasourceStates[activeDatasourceId].state === null) {
+      initializeDatasources(props.datasourceMap, datasourceStates, undefined, undefined, {
+        isFullEditor: true,
+      }).then((result) => {
+        const newDatasourceStates = Object.entries(result).reduce(
+          (state, [datasourceId, datasourceState]) => ({
+            ...state,
+            [datasourceId]: {
+              ...datasourceState,
+              isLoading: false,
+            },
+          }),
+          {}
+        );
+        dispatchLens(setState({ datasourceStates: newDatasourceStates }));
+      });
+    }
+  }, [datasourceStates, activeDatasourceId, props.datasourceMap, dispatchLens]);
 
   const datasourceProps: DatasourceDataPanelProps = {
     dragDropContext: useContext(DragContext),
     state: props.datasourceState,
     setState: setDatasourceState,
     core: props.core,
-    query: props.query,
-    dateRange: props.dateRange,
-    filters: props.filters,
+    filters,
+    query,
+    dateRange,
     showNoDataPopover: props.showNoDataPopover,
     dropOntoWorkspace: props.dropOntoWorkspace,
     hasSuggestionForField: props.hasSuggestionForField,
@@ -98,10 +138,7 @@ export const DataPanelWrapper = memo((props: DataPanelWrapperProps) => {
                 icon={props.activeDatasource === datasourceId ? 'check' : 'empty'}
                 onClick={() => {
                   setDatasourceSwitcher(false);
-                  props.dispatch({
-                    type: 'SWITCH_DATASOURCE',
-                    newDatasourceId: datasourceId,
-                  });
+                  dispatchLens(switchDatasource({ newDatasourceId: datasourceId }));
                 }}
               >
                 {datasourceId}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
index 0e2ba5ce8ad59..4ce68dc3bc70a 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.test.tsx
@@ -7,7 +7,6 @@
 
 import React, { ReactElement } from 'react';
 import { ReactWrapper } from 'enzyme';
-import { setState, LensRootStore } from '../../state_management/index';
 
 // Tests are executed in a jsdom environment who does not have sizing methods,
 // thus the AutoSizer will always compute a 0x0 size space
@@ -37,16 +36,17 @@ import { fromExpression } from '@kbn/interpreter/common';
 import {
   createMockVisualization,
   createMockDatasource,
-  createExpressionRendererMock,
   DatasourceMock,
-} from '../mocks';
+  createExpressionRendererMock,
+} from '../../mocks';
 import { ReactExpressionRendererType } from 'src/plugins/expressions/public';
 import { DragDrop } from '../../drag_drop';
-import { FrameLayout } from './frame_layout';
 import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks';
 import { chartPluginMock } from '../../../../../../src/plugins/charts/public/mocks';
 import { expressionsPluginMock } from '../../../../../../src/plugins/expressions/public/mocks';
 import { mockDataPlugin, mountWithProvider } from '../../mocks';
+import { setState, setToggleFullscreen } from '../../state_management';
+import { FrameLayout } from './frame_layout';
 
 function generateSuggestion(state = {}): DatasourceSuggestion {
   return {
@@ -130,68 +130,6 @@ describe('editor_frame', () => {
   });
 
   describe('initialization', () => {
-    it('should initialize initial datasource', async () => {
-      mockVisualization.getLayerIds.mockReturnValue([]);
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-      expect(mockDatasource.initialize).toHaveBeenCalled();
-    });
-
-    it('should initialize all datasources with state from doc', async () => {
-      const mockDatasource3 = createMockDatasource('testDatasource3');
-      const datasource1State = { datasource1: '' };
-      const datasource2State = { datasource2: '' };
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
-          testDatasource3: mockDatasource3,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-        persistedDoc: {
-          visualizationType: 'testVis',
-          title: '',
-          state: {
-            datasourceStates: {
-              testDatasource: datasource1State,
-              testDatasource2: datasource2State,
-            },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
-          },
-          references: [],
-        },
-      });
-
-      expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State, [], undefined, {
-        isFullEditor: true,
-      });
-      expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State, [], undefined, {
-        isFullEditor: true,
-      });
-      expect(mockDatasource3.initialize).not.toHaveBeenCalled();
-    });
-
     it('should not render something before all datasources are initialized', async () => {
       const props = {
         ...getDefaultProps(),
@@ -204,177 +142,36 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-
-      await act(async () => {
-        mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-        expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled();
-      });
-      expect(mockDatasource.renderDataPanel).toHaveBeenCalled();
-    });
-
-    it('should not initialize visualization before datasource is initialized', async () => {
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-
-      await act(async () => {
-        mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-        expect(mockVisualization.initialize).not.toHaveBeenCalled();
-      });
-
-      expect(mockVisualization.initialize).toHaveBeenCalled();
-    });
-
-    it('should pass the public frame api into visualization initialize', async () => {
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-      await act(async () => {
-        mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-        expect(mockVisualization.initialize).not.toHaveBeenCalled();
-      });
-
-      expect(mockVisualization.initialize).toHaveBeenCalledWith({
-        datasourceLayers: {},
-        addNewLayer: expect.any(Function),
-        removeLayers: expect.any(Function),
-        query: { query: '', language: 'lucene' },
-        filters: [],
-        dateRange: { fromDate: '2021-01-10T04:00:00.000Z', toDate: '2021-01-10T08:00:00.000Z' },
-        availablePalettes: props.palettes,
-        searchSessionId: 'sessionId-1',
-      });
-    });
-
-    it('should add new layer on active datasource on frame api call', async () => {
-      const initialState = { datasource2: '' };
-      mockDatasource2.initialize.mockReturnValue(Promise.resolve(initialState));
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-        persistedDoc: {
-          visualizationType: 'testVis',
-          title: '',
-          state: {
+      const lensStore = (
+        await mountWithProvider(<EditorFrame {...props} />, {
+          data: props.plugins.data,
+          preloadedState: {
+            activeDatasourceId: 'testDatasource',
             datasourceStates: {
-              testDatasource2: mockDatasource2,
+              testDatasource: {
+                isLoading: true,
+                state: {
+                  internalState1: '',
+                },
+              },
             },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
           },
-          references: [],
-        },
-      });
-      act(() => {
-        mockVisualization.initialize.mock.calls[0][0].addNewLayer();
-      });
-
-      expect(mockDatasource2.insertLayer).toHaveBeenCalledWith(initialState, expect.anything());
-    });
-
-    it('should remove layer on active datasource on frame api call', async () => {
-      const initialState = { datasource2: '' };
-      mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource2.initialize.mockReturnValue(Promise.resolve(initialState));
-      mockDatasource2.getLayers.mockReturnValue(['abc', 'def']);
-      mockDatasource2.removeLayer.mockReturnValue({ removed: true });
-      mockVisualization.getLayerIds.mockReturnValue(['first', 'abc', 'def']);
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
-        },
-        ExpressionRenderer: expressionRendererMock,
-      };
-
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-        persistedDoc: {
-          visualizationType: 'testVis',
-          title: '',
-          state: {
-            datasourceStates: {
-              testDatasource2: mockDatasource2,
+        })
+      ).lensStore;
+      expect(mockDatasource.renderDataPanel).not.toHaveBeenCalled();
+      lensStore.dispatch(
+        setState({
+          datasourceStates: {
+            testDatasource: {
+              isLoading: false,
+              state: {
+                internalState1: '',
+              },
             },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
           },
-          references: [],
-        },
-      });
-
-      act(() => {
-        mockVisualization.initialize.mock.calls[0][0].removeLayers(['abc', 'def']);
-      });
-
-      expect(mockDatasource2.removeLayer).toHaveBeenCalledWith(initialState, 'abc');
-      expect(mockDatasource2.removeLayer).toHaveBeenCalledWith({ removed: true }, 'def');
-    });
-
-    it('should render data panel after initialization is complete', async () => {
-      const initialState = {};
-      let databaseInitialized: ({}) => void;
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: {
-            ...mockDatasource,
-            initialize: () =>
-              new Promise((resolve) => {
-                databaseInitialized = resolve;
-              }),
-          },
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-
-      await act(async () => {
-        databaseInitialized!(initialState);
-      });
-      expect(mockDatasource.renderDataPanel).toHaveBeenCalledWith(
-        expect.any(Element),
-        expect.objectContaining({ state: initialState })
+        })
       );
+      expect(mockDatasource.renderDataPanel).toHaveBeenCalled();
     });
 
     it('should initialize visualization state and render config panel', async () => {
@@ -396,7 +193,12 @@ describe('editor_frame', () => {
         ExpressionRenderer: expressionRendererMock,
       };
 
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, {
+        data: props.plugins.data,
+        preloadedState: {
+          visualization: { activeId: 'testVis', state: initialState },
+        },
+      });
 
       expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
         expect.objectContaining({ state: initialState })
@@ -422,7 +224,22 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
+      instance = (
+        await mountWithProvider(<EditorFrame {...props} />, {
+          data: props.plugins.data,
+          preloadedState: {
+            visualization: { activeId: 'testVis', state: null },
+            datasourceStates: {
+              testDatasource: {
+                isLoading: false,
+                state: {
+                  internalState1: '',
+                },
+              },
+            },
+          },
+        })
+      ).instance;
 
       instance.update();
 
@@ -437,37 +254,50 @@ describe('editor_frame', () => {
       mockDatasource.toExpression.mockReturnValue('datasource');
       mockDatasource2.toExpression.mockImplementation((_state, layerId) => `datasource_${layerId}`);
       mockDatasource.initialize.mockImplementation((initialState) => Promise.resolve(initialState));
-      mockDatasource.getLayers.mockReturnValue(['first']);
+      mockDatasource.getLayers.mockReturnValue(['first', 'second']);
       mockDatasource2.initialize.mockImplementation((initialState) =>
         Promise.resolve(initialState)
       );
-      mockDatasource2.getLayers.mockReturnValue(['second', 'third']);
+      mockDatasource2.getLayers.mockReturnValue(['third']);
 
       const props = {
         ...getDefaultProps(),
         visualizationMap: {
           testVis: { ...mockVisualization, toExpression: () => 'vis' },
         },
-        datasourceMap: { testDatasource: mockDatasource, testDatasource2: mockDatasource2 },
+        datasourceMap: {
+          testDatasource: {
+            ...mockDatasource,
+            toExpression: () => 'datasource',
+          },
+          testDatasource2: {
+            ...mockDatasource2,
+            toExpression: () => 'datasource_second',
+          },
+        },
 
         ExpressionRenderer: expressionRendererMock,
       };
 
       instance = (
-        await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-          persistedDoc: {
-            visualizationType: 'testVis',
-            title: '',
-            state: {
-              datasourceStates: {
-                testDatasource: {},
-                testDatasource2: {},
+        await mountWithProvider(<EditorFrame {...props} />, {
+          data: props.plugins.data,
+          preloadedState: {
+            visualization: { activeId: 'testVis', state: null },
+            datasourceStates: {
+              testDatasource: {
+                isLoading: false,
+                state: {
+                  internalState1: '',
+                },
+              },
+              testDatasource2: {
+                isLoading: false,
+                state: {
+                  internalState1: '',
+                },
               },
-              visualization: {},
-              query: { query: '', language: 'lucene' },
-              filters: [],
             },
-            references: [],
           },
         })
       ).instance;
@@ -515,7 +345,7 @@ describe('editor_frame', () => {
                     "chain": Array [
                       Object {
                         "arguments": Object {},
-                        "function": "datasource_second",
+                        "function": "datasource",
                         "type": "function",
                       },
                     ],
@@ -525,7 +355,7 @@ describe('editor_frame', () => {
                     "chain": Array [
                       Object {
                         "arguments": Object {},
-                        "function": "datasource_third",
+                        "function": "datasource_second",
                         "type": "function",
                       },
                     ],
@@ -562,7 +392,19 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, {
+        data: props.plugins.data,
+        preloadedState: {
+          activeDatasourceId: 'testDatasource',
+          visualization: { activeId: mockVisualization.id, state: {} },
+          datasourceStates: {
+            testDatasource: {
+              isLoading: false,
+              state: '',
+            },
+          },
+        },
+      });
       const updatedState = {};
       const setDatasourceState = (mockDatasource.renderDataPanel as jest.Mock).mock.calls[0][1]
         .setState;
@@ -593,7 +435,7 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data });
 
       const setDatasourceState = (mockDatasource.renderDataPanel as jest.Mock).mock.calls[0][1]
         .setState;
@@ -629,7 +471,10 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, {
+        data: props.plugins.data,
+        preloadedState: { visualization: { activeId: mockVisualization.id, state: {} } },
+      });
 
       const updatedPublicAPI: DatasourcePublicAPI = {
         datasourceId: 'testDatasource',
@@ -659,58 +504,10 @@ describe('editor_frame', () => {
   });
 
   describe('datasource public api communication', () => {
-    it('should pass the datasource api for each layer to the visualization', async () => {
-      mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource2.getLayers.mockReturnValue(['second', 'third']);
-      mockVisualization.getLayerIds.mockReturnValue(['first', 'second', 'third']);
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-        persistedDoc: {
-          visualizationType: 'testVis',
-          title: '',
-          state: {
-            datasourceStates: {
-              testDatasource: {},
-              testDatasource2: {},
-            },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
-          },
-          references: [],
-        },
-      });
-
-      expect(mockVisualization.getConfiguration).toHaveBeenCalled();
-
-      const datasourceLayers =
-        mockVisualization.getConfiguration.mock.calls[0][0].frame.datasourceLayers;
-      expect(datasourceLayers.first).toBe(mockDatasource.publicAPIMock);
-      expect(datasourceLayers.second).toBe(mockDatasource2.publicAPIMock);
-      expect(datasourceLayers.third).toBe(mockDatasource2.publicAPIMock);
-    });
-
-    it('should create a separate datasource public api for each layer', async () => {
-      mockDatasource.initialize.mockImplementation((initialState) => Promise.resolve(initialState));
+    it('should give access to the datasource state in the datasource factory function', async () => {
+      const datasourceState = {};
+      mockDatasource.initialize.mockResolvedValue(datasourceState);
       mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource2.initialize.mockImplementation((initialState) =>
-        Promise.resolve(initialState)
-      );
-      mockDatasource2.getLayers.mockReturnValue(['second', 'third']);
-
-      const datasource1State = { datasource1: '' };
-      const datasource2State = { datasource2: '' };
 
       const props = {
         ...getDefaultProps(),
@@ -719,66 +516,22 @@ describe('editor_frame', () => {
         },
         datasourceMap: {
           testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
         },
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data, {
-        persistedDoc: {
-          visualizationType: 'testVis',
-          title: '',
-          state: {
-            datasourceStates: {
-              testDatasource: datasource1State,
-              testDatasource2: datasource2State,
+      await mountWithProvider(<EditorFrame {...props} />, {
+        data: props.plugins.data,
+        preloadedState: {
+          datasourceStates: {
+            testDatasource: {
+              isLoading: false,
+              state: {},
             },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
           },
-          references: [],
         },
       });
 
-      expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith(
-        expect.objectContaining({
-          state: datasource1State,
-          layerId: 'first',
-        })
-      );
-      expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith(
-        expect.objectContaining({
-          state: datasource2State,
-          layerId: 'second',
-        })
-      );
-      expect(mockDatasource2.getPublicAPI).toHaveBeenCalledWith(
-        expect.objectContaining({
-          state: datasource2State,
-          layerId: 'third',
-        })
-      );
-    });
-
-    it('should give access to the datasource state in the datasource factory function', async () => {
-      const datasourceState = {};
-      mockDatasource.initialize.mockResolvedValue(datasourceState);
-      mockDatasource.getLayers.mockReturnValue(['first']);
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-
       expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith({
         state: datasourceState,
         layerId: 'first',
@@ -832,7 +585,8 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
+      instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }))
+        .instance;
 
       // necessary to flush elements to dom synchronously
       instance.update();
@@ -842,14 +596,6 @@ describe('editor_frame', () => {
       instance.unmount();
     });
 
-    it('should have initialized only the initial datasource and visualization', () => {
-      expect(mockDatasource.initialize).toHaveBeenCalled();
-      expect(mockDatasource2.initialize).not.toHaveBeenCalled();
-
-      expect(mockVisualization.initialize).toHaveBeenCalled();
-      expect(mockVisualization2.initialize).not.toHaveBeenCalled();
-    });
-
     it('should initialize other datasource on switch', async () => {
       await act(async () => {
         instance.find('button[data-test-subj="datasource-switch"]').simulate('click');
@@ -859,6 +605,7 @@ describe('editor_frame', () => {
           '[data-test-subj="datasource-switch-testDatasource2"]'
         ) as HTMLButtonElement).click();
       });
+      instance.update();
       expect(mockDatasource2.initialize).toHaveBeenCalled();
     });
 
@@ -915,9 +662,7 @@ describe('editor_frame', () => {
       expect(mockDatasource.publicAPIMock.getTableSpec).toHaveBeenCalled();
       expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
       expect(mockVisualization2.initialize).toHaveBeenCalledWith(
-        expect.objectContaining({
-          datasourceLayers: expect.objectContaining({ first: mockDatasource.publicAPIMock }),
-        }),
+        expect.any(Function), // generated layerId
         undefined,
         undefined
       );
@@ -928,28 +673,6 @@ describe('editor_frame', () => {
   });
 
   describe('suggestions', () => {
-    it('should fetch suggestions of currently active datasource when initializes from visualization trigger', async () => {
-      const props = {
-        ...getDefaultProps(),
-        initialContext: {
-          indexPatternId: '1',
-          fieldName: 'test',
-        },
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-          testDatasource2: mockDatasource2,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-      };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-
-      expect(mockDatasource.getDatasourceSuggestionsForVisualizeField).toHaveBeenCalled();
-    });
-
     it('should fetch suggestions of currently active datasource', async () => {
       const props = {
         ...getDefaultProps(),
@@ -963,7 +686,7 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data });
 
       expect(mockDatasource.getDatasourceSuggestionsFromCurrentState).toHaveBeenCalled();
       expect(mockDatasource2.getDatasourceSuggestionsFromCurrentState).not.toHaveBeenCalled();
@@ -996,7 +719,7 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
+      await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data });
 
       expect(mockVisualization.getSuggestions).toHaveBeenCalled();
       expect(mockVisualization2.getSuggestions).toHaveBeenCalled();
@@ -1064,10 +787,9 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
+      instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }))
+        .instance;
 
-      // TODO why is this necessary?
-      instance.update();
       expect(
         instance
           .find('[data-test-subj="lnsSuggestion"]')
@@ -1112,18 +834,16 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
-
-      // TODO why is this necessary?
-      instance.update();
+      instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }))
+        .instance;
 
       act(() => {
         instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
       });
 
       // validation requires to calls this getConfiguration API
-      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(7);
-      expect(mockVisualization.getConfiguration).toHaveBeenCalledWith(
+      expect(mockVisualization.getConfiguration).toHaveBeenCalledTimes(6);
+      expect(mockVisualization.getConfiguration).toHaveBeenLastCalledWith(
         expect.objectContaining({
           state: suggestionVisState,
         })
@@ -1172,10 +892,8 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       };
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
-
-      // TODO why is this necessary?
-      instance.update();
+      instance = (await mountWithProvider(<EditorFrame {...props} />, { data: props.plugins.data }))
+        .instance;
 
       act(() => {
         instance.find('[data-test-subj="lnsWorkspace"]').last().simulate('drop');
@@ -1191,7 +909,6 @@ describe('editor_frame', () => {
     it('should use the currently selected visualization if possible on field drop', async () => {
       mockDatasource.getLayers.mockReturnValue(['first', 'second', 'third']);
       const suggestionVisState = {};
-
       const props = {
         ...getDefaultProps(),
         visualizationMap: {
@@ -1243,9 +960,21 @@ describe('editor_frame', () => {
 
         ExpressionRenderer: expressionRendererMock,
       } as EditorFrameProps;
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
-      // TODO why is this necessary?
-      instance.update();
+      instance = (
+        await mountWithProvider(<EditorFrame {...props} />, {
+          data: props.plugins.data,
+          preloadedState: {
+            datasourceStates: {
+              testDatasource: {
+                isLoading: false,
+                state: {
+                  internalState1: '',
+                },
+              },
+            },
+          },
+        })
+      ).instance;
 
       act(() => {
         instance.find('[data-test-subj="mockVisA"]').find(DragDrop).prop('onDrop')!(
@@ -1345,10 +1074,11 @@ describe('editor_frame', () => {
         ExpressionRenderer: expressionRendererMock,
       } as EditorFrameProps;
 
-      instance = (await mountWithProvider(<EditorFrame {...props} />, props.plugins.data)).instance;
-
-      // TODO why is this necessary?
-      instance.update();
+      instance = (
+        await mountWithProvider(<EditorFrame {...props} />, {
+          data: props.plugins.data,
+        })
+      ).instance;
 
       act(() => {
         instance.find(DragDrop).filter('[dataTestSubj="lnsWorkspace"]').prop('onDrop')!(
@@ -1389,32 +1119,21 @@ describe('editor_frame', () => {
         ExpressionRenderer: expressionRendererMock,
       };
 
-      const { instance: el } = await mountWithProvider(
-        <EditorFrame {...props} />,
-        props.plugins.data
-      );
+      const { instance: el, lensStore } = await mountWithProvider(<EditorFrame {...props} />, {
+        data: props.plugins.data,
+      });
       instance = el;
 
       expect(
         instance.find(FrameLayout).prop('suggestionsPanel') as ReactElement
       ).not.toBeUndefined();
 
-      await act(async () => {
-        (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({
-          type: 'TOGGLE_FULLSCREEN',
-        });
-      });
-
+      lensStore.dispatch(setToggleFullscreen());
       instance.update();
 
       expect(instance.find(FrameLayout).prop('suggestionsPanel') as ReactElement).toBe(false);
 
-      await act(async () => {
-        (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({
-          type: 'TOGGLE_FULLSCREEN',
-        });
-      });
-
+      lensStore.dispatch(setToggleFullscreen());
       instance.update();
 
       expect(
@@ -1422,211 +1141,4 @@ describe('editor_frame', () => {
       ).not.toBeUndefined();
     });
   });
-
-  describe('passing state back to the caller', () => {
-    let resolver: (value: unknown) => void;
-    let instance: ReactWrapper;
-
-    it('should call onChange only when the active datasource is finished loading', async () => {
-      const onChange = jest.fn();
-
-      mockDatasource.initialize.mockReturnValue(
-        new Promise((resolve) => {
-          resolver = resolve;
-        })
-      );
-      mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource.getPersistableState = jest.fn((x) => ({
-        state: x,
-        savedObjectReferences: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
-      }));
-      mockVisualization.initialize.mockReturnValue({ initialState: true });
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-        onChange,
-      };
-
-      let lensStore: LensRootStore = {} as LensRootStore;
-      await act(async () => {
-        const mounted = await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-        lensStore = mounted.lensStore;
-        expect(lensStore.dispatch).toHaveBeenCalledTimes(0);
-        resolver({});
-      });
-
-      expect(lensStore.dispatch).toHaveBeenCalledTimes(2);
-      expect(lensStore.dispatch).toHaveBeenNthCalledWith(1, {
-        payload: {
-          indexPatternsForTopNav: [{ id: '1' }],
-          lastKnownDoc: {
-            savedObjectId: undefined,
-            description: undefined,
-            references: [
-              {
-                id: '1',
-                name: 'index-pattern-0',
-                type: 'index-pattern',
-              },
-            ],
-            state: {
-              visualization: null, // Not yet loaded
-              datasourceStates: { testDatasource: {} },
-              query: { query: '', language: 'lucene' },
-              filters: [],
-            },
-            title: '',
-            type: 'lens',
-            visualizationType: 'testVis',
-          },
-        },
-        type: 'app/onChangeFromEditorFrame',
-      });
-      expect(lensStore.dispatch).toHaveBeenLastCalledWith({
-        payload: {
-          indexPatternsForTopNav: [{ id: '1' }],
-          lastKnownDoc: {
-            references: [
-              {
-                id: '1',
-                name: 'index-pattern-0',
-                type: 'index-pattern',
-              },
-            ],
-            description: undefined,
-            savedObjectId: undefined,
-            state: {
-              visualization: { initialState: true }, // Now loaded
-              datasourceStates: { testDatasource: {} },
-              query: { query: '', language: 'lucene' },
-              filters: [],
-            },
-            title: '',
-            type: 'lens',
-            visualizationType: 'testVis',
-          },
-        },
-        type: 'app/onChangeFromEditorFrame',
-      });
-    });
-
-    it('should send back a persistable document when the state changes', async () => {
-      const onChange = jest.fn();
-
-      const initialState = { datasource: '' };
-
-      mockDatasource.initialize.mockResolvedValue(initialState);
-      mockDatasource.getLayers.mockReturnValue(['first']);
-      mockVisualization.initialize.mockReturnValue({ initialState: true });
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-        onChange,
-      };
-
-      const { instance: el, lensStore } = await mountWithProvider(
-        <EditorFrame {...props} />,
-        props.plugins.data
-      );
-      instance = el;
-
-      expect(lensStore.dispatch).toHaveBeenCalledTimes(2);
-
-      mockDatasource.toExpression.mockReturnValue('data expression');
-      mockVisualization.toExpression.mockReturnValue('vis expression');
-      await act(async () => {
-        lensStore.dispatch(setState({ query: { query: 'new query', language: 'lucene' } }));
-      });
-
-      instance.update();
-
-      expect(lensStore.dispatch).toHaveBeenCalledTimes(4);
-      expect(lensStore.dispatch).toHaveBeenNthCalledWith(3, {
-        payload: {
-          query: {
-            language: 'lucene',
-            query: 'new query',
-          },
-        },
-        type: 'app/setState',
-      });
-      expect(lensStore.dispatch).toHaveBeenNthCalledWith(4, {
-        payload: {
-          lastKnownDoc: {
-            savedObjectId: undefined,
-            references: [],
-            state: {
-              datasourceStates: { testDatasource: { datasource: '' } },
-              visualization: { initialState: true },
-              query: { query: 'new query', language: 'lucene' },
-              filters: [],
-            },
-            title: '',
-            type: 'lens',
-            visualizationType: 'testVis',
-          },
-          isSaveable: true,
-        },
-        type: 'app/onChangeFromEditorFrame',
-      });
-    });
-
-    it('should call onChange when the datasource makes an internal state change', async () => {
-      const onChange = jest.fn();
-
-      mockDatasource.initialize.mockResolvedValue({});
-      mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource.getPersistableState = jest.fn((x) => ({
-        state: x,
-        savedObjectReferences: [{ type: 'index-pattern', id: '1', name: '' }],
-      }));
-      mockVisualization.initialize.mockReturnValue({ initialState: true });
-
-      const props = {
-        ...getDefaultProps(),
-        visualizationMap: {
-          testVis: mockVisualization,
-        },
-        datasourceMap: {
-          testDatasource: mockDatasource,
-        },
-
-        ExpressionRenderer: expressionRendererMock,
-        onChange,
-      };
-      const mounted = await mountWithProvider(<EditorFrame {...props} />, props.plugins.data);
-      instance = mounted.instance;
-      const { lensStore } = mounted;
-
-      expect(lensStore.dispatch).toHaveBeenCalledTimes(2);
-
-      await act(async () => {
-        (instance.find(FrameLayout).prop('dataPanel') as ReactElement)!.props.dispatch({
-          type: 'UPDATE_DATASOURCE_STATE',
-          updater: () => ({
-            newState: true,
-          }),
-          datasourceId: 'testDatasource',
-        });
-      });
-
-      expect(lensStore.dispatch).toHaveBeenCalledTimes(3);
-    });
-  });
 });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
index bd96682f427fa..4b725c4cd1850 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/editor_frame.tsx
@@ -5,118 +5,53 @@
  * 2.0.
  */
 
-import React, { useEffect, useReducer, useState, useCallback, useRef, useMemo } from 'react';
+import React, { useCallback, useRef, useMemo } from 'react';
 import { CoreStart } from 'kibana/public';
-import { isEqual } from 'lodash';
-import { PaletteRegistry } from 'src/plugins/charts/public';
-import { IndexPattern } from '../../../../../../src/plugins/data/public';
-import { getAllIndexPatterns } from '../../utils';
 import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public';
 import { Datasource, FramePublicAPI, Visualization } from '../../types';
-import { reducer, getInitialState } from './state_management';
 import { DataPanelWrapper } from './data_panel_wrapper';
 import { ConfigPanelWrapper } from './config_panel';
 import { FrameLayout } from './frame_layout';
 import { SuggestionPanel } from './suggestion_panel';
 import { WorkspacePanel } from './workspace_panel';
-import { Document } from '../../persistence/saved_object_store';
 import { DragDropIdentifier, RootDragDropProvider } from '../../drag_drop';
-import { getSavedObjectFormat } from './save';
-import { generateId } from '../../id_generator';
-import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
 import { EditorFrameStartPlugins } from '../service';
-import { initializeDatasources, createDatasourceLayers } from './state_helpers';
-import {
-  applyVisualizeFieldSuggestions,
-  getTopSuggestionForField,
-  switchToSuggestion,
-  Suggestion,
-} from './suggestion_helpers';
+import { createDatasourceLayers } from './state_helpers';
+import { getTopSuggestionForField, switchToSuggestion, Suggestion } from './suggestion_helpers';
 import { trackUiEvent } from '../../lens_ui_telemetry';
-import {
-  useLensSelector,
-  useLensDispatch,
-  LensAppState,
-  DispatchSetState,
-  onChangeFromEditorFrame,
-} from '../../state_management';
+import { useLensSelector, useLensDispatch } from '../../state_management';
 
 export interface EditorFrameProps {
   datasourceMap: Record<string, Datasource>;
   visualizationMap: Record<string, Visualization>;
   ExpressionRenderer: ReactExpressionRendererType;
-  palettes: PaletteRegistry;
-  onError: (e: { message: string }) => void;
   core: CoreStart;
   plugins: EditorFrameStartPlugins;
   showNoDataPopover: () => void;
-  initialContext?: VisualizeFieldContext;
 }
 
 export function EditorFrame(props: EditorFrameProps) {
   const {
-    filters,
-    searchSessionId,
-    savedQuery,
-    query,
-    persistedDoc,
-    indexPatternsForTopNav,
-    lastKnownDoc,
     activeData,
-    isSaveable,
     resolvedDateRange: dateRange,
-  } = useLensSelector((state) => state.app);
-  const [state, dispatch] = useReducer(reducer, { ...props, doc: persistedDoc }, getInitialState);
+    query,
+    filters,
+    searchSessionId,
+    activeDatasourceId,
+    visualization,
+    datasourceStates,
+    stagedPreview,
+    isFullscreenDatasource,
+  } = useLensSelector((state) => state.lens);
+
   const dispatchLens = useLensDispatch();
-  const dispatchChange: DispatchSetState = useCallback(
-    (s: Partial<LensAppState>) => dispatchLens(onChangeFromEditorFrame(s)),
-    [dispatchLens]
-  );
-  const [visualizeTriggerFieldContext, setVisualizeTriggerFieldContext] = useState(
-    props.initialContext
-  );
-  const { onError } = props;
-  const activeVisualization =
-    state.visualization.activeId && props.visualizationMap[state.visualization.activeId];
 
-  const allLoaded = Object.values(state.datasourceStates).every(
-    ({ isLoading }) => typeof isLoading === 'boolean' && !isLoading
-  );
+  const allLoaded = Object.values(datasourceStates).every(({ isLoading }) => isLoading === false);
 
-  // Initialize current datasource and all active datasources
-  useEffect(
-    () => {
-      // prevents executing dispatch on unmounted component
-      let isUnmounted = false;
-      if (!allLoaded) {
-        initializeDatasources(
-          props.datasourceMap,
-          state.datasourceStates,
-          persistedDoc?.references,
-          visualizeTriggerFieldContext,
-          { isFullEditor: true }
-        )
-          .then((result) => {
-            if (!isUnmounted) {
-              Object.entries(result).forEach(([datasourceId, { state: datasourceState }]) => {
-                dispatch({
-                  type: 'UPDATE_DATASOURCE_STATE',
-                  updater: datasourceState,
-                  datasourceId,
-                });
-              });
-            }
-          })
-          .catch(onError);
-      }
-      return () => {
-        isUnmounted = true;
-      };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [allLoaded, onError]
+  const datasourceLayers = React.useMemo(
+    () => createDatasourceLayers(props.datasourceMap, datasourceStates),
+    [props.datasourceMap, datasourceStates]
   );
-  const datasourceLayers = createDatasourceLayers(props.datasourceMap, state.datasourceStates);
 
   const framePublicAPI: FramePublicAPI = useMemo(
     () => ({
@@ -126,232 +61,15 @@ export function EditorFrame(props: EditorFrameProps) {
       query,
       filters,
       searchSessionId,
-      availablePalettes: props.palettes,
-
-      addNewLayer() {
-        const newLayerId = generateId();
-
-        dispatch({
-          type: 'UPDATE_LAYER',
-          datasourceId: state.activeDatasourceId!,
-          layerId: newLayerId,
-          updater: props.datasourceMap[state.activeDatasourceId!].insertLayer,
-        });
-
-        return newLayerId;
-      },
-
-      removeLayers(layerIds: string[]) {
-        if (activeVisualization && activeVisualization.removeLayer && state.visualization.state) {
-          dispatch({
-            type: 'UPDATE_VISUALIZATION_STATE',
-            visualizationId: activeVisualization.id,
-            updater: layerIds.reduce(
-              (acc, layerId) =>
-                activeVisualization.removeLayer
-                  ? activeVisualization.removeLayer(acc, layerId)
-                  : acc,
-              state.visualization.state
-            ),
-          });
-        }
-
-        layerIds.forEach((layerId) => {
-          const layerDatasourceId = Object.entries(props.datasourceMap).find(
-            ([datasourceId, datasource]) =>
-              state.datasourceStates[datasourceId] &&
-              datasource.getLayers(state.datasourceStates[datasourceId].state).includes(layerId)
-          )![0];
-          dispatch({
-            type: 'UPDATE_LAYER',
-            layerId,
-            datasourceId: layerDatasourceId,
-            updater: props.datasourceMap[layerDatasourceId].removeLayer,
-          });
-        });
-      },
     }),
-    [
-      activeData,
-      activeVisualization,
-      datasourceLayers,
-      dateRange,
-      query,
-      filters,
-      searchSessionId,
-      props.palettes,
-      props.datasourceMap,
-      state.activeDatasourceId,
-      state.datasourceStates,
-      state.visualization.state,
-    ]
-  );
-
-  useEffect(
-    () => {
-      if (persistedDoc) {
-        dispatch({
-          type: 'VISUALIZATION_LOADED',
-          doc: {
-            ...persistedDoc,
-            state: {
-              ...persistedDoc.state,
-              visualization: persistedDoc.visualizationType
-                ? props.visualizationMap[persistedDoc.visualizationType].initialize(
-                    framePublicAPI,
-                    persistedDoc.state.visualization
-                  )
-                : persistedDoc.state.visualization,
-            },
-          },
-        });
-      } else {
-        dispatch({
-          type: 'RESET',
-          state: getInitialState(props),
-        });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [persistedDoc]
-  );
-
-  // Initialize visualization as soon as all datasources are ready
-  useEffect(
-    () => {
-      if (allLoaded && state.visualization.state === null && activeVisualization) {
-        const initialVisualizationState = activeVisualization.initialize(framePublicAPI);
-        dispatch({
-          type: 'UPDATE_VISUALIZATION_STATE',
-          visualizationId: activeVisualization.id,
-          updater: initialVisualizationState,
-        });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [allLoaded, activeVisualization, state.visualization.state]
-  );
-
-  // Get suggestions for visualize field when all datasources are ready
-  useEffect(() => {
-    if (allLoaded && visualizeTriggerFieldContext && !persistedDoc) {
-      applyVisualizeFieldSuggestions({
-        datasourceMap: props.datasourceMap,
-        datasourceStates: state.datasourceStates,
-        visualizationMap: props.visualizationMap,
-        activeVisualizationId: state.visualization.activeId,
-        visualizationState: state.visualization.state,
-        visualizeTriggerFieldContext,
-        dispatch,
-      });
-      setVisualizeTriggerFieldContext(undefined);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [allLoaded]);
-
-  const getStateToUpdate: (
-    arg: {
-      filterableIndexPatterns: string[];
-      doc: Document;
-      isSaveable: boolean;
-    },
-    oldState: {
-      isSaveable: boolean;
-      indexPatternsForTopNav: IndexPattern[];
-      persistedDoc?: Document;
-      lastKnownDoc?: Document;
-    }
-  ) => Promise<Partial<LensAppState> | undefined> = async (
-    { filterableIndexPatterns, doc, isSaveable: incomingIsSaveable },
-    prevState
-  ) => {
-    const batchedStateToUpdate: Partial<LensAppState> = {};
-
-    if (incomingIsSaveable !== prevState.isSaveable) {
-      batchedStateToUpdate.isSaveable = incomingIsSaveable;
-    }
-
-    if (!isEqual(prevState.persistedDoc, doc) && !isEqual(prevState.lastKnownDoc, doc)) {
-      batchedStateToUpdate.lastKnownDoc = doc;
-    }
-    const hasIndexPatternsChanged =
-      prevState.indexPatternsForTopNav.length !== filterableIndexPatterns.length ||
-      filterableIndexPatterns.some(
-        (id) => !prevState.indexPatternsForTopNav.find((indexPattern) => indexPattern.id === id)
-      );
-    // Update the cached index patterns if the user made a change to any of them
-    if (hasIndexPatternsChanged) {
-      const { indexPatterns } = await getAllIndexPatterns(
-        filterableIndexPatterns,
-        props.plugins.data.indexPatterns
-      );
-      if (indexPatterns) {
-        batchedStateToUpdate.indexPatternsForTopNav = indexPatterns;
-      }
-    }
-    if (Object.keys(batchedStateToUpdate).length) {
-      return batchedStateToUpdate;
-    }
-  };
-
-  // The frame needs to call onChange every time its internal state changes
-  useEffect(
-    () => {
-      const activeDatasource =
-        state.activeDatasourceId && !state.datasourceStates[state.activeDatasourceId].isLoading
-          ? props.datasourceMap[state.activeDatasourceId]
-          : undefined;
-
-      if (!activeDatasource || !activeVisualization) {
-        return;
-      }
-
-      const savedObjectFormat = getSavedObjectFormat({
-        activeDatasources: Object.keys(state.datasourceStates).reduce(
-          (datasourceMap, datasourceId) => ({
-            ...datasourceMap,
-            [datasourceId]: props.datasourceMap[datasourceId],
-          }),
-          {}
-        ),
-        visualization: activeVisualization,
-        state,
-        framePublicAPI,
-      });
-
-      // Frame loader (app or embeddable) is expected to call this when it loads and updates
-      // This should be replaced with a top-down state
-      getStateToUpdate(savedObjectFormat, {
-        isSaveable,
-        persistedDoc,
-        indexPatternsForTopNav,
-        lastKnownDoc,
-      }).then((batchedStateToUpdate) => {
-        if (batchedStateToUpdate) {
-          dispatchChange(batchedStateToUpdate);
-        }
-      });
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      activeVisualization,
-      state.datasourceStates,
-      state.visualization,
-      activeData,
-      query,
-      filters,
-      savedQuery,
-      state.title,
-      dispatchChange,
-    ]
+    [activeData, datasourceLayers, dateRange, query, filters, searchSessionId]
   );
 
   // Using a ref to prevent rerenders in the child components while keeping the latest state
   const getSuggestionForField = useRef<(field: DragDropIdentifier) => Suggestion | undefined>();
   getSuggestionForField.current = (field: DragDropIdentifier) => {
-    const { activeDatasourceId, datasourceStates } = state;
-    const activeVisualizationId = state.visualization.activeId;
-    const visualizationState = state.visualization.state;
+    const activeVisualizationId = visualization.activeId;
+    const visualizationState = visualization.state;
     const { visualizationMap, datasourceMap } = props;
 
     if (!field || !activeDatasourceId) {
@@ -379,93 +97,77 @@ export function EditorFrame(props: EditorFrameProps) {
       const suggestion = getSuggestionForField.current!(field);
       if (suggestion) {
         trackUiEvent('drop_onto_workspace');
-        switchToSuggestion(dispatch, suggestion, 'SWITCH_VISUALIZATION');
+        switchToSuggestion(dispatchLens, suggestion, 'SWITCH_VISUALIZATION');
       }
     },
-    [getSuggestionForField]
+    [getSuggestionForField, dispatchLens]
   );
 
   return (
     <RootDragDropProvider>
       <FrameLayout
-        isFullscreen={Boolean(state.isFullscreenDatasource)}
+        isFullscreen={Boolean(isFullscreenDatasource)}
         dataPanel={
           <DataPanelWrapper
             datasourceMap={props.datasourceMap}
-            activeDatasource={state.activeDatasourceId}
-            datasourceState={
-              state.activeDatasourceId
-                ? state.datasourceStates[state.activeDatasourceId].state
-                : null
-            }
-            datasourceIsLoading={
-              state.activeDatasourceId
-                ? state.datasourceStates[state.activeDatasourceId].isLoading
-                : true
-            }
-            dispatch={dispatch}
             core={props.core}
-            query={query}
-            dateRange={dateRange}
-            filters={filters}
+            plugins={props.plugins}
             showNoDataPopover={props.showNoDataPopover}
+            activeDatasource={activeDatasourceId}
+            datasourceState={activeDatasourceId ? datasourceStates[activeDatasourceId].state : null}
+            datasourceIsLoading={
+              activeDatasourceId ? datasourceStates[activeDatasourceId].isLoading : true
+            }
             dropOntoWorkspace={dropOntoWorkspace}
             hasSuggestionForField={hasSuggestionForField}
-            plugins={props.plugins}
           />
         }
         configPanel={
           allLoaded && (
             <ConfigPanelWrapper
-              activeDatasourceId={state.activeDatasourceId!}
+              activeDatasourceId={activeDatasourceId!}
               datasourceMap={props.datasourceMap}
-              datasourceStates={state.datasourceStates}
+              datasourceStates={datasourceStates}
               visualizationMap={props.visualizationMap}
-              activeVisualizationId={state.visualization.activeId}
-              dispatch={dispatch}
-              visualizationState={state.visualization.state}
+              activeVisualizationId={visualization.activeId}
+              visualizationState={visualization.state}
               framePublicAPI={framePublicAPI}
               core={props.core}
-              isFullscreen={Boolean(state.isFullscreenDatasource)}
+              isFullscreen={Boolean(isFullscreenDatasource)}
             />
           )
         }
         workspacePanel={
           allLoaded && (
             <WorkspacePanel
-              title={state.title}
-              activeDatasourceId={state.activeDatasourceId}
-              activeVisualizationId={state.visualization.activeId}
+              activeDatasourceId={activeDatasourceId}
+              activeVisualizationId={visualization.activeId}
               datasourceMap={props.datasourceMap}
-              datasourceStates={state.datasourceStates}
+              datasourceStates={datasourceStates}
               framePublicAPI={framePublicAPI}
-              visualizationState={state.visualization.state}
+              visualizationState={visualization.state}
               visualizationMap={props.visualizationMap}
-              dispatch={dispatch}
-              isFullscreen={Boolean(state.isFullscreenDatasource)}
+              isFullscreen={Boolean(isFullscreenDatasource)}
               ExpressionRenderer={props.ExpressionRenderer}
               core={props.core}
               plugins={props.plugins}
-              visualizeTriggerFieldContext={visualizeTriggerFieldContext}
               getSuggestionForField={getSuggestionForField.current}
             />
           )
         }
         suggestionsPanel={
           allLoaded &&
-          !state.isFullscreenDatasource && (
+          !isFullscreenDatasource && (
             <SuggestionPanel
-              frame={framePublicAPI}
-              activeDatasourceId={state.activeDatasourceId}
-              activeVisualizationId={state.visualization.activeId}
-              datasourceMap={props.datasourceMap}
-              datasourceStates={state.datasourceStates}
-              visualizationState={state.visualization.state}
               visualizationMap={props.visualizationMap}
-              dispatch={dispatch}
+              datasourceMap={props.datasourceMap}
               ExpressionRenderer={props.ExpressionRenderer}
-              stagedPreview={state.stagedPreview}
-              plugins={props.plugins}
+              stagedPreview={stagedPreview}
+              frame={framePublicAPI}
+              activeVisualizationId={visualization.activeId}
+              activeDatasourceId={activeDatasourceId}
+              datasourceStates={datasourceStates}
+              visualizationState={visualization.state}
             />
           )
         }
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts
index 66d83b1cd697f..8d4fb0683cb0c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/index.ts
@@ -7,4 +7,3 @@
 
 export * from './editor_frame';
 export * from './state_helpers';
-export * from './state_management';
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts
deleted file mode 100644
index b0bff1800d32f..0000000000000
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.test.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { getSavedObjectFormat, Props } from './save';
-import { createMockDatasource, createMockFramePublicAPI, createMockVisualization } from '../mocks';
-import { esFilters, IIndexPattern, IFieldType } from '../../../../../../src/plugins/data/public';
-
-jest.mock('./expression_helpers');
-
-describe('save editor frame state', () => {
-  const mockVisualization = createMockVisualization();
-  const mockDatasource = createMockDatasource('a');
-  const mockIndexPattern = ({ id: 'indexpattern' } as unknown) as IIndexPattern;
-  const mockField = ({ name: '@timestamp' } as unknown) as IFieldType;
-
-  mockDatasource.getPersistableState.mockImplementation((x) => ({
-    state: x,
-    savedObjectReferences: [],
-  }));
-  const saveArgs: Props = {
-    activeDatasources: {
-      indexpattern: mockDatasource,
-    },
-    visualization: mockVisualization,
-    state: {
-      title: 'aaa',
-      datasourceStates: {
-        indexpattern: {
-          state: 'hello',
-          isLoading: false,
-        },
-      },
-      activeDatasourceId: 'indexpattern',
-      visualization: { activeId: '2', state: {} },
-    },
-    framePublicAPI: {
-      ...createMockFramePublicAPI(),
-      addNewLayer: jest.fn(),
-      removeLayers: jest.fn(),
-      datasourceLayers: {
-        first: mockDatasource.publicAPIMock,
-      },
-      query: { query: '', language: 'lucene' },
-      dateRange: { fromDate: 'now-7d', toDate: 'now' },
-      filters: [esFilters.buildExistsFilter(mockField, mockIndexPattern)],
-    },
-  };
-
-  it('transforms from internal state to persisted doc format', async () => {
-    const datasource = createMockDatasource('a');
-    datasource.getPersistableState.mockImplementation((state) => ({
-      state: {
-        stuff: `${state}_datasource_persisted`,
-      },
-      savedObjectReferences: [],
-    }));
-    datasource.toExpression.mockReturnValue('my | expr');
-
-    const visualization = createMockVisualization();
-    visualization.toExpression.mockReturnValue('vis | expr');
-
-    const { doc, filterableIndexPatterns, isSaveable } = await getSavedObjectFormat({
-      ...saveArgs,
-      activeDatasources: {
-        indexpattern: datasource,
-      },
-      state: {
-        title: 'bbb',
-        datasourceStates: {
-          indexpattern: {
-            state: '2',
-            isLoading: false,
-          },
-        },
-        activeDatasourceId: 'indexpattern',
-        visualization: { activeId: '3', state: '4' },
-      },
-      visualization,
-    });
-
-    expect(filterableIndexPatterns).toEqual([]);
-    expect(isSaveable).toEqual(true);
-    expect(doc).toEqual({
-      id: undefined,
-      state: {
-        datasourceStates: {
-          indexpattern: {
-            stuff: '2_datasource_persisted',
-          },
-        },
-        visualization: '4',
-        query: { query: '', language: 'lucene' },
-        filters: [
-          {
-            meta: { indexRefName: 'filter-index-pattern-0' },
-            exists: { field: '@timestamp' },
-          },
-        ],
-      },
-      references: [
-        {
-          id: 'indexpattern',
-          name: 'filter-index-pattern-0',
-          type: 'index-pattern',
-        },
-      ],
-      title: 'bbb',
-      type: 'lens',
-      visualizationType: '3',
-    });
-  });
-});
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.ts
deleted file mode 100644
index 86a28be65d2b9..0000000000000
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/save.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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { uniq } from 'lodash';
-import { SavedObjectReference } from 'kibana/public';
-import { EditorFrameState } from './state_management';
-import { Document } from '../../persistence/saved_object_store';
-import { Datasource, Visualization, FramePublicAPI } from '../../types';
-import { extractFilterReferences } from '../../persistence';
-import { buildExpression } from './expression_helpers';
-
-export interface Props {
-  activeDatasources: Record<string, Datasource>;
-  state: EditorFrameState;
-  visualization: Visualization;
-  framePublicAPI: FramePublicAPI;
-}
-
-export function getSavedObjectFormat({
-  activeDatasources,
-  state,
-  visualization,
-  framePublicAPI,
-}: Props): {
-  doc: Document;
-  filterableIndexPatterns: string[];
-  isSaveable: boolean;
-} {
-  const datasourceStates: Record<string, unknown> = {};
-  const references: SavedObjectReference[] = [];
-  Object.entries(activeDatasources).forEach(([id, datasource]) => {
-    const { state: persistableState, savedObjectReferences } = datasource.getPersistableState(
-      state.datasourceStates[id].state
-    );
-    datasourceStates[id] = persistableState;
-    references.push(...savedObjectReferences);
-  });
-
-  const uniqueFilterableIndexPatternIds = uniq(
-    references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id)
-  );
-
-  const { persistableFilters, references: filterReferences } = extractFilterReferences(
-    framePublicAPI.filters
-  );
-
-  references.push(...filterReferences);
-
-  const expression = buildExpression({
-    visualization,
-    visualizationState: state.visualization.state,
-    datasourceMap: activeDatasources,
-    datasourceStates: state.datasourceStates,
-    datasourceLayers: framePublicAPI.datasourceLayers,
-  });
-
-  return {
-    doc: {
-      savedObjectId: state.persistedId,
-      title: state.title,
-      description: state.description,
-      type: 'lens',
-      visualizationType: state.visualization.activeId,
-      state: {
-        datasourceStates,
-        visualization: state.visualization.state,
-        query: framePublicAPI.query,
-        filters: persistableFilters,
-      },
-      references,
-    },
-    filterableIndexPatterns: uniqueFilterableIndexPatternIds,
-    isSaveable: expression !== null,
-  };
-}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
index dffb0e75f2109..e861112f3f7b4 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -19,7 +19,7 @@ import {
 import { buildExpression } from './expression_helpers';
 import { Document } from '../../persistence/saved_object_store';
 import { VisualizeFieldContext } from '../../../../../../src/plugins/ui_actions/public';
-import { getActiveDatasourceIdFromDoc } from './state_management';
+import { getActiveDatasourceIdFromDoc } from '../../utils';
 import { ErrorMessage } from '../types';
 import {
   getMissingCurrentDatasource,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts
deleted file mode 100644
index af8a9c0a85558..0000000000000
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.test.ts
+++ /dev/null
@@ -1,415 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { getInitialState, reducer } from './state_management';
-import { EditorFrameProps } from './index';
-import { Datasource, Visualization } from '../../types';
-import { createExpressionRendererMock } from '../mocks';
-import { coreMock } from 'src/core/public/mocks';
-import { uiActionsPluginMock } from '../../../../../../src/plugins/ui_actions/public/mocks';
-import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
-import { expressionsPluginMock } from '../../../../../../src/plugins/expressions/public/mocks';
-import { chartPluginMock } from 'src/plugins/charts/public/mocks';
-
-describe('editor_frame state management', () => {
-  describe('initialization', () => {
-    let props: EditorFrameProps;
-
-    beforeEach(() => {
-      props = {
-        onError: jest.fn(),
-        datasourceMap: { testDatasource: ({} as unknown) as Datasource },
-        visualizationMap: { testVis: ({ initialize: jest.fn() } as unknown) as Visualization },
-        ExpressionRenderer: createExpressionRendererMock(),
-        core: coreMock.createStart(),
-        plugins: {
-          uiActions: uiActionsPluginMock.createStartContract(),
-          data: dataPluginMock.createStartContract(),
-          expressions: expressionsPluginMock.createStartContract(),
-          charts: chartPluginMock.createStartContract(),
-        },
-        palettes: chartPluginMock.createPaletteRegistry(),
-        showNoDataPopover: jest.fn(),
-      };
-    });
-
-    it('should store initial datasource and visualization', () => {
-      const initialState = getInitialState(props);
-      expect(initialState.activeDatasourceId).toEqual('testDatasource');
-      expect(initialState.visualization.activeId).toEqual('testVis');
-    });
-
-    it('should not initialize visualization but set active id', () => {
-      const initialState = getInitialState(props);
-
-      expect(initialState.visualization.state).toBe(null);
-      expect(initialState.visualization.activeId).toBe('testVis');
-      expect(props.visualizationMap.testVis.initialize).not.toHaveBeenCalled();
-    });
-
-    it('should prefill state if doc is passed in', () => {
-      const initialState = getInitialState({
-        ...props,
-        doc: {
-          state: {
-            datasourceStates: {
-              testDatasource: { internalState1: '' },
-              testDatasource2: { internalState2: '' },
-            },
-            visualization: {},
-            query: { query: '', language: 'lucene' },
-            filters: [],
-          },
-          references: [],
-          title: '',
-          visualizationType: 'testVis',
-        },
-      });
-
-      expect(initialState.datasourceStates).toMatchInlineSnapshot(`
-        Object {
-          "testDatasource": Object {
-            "isLoading": true,
-            "state": Object {
-              "internalState1": "",
-            },
-          },
-          "testDatasource2": Object {
-            "isLoading": true,
-            "state": Object {
-              "internalState2": "",
-            },
-          },
-        }
-      `);
-      expect(initialState.visualization).toMatchInlineSnapshot(`
-        Object {
-          "activeId": "testVis",
-          "state": null,
-        }
-      `);
-    });
-
-    it('should not set active id if initiated with empty document and visualizationMap is empty', () => {
-      const initialState = getInitialState({ ...props, visualizationMap: {} });
-
-      expect(initialState.visualization.state).toEqual(null);
-      expect(initialState.visualization.activeId).toEqual(null);
-      expect(props.visualizationMap.testVis.initialize).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('state update', () => {
-    it('should update the corresponding visualization state on update', () => {
-      const newVisState = {};
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'aaa',
-          visualization: {
-            activeId: 'testVis',
-            state: {},
-          },
-        },
-        {
-          type: 'UPDATE_VISUALIZATION_STATE',
-          visualizationId: 'testVis',
-          updater: newVisState,
-        }
-      );
-
-      expect(newState.visualization.state).toBe(newVisState);
-    });
-
-    it('should update the datasource state with passed in reducer', () => {
-      const datasourceReducer = jest.fn(() => ({ changed: true }));
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'bbb',
-          visualization: {
-            activeId: 'testVis',
-            state: {},
-          },
-        },
-        {
-          type: 'UPDATE_DATASOURCE_STATE',
-          updater: datasourceReducer,
-          datasourceId: 'testDatasource',
-        }
-      );
-
-      expect(newState.datasourceStates.testDatasource.state).toEqual({ changed: true });
-      expect(datasourceReducer).toHaveBeenCalledTimes(1);
-    });
-
-    it('should update the layer state with passed in reducer', () => {
-      const newDatasourceState = {};
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'bbb',
-          visualization: {
-            activeId: 'testVis',
-            state: {},
-          },
-        },
-        {
-          type: 'UPDATE_DATASOURCE_STATE',
-          updater: newDatasourceState,
-          datasourceId: 'testDatasource',
-        }
-      );
-
-      expect(newState.datasourceStates.testDatasource.state).toBe(newDatasourceState);
-    });
-
-    it('should should switch active visualization', () => {
-      const testVisState = {};
-      const newVisState = {};
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'ccc',
-          visualization: {
-            activeId: 'testVis',
-            state: testVisState,
-          },
-        },
-        {
-          type: 'SWITCH_VISUALIZATION',
-          newVisualizationId: 'testVis2',
-          initialState: newVisState,
-        }
-      );
-
-      expect(newState.visualization.state).toBe(newVisState);
-    });
-
-    it('should should switch active visualization and update datasource state', () => {
-      const testVisState = {};
-      const newVisState = {};
-      const newDatasourceState = {};
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'ddd',
-          visualization: {
-            activeId: 'testVis',
-            state: testVisState,
-          },
-        },
-        {
-          type: 'SWITCH_VISUALIZATION',
-          newVisualizationId: 'testVis2',
-          initialState: newVisState,
-          datasourceState: newDatasourceState,
-          datasourceId: 'testDatasource',
-        }
-      );
-
-      expect(newState.visualization.state).toBe(newVisState);
-      expect(newState.datasourceStates.testDatasource.state).toBe(newDatasourceState);
-    });
-
-    it('should should switch active datasource and initialize new state', () => {
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'eee',
-          visualization: {
-            activeId: 'testVis',
-            state: {},
-          },
-        },
-        {
-          type: 'SWITCH_DATASOURCE',
-          newDatasourceId: 'testDatasource2',
-        }
-      );
-
-      expect(newState.activeDatasourceId).toEqual('testDatasource2');
-      expect(newState.datasourceStates.testDatasource2.isLoading).toEqual(true);
-    });
-
-    it('not initialize already initialized datasource on switch', () => {
-      const datasource2State = {};
-      const newState = reducer(
-        {
-          datasourceStates: {
-            testDatasource: {
-              state: {},
-              isLoading: false,
-            },
-            testDatasource2: {
-              state: datasource2State,
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'testDatasource',
-          title: 'eee',
-          visualization: {
-            activeId: 'testVis',
-            state: {},
-          },
-        },
-        {
-          type: 'SWITCH_DATASOURCE',
-          newDatasourceId: 'testDatasource2',
-        }
-      );
-
-      expect(newState.activeDatasourceId).toEqual('testDatasource2');
-      expect(newState.datasourceStates.testDatasource2.state).toBe(datasource2State);
-    });
-
-    it('should reset the state', () => {
-      const newState = reducer(
-        {
-          datasourceStates: {
-            a: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'a',
-          title: 'jjj',
-          visualization: {
-            activeId: 'b',
-            state: {},
-          },
-        },
-        {
-          type: 'RESET',
-          state: {
-            datasourceStates: {
-              z: {
-                isLoading: false,
-                state: { hola: 'muchacho' },
-              },
-            },
-            activeDatasourceId: 'z',
-            persistedId: 'bar',
-            title: 'lll',
-            visualization: {
-              activeId: 'q',
-              state: { my: 'viz' },
-            },
-          },
-        }
-      );
-
-      expect(newState).toMatchObject({
-        datasourceStates: {
-          z: {
-            isLoading: false,
-            state: { hola: 'muchacho' },
-          },
-        },
-        activeDatasourceId: 'z',
-        persistedId: 'bar',
-        visualization: {
-          activeId: 'q',
-          state: { my: 'viz' },
-        },
-      });
-    });
-
-    it('should load the state from the doc', () => {
-      const newState = reducer(
-        {
-          datasourceStates: {
-            a: {
-              state: {},
-              isLoading: false,
-            },
-          },
-          activeDatasourceId: 'a',
-          title: 'mmm',
-          visualization: {
-            activeId: 'b',
-            state: {},
-          },
-        },
-        {
-          type: 'VISUALIZATION_LOADED',
-          doc: {
-            savedObjectId: 'b',
-            state: {
-              datasourceStates: { a: { foo: 'c' } },
-              visualization: { bar: 'd' },
-              query: { query: '', language: 'lucene' },
-              filters: [],
-            },
-            title: 'heyo!',
-            description: 'My lens',
-            type: 'lens',
-            visualizationType: 'line',
-            references: [],
-          },
-        }
-      );
-
-      expect(newState).toEqual({
-        activeDatasourceId: 'a',
-        datasourceStates: {
-          a: {
-            isLoading: true,
-            state: {
-              foo: 'c',
-            },
-          },
-        },
-        persistedId: 'b',
-        title: 'heyo!',
-        description: 'My lens',
-        visualization: {
-          activeId: 'line',
-          state: {
-            bar: 'd',
-          },
-        },
-      });
-    });
-  });
-});
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts
deleted file mode 100644
index a87aa7a2cb428..0000000000000
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_management.ts
+++ /dev/null
@@ -1,293 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EditorFrameProps } from './index';
-import { Document } from '../../persistence/saved_object_store';
-
-export interface PreviewState {
-  visualization: {
-    activeId: string | null;
-    state: unknown;
-  };
-  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
-}
-
-export interface EditorFrameState extends PreviewState {
-  persistedId?: string;
-  title: string;
-  description?: string;
-  stagedPreview?: PreviewState;
-  activeDatasourceId: string | null;
-  isFullscreenDatasource?: boolean;
-}
-
-export type Action =
-  | {
-      type: 'RESET';
-      state: EditorFrameState;
-    }
-  | {
-      type: 'UPDATE_TITLE';
-      title: string;
-    }
-  | {
-      type: 'UPDATE_STATE';
-      // Just for diagnostics, so we can determine what action
-      // caused this update.
-      subType: string;
-      updater: (prevState: EditorFrameState) => EditorFrameState;
-    }
-  | {
-      type: 'UPDATE_DATASOURCE_STATE';
-      updater: unknown | ((prevState: unknown) => unknown);
-      datasourceId: string;
-      clearStagedPreview?: boolean;
-    }
-  | {
-      type: 'UPDATE_VISUALIZATION_STATE';
-      visualizationId: string;
-      updater: unknown | ((state: unknown) => unknown);
-      clearStagedPreview?: boolean;
-    }
-  | {
-      type: 'UPDATE_LAYER';
-      layerId: string;
-      datasourceId: string;
-      updater: (state: unknown, layerId: string) => unknown;
-    }
-  | {
-      type: 'VISUALIZATION_LOADED';
-      doc: Document;
-    }
-  | {
-      type: 'SWITCH_VISUALIZATION';
-      newVisualizationId: string;
-      initialState: unknown;
-    }
-  | {
-      type: 'SWITCH_VISUALIZATION';
-      newVisualizationId: string;
-      initialState: unknown;
-      datasourceState: unknown;
-      datasourceId: string;
-    }
-  | {
-      type: 'SELECT_SUGGESTION';
-      newVisualizationId: string;
-      initialState: unknown;
-      datasourceState: unknown;
-      datasourceId: string;
-    }
-  | {
-      type: 'ROLLBACK_SUGGESTION';
-    }
-  | {
-      type: 'SUBMIT_SUGGESTION';
-    }
-  | {
-      type: 'SWITCH_DATASOURCE';
-      newDatasourceId: string;
-    }
-  | {
-      type: 'TOGGLE_FULLSCREEN';
-    };
-
-export function getActiveDatasourceIdFromDoc(doc?: Document) {
-  if (!doc) {
-    return null;
-  }
-
-  const [firstDatasourceFromDoc] = Object.keys(doc.state.datasourceStates);
-  return firstDatasourceFromDoc || null;
-}
-
-export const getInitialState = (
-  params: EditorFrameProps & { doc?: Document }
-): EditorFrameState => {
-  const datasourceStates: EditorFrameState['datasourceStates'] = {};
-
-  const initialDatasourceId =
-    getActiveDatasourceIdFromDoc(params.doc) || Object.keys(params.datasourceMap)[0] || null;
-
-  const initialVisualizationId =
-    (params.doc && params.doc.visualizationType) || Object.keys(params.visualizationMap)[0] || null;
-
-  if (params.doc) {
-    Object.entries(params.doc.state.datasourceStates).forEach(([datasourceId, state]) => {
-      datasourceStates[datasourceId] = { isLoading: true, state };
-    });
-  } else if (initialDatasourceId) {
-    datasourceStates[initialDatasourceId] = {
-      state: null,
-      isLoading: true,
-    };
-  }
-
-  return {
-    title: '',
-    datasourceStates,
-    activeDatasourceId: initialDatasourceId,
-    visualization: {
-      state: null,
-      activeId: initialVisualizationId,
-    },
-  };
-};
-
-export const reducer = (state: EditorFrameState, action: Action): EditorFrameState => {
-  switch (action.type) {
-    case 'RESET':
-      return action.state;
-    case 'UPDATE_TITLE':
-      return { ...state, title: action.title };
-    case 'UPDATE_STATE':
-      return action.updater(state);
-    case 'UPDATE_LAYER':
-      return {
-        ...state,
-        datasourceStates: {
-          ...state.datasourceStates,
-          [action.datasourceId]: {
-            ...state.datasourceStates[action.datasourceId],
-            state: action.updater(
-              state.datasourceStates[action.datasourceId].state,
-              action.layerId
-            ),
-          },
-        },
-      };
-    case 'VISUALIZATION_LOADED':
-      return {
-        ...state,
-        persistedId: action.doc.savedObjectId,
-        title: action.doc.title,
-        description: action.doc.description,
-        datasourceStates: Object.entries(action.doc.state.datasourceStates).reduce(
-          (stateMap, [datasourceId, datasourceState]) => ({
-            ...stateMap,
-            [datasourceId]: {
-              isLoading: true,
-              state: datasourceState,
-            },
-          }),
-          {}
-        ),
-        activeDatasourceId: getActiveDatasourceIdFromDoc(action.doc),
-        visualization: {
-          ...state.visualization,
-          activeId: action.doc.visualizationType,
-          state: action.doc.state.visualization,
-        },
-      };
-    case 'SWITCH_DATASOURCE':
-      return {
-        ...state,
-        datasourceStates: {
-          ...state.datasourceStates,
-          [action.newDatasourceId]: state.datasourceStates[action.newDatasourceId] || {
-            state: null,
-            isLoading: true,
-          },
-        },
-        activeDatasourceId: action.newDatasourceId,
-      };
-    case 'SWITCH_VISUALIZATION':
-      return {
-        ...state,
-        datasourceStates:
-          'datasourceId' in action && action.datasourceId
-            ? {
-                ...state.datasourceStates,
-                [action.datasourceId]: {
-                  ...state.datasourceStates[action.datasourceId],
-                  state: action.datasourceState,
-                },
-              }
-            : state.datasourceStates,
-        visualization: {
-          ...state.visualization,
-          activeId: action.newVisualizationId,
-          state: action.initialState,
-        },
-        stagedPreview: undefined,
-      };
-    case 'SELECT_SUGGESTION':
-      return {
-        ...state,
-        datasourceStates:
-          'datasourceId' in action && action.datasourceId
-            ? {
-                ...state.datasourceStates,
-                [action.datasourceId]: {
-                  ...state.datasourceStates[action.datasourceId],
-                  state: action.datasourceState,
-                },
-              }
-            : state.datasourceStates,
-        visualization: {
-          ...state.visualization,
-          activeId: action.newVisualizationId,
-          state: action.initialState,
-        },
-        stagedPreview: state.stagedPreview || {
-          datasourceStates: state.datasourceStates,
-          visualization: state.visualization,
-        },
-      };
-    case 'ROLLBACK_SUGGESTION':
-      return {
-        ...state,
-        ...(state.stagedPreview || {}),
-        stagedPreview: undefined,
-      };
-    case 'SUBMIT_SUGGESTION':
-      return {
-        ...state,
-        stagedPreview: undefined,
-      };
-    case 'UPDATE_DATASOURCE_STATE':
-      return {
-        ...state,
-        datasourceStates: {
-          ...state.datasourceStates,
-          [action.datasourceId]: {
-            state:
-              typeof action.updater === 'function'
-                ? action.updater(state.datasourceStates[action.datasourceId].state)
-                : action.updater,
-            isLoading: false,
-          },
-        },
-        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
-      };
-    case 'UPDATE_VISUALIZATION_STATE':
-      if (!state.visualization.activeId) {
-        throw new Error('Invariant: visualization state got updated without active visualization');
-      }
-      // This is a safeguard that prevents us from accidentally updating the
-      // wrong visualization. This occurs in some cases due to the uncoordinated
-      // way we manage state across plugins.
-      if (state.visualization.activeId !== action.visualizationId) {
-        return state;
-      }
-      return {
-        ...state,
-        visualization: {
-          ...state.visualization,
-          state:
-            typeof action.updater === 'function'
-              ? action.updater(state.visualization.state)
-              : action.updater,
-        },
-        stagedPreview: action.clearStagedPreview ? undefined : state.stagedPreview,
-      };
-    case 'TOGGLE_FULLSCREEN':
-      return { ...state, isFullscreenDatasource: !state.isFullscreenDatasource };
-    default:
-      return state;
-  }
-};
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
index 0e8c9b962b995..6f33cc4b8aab8 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.test.ts
@@ -6,7 +6,7 @@
  */
 
 import { getSuggestions, getTopSuggestionForField } from './suggestion_helpers';
-import { createMockVisualization, createMockDatasource, DatasourceMock } from '../mocks';
+import { createMockVisualization, createMockDatasource, DatasourceMock } from '../../mocks';
 import { TableSuggestion, DatasourceSuggestion, Visualization } from '../../types';
 import { PaletteOutput } from 'src/plugins/charts/public';
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts
index bd8f134f59fbb..9fdc283c3cc29 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_helpers.ts
@@ -19,8 +19,8 @@ import {
   DatasourceSuggestion,
   DatasourcePublicAPI,
 } from '../../types';
-import { Action } from './state_management';
 import { DragDropIdentifier } from '../../drag_drop';
+import { LensDispatch, selectSuggestion, switchVisualization } from '../../state_management';
 
 export interface Suggestion {
   visualizationId: string;
@@ -132,14 +132,13 @@ export function getSuggestions({
   ).sort((a, b) => b.score - a.score);
 }
 
-export function applyVisualizeFieldSuggestions({
+export function getVisualizeFieldSuggestions({
   datasourceMap,
   datasourceStates,
   visualizationMap,
   activeVisualizationId,
   visualizationState,
   visualizeTriggerFieldContext,
-  dispatch,
 }: {
   datasourceMap: Record<string, Datasource>;
   datasourceStates: Record<
@@ -154,8 +153,7 @@ export function applyVisualizeFieldSuggestions({
   subVisualizationId?: string;
   visualizationState: unknown;
   visualizeTriggerFieldContext?: VisualizeFieldContext;
-  dispatch: (action: Action) => void;
-}): void {
+}): Suggestion | undefined {
   const suggestions = getSuggestions({
     datasourceMap,
     datasourceStates,
@@ -165,9 +163,7 @@ export function applyVisualizeFieldSuggestions({
     visualizeTriggerFieldContext,
   });
   if (suggestions.length) {
-    const selectedSuggestion =
-      suggestions.find((s) => s.visualizationId === activeVisualizationId) || suggestions[0];
-    switchToSuggestion(dispatch, selectedSuggestion, 'SWITCH_VISUALIZATION');
+    return suggestions.find((s) => s.visualizationId === activeVisualizationId) || suggestions[0];
   }
 }
 
@@ -207,22 +203,25 @@ function getVisualizationSuggestions(
 }
 
 export function switchToSuggestion(
-  dispatch: (action: Action) => void,
+  dispatchLens: LensDispatch,
   suggestion: Pick<
     Suggestion,
     'visualizationId' | 'visualizationState' | 'datasourceState' | 'datasourceId'
   >,
   type: 'SWITCH_VISUALIZATION' | 'SELECT_SUGGESTION' = 'SELECT_SUGGESTION'
 ) {
-  const action: Action = {
-    type,
+  const pickedSuggestion = {
     newVisualizationId: suggestion.visualizationId,
     initialState: suggestion.visualizationState,
     datasourceState: suggestion.datasourceState,
     datasourceId: suggestion.datasourceId!,
   };
 
-  dispatch(action);
+  dispatchLens(
+    type === 'SELECT_SUGGESTION'
+      ? selectSuggestion(pickedSuggestion)
+      : switchVisualization(pickedSuggestion)
+  );
 }
 
 export function getTopSuggestionForField(
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
index 2b755a2e8bf08..6445038e40d7c 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.test.tsx
@@ -6,7 +6,6 @@
  */
 
 import React from 'react';
-import { mountWithIntl as mount } from '@kbn/test/jest';
 import { Visualization } from '../../types';
 import {
   createMockVisualization,
@@ -14,15 +13,15 @@ import {
   createExpressionRendererMock,
   DatasourceMock,
   createMockFramePublicAPI,
-} from '../mocks';
+} from '../../mocks';
 import { act } from 'react-dom/test-utils';
 import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public';
 import { esFilters, IFieldType, IIndexPattern } from '../../../../../../src/plugins/data/public';
 import { SuggestionPanel, SuggestionPanelProps } from './suggestion_panel';
 import { getSuggestions, Suggestion } from './suggestion_helpers';
 import { EuiIcon, EuiPanel, EuiToolTip } from '@elastic/eui';
-import { dataPluginMock } from '../../../../../../src/plugins/data/public/mocks';
 import { LensIconChartDatatable } from '../../assets/chart_datatable';
+import { mountWithProvider } from '../../mocks';
 
 jest.mock('./suggestion_helpers');
 
@@ -33,7 +32,6 @@ describe('suggestion_panel', () => {
   let mockDatasource: DatasourceMock;
 
   let expressionRendererMock: ReactExpressionRendererType;
-  let dispatchMock: jest.Mock;
 
   const suggestion1State = { suggestion1: true };
   const suggestion2State = { suggestion2: true };
@@ -44,7 +42,6 @@ describe('suggestion_panel', () => {
     mockVisualization = createMockVisualization();
     mockDatasource = createMockDatasource('a');
     expressionRendererMock = createExpressionRendererMock();
-    dispatchMock = jest.fn();
 
     getSuggestionsMock.mockReturnValue([
       {
@@ -84,18 +81,16 @@ describe('suggestion_panel', () => {
         vis2: createMockVisualization(),
       },
       visualizationState: {},
-      dispatch: dispatchMock,
       ExpressionRenderer: expressionRendererMock,
       frame: createMockFramePublicAPI(),
-      plugins: { data: dataPluginMock.createStartContract() },
     };
   });
 
-  it('should list passed in suggestions', () => {
-    const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+  it('should list passed in suggestions', async () => {
+    const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
 
     expect(
-      wrapper
+      instance
         .find('[data-test-subj="lnsSuggestion"]')
         .find(EuiPanel)
         .map((el) => el.parents(EuiToolTip).prop('content'))
@@ -129,90 +124,97 @@ describe('suggestion_panel', () => {
       };
     });
 
-    it('should not update suggestions if current state is moved to staged preview', () => {
-      const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+    it('should not update suggestions if current state is moved to staged preview', async () => {
+      const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
       getSuggestionsMock.mockClear();
-      wrapper.setProps({
+      instance.setProps({
         stagedPreview,
         ...suggestionState,
       });
-      wrapper.update();
+      instance.update();
       expect(getSuggestionsMock).not.toHaveBeenCalled();
     });
 
-    it('should update suggestions if staged preview is removed', () => {
-      const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+    it('should update suggestions if staged preview is removed', async () => {
+      const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
       getSuggestionsMock.mockClear();
-      wrapper.setProps({
+      instance.setProps({
         stagedPreview,
         ...suggestionState,
       });
-      wrapper.update();
-      wrapper.setProps({
+      instance.update();
+      instance.setProps({
         stagedPreview: undefined,
         ...suggestionState,
       });
-      wrapper.update();
+      instance.update();
       expect(getSuggestionsMock).toHaveBeenCalledTimes(1);
     });
 
-    it('should highlight currently active suggestion', () => {
-      const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+    it('should highlight currently active suggestion', async () => {
+      const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
 
       act(() => {
-        wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
+        instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
       });
 
-      wrapper.update();
+      instance.update();
 
-      expect(wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).prop('className')).toContain(
+      expect(instance.find('[data-test-subj="lnsSuggestion"]').at(2).prop('className')).toContain(
         'lnsSuggestionPanel__button-isSelected'
       );
     });
 
-    it('should rollback suggestion if current panel is clicked', () => {
-      const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+    it('should rollback suggestion if current panel is clicked', async () => {
+      const { instance, lensStore } = await mountWithProvider(
+        <SuggestionPanel {...defaultProps} />
+      );
 
       act(() => {
-        wrapper.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
+        instance.find('[data-test-subj="lnsSuggestion"]').at(2).simulate('click');
       });
 
-      wrapper.update();
+      instance.update();
 
       act(() => {
-        wrapper.find('[data-test-subj="lnsSuggestion"]').at(0).simulate('click');
+        instance.find('[data-test-subj="lnsSuggestion"]').at(0).simulate('click');
       });
 
-      wrapper.update();
+      instance.update();
 
-      expect(dispatchMock).toHaveBeenCalledWith({
-        type: 'ROLLBACK_SUGGESTION',
+      expect(lensStore.dispatch).toHaveBeenCalledWith({
+        type: 'lens/rollbackSuggestion',
       });
     });
   });
 
-  it('should dispatch visualization switch action if suggestion is clicked', () => {
-    const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+  it('should dispatch visualization switch action if suggestion is clicked', async () => {
+    const { instance, lensStore } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
 
     act(() => {
-      wrapper.find('button[data-test-subj="lnsSuggestion"]').at(1).simulate('click');
+      instance.find('button[data-test-subj="lnsSuggestion"]').at(1).simulate('click');
     });
-    wrapper.update();
+    instance.update();
 
-    expect(dispatchMock).toHaveBeenCalledWith(
+    expect(lensStore.dispatch).toHaveBeenCalledWith(
       expect.objectContaining({
-        type: 'SELECT_SUGGESTION',
-        initialState: suggestion1State,
+        type: 'lens/selectSuggestion',
+        payload: {
+          datasourceId: undefined,
+          datasourceState: {},
+          initialState: { suggestion1: true },
+          newVisualizationId: 'vis',
+        },
       })
     );
   });
 
-  it('should render preview expression if there is one', () => {
+  it('should render render icon if there is no preview expression', async () => {
     mockDatasource.getLayers.mockReturnValue(['first']);
-    (getSuggestions as jest.Mock).mockReturnValue([
+    getSuggestionsMock.mockReturnValue([
       {
         datasourceState: {},
-        previewIcon: 'empty',
+        previewIcon: LensIconChartDatatable,
         score: 0.5,
         visualizationState: suggestion1State,
         visualizationId: 'vis',
@@ -225,43 +227,51 @@ describe('suggestion_panel', () => {
         visualizationState: suggestion2State,
         visualizationId: 'vis',
         title: 'Suggestion2',
+        previewExpression: 'test | expression',
       },
     ] as Suggestion[]);
 
     (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce(undefined);
     (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('test | expression');
+
+    // this call will go to the currently active visualization
+    (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('current | preview');
+
     mockDatasource.toExpression.mockReturnValue('datasource_expression');
 
-    const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern;
-    const field = ({ name: 'myfield' } as unknown) as IFieldType;
+    const { instance } = await mountWithProvider(<SuggestionPanel {...defaultProps} />);
 
-    mount(
-      <SuggestionPanel
-        {...defaultProps}
-        frame={{
-          ...createMockFramePublicAPI(),
-          filters: [esFilters.buildExistsFilter(field, indexPattern)],
-        }}
-      />
-    );
+    expect(instance.find(EuiIcon)).toHaveLength(1);
+    expect(instance.find(EuiIcon).prop('type')).toEqual(LensIconChartDatatable);
+  });
 
-    expect(expressionRendererMock).toHaveBeenCalledTimes(1);
-    const passedExpression = (expressionRendererMock as jest.Mock).mock.calls[0][0].expression;
+  it('should return no suggestion if visualization has missing index-patterns', async () => {
+    // create a layer that is referencing an indexPatterns not retrieved by the datasource
+    const missingIndexPatternsState = {
+      layers: { indexPatternId: 'a' },
+      indexPatterns: {},
+    };
+    mockDatasource.checkIntegrity.mockReturnValue(['a']);
+    const newProps = {
+      ...defaultProps,
+      datasourceStates: {
+        mock: {
+          ...defaultProps.datasourceStates.mock,
+          state: missingIndexPatternsState,
+        },
+      },
+    };
 
-    expect(passedExpression).toMatchInlineSnapshot(`
-      "kibana
-      | lens_merge_tables layerIds=\\"first\\" tables={datasource_expression}
-      | test
-      | expression"
-    `);
+    const { instance } = await mountWithProvider(<SuggestionPanel {...newProps} />);
+    expect(instance.html()).toEqual(null);
   });
 
-  it('should render render icon if there is no preview expression', () => {
+  it('should render preview expression if there is one', () => {
     mockDatasource.getLayers.mockReturnValue(['first']);
-    getSuggestionsMock.mockReturnValue([
+    (getSuggestions as jest.Mock).mockReturnValue([
       {
         datasourceState: {},
-        previewIcon: LensIconChartDatatable,
+        previewIcon: 'empty',
         score: 0.5,
         visualizationState: suggestion1State,
         visualizationId: 'vis',
@@ -274,41 +284,34 @@ describe('suggestion_panel', () => {
         visualizationState: suggestion2State,
         visualizationId: 'vis',
         title: 'Suggestion2',
-        previewExpression: 'test | expression',
       },
     ] as Suggestion[]);
 
     (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce(undefined);
     (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('test | expression');
-
-    // this call will go to the currently active visualization
-    (mockVisualization.toPreviewExpression as jest.Mock).mockReturnValueOnce('current | preview');
-
     mockDatasource.toExpression.mockReturnValue('datasource_expression');
 
-    const wrapper = mount(<SuggestionPanel {...defaultProps} />);
+    const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern;
+    const field = ({ name: 'myfield' } as unknown) as IFieldType;
 
-    expect(wrapper.find(EuiIcon)).toHaveLength(1);
-    expect(wrapper.find(EuiIcon).prop('type')).toEqual(LensIconChartDatatable);
-  });
+    mountWithProvider(
+      <SuggestionPanel
+        {...defaultProps}
+        frame={{
+          ...createMockFramePublicAPI(),
+          filters: [esFilters.buildExistsFilter(field, indexPattern)],
+        }}
+      />
+    );
 
-  it('should return no suggestion if visualization has missing index-patterns', () => {
-    // create a layer that is referencing an indexPatterns not retrieved by the datasource
-    const missingIndexPatternsState = {
-      layers: { indexPatternId: 'a' },
-      indexPatterns: {},
-    };
-    mockDatasource.checkIntegrity.mockReturnValue(['a']);
-    const newProps = {
-      ...defaultProps,
-      datasourceStates: {
-        mock: {
-          ...defaultProps.datasourceStates.mock,
-          state: missingIndexPatternsState,
-        },
-      },
-    };
-    const wrapper = mount(<SuggestionPanel {...newProps} />);
-    expect(wrapper.html()).toEqual(null);
+    expect(expressionRendererMock).toHaveBeenCalledTimes(1);
+    const passedExpression = (expressionRendererMock as jest.Mock).mock.calls[0][0].expression;
+
+    expect(passedExpression).toMatchInlineSnapshot(`
+      "kibana
+      | lens_merge_tables layerIds=\\"first\\" tables={datasource_expression}
+      | test
+      | expression"
+    `);
   });
 });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
index 8107b6646500d..6d360a09a5b49 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/suggestion_panel.tsx
@@ -24,8 +24,7 @@ import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { Ast, toExpression } from '@kbn/interpreter/common';
 import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
-import { DataPublicPluginStart, ExecutionContextSearch } from 'src/plugins/data/public';
-import { Action, PreviewState } from './state_management';
+import { ExecutionContextSearch } from 'src/plugins/data/public';
 import { Datasource, Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../types';
 import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
 import {
@@ -35,6 +34,12 @@ import {
 import { prependDatasourceExpression } from './expression_helpers';
 import { trackUiEvent, trackSuggestionEvent } from '../../lens_ui_telemetry';
 import { getMissingIndexPattern, validateDatasourceAndVisualization } from './state_helpers';
+import {
+  PreviewState,
+  rollbackSuggestion,
+  submitSuggestion,
+  useLensDispatch,
+} from '../../state_management';
 
 const MAX_SUGGESTIONS_DISPLAYED = 5;
 
@@ -51,11 +56,9 @@ export interface SuggestionPanelProps {
   activeVisualizationId: string | null;
   visualizationMap: Record<string, Visualization>;
   visualizationState: unknown;
-  dispatch: (action: Action) => void;
   ExpressionRenderer: ReactExpressionRendererType;
   frame: FramePublicAPI;
   stagedPreview?: PreviewState;
-  plugins: { data: DataPublicPluginStart };
 }
 
 const PreviewRenderer = ({
@@ -170,12 +173,12 @@ export function SuggestionPanel({
   activeVisualizationId,
   visualizationMap,
   visualizationState,
-  dispatch,
   frame,
   ExpressionRenderer: ExpressionRendererComponent,
   stagedPreview,
-  plugins,
 }: SuggestionPanelProps) {
+  const dispatchLens = useLensDispatch();
+
   const currentDatasourceStates = stagedPreview ? stagedPreview.datasourceStates : datasourceStates;
   const currentVisualizationState = stagedPreview
     ? stagedPreview.visualization.state
@@ -320,9 +323,7 @@ export function SuggestionPanel({
     if (lastSelectedSuggestion !== -1) {
       trackSuggestionEvent('back_to_current');
       setLastSelectedSuggestion(-1);
-      dispatch({
-        type: 'ROLLBACK_SUGGESTION',
-      });
+      dispatchLens(rollbackSuggestion());
     }
   }
 
@@ -352,9 +353,7 @@ export function SuggestionPanel({
                 iconType="refresh"
                 onClick={() => {
                   trackUiEvent('suggestion_confirmed');
-                  dispatch({
-                    type: 'SUBMIT_SUGGESTION',
-                  });
+                  dispatchLens(submitSuggestion());
                 }}
               >
                 {i18n.translate('xpack.lens.sugegstion.refreshSuggestionLabel', {
@@ -401,7 +400,7 @@ export function SuggestionPanel({
                   rollbackToCurrentVisualization();
                 } else {
                   setLastSelectedSuggestion(index);
-                  switchToSuggestion(dispatch, suggestion);
+                  switchToSuggestion(dispatchLens, suggestion);
                 }
               }}
               selected={index === lastSelectedSuggestion}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
index 46e287297828d..9b5766c3e3bfa 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.test.tsx
@@ -11,7 +11,8 @@ import {
   createMockVisualization,
   createMockFramePublicAPI,
   createMockDatasource,
-} from '../../mocks';
+} from '../../../mocks';
+import { mountWithProvider } from '../../../mocks';
 
 // Tests are executed in a jsdom environment who does not have sizing methods,
 // thus the AutoSizer will always compute a 0x0 size space
@@ -25,9 +26,7 @@ jest.mock('react-virtualized-auto-sizer', () => {
   };
 });
 
-import { mountWithIntl as mount } from '@kbn/test/jest';
 import { Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../../types';
-import { Action } from '../state_management';
 import { ChartSwitch } from './chart_switch';
 import { PaletteOutput } from 'src/plugins/charts/public';
 
@@ -157,6 +156,8 @@ describe('chart_switch', () => {
         keptLayerIds: ['a'],
       },
     ]);
+
+    datasource.getLayers.mockReturnValue(['a']);
     return {
       testDatasource: datasource,
     };
@@ -171,78 +172,94 @@ describe('chart_switch', () => {
     };
   }
 
-  function showFlyout(component: ReactWrapper) {
-    component.find('[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click');
+  function showFlyout(instance: ReactWrapper) {
+    instance.find('[data-test-subj="lnsChartSwitchPopover"]').first().simulate('click');
   }
 
-  function switchTo(subType: string, component: ReactWrapper) {
-    showFlyout(component);
-    component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first().simulate('click');
+  function switchTo(subType: string, instance: ReactWrapper) {
+    showFlyout(instance);
+    instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first().simulate('click');
   }
 
-  function getMenuItem(subType: string, component: ReactWrapper) {
-    showFlyout(component);
-    return component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first();
+  function getMenuItem(subType: string, instance: ReactWrapper) {
+    showFlyout(instance);
+    return instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).first();
   }
-
-  it('should use suggested state if there is a suggestion from the target visualization', () => {
-    const dispatch = jest.fn();
+  it('should use suggested state if there is a suggestion from the target visualization', async () => {
     const visualizations = mockVisualizations();
-    const component = mount(
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={'state from a'}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={mockFrame(['a'])}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: 'state from a',
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
+    switchTo('visB', instance);
 
-    expect(dispatch).toHaveBeenCalledWith({
-      initialState: 'suggestion visB',
-      newVisualizationId: 'visB',
-      type: 'SWITCH_VISUALIZATION',
-      datasourceId: 'testDatasource',
-      datasourceState: {},
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        initialState: 'suggestion visB',
+        newVisualizationId: 'visB',
+        datasourceId: 'testDatasource',
+        datasourceState: {},
+      },
     });
   });
 
-  it('should use initial state if there is no suggestion from the target visualization', () => {
-    const dispatch = jest.fn();
+  it('should use initial state if there is no suggestion from the target visualization', async () => {
     const visualizations = mockVisualizations();
     visualizations.visB.getSuggestions.mockReturnValueOnce([]);
     const frame = mockFrame(['a']);
     (frame.datasourceLayers.a.getTableSpec as jest.Mock).mockReturnValue([]);
-
-    const component = mount(
+    const datasourceMap = mockDatasourceMap();
+    const datasourceStates = mockDatasourceStates();
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          datasourceStates,
+          activeDatasourceId: 'testDatasource',
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
-
-    expect(frame.removeLayers).toHaveBeenCalledWith(['a']);
-
-    expect(dispatch).toHaveBeenCalledWith({
-      initialState: 'visB initial state',
-      newVisualizationId: 'visB',
-      type: 'SWITCH_VISUALIZATION',
+    switchTo('visB', instance);
+    expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith({}, 'a'); // from preloaded state
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        initialState: 'visB initial state',
+        newVisualizationId: 'visB',
+      },
+    });
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/updateLayer',
+      payload: expect.objectContaining({
+        datasourceId: 'testDatasource',
+        layerId: 'a',
+      }),
     });
   });
 
-  it('should indicate data loss if not all columns will be used', () => {
-    const dispatch = jest.fn();
+  it('should indicate data loss if not all columns will be used', async () => {
     const visualizations = mockVisualizations();
     const frame = mockFrame(['a']);
 
@@ -282,53 +299,59 @@ describe('chart_switch', () => {
       { columnId: 'col3' },
     ]);
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('visB', component)
+      getMenuItem('visB', instance)
         .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
         .first()
         .props().type
     ).toEqual('alert');
   });
 
-  it('should indicate data loss if not all layers will be used', () => {
-    const dispatch = jest.fn();
+  it('should indicate data loss if not all layers will be used', async () => {
     const visualizations = mockVisualizations();
     const frame = mockFrame(['a', 'b']);
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('visB', component)
+      getMenuItem('visB', instance)
         .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
         .first()
         .props().type
     ).toEqual('alert');
   });
 
-  it('should support multi-layer suggestions without data loss', () => {
-    const dispatch = jest.fn();
+  it('should support multi-layer suggestions without data loss', async () => {
     const visualizations = mockVisualizations();
     const frame = mockFrame(['a', 'b']);
 
@@ -355,75 +378,85 @@ describe('chart_switch', () => {
       },
     ]);
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={datasourceMap}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+      getMenuItem('visB', instance).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
     ).toHaveLength(0);
   });
 
-  it('should indicate data loss if no data will be used', () => {
-    const dispatch = jest.fn();
+  it('should indicate data loss if no data will be used', async () => {
     const visualizations = mockVisualizations();
     visualizations.visB.getSuggestions.mockReturnValueOnce([]);
     const frame = mockFrame(['a']);
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('visB', component)
+      getMenuItem('visB', instance)
         .find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
         .first()
         .props().type
     ).toEqual('alert');
   });
 
-  it('should not indicate data loss if there is no data', () => {
-    const dispatch = jest.fn();
+  it('should not indicate data loss if there is no data', async () => {
     const visualizations = mockVisualizations();
     visualizations.visB.getSuggestions.mockReturnValueOnce([]);
     const frame = mockFrame(['a']);
     (frame.datasourceLayers.a.getTableSpec as jest.Mock).mockReturnValue([]);
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('visB', component).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
+      getMenuItem('visB', instance).find('[data-test-subj="lnsChartSwitchPopoverAlert_visB"]')
     ).toHaveLength(0);
   });
 
-  it('should not show a warning when the subvisualization is the same', () => {
-    const dispatch = jest.fn();
+  it('should not show a warning when the subvisualization is the same', async () => {
     const frame = mockFrame(['a', 'b', 'c']);
     const visualizations = mockVisualizations();
     visualizations.visC.getVisualizationTypeId.mockReturnValue('subvisC2');
@@ -431,64 +464,81 @@ describe('chart_switch', () => {
 
     visualizations.visC.switchVisualizationType = switchVisualizationType;
 
-    const component = mount(
+    const datasourceMap = mockDatasourceMap();
+    const datasourceStates = mockDatasourceStates();
+
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visC"
-        visualizationState={{ type: 'subvisC2' }}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          datasourceStates,
+          activeDatasourceId: 'testDatasource',
+          visualization: {
+            activeId: 'visC',
+            state: { type: 'subvisC2' },
+          },
+        },
+      }
     );
 
     expect(
-      getMenuItem('subvisC2', component).find(
+      getMenuItem('subvisC2', instance).find(
         '[data-test-subj="lnsChartSwitchPopoverAlert_subvisC2"]'
       )
     ).toHaveLength(0);
   });
 
-  it('should get suggestions when switching subvisualization', () => {
-    const dispatch = jest.fn();
+  it('should get suggestions when switching subvisualization', async () => {
     const visualizations = mockVisualizations();
     visualizations.visB.getSuggestions.mockReturnValueOnce([]);
     const frame = mockFrame(['a', 'b', 'c']);
+    const datasourceMap = mockDatasourceMap();
+    datasourceMap.testDatasource.getLayers.mockReturnValue(['a', 'b', 'c']);
+    const datasourceStates = mockDatasourceStates();
 
-    const component = mount(
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          datasourceStates,
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
-
-    expect(frame.removeLayers).toHaveBeenCalledTimes(1);
-    expect(frame.removeLayers).toHaveBeenCalledWith(['a', 'b', 'c']);
-
+    switchTo('visB', instance);
+    expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith({}, 'a');
+    expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith(undefined, 'b');
+    expect(datasourceMap.testDatasource.removeLayer).toHaveBeenCalledWith(undefined, 'c');
     expect(visualizations.visB.getSuggestions).toHaveBeenCalledWith(
       expect.objectContaining({
         keptLayerIds: ['a'],
       })
     );
 
-    expect(dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'SWITCH_VISUALIZATION',
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        datasourceId: undefined,
+        datasourceState: undefined,
         initialState: 'visB initial state',
-      })
-    );
+        newVisualizationId: 'visB',
+      },
+    });
   });
 
-  it('should query main palette from active chart and pass into suggestions', () => {
-    const dispatch = jest.fn();
+  it('should query main palette from active chart and pass into suggestions', async () => {
     const visualizations = mockVisualizations();
     const mockPalette: PaletteOutput = { type: 'palette', name: 'mock' };
     visualizations.visA.getMainPalette = jest.fn(() => mockPalette);
@@ -496,19 +546,26 @@ describe('chart_switch', () => {
     const frame = mockFrame(['a', 'b', 'c']);
     const currentVisState = {};
 
-    const component = mount(
+    const datasourceMap = mockDatasourceMap();
+    datasourceMap.testDatasource.getLayers.mockReturnValue(['a', 'b', 'c']);
+
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={currentVisState}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: currentVisState,
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
+    switchTo('visB', instance);
 
     expect(visualizations.visA.getMainPalette).toHaveBeenCalledWith(currentVisState);
 
@@ -520,67 +577,76 @@ describe('chart_switch', () => {
     );
   });
 
-  it('should not remove layers when switching between subtypes', () => {
-    const dispatch = jest.fn();
+  it('should not remove layers when switching between subtypes', async () => {
     const frame = mockFrame(['a', 'b', 'c']);
     const visualizations = mockVisualizations();
     const switchVisualizationType = jest.fn(() => 'switched');
 
     visualizations.visC.switchVisualizationType = switchVisualizationType;
-
-    const component = mount(
+    const datasourceMap = mockDatasourceMap();
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visC"
-        visualizationState={{ type: 'subvisC1' }}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visC',
+            state: { type: 'subvisC1' },
+          },
+        },
+      }
     );
 
-    switchTo('subvisC3', component);
+    switchTo('subvisC3', instance);
     expect(switchVisualizationType).toHaveBeenCalledWith('subvisC3', { type: 'subvisC3' });
-    expect(dispatch).toHaveBeenCalledWith(
-      expect.objectContaining({
-        type: 'SWITCH_VISUALIZATION',
+
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        datasourceId: 'testDatasource',
+        datasourceState: {},
         initialState: 'switched',
-      })
-    );
-    expect(frame.removeLayers).not.toHaveBeenCalled();
+        newVisualizationId: 'visC',
+      },
+    });
+    expect(datasourceMap.testDatasource.removeLayer).not.toHaveBeenCalled();
   });
 
-  it('should not remove layers and initialize with existing state when switching between subtypes without data', () => {
-    const dispatch = jest.fn();
+  it('should not remove layers and initialize with existing state when switching between subtypes without data', async () => {
     const frame = mockFrame(['a']);
     frame.datasourceLayers.a.getTableSpec = jest.fn().mockReturnValue([]);
     const visualizations = mockVisualizations();
     visualizations.visC.getSuggestions = jest.fn().mockReturnValue([]);
     visualizations.visC.switchVisualizationType = jest.fn(() => 'switched');
-
-    const component = mount(
+    const datasourceMap = mockDatasourceMap();
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visC"
-        visualizationState={{ type: 'subvisC1' }}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
-        datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+        datasourceMap={datasourceMap}
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visC',
+            state: { type: 'subvisC1' },
+          },
+        },
+      }
     );
 
-    switchTo('subvisC3', component);
+    switchTo('subvisC3', instance);
 
     expect(visualizations.visC.switchVisualizationType).toHaveBeenCalledWith('subvisC3', {
       type: 'subvisC1',
     });
-    expect(frame.removeLayers).not.toHaveBeenCalled();
+    expect(datasourceMap.testDatasource.removeLayer).not.toHaveBeenCalled();
   });
 
-  it('should switch to the updated datasource state', () => {
-    const dispatch = jest.fn();
+  it('should switch to the updated datasource state', async () => {
     const visualizations = mockVisualizations();
     const frame = mockFrame(['a', 'b']);
 
@@ -615,31 +681,36 @@ describe('chart_switch', () => {
       },
     ]);
 
-    const component = mount(
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={frame}
         datasourceMap={datasourceMap}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
+    switchTo('visB', instance);
 
-    expect(dispatch).toHaveBeenCalledWith({
-      type: 'SWITCH_VISUALIZATION',
-      newVisualizationId: 'visB',
-      datasourceId: 'testDatasource',
-      datasourceState: 'testDatasource suggestion',
-      initialState: 'suggestion visB',
-    } as Action);
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        newVisualizationId: 'visB',
+        datasourceId: 'testDatasource',
+        datasourceState: 'testDatasource suggestion',
+        initialState: 'suggestion visB',
+      },
+    });
   });
 
-  it('should ensure the new visualization has the proper subtype', () => {
-    const dispatch = jest.fn();
+  it('should ensure the new visualization has the proper subtype', async () => {
     const visualizations = mockVisualizations();
     const switchVisualizationType = jest.fn(
       (visualizationType, state) => `${state} ${visualizationType}`
@@ -647,72 +718,85 @@ describe('chart_switch', () => {
 
     visualizations.visB.switchVisualizationType = switchVisualizationType;
 
-    const component = mount(
+    const { instance, lensStore } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={mockFrame(['a'])}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
-    switchTo('visB', component);
+    switchTo('visB', instance);
 
-    expect(dispatch).toHaveBeenCalledWith({
-      initialState: 'suggestion visB visB',
-      newVisualizationId: 'visB',
-      type: 'SWITCH_VISUALIZATION',
-      datasourceId: 'testDatasource',
-      datasourceState: {},
+    expect(lensStore.dispatch).toHaveBeenCalledWith({
+      type: 'lens/switchVisualization',
+      payload: {
+        initialState: 'suggestion visB visB',
+        newVisualizationId: 'visB',
+        datasourceId: 'testDatasource',
+        datasourceState: {},
+      },
     });
   });
 
-  it('should use the suggestion that matches the subtype', () => {
-    const dispatch = jest.fn();
+  it('should use the suggestion that matches the subtype', async () => {
     const visualizations = mockVisualizations();
     const switchVisualizationType = jest.fn();
 
     visualizations.visC.switchVisualizationType = switchVisualizationType;
 
-    const component = mount(
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visC"
-        visualizationState={{ type: 'subvisC3' }}
         visualizationMap={visualizations}
-        dispatch={dispatch}
         framePublicAPI={mockFrame(['a'])}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visC',
+            state: { type: 'subvisC3' },
+          },
+        },
+      }
     );
 
-    switchTo('subvisC1', component);
+    switchTo('subvisC1', instance);
     expect(switchVisualizationType).toHaveBeenCalledWith('subvisC1', {
       type: 'subvisC1',
       notPrimary: true,
     });
   });
 
-  it('should show all visualization types', () => {
-    const component = mount(
+  it('should show all visualization types', async () => {
+    const { instance } = await mountWithProvider(
       <ChartSwitch
-        visualizationId="visA"
-        visualizationState={{}}
         visualizationMap={mockVisualizations()}
-        dispatch={jest.fn()}
         framePublicAPI={mockFrame(['a', 'b'])}
         datasourceMap={mockDatasourceMap()}
-        datasourceStates={mockDatasourceStates()}
-      />
+      />,
+      {
+        preloadedState: {
+          visualization: {
+            activeId: 'visA',
+            state: {},
+          },
+        },
+      }
     );
 
-    showFlyout(component);
+    showFlyout(instance);
 
     const allDisplayed = ['visA', 'visB', 'subvisC1', 'subvisC2', 'subvisC3'].every(
-      (subType) => component.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0
+      (subType) => instance.find(`[data-test-subj="lnsChartSwitchPopover_${subType}"]`).length > 0
     );
 
     expect(allDisplayed).toBeTruthy();
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
index 0c3a992e3dd7a..f948ec6a59687 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/chart_switch.tsx
@@ -21,10 +21,16 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { Visualization, FramePublicAPI, Datasource, VisualizationType } from '../../../types';
-import { Action } from '../state_management';
 import { getSuggestions, switchToSuggestion, Suggestion } from '../suggestion_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
 import { ToolbarButton } from '../../../../../../../src/plugins/kibana_react/public';
+import {
+  updateLayer,
+  updateVisualizationState,
+  useLensDispatch,
+  useLensSelector,
+} from '../../../state_management';
+import { generateId } from '../../../id_generator/id_generator';
 
 interface VisualizationSelection {
   visualizationId: string;
@@ -38,27 +44,26 @@ interface VisualizationSelection {
 }
 
 interface Props {
-  dispatch: (action: Action) => void;
   visualizationMap: Record<string, Visualization>;
-  visualizationId: string | null;
-  visualizationState: unknown;
   framePublicAPI: FramePublicAPI;
   datasourceMap: Record<string, Datasource>;
-  datasourceStates: Record<
-    string,
-    {
-      isLoading: boolean;
-      state: unknown;
-    }
-  >;
 }
 
 type SelectableEntry = EuiSelectableOption<{ value: string }>;
 
-function VisualizationSummary(props: Props) {
-  const visualization = props.visualizationMap[props.visualizationId || ''];
+function VisualizationSummary({
+  visualizationMap,
+  visualization,
+}: {
+  visualizationMap: Record<string, Visualization>;
+  visualization: {
+    activeId: string | null;
+    state: unknown;
+  };
+}) {
+  const activeVisualization = visualizationMap[visualization.activeId || ''];
 
-  if (!visualization) {
+  if (!activeVisualization) {
     return (
       <>
         {i18n.translate('xpack.lens.configPanel.selectVisualization', {
@@ -68,7 +73,7 @@ function VisualizationSummary(props: Props) {
     );
   }
 
-  const description = visualization.getDescription(props.visualizationState);
+  const description = activeVisualization.getDescription(visualization.state);
 
   return (
     <>
@@ -99,6 +104,44 @@ function getCurrentVisualizationId(
 
 export const ChartSwitch = memo(function ChartSwitch(props: Props) {
   const [flyoutOpen, setFlyoutOpen] = useState<boolean>(false);
+  const dispatchLens = useLensDispatch();
+  const activeDatasourceId = useLensSelector((state) => state.lens.activeDatasourceId);
+  const visualization = useLensSelector((state) => state.lens.visualization);
+  const datasourceStates = useLensSelector((state) => state.lens.datasourceStates);
+
+  function removeLayers(layerIds: string[]) {
+    const activeVisualization =
+      visualization.activeId && props.visualizationMap[visualization.activeId];
+    if (activeVisualization && activeVisualization.removeLayer && visualization.state) {
+      dispatchLens(
+        updateVisualizationState({
+          visualizationId: activeVisualization.id,
+          updater: layerIds.reduce(
+            (acc, layerId) =>
+              activeVisualization.removeLayer ? activeVisualization.removeLayer(acc, layerId) : acc,
+            visualization.state
+          ),
+        })
+      );
+    }
+    layerIds.forEach((layerId) => {
+      const layerDatasourceId = Object.entries(props.datasourceMap).find(
+        ([datasourceId, datasource]) => {
+          return (
+            datasourceStates[datasourceId] &&
+            datasource.getLayers(datasourceStates[datasourceId].state).includes(layerId)
+          );
+        }
+      )![0];
+      dispatchLens(
+        updateLayer({
+          layerId,
+          datasourceId: layerDatasourceId,
+          updater: props.datasourceMap[layerDatasourceId].removeLayer,
+        })
+      );
+    });
+  }
 
   const commitSelection = (selection: VisualizationSelection) => {
     setFlyoutOpen(false);
@@ -106,7 +149,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
     trackUiEvent(`chart_switch`);
 
     switchToSuggestion(
-      props.dispatch,
+      dispatchLens,
       {
         ...selection,
         visualizationState: selection.getVisualizationState(),
@@ -118,7 +161,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
       (!selection.datasourceId && !selection.sameDatasources) ||
       selection.dataLoss === 'everything'
     ) {
-      props.framePublicAPI.removeLayers(Object.keys(props.framePublicAPI.datasourceLayers));
+      removeLayers(Object.keys(props.framePublicAPI.datasourceLayers));
     }
   };
 
@@ -136,16 +179,16 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
     );
     // Always show the active visualization as a valid selection
     if (
-      props.visualizationId === visualizationId &&
-      props.visualizationState &&
-      newVisualization.getVisualizationTypeId(props.visualizationState) === subVisualizationId
+      visualization.activeId === visualizationId &&
+      visualization.state &&
+      newVisualization.getVisualizationTypeId(visualization.state) === subVisualizationId
     ) {
       return {
         visualizationId,
         subVisualizationId,
         dataLoss: 'nothing',
         keptLayerIds: Object.keys(props.framePublicAPI.datasourceLayers),
-        getVisualizationState: () => switchVisType(subVisualizationId, props.visualizationState),
+        getVisualizationState: () => switchVisType(subVisualizationId, visualization.state),
         sameDatasources: true,
       };
     }
@@ -153,6 +196,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
     const topSuggestion = getTopSuggestion(
       props,
       visualizationId,
+      datasourceStates,
+      visualization,
       newVisualization,
       subVisualizationId
     );
@@ -171,6 +216,19 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
       dataLoss = 'nothing';
     }
 
+    function addNewLayer() {
+      const newLayerId = generateId();
+      dispatchLens(
+        updateLayer({
+          datasourceId: activeDatasourceId!,
+          layerId: newLayerId,
+          updater: props.datasourceMap[activeDatasourceId!].insertLayer,
+        })
+      );
+
+      return newLayerId;
+    }
+
     return {
       visualizationId,
       subVisualizationId,
@@ -179,29 +237,26 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
         ? () =>
             switchVisType(
               subVisualizationId,
-              newVisualization.initialize(props.framePublicAPI, topSuggestion.visualizationState)
+              newVisualization.initialize(addNewLayer, topSuggestion.visualizationState)
             )
-        : () => {
-            return switchVisType(
+        : () =>
+            switchVisType(
               subVisualizationId,
               newVisualization.initialize(
-                props.framePublicAPI,
-                props.visualizationId === newVisualization.id
-                  ? props.visualizationState
-                  : undefined,
-                props.visualizationId &&
-                  props.visualizationMap[props.visualizationId].getMainPalette
-                  ? props.visualizationMap[props.visualizationId].getMainPalette!(
-                      props.visualizationState
+                addNewLayer,
+                visualization.activeId === newVisualization.id ? visualization.state : undefined,
+                visualization.activeId &&
+                  props.visualizationMap[visualization.activeId].getMainPalette
+                  ? props.visualizationMap[visualization.activeId].getMainPalette!(
+                      visualization.state
                     )
                   : undefined
               )
-            );
-          },
+            ),
       keptLayerIds: topSuggestion ? topSuggestion.keptLayerIds : [],
       datasourceState: topSuggestion ? topSuggestion.datasourceState : undefined,
       datasourceId: topSuggestion ? topSuggestion.datasourceId : undefined,
-      sameDatasources: dataLoss === 'nothing' && props.visualizationId === newVisualization.id,
+      sameDatasources: dataLoss === 'nothing' && visualization.activeId === newVisualization.id,
     };
   }
 
@@ -213,8 +268,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
         return { visualizationTypes: [], visualizationsLookup: {} };
       }
       const subVisualizationId = getCurrentVisualizationId(
-        props.visualizationMap[props.visualizationId || ''],
-        props.visualizationState
+        props.visualizationMap[visualization.activeId || ''],
+        visualization.state
       );
       const lowercasedSearchTerm = searchTerm.toLowerCase();
       // reorganize visualizations in groups
@@ -351,8 +406,8 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
       flyoutOpen,
       props.visualizationMap,
       props.framePublicAPI,
-      props.visualizationId,
-      props.visualizationState,
+      visualization.activeId,
+      visualization.state,
       searchTerm,
     ]
   );
@@ -371,7 +426,10 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
             data-test-subj="lnsChartSwitchPopover"
             fontWeight="bold"
           >
-            <VisualizationSummary {...props} />
+            <VisualizationSummary
+              visualization={visualization}
+              visualizationMap={props.visualizationMap}
+            />
           </ToolbarButton>
         }
         isOpen={flyoutOpen}
@@ -402,7 +460,7 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
           }}
           options={visualizationTypes}
           onChange={(newOptions) => {
-            const chosenType = newOptions.find(({ checked }) => checked === 'on')!;
+            const chosenType = newOptions.find(({ checked }) => checked === 'on');
             if (!chosenType) {
               return;
             }
@@ -434,21 +492,26 @@ export const ChartSwitch = memo(function ChartSwitch(props: Props) {
 function getTopSuggestion(
   props: Props,
   visualizationId: string,
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>,
+  visualization: {
+    activeId: string | null;
+    state: unknown;
+  },
   newVisualization: Visualization<unknown>,
   subVisualizationId?: string
 ): Suggestion | undefined {
   const mainPalette =
-    props.visualizationId &&
-    props.visualizationMap[props.visualizationId] &&
-    props.visualizationMap[props.visualizationId].getMainPalette
-      ? props.visualizationMap[props.visualizationId].getMainPalette!(props.visualizationState)
+    visualization.activeId &&
+    props.visualizationMap[visualization.activeId] &&
+    props.visualizationMap[visualization.activeId].getMainPalette
+      ? props.visualizationMap[visualization.activeId].getMainPalette!(visualization.state)
       : undefined;
   const unfilteredSuggestions = getSuggestions({
     datasourceMap: props.datasourceMap,
-    datasourceStates: props.datasourceStates,
+    datasourceStates,
     visualizationMap: { [visualizationId]: newVisualization },
-    activeVisualizationId: props.visualizationId,
-    visualizationState: props.visualizationState,
+    activeVisualizationId: visualization.activeId,
+    visualizationState: visualization.state,
     subVisualizationId,
     activeData: props.framePublicAPI.activeData,
     mainPalette,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx
new file mode 100644
index 0000000000000..b7d3d211eb777
--- /dev/null
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/title.tsx
@@ -0,0 +1,27 @@
+/*
+ * 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 './workspace_panel_wrapper.scss';
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiScreenReaderOnly } from '@elastic/eui';
+import { LensState, useLensSelector } from '../../../state_management';
+
+export function WorkspaceTitle() {
+  const title = useLensSelector((state: LensState) => state.lens.persistedDoc?.title);
+  return (
+    <EuiScreenReaderOnly>
+      <h1 id="lns_ChartTitle" data-test-subj="lns_ChartTitle">
+        {title ||
+          i18n.translate('xpack.lens.chartTitle.unsaved', {
+            defaultMessage: 'Unsaved visualization',
+          })}
+      </h1>
+    </EuiScreenReaderOnly>
+  );
+}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
index 38e9bb868b26a..4feb13fcfffd9 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.test.tsx
@@ -15,7 +15,7 @@ import {
   createExpressionRendererMock,
   DatasourceMock,
   createMockFramePublicAPI,
-} from '../../mocks';
+} from '../../../mocks';
 import { mockDataPlugin, mountWithProvider } from '../../../mocks';
 jest.mock('../../../debounced_component', () => {
   return {
@@ -24,7 +24,6 @@ jest.mock('../../../debounced_component', () => {
 });
 
 import { WorkspacePanel } from './workspace_panel';
-import { mountWithIntl as mount } from '@kbn/test/jest';
 import { ReactWrapper } from 'enzyme';
 import { DragDrop, ChildDragDropProvider } from '../../../drag_drop';
 import { fromExpression } from '@kbn/interpreter/common';
@@ -56,7 +55,6 @@ const defaultProps = {
   framePublicAPI: createMockFramePublicAPI(),
   activeVisualizationId: 'vis',
   visualizationState: {},
-  dispatch: () => {},
   ExpressionRenderer: createExpressionRendererMock(),
   core: createCoreStartWithPermissions(),
   plugins: {
@@ -104,7 +102,8 @@ describe('workspace_panel', () => {
         }}
         ExpressionRenderer={expressionRendererMock}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
     expect(instance.find('[data-test-subj="empty-workspace"]')).toHaveLength(2);
@@ -119,7 +118,8 @@ describe('workspace_panel', () => {
           vis: { ...mockVisualization, toExpression: () => null },
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -135,7 +135,8 @@ describe('workspace_panel', () => {
           vis: { ...mockVisualization, toExpression: () => 'vis' },
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -169,7 +170,7 @@ describe('workspace_panel', () => {
         }}
         ExpressionRenderer={expressionRendererMock}
       />,
-      defaultProps.plugins.data
+      { data: defaultProps.plugins.data }
     );
 
     instance = mounted.instance;
@@ -209,7 +210,8 @@ describe('workspace_panel', () => {
         ExpressionRenderer={expressionRendererMock}
         plugins={{ ...props.plugins, uiActions: uiActionsMock }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -229,7 +231,6 @@ describe('workspace_panel', () => {
     };
     mockDatasource.toExpression.mockReturnValue('datasource');
     mockDatasource.getLayers.mockReturnValue(['first']);
-    const dispatch = jest.fn();
 
     const mounted = await mountWithProvider(
       <WorkspacePanel
@@ -247,10 +248,10 @@ describe('workspace_panel', () => {
         visualizationMap={{
           vis: { ...mockVisualization, toExpression: () => 'vis' },
         }}
-        dispatch={dispatch}
         ExpressionRenderer={expressionRendererMock}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
 
     instance = mounted.instance;
@@ -261,8 +262,8 @@ describe('workspace_panel', () => {
     onData(undefined, { tables: { tables: tableData } });
 
     expect(mounted.lensStore.dispatch).toHaveBeenCalledWith({
-      type: 'app/onActiveDataChange',
-      payload: { activeData: tableData },
+      type: 'lens/onActiveDataChange',
+      payload: tableData,
     });
   });
 
@@ -302,7 +303,8 @@ describe('workspace_panel', () => {
         }}
         ExpressionRenderer={expressionRendererMock}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -377,7 +379,8 @@ describe('workspace_panel', () => {
           }}
           ExpressionRenderer={expressionRendererMock}
         />,
-        defaultProps.plugins.data
+
+        { data: defaultProps.plugins.data }
       );
       instance = mounted.instance;
     });
@@ -430,7 +433,8 @@ describe('workspace_panel', () => {
           }}
           ExpressionRenderer={expressionRendererMock}
         />,
-        defaultProps.plugins.data
+
+        { data: defaultProps.plugins.data }
       );
       instance = mounted.instance;
     });
@@ -481,7 +485,8 @@ describe('workspace_panel', () => {
           vis: { ...mockVisualization, toExpression: () => 'vis' },
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -520,7 +525,8 @@ describe('workspace_panel', () => {
           management: { kibana: { indexPatterns: true } },
         })}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -559,7 +565,8 @@ describe('workspace_panel', () => {
           management: { kibana: { indexPatterns: false } },
         })}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -595,7 +602,8 @@ describe('workspace_panel', () => {
           vis: { ...mockVisualization, toExpression: () => 'vis' },
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -632,7 +640,8 @@ describe('workspace_panel', () => {
           vis: mockVisualization,
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -671,7 +680,8 @@ describe('workspace_panel', () => {
           vis: mockVisualization,
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -707,7 +717,8 @@ describe('workspace_panel', () => {
           vis: { ...mockVisualization, toExpression: () => 'vis' },
         }}
       />,
-      defaultProps.plugins.data
+
+      { data: defaultProps.plugins.data }
     );
     instance = mounted.instance;
 
@@ -742,7 +753,8 @@ describe('workspace_panel', () => {
           }}
           ExpressionRenderer={expressionRendererMock}
         />,
-        defaultProps.plugins.data
+
+        { data: defaultProps.plugins.data }
       );
       instance = mounted.instance;
     });
@@ -783,7 +795,8 @@ describe('workspace_panel', () => {
           }}
           ExpressionRenderer={expressionRendererMock}
         />,
-        defaultProps.plugins.data
+
+        { data: defaultProps.plugins.data }
       );
       instance = mounted.instance;
     });
@@ -805,7 +818,6 @@ describe('workspace_panel', () => {
   });
 
   describe('suggestions from dropping in workspace panel', () => {
-    let mockDispatch: jest.Mock;
     let mockGetSuggestionForField: jest.Mock;
     let frame: jest.Mocked<FramePublicAPI>;
 
@@ -813,12 +825,11 @@ describe('workspace_panel', () => {
 
     beforeEach(() => {
       frame = createMockFramePublicAPI();
-      mockDispatch = jest.fn();
       mockGetSuggestionForField = jest.fn();
     });
 
-    function initComponent(draggingContext = draggedField) {
-      instance = mount(
+    async function initComponent(draggingContext = draggedField) {
+      const mounted = await mountWithProvider(
         <ChildDragDropProvider
           dragging={draggingContext}
           setDragging={() => {}}
@@ -846,11 +857,12 @@ describe('workspace_panel', () => {
               vis: mockVisualization,
               vis2: mockVisualization2,
             }}
-            dispatch={mockDispatch}
             getSuggestionForField={mockGetSuggestionForField}
           />
         </ChildDragDropProvider>
       );
+      instance = mounted.instance;
+      return mounted;
     }
 
     it('should immediately transition if exactly one suggestion is returned', async () => {
@@ -860,32 +872,34 @@ describe('workspace_panel', () => {
         datasourceId: 'mock',
         visualizationState: {},
       });
-      initComponent();
+      const { lensStore } = await initComponent();
 
       instance.find(DragDrop).prop('onDrop')!(draggedField, 'field_replace');
 
-      expect(mockDispatch).toHaveBeenCalledWith({
-        type: 'SWITCH_VISUALIZATION',
-        newVisualizationId: 'vis',
-        initialState: {},
-        datasourceState: {},
-        datasourceId: 'mock',
+      expect(lensStore.dispatch).toHaveBeenCalledWith({
+        type: 'lens/switchVisualization',
+        payload: {
+          newVisualizationId: 'vis',
+          initialState: {},
+          datasourceState: {},
+          datasourceId: 'mock',
+        },
       });
     });
 
-    it('should allow to drop if there are suggestions', () => {
+    it('should allow to drop if there are suggestions', async () => {
       mockGetSuggestionForField.mockReturnValue({
         visualizationId: 'vis',
         datasourceState: {},
         datasourceId: 'mock',
         visualizationState: {},
       });
-      initComponent();
+      await initComponent();
       expect(instance.find(DragDrop).prop('dropTypes')).toBeTruthy();
     });
 
-    it('should refuse to drop if there are no suggestions', () => {
-      initComponent();
+    it('should refuse to drop if there are no suggestions', async () => {
+      await initComponent();
       expect(instance.find(DragDrop).prop('dropType')).toBeFalsy();
     });
   });
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
index 01d4e84ec4374..943dec8f0ed20 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel.tsx
@@ -33,7 +33,6 @@ import {
   ExpressionRenderError,
   ReactExpressionRendererType,
 } from '../../../../../../../src/plugins/expressions/public';
-import { Action } from '../state_management';
 import {
   Datasource,
   Visualization,
@@ -46,17 +45,20 @@ import { DragDrop, DragContext, DragDropIdentifier } from '../../../drag_drop';
 import { Suggestion, switchToSuggestion } from '../suggestion_helpers';
 import { buildExpression } from '../expression_helpers';
 import { trackUiEvent } from '../../../lens_ui_telemetry';
-import {
-  UiActionsStart,
-  VisualizeFieldContext,
-} from '../../../../../../../src/plugins/ui_actions/public';
+import { UiActionsStart } from '../../../../../../../src/plugins/ui_actions/public';
 import { VIS_EVENT_TO_TRIGGER } from '../../../../../../../src/plugins/visualizations/public';
 import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
 import { DropIllustration } from '../../../assets/drop_illustration';
 import { getOriginalRequestErrorMessages } from '../../error_helper';
 import { getMissingIndexPattern, validateDatasourceAndVisualization } from '../state_helpers';
 import { DefaultInspectorAdapters } from '../../../../../../../src/plugins/expressions/common';
-import { onActiveDataChange, useLensDispatch } from '../../../state_management';
+import {
+  onActiveDataChange,
+  useLensDispatch,
+  updateVisualizationState,
+  updateDatasourceState,
+  setSaveable,
+} from '../../../state_management';
 
 export interface WorkspacePanelProps {
   activeVisualizationId: string | null;
@@ -72,12 +74,9 @@ export interface WorkspacePanelProps {
     }
   >;
   framePublicAPI: FramePublicAPI;
-  dispatch: (action: Action) => void;
   ExpressionRenderer: ReactExpressionRendererType;
   core: CoreStart;
   plugins: { uiActions?: UiActionsStart; data: DataPublicPluginStart };
-  title?: string;
-  visualizeTriggerFieldContext?: VisualizeFieldContext;
   getSuggestionForField: (field: DragDropIdentifier) => Suggestion | undefined;
   isFullscreen: boolean;
 }
@@ -128,17 +127,15 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   datasourceMap,
   datasourceStates,
   framePublicAPI,
-  dispatch,
   core,
   plugins,
   ExpressionRenderer: ExpressionRendererComponent,
-  title,
-  visualizeTriggerFieldContext,
   suggestionForDraggedField,
   isFullscreen,
 }: Omit<WorkspacePanelProps, 'getSuggestionForField'> & {
   suggestionForDraggedField: Suggestion | undefined;
 }) {
+  const dispatchLens = useLensDispatch();
   const [localState, setLocalState] = useState<WorkspaceState>({
     expressionBuildError: undefined,
     expandError: false,
@@ -196,6 +193,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
             datasourceStates,
             datasourceLayers: framePublicAPI.datasourceLayers,
           });
+
           if (ast) {
             // expression has to be turned into a string for dirty checking - if the ast is rebuilt,
             // turning it into a string will make sure the expression renderer only re-renders if the
@@ -233,6 +231,14 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   );
 
   const expressionExists = Boolean(expression);
+  const hasLoaded = Boolean(
+    activeVisualization && visualizationState && datasourceMap && datasourceStates
+  );
+  useEffect(() => {
+    if (hasLoaded) {
+      dispatchLens(setSaveable(expressionExists));
+    }
+  }, [hasLoaded, expressionExists, dispatchLens]);
 
   const onEvent = useCallback(
     (event: ExpressionRendererEvent) => {
@@ -251,14 +257,15 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
         });
       }
       if (isLensEditEvent(event) && activeVisualization?.onEditAction) {
-        dispatch({
-          type: 'UPDATE_VISUALIZATION_STATE',
-          visualizationId: activeVisualization.id,
-          updater: (oldState: unknown) => activeVisualization.onEditAction!(oldState, event),
-        });
+        dispatchLens(
+          updateVisualizationState({
+            visualizationId: activeVisualization.id,
+            updater: (oldState: unknown) => activeVisualization.onEditAction!(oldState, event),
+          })
+        );
       }
     },
-    [plugins.uiActions, dispatch, activeVisualization]
+    [plugins.uiActions, activeVisualization, dispatchLens]
   );
 
   useEffect(() => {
@@ -275,9 +282,9 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
     if (suggestionForDraggedField) {
       trackUiEvent('drop_onto_workspace');
       trackUiEvent(expressionExists ? 'drop_non_empty' : 'drop_empty');
-      switchToSuggestion(dispatch, suggestionForDraggedField, 'SWITCH_VISUALIZATION');
+      switchToSuggestion(dispatchLens, suggestionForDraggedField, 'SWITCH_VISUALIZATION');
     }
-  }, [suggestionForDraggedField, expressionExists, dispatch]);
+  }, [suggestionForDraggedField, expressionExists, dispatchLens]);
 
   const renderEmptyWorkspace = () => {
     return (
@@ -327,9 +334,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
   };
 
   const renderVisualization = () => {
-    // we don't want to render the emptyWorkspace on visualizing field from Discover
-    // as it is specific for the drag and drop functionality and can confuse the users
-    if (expression === null && !visualizeTriggerFieldContext) {
+    if (expression === null) {
       return renderEmptyWorkspace();
     }
     return (
@@ -337,7 +342,6 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
         expression={expression}
         framePublicAPI={framePublicAPI}
         timefilter={plugins.data.query.timefilter.timefilter}
-        dispatch={dispatch}
         onEvent={onEvent}
         setLocalState={setLocalState}
         localState={{ ...localState, configurationValidationError, missingRefsErrors }}
@@ -387,9 +391,7 @@ export const InnerWorkspacePanel = React.memo(function InnerWorkspacePanel({
 
   return (
     <WorkspacePanelWrapper
-      title={title}
       framePublicAPI={framePublicAPI}
-      dispatch={dispatch}
       visualizationState={visualizationState}
       visualizationId={activeVisualizationId}
       datasourceStates={datasourceStates}
@@ -410,7 +412,6 @@ export const VisualizationWrapper = ({
   setLocalState,
   localState,
   ExpressionRendererComponent,
-  dispatch,
   application,
   activeDatasourceId,
 }: {
@@ -418,7 +419,6 @@ export const VisualizationWrapper = ({
   framePublicAPI: FramePublicAPI;
   timefilter: TimefilterContract;
   onEvent: (event: ExpressionRendererEvent) => void;
-  dispatch: (action: Action) => void;
   setLocalState: (dispatch: (prevState: WorkspaceState) => WorkspaceState) => void;
   localState: WorkspaceState & {
     configurationValidationError?: Array<{
@@ -454,7 +454,7 @@ export const VisualizationWrapper = ({
   const onData$ = useCallback(
     (data: unknown, inspectorAdapters?: Partial<DefaultInspectorAdapters>) => {
       if (inspectorAdapters && inspectorAdapters.tables) {
-        dispatchLens(onActiveDataChange({ activeData: { ...inspectorAdapters.tables.tables } }));
+        dispatchLens(onActiveDataChange({ ...inspectorAdapters.tables.tables }));
       }
     },
     [dispatchLens]
@@ -480,11 +480,12 @@ export const VisualizationWrapper = ({
             data-test-subj="errorFixAction"
             onClick={async () => {
               const newState = await validationError.fixAction?.newState(framePublicAPI);
-              dispatch({
-                type: 'UPDATE_DATASOURCE_STATE',
-                datasourceId: activeDatasourceId,
-                updater: newState,
-              });
+              dispatchLens(
+                updateDatasourceState({
+                  updater: newState,
+                  datasourceId: activeDatasourceId,
+                })
+              );
             }}
           >
             {validationError.fixAction.label}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
index c18b362e2faa4..fb77ff75324f0 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.test.tsx
@@ -7,30 +7,23 @@
 
 import React from 'react';
 import { Visualization } from '../../../types';
-import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../mocks';
-import { mountWithIntl as mount } from '@kbn/test/jest';
-import { ReactWrapper } from 'enzyme';
-import { WorkspacePanelWrapper, WorkspacePanelWrapperProps } from './workspace_panel_wrapper';
+import { createMockVisualization, createMockFramePublicAPI, FrameMock } from '../../../mocks';
+import { WorkspacePanelWrapper } from './workspace_panel_wrapper';
+import { mountWithProvider } from '../../../mocks';
 
 describe('workspace_panel_wrapper', () => {
   let mockVisualization: jest.Mocked<Visualization>;
   let mockFrameAPI: FrameMock;
-  let instance: ReactWrapper<WorkspacePanelWrapperProps>;
 
   beforeEach(() => {
     mockVisualization = createMockVisualization();
     mockFrameAPI = createMockFramePublicAPI();
   });
 
-  afterEach(() => {
-    instance.unmount();
-  });
-
-  it('should render its children', () => {
+  it('should render its children', async () => {
     const MyChild = () => <span>The child elements</span>;
-    instance = mount(
+    const { instance } = await mountWithProvider(
       <WorkspacePanelWrapper
-        dispatch={jest.fn()}
         framePublicAPI={mockFrameAPI}
         visualizationState={{}}
         visualizationId="myVis"
@@ -46,12 +39,11 @@ describe('workspace_panel_wrapper', () => {
     expect(instance.find(MyChild)).toHaveLength(1);
   });
 
-  it('should call the toolbar renderer if provided', () => {
+  it('should call the toolbar renderer if provided', async () => {
     const renderToolbarMock = jest.fn();
     const visState = { internalState: 123 };
-    instance = mount(
+    await mountWithProvider(
       <WorkspacePanelWrapper
-        dispatch={jest.fn()}
         framePublicAPI={mockFrameAPI}
         visualizationState={visState}
         children={<span />}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
index 6724002d23e0b..d0e8e0d5a1bab 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx
@@ -8,21 +8,19 @@
 import './workspace_panel_wrapper.scss';
 
 import React, { useCallback } from 'react';
-import { i18n } from '@kbn/i18n';
-import { EuiPageContent, EuiFlexGroup, EuiFlexItem, EuiScreenReaderOnly } from '@elastic/eui';
+import { EuiPageContent, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import classNames from 'classnames';
 import { Datasource, FramePublicAPI, Visualization } from '../../../types';
 import { NativeRenderer } from '../../../native_renderer';
-import { Action } from '../state_management';
 import { ChartSwitch } from './chart_switch';
 import { WarningsPopover } from './warnings_popover';
+import { useLensDispatch, updateVisualizationState } from '../../../state_management';
+import { WorkspaceTitle } from './title';
 
 export interface WorkspacePanelWrapperProps {
   children: React.ReactNode | React.ReactNode[];
   framePublicAPI: FramePublicAPI;
   visualizationState: unknown;
-  dispatch: (action: Action) => void;
-  title?: string;
   visualizationMap: Record<string, Visualization>;
   visualizationId: string | null;
   datasourceMap: Record<string, Datasource>;
@@ -40,28 +38,29 @@ export function WorkspacePanelWrapper({
   children,
   framePublicAPI,
   visualizationState,
-  dispatch,
-  title,
   visualizationId,
   visualizationMap,
   datasourceMap,
   datasourceStates,
   isFullscreen,
 }: WorkspacePanelWrapperProps) {
+  const dispatchLens = useLensDispatch();
+
   const activeVisualization = visualizationId ? visualizationMap[visualizationId] : null;
   const setVisualizationState = useCallback(
     (newState: unknown) => {
       if (!activeVisualization) {
         return;
       }
-      dispatch({
-        type: 'UPDATE_VISUALIZATION_STATE',
-        visualizationId: activeVisualization.id,
-        updater: newState,
-        clearStagedPreview: false,
-      });
+      dispatchLens(
+        updateVisualizationState({
+          visualizationId: activeVisualization.id,
+          updater: newState,
+          clearStagedPreview: false,
+        })
+      );
     },
-    [dispatch, activeVisualization]
+    [dispatchLens, activeVisualization]
   );
   const warningMessages: React.ReactNode[] = [];
   if (activeVisualization?.getWarningMessages) {
@@ -101,11 +100,7 @@ export function WorkspacePanelWrapper({
                   <ChartSwitch
                     data-test-subj="lnsChartSwitcher"
                     visualizationMap={visualizationMap}
-                    visualizationId={visualizationId}
-                    visualizationState={visualizationState}
                     datasourceMap={datasourceMap}
-                    datasourceStates={datasourceStates}
-                    dispatch={dispatch}
                     framePublicAPI={framePublicAPI}
                   />
                 </EuiFlexItem>
@@ -136,14 +131,7 @@ export function WorkspacePanelWrapper({
           'lnsWorkspacePanelWrapper--fullscreen': isFullscreen,
         })}
       >
-        <EuiScreenReaderOnly>
-          <h1 id="lns_ChartTitle" data-test-subj="lns_ChartTitle">
-            {title ||
-              i18n.translate('xpack.lens.chartTitle.unsaved', {
-                defaultMessage: 'Unsaved visualization',
-              })}
-          </h1>
-        </EuiScreenReaderOnly>
+        <WorkspaceTitle />
         {children}
       </EuiPageContent>
     </>
diff --git a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
index 1762e7ff20fab..ff0d81c7fa277 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
@@ -5,105 +5,14 @@
  * 2.0.
  */
 
-import React from 'react';
 import { PaletteDefinition } from 'src/plugins/charts/public';
-import {
-  ReactExpressionRendererProps,
-  ExpressionsSetup,
-  ExpressionsStart,
-} from '../../../../../src/plugins/expressions/public';
+import { ExpressionsSetup, ExpressionsStart } from '../../../../../src/plugins/expressions/public';
 import { embeddablePluginMock } from '../../../../../src/plugins/embeddable/public/mocks';
 import { expressionsPluginMock } from '../../../../../src/plugins/expressions/public/mocks';
-import { DatasourcePublicAPI, FramePublicAPI, Datasource, Visualization } from '../types';
 import { EditorFrameSetupPlugins, EditorFrameStartPlugins } from './service';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 
-export function createMockVisualization(): jest.Mocked<Visualization> {
-  return {
-    id: 'TEST_VIS',
-    clearLayer: jest.fn((state, _layerId) => state),
-    removeLayer: jest.fn(),
-    getLayerIds: jest.fn((_state) => ['layer1']),
-    visualizationTypes: [
-      {
-        icon: 'empty',
-        id: 'TEST_VIS',
-        label: 'TEST',
-        groupLabel: 'TEST_VISGroup',
-      },
-    ],
-    getVisualizationTypeId: jest.fn((_state) => 'empty'),
-    getDescription: jest.fn((_state) => ({ label: '' })),
-    switchVisualizationType: jest.fn((_, x) => x),
-    getSuggestions: jest.fn((_options) => []),
-    initialize: jest.fn((_frame, _state?) => ({})),
-    getConfiguration: jest.fn((props) => ({
-      groups: [
-        {
-          groupId: 'a',
-          groupLabel: 'a',
-          layerId: 'layer1',
-          supportsMoreColumns: true,
-          accessors: [],
-          filterOperations: jest.fn(() => true),
-          dataTestSubj: 'mockVisA',
-        },
-      ],
-    })),
-    toExpression: jest.fn((_state, _frame) => null),
-    toPreviewExpression: jest.fn((_state, _frame) => null),
-
-    setDimension: jest.fn(),
-    removeDimension: jest.fn(),
-    getErrorMessages: jest.fn((_state) => undefined),
-    renderDimensionEditor: jest.fn(),
-  };
-}
-
-export type DatasourceMock = jest.Mocked<Datasource> & {
-  publicAPIMock: jest.Mocked<DatasourcePublicAPI>;
-};
-
-export function createMockDatasource(id: string): DatasourceMock {
-  const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = {
-    datasourceId: id,
-    getTableSpec: jest.fn(() => []),
-    getOperationForColumnId: jest.fn(),
-  };
-
-  return {
-    id: 'mockindexpattern',
-    clearLayer: jest.fn((state, _layerId) => state),
-    getDatasourceSuggestionsForField: jest.fn((_state, _item) => []),
-    getDatasourceSuggestionsForVisualizeField: jest.fn((_state, _indexpatternId, _fieldName) => []),
-    getDatasourceSuggestionsFromCurrentState: jest.fn((_state) => []),
-    getPersistableState: jest.fn((x) => ({ state: x, savedObjectReferences: [] })),
-    getPublicAPI: jest.fn().mockReturnValue(publicAPIMock),
-    initialize: jest.fn((_state?) => Promise.resolve()),
-    renderDataPanel: jest.fn(),
-    renderLayerPanel: jest.fn(),
-    toExpression: jest.fn((_frame, _state) => null),
-    insertLayer: jest.fn((_state, _newLayerId) => {}),
-    removeLayer: jest.fn((_state, _layerId) => {}),
-    removeColumn: jest.fn((props) => {}),
-    getLayers: jest.fn((_state) => []),
-    uniqueLabels: jest.fn((_state) => ({})),
-    renderDimensionTrigger: jest.fn(),
-    renderDimensionEditor: jest.fn(),
-    getDropProps: jest.fn(),
-    onDrop: jest.fn(),
-
-    // this is an additional property which doesn't exist on real datasources
-    // but can be used to validate whether specific API mock functions are called
-    publicAPIMock,
-    getErrorMessages: jest.fn((_state) => undefined),
-    checkIntegrity: jest.fn((_state) => []),
-  };
-}
-
-export type FrameMock = jest.Mocked<FramePublicAPI>;
-
 export function createMockPaletteDefinition(): jest.Mocked<PaletteDefinition> {
   return {
     getCategoricalColors: jest.fn((_) => ['#ff0000', '#00ff00']),
@@ -123,23 +32,6 @@ export function createMockPaletteDefinition(): jest.Mocked<PaletteDefinition> {
   };
 }
 
-export function createMockFramePublicAPI(): FrameMock {
-  const palette = createMockPaletteDefinition();
-  return {
-    datasourceLayers: {},
-    addNewLayer: jest.fn(() => ''),
-    removeLayers: jest.fn(),
-    dateRange: { fromDate: 'now-7d', toDate: 'now' },
-    query: { query: '', language: 'lucene' },
-    filters: [],
-    availablePalettes: {
-      get: () => palette,
-      getAll: () => [palette],
-    },
-    searchSessionId: 'sessionId',
-  };
-}
-
 type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;
 
 export type MockedSetupDependencies = Omit<EditorFrameSetupPlugins, 'expressions'> & {
@@ -150,13 +42,6 @@ export type MockedStartDependencies = Omit<EditorFrameStartPlugins, 'expressions
   expressions: jest.Mocked<ExpressionsStart>;
 };
 
-export function createExpressionRendererMock(): jest.Mock<
-  React.ReactElement,
-  [ReactExpressionRendererProps]
-> {
-  return jest.fn((_) => <span />);
-}
-
 export function createMockSetupDependencies() {
   return ({
     data: dataPluginMock.createSetupContract(),
diff --git a/x-pack/plugins/lens/public/editor_frame_service/service.tsx b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
index 6a26f85a64acc..63340795ec6c8 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/service.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
@@ -105,27 +105,25 @@ export class EditorFrameService {
       ]);
 
       const { EditorFrame } = await import('../async_services');
-      const palettes = await plugins.charts.palettes.getPalettes();
 
       return {
-        EditorFrameContainer: ({ onError, showNoDataPopover, initialContext }) => {
+        EditorFrameContainer: ({ showNoDataPopover }) => {
           return (
             <div className="lnsApp__frame">
               <EditorFrame
                 data-test-subj="lnsEditorFrame"
-                onError={onError}
-                datasourceMap={resolvedDatasources}
-                visualizationMap={resolvedVisualizations}
                 core={core}
                 plugins={plugins}
-                ExpressionRenderer={plugins.expressions.ReactExpressionRenderer}
-                palettes={palettes}
                 showNoDataPopover={showNoDataPopover}
-                initialContext={initialContext}
+                datasourceMap={resolvedDatasources}
+                visualizationMap={resolvedVisualizations}
+                ExpressionRenderer={plugins.expressions.ReactExpressionRenderer}
               />
             </div>
           );
         },
+        datasourceMap: resolvedDatasources,
+        visualizationMap: resolvedVisualizations,
       };
     };
 
diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts
index 3ed82bef06105..eeec6150dc497 100644
--- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts
@@ -10,7 +10,7 @@ import {
   getHeatmapVisualization,
   isCellValueSupported,
 } from './visualization';
-import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../mocks';
 import {
   CHART_SHAPES,
   FUNCTION_NAME,
@@ -49,8 +49,8 @@ describe('heatmap', () => {
 
   describe('#intialize', () => {
     test('returns a default state', () => {
-      expect(getHeatmapVisualization({}).initialize(frame)).toEqual({
-        layerId: '',
+      expect(getHeatmapVisualization({}).initialize(() => 'l1')).toEqual({
+        layerId: 'l1',
         title: 'Empty Heatmap chart',
         shape: CHART_SHAPES.HEATMAP,
         legend: {
@@ -68,7 +68,9 @@ describe('heatmap', () => {
     });
 
     test('returns persisted state', () => {
-      expect(getHeatmapVisualization({}).initialize(frame, exampleState())).toEqual(exampleState());
+      expect(getHeatmapVisualization({}).initialize(() => 'test-layer', exampleState())).toEqual(
+        exampleState()
+      );
     });
   });
 
diff --git a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
index fce5bf30f47ed..7788e93812b1b 100644
--- a/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
@@ -119,10 +119,10 @@ export const getHeatmapVisualization = ({
     return CHART_NAMES.heatmap;
   },
 
-  initialize(frame, state, mainPalette) {
+  initialize(addNewLayer, state, mainPalette) {
     return (
       state || {
-        layerId: frame.addNewLayer(),
+        layerId: addNewLayer(),
         title: 'Empty Heatmap chart',
         ...getInitialState(),
       }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
index 2921251babe7f..82c27a76bb483 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
@@ -446,10 +446,13 @@ export async function syncExistingFields({
       isFirstExistenceFetch: false,
       existenceFetchFailed: false,
       existenceFetchTimeout: false,
-      existingFields: emptinessInfo.reduce((acc, info) => {
-        acc[info.indexPatternTitle] = booleanMap(info.existingFieldNames);
-        return acc;
-      }, state.existingFields),
+      existingFields: emptinessInfo.reduce(
+        (acc, info) => {
+          acc[info.indexPatternTitle] = booleanMap(info.existingFieldNames);
+          return acc;
+        },
+        { ...state.existingFields }
+      ),
     }));
   } catch (e) {
     // show all fields as available if fetch failed or timed out
@@ -457,10 +460,13 @@ export async function syncExistingFields({
       ...state,
       existenceFetchFailed: e.res?.status !== 408,
       existenceFetchTimeout: e.res?.status === 408,
-      existingFields: indexPatterns.reduce((acc, pattern) => {
-        acc[pattern.title] = booleanMap(pattern.fields.map((field) => field.name));
-        return acc;
-      }, state.existingFields),
+      existingFields: indexPatterns.reduce(
+        (acc, pattern) => {
+          acc[pattern.title] = booleanMap(pattern.fields.map((field) => field.name));
+          return acc;
+        },
+        { ...state.existingFields }
+      ),
     }));
   }
 }
diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
index 66e524435ebc8..2882d9c4c0246 100644
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
@@ -7,7 +7,7 @@
 
 import { metricVisualization } from './visualization';
 import { MetricState } from './types';
-import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../mocks';
 import { generateId } from '../id_generator';
 import { DatasourcePublicAPI, FramePublicAPI } from '../types';
 
@@ -23,7 +23,6 @@ function exampleState(): MetricState {
 function mockFrame(): FramePublicAPI {
   return {
     ...createMockFramePublicAPI(),
-    addNewLayer: () => 'l42',
     datasourceLayers: {
       l1: createMockDatasource('l1').publicAPIMock,
       l42: createMockDatasource('l42').publicAPIMock,
@@ -35,19 +34,19 @@ describe('metric_visualization', () => {
   describe('#initialize', () => {
     it('loads default state', () => {
       (generateId as jest.Mock).mockReturnValueOnce('test-id1');
-      const initialState = metricVisualization.initialize(mockFrame());
+      const initialState = metricVisualization.initialize(() => 'test-id1');
 
       expect(initialState.accessor).not.toBeDefined();
       expect(initialState).toMatchInlineSnapshot(`
-                Object {
-                  "accessor": undefined,
-                  "layerId": "l42",
-                }
-            `);
+        Object {
+          "accessor": undefined,
+          "layerId": "test-id1",
+        }
+      `);
     });
 
     it('loads from persisted state', () => {
-      expect(metricVisualization.initialize(mockFrame(), exampleState())).toEqual(exampleState());
+      expect(metricVisualization.initialize(() => 'l1', exampleState())).toEqual(exampleState());
     });
   });
 
diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
index e0977be7535af..49565f53bda36 100644
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@@ -85,10 +85,10 @@ export const metricVisualization: Visualization<MetricState> = {
 
   getSuggestions,
 
-  initialize(frame, state) {
+  initialize(addNewLayer, state) {
     return (
       state || {
-        layerId: frame.addNewLayer(),
+        layerId: addNewLayer(),
         accessor: undefined,
       }
     );
diff --git a/x-pack/plugins/lens/public/mocks.tsx b/x-pack/plugins/lens/public/mocks.tsx
index dcdabac36db3a..fc1b3019df386 100644
--- a/x-pack/plugins/lens/public/mocks.tsx
+++ b/x-pack/plugins/lens/public/mocks.tsx
@@ -15,6 +15,7 @@ import { coreMock } from 'src/core/public/mocks';
 import moment from 'moment';
 import { Provider } from 'react-redux';
 import { act } from 'react-dom/test-utils';
+import { ReactExpressionRendererProps } from 'src/plugins/expressions/public';
 import { LensPublicStart } from '.';
 import { visualizationTypes } from './xy_visualization/types';
 import { navigationPluginMock } from '../../../../src/plugins/navigation/public/mocks';
@@ -37,6 +38,111 @@ import { EmbeddableStateTransfer } from '../../../../src/plugins/embeddable/publ
 import { makeConfigureStore, getPreloadedState, LensAppState } from './state_management/index';
 import { getResolvedDateRange } from './utils';
 import { presentationUtilPluginMock } from '../../../../src/plugins/presentation_util/public/mocks';
+import { DatasourcePublicAPI, Datasource, Visualization, FramePublicAPI } from './types';
+
+export function createMockVisualization(): jest.Mocked<Visualization> {
+  return {
+    id: 'TEST_VIS',
+    clearLayer: jest.fn((state, _layerId) => state),
+    removeLayer: jest.fn(),
+    getLayerIds: jest.fn((_state) => ['layer1']),
+    visualizationTypes: [
+      {
+        icon: 'empty',
+        id: 'TEST_VIS',
+        label: 'TEST',
+        groupLabel: 'TEST_VISGroup',
+      },
+    ],
+    getVisualizationTypeId: jest.fn((_state) => 'empty'),
+    getDescription: jest.fn((_state) => ({ label: '' })),
+    switchVisualizationType: jest.fn((_, x) => x),
+    getSuggestions: jest.fn((_options) => []),
+    initialize: jest.fn((_frame, _state?) => ({})),
+    getConfiguration: jest.fn((props) => ({
+      groups: [
+        {
+          groupId: 'a',
+          groupLabel: 'a',
+          layerId: 'layer1',
+          supportsMoreColumns: true,
+          accessors: [],
+          filterOperations: jest.fn(() => true),
+          dataTestSubj: 'mockVisA',
+        },
+      ],
+    })),
+    toExpression: jest.fn((_state, _frame) => null),
+    toPreviewExpression: jest.fn((_state, _frame) => null),
+
+    setDimension: jest.fn(),
+    removeDimension: jest.fn(),
+    getErrorMessages: jest.fn((_state) => undefined),
+    renderDimensionEditor: jest.fn(),
+  };
+}
+
+export type DatasourceMock = jest.Mocked<Datasource> & {
+  publicAPIMock: jest.Mocked<DatasourcePublicAPI>;
+};
+
+export function createMockDatasource(id: string): DatasourceMock {
+  const publicAPIMock: jest.Mocked<DatasourcePublicAPI> = {
+    datasourceId: id,
+    getTableSpec: jest.fn(() => []),
+    getOperationForColumnId: jest.fn(),
+  };
+
+  return {
+    id: 'mockindexpattern',
+    clearLayer: jest.fn((state, _layerId) => state),
+    getDatasourceSuggestionsForField: jest.fn((_state, _item) => []),
+    getDatasourceSuggestionsForVisualizeField: jest.fn((_state, _indexpatternId, _fieldName) => []),
+    getDatasourceSuggestionsFromCurrentState: jest.fn((_state) => []),
+    getPersistableState: jest.fn((x) => ({
+      state: x,
+      savedObjectReferences: [{ type: 'index-pattern', id: 'mockip', name: 'mockip' }],
+    })),
+    getPublicAPI: jest.fn().mockReturnValue(publicAPIMock),
+    initialize: jest.fn((_state?) => Promise.resolve()),
+    renderDataPanel: jest.fn(),
+    renderLayerPanel: jest.fn(),
+    toExpression: jest.fn((_frame, _state) => null),
+    insertLayer: jest.fn((_state, _newLayerId) => {}),
+    removeLayer: jest.fn((_state, _layerId) => {}),
+    removeColumn: jest.fn((props) => {}),
+    getLayers: jest.fn((_state) => []),
+    uniqueLabels: jest.fn((_state) => ({})),
+    renderDimensionTrigger: jest.fn(),
+    renderDimensionEditor: jest.fn(),
+    getDropProps: jest.fn(),
+    onDrop: jest.fn(),
+
+    // this is an additional property which doesn't exist on real datasources
+    // but can be used to validate whether specific API mock functions are called
+    publicAPIMock,
+    getErrorMessages: jest.fn((_state) => undefined),
+    checkIntegrity: jest.fn((_state) => []),
+  };
+}
+
+export function createExpressionRendererMock(): jest.Mock<
+  React.ReactElement,
+  [ReactExpressionRendererProps]
+> {
+  return jest.fn((_) => <span />);
+}
+
+export type FrameMock = jest.Mocked<FramePublicAPI>;
+export function createMockFramePublicAPI(): FrameMock {
+  return {
+    datasourceLayers: {},
+    dateRange: { fromDate: 'now-7d', toDate: 'now' },
+    query: { query: '', language: 'lucene' },
+    filters: [],
+    searchSessionId: 'sessionId',
+  };
+}
 
 export type Start = jest.Mocked<LensPublicStart>;
 
@@ -66,6 +172,9 @@ export const defaultDoc = ({
   state: {
     query: 'kuery',
     filters: [{ query: { match_phrase: { src: 'test' } } }],
+    datasourceStates: {
+      testDatasource: 'datasource',
+    },
   },
   references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
 } as unknown) as Document;
@@ -257,20 +366,48 @@ export function makeDefaultServices(
   };
 }
 
-export function mockLensStore({
+export const defaultState = {
+  searchSessionId: 'sessionId-1',
+  filters: [],
+  query: { language: 'lucene', query: '' },
+  resolvedDateRange: { fromDate: '2021-01-10T04:00:00.000Z', toDate: '2021-01-10T08:00:00.000Z' },
+  isFullscreenDatasource: false,
+  isSaveable: false,
+  isLoading: false,
+  isLinkedToOriginatingApp: false,
+  activeDatasourceId: 'testDatasource',
+  visualization: {
+    state: {},
+    activeId: 'testVis',
+  },
+  datasourceStates: {
+    testDatasource: {
+      isLoading: false,
+      state: '',
+    },
+  },
+};
+
+export function makeLensStore({
   data,
-  storePreloadedState,
+  preloadedState,
+  dispatch,
 }: {
-  data: DataPublicPluginStart;
-  storePreloadedState?: Partial<LensAppState>;
+  data?: DataPublicPluginStart;
+  preloadedState?: Partial<LensAppState>;
+  dispatch?: jest.Mock;
 }) {
+  if (!data) {
+    data = mockDataPlugin();
+  }
   const lensStore = makeConfigureStore(
     getPreloadedState({
+      ...defaultState,
+      searchSessionId: data.search.session.start(),
       query: data.query.queryString.getQuery(),
       filters: data.query.filterManager.getGlobalFilters(),
-      searchSessionId: data.search.session.start(),
       resolvedDateRange: getResolvedDateRange(data.query.timefilter.timefilter),
-      ...storePreloadedState,
+      ...preloadedState,
     }),
     {
       data,
@@ -278,36 +415,52 @@ export function mockLensStore({
   );
 
   const origDispatch = lensStore.dispatch;
-  lensStore.dispatch = jest.fn(origDispatch);
+  lensStore.dispatch = jest.fn(dispatch || origDispatch);
   return lensStore;
 }
 
 export const mountWithProvider = async (
   component: React.ReactElement,
-  data: DataPublicPluginStart,
-  storePreloadedState?: Partial<LensAppState>,
-  extraWrappingComponent?: React.FC<{
-    children: React.ReactNode;
-  }>
+  store?: {
+    data?: DataPublicPluginStart;
+    preloadedState?: Partial<LensAppState>;
+    dispatch?: jest.Mock;
+  },
+  options?: {
+    wrappingComponent?: React.FC<{
+      children: React.ReactNode;
+    }>;
+    attachTo?: HTMLElement;
+  }
 ) => {
-  const lensStore = mockLensStore({ data, storePreloadedState });
+  const lensStore = makeLensStore(store || {});
 
-  const wrappingComponent: React.FC<{
+  let wrappingComponent: React.FC<{
     children: React.ReactNode;
-  }> = ({ children }) => {
-    if (extraWrappingComponent) {
-      return extraWrappingComponent({
-        children: <Provider store={lensStore}>{children}</Provider>,
-      });
-    }
-    return <Provider store={lensStore}>{children}</Provider>;
+  }> = ({ children }) => <Provider store={lensStore}>{children}</Provider>;
+
+  let restOptions: {
+    attachTo?: HTMLElement | undefined;
   };
+  if (options) {
+    const { wrappingComponent: _wrappingComponent, ...rest } = options;
+    restOptions = rest;
+
+    if (_wrappingComponent) {
+      wrappingComponent = ({ children }) => {
+        return _wrappingComponent({
+          children: <Provider store={lensStore}>{children}</Provider>,
+        });
+      };
+    }
+  }
 
   let instance: ReactWrapper = {} as ReactWrapper;
 
   await act(async () => {
     instance = mount(component, ({
       wrappingComponent,
+      ...restOptions,
     } as unknown) as ReactWrapper);
   });
   return { instance, lensStore };
diff --git a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
index 6e04d1a4ff958..c82fdb2766f7e 100644
--- a/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/visualization.tsx
@@ -91,11 +91,11 @@ export const getPieVisualization = ({
     shape: visualizationTypeId as PieVisualizationState['shape'],
   }),
 
-  initialize(frame, state, mainPalette) {
+  initialize(addNewLayer, state, mainPalette) {
     return (
       state || {
         shape: 'donut',
-        layers: [newLayerState(frame.addNewLayer())],
+        layers: [newLayerState(addNewLayer())],
         palette: mainPalette,
       }
     );
diff --git a/x-pack/plugins/lens/public/state_management/app_slice.ts b/x-pack/plugins/lens/public/state_management/app_slice.ts
deleted file mode 100644
index 29d5b0bee843f..0000000000000
--- a/x-pack/plugins/lens/public/state_management/app_slice.ts
+++ /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; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { isEqual } from 'lodash';
-import { LensAppState } from './types';
-
-export const initialState: LensAppState = {
-  searchSessionId: '',
-  filters: [],
-  query: { language: 'kuery', query: '' },
-  resolvedDateRange: { fromDate: '', toDate: '' },
-
-  indexPatternsForTopNav: [],
-  isSaveable: false,
-  isAppLoading: false,
-  isLinkedToOriginatingApp: false,
-};
-
-export const appSlice = createSlice({
-  name: 'app',
-  initialState,
-  reducers: {
-    setState: (state, { payload }: PayloadAction<Partial<LensAppState>>) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-    onChangeFromEditorFrame: (state, { payload }: PayloadAction<Partial<LensAppState>>) => {
-      return {
-        ...state,
-        ...payload,
-      };
-    },
-    onActiveDataChange: (state, { payload }: PayloadAction<Partial<LensAppState>>) => {
-      if (!isEqual(state.activeData, payload?.activeData)) {
-        return {
-          ...state,
-          ...payload,
-        };
-      }
-      return state;
-    },
-    navigateAway: (state) => state,
-  },
-});
-
-export const reducer = {
-  app: appSlice.reducer,
-};
diff --git a/x-pack/plugins/lens/public/state_management/external_context_middleware.ts b/x-pack/plugins/lens/public/state_management/external_context_middleware.ts
index 0743dce73eb33..07233b87dd19b 100644
--- a/x-pack/plugins/lens/public/state_management/external_context_middleware.ts
+++ b/x-pack/plugins/lens/public/state_management/external_context_middleware.ts
@@ -27,7 +27,7 @@ export const externalContextMiddleware = (data: DataPublicPluginStart) => (
     store.dispatch
   );
   return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => {
-    if (action.type === 'app/navigateAway') {
+    if (action.type === 'lens/navigateAway') {
       unsubscribeFromExternalContext();
     }
     next(action);
@@ -44,7 +44,7 @@ function subscribeToExternalContext(
 
   const dispatchFromExternal = (searchSessionId = search.session.start()) => {
     const globalFilters = filterManager.getFilters();
-    const filters = isEqual(getState().app.filters, globalFilters)
+    const filters = isEqual(getState().lens.filters, globalFilters)
       ? null
       : { filters: globalFilters };
     dispatch(
@@ -64,7 +64,7 @@ function subscribeToExternalContext(
     .pipe(delay(0))
     // then update if it didn't get updated yet
     .subscribe((newSessionId?: string) => {
-      if (newSessionId && getState().app.searchSessionId !== newSessionId) {
+      if (newSessionId && getState().lens.searchSessionId !== newSessionId) {
         debounceDispatchFromExternal(newSessionId);
       }
     });
diff --git a/x-pack/plugins/lens/public/state_management/index.ts b/x-pack/plugins/lens/public/state_management/index.ts
index 429978e60756b..b72c383130208 100644
--- a/x-pack/plugins/lens/public/state_management/index.ts
+++ b/x-pack/plugins/lens/public/state_management/index.ts
@@ -8,8 +8,9 @@
 import { configureStore, DeepPartial, getDefaultMiddleware } from '@reduxjs/toolkit';
 import logger from 'redux-logger';
 import { useDispatch, useSelector, TypedUseSelectorHook } from 'react-redux';
-import { appSlice, initialState } from './app_slice';
+import { lensSlice, initialState } from './lens_slice';
 import { timeRangeMiddleware } from './time_range_middleware';
+import { optimizingMiddleware } from './optimizing_middleware';
 import { externalContextMiddleware } from './external_context_middleware';
 
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
@@ -17,19 +18,29 @@ import { LensAppState, LensState } from './types';
 export * from './types';
 
 export const reducer = {
-  app: appSlice.reducer,
+  lens: lensSlice.reducer,
 };
 
 export const {
   setState,
   navigateAway,
-  onChangeFromEditorFrame,
+  setSaveable,
   onActiveDataChange,
-} = appSlice.actions;
+  updateState,
+  updateDatasourceState,
+  updateVisualizationState,
+  updateLayer,
+  switchVisualization,
+  selectSuggestion,
+  rollbackSuggestion,
+  submitSuggestion,
+  switchDatasource,
+  setToggleFullscreen,
+} = lensSlice.actions;
 
 export const getPreloadedState = (initializedState: Partial<LensAppState>) => {
   const state = {
-    app: {
+    lens: {
       ...initialState,
       ...initializedState,
     },
@@ -45,15 +56,9 @@ export const makeConfigureStore = (
 ) => {
   const middleware = [
     ...getDefaultMiddleware({
-      serializableCheck: {
-        ignoredActions: [
-          'app/setState',
-          'app/onChangeFromEditorFrame',
-          'app/onActiveDataChange',
-          'app/navigateAway',
-        ],
-      },
+      serializableCheck: false,
     }),
+    optimizingMiddleware(),
     timeRangeMiddleware(data),
     externalContextMiddleware(data),
   ];
diff --git a/x-pack/plugins/lens/public/state_management/lens_slice.test.ts b/x-pack/plugins/lens/public/state_management/lens_slice.test.ts
new file mode 100644
index 0000000000000..cce0376707143
--- /dev/null
+++ b/x-pack/plugins/lens/public/state_management/lens_slice.test.ts
@@ -0,0 +1,148 @@
+/*
+ * 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 { Query } from 'src/plugins/data/public';
+import {
+  switchDatasource,
+  switchVisualization,
+  setState,
+  updateState,
+  updateDatasourceState,
+  updateVisualizationState,
+} from '.';
+import { makeLensStore, defaultState } from '../mocks';
+
+describe('lensSlice', () => {
+  const store = makeLensStore({});
+  const customQuery = { query: 'custom' } as Query;
+
+  // TODO: need to move some initialization logic from mounter
+  // describe('initialization', () => {
+  // })
+
+  describe('state update', () => {
+    it('setState: updates state ', () => {
+      const lensState = store.getState().lens;
+      expect(lensState).toEqual(defaultState);
+      store.dispatch(setState({ query: customQuery }));
+      const changedState = store.getState().lens;
+      expect(changedState).toEqual({ ...defaultState, query: customQuery });
+    });
+
+    it('updateState: updates state with updater', () => {
+      const customUpdater = jest.fn((state) => ({ ...state, query: customQuery }));
+      store.dispatch(updateState({ subType: 'UPDATE', updater: customUpdater }));
+      const changedState = store.getState().lens;
+      expect(changedState).toEqual({ ...defaultState, query: customQuery });
+    });
+    it('should update the corresponding visualization state on update', () => {
+      const newVisState = {};
+      store.dispatch(
+        updateVisualizationState({
+          visualizationId: 'testVis',
+          updater: newVisState,
+        })
+      );
+
+      expect(store.getState().lens.visualization.state).toBe(newVisState);
+    });
+    it('should update the datasource state with passed in reducer', () => {
+      const datasourceUpdater = jest.fn(() => ({ changed: true }));
+      store.dispatch(
+        updateDatasourceState({
+          datasourceId: 'testDatasource',
+          updater: datasourceUpdater,
+        })
+      );
+      expect(store.getState().lens.datasourceStates.testDatasource.state).toStrictEqual({
+        changed: true,
+      });
+      expect(datasourceUpdater).toHaveBeenCalledTimes(1);
+    });
+    it('should update the layer state with passed in reducer', () => {
+      const newDatasourceState = {};
+      store.dispatch(
+        updateDatasourceState({
+          datasourceId: 'testDatasource',
+          updater: newDatasourceState,
+        })
+      );
+      expect(store.getState().lens.datasourceStates.testDatasource.state).toStrictEqual(
+        newDatasourceState
+      );
+    });
+    it('should should switch active visualization', () => {
+      const newVisState = {};
+      store.dispatch(
+        switchVisualization({
+          newVisualizationId: 'testVis2',
+          initialState: newVisState,
+        })
+      );
+
+      expect(store.getState().lens.visualization.state).toBe(newVisState);
+    });
+
+    it('should should switch active visualization and update datasource state', () => {
+      const newVisState = {};
+      const newDatasourceState = {};
+
+      store.dispatch(
+        switchVisualization({
+          newVisualizationId: 'testVis2',
+          initialState: newVisState,
+          datasourceState: newDatasourceState,
+          datasourceId: 'testDatasource',
+        })
+      );
+
+      expect(store.getState().lens.visualization.state).toBe(newVisState);
+      expect(store.getState().lens.datasourceStates.testDatasource.state).toBe(newDatasourceState);
+    });
+
+    it('should switch active datasource and initialize new state', () => {
+      store.dispatch(
+        switchDatasource({
+          newDatasourceId: 'testDatasource2',
+        })
+      );
+
+      expect(store.getState().lens.activeDatasourceId).toEqual('testDatasource2');
+      expect(store.getState().lens.datasourceStates.testDatasource2.isLoading).toEqual(true);
+    });
+
+    it('not initialize already initialized datasource on switch', () => {
+      const datasource2State = {};
+      const customStore = makeLensStore({
+        preloadedState: {
+          datasourceStates: {
+            testDatasource: {
+              state: {},
+              isLoading: false,
+            },
+            testDatasource2: {
+              state: datasource2State,
+              isLoading: false,
+            },
+          },
+        },
+      });
+
+      customStore.dispatch(
+        switchDatasource({
+          newDatasourceId: 'testDatasource2',
+        })
+      );
+
+      expect(customStore.getState().lens.activeDatasourceId).toEqual('testDatasource2');
+      expect(customStore.getState().lens.datasourceStates.testDatasource2.isLoading).toEqual(false);
+      expect(customStore.getState().lens.datasourceStates.testDatasource2.state).toBe(
+        datasource2State
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/lens/public/state_management/lens_slice.ts b/x-pack/plugins/lens/public/state_management/lens_slice.ts
new file mode 100644
index 0000000000000..cb181881a6552
--- /dev/null
+++ b/x-pack/plugins/lens/public/state_management/lens_slice.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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { createSlice, current, PayloadAction } from '@reduxjs/toolkit';
+import { TableInspectorAdapter } from '../editor_frame_service/types';
+import { LensAppState } from './types';
+
+export const initialState: LensAppState = {
+  searchSessionId: '',
+  filters: [],
+  query: { language: 'kuery', query: '' },
+  resolvedDateRange: { fromDate: '', toDate: '' },
+  isFullscreenDatasource: false,
+  isSaveable: false,
+  isLoading: false,
+  isLinkedToOriginatingApp: false,
+  activeDatasourceId: null,
+  datasourceStates: {},
+  visualization: {
+    state: null,
+    activeId: null,
+  },
+};
+
+export const lensSlice = createSlice({
+  name: 'lens',
+  initialState,
+  reducers: {
+    setState: (state, { payload }: PayloadAction<Partial<LensAppState>>) => {
+      return {
+        ...state,
+        ...payload,
+      };
+    },
+    onActiveDataChange: (state, { payload }: PayloadAction<TableInspectorAdapter>) => {
+      return {
+        ...state,
+        activeData: payload,
+      };
+    },
+    setSaveable: (state, { payload }: PayloadAction<boolean>) => {
+      return {
+        ...state,
+        isSaveable: payload,
+      };
+    },
+    updateState: (
+      state,
+      action: {
+        payload: {
+          subType: string;
+          updater: (prevState: LensAppState) => LensAppState;
+        };
+      }
+    ) => {
+      return action.payload.updater(current(state) as LensAppState);
+    },
+    updateDatasourceState: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          updater: unknown | ((prevState: unknown) => unknown);
+          datasourceId: string;
+          clearStagedPreview?: boolean;
+        };
+      }
+    ) => {
+      return {
+        ...state,
+        datasourceStates: {
+          ...state.datasourceStates,
+          [payload.datasourceId]: {
+            state:
+              typeof payload.updater === 'function'
+                ? payload.updater(current(state).datasourceStates[payload.datasourceId].state)
+                : payload.updater,
+            isLoading: false,
+          },
+        },
+        stagedPreview: payload.clearStagedPreview ? undefined : state.stagedPreview,
+      };
+    },
+    updateVisualizationState: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          visualizationId: string;
+          updater: unknown | ((state: unknown) => unknown);
+          clearStagedPreview?: boolean;
+        };
+      }
+    ) => {
+      if (!state.visualization.activeId) {
+        throw new Error('Invariant: visualization state got updated without active visualization');
+      }
+      // This is a safeguard that prevents us from accidentally updating the
+      // wrong visualization. This occurs in some cases due to the uncoordinated
+      // way we manage state across plugins.
+      if (state.visualization.activeId !== payload.visualizationId) {
+        return state;
+      }
+      return {
+        ...state,
+        visualization: {
+          ...state.visualization,
+          state:
+            typeof payload.updater === 'function'
+              ? payload.updater(current(state.visualization.state))
+              : payload.updater,
+        },
+        stagedPreview: payload.clearStagedPreview ? undefined : state.stagedPreview,
+      };
+    },
+    updateLayer: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          layerId: string;
+          datasourceId: string;
+          updater: (state: unknown, layerId: string) => unknown;
+        };
+      }
+    ) => {
+      return {
+        ...state,
+        datasourceStates: {
+          ...state.datasourceStates,
+          [payload.datasourceId]: {
+            ...state.datasourceStates[payload.datasourceId],
+            state: payload.updater(
+              current(state).datasourceStates[payload.datasourceId].state,
+              payload.layerId
+            ),
+          },
+        },
+      };
+    },
+
+    switchVisualization: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          newVisualizationId: string;
+          initialState: unknown;
+          datasourceState?: unknown;
+          datasourceId?: string;
+        };
+      }
+    ) => {
+      return {
+        ...state,
+        datasourceStates:
+          'datasourceId' in payload && payload.datasourceId
+            ? {
+                ...state.datasourceStates,
+                [payload.datasourceId]: {
+                  ...state.datasourceStates[payload.datasourceId],
+                  state: payload.datasourceState,
+                },
+              }
+            : state.datasourceStates,
+        visualization: {
+          ...state.visualization,
+          activeId: payload.newVisualizationId,
+          state: payload.initialState,
+        },
+        stagedPreview: undefined,
+      };
+    },
+    selectSuggestion: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          newVisualizationId: string;
+          initialState: unknown;
+          datasourceState: unknown;
+          datasourceId: string;
+        };
+      }
+    ) => {
+      return {
+        ...state,
+        datasourceStates:
+          'datasourceId' in payload && payload.datasourceId
+            ? {
+                ...state.datasourceStates,
+                [payload.datasourceId]: {
+                  ...state.datasourceStates[payload.datasourceId],
+                  state: payload.datasourceState,
+                },
+              }
+            : state.datasourceStates,
+        visualization: {
+          ...state.visualization,
+          activeId: payload.newVisualizationId,
+          state: payload.initialState,
+        },
+        stagedPreview: state.stagedPreview || {
+          datasourceStates: state.datasourceStates,
+          visualization: state.visualization,
+        },
+      };
+    },
+    rollbackSuggestion: (state) => {
+      return {
+        ...state,
+        ...(state.stagedPreview || {}),
+        stagedPreview: undefined,
+      };
+    },
+    setToggleFullscreen: (state) => {
+      return { ...state, isFullscreenDatasource: !state.isFullscreenDatasource };
+    },
+    submitSuggestion: (state) => {
+      return {
+        ...state,
+        stagedPreview: undefined,
+      };
+    },
+    switchDatasource: (
+      state,
+      {
+        payload,
+      }: {
+        payload: {
+          newDatasourceId: string;
+        };
+      }
+    ) => {
+      return {
+        ...state,
+        datasourceStates: {
+          ...state.datasourceStates,
+          [payload.newDatasourceId]: state.datasourceStates[payload.newDatasourceId] || {
+            state: null,
+            isLoading: true,
+          },
+        },
+        activeDatasourceId: payload.newDatasourceId,
+      };
+    },
+    navigateAway: (state) => state,
+  },
+});
+
+export const reducer = {
+  lens: lensSlice.reducer,
+};
diff --git a/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts b/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts
new file mode 100644
index 0000000000000..63e59221a683a
--- /dev/null
+++ b/x-pack/plugins/lens/public/state_management/optimizing_middleware.ts
@@ -0,0 +1,22 @@
+/*
+ * 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 { Dispatch, MiddlewareAPI, PayloadAction } from '@reduxjs/toolkit';
+import { isEqual } from 'lodash';
+import { LensAppState } from './types';
+
+/** cancels updates to the store that don't change the state */
+export const optimizingMiddleware = () => (store: MiddlewareAPI) => {
+  return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => {
+    if (action.type === 'lens/onActiveDataChange') {
+      if (isEqual(store.getState().lens.activeData, action.payload)) {
+        return;
+      }
+    }
+    next(action);
+  };
+};
diff --git a/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts b/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts
index 4145f8ed5e52c..a3a53a6d380ed 100644
--- a/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts
+++ b/x-pack/plugins/lens/public/state_management/time_range_middleware.test.ts
@@ -17,10 +17,9 @@ import { timeRangeMiddleware } from './time_range_middleware';
 import { Observable, Subject } from 'rxjs';
 import { DataPublicPluginStart, esFilters } from '../../../../../src/plugins/data/public';
 import moment from 'moment';
-import { initialState } from './app_slice';
+import { initialState } from './lens_slice';
 import { LensAppState } from './types';
 import { PayloadAction } from '@reduxjs/toolkit';
-import { Document } from '../persistence';
 
 const sessionIdSubject = new Subject<string>();
 
@@ -132,7 +131,7 @@ function makeDefaultData(): jest.Mocked<DataPublicPluginStart> {
 const createMiddleware = (data: DataPublicPluginStart) => {
   const middleware = timeRangeMiddleware(data);
   const store = {
-    getState: jest.fn(() => ({ app: initialState })),
+    getState: jest.fn(() => ({ lens: initialState })),
     dispatch: jest.fn(),
   };
   const next = jest.fn();
@@ -157,8 +156,13 @@ describe('timeRangeMiddleware', () => {
       });
       const { next, invoke, store } = createMiddleware(data);
       const action = {
-        type: 'app/setState',
-        payload: { lastKnownDoc: ('new' as unknown) as Document },
+        type: 'lens/setState',
+        payload: {
+          visualization: {
+            state: {},
+            activeId: 'id2',
+          },
+        },
       };
       invoke(action);
       expect(store.dispatch).toHaveBeenCalledWith({
@@ -169,7 +173,7 @@ describe('timeRangeMiddleware', () => {
           },
           searchSessionId: 'sessionId-1',
         },
-        type: 'app/setState',
+        type: 'lens/setState',
       });
       expect(next).toHaveBeenCalledWith(action);
     });
@@ -187,8 +191,39 @@ describe('timeRangeMiddleware', () => {
       });
       const { next, invoke, store } = createMiddleware(data);
       const action = {
-        type: 'app/setState',
-        payload: { lastKnownDoc: ('new' as unknown) as Document },
+        type: 'lens/setState',
+        payload: {
+          visualization: {
+            state: {},
+            activeId: 'id2',
+          },
+        },
+      };
+      invoke(action);
+      expect(store.dispatch).not.toHaveBeenCalled();
+      expect(next).toHaveBeenCalledWith(action);
+    });
+    it('does not trigger another update when the update already contains searchSessionId', () => {
+      const data = makeDefaultData();
+      (data.nowProvider.get as jest.Mock).mockReturnValue(new Date(Date.now() - 30000));
+      (data.query.timefilter.timefilter.getTime as jest.Mock).mockReturnValue({
+        from: 'now-2m',
+        to: 'now',
+      });
+      (data.query.timefilter.timefilter.getBounds as jest.Mock).mockReturnValue({
+        min: moment(Date.now() - 100000),
+        max: moment(Date.now() - 30000),
+      });
+      const { next, invoke, store } = createMiddleware(data);
+      const action = {
+        type: 'lens/setState',
+        payload: {
+          visualization: {
+            state: {},
+            activeId: 'id2',
+          },
+          searchSessionId: 'searchSessionId',
+        },
       };
       invoke(action);
       expect(store.dispatch).not.toHaveBeenCalled();
diff --git a/x-pack/plugins/lens/public/state_management/time_range_middleware.ts b/x-pack/plugins/lens/public/state_management/time_range_middleware.ts
index a6c868be60565..cc3e46b71fbfc 100644
--- a/x-pack/plugins/lens/public/state_management/time_range_middleware.ts
+++ b/x-pack/plugins/lens/public/state_management/time_range_middleware.ts
@@ -5,27 +5,26 @@
  * 2.0.
  */
 
-import { isEqual } from 'lodash';
 import { Dispatch, MiddlewareAPI, PayloadAction } from '@reduxjs/toolkit';
 import moment from 'moment';
-
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { setState, LensDispatch } from '.';
 import { LensAppState } from './types';
 import { getResolvedDateRange, containsDynamicMath, TIME_LAG_PERCENTAGE_LIMIT } from '../utils';
 
+/**
+ * checks if TIME_LAG_PERCENTAGE_LIMIT passed to renew searchSessionId
+ * and request new data.
+ */
 export const timeRangeMiddleware = (data: DataPublicPluginStart) => (store: MiddlewareAPI) => {
   return (next: Dispatch) => (action: PayloadAction<Partial<LensAppState>>) => {
-    // if document was modified or sessionId check if too much time passed to update searchSessionId
-    if (
-      action.payload?.lastKnownDoc &&
-      !isEqual(action.payload?.lastKnownDoc, store.getState().app.lastKnownDoc)
-    ) {
+    if (!action.payload?.searchSessionId) {
       updateTimeRange(data, store.dispatch);
     }
     next(action);
   };
 };
+
 function updateTimeRange(data: DataPublicPluginStart, dispatch: LensDispatch) {
   const timefilter = data.query.timefilter.timefilter;
   const unresolvedTimeRange = timefilter.getTime();
diff --git a/x-pack/plugins/lens/public/state_management/types.ts b/x-pack/plugins/lens/public/state_management/types.ts
index 87045d15cc994..1c696a3d79f9d 100644
--- a/x-pack/plugins/lens/public/state_management/types.ts
+++ b/x-pack/plugins/lens/public/state_management/types.ts
@@ -5,24 +5,33 @@
  * 2.0.
  */
 
-import { Filter, IndexPattern, Query, SavedQuery } from '../../../../../src/plugins/data/public';
+import { Filter, Query, SavedQuery } from '../../../../../src/plugins/data/public';
 import { Document } from '../persistence';
 
 import { TableInspectorAdapter } from '../editor_frame_service/types';
 import { DateRange } from '../../common';
 
-export interface LensAppState {
+export interface PreviewState {
+  visualization: {
+    activeId: string | null;
+    state: unknown;
+  };
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
+}
+export interface EditorFrameState extends PreviewState {
+  activeDatasourceId: string | null;
+  stagedPreview?: PreviewState;
+  isFullscreenDatasource?: boolean;
+}
+export interface LensAppState extends EditorFrameState {
   persistedDoc?: Document;
-  lastKnownDoc?: Document;
 
-  // index patterns used to determine which filters are available in the top nav.
-  indexPatternsForTopNav: IndexPattern[];
   // Determines whether the lens editor shows the 'save and return' button, and the originating app breadcrumb.
   isLinkedToOriginatingApp?: boolean;
   isSaveable: boolean;
   activeData?: TableInspectorAdapter;
 
-  isAppLoading: boolean;
+  isLoading: boolean;
   query: Query;
   filters: Filter[];
   savedQuery?: SavedQuery;
@@ -38,5 +47,5 @@ export type DispatchSetState = (
 };
 
 export interface LensState {
-  app: LensAppState;
+  lens: LensAppState;
 }
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index 7baba15f0fac6..cb47dcf6ec388 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -7,7 +7,7 @@
 
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { CoreSetup } from 'kibana/public';
-import { PaletteOutput, PaletteRegistry } from 'src/plugins/charts/public';
+import { PaletteOutput } from 'src/plugins/charts/public';
 import { SavedObjectReference } from 'kibana/public';
 import { MutableRefObject } from 'react';
 import { RowClickContext } from '../../../../src/plugins/ui_actions/public';
@@ -45,13 +45,13 @@ export interface PublicAPIProps<T> {
 }
 
 export interface EditorFrameProps {
-  onError: ErrorCallback;
-  initialContext?: VisualizeFieldContext;
   showNoDataPopover: () => void;
 }
 
 export interface EditorFrameInstance {
   EditorFrameContainer: (props: EditorFrameProps) => React.ReactElement;
+  datasourceMap: Record<string, Datasource>;
+  visualizationMap: Record<string, Visualization>;
 }
 
 export interface EditorFrameSetup {
@@ -525,20 +525,10 @@ export interface FramePublicAPI {
    * If accessing, make sure to check whether expected columns actually exist.
    */
   activeData?: Record<string, Datatable>;
-
   dateRange: DateRange;
   query: Query;
   filters: Filter[];
   searchSessionId: string;
-
-  /**
-   * A map of all available palettes (keys being the ids).
-   */
-  availablePalettes: PaletteRegistry;
-
-  // Adds a new layer. This has a side effect of updating the datasource state
-  addNewLayer: () => string;
-  removeLayers: (layerIds: string[]) => void;
 }
 
 /**
@@ -586,7 +576,7 @@ export interface Visualization<T = unknown> {
    * - Loadingn from a saved visualization
    * - When using suggestions, the suggested state is passed in
    */
-  initialize: (frame: FramePublicAPI, state?: T, mainPalette?: PaletteOutput) => T;
+  initialize: (addNewLayer: () => string, state?: T, mainPalette?: PaletteOutput) => T;
 
   getMainPalette?: (state: T) => undefined | PaletteOutput;
 
diff --git a/x-pack/plugins/lens/public/utils.ts b/x-pack/plugins/lens/public/utils.ts
index 1c4b2c67f96fc..a79480d7d9953 100644
--- a/x-pack/plugins/lens/public/utils.ts
+++ b/x-pack/plugins/lens/public/utils.ts
@@ -9,6 +9,12 @@ import { i18n } from '@kbn/i18n';
 import { IndexPattern, IndexPatternsContract, TimefilterContract } from 'src/plugins/data/public';
 import { IUiSettingsClient } from 'kibana/public';
 import moment from 'moment-timezone';
+import { SavedObjectReference } from 'kibana/public';
+import { Filter, Query } from 'src/plugins/data/public';
+import { uniq } from 'lodash';
+import { Document } from './persistence/saved_object_store';
+import { Datasource } from './types';
+import { extractFilterReferences } from './persistence';
 
 export function getVisualizeGeoFieldMessage(fieldType: string) {
   return i18n.translate('xpack.lens.visualizeGeoFieldMessage', {
@@ -32,7 +38,105 @@ export function containsDynamicMath(dateMathString: string) {
 
 export const TIME_LAG_PERCENTAGE_LIMIT = 0.02;
 
-export async function getAllIndexPatterns(
+export function getTimeZone(uiSettings: IUiSettingsClient) {
+  const configuredTimeZone = uiSettings.get('dateFormat:tz');
+  if (configuredTimeZone === 'Browser') {
+    return moment.tz.guess();
+  }
+
+  return configuredTimeZone;
+}
+export function getActiveDatasourceIdFromDoc(doc?: Document) {
+  if (!doc) {
+    return null;
+  }
+
+  const [firstDatasourceFromDoc] = Object.keys(doc.state.datasourceStates);
+  return firstDatasourceFromDoc || null;
+}
+
+export const getInitialDatasourceId = (
+  datasourceMap: Record<string, Datasource>,
+  doc?: Document
+) => {
+  return (doc && getActiveDatasourceIdFromDoc(doc)) || Object.keys(datasourceMap)[0] || null;
+};
+
+export interface GetIndexPatternsObjects {
+  activeDatasources: Record<string, Datasource>;
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
+  visualization: {
+    activeId: string | null;
+    state: unknown;
+  };
+  filters: Filter[];
+  query: Query;
+  title: string;
+  description?: string;
+  persistedId?: string;
+}
+
+export function getSavedObjectFormat({
+  activeDatasources,
+  datasourceStates,
+  visualization,
+  filters,
+  query,
+  title,
+  description,
+  persistedId,
+}: GetIndexPatternsObjects): Document {
+  const persistibleDatasourceStates: Record<string, unknown> = {};
+  const references: SavedObjectReference[] = [];
+  Object.entries(activeDatasources).forEach(([id, datasource]) => {
+    const { state: persistableState, savedObjectReferences } = datasource.getPersistableState(
+      datasourceStates[id].state
+    );
+    persistibleDatasourceStates[id] = persistableState;
+    references.push(...savedObjectReferences);
+  });
+
+  const { persistableFilters, references: filterReferences } = extractFilterReferences(filters);
+
+  references.push(...filterReferences);
+
+  return {
+    savedObjectId: persistedId,
+    title,
+    description,
+    type: 'lens',
+    visualizationType: visualization.activeId,
+    state: {
+      datasourceStates: persistibleDatasourceStates,
+      visualization: visualization.state,
+      query,
+      filters: persistableFilters,
+    },
+    references,
+  };
+}
+
+export function getIndexPatternsIds({
+  activeDatasources,
+  datasourceStates,
+}: {
+  activeDatasources: Record<string, Datasource>;
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>;
+}): string[] {
+  const references: SavedObjectReference[] = [];
+  Object.entries(activeDatasources).forEach(([id, datasource]) => {
+    const { savedObjectReferences } = datasource.getPersistableState(datasourceStates[id].state);
+    references.push(...savedObjectReferences);
+  });
+
+  const uniqueFilterableIndexPatternIds = uniq(
+    references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id)
+  );
+
+  return uniqueFilterableIndexPatternIds;
+}
+
+export async function getIndexPatternsObjects(
   ids: string[],
   indexPatternsService: IndexPatternsContract
 ): Promise<{ indexPatterns: IndexPattern[]; rejectedIds: string[] }> {
@@ -46,12 +150,3 @@ export async function getAllIndexPatterns(
   // return also the rejected ids in case we want to show something later on
   return { indexPatterns: fullfilled.map((response) => response.value), rejectedIds };
 }
-
-export function getTimeZone(uiSettings: IUiSettingsClient) {
-  const configuredTimeZone = uiSettings.get('dateFormat:tz');
-  if (configuredTimeZone === 'Browser') {
-    return moment.tz.guess();
-  }
-
-  return configuredTimeZone;
-}
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
index b88d38e18329c..a7270bdf8f331 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts
@@ -10,7 +10,7 @@ import { Position } from '@elastic/charts';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { getXyVisualization } from './xy_visualization';
 import { Operation } from '../types';
-import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../mocks';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
 
 describe('#toExpression', () => {
diff --git a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
index b46ad1940491e..ec0c11a0b1d86 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visual_options_popover/visual_options_popover.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { shallowWithIntl as shallow } from '@kbn/test/jest';
 import { Position } from '@elastic/charts';
 import { FramePublicAPI } from '../../types';
-import { createMockDatasource, createMockFramePublicAPI } from '../../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../../mocks';
 import { State } from '../types';
 import { VisualOptionsPopover } from './visual_options_popover';
 import { ToolbarPopover } from '../../shared_components';
diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
index dee0e5763dee4..304e323789c14 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/visualization.test.ts
@@ -9,7 +9,7 @@ import { getXyVisualization } from './visualization';
 import { Position } from '@elastic/charts';
 import { Operation } from '../types';
 import { State, SeriesType, XYLayerConfig } from './types';
-import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_service/mocks';
+import { createMockDatasource, createMockFramePublicAPI } from '../mocks';
 import { LensIconChartBar } from '../assets/chart_bar';
 import { chartPluginMock } from '../../../../../src/plugins/charts/public/mocks';
 import { dataPluginMock } from '../../../../../src/plugins/data/public/mocks';
@@ -132,8 +132,7 @@ describe('xy_visualization', () => {
 
   describe('#initialize', () => {
     it('loads default state', () => {
-      const mockFrame = createMockFramePublicAPI();
-      const initialState = xyVisualization.initialize(mockFrame);
+      const initialState = xyVisualization.initialize(() => 'l1');
 
       expect(initialState.layers).toHaveLength(1);
       expect(initialState.layers[0].xAccessor).not.toBeDefined();
@@ -144,7 +143,7 @@ describe('xy_visualization', () => {
           "layers": Array [
             Object {
               "accessors": Array [],
-              "layerId": "",
+              "layerId": "l1",
               "position": "top",
               "seriesType": "bar_stacked",
               "showGridlines": false,
@@ -162,9 +161,7 @@ describe('xy_visualization', () => {
     });
 
     it('loads from persisted state', () => {
-      expect(xyVisualization.initialize(createMockFramePublicAPI(), exampleState())).toEqual(
-        exampleState()
-      );
+      expect(xyVisualization.initialize(() => 'first', exampleState())).toEqual(exampleState());
     });
   });
 
diff --git a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
index bd20ed300bf61..199dccdf702f7 100644
--- a/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/visualization.tsx
@@ -152,7 +152,7 @@ export const getXyVisualization = ({
 
   getSuggestions,
 
-  initialize(frame, state) {
+  initialize(addNewLayer, state) {
     return (
       state || {
         title: 'Empty XY chart',
@@ -161,7 +161,7 @@ export const getXyVisualization = ({
         preferredSeriesType: defaultSeriesType,
         layers: [
           {
-            layerId: frame.addNewLayer(),
+            layerId: addNewLayer(),
             accessors: [],
             position: Position.Top,
             seriesType: defaultSeriesType,
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
index bc10236cf1977..9292a8d87bbc4 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -13,7 +13,7 @@ import { AxisSettingsPopover } from './axis_settings_popover';
 import { FramePublicAPI } from '../types';
 import { State } from './types';
 import { Position } from '@elastic/charts';
-import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_service/mocks';
+import { createMockFramePublicAPI, createMockDatasource } from '../mocks';
 import { chartPluginMock } from 'src/plugins/charts/public/mocks';
 import { EuiColorPicker } from '@elastic/eui';
 
diff --git a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx
index 3b3b1af30610d..f9df1b452f475 100644
--- a/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx
+++ b/x-pack/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx
@@ -20,7 +20,6 @@ import {
   EuiText,
   EuiTitle,
 } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { isFullLicense } from '../license';
@@ -122,18 +121,6 @@ export const DatavisualizerSelector: FC = () => {
                     values={{ maxFileSize }}
                   />
                 }
-                betaBadgeLabel={i18n.translate(
-                  'xpack.ml.datavisualizer.selector.experimentalBadgeLabel',
-                  {
-                    defaultMessage: 'Experimental',
-                  }
-                )}
-                betaBadgeTooltipContent={
-                  <FormattedMessage
-                    id="xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel"
-                    defaultMessage="Experimental feature. We'd love to hear your feedback."
-                  />
-                }
                 footer={
                   <EuiButton
                     target="_self"
diff --git a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx
index a78a832fdb6e9..9a4d6036428f8 100644
--- a/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx
+++ b/x-pack/plugins/ml/public/application/jobs/jobs_list/components/job_details/job_messages_pane.tsx
@@ -102,7 +102,7 @@ export const JobMessagesPane: FC<JobMessagesPaneProps> = React.memo(
 
     return (
       <>
-        <EuiSpacer />
+        {canCreateJob && showClearButton ? <EuiSpacer /> : null}
         <EuiFlexGroup direction="column">
           {canCreateJob && showClearButton ? (
             <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js b/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
index 318c103b39636..137df3a6f3151 100644
--- a/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
+++ b/x-pack/plugins/ml/server/models/job_audit_messages/job_audit_messages.js
@@ -39,7 +39,7 @@ const anomalyDetectorTypeFilter = {
   },
 };
 
-export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlClient) {
+export function jobAuditMessagesProvider({ asInternalUser }, mlClient) {
   // search for audit messages,
   // jobId is optional. without it, all jobs will be listed.
   // from is optional and should be a string formatted in ES time units. e.g. 12h, 1d, 7d
@@ -310,10 +310,10 @@ export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlCl
     };
 
     await Promise.all([
-      asCurrentUser.updateByQuery({
+      asInternalUser.updateByQuery({
         index: ML_NOTIFICATION_INDEX_02,
         ignore_unavailable: true,
-        refresh: true,
+        refresh: false,
         conflicts: 'proceed',
         body: {
           query,
@@ -323,7 +323,7 @@ export function jobAuditMessagesProvider({ asInternalUser, asCurrentUser }, mlCl
           },
         },
       }),
-      asCurrentUser.index({
+      asInternalUser.index({
         index: ML_NOTIFICATION_INDEX_02,
         body: newClearedMessage,
         refresh: 'wait_for',
diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx
index dbe9cd163451d..ded56ec9e817f 100644
--- a/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx
+++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/header/header.tsx
@@ -99,7 +99,6 @@ export function ExploratoryViewHeader({ seriesId, lensAttributes }: Props) {
 
       {isSaveOpen && lensAttributes && (
         <LensSaveModalComponent
-          isVisible={isSaveOpen}
           initialInput={(lensAttributes as unknown) as LensEmbeddableInput}
           onClose={() => setIsSaveOpen(false)}
           onSave={() => {}}
diff --git a/x-pack/plugins/observability/server/plugin.ts b/x-pack/plugins/observability/server/plugin.ts
index 2006ce50a74cb..d820a6c0a6f76 100644
--- a/x-pack/plugins/observability/server/plugin.ts
+++ b/x-pack/plugins/observability/server/plugin.ts
@@ -12,7 +12,6 @@ import {
   CoreSetup,
   DEFAULT_APP_CATEGORIES,
 } from '../../../../src/core/server';
-import { RuleDataClient } from '../../rule_registry/server';
 import { ObservabilityConfig } from '.';
 import {
   bootstrapAnnotations,
@@ -99,14 +98,10 @@ export class ObservabilityPlugin implements Plugin<ObservabilityPluginSetup> {
 
     const start = () => core.getStartServices().then(([coreStart]) => coreStart);
 
-    const ruleDataClient = new RuleDataClient({
-      getClusterClient: async () => {
-        const coreStart = await start();
-        return coreStart.elasticsearch.client.asInternalUser;
-      },
-      ready: () => Promise.resolve(),
-      alias: plugins.ruleRegistry.ruleDataService.getFullAssetName(),
-    });
+    const ruleDataClient = plugins.ruleRegistry.ruleDataService.getRuleDataClient(
+      plugins.ruleRegistry.ruleDataService.getFullAssetName(),
+      () => Promise.resolve()
+    );
 
     registerRoutes({
       core: {
diff --git a/x-pack/plugins/rule_registry/server/config.ts b/x-pack/plugins/rule_registry/server/config.ts
index 498b6d16a6fda..ce1d44cdb94ee 100644
--- a/x-pack/plugins/rule_registry/server/config.ts
+++ b/x-pack/plugins/rule_registry/server/config.ts
@@ -11,7 +11,7 @@ export const config = {
   schema: schema.object({
     enabled: schema.boolean({ defaultValue: true }),
     write: schema.object({
-      enabled: schema.boolean({ defaultValue: true }),
+      enabled: schema.boolean({ defaultValue: false }),
     }),
     index: schema.string({ defaultValue: '.alerts' }),
   }),
diff --git a/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts b/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts
index 18f3c21fafc15..59f740e0afb73 100644
--- a/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_client/create_rule_data_client_mock.ts
@@ -28,6 +28,7 @@ export function createRuleDataClientMock() {
     getWriter: jest.fn(() => ({
       bulk,
     })),
+    isWriteEnabled: jest.fn(() => true),
   } as unknown) as Assign<
     RuleDataClient & Omit<MockInstances<RuleDataClient>, 'options' | 'getClusterClient'>,
     {
diff --git a/x-pack/plugins/rule_registry/server/rule_data_client/index.ts b/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
index cb336580ca354..ffc926fc74b56 100644
--- a/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_client/index.ts
@@ -9,6 +9,7 @@ import { isEmpty } from 'lodash';
 import type { estypes } from '@elastic/elasticsearch';
 import { ResponseError } from '@elastic/elasticsearch/lib/errors';
 import { IndexPatternsFetcher } from '../../../../../src/plugins/data/server';
+import { RuleDataWriteDisabledError } from '../rule_data_plugin_service/errors';
 import {
   IRuleDataClient,
   RuleDataClientConstructorOptions,
@@ -28,6 +29,10 @@ export class RuleDataClient implements IRuleDataClient {
     return await this.options.getClusterClient();
   }
 
+  isWriteEnabled(): boolean {
+    return this.options.isWriteEnabled;
+  }
+
   getReader(options: { namespace?: string } = {}): RuleDataReader {
     const index = `${[this.options.alias, options.namespace].filter(Boolean).join('-')}*`;
 
@@ -72,9 +77,15 @@ export class RuleDataClient implements IRuleDataClient {
 
   getWriter(options: { namespace?: string } = {}): RuleDataWriter {
     const { namespace } = options;
+    const isWriteEnabled = this.isWriteEnabled();
     const alias = getNamespacedAlias({ alias: this.options.alias, namespace });
+
     return {
       bulk: async (request) => {
+        if (!isWriteEnabled) {
+          throw new RuleDataWriteDisabledError();
+        }
+
         const clusterClient = await this.getClusterClient();
 
         const requestWithDefaultParameters = {
diff --git a/x-pack/plugins/rule_registry/server/rule_data_client/types.ts b/x-pack/plugins/rule_registry/server/rule_data_client/types.ts
index d5ce022781b0d..46a37abcd1ffc 100644
--- a/x-pack/plugins/rule_registry/server/rule_data_client/types.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_client/types.ts
@@ -39,6 +39,7 @@ export interface IRuleDataClient {
 
 export interface RuleDataClientConstructorOptions {
   getClusterClient: () => Promise<ElasticsearchClient>;
+  isWriteEnabled: boolean;
   ready: () => Promise<void>;
   alias: string;
 }
diff --git a/x-pack/plugins/canvas/common/lib/url.ts b/x-pack/plugins/rule_registry/server/rule_data_plugin_service/errors.ts
similarity index 54%
rename from x-pack/plugins/canvas/common/lib/url.ts
rename to x-pack/plugins/rule_registry/server/rule_data_plugin_service/errors.ts
index 5018abc027713..cb5dcf8e8ae76 100644
--- a/x-pack/plugins/canvas/common/lib/url.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_plugin_service/errors.ts
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import { isValidDataUrl } from '../../common/lib/dataurl';
-import { isValidHttpUrl } from '../../common/lib/httpurl';
-
-export function isValidUrl(url: string) {
-  return isValidDataUrl(url) || isValidHttpUrl(url);
+export class RuleDataWriteDisabledError extends Error {
+  constructor(message?: string) {
+    super(message);
+    Object.setPrototypeOf(this, new.target.prototype);
+    this.name = 'RuleDataWriteDisabledError';
+  }
 }
diff --git a/x-pack/plugins/rule_registry/server/rule_data_plugin_service/index.ts b/x-pack/plugins/rule_registry/server/rule_data_plugin_service/index.ts
index 22435ef8c0203..abb56f3102a4a 100644
--- a/x-pack/plugins/rule_registry/server/rule_data_plugin_service/index.ts
+++ b/x-pack/plugins/rule_registry/server/rule_data_plugin_service/index.ts
@@ -16,6 +16,8 @@ import {
 import { ecsComponentTemplate } from '../../common/assets/component_templates/ecs_component_template';
 import { defaultLifecyclePolicy } from '../../common/assets/lifecycle_policies/default_lifecycle_policy';
 import { ClusterPutComponentTemplateBody, PutIndexTemplateRequest } from '../../common/types';
+import { RuleDataClient } from '../rule_data_client';
+import { RuleDataWriteDisabledError } from './errors';
 
 const BOOTSTRAP_TIMEOUT = 60000;
 
@@ -54,8 +56,8 @@ export class RuleDataPluginService {
   constructor(private readonly options: RuleDataPluginServiceConstructorOptions) {}
 
   private assertWriteEnabled() {
-    if (!this.isWriteEnabled) {
-      throw new Error('Write operations are disabled');
+    if (!this.isWriteEnabled()) {
+      throw new RuleDataWriteDisabledError();
     }
   }
 
@@ -64,7 +66,7 @@ export class RuleDataPluginService {
   }
 
   async init() {
-    if (!this.isWriteEnabled) {
+    if (!this.isWriteEnabled()) {
       this.options.logger.info('Write is disabled, not installing assets');
       this.signal.complete();
       return;
@@ -155,4 +157,13 @@ export class RuleDataPluginService {
   getFullAssetName(assetName?: string) {
     return [this.options.index, assetName].filter(Boolean).join('-');
   }
+
+  getRuleDataClient(alias: string, initialize: () => Promise<void>) {
+    return new RuleDataClient({
+      alias,
+      getClusterClient: () => this.getClusterClient(),
+      isWriteEnabled: this.isWriteEnabled(),
+      ready: initialize,
+    });
+  }
 }
diff --git a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts
index a362dcccc2f0f..38ddbd3f1876b 100644
--- a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts
+++ b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type.test.ts
@@ -126,6 +126,25 @@ describe('createLifecycleRuleTypeFactory', () => {
       helpers = createRule();
     });
 
+    describe('when writing is disabled', () => {
+      beforeEach(() => {
+        helpers.ruleDataClientMock.isWriteEnabled.mockReturnValue(false);
+      });
+
+      it("doesn't persist anything", async () => {
+        await helpers.alertWithLifecycle([
+          {
+            id: 'opbeans-java',
+            fields: {
+              'service.name': 'opbeans-java',
+            },
+          },
+        ]);
+
+        expect(helpers.ruleDataClientMock.getWriter().bulk).toHaveBeenCalledTimes(0);
+      });
+    });
+
     describe('when alerts are new', () => {
       beforeEach(async () => {
         await helpers.alertWithLifecycle([
diff --git a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
index c2e0ae7c151ca..005af59892b8a 100644
--- a/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
+++ b/x-pack/plugins/rule_registry/server/utils/create_lifecycle_rule_type_factory.ts
@@ -235,16 +235,18 @@ export const createLifecycleRuleTypeFactory: CreateLifecycleRuleTypeFactory = ({
           });
         }
 
-        await ruleDataClient.getWriter().bulk({
-          body: eventsToIndex
-            .flatMap((event) => [{ index: {} }, event])
-            .concat(
-              Array.from(alertEvents.values()).flatMap((event) => [
-                { index: { _id: event[ALERT_UUID]! } },
-                event,
-              ])
-            ),
-        });
+        if (ruleDataClient.isWriteEnabled()) {
+          await ruleDataClient.getWriter().bulk({
+            body: eventsToIndex
+              .flatMap((event) => [{ index: {} }, event])
+              .concat(
+                Array.from(alertEvents.values()).flatMap((event) => [
+                  { index: { _id: event[ALERT_UUID]! } },
+                  event,
+                ])
+              ),
+          });
+        }
       }
 
       const nextTrackedAlerts = Object.fromEntries(
@@ -260,7 +262,7 @@ export const createLifecycleRuleTypeFactory: CreateLifecycleRuleTypeFactory = ({
 
       return {
         wrapped: nextWrappedState ?? {},
-        trackedAlerts: nextTrackedAlerts,
+        trackedAlerts: ruleDataClient.isWriteEnabled() ? nextTrackedAlerts : {},
       };
     },
   };
diff --git a/x-pack/plugins/rule_registry/server/utils/create_persistence_rule_type_factory.ts b/x-pack/plugins/rule_registry/server/utils/create_persistence_rule_type_factory.ts
index 3f50b78151e74..9f4a6ce2e022c 100644
--- a/x-pack/plugins/rule_registry/server/utils/create_persistence_rule_type_factory.ts
+++ b/x-pack/plugins/rule_registry/server/utils/create_persistence_rule_type_factory.ts
@@ -100,7 +100,7 @@ export const createPersistenceRuleTypeFactory: CreatePersistenceRuleTypeFactory
       const numAlerts = currentAlerts.length;
       logger.debug(`Found ${numAlerts} alerts.`);
 
-      if (ruleDataClient && numAlerts) {
+      if (ruleDataClient.isWriteEnabled() && numAlerts) {
         await ruleDataClient.getWriter().bulk({
           body: currentAlerts.flatMap((event) => [{ index: {} }, event]),
         });
diff --git a/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.test.ts b/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.test.ts
index 7d3810bed8f44..8983f1a99b0cd 100644
--- a/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.test.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.test.ts
@@ -20,6 +20,8 @@ describe('Host Isolation utils isVersionSupported', () => {
     ${'7.14.0-SNAPSHOT'}      | ${'7.14.0'} | ${true}
     ${'7.14.0-SNAPSHOT-beta'} | ${'7.14.0'} | ${true}
     ${'7.14.0-alpha'}         | ${'7.14.0'} | ${true}
+    ${'8.0.0-SNAPSHOT'}       | ${'7.14.0'} | ${true}
+    ${'8.0.0'}                | ${'7.14.0'} | ${true}
   `('should validate that version $a is compatible($expected) to $b', ({ a, b, expected }) => {
     expect(
       isVersionSupported({
diff --git a/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.ts b/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.ts
index c5e57179bcb8d..fd0180b9146e7 100644
--- a/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.ts
+++ b/x-pack/plugins/security_solution/common/endpoint/service/host_isolation/utils.ts
@@ -4,6 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
+import semverLt from 'semver/functions/lt';
 
 export const isVersionSupported = ({
   currentVersion,
@@ -12,19 +13,14 @@ export const isVersionSupported = ({
   currentVersion: string;
   minVersionRequired: string;
 }) => {
-  const parsedCurrentVersion = currentVersion.includes('-SNAPSHOT')
+  const parsedCurrentVersion = currentVersion.includes('-')
     ? currentVersion.substring(0, currentVersion.indexOf('-'))
     : currentVersion;
-  const tokenizedCurrent = parsedCurrentVersion
-    .split('.')
-    .map((token: string) => parseInt(token, 10));
-  const tokenizedMin = minVersionRequired.split('.').map((token: string) => parseInt(token, 10));
 
-  const versionNotSupported = tokenizedCurrent.some((token: number, index: number) => {
-    return token < tokenizedMin[index];
-  });
-
-  return !versionNotSupported;
+  return (
+    parsedCurrentVersion === minVersionRequired ||
+    semverLt(minVersionRequired, parsedCurrentVersion)
+  );
 };
 
 export const isOsSupported = ({
diff --git a/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/common/index.ts b/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/common/index.ts
index 3175876a8299c..f6f5ad4cd23f1 100644
--- a/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/common/index.ts
+++ b/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/common/index.ts
@@ -8,6 +8,7 @@
 import { CloudEcs } from '../../../../ecs/cloud';
 import { HostEcs, OsEcs } from '../../../../ecs/host';
 import { Hit, Hits, Maybe, SearchHit, StringOrNumber, TotalValue } from '../../../common';
+import { EndpointPendingActions, HostStatus } from '../../../../endpoint/types';
 
 export enum HostPolicyResponseActionStatus {
   success = 'success',
@@ -25,6 +26,11 @@ export interface EndpointFields {
   endpointPolicy?: Maybe<string>;
   sensorVersion?: Maybe<string>;
   policyStatus?: Maybe<HostPolicyResponseActionStatus>;
+  /** if the host is currently isolated */
+  isolation?: Maybe<boolean>;
+  /** A count of pending endpoint actions against the host */
+  pendingActions?: Maybe<EndpointPendingActions['pending_actions']>;
+  elasticAgentStatus?: Maybe<HostStatus>;
   id?: Maybe<string>;
 }
 
diff --git a/x-pack/plugins/security_solution/cypress/integration/header/navigation.spec.ts b/x-pack/plugins/security_solution/cypress/integration/header/navigation.spec.ts
index 2079e8e47d479..15982f1674351 100644
--- a/x-pack/plugins/security_solution/cypress/integration/header/navigation.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/header/navigation.spec.ts
@@ -7,7 +7,7 @@
 
 import {
   CASES,
-  DETECTIONS,
+  ALERTS,
   HOSTS,
   ENDPOINTS,
   TRUSTED_APPS,
@@ -15,6 +15,8 @@ import {
   NETWORK,
   OVERVIEW,
   TIMELINES,
+  RULES,
+  EXCEPTIONS,
 } from '../../screens/security_header';
 
 import { loginAndWaitForPage } from '../../tasks/login';
@@ -31,6 +33,8 @@ import {
   NETWORK_URL,
   OVERVIEW_URL,
   TIMELINES_URL,
+  EXCEPTIONS_URL,
+  DETECTIONS_RULE_MANAGEMENT_URL,
 } from '../../urls/navigation';
 import {
   openKibanaNavigation,
@@ -59,7 +63,7 @@ describe('top-level navigation common to all pages in the Security app', () => {
   });
 
   it('navigates to the Alerts page', () => {
-    navigateFromHeaderTo(DETECTIONS);
+    navigateFromHeaderTo(ALERTS);
     cy.url().should('include', ALERTS_URL);
   });
 
@@ -73,6 +77,16 @@ describe('top-level navigation common to all pages in the Security app', () => {
     cy.url().should('include', NETWORK_URL);
   });
 
+  it('navigates to the Rules page', () => {
+    navigateFromHeaderTo(RULES);
+    cy.url().should('include', DETECTIONS_RULE_MANAGEMENT_URL);
+  });
+
+  it('navigates to the Exceptions page', () => {
+    navigateFromHeaderTo(EXCEPTIONS);
+    cy.url().should('include', EXCEPTIONS_URL);
+  });
+
   it('navigates to the Timelines page', () => {
     navigateFromHeaderTo(TIMELINES);
     cy.url().should('include', TIMELINES_URL);
diff --git a/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts b/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts
index b3103963284b4..77a1775494e6a 100644
--- a/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/timelines/row_renderers.spec.ts
@@ -46,6 +46,7 @@ describe('Row renderers', () => {
     loginAndWaitForPage(HOSTS_URL);
     openTimelineUsingToggle();
     populateTimeline();
+    cy.get(TIMELINE_SHOW_ROW_RENDERERS_GEAR).should('exist');
     cy.get(TIMELINE_SHOW_ROW_RENDERERS_GEAR).first().click({ force: true });
   });
 
@@ -59,6 +60,7 @@ describe('Row renderers', () => {
   });
 
   it('Selected renderer can be disabled and enabled', () => {
+    cy.get(TIMELINE_ROW_RENDERERS_SEARCHBOX).should('exist');
     cy.get(TIMELINE_ROW_RENDERERS_SEARCHBOX).type('flow');
 
     cy.get(TIMELINE_ROW_RENDERERS_MODAL_ITEMS_CHECKBOX).first().uncheck();
@@ -75,8 +77,11 @@ describe('Row renderers', () => {
     });
   });
 
-  it.skip('Selected renderer can be disabled with one click', () => {
-    cy.get(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN).click({ force: true });
+  it('Selected renderer can be disabled with one click', () => {
+    cy.get(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN).should('exist');
+    cy.get(TIMELINE_ROW_RENDERERS_DISABLE_ALL_BTN)
+      .pipe(($el) => $el.trigger('click'))
+      .should('not.be.visible');
 
     cy.intercept('PATCH', '/api/timeline').as('updateTimeline');
     cy.wait('@updateTimeline').its('response.statusCode').should('eq', 200);
diff --git a/x-pack/plugins/security_solution/cypress/integration/urls/compatibility.spec.ts b/x-pack/plugins/security_solution/cypress/integration/urls/compatibility.spec.ts
index bbbd6037d3862..fa4a5ee40d126 100644
--- a/x-pack/plugins/security_solution/cypress/integration/urls/compatibility.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/urls/compatibility.spec.ts
@@ -9,8 +9,12 @@ import { loginAndWaitForPage, loginAndWaitForPageWithoutDateRange } from '../../
 
 import {
   ALERTS_URL,
+  detectionRuleEditUrl,
   DETECTIONS,
+  detectionsRuleDetailsUrl,
   DETECTIONS_RULE_MANAGEMENT_URL,
+  ruleDetailsUrl,
+  ruleEditUrl,
   RULE_CREATION,
   SECURITY_DETECTIONS_RULES_CREATION_URL,
   SECURITY_DETECTIONS_RULES_URL,
@@ -28,6 +32,8 @@ const ABSOLUTE_DATE = {
   startTime: '2019-08-01T20:03:29.186Z',
 };
 
+const RULE_ID = '5a4a0460-d822-11eb-8962-bfd4aff0a9b3';
+
 describe('URL compatibility', () => {
   before(() => {
     cleanKibana();
@@ -53,6 +59,16 @@ describe('URL compatibility', () => {
     cy.url().should('include', RULE_CREATION);
   });
 
+  it('Redirects to rule details from old Detections rule details URL', () => {
+    loginAndWaitForPage(detectionsRuleDetailsUrl(RULE_ID));
+    cy.url().should('include', ruleDetailsUrl(RULE_ID));
+  });
+
+  it('Redirects to rule edit from old Detections rule edit URL', () => {
+    loginAndWaitForPage(detectionRuleEditUrl(RULE_ID));
+    cy.url().should('include', ruleEditUrl(RULE_ID));
+  });
+
   it('sets the global start and end dates from the url with timestamps', () => {
     loginAndWaitForPageWithoutDateRange(ABSOLUTE_DATE_RANGE.urlWithTimestamps);
     cy.get(DATE_PICKER_START_DATE_POPOVER_BUTTON).should(
diff --git a/x-pack/plugins/security_solution/cypress/integration/urls/not_found.spec.ts b/x-pack/plugins/security_solution/cypress/integration/urls/not_found.spec.ts
new file mode 100644
index 0000000000000..3b1df67bec29c
--- /dev/null
+++ b/x-pack/plugins/security_solution/cypress/integration/urls/not_found.spec.ts
@@ -0,0 +1,78 @@
+/*
+ * 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 { loginAndWaitForPage } from '../../tasks/login';
+
+import {
+  ALERTS_URL,
+  ENDPOINTS_URL,
+  TRUSTED_APPS_URL,
+  EVENT_FILTERS_URL,
+  TIMELINES_URL,
+  EXCEPTIONS_URL,
+  DETECTIONS_RULE_MANAGEMENT_URL,
+  RULE_CREATION,
+  ruleEditUrl,
+  ruleDetailsUrl,
+} from '../../urls/navigation';
+
+import { cleanKibana } from '../../tasks/common';
+import { NOT_FOUND } from '../../screens/common/page';
+
+const mockRuleId = '5a4a0460-d822-11eb-8962-bfd4aff0a9b3';
+
+describe('Display not found page', () => {
+  before(() => {
+    cleanKibana();
+    loginAndWaitForPage(TIMELINES_URL);
+  });
+
+  it('navigates to the alerts page with incorrect link', () => {
+    loginAndWaitForPage(`${ALERTS_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the exceptions page with incorrect link', () => {
+    loginAndWaitForPage(`${EXCEPTIONS_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the rules page with incorrect link', () => {
+    loginAndWaitForPage(`${DETECTIONS_RULE_MANAGEMENT_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the rules creation page with incorrect link', () => {
+    loginAndWaitForPage(`${RULE_CREATION}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the rules details page with incorrect link', () => {
+    loginAndWaitForPage(`${ruleDetailsUrl(mockRuleId)}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the edit rules page with incorrect link', () => {
+    loginAndWaitForPage(`${ruleEditUrl(mockRuleId)}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the endpoints page with incorrect link', () => {
+    loginAndWaitForPage(`${ENDPOINTS_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the trusted applications page with incorrect link', () => {
+    loginAndWaitForPage(`${TRUSTED_APPS_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+
+  it('navigates to the trusted applications page with incorrect link', () => {
+    loginAndWaitForPage(`${EVENT_FILTERS_URL}/randomUrl`);
+    cy.get(NOT_FOUND).should('exist');
+  });
+});
diff --git a/x-pack/plugins/security_solution/cypress/integration/urls/state.spec.ts b/x-pack/plugins/security_solution/cypress/integration/urls/state.spec.ts
index f2b644e8d054c..842dd85b42ef8 100644
--- a/x-pack/plugins/security_solution/cypress/integration/urls/state.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/urls/state.spec.ts
@@ -74,7 +74,6 @@ describe('url state', () => {
     waitForIpsTableToBeLoaded();
     setEndDate(ABSOLUTE_DATE.newEndTimeTyped);
     updateDates();
-    cy.wait(300);
 
     let startDate: string;
     let endDate: string;
diff --git a/x-pack/plugins/security_solution/cypress/screens/common/page.ts b/x-pack/plugins/security_solution/cypress/screens/common/page.ts
index df3890e30746c..3f6a130ca3314 100644
--- a/x-pack/plugins/security_solution/cypress/screens/common/page.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/common/page.ts
@@ -6,3 +6,5 @@
  */
 
 export const PAGE_TITLE = '[data-test-subj="header-page-title"]';
+
+export const NOT_FOUND = '[data-test-subj="notFoundPage"]';
diff --git a/x-pack/plugins/security_solution/cypress/screens/security_header.ts b/x-pack/plugins/security_solution/cypress/screens/security_header.ts
index 3573d78bfcf8a..d4589745f9757 100644
--- a/x-pack/plugins/security_solution/cypress/screens/security_header.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/security_header.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-export const DETECTIONS = '[data-test-subj="navigation-alerts"]';
+export const ALERTS = '[data-test-subj="navigation-alerts"]';
 
 export const BREADCRUMBS = '[data-test-subj="breadcrumbs"] a';
 
@@ -23,6 +23,10 @@ export const EVENT_FILTERS = '[data-test-subj="navigation-event_filters"]';
 
 export const NETWORK = '[data-test-subj="navigation-network"]';
 
+export const RULES = '[data-test-subj="navigation-rules"]';
+
+export const EXCEPTIONS = '[data-test-subj="navigation-exceptions"]';
+
 export const OVERVIEW = '[data-test-subj="navigation-overview"]';
 
 export const REFRESH_BUTTON = '[data-test-subj="querySubmitButton"]';
diff --git a/x-pack/plugins/security_solution/cypress/tasks/date_picker.ts b/x-pack/plugins/security_solution/cypress/tasks/date_picker.ts
index 5fef4f2f5569b..26512a2fcbc5b 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/date_picker.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/date_picker.ts
@@ -21,7 +21,7 @@ export const setEndDate = (date: string) => {
 
   cy.get(DATE_PICKER_ABSOLUTE_TAB).first().click({ force: true });
 
-  cy.get(DATE_PICKER_ABSOLUTE_INPUT).clear().type(date);
+  cy.get(DATE_PICKER_ABSOLUTE_INPUT).click().clear().type(date);
 };
 
 export const setStartDate = (date: string) => {
@@ -29,7 +29,7 @@ export const setStartDate = (date: string) => {
 
   cy.get(DATE_PICKER_ABSOLUTE_TAB).first().click({ force: true });
 
-  cy.get(DATE_PICKER_ABSOLUTE_INPUT).clear().type(date);
+  cy.get(DATE_PICKER_ABSOLUTE_INPUT).click().clear().type(date);
 };
 
 export const setTimelineEndDate = (date: string) => {
diff --git a/x-pack/plugins/security_solution/cypress/urls/navigation.ts b/x-pack/plugins/security_solution/cypress/urls/navigation.ts
index 879f16f0b7e0e..304db7e93e2cb 100644
--- a/x-pack/plugins/security_solution/cypress/urls/navigation.ts
+++ b/x-pack/plugins/security_solution/cypress/urls/navigation.ts
@@ -7,7 +7,12 @@
 
 export const ALERTS_URL = 'app/security/alerts';
 export const DETECTIONS_RULE_MANAGEMENT_URL = 'app/security/rules';
-export const detectionsRuleDetailsUrl = (ruleId: string) => `app/security/rules/id/${ruleId}`;
+export const ruleDetailsUrl = (ruleId: string) => `app/security/rules/id/${ruleId}`;
+export const detectionsRuleDetailsUrl = (ruleId: string) =>
+  `app/security/detections/rules/id/${ruleId}`;
+
+export const ruleEditUrl = (ruleId: string) => `${ruleDetailsUrl(ruleId)}/edit`;
+export const detectionRuleEditUrl = (ruleId: string) => `${detectionsRuleDetailsUrl(ruleId)}/edit`;
 
 export const CASES_URL = '/app/security/cases';
 export const DETECTIONS = '/app/siem#/detections';
diff --git a/x-pack/plugins/security_solution/public/app/404.tsx b/x-pack/plugins/security_solution/public/app/404.tsx
index 2634ffd47bff1..72cae59867081 100644
--- a/x-pack/plugins/security_solution/public/app/404.tsx
+++ b/x-pack/plugins/security_solution/public/app/404.tsx
@@ -8,14 +8,26 @@
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+import { EuiEmptyPrompt, EuiPageTemplate } from '@elastic/eui';
 import { SecuritySolutionPageWrapper } from '../common/components/page_wrapper';
 
 export const NotFoundPage = React.memo(() => (
   <SecuritySolutionPageWrapper>
-    <FormattedMessage
-      id="xpack.securitySolution.pages.fourohfour.noContentFoundDescription"
-      defaultMessage="No content found"
-    />
+    <EuiPageTemplate template="centeredContent">
+      <EuiEmptyPrompt
+        data-test-subj="notFoundPage"
+        iconColor="default"
+        iconType="logoElastic"
+        title={
+          <p>
+            <FormattedMessage
+              id="xpack.securitySolution.pages.fourohfour.pageNotFoundDescription"
+              defaultMessage="Page not found"
+            />
+          </p>
+        }
+      />
+    </EuiPageTemplate>
   </SecuritySolutionPageWrapper>
 ));
 
diff --git a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx
index 9722447b96ad5..3e0aa17a3830e 100644
--- a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.test.tsx
@@ -5,6 +5,9 @@
  * 2.0.
  */
 
+import React from 'react';
+import { mount } from 'enzyme';
+import 'jest-styled-components';
 import { createUpdateSuccessToaster } from './helpers';
 import { Case } from '../../../../../cases/common';
 
@@ -23,12 +26,30 @@ describe('helpers', () => {
     it('creates the correct toast when the sync alerts is on', () => {
       // We remove the id as is randomly generated and the text as it is a React component
       // which is being test on toaster_content.test.tsx
-      const { id, text, ...toast } = createUpdateSuccessToaster(theCase, onViewCaseClick);
+      const { id, text, title, ...toast } = createUpdateSuccessToaster(theCase, onViewCaseClick);
+      const mountedTitle = mount(<>{title}</>);
+
       expect(toast).toEqual({
         color: 'success',
         iconType: 'check',
-        title: 'An alert has been added to "My case"',
       });
+      expect(mountedTitle).toMatchInlineSnapshot(`
+        .c0 {
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 3;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+
+        <styled.span>
+          <span
+            className="c0"
+          >
+            An alert has been added to "My case"
+          </span>
+        </styled.span>
+      `);
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx
index 8682b6680830d..93e1f0499893e 100644
--- a/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/timeline_actions/helpers.tsx
@@ -7,11 +7,22 @@
 
 import React from 'react';
 import uuid from 'uuid';
+import styled from 'styled-components';
 import { AppToast } from '../../../common/components/toasters';
 import { ToasterContent } from './toaster_content';
 import * as i18n from './translations';
 import { Case } from '../../../../../cases/common';
 
+const LINE_CLAMP = 3;
+
+const Title = styled.span`
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: ${LINE_CLAMP};
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+
 export const createUpdateSuccessToaster = (
   theCase: Case,
   onViewCaseClick: (id: string) => void
@@ -20,7 +31,7 @@ export const createUpdateSuccessToaster = (
     id: uuid.v4(),
     color: 'success',
     iconType: 'check',
-    title: i18n.CASE_CREATED_SUCCESS_TOAST(theCase.title),
+    title: <Title>{i18n.CASE_CREATED_SUCCESS_TOAST(theCase.title)}</Title>,
     text: (
       <ToasterContent
         caseId={theCase.id}
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
index 6789d8e1d4524..1f7e668b21b98 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.test.ts
@@ -13,6 +13,7 @@ import { RouteSpyState, SiemRouteType } from '../../../utils/route/types';
 import { TabNavigationProps } from '../tab_navigation/types';
 import { NetworkRouteType } from '../../../../network/pages/navigation/types';
 import { TimelineTabs } from '../../../../../common/types/timeline';
+import { AdministrationSubTab } from '../../../../management/types';
 
 const setBreadcrumbsMock = jest.fn();
 const chromeMock = {
@@ -26,6 +27,8 @@ const mockDefaultTab = (pageName: string): SiemRouteType | undefined => {
       return HostsTableType.authentications;
     case 'network':
       return NetworkRouteType.flows;
+    case 'administration':
+      return AdministrationSubTab.endpoints;
     default:
       return undefined;
   }
@@ -423,16 +426,16 @@ describe('Navigation Breadcrumbs', () => {
         },
       ]);
     });
-    test('should return Admin breadcrumbs when supplied admin pathname', () => {
+    test('should return Admin breadcrumbs when supplied endpoints pathname', () => {
       const breadcrumbs = getBreadcrumbsForRoute(
-        getMockObject('administration', '/', undefined),
+        getMockObject('administration', '/endpoints', undefined),
         getUrlForAppMock
       );
       expect(breadcrumbs).toEqual([
         { text: 'Security', href: 'securitySolution/overview' },
         {
-          text: 'Administration',
-          href: 'securitySolution/endpoints',
+          text: 'Endpoints',
+          href: '',
         },
       ]);
     });
diff --git a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
index 4578e16dc5540..03ee38473e58d 100644
--- a/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
+++ b/x-pack/plugins/security_solution/public/common/components/navigation/breadcrumbs/index.ts
@@ -186,18 +186,7 @@ export const getBreadcrumbsForRoute = (
     if (spyState.tabName != null) {
       urlStateKeys = [...urlStateKeys, getOr(tempNav, spyState.tabName, object.navTabs)];
     }
-
-    return [
-      siemRootBreadcrumb,
-      ...getAdminBreadcrumbs(
-        spyState,
-        urlStateKeys.reduce(
-          (acc: string[], item: SearchNavTab) => [...acc, getSearch(item, object)],
-          []
-        ),
-        getUrlForApp
-      ),
-    ];
+    return [siemRootBreadcrumb, ...getAdminBreadcrumbs(spyState)];
   }
 
   if (
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
index 8908b83fc9b56..035e1314f1557 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/helpers.ts
@@ -26,6 +26,11 @@ import { ReplaceStateInLocation, UpdateUrlStateString } from './types';
 import { sourcererSelectors } from '../../store/sourcerer';
 import { SourcererScopeName, SourcererScopePatterns } from '../../store/sourcerer/model';
 
+export const isDetectionsPages = (pageName: string) =>
+  pageName === SecurityPageName.alerts ||
+  pageName === SecurityPageName.rules ||
+  pageName === SecurityPageName.exceptions;
+
 export const decodeRisonUrlState = <T>(value: string | undefined): T | null => {
   try {
     return value ? ((decode(value) as unknown) as T) : null;
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx
index 9fc2e24221bcb..4df5e093ec07c 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/initialize_redux_by_url.tsx
@@ -19,12 +19,11 @@ import {
 } from '../../store/inputs/model';
 import { TimelineUrl } from '../../../timelines/store/timeline/model';
 import { CONSTANTS } from './constants';
-import { decodeRisonUrlState } from './helpers';
+import { decodeRisonUrlState, isDetectionsPages } from './helpers';
 import { normalizeTimeRange } from './normalize_time_range';
 import { DispatchSetInitialStateFromUrl, SetInitialStateFromUrl } from './types';
 import { queryTimelineById } from '../../../timelines/components/open_timeline/helpers';
 import { SourcererScopeName, SourcererScopePatterns } from '../../store/sourcerer/model';
-import { SecurityPageName } from '../../../../common/constants';
 
 export const dispatchSetInitialStateFromUrl = (
   dispatch: Dispatch
@@ -45,7 +44,7 @@ export const dispatchSetInitialStateFromUrl = (
       const sourcererState = decodeRisonUrlState<SourcererScopePatterns>(newUrlStateString);
       if (sourcererState != null) {
         const activeScopes: SourcererScopeName[] = Object.keys(sourcererState).filter(
-          (key) => !(key === SourcererScopeName.default && pageName === SecurityPageName.alerts)
+          (key) => !(key === SourcererScopeName.default && isDetectionsPages(pageName))
         ) as SourcererScopeName[];
         activeScopes.forEach((scope) =>
           dispatch(
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
index 10d586c2d7441..487463dfd9d7d 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/use_url_state.tsx
@@ -19,6 +19,7 @@ import {
   replaceStateInLocation,
   updateUrlStateString,
   decodeRisonUrlState,
+  isDetectionsPages,
 } from './helpers';
 import {
   UrlStateContainerPropTypes,
@@ -29,7 +30,6 @@ import {
   UrlStateToRedux,
   UrlState,
 } from './types';
-import { SecurityPageName } from '../../../app/types';
 import { TimelineUrl } from '../../../timelines/store/timeline/model';
 
 function usePrevious(value: PreviousLocationUrlState) {
@@ -221,7 +221,7 @@ export const useUrlStateHooks = ({
         }
       });
     } else if (pathName !== prevProps.pathName) {
-      handleInitialize(type, pageName === SecurityPageName.alerts);
+      handleInitialize(type, isDetectionsPages(pageName));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isInitializing, history, pathName, pageName, prevProps, urlState]);
diff --git a/x-pack/plugins/security_solution/public/common/mock/global_state.ts b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
index 316f8b6214d1e..ffbfd1a5123ad 100644
--- a/x-pack/plugins/security_solution/public/common/mock/global_state.ts
+++ b/x-pack/plugins/security_solution/public/common/mock/global_state.ts
@@ -59,7 +59,7 @@ export const mockGlobalState: State = {
         events: { activePage: 0, limit: 10 },
         uncommonProcesses: { activePage: 0, limit: 10 },
         anomalies: null,
-        alerts: { activePage: 0, limit: 10 },
+        externalAlerts: { activePage: 0, limit: 10 },
       },
     },
     details: {
@@ -74,7 +74,7 @@ export const mockGlobalState: State = {
         events: { activePage: 0, limit: 10 },
         uncommonProcesses: { activePage: 0, limit: 10 },
         anomalies: null,
-        alerts: { activePage: 0, limit: 10 },
+        externalAlerts: { activePage: 0, limit: 10 },
       },
     },
   },
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.test.tsx
index 8c6f74a01e49a..12923609db266 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/query_bar/index.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount } from 'enzyme';
 
 import { QueryBarDefineRule } from './index';
 import {
@@ -17,7 +17,26 @@ import {
 import { useGetAllTimeline, getAllTimeline } from '../../../../timelines/containers/all';
 import { mockHistory, Router } from '../../../../common/mock/router';
 
-jest.mock('../../../../common/lib/kibana');
+jest.mock('../../../../common/lib/kibana', () => {
+  const actual = jest.requireActual('../../../../common/lib/kibana');
+  return {
+    ...actual,
+    KibanaServices: {
+      get: jest.fn(() => ({
+        http: {
+          post: jest.fn().mockReturnValue({
+            success: true,
+            success_count: 0,
+            timelines_installed: 0,
+            timelines_updated: 0,
+            errors: [],
+          }),
+          fetch: jest.fn(),
+        },
+      })),
+    },
+  };
+});
 
 jest.mock('../../../../timelines/containers/all', () => {
   const originalModule = jest.requireActual('../../../../timelines/containers/all');
@@ -55,8 +74,14 @@ describe('QueryBarDefineRule', () => {
         />
       );
     };
-    const wrapper = shallow(<Component />);
-    expect(wrapper.dive().find('[data-test-subj="query-bar-define-rule"]')).toHaveLength(1);
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <Component />
+        </Router>
+      </TestProviders>
+    );
+    expect(wrapper.find('[data-test-subj="query-bar-define-rule"]').exists()).toBeTruthy();
   });
 
   it('renders import query from saved timeline modal actions hidden correctly', () => {
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_overflow/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_overflow/index.test.tsx
index c545de7fd8d7d..6a62b05c2e319 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_overflow/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_overflow/index.test.tsx
@@ -36,11 +36,16 @@ jest.mock('react-router-dom', () => ({
   }),
 }));
 
-jest.mock('../../../pages/detection_engine/rules/all/actions', () => ({
-  deleteRulesAction: jest.fn(),
-  duplicateRulesAction: jest.fn(),
-  editRuleAction: jest.fn(),
-}));
+jest.mock('../../../pages/detection_engine/rules/all/actions', () => {
+  const actual = jest.requireActual('../../../../common/lib/kibana');
+  return {
+    ...actual,
+    exportRulesAction: jest.fn(),
+    deleteRulesAction: jest.fn(),
+    duplicateRulesAction: jest.fn(),
+    editRuleAction: jest.fn(),
+  };
+});
 
 const duplicateRulesActionMock = duplicateRulesAction as jest.Mock;
 const flushPromises = () => new Promise(setImmediate);
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.test.ts b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.test.ts
index 3d1b3a422ff64..ec9ee47bcb087 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.test.ts
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.test.ts
@@ -215,6 +215,32 @@ describe('Detections Rules API', () => {
       });
     });
 
+    test('check parameter url, passed sort field is snake case', async () => {
+      await fetchRules({
+        filterOptions: {
+          filter: '',
+          sortField: 'updated_at',
+          sortOrder: 'desc',
+          showCustomRules: false,
+          showElasticRules: false,
+          tags: ['hello', 'world'],
+        },
+        signal: abortCtrl.signal,
+      });
+
+      expect(fetchMock).toHaveBeenCalledWith('/api/detection_engine/rules/_find', {
+        method: 'GET',
+        query: {
+          filter: 'alert.attributes.tags: "hello" AND alert.attributes.tags: "world"',
+          page: 1,
+          per_page: 20,
+          sort_field: 'updatedAt',
+          sort_order: 'desc',
+        },
+        signal: abortCtrl.signal,
+      });
+    });
+
     test('query with tags KQL parses without errors when tags contain characters such as left parenthesis (', async () => {
       await fetchRules({
         filterOptions: {
diff --git a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.ts b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.ts
index 7de91a07a68a0..85f6c88765158 100644
--- a/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.ts
+++ b/x-pack/plugins/security_solution/public/detections/containers/detection_engine/rules/api.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { camelCase } from 'lodash';
 import { FullResponseSchema } from '../../../../../common/detection_engine/schemas/request';
 import { HttpStart } from '../../../../../../../../src/core/public';
 import {
@@ -117,8 +118,9 @@ export const fetchRules = async ({
 }: FetchRulesProps): Promise<FetchRulesResponse> => {
   const filterString = convertRulesFilterToKQL(filterOptions);
 
+  // Sort field is camel cased because we use that in our mapping, but display snake case on the front end
   const getFieldNameForSortField = (field: string) => {
-    return field === 'name' ? `${field}.keyword` : field;
+    return field === 'name' ? `${field}.keyword` : camelCase(field);
   };
 
   const query = {
diff --git a/x-pack/plugins/security_solution/public/detections/routes.tsx b/x-pack/plugins/security_solution/public/detections/routes.tsx
index 329e1c939c201..f0128577cb268 100644
--- a/x-pack/plugins/security_solution/public/detections/routes.tsx
+++ b/x-pack/plugins/security_solution/public/detections/routes.tsx
@@ -6,21 +6,29 @@
  */
 
 import React from 'react';
-import { Redirect, RouteProps, RouteComponentProps } from 'react-router-dom';
+import { Redirect, RouteProps, RouteComponentProps, Route, Switch } from 'react-router-dom';
 import { TrackApplicationView } from '../../../../../src/plugins/usage_collection/public';
 import { ALERTS_PATH, DETECTIONS_PATH, SecurityPageName } from '../../common/constants';
+import { NotFoundPage } from '../app/404';
 
 import { SpyRoute } from '../common/utils/route/spy_routes';
 
 import { DetectionEnginePage } from './pages/detection_engine/detection_engine';
 
-const renderAlertsRoutes = () => (
+const AlertsRoute = () => (
   <TrackApplicationView viewId={SecurityPageName.alerts}>
     <DetectionEnginePage />
     <SpyRoute pageName={SecurityPageName.alerts} />
   </TrackApplicationView>
 );
 
+const renderAlertsRoutes = () => (
+  <Switch>
+    <Route path={ALERTS_PATH} exact component={AlertsRoute} />
+    <Route component={NotFoundPage} />
+  </Switch>
+);
+
 const DetectionsRedirects = ({ location }: RouteComponentProps) =>
   location.pathname === DETECTIONS_PATH ? (
     <Redirect to={{ ...location, pathname: ALERTS_PATH }} />
@@ -30,11 +38,11 @@ const DetectionsRedirects = ({ location }: RouteComponentProps) =>
 
 export const routes: RouteProps[] = [
   {
-    path: ALERTS_PATH,
-    render: renderAlertsRoutes,
+    path: DETECTIONS_PATH,
+    render: DetectionsRedirects,
   },
   {
-    path: DETECTIONS_PATH,
-    component: DetectionsRedirects,
+    path: ALERTS_PATH,
+    render: renderAlertsRoutes,
   },
 ];
diff --git a/x-pack/plugins/security_solution/public/exceptions/routes.tsx b/x-pack/plugins/security_solution/public/exceptions/routes.tsx
index 0afc152ed3870..a5b95ffa64d4d 100644
--- a/x-pack/plugins/security_solution/public/exceptions/routes.tsx
+++ b/x-pack/plugins/security_solution/public/exceptions/routes.tsx
@@ -5,13 +5,15 @@
  * 2.0.
  */
 import React from 'react';
+import { Route, Switch } from 'react-router-dom';
 
 import { TrackApplicationView } from '../../../../../src/plugins/usage_collection/public';
 import { EXCEPTIONS_PATH, SecurityPageName } from '../../common/constants';
 import { ExceptionListsTable } from '../detections/pages/detection_engine/rules/all/exceptions/exceptions_table';
 import { SpyRoute } from '../common/utils/route/spy_routes';
+import { NotFoundPage } from '../app/404';
 
-export const ExceptionsRoutes = () => {
+const ExceptionsRoutes = () => {
   return (
     <TrackApplicationView viewId={SecurityPageName.exceptions}>
       <ExceptionListsTable />
@@ -20,9 +22,18 @@ export const ExceptionsRoutes = () => {
   );
 };
 
+const renderExceptionsRoutes = () => {
+  return (
+    <Switch>
+      <Route path={EXCEPTIONS_PATH} exact component={ExceptionsRoutes} />
+      <Route component={NotFoundPage} />
+    </Switch>
+  );
+};
+
 export const routes = [
   {
     path: EXCEPTIONS_PATH,
-    render: ExceptionsRoutes,
+    render: renderExceptionsRoutes,
   },
 ];
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
index 3b76ec8a0d13f..5be29a94b5330 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/details/details_tabs.test.tsx
@@ -18,6 +18,7 @@ import { hostDetailsPagePath } from '../types';
 import { type } from './utils';
 import { useMountAppended } from '../../../common/utils/use_mount_appended';
 import { getHostDetailsPageFilters } from './helpers';
+import { HostsTableType } from '../../store/model';
 
 jest.mock('../../../common/lib/kibana');
 
@@ -51,12 +52,12 @@ mockUseResizeObserver.mockImplementation(() => ({}));
 
 describe('body', () => {
   const scenariosMap = {
-    authentications: 'AuthenticationsQueryTabBody',
-    allHosts: 'HostsQueryTabBody',
-    uncommonProcesses: 'UncommonProcessQueryTabBody',
-    anomalies: 'AnomaliesQueryTabBody',
-    events: 'EventsQueryTabBody',
-    alerts: 'HostAlertsQueryTabBody',
+    [HostsTableType.authentications]: 'AuthenticationsQueryTabBody',
+    [HostsTableType.hosts]: 'HostsQueryTabBody',
+    [HostsTableType.uncommonProcesses]: 'UncommonProcessQueryTabBody',
+    [HostsTableType.anomalies]: 'AnomaliesQueryTabBody',
+    [HostsTableType.events]: 'EventsQueryTabBody',
+    [HostsTableType.alerts]: 'HostAlertsQueryTabBody',
   };
 
   const mockHostDetailsPageFilters = getHostDetailsPageFilters('host-1');
diff --git a/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts b/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts
index c9dcc3a60b4a9..8c3a3e27ffb38 100644
--- a/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/hosts/store/helpers.test.ts
@@ -71,26 +71,26 @@ describe('Hosts redux store', () => {
   describe('#setHostsQueriesActivePageToZero', () => {
     test('set activePage to zero for all queries in hosts page  ', () => {
       expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.page)).toEqual({
-        allHosts: {
+        [HostsTableType.hosts]: {
           activePage: 0,
           direction: 'desc',
           limit: 10,
           sortField: 'lastSeen',
         },
-        anomalies: null,
-        authentications: {
+        [HostsTableType.anomalies]: null,
+        [HostsTableType.authentications]: {
           activePage: 0,
           limit: 10,
         },
-        events: {
+        [HostsTableType.events]: {
           activePage: 0,
           limit: 10,
         },
-        uncommonProcesses: {
+        [HostsTableType.uncommonProcesses]: {
           activePage: 0,
           limit: 10,
         },
-        alerts: {
+        [HostsTableType.alerts]: {
           activePage: 0,
           limit: 10,
         },
@@ -99,26 +99,26 @@ describe('Hosts redux store', () => {
 
     test('set activePage to zero for all queries in host details  ', () => {
       expect(setHostsQueriesActivePageToZero(mockHostsState, HostsType.details)).toEqual({
-        allHosts: {
+        [HostsTableType.hosts]: {
           activePage: 0,
           direction: 'desc',
           limit: 10,
           sortField: 'lastSeen',
         },
-        anomalies: null,
-        authentications: {
+        [HostsTableType.anomalies]: null,
+        [HostsTableType.authentications]: {
           activePage: 0,
           limit: 10,
         },
-        events: {
+        [HostsTableType.events]: {
           activePage: 0,
           limit: 10,
         },
-        uncommonProcesses: {
+        [HostsTableType.uncommonProcesses]: {
           activePage: 0,
           limit: 10,
         },
-        alerts: {
+        [HostsTableType.alerts]: {
           activePage: 0,
           limit: 10,
         },
diff --git a/x-pack/plugins/security_solution/public/hosts/store/model.ts b/x-pack/plugins/security_solution/public/hosts/store/model.ts
index 2060d46206723..ea168e965fa23 100644
--- a/x-pack/plugins/security_solution/public/hosts/store/model.ts
+++ b/x-pack/plugins/security_solution/public/hosts/store/model.ts
@@ -19,7 +19,7 @@ export enum HostsTableType {
   events = 'events',
   uncommonProcesses = 'uncommonProcesses',
   anomalies = 'anomalies',
-  alerts = 'alerts',
+  alerts = 'externalAlerts',
 }
 
 export interface BasicQueryPaginated {
diff --git a/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts b/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts
index d437c45792766..9c3d781f514e9 100644
--- a/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts
+++ b/x-pack/plugins/security_solution/public/management/common/breadcrumbs.ts
@@ -6,13 +6,9 @@
  */
 
 import { ChromeBreadcrumb } from 'kibana/public';
-import { isEmpty } from 'lodash/fp';
 import { AdministrationSubTab } from '../types';
 import { ENDPOINTS_TAB, EVENT_FILTERS_TAB, POLICIES_TAB, TRUSTED_APPS_TAB } from './translations';
 import { AdministrationRouteSpyState } from '../../common/utils/route/types';
-import { GetUrlForApp } from '../../common/components/navigation/types';
-import { ADMINISTRATION } from '../../app/translations';
-import { APP_ID, SecurityPageName } from '../../../common/constants';
 
 const TabNameMappedToI18nKey: Record<AdministrationSubTab, string> = {
   [AdministrationSubTab.endpoints]: ENDPOINTS_TAB,
@@ -21,19 +17,8 @@ const TabNameMappedToI18nKey: Record<AdministrationSubTab, string> = {
   [AdministrationSubTab.eventFilters]: EVENT_FILTERS_TAB,
 };
 
-export function getBreadcrumbs(
-  params: AdministrationRouteSpyState,
-  search: string[],
-  getUrlForApp: GetUrlForApp
-): ChromeBreadcrumb[] {
+export function getBreadcrumbs(params: AdministrationRouteSpyState): ChromeBreadcrumb[] {
   return [
-    {
-      text: ADMINISTRATION,
-      href: getUrlForApp(APP_ID, {
-        deepLinkId: SecurityPageName.endpoints,
-        path: !isEmpty(search[0]) ? search[0] : '',
-      }),
-    },
     ...(params?.tabName ? [params?.tabName] : []).map((tabName) => ({
       text: TabNameMappedToI18nKey[tabName],
       href: '',
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
index 1a431ea88ad6a..2f8ced9d2a771 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.ts
@@ -36,8 +36,7 @@ import {
   getLastLoadedActivityLogData,
   detailsData,
   getEndpointDetailsFlyoutView,
-  getIsEndpointPackageInfoPending,
-  getIsEndpointPackageInfoSuccessful,
+  getIsEndpointPackageInfoUninitialized,
 } from './selectors';
 import { AgentIdsPendingActions, EndpointState, PolicyIds } from '../types';
 import {
@@ -598,7 +597,7 @@ async function getEndpointPackageInfo(
   dispatch: Dispatch<EndpointPackageInfoStateChanged>,
   coreStart: CoreStart
 ) {
-  if (getIsEndpointPackageInfoPending(state) || getIsEndpointPackageInfoSuccessful(state)) return;
+  if (!getIsEndpointPackageInfoUninitialized(state)) return;
 
   dispatch({
     type: 'endpointPackageInfoStateChanged',
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
index c09e4032d6222..5771fbac957d8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/selectors.ts
@@ -33,6 +33,7 @@ import {
   isFailedResourceState,
   isLoadedResourceState,
   isLoadingResourceState,
+  isUninitialisedResourceState,
 } from '../../../state';
 
 import { ServerApiError } from '../../../../common/types';
@@ -69,15 +70,10 @@ export const policyItemsLoading = (state: Immutable<EndpointState>) => state.pol
 export const selectedPolicyId = (state: Immutable<EndpointState>) => state.selectedPolicyId;
 
 export const endpointPackageInfo = (state: Immutable<EndpointState>) => state.endpointPackageInfo;
-export const getIsEndpointPackageInfoPending: (
+export const getIsEndpointPackageInfoUninitialized: (
   state: Immutable<EndpointState>
 ) => boolean = createSelector(endpointPackageInfo, (packageInfo) =>
-  isLoadingResourceState(packageInfo)
-);
-export const getIsEndpointPackageInfoSuccessful: (
-  state: Immutable<EndpointState>
-) => boolean = createSelector(endpointPackageInfo, (packageInfo) =>
-  isLoadedResourceState(packageInfo)
+  isUninitialisedResourceState(packageInfo)
 );
 
 export const isAutoRefreshEnabled = (state: Immutable<EndpointState>) => state.isAutoRefreshEnabled;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx
index 94db233972d67..d422fb736965a 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/components/endpoint_agent_status.tsx
@@ -6,14 +6,13 @@
  */
 
 import React, { memo } from 'react';
-import { EuiBadge, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import styled from 'styled-components';
 import { HostInfo, HostMetadata } from '../../../../../../common/endpoint/types';
-import { HOST_STATUS_TO_BADGE_COLOR } from '../host_constants';
 import { EndpointHostIsolationStatus } from '../../../../../common/components/endpoint/host_isolation';
 import { useEndpointSelector } from '../hooks';
 import { getEndpointHostIsolationStatusPropsCallback } from '../../store/selectors';
+import { AgentStatus } from '../../../../../common/components/endpoint/agent_status';
 
 const EuiFlexGroupStyled = styled(EuiFlexGroup)`
   .isolation-status {
@@ -34,16 +33,7 @@ export const EndpointAgentStatus = memo<EndpointAgentStatusProps>(
     return (
       <EuiFlexGroupStyled gutterSize="none" responsive={false} className="eui-textTruncate">
         <EuiFlexItem grow={false}>
-          <EuiBadge
-            color={hostStatus != null ? HOST_STATUS_TO_BADGE_COLOR[hostStatus] : 'warning'}
-            data-test-subj="rowHostStatus"
-          >
-            <FormattedMessage
-              id="xpack.securitySolution.endpoint.list.hostStatusValue"
-              defaultMessage="{hostStatus, select, healthy {Healthy} unhealthy {Unhealthy} updating {Updating} offline {Offline} inactive {Inactive} other {Unhealthy}}"
-              values={{ hostStatus }}
-            />
-          </EuiBadge>
+          <AgentStatus hostStatus={hostStatus} />
         </EuiFlexItem>
         <EuiFlexItem grow={false} className="eui-textTruncate isolation-status">
           <EndpointHostIsolationStatus
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
index 166d3f3b98a85..62d51c3630db7 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
@@ -658,4 +658,37 @@ export const AdvancedPolicySchema: AdvancedPolicySchemaType[] = [
       }
     ),
   },
+  {
+    key: 'windows.advanced.memory_protection.shellcode_enhanced_pe_parsing',
+    first_supported_version: '7.15',
+    documentation: i18n.translate(
+      'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.shellcode_enhanced_pe_parsing',
+      {
+        defaultMessage:
+          "A value of 'false' disables enhanced parsing of PEs found within shellcode payloads. Default: true.",
+      }
+    ),
+  },
+  {
+    key: 'windows.advanced.memory_protection.shellcode',
+    first_supported_version: '7.15',
+    documentation: i18n.translate(
+      'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.shellcode',
+      {
+        defaultMessage:
+          "A value of 'false' disables Shellcode Injection Protection, a feature of Memory Protection. Default: true.",
+      }
+    ),
+  },
+  {
+    key: 'windows.advanced.memory_protection.memory_scan',
+    first_supported_version: '7.15',
+    documentation: i18n.translate(
+      'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.memory_protection.signature',
+      {
+        defaultMessage:
+          "A value of 'false' disables Memory Signature Scanning, a feature of Memory Protection. Default: true.",
+      }
+    ),
+  },
 ];
diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
index 45898427ee60b..6a0e7c381664c 100644
--- a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
@@ -13,42 +13,71 @@ import '../../../../common/mock/react_beautiful_dnd';
 import { TestProviders } from '../../../../common/mock';
 
 import { EndpointOverview } from './index';
-import { HostPolicyResponseActionStatus } from '../../../../../common/search_strategy/security_solution/hosts';
+import {
+  EndpointFields,
+  HostPolicyResponseActionStatus,
+} from '../../../../../common/search_strategy/security_solution/hosts';
+import { HostStatus } from '../../../../../common/endpoint/types';
 
 jest.mock('../../../../common/lib/kibana');
 
 describe('EndpointOverview Component', () => {
-  test('it renders with endpoint data', () => {
-    const endpointData = {
-      endpointPolicy: 'demo',
-      policyStatus: HostPolicyResponseActionStatus.success,
-      sensorVersion: '7.9.0-SNAPSHOT',
-    };
-    const wrapper = mount(
+  let endpointData: EndpointFields;
+  let wrapper: ReturnType<typeof mount>;
+  let findData: ReturnType<typeof wrapper['find']>;
+  const render = (data: EndpointFields | null = endpointData) => {
+    wrapper = mount(
       <TestProviders>
-        <EndpointOverview data={endpointData} />
+        <EndpointOverview data={data} />
       </TestProviders>
     );
-
-    const findData = wrapper.find(
+    findData = wrapper.find(
       'dl[data-test-subj="endpoint-overview"] dd.euiDescriptionList__description'
     );
+
+    return wrapper;
+  };
+
+  beforeEach(() => {
+    endpointData = {
+      endpointPolicy: 'demo',
+      policyStatus: HostPolicyResponseActionStatus.success,
+      sensorVersion: '7.9.0-SNAPSHOT',
+      isolation: false,
+      elasticAgentStatus: HostStatus.HEALTHY,
+      pendingActions: {},
+    };
+  });
+
+  test('it renders with endpoint data', () => {
+    render();
     expect(findData.at(0).text()).toEqual(endpointData.endpointPolicy);
     expect(findData.at(1).text()).toEqual(endpointData.policyStatus);
     expect(findData.at(2).text()).toContain(endpointData.sensorVersion); // contain because drag adds a space
+    expect(findData.at(3).text()).toEqual('Healthy');
   });
-  test('it renders with null data', () => {
-    const wrapper = mount(
-      <TestProviders>
-        <EndpointOverview data={null} />
-      </TestProviders>
-    );
 
-    const findData = wrapper.find(
-      'dl[data-test-subj="endpoint-overview"] dd.euiDescriptionList__description'
-    );
+  test('it renders with null data', () => {
+    render(null);
     expect(findData.at(0).text()).toEqual('—');
     expect(findData.at(1).text()).toEqual('—');
     expect(findData.at(2).text()).toContain('—'); // contain because drag adds a space
+    expect(findData.at(3).text()).toEqual('—');
+  });
+
+  test('it shows isolation status', () => {
+    endpointData.isolation = true;
+    render();
+    expect(findData.at(3).text()).toEqual('HealthyIsolated');
+  });
+
+  test.each([
+    ['isolate', 'Isolating'],
+    ['unisolate', 'Releasing'],
+  ])('it shows pending %s status', (action, expectedLabel) => {
+    endpointData.isolation = true;
+    endpointData.pendingActions![action] = 1;
+    render();
+    expect(findData.at(3).text()).toEqual(`Healthy${expectedLabel}`);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.tsx b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.tsx
index 1b05b600c8e3e..568bf30dbe711 100644
--- a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.tsx
@@ -18,6 +18,8 @@ import {
   EndpointFields,
   HostPolicyResponseActionStatus,
 } from '../../../../../common/search_strategy/security_solution/hosts';
+import { AgentStatus } from '../../../../common/components/endpoint/agent_status';
+import { EndpointHostIsolationStatus } from '../../../../common/components/endpoint/host_isolation';
 
 interface Props {
   contextID?: string;
@@ -73,7 +75,24 @@ export const EndpointOverview = React.memo<Props>(({ contextID, data }) => {
               : getEmptyTagValue(),
         },
       ],
-      [], // needs 4 columns for design
+      [
+        {
+          title: i18n.FLEET_AGENT_STATUS,
+          description:
+            data != null && data.elasticAgentStatus ? (
+              <>
+                <AgentStatus hostStatus={data.elasticAgentStatus} />
+                <EndpointHostIsolationStatus
+                  isIsolated={Boolean(data.isolation)}
+                  pendingIsolate={data.pendingActions?.isolate ?? 0}
+                  pendingUnIsolate={data.pendingActions?.unisolate ?? 0}
+                />
+              </>
+            ) : (
+              getEmptyTagValue()
+            ),
+        },
+      ],
     ],
     [data, getDefaultRenderer]
   );
diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/translations.ts b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/translations.ts
index 1a007cd7f0f56..51e1f10e4b927 100644
--- a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/translations.ts
+++ b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/translations.ts
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 export const ENDPOINT_POLICY = i18n.translate(
   'xpack.securitySolution.host.details.endpoint.endpointPolicy',
   {
-    defaultMessage: 'Integration',
+    defaultMessage: 'Endpoint integration policy',
   }
 );
 
@@ -24,6 +24,13 @@ export const POLICY_STATUS = i18n.translate(
 export const SENSORVERSION = i18n.translate(
   'xpack.securitySolution.host.details.endpoint.sensorversion',
   {
-    defaultMessage: 'Sensor Version',
+    defaultMessage: 'Endpoint version',
+  }
+);
+
+export const FLEET_AGENT_STATUS = i18n.translate(
+  'xpack.securitySolution.host.details.endpoint.fleetAgentStatus',
+  {
+    defaultMessage: 'Agent status',
   }
 );
diff --git a/x-pack/plugins/security_solution/public/rules/routes.tsx b/x-pack/plugins/security_solution/public/rules/routes.tsx
index 39b882ad76f8c..fcb434ae760ed 100644
--- a/x-pack/plugins/security_solution/public/rules/routes.tsx
+++ b/x-pack/plugins/security_solution/public/rules/routes.tsx
@@ -9,6 +9,7 @@ import { Route, Switch } from 'react-router-dom';
 
 import { TrackApplicationView } from '../../../../../src/plugins/usage_collection/public';
 import { RULES_PATH, SecurityPageName } from '../../common/constants';
+import { NotFoundPage } from '../app/404';
 import { RulesPage } from '../detections/pages/detection_engine/rules';
 import { CreateRulePage } from '../detections/pages/detection_engine/rules/create';
 import { RuleDetailsPage } from '../detections/pages/detection_engine/rules/details';
@@ -18,39 +19,41 @@ const RulesSubRoutes = [
   {
     path: '/rules/id/:detailName/edit',
     main: EditRulePage,
+    exact: true,
   },
   {
     path: '/rules/id/:detailName',
     main: RuleDetailsPage,
+    exact: true,
   },
   {
     path: '/rules/create',
     main: CreateRulePage,
+    exact: true,
   },
   {
     path: '/rules',
-    exact: true,
     main: RulesPage,
+    exact: true,
   },
 ];
 
-export const RulesRoutes = () => {
-  return (
-    <TrackApplicationView viewId={SecurityPageName.rules}>
-      <Switch>
-        {RulesSubRoutes.map((route, index) => (
-          <Route key={`rules-route-${route.path}`} path={route.path} exact={route?.exact ?? false}>
-            <route.main />
-          </Route>
-        ))}
-      </Switch>
-    </TrackApplicationView>
-  );
-};
+const renderRulesRoutes = () => (
+  <TrackApplicationView viewId={SecurityPageName.rules}>
+    <Switch>
+      {RulesSubRoutes.map((route, index) => (
+        <Route key={`rules-route-${route.path}`} path={route.path} exact={route?.exact ?? false}>
+          <route.main />
+        </Route>
+      ))}
+      <Route component={NotFoundPage} />
+    </Switch>
+  </TrackApplicationView>
+);
 
 export const routes = [
   {
     path: RULES_PATH,
-    render: RulesRoutes,
+    render: renderRulesRoutes,
   },
 ];
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx
index 636bbf4044cb7..64832bf7f039d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/active_timelines.tsx
@@ -22,11 +22,6 @@ import { UNTITLED_TIMELINE, UNTITLED_TEMPLATE } from '../../timeline/properties/
 import { timelineActions } from '../../../store/timeline';
 import * as i18n from './translations';
 
-const ButtonWrapper = styled(EuiFlexItem)`
-  flex-direction: row;
-  align-items: center;
-`;
-
 const EuiHealthStyled = styled(EuiHealth)`
   display: block;
 `;
@@ -83,35 +78,36 @@ const ActiveTimelinesComponent: React.FC<ActiveTimelinesProps> = ({
   }, [timelineStatus, updated]);
 
   return (
-    <EuiFlexGroup gutterSize="none">
-      <ButtonWrapper grow={false}>
-        <StyledEuiButtonEmpty
-          aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })}
-          className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME}
-          flush="both"
-          data-test-subj="flyoutOverlay"
-          size="s"
-          isSelected={isOpen}
-          onClick={handleToggleOpen}
-        >
-          <EuiFlexGroup gutterSize="none" alignItems="center" justifyContent="flexStart">
-            <EuiFlexItem grow={false}>
-              <EuiToolTip position="top" content={tooltipContent}>
-                <EuiHealthStyled
-                  color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'}
-                />
-              </EuiToolTip>
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>{title}</EuiFlexItem>
-            {!isOpen && (
-              <EuiFlexItem grow={false}>
-                <TimelineEventsCountBadge />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </StyledEuiButtonEmpty>
-      </ButtonWrapper>
-    </EuiFlexGroup>
+    <StyledEuiButtonEmpty
+      aria-label={i18n.TIMELINE_TOGGLE_BUTTON_ARIA_LABEL({ isOpen, title })}
+      className={ACTIVE_TIMELINE_BUTTON_CLASS_NAME}
+      flush="both"
+      data-test-subj="flyoutOverlay"
+      size="s"
+      isSelected={isOpen}
+      onClick={handleToggleOpen}
+    >
+      <EuiFlexGroup
+        gutterSize="none"
+        alignItems="center"
+        justifyContent="flexStart"
+        responsive={false}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiToolTip position="top" content={tooltipContent}>
+            <EuiHealthStyled
+              color={timelineStatus === TimelineStatus.draft ? 'warning' : 'success'}
+            />
+          </EuiToolTip>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>{title}</EuiFlexItem>
+        {!isOpen && (
+          <EuiFlexItem grow={false}>
+            <TimelineEventsCountBadge />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </StyledEuiButtonEmpty>
   );
 };
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
index e54da13ea6056..f0c21b6bc1565 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/header/index.tsx
@@ -143,9 +143,9 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
       hasShadow={false}
       data-test-subj="timeline-flyout-header-panel"
     >
-      <EuiFlexGroup alignItems="center" gutterSize="s">
+      <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <AddTimelineButton timelineId={timelineId} />
-        <EuiFlexItem grow>
+        <EuiFlexItem grow={false}>
           <ActiveTimelines
             timelineId={timelineId}
             timelineType={timelineType}
@@ -156,8 +156,8 @@ const FlyoutHeaderPanelComponent: React.FC<FlyoutHeaderPanelProps> = ({ timeline
           />
         </EuiFlexItem>
         {show && (
-          <EuiFlexItem grow={false}>
-            <EuiFlexGroup gutterSize="s">
+          <EuiFlexItem>
+            <EuiFlexGroup justifyContent="flexEnd" gutterSize="s" responsive={false}>
               {(activeTab === TimelineTabs.query || activeTab === TimelineTabs.eql) && (
                 <EuiFlexItem grow={false}>
                   <InspectButton
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
index 06db698a91a6d..edf1a50787a57 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/__snapshots__/index.test.tsx.snap
@@ -241,248 +241,14 @@ exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should
 
 exports[`Details Panel Component DetailsPanel:EventDetails: rendering it should render the Event Details view of the Details Panel in the flyout when the panelView is eventDetail and the eventId is set 1`] = `
 Array [
-  .c1 {
-  -webkit-flex: 0 1 auto;
-  -ms-flex: 0 1 auto;
-  flex: 0 1 auto;
-  margin-top: 8px;
-}
-
-.c2 .euiFlyoutBody__overflow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-}
-
-.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-  overflow: hidden;
-  padding: 4px 16px 50px;
-}
-
-.c0 {
-  z-index: 7000;
-}
-
-<Styled(EuiFlyout)
-    data-test-subj="timeline:details-panel:flyout"
-    onClose={[Function]}
-    ownFocus={false}
-    size="m"
-  >
-    <EuiFlyout
-      className="c0"
-      data-test-subj="timeline:details-panel:flyout"
-      onClose={[Function]}
-      ownFocus={false}
-      size="m"
-    >
-      <div
-        data-eui="EuiFlyout"
-        data-test-subj="timeline:details-panel:flyout"
-        role="dialog"
-      >
-        <button
-          data-test-subj="euiFlyoutCloseButton"
-          onClick={[Function]}
-          type="button"
-        />
-        <EventDetailsPanelComponent
-          browserFields={Object {}}
-          docValueFields={Array []}
-          expandedEvent={
-            Object {
-              "eventId": "my-id",
-              "indexName": "my-index",
-            }
-          }
-          handleOnEventClosed={[Function]}
-          isFlyoutView={true}
-          tabType="query"
-          timelineId="test"
-        >
-          <EuiFlyoutHeader
-            hasBorder={true}
-          >
-            <div
-              className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-            >
-              <ExpandableEventTitle
-                isAlert={false}
-                loading={true}
-              >
-                <Styled(EuiFlexGroup)
-                  gutterSize="none"
-                  justifyContent="spaceBetween"
-                  wrap={true}
-                >
-                  <EuiFlexGroup
-                    className="c1"
-                    gutterSize="none"
-                    justifyContent="spaceBetween"
-                    wrap={true}
-                  >
-                    <div
-                      className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
-                    >
-                      <EuiFlexItem
-                        grow={false}
-                      >
-                        <div
-                          className="euiFlexItem euiFlexItem--flexGrowZero"
-                        >
-                          <EuiTitle
-                            size="s"
-                          />
-                        </div>
-                      </EuiFlexItem>
-                    </div>
-                  </EuiFlexGroup>
-                </Styled(EuiFlexGroup)>
-              </ExpandableEventTitle>
-            </div>
-          </EuiFlyoutHeader>
-          <Styled(EuiFlyoutBody)>
-            <EuiFlyoutBody
-              className="c2"
-            >
-              <div
-                className="euiFlyoutBody c2"
-              >
-                <div
-                  className="euiFlyoutBody__overflow"
-                  tabIndex={0}
-                >
-                  <div
-                    className="euiFlyoutBody__overflowContent"
-                  >
-                    <ExpandableEvent
-                      browserFields={Object {}}
-                      detailsData={null}
-                      event={
-                        Object {
-                          "eventId": "my-id",
-                          "indexName": "my-index",
-                        }
-                      }
-                      isAlert={false}
-                      loading={true}
-                      timelineId="test"
-                      timelineTabType="flyout"
-                    >
-                      <EuiLoadingContent
-                        lines={10}
-                      >
-                        <span
-                          className="euiLoadingContent"
-                        >
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="0"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="1"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="2"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="3"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="4"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="5"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="6"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="7"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="8"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                          <span
-                            className="euiLoadingContent__singleLine"
-                            key="9"
-                          >
-                            <span
-                              className="euiLoadingContent__singleLineBackground"
-                            />
-                          </span>
-                        </span>
-                      </EuiLoadingContent>
-                    </ExpandableEvent>
-                  </div>
-                </div>
-              </div>
-            </EuiFlyoutBody>
-          </Styled(EuiFlyoutBody)>
-        </EventDetailsPanelComponent>
-      </div>
-    </EuiFlyout>
-  </Styled(EuiFlyout)>,
-  .c1 {
+  .c0 {
   -webkit-flex: 0 1 auto;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   margin-top: 8px;
 }
 
-.c2 .euiFlyoutBody__overflow {
+.c1 .euiFlyoutBody__overflow {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -493,7 +259,7 @@ Array [
   overflow: hidden;
 }
 
-.c2 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
+.c1 .euiFlyoutBody__overflow .euiFlyoutBody__overflowContent {
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
@@ -501,12 +267,7 @@ Array [
   padding: 4px 16px 50px;
 }
 
-.c0 {
-  z-index: 7000;
-}
-
 <EuiFlyout
-    className="c0"
     data-test-subj="timeline:details-panel:flyout"
     onClose={[Function]}
     ownFocus={false}
@@ -552,13 +313,13 @@ Array [
                 wrap={true}
               >
                 <EuiFlexGroup
-                  className="c1"
+                  className="c0"
                   gutterSize="none"
                   justifyContent="spaceBetween"
                   wrap={true}
                 >
                   <div
-                    className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c1"
+                    className="euiFlexGroup euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap c0"
                   >
                     <EuiFlexItem
                       grow={false}
@@ -579,10 +340,10 @@ Array [
         </EuiFlyoutHeader>
         <Styled(EuiFlyoutBody)>
           <EuiFlyoutBody
-            className="c2"
+            className="c1"
           >
             <div
-              className="euiFlyoutBody c2"
+              className="euiFlyoutBody c1"
             >
               <div
                 className="euiFlyoutBody__overflow"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
index ea408be7c8e9a..3e57ec2e039f5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/side_panel/index.tsx
@@ -5,10 +5,9 @@
  * 2.0.
  */
 
-import React, { useCallback, useMemo, ReactNode } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 import { EuiFlyout, EuiFlyoutProps } from '@elastic/eui';
-import styled, { StyledComponent } from 'styled-components';
 import { timelineActions, timelineSelectors } from '../../store/timeline';
 import { timelineDefaults } from '../../store/timeline/defaults';
 import { BrowserFields, DocValueFields } from '../../../common/containers/source';
@@ -18,14 +17,6 @@ import { EventDetailsPanel } from './event_details';
 import { HostDetailsPanel } from './host_details';
 import { NetworkDetailsPanel } from './network_details';
 
-// TODO: EUI team follow up on complex types and styled-components `styled`
-// https://github.com/elastic/eui/issues/4855
-const StyledEuiFlyout: StyledComponent<typeof EuiFlyout, {}, { children?: ReactNode }> = styled(
-  EuiFlyout
-)`
-  z-index: ${({ theme }) => theme.eui.euiZLevel7};
-`;
-
 interface DetailsPanelProps {
   browserFields: BrowserFields;
   docValueFields: DocValueFields[];
@@ -113,14 +104,14 @@ export const DetailsPanel = React.memo(
     }
 
     return isFlyoutView ? (
-      <StyledEuiFlyout
+      <EuiFlyout
         data-test-subj="timeline:details-panel:flyout"
         size={panelSize}
         onClose={closePanel}
         ownFocus={false}
       >
         {visiblePanel}
-      </StyledEuiFlyout>
+      </EuiFlyout>
     ) : (
       visiblePanel
     );
diff --git a/x-pack/plugins/security_solution/server/config.ts b/x-pack/plugins/security_solution/server/config.ts
index 8dfe56a1a54f4..d19c36ad21eda 100644
--- a/x-pack/plugins/security_solution/server/config.ts
+++ b/x-pack/plugins/security_solution/server/config.ts
@@ -21,6 +21,12 @@ export const configSchema = schema.object({
   maxRuleImportPayloadBytes: schema.number({ defaultValue: 10485760 }),
   maxTimelineImportExportSize: schema.number({ defaultValue: 10000 }),
   maxTimelineImportPayloadBytes: schema.number({ defaultValue: 10485760 }),
+  alertMergeStrategy: schema.oneOf(
+    [schema.literal('allFields'), schema.literal('missingFields'), schema.literal('noFields')],
+    {
+      defaultValue: 'missingFields',
+    }
+  ),
   [SIGNALS_INDEX_KEY]: schema.string({ defaultValue: DEFAULT_SIGNALS_INDEX }),
 
   /**
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts b/x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts
index b0cea299af60d..5e9594f478b31 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/actions/audit_log_handler.ts
@@ -10,7 +10,7 @@ import {
   EndpointActionLogRequestParams,
   EndpointActionLogRequestQuery,
 } from '../../../../common/endpoint/schema/actions';
-import { getAuditLogResponse } from './service';
+import { getAuditLogResponse } from '../../services';
 import { SecuritySolutionRequestHandlerContext } from '../../../types';
 import { EndpointAppContext } from '../../types';
 
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/actions/status.ts b/x-pack/plugins/security_solution/server/endpoint/routes/actions/status.ts
index eb2c41ccb3506..ec03acee0335d 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/actions/status.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/actions/status.ts
@@ -5,15 +5,8 @@
  * 2.0.
  */
 
-import { ElasticsearchClient, RequestHandler } from 'kibana/server';
+import { RequestHandler } from 'kibana/server';
 import { TypeOf } from '@kbn/config-schema';
-import { SearchRequest } from '@elastic/elasticsearch/api/types';
-import {
-  EndpointAction,
-  EndpointActionResponse,
-  EndpointPendingActions,
-} from '../../../../common/endpoint/types';
-import { AGENT_ACTIONS_INDEX } from '../../../../../fleet/common';
 import { ActionStatusRequestSchema } from '../../../../common/endpoint/schema/actions';
 import { ACTION_STATUS_ROUTE } from '../../../../common/endpoint/constants';
 import {
@@ -21,6 +14,7 @@ import {
   SecuritySolutionRequestHandlerContext,
 } from '../../../types';
 import { EndpointAppContext } from '../../types';
+import { getPendingActionCounts } from '../../services';
 
 /**
  * Registers routes for checking status of endpoints based on pending actions
@@ -53,7 +47,7 @@ export const actionStatusRequestHandler = function (
       ? [...new Set(req.query.agent_ids)]
       : [req.query.agent_ids];
 
-    const response = await getPendingActions(esClient, agentIDs);
+    const response = await getPendingActionCounts(esClient, agentIDs);
 
     return res.ok({
       body: {
@@ -62,94 +56,3 @@ export const actionStatusRequestHandler = function (
     });
   };
 };
-
-const getPendingActions = async (
-  esClient: ElasticsearchClient,
-  agentIDs: string[]
-): Promise<EndpointPendingActions[]> => {
-  // retrieve the unexpired actions for the given hosts
-
-  const recentActions = await searchUntilEmpty<EndpointAction>(esClient, {
-    index: AGENT_ACTIONS_INDEX,
-    body: {
-      query: {
-        bool: {
-          filter: [
-            { term: { type: 'INPUT_ACTION' } }, // actions that are directed at agent children
-            { term: { input_type: 'endpoint' } }, // filter for agent->endpoint actions
-            { range: { expiration: { gte: 'now' } } }, // that have not expired yet
-            { terms: { agents: agentIDs } }, // for the requested agent IDs
-          ],
-        },
-      },
-    },
-  });
-
-  // retrieve any responses to those action IDs from these agents
-  const actionIDs = recentActions.map((a) => a.action_id);
-  const responses = await searchUntilEmpty<EndpointActionResponse>(esClient, {
-    index: '.fleet-actions-results',
-    body: {
-      query: {
-        bool: {
-          filter: [
-            { terms: { action_id: actionIDs } }, // get results for these actions
-            { terms: { agent_id: agentIDs } }, // ignoring responses from agents we're not looking for
-          ],
-        },
-      },
-    },
-  });
-
-  // respond with action-count per agent
-  const pending: EndpointPendingActions[] = agentIDs.map((aid) => {
-    const responseIDsFromAgent = responses
-      .filter((r) => r.agent_id === aid)
-      .map((r) => r.action_id);
-    return {
-      agent_id: aid,
-      pending_actions: recentActions
-        .filter((a) => a.agents.includes(aid) && !responseIDsFromAgent.includes(a.action_id))
-        .map((a) => a.data.command)
-        .reduce((acc, cur) => {
-          if (cur in acc) {
-            acc[cur] += 1;
-          } else {
-            acc[cur] = 1;
-          }
-          return acc;
-        }, {} as EndpointPendingActions['pending_actions']),
-    };
-  });
-
-  return pending;
-};
-
-const searchUntilEmpty = async <T>(
-  esClient: ElasticsearchClient,
-  query: SearchRequest,
-  pageSize: number = 1000
-): Promise<T[]> => {
-  const results: T[] = [];
-
-  for (let i = 0; ; i++) {
-    const result = await esClient.search<T>(
-      {
-        size: pageSize,
-        from: i * pageSize,
-        ...query,
-      },
-      {
-        ignore: [404],
-      }
-    );
-    if (!result || !result.body?.hits?.hits || result.body?.hits?.hits?.length === 0) {
-      break;
-    }
-
-    const response = result.body?.hits?.hits?.map((a) => a._source!) || [];
-    results.push(...response);
-  }
-
-  return results;
-};
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/handlers.ts b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/handlers.ts
index 98610c2e84c02..815f30e6e7426 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/metadata/handlers.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/routes/metadata/handlers.ts
@@ -25,13 +25,14 @@ import {
 import type { SecuritySolutionRequestHandlerContext } from '../../../types';
 
 import { getESQueryHostMetadataByID, kibanaRequestToMetadataListESQuery } from './query_builders';
-import { Agent, AgentStatus, PackagePolicy } from '../../../../../fleet/common/types/models';
+import { Agent, PackagePolicy } from '../../../../../fleet/common/types/models';
 import { AgentNotFoundError } from '../../../../../fleet/server';
 import { EndpointAppContext, HostListQueryResult } from '../../types';
 import { GetMetadataListRequestSchema, GetMetadataRequestSchema } from './index';
 import { findAllUnenrolledAgentIds } from './support/unenroll';
 import { findAgentIDsByStatus } from './support/agent_status';
 import { EndpointAppContextService } from '../../endpoint_app_context_services';
+import { fleetAgentStatusToEndpointHostStatus } from '../../utils';
 
 export interface MetadataRequestContext {
   esClient?: IScopedClusterClient;
@@ -41,18 +42,6 @@ export interface MetadataRequestContext {
   savedObjectsClient?: SavedObjectsClientContract;
 }
 
-const HOST_STATUS_MAPPING = new Map<AgentStatus, HostStatus>([
-  ['online', HostStatus.HEALTHY],
-  ['offline', HostStatus.OFFLINE],
-  ['inactive', HostStatus.INACTIVE],
-  ['unenrolling', HostStatus.UPDATING],
-  ['enrolling', HostStatus.UPDATING],
-  ['updating', HostStatus.UPDATING],
-  ['warning', HostStatus.UNHEALTHY],
-  ['error', HostStatus.UNHEALTHY],
-  ['degraded', HostStatus.UNHEALTHY],
-]);
-
 /**
  * 00000000-0000-0000-0000-000000000000 is initial Elastic Agent id sent by Endpoint before policy is configured
  * 11111111-1111-1111-1111-111111111111 is Elastic Agent id sent by Endpoint when policy does not contain an id
@@ -375,7 +364,7 @@ export async function enrichHostMetadata(
     const status = await metadataRequestContext.endpointAppContextService
       ?.getAgentService()
       ?.getAgentStatusById(esClient.asCurrentUser, elasticAgentId);
-    hostStatus = HOST_STATUS_MAPPING.get(status!) || HostStatus.UNHEALTHY;
+    hostStatus = fleetAgentStatusToEndpointHostStatus(status!);
   } catch (e) {
     if (e instanceof AgentNotFoundError) {
       log.warn(`agent with id ${elasticAgentId} not found`);
diff --git a/x-pack/plugins/security_solution/server/endpoint/routes/actions/service.ts b/x-pack/plugins/security_solution/server/endpoint/services/actions.ts
similarity index 55%
rename from x-pack/plugins/security_solution/server/endpoint/routes/actions/service.ts
rename to x-pack/plugins/security_solution/server/endpoint/services/actions.ts
index 7a82a56b1f19b..9d8db5b9a2154 100644
--- a/x-pack/plugins/security_solution/server/endpoint/routes/actions/service.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/services/actions.ts
@@ -6,9 +6,14 @@
  */
 
 import { ElasticsearchClient, Logger } from 'kibana/server';
-import { AGENT_ACTIONS_INDEX, AGENT_ACTIONS_RESULTS_INDEX } from '../../../../../fleet/common';
-import { SecuritySolutionRequestHandlerContext } from '../../../types';
-import { ActivityLog, EndpointAction } from '../../../../common/endpoint/types';
+import { AGENT_ACTIONS_INDEX, AGENT_ACTIONS_RESULTS_INDEX } from '../../../../fleet/common';
+import { SecuritySolutionRequestHandlerContext } from '../../types';
+import {
+  ActivityLog,
+  EndpointAction,
+  EndpointActionResponse,
+  EndpointPendingActions,
+} from '../../../common/endpoint/types';
 
 export const getAuditLogResponse = async ({
   elasticAgentId,
@@ -135,3 +140,78 @@ const getActivityLog = async ({
 
   return sortedData;
 };
+
+export const getPendingActionCounts = async (
+  esClient: ElasticsearchClient,
+  agentIDs: string[]
+): Promise<EndpointPendingActions[]> => {
+  // retrieve the unexpired actions for the given hosts
+  const recentActions = await esClient
+    .search<EndpointAction>(
+      {
+        index: AGENT_ACTIONS_INDEX,
+        size: 10000,
+        from: 0,
+        body: {
+          query: {
+            bool: {
+              filter: [
+                { term: { type: 'INPUT_ACTION' } }, // actions that are directed at agent children
+                { term: { input_type: 'endpoint' } }, // filter for agent->endpoint actions
+                { range: { expiration: { gte: 'now' } } }, // that have not expired yet
+                { terms: { agents: agentIDs } }, // for the requested agent IDs
+              ],
+            },
+          },
+        },
+      },
+      { ignore: [404] }
+    )
+    .then((result) => result.body?.hits?.hits?.map((a) => a._source!) || []);
+
+  // retrieve any responses to those action IDs from these agents
+  const actionIDs = recentActions.map((a) => a.action_id);
+  const responses = await esClient
+    .search<EndpointActionResponse>(
+      {
+        index: AGENT_ACTIONS_RESULTS_INDEX,
+        size: 10000,
+        from: 0,
+        body: {
+          query: {
+            bool: {
+              filter: [
+                { terms: { action_id: actionIDs } }, // get results for these actions
+                { terms: { agent_id: agentIDs } }, // ignoring responses from agents we're not looking for
+              ],
+            },
+          },
+        },
+      },
+      { ignore: [404] }
+    )
+    .then((result) => result.body?.hits?.hits?.map((a) => a._source!) || []);
+
+  // respond with action-count per agent
+  const pending: EndpointPendingActions[] = agentIDs.map((aid) => {
+    const responseIDsFromAgent = responses
+      .filter((r) => r.agent_id === aid)
+      .map((r) => r.action_id);
+    return {
+      agent_id: aid,
+      pending_actions: recentActions
+        .filter((a) => a.agents.includes(aid) && !responseIDsFromAgent.includes(a.action_id))
+        .map((a) => a.data.command)
+        .reduce((acc, cur) => {
+          if (cur in acc) {
+            acc[cur] += 1;
+          } else {
+            acc[cur] = 1;
+          }
+          return acc;
+        }, {} as EndpointPendingActions['pending_actions']),
+    };
+  });
+
+  return pending;
+};
diff --git a/x-pack/plugins/security_solution/server/endpoint/services/index.ts b/x-pack/plugins/security_solution/server/endpoint/services/index.ts
index 8bf64999c746a..ee6570c4866bd 100644
--- a/x-pack/plugins/security_solution/server/endpoint/services/index.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/services/index.ts
@@ -7,3 +7,4 @@
 
 export * from './artifacts';
 export { getMetadataForEndpoints } from './metadata';
+export * from './actions';
diff --git a/x-pack/plugins/security_solution/server/endpoint/utils/fleet_agent_status_to_endpoint_host_status.ts b/x-pack/plugins/security_solution/server/endpoint/utils/fleet_agent_status_to_endpoint_host_status.ts
new file mode 100644
index 0000000000000..3c02222346a44
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/endpoint/utils/fleet_agent_status_to_endpoint_host_status.ts
@@ -0,0 +1,29 @@
+/*
+ * 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 { AgentStatus } from '../../../../fleet/common';
+import { HostStatus } from '../../../common/endpoint/types';
+
+const STATUS_MAPPING: ReadonlyMap<AgentStatus, HostStatus> = new Map([
+  ['online', HostStatus.HEALTHY],
+  ['offline', HostStatus.OFFLINE],
+  ['inactive', HostStatus.INACTIVE],
+  ['unenrolling', HostStatus.UPDATING],
+  ['enrolling', HostStatus.UPDATING],
+  ['updating', HostStatus.UPDATING],
+  ['warning', HostStatus.UNHEALTHY],
+  ['error', HostStatus.UNHEALTHY],
+  ['degraded', HostStatus.UNHEALTHY],
+]);
+
+/**
+ * A Map of Fleet Agent Status to Endpoint Host Status.
+ * Default status is `HostStatus.UNHEALTHY`
+ */
+export const fleetAgentStatusToEndpointHostStatus = (status: AgentStatus): HostStatus => {
+  return STATUS_MAPPING.get(status) || HostStatus.UNHEALTHY;
+};
diff --git a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts b/x-pack/plugins/security_solution/server/endpoint/utils/index.ts
similarity index 80%
rename from x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts
rename to x-pack/plugins/security_solution/server/endpoint/utils/index.ts
index 94203c2b156af..5cf23db57be12 100644
--- a/x-pack/plugins/data_visualizer/public/application/common/components/experimental_badge/index.ts
+++ b/x-pack/plugins/security_solution/server/endpoint/utils/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { ExperimentalBadge } from './experimental_badge';
+export * from './fleet_agent_status_to_endpoint_host_status';
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/reference_rules/__mocks__/rule_type.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/reference_rules/__mocks__/rule_type.ts
index f7e0dd9eb3620..6c0670d1dbb2c 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/reference_rules/__mocks__/rule_type.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/reference_rules/__mocks__/rule_type.ts
@@ -60,6 +60,7 @@ export const createRuleTypeMocks = () => {
             bulk: jest.fn(),
           };
         },
+        isWriteEnabled: jest.fn(() => true),
       } as unknown) as RuleDataClient,
     },
     services,
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/index.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/index.ts
index 2e72ac137adcf..084105b7d1c49 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/index.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/routes/__mocks__/index.ts
@@ -30,6 +30,7 @@ export const createMockConfig = (): ConfigType => ({
   },
   packagerTaskInterval: '60s',
   validateArtifactDownloads: true,
+  alertMergeStrategy: 'missingFields',
 });
 
 export const mockGetCurrentUser = {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.test.ts
index 4053d64539c49..117dcdf0c18da 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.test.ts
@@ -38,7 +38,11 @@ describe('buildBulkBody', () => {
     const ruleSO = sampleRuleSO(getQueryRuleParams());
     const doc = sampleDocNoSortId();
     delete doc._source.source;
-    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(ruleSO, doc);
+    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     // Timestamp will potentially always be different so remove it for the test
     delete fakeSignalSourceHit['@timestamp'];
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: 'someValue' } = {
@@ -102,7 +106,11 @@ describe('buildBulkBody', () => {
       },
     };
     delete doc._source.source;
-    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(ruleSO, doc);
+    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     // Timestamp will potentially always be different so remove it for the test
     delete fakeSignalSourceHit['@timestamp'];
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: 'someValue' } = {
@@ -180,7 +188,11 @@ describe('buildBulkBody', () => {
       dataset: 'socket',
       kind: 'event',
     };
-    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(ruleSO, doc);
+    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     // Timestamp will potentially always be different so remove it for the test
     delete fakeSignalSourceHit['@timestamp'];
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: 'someValue' } = {
@@ -244,7 +256,11 @@ describe('buildBulkBody', () => {
       module: 'system',
       dataset: 'socket',
     };
-    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(ruleSO, doc);
+    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     // Timestamp will potentially always be different so remove it for the test
     delete fakeSignalSourceHit['@timestamp'];
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: 'someValue' } = {
@@ -305,7 +321,11 @@ describe('buildBulkBody', () => {
     doc._source.event = {
       kind: 'event',
     };
-    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(ruleSO, doc);
+    const fakeSignalSourceHit: SignalHitOptionalTimestamp = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     // Timestamp will potentially always be different so remove it for the test
     delete fakeSignalSourceHit['@timestamp'];
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: 'someValue' } = {
@@ -365,7 +385,11 @@ describe('buildBulkBody', () => {
         signal: 123,
       },
     } as unknown) as SignalSourceHit;
-    const { '@timestamp': timestamp, ...fakeSignalSourceHit } = buildBulkBody(ruleSO, doc);
+    const { '@timestamp': timestamp, ...fakeSignalSourceHit } = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: string } = {
       someKey: 'someValue',
       event: {
@@ -421,7 +445,11 @@ describe('buildBulkBody', () => {
         signal: { child_1: { child_2: 'nested data' } },
       },
     } as unknown) as SignalSourceHit;
-    const { '@timestamp': timestamp, ...fakeSignalSourceHit } = buildBulkBody(ruleSO, doc);
+    const { '@timestamp': timestamp, ...fakeSignalSourceHit } = buildBulkBody(
+      ruleSO,
+      doc,
+      'missingFields'
+    );
     const expected: Omit<SignalHit, '@timestamp'> & { someKey: string } = {
       someKey: 'someValue',
       event: {
@@ -645,7 +673,12 @@ describe('buildSignalFromEvent', () => {
     const ancestor = sampleDocWithAncestors().hits.hits[0];
     delete ancestor._source.source;
     const ruleSO = sampleRuleSO(getQueryRuleParams());
-    const signal: SignalHitOptionalTimestamp = buildSignalFromEvent(ancestor, ruleSO, true);
+    const signal: SignalHitOptionalTimestamp = buildSignalFromEvent(
+      ancestor,
+      ruleSO,
+      true,
+      'missingFields'
+    );
 
     // Timestamp will potentially always be different so remove it for the test
     delete signal['@timestamp'];
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.ts
index 819e1f3eb6df1..2e6f4b9303d89 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/build_bulk_body.ts
@@ -6,7 +6,7 @@
  */
 
 import { SavedObject } from 'src/core/types';
-import { mergeMissingFieldsWithSource } from './source_fields_merging/strategies/merge_missing_fields_with_source';
+import { getMergeStrategy } from './source_fields_merging/strategies';
 import {
   AlertAttributes,
   SignalSourceHit,
@@ -21,6 +21,7 @@ import { additionalSignalFields, buildSignal } from './build_signal';
 import { buildEventTypeSignal } from './build_event_type_signal';
 import { EqlSequence } from '../../../../common/detection_engine/types';
 import { generateSignalId, wrapBuildingBlocks, wrapSignal } from './utils';
+import type { ConfigType } from '../../../config';
 
 /**
  * Formats the search_after result for insertion into the signals index. We first create a
@@ -33,9 +34,10 @@ import { generateSignalId, wrapBuildingBlocks, wrapSignal } from './utils';
  */
 export const buildBulkBody = (
   ruleSO: SavedObject<AlertAttributes>,
-  doc: SignalSourceHit
+  doc: SignalSourceHit,
+  mergeStrategy: ConfigType['alertMergeStrategy']
 ): SignalHit => {
-  const mergedDoc = mergeMissingFieldsWithSource({ doc });
+  const mergedDoc = getMergeStrategy(mergeStrategy)({ doc });
   const rule = buildRuleWithOverrides(ruleSO, mergedDoc._source ?? {});
   const signal: Signal = {
     ...buildSignal([mergedDoc], rule),
@@ -65,11 +67,12 @@ export const buildBulkBody = (
 export const buildSignalGroupFromSequence = (
   sequence: EqlSequence<SignalSource>,
   ruleSO: SavedObject<AlertAttributes>,
-  outputIndex: string
+  outputIndex: string,
+  mergeStrategy: ConfigType['alertMergeStrategy']
 ): WrappedSignalHit[] => {
   const wrappedBuildingBlocks = wrapBuildingBlocks(
     sequence.events.map((event) => {
-      const signal = buildSignalFromEvent(event, ruleSO, false);
+      const signal = buildSignalFromEvent(event, ruleSO, false, mergeStrategy);
       signal.signal.rule.building_block_type = 'default';
       return signal;
     }),
@@ -130,9 +133,10 @@ export const buildSignalFromSequence = (
 export const buildSignalFromEvent = (
   event: BaseSignalHit,
   ruleSO: SavedObject<AlertAttributes>,
-  applyOverrides: boolean
+  applyOverrides: boolean,
+  mergeStrategy: ConfigType['alertMergeStrategy']
 ): SignalHit => {
-  const mergedEvent = mergeMissingFieldsWithSource({ doc: event });
+  const mergedEvent = getMergeStrategy(mergeStrategy)({ doc: event });
   const rule = applyOverrides
     ? buildRuleWithOverrides(ruleSO, mergedEvent._source ?? {})
     : buildRuleWithoutOverrides(ruleSO);
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
index 21c1402861e6e..711db931e9072 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/search_after_bulk_create.test.ts
@@ -31,6 +31,7 @@ import { getQueryRuleParams } from '../schemas/rule_schemas.mock';
 import { bulkCreateFactory } from './bulk_create_factory';
 import { wrapHitsFactory } from './wrap_hits_factory';
 import { mockBuildRuleMessage } from './__mocks__/build_rule_message.mock';
+import { ResponseError } from '@elastic/elasticsearch/lib/errors';
 
 const buildRuleMessage = mockBuildRuleMessage;
 
@@ -69,6 +70,7 @@ describe('searchAfterAndBulkCreate', () => {
     wrapHits = wrapHitsFactory({
       ruleSO,
       signalsIndex: DEFAULT_SIGNALS_INDEX,
+      mergeStrategy: 'missingFields',
     });
   });
 
@@ -738,9 +740,16 @@ describe('searchAfterAndBulkCreate', () => {
         repeatedSearchResultsWithSortId(4, 1, someGuids.slice(0, 3))
       )
     );
-    mockService.scopedClusterClient.asCurrentUser.bulk.mockRejectedValue(
-      elasticsearchClientMock.createErrorTransportRequestPromise(new Error('bulk failed'))
-    ); // Added this recently
+    mockService.scopedClusterClient.asCurrentUser.bulk.mockReturnValue(
+      elasticsearchClientMock.createErrorTransportRequestPromise(
+        new ResponseError(
+          elasticsearchClientMock.createApiResponse({
+            statusCode: 400,
+            body: { error: { type: 'bulk_error_type' } },
+          })
+        )
+      )
+    );
     const { success, createdSignalsCount, lastLookBackDate } = await searchAfterAndBulkCreate({
       listClient,
       exceptionsList: [exceptionItem],
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
index d8c919b50e9db..aec8b6c552b1d 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.test.ts
@@ -32,6 +32,7 @@ import { elasticsearchClientMock } from 'src/core/server/elasticsearch/client/mo
 import { queryExecutor } from './executors/query';
 import { mlExecutor } from './executors/ml';
 import { getMlRuleParams, getQueryRuleParams } from '../schemas/rule_schemas.mock';
+import { ResponseError } from '@elastic/elasticsearch/lib/errors';
 
 jest.mock('./rule_status_saved_objects_client');
 jest.mock('./rule_status_service');
@@ -192,6 +193,7 @@ describe('signal_rule_alert_type', () => {
       version,
       ml: mlMock,
       lists: listMock.createSetup(),
+      mergeStrategy: 'missingFields',
     });
   });
 
@@ -454,8 +456,15 @@ describe('signal_rule_alert_type', () => {
     });
 
     it('and call ruleStatusService with the default message', async () => {
-      (queryExecutor as jest.Mock).mockRejectedValue(
-        elasticsearchClientMock.createErrorTransportRequestPromise({})
+      (queryExecutor as jest.Mock).mockReturnValue(
+        elasticsearchClientMock.createErrorTransportRequestPromise(
+          new ResponseError(
+            elasticsearchClientMock.createApiResponse({
+              statusCode: 400,
+              body: { error: { type: 'some_error_type' } },
+            })
+          )
+        )
       );
       await alert.executor(payload);
       expect(logger.error).toHaveBeenCalled();
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
index ba665fa43e8b8..6eef97b05b697 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/signal_rule_alert_type.ts
@@ -68,6 +68,7 @@ import {
 import { bulkCreateFactory } from './bulk_create_factory';
 import { wrapHitsFactory } from './wrap_hits_factory';
 import { wrapSequencesFactory } from './wrap_sequences_factory';
+import { ConfigType } from '../../../config';
 
 export const signalRulesAlertType = ({
   logger,
@@ -75,12 +76,14 @@ export const signalRulesAlertType = ({
   version,
   ml,
   lists,
+  mergeStrategy,
 }: {
   logger: Logger;
   eventsTelemetry: TelemetryEventsSender | undefined;
   version: string;
   ml: SetupPlugins['ml'];
   lists: SetupPlugins['lists'] | undefined;
+  mergeStrategy: ConfigType['alertMergeStrategy'];
 }): SignalRuleAlertTypeDefinition => {
   return {
     id: SIGNALS_ID,
@@ -233,11 +236,13 @@ export const signalRulesAlertType = ({
         const wrapHits = wrapHitsFactory({
           ruleSO: savedObject,
           signalsIndex: params.outputIndex,
+          mergeStrategy,
         });
 
         const wrapSequences = wrapSequencesFactory({
           ruleSO: savedObject,
           signalsIndex: params.outputIndex,
+          mergeStrategy,
         });
 
         if (isMlRule(type)) {
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/get_strategy.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/get_strategy.ts
new file mode 100644
index 0000000000000..3c4b1cd0ef373
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/get_strategy.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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { assertUnreachable } from '../../../../../../common';
+import type { ConfigType } from '../../../../../config';
+import { MergeStrategyFunction } from '../types';
+import { mergeAllFieldsWithSource } from './merge_all_fields_with_source';
+import { mergeMissingFieldsWithSource } from './merge_missing_fields_with_source';
+import { mergeNoFields } from './merge_no_fields';
+
+export const getMergeStrategy = (
+  mergeStrategy: ConfigType['alertMergeStrategy']
+): MergeStrategyFunction => {
+  switch (mergeStrategy) {
+    case 'allFields': {
+      return mergeAllFieldsWithSource;
+    }
+    case 'missingFields': {
+      return mergeMissingFieldsWithSource;
+    }
+    case 'noFields': {
+      return mergeNoFields;
+    }
+    default:
+      return assertUnreachable(mergeStrategy);
+  }
+};
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/index.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/index.ts
index 212eba9c6c3be..60460ad5f2e00 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/index.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/index.ts
@@ -6,3 +6,4 @@
  */
 export * from './merge_all_fields_with_source';
 export * from './merge_missing_fields_with_source';
+export * from './get_strategy';
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_all_fields_with_source.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_all_fields_with_source.ts
index de8d3ba820e23..da2eea9d2c61e 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_all_fields_with_source.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_all_fields_with_source.ts
@@ -7,9 +7,9 @@
 
 import { get } from 'lodash/fp';
 import { set } from '@elastic/safer-lodash-set/fp';
-import { SignalSource, SignalSourceHit } from '../../types';
+import { SignalSource } from '../../types';
 import { filterFieldEntries } from '../utils/filter_field_entries';
-import type { FieldsType } from '../types';
+import type { FieldsType, MergeStrategyFunction } from '../types';
 import { isObjectLikeOrArrayOfObjectLikes } from '../utils/is_objectlike_or_array_of_objectlikes';
 import { isNestedObject } from '../utils/is_nested_object';
 import { recursiveUnboxingFields } from '../utils/recursive_unboxing_fields';
@@ -26,7 +26,7 @@ import { isTypeObject } from '../utils/is_type_object';
  * @param throwOnFailSafe Defaults to false, but if set to true it will cause a throw if the fail safe is triggered to indicate we need to add a new explicit test condition
  * @returns The two merged together in one object where we can
  */
-export const mergeAllFieldsWithSource = ({ doc }: { doc: SignalSourceHit }): SignalSourceHit => {
+export const mergeAllFieldsWithSource: MergeStrategyFunction = ({ doc }) => {
   const source = doc._source ?? {};
   const fields = doc.fields ?? {};
   const fieldEntries = Object.entries(fields);
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_missing_fields_with_source.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_missing_fields_with_source.ts
index bf541acbe7e33..b66c46ccbf0ca 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_missing_fields_with_source.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_missing_fields_with_source.ts
@@ -7,9 +7,9 @@
 
 import { get } from 'lodash/fp';
 import { set } from '@elastic/safer-lodash-set/fp';
-import { SignalSource, SignalSourceHit } from '../../types';
+import { SignalSource } from '../../types';
 import { filterFieldEntries } from '../utils/filter_field_entries';
-import type { FieldsType } from '../types';
+import type { FieldsType, MergeStrategyFunction } from '../types';
 import { recursiveUnboxingFields } from '../utils/recursive_unboxing_fields';
 import { isTypeObject } from '../utils/is_type_object';
 import { arrayInPathExists } from '../utils/array_in_path_exists';
@@ -22,11 +22,7 @@ import { isNestedObject } from '../utils/is_nested_object';
  * @param throwOnFailSafe Defaults to false, but if set to true it will cause a throw if the fail safe is triggered to indicate we need to add a new explicit test condition
  * @returns The two merged together in one object where we can
  */
-export const mergeMissingFieldsWithSource = ({
-  doc,
-}: {
-  doc: SignalSourceHit;
-}): SignalSourceHit => {
+export const mergeMissingFieldsWithSource: MergeStrategyFunction = ({ doc }) => {
   const source = doc._source ?? {};
   const fields = doc.fields ?? {};
   const fieldEntries = Object.entries(fields);
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_no_fields.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_no_fields.ts
new file mode 100644
index 0000000000000..6c2daf2526715
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/strategies/merge_no_fields.ts
@@ -0,0 +1,15 @@
+/*
+ * 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 { MergeStrategyFunction } from '../types';
+
+/**
+ * Does nothing and does not merge source with fields
+ * @param doc The doc to return and do nothing
+ * @returns The doc as a no operation and do nothing
+ */
+export const mergeNoFields: MergeStrategyFunction = ({ doc }) => doc;
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/types.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/types.ts
index e8142e41715e2..1438d2844949c 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/types.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/source_fields_merging/types.ts
@@ -5,7 +5,14 @@
  * 2.0.
  */
 
+import { SignalSourceHit } from '../types';
+
 /**
  * A bit stricter typing since the default fields type is an "any"
  */
 export type FieldsType = string[] | number[] | boolean[] | object[];
+
+/**
+ * The type of the merge strategy functions which must implement to be part of the strategy group
+ */
+export type MergeStrategyFunction = ({ doc }: { doc: SignalSourceHit }) => SignalSourceHit;
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_hits_factory.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_hits_factory.ts
index d5c05bc890332..b28c46aae8f82 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_hits_factory.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_hits_factory.ts
@@ -9,13 +9,16 @@ import { SearchAfterAndBulkCreateParams, WrapHits, WrappedSignalHit } from './ty
 import { generateId } from './utils';
 import { buildBulkBody } from './build_bulk_body';
 import { filterDuplicateSignals } from './filter_duplicate_signals';
+import type { ConfigType } from '../../../config';
 
 export const wrapHitsFactory = ({
   ruleSO,
   signalsIndex,
+  mergeStrategy,
 }: {
   ruleSO: SearchAfterAndBulkCreateParams['ruleSO'];
   signalsIndex: string;
+  mergeStrategy: ConfigType['alertMergeStrategy'];
 }): WrapHits => (events) => {
   const wrappedDocs: WrappedSignalHit[] = events.flatMap((doc) => [
     {
@@ -26,7 +29,7 @@ export const wrapHitsFactory = ({
         String(doc._version),
         ruleSO.attributes.params.ruleId ?? ''
       ),
-      _source: buildBulkBody(ruleSO, doc),
+      _source: buildBulkBody(ruleSO, doc, mergeStrategy),
     },
   ]);
 
diff --git a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_sequences_factory.ts b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_sequences_factory.ts
index c53ea7b7ebe72..f0b9e64047692 100644
--- a/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_sequences_factory.ts
+++ b/x-pack/plugins/security_solution/server/lib/detection_engine/signals/wrap_sequences_factory.ts
@@ -7,18 +7,21 @@
 
 import { SearchAfterAndBulkCreateParams, WrappedSignalHit, WrapSequences } from './types';
 import { buildSignalGroupFromSequence } from './build_bulk_body';
+import { ConfigType } from '../../../config';
 
 export const wrapSequencesFactory = ({
   ruleSO,
   signalsIndex,
+  mergeStrategy,
 }: {
   ruleSO: SearchAfterAndBulkCreateParams['ruleSO'];
   signalsIndex: string;
+  mergeStrategy: ConfigType['alertMergeStrategy'];
 }): WrapSequences => (sequences) =>
   sequences.reduce(
     (acc: WrappedSignalHit[], sequence) => [
       ...acc,
-      ...buildSignalGroupFromSequence(sequence, ruleSO, signalsIndex),
+      ...buildSignalGroupFromSequence(sequence, ruleSO, signalsIndex, mergeStrategy),
     ],
     []
   );
diff --git a/x-pack/plugins/security_solution/server/plugin.ts b/x-pack/plugins/security_solution/server/plugin.ts
index cd923a4b0619f..2f3850ff49f4c 100644
--- a/x-pack/plugins/security_solution/server/plugin.ts
+++ b/x-pack/plugins/security_solution/server/plugin.ts
@@ -196,9 +196,8 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
     let ruleDataClient: RuleDataClient | null = null;
     if (isRuleRegistryEnabled) {
       const { ruleDataService } = plugins.ruleRegistry;
-      const start = () => core.getStartServices().then(([coreStart]) => coreStart);
 
-      const ready = once(async () => {
+      const initializeRuleDataTemplates = once(async () => {
         const componentTemplateName = ruleDataService.getFullAssetName(
           'security-solution-mappings'
         );
@@ -232,18 +231,15 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
         });
       });
 
-      ready().catch((err) => {
+      // initialize eagerly
+      const initializeRuleDataTemplatesPromise = initializeRuleDataTemplates().catch((err) => {
         this.logger!.error(err);
       });
 
-      ruleDataClient = new RuleDataClient({
-        alias: plugins.ruleRegistry.ruleDataService.getFullAssetName('security-solution'),
-        getClusterClient: async () => {
-          const coreStart = await start();
-          return coreStart.elasticsearch.client.asInternalUser;
-        },
-        ready,
-      });
+      ruleDataClient = ruleDataService.getRuleDataClient(
+        ruleDataService.getFullAssetName('security-solution'),
+        () => initializeRuleDataTemplatesPromise
+      );
 
       // sec
 
@@ -391,6 +387,7 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
         version: this.context.env.packageInfo.version,
         ml: plugins.ml,
         lists: plugins.lists,
+        mergeStrategy: this.config.alertMergeStrategy,
       });
       const ruleNotificationType = rulesNotificationAlertType({
         logger: this.logger,
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/details/helpers.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/details/helpers.ts
index 1b6e927f33638..f4d942f733c1d 100644
--- a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/details/helpers.ts
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/details/helpers.ts
@@ -24,6 +24,8 @@ import {
 import { toObjectArrayOfStrings } from '../../../../../../common/utils/to_array';
 import { getHostMetaData } from '../../../../../endpoint/routes/metadata/handlers';
 import { EndpointAppContext } from '../../../../../endpoint/types';
+import { fleetAgentStatusToEndpointHostStatus } from '../../../../../endpoint/utils';
+import { getPendingActionCounts } from '../../../../../endpoint/services';
 
 export const HOST_FIELDS = [
   '_id',
@@ -200,15 +202,30 @@ export const getHostEndpoint = async (
         ? await getHostMetaData(metadataRequestContext, id, undefined)
         : null;
 
+    const fleetAgentId = endpointData?.metadata.elastic.agent.id;
+    const [fleetAgentStatus, pendingActions] = !fleetAgentId
+      ? [undefined, {}]
+      : await Promise.all([
+          // Get Agent Status
+          agentService.getAgentStatusById(esClient.asCurrentUser, fleetAgentId),
+          // Get a list of pending actions (if any)
+          getPendingActionCounts(esClient.asCurrentUser, [fleetAgentId]).then((results) => {
+            return results[0].pending_actions;
+          }),
+        ]);
+
     return endpointData != null && endpointData.metadata
       ? {
           endpointPolicy: endpointData.metadata.Endpoint.policy.applied.name,
           policyStatus: endpointData.metadata.Endpoint.policy.applied.status,
           sensorVersion: endpointData.metadata.agent.version,
+          elasticAgentStatus: fleetAgentStatusToEndpointHostStatus(fleetAgentStatus!),
+          isolation: endpointData.metadata.Endpoint.state?.isolation ?? false,
+          pendingActions,
         }
       : null;
   } catch (err) {
-    logger.warn(JSON.stringify(err, null, 2));
+    logger.warn(err);
     return null;
   }
 };
diff --git a/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts
index f5163f4ca5ed8..aca73a4b77434 100644
--- a/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts
+++ b/x-pack/plugins/task_manager/server/lib/log_health_metrics.test.ts
@@ -360,7 +360,7 @@ function getMockMonitoredHealth(overrides = {}): MonitoredHealth {
           non_recurring: 20,
           owner_ids: 2,
           estimated_schedule_density: [],
-          capacity_requirments: {
+          capacity_requirements: {
             per_minute: 150,
             per_hour: 360,
             per_day: 820,
diff --git a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts
index c68e307dbec03..bd8ecf0cc6d93 100644
--- a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.test.ts
@@ -17,7 +17,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 60,
               per_hour: 0,
               per_day: 0,
@@ -72,7 +72,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 60,
               per_hour: 0,
               per_day: 0,
@@ -129,7 +129,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 60,
               per_hour: 0,
               per_day: 0,
@@ -165,7 +165,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 0,
               per_hour: 12000,
               per_day: 200,
@@ -221,7 +221,7 @@ describe('estimateCapacity', () => {
             // 0 active tasks at this moment in time, so no owners identifiable
             owner_ids: 0,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 60,
               per_hour: 0,
               per_day: 0,
@@ -276,7 +276,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 3,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 150,
               per_hour: 60,
               per_day: 0,
@@ -337,7 +337,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: provisionedKibanaInstances,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 150,
               per_hour: 60,
               per_day: 0,
@@ -417,7 +417,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: provisionedKibanaInstances,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: recurringTasksPerMinute,
               per_hour: 0,
               per_day: 0,
@@ -498,7 +498,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 170,
               per_hour: 0,
               per_day: 0,
@@ -562,7 +562,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 175,
               per_hour: 0,
               per_day: 0,
@@ -623,7 +623,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 210,
               per_hour: 0,
               per_day: 0,
@@ -684,7 +684,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 28,
               per_hour: 27,
               per_day: 2,
@@ -759,7 +759,7 @@ describe('estimateCapacity', () => {
           {
             owner_ids: 1,
             overdue_non_recurring: 0,
-            capacity_requirments: {
+            capacity_requirements: {
               per_minute: 210,
               per_hour: 0,
               per_day: 0,
@@ -871,7 +871,7 @@ function mockStats(
         estimated_schedule_density: [],
         non_recurring: 20,
         owner_ids: 2,
-        capacity_requirments: {
+        capacity_requirements: {
           per_minute: 150,
           per_hour: 360,
           per_day: 820,
diff --git a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
index 073112f94e049..90f564152c8c7 100644
--- a/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/capacity_estimation.ts
@@ -58,7 +58,7 @@ export function estimateCapacity(
     recurring: percentageOfExecutionsUsedByRecurringTasks,
     non_recurring: percentageOfExecutionsUsedByNonRecurringTasks,
   } = capacityStats.runtime.value.execution.persistence;
-  const { overdue, capacity_requirments: capacityRequirments } = workload;
+  const { overdue, capacity_requirements: capacityRequirements } = workload;
   const {
     poll_interval: pollInterval,
     max_workers: maxWorkers,
@@ -130,9 +130,9 @@ export function estimateCapacity(
    * On average, how many tasks per minute does this cluster need to execute?
    */
   const averageRecurringRequiredPerMinute =
-    capacityRequirments.per_minute +
-    capacityRequirments.per_hour / 60 +
-    capacityRequirments.per_day / 24 / 60;
+    capacityRequirements.per_minute +
+    capacityRequirements.per_hour / 60 +
+    capacityRequirements.per_day / 24 / 60;
 
   /**
    * how many Kibana are needed solely for the recurring tasks
diff --git a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts
index 3fe003ebc6591..9125bca8f5b05 100644
--- a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.test.ts
@@ -624,7 +624,7 @@ describe('Workload Statistics Aggregator', () => {
         expect(result.key).toEqual('workload');
 
         expect(result.value).toMatchObject({
-          capacity_requirments: {
+          capacity_requirements: {
             // these are buckets of required capacity, rather than aggregated requirmenets.
             per_minute: 150,
             per_hour: 360,
diff --git a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
index 64c1c66140196..5c4e7d6cbe2cf 100644
--- a/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
+++ b/x-pack/plugins/task_manager/server/monitoring/workload_statistics.ts
@@ -36,7 +36,7 @@ interface RawWorkloadStat extends JsonObject {
   overdue: number;
   overdue_non_recurring: number;
   estimated_schedule_density: number[];
-  capacity_requirments: CapacityRequirments;
+  capacity_requirements: CapacityRequirements;
 }
 
 export interface WorkloadStat extends RawWorkloadStat {
@@ -45,7 +45,7 @@ export interface WorkloadStat extends RawWorkloadStat {
 export interface SummarizedWorkloadStat extends RawWorkloadStat {
   owner_ids: number;
 }
-export interface CapacityRequirments extends JsonObject {
+export interface CapacityRequirements extends JsonObject {
   per_minute: number;
   per_hour: number;
   per_day: number;
@@ -277,7 +277,7 @@ export function createWorkloadAggregator(
           pollInterval,
           scheduleDensity
         ),
-        capacity_requirments: {
+        capacity_requirements: {
           per_minute: cadence.perMinute,
           per_hour: cadence.perHour,
           per_day: cadence.perDay,
diff --git a/x-pack/plugins/task_manager/server/routes/health.test.ts b/x-pack/plugins/task_manager/server/routes/health.test.ts
index 735029e90c2d3..ece91ed571f88 100644
--- a/x-pack/plugins/task_manager/server/routes/health.test.ts
+++ b/x-pack/plugins/task_manager/server/routes/health.test.ts
@@ -464,7 +464,7 @@ function mockHealthStats(overrides = {}) {
           non_recurring: 20,
           owner_ids: [0, 0, 0, 1, 2, 0, 0, 2, 2, 2, 1, 2, 1, 1],
           estimated_schedule_density: [],
-          capacity_requirments: {
+          capacity_requirements: {
             per_minute: 150,
             per_hour: 360,
             per_day: 820,
diff --git a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts
new file mode 100644
index 0000000000000..aa8f5421184e5
--- /dev/null
+++ b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.test.ts
@@ -0,0 +1,78 @@
+/*
+ * 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 { getCombinedProperties } from './use_pivot_data';
+import { ES_FIELD_TYPES } from '../../../../../../src/plugins/data/common';
+
+describe('getCombinedProperties', () => {
+  test('extracts missing mappings from docs', () => {
+    const mappingProps = {
+      testProp: {
+        type: ES_FIELD_TYPES.STRING,
+      },
+    };
+
+    const docs = [
+      {
+        testProp: 'test_value1',
+        scriptProp: 1,
+      },
+      {
+        testProp: 'test_value2',
+        scriptProp: 2,
+      },
+      {
+        testProp: 'test_value3',
+        scriptProp: 3,
+      },
+    ];
+
+    expect(getCombinedProperties(mappingProps, docs)).toEqual({
+      testProp: {
+        type: 'string',
+      },
+      scriptProp: {
+        type: 'number',
+      },
+    });
+  });
+
+  test('does not override defined mappings', () => {
+    const mappingProps = {
+      testProp: {
+        type: ES_FIELD_TYPES.STRING,
+      },
+      scriptProp: {
+        type: ES_FIELD_TYPES.LONG,
+      },
+    };
+
+    const docs = [
+      {
+        testProp: 'test_value1',
+        scriptProp: 1,
+      },
+      {
+        testProp: 'test_value2',
+        scriptProp: 2,
+      },
+      {
+        testProp: 'test_value3',
+        scriptProp: 3,
+      },
+    ];
+
+    expect(getCombinedProperties(mappingProps, docs)).toEqual({
+      testProp: {
+        type: 'string',
+      },
+      scriptProp: {
+        type: 'long',
+      },
+    });
+  });
+});
diff --git a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
index 9a49ed9480359..329e2d5f87131 100644
--- a/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
+++ b/x-pack/plugins/transform/public/app/hooks/use_pivot_data.ts
@@ -13,6 +13,7 @@ import { EuiDataGridColumn } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { getFlattenedObject } from '@kbn/std';
 
+import { sample, difference } from 'lodash';
 import { ES_FIELD_TYPES } from '../../../../../../src/plugins/data/common';
 
 import type { PreviewMappingsProperties } from '../../../common/api_schemas/transforms';
@@ -71,6 +72,25 @@ function sortColumnsForLatest(sortField: string) {
   };
 }
 
+/**
+ * Extracts missing mappings from docs.
+ */
+export function getCombinedProperties(
+  populatedProperties: PreviewMappingsProperties,
+  docs: Array<Record<string, unknown>>
+): PreviewMappingsProperties {
+  // Take a sample from docs and resolve missing mappings
+  const sampleDoc = sample(docs) ?? {};
+  const missingMappings = difference(Object.keys(sampleDoc), Object.keys(populatedProperties));
+  return {
+    ...populatedProperties,
+    ...missingMappings.reduce((acc, curr) => {
+      acc[curr] = { type: typeof sampleDoc[curr] as ES_FIELD_TYPES };
+      return acc;
+    }, {} as PreviewMappingsProperties),
+  };
+}
+
 export const usePivotData = (
   indexPatternTitle: SearchItems['indexPattern']['title'],
   query: PivotQuery,
@@ -170,7 +190,7 @@ export const usePivotData = (
     const populatedFields = [...new Set(docs.map(Object.keys).flat(1))];
 
     // 3. Filter mapping properties by populated fields
-    const populatedProperties: PreviewMappingsProperties = Object.entries(
+    let populatedProperties: PreviewMappingsProperties = Object.entries(
       resp.generated_dest_index.mappings.properties
     )
       .filter(([key]) => populatedFields.includes(key))
@@ -182,6 +202,8 @@ export const usePivotData = (
         {}
       );
 
+    populatedProperties = getCombinedProperties(populatedProperties, docs);
+
     setTableItems(docs);
     setRowCount(docs.length);
     setRowCountRelation(ES_CLIENT_TOTAL_HITS_RELATION.EQ);
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index fb1a5026b7e01..f52589732df99 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -6340,15 +6340,15 @@
     "xpack.canvas.functions.repeatImage.args.maxHelpText": "画像が繰り返される最高回数です。",
     "xpack.canvas.functions.repeatImage.args.sizeHelpText": "画像の高さまたは幅のピクセル単位での最高値です。画像が縦長の場合、この関数は高さを制限します。",
     "xpack.canvas.functions.repeatImageHelpText": "繰り返し画像エレメントを構成します。",
+    "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。",
+    "expressionRevealImage.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。",
+    "expressionRevealImage.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。",
+    "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ",
+    "expressionRevealImage.functions.revealImageHelpText": "画像表示エレメントを構成します。",
     "xpack.canvas.functions.replace.args.flagsHelpText": "フラグを指定します。{url}を参照してください。",
     "xpack.canvas.functions.replace.args.patternHelpText": "{JS} 正規表現のテキストまたはパターンです。例：{example}。ここではキャプチャグループを使用できます。",
     "xpack.canvas.functions.replace.args.replacementHelpText": "文字列の一致する部分の代わりです。キャプチャグループはノードによってアクセス可能です。例：{example}。",
     "xpack.canvas.functions.replaceImageHelpText": "正規表現で文字列の一部を置き換えます。",
-    "xpack.canvas.functions.revealImage.args.emptyImageHelpText": "表示される背景画像です。画像アセットは「{BASE64}」データ {URL} として提供するか、部分式で渡します。",
-    "xpack.canvas.functions.revealImage.args.imageHelpText": "表示する画像です。画像アセットは{BASE64}データ{URL}として提供するか、部分式で渡します。",
-    "xpack.canvas.functions.revealImage.args.originHelpText": "画像で埋め始める位置です。たとえば、{list}、または {end}です。",
-    "xpack.canvas.functions.revealImage.invalidPercentErrorMessage": "無効な値：「{percent}」。パーセンテージは 0 と 1 の間でなければなりません ",
-    "xpack.canvas.functions.revealImageHelpText": "画像表示エレメントを構成します。",
     "xpack.canvas.functions.rounddate.args.formatHelpText": "バケットに使用する{MOMENTJS}フォーマットです。たとえば、{example}は月単位に端数処理されます。{url}を参照してください。",
     "xpack.canvas.functions.rounddateHelpText": "新世紀からのミリ秒の繰り上げ・繰り下げに {MOMENTJS} を使用し、新世紀からのミリ秒を戻します。",
     "xpack.canvas.functions.rowCountHelpText": "行数を返します。{plyFn}と組み合わせて、固有の列値の数、または固有の列値の組み合わせを求めます。",
@@ -6543,8 +6543,8 @@
     "xpack.canvas.renderer.progress.helpDescription": "エレメントのパーセンテージを示す進捗インジケーターをレンダリングします",
     "xpack.canvas.renderer.repeatImage.displayName": "画像の繰り返し",
     "xpack.canvas.renderer.repeatImage.helpDescription": "画像を指定回数繰り返し表示します",
-    "xpack.canvas.renderer.revealImage.displayName": "画像の部分表示",
-    "xpack.canvas.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します",
+    "expressionRevealImage.renderer.revealImage.displayName": "画像の部分表示",
+    "expressionRevealImage.renderer.revealImage.helpDescription": "カスタムゲージスタイルチャートを作成するため、画像のパーセンテージを表示します",
     "xpack.canvas.renderer.shape.displayName": "形状",
     "xpack.canvas.renderer.shape.helpDescription": "基本的な図形をレンダリングします",
     "xpack.canvas.renderer.table.displayName": "データテーブル",
@@ -8485,7 +8485,6 @@
     "xpack.dataVisualizer.file.editFlyout.overrides.timestampQuestionMarkValidationErrorMessage": "タイムスタンプフォーマット {timestampFormat} は、疑問符 ({fieldPlaceholder}) が含まれているためサポートされていません",
     "xpack.dataVisualizer.file.editFlyout.overrides.trimFieldsLabel": "フィールドを切り抜く",
     "xpack.dataVisualizer.file.editFlyout.overrideSettingsTitle": "上書き設定",
-    "xpack.dataVisualizer.experimentalBadge.experimentalLabel": "実験的",
     "xpack.dataVisualizer.file.explanationFlyout.closeButton": "閉じる",
     "xpack.dataVisualizer.file.explanationFlyout.content": "分析結果を生成した論理ステップ。",
     "xpack.dataVisualizer.file.explanationFlyout.title": "分析説明",
@@ -8589,7 +8588,6 @@
     "xpack.dataVisualizer.file.importSummary.indexPatternTitle": "インデックスパターン",
     "xpack.dataVisualizer.file.importSummary.indexTitle": "インデックス",
     "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "パイプラインを投入",
-    "xpack.dataVisualizer.file.importView.experimentalFeatureTooltip": "実験的機能。フィードバックをお待ちしています。",
     "xpack.dataVisualizer.file.importView.importButtonLabel": "インポート",
     "xpack.dataVisualizer.file.importView.importDataTitle": "データのインポート",
     "xpack.dataVisualizer.file.importView.importPermissionError": "インデックス {index} にデータを作成またはインポートするパーミッションがありません。",
@@ -8624,14 +8622,11 @@
     "xpack.dataVisualizer.file.simpleImportSettings.indexNameFormRowLabel": "インデックス名",
     "xpack.dataVisualizer.file.simpleImportSettings.indexNamePlaceholder": "インデックス名",
     "xpack.dataVisualizer.file.welcomeContent.delimitedTextFilesDescription": "CSV や TSV などの区切られたテキストファイル",
-    "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription": "これは実験的な機能です。フィードバックがありますか？{githubLink}で問題を報告してください。",
-    "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip": "実験的機能。フィードバックをお待ちしています。",
     "xpack.dataVisualizer.file.welcomeContent.logFilesWithCommonFormatDescription": "タイムスタンプの一般的フォーマットのログファイル",
     "xpack.dataVisualizer.file.welcomeContent.newlineDelimitedJsonDescription": "改行区切りの JSON",
     "xpack.dataVisualizer.file.welcomeContent.supportedFileFormatDescription": "ファイルデータビジュアライザーはこれらのファイル形式をサポートしています：",
     "xpack.dataVisualizer.file.welcomeContent.uploadedFilesAllowedSizeDescription": "最大{maxFileSize}のファイルをアップロードできます。",
     "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileDescription": "ファイルデータビジュアライザーは、ログファイルのフィールドとメトリックの理解に役立ちます。ファイルをアップロードして、データを分析し、 Elasticsearch インデックスにインポートするか選択できます。",
-    "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle": "ログファイルのデータを可視化 {experimentalBadge}",
     "xpack.dataVisualizer.index.actionsPanel.discoverAppTitle": "Discover",
     "xpack.dataVisualizer.index.actionsPanel.exploreTitle": "データの調査",
     "xpack.dataVisualizer.index.actionsPanel.viewIndexInDiscoverDescription": "インデックスのドキュメントを調査します。",
@@ -11479,7 +11474,6 @@
     "xpack.infra.metricsExplorer.aggregationLables.rate": "レート",
     "xpack.infra.metricsExplorer.aggregationLables.sum": "合計",
     "xpack.infra.metricsExplorer.aggregationSelectLabel": "集約を選択してください",
-    "xpack.infra.metricsExplorer.alerts.createAlertButton": "アラートの作成",
     "xpack.infra.metricsExplorer.andLabel": "\"および\"",
     "xpack.infra.metricsExplorer.chartOptions.areaLabel": "エリア",
     "xpack.infra.metricsExplorer.chartOptions.autoLabel": "自動 (最低 ～ 最高) ",
@@ -11570,7 +11564,6 @@
     "xpack.infra.ml.steps.setupProcess.when.timePicker.label": "開始日",
     "xpack.infra.ml.steps.setupProcess.when.title": "いつモデルを開始しますか？",
     "xpack.infra.node.ariaLabel": "{nodeName}、クリックしてメニューを開きます",
-    "xpack.infra.nodeContextMenu.createAlertLink": "アラートの作成",
     "xpack.infra.nodeContextMenu.description": "{label} {value} の詳細を表示",
     "xpack.infra.nodeContextMenu.title": "{inventoryName} の詳細",
     "xpack.infra.nodeContextMenu.viewAPMTraces": "{inventoryName} APM トレース",
@@ -11948,7 +11941,6 @@
     "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel": "構成JSONエディター",
     "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel": "構成",
     "xpack.ingestPipelines.pipelineEditor.dateForm.fieldNameHelpText": "変換するフィールド。",
-    "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText": "想定されるデータ形式。指定された形式は連続で適用されます。Java時刻パターン、ISO8601、UNIX、UNIX_MS、TAI64Nを使用できます。",
     "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel": "形式",
     "xpack.ingestPipelines.pipelineEditor.dateForm.formatsRequiredError": "形式の値は必須です。",
     "xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel": "ロケール (任意) ",
@@ -14349,8 +14341,6 @@
     "xpack.ml.dataVisualizer.fileBasedLabel": "ファイル",
     "xpack.ml.datavisualizer.selector.dataVisualizerDescription": "機械学習データビジュアライザーツールは、ログファイルのメトリックとフィールド、または既存の Elasticsearch インデックスを分析し、データの理解を助けます。",
     "xpack.ml.datavisualizer.selector.dataVisualizerTitle": "データビジュアライザー",
-    "xpack.ml.datavisualizer.selector.experimentalBadgeLabel": "実験的",
-    "xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel": "実験的機能。フィードバックをお待ちしています。",
     "xpack.ml.datavisualizer.selector.importDataDescription": "ログファイルからデータをインポートします。最大{maxFileSize}のファイルをアップロードできます。",
     "xpack.ml.datavisualizer.selector.importDataTitle": "データのインポート",
     "xpack.ml.datavisualizer.selector.selectIndexButtonLabel": "インデックスパターンを選択",
@@ -20736,7 +20726,6 @@
     "xpack.securitySolution.pages.common.emptyActionEndpointDescription": "脅威防御、検出、深いセキュリティデータの可視化を実現し、ホストを保護します。",
     "xpack.securitySolution.pages.common.emptyActionSecondary": "入門ガイドを表示します。",
     "xpack.securitySolution.pages.common.emptyTitle": "Elastic Securityへようこそ。始めましょう。",
-    "xpack.securitySolution.pages.fourohfour.noContentFoundDescription": "コンテンツがありません",
     "xpack.securitySolution.paginatedTable.rowsButtonLabel": "ページごとの行数",
     "xpack.securitySolution.paginatedTable.showingSubtitle": "表示中",
     "xpack.securitySolution.paginatedTable.tooManyResultsToastText": "クエリ範囲を縮めて結果をさらにフィルタリングしてください",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index d33212d8a2696..d4b87d1b12390 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -6383,13 +6383,13 @@
     "xpack.canvas.functions.replace.args.flagsHelpText": "指定标志。请参见 {url}。",
     "xpack.canvas.functions.replace.args.patternHelpText": "{JS} 正则表达式的文本或模式。例如，{example}。您可以在此处使用捕获组。",
     "xpack.canvas.functions.replace.args.replacementHelpText": "字符串匹配部分的替代。捕获组可以通过其索引进行访问。例如，{example}。",
-    "xpack.canvas.functions.replaceImageHelpText": "使用正则表达式替换字符串的各部分。",
-    "xpack.canvas.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。",
-    "xpack.canvas.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。",
-    "xpack.canvas.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。",
-    "xpack.canvas.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间",
-    "xpack.canvas.functions.revealImageHelpText": "配置图像显示元素。",
     "xpack.canvas.functions.rounddate.args.formatHelpText": "用于存储桶存储的 {MOMENTJS} 格式。例如，{example} 四舍五入到月份。请参见 {url}。",
+    "xpack.canvas.functions.replaceImageHelpText": "使用正则表达式替换字符串的各部分。",
+    "expressionRevealImage.functions.revealImage.args.emptyImageHelpText": "要显示的可选背景图像。以 `{BASE64}` 数据 {URL} 的形式提供图像资产或传入子表达式。",
+    "expressionRevealImage.functions.revealImage.args.imageHelpText": "要显示的图像。以 {BASE64} 数据 {URL} 的形式提供图像资产或传入子表达式。",
+    "expressionRevealImage.functions.revealImage.args.originHelpText": "要开始图像填充的位置。例如 {list} 或 {end}。",
+    "expressionRevealImage.functions.revealImage.invalidPercentErrorMessage": "无效值：“{percent}”。百分比必须介于 0 和 1 之间",
+    "expressionRevealImage.functions.revealImageHelpText": "配置图像显示元素。",
     "xpack.canvas.functions.rounddateHelpText": "使用 {MOMENTJS} 格式字符串舍入自 Epoch 起毫秒数，并返回自 Epoch 起毫秒数。",
     "xpack.canvas.functions.rowCountHelpText": "返回行数。与 {plyFn} 搭配使用，可获取唯一列值的计数或唯一列值的组合。",
     "xpack.canvas.functions.savedLens.args.idHelpText": "已保存 Lens 可视化对象的 ID",
@@ -6583,8 +6583,8 @@
     "xpack.canvas.renderer.progress.helpDescription": "呈现显示元素百分比的进度指示",
     "xpack.canvas.renderer.repeatImage.displayName": "图像重复",
     "xpack.canvas.renderer.repeatImage.helpDescription": "重复图像给定次数",
-    "xpack.canvas.renderer.revealImage.displayName": "图像显示",
-    "xpack.canvas.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表",
+    "expressionRevealImage.renderer.revealImage.displayName": "图像显示",
+    "expressionRevealImage.renderer.revealImage.helpDescription": "显示一定百分比的图像，以制作定制的仪表样式图表",
     "xpack.canvas.renderer.shape.displayName": "形状",
     "xpack.canvas.renderer.shape.helpDescription": "呈现基本形状",
     "xpack.canvas.renderer.table.displayName": "数据表",
@@ -8557,7 +8557,6 @@
     "xpack.dataVisualizer.file.editFlyout.overrides.timestampQuestionMarkValidationErrorMessage": "时间戳格式 {timestampFormat} 不受支持，因为其包含问号字符 ({fieldPlaceholder})",
     "xpack.dataVisualizer.file.editFlyout.overrides.trimFieldsLabel": "应剪裁字段",
     "xpack.dataVisualizer.file.editFlyout.overrideSettingsTitle": "替代设置",
-    "xpack.dataVisualizer.experimentalBadge.experimentalLabel": "实验性",
     "xpack.dataVisualizer.file.explanationFlyout.closeButton": "关闭",
     "xpack.dataVisualizer.file.explanationFlyout.content": "产生分析结果的逻辑步骤。",
     "xpack.dataVisualizer.file.explanationFlyout.title": "分析说明",
@@ -8662,7 +8661,6 @@
     "xpack.dataVisualizer.file.importSummary.indexPatternTitle": "索引模式",
     "xpack.dataVisualizer.file.importSummary.indexTitle": "索引",
     "xpack.dataVisualizer.file.importSummary.ingestPipelineTitle": "采集管道",
-    "xpack.dataVisualizer.file.importView.experimentalFeatureTooltip": "实验性功能。我们很乐意听取您的反馈意见。",
     "xpack.dataVisualizer.file.importView.importButtonLabel": "导入",
     "xpack.dataVisualizer.file.importView.importDataTitle": "导入数据",
     "xpack.dataVisualizer.file.importView.importPermissionError": "您无权创建或将数据导入索引 {index}",
@@ -8697,14 +8695,11 @@
     "xpack.dataVisualizer.file.simpleImportSettings.indexNameFormRowLabel": "索引名称",
     "xpack.dataVisualizer.file.simpleImportSettings.indexNamePlaceholder": "索引名称",
     "xpack.dataVisualizer.file.welcomeContent.delimitedTextFilesDescription": "分隔的文本文件，例如 CSV 和 TSV",
-    "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureDescription": "此功能为实验性功能。有反馈？如欲提供反馈，请在 {githubLink} 中创建问题。",
-    "xpack.dataVisualizer.file.welcomeContent.experimentalFeatureTooltip": "实验性功能。我们很乐意听取您的反馈意见。",
     "xpack.dataVisualizer.file.welcomeContent.logFilesWithCommonFormatDescription": "具有时间戳通用格式的日志文件",
     "xpack.dataVisualizer.file.welcomeContent.newlineDelimitedJsonDescription": "换行符分隔的 JSON",
     "xpack.dataVisualizer.file.welcomeContent.supportedFileFormatDescription": "File Data Visualizer 支持以下文件格式：",
     "xpack.dataVisualizer.file.welcomeContent.uploadedFilesAllowedSizeDescription": "您可以上传不超过 {maxFileSize} 的文件。",
     "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileDescription": "File Data Visualizer 可帮助您理解日志文件中的字段和指标。上传文件、分析文件数据，然后选择是否将数据导入 Elasticsearch 索引。",
-    "xpack.dataVisualizer.file.welcomeContent.visualizeDataFromLogFileTitle": "可视化来自日志文件的数据 {experimentalBadge}",
     "xpack.dataVisualizer.index.actionsPanel.discoverAppTitle": "Discover",
     "xpack.dataVisualizer.index.actionsPanel.exploreTitle": "浏览您的数据",
     "xpack.dataVisualizer.index.actionsPanel.viewIndexInDiscoverDescription": "浏览您的索引中的文档。",
@@ -11637,7 +11632,6 @@
     "xpack.infra.metricsExplorer.aggregationLables.rate": "比率",
     "xpack.infra.metricsExplorer.aggregationLables.sum": "求和",
     "xpack.infra.metricsExplorer.aggregationSelectLabel": "选择聚合",
-    "xpack.infra.metricsExplorer.alerts.createAlertButton": "创建告警",
     "xpack.infra.metricsExplorer.andLabel": "\" 且 \"",
     "xpack.infra.metricsExplorer.chartOptions.areaLabel": "面积图",
     "xpack.infra.metricsExplorer.chartOptions.autoLabel": "自动 (最小值到最大值) ",
@@ -11728,7 +11722,6 @@
     "xpack.infra.ml.steps.setupProcess.when.timePicker.label": "开始日期",
     "xpack.infra.ml.steps.setupProcess.when.title": "您的模型何时开始？",
     "xpack.infra.node.ariaLabel": "{nodeName}，单击打开菜单",
-    "xpack.infra.nodeContextMenu.createAlertLink": "创建告警",
     "xpack.infra.nodeContextMenu.description": "查看 {label} {value} 的详情",
     "xpack.infra.nodeContextMenu.title": "{inventoryName} 详情",
     "xpack.infra.nodeContextMenu.viewAPMTraces": "{inventoryName} APM 跟踪",
@@ -12112,7 +12105,6 @@
     "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldAriaLabel": "配置 JSON 编辑器",
     "xpack.ingestPipelines.pipelineEditor.customForm.optionsFieldLabel": "配置",
     "xpack.ingestPipelines.pipelineEditor.dateForm.fieldNameHelpText": "要转换的字段。",
-    "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldHelpText": "预期的日期格式。提供的格式按顺序应用。接受 Java 时间模式、ISO8601、UNIX、UNIX_MS 或 TAI64N 格式。",
     "xpack.ingestPipelines.pipelineEditor.dateForm.formatsFieldLabel": "格式",
     "xpack.ingestPipelines.pipelineEditor.dateForm.formatsRequiredError": "需要格式的值。",
     "xpack.ingestPipelines.pipelineEditor.dateForm.localeFieldLabel": "区域设置 (可选) ",
@@ -14537,8 +14529,6 @@
     "xpack.ml.dataVisualizer.fileBasedLabel": "文件",
     "xpack.ml.datavisualizer.selector.dataVisualizerDescription": "Machine Learning 数据可视化工具通过分析日志文件或现有 Elasticsearch 索引中的指标和字段，帮助您理解数据。",
     "xpack.ml.datavisualizer.selector.dataVisualizerTitle": "数据可视化工具",
-    "xpack.ml.datavisualizer.selector.experimentalBadgeLabel": "实验性",
-    "xpack.ml.datavisualizer.selector.experimentalBadgeTooltipLabel": "实验性功能。我们很乐意听取您的反馈意见。",
     "xpack.ml.datavisualizer.selector.importDataDescription": "从日志文件导入数据。您可以上传不超过 {maxFileSize} 的文件。",
     "xpack.ml.datavisualizer.selector.importDataTitle": "导入数据",
     "xpack.ml.datavisualizer.selector.selectIndexButtonLabel": "选择索引模式",
@@ -21068,7 +21058,6 @@
     "xpack.securitySolution.pages.common.emptyTitle": "欢迎使用 Elastic Security。让我们帮您如何入门。",
     "xpack.securitySolution.pages.common.updateAlertStatusFailed": "无法更新{ conflicts } 个{conflicts, plural, other {告警}}。",
     "xpack.securitySolution.pages.common.updateAlertStatusFailedDetailed": "{ updated } 个{updated, plural, other {告警}}已成功更新，但是 { conflicts } 个无法更新，\n         因为{ conflicts, plural, other {其}}已被修改。",
-    "xpack.securitySolution.pages.fourohfour.noContentFoundDescription": "未找到任何内容",
     "xpack.securitySolution.paginatedTable.rowsButtonLabel": "每页行数",
     "xpack.securitySolution.paginatedTable.showingSubtitle": "正在显示",
     "xpack.securitySolution.paginatedTable.tooManyResultsToastText": "缩减您的查询范围，以更好地筛选结果",
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts
new file mode 100644
index 0000000000000..412ce348d56e3
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/cluster.test.ts
@@ -0,0 +1,360 @@
+/*
+ * 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 { act } from 'react-dom/test-utils';
+import { MlAction, UpgradeAssistantStatus } from '../../common/types';
+
+import { ClusterTestBed, setupClusterPage, setupEnvironment } from './helpers';
+
+describe('Cluster tab', () => {
+  let testBed: ClusterTestBed;
+  const { server, httpRequestsMockHelpers } = setupEnvironment();
+
+  afterAll(() => {
+    server.restore();
+  });
+
+  describe('with deprecations', () => {
+    const snapshotId = '1';
+    const jobId = 'deprecation_check_job';
+    const upgradeStatusMockResponse: UpgradeAssistantStatus = {
+      readyForUpgrade: false,
+      cluster: [
+        {
+          level: 'critical',
+          message:
+            'model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded',
+          details:
+            'model snapshot [%s] for job [%s] supports minimum version [%s] and needs to be at least [%s]',
+          url: 'doc_url',
+          correctiveAction: {
+            type: 'mlSnapshot',
+            snapshotId,
+            jobId,
+          },
+        },
+      ],
+      indices: [],
+    };
+
+    beforeEach(async () => {
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(upgradeStatusMockResponse);
+      httpRequestsMockHelpers.setLoadDeprecationLoggingResponse({ isEnabled: true });
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { actions, component } = testBed;
+
+      component.update();
+
+      // Navigate to the cluster tab
+      await act(async () => {
+        actions.clickTab('cluster');
+      });
+
+      component.update();
+    });
+
+    test('renders deprecations', () => {
+      const { exists } = testBed;
+      expect(exists('clusterTabContent')).toBe(true);
+      expect(exists('deprecationsContainer')).toBe(true);
+    });
+
+    describe('fix ml snapshots button', () => {
+      let flyout: Element | null;
+
+      beforeEach(async () => {
+        const { component, actions, exists, find } = testBed;
+
+        expect(exists('deprecationsContainer')).toBe(true);
+
+        // Open all deprecations
+        actions.clickExpandAll();
+
+        // The data-test-subj is derived from the deprecation message
+        const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message
+          .split(' ')
+          .join('_')}`;
+
+        await act(async () => {
+          find(`${accordionTestSubj}.fixMlSnapshotsButton`).simulate('click');
+        });
+
+        component.update();
+
+        // We need to read the document "body" as the flyout is added there and not inside
+        // the component DOM tree.
+        flyout = document.body.querySelector('[data-test-subj="fixSnapshotsFlyout"]');
+
+        expect(flyout).not.toBe(null);
+        expect(flyout!.textContent).toContain('Upgrade or delete model snapshot');
+      });
+
+      test('upgrades snapshots', async () => {
+        const { component } = testBed;
+
+        const upgradeButton: HTMLButtonElement | null = flyout!.querySelector(
+          '[data-test-subj="upgradeSnapshotButton"]'
+        );
+
+        httpRequestsMockHelpers.setUpgradeMlSnapshotResponse({
+          nodeId: 'my_node',
+          snapshotId,
+          jobId,
+          status: 'in_progress',
+        });
+
+        await act(async () => {
+          upgradeButton!.click();
+        });
+
+        component.update();
+
+        // First, we expect a POST request to upgrade the snapshot
+        const upgradeRequest = server.requests[server.requests.length - 2];
+        expect(upgradeRequest.method).toBe('POST');
+        expect(upgradeRequest.url).toBe('/api/upgrade_assistant/ml_snapshots');
+
+        // Next, we expect a GET request to check the status of the upgrade
+        const statusRequest = server.requests[server.requests.length - 1];
+        expect(statusRequest.method).toBe('GET');
+        expect(statusRequest.url).toBe(
+          `/api/upgrade_assistant/ml_snapshots/${jobId}/${snapshotId}`
+        );
+      });
+
+      test('handles upgrade failure', async () => {
+        const { component, find } = testBed;
+
+        const upgradeButton: HTMLButtonElement | null = flyout!.querySelector(
+          '[data-test-subj="upgradeSnapshotButton"]'
+        );
+
+        const error = {
+          statusCode: 500,
+          error: 'Upgrade snapshot error',
+          message: 'Upgrade snapshot error',
+        };
+
+        httpRequestsMockHelpers.setUpgradeMlSnapshotResponse(undefined, error);
+
+        await act(async () => {
+          upgradeButton!.click();
+        });
+
+        component.update();
+
+        const upgradeRequest = server.requests[server.requests.length - 1];
+        expect(upgradeRequest.method).toBe('POST');
+        expect(upgradeRequest.url).toBe('/api/upgrade_assistant/ml_snapshots');
+
+        const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message
+          .split(' ')
+          .join('_')}`;
+
+        expect(find(`${accordionTestSubj}.fixMlSnapshotsButton`).text()).toEqual('Failed');
+      });
+
+      test('deletes snapshots', async () => {
+        const { component } = testBed;
+
+        const deleteButton: HTMLButtonElement | null = flyout!.querySelector(
+          '[data-test-subj="deleteSnapshotButton"]'
+        );
+
+        httpRequestsMockHelpers.setDeleteMlSnapshotResponse({
+          acknowledged: true,
+        });
+
+        await act(async () => {
+          deleteButton!.click();
+        });
+
+        component.update();
+
+        const request = server.requests[server.requests.length - 1];
+        const mlDeprecation = upgradeStatusMockResponse.cluster[0];
+
+        expect(request.method).toBe('DELETE');
+        expect(request.url).toBe(
+          `/api/upgrade_assistant/ml_snapshots/${
+            (mlDeprecation.correctiveAction! as MlAction).jobId
+          }/${(mlDeprecation.correctiveAction! as MlAction).snapshotId}`
+        );
+      });
+
+      test('handles delete failure', async () => {
+        const { component, find } = testBed;
+
+        const deleteButton: HTMLButtonElement | null = flyout!.querySelector(
+          '[data-test-subj="deleteSnapshotButton"]'
+        );
+
+        const error = {
+          statusCode: 500,
+          error: 'Upgrade snapshot error',
+          message: 'Upgrade snapshot error',
+        };
+
+        httpRequestsMockHelpers.setDeleteMlSnapshotResponse(undefined, error);
+
+        await act(async () => {
+          deleteButton!.click();
+        });
+
+        component.update();
+
+        const request = server.requests[server.requests.length - 1];
+        const mlDeprecation = upgradeStatusMockResponse.cluster[0];
+
+        expect(request.method).toBe('DELETE');
+        expect(request.url).toBe(
+          `/api/upgrade_assistant/ml_snapshots/${
+            (mlDeprecation.correctiveAction! as MlAction).jobId
+          }/${(mlDeprecation.correctiveAction! as MlAction).snapshotId}`
+        );
+
+        const accordionTestSubj = `depgroup_${upgradeStatusMockResponse.cluster[0].message
+          .split(' ')
+          .join('_')}`;
+
+        expect(find(`${accordionTestSubj}.fixMlSnapshotsButton`).text()).toEqual('Failed');
+      });
+    });
+  });
+
+  describe('no deprecations', () => {
+    beforeEach(async () => {
+      const noDeprecationsResponse = {
+        readyForUpgrade: false,
+        cluster: [],
+        indices: [],
+      };
+
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(noDeprecationsResponse);
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { component } = testBed;
+
+      component.update();
+    });
+
+    test('renders prompt', () => {
+      const { exists, find } = testBed;
+      expect(exists('noDeprecationsPrompt')).toBe(true);
+      expect(find('noDeprecationsPrompt').text()).toContain('Ready to upgrade!');
+    });
+  });
+
+  describe('error handling', () => {
+    test('handles 403', async () => {
+      const error = {
+        statusCode: 403,
+        error: 'Forbidden',
+        message: 'Forbidden',
+      };
+
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error);
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { component, exists, find } = testBed;
+
+      component.update();
+
+      expect(exists('permissionsError')).toBe(true);
+      expect(find('permissionsError').text()).toContain(
+        'You are not authorized to view Elasticsearch deprecations.'
+      );
+    });
+
+    test('shows upgraded message when all nodes have been upgraded', async () => {
+      const error = {
+        statusCode: 426,
+        error: 'Upgrade required',
+        message: 'There are some nodes running a different version of Elasticsearch',
+        attributes: {
+          // This is marked true in the scenario where none of the nodes have the same major version of Kibana,
+          // and therefore we assume all have been upgraded
+          allNodesUpgraded: true,
+        },
+      };
+
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error);
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { component, exists, find } = testBed;
+
+      component.update();
+
+      expect(exists('upgradedCallout')).toBe(true);
+      expect(find('upgradedCallout').text()).toContain(
+        'Your configuration is up to date. Kibana and all Elasticsearch nodes are running the same version.'
+      );
+    });
+
+    test('shows partially upgrade error when nodes are running different versions', async () => {
+      const error = {
+        statusCode: 426,
+        error: 'Upgrade required',
+        message: 'There are some nodes running a different version of Elasticsearch',
+        attributes: {
+          allNodesUpgraded: false,
+        },
+      };
+
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error);
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { component, exists, find } = testBed;
+
+      component.update();
+
+      expect(exists('partiallyUpgradedWarning')).toBe(true);
+      expect(find('partiallyUpgradedWarning').text()).toContain(
+        'Upgrade Kibana to the same version as your Elasticsearch cluster. One or more nodes in the cluster is running a different version than Kibana.'
+      );
+    });
+
+    test('handles generic error', async () => {
+      const error = {
+        statusCode: 500,
+        error: 'Internal server error',
+        message: 'Internal server error',
+      };
+
+      httpRequestsMockHelpers.setLoadEsDeprecationsResponse(undefined, error);
+
+      await act(async () => {
+        testBed = await setupClusterPage({ isReadOnlyMode: false });
+      });
+
+      const { component, exists, find } = testBed;
+
+      component.update();
+
+      expect(exists('requestError')).toBe(true);
+      expect(find('requestError').text()).toContain(
+        'Could not retrieve Elasticsearch deprecations.'
+      );
+    });
+  });
+});
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.ts
new file mode 100644
index 0000000000000..2aedface1e32b
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/cluster.helpers.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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { registerTestBed, TestBed, TestBedConfig } from '@kbn/test/jest';
+import { EsDeprecationsContent } from '../../../public/application/components/es_deprecations';
+import { WithAppDependencies } from './setup_environment';
+
+const testBedConfig: TestBedConfig = {
+  memoryRouter: {
+    initialEntries: ['/es_deprecations/cluster'],
+    componentRoutePath: '/es_deprecations/:tabName',
+  },
+  doMountAsync: true,
+};
+
+export type ClusterTestBed = TestBed<ClusterTestSubjects> & {
+  actions: ReturnType<typeof createActions>;
+};
+
+const createActions = (testBed: TestBed) => {
+  /**
+   * User Actions
+   */
+  const clickTab = (tabName: string) => {
+    const { find } = testBed;
+    const camelcaseTabName = tabName.charAt(0).toUpperCase() + tabName.slice(1);
+
+    find(`upgradeAssistant${camelcaseTabName}Tab`).simulate('click');
+  };
+
+  const clickExpandAll = () => {
+    const { find } = testBed;
+    find('expandAll').simulate('click');
+  };
+
+  return {
+    clickTab,
+    clickExpandAll,
+  };
+};
+
+export const setup = async (overrides?: Record<string, unknown>): Promise<ClusterTestBed> => {
+  const initTestBed = registerTestBed(
+    WithAppDependencies(EsDeprecationsContent, overrides),
+    testBedConfig
+  );
+  const testBed = await initTestBed();
+
+  return {
+    ...testBed,
+    actions: createActions(testBed),
+  };
+};
+
+export type ClusterTestSubjects =
+  | 'expandAll'
+  | 'deprecationsContainer'
+  | 'permissionsError'
+  | 'requestError'
+  | 'upgradedCallout'
+  | 'partiallyUpgradedWarning'
+  | 'noDeprecationsPrompt'
+  | string;
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts
index e3f6df54db60e..3fd8b7279c073 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/http_requests.ts
@@ -62,11 +62,35 @@ const registerHttpRequestMockHelpers = (server: SinonFakeServer) => {
     ]);
   };
 
+  const setUpgradeMlSnapshotResponse = (response?: object, error?: ResponseError) => {
+    const status = error ? error.statusCode || 400 : 200;
+    const body = error ? error : response;
+
+    server.respondWith('POST', `${API_BASE_PATH}/ml_snapshots`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(body),
+    ]);
+  };
+
+  const setDeleteMlSnapshotResponse = (response?: object, error?: ResponseError) => {
+    const status = error ? error.statusCode || 400 : 200;
+    const body = error ? error : response;
+
+    server.respondWith('DELETE', `${API_BASE_PATH}/ml_snapshots/:jobId/:snapshotId`, [
+      status,
+      { 'Content-Type': 'application/json' },
+      JSON.stringify(body),
+    ]);
+  };
+
   return {
     setLoadEsDeprecationsResponse,
     setLoadDeprecationLoggingResponse,
     setUpdateDeprecationLoggingResponse,
     setUpdateIndexSettingsResponse,
+    setUpgradeMlSnapshotResponse,
+    setDeleteMlSnapshotResponse,
   };
 };
 
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts
index ddf5787af1037..8e256680253be 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/index.ts
@@ -7,6 +7,7 @@
 
 export { setup as setupOverviewPage, OverviewTestBed } from './overview.helpers';
 export { setup as setupIndicesPage, IndicesTestBed } from './indices.helpers';
+export { setup as setupClusterPage, ClusterTestBed } from './cluster.helpers';
 export { setup as setupKibanaPage, KibanaTestBed } from './kibana.helpers';
 
 export { setupEnvironment } from './setup_environment';
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx
index faeb0e4a40abd..aae5500403322 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/helpers/setup_environment.tsx
@@ -33,7 +33,6 @@ export const WithAppDependencies = (Comp: any, overrides: Record<string, unknown
 
   const contextValue = {
     http: (mockHttpClient as unknown) as HttpSetup,
-    isCloudEnabled: false,
     docLinks: docLinksServiceMock.createStartContract(),
     kibanaVersionInfo: {
       currentMajor: mockKibanaSemverVersion.major,
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/indices.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/indices.test.ts
index 059980cb5671b..b44a04eb15d86 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/indices.test.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/indices.test.ts
@@ -7,7 +7,7 @@
 
 import { act } from 'react-dom/test-utils';
 import { indexSettingDeprecations } from '../../common/constants';
-import { MIGRATION_DEPRECATION_LEVEL } from '../../common/types';
+import { UpgradeAssistantStatus } from '../../common/types';
 
 import { IndicesTestBed, setupIndicesPage, setupEnvironment } from './helpers';
 
@@ -20,16 +20,19 @@ describe('Indices tab', () => {
   });
 
   describe('with deprecations', () => {
-    const upgradeStatusMockResponse = {
+    const upgradeStatusMockResponse: UpgradeAssistantStatus = {
       readyForUpgrade: false,
       cluster: [],
       indices: [
         {
-          level: 'warning' as MIGRATION_DEPRECATION_LEVEL,
+          level: 'warning',
           message: indexSettingDeprecations.translog.deprecationMessage,
           url: 'doc_url',
           index: 'my_index',
-          deprecatedIndexSettings: indexSettingDeprecations.translog.settings,
+          correctiveAction: {
+            type: 'indexSetting',
+            deprecatedSettings: indexSettingDeprecations.translog.settings,
+          },
         },
       ],
     };
@@ -56,6 +59,7 @@ describe('Indices tab', () => {
 
     test('renders deprecations', () => {
       const { exists, find } = testBed;
+      expect(exists('indexTabContent')).toBe(true);
       expect(exists('deprecationsContainer')).toBe(true);
       expect(find('indexCount').text()).toEqual('1');
     });
diff --git a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts
index 85efaf38f32a7..9b65b493a74c4 100644
--- a/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts
+++ b/x-pack/plugins/upgrade_assistant/__jest__/client_integration/overview.test.ts
@@ -38,7 +38,6 @@ describe('Overview page', () => {
           details:
             'translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)',
           index: 'settings',
-          reindex: false,
         },
       ],
     };
diff --git a/x-pack/plugins/upgrade_assistant/common/types.ts b/x-pack/plugins/upgrade_assistant/common/types.ts
index 0471fc30f28ea..88fa103bace89 100644
--- a/x-pack/plugins/upgrade_assistant/common/types.ts
+++ b/x-pack/plugins/upgrade_assistant/common/types.ts
@@ -28,7 +28,6 @@ export enum ReindexStatus {
 }
 
 export const REINDEX_OP_TYPE = 'upgrade-assistant-reindex-operation';
-
 export interface QueueSettings extends SavedObjectAttributes {
   /**
    * A Unix timestamp of when the reindex operation was enqueued.
@@ -190,11 +189,9 @@ export interface DeprecationAPIResponse {
   node_settings: DeprecationInfo[];
   index_settings: IndexSettingsDeprecationInfo;
 }
-export interface EnrichedDeprecationInfo extends DeprecationInfo {
-  index?: string;
-  node?: string;
-  reindex?: boolean;
-  deprecatedIndexSettings?: string[];
+
+export interface ReindexAction {
+  type: 'reindex';
   /**
    * Indicate what blockers have been detected for calling reindex
    * against this index.
@@ -205,6 +202,21 @@ export interface EnrichedDeprecationInfo extends DeprecationInfo {
   blockerForReindexing?: 'index-closed'; // 'index-closed' can be handled automatically, but requires more resources, user should be warned
 }
 
+export interface MlAction {
+  type: 'mlSnapshot';
+  snapshotId: string;
+  jobId: string;
+}
+
+export interface IndexSettingAction {
+  type: 'indexSetting';
+  deprecatedSettings: string[];
+}
+export interface EnrichedDeprecationInfo extends DeprecationInfo {
+  index?: string;
+  correctiveAction?: ReindexAction | MlAction | IndexSettingAction;
+}
+
 export interface UpgradeAssistantStatus {
   readyForUpgrade: boolean;
   cluster: EnrichedDeprecationInfo[];
@@ -225,3 +237,11 @@ export interface ResolveIndexResponseFromES {
   }>;
   data_streams: Array<{ name: string; backing_indices: string[]; timestamp_field: string }>;
 }
+
+export const ML_UPGRADE_OP_TYPE = 'upgrade-assistant-ml-upgrade-operation';
+
+export interface MlOperation extends SavedObjectAttributes {
+  nodeId: string;
+  snapshotId: string;
+  jobId: string;
+}
diff --git a/x-pack/plugins/upgrade_assistant/kibana.json b/x-pack/plugins/upgrade_assistant/kibana.json
index d9f4917fa0a6c..d013c16837b77 100644
--- a/x-pack/plugins/upgrade_assistant/kibana.json
+++ b/x-pack/plugins/upgrade_assistant/kibana.json
@@ -5,6 +5,6 @@
   "ui": true,
   "configPath": ["xpack", "upgrade_assistant"],
   "requiredPlugins": ["management", "licensing", "features"],
-  "optionalPlugins": ["cloud", "usageCollection"],
+  "optionalPlugins": ["usageCollection"],
   "requiredBundles": ["esUiShared", "kibanaReact"]
 }
diff --git a/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx b/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx
index 049318f5b78d9..88b5bd4721c36 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/app_context.tsx
@@ -24,7 +24,6 @@ export interface KibanaVersionContext {
 
 export interface ContextValue {
   http: HttpSetup;
-  isCloudEnabled: boolean;
   docLinks: DocLinksStart;
   kibanaVersionInfo: KibanaVersionContext;
   notifications: NotificationsStart;
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx
index b7d3247ffbf21..4324379f456ea 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/cell.tsx
@@ -17,34 +17,84 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { EnrichedDeprecationInfo } from '../../../../../common/types';
+import {
+  EnrichedDeprecationInfo,
+  MlAction,
+  ReindexAction,
+  IndexSettingAction,
+} from '../../../../../common/types';
 import { AppContext } from '../../../app_context';
 import { ReindexButton } from './reindex';
 import { FixIndexSettingsButton } from './index_settings';
+import { FixMlSnapshotsButton } from './ml_snapshots';
 
 interface DeprecationCellProps {
   items?: Array<{ title?: string; body: string }>;
-  reindexIndexName?: string;
-  deprecatedIndexSettings?: string[];
   docUrl?: string;
   headline?: string;
   healthColor?: string;
   children?: ReactNode;
-  reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing'];
+  correctiveAction?: EnrichedDeprecationInfo['correctiveAction'];
+  indexName?: string;
+}
+
+interface CellActionProps {
+  correctiveAction: EnrichedDeprecationInfo['correctiveAction'];
+  indexName?: string;
+  items: Array<{ title?: string; body: string }>;
 }
 
+const CellAction: FunctionComponent<CellActionProps> = ({ correctiveAction, indexName, items }) => {
+  const { type: correctiveActionType } = correctiveAction!;
+  switch (correctiveActionType) {
+    case 'mlSnapshot':
+      const { jobId, snapshotId } = correctiveAction as MlAction;
+      return (
+        <FixMlSnapshotsButton
+          jobId={jobId}
+          snapshotId={snapshotId}
+          // There will only ever be a single item for the cluster deprecations list, so we can use the index to access the first one
+          description={items[0]?.body}
+        />
+      );
+
+    case 'reindex':
+      const { blockerForReindexing } = correctiveAction as ReindexAction;
+
+      return (
+        <AppContext.Consumer>
+          {({ http, docLinks }) => (
+            <ReindexButton
+              docLinks={docLinks}
+              reindexBlocker={blockerForReindexing}
+              indexName={indexName!}
+              http={http}
+            />
+          )}
+        </AppContext.Consumer>
+      );
+
+    case 'indexSetting':
+      const { deprecatedSettings } = correctiveAction as IndexSettingAction;
+
+      return <FixIndexSettingsButton settings={deprecatedSettings} index={indexName!} />;
+
+    default:
+      throw new Error(`No UI defined for corrective action: ${correctiveActionType}`);
+  }
+};
+
 /**
  * Used to display a deprecation with links to docs, a health indicator, and other descriptive information.
  */
 export const DeprecationCell: FunctionComponent<DeprecationCellProps> = ({
   headline,
   healthColor,
-  reindexIndexName,
-  deprecatedIndexSettings,
+  correctiveAction,
+  indexName,
   docUrl,
   items = [],
   children,
-  reindexBlocker,
 }) => (
   <div className="upgDeprecationCell">
     <EuiFlexGroup responsive={false} wrap alignItems="baseline">
@@ -82,24 +132,9 @@ export const DeprecationCell: FunctionComponent<DeprecationCellProps> = ({
         )}
       </EuiFlexItem>
 
-      {reindexIndexName && (
-        <EuiFlexItem grow={false}>
-          <AppContext.Consumer>
-            {({ http, docLinks }) => (
-              <ReindexButton
-                docLinks={docLinks}
-                reindexBlocker={reindexBlocker}
-                indexName={reindexIndexName}
-                http={http}
-              />
-            )}
-          </AppContext.Consumer>
-        </EuiFlexItem>
-      )}
-
-      {deprecatedIndexSettings?.length && (
+      {correctiveAction && (
         <EuiFlexItem grow={false}>
-          <FixIndexSettingsButton settings={deprecatedIndexSettings} index={reindexIndexName!} />
+          <CellAction correctiveAction={correctiveAction} indexName={indexName} items={items} />
         </EuiFlexItem>
       )}
     </EuiFlexGroup>
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx
index 188e70b64ce6a..f4ac573d86b11 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.test.tsx
@@ -13,9 +13,9 @@ import { IndexDeprecationTableProps, IndexDeprecationTable } from './index_table
 describe('IndexDeprecationTable', () => {
   const defaultProps = {
     indices: [
-      { index: 'index1', details: 'Index 1 deets', reindex: true },
-      { index: 'index2', details: 'Index 2 deets', reindex: true },
-      { index: 'index3', details: 'Index 3 deets', reindex: true },
+      { index: 'index1', details: 'Index 1 deets', correctiveAction: { type: 'reindex' } },
+      { index: 'index2', details: 'Index 2 deets', correctiveAction: { type: 'reindex' } },
+      { index: 'index3', details: 'Index 3 deets', correctiveAction: { type: 'reindex' } },
     ],
   } as IndexDeprecationTableProps;
 
@@ -49,19 +49,25 @@ describe('IndexDeprecationTable', () => {
         items={
           Array [
             Object {
+              "correctiveAction": Object {
+                "type": "reindex",
+              },
               "details": "Index 1 deets",
               "index": "index1",
-              "reindex": true,
             },
             Object {
+              "correctiveAction": Object {
+                "type": "reindex",
+              },
               "details": "Index 2 deets",
               "index": "index2",
-              "reindex": true,
             },
             Object {
+              "correctiveAction": Object {
+                "type": "reindex",
+              },
               "details": "Index 3 deets",
               "index": "index3",
-              "reindex": true,
             },
           ]
         }
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx
index 216884d547eeb..6b0f94ea24bc7 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/index_table.tsx
@@ -10,7 +10,11 @@ import React from 'react';
 
 import { EuiBasicTable } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import { EnrichedDeprecationInfo } from '../../../../../common/types';
+import {
+  EnrichedDeprecationInfo,
+  IndexSettingAction,
+  ReindexAction,
+} from '../../../../../common/types';
 import { AppContext } from '../../../app_context';
 import { ReindexButton } from './reindex';
 import { FixIndexSettingsButton } from './index_settings';
@@ -19,9 +23,7 @@ const PAGE_SIZES = [10, 25, 50, 100, 250, 500, 1000];
 
 export interface IndexDeprecationDetails {
   index: string;
-  reindex: boolean;
-  deprecatedIndexSettings?: string[];
-  blockerForReindexing?: EnrichedDeprecationInfo['blockerForReindexing'];
+  correctiveAction?: EnrichedDeprecationInfo['correctiveAction'];
   details?: string;
 }
 
@@ -152,9 +154,9 @@ export class IndexDeprecationTable extends React.Component<
     // NOTE: this naive implementation assumes all indices in the table
     // should show the reindex button or fix indices button. This should work for known use cases.
     const { indices } = this.props;
-    const showReindexButton = Boolean(indices.find((i) => i.reindex === true));
+    const showReindexButton = Boolean(indices.find((i) => i.correctiveAction?.type === 'reindex'));
     const showFixSettingsButton = Boolean(
-      indices.find((i) => i.deprecatedIndexSettings && i.deprecatedIndexSettings.length > 0)
+      indices.find((i) => i.correctiveAction?.type === 'indexSetting')
     );
 
     if (showReindexButton === false && showFixSettingsButton === false) {
@@ -172,7 +174,9 @@ export class IndexDeprecationTable extends React.Component<
                     return (
                       <ReindexButton
                         docLinks={docLinks}
-                        reindexBlocker={indexDep.blockerForReindexing}
+                        reindexBlocker={
+                          (indexDep.correctiveAction as ReindexAction).blockerForReindexing
+                        }
                         indexName={indexDep.index!}
                         http={http}
                       />
@@ -184,7 +188,7 @@ export class IndexDeprecationTable extends React.Component<
 
             return (
               <FixIndexSettingsButton
-                settings={indexDep.deprecatedIndexSettings!}
+                settings={(indexDep.correctiveAction as IndexSettingAction).deprecatedSettings}
                 index={indexDep.index}
               />
             );
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx
index 579cf1f4a55bb..2bfa8119e41bc 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.test.tsx
@@ -72,18 +72,14 @@ describe('EsDeprecationList', () => {
           indices={
             Array [
               Object {
-                "blockerForReindexing": undefined,
-                "deprecatedIndexSettings": undefined,
+                "correctiveAction": undefined,
                 "details": undefined,
                 "index": "0",
-                "reindex": false,
               },
               Object {
-                "blockerForReindexing": undefined,
-                "deprecatedIndexSettings": undefined,
+                "correctiveAction": undefined,
                 "details": undefined,
                 "index": "1",
-                "reindex": false,
               },
             ]
           }
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx
index cb9f238d0e4dd..7b543a7e94b33 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/list.tsx
@@ -32,11 +32,10 @@ const MessageDeprecation: FunctionComponent<{
 
   return (
     <DeprecationCell
-      reindexBlocker={deprecation.blockerForReindexing}
       headline={deprecation.message}
       healthColor={COLOR_MAP[deprecation.level]}
-      reindexIndexName={deprecation.reindex ? deprecation.index! : undefined}
-      deprecatedIndexSettings={deprecation.deprecatedIndexSettings}
+      correctiveAction={deprecation.correctiveAction}
+      indexName={deprecation.index}
       docUrl={deprecation.url}
       items={items}
     />
@@ -57,10 +56,10 @@ const SimpleMessageDeprecation: FunctionComponent<{ deprecation: EnrichedDepreca
 
   return (
     <DeprecationCell
-      reindexBlocker={deprecation.blockerForReindexing}
+      correctiveAction={deprecation.correctiveAction}
+      indexName={deprecation.index}
       items={items}
       docUrl={deprecation.url}
-      deprecatedIndexSettings={deprecation.deprecatedIndexSettings}
     />
   );
 };
@@ -94,12 +93,11 @@ export const EsDeprecationList: FunctionComponent<{
   if (currentGroupBy === GroupByOption.message && deprecations[0].index !== undefined) {
     // We assume that every deprecation message is the same issue (since they have the same
     // message) and that each deprecation will have an index associated with it.
+
     const indices = deprecations.map((dep) => ({
       index: dep.index!,
       details: dep.details,
-      reindex: dep.reindex === true,
-      deprecatedIndexSettings: dep.deprecatedIndexSettings,
-      blockerForReindexing: dep.blockerForReindexing,
+      correctiveAction: dep.correctiveAction,
     }));
     return <IndexDeprecation indices={indices} deprecation={deprecations[0]} />;
   } else if (currentGroupBy === GroupByOption.index) {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx
new file mode 100644
index 0000000000000..13b7dacc3b598
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/button.tsx
@@ -0,0 +1,125 @@
+/*
+ * 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, { useEffect, useState } from 'react';
+
+import { ButtonSize, EuiButton } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+import { FixSnapshotsFlyout } from './fix_snapshots_flyout';
+import { useAppContext } from '../../../../app_context';
+import { useSnapshotState } from './use_snapshot_state';
+
+const i18nTexts = {
+  fixButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.fixButtonLabel',
+    {
+      defaultMessage: 'Fix',
+    }
+  ),
+  upgradingButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.upgradingButtonLabel',
+    {
+      defaultMessage: 'Upgrading…',
+    }
+  ),
+  deletingButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.deletingButtonLabel',
+    {
+      defaultMessage: 'Deleting…',
+    }
+  ),
+  doneButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.doneButtonLabel',
+    {
+      defaultMessage: 'Done',
+    }
+  ),
+  failedButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.failedButtonLabel',
+    {
+      defaultMessage: 'Failed',
+    }
+  ),
+};
+
+interface Props {
+  snapshotId: string;
+  jobId: string;
+  description: string;
+}
+
+export const FixMlSnapshotsButton: React.FunctionComponent<Props> = ({
+  snapshotId,
+  jobId,
+  description,
+}) => {
+  const { api } = useAppContext();
+  const { snapshotState, upgradeSnapshot, deleteSnapshot, updateSnapshotStatus } = useSnapshotState(
+    {
+      jobId,
+      snapshotId,
+      api,
+    }
+  );
+
+  const [showFlyout, setShowFlyout] = useState(false);
+
+  useEffect(() => {
+    updateSnapshotStatus();
+  }, [updateSnapshotStatus]);
+
+  const commonButtonProps = {
+    size: 's' as ButtonSize,
+    onClick: () => setShowFlyout(true),
+    'data-test-subj': 'fixMlSnapshotsButton',
+  };
+
+  let button = <EuiButton {...commonButtonProps}>{i18nTexts.fixButtonLabel}</EuiButton>;
+
+  switch (snapshotState.status) {
+    case 'in_progress':
+      button = (
+        <EuiButton color="secondary" {...commonButtonProps} isLoading>
+          {snapshotState.action === 'delete'
+            ? i18nTexts.deletingButtonLabel
+            : i18nTexts.upgradingButtonLabel}
+        </EuiButton>
+      );
+      break;
+    case 'complete':
+      button = (
+        <EuiButton color="secondary" iconType="check" {...commonButtonProps} disabled>
+          {i18nTexts.doneButtonLabel}
+        </EuiButton>
+      );
+      break;
+    case 'error':
+      button = (
+        <EuiButton color="danger" iconType="cross" {...commonButtonProps}>
+          {i18nTexts.failedButtonLabel}
+        </EuiButton>
+      );
+      break;
+  }
+
+  return (
+    <>
+      {button}
+
+      {showFlyout && (
+        <FixSnapshotsFlyout
+          snapshotState={snapshotState}
+          upgradeSnapshot={upgradeSnapshot}
+          deleteSnapshot={deleteSnapshot}
+          description={description}
+          closeFlyout={() => setShowFlyout(false)}
+        />
+      )}
+    </>
+  );
+};
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx
new file mode 100644
index 0000000000000..7dafab011a69a
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/fix_snapshots_flyout.tsx
@@ -0,0 +1,181 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutFooter,
+  EuiFlyoutHeader,
+  EuiPortal,
+  EuiTitle,
+  EuiText,
+  EuiCallOut,
+  EuiSpacer,
+} from '@elastic/eui';
+import { SnapshotStatus } from './use_snapshot_state';
+import { ResponseError } from '../../../../lib/api';
+
+interface SnapshotState extends SnapshotStatus {
+  error?: ResponseError;
+}
+interface Props {
+  upgradeSnapshot: () => Promise<void>;
+  deleteSnapshot: () => Promise<void>;
+  description: string;
+  closeFlyout: () => void;
+  snapshotState: SnapshotState;
+}
+
+const i18nTexts = {
+  upgradeButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.upgradeButtonLabel',
+    {
+      defaultMessage: 'Upgrade',
+    }
+  ),
+  retryUpgradeButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryUpgradeButtonLabel',
+    {
+      defaultMessage: 'Retry upgrade',
+    }
+  ),
+  closeButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.cancelButtonLabel',
+    {
+      defaultMessage: 'Close',
+    }
+  ),
+  deleteButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteButtonLabel',
+    {
+      defaultMessage: 'Delete',
+    }
+  ),
+  retryDeleteButtonLabel: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.retryDeleteButtonLabel',
+    {
+      defaultMessage: 'Retry delete',
+    }
+  ),
+  flyoutTitle: i18n.translate('xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.title', {
+    defaultMessage: 'Upgrade or delete model snapshot',
+  }),
+  deleteSnapshotErrorTitle: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.deleteSnapshotErrorTitle',
+    {
+      defaultMessage: 'Error deleting snapshot',
+    }
+  ),
+  upgradeSnapshotErrorTitle: i18n.translate(
+    'xpack.upgradeAssistant.esDeprecations.mlSnapshots.flyout.upgradeSnapshotErrorTitle',
+    {
+      defaultMessage: 'Error upgrading snapshot',
+    }
+  ),
+};
+
+export const FixSnapshotsFlyout = ({
+  upgradeSnapshot,
+  deleteSnapshot,
+  description,
+  closeFlyout,
+  snapshotState,
+}: Props) => {
+  const onUpgradeSnapshot = () => {
+    upgradeSnapshot();
+    closeFlyout();
+  };
+
+  const onDeleteSnapshot = () => {
+    deleteSnapshot();
+    closeFlyout();
+  };
+
+  return (
+    <EuiPortal>
+      <EuiFlyout
+        onClose={closeFlyout}
+        ownFocus
+        size="m"
+        maxWidth
+        data-test-subj="fixSnapshotsFlyout"
+      >
+        <EuiFlyoutHeader hasBorder>
+          <EuiTitle size="s">
+            <h2>{i18nTexts.flyoutTitle}</h2>
+          </EuiTitle>
+        </EuiFlyoutHeader>
+        <EuiFlyoutBody>
+          {snapshotState.error && (
+            <>
+              <EuiCallOut
+                title={
+                  snapshotState.action === 'delete'
+                    ? i18nTexts.deleteSnapshotErrorTitle
+                    : i18nTexts.upgradeSnapshotErrorTitle
+                }
+                color="danger"
+                iconType="alert"
+                data-test-subj="upgradeSnapshotError"
+              >
+                {snapshotState.error.message}
+              </EuiCallOut>
+              <EuiSpacer />
+            </>
+          )}
+          <EuiText>
+            <p>{description}</p>
+          </EuiText>
+        </EuiFlyoutBody>
+        <EuiFlyoutFooter>
+          <EuiFlexGroup justifyContent="spaceBetween">
+            <EuiFlexItem grow={false}>
+              <EuiButtonEmpty iconType="cross" onClick={closeFlyout} flush="left">
+                {i18nTexts.closeButtonLabel}
+              </EuiButtonEmpty>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup>
+                <EuiFlexItem>
+                  <EuiButtonEmpty
+                    data-test-subj="deleteSnapshotButton"
+                    color="danger"
+                    onClick={onDeleteSnapshot}
+                    isLoading={false}
+                  >
+                    {snapshotState.action === 'delete' && snapshotState.error
+                      ? i18nTexts.retryDeleteButtonLabel
+                      : i18nTexts.deleteButtonLabel}
+                  </EuiButtonEmpty>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiButton
+                    fill
+                    onClick={onUpgradeSnapshot}
+                    isLoading={false}
+                    data-test-subj="upgradeSnapshotButton"
+                  >
+                    {snapshotState.action === 'upgrade' && snapshotState.error
+                      ? i18nTexts.retryUpgradeButtonLabel
+                      : i18nTexts.upgradeButtonLabel}
+                  </EuiButton>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiFlyoutFooter>
+      </EuiFlyout>
+    </EuiPortal>
+  );
+};
diff --git a/x-pack/plugins/infra/public/components/header/index.ts b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts
similarity index 83%
rename from x-pack/plugins/infra/public/components/header/index.ts
rename to x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts
index 37156e1b6cacd..d537c94cf67ae 100644
--- a/x-pack/plugins/infra/public/components/header/index.ts
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/index.ts
@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export { Header } from './header';
+export { FixMlSnapshotsButton } from './button';
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx
new file mode 100644
index 0000000000000..2dd4638c772b3
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/ml_snapshots/use_snapshot_state.tsx
@@ -0,0 +1,151 @@
+/*
+ * 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 { useRef, useCallback, useState, useEffect } from 'react';
+
+import { ApiService, ResponseError } from '../../../../lib/api';
+
+const POLL_INTERVAL_MS = 1000;
+
+export interface SnapshotStatus {
+  snapshotId: string;
+  jobId: string;
+  status: 'complete' | 'in_progress' | 'error' | 'idle';
+  action?: 'upgrade' | 'delete';
+}
+
+export const useSnapshotState = ({
+  jobId,
+  snapshotId,
+  api,
+}: {
+  jobId: string;
+  snapshotId: string;
+  api: ApiService;
+}) => {
+  const [requestError, setRequestError] = useState<ResponseError | undefined>(undefined);
+  const [snapshotState, setSnapshotState] = useState<SnapshotStatus>({
+    status: 'idle',
+    jobId,
+    snapshotId,
+  });
+
+  const pollIntervalIdRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isMounted = useRef(false);
+
+  const clearPollInterval = useCallback(() => {
+    if (pollIntervalIdRef.current) {
+      clearTimeout(pollIntervalIdRef.current);
+      pollIntervalIdRef.current = null;
+    }
+  }, []);
+
+  const updateSnapshotStatus = useCallback(async () => {
+    clearPollInterval();
+
+    const { data, error: updateStatusError } = await api.getMlSnapshotUpgradeStatus({
+      jobId,
+      snapshotId,
+    });
+
+    if (updateStatusError) {
+      setSnapshotState({
+        snapshotId,
+        jobId,
+        action: 'upgrade',
+        status: 'error',
+      });
+      setRequestError(updateStatusError);
+      return;
+    }
+
+    setSnapshotState(data);
+
+    // Only keep polling if it exists and is in progress.
+    if (data?.status === 'in_progress') {
+      pollIntervalIdRef.current = setTimeout(updateSnapshotStatus, POLL_INTERVAL_MS);
+    }
+  }, [api, clearPollInterval, jobId, snapshotId]);
+
+  const upgradeSnapshot = useCallback(async () => {
+    setSnapshotState({
+      snapshotId,
+      jobId,
+      action: 'upgrade',
+      status: 'in_progress',
+    });
+
+    const { data, error: upgradeError } = await api.upgradeMlSnapshot({ jobId, snapshotId });
+
+    if (upgradeError) {
+      setRequestError(upgradeError);
+      setSnapshotState({
+        snapshotId,
+        jobId,
+        action: 'upgrade',
+        status: 'error',
+      });
+      return;
+    }
+
+    setSnapshotState(data);
+    updateSnapshotStatus();
+  }, [api, jobId, snapshotId, updateSnapshotStatus]);
+
+  const deleteSnapshot = useCallback(async () => {
+    setSnapshotState({
+      snapshotId,
+      jobId,
+      action: 'delete',
+      status: 'in_progress',
+    });
+
+    const { error: deleteError } = await api.deleteMlSnapshot({
+      snapshotId,
+      jobId,
+    });
+
+    if (deleteError) {
+      setRequestError(deleteError);
+      setSnapshotState({
+        snapshotId,
+        jobId,
+        action: 'delete',
+        status: 'error',
+      });
+      return;
+    }
+
+    setSnapshotState({
+      snapshotId,
+      jobId,
+      action: 'delete',
+      status: 'complete',
+    });
+  }, [api, jobId, snapshotId]);
+
+  useEffect(() => {
+    isMounted.current = true;
+
+    return () => {
+      isMounted.current = false;
+
+      // Clean up on unmount.
+      clearPollInterval();
+    };
+  }, [clearPollInterval]);
+
+  return {
+    snapshotState: {
+      ...snapshotState,
+      error: requestError,
+    },
+    upgradeSnapshot,
+    updateSnapshotStatus,
+    deleteSnapshot,
+  };
+};
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx
index 34c1328459cdb..646f253931664 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/button.tsx
@@ -14,11 +14,7 @@ import { EuiButton, EuiLoadingSpinner, EuiText, EuiToolTip } from '@elastic/eui'
 import { FormattedMessage } from '@kbn/i18n/react';
 import { DocLinksStart, HttpSetup } from 'src/core/public';
 import { API_BASE_PATH } from '../../../../../../common/constants';
-import {
-  EnrichedDeprecationInfo,
-  ReindexStatus,
-  UIReindexOption,
-} from '../../../../../../common/types';
+import { ReindexAction, ReindexStatus, UIReindexOption } from '../../../../../../common/types';
 import { LoadingState } from '../../../types';
 import { ReindexFlyout } from './flyout';
 import { ReindexPollingService, ReindexState } from './polling_service';
@@ -27,7 +23,7 @@ interface ReindexButtonProps {
   indexName: string;
   http: HttpSetup;
   docLinks: DocLinksStart;
-  reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing'];
+  reindexBlocker?: ReindexAction['blockerForReindexing'];
 }
 
 interface ReindexButtonState {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx
index 3e7b931452566..97031dd08ee2a 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx
+++ b/x-pack/plugins/upgrade_assistant/public/application/components/es_deprecations/deprecations/reindex/flyout/container.tsx
@@ -19,7 +19,7 @@ import {
   EuiTitle,
 } from '@elastic/eui';
 
-import { EnrichedDeprecationInfo, ReindexStatus } from '../../../../../../../common/types';
+import { ReindexAction, ReindexStatus } from '../../../../../../../common/types';
 
 import { ReindexState } from '../polling_service';
 import { ChecklistFlyoutStep } from './checklist_step';
@@ -37,7 +37,7 @@ interface ReindexFlyoutProps {
   startReindex: () => void;
   cancelReindex: () => void;
   docLinks: DocLinksStart;
-  reindexBlocker?: EnrichedDeprecationInfo['blockerForReindexing'];
+  reindexBlocker?: ReindexAction['blockerForReindexing'];
 }
 
 interface ReindexFlyoutState {
diff --git a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts
index 1c42c249e9d54..c4d9128baa56a 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts
+++ b/x-pack/plugins/upgrade_assistant/public/application/lib/api.ts
@@ -90,6 +90,38 @@ export class ApiService {
 
     return result;
   }
+
+  public async upgradeMlSnapshot(body: { jobId: string; snapshotId: string }) {
+    const result = await this.sendRequest({
+      path: `${API_BASE_PATH}/ml_snapshots`,
+      method: 'post',
+      body,
+    });
+
+    return result;
+  }
+
+  public async deleteMlSnapshot({ jobId, snapshotId }: { jobId: string; snapshotId: string }) {
+    const result = await this.sendRequest({
+      path: `${API_BASE_PATH}/ml_snapshots/${jobId}/${snapshotId}`,
+      method: 'delete',
+    });
+
+    return result;
+  }
+
+  public async getMlSnapshotUpgradeStatus({
+    jobId,
+    snapshotId,
+  }: {
+    jobId: string;
+    snapshotId: string;
+  }) {
+    return await this.sendRequest({
+      path: `${API_BASE_PATH}/ml_snapshots/${jobId}/${snapshotId}`,
+      method: 'get',
+    });
+  }
 }
 
 export const apiService = new ApiService();
diff --git a/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts b/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts
index 73e5d33e6c968..8cd9f8b6591e3 100644
--- a/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts
+++ b/x-pack/plugins/upgrade_assistant/public/application/mount_management_section.ts
@@ -14,7 +14,6 @@ import { breadcrumbService } from './lib/breadcrumbs';
 
 export async function mountManagementSection(
   coreSetup: CoreSetup,
-  isCloudEnabled: boolean,
   params: ManagementAppMountParams,
   kibanaVersionInfo: KibanaVersionContext,
   readonly: boolean
@@ -31,7 +30,6 @@ export async function mountManagementSection(
 
   return renderApp({
     element,
-    isCloudEnabled,
     http,
     i18n,
     docLinks,
diff --git a/x-pack/plugins/upgrade_assistant/public/plugin.ts b/x-pack/plugins/upgrade_assistant/public/plugin.ts
index 4f5429201f304..4cffd40faf380 100644
--- a/x-pack/plugins/upgrade_assistant/public/plugin.ts
+++ b/x-pack/plugins/upgrade_assistant/public/plugin.ts
@@ -9,19 +9,17 @@ import SemVer from 'semver/classes/semver';
 import { i18n } from '@kbn/i18n';
 import { Plugin, CoreSetup, PluginInitializerContext } from 'src/core/public';
 
-import { CloudSetup } from '../../cloud/public';
 import { ManagementSetup } from '../../../../src/plugins/management/public';
 
 import { Config } from '../common/config';
 
 interface Dependencies {
-  cloud: CloudSetup;
   management: ManagementSetup;
 }
 
 export class UpgradeAssistantUIPlugin implements Plugin {
   constructor(private ctx: PluginInitializerContext) {}
-  setup(coreSetup: CoreSetup, { cloud, management }: Dependencies) {
+  setup(coreSetup: CoreSetup, { management }: Dependencies) {
     const { enabled, readonly } = this.ctx.config.get<Config>();
 
     if (!enabled) {
@@ -29,7 +27,6 @@ export class UpgradeAssistantUIPlugin implements Plugin {
     }
 
     const appRegistrar = management.sections.section.stack;
-    const isCloudEnabled = Boolean(cloud?.isCloudEnabled);
     const kibanaVersion = new SemVer(this.ctx.env.packageInfo.version);
 
     const kibanaVersionInfo = {
@@ -59,7 +56,6 @@ export class UpgradeAssistantUIPlugin implements Plugin {
         const { mountManagementSection } = await import('./application/mount_management_section');
         const unmountAppCallback = await mountManagementSection(
           coreSetup,
-          isCloudEnabled,
           params,
           kibanaVersionInfo,
           readonly
diff --git a/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json b/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json
index 10a5d39f5cece..2b8519d75cb2f 100644
--- a/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json
+++ b/x-pack/plugins/upgrade_assistant/server/lib/__fixtures__/fake_deprecations.json
@@ -19,6 +19,12 @@
       "message": "Datafeed [deprecation-datafeed] uses deprecated query options",
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-7.0.html#breaking_70_search_changes",
       "details": "[Deprecated field [use_dis_max] used, replaced by [Set [tie_breaker] to 1 instead]]"
+    },
+    {
+      "level": "critical",
+      "message": "model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded",
+      "url": "",
+      "details": "details"
     }
   ],
   "node_settings": [
@@ -46,6 +52,33 @@
         "details": "[[type: tweet, field: liked]]"
       }
     ],
+    "old_index": [
+      {
+        "level": "critical",
+        "message": "Index created before 7.0",
+        "url":
+          "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html",
+        "details": "This index was created using version: 6.8.13"
+      }
+    ],
+    "closed_index": [
+      {
+        "level": "critical",
+        "message": "Index created before 7.0",
+        "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html",
+        "details": "This index was created using version: 6.8.13"
+      }
+    ],
+    "deprecated_settings": [
+      {
+        "level": "warning",
+        "message": "translog retention settings are ignored",
+        "url":
+          "https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules-translog.html",
+        "details":
+          "translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)"
+      }
+    ],
     ".kibana": [
       {
         "level": "warning",
@@ -79,4 +112,4 @@
       }
     ]
   }
-}
\ No newline at end of file
+}
diff --git a/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap b/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap
index aefac2b4c63f6..a7890adf1f0eb 100644
--- a/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap
+++ b/x-pack/plugins/upgrade_assistant/server/lib/__snapshots__/es_migration_apis.test.ts.snap
@@ -4,24 +4,39 @@ exports[`getUpgradeAssistantStatus returns the correct shape of data 1`] = `
 Object {
   "cluster": Array [
     Object {
+      "correctiveAction": undefined,
       "details": "templates using \`template\` field: security_audit_log,watches,.monitoring-alerts,triggered_watches,.ml-anomalies-,.ml-notifications,.ml-meta,.monitoring-kibana,.monitoring-es,.monitoring-logstash,.watch-history-6,.ml-state,security-index-template",
       "level": "warning",
       "message": "Template patterns are no longer using \`template\` field, but \`index_patterns\` instead",
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_indices_changes.html#_index_templates_use_literal_index_patterns_literal_instead_of_literal_template_literal",
     },
     Object {
+      "correctiveAction": undefined,
       "details": "{.monitoring-logstash=[Coercion of boolean fields], .monitoring-es=[Coercion of boolean fields], .ml-anomalies-=[Coercion of boolean fields], .watch-history-6=[Coercion of boolean fields], .monitoring-kibana=[Coercion of boolean fields], security-index-template=[Coercion of boolean fields]}",
       "level": "warning",
       "message": "one or more templates use deprecated mapping settings",
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_indices_changes.html",
     },
     Object {
+      "correctiveAction": undefined,
       "details": "[Deprecated field [use_dis_max] used, replaced by [Set [tie_breaker] to 1 instead]]",
       "level": "warning",
       "message": "Datafeed [deprecation-datafeed] uses deprecated query options",
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-7.0.html#breaking_70_search_changes",
     },
     Object {
+      "correctiveAction": Object {
+        "jobId": "deprecation_check_job",
+        "snapshotId": "1",
+        "type": "mlSnapshot",
+      },
+      "details": "details",
+      "level": "critical",
+      "message": "model snapshot [1] for job [deprecation_check_job] needs to be deleted or upgraded",
+      "url": "",
+    },
+    Object {
+      "correctiveAction": undefined,
       "details": "This node thing is wrong",
       "level": "critical",
       "message": "A node-level issue",
@@ -30,63 +45,87 @@ Object {
   ],
   "indices": Array [
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": undefined,
       "details": "[[type: doc, field: spins], [type: doc, field: mlockall], [type: doc, field: node_master], [type: doc, field: primary]]",
       "index": ".monitoring-es-6-2018.11.07",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": undefined,
       "details": "[[type: tweet, field: liked]]",
       "index": "twitter",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": Object {
+        "blockerForReindexing": undefined,
+        "type": "reindex",
+      },
+      "details": "This index was created using version: 6.8.13",
+      "index": "old_index",
+      "level": "critical",
+      "message": "Index created before 7.0",
+      "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html",
+    },
+    Object {
+      "correctiveAction": Object {
+        "blockerForReindexing": "index-closed",
+        "type": "reindex",
+      },
+      "details": "This index was created using version: 6.8.13",
+      "index": "closed_index",
+      "level": "critical",
+      "message": "Index created before 7.0",
+      "url": "https: //www.elastic.co/guide/en/elasticsearch/reference/master/breaking-changes-8.0.html",
+    },
+    Object {
+      "correctiveAction": Object {
+        "deprecatedSettings": Array [
+          "translog.retention.size",
+          "translog.retention.age",
+        ],
+        "type": "indexSetting",
+      },
+      "details": "translog retention settings [index.translog.retention.size] and [index.translog.retention.age] are ignored because translog is no longer used in peer recoveries with soft-deletes enabled (default in 7.0 or later)",
+      "index": "deprecated_settings",
+      "level": "warning",
+      "message": "translog retention settings are ignored",
+      "url": "https://www.elastic.co/guide/en/elasticsearch/reference/current/index-modules-translog.html",
+    },
+    Object {
+      "correctiveAction": undefined,
       "details": "[[type: index-pattern, field: notExpandable], [type: config, field: xPackMonitoring:allowReport], [type: config, field: xPackMonitoring:showBanner], [type: dashboard, field: pause], [type: dashboard, field: timeRestore]]",
       "index": ".kibana",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": undefined,
       "details": "[[type: doc, field: notify], [type: doc, field: created], [type: doc, field: attach_payload], [type: doc, field: met]]",
       "index": ".watcher-history-6-2018.11.07",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": undefined,
       "details": "[[type: doc, field: snapshot]]",
       "index": ".monitoring-kibana-6-2018.11.07",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
     Object {
-      "blockerForReindexing": undefined,
-      "deprecatedIndexSettings": Array [],
+      "correctiveAction": undefined,
       "details": "[[type: tweet, field: liked]]",
       "index": "twitter2",
       "level": "warning",
       "message": "Coercion of boolean fields",
-      "reindex": false,
       "url": "https://www.elastic.co/guide/en/elasticsearch/reference/6.0/breaking_60_mappings_changes.html#_coercion_of_boolean_fields",
     },
   ],
diff --git a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts
index d78af9162e924..6477ce738c084 100644
--- a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts
+++ b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.test.ts
@@ -22,7 +22,13 @@ const asApiResponse = <T>(body: T): RequestEvent<T> =>
 
 describe('getUpgradeAssistantStatus', () => {
   const resolvedIndices = {
-    indices: fakeIndexNames.map((f) => ({ name: f, attributes: ['open'] })),
+    indices: fakeIndexNames.map((indexName) => {
+      // mark one index as closed to test blockerForReindexing flag
+      if (indexName === 'closed_index') {
+        return { name: indexName, attributes: ['closed'] };
+      }
+      return { name: indexName, attributes: ['open'] };
+    }),
   };
 
   // @ts-expect-error mock data is too loosely typed
@@ -39,12 +45,12 @@ describe('getUpgradeAssistantStatus', () => {
   esClient.asCurrentUser.indices.resolveIndex.mockResolvedValue(asApiResponse(resolvedIndices));
 
   it('calls /_migration/deprecations', async () => {
-    await getUpgradeAssistantStatus(esClient, false);
+    await getUpgradeAssistantStatus(esClient);
     expect(esClient.asCurrentUser.migration.deprecations).toHaveBeenCalled();
   });
 
   it('returns the correct shape of data', async () => {
-    const resp = await getUpgradeAssistantStatus(esClient, false);
+    const resp = await getUpgradeAssistantStatus(esClient);
     expect(resp).toMatchSnapshot();
   });
 
@@ -59,7 +65,7 @@ describe('getUpgradeAssistantStatus', () => {
       })
     );
 
-    await expect(getUpgradeAssistantStatus(esClient, false)).resolves.toHaveProperty(
+    await expect(getUpgradeAssistantStatus(esClient)).resolves.toHaveProperty(
       'readyForUpgrade',
       false
     );
@@ -76,32 +82,9 @@ describe('getUpgradeAssistantStatus', () => {
       })
     );
 
-    await expect(getUpgradeAssistantStatus(esClient, false)).resolves.toHaveProperty(
+    await expect(getUpgradeAssistantStatus(esClient)).resolves.toHaveProperty(
       'readyForUpgrade',
       true
     );
   });
-
-  it('filters out security realm deprecation on Cloud', async () => {
-    esClient.asCurrentUser.migration.deprecations.mockResolvedValue(
-      // @ts-expect-error not full interface
-      asApiResponse({
-        cluster_settings: [
-          {
-            level: 'critical',
-            message: 'Security realm settings structure changed',
-            url: 'https://...',
-          },
-        ],
-        node_settings: [],
-        ml_settings: [],
-        index_settings: {},
-      })
-    );
-
-    const result = await getUpgradeAssistantStatus(esClient, true);
-
-    expect(result).toHaveProperty('readyForUpgrade', true);
-    expect(result).toHaveProperty('cluster', []);
-  });
 });
diff --git a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts
index e775190d426df..85cde9069d60f 100644
--- a/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts
+++ b/x-pack/plugins/upgrade_assistant/server/lib/es_migration_apis.ts
@@ -16,26 +16,12 @@ import {
 import { esIndicesStateCheck } from './es_indices_state_check';
 
 export async function getUpgradeAssistantStatus(
-  dataClient: IScopedClusterClient,
-  isCloudEnabled: boolean
+  dataClient: IScopedClusterClient
 ): Promise<UpgradeAssistantStatus> {
   const { body: deprecations } = await dataClient.asCurrentUser.migration.deprecations();
 
-  const cluster = getClusterDeprecations(deprecations, isCloudEnabled);
-  const indices = getCombinedIndexInfos(deprecations);
-
-  const indexNames = indices.map(({ index }) => index!);
-
-  // If we have found deprecation information for index/indices check whether the index is
-  // open or closed.
-  if (indexNames.length) {
-    const indexStates = await esIndicesStateCheck(dataClient.asCurrentUser, indexNames);
-
-    indices.forEach((indexData) => {
-      indexData.blockerForReindexing =
-        indexStates[indexData.index!] === 'closed' ? 'index-closed' : undefined;
-    });
-  }
+  const cluster = getClusterDeprecations(deprecations);
+  const indices = await getCombinedIndexInfos(deprecations, dataClient);
 
   const criticalWarnings = cluster.concat(indices).filter((d) => d.level === 'critical');
 
@@ -47,38 +33,91 @@ export async function getUpgradeAssistantStatus(
 }
 
 // Reformats the index deprecations to an array of deprecation warnings extended with an index field.
-const getCombinedIndexInfos = (deprecations: DeprecationAPIResponse) =>
-  Object.keys(deprecations.index_settings).reduce((indexDeprecations, indexName) => {
-    return indexDeprecations.concat(
-      deprecations.index_settings[indexName].map(
-        (d) =>
-          ({
-            ...d,
-            index: indexName,
-            reindex: /Index created before/.test(d.message),
-            deprecatedIndexSettings: getIndexSettingDeprecations(d.message),
-          } as EnrichedDeprecationInfo)
-      )
-    );
-  }, [] as EnrichedDeprecationInfo[]);
-
-const getClusterDeprecations = (deprecations: DeprecationAPIResponse, isCloudEnabled: boolean) => {
-  const combined = deprecations.cluster_settings
+const getCombinedIndexInfos = async (
+  deprecations: DeprecationAPIResponse,
+  dataClient: IScopedClusterClient
+) => {
+  const indices = Object.keys(deprecations.index_settings).reduce(
+    (indexDeprecations, indexName) => {
+      return indexDeprecations.concat(
+        deprecations.index_settings[indexName].map(
+          (d) =>
+            ({
+              ...d,
+              index: indexName,
+              correctiveAction: getCorrectiveAction(d.message),
+            } as EnrichedDeprecationInfo)
+        )
+      );
+    },
+    [] as EnrichedDeprecationInfo[]
+  );
+
+  const indexNames = indices.map(({ index }) => index!);
+
+  // If we have found deprecation information for index/indices
+  // check whether the index is open or closed.
+  if (indexNames.length) {
+    const indexStates = await esIndicesStateCheck(dataClient.asCurrentUser, indexNames);
+
+    indices.forEach((indexData) => {
+      if (indexData.correctiveAction?.type === 'reindex') {
+        indexData.correctiveAction.blockerForReindexing =
+          indexStates[indexData.index!] === 'closed' ? 'index-closed' : undefined;
+      }
+    });
+  }
+  return indices as EnrichedDeprecationInfo[];
+};
+
+const getClusterDeprecations = (deprecations: DeprecationAPIResponse) => {
+  const combinedDeprecations = deprecations.cluster_settings
     .concat(deprecations.ml_settings)
     .concat(deprecations.node_settings);
 
-  if (isCloudEnabled) {
-    // In Cloud, this is changed at upgrade time. Filter it out to improve upgrade UX.
-    return combined.filter((d) => d.message !== 'Security realm settings structure changed');
-  } else {
-    return combined;
-  }
+  return combinedDeprecations.map((deprecation) => {
+    return {
+      ...deprecation,
+      correctiveAction: getCorrectiveAction(deprecation.message),
+    };
+  }) as EnrichedDeprecationInfo[];
 };
 
-const getIndexSettingDeprecations = (message: string) => {
-  const indexDeprecation = Object.values(indexSettingDeprecations).find(
+const getCorrectiveAction = (message: string) => {
+  const indexSettingDeprecation = Object.values(indexSettingDeprecations).find(
     ({ deprecationMessage }) => deprecationMessage === message
   );
+  const requiresReindexAction = /Index created before/.test(message);
+  const requiresIndexSettingsAction = Boolean(indexSettingDeprecation);
+  const requiresMlAction = /model snapshot/.test(message);
+
+  if (requiresReindexAction) {
+    return {
+      type: 'reindex',
+    };
+  }
+
+  if (requiresIndexSettingsAction) {
+    return {
+      type: 'indexSetting',
+      deprecatedSettings: indexSettingDeprecation!.settings,
+    };
+  }
+
+  if (requiresMlAction) {
+    // This logic is brittle, as we are expecting the message to be in a particular format to extract the snapshot ID and job ID
+    // Implementing https://github.com/elastic/elasticsearch/issues/73089 in ES should address this concern
+    const regex = /(?<=\[).*?(?=\])/g;
+    const matches = message.match(regex);
+
+    if (matches?.length === 2) {
+      return {
+        type: 'mlSnapshot',
+        snapshotId: matches[0],
+        jobId: matches[1],
+      };
+    }
+  }
 
-  return indexDeprecation?.settings || [];
+  return undefined;
 };
diff --git a/x-pack/plugins/upgrade_assistant/server/plugin.ts b/x-pack/plugins/upgrade_assistant/server/plugin.ts
index ae5975c2bc8a7..50b7330b4d466 100644
--- a/x-pack/plugins/upgrade_assistant/server/plugin.ts
+++ b/x-pack/plugins/upgrade_assistant/server/plugin.ts
@@ -17,7 +17,6 @@ import {
   SavedObjectsServiceStart,
 } from '../../../../src/core/server';
 
-import { CloudSetup } from '../../cloud/server';
 import { PluginSetupContract as FeaturesPluginSetup } from '../../features/server';
 import { LicensingPluginSetup } from '../../licensing/server';
 
@@ -25,12 +24,13 @@ import { CredentialStore, credentialStoreFactory } from './lib/reindexing/creden
 import { ReindexWorker } from './lib/reindexing';
 import { registerUpgradeAssistantUsageCollector } from './lib/telemetry';
 import { versionService } from './lib/version';
-import { registerClusterCheckupRoutes } from './routes/cluster_checkup';
-import { registerDeprecationLoggingRoutes } from './routes/deprecation_logging';
-import { registerReindexIndicesRoutes, createReindexWorker } from './routes/reindex_indices';
-import { registerTelemetryRoutes } from './routes/telemetry';
-import { registerUpdateSettingsRoute } from './routes/update_index_settings';
-import { telemetrySavedObjectType, reindexOperationSavedObjectType } from './saved_object_types';
+import { createReindexWorker } from './routes/reindex_indices';
+import { registerRoutes } from './routes/register_routes';
+import {
+  telemetrySavedObjectType,
+  reindexOperationSavedObjectType,
+  mlSavedObjectType,
+} from './saved_object_types';
 
 import { RouteDependencies } from './types';
 
@@ -38,7 +38,6 @@ interface PluginsSetup {
   usageCollection: UsageCollectionSetup;
   licensing: LicensingPluginSetup;
   features: FeaturesPluginSetup;
-  cloud?: CloudSetup;
 }
 
 export class UpgradeAssistantServerPlugin implements Plugin {
@@ -68,12 +67,13 @@ export class UpgradeAssistantServerPlugin implements Plugin {
 
   setup(
     { http, getStartServices, capabilities, savedObjects }: CoreSetup,
-    { usageCollection, cloud, features, licensing }: PluginsSetup
+    { usageCollection, features, licensing }: PluginsSetup
   ) {
     this.licensing = licensing;
 
     savedObjects.registerType(reindexOperationSavedObjectType);
     savedObjects.registerType(telemetrySavedObjectType);
+    savedObjects.registerType(mlSavedObjectType);
 
     features.registerElasticsearchFeature({
       id: 'upgrade_assistant',
@@ -91,7 +91,6 @@ export class UpgradeAssistantServerPlugin implements Plugin {
     const router = http.createRouter();
 
     const dependencies: RouteDependencies = {
-      cloud,
       router,
       credentialStore: this.credentialStore,
       log: this.logger,
@@ -107,12 +106,7 @@ export class UpgradeAssistantServerPlugin implements Plugin {
     // Initialize version service with current kibana version
     versionService.setup(this.kibanaVersion);
 
-    registerClusterCheckupRoutes(dependencies);
-    registerDeprecationLoggingRoutes(dependencies);
-    registerReindexIndicesRoutes(dependencies, this.getWorker.bind(this));
-    // Bootstrap the needed routes and the collector for the telemetry
-    registerTelemetryRoutes(dependencies);
-    registerUpdateSettingsRoute(dependencies);
+    registerRoutes(dependencies, this.getWorker.bind(this));
 
     if (usageCollection) {
       getStartServices().then(([{ savedObjects: savedObjectsService, elasticsearch }]) => {
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts b/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts
index 3aabae87c06b1..09da52e4b6ffd 100644
--- a/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts
+++ b/x-pack/plugins/upgrade_assistant/server/routes/__mocks__/routes.mock.ts
@@ -49,6 +49,7 @@ export const createMockRouter = () => {
     post: assign('post'),
     put: assign('put'),
     patch: assign('patch'),
+    delete: assign('delete'),
   };
 };
 
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts
index a5da4741b10eb..934fdb1c4eb37 100644
--- a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts
+++ b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.test.ts
@@ -32,9 +32,6 @@ describe('cluster checkup API', () => {
   beforeEach(() => {
     mockRouter = createMockRouter();
     routeDependencies = {
-      cloud: {
-        isCloudEnabled: true,
-      },
       router: mockRouter,
     };
     registerClusterCheckupRoutes(routeDependencies);
@@ -44,24 +41,6 @@ describe('cluster checkup API', () => {
     jest.resetAllMocks();
   });
 
-  describe('with cloud enabled', () => {
-    it('is provided to getUpgradeAssistantStatus', async () => {
-      const spy = jest.spyOn(MigrationApis, 'getUpgradeAssistantStatus');
-
-      MigrationApis.getUpgradeAssistantStatus.mockResolvedValue({
-        cluster: [],
-        indices: [],
-        nodes: [],
-      });
-
-      await routeDependencies.router.getHandler({
-        method: 'get',
-        pathPattern: '/api/upgrade_assistant/status',
-      })(routeHandlerContextMock, createRequestMock(), kibanaResponseFactory);
-      expect(spy.mock.calls[0][1]).toBe(true);
-    });
-  });
-
   describe('GET /api/upgrade_assistant/reindex/{indexName}.json', () => {
     it('returns state', async () => {
       MigrationApis.getUpgradeAssistantStatus.mockResolvedValue({
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts
index fe5b9baef6c8d..31026be55fa30 100644
--- a/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts
+++ b/x-pack/plugins/upgrade_assistant/server/routes/cluster_checkup.ts
@@ -12,9 +12,7 @@ import { RouteDependencies } from '../types';
 import { reindexActionsFactory } from '../lib/reindexing/reindex_actions';
 import { reindexServiceFactory } from '../lib/reindexing';
 
-export function registerClusterCheckupRoutes({ cloud, router, licensing, log }: RouteDependencies) {
-  const isCloudEnabled = Boolean(cloud?.isCloudEnabled);
-
+export function registerClusterCheckupRoutes({ router, licensing, log }: RouteDependencies) {
   router.get(
     {
       path: `${API_BASE_PATH}/status`,
@@ -32,7 +30,7 @@ export function registerClusterCheckupRoutes({ cloud, router, licensing, log }:
         response
       ) => {
         try {
-          const status = await getUpgradeAssistantStatus(client, isCloudEnabled);
+          const status = await getUpgradeAssistantStatus(client);
 
           const asCurrentUser = client.asCurrentUser;
           const reindexActions = reindexActionsFactory(savedObjectsClient, asCurrentUser);
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts
new file mode 100644
index 0000000000000..741f704adac90
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.test.ts
@@ -0,0 +1,365 @@
+/*
+ * 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 { kibanaResponseFactory, RequestHandler } from 'src/core/server';
+import { createMockRouter, MockRouter, routeHandlerContextMock } from './__mocks__/routes.mock';
+import { createRequestMock } from './__mocks__/request.mock';
+import { registerMlSnapshotRoutes } from './ml_snapshots';
+
+jest.mock('../lib/es_version_precheck', () => ({
+  versionCheckHandlerWrapper: <P, Q, B>(handler: RequestHandler<P, Q, B>) => handler,
+}));
+
+const JOB_ID = 'job_id';
+const SNAPSHOT_ID = 'snapshot_id';
+const NODE_ID = 'node_id';
+
+describe('ML snapshots APIs', () => {
+  let mockRouter: MockRouter;
+  let routeDependencies: any;
+
+  beforeEach(() => {
+    mockRouter = createMockRouter();
+    routeDependencies = {
+      router: mockRouter,
+    };
+    registerMlSnapshotRoutes(routeDependencies);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('POST /api/upgrade_assistant/ml_snapshots', () => {
+    it('returns 200 status and in_progress status', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .upgradeJobSnapshot as jest.Mock).mockResolvedValue({
+        body: {
+          node: NODE_ID,
+          completed: false,
+        },
+      });
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'post',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          body: {
+            snapshotId: SNAPSHOT_ID,
+            jobId: JOB_ID,
+          },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        jobId: JOB_ID,
+        nodeId: NODE_ID,
+        snapshotId: SNAPSHOT_ID,
+        status: 'in_progress',
+      });
+    });
+
+    it('returns 200 status and complete status', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .upgradeJobSnapshot as jest.Mock).mockResolvedValue({
+        body: {
+          node: NODE_ID,
+          completed: true,
+        },
+      });
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'post',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          body: {
+            snapshotId: SNAPSHOT_ID,
+            jobId: JOB_ID,
+          },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        jobId: JOB_ID,
+        nodeId: NODE_ID,
+        snapshotId: SNAPSHOT_ID,
+        status: 'complete',
+      });
+    });
+
+    it('returns an error if it throws', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .upgradeJobSnapshot as jest.Mock).mockRejectedValue(new Error('scary error!'));
+      await expect(
+        routeDependencies.router.getHandler({
+          method: 'post',
+          pathPattern: '/api/upgrade_assistant/ml_snapshots',
+        })(
+          routeHandlerContextMock,
+          createRequestMock({
+            body: {
+              snapshotId: SNAPSHOT_ID,
+              jobId: JOB_ID,
+            },
+          }),
+          kibanaResponseFactory
+        )
+      ).rejects.toThrow('scary error!');
+    });
+  });
+
+  describe('DELETE /api/upgrade_assistant/ml_snapshots/:jobId/:snapshotId', () => {
+    it('returns 200 status', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .deleteModelSnapshot as jest.Mock).mockResolvedValue({
+        body: { acknowledged: true },
+      });
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'delete',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          params: { snapshotId: 'snapshot_id1', jobId: 'job_id1' },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        acknowledged: true,
+      });
+    });
+
+    it('returns an error if it throws', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .deleteModelSnapshot as jest.Mock).mockRejectedValue(new Error('scary error!'));
+      await expect(
+        routeDependencies.router.getHandler({
+          method: 'delete',
+          pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}',
+        })(
+          routeHandlerContextMock,
+          createRequestMock({
+            params: { snapshotId: 'snapshot_id1', jobId: 'job_id1' },
+          }),
+          kibanaResponseFactory
+        )
+      ).rejects.toThrow('scary error!');
+    });
+  });
+
+  describe('GET /api/upgrade_assistant/ml_snapshots/:jobId/:snapshotId', () => {
+    it('returns "idle" status if saved object does not exist', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .getModelSnapshots as jest.Mock).mockResolvedValue({
+        body: {
+          count: 1,
+          model_snapshots: [
+            {
+              job_id: JOB_ID,
+              min_version: '6.4.0',
+              timestamp: 1575402237000,
+              description: 'State persisted due to job close at 2019-12-03T19:43:57+0000',
+              snapshot_id: SNAPSHOT_ID,
+              snapshot_doc_count: 1,
+              model_size_stats: {},
+              latest_record_time_stamp: 1576971072000,
+              latest_result_time_stamp: 1576965600000,
+              retain: false,
+            },
+          ],
+        },
+      });
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'get',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          params: {
+            snapshotId: SNAPSHOT_ID,
+            jobId: JOB_ID,
+          },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        jobId: JOB_ID,
+        nodeId: undefined,
+        snapshotId: SNAPSHOT_ID,
+        status: 'idle',
+      });
+    });
+
+    it('returns "in_progress" status if snapshot upgrade is in progress', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .getModelSnapshots as jest.Mock).mockResolvedValue({
+        body: {
+          count: 1,
+          model_snapshots: [
+            {
+              job_id: JOB_ID,
+              min_version: '6.4.0',
+              timestamp: 1575402237000,
+              description: 'State persisted due to job close at 2019-12-03T19:43:57+0000',
+              snapshot_id: SNAPSHOT_ID,
+              snapshot_doc_count: 1,
+              model_size_stats: {},
+              latest_record_time_stamp: 1576971072000,
+              latest_result_time_stamp: 1576965600000,
+              retain: false,
+            },
+          ],
+        },
+      });
+
+      (routeHandlerContextMock.core.savedObjects.client.find as jest.Mock).mockResolvedValue({
+        total: 1,
+        saved_objects: [
+          {
+            attributes: {
+              nodeId: NODE_ID,
+              jobId: JOB_ID,
+              snapshotId: SNAPSHOT_ID,
+            },
+          },
+        ],
+      });
+
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.tasks
+        .list as jest.Mock).mockResolvedValue({
+        body: {
+          nodes: {
+            [NODE_ID]: {
+              tasks: {
+                [`${NODE_ID}:12345`]: {
+                  description: `job-snapshot-upgrade-${JOB_ID}-${SNAPSHOT_ID}`,
+                },
+              },
+            },
+          },
+        },
+      });
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'get',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          params: {
+            snapshotId: SNAPSHOT_ID,
+            jobId: JOB_ID,
+          },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        jobId: JOB_ID,
+        nodeId: NODE_ID,
+        snapshotId: SNAPSHOT_ID,
+        status: 'in_progress',
+      });
+    });
+
+    it('returns "complete" status if snapshot upgrade has completed', async () => {
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.ml
+        .getModelSnapshots as jest.Mock).mockResolvedValue({
+        body: {
+          count: 1,
+          model_snapshots: [
+            {
+              job_id: JOB_ID,
+              min_version: '6.4.0',
+              timestamp: 1575402237000,
+              description: 'State persisted due to job close at 2019-12-03T19:43:57+0000',
+              snapshot_id: SNAPSHOT_ID,
+              snapshot_doc_count: 1,
+              model_size_stats: {},
+              latest_record_time_stamp: 1576971072000,
+              latest_result_time_stamp: 1576965600000,
+              retain: false,
+            },
+          ],
+        },
+      });
+
+      (routeHandlerContextMock.core.savedObjects.client.find as jest.Mock).mockResolvedValue({
+        total: 1,
+        saved_objects: [
+          {
+            attributes: {
+              nodeId: NODE_ID,
+              jobId: JOB_ID,
+              snapshotId: SNAPSHOT_ID,
+            },
+          },
+        ],
+      });
+
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.tasks
+        .list as jest.Mock).mockResolvedValue({
+        body: {
+          nodes: {
+            [NODE_ID]: {
+              tasks: {},
+            },
+          },
+        },
+      });
+
+      (routeHandlerContextMock.core.elasticsearch.client.asCurrentUser.migration
+        .deprecations as jest.Mock).mockResolvedValue({
+        body: {
+          cluster_settings: [],
+          ml_settings: [],
+          node_settings: [],
+          index_settings: {},
+        },
+      });
+
+      (routeHandlerContextMock.core.savedObjects.client.delete as jest.Mock).mockResolvedValue({});
+
+      const resp = await routeDependencies.router.getHandler({
+        method: 'get',
+        pathPattern: '/api/upgrade_assistant/ml_snapshots/{jobId}/{snapshotId}',
+      })(
+        routeHandlerContextMock,
+        createRequestMock({
+          params: {
+            snapshotId: SNAPSHOT_ID,
+            jobId: JOB_ID,
+          },
+        }),
+        kibanaResponseFactory
+      );
+
+      expect(resp.status).toEqual(200);
+      expect(resp.payload).toEqual({
+        jobId: JOB_ID,
+        nodeId: NODE_ID,
+        snapshotId: SNAPSHOT_ID,
+        status: 'complete',
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts
new file mode 100644
index 0000000000000..80f5f2eb60e09
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/server/routes/ml_snapshots.ts
@@ -0,0 +1,348 @@
+/*
+ * 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 { ResponseError } from '@elastic/elasticsearch/lib/errors';
+import { schema } from '@kbn/config-schema';
+import { IScopedClusterClient, SavedObjectsClientContract } from 'kibana/server';
+import { API_BASE_PATH } from '../../common/constants';
+import { MlOperation, ML_UPGRADE_OP_TYPE } from '../../common/types';
+import { versionCheckHandlerWrapper } from '../lib/es_version_precheck';
+import { handleEsError } from '../shared_imports';
+import { RouteDependencies } from '../types';
+
+const findMlOperation = async (
+  savedObjectsClient: SavedObjectsClientContract,
+  snapshotId: string
+) => {
+  return savedObjectsClient.find<MlOperation>({
+    type: ML_UPGRADE_OP_TYPE,
+    search: `"${snapshotId}"`,
+    searchFields: ['snapshotId'],
+  });
+};
+
+const createMlOperation = async (
+  savedObjectsClient: SavedObjectsClientContract,
+  attributes: MlOperation
+) => {
+  const foundSnapshots = await findMlOperation(savedObjectsClient, attributes.snapshotId);
+
+  if (foundSnapshots?.total > 0) {
+    throw new Error(`A ML operation is already in progress for snapshot: ${attributes.snapshotId}`);
+  }
+
+  return savedObjectsClient.create<MlOperation>(ML_UPGRADE_OP_TYPE, attributes);
+};
+
+const deleteMlOperation = (savedObjectsClient: SavedObjectsClientContract, id: string) => {
+  return savedObjectsClient.delete(ML_UPGRADE_OP_TYPE, id);
+};
+
+/*
+ * The tasks API can only tell us if the snapshot upgrade is in progress.
+ * We cannot rely on it to determine if a snapshot was upgraded successfully.
+ * If the task does not exist, it can mean one of two things:
+ *  1. The snapshot was upgraded successfully.
+ *  2. There was a failure upgrading the snapshot.
+ * In order to verify it was successful, we need to recheck the deprecation info API
+ * and verify the deprecation no longer exists. If it still exists, we assume there was a failure.
+ */
+const verifySnapshotUpgrade = async (
+  esClient: IScopedClusterClient,
+  snapshot: { snapshotId: string; jobId: string }
+): Promise<{
+  isSuccessful: boolean;
+  error?: ResponseError;
+}> => {
+  const { snapshotId, jobId } = snapshot;
+
+  try {
+    const { body: deprecations } = await esClient.asCurrentUser.migration.deprecations();
+
+    const mlSnapshotDeprecations = deprecations.ml_settings.filter((deprecation) => {
+      return /model snapshot/.test(deprecation.message);
+    });
+
+    // If there are no ML deprecations, we assume the deprecation was resolved successfully
+    if (typeof mlSnapshotDeprecations === 'undefined' || mlSnapshotDeprecations.length === 0) {
+      return {
+        isSuccessful: true,
+      };
+    }
+
+    const isSuccessful = Boolean(
+      mlSnapshotDeprecations.find((snapshotDeprecation) => {
+        const regex = /(?<=\[).*?(?=\])/g;
+        const matches = snapshotDeprecation.message.match(regex);
+
+        if (matches?.length === 2) {
+          // If there is no matching snapshot, we assume the deprecation was resolved successfully
+          return matches[0] === snapshotId && matches[1] === jobId ? false : true;
+        }
+
+        return false;
+      })
+    );
+
+    return {
+      isSuccessful,
+    };
+  } catch (e) {
+    return {
+      isSuccessful: false,
+      error: e,
+    };
+  }
+};
+
+export function registerMlSnapshotRoutes({ router }: RouteDependencies) {
+  // Upgrade ML model snapshot
+  router.post(
+    {
+      path: `${API_BASE_PATH}/ml_snapshots`,
+      validate: {
+        body: schema.object({
+          snapshotId: schema.string(),
+          jobId: schema.string(),
+        }),
+      },
+    },
+    versionCheckHandlerWrapper(
+      async (
+        {
+          core: {
+            savedObjects: { client: savedObjectsClient },
+            elasticsearch: { client: esClient },
+          },
+        },
+        request,
+        response
+      ) => {
+        try {
+          const { snapshotId, jobId } = request.body;
+
+          const { body } = await esClient.asCurrentUser.ml.upgradeJobSnapshot({
+            job_id: jobId,
+            snapshot_id: snapshotId,
+          });
+
+          const snapshotInfo: MlOperation = {
+            nodeId: body.node,
+            snapshotId,
+            jobId,
+          };
+
+          // Store snapshot in saved object if upgrade not complete
+          if (body.completed !== true) {
+            await createMlOperation(savedObjectsClient, snapshotInfo);
+          }
+
+          return response.ok({
+            body: {
+              ...snapshotInfo,
+              status: body.completed === true ? 'complete' : 'in_progress',
+            },
+          });
+        } catch (e) {
+          return handleEsError({ error: e, response });
+        }
+      }
+    )
+  );
+
+  // Get the status of the upgrade snapshot task
+  router.get(
+    {
+      path: `${API_BASE_PATH}/ml_snapshots/{jobId}/{snapshotId}`,
+      validate: {
+        params: schema.object({
+          snapshotId: schema.string(),
+          jobId: schema.string(),
+        }),
+      },
+    },
+    versionCheckHandlerWrapper(
+      async (
+        {
+          core: {
+            savedObjects: { client: savedObjectsClient },
+            elasticsearch: { client: esClient },
+          },
+        },
+        request,
+        response
+      ) => {
+        try {
+          const { snapshotId, jobId } = request.params;
+
+          // Verify snapshot exists
+          await esClient.asCurrentUser.ml.getModelSnapshots({
+            job_id: jobId,
+            snapshot_id: snapshotId,
+          });
+
+          const foundSnapshots = await findMlOperation(savedObjectsClient, snapshotId);
+
+          // If snapshot is *not* found in SO, assume there has not been an upgrade operation started
+          if (typeof foundSnapshots === 'undefined' || foundSnapshots.total === 0) {
+            return response.ok({
+              body: {
+                snapshotId,
+                jobId,
+                nodeId: undefined,
+                status: 'idle',
+              },
+            });
+          }
+
+          const snapshotOp = foundSnapshots.saved_objects[0];
+          const { nodeId } = snapshotOp.attributes;
+
+          // Now that we have the node ID, check the upgrade snapshot task progress
+          const { body: taskResponse } = await esClient.asCurrentUser.tasks.list({
+            nodes: [nodeId],
+            actions: 'xpack/ml/job/snapshot/upgrade',
+            detailed: true, // necessary in order to filter if there are more than 1 snapshot upgrades in progress
+          });
+
+          const nodeTaskInfo = taskResponse?.nodes && taskResponse!.nodes[nodeId];
+          const snapshotInfo: MlOperation = {
+            ...snapshotOp.attributes,
+          };
+
+          if (nodeTaskInfo) {
+            // Find the correct snapshot task ID based on the task description
+            const snapshotTaskId = Object.keys(nodeTaskInfo.tasks).find((task) => {
+              // The description is in the format of "job-snapshot-upgrade-<job_id>-<snapshot_id>"
+              const taskDescription = nodeTaskInfo.tasks[task].description;
+              const taskSnapshotAndJobIds = taskDescription!.replace('job-snapshot-upgrade-', '');
+              const taskSnapshotAndJobIdParts = taskSnapshotAndJobIds.split('-');
+              const taskSnapshotId =
+                taskSnapshotAndJobIdParts[taskSnapshotAndJobIdParts.length - 1];
+              const taskJobId = taskSnapshotAndJobIdParts.slice(0, 1).join('-');
+
+              return taskSnapshotId === snapshotId && taskJobId === jobId;
+            });
+
+            // If the snapshot task exists, assume the upgrade is in progress
+            if (snapshotTaskId && nodeTaskInfo.tasks[snapshotTaskId]) {
+              return response.ok({
+                body: {
+                  ...snapshotInfo,
+                  status: 'in_progress',
+                },
+              });
+            } else {
+              // The task ID was not found; verify the deprecation was resolved
+              const {
+                isSuccessful: isSnapshotDeprecationResolved,
+                error: upgradeSnapshotError,
+              } = await verifySnapshotUpgrade(esClient, {
+                snapshotId,
+                jobId,
+              });
+
+              // Delete the SO; if it's complete, no need to store it anymore. If there's an error, this will give the user a chance to retry
+              await deleteMlOperation(savedObjectsClient, snapshotOp.id);
+
+              if (isSnapshotDeprecationResolved) {
+                return response.ok({
+                  body: {
+                    ...snapshotInfo,
+                    status: 'complete',
+                  },
+                });
+              }
+
+              return response.customError({
+                statusCode: upgradeSnapshotError ? upgradeSnapshotError.statusCode : 500,
+                body: {
+                  message:
+                    upgradeSnapshotError?.body?.error?.reason ||
+                    'There was an error upgrading your snapshot. Check the Elasticsearch logs for more details.',
+                },
+              });
+            }
+          } else {
+            // No tasks found; verify the deprecation was resolved
+            const {
+              isSuccessful: isSnapshotDeprecationResolved,
+              error: upgradeSnapshotError,
+            } = await verifySnapshotUpgrade(esClient, {
+              snapshotId,
+              jobId,
+            });
+
+            // Delete the SO; if it's complete, no need to store it anymore. If there's an error, this will give the user a chance to retry
+            await deleteMlOperation(savedObjectsClient, snapshotOp.id);
+
+            if (isSnapshotDeprecationResolved) {
+              return response.ok({
+                body: {
+                  ...snapshotInfo,
+                  status: 'complete',
+                },
+              });
+            }
+
+            return response.customError({
+              statusCode: upgradeSnapshotError ? upgradeSnapshotError.statusCode : 500,
+              body: {
+                message:
+                  upgradeSnapshotError?.body?.error?.reason ||
+                  'There was an error upgrading your snapshot. Check the Elasticsearch logs for more details.',
+              },
+            });
+          }
+        } catch (e) {
+          return handleEsError({ error: e, response });
+        }
+      }
+    )
+  );
+
+  // Delete ML model snapshot
+  router.delete(
+    {
+      path: `${API_BASE_PATH}/ml_snapshots/{jobId}/{snapshotId}`,
+      validate: {
+        params: schema.object({
+          snapshotId: schema.string(),
+          jobId: schema.string(),
+        }),
+      },
+    },
+    versionCheckHandlerWrapper(
+      async (
+        {
+          core: {
+            elasticsearch: { client },
+          },
+        },
+        request,
+        response
+      ) => {
+        try {
+          const { snapshotId, jobId } = request.params;
+
+          const {
+            body: deleteSnapshotResponse,
+          } = await client.asCurrentUser.ml.deleteModelSnapshot({
+            job_id: jobId,
+            snapshot_id: snapshotId,
+          });
+
+          return response.ok({
+            body: deleteSnapshotResponse,
+          });
+        } catch (e) {
+          return handleEsError({ error: e, response });
+        }
+      }
+    )
+  );
+}
diff --git a/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts b/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts
new file mode 100644
index 0000000000000..50cb9257462b9
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/server/routes/register_routes.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 { RouteDependencies } from '../types';
+
+import { registerClusterCheckupRoutes } from './cluster_checkup';
+import { registerDeprecationLoggingRoutes } from './deprecation_logging';
+import { registerReindexIndicesRoutes } from './reindex_indices';
+import { registerTelemetryRoutes } from './telemetry';
+import { registerUpdateSettingsRoute } from './update_index_settings';
+import { registerMlSnapshotRoutes } from './ml_snapshots';
+import { ReindexWorker } from '../lib/reindexing';
+
+export function registerRoutes(dependencies: RouteDependencies, getWorker: () => ReindexWorker) {
+  registerClusterCheckupRoutes(dependencies);
+  registerDeprecationLoggingRoutes(dependencies);
+  registerReindexIndicesRoutes(dependencies, getWorker);
+  registerTelemetryRoutes(dependencies);
+  registerUpdateSettingsRoute(dependencies);
+  registerMlSnapshotRoutes(dependencies);
+}
diff --git a/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts b/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts
index 91779bd4224b8..e394cac5100f9 100644
--- a/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts
+++ b/x-pack/plugins/upgrade_assistant/server/saved_object_types/index.ts
@@ -7,3 +7,4 @@
 
 export { reindexOperationSavedObjectType } from './reindex_operation_saved_object_type';
 export { telemetrySavedObjectType } from './telemetry_saved_object_type';
+export { mlSavedObjectType } from './ml_upgrade_operation_saved_object_type';
diff --git a/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts b/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts
new file mode 100644
index 0000000000000..6dc70fab1203f
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/server/saved_object_types/ml_upgrade_operation_saved_object_type.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 { SavedObjectsType } from 'src/core/server';
+
+import { ML_UPGRADE_OP_TYPE } from '../../common/types';
+
+export const mlSavedObjectType: SavedObjectsType = {
+  name: ML_UPGRADE_OP_TYPE,
+  hidden: false,
+  namespaceType: 'agnostic',
+  mappings: {
+    properties: {
+      nodeId: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      snapshotId: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      jobId: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+      status: {
+        type: 'text',
+        fields: {
+          keyword: {
+            type: 'keyword',
+            ignore_above: 256,
+          },
+        },
+      },
+    },
+  },
+};
diff --git a/x-pack/plugins/upgrade_assistant/server/shared_imports.ts b/x-pack/plugins/upgrade_assistant/server/shared_imports.ts
new file mode 100644
index 0000000000000..7f55d189457c7
--- /dev/null
+++ b/x-pack/plugins/upgrade_assistant/server/shared_imports.ts
@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export { handleEsError } from '../../../../src/plugins/es_ui_shared/server';
diff --git a/x-pack/plugins/upgrade_assistant/server/types.ts b/x-pack/plugins/upgrade_assistant/server/types.ts
index 80c60e3f310bc..b25b73070e4cf 100644
--- a/x-pack/plugins/upgrade_assistant/server/types.ts
+++ b/x-pack/plugins/upgrade_assistant/server/types.ts
@@ -6,7 +6,6 @@
  */
 
 import { IRouter, Logger, SavedObjectsServiceStart } from 'src/core/server';
-import { CloudSetup } from '../../cloud/server';
 import { CredentialStore } from './lib/reindexing/credential_store';
 import { LicensingPluginSetup } from '../../licensing/server';
 
@@ -16,5 +15,4 @@ export interface RouteDependencies {
   log: Logger;
   getSavedObjectsService: () => SavedObjectsServiceStart;
   licensing: LicensingPluginSetup;
-  cloud?: CloudSetup;
 }
diff --git a/x-pack/plugins/upgrade_assistant/tsconfig.json b/x-pack/plugins/upgrade_assistant/tsconfig.json
index 6303b06c0d899..750bea75c6656 100644
--- a/x-pack/plugins/upgrade_assistant/tsconfig.json
+++ b/x-pack/plugins/upgrade_assistant/tsconfig.json
@@ -20,8 +20,8 @@
     { "path": "../../../src/core/tsconfig.json" },
     { "path": "../../../src/plugins/management/tsconfig.json" },
     { "path": "../../../src/plugins/usage_collection/tsconfig.json" },
-    { "path": "../cloud/tsconfig.json" },
     { "path": "../features/tsconfig.json" },
     { "path": "../licensing/tsconfig.json" },
+    { "path": "../../../src/plugins/es_ui_shared/tsconfig.json" },
   ]
 }
diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap b/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap
deleted file mode 100644
index 65b6d7cc39e55..0000000000000
--- a/x-pack/plugins/uptime/public/components/common/higher_order/__snapshots__/responsive_wrapper.test.tsx.snap
+++ /dev/null
@@ -1,221 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResponsiveWrapper HOC is not responsive when prop is false 1`] = `
-<EuiPanel
-  paddingSize="m"
->
-  <Component
-    intl={
-      Object {
-        "defaultFormats": Object {},
-        "defaultLocale": "en",
-        "formatDate": [Function],
-        "formatHTMLMessage": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatPlural": [Function],
-        "formatRelative": [Function],
-        "formatTime": [Function],
-        "formats": Object {
-          "date": Object {
-            "full": Object {
-              "day": "numeric",
-              "month": "long",
-              "weekday": "long",
-              "year": "numeric",
-            },
-            "long": Object {
-              "day": "numeric",
-              "month": "long",
-              "year": "numeric",
-            },
-            "medium": Object {
-              "day": "numeric",
-              "month": "short",
-              "year": "numeric",
-            },
-            "short": Object {
-              "day": "numeric",
-              "month": "numeric",
-              "year": "2-digit",
-            },
-          },
-          "number": Object {
-            "currency": Object {
-              "style": "currency",
-            },
-            "percent": Object {
-              "style": "percent",
-            },
-          },
-          "relative": Object {
-            "days": Object {
-              "units": "day",
-            },
-            "hours": Object {
-              "units": "hour",
-            },
-            "minutes": Object {
-              "units": "minute",
-            },
-            "months": Object {
-              "units": "month",
-            },
-            "seconds": Object {
-              "units": "second",
-            },
-            "years": Object {
-              "units": "year",
-            },
-          },
-          "time": Object {
-            "full": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "long": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "medium": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-            },
-            "short": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-            },
-          },
-        },
-        "formatters": Object {
-          "getDateTimeFormat": [Function],
-          "getMessageFormat": [Function],
-          "getNumberFormat": [Function],
-          "getPluralFormat": [Function],
-          "getRelativeFormat": [Function],
-        },
-        "locale": "en",
-        "messages": Object {},
-        "now": [Function],
-        "onError": [Function],
-        "textComponent": Symbol(react.fragment),
-        "timeZone": null,
-      }
-    }
-  />
-</EuiPanel>
-`;
-
-exports[`ResponsiveWrapper HOC renders a responsive wrapper 1`] = `
-<styled.div>
-  <Component
-    intl={
-      Object {
-        "defaultFormats": Object {},
-        "defaultLocale": "en",
-        "formatDate": [Function],
-        "formatHTMLMessage": [Function],
-        "formatMessage": [Function],
-        "formatNumber": [Function],
-        "formatPlural": [Function],
-        "formatRelative": [Function],
-        "formatTime": [Function],
-        "formats": Object {
-          "date": Object {
-            "full": Object {
-              "day": "numeric",
-              "month": "long",
-              "weekday": "long",
-              "year": "numeric",
-            },
-            "long": Object {
-              "day": "numeric",
-              "month": "long",
-              "year": "numeric",
-            },
-            "medium": Object {
-              "day": "numeric",
-              "month": "short",
-              "year": "numeric",
-            },
-            "short": Object {
-              "day": "numeric",
-              "month": "numeric",
-              "year": "2-digit",
-            },
-          },
-          "number": Object {
-            "currency": Object {
-              "style": "currency",
-            },
-            "percent": Object {
-              "style": "percent",
-            },
-          },
-          "relative": Object {
-            "days": Object {
-              "units": "day",
-            },
-            "hours": Object {
-              "units": "hour",
-            },
-            "minutes": Object {
-              "units": "minute",
-            },
-            "months": Object {
-              "units": "month",
-            },
-            "seconds": Object {
-              "units": "second",
-            },
-            "years": Object {
-              "units": "year",
-            },
-          },
-          "time": Object {
-            "full": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "long": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-              "timeZoneName": "short",
-            },
-            "medium": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-              "second": "numeric",
-            },
-            "short": Object {
-              "hour": "numeric",
-              "minute": "numeric",
-            },
-          },
-        },
-        "formatters": Object {
-          "getDateTimeFormat": [Function],
-          "getMessageFormat": [Function],
-          "getNumberFormat": [Function],
-          "getPluralFormat": [Function],
-          "getRelativeFormat": [Function],
-        },
-        "locale": "en",
-        "messages": Object {},
-        "now": [Function],
-        "onError": [Function],
-        "textComponent": Symbol(react.fragment),
-        "timeZone": null,
-      }
-    }
-  />
-</styled.div>
-`;
diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx
index 5a3dca171b206..db254fcb56081 100644
--- a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx
+++ b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.test.tsx
@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import { shallowWithIntl } from '@kbn/test/jest';
+import { render } from '../../../lib/helper/rtl_helpers';
 import { withResponsiveWrapper } from './responsive_wrapper';
 
 interface Prop {
@@ -20,12 +20,12 @@ describe('ResponsiveWrapper HOC', () => {
   });
 
   it('renders a responsive wrapper', () => {
-    const component = shallowWithIntl(<WrappedByHOC isResponsive={true} />);
-    expect(component).toMatchSnapshot();
+    const { getByTestId } = render(<WrappedByHOC isResponsive={true} />);
+    expect(getByTestId('uptimeWithResponsiveWrapper--wrapper')).toBeInTheDocument();
   });
 
   it('is not responsive when prop is false', () => {
-    const component = shallowWithIntl(<WrappedByHOC isResponsive={false} />);
-    expect(component).toMatchSnapshot();
+    const { getByTestId } = render(<WrappedByHOC isResponsive={false} />);
+    expect(getByTestId('uptimeWithResponsiveWrapper--panel')).toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx
index 6802682db5f56..0e33cc3e38f03 100644
--- a/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx
+++ b/x-pack/plugins/uptime/public/components/common/higher_order/responsive_wrapper.tsx
@@ -32,11 +32,11 @@ export const withResponsiveWrapper = <P extends {} & ResponsiveWrapperProps>(
   Component: FC<P>
 ): FC<ResponsiveWrapperProps & P> => ({ isResponsive, ...rest }: ResponsiveWrapperProps) =>
   isResponsive ? (
-    <ResponsiveWrapper>
+    <ResponsiveWrapper data-test-subj="uptimeWithResponsiveWrapper--wrapper">
       <Component {...(rest as P)} />
     </ResponsiveWrapper>
   ) : (
-    <EuiPanel paddingSize="m">
+    <EuiPanel paddingSize="m" hasBorder data-test-subj="uptimeWithResponsiveWrapper--panel">
       <Component {...(rest as P)} />
     </EuiPanel>
   );
diff --git a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
index 86602a064b9d4..9ce5a509bdd52 100644
--- a/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/monitor_duration/monitor_duration.tsx
@@ -34,7 +34,7 @@ export const MonitorDurationComponent = ({
   hasMLJob,
 }: DurationChartProps) => {
   return (
-    <EuiPanel paddingSize="m">
+    <EuiPanel paddingSize="m" hasBorder>
       <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
         <EuiFlexItem>
           <EuiTitle size="s">
diff --git a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx
index b9ad176b8ed76..06c7ab7bff843 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/ping_list/ping_list.tsx
@@ -251,7 +251,7 @@ export const PingList = () => {
   };
 
   return (
-    <EuiPanel>
+    <EuiPanel hasBorder>
       <PingListHeader />
       <EuiSpacer size="s" />
       <EuiBasicTable
diff --git a/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx
index 517bfbe594f08..5b20e83f0ec85 100644
--- a/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/status_details/status_details.tsx
@@ -49,7 +49,7 @@ export const MonitorStatusDetailsComponent = ({ monitorLocations }: MonitorStatu
   }, []);
 
   return (
-    <EuiPanel>
+    <EuiPanel hasBorder>
       <EuiFlexGroup gutterSize="l" wrap={true} responsive={true}>
         <EuiFlexItem grow={1}>
           <MonitorStatusBar />
diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx
index df8f5dff59dc2..610107f406306 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx
+++ b/x-pack/plugins/uptime/public/components/monitor/synthetics/step_detail/step_detail_container.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText, EuiLoadingSpinner } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiLoadingSpinner } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
@@ -104,7 +104,7 @@ export const StepDetailContainer: React.FC<Props> = ({ checkGroup, stepIndex })
           : [],
       }}
     >
-      <EuiPanel>
+      <>
         {(!journey || journey.loading) && (
           <EuiFlexGroup justifyContent="center">
             <EuiFlexItem grow={false}>
@@ -124,7 +124,7 @@ export const StepDetailContainer: React.FC<Props> = ({ checkGroup, stepIndex })
         {journey && activeStep && !journey.loading && (
           <WaterfallChartContainer checkGroup={checkGroup} stepIndex={stepIndex} />
         )}
-      </EuiPanel>
+      </>
     </PageTemplateComponent>
   );
 };
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap
deleted file mode 100644
index 45e40f71c0fde..0000000000000
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/__snapshots__/data_or_index_missing.test.tsx.snap
+++ /dev/null
@@ -1,92 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DataOrIndexMissing component renders headingMessage 1`] = `
-<EuiFlexGroup
-  data-test-subj="data-missing"
-  justifyContent="center"
->
-  <EuiFlexItem
-    grow={false}
-    style={
-      Object {
-        "flexBasis": 700,
-      }
-    }
-  >
-    <EuiSpacer
-      size="m"
-    />
-    <EuiPanel>
-      <EuiEmptyPrompt
-        actions={
-          <EuiFlexGroup>
-            <EuiFlexItem>
-              <EuiButton
-                color="primary"
-                fill={true}
-                href="/app/home#/tutorial/uptimeMonitors"
-              >
-                <FormattedMessage
-                  defaultMessage="View setup instructions"
-                  id="xpack.uptime.emptyState.viewSetupInstructions"
-                  values={Object {}}
-                />
-              </EuiButton>
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiButton
-                color="primary"
-                href="/app/uptime/settings"
-              >
-                <FormattedMessage
-                  defaultMessage="Update index pattern settings"
-                  id="xpack.uptime.emptyState.updateIndexPattern"
-                  values={Object {}}
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        }
-        body={
-          <React.Fragment>
-            <p>
-              <FormattedMessage
-                defaultMessage="Set up Heartbeat to start monitoring your services."
-                id="xpack.uptime.emptyState.configureHeartbeatToGetStartedMessage"
-                values={Object {}}
-              />
-            </p>
-            <p>
-              <FormattedMessage
-                defaultMessage="If Heartbeat is already set up, confirm it's sending data to Elasticsearch, then update the index pattern settings to match the Heartbeat config."
-                id="xpack.uptime.emptyState.configureHeartbeatIndexSettings"
-                values={Object {}}
-              />
-            </p>
-          </React.Fragment>
-        }
-        iconType="logoUptime"
-        title={
-          <EuiTitle
-            size="l"
-          >
-            <h3>
-              <FormattedMessage
-                defaultMessage="Uptime index {indexName} not found"
-                id="xpack.uptime.emptyState.noIndexTitle"
-                values={
-                  Object {
-                    "indexName": <em>
-                      heartbeat-*
-                    </em>,
-                  }
-                }
-              />
-            </h3>
-          </EuiTitle>
-        }
-      />
-    </EuiPanel>
-  </EuiFlexItem>
-</EuiFlexGroup>
-`;
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx
index c6898971a693e..caff055ce987c 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.test.tsx
@@ -6,8 +6,9 @@
  */
 
 import React from 'react';
-import { shallowWithIntl } from '@kbn/test/jest';
+import { screen } from '@testing-library/react';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { render } from '../../../lib/helper/rtl_helpers';
 import { DataOrIndexMissing } from './data_or_index_missing';
 
 describe('DataOrIndexMissing component', () => {
@@ -19,7 +20,7 @@ describe('DataOrIndexMissing component', () => {
         values={{ indexName: <em>heartbeat-*</em> }}
       />
     );
-    const component = shallowWithIntl(<DataOrIndexMissing headingMessage={headingMessage} />);
-    expect(component).toMatchSnapshot();
+    render(<DataOrIndexMissing headingMessage={headingMessage} />);
+    expect(screen.getByText(/heartbeat-*/)).toBeInTheDocument();
   });
 });
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx
index 7f9839ff94dbe..44e55de990bbf 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/data_or_index_missing.tsx
@@ -30,7 +30,7 @@ export const DataOrIndexMissing = ({ headingMessage, settings }: DataMissingProp
     <EuiFlexGroup justifyContent="center" data-test-subj="data-missing">
       <EuiFlexItem grow={false} style={{ flexBasis: 700 }}>
         <EuiSpacer size="m" />
-        <EuiPanel>
+        <EuiPanel hasBorder>
           <EuiEmptyPrompt
             iconType="logoUptime"
             title={
diff --git a/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state_error.tsx b/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state_error.tsx
index 41a5e1f6f7c00..3bf6c4f4bcb14 100644
--- a/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state_error.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/empty_state/empty_state_error.tsx
@@ -22,7 +22,7 @@ export const EmptyStateError = ({ errors }: EmptyStateErrorProps) => {
   return (
     <EuiFlexGroup justifyContent="center">
       <EuiFlexItem grow={false}>
-        <EuiPanel>
+        <EuiPanel hasBorder>
           <EuiEmptyPrompt
             iconType="securityApp"
             iconColor="subdued"
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap b/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap
index cfdf7afba4e85..8ecadcf19f4ef 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/__snapshots__/monitor_list.test.tsx.snap
@@ -845,7 +845,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
 }
 
 <div
-  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow"
+  class="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--hasBorder"
 >
   <div
     class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive c0"
diff --git a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
index 9a0054f77252e..0b707588acfb5 100644
--- a/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/monitor_list/monitor_list.tsx
@@ -173,7 +173,7 @@ export const MonitorListComponent: ({
   ];
 
   return (
-    <EuiPanel>
+    <EuiPanel hasBorder>
       <MonitorListHeader />
       <EuiSpacer size="m" />
       <EuiBasicTable
diff --git a/x-pack/plugins/uptime/public/components/overview/status_panel.tsx b/x-pack/plugins/uptime/public/components/overview/status_panel.tsx
index 6faa56bb358fb..45e0ecaf9fc46 100644
--- a/x-pack/plugins/uptime/public/components/overview/status_panel.tsx
+++ b/x-pack/plugins/uptime/public/components/overview/status_panel.tsx
@@ -13,7 +13,7 @@ import { SnapshotComponent } from './snapshot';
 const STATUS_CHART_HEIGHT = '160px';
 
 export const StatusPanel = ({}) => (
-  <EuiPanel>
+  <EuiPanel hasBorder>
     <EuiFlexGroup gutterSize="l">
       <EuiFlexItem grow={2}>
         <SnapshotComponent height={STATUS_CHART_HEIGHT} />
diff --git a/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx b/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx
index 47b89e82dc5c7..0da6f034e53bb 100644
--- a/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx
+++ b/x-pack/plugins/uptime/public/components/synthetics/check_steps/steps_list.tsx
@@ -5,13 +5,7 @@
  * 2.0.
  */
 
-import {
-  EuiBasicTable,
-  EuiBasicTableColumn,
-  EuiButtonIcon,
-  EuiPanel,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiBasicTable, EuiBasicTableColumn, EuiButtonIcon, EuiTitle } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { MouseEvent } from 'react';
 import styled from 'styled-components';
@@ -147,7 +141,7 @@ export const StepsList = ({ data, error, loading }: Props) => {
   };
 
   return (
-    <EuiPanel>
+    <>
       <EuiTitle>
         <h2>
           {statusMessage(
@@ -176,6 +170,6 @@ export const StepsList = ({ data, error, loading }: Props) => {
         tableLayout={'auto'}
         rowProps={getRowProps}
       />
-    </EuiPanel>
+    </>
   );
 };
diff --git a/x-pack/plugins/uptime/public/pages/settings.tsx b/x-pack/plugins/uptime/public/pages/settings.tsx
index 5f2699240425a..88bae5536c05f 100644
--- a/x-pack/plugins/uptime/public/pages/settings.tsx
+++ b/x-pack/plugins/uptime/public/pages/settings.tsx
@@ -13,7 +13,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiForm,
-  EuiPanel,
   EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -148,7 +147,7 @@ export const SettingsPage: React.FC = () => {
   );
 
   return (
-    <EuiPanel style={{ maxWidth: 1000, margin: 'auto' }}>
+    <>
       <EuiFlexGroup>
         <EuiFlexItem grow={false}>{cannotEditNotice}</EuiFlexItem>
       </EuiFlexGroup>
@@ -213,6 +212,6 @@ export const SettingsPage: React.FC = () => {
           </div>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiPanel>
+    </>
   );
 };
diff --git a/x-pack/test/accessibility/apps/lens.ts b/x-pack/test/accessibility/apps/lens.ts
index 4157f31525acf..fce15b34a77e4 100644
--- a/x-pack/test/accessibility/apps/lens.ts
+++ b/x-pack/test/accessibility/apps/lens.ts
@@ -142,8 +142,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await PageObjects.lens.configureDimension(
         {
           dimension: 'lnsXY_xDimensionPanel > lns-empty-dimension',
-          operation: 'terms',
-          field: 'ip',
+          operation: 'date_histogram',
+          field: '@timestamp',
         },
         1
       );
diff --git a/x-pack/test/apm_api_integration/configs/index.ts b/x-pack/test/apm_api_integration/configs/index.ts
index 3393580153215..da1e06f7f2ea6 100644
--- a/x-pack/test/apm_api_integration/configs/index.ts
+++ b/x-pack/test/apm_api_integration/configs/index.ts
@@ -19,6 +19,7 @@ const apmFtrConfigs = {
     license: 'trial' as const,
     kibanaConfig: {
       'xpack.ruleRegistry.index': '.kibana-alerts',
+      'xpack.ruleRegistry.write.enabled': 'true',
     },
   },
 };
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts
index 8d158cc1c4f70..941b71fb925db 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/migrations.ts
@@ -7,7 +7,11 @@
 
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../../common/ftr_provider_context';
-import { CASES_URL } from '../../../../../../plugins/cases/common/constants';
+import {
+  CASES_URL,
+  SECURITY_SOLUTION_OWNER,
+} from '../../../../../../plugins/cases/common/constants';
+import { getCase } from '../../../../common/lib/utils';
 
 // eslint-disable-next-line import/no-default-export
 export default function createGetTests({ getService }: FtrProviderContext) {
@@ -107,5 +111,24 @@ export default function createGetTests({ getService }: FtrProviderContext) {
         });
       });
     });
+
+    describe('7.13.2', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      it('adds the owner field', async () => {
+        const theCase = await getCase({
+          supertest,
+          caseId: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c',
+        });
+
+        expect(theCase.owner).to.be(SECURITY_SOLUTION_OWNER);
+      });
+    });
   });
 }
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts
index 80432f15f70a9..6b370117c447a 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/patch_cases.ts
@@ -500,6 +500,26 @@ export default ({ getService }: FtrProviderContext): void => {
           expectedHttpCode: 400,
         });
       });
+
+      it('400s if the title is too long', async () => {
+        const longTitle =
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla enim, rutrum sit amet euismod venenatis, blandit et massa. Nulla id consectetur enim.';
+
+        const postedCase = await createCase(supertest, postCaseReq);
+        await updateCase({
+          supertest,
+          params: {
+            cases: [
+              {
+                id: postedCase.id,
+                version: postedCase.version,
+                title: longTitle,
+              },
+            ],
+          },
+          expectedHttpCode: 400,
+        });
+      });
     });
 
     describe('alerts', () => {
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts
index e8337fa9db502..2fe5a4c0165c0 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/cases/post_case.ts
@@ -238,6 +238,13 @@ export default ({ getService }: FtrProviderContext): void => {
           .send({ ...req, status: CaseStatuses.open })
           .expect(400);
       });
+
+      it('400s if the title is too long', async () => {
+        const longTitle =
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nulla enim, rutrum sit amet euismod venenatis, blandit et massa. Nulla id consectetur enim.';
+
+        await createCase(supertest, getPostCaseRequest({ title: longTitle }), 400);
+      });
     });
 
     describe('rbac', () => {
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts
index 357373e7805ee..67e30987fabac 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/comments/migrations.ts
@@ -7,7 +7,11 @@
 
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../../common/ftr_provider_context';
-import { CASES_URL } from '../../../../../../plugins/cases/common/constants';
+import {
+  CASES_URL,
+  SECURITY_SOLUTION_OWNER,
+} from '../../../../../../plugins/cases/common/constants';
+import { getComment } from '../../../../common/lib/utils';
 
 // eslint-disable-next-line import/no-default-export
 export default function createGetTests({ getService }: FtrProviderContext) {
@@ -15,23 +19,45 @@ export default function createGetTests({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
 
   describe('migrations', () => {
-    before(async () => {
-      await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
-    });
+    describe('7.11.0', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
+
+      it('7.11.0 migrates cases comments', async () => {
+        const { body: comment } = await supertest
+          .get(
+            `${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/comments/da677740-1ac7-11eb-b5a3-25ee88122510`
+          )
+          .set('kbn-xsrf', 'true')
+          .send();
 
-    after(async () => {
-      await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+        expect(comment.type).to.eql('user');
+      });
     });
 
-    it('7.11.0 migrates cases comments', async () => {
-      const { body: comment } = await supertest
-        .get(
-          `${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/comments/da677740-1ac7-11eb-b5a3-25ee88122510`
-        )
-        .set('kbn-xsrf', 'true')
-        .send();
+    describe('7.13.2', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      it('adds the owner field', async () => {
+        const comment = await getComment({
+          supertest,
+          caseId: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c',
+          commentId: 'ee59cdd0-cf9d-11eb-a603-13e7747d215c',
+        });
 
-      expect(comment.type).to.eql('user');
+        expect(comment.owner).to.be(SECURITY_SOLUTION_OWNER);
+      });
     });
   });
 }
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts
index c6d892e3435f1..67eb23a43f397 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/configure/migrations.ts
@@ -7,37 +7,73 @@
 
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../../common/ftr_provider_context';
-import { CASE_CONFIGURE_URL } from '../../../../../../plugins/cases/common/constants';
+import {
+  CASE_CONFIGURE_URL,
+  SECURITY_SOLUTION_OWNER,
+} from '../../../../../../plugins/cases/common/constants';
+import { getConfiguration, getConnectorMappingsFromES } from '../../../../common/lib/utils';
 
 // eslint-disable-next-line import/no-default-export
-export default function createGetTests({ getService }: FtrProviderContext) {
+export default function ({ getService }: FtrProviderContext) {
   const supertest = getService('supertest');
   const esArchiver = getService('esArchiver');
+  const es = getService('es');
 
   describe('migrations', () => {
-    before(async () => {
-      await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
-    });
+    describe('7.10.0', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
 
-    after(async () => {
-      await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      it('7.10.0 migrates configure cases connector', async () => {
+        const { body } = await supertest
+          .get(`${CASE_CONFIGURE_URL}`)
+          .set('kbn-xsrf', 'true')
+          .send()
+          .expect(200);
+
+        expect(body.length).to.be(1);
+        expect(body[0]).key('connector');
+        expect(body[0]).not.key('connector_id');
+        expect(body[0].connector).to.eql({
+          id: 'connector-1',
+          name: 'Connector 1',
+          type: '.none',
+          fields: null,
+        });
+      });
     });
 
-    it('7.10.0 migrates configure cases connector', async () => {
-      const { body } = await supertest
-        .get(`${CASE_CONFIGURE_URL}`)
-        .set('kbn-xsrf', 'true')
-        .send()
-        .expect(200);
-
-      expect(body.length).to.be(1);
-      expect(body[0]).key('connector');
-      expect(body[0]).not.key('connector_id');
-      expect(body[0].connector).to.eql({
-        id: 'connector-1',
-        name: 'Connector 1',
-        type: '.none',
-        fields: null,
+    describe('7.13.2', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      it('adds the owner field', async () => {
+        const configuration = await getConfiguration({
+          supertest,
+          query: { owner: SECURITY_SOLUTION_OWNER },
+        });
+
+        expect(configuration[0].owner).to.be(SECURITY_SOLUTION_OWNER);
+      });
+
+      it('adds the owner field to the connector mapping', async () => {
+        // We don't get the owner field back from the mappings when we retrieve the configuration so the only way to
+        // check that the migration worked is by checking the saved object stored in Elasticsearch directly
+        const mappings = await getConnectorMappingsFromES({ es });
+        expect(mappings.body.hits.hits.length).to.be(1);
+        expect(mappings.body.hits.hits[0]._source?.['cases-connector-mappings'].owner).to.eql(
+          SECURITY_SOLUTION_OWNER
+        );
       });
     });
   });
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts
index 17d93e76bbdda..122eeee411431 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/migrations.ts
@@ -12,6 +12,7 @@ export default ({ loadTestFile }: FtrProviderContext): void => {
   describe('Common migrations', function () {
     // Migrations
     loadTestFile(require.resolve('./cases/migrations'));
+    loadTestFile(require.resolve('./comments/migrations'));
     loadTestFile(require.resolve('./configure/migrations'));
     loadTestFile(require.resolve('./user_actions/migrations'));
   });
diff --git a/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts b/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts
index 030441028c502..b4c2dca47bf5f 100644
--- a/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts
+++ b/x-pack/test/case_api_integration/security_and_spaces/tests/common/user_actions/migrations.ts
@@ -7,7 +7,11 @@
 
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../../common/ftr_provider_context';
-import { CASES_URL } from '../../../../../../plugins/cases/common/constants';
+import {
+  CASES_URL,
+  SECURITY_SOLUTION_OWNER,
+} from '../../../../../../plugins/cases/common/constants';
+import { getCaseUserActions } from '../../../../common/lib/utils';
 
 // eslint-disable-next-line import/no-default-export
 export default function createGetTests({ getService }: FtrProviderContext) {
@@ -15,38 +19,62 @@ export default function createGetTests({ getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
 
   describe('migrations', () => {
-    before(async () => {
-      await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
-    });
+    describe('7.10.0', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+      });
+
+      it('7.10.0 migrates user actions connector', async () => {
+        const { body } = await supertest
+          .get(`${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/user_actions`)
+          .set('kbn-xsrf', 'true')
+          .send()
+          .expect(200);
+
+        const connectorUserAction = body[1];
+        const oldValue = JSON.parse(connectorUserAction.old_value);
+        const newValue = JSON.parse(connectorUserAction.new_value);
 
-    after(async () => {
-      await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.10.0');
+        expect(connectorUserAction.action_field.length).eql(1);
+        expect(connectorUserAction.action_field[0]).eql('connector');
+        expect(oldValue).to.eql({
+          id: 'c1900ac0-017f-11eb-93f8-d161651bf509',
+          name: 'none',
+          type: '.none',
+          fields: null,
+        });
+        expect(newValue).to.eql({
+          id: 'b1900ac0-017f-11eb-93f8-d161651bf509',
+          name: 'none',
+          type: '.none',
+          fields: null,
+        });
+      });
     });
 
-    it('7.10.0 migrates user actions connector', async () => {
-      const { body } = await supertest
-        .get(`${CASES_URL}/e1900ac0-017f-11eb-93f8-d161651bf509/user_actions`)
-        .set('kbn-xsrf', 'true')
-        .send()
-        .expect(200);
-
-      const connectorUserAction = body[1];
-      const oldValue = JSON.parse(connectorUserAction.old_value);
-      const newValue = JSON.parse(connectorUserAction.new_value);
-
-      expect(connectorUserAction.action_field.length).eql(1);
-      expect(connectorUserAction.action_field[0]).eql('connector');
-      expect(oldValue).to.eql({
-        id: 'c1900ac0-017f-11eb-93f8-d161651bf509',
-        name: 'none',
-        type: '.none',
-        fields: null,
+    describe('7.13.2', () => {
+      before(async () => {
+        await esArchiver.load('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
+      });
+
+      after(async () => {
+        await esArchiver.unload('x-pack/test/functional/es_archives/cases/migrations/7.13.2');
       });
-      expect(newValue).to.eql({
-        id: 'b1900ac0-017f-11eb-93f8-d161651bf509',
-        name: 'none',
-        type: '.none',
-        fields: null,
+
+      it('adds the owner field', async () => {
+        const userActions = await getCaseUserActions({
+          supertest,
+          caseID: 'e49ad6e0-cf9d-11eb-a603-13e7747d215c',
+        });
+
+        expect(userActions.length).to.not.be(0);
+        for (const action of userActions) {
+          expect(action.owner).to.be(SECURITY_SOLUTION_OWNER);
+        }
       });
     });
   });
diff --git a/x-pack/test/examples/config.ts b/x-pack/test/examples/config.ts
index 491c23a33a3ef..606f97f9c3de7 100644
--- a/x-pack/test/examples/config.ts
+++ b/x-pack/test/examples/config.ts
@@ -33,7 +33,7 @@ export default async function ({ readConfigFile }: FtrConfigProviderContext) {
       reportName: 'X-Pack Example plugin functional tests',
     },
 
-    testFiles: [require.resolve('./search_examples')],
+    testFiles: [require.resolve('./search_examples'), require.resolve('./embedded_lens')],
 
     kbnTestServer: {
       ...xpackFunctionalConfig.get('kbnTestServer'),
diff --git a/x-pack/test/examples/embedded_lens/embedded_example.ts b/x-pack/test/examples/embedded_lens/embedded_example.ts
new file mode 100644
index 0000000000000..3a0891079f24e
--- /dev/null
+++ b/x-pack/test/examples/embedded_lens/embedded_example.ts
@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import expect from '@kbn/expect';
+import { FtrProviderContext } from '../../functional/ftr_provider_context';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService, getPageObjects }: FtrProviderContext) {
+  const PageObjects = getPageObjects(['lens', 'common', 'dashboard', 'timeToVisualize']);
+  const elasticChart = getService('elasticChart');
+  const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+
+  async function checkData() {
+    const data = await elasticChart.getChartDebugData();
+    expect(data!.bars![0].bars.length).to.eql(24);
+  }
+
+  describe('show and save', () => {
+    beforeEach(async () => {
+      await PageObjects.common.navigateToApp('embedded_lens_example');
+      await elasticChart.setNewChartUiDebugFlag(true);
+      await testSubjects.click('lns-example-change-time-range');
+      await PageObjects.lens.waitForVisualization();
+    });
+
+    it('should show chart', async () => {
+      await testSubjects.click('lns-example-change-color');
+      await PageObjects.lens.waitForVisualization();
+      await checkData();
+    });
+
+    it('should save to dashboard', async () => {
+      await testSubjects.click('lns-example-save');
+      await PageObjects.timeToVisualize.setSaveModalValues('From example', {
+        saveAsNew: true,
+        redirectToOrigin: false,
+        addToDashboard: 'new',
+        dashboardId: undefined,
+        saveToLibrary: false,
+      });
+
+      await testSubjects.click('confirmSaveSavedObjectButton');
+      await retry.waitForWithTimeout('Save modal to disappear', 1000, () =>
+        testSubjects
+          .missingOrFail('confirmSaveSavedObjectButton')
+          .then(() => true)
+          .catch(() => false)
+      );
+      await PageObjects.lens.goToTimeRange();
+      await PageObjects.dashboard.waitForRenderComplete();
+      await checkData();
+    });
+
+    it('should load Lens editor', async () => {
+      await testSubjects.click('lns-example-open-editor');
+      await PageObjects.lens.waitForVisualization();
+      await checkData();
+    });
+  });
+}
diff --git a/x-pack/test/examples/embedded_lens/index.ts b/x-pack/test/examples/embedded_lens/index.ts
new file mode 100644
index 0000000000000..3bd4ea31cc89b
--- /dev/null
+++ b/x-pack/test/examples/embedded_lens/index.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 { PluginFunctionalProviderContext } from 'test/plugin_functional/services';
+
+// eslint-disable-next-line import/no-default-export
+export default function ({ getService, loadTestFile }: PluginFunctionalProviderContext) {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+
+  describe('embedded Lens examples', function () {
+    before(async () => {
+      await esArchiver.load('x-pack/test/functional/es_archives/logstash_functional');
+      await esArchiver.load('x-pack/test/functional/es_archives/lens/basic'); // need at least one index pattern
+      await kibanaServer.uiSettings.update({
+        defaultIndex: 'logstash-*',
+      });
+    });
+
+    after(async () => {
+      await esArchiver.unload('x-pack/test/functional/es_archives/lens/basic');
+    });
+
+    describe('', function () {
+      this.tags(['ciGroup4', 'skipFirefox']);
+
+      loadTestFile(require.resolve('./embedded_example'));
+    });
+  });
+}
diff --git a/x-pack/test/functional/apps/lens/dashboard.ts b/x-pack/test/functional/apps/lens/dashboard.ts
index 844b074e42e74..6e4c20744c5fc 100644
--- a/x-pack/test/functional/apps/lens/dashboard.ts
+++ b/x-pack/test/functional/apps/lens/dashboard.ts
@@ -223,10 +223,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       // remove the x dimension to trigger the validation error
       await PageObjects.lens.removeDimension('lnsXY_xDimensionPanel');
-      await PageObjects.lens.saveAndReturn();
-
-      await PageObjects.header.waitUntilLoadingHasFinished();
-      await testSubjects.existOrFail('embeddable-lens-failure');
+      await PageObjects.lens.expectSaveAndReturnButtonDisabled();
     });
   });
 }
diff --git a/x-pack/test/functional/apps/ml/permissions/index.ts b/x-pack/test/functional/apps/ml/permissions/index.ts
index e777f241eaf85..af9f8a5f240d1 100644
--- a/x-pack/test/functional/apps/ml/permissions/index.ts
+++ b/x-pack/test/functional/apps/ml/permissions/index.ts
@@ -8,7 +8,8 @@
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ loadTestFile }: FtrProviderContext) {
-  describe('permissions', function () {
+  // FLAKY: https://github.com/elastic/kibana/issues/104042
+  describe.skip('permissions', function () {
     this.tags(['skipFirefox']);
 
     loadTestFile(require.resolve('./full_ml_access'));
diff --git a/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson b/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson
new file mode 100644
index 0000000000000..f0215db3cda69
--- /dev/null
+++ b/x-pack/test/functional/apps/saved_objects_management/exports/_7.14_import_alerts_actions.ndjson
@@ -0,0 +1,24 @@
+{"attributes":{"actionTypeId":".server-log","config":{},"isMissingSecrets":false,"name":"Monitoring: Write to Kibana log"},"coreMigrationVersion":"7.14.0","id":"f1cf69c0-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:34:50.470Z","version":"WzEzODksMV0="}
+{"attributes":{"actionTypeId":".email","config":{"from":"user2@company.com","hasAuth":true,"host":"securehost","port":465,"secure":null,"service":null},"isMissingSecrets":true,"name":"email connector with auth"},"coreMigrationVersion":"7.14.0","id":"7eec9570-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:09.234Z","version":"WzI2LDFd"}
+{"attributes":{"actionTypeId":".resilient","config":{"apiUrl":"https://resilienttest","orgId":"test"},"isMissingSecrets":true,"name":"ibm resilient connector"},"coreMigrationVersion":"7.14.0","id":"8e08afd0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:34.583Z","version":"WzI3LDFd"}
+{"attributes":{"actionTypeId":".email","config":{"from":"user@company.com","hasAuth":false,"host":"host","port":22,"secure":null,"service":null},"isMissingSecrets":false,"name":"email connector no auth"},"coreMigrationVersion":"7.14.0","id":"711e30c0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:09:46.078Z","version":"WzI1LDFd"}
+{"attributes":{"actionTypeId":".index","config":{"executionTimeField":null,"index":"test-index","refresh":false},"isMissingSecrets":false,"name":"index connector"},"coreMigrationVersion":"7.14.0","id":"95d329c0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:10:47.653Z","version":"WzI5LDFd"}
+{"attributes":{"actionTypeId":".webhook","config":{"hasAuth":true,"headers":null,"method":"post","url":"https://webhook"},"isMissingSecrets":true,"name":"webhook with auth"},"coreMigrationVersion":"7.14.0","id":"07f32aa0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:13:59.125Z","version":"WzM5LDFd"}
+{"attributes":{"actionTypeId":".servicenow-sir","config":{"apiUrl":"https://servicenowtestsecops"},"isMissingSecrets":true,"name":"servicenow secops connector"},"coreMigrationVersion":"7.14.0","id":"ca974fb0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:12:16.181Z","version":"WzM1LDFd"}
+{"attributes":{"actionTypeId":".servicenow","config":{"apiUrl":"https://servicenowtest"},"isMissingSecrets":true,"name":"servicenow itsm connector"},"coreMigrationVersion":"7.14.0","id":"be5c5c40-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:55.662Z","version":"WzM0LDFd"}
+{"attributes":{"actionTypeId":".webhook","config":{"hasAuth":false,"headers":null,"method":"post","url":"https://openwebhook"},"isMissingSecrets":false,"name":"webhook no auth"},"coreMigrationVersion":"7.14.0","id":"ff8c70b0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:13:45.031Z","version":"WzM3LDFd"}
+{"attributes":{"actionTypeId":".pagerduty","config":{"apiUrl":""},"isMissingSecrets":true,"name":"pagerduty connector"},"coreMigrationVersion":"7.14.0","id":"b0bc3380-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:32.802Z","version":"WzMyLDFd"}
+{"attributes":{"actionTypeId":".jira","config":{"apiUrl":"https://testjira","projectKey":"myproject"},"isMissingSecrets":true,"name":"jira connector"},"coreMigrationVersion":"7.14.0","id":"a081d7e0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:05.577Z","version":"WzMwLDFd"}
+{"attributes":{"actionTypeId":".server-log","config":{},"isMissingSecrets":false,"name":"server log connector"},"coreMigrationVersion":"7.14.0","id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:40.404Z","version":"WzMzLDFd"}
+{"attributes":{"actionTypeId":".teams","config":{},"isMissingSecrets":true,"name":"teams connector"},"coreMigrationVersion":"7.14.0","id":"a94be780-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:11:20.321Z","version":"WzMxLDFd"}
+{"attributes":{"actionTypeId":".slack","config":{},"isMissingSecrets":true,"name":"slack connector"},"coreMigrationVersion":"7.14.0","id":"d6d1cdf0-d9a4-11eb-881a-218d2e96295d","migrationVersion":{"action":"7.14.0"},"references":[],"type":"action","updated_at":"2021-06-30T13:12:36.697Z","version":"WzM2LDFd"}
+{"attributes":{"actions":[],"alertTypeId":".geo-containment","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:30:28.418Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"geo rule","notifyWhen":"onActionGroupChange","params":{"boundaryGeoField":"coordinates","boundaryIndexId":"c2a20a50-d9a6-11eb-881a-218d2e96295d","boundaryIndexTitle":"manhattan_boundaries","boundaryNameField":"<nothing selected>","boundaryType":"entireIndex","dateField":"@timestamp","entity":"azimuth","geoField":"location","index":"tracks*","indexId":"f653fcf0-d9a6-11eb-881a-218d2e96295d"},"schedule":{"interval":"5m"},"scheduledTaskId":null,"tags":["manhattan"],"throttle":null,"updatedAt":"2021-06-30T13:30:28.418Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"55626650-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:40:37.967Z","version":"WzE1MDksMV0="}
+{"attributes":{"actions":[],"alertTypeId":"logs.alert.document.count","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:20:56.718Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"logs threshold rule","notifyWhen":"onActiveAlert","params":{"count":{"comparator":"more than","value":75},"criteria":[{"comparator":"equals","field":"host.keyword","value":"host1"}],"timeSize":5,"timeUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":["logs","test"],"throttle":null,"updatedAt":"2021-06-30T13:20:56.718Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"00b51cc0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:42:01.071Z","version":"WzE1MjYsMV0="}
+{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".server-log","group":"query matched","params":{"level":"info","message":"Elasticsearch query alert '{{alertName}}' is active:\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}}],"alertTypeId":".es-query","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:19:13.441Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"es query rule","notifyWhen":"onActionGroupChange","params":{"esQuery":"{\n  \"query\":{\n    \"match_all\" : {}\n  }\n}","index":[".kibana"],"size":100,"threshold":[1000],"thresholdComparator":">","timeField":"updated_at","timeWindowSize":5,"timeWindowUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":["es","query"],"throttle":null,"updatedAt":"2021-06-30T13:19:13.441Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"c3172fc0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:41:19.057Z","version":"WzE1MjAsMV0="}
+{"attributes":{"actions":[],"alertTypeId":"xpack.uptime.alerts.monitorStatus","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:22:48.241Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"uptime status","notifyWhen":"onActiveAlert","params":{"availability":{"range":30,"rangeUnit":"d","threshold":"99"},"numTimes":5,"search":"","shouldCheckAvailability":true,"shouldCheckStatus":true,"timerangeCount":15,"timerangeUnit":"m"},"schedule":{"interval":"1d"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:22:48.241Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"432dddd0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:22:51.893Z","version":"WzEwMywxXQ=="}
+{"attributes":{"actions":[],"alertTypeId":"metrics.alert.threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:22:25.161Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"metric threshold rule","notifyWhen":"onActionGroupChange","params":{"criteria":[{"aggType":"avg","comparator":">","metric":"_score","threshold":[0.5],"timeSize":1,"timeUnit":"m"}],"sourceId":"default"},"schedule":{"interval":"1h"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:22:25.161Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"34dba320-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:22:27.874Z","version":"Wzk5LDFd"}
+{"attributes":{"actions":[],"alertTypeId":"xpack.uptime.alerts.tlsCertificate","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:23:14.340Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"tls rule","notifyWhen":"onThrottleInterval","params":{},"schedule":{"interval":"1d"},"scheduledTaskId":null,"tags":["certificate"],"throttle":"1h","updatedAt":"2021-06-30T13:23:14.340Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"52990290-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[],"type":"alert","updated_at":"2021-06-30T13:23:15.928Z","version":"WzEwNywxXQ=="}
+{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".index","group":"metrics.inventory_threshold.fired","params":{"documents":[{"alert_triggered":"{{rule.id}}"}]}}],"alertTypeId":"metrics.alert.inventory.threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:21:53.897Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"inventory rule","notifyWhen":"onActionGroupChange","params":{"criteria":[{"comparator":">","customMetric":{"aggregation":"avg","field":"","id":"alert-custom-metric","type":"custom"},"metric":"cpu","threshold":[90],"timeSize":1,"timeUnit":"m"}],"nodeType":"host","sourceId":"default"},"schedule":{"interval":"10m"},"scheduledTaskId":null,"tags":["inventory"],"throttle":null,"updatedAt":"2021-06-30T13:21:53.897Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"22e0f9e0-d9a6-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"95d329c0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:42:01.078Z","version":"WzE1MjcsMV0="}
+{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".server-log","group":"anomaly_score_match","params":{"level":"info","message":"Elastic Stack Machine Learning Alert:\n- Job IDs: {{context.jobIds}}\n- Time: {{context.timestampIso8601}}\n- Anomaly score: {{context.score}}\n\n{{context.message}}\n\n{{#context.topInfluencers.length}}\n  Top influencers:\n  {{#context.topInfluencers}}\n    {{influencer_field_name}} = {{influencer_field_value}} [{{score}}]\n  {{/context.topInfluencers}}\n{{/context.topInfluencers.length}}\n\n{{#context.topRecords.length}}\n  Top records:\n  {{#context.topRecords}}\n    {{function}}({{field_name}}) {{by_field_value}} {{over_field_value}} {{partition_field_value}} [{{score}}]\n  {{/context.topRecords}}\n{{/context.topRecords.length}}\n\n{{! Replace kibanaBaseUrl if not configured in Kibana }}\n[Open in Anomaly Explorer]({{{kibanaBaseUrl}}}{{{context.anomalyExplorerUrl}}})\n"}}],"alertTypeId":"xpack.ml.anomaly_detection_alert","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:32:13.689Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"ecommerce ml","notifyWhen":"onActionGroupChange","params":{"includeInterim":false,"jobSelection":{"groupIds":[],"jobIds":["high_sum_total_sales"]},"lookbackInterval":null,"resultType":"bucket","severity":75,"topNBuckets":null},"schedule":{"interval":"1h"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:32:13.689Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"93ea6530-d9a7-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:32:15.978Z","version":"WzI0NiwxXQ=="}
+{"attributes":{"actions":[{"actionRef":"action_0","actionTypeId":".email","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}","subject":"alert fired!","to":["user@company.com"]}},{"actionRef":"action_1","actionTypeId":".email","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}","subject":"alert triggered!","to":["user2@company.com"]}},{"actionRef":"action_2","actionTypeId":".index","group":"threshold met","params":{"documents":[{"alert_triggered":"{{rule.id}}"}]}},{"actionRef":"action_3","actionTypeId":".teams","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_4","actionTypeId":".pagerduty","group":"threshold met","params":{"dedupKey":"{{rule.id}}:{{alert.id}}","eventAction":"trigger","summary":"triggered"}},{"actionRef":"action_5","actionTypeId":".server-log","group":"threshold met","params":{"level":"info","message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_6","actionTypeId":".slack","group":"threshold met","params":{"message":"alert '{{alertName}}' is active for group '{{context.group}}':\n\n- Value: {{context.value}}\n- Conditions Met: {{context.conditions}} over {{params.timeWindowSize}}{{params.timeWindowUnit}}\n- Timestamp: {{context.date}}"}},{"actionRef":"action_7","actionTypeId":".webhook","group":"threshold met","params":{"body":"{\n    \"alert_triggered\": \"{{rule.id}}\"\n}"}},{"actionRef":"action_8","actionTypeId":".webhook","group":"threshold met","params":{"body":"{\n    \"alert_triggered\": \"{{rule.id}}\"\n}"}}],"alertTypeId":".index-threshold","apiKey":null,"apiKeyOwner":null,"consumer":"alerts","createdAt":"2021-06-30T13:18:16.273Z","createdBy":"elastic","enabled":false,"executionStatus":{"error":null,"lastExecutionDate":"2021-06-30T13:42:03.746Z","status":"pending"},"meta":{"versionApiKeyLastmodified":"8.0.0"},"muteAll":false,"mutedInstanceIds":[],"name":"index threshold rule with actions","notifyWhen":"onActionGroupChange","params":{"aggType":"count","groupBy":"all","index":[".kibana"],"termSize":5,"threshold":[1000],"thresholdComparator":">","timeField":"updated_at","timeWindowSize":5,"timeWindowUnit":"m"},"schedule":{"interval":"1m"},"scheduledTaskId":null,"tags":[],"throttle":null,"updatedAt":"2021-06-30T13:41:45.350Z","updatedBy":"elastic"},"coreMigrationVersion":"7.14.0","id":"a0bfd5d0-d9a5-11eb-881a-218d2e96295d","migrationVersion":{"alert":"7.13.0"},"references":[{"id":"711e30c0-d9a4-11eb-881a-218d2e96295d","name":"action_0","type":"action"},{"id":"7eec9570-d9a4-11eb-881a-218d2e96295d","name":"action_1","type":"action"},{"id":"95d329c0-d9a4-11eb-881a-218d2e96295d","name":"action_2","type":"action"},{"id":"a94be780-d9a4-11eb-881a-218d2e96295d","name":"action_3","type":"action"},{"id":"b0bc3380-d9a4-11eb-881a-218d2e96295d","name":"action_4","type":"action"},{"id":"b5442ca0-d9a4-11eb-881a-218d2e96295d","name":"action_5","type":"action"},{"id":"d6d1cdf0-d9a4-11eb-881a-218d2e96295d","name":"action_6","type":"action"},{"id":"ff8c70b0-d9a4-11eb-881a-218d2e96295d","name":"action_7","type":"action"},{"id":"07f32aa0-d9a5-11eb-881a-218d2e96295d","name":"action_8","type":"action"}],"type":"alert","updated_at":"2021-06-30T13:41:45.359Z","version":"WzE1MjQsMV0="}
+{"excludedObjects":[{"id":"f27594d0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2756dc0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2751fa0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f275bbe0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"bf522690-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2771b70-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f276f460-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274f890-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27594d1-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f276cd50-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274aa70-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27546b0-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f27546b1-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f274d180-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"},{"id":"f2774280-d9a7-11eb-881a-218d2e96295d","reason":"excluded","type":"alert"}],"excludedObjectsCount":15,"exportedCount":23,"missingRefCount":0,"missingReferences":[]}
diff --git a/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts b/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts
index 47fc2b756e8e8..427e42b7b7a65 100644
--- a/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts
+++ b/x-pack/test/functional/apps/saved_objects_management/import_saved_objects_between_versions.ts
@@ -21,7 +21,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const retry = getService('retry');
 
   describe('Export import saved objects between versions', function () {
-    beforeEach(async function () {
+    before(async function () {
       await esArchiver.load('x-pack/test/functional/es_archives/logstash_functional');
       await esArchiver.load('x-pack/test/functional/es_archives/getting_started/shakespeare');
       await kibanaServer.uiSettings.replace({});
@@ -50,5 +50,21 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       // verifying the count of saved objects after importing .ndjson
       await expect(importedSavedObjects).to.be('Export 88 objects');
     });
+
+    it('should be able to import alerts and actions saved objects from 7.14 into 8.0.0', async function () {
+      await retry.tryForTime(10000, async () => {
+        const existingSavedObjects = await testSubjects.getVisibleText('exportAllObjects');
+        // Kibana always has 1 advanced setting as a saved object
+        await expect(existingSavedObjects).to.be('Export 88 objects');
+      });
+      await PageObjects.savedObjects.importFile(
+        path.join(__dirname, 'exports', '_7.14_import_alerts_actions.ndjson')
+      );
+      await PageObjects.savedObjects.checkImportSucceeded();
+      await PageObjects.savedObjects.clickImportDone();
+      const importedSavedObjects = await testSubjects.getVisibleText('exportAllObjects');
+      // verifying the count of saved objects after importing .ndjson
+      await expect(importedSavedObjects).to.be('Export 111 objects');
+    });
   });
 }
diff --git a/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz
new file mode 100644
index 0000000000000..c86af3f7d2fba
Binary files /dev/null and b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/data.json.gz differ
diff --git a/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json
new file mode 100644
index 0000000000000..e79ebf2b8fc10
--- /dev/null
+++ b/x-pack/test/functional/es_archives/cases/migrations/7.13.2/mappings.json
@@ -0,0 +1,2909 @@
+{
+  "type": "index",
+  "value": {
+    "aliases": {
+      ".kibana": {
+      },
+      ".kibana_7.13.2": {
+      }
+    },
+    "index": ".kibana_1",
+    "mappings": {
+      "_meta": {
+        "migrationMappingPropertyHashes": {
+          "action": "6e96ac5e648f57523879661ea72525b7",
+          "action_task_params": "a9d49f184ee89641044be0ca2950fa3a",
+          "alert": "d75d3b0e95fe394753d73d8f7952cd7d",
+          "api_key_pending_invalidation": "16f515278a295f6245149ad7c5ddedb7",
+          "apm-indices": "9bb9b2bf1fa636ed8619cbab5ce6a1dd",
+          "apm-telemetry": "3d1b76c39bfb2cc8296b024d73854724",
+          "app_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724",
+          "application_usage_daily": "43b8830d5d0df85a6823d290885fc9fd",
+          "application_usage_totals": "3d1b76c39bfb2cc8296b024d73854724",
+          "application_usage_transactional": "3d1b76c39bfb2cc8296b024d73854724",
+          "canvas-element": "7390014e1091044523666d97247392fc",
+          "canvas-workpad": "b0a1706d356228dbdcb4a17e6b9eb231",
+          "canvas-workpad-template": "ae2673f678281e2c055d764b153e9715",
+          "cases": "7c28a18fbac7c2a4e79449e9802ef476",
+          "cases-comments": "112cefc2b6737e613a8ef033234755e6",
+          "cases-configure": "387c5f3a3bda7e0ae0dd4e106f914a69",
+          "cases-connector-mappings": "6bc7e49411d38be4969dc6aa8bd43776",
+          "cases-user-actions": "32277330ec6b721abe3b846cfd939a71",
+          "config": "c63748b75f39d0c54de12d12c1ccbc20",
+          "core-usage-stats": "3d1b76c39bfb2cc8296b024d73854724",
+          "coreMigrationVersion": "2f4316de49999235636386fe51dc06c1",
+          "dashboard": "40554caf09725935e2c02e02563a2d07",
+          "endpoint:user-artifact": "4a11183eee21e6fbad864f7a30b39ad0",
+          "endpoint:user-artifact-manifest": "a0d7b04ad405eed54d76e279c3727862",
+          "enterprise_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724",
+          "epm-packages": "0cbbb16506734d341a96aaed65ec6413",
+          "epm-packages-assets": "44621b2f6052ef966da47b7c3a00f33b",
+          "exception-list": "baf108c9934dda844921f692a513adae",
+          "exception-list-agnostic": "baf108c9934dda844921f692a513adae",
+          "file-upload-usage-collection-telemetry": "a34fbb8e3263d105044869264860c697",
+          "fleet-agent-actions": "9511b565b1cc6441a42033db3d5de8e9",
+          "fleet-agents": "59fd74f819f028f8555776db198d2562",
+          "fleet-enrollment-api-keys": "a69ef7ae661dab31561d6c6f052ef2a7",
+          "fleet-preconfiguration-deletion-record": "4c36f199189a367e43541f236141204c",
+          "graph-workspace": "27a94b2edcb0610c6aea54a7c56d7752",
+          "index-pattern": "45915a1ad866812242df474eb0479052",
+          "infrastructure-ui-source": "3d1b76c39bfb2cc8296b024d73854724",
+          "ingest-agent-policies": "cb4dbcc5a695e53f40a359303cb6286f",
+          "ingest-outputs": "1acb789ca37cbee70259ca79e124d9ad",
+          "ingest-package-policies": "c91ca97b1ff700f0fc64dc6b13d65a85",
+          "ingest_manager_settings": "f159646d76ab261bfbf8ef504d9631e4",
+          "inventory-view": "3d1b76c39bfb2cc8296b024d73854724",
+          "kql-telemetry": "d12a98a6f19a2d273696597547e064ee",
+          "legacy-url-alias": "3d1b76c39bfb2cc8296b024d73854724",
+          "lens": "52346cfec69ff7b47d5f0c12361a2797",
+          "lens-ui-telemetry": "509bfa5978586998e05f9e303c07a327",
+          "map": "9134b47593116d7953f6adba096fc463",
+          "maps-telemetry": "5ef305b18111b77789afefbd36b66171",
+          "metrics-explorer-view": "3d1b76c39bfb2cc8296b024d73854724",
+          "migrationVersion": "4a1746014a75ade3a714e1db5763276f",
+          "ml-job": "3bb64c31915acf93fc724af137a0891b",
+          "ml-module": "46ef4f0d6682636f0fff9799d6a2d7ac",
+          "monitoring-telemetry": "2669d5ec15e82391cf58df4294ee9c68",
+          "namespace": "2f4316de49999235636386fe51dc06c1",
+          "namespaces": "2f4316de49999235636386fe51dc06c1",
+          "originId": "2f4316de49999235636386fe51dc06c1",
+          "query": "11aaeb7f5f7fa5bb43f25e18ce26e7d9",
+          "references": "7997cf5a56cc02bdc9c93361bde732b0",
+          "sample-data-telemetry": "7d3cfeb915303c9641c59681967ffeb4",
+          "search": "db2c00e39b36f40930a3b9fc71c823e1",
+          "search-session": "4e238afeeaa2550adef326e140454265",
+          "search-telemetry": "3d1b76c39bfb2cc8296b024d73854724",
+          "security-rule": "8ae39a88fc70af3375b7050e8d8d5cc7",
+          "security-solution-signals-migration": "72761fd374ca11122ac8025a92b84fca",
+          "siem-detection-engine-rule-actions": "6569b288c169539db10cb262bf79de18",
+          "siem-detection-engine-rule-status": "ae783f41c6937db6b7a2ef5c93a9e9b0",
+          "siem-ui-timeline": "3e97beae13cdfc6d62bc1846119f7276",
+          "siem-ui-timeline-note": "8874706eedc49059d4cf0f5094559084",
+          "siem-ui-timeline-pinned-event": "20638091112f0e14f0e443d512301c29",
+          "space": "c5ca8acafa0beaa4d08d014a97b6bc6b",
+          "spaces-usage-stats": "3d1b76c39bfb2cc8296b024d73854724",
+          "tag": "83d55da58f6530f7055415717ec06474",
+          "telemetry": "36a616f7026dfa617d6655df850fe16d",
+          "timelion-sheet": "9a2a2748877c7a7b582fef201ab1d4cf",
+          "type": "2f4316de49999235636386fe51dc06c1",
+          "ui-counter": "0d409297dc5ebe1e3a1da691c6ee32e3",
+          "ui-metric": "0d409297dc5ebe1e3a1da691c6ee32e3",
+          "updated_at": "00da57df13e94e9d98437d13ace4bfe0",
+          "upgrade-assistant-reindex-operation": "215107c281839ea9b3ad5f6419819763",
+          "upgrade-assistant-telemetry": "56702cec857e0a9dacfb696655b4ff7b",
+          "uptime-dynamic-settings": "3d1b76c39bfb2cc8296b024d73854724",
+          "url": "c7f66a0df8b1b52f17c28c4adb111105",
+          "usage-counters": "8cc260bdceffec4ffc3ad165c97dc1b4",
+          "visualization": "f819cf6636b75c9e76ba733a0c6ef355",
+          "workplace_search_telemetry": "3d1b76c39bfb2cc8296b024d73854724"
+        }
+      },
+      "dynamic": "strict",
+      "properties": {
+        "action": {
+          "properties": {
+            "actionTypeId": {
+              "type": "keyword"
+            },
+            "config": {
+              "enabled": false,
+              "type": "object"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "secrets": {
+              "type": "binary"
+            }
+          }
+        },
+        "action_task_params": {
+          "properties": {
+            "actionId": {
+              "type": "keyword"
+            },
+            "apiKey": {
+              "type": "binary"
+            },
+            "params": {
+              "enabled": false,
+              "type": "object"
+            }
+          }
+        },
+        "alert": {
+          "properties": {
+            "actions": {
+              "properties": {
+                "actionRef": {
+                  "type": "keyword"
+                },
+                "actionTypeId": {
+                  "type": "keyword"
+                },
+                "group": {
+                  "type": "keyword"
+                },
+                "params": {
+                  "enabled": false,
+                  "type": "object"
+                }
+              },
+              "type": "nested"
+            },
+            "alertTypeId": {
+              "type": "keyword"
+            },
+            "apiKey": {
+              "type": "binary"
+            },
+            "apiKeyOwner": {
+              "type": "keyword"
+            },
+            "consumer": {
+              "type": "keyword"
+            },
+            "createdAt": {
+              "type": "date"
+            },
+            "createdBy": {
+              "type": "keyword"
+            },
+            "enabled": {
+              "type": "boolean"
+            },
+            "executionStatus": {
+              "properties": {
+                "error": {
+                  "properties": {
+                    "message": {
+                      "type": "keyword"
+                    },
+                    "reason": {
+                      "type": "keyword"
+                    }
+                  }
+                },
+                "lastExecutionDate": {
+                  "type": "date"
+                },
+                "status": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "meta": {
+              "properties": {
+                "versionApiKeyLastmodified": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "muteAll": {
+              "type": "boolean"
+            },
+            "mutedInstanceIds": {
+              "type": "keyword"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "notifyWhen": {
+              "type": "keyword"
+            },
+            "params": {
+              "ignore_above": 4096,
+              "type": "flattened"
+            },
+            "schedule": {
+              "properties": {
+                "interval": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "scheduledTaskId": {
+              "type": "keyword"
+            },
+            "tags": {
+              "type": "keyword"
+            },
+            "throttle": {
+              "type": "keyword"
+            },
+            "updatedAt": {
+              "type": "date"
+            },
+            "updatedBy": {
+              "type": "keyword"
+            }
+          }
+        },
+        "api_key_pending_invalidation": {
+          "properties": {
+            "apiKeyId": {
+              "type": "keyword"
+            },
+            "createdAt": {
+              "type": "date"
+            }
+          }
+        },
+        "apm-indices": {
+          "properties": {
+            "apm_oss": {
+              "properties": {
+                "errorIndices": {
+                  "type": "keyword"
+                },
+                "metricsIndices": {
+                  "type": "keyword"
+                },
+                "onboardingIndices": {
+                  "type": "keyword"
+                },
+                "sourcemapIndices": {
+                  "type": "keyword"
+                },
+                "spanIndices": {
+                  "type": "keyword"
+                },
+                "transactionIndices": {
+                  "type": "keyword"
+                }
+              }
+            }
+          }
+        },
+        "apm-telemetry": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "app_search_telemetry": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "application_usage_daily": {
+          "dynamic": "false",
+          "properties": {
+            "timestamp": {
+              "type": "date"
+            }
+          }
+        },
+        "application_usage_totals": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "application_usage_transactional": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "canvas-element": {
+          "dynamic": "false",
+          "properties": {
+            "@created": {
+              "type": "date"
+            },
+            "@timestamp": {
+              "type": "date"
+            },
+            "content": {
+              "type": "text"
+            },
+            "help": {
+              "type": "text"
+            },
+            "image": {
+              "type": "text"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "canvas-workpad": {
+          "dynamic": "false",
+          "properties": {
+            "@created": {
+              "type": "date"
+            },
+            "@timestamp": {
+              "type": "date"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "canvas-workpad-template": {
+          "dynamic": "false",
+          "properties": {
+            "help": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "tags": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "template_key": {
+              "type": "keyword"
+            }
+          }
+        },
+        "cases": {
+          "properties": {
+            "closed_at": {
+              "type": "date"
+            },
+            "closed_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "connector": {
+              "properties": {
+                "fields": {
+                  "properties": {
+                    "key": {
+                      "type": "text"
+                    },
+                    "value": {
+                      "type": "text"
+                    }
+                  }
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "name": {
+                  "type": "text"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "created_at": {
+              "type": "date"
+            },
+            "created_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "description": {
+              "type": "text"
+            },
+            "external_service": {
+              "properties": {
+                "connector_id": {
+                  "type": "keyword"
+                },
+                "connector_name": {
+                  "type": "keyword"
+                },
+                "external_id": {
+                  "type": "keyword"
+                },
+                "external_title": {
+                  "type": "text"
+                },
+                "external_url": {
+                  "type": "text"
+                },
+                "pushed_at": {
+                  "type": "date"
+                },
+                "pushed_by": {
+                  "properties": {
+                    "email": {
+                      "type": "keyword"
+                    },
+                    "full_name": {
+                      "type": "keyword"
+                    },
+                    "username": {
+                      "type": "keyword"
+                    }
+                  }
+                }
+              }
+            },
+            "settings": {
+              "properties": {
+                "syncAlerts": {
+                  "type": "boolean"
+                }
+              }
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "tags": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "updated_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            }
+          }
+        },
+        "cases-comments": {
+          "properties": {
+            "alertId": {
+              "type": "keyword"
+            },
+            "associationType": {
+              "type": "keyword"
+            },
+            "comment": {
+              "type": "text"
+            },
+            "created_at": {
+              "type": "date"
+            },
+            "created_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "index": {
+              "type": "keyword"
+            },
+            "pushed_at": {
+              "type": "date"
+            },
+            "pushed_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "rule": {
+              "properties": {
+                "id": {
+                  "type": "keyword"
+                },
+                "name": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "updated_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            }
+          }
+        },
+        "cases-configure": {
+          "properties": {
+            "closure_type": {
+              "type": "keyword"
+            },
+            "connector": {
+              "properties": {
+                "fields": {
+                  "properties": {
+                    "key": {
+                      "type": "text"
+                    },
+                    "value": {
+                      "type": "text"
+                    }
+                  }
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "name": {
+                  "type": "text"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "created_at": {
+              "type": "date"
+            },
+            "created_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "updated_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            }
+          }
+        },
+        "cases-connector-mappings": {
+          "properties": {
+            "mappings": {
+              "properties": {
+                "action_type": {
+                  "type": "keyword"
+                },
+                "source": {
+                  "type": "keyword"
+                },
+                "target": {
+                  "type": "keyword"
+                }
+              }
+            }
+          }
+        },
+        "cases-user-actions": {
+          "properties": {
+            "action": {
+              "type": "keyword"
+            },
+            "action_at": {
+              "type": "date"
+            },
+            "action_by": {
+              "properties": {
+                "email": {
+                  "type": "keyword"
+                },
+                "full_name": {
+                  "type": "keyword"
+                },
+                "username": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "action_field": {
+              "type": "keyword"
+            },
+            "new_value": {
+              "type": "text"
+            },
+            "old_value": {
+              "type": "text"
+            }
+          }
+        },
+        "config": {
+          "dynamic": "false",
+          "properties": {
+            "buildNum": {
+              "type": "keyword"
+            }
+          }
+        },
+        "core-usage-stats": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "coreMigrationVersion": {
+          "type": "keyword"
+        },
+        "dashboard": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "hits": {
+              "doc_values": false,
+              "index": false,
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "index": false,
+                  "type": "text"
+                }
+              }
+            },
+            "optionsJSON": {
+              "index": false,
+              "type": "text"
+            },
+            "panelsJSON": {
+              "index": false,
+              "type": "text"
+            },
+            "refreshInterval": {
+              "properties": {
+                "display": {
+                  "doc_values": false,
+                  "index": false,
+                  "type": "keyword"
+                },
+                "pause": {
+                  "doc_values": false,
+                  "index": false,
+                  "type": "boolean"
+                },
+                "section": {
+                  "doc_values": false,
+                  "index": false,
+                  "type": "integer"
+                },
+                "value": {
+                  "doc_values": false,
+                  "index": false,
+                  "type": "integer"
+                }
+              }
+            },
+            "timeFrom": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "timeRestore": {
+              "doc_values": false,
+              "index": false,
+              "type": "boolean"
+            },
+            "timeTo": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "endpoint:user-artifact": {
+          "properties": {
+            "body": {
+              "type": "binary"
+            },
+            "compressionAlgorithm": {
+              "index": false,
+              "type": "keyword"
+            },
+            "created": {
+              "index": false,
+              "type": "date"
+            },
+            "decodedSha256": {
+              "index": false,
+              "type": "keyword"
+            },
+            "decodedSize": {
+              "index": false,
+              "type": "long"
+            },
+            "encodedSha256": {
+              "type": "keyword"
+            },
+            "encodedSize": {
+              "index": false,
+              "type": "long"
+            },
+            "encryptionAlgorithm": {
+              "index": false,
+              "type": "keyword"
+            },
+            "identifier": {
+              "type": "keyword"
+            }
+          }
+        },
+        "endpoint:user-artifact-manifest": {
+          "properties": {
+            "artifacts": {
+              "properties": {
+                "artifactId": {
+                  "index": false,
+                  "type": "keyword"
+                },
+                "policyId": {
+                  "index": false,
+                  "type": "keyword"
+                }
+              },
+              "type": "nested"
+            },
+            "created": {
+              "index": false,
+              "type": "date"
+            },
+            "schemaVersion": {
+              "type": "keyword"
+            },
+            "semanticVersion": {
+              "index": false,
+              "type": "keyword"
+            }
+          }
+        },
+        "enterprise_search_telemetry": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "epm-packages": {
+          "properties": {
+            "es_index_patterns": {
+              "enabled": false,
+              "type": "object"
+            },
+            "install_source": {
+              "type": "keyword"
+            },
+            "install_started_at": {
+              "type": "date"
+            },
+            "install_status": {
+              "type": "keyword"
+            },
+            "install_version": {
+              "type": "keyword"
+            },
+            "installed_es": {
+              "properties": {
+                "id": {
+                  "type": "keyword"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              },
+              "type": "nested"
+            },
+            "installed_kibana": {
+              "properties": {
+                "id": {
+                  "type": "keyword"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              },
+              "type": "nested"
+            },
+            "internal": {
+              "type": "boolean"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "package_assets": {
+              "properties": {
+                "id": {
+                  "type": "keyword"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              },
+              "type": "nested"
+            },
+            "removable": {
+              "type": "boolean"
+            },
+            "version": {
+              "type": "keyword"
+            }
+          }
+        },
+        "epm-packages-assets": {
+          "properties": {
+            "asset_path": {
+              "type": "keyword"
+            },
+            "data_base64": {
+              "type": "binary"
+            },
+            "data_utf8": {
+              "index": false,
+              "type": "text"
+            },
+            "install_source": {
+              "type": "keyword"
+            },
+            "media_type": {
+              "type": "keyword"
+            },
+            "package_name": {
+              "type": "keyword"
+            },
+            "package_version": {
+              "type": "keyword"
+            }
+          }
+        },
+        "exception-list": {
+          "properties": {
+            "_tags": {
+              "type": "keyword"
+            },
+            "comments": {
+              "properties": {
+                "comment": {
+                  "type": "keyword"
+                },
+                "created_at": {
+                  "type": "keyword"
+                },
+                "created_by": {
+                  "type": "keyword"
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "updated_at": {
+                  "type": "keyword"
+                },
+                "updated_by": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "created_at": {
+              "type": "keyword"
+            },
+            "created_by": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "keyword"
+            },
+            "entries": {
+              "properties": {
+                "entries": {
+                  "properties": {
+                    "field": {
+                      "type": "keyword"
+                    },
+                    "operator": {
+                      "type": "keyword"
+                    },
+                    "type": {
+                      "type": "keyword"
+                    },
+                    "value": {
+                      "fields": {
+                        "text": {
+                          "type": "text"
+                        }
+                      },
+                      "type": "keyword"
+                    }
+                  }
+                },
+                "field": {
+                  "type": "keyword"
+                },
+                "list": {
+                  "properties": {
+                    "id": {
+                      "type": "keyword"
+                    },
+                    "type": {
+                      "type": "keyword"
+                    }
+                  }
+                },
+                "operator": {
+                  "type": "keyword"
+                },
+                "type": {
+                  "type": "keyword"
+                },
+                "value": {
+                  "fields": {
+                    "text": {
+                      "type": "text"
+                    }
+                  },
+                  "type": "keyword"
+                }
+              }
+            },
+            "immutable": {
+              "type": "boolean"
+            },
+            "item_id": {
+              "type": "keyword"
+            },
+            "list_id": {
+              "type": "keyword"
+            },
+            "list_type": {
+              "type": "keyword"
+            },
+            "meta": {
+              "type": "keyword"
+            },
+            "name": {
+              "fields": {
+                "text": {
+                  "type": "text"
+                }
+              },
+              "type": "keyword"
+            },
+            "os_types": {
+              "type": "keyword"
+            },
+            "tags": {
+              "fields": {
+                "text": {
+                  "type": "text"
+                }
+              },
+              "type": "keyword"
+            },
+            "tie_breaker_id": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "updated_by": {
+              "type": "keyword"
+            },
+            "version": {
+              "type": "keyword"
+            }
+          }
+        },
+        "exception-list-agnostic": {
+          "properties": {
+            "_tags": {
+              "type": "keyword"
+            },
+            "comments": {
+              "properties": {
+                "comment": {
+                  "type": "keyword"
+                },
+                "created_at": {
+                  "type": "keyword"
+                },
+                "created_by": {
+                  "type": "keyword"
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "updated_at": {
+                  "type": "keyword"
+                },
+                "updated_by": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "created_at": {
+              "type": "keyword"
+            },
+            "created_by": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "keyword"
+            },
+            "entries": {
+              "properties": {
+                "entries": {
+                  "properties": {
+                    "field": {
+                      "type": "keyword"
+                    },
+                    "operator": {
+                      "type": "keyword"
+                    },
+                    "type": {
+                      "type": "keyword"
+                    },
+                    "value": {
+                      "fields": {
+                        "text": {
+                          "type": "text"
+                        }
+                      },
+                      "type": "keyword"
+                    }
+                  }
+                },
+                "field": {
+                  "type": "keyword"
+                },
+                "list": {
+                  "properties": {
+                    "id": {
+                      "type": "keyword"
+                    },
+                    "type": {
+                      "type": "keyword"
+                    }
+                  }
+                },
+                "operator": {
+                  "type": "keyword"
+                },
+                "type": {
+                  "type": "keyword"
+                },
+                "value": {
+                  "fields": {
+                    "text": {
+                      "type": "text"
+                    }
+                  },
+                  "type": "keyword"
+                }
+              }
+            },
+            "immutable": {
+              "type": "boolean"
+            },
+            "item_id": {
+              "type": "keyword"
+            },
+            "list_id": {
+              "type": "keyword"
+            },
+            "list_type": {
+              "type": "keyword"
+            },
+            "meta": {
+              "type": "keyword"
+            },
+            "name": {
+              "fields": {
+                "text": {
+                  "type": "text"
+                }
+              },
+              "type": "keyword"
+            },
+            "os_types": {
+              "type": "keyword"
+            },
+            "tags": {
+              "fields": {
+                "text": {
+                  "type": "text"
+                }
+              },
+              "type": "keyword"
+            },
+            "tie_breaker_id": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "updated_by": {
+              "type": "keyword"
+            },
+            "version": {
+              "type": "keyword"
+            }
+          }
+        },
+        "file-upload-usage-collection-telemetry": {
+          "properties": {
+            "file_upload": {
+              "properties": {
+                "index_creation_count": {
+                  "type": "long"
+                }
+              }
+            }
+          }
+        },
+        "fleet-agent-actions": {
+          "properties": {
+            "ack_data": {
+              "type": "text"
+            },
+            "agent_id": {
+              "type": "keyword"
+            },
+            "created_at": {
+              "type": "date"
+            },
+            "data": {
+              "type": "binary"
+            },
+            "policy_id": {
+              "type": "keyword"
+            },
+            "policy_revision": {
+              "type": "integer"
+            },
+            "sent_at": {
+              "type": "date"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "fleet-agents": {
+          "properties": {
+            "access_api_key_id": {
+              "type": "keyword"
+            },
+            "active": {
+              "type": "boolean"
+            },
+            "current_error_events": {
+              "index": false,
+              "type": "text"
+            },
+            "default_api_key": {
+              "type": "binary"
+            },
+            "default_api_key_id": {
+              "type": "keyword"
+            },
+            "enrolled_at": {
+              "type": "date"
+            },
+            "last_checkin": {
+              "type": "date"
+            },
+            "last_checkin_status": {
+              "type": "keyword"
+            },
+            "last_updated": {
+              "type": "date"
+            },
+            "local_metadata": {
+              "type": "flattened"
+            },
+            "packages": {
+              "type": "keyword"
+            },
+            "policy_id": {
+              "type": "keyword"
+            },
+            "policy_revision": {
+              "type": "integer"
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "unenrolled_at": {
+              "type": "date"
+            },
+            "unenrollment_started_at": {
+              "type": "date"
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "upgrade_started_at": {
+              "type": "date"
+            },
+            "upgraded_at": {
+              "type": "date"
+            },
+            "user_provided_metadata": {
+              "type": "flattened"
+            },
+            "version": {
+              "type": "keyword"
+            }
+          }
+        },
+        "fleet-enrollment-api-keys": {
+          "properties": {
+            "active": {
+              "type": "boolean"
+            },
+            "api_key": {
+              "type": "binary"
+            },
+            "api_key_id": {
+              "type": "keyword"
+            },
+            "created_at": {
+              "type": "date"
+            },
+            "expire_at": {
+              "type": "date"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "policy_id": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            },
+            "updated_at": {
+              "type": "date"
+            }
+          }
+        },
+        "fleet-preconfiguration-deletion-record": {
+          "properties": {
+            "id": {
+              "type": "keyword"
+            }
+          }
+        },
+        "graph-workspace": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "legacyIndexPatternRef": {
+              "index": false,
+              "type": "text"
+            },
+            "numLinks": {
+              "type": "integer"
+            },
+            "numVertices": {
+              "type": "integer"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            },
+            "wsState": {
+              "type": "text"
+            }
+          }
+        },
+        "index-pattern": {
+          "dynamic": "false",
+          "properties": {
+            "title": {
+              "type": "text"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "infrastructure-ui-source": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "ingest-agent-policies": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "is_default": {
+              "type": "boolean"
+            },
+            "is_default_fleet_server": {
+              "type": "boolean"
+            },
+            "is_managed": {
+              "type": "boolean"
+            },
+            "is_preconfigured": {
+              "type": "keyword"
+            },
+            "monitoring_enabled": {
+              "index": false,
+              "type": "keyword"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "namespace": {
+              "type": "keyword"
+            },
+            "package_policies": {
+              "type": "keyword"
+            },
+            "revision": {
+              "type": "integer"
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "updated_by": {
+              "type": "keyword"
+            }
+          }
+        },
+        "ingest-outputs": {
+          "properties": {
+            "ca_sha256": {
+              "index": false,
+              "type": "keyword"
+            },
+            "config": {
+              "type": "flattened"
+            },
+            "config_yaml": {
+              "type": "text"
+            },
+            "hosts": {
+              "type": "keyword"
+            },
+            "is_default": {
+              "type": "boolean"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "ingest-package-policies": {
+          "properties": {
+            "created_at": {
+              "type": "date"
+            },
+            "created_by": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "text"
+            },
+            "enabled": {
+              "type": "boolean"
+            },
+            "inputs": {
+              "enabled": false,
+              "properties": {
+                "compiled_input": {
+                  "type": "flattened"
+                },
+                "config": {
+                  "type": "flattened"
+                },
+                "enabled": {
+                  "type": "boolean"
+                },
+                "streams": {
+                  "properties": {
+                    "compiled_stream": {
+                      "type": "flattened"
+                    },
+                    "config": {
+                      "type": "flattened"
+                    },
+                    "data_stream": {
+                      "properties": {
+                        "dataset": {
+                          "type": "keyword"
+                        },
+                        "type": {
+                          "type": "keyword"
+                        }
+                      }
+                    },
+                    "enabled": {
+                      "type": "boolean"
+                    },
+                    "id": {
+                      "type": "keyword"
+                    },
+                    "vars": {
+                      "type": "flattened"
+                    }
+                  },
+                  "type": "nested"
+                },
+                "type": {
+                  "type": "keyword"
+                },
+                "vars": {
+                  "type": "flattened"
+                }
+              },
+              "type": "nested"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "namespace": {
+              "type": "keyword"
+            },
+            "output_id": {
+              "type": "keyword"
+            },
+            "package": {
+              "properties": {
+                "name": {
+                  "type": "keyword"
+                },
+                "title": {
+                  "type": "keyword"
+                },
+                "version": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "policy_id": {
+              "type": "keyword"
+            },
+            "revision": {
+              "type": "integer"
+            },
+            "updated_at": {
+              "type": "date"
+            },
+            "updated_by": {
+              "type": "keyword"
+            }
+          }
+        },
+        "ingest_manager_settings": {
+          "properties": {
+            "fleet_server_hosts": {
+              "type": "keyword"
+            },
+            "has_seen_add_data_notice": {
+              "index": false,
+              "type": "boolean"
+            },
+            "has_seen_fleet_migration_notice": {
+              "index": false,
+              "type": "boolean"
+            }
+          }
+        },
+        "inventory-view": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "kql-telemetry": {
+          "properties": {
+            "optInCount": {
+              "type": "long"
+            },
+            "optOutCount": {
+              "type": "long"
+            }
+          }
+        },
+        "legacy-url-alias": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "lens": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "expression": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "state": {
+              "type": "flattened"
+            },
+            "title": {
+              "type": "text"
+            },
+            "visualizationType": {
+              "type": "keyword"
+            }
+          }
+        },
+        "lens-ui-telemetry": {
+          "properties": {
+            "count": {
+              "type": "integer"
+            },
+            "date": {
+              "type": "date"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "map": {
+          "properties": {
+            "bounds": {
+              "dynamic": "false",
+              "type": "object"
+            },
+            "description": {
+              "type": "text"
+            },
+            "layerListJSON": {
+              "type": "text"
+            },
+            "mapStateJSON": {
+              "type": "text"
+            },
+            "title": {
+              "type": "text"
+            },
+            "uiStateJSON": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "maps-telemetry": {
+          "enabled": false,
+          "type": "object"
+        },
+        "metrics-explorer-view": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "migrationVersion": {
+          "dynamic": "true",
+          "properties": {
+            "action": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "cases": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "cases-comments": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "cases-configure": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "cases-user-actions": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "config": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "dashboard": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "index-pattern": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "ingest-agent-policies": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "ingest-outputs": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "ingest-package-policies": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "ingest_manager_settings": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "search": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "space": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "visualization": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "ml-job": {
+          "properties": {
+            "datafeed_id": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "job_id": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          }
+        },
+        "ml-module": {
+          "dynamic": "false",
+          "properties": {
+            "datafeeds": {
+              "type": "object"
+            },
+            "defaultIndexPattern": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "description": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "id": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "jobs": {
+              "type": "object"
+            },
+            "logo": {
+              "type": "object"
+            },
+            "query": {
+              "type": "object"
+            },
+            "title": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "type": {
+              "fields": {
+                "keyword": {
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "monitoring-telemetry": {
+          "properties": {
+            "reportedClusterUuids": {
+              "type": "keyword"
+            }
+          }
+        },
+        "namespace": {
+          "type": "keyword"
+        },
+        "namespaces": {
+          "type": "keyword"
+        },
+        "originId": {
+          "type": "keyword"
+        },
+        "query": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "filters": {
+              "enabled": false,
+              "type": "object"
+            },
+            "query": {
+              "properties": {
+                "language": {
+                  "type": "keyword"
+                },
+                "query": {
+                  "index": false,
+                  "type": "keyword"
+                }
+              }
+            },
+            "timefilter": {
+              "enabled": false,
+              "type": "object"
+            },
+            "title": {
+              "type": "text"
+            }
+          }
+        },
+        "references": {
+          "properties": {
+            "id": {
+              "type": "keyword"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "type": {
+              "type": "keyword"
+            }
+          },
+          "type": "nested"
+        },
+        "sample-data-telemetry": {
+          "properties": {
+            "installCount": {
+              "type": "long"
+            },
+            "unInstallCount": {
+              "type": "long"
+            }
+          }
+        },
+        "search": {
+          "properties": {
+            "columns": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "description": {
+              "type": "text"
+            },
+            "grid": {
+              "enabled": false,
+              "type": "object"
+            },
+            "hideChart": {
+              "doc_values": false,
+              "index": false,
+              "type": "boolean"
+            },
+            "hits": {
+              "doc_values": false,
+              "index": false,
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "index": false,
+                  "type": "text"
+                }
+              }
+            },
+            "sort": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "search-session": {
+          "properties": {
+            "appId": {
+              "type": "keyword"
+            },
+            "completed": {
+              "type": "date"
+            },
+            "created": {
+              "type": "date"
+            },
+            "expires": {
+              "type": "date"
+            },
+            "idMapping": {
+              "enabled": false,
+              "type": "object"
+            },
+            "initialState": {
+              "enabled": false,
+              "type": "object"
+            },
+            "name": {
+              "type": "keyword"
+            },
+            "persisted": {
+              "type": "boolean"
+            },
+            "realmName": {
+              "type": "keyword"
+            },
+            "realmType": {
+              "type": "keyword"
+            },
+            "restoreState": {
+              "enabled": false,
+              "type": "object"
+            },
+            "sessionId": {
+              "type": "keyword"
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "touched": {
+              "type": "date"
+            },
+            "urlGeneratorId": {
+              "type": "keyword"
+            },
+            "username": {
+              "type": "keyword"
+            }
+          }
+        },
+        "search-telemetry": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "security-rule": {
+          "dynamic": "false",
+          "properties": {
+            "name": {
+              "type": "keyword"
+            },
+            "rule_id": {
+              "type": "keyword"
+            },
+            "version": {
+              "type": "long"
+            }
+          }
+        },
+        "security-solution-signals-migration": {
+          "properties": {
+            "created": {
+              "index": false,
+              "type": "date"
+            },
+            "createdBy": {
+              "index": false,
+              "type": "text"
+            },
+            "destinationIndex": {
+              "index": false,
+              "type": "keyword"
+            },
+            "error": {
+              "index": false,
+              "type": "text"
+            },
+            "sourceIndex": {
+              "type": "keyword"
+            },
+            "status": {
+              "index": false,
+              "type": "keyword"
+            },
+            "taskId": {
+              "index": false,
+              "type": "keyword"
+            },
+            "updated": {
+              "index": false,
+              "type": "date"
+            },
+            "updatedBy": {
+              "index": false,
+              "type": "text"
+            },
+            "version": {
+              "type": "long"
+            }
+          }
+        },
+        "siem-detection-engine-rule-actions": {
+          "properties": {
+            "actions": {
+              "properties": {
+                "action_type_id": {
+                  "type": "keyword"
+                },
+                "group": {
+                  "type": "keyword"
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "params": {
+                  "enabled": false,
+                  "type": "object"
+                }
+              }
+            },
+            "alertThrottle": {
+              "type": "keyword"
+            },
+            "ruleAlertId": {
+              "type": "keyword"
+            },
+            "ruleThrottle": {
+              "type": "keyword"
+            }
+          }
+        },
+        "siem-detection-engine-rule-status": {
+          "properties": {
+            "alertId": {
+              "type": "keyword"
+            },
+            "bulkCreateTimeDurations": {
+              "type": "float"
+            },
+            "gap": {
+              "type": "text"
+            },
+            "lastFailureAt": {
+              "type": "date"
+            },
+            "lastFailureMessage": {
+              "type": "text"
+            },
+            "lastLookBackDate": {
+              "type": "date"
+            },
+            "lastSuccessAt": {
+              "type": "date"
+            },
+            "lastSuccessMessage": {
+              "type": "text"
+            },
+            "searchAfterTimeDurations": {
+              "type": "float"
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "statusDate": {
+              "type": "date"
+            }
+          }
+        },
+        "siem-ui-timeline": {
+          "properties": {
+            "columns": {
+              "properties": {
+                "aggregatable": {
+                  "type": "boolean"
+                },
+                "category": {
+                  "type": "keyword"
+                },
+                "columnHeaderType": {
+                  "type": "keyword"
+                },
+                "description": {
+                  "type": "text"
+                },
+                "example": {
+                  "type": "text"
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "indexes": {
+                  "type": "keyword"
+                },
+                "name": {
+                  "type": "text"
+                },
+                "placeholder": {
+                  "type": "text"
+                },
+                "searchable": {
+                  "type": "boolean"
+                },
+                "type": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "created": {
+              "type": "date"
+            },
+            "createdBy": {
+              "type": "text"
+            },
+            "dataProviders": {
+              "properties": {
+                "and": {
+                  "properties": {
+                    "enabled": {
+                      "type": "boolean"
+                    },
+                    "excluded": {
+                      "type": "boolean"
+                    },
+                    "id": {
+                      "type": "keyword"
+                    },
+                    "kqlQuery": {
+                      "type": "text"
+                    },
+                    "name": {
+                      "type": "text"
+                    },
+                    "queryMatch": {
+                      "properties": {
+                        "displayField": {
+                          "type": "text"
+                        },
+                        "displayValue": {
+                          "type": "text"
+                        },
+                        "field": {
+                          "type": "text"
+                        },
+                        "operator": {
+                          "type": "text"
+                        },
+                        "value": {
+                          "type": "text"
+                        }
+                      }
+                    },
+                    "type": {
+                      "type": "text"
+                    }
+                  }
+                },
+                "enabled": {
+                  "type": "boolean"
+                },
+                "excluded": {
+                  "type": "boolean"
+                },
+                "id": {
+                  "type": "keyword"
+                },
+                "kqlQuery": {
+                  "type": "text"
+                },
+                "name": {
+                  "type": "text"
+                },
+                "queryMatch": {
+                  "properties": {
+                    "displayField": {
+                      "type": "text"
+                    },
+                    "displayValue": {
+                      "type": "text"
+                    },
+                    "field": {
+                      "type": "text"
+                    },
+                    "operator": {
+                      "type": "text"
+                    },
+                    "value": {
+                      "type": "text"
+                    }
+                  }
+                },
+                "type": {
+                  "type": "text"
+                }
+              }
+            },
+            "dateRange": {
+              "properties": {
+                "end": {
+                  "type": "date"
+                },
+                "start": {
+                  "type": "date"
+                }
+              }
+            },
+            "description": {
+              "type": "text"
+            },
+            "eqlOptions": {
+              "properties": {
+                "eventCategoryField": {
+                  "type": "text"
+                },
+                "query": {
+                  "type": "text"
+                },
+                "size": {
+                  "type": "text"
+                },
+                "tiebreakerField": {
+                  "type": "text"
+                },
+                "timestampField": {
+                  "type": "text"
+                }
+              }
+            },
+            "eventType": {
+              "type": "keyword"
+            },
+            "excludedRowRendererIds": {
+              "type": "text"
+            },
+            "favorite": {
+              "properties": {
+                "favoriteDate": {
+                  "type": "date"
+                },
+                "fullName": {
+                  "type": "text"
+                },
+                "keySearch": {
+                  "type": "text"
+                },
+                "userName": {
+                  "type": "text"
+                }
+              }
+            },
+            "filters": {
+              "properties": {
+                "exists": {
+                  "type": "text"
+                },
+                "match_all": {
+                  "type": "text"
+                },
+                "meta": {
+                  "properties": {
+                    "alias": {
+                      "type": "text"
+                    },
+                    "controlledBy": {
+                      "type": "text"
+                    },
+                    "disabled": {
+                      "type": "boolean"
+                    },
+                    "field": {
+                      "type": "text"
+                    },
+                    "formattedValue": {
+                      "type": "text"
+                    },
+                    "index": {
+                      "type": "keyword"
+                    },
+                    "key": {
+                      "type": "keyword"
+                    },
+                    "negate": {
+                      "type": "boolean"
+                    },
+                    "params": {
+                      "type": "text"
+                    },
+                    "type": {
+                      "type": "keyword"
+                    },
+                    "value": {
+                      "type": "text"
+                    }
+                  }
+                },
+                "missing": {
+                  "type": "text"
+                },
+                "query": {
+                  "type": "text"
+                },
+                "range": {
+                  "type": "text"
+                },
+                "script": {
+                  "type": "text"
+                }
+              }
+            },
+            "indexNames": {
+              "type": "text"
+            },
+            "kqlMode": {
+              "type": "keyword"
+            },
+            "kqlQuery": {
+              "properties": {
+                "filterQuery": {
+                  "properties": {
+                    "kuery": {
+                      "properties": {
+                        "expression": {
+                          "type": "text"
+                        },
+                        "kind": {
+                          "type": "keyword"
+                        }
+                      }
+                    },
+                    "serializedQuery": {
+                      "type": "text"
+                    }
+                  }
+                }
+              }
+            },
+            "savedQueryId": {
+              "type": "keyword"
+            },
+            "sort": {
+              "dynamic": "false",
+              "properties": {
+                "columnId": {
+                  "type": "keyword"
+                },
+                "columnType": {
+                  "type": "keyword"
+                },
+                "sortDirection": {
+                  "type": "keyword"
+                }
+              }
+            },
+            "status": {
+              "type": "keyword"
+            },
+            "templateTimelineId": {
+              "type": "text"
+            },
+            "templateTimelineVersion": {
+              "type": "integer"
+            },
+            "timelineType": {
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "updated": {
+              "type": "date"
+            },
+            "updatedBy": {
+              "type": "text"
+            }
+          }
+        },
+        "siem-ui-timeline-note": {
+          "properties": {
+            "created": {
+              "type": "date"
+            },
+            "createdBy": {
+              "type": "text"
+            },
+            "eventId": {
+              "type": "keyword"
+            },
+            "note": {
+              "type": "text"
+            },
+            "timelineId": {
+              "type": "keyword"
+            },
+            "updated": {
+              "type": "date"
+            },
+            "updatedBy": {
+              "type": "text"
+            }
+          }
+        },
+        "siem-ui-timeline-pinned-event": {
+          "properties": {
+            "created": {
+              "type": "date"
+            },
+            "createdBy": {
+              "type": "text"
+            },
+            "eventId": {
+              "type": "keyword"
+            },
+            "timelineId": {
+              "type": "keyword"
+            },
+            "updated": {
+              "type": "date"
+            },
+            "updatedBy": {
+              "type": "text"
+            }
+          }
+        },
+        "space": {
+          "properties": {
+            "_reserved": {
+              "type": "boolean"
+            },
+            "color": {
+              "type": "keyword"
+            },
+            "description": {
+              "type": "text"
+            },
+            "disabledFeatures": {
+              "type": "keyword"
+            },
+            "imageUrl": {
+              "index": false,
+              "type": "text"
+            },
+            "initials": {
+              "type": "keyword"
+            },
+            "name": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 2048,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "spaces-usage-stats": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "tag": {
+          "properties": {
+            "color": {
+              "type": "text"
+            },
+            "description": {
+              "type": "text"
+            },
+            "name": {
+              "type": "text"
+            }
+          }
+        },
+        "telemetry": {
+          "properties": {
+            "allowChangingOptInStatus": {
+              "type": "boolean"
+            },
+            "enabled": {
+              "type": "boolean"
+            },
+            "lastReported": {
+              "type": "date"
+            },
+            "lastVersionChecked": {
+              "type": "keyword"
+            },
+            "reportFailureCount": {
+              "type": "integer"
+            },
+            "reportFailureVersion": {
+              "type": "keyword"
+            },
+            "sendUsageFrom": {
+              "type": "keyword"
+            },
+            "userHasSeenNotice": {
+              "type": "boolean"
+            }
+          }
+        },
+        "timelion-sheet": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "hits": {
+              "type": "integer"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "type": "text"
+                }
+              }
+            },
+            "timelion_chart_height": {
+              "type": "integer"
+            },
+            "timelion_columns": {
+              "type": "integer"
+            },
+            "timelion_interval": {
+              "type": "keyword"
+            },
+            "timelion_other_interval": {
+              "type": "keyword"
+            },
+            "timelion_rows": {
+              "type": "integer"
+            },
+            "timelion_sheet": {
+              "type": "text"
+            },
+            "title": {
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            }
+          }
+        },
+        "type": {
+          "type": "keyword"
+        },
+        "ui-counter": {
+          "properties": {
+            "count": {
+              "type": "integer"
+            }
+          }
+        },
+        "ui-metric": {
+          "properties": {
+            "count": {
+              "type": "integer"
+            }
+          }
+        },
+        "updated_at": {
+          "type": "date"
+        },
+        "upgrade-assistant-reindex-operation": {
+          "properties": {
+            "errorMessage": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "indexName": {
+              "type": "keyword"
+            },
+            "lastCompletedStep": {
+              "type": "long"
+            },
+            "locked": {
+              "type": "date"
+            },
+            "newIndexName": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "reindexOptions": {
+              "properties": {
+                "openAndClose": {
+                  "type": "boolean"
+                },
+                "queueSettings": {
+                  "properties": {
+                    "queuedAt": {
+                      "type": "long"
+                    },
+                    "startedAt": {
+                      "type": "long"
+                    }
+                  }
+                }
+              }
+            },
+            "reindexTaskId": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 256,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            },
+            "reindexTaskPercComplete": {
+              "type": "float"
+            },
+            "runningReindexCount": {
+              "type": "integer"
+            },
+            "status": {
+              "type": "integer"
+            }
+          }
+        },
+        "upgrade-assistant-telemetry": {
+          "properties": {
+            "features": {
+              "properties": {
+                "deprecation_logging": {
+                  "properties": {
+                    "enabled": {
+                      "null_value": true,
+                      "type": "boolean"
+                    }
+                  }
+                }
+              }
+            },
+            "ui_open": {
+              "properties": {
+                "cluster": {
+                  "null_value": 0,
+                  "type": "long"
+                },
+                "indices": {
+                  "null_value": 0,
+                  "type": "long"
+                },
+                "overview": {
+                  "null_value": 0,
+                  "type": "long"
+                }
+              }
+            },
+            "ui_reindex": {
+              "properties": {
+                "close": {
+                  "null_value": 0,
+                  "type": "long"
+                },
+                "open": {
+                  "null_value": 0,
+                  "type": "long"
+                },
+                "start": {
+                  "null_value": 0,
+                  "type": "long"
+                },
+                "stop": {
+                  "null_value": 0,
+                  "type": "long"
+                }
+              }
+            }
+          }
+        },
+        "uptime-dynamic-settings": {
+          "dynamic": "false",
+          "type": "object"
+        },
+        "url": {
+          "properties": {
+            "accessCount": {
+              "type": "long"
+            },
+            "accessDate": {
+              "type": "date"
+            },
+            "createDate": {
+              "type": "date"
+            },
+            "url": {
+              "fields": {
+                "keyword": {
+                  "ignore_above": 2048,
+                  "type": "keyword"
+                }
+              },
+              "type": "text"
+            }
+          }
+        },
+        "usage-counters": {
+          "dynamic": "false",
+          "properties": {
+            "domainId": {
+              "type": "keyword"
+            }
+          }
+        },
+        "visualization": {
+          "properties": {
+            "description": {
+              "type": "text"
+            },
+            "kibanaSavedObjectMeta": {
+              "properties": {
+                "searchSourceJSON": {
+                  "index": false,
+                  "type": "text"
+                }
+              }
+            },
+            "savedSearchRefName": {
+              "doc_values": false,
+              "index": false,
+              "type": "keyword"
+            },
+            "title": {
+              "type": "text"
+            },
+            "uiStateJSON": {
+              "index": false,
+              "type": "text"
+            },
+            "version": {
+              "type": "integer"
+            },
+            "visState": {
+              "index": false,
+              "type": "text"
+            }
+          }
+        },
+        "workplace_search_telemetry": {
+          "dynamic": "false",
+          "type": "object"
+        }
+      }
+    },
+    "settings": {
+      "index": {
+        "auto_expand_replicas": "0-1",
+        "number_of_replicas": "1",
+        "number_of_shards": "1",
+        "priority": "10",
+        "refresh_interval": "1s"
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts
index 0fc85f78ac90b..d02bc591a80a2 100644
--- a/x-pack/test/functional/page_objects/lens_page.ts
+++ b/x-pack/test/functional/page_objects/lens_page.ts
@@ -491,6 +491,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       await testSubjects.click('lnsApp_saveAndReturnButton');
     },
 
+    async expectSaveAndReturnButtonDisabled() {
+      const button = await testSubjects.find('lnsApp_saveAndReturnButton', 10000);
+      const disabledAttr = await button.getAttribute('disabled');
+      expect(disabledAttr).to.be('true');
+    },
+
     async editDimensionLabel(label: string) {
       await testSubjects.setValue('indexPattern-label-edit', label, { clearWithKeyboard: true });
     },
diff --git a/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts b/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts
index 2626ef2421f0b..fd3a5abc0e4bf 100644
--- a/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts
+++ b/x-pack/test/plugin_api_integration/test_suites/task_manager/health_route.ts
@@ -30,7 +30,7 @@ interface MonitoringStats {
         non_recurring: number;
         owner_ids: number;
         estimated_schedule_density: number[];
-        capacity_requirments: {
+        capacity_requirements: {
           per_minute: number;
           per_hour: number;
           per_day: number;
@@ -218,9 +218,9 @@ export default function ({ getService }: FtrProviderContext) {
       expect(typeof workload.non_recurring).to.eql('number');
       expect(typeof workload.owner_ids).to.eql('number');
 
-      expect(typeof workload.capacity_requirments.per_minute).to.eql('number');
-      expect(typeof workload.capacity_requirments.per_hour).to.eql('number');
-      expect(typeof workload.capacity_requirments.per_day).to.eql('number');
+      expect(typeof workload.capacity_requirements.per_minute).to.eql('number');
+      expect(typeof workload.capacity_requirements.per_hour).to.eql('number');
+      expect(typeof workload.capacity_requirements.per_day).to.eql('number');
 
       expect(Array.isArray(workload.estimated_schedule_density)).to.eql(true);
 
diff --git a/yarn.lock b/yarn.lock
index b95056a78ea8b..8bce932ee9e4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1197,10 +1197,10 @@
   resolved "https://registry.yarnpkg.com/@bazel/ibazel/-/ibazel-0.15.10.tgz#cf0cff1aec6d8e7bb23e1fc618d09fbd39b7a13f"
   integrity sha512-0v+OwCQ6fsGFa50r6MXWbUkSGuWOoZ22K4pMSdtWiL5LKFIE4kfmMmtQS+M7/ICNwk2EIYob+NRreyi/DGUz5A==
 
-"@bazel/typescript@^3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@bazel/typescript/-/typescript-3.5.1.tgz#c6027d683adeefa2c3cebfa3ed5efa17c405a63b"
-  integrity sha512-dU5sGgaGdFWV1dJ1B+9iFbttgcKtmob+BvlM8mY7Nxq4j7/wVbgPjiVLOBeOD7kpzYep8JHXfhAokHt486IG+Q==
+"@bazel/typescript@^3.6.0":
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/@bazel/typescript/-/typescript-3.6.0.tgz#4dda2e39505cde4a190f51118fbb82ea0e80fde6"
+  integrity sha512-cO58iHmSxM4mRHJLLbb3FfoJJxv0pMiVGFLORoiUy/EhLtyYGZ1e7ntf4GxEovwK/E4h/awjSUlQkzPThcukTg==
   dependencies:
     protobufjs "6.8.8"
     semver "5.6.0"