From da0da4ca752f01428e126964039b0ac867580c21 Mon Sep 17 00:00:00 2001
From: Robert Austin <robert.austin@elastic.co>
Date: Fri, 21 Aug 2020 09:43:42 -0400
Subject: [PATCH 01/25] [Security Solution] modify circular deps checker to
 output images of circular deps graphs (#75579)

---
 .../run_check_circular_deps_cli.js            | 45 ++++++++++++++++---
 1 file changed, 40 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security_solution/scripts/check_circular_deps/run_check_circular_deps_cli.js b/x-pack/plugins/security_solution/scripts/check_circular_deps/run_check_circular_deps_cli.js
index 9b4a57f09066d..ac4102184091d 100644
--- a/x-pack/plugins/security_solution/scripts/check_circular_deps/run_check_circular_deps_cli.js
+++ b/x-pack/plugins/security_solution/scripts/check_circular_deps/run_check_circular_deps_cli.js
@@ -4,17 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { resolve } from 'path';
-
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import madge from 'madge';
 /* eslint-disable-next-line import/no-extraneous-dependencies */
 import { run, createFailError } from '@kbn/dev-utils';
+import * as os from 'os';
+import * as path from 'path';
 
 run(
-  async ({ log }) => {
+  async ({ log, flags }) => {
     const result = await madge(
-      [resolve(__dirname, '../../public'), resolve(__dirname, '../../common')],
+      [path.resolve(__dirname, '../../public'), path.resolve(__dirname, '../../common')],
       {
         fileExtensions: ['ts', 'js', 'tsx'],
         excludeRegExp: [
@@ -34,6 +34,13 @@ run(
 
     const circularFound = result.circular();
     if (circularFound.length !== 0) {
+      if (flags.svg) {
+        await outputSVGs(circularFound);
+      } else {
+        console.log(
+          'Run this program with the --svg flag to save an SVG showing the dependency graph.'
+        );
+      }
       throw createFailError(
         `SIEM circular dependencies of imports has been found:\n - ${circularFound.join('\n - ')}`
       );
@@ -42,6 +49,34 @@ run(
     }
   },
   {
-    description: 'Check the SIEM plugin for circular deps',
+    description:
+      'Check the Security Solution plugin for circular deps. If any are found, this will throw an Error.',
+    flags: {
+      help: '  --svg,             Output SVGs of circular dependency graphs',
+      boolean: ['svg'],
+      default: {
+        svg: false,
+      },
+    },
   }
 );
+
+async function outputSVGs(circularFound) {
+  let count = 0;
+  for (const found of circularFound) {
+    // Calculate the path using the os tmpdir and an increasing 'count'
+    const expectedImagePath = path.join(os.tmpdir(), `security_solution-circular-dep-${count}.svg`);
+    console.log(`Attempting to save SVG for circular dependency: ${found}`);
+    count++;
+
+    // Graph just the files in the found circular dependency.
+    const specificGraph = await madge(found, {
+      fileExtensions: ['ts', 'js', 'tsx'],
+    });
+
+    // Output an SVG in the tmp directory
+    const imagePath = await specificGraph.image(expectedImagePath);
+
+    console.log(`Saved SVG: ${imagePath}`);
+  }
+}

From c68363995b5fc0ce6820c5cdd92ab0d8d6d29d58 Mon Sep 17 00:00:00 2001
From: Aleh Zasypkin <aleh.zasypkin@gmail.com>
Date: Fri, 21 Aug 2020 16:15:12 +0200
Subject: [PATCH 02/25] Improve login UI error message. (#75642)

---
 .../components/login_form/login_form.test.tsx | 49 +++++++++++++++++++
 .../components/login_form/login_form.tsx      | 14 ++++--
 2 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
index 552d523fa4a84..b6dd06595ae7f 100644
--- a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
+++ b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.test.tsx
@@ -421,9 +421,58 @@ describe('LoginForm', () => {
       expect(window.location.href).toBe(currentURL);
       expect(coreStartMock.notifications.toasts.addError).toHaveBeenCalledWith(failureReason, {
         title: 'Could not perform login.',
+        toastMessage: 'Oh no!',
       });
     });
 
+    it('shows error with message in the `body`', async () => {
+      const currentURL = `https://some-host/login?next=${encodeURIComponent(
+        '/some-base-path/app/kibana#/home?_g=()'
+      )}`;
+
+      const coreStartMock = coreMock.createStart({ basePath: '/some-base-path' });
+      coreStartMock.http.post.mockRejectedValue({
+        body: { message: 'Oh no! But with much more details!' },
+        message: 'Oh no!',
+      });
+
+      window.location.href = currentURL;
+      const wrapper = mountWithIntl(
+        <LoginForm
+          http={coreStartMock.http}
+          notifications={coreStartMock.notifications}
+          loginAssistanceMessage=""
+          selector={{
+            enabled: true,
+            providers: [
+              { type: 'basic', name: 'basic', usesLoginForm: true },
+              { type: 'saml', name: 'saml1', usesLoginForm: false },
+            ],
+          }}
+        />
+      );
+
+      expectPageMode(wrapper, PageMode.Selector);
+
+      wrapper.findWhere((node) => node.key() === 'saml1').simulate('click');
+
+      await act(async () => {
+        await nextTick();
+        wrapper.update();
+      });
+
+      expect(coreStartMock.http.post).toHaveBeenCalledTimes(1);
+      expect(coreStartMock.http.post).toHaveBeenCalledWith('/internal/security/login', {
+        body: JSON.stringify({ providerType: 'saml', providerName: 'saml1', currentURL }),
+      });
+
+      expect(window.location.href).toBe(currentURL);
+      expect(coreStartMock.notifications.toasts.addError).toHaveBeenCalledWith(
+        new Error('Oh no! But with much more details!'),
+        { title: 'Could not perform login.', toastMessage: 'Oh no!' }
+      );
+    });
+
     it('properly switches to login form', async () => {
       const currentURL = `https://some-host/login?next=${encodeURIComponent(
         '/some-base-path/app/kibana#/home?_g=()'
diff --git a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
index 9ea553af75e00..a929b50fa1ffa 100644
--- a/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
+++ b/x-pack/plugins/security/public/authentication/login/components/login_form/login_form.tsx
@@ -451,11 +451,15 @@ export class LoginForm extends Component<Props, State> {
 
       window.location.href = location;
     } catch (err) {
-      this.props.notifications.toasts.addError(err, {
-        title: i18n.translate('xpack.security.loginPage.loginSelectorErrorMessage', {
-          defaultMessage: 'Could not perform login.',
-        }),
-      });
+      this.props.notifications.toasts.addError(
+        err?.body?.message ? new Error(err?.body?.message) : err,
+        {
+          title: i18n.translate('xpack.security.loginPage.loginSelectorErrorMessage', {
+            defaultMessage: 'Could not perform login.',
+          }),
+          toastMessage: err?.message,
+        }
+      );
 
       this.setState({ loadingState: { type: LoadingStateType.None } });
     }

From 6b3ce3f91ee53c9050401af1edb80bd8793cf1c4 Mon Sep 17 00:00:00 2001
From: Devon Thomson <devon.thomson@hotmail.com>
Date: Fri, 21 Aug 2020 10:18:14 -0400
Subject: [PATCH 03/25] [Dashboard First] Lens Originating App Breadcrumb
 (#75470)

Changed lens breadcrumbs to reflect the Originating App
---
 .../lens/public/app_plugin/app.test.tsx       | 34 +++++++++++++++++++
 x-pack/plugins/lens/public/app_plugin/app.tsx | 21 +++++++++++-
 2 files changed, 54 insertions(+), 1 deletion(-)

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 f92343183a700..70136a486e8c1 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -136,6 +136,7 @@ describe('Lens App', () => {
     originatingApp: string | undefined;
     onAppLeave: AppMountParameters['onAppLeave'];
     history: History;
+    getAppNameFromId?: (appId: string) => string | undefined;
   }> {
     return ({
       navigation: navigationStartMock,
@@ -187,6 +188,7 @@ describe('Lens App', () => {
       originatingApp: string | undefined;
       onAppLeave: AppMountParameters['onAppLeave'];
       history: History;
+      getAppNameFromId?: (appId: string) => string | undefined;
     }>;
   }
 
@@ -298,6 +300,38 @@ describe('Lens App', () => {
     ]);
   });
 
+  it('sets originatingApp breadcrumb when the document title changes', async () => {
+    const defaultArgs = makeDefaultArgs();
+    defaultArgs.originatingApp = 'ultraCoolDashboard';
+    defaultArgs.getAppNameFromId = () => 'The Coolest Container Ever Made';
+    instance = mount(<App {...defaultArgs} />);
+
+    expect(core.chrome.setBreadcrumbs).toHaveBeenCalledWith([
+      { text: 'The Coolest Container Ever Made', onClick: expect.anything() },
+      { text: 'Visualize', href: '/testbasepath/app/visualize#/', onClick: expect.anything() },
+      { text: 'Create' },
+    ]);
+
+    (defaultArgs.docStorage.load as jest.Mock).mockResolvedValue({
+      id: '1234',
+      title: 'Daaaaaaadaumching!',
+      expression: 'valid expression',
+      state: {
+        query: 'fake query',
+        datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
+      },
+    });
+    await act(async () => {
+      instance.setProps({ docId: '1234' });
+    });
+
+    expect(defaultArgs.core.chrome.setBreadcrumbs).toHaveBeenCalledWith([
+      { text: 'The Coolest Container Ever Made', onClick: expect.anything() },
+      { text: 'Visualize', href: '/testbasepath/app/visualize#/', onClick: expect.anything() },
+      { text: 'Daaaaaaadaumching!' },
+    ]);
+  });
+
   describe('persistence', () => {
     it('does not load a document if there is no document id', () => {
       const args = makeDefaultArgs();
diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
index b20fe2f804683..5ca6f27a0c578 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { AppMountContext, AppMountParameters, NotificationsStart } from 'kibana/public';
 import { History } from 'history';
+import { EuiBreadcrumb } from '@elastic/eui';
 import {
   Query,
   DataPublicPluginStart,
@@ -203,6 +204,16 @@ export function App({
   // Sync Kibana breadcrumbs any time the saved document's title changes
   useEffect(() => {
     core.chrome.setBreadcrumbs([
+      ...(originatingApp && getAppNameFromId
+        ? [
+            {
+              onClick: (e) => {
+                core.application.navigateToApp(originatingApp);
+              },
+              text: getAppNameFromId(originatingApp),
+            } as EuiBreadcrumb,
+          ]
+        : []),
       {
         href: core.http.basePath.prepend(`/app/visualize#/`),
         onClick: (e) => {
@@ -219,7 +230,15 @@ export function App({
           : i18n.translate('xpack.lens.breadcrumbsCreate', { defaultMessage: 'Create' }),
       },
     ]);
-  }, [core.application, core.chrome, core.http.basePath, state.persistedDoc]);
+  }, [
+    core.application,
+    core.chrome,
+    core.http.basePath,
+    state.persistedDoc,
+    originatingApp,
+    redirectTo,
+    getAppNameFromId,
+  ]);
 
   useEffect(
     () => {

From 338b61ce6c1643af23b42e9a130085b0a55e8e80 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?=
 <alejandro.haro@elastic.co>
Date: Fri, 21 Aug 2020 15:23:39 +0100
Subject: [PATCH 04/25] [Usage Collection Schemas] Remove Legacy entries
 (#75652)

---
 .telemetryrc.json                               |  9 ---------
 .../telemetry/schema/legacy_oss_plugins.json    | 17 -----------------
 2 files changed, 26 deletions(-)
 delete mode 100644 src/plugins/telemetry/schema/legacy_oss_plugins.json

diff --git a/.telemetryrc.json b/.telemetryrc.json
index 30643a104c1cd..2f57566159a70 100644
--- a/.telemetryrc.json
+++ b/.telemetryrc.json
@@ -1,13 +1,4 @@
 [
-  {
-    "output": "src/plugins/telemetry/schema/legacy_oss_plugins.json",
-    "root": "src/legacy/core_plugins/",
-    "exclude": [
-      "src/legacy/core_plugins/testbed",
-      "src/legacy/core_plugins/elasticsearch",
-      "src/legacy/core_plugins/tests_bundle"
-    ]
-  },
   {
     "output": "src/plugins/telemetry/schema/oss_plugins.json",
     "root": "src/plugins/",
diff --git a/src/plugins/telemetry/schema/legacy_oss_plugins.json b/src/plugins/telemetry/schema/legacy_oss_plugins.json
deleted file mode 100644
index e660ccac9dc36..0000000000000
--- a/src/plugins/telemetry/schema/legacy_oss_plugins.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "properties": {
-    "csp": {
-      "properties": {
-        "strict": {
-          "type": "boolean"
-        },
-        "warnLegacyBrowsers": {
-          "type": "boolean"
-        },
-        "rulesChangedFromDefault": {
-          "type": "boolean"
-        }
-      }
-    }
-  }
-}

From 172c464b147bb207b71530fe9c82170ba5d3893f Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Fri, 21 Aug 2020 09:02:15 -0700
Subject: [PATCH 05/25] [Enterprise Search] Convert our `public_url` route to
 `config_data` and collect initialAppData (#75616)

* [Setup] DRY out stripTrailingSlash helper

- DRYs out repeated code
- This will be used by an upcoming server/ endpoint change, hence why it's in common

* [Setup] DRY out initial app data types to common/types

- In preparation for upcoming server logic that will need to reuse these types
+ DRY out and clean up workplace_search types
  - remove unused supportEligible
  - remove currentUser - unneeded in Kibana

* Update callEnterpriseSearchConfigAPI to parse and fetch new expected data

* Remove /public_url API for /config_data

* Remove getPublicUrl in favor of directly calling the new /config_data API from public/plugin

+ set returned initialData in this.data

* Set up product apps to be passed initial data as props

* Fix for Kea/redux state not resetting between AS<->WS nav

- resetContext at the top level only gets called once total on first plugin load and never after, causing navigating between WS and AS to crash when both have Kea - this fixes the issue

- moves redux Provider to top level app as well

* Add very basic Kea logic file to App Search

* Finish AppSearchConfigured tests & set up kea+useEffect mocks

* [Cleanup] DRY out repeated mock initialAppData to a reusable defaults constant
---
 .../common/__mocks__/index.ts                 |  7 ++
 .../common/__mocks__/initial_app_data.ts      | 45 +++++++++
 .../common/strip_trailing_slash/index.test.ts | 17 ++++
 .../common/strip_trailing_slash/index.ts      | 13 +++
 .../common/types/app_search.ts                | 25 +++++
 .../enterprise_search/common/types/index.ts   | 24 +++++
 .../common/types/workplace_search.ts          | 19 ++++
 .../public/applications/__mocks__/kea.mock.ts | 24 +++++
 .../__mocks__/shallow_usecontext.mock.ts      |  1 +
 .../applications/app_search/app_logic.test.ts | 35 +++++++
 .../applications/app_search/app_logic.ts      | 31 ++++++
 .../applications/app_search/index.test.tsx    | 53 ++++++++--
 .../public/applications/app_search/index.tsx  | 41 +++++---
 .../public/applications/index.tsx             | 27 ++++--
 .../get_enterprise_search_url.test.ts         | 30 ------
 .../get_enterprise_search_url.ts              | 27 ------
 .../shared/enterprise_search_url/index.ts     |  1 -
 .../applications/shared/layout/side_nav.tsx   |  3 +-
 .../overview/__mocks__/overview_logic.mock.ts |  3 +-
 .../overview/onboarding_steps.test.tsx        |  1 -
 .../overview/overview_logic.test.ts           |  9 +-
 .../components/overview/overview_logic.ts     |  9 +-
 .../applications/workplace_search/index.tsx   | 48 ++++------
 .../applications/workplace_search/types.ts    | 20 +---
 .../enterprise_search/public/plugin.ts        | 21 ++--
 .../lib/enterprise_search_config_api.test.ts  | 96 ++++++++++++++++++-
 .../lib/enterprise_search_config_api.ts       | 53 +++++++++-
 .../enterprise_search/server/plugin.ts        |  4 +-
 ...public_url.test.ts => config_data.test.ts} | 39 +++++---
 .../routes/enterprise_search/config_data.ts   | 32 +++++++
 .../routes/enterprise_search/public_url.ts    | 26 -----
 31 files changed, 573 insertions(+), 211 deletions(-)
 create mode 100644 x-pack/plugins/enterprise_search/common/__mocks__/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/__mocks__/initial_app_data.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.test.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/types/app_search.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/types/index.ts
 create mode 100644 x-pack/plugins/enterprise_search/common/types/workplace_search.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/__mocks__/kea.mock.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts
 create mode 100644 x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts
 delete mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.test.ts
 delete mode 100644 x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.ts
 rename x-pack/plugins/enterprise_search/server/routes/enterprise_search/{public_url.test.ts => config_data.test.ts} (50%)
 create mode 100644 x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.ts
 delete mode 100644 x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.ts

diff --git a/x-pack/plugins/enterprise_search/common/__mocks__/index.ts b/x-pack/plugins/enterprise_search/common/__mocks__/index.ts
new file mode 100644
index 0000000000000..57029913fe3a9
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/__mocks__/index.ts
@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './initial_app_data';
diff --git a/x-pack/plugins/enterprise_search/common/__mocks__/initial_app_data.ts b/x-pack/plugins/enterprise_search/common/__mocks__/initial_app_data.ts
new file mode 100644
index 0000000000000..79e1efc425b4e
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/__mocks__/initial_app_data.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const DEFAULT_INITIAL_APP_DATA = {
+  readOnlyMode: false,
+  ilmEnabled: true,
+  configuredLimits: {
+    maxDocumentByteSize: 102400,
+    maxEnginesPerMetaEngine: 15,
+  },
+  appSearch: {
+    accountId: 'some-id-string',
+    onBoardingComplete: true,
+    role: {
+      id: 'account_id:somestring|user_oid:somestring',
+      roleType: 'owner',
+      ability: {
+        accessAllEngines: true,
+        destroy: ['session'],
+        manage: ['account_credentials', 'account_engines'], // etc
+        edit: ['LocoMoco::Account'], // etc
+        view: ['Engine'], // etc
+        credentialTypes: ['admin', 'private', 'search'],
+        availableRoleTypes: ['owner', 'admin'],
+      },
+    },
+  },
+  workplaceSearch: {
+    organization: {
+      name: 'ACME Donuts',
+      defaultOrgName: 'My Organization',
+    },
+    fpAccount: {
+      id: 'some-id-string',
+      groups: ['Default', 'Cats'],
+      isAdmin: true,
+      canCreatePersonalSources: true,
+      isCurated: false,
+      viewedOnboardingPage: true,
+    },
+  },
+};
diff --git a/x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.test.ts b/x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.test.ts
new file mode 100644
index 0000000000000..b5d64455b1a90
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.test.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { stripTrailingSlash } from './';
+
+describe('Strip Trailing Slash helper', () => {
+  it('strips trailing slashes', async () => {
+    expect(stripTrailingSlash('http://trailing.slash/')).toEqual('http://trailing.slash');
+  });
+
+  it('does nothing is there is no trailing slash', async () => {
+    expect(stripTrailingSlash('http://ok.url')).toEqual('http://ok.url');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.ts b/x-pack/plugins/enterprise_search/common/strip_trailing_slash/index.ts
new file mode 100644
index 0000000000000..ade9bd8742c97
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/strip_trailing_slash/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/**
+ * Small helper for stripping trailing slashes from URLs or paths
+ * (usually ones that come in from React Router or API endpoints)
+ */
+export const stripTrailingSlash = (url: string): string => {
+  return url && url.endsWith('/') ? url.slice(0, -1) : url;
+};
diff --git a/x-pack/plugins/enterprise_search/common/types/app_search.ts b/x-pack/plugins/enterprise_search/common/types/app_search.ts
new file mode 100644
index 0000000000000..5d6ec079e66e0
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/types/app_search.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface IAccount {
+  accountId: string;
+  onBoardingComplete: boolean;
+  role: IRole;
+}
+
+export interface IRole {
+  id: string;
+  roleType: string;
+  ability: {
+    accessAllEngines: boolean;
+    destroy: string[];
+    manage: string[];
+    edit: string[];
+    view: string[];
+    credentialTypes: string[];
+    availableRoleTypes: string[];
+  };
+}
diff --git a/x-pack/plugins/enterprise_search/common/types/index.ts b/x-pack/plugins/enterprise_search/common/types/index.ts
new file mode 100644
index 0000000000000..52e468b741a07
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/types/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IAccount as IAppSearchAccount } from './app_search';
+import { IAccount as IWorkplaceSearchAccount, IOrganization } from './workplace_search';
+
+export interface IInitialAppData {
+  readOnlyMode?: boolean;
+  ilmEnabled?: boolean;
+  configuredLimits?: IConfiguredLimits;
+  appSearch?: IAppSearchAccount;
+  workplaceSearch?: {
+    organization: IOrganization;
+    fpAccount: IWorkplaceSearchAccount;
+  };
+}
+
+export interface IConfiguredLimits {
+  maxDocumentByteSize: number;
+  maxEnginesPerMetaEngine: number;
+}
diff --git a/x-pack/plugins/enterprise_search/common/types/workplace_search.ts b/x-pack/plugins/enterprise_search/common/types/workplace_search.ts
new file mode 100644
index 0000000000000..fd8fa6daf81ac
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/common/types/workplace_search.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface IAccount {
+  id: string;
+  groups: string[];
+  isAdmin: boolean;
+  isCurated: boolean;
+  canCreatePersonalSources: boolean;
+  viewedOnboardingPage: boolean;
+}
+
+export interface IOrganization {
+  name: string;
+  defaultOrgName: string;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/__mocks__/kea.mock.ts b/x-pack/plugins/enterprise_search/public/applications/__mocks__/kea.mock.ts
new file mode 100644
index 0000000000000..5049e9da21ce9
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/__mocks__/kea.mock.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+jest.mock('kea', () => ({
+  ...(jest.requireActual('kea') as object),
+  useValues: jest.fn(() => ({})),
+  useActions: jest.fn(() => ({})),
+}));
+
+/**
+ * Example usage within a component test:
+ *
+ * import '../../../__mocks__/kea'; // Must come before kea's import, adjust relative path as needed
+ *
+ * import { useActions, useValues } from 'kea';
+ *
+ * it('some test', () => {
+ *   (useValues as jest.Mock).mockImplementationOnce(() => ({ someValue: 'hello' }));
+ *   (useActions as jest.Mock).mockImplementationOnce(() => ({ someAction: () => 'world' }));
+ * });
+ */
diff --git a/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_usecontext.mock.ts b/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_usecontext.mock.ts
index 792be49a49c48..3a2193db646de 100644
--- a/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_usecontext.mock.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/__mocks__/shallow_usecontext.mock.ts
@@ -14,6 +14,7 @@ import { mockLicenseContext } from './license_context.mock';
 jest.mock('react', () => ({
   ...(jest.requireActual('react') as object),
   useContext: jest.fn(() => ({ ...mockKibanaContext, ...mockLicenseContext })),
+  useEffect: jest.fn((fn) => fn()), // Calls on mount/every update - use mount for more complex behavior
 }));
 
 /**
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts
new file mode 100644
index 0000000000000..bc31b7df5d971
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.test.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { resetContext } from 'kea';
+
+import { DEFAULT_INITIAL_APP_DATA } from '../../../common/__mocks__';
+import { AppLogic } from './app_logic';
+
+describe('AppLogic', () => {
+  beforeEach(() => {
+    resetContext({});
+    AppLogic.mount();
+  });
+
+  const DEFAULT_VALUES = {
+    hasInitialized: false,
+  };
+
+  it('has expected default values', () => {
+    expect(AppLogic.values).toEqual(DEFAULT_VALUES);
+  });
+
+  describe('initializeAppData()', () => {
+    it('sets values based on passed props', () => {
+      AppLogic.actions.initializeAppData(DEFAULT_INITIAL_APP_DATA);
+
+      expect(AppLogic.values).toEqual({
+        hasInitialized: true,
+      });
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.ts
new file mode 100644
index 0000000000000..0fb3bb8080d82
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/app_logic.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { kea } from 'kea';
+
+import { IInitialAppData } from '../../../common/types';
+import { IKeaLogic } from '../shared/types';
+
+export interface IAppLogicValues {
+  hasInitialized: boolean;
+}
+export interface IAppLogicActions {
+  initializeAppData(props: IInitialAppData): void;
+}
+
+export const AppLogic = kea({
+  actions: (): IAppLogicActions => ({
+    initializeAppData: (props) => props,
+  }),
+  reducers: () => ({
+    hasInitialized: [
+      false,
+      {
+        initializeAppData: () => true,
+      },
+    ],
+  }),
+}) as IKeaLogic<IAppLogicValues, IAppLogicActions>;
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
index fa9a761a966e1..0f4072c591bc7 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.test.tsx
@@ -5,27 +5,68 @@
  */
 
 import '../__mocks__/shallow_usecontext.mock';
+import '../__mocks__/kea.mock';
 
 import React, { useContext } from 'react';
 import { Redirect } from 'react-router-dom';
 import { shallow } from 'enzyme';
+import { useValues, useActions } from 'kea';
 
+import { SetupGuide } from './components/setup_guide';
 import { Layout, SideNav, SideNavLink } from '../shared/layout';
-import { AppSearch, AppSearchNav } from './';
+import { AppSearch, AppSearchUnconfigured, AppSearchConfigured, AppSearchNav } from './';
 
 describe('AppSearch', () => {
-  it('renders', () => {
+  it('renders AppSearchUnconfigured when config.host is not set', () => {
+    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: '' } }));
     const wrapper = shallow(<AppSearch />);
 
-    expect(wrapper.find(Layout)).toHaveLength(1);
+    expect(wrapper.find(AppSearchUnconfigured)).toHaveLength(1);
   });
 
-  it('redirects to Setup Guide when config.host is not set', () => {
-    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: '' } }));
+  it('renders AppSearchConfigured when config.host set', () => {
+    (useContext as jest.Mock).mockImplementationOnce(() => ({ config: { host: 'some.url' } }));
     const wrapper = shallow(<AppSearch />);
 
+    expect(wrapper.find(AppSearchConfigured)).toHaveLength(1);
+  });
+});
+
+describe('AppSearchUnconfigured', () => {
+  it('renders the Setup Guide and redirects to the Setup Guide', () => {
+    const wrapper = shallow(<AppSearchUnconfigured />);
+
+    expect(wrapper.find(SetupGuide)).toHaveLength(1);
     expect(wrapper.find(Redirect)).toHaveLength(1);
-    expect(wrapper.find(Layout)).toHaveLength(0);
+  });
+});
+
+describe('AppSearchConfigured', () => {
+  it('renders with layout', () => {
+    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData: () => {} }));
+
+    const wrapper = shallow(<AppSearchConfigured />);
+
+    expect(wrapper.find(Layout)).toHaveLength(1);
+  });
+
+  it('initializes app data with passed props', () => {
+    const initializeAppData = jest.fn();
+    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
+
+    shallow(<AppSearchConfigured readOnlyMode={true} />);
+
+    expect(initializeAppData).toHaveBeenCalledWith({ readOnlyMode: true });
+  });
+
+  it('does not re-initialize app data', () => {
+    const initializeAppData = jest.fn();
+    (useActions as jest.Mock).mockImplementation(() => ({ initializeAppData }));
+    (useValues as jest.Mock).mockImplementationOnce(() => ({ hasInitialized: true }));
+
+    shallow(<AppSearchConfigured />);
+
+    expect(initializeAppData).not.toHaveBeenCalled();
   });
 });
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
index 5856a13bf75b7..5f4734630624c 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/index.tsx
@@ -4,13 +4,17 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
+import { useActions, useValues } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 
-import { APP_SEARCH_PLUGIN } from '../../../common/constants';
 import { KibanaContext, IKibanaContext } from '../index';
+import { AppLogic, IAppLogicActions, IAppLogicValues } from './app_logic';
+import { IInitialAppData } from '../../../common/types';
+
+import { APP_SEARCH_PLUGIN } from '../../../common/constants';
 import { Layout, SideNav, SideNavLink } from '../shared/layout';
 
 import {
@@ -25,20 +29,29 @@ import {
 import { SetupGuide } from './components/setup_guide';
 import { EngineOverview } from './components/engine_overview';
 
-export const AppSearch: React.FC = () => {
+export const AppSearch: React.FC<IInitialAppData> = (props) => {
   const { config } = useContext(KibanaContext) as IKibanaContext;
+  return !config.host ? <AppSearchUnconfigured /> : <AppSearchConfigured {...props} />;
+};
+
+export const AppSearchUnconfigured: React.FC = () => (
+  <Switch>
+    <Route exact path={SETUP_GUIDE_PATH}>
+      <SetupGuide />
+    </Route>
+    <Route>
+      <Redirect to={SETUP_GUIDE_PATH} />
+    </Route>
+  </Switch>
+);
+
+export const AppSearchConfigured: React.FC<IInitialAppData> = (props) => {
+  const { hasInitialized } = useValues(AppLogic) as IAppLogicValues;
+  const { initializeAppData } = useActions(AppLogic) as IAppLogicActions;
 
-  if (!config.host)
-    return (
-      <Switch>
-        <Route exact path={SETUP_GUIDE_PATH}>
-          <SetupGuide />
-        </Route>
-        <Route>
-          <Redirect to={SETUP_GUIDE_PATH} />
-        </Route>
-      </Switch>
-    );
+  useEffect(() => {
+    if (!hasInitialized) initializeAppData(props);
+  }, [hasInitialized]);
 
   return (
     <Switch>
diff --git a/x-pack/plugins/enterprise_search/public/applications/index.tsx b/x-pack/plugins/enterprise_search/public/applications/index.tsx
index 1b1f9ae43e7c1..d6cc6e81509b2 100644
--- a/x-pack/plugins/enterprise_search/public/applications/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/index.tsx
@@ -8,6 +8,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
 
+import { Provider } from 'react-redux';
+import { Store } from 'redux';
+import { getContext, resetContext } from 'kea';
+
 import { I18nProvider } from '@kbn/i18n/react';
 import {
   AppMountParameters,
@@ -19,6 +23,7 @@ import {
 import { ClientConfigType, ClientData, PluginsSetup } from '../plugin';
 import { LicenseProvider } from './shared/licensing';
 import { IExternalUrl } from './shared/enterprise_search_url';
+import { IInitialAppData } from '../../common/types';
 
 export interface IKibanaContext {
   config: { host?: string };
@@ -38,33 +43,41 @@ export const KibanaContext = React.createContext({});
  */
 
 export const renderApp = (
-  App: React.FC,
+  App: React.FC<IInitialAppData>,
   params: AppMountParameters,
   core: CoreStart,
   plugins: PluginsSetup,
   config: ClientConfigType,
-  data: ClientData
+  { externalUrl, ...initialData }: ClientData
 ) => {
+  resetContext({ createStore: true });
+  const store = getContext().store as Store;
+
   ReactDOM.render(
     <I18nProvider>
       <KibanaContext.Provider
         value={{
           config,
+          externalUrl,
           http: core.http,
           navigateToUrl: core.application.navigateToUrl,
-          externalUrl: data.externalUrl,
           setBreadcrumbs: core.chrome.setBreadcrumbs,
           setDocTitle: core.chrome.docTitle.change,
         }}
       >
         <LicenseProvider license$={plugins.licensing.license$}>
-          <Router history={params.history}>
-            <App />
-          </Router>
+          <Provider store={store}>
+            <Router history={params.history}>
+              <App {...initialData} />
+            </Router>
+          </Provider>
         </LicenseProvider>
       </KibanaContext.Provider>
     </I18nProvider>,
     params.element
   );
-  return () => ReactDOM.unmountComponentAtNode(params.element);
+  return () => {
+    resetContext({});
+    ReactDOM.unmountComponentAtNode(params.element);
+  };
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.test.ts b/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.test.ts
deleted file mode 100644
index 42f308c554268..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { getPublicUrl } from './';
-
-describe('Enterprise Search URL helper', () => {
-  const httpMock = { get: jest.fn() } as any;
-
-  it('calls and returns the public URL API endpoint', async () => {
-    httpMock.get.mockImplementationOnce(() => ({ publicUrl: 'http://some.vanity.url' }));
-
-    expect(await getPublicUrl(httpMock)).toEqual('http://some.vanity.url');
-  });
-
-  it('strips trailing slashes', async () => {
-    httpMock.get.mockImplementationOnce(() => ({ publicUrl: 'http://trailing.slash/' }));
-
-    expect(await getPublicUrl(httpMock)).toEqual('http://trailing.slash');
-  });
-
-  // For the most part, error logging/handling is done on the server side.
-  // On the front-end, we should simply gracefully fall back to config.host
-  // if we can't fetch a public URL
-  it('falls back to an empty string', async () => {
-    expect(await getPublicUrl(httpMock)).toEqual('');
-  });
-});
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.ts b/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.ts
deleted file mode 100644
index 419c187a0048a..0000000000000
--- a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/get_enterprise_search_url.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { HttpSetup } from 'src/core/public';
-
-/**
- * On Elastic Cloud, the host URL set in kibana.yml is not necessarily the same
- * URL we want to send users to in the front-end (e.g. if a vanity URL is set).
- *
- * This helper checks a Kibana API endpoint (which has checks an Enterprise
- * Search internal API endpoint) for the correct public-facing URL to use.
- */
-export const getPublicUrl = async (http: HttpSetup): Promise<string> => {
-  try {
-    const { publicUrl } = await http.get('/api/enterprise_search/public_url');
-    return stripTrailingSlash(publicUrl);
-  } catch {
-    return '';
-  }
-};
-
-const stripTrailingSlash = (url: string): string => {
-  return url.endsWith('/') ? url.slice(0, -1) : url;
-};
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/index.ts b/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/index.ts
index 563d19f9fdeb5..d2d82a43c6dd9 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/index.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/enterprise_search_url/index.ts
@@ -4,5 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { getPublicUrl } from './get_enterprise_search_url';
 export { ExternalUrl, IExternalUrl } from './generate_external_url';
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
index 5969fa7806a44..72e4f2f091496 100644
--- a/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/shared/layout/side_nav.tsx
@@ -13,6 +13,7 @@ import { EuiIcon, EuiTitle, EuiText, EuiLink as EuiLinkExternal } from '@elastic
 import { EuiLink } from '../react_router_helpers';
 
 import { ENTERPRISE_SEARCH_PLUGIN } from '../../../../common/constants';
+import { stripTrailingSlash } from '../../../../common/strip_trailing_slash';
 
 import { NavContext, INavContext } from './layout';
 
@@ -78,7 +79,7 @@ export const SideNavLink: React.FC<ISideNavLinkProps> = ({
   const { closeNavigation } = useContext(NavContext) as INavContext;
 
   const { pathname } = useLocation();
-  const currentPath = pathname.endsWith('/') ? pathname.slice(0, -1) : pathname;
+  const currentPath = stripTrailingSlash(pathname);
   const isActive = currentPath === to || (isRoot && currentPath === '');
 
   const classes = classNames('enterpriseSearchNavLinks__item', className, {
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/__mocks__/overview_logic.mock.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/__mocks__/overview_logic.mock.ts
index 43cff5de6668d..395d2044e7dbc 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/__mocks__/overview_logic.mock.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/__mocks__/overview_logic.mock.ts
@@ -5,14 +5,13 @@
  */
 
 import { IOverviewValues } from '../overview_logic';
-import { IAccount, IOrganization, IUser } from '../../../types';
+import { IAccount, IOrganization } from '../../../types';
 
 export const mockLogicValues = {
   accountsCount: 0,
   activityFeed: [],
   canCreateContentSources: false,
   canCreateInvitations: false,
-  currentUser: {} as IUser,
   fpAccount: {} as IAccount,
   hasOrgSources: false,
   hasUsers: false,
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/onboarding_steps.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/onboarding_steps.test.tsx
index 3cf88cf120cc4..acbc66259c2a1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/onboarding_steps.test.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/onboarding_steps.test.tsx
@@ -24,7 +24,6 @@ const account = {
   isAdmin: true,
   canCreatePersonalSources: true,
   groups: [],
-  supportEligible: true,
   isCurated: false,
 };
 
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.test.ts
index 285ec9b973378..7df4de4719f31 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.test.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.test.ts
@@ -31,14 +31,13 @@ describe('OverviewLogic', () => {
 
   describe('setServerData', () => {
     const feed = [{ foo: 'bar' }] as any;
-    const user = { firstName: 'Joe', email: 'e@e.e', name: 'Joe Jo', color: 'pearl' };
     const account = {
-      name: 'Jane doe',
       id: '1243',
+      groups: ['Default'],
       isAdmin: true,
+      isCurated: false,
       canCreatePersonalSources: true,
-      groups: [],
-      supportEligible: true,
+      viewedOnboardingPage: false,
     };
     const org = { name: 'ACME', defaultOrgName: 'Org' };
 
@@ -47,7 +46,6 @@ describe('OverviewLogic', () => {
       activityFeed: feed,
       canCreateContentSources: true,
       canCreateInvitations: true,
-      currentUser: user,
       fpAccount: account,
       hasOrgSources: true,
       hasUsers: true,
@@ -70,7 +68,6 @@ describe('OverviewLogic', () => {
     it('will set server values', () => {
       expect(OverviewLogic.values.organization).toEqual(org);
       expect(OverviewLogic.values.isFederatedAuth).toEqual(false);
-      expect(OverviewLogic.values.currentUser).toEqual(user);
       expect(OverviewLogic.values.fpAccount).toEqual(account);
       expect(OverviewLogic.values.canCreateInvitations).toEqual(true);
       expect(OverviewLogic.values.hasUsers).toEqual(true);
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.ts
index f1b4f447f7445..8bb177a2e742b 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/components/overview/overview_logic.ts
@@ -8,7 +8,7 @@ import { HttpSetup } from 'src/core/public';
 
 import { kea } from 'kea';
 
-import { IAccount, IOrganization, IUser } from '../../types';
+import { IAccount, IOrganization } from '../../types';
 import { IFlashMessagesProps, IKeaLogic, TKeaReducers, IKeaParams } from '../../../shared/types';
 
 import { IFeedActivity } from './recent_activity';
@@ -26,7 +26,6 @@ export interface IOverviewServerData {
   activityFeed: IFeedActivity[];
   organization: IOrganization;
   isFederatedAuth: boolean;
-  currentUser: IUser;
   fpAccount: IAccount;
 }
 
@@ -63,12 +62,6 @@ export const OverviewLogic = kea({
         setServerData: (_, { isFederatedAuth }) => isFederatedAuth,
       },
     ],
-    currentUser: [
-      {} as IUser,
-      {
-        setServerData: (_, { currentUser }) => currentUser,
-      },
-    ],
     fpAccount: [
       {} as IAccount,
       {
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
index 4aa171a5a5762..94462aa8de7d1 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/index.tsx
@@ -6,14 +6,8 @@
 
 import React, { useContext } from 'react';
 import { Route, Redirect, Switch } from 'react-router-dom';
-import { Provider } from 'react-redux';
-import { Store } from 'redux';
-import { getContext, resetContext } from 'kea';
-
-resetContext({ createStore: true });
-
-const store = getContext().store as Store;
 
+import { IInitialAppData } from '../../../common/types';
 import { KibanaContext, IKibanaContext } from '../index';
 import { Layout } from '../shared/layout';
 import { WorkplaceSearchNav } from './components/layout/nav';
@@ -23,7 +17,7 @@ import { SETUP_GUIDE_PATH } from './routes';
 import { SetupGuide } from './components/setup_guide';
 import { Overview } from './components/overview';
 
-export const WorkplaceSearch: React.FC = () => {
+export const WorkplaceSearch: React.FC<IInitialAppData> = (props) => {
   const { config } = useContext(KibanaContext) as IKibanaContext;
   if (!config.host)
     return (
@@ -38,25 +32,23 @@ export const WorkplaceSearch: React.FC = () => {
     );
 
   return (
-    <Provider store={store}>
-      <Switch>
-        <Route path={SETUP_GUIDE_PATH}>
-          <SetupGuide />
-        </Route>
-        <Route exact path="/">
-          <Overview />
-        </Route>
-        <Route>
-          <Layout navigation={<WorkplaceSearchNav />}>
-            <Switch>
-              <Route exact path="/groups">
-                {/* Will replace with groups component subsequent PR */}
-                <div />
-              </Route>
-            </Switch>
-          </Layout>
-        </Route>
-      </Switch>
-    </Provider>
+    <Switch>
+      <Route path={SETUP_GUIDE_PATH}>
+        <SetupGuide />
+      </Route>
+      <Route exact path="/">
+        <Overview />
+      </Route>
+      <Route>
+        <Layout navigation={<WorkplaceSearchNav />}>
+          <Switch>
+            <Route exact path="/groups">
+              {/* Will replace with groups component subsequent PR */}
+              <div />
+            </Route>
+          </Switch>
+        </Layout>
+      </Route>
+    </Switch>
   );
 };
diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts b/x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts
index 77c35adef3300..a8348a6f69a39 100644
--- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/types.ts
@@ -4,24 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export interface IAccount {
-  id: string;
-  isCurated?: boolean;
-  isAdmin: boolean;
-  canCreatePersonalSources: boolean;
-  groups: string[];
-  supportEligible: boolean;
-}
-
-export interface IOrganization {
-  name: string;
-  defaultOrgName: string;
-}
-export interface IUser {
-  firstName: string;
-  email: string;
-  name: string;
-  color: string;
-}
+export * from '../../../common/types/workplace_search';
 
 export type TSpacerSize = 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
diff --git a/x-pack/plugins/enterprise_search/public/plugin.ts b/x-pack/plugins/enterprise_search/public/plugin.ts
index 0d392eefe0aa2..148a50fb4a5ce 100644
--- a/x-pack/plugins/enterprise_search/public/plugin.ts
+++ b/x-pack/plugins/enterprise_search/public/plugin.ts
@@ -20,19 +20,16 @@ import {
 import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
 import { LicensingPluginSetup } from '../../licensing/public';
 
+import { IInitialAppData } from '../common/types';
 import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../common/constants';
-import {
-  getPublicUrl,
-  ExternalUrl,
-  IExternalUrl,
-} from './applications/shared/enterprise_search_url';
+import { ExternalUrl, IExternalUrl } from './applications/shared/enterprise_search_url';
 import AppSearchLogo from './applications/app_search/assets/logo.svg';
 import WorkplaceSearchLogo from './applications/workplace_search/assets/logo.svg';
 
 export interface ClientConfigType {
   host?: string;
 }
-export interface ClientData {
+export interface ClientData extends IInitialAppData {
   externalUrl: IExternalUrl;
 }
 
@@ -119,10 +116,14 @@ export class EnterpriseSearchPlugin implements Plugin {
     if (!this.config.host) return; // No API to call
     if (this.hasInitialized) return; // We've already made an initial call
 
-    // TODO: Rename to something more generic once we start fetching more data than just external_url from this endpoint
-    const publicUrl = await getPublicUrl(http);
+    try {
+      const { publicUrl, ...initialData } = await http.get('/api/enterprise_search/config_data');
+      this.data = { ...this.data, ...initialData };
+      if (publicUrl) this.data.externalUrl = new ExternalUrl(publicUrl);
 
-    if (publicUrl) this.data.externalUrl = new ExternalUrl(publicUrl);
-    this.hasInitialized = true;
+      this.hasInitialized = true;
+    } catch {
+      // The plugin will attempt to re-fetch config data on page change
+    }
   }
 }
diff --git a/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.test.ts b/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.test.ts
index ee96f8099cf7c..c26ada77f504f 100644
--- a/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.test.ts
+++ b/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.test.ts
@@ -11,6 +11,7 @@ const { Response } = jest.requireActual('node-fetch');
 
 import { loggingSystemMock } from 'src/core/server/mocks';
 
+import { DEFAULT_INITIAL_APP_DATA } from '../../common/__mocks__';
 import { callEnterpriseSearchConfigAPI } from './enterprise_search_config_api';
 
 describe('callEnterpriseSearchConfigAPI', () => {
@@ -35,13 +36,50 @@ describe('callEnterpriseSearchConfigAPI', () => {
     },
     settings: {
       external_url: 'http://some.vanity.url/',
+      read_only_mode: false,
+      ilm_enabled: true,
+      configured_limits: {
+        max_document_byte_size: 102400,
+        max_engines_per_meta_engine: 15,
+      },
+      app_search: {
+        account_id: 'some-id-string',
+        onboarding_complete: true,
+      },
+      workplace_search: {
+        organization: {
+          name: 'ACME Donuts',
+          default_org_name: 'My Organization',
+        },
+        fp_account: {
+          id: 'some-id-string',
+          groups: ['Default', 'Cats'],
+          is_admin: true,
+          can_create_personal_sources: true,
+          is_curated: false,
+          viewed_onboarding_page: true,
+        },
+      },
     },
-    access: {
-      user: 'someuser',
-      products: {
+    current_user: {
+      name: 'someuser',
+      access: {
         app_search: true,
         workplace_search: false,
       },
+      app_search_role: {
+        id: 'account_id:somestring|user_oid:somestring',
+        role_type: 'owner',
+        ability: {
+          access_all_engines: true,
+          destroy: ['session'],
+          manage: ['account_credentials', 'account_engines'], // etc
+          edit: ['LocoMoco::Account'], // etc
+          view: ['Engine'], // etc
+          credential_types: ['admin', 'private', 'search'],
+          available_role_types: ['owner', 'admin'],
+        },
+      },
     },
   };
 
@@ -56,11 +94,61 @@ describe('callEnterpriseSearchConfigAPI', () => {
     });
 
     expect(await callEnterpriseSearchConfigAPI(mockDependencies)).toEqual({
-      publicUrl: 'http://some.vanity.url/',
       access: {
         hasAppSearchAccess: true,
         hasWorkplaceSearchAccess: false,
       },
+      publicUrl: 'http://some.vanity.url',
+      ...DEFAULT_INITIAL_APP_DATA,
+    });
+  });
+
+  it('falls back without error when data is unavailable', async () => {
+    fetchMock.mockImplementationOnce((url: string) => Promise.resolve(new Response('{}')));
+
+    expect(await callEnterpriseSearchConfigAPI(mockDependencies)).toEqual({
+      access: {
+        hasAppSearchAccess: false,
+        hasWorkplaceSearchAccess: false,
+      },
+      publicUrl: undefined,
+      readOnlyMode: false,
+      ilmEnabled: false,
+      configuredLimits: {
+        maxDocumentByteSize: undefined,
+        maxEnginesPerMetaEngine: undefined,
+      },
+      appSearch: {
+        accountId: undefined,
+        onBoardingComplete: false,
+        role: {
+          id: undefined,
+          roleType: undefined,
+          ability: {
+            accessAllEngines: false,
+            destroy: [],
+            manage: [],
+            edit: [],
+            view: [],
+            credentialTypes: [],
+            availableRoleTypes: [],
+          },
+        },
+      },
+      workplaceSearch: {
+        organization: {
+          name: undefined,
+          defaultOrgName: undefined,
+        },
+        fpAccount: {
+          id: undefined,
+          groups: [],
+          isAdmin: false,
+          canCreatePersonalSources: false,
+          isCurated: false,
+          viewedOnboardingPage: false,
+        },
+      },
     });
   });
 
diff --git a/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.ts b/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.ts
index 7a6d1eac1b454..1dbec76806ba8 100644
--- a/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.ts
+++ b/x-pack/plugins/enterprise_search/server/lib/enterprise_search_config_api.ts
@@ -11,14 +11,17 @@ import { KibanaRequest, Logger } from 'src/core/server';
 import { ConfigType } from '../';
 import { IAccess } from './check_access';
 
+import { IInitialAppData } from '../../common/types';
+import { stripTrailingSlash } from '../../common/strip_trailing_slash';
+
 interface IParams {
   request: KibanaRequest;
   config: ConfigType;
   log: Logger;
 }
-interface IReturn {
-  publicUrl?: string;
+interface IReturn extends IInitialAppData {
   access?: IAccess;
+  publicUrl?: string;
 }
 
 /**
@@ -57,10 +60,50 @@ export const callEnterpriseSearchConfigAPI = async ({
     const data = await response.json();
 
     return {
-      publicUrl: data?.settings?.external_url,
       access: {
-        hasAppSearchAccess: !!data?.access?.products?.app_search,
-        hasWorkplaceSearchAccess: !!data?.access?.products?.workplace_search,
+        hasAppSearchAccess: !!data?.current_user?.access?.app_search,
+        hasWorkplaceSearchAccess: !!data?.current_user?.access?.workplace_search,
+      },
+      publicUrl: stripTrailingSlash(data?.settings?.external_url),
+      readOnlyMode: !!data?.settings?.read_only_mode,
+      ilmEnabled: !!data?.settings?.ilm_enabled,
+      configuredLimits: {
+        maxDocumentByteSize: data?.settings?.configured_limits?.max_document_byte_size,
+        maxEnginesPerMetaEngine: data?.settings?.configured_limits?.max_engines_per_meta_engine,
+      },
+      appSearch: {
+        accountId: data?.settings?.app_search?.account_id,
+        onBoardingComplete: !!data?.settings?.app_search?.onboarding_complete,
+        role: {
+          id: data?.current_user?.app_search_role?.id,
+          roleType: data?.current_user?.app_search_role?.role_type,
+          ability: {
+            accessAllEngines: !!data?.current_user?.app_search_role?.ability?.access_all_engines,
+            destroy: data?.current_user?.app_search_role?.ability?.destroy || [],
+            manage: data?.current_user?.app_search_role?.ability?.manage || [],
+            edit: data?.current_user?.app_search_role?.ability?.edit || [],
+            view: data?.current_user?.app_search_role?.ability?.view || [],
+            credentialTypes: data?.current_user?.app_search_role?.ability?.credential_types || [],
+            availableRoleTypes:
+              data?.current_user?.app_search_role?.ability?.available_role_types || [],
+          },
+        },
+      },
+      workplaceSearch: {
+        organization: {
+          name: data?.settings?.workplace_search?.organization?.name,
+          defaultOrgName: data?.settings?.workplace_search?.organization?.default_org_name,
+        },
+        fpAccount: {
+          id: data?.settings?.workplace_search?.fp_account.id,
+          groups: data?.settings?.workplace_search?.fp_account.groups || [],
+          isAdmin: !!data?.settings?.workplace_search?.fp_account?.is_admin,
+          canCreatePersonalSources: !!data?.settings?.workplace_search?.fp_account
+            ?.can_create_personal_sources,
+          isCurated: !!data?.settings?.workplace_search?.fp_account.is_curated,
+          viewedOnboardingPage: !!data?.settings?.workplace_search?.fp_account
+            .viewed_onboarding_page,
+        },
       },
     };
   } catch (err) {
diff --git a/x-pack/plugins/enterprise_search/server/plugin.ts b/x-pack/plugins/enterprise_search/server/plugin.ts
index 6de6671337797..770ea8d420c20 100644
--- a/x-pack/plugins/enterprise_search/server/plugin.ts
+++ b/x-pack/plugins/enterprise_search/server/plugin.ts
@@ -26,7 +26,7 @@ import {
 } from '../common/constants';
 import { ConfigType } from './';
 import { checkAccess } from './lib/check_access';
-import { registerPublicUrlRoute } from './routes/enterprise_search/public_url';
+import { registerConfigDataRoute } from './routes/enterprise_search/config_data';
 import { registerTelemetryRoute } from './routes/enterprise_search/telemetry';
 
 import { appSearchTelemetryType } from './saved_objects/app_search/telemetry';
@@ -105,7 +105,7 @@ export class EnterpriseSearchPlugin implements Plugin {
     const router = http.createRouter();
     const dependencies = { router, config, log: this.logger };
 
-    registerPublicUrlRoute(dependencies);
+    registerConfigDataRoute(dependencies);
     registerEnginesRoute(dependencies);
     registerWSOverviewRoute(dependencies);
 
diff --git a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.test.ts b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.test.ts
similarity index 50%
rename from x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.test.ts
rename to x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.test.ts
index 846aae3fce56f..7484e27594df4 100644
--- a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.test.ts
+++ b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.test.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { DEFAULT_INITIAL_APP_DATA } from '../../../common/__mocks__';
 import { MockRouter, mockDependencies } from '../__mocks__';
 
 jest.mock('../../lib/enterprise_search_config_api', () => ({
@@ -11,41 +12,51 @@ jest.mock('../../lib/enterprise_search_config_api', () => ({
 }));
 import { callEnterpriseSearchConfigAPI } from '../../lib/enterprise_search_config_api';
 
-import { registerPublicUrlRoute } from './public_url';
+import { registerConfigDataRoute } from './config_data';
 
-describe('Enterprise Search Public URL API', () => {
+describe('Enterprise Search Config Data API', () => {
   let mockRouter: MockRouter;
 
   beforeEach(() => {
     mockRouter = new MockRouter({ method: 'get' });
 
-    registerPublicUrlRoute({
+    registerConfigDataRoute({
       ...mockDependencies,
       router: mockRouter.router,
     });
   });
 
-  describe('GET /api/enterprise_search/public_url', () => {
-    it('returns a publicUrl', async () => {
+  describe('GET /api/enterprise_search/config_data', () => {
+    it('returns an initial set of config data from Enterprise Search', async () => {
+      const mockData = {
+        access: {
+          hasAppSearchAccess: true,
+          hasWorkplaceSearchAccess: true,
+        },
+        publicUrl: 'http://localhost:3002',
+        ...DEFAULT_INITIAL_APP_DATA,
+      };
+
       (callEnterpriseSearchConfigAPI as jest.Mock).mockImplementationOnce(() => {
-        return Promise.resolve({ publicUrl: 'http://some.vanity.url' });
+        return Promise.resolve(mockData);
       });
-
       await mockRouter.callRoute({});
 
       expect(mockRouter.response.ok).toHaveBeenCalledWith({
-        body: { publicUrl: 'http://some.vanity.url' },
+        body: mockData,
         headers: { 'content-type': 'application/json' },
       });
     });
 
-    // For the most part, all error logging is handled by callEnterpriseSearchConfigAPI.
-    // This endpoint should mostly just fall back gracefully to an empty string
-    it('falls back to an empty string', async () => {
+    it('throws a 502 error if data returns an empty obj', async () => {
+      (callEnterpriseSearchConfigAPI as jest.Mock).mockImplementationOnce(() => {
+        return Promise.resolve({});
+      });
       await mockRouter.callRoute({});
-      expect(mockRouter.response.ok).toHaveBeenCalledWith({
-        body: { publicUrl: '' },
-        headers: { 'content-type': 'application/json' },
+
+      expect(mockRouter.response.customError).toHaveBeenCalledWith({
+        statusCode: 502,
+        body: 'Error fetching data from Enterprise Search',
       });
     });
   });
diff --git a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.ts b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.ts
new file mode 100644
index 0000000000000..453c7fd99bf4c
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/config_data.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IRouteDependencies } from '../../plugin';
+import { callEnterpriseSearchConfigAPI } from '../../lib/enterprise_search_config_api';
+
+export function registerConfigDataRoute({ router, config, log }: IRouteDependencies) {
+  router.get(
+    {
+      path: '/api/enterprise_search/config_data',
+      validate: false,
+    },
+    async (context, request, response) => {
+      const data = await callEnterpriseSearchConfigAPI({ request, config, log });
+
+      if (!Object.keys(data).length) {
+        return response.customError({
+          statusCode: 502,
+          body: 'Error fetching data from Enterprise Search',
+        });
+      } else {
+        return response.ok({
+          body: data,
+          headers: { 'content-type': 'application/json' },
+        });
+      }
+    }
+  );
+}
diff --git a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.ts b/x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.ts
deleted file mode 100644
index a9edd4eb10da0..0000000000000
--- a/x-pack/plugins/enterprise_search/server/routes/enterprise_search/public_url.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { IRouteDependencies } from '../../plugin';
-import { callEnterpriseSearchConfigAPI } from '../../lib/enterprise_search_config_api';
-
-export function registerPublicUrlRoute({ router, config, log }: IRouteDependencies) {
-  router.get(
-    {
-      path: '/api/enterprise_search/public_url',
-      validate: false,
-    },
-    async (context, request, response) => {
-      const { publicUrl = '' } =
-        (await callEnterpriseSearchConfigAPI({ request, config, log })) || {};
-
-      return response.ok({
-        body: { publicUrl },
-        headers: { 'content-type': 'application/json' },
-      });
-    }
-  );
-}

From 471b11408929cb58b3fc10f886bef220f93378d6 Mon Sep 17 00:00:00 2001
From: DeDe Morton <dede.morton@elastic.co>
Date: Fri, 21 Aug 2020 09:08:07 -0700
Subject: [PATCH 06/25] [DOCS] Update links to Beats documentation (#70380)

* Update links to Beats documentation

* Update snapshot files

* Fix lint errors
---
 docs/management/watcher-ui/index.asciidoc     |  2 +-
 .../monitoring/monitoring-metricbeat.asciidoc |  2 +-
 .../public/doc_links/doc_links_service.ts     |  4 ++--
 .../server/tutorials/cloudwatch_logs/index.ts |  3 ++-
 .../instructions/auditbeat_instructions.ts    | 16 ++++++-------
 .../instructions/filebeat_instructions.ts     | 16 ++++++-------
 .../instructions/functionbeat_instructions.ts | 17 ++++++++-----
 .../instructions/heartbeat_instructions.ts    | 21 ++++++++--------
 .../instructions/metricbeat_instructions.ts   | 23 +++++++++++-------
 .../instructions/winlogbeat_instructions.ts   |  5 ++--
 .../server/tutorials/uptime_monitors/index.ts |  2 +-
 .../logs/__snapshots__/reason.test.js.snap    |  4 ++--
 .../public/components/logs/reason.js          |  4 ++--
 .../flyout/__snapshots__/flyout.test.js.snap  | 24 +++++++++----------
 .../apm/enable_metricbeat_instructions.js     |  4 ++--
 .../beats/enable_metricbeat_instructions.js   |  4 ++--
 .../enable_metricbeat_instructions.js         |  2 +-
 .../kibana/enable_metricbeat_instructions.js  |  2 +-
 .../enable_metricbeat_instructions.js         |  2 +-
 19 files changed, 86 insertions(+), 71 deletions(-)

diff --git a/docs/management/watcher-ui/index.asciidoc b/docs/management/watcher-ui/index.asciidoc
index fbe5fcd5cd3a5..23a0acbff5718 100644
--- a/docs/management/watcher-ui/index.asciidoc
+++ b/docs/management/watcher-ui/index.asciidoc
@@ -60,7 +60,7 @@ The following example walks you through creating a threshold alert. The alert
 is triggered when the maximum total CPU usage on a machine goes above a
 certain percentage. The example uses https://www.elastic.co/products/beats/metricbeat[Metricbeat]
 to collect metrics from your systems and services.
-{metricbeat-ref}/metricbeat-installation.html[Learn more] on how to install
+{metricbeat-ref}/metricbeat-installation-configuration.html[Learn more] on how to install
 and get started with Metricbeat.
 
 [float]
diff --git a/docs/user/monitoring/monitoring-metricbeat.asciidoc b/docs/user/monitoring/monitoring-metricbeat.asciidoc
index d18ebe95c7974..5ef3b8177a9c5 100644
--- a/docs/user/monitoring/monitoring-metricbeat.asciidoc
+++ b/docs/user/monitoring/monitoring-metricbeat.asciidoc
@@ -82,7 +82,7 @@ For more information, see {ref}/monitoring-settings.html[Monitoring settings in
 and {ref}/cluster-update-settings.html[Cluster update settings].
 --
 
-. {metricbeat-ref}/metricbeat-installation.html[Install {metricbeat}] on the
+. {metricbeat-ref}/metricbeat-installation-configuration.html[Install {metricbeat}] on the
 same server as {kib}.
 
 . Enable the {kib} {xpack} module in {metricbeat}. +
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index bd279baa78d98..fc753517fd940 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -41,8 +41,8 @@ export class DocLinksService {
         },
         filebeat: {
           base: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}`,
-          installation: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation.html`,
-          configuration: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-configuration.html`,
+          installation: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation-configuration.html`,
+          configuration: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/configuring-howto-filebeat.html`,
           elasticsearchOutput: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/elasticsearch-output.html`,
           startup: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-starting.html`,
           exportedFields: `${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/exported-fields.html`,
diff --git a/src/plugins/home/server/tutorials/cloudwatch_logs/index.ts b/src/plugins/home/server/tutorials/cloudwatch_logs/index.ts
index fb7b07c5dc1af..6b017fae1e21f 100644
--- a/src/plugins/home/server/tutorials/cloudwatch_logs/index.ts
+++ b/src/plugins/home/server/tutorials/cloudwatch_logs/index.ts
@@ -47,7 +47,8 @@ export function cloudwatchLogsSpecProvider(context: TutorialContext): TutorialSc
         an AWS Lambda function. \
         [Learn more]({learnMoreLink}).',
       values: {
-        learnMoreLink: '{config.docs.beats.functionbeat}/functionbeat-getting-started.html',
+        learnMoreLink:
+          '{config.docs.beats.functionbeat}/functionbeat-installation-configuration.html',
       },
     }),
     euiIconType: 'logoAWS',
diff --git a/src/plugins/home/server/tutorials/instructions/auditbeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/auditbeat_instructions.ts
index 2a6cfa0358709..b6f7aa8c53ac9 100644
--- a/src/plugins/home/server/tutorials/instructions/auditbeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/auditbeat_instructions.ts
@@ -31,9 +31,9 @@ export const createAuditbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Auditbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.auditbeatInstructions.install.osxTextPre', {
-        defaultMessage: 'First time using Auditbeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Auditbeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-getting-started.html',
+          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -47,9 +47,9 @@ export const createAuditbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Auditbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.auditbeatInstructions.install.debTextPre', {
-        defaultMessage: 'First time using Auditbeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Auditbeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-getting-started.html',
+          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -68,9 +68,9 @@ export const createAuditbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Auditbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.auditbeatInstructions.install.rpmTextPre', {
-        defaultMessage: 'First time using Auditbeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Auditbeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-getting-started.html',
+          linkUrl: '{config.docs.beats.auditbeat}/auditbeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -92,7 +92,7 @@ export const createAuditbeatInstructions = (context?: TutorialContext) => ({
         'home.tutorials.common.auditbeatInstructions.install.windowsTextPre',
         {
           defaultMessage:
-            'First time using Auditbeat? See the [Getting Started Guide]({guideLinkUrl}).\n\
+            'First time using Auditbeat? See the [Quick Start]({guideLinkUrl}).\n\
  1. Download the Auditbeat Windows zip file from the [Download]({auditbeatLinkUrl}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the `{directoryName}` directory to `Auditbeat`.\n\
@@ -101,7 +101,7 @@ export const createAuditbeatInstructions = (context?: TutorialContext) => ({
  5. From the PowerShell prompt, run the following commands to install Auditbeat as a Windows service.',
           values: {
             folderPath: '`C:\\Program Files`',
-            guideLinkUrl: '{config.docs.beats.auditbeat}/auditbeat-getting-started.html',
+            guideLinkUrl: '{config.docs.beats.auditbeat}/auditbeat-installation-configuration.html',
             auditbeatLinkUrl: 'https://www.elastic.co/downloads/beats/auditbeat',
             directoryName: 'auditbeat-{config.kibana.version}-windows',
           },
diff --git a/src/plugins/home/server/tutorials/instructions/filebeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/filebeat_instructions.ts
index 0e99033b2ea69..c760840165bfc 100644
--- a/src/plugins/home/server/tutorials/instructions/filebeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/filebeat_instructions.ts
@@ -31,9 +31,9 @@ export const createFilebeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Filebeat',
       }),
       textPre: i18n.translate('home.tutorials.common.filebeatInstructions.install.osxTextPre', {
-        defaultMessage: 'First time using Filebeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Filebeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.filebeat}/filebeat-getting-started.html',
+          linkUrl: '{config.docs.beats.filebeat}/filebeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -47,9 +47,9 @@ export const createFilebeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Filebeat',
       }),
       textPre: i18n.translate('home.tutorials.common.filebeatInstructions.install.debTextPre', {
-        defaultMessage: 'First time using Filebeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Filebeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.filebeat}/filebeat-getting-started.html',
+          linkUrl: '{config.docs.beats.filebeat}/filebeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -68,9 +68,9 @@ export const createFilebeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Filebeat',
       }),
       textPre: i18n.translate('home.tutorials.common.filebeatInstructions.install.rpmTextPre', {
-        defaultMessage: 'First time using Filebeat? See the [Getting Started Guide]({linkUrl}).',
+        defaultMessage: 'First time using Filebeat? See the [Quick Start]({linkUrl}).',
         values: {
-          linkUrl: '{config.docs.beats.filebeat}/filebeat-getting-started.html',
+          linkUrl: '{config.docs.beats.filebeat}/filebeat-installation-configuration.html',
         },
       }),
       commands: [
@@ -90,7 +90,7 @@ export const createFilebeatInstructions = (context?: TutorialContext) => ({
       }),
       textPre: i18n.translate('home.tutorials.common.filebeatInstructions.install.windowsTextPre', {
         defaultMessage:
-          'First time using Filebeat? See the [Getting Started Guide]({guideLinkUrl}).\n\
+          'First time using Filebeat? See the [Quick Start]({guideLinkUrl}).\n\
  1. Download the Filebeat Windows zip file from the [Download]({filebeatLinkUrl}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the `{directoryName}` directory to `Filebeat`.\n\
@@ -99,7 +99,7 @@ export const createFilebeatInstructions = (context?: TutorialContext) => ({
  5. From the PowerShell prompt, run the following commands to install Filebeat as a Windows service.',
         values: {
           folderPath: '`C:\\Program Files`',
-          guideLinkUrl: '{config.docs.beats.filebeat}/filebeat-getting-started.html',
+          guideLinkUrl: '{config.docs.beats.filebeat}/filebeat-installation-configuration.html',
           filebeatLinkUrl: 'https://www.elastic.co/downloads/beats/filebeat',
           directoryName: 'filebeat-{config.kibana.version}-windows',
         },
diff --git a/src/plugins/home/server/tutorials/instructions/functionbeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/functionbeat_instructions.ts
index 06ff84146b5d8..61e76bd9d3c18 100644
--- a/src/plugins/home/server/tutorials/instructions/functionbeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/functionbeat_instructions.ts
@@ -31,8 +31,10 @@ export const createFunctionbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Functionbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.functionbeatInstructions.install.osxTextPre', {
-        defaultMessage: 'First time using Functionbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.functionbeat}/functionbeat-getting-started.html' },
+        defaultMessage: 'First time using Functionbeat? See the [Quick Start]({link}).',
+        values: {
+          link: '{config.docs.beats.functionbeat}/functionbeat-installation-configuration.html',
+        },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/functionbeat/functionbeat-{config.kibana.version}-darwin-x86_64.tar.gz',
@@ -47,8 +49,10 @@ export const createFunctionbeatInstructions = (context?: TutorialContext) => ({
       textPre: i18n.translate(
         'home.tutorials.common.functionbeatInstructions.install.linuxTextPre',
         {
-          defaultMessage: 'First time using Functionbeat? See the [Getting Started Guide]({link}).',
-          values: { link: '{config.docs.beats.functionbeat}/functionbeat-getting-started.html' },
+          defaultMessage: 'First time using Functionbeat? See the [Quick Start]({link}).',
+          values: {
+            link: '{config.docs.beats.functionbeat}/functionbeat-installation-configuration.html',
+          },
         }
       ),
       commands: [
@@ -65,7 +69,7 @@ export const createFunctionbeatInstructions = (context?: TutorialContext) => ({
         'home.tutorials.common.functionbeatInstructions.install.windowsTextPre',
         {
           defaultMessage:
-            'First time using Functionbeat? See the [Getting Started Guide]({functionbeatLink}).\n\
+            'First time using Functionbeat? See the [Quick Start]({functionbeatLink}).\n\
  1. Download the Functionbeat Windows zip file from the [Download]({elasticLink}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the {directoryName} directory to `Functionbeat`.\n\
@@ -75,7 +79,8 @@ export const createFunctionbeatInstructions = (context?: TutorialContext) => ({
           values: {
             directoryName: '`functionbeat-{config.kibana.version}-windows`',
             folderPath: '`C:\\Program Files`',
-            functionbeatLink: '{config.docs.beats.functionbeat}/functionbeat-getting-started.html',
+            functionbeatLink:
+              '{config.docs.beats.functionbeat}/functionbeat-installation-configuration.html',
             elasticLink: 'https://www.elastic.co/downloads/beats/functionbeat',
           },
         }
diff --git a/src/plugins/home/server/tutorials/instructions/heartbeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/heartbeat_instructions.ts
index fa5bf5df13b6b..4d519ad8aa01e 100644
--- a/src/plugins/home/server/tutorials/instructions/heartbeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/heartbeat_instructions.ts
@@ -31,8 +31,8 @@ export const createHeartbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Heartbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.heartbeatInstructions.install.osxTextPre', {
-        defaultMessage: 'First time using Heartbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.heartbeat}/heartbeat-getting-started.html' },
+        defaultMessage: 'First time using Heartbeat? See the [Quick Start]({link}).',
+        values: { link: '{config.docs.beats.heartbeat}/heartbeat-installation-configuration.html' },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/heartbeat/heartbeat-{config.kibana.version}-darwin-x86_64.tar.gz',
@@ -45,8 +45,8 @@ export const createHeartbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Heartbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.heartbeatInstructions.install.debTextPre', {
-        defaultMessage: 'First time using Heartbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.heartbeat}/heartbeat-getting-started.html' },
+        defaultMessage: 'First time using Heartbeat? See the [Quick Start]({link}).',
+        values: { link: '{config.docs.beats.heartbeat}/heartbeat-installation-configuration.html' },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/heartbeat/heartbeat-{config.kibana.version}-amd64.deb',
@@ -62,8 +62,8 @@ export const createHeartbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Heartbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.heartbeatInstructions.install.rpmTextPre', {
-        defaultMessage: 'First time using Heartbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.heartbeat}/heartbeat-getting-started.html' },
+        defaultMessage: 'First time using Heartbeat? See the [Quick Start]({link}).',
+        values: { link: '{config.docs.beats.heartbeat}/heartbeat-installation-configuration.html' },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/heartbeat/heartbeat-{config.kibana.version}-x86_64.rpm',
@@ -82,7 +82,7 @@ export const createHeartbeatInstructions = (context?: TutorialContext) => ({
         'home.tutorials.common.heartbeatInstructions.install.windowsTextPre',
         {
           defaultMessage:
-            'First time using Heartbeat? See the [Getting Started Guide]({heartbeatLink}).\n\
+            'First time using Heartbeat? See the [Quick Start]({heartbeatLink}).\n\
  1. Download the Heartbeat Windows zip file from the [Download]({elasticLink}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the {directoryName} directory to `Heartbeat`.\n\
@@ -92,7 +92,8 @@ export const createHeartbeatInstructions = (context?: TutorialContext) => ({
           values: {
             directoryName: '`heartbeat-{config.kibana.version}-windows`',
             folderPath: '`C:\\Program Files`',
-            heartbeatLink: '{config.docs.beats.heartbeat}/heartbeat-getting-started.html',
+            heartbeatLink:
+              '{config.docs.beats.heartbeat}/heartbeat-installation-configuration.html',
             elasticLink: 'https://www.elastic.co/downloads/beats/heartbeat',
           },
         }
@@ -357,7 +358,7 @@ export function heartbeatEnableInstructionsOnPrem() {
         'Where {hostTemplate} is your monitored URL, For more details on how to configure Monitors in \
       Heartbeat, read the [Heartbeat configuration docs.]({configureLink})',
       values: {
-        configureLink: '{config.docs.beats.heartbeat}/heartbeat-configuration.html',
+        configureLink: '{config.docs.beats.heartbeat}/configuring-howto-heartbeat.html',
         hostTemplate: '`<http://localhost:9200>`',
       },
     }
@@ -428,7 +429,7 @@ export function heartbeatEnableInstructionsCloud() {
     {
       defaultMessage:
         'For more details on how to configure Monitors in Heartbeat, read the [Heartbeat configuration docs.]({configureLink})',
-      values: { configureLink: '{config.docs.beats.heartbeat}/heartbeat-configuration.html' },
+      values: { configureLink: '{config.docs.beats.heartbeat}/configuring-howto-heartbeat.html' },
     }
   );
   return {
diff --git a/src/plugins/home/server/tutorials/instructions/metricbeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/metricbeat_instructions.ts
index 651405941610f..cce93e0dfb527 100644
--- a/src/plugins/home/server/tutorials/instructions/metricbeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/metricbeat_instructions.ts
@@ -31,8 +31,10 @@ export const createMetricbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Metricbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.metricbeatInstructions.install.osxTextPre', {
-        defaultMessage: 'First time using Metricbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.metricbeat}/metricbeat-getting-started.html' },
+        defaultMessage: 'First time using Metricbeat? See the [Quick Start]({link}).',
+        values: {
+          link: '{config.docs.beats.metricbeat}/metricbeat-installation-configuration.html',
+        },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/metricbeat/metricbeat-{config.kibana.version}-darwin-x86_64.tar.gz',
@@ -45,8 +47,10 @@ export const createMetricbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Metricbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.metricbeatInstructions.install.debTextPre', {
-        defaultMessage: 'First time using Metricbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.metricbeat}/metricbeat-getting-started.html' },
+        defaultMessage: 'First time using Metricbeat? See the [Quick Start]({link}).',
+        values: {
+          link: '{config.docs.beats.metricbeat}/metricbeat-installation-configuration.html',
+        },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/metricbeat/metricbeat-{config.kibana.version}-amd64.deb',
@@ -62,8 +66,10 @@ export const createMetricbeatInstructions = (context?: TutorialContext) => ({
         defaultMessage: 'Download and install Metricbeat',
       }),
       textPre: i18n.translate('home.tutorials.common.metricbeatInstructions.install.rpmTextPre', {
-        defaultMessage: 'First time using Metricbeat? See the [Getting Started Guide]({link}).',
-        values: { link: '{config.docs.beats.metricbeat}/metricbeat-getting-started.html' },
+        defaultMessage: 'First time using Metricbeat? See the [Quick Start]({link}).',
+        values: {
+          link: '{config.docs.beats.metricbeat}/metricbeat-installation-configuration.html',
+        },
       }),
       commands: [
         'curl -L -O https://artifacts.elastic.co/downloads/beats/metricbeat/metricbeat-{config.kibana.version}-x86_64.rpm',
@@ -82,7 +88,7 @@ export const createMetricbeatInstructions = (context?: TutorialContext) => ({
         'home.tutorials.common.metricbeatInstructions.install.windowsTextPre',
         {
           defaultMessage:
-            'First time using Metricbeat? See the [Getting Started Guide]({metricbeatLink}).\n\
+            'First time using Metricbeat? See the [Quick Start]({metricbeatLink}).\n\
  1. Download the Metricbeat Windows zip file from the [Download]({elasticLink}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the {directoryName} directory to `Metricbeat`.\n\
@@ -92,7 +98,8 @@ export const createMetricbeatInstructions = (context?: TutorialContext) => ({
           values: {
             directoryName: '`metricbeat-{config.kibana.version}-windows`',
             folderPath: '`C:\\Program Files`',
-            metricbeatLink: '{config.docs.beats.metricbeat}/metricbeat-getting-started.html',
+            metricbeatLink:
+              '{config.docs.beats.metricbeat}/metricbeat-installation-configuration.html',
             elasticLink: 'https://www.elastic.co/downloads/beats/metricbeat',
           },
         }
diff --git a/src/plugins/home/server/tutorials/instructions/winlogbeat_instructions.ts b/src/plugins/home/server/tutorials/instructions/winlogbeat_instructions.ts
index 27d7822e080a3..1eacbb729aee4 100644
--- a/src/plugins/home/server/tutorials/instructions/winlogbeat_instructions.ts
+++ b/src/plugins/home/server/tutorials/instructions/winlogbeat_instructions.ts
@@ -34,7 +34,7 @@ export const createWinlogbeatInstructions = (context?: TutorialContext) => ({
         'home.tutorials.common.winlogbeatInstructions.install.windowsTextPre',
         {
           defaultMessage:
-            'First time using Winlogbeat? See the [Getting Started Guide]({winlogbeatLink}).\n\
+            'First time using Winlogbeat? See the [Quick Start]({winlogbeatLink}).\n\
  1. Download the Winlogbeat Windows zip file from the [Download]({elasticLink}) page.\n\
  2. Extract the contents of the zip file into {folderPath}.\n\
  3. Rename the {directoryName} directory to `Winlogbeat`.\n\
@@ -44,7 +44,8 @@ export const createWinlogbeatInstructions = (context?: TutorialContext) => ({
           values: {
             directoryName: '`winlogbeat-{config.kibana.version}-windows`',
             folderPath: '`C:\\Program Files`',
-            winlogbeatLink: '{config.docs.beats.winlogbeat}/winlogbeat-getting-started.html',
+            winlogbeatLink:
+              '{config.docs.beats.winlogbeat}/winlogbeat-installation-configuration.html',
             elasticLink: 'https://www.elastic.co/downloads/beats/winlogbeat',
           },
         }
diff --git a/src/plugins/home/server/tutorials/uptime_monitors/index.ts b/src/plugins/home/server/tutorials/uptime_monitors/index.ts
index 7366583e59778..96b81c9fb4181 100644
--- a/src/plugins/home/server/tutorials/uptime_monitors/index.ts
+++ b/src/plugins/home/server/tutorials/uptime_monitors/index.ts
@@ -47,7 +47,7 @@ export function uptimeMonitorsSpecProvider(context: TutorialContext): TutorialSc
         Given a list of URLs, Heartbeat asks the simple question: Are you alive? \
         [Learn more]({learnMoreLink}).',
       values: {
-        learnMoreLink: '{config.docs.beats.heartbeat}/heartbeat-getting-started.html',
+        learnMoreLink: '{config.docs.beats.heartbeat}/heartbeat-installation-configuration.html',
       },
     }),
     euiIconType: 'uptimeApp',
diff --git a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
index b63fe7047e96c..c925ecd1c98ff 100644
--- a/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logs/__snapshots__/reason.test.js.snap
@@ -13,7 +13,7 @@ exports[`Logs should render a default message 1`] = `
       values={
         Object {
           "link": <EuiLink
-            href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html"
+            href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation-configuration.html"
             target="_blank"
           >
             <FormattedMessage
@@ -117,7 +117,7 @@ exports[`Logs should render with a no index pattern found reason 1`] = `
       values={
         Object {
           "link": <EuiLink
-            href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation.html"
+            href="https://www.elastic.co/guide/en/beats/filebeat/current/filebeat-installation-configuration.html"
             target="_blank"
           >
             Filebeat
diff --git a/x-pack/plugins/monitoring/public/components/logs/reason.js b/x-pack/plugins/monitoring/public/components/logs/reason.js
index ad21f7f81d9bd..55dca72bf645d 100644
--- a/x-pack/plugins/monitoring/public/components/logs/reason.js
+++ b/x-pack/plugins/monitoring/public/components/logs/reason.js
@@ -24,7 +24,7 @@ export const Reason = ({ reason }) => {
         link: (
           <EuiLink
             target="_blank"
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation-configuration.html`}
           >
             <FormattedMessage
               id="xpack.monitoring.logs.reason.defaultMessageLink"
@@ -48,7 +48,7 @@ export const Reason = ({ reason }) => {
           link: (
             <EuiLink
               target="_blank"
-              href={`${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation.html`}
+              href={`${ELASTIC_WEBSITE_URL}guide/en/beats/filebeat/${DOC_LINK_VERSION}/filebeat-installation-configuration.html`}
             >
               {i18n.translate('xpack.monitoring.logs.reason.noIndexPatternLink', {
                 defaultMessage: 'Filebeat',
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
index c5507efb989de..2f29cd9122a61 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/flyout/__snapshots__/flyout.test.js.snap
@@ -156,7 +156,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -215,7 +215,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
@@ -282,7 +282,7 @@ exports[`Flyout apm part two should show instructions to migrate to metricbeat 1
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
@@ -495,7 +495,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -591,7 +591,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
@@ -658,7 +658,7 @@ exports[`Flyout beats part two should show instructions to migrate to metricbeat
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
@@ -860,7 +860,7 @@ exports[`Flyout elasticsearch part two should show instructions to migrate to me
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -1211,7 +1211,7 @@ exports[`Flyout kibana part two should show instructions to migrate to metricbea
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -1545,7 +1545,7 @@ exports[`Flyout logstash part two should show instructions to migrate to metricb
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -1822,7 +1822,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
           "children": <EuiText>
             <p>
               <EuiLink
-                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation.html"
+                href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-installation-configuration.html"
                 target="_blank"
               >
                 <FormattedMessage
@@ -1918,7 +1918,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
@@ -1985,7 +1985,7 @@ exports[`Flyout should render the beat type for beats for the enabling metricbea
                           "link": <React.Fragment>
                              
                             <EuiLink
-                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/metricbeat-configuration.html"
+                              href="https://www.elastic.co/guide/en/beats/metricbeat/current/configuring-howto-metricbeat.html"
                               target="_blank"
                             >
                               <FormattedMessage
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
index 51a7a139aafd0..c176a84bc8db3 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/apm/enable_metricbeat_instructions.js
@@ -14,7 +14,7 @@ import { getMigrationStatusStep, getSecurityStep } from '../common_instructions'
 export function getApmInstructionsForEnablingMetricbeat(product, _meta, { esMonitoringUrl }) {
   const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks;
   const securitySetup = getSecurityStep(
-    `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-configuration.html`
+    `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/configuring-howto-metricbeat.html`
   );
 
   const installMetricbeatStep = {
@@ -28,7 +28,7 @@ export function getApmInstructionsForEnablingMetricbeat(product, _meta, { esMoni
       <EuiText>
         <p>
           <EuiLink
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`}
             target="_blank"
           >
             <FormattedMessage
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
index ddaa610b874a8..d34d18ac250e9 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/beats/enable_metricbeat_instructions.js
@@ -16,7 +16,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, { esMo
   const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = Legacy.shims.docLinks;
   const beatType = product.beatType;
   const securitySetup = getSecurityStep(
-    `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-configuration.html`
+    `${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/configuring-howto-metricbeat.html`
   );
 
   const installMetricbeatStep = {
@@ -33,7 +33,7 @@ export function getBeatsInstructionsForEnablingMetricbeat(product, _meta, { esMo
       <EuiText>
         <p>
           <EuiLink
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`}
             target="_blank"
           >
             <FormattedMessage
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
index 8607739e7090c..3d6f94c210b3b 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/elasticsearch/enable_metricbeat_instructions.js
@@ -32,7 +32,7 @@ export function getElasticsearchInstructionsForEnablingMetricbeat(
       <EuiText>
         <p>
           <EuiLink
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`}
             target="_blank"
           >
             <FormattedMessage
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
index eb1aedd47c568..5a84a4f6cc08d 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/kibana/enable_metricbeat_instructions.js
@@ -28,7 +28,7 @@ export function getKibanaInstructionsForEnablingMetricbeat(product, _meta, { esM
       <EuiText>
         <p>
           <EuiLink
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`}
             target="_blank"
           >
             <FormattedMessage
diff --git a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
index ce542fa8a05e5..d55ef34e2284e 100644
--- a/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
+++ b/x-pack/plugins/monitoring/public/components/metricbeat_migration/instruction_steps/logstash/enable_metricbeat_instructions.js
@@ -28,7 +28,7 @@ export function getLogstashInstructionsForEnablingMetricbeat(product, _meta, { e
       <EuiText>
         <p>
           <EuiLink
-            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation.html`}
+            href={`${ELASTIC_WEBSITE_URL}guide/en/beats/metricbeat/${DOC_LINK_VERSION}/metricbeat-installation-configuration.html`}
             target="_blank"
           >
             <FormattedMessage

From 86f73cb0c225b12c777b1a972f15141080daf992 Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Fri, 21 Aug 2020 18:08:25 +0200
Subject: [PATCH 07/25] [Lens] Register saved object references (#74523)

---
 x-pack/plugins/lens/common/types.ts           |  10 +
 .../lens/public/app_plugin/app.test.tsx       | 137 +++++++----
 x-pack/plugins/lens/public/app_plugin/app.tsx |  92 ++++---
 .../visualization.test.tsx                    |  19 +-
 .../datatable_visualization/visualization.tsx |  11 +-
 .../__mocks__/expression_helpers.ts           |  14 ++
 .../editor_frame/config_panel/layer_panel.tsx |   1 -
 .../editor_frame/editor_frame.test.tsx        | 109 +++------
 .../editor_frame/editor_frame.tsx             | 116 ++++-----
 .../editor_frame/expression_helpers.ts        |  60 +----
 .../editor_frame/save.test.ts                 |  37 ++-
 .../editor_frame_service/editor_frame/save.ts |  73 +++---
 .../editor_frame/state_helpers.ts             |  87 +++++++
 .../editor_frame/state_management.test.ts     |   8 +-
 .../editor_frame/suggestion_helpers.ts        |   2 +-
 .../editor_frame/suggestion_panel.test.tsx    |   1 -
 .../editor_frame/suggestion_panel.tsx         |  41 ++--
 .../workspace_panel/chart_switch.tsx          |   2 +-
 .../workspace_panel/workspace_panel.test.tsx  |  19 +-
 .../workspace_panel/workspace_panel.tsx       |  21 +-
 .../embeddable/embeddable.test.tsx            |  56 ++++-
 .../embeddable/embeddable.tsx                 |  60 ++++-
 .../embeddable/embeddable_factory.ts          |  15 +-
 .../embeddable/expression_wrapper.tsx         |  13 +-
 .../public/editor_frame_service/mocks.tsx     |   4 +-
 .../public/editor_frame_service/service.tsx   |  20 +-
 .../__mocks__/loader.ts                       |   4 +
 .../indexpattern.test.ts                      | 107 ++++----
 .../indexpattern_datasource/indexpattern.tsx  |  34 ++-
 .../indexpattern_datasource/loader.test.ts    |  86 ++++++-
 .../public/indexpattern_datasource/loader.ts  |  54 ++++-
 .../public/indexpattern_datasource/types.ts   |   9 +-
 .../metric_visualization.test.ts              |   9 +-
 .../metric_visualization.tsx                  |  16 +-
 .../lens/public/metric_visualization/types.ts |   2 -
 .../persistence/filter_references.test.ts     |  99 ++++++++
 .../public/persistence/filter_references.ts   |  56 +++++
 .../plugins/lens/public/persistence/index.ts  |   1 +
 .../persistence/saved_object_store.test.ts    |  51 ++--
 .../public/persistence/saved_object_store.ts  |  37 +--
 .../pie_visualization/pie_visualization.tsx   |   4 +-
 .../public/pie_visualization/to_expression.ts |  20 +-
 x-pack/plugins/lens/public/types.ts           |  37 ++-
 .../xy_visualization/to_expression.test.ts    |  16 +-
 .../public/xy_visualization/to_expression.ts  |  32 +--
 .../lens/public/xy_visualization/types.ts     |   1 -
 .../xy_visualization/xy_visualization.test.ts |   6 -
 .../xy_visualization/xy_visualization.tsx     |   6 +-
 .../__snapshots__/migrations.test.ts.snap     | 188 ++++++++++++++
 x-pack/plugins/lens/server/migrations.test.ts | 229 ++++++++++++++++++
 x-pack/plugins/lens/server/migrations.ts      | 136 ++++++++++-
 51 files changed, 1609 insertions(+), 659 deletions(-)
 create mode 100644 x-pack/plugins/lens/public/editor_frame_service/editor_frame/__mocks__/expression_helpers.ts
 create mode 100644 x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
 create mode 100644 x-pack/plugins/lens/public/persistence/filter_references.test.ts
 create mode 100644 x-pack/plugins/lens/public/persistence/filter_references.ts
 create mode 100644 x-pack/plugins/lens/server/__snapshots__/migrations.test.ts.snap

diff --git a/x-pack/plugins/lens/common/types.ts b/x-pack/plugins/lens/common/types.ts
index 56a56bdc2d59c..c572b59899fce 100644
--- a/x-pack/plugins/lens/common/types.ts
+++ b/x-pack/plugins/lens/common/types.ts
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { FilterMeta, Filter } from 'src/plugins/data/common';
+
 export interface ExistingFields {
   indexPatternTitle: string;
   existingFieldNames: string[];
@@ -13,3 +15,11 @@ export interface DateRange {
   fromDate: string;
   toDate: string;
 }
+
+export interface PersistableFilterMeta extends FilterMeta {
+  indexRefName?: string;
+}
+
+export interface PersistableFilter extends Filter {
+  meta: PersistableFilterMeta;
+}
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 70136a486e8c1..442f82161512f 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -33,7 +33,7 @@ import { navigationPluginMock } from '../../../../../src/plugins/navigation/publ
 import { TopNavMenuData } from '../../../../../src/plugins/navigation/public';
 import { coreMock } from 'src/core/public/mocks';
 
-jest.mock('../persistence');
+jest.mock('../editor_frame_service/editor_frame/expression_helpers');
 jest.mock('src/core/public');
 jest.mock('../../../../../src/plugins/saved_objects/public', () => {
   // eslint-disable-next-line no-shadow
@@ -284,11 +284,11 @@ describe('Lens App', () => {
     (defaultArgs.docStorage.load as jest.Mock).mockResolvedValue({
       id: '1234',
       title: 'Daaaaaaadaumching!',
-      expression: 'valid expression',
       state: {
         query: 'fake query',
-        datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
+        filters: [],
       },
+      references: [],
     });
     await act(async () => {
       instance.setProps({ docId: '1234' });
@@ -346,12 +346,11 @@ describe('Lens App', () => {
       args.editorFrame = frame;
       (args.docStorage.load as jest.Mock).mockResolvedValue({
         id: '1234',
-        expression: 'valid expression',
         state: {
           query: 'fake query',
           filters: [{ query: { match_phrase: { src: 'test' } } }],
-          datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
         },
+        references: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
       });
 
       instance = mount(<App {...args} />);
@@ -375,15 +374,13 @@ describe('Lens App', () => {
       expect(frame.mount).toHaveBeenCalledWith(
         expect.any(Element),
         expect.objectContaining({
-          doc: {
+          doc: expect.objectContaining({
             id: '1234',
-            expression: 'valid expression',
-            state: {
+            state: expect.objectContaining({
               query: 'fake query',
               filters: [{ query: { match_phrase: { src: 'test' } } }],
-              datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
-            },
-          },
+            }),
+          }),
         })
       );
     });
@@ -444,7 +441,6 @@ describe('Lens App', () => {
           expression: 'valid expression',
           state: {
             query: 'kuery',
-            datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
           },
         } as jest.ResolvedValue<Document>);
       });
@@ -467,7 +463,12 @@ describe('Lens App', () => {
       }
 
       async function save({
-        lastKnownDoc = { expression: 'kibana 3' },
+        lastKnownDoc = {
+          references: [],
+          state: {
+            filters: [],
+          },
+        },
         initialDocId,
         ...saveProps
       }: SaveProps & {
@@ -481,16 +482,14 @@ describe('Lens App', () => {
         args.editorFrame = frame;
         (args.docStorage.load as jest.Mock).mockResolvedValue({
           id: '1234',
-          expression: 'kibana',
+          references: [],
           state: {
             query: 'fake query',
-            datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
             filters: [],
           },
         });
         (args.docStorage.save as jest.Mock).mockImplementation(async ({ id }) => ({
           id: id || 'aaa',
-          expression: 'kibana 2',
         }));
 
         await act(async () => {
@@ -508,6 +507,7 @@ describe('Lens App', () => {
           onChange({
             filterableIndexPatterns: [],
             doc: { id: initialDocId, ...lastKnownDoc } as Document,
+            isSaveable: true,
           })
         );
 
@@ -541,7 +541,8 @@ describe('Lens App', () => {
         act(() =>
           onChange({
             filterableIndexPatterns: [],
-            doc: ({ id: 'will save this', expression: 'valid expression' } as unknown) as Document,
+            doc: ({ id: 'will save this' } as unknown) as Document,
+            isSaveable: true,
           })
         );
         instance.update();
@@ -560,7 +561,8 @@ describe('Lens App', () => {
         act(() =>
           onChange({
             filterableIndexPatterns: [],
-            doc: ({ id: 'will save this', expression: 'valid expression' } as unknown) as Document,
+            doc: ({ id: 'will save this' } as unknown) as Document,
+            isSaveable: true,
           })
         );
         instance.update();
@@ -575,11 +577,12 @@ describe('Lens App', () => {
           newTitle: 'hello there',
         });
 
-        expect(args.docStorage.save).toHaveBeenCalledWith({
-          id: undefined,
-          title: 'hello there',
-          expression: 'kibana 3',
-        });
+        expect(args.docStorage.save).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: undefined,
+            title: 'hello there',
+          })
+        );
 
         expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true);
 
@@ -595,11 +598,12 @@ describe('Lens App', () => {
           newTitle: 'hello there',
         });
 
-        expect(args.docStorage.save).toHaveBeenCalledWith({
-          id: undefined,
-          title: 'hello there',
-          expression: 'kibana 3',
-        });
+        expect(args.docStorage.save).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: undefined,
+            title: 'hello there',
+          })
+        );
 
         expect(args.redirectTo).toHaveBeenCalledWith('aaa', undefined, true);
 
@@ -615,11 +619,12 @@ describe('Lens App', () => {
           newTitle: 'hello there',
         });
 
-        expect(args.docStorage.save).toHaveBeenCalledWith({
-          id: '1234',
-          title: 'hello there',
-          expression: 'kibana 3',
-        });
+        expect(args.docStorage.save).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: '1234',
+            title: 'hello there',
+          })
+        );
 
         expect(args.redirectTo).not.toHaveBeenCalled();
 
@@ -639,7 +644,8 @@ describe('Lens App', () => {
         act(() =>
           onChange({
             filterableIndexPatterns: [],
-            doc: ({ id: undefined, expression: 'new expression' } as unknown) as Document,
+            doc: ({ id: undefined } as unknown) as Document,
+            isSaveable: true,
           })
         );
 
@@ -663,11 +669,12 @@ describe('Lens App', () => {
           newTitle: 'hello there',
         });
 
-        expect(args.docStorage.save).toHaveBeenCalledWith({
-          expression: 'kibana 3',
-          id: undefined,
-          title: 'hello there',
-        });
+        expect(args.docStorage.save).toHaveBeenCalledWith(
+          expect.objectContaining({
+            id: undefined,
+            title: 'hello there',
+          })
+        );
 
         expect(args.redirectTo).toHaveBeenCalledWith('aaa', true, true);
       });
@@ -717,7 +724,8 @@ describe('Lens App', () => {
         await act(async () =>
           onChange({
             filterableIndexPatterns: [],
-            doc: ({ id: '123', expression: 'valid expression' } as unknown) as Document,
+            doc: ({ id: '123' } as unknown) as Document,
+            isSaveable: true,
           })
         );
         instance.update();
@@ -756,7 +764,8 @@ describe('Lens App', () => {
         await act(async () =>
           onChange({
             filterableIndexPatterns: [],
-            doc: ({ expression: 'valid expression' } as unknown) as Document,
+            doc: ({} as unknown) as Document,
+            isSaveable: true,
           })
         );
         instance.update();
@@ -779,7 +788,6 @@ describe('Lens App', () => {
         expression: 'valid expression',
         state: {
           query: 'kuery',
-          datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
         },
       } as jest.ResolvedValue<Document>);
     });
@@ -824,8 +832,9 @@ describe('Lens App', () => {
 
       await act(async () => {
         onChange({
-          filterableIndexPatterns: [{ id: '1', title: 'newIndex' }],
-          doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
+          filterableIndexPatterns: ['1'],
+          doc: ({ id: undefined } as unknown) as Document,
+          isSaveable: true,
         });
       });
 
@@ -842,8 +851,9 @@ describe('Lens App', () => {
 
       await act(async () => {
         onChange({
-          filterableIndexPatterns: [{ id: '2', title: 'second index' }],
-          doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
+          filterableIndexPatterns: ['2'],
+          doc: ({ id: undefined } as unknown) as Document,
+          isSaveable: true,
         });
       });
 
@@ -1078,11 +1088,11 @@ describe('Lens App', () => {
       (defaultArgs.docStorage.load as jest.Mock).mockResolvedValue({
         id: '1234',
         title: 'My cool doc',
-        expression: 'valid expression',
         state: {
           query: 'kuery',
-          datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'saved' }] },
+          filters: [],
         },
+        references: [],
       } as jest.ResolvedValue<Document>);
     });
 
@@ -1114,7 +1124,12 @@ describe('Lens App', () => {
       act(() =>
         onChange({
           filterableIndexPatterns: [],
-          doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
+          doc: ({
+            id: undefined,
+
+            references: [],
+          } as unknown) as Document,
+          isSaveable: true,
         })
       );
       instance.update();
@@ -1135,7 +1150,8 @@ describe('Lens App', () => {
       act(() =>
         onChange({
           filterableIndexPatterns: [],
-          doc: ({ id: undefined, expression: 'valid expression' } as unknown) as Document,
+          doc: ({ id: undefined, state: {} } as unknown) as Document,
+          isSaveable: true,
         })
       );
       instance.update();
@@ -1159,7 +1175,12 @@ describe('Lens App', () => {
       act(() =>
         onChange({
           filterableIndexPatterns: [],
-          doc: ({ id: '1234', expression: 'different expression' } as unknown) as Document,
+          doc: ({
+            id: '1234',
+
+            references: [],
+          } as unknown) as Document,
+          isSaveable: true,
         })
       );
       instance.update();
@@ -1183,7 +1204,16 @@ describe('Lens App', () => {
       act(() =>
         onChange({
           filterableIndexPatterns: [],
-          doc: ({ id: '1234', expression: 'valid expression' } as unknown) as Document,
+          doc: ({
+            id: '1234',
+            title: 'My cool doc',
+            references: [],
+            state: {
+              query: 'kuery',
+              filters: [],
+            },
+          } as unknown) as Document,
+          isSaveable: true,
         })
       );
       instance.update();
@@ -1207,7 +1237,8 @@ describe('Lens App', () => {
       act(() =>
         onChange({
           filterableIndexPatterns: [],
-          doc: ({ id: '1234', expression: null } as unknown) as Document,
+          doc: ({ id: '1234', references: [] } as unknown) as Document,
+          isSaveable: true,
         })
       );
       instance.update();
diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
index 5ca6f27a0c578..021ca8b182b2b 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -28,7 +28,7 @@ import {
   OnSaveProps,
   checkForDuplicateTitle,
 } from '../../../../../src/plugins/saved_objects/public';
-import { Document, SavedObjectStore } from '../persistence';
+import { Document, SavedObjectStore, injectFilterReferences } from '../persistence';
 import { EditorFrameInstance } from '../types';
 import { NativeRenderer } from '../native_renderer';
 import { trackUiEvent } from '../lens_ui_telemetry';
@@ -57,6 +57,7 @@ interface State {
   query: Query;
   filters: Filter[];
   savedQuery?: SavedQuery;
+  isSaveable: boolean;
 }
 
 export function App({
@@ -100,6 +101,7 @@ export function App({
       originatingApp,
       filters: data.query.filterManager.getFilters(),
       indicateNoData: false,
+      isSaveable: false,
     };
   });
 
@@ -122,11 +124,7 @@ export function App({
 
   const { lastKnownDoc } = state;
 
-  const isSaveable =
-    lastKnownDoc &&
-    lastKnownDoc.expression &&
-    lastKnownDoc.expression.length > 0 &&
-    core.application.capabilities.visualize.save;
+  const savingPermitted = state.isSaveable && core.application.capabilities.visualize.save;
 
   useEffect(() => {
     // Clear app-specific filters when navigating to Lens. Necessary because Lens
@@ -177,15 +175,34 @@ export function App({
     history,
   ]);
 
+  const getLastKnownDocWithoutPinnedFilters = useCallback(
+    function () {
+      if (!lastKnownDoc) return undefined;
+      const [pinnedFilters, appFilters] = _.partition(
+        injectFilterReferences(lastKnownDoc.state?.filters || [], lastKnownDoc.references),
+        esFilters.isFilterPinned
+      );
+      return pinnedFilters?.length
+        ? {
+            ...lastKnownDoc,
+            state: {
+              ...lastKnownDoc.state,
+              filters: appFilters,
+            },
+          }
+        : lastKnownDoc;
+    },
+    [lastKnownDoc]
+  );
+
   useEffect(() => {
     onAppLeave((actions) => {
       // Confirm when the user has made any changes to an existing doc
       // or when the user has configured something without saving
       if (
         core.application.capabilities.visualize.save &&
-        (state.persistedDoc?.expression
-          ? !_.isEqual(lastKnownDoc?.expression, state.persistedDoc.expression)
-          : lastKnownDoc?.expression)
+        !_.isEqual(state.persistedDoc?.state, getLastKnownDocWithoutPinnedFilters()?.state) &&
+        (state.isSaveable || state.persistedDoc)
       ) {
         return actions.confirm(
           i18n.translate('xpack.lens.app.unsavedWorkMessage', {
@@ -199,7 +216,14 @@ export function App({
         return actions.default();
       }
     });
-  }, [lastKnownDoc, onAppLeave, state.persistedDoc, core.application.capabilities.visualize.save]);
+  }, [
+    lastKnownDoc,
+    onAppLeave,
+    state.persistedDoc,
+    state.isSaveable,
+    core.application.capabilities.visualize.save,
+    getLastKnownDocWithoutPinnedFilters,
+  ]);
 
   // Sync Kibana breadcrumbs any time the saved document's title changes
   useEffect(() => {
@@ -248,13 +272,17 @@ export function App({
           .load(docId)
           .then((doc) => {
             getAllIndexPatterns(
-              doc.state.datasourceMetaData.filterableIndexPatterns,
+              _.uniq(
+                doc.references.filter(({ type }) => type === 'index-pattern').map(({ id }) => id)
+              ),
               data.indexPatterns,
               core.notifications
             )
               .then((indexPatterns) => {
                 // Don't overwrite any pinned filters
-                data.query.filterManager.setAppFilters(doc.state.filters);
+                data.query.filterManager.setAppFilters(
+                  injectFilterReferences(doc.state.filters, doc.references)
+                );
                 setState((s) => ({
                   ...s,
                   isLoading: false,
@@ -264,13 +292,13 @@ export function App({
                   indexPatternsForTopNav: indexPatterns,
                 }));
               })
-              .catch(() => {
+              .catch((e) => {
                 setState((s) => ({ ...s, isLoading: false }));
 
                 redirectTo();
               });
           })
-          .catch(() => {
+          .catch((e) => {
             setState((s) => ({ ...s, isLoading: false }));
 
             core.notifications.toasts.addDanger(
@@ -306,22 +334,9 @@ export function App({
     if (!lastKnownDoc) {
       return;
     }
-    const [pinnedFilters, appFilters] = _.partition(
-      lastKnownDoc.state?.filters,
-      esFilters.isFilterPinned
-    );
-    const lastDocWithoutPinned = pinnedFilters?.length
-      ? {
-          ...lastKnownDoc,
-          state: {
-            ...lastKnownDoc.state,
-            filters: appFilters,
-          },
-        }
-      : lastKnownDoc;
 
     const doc = {
-      ...lastDocWithoutPinned,
+      ...getLastKnownDocWithoutPinnedFilters()!,
       description: saveProps.newDescription,
       id: saveProps.newCopyOnSave ? undefined : lastKnownDoc.id,
       title: saveProps.newTitle,
@@ -411,7 +426,7 @@ export function App({
                         emphasize: true,
                         iconType: 'check',
                         run: () => {
-                          if (isSaveable && lastKnownDoc) {
+                          if (savingPermitted) {
                             runSave({
                               newTitle: lastKnownDoc.title,
                               newCopyOnSave: false,
@@ -421,7 +436,7 @@ export function App({
                           }
                         },
                         testId: 'lnsApp_saveAndReturnButton',
-                        disableButton: !isSaveable,
+                        disableButton: !savingPermitted,
                       },
                     ]
                   : []),
@@ -436,12 +451,12 @@ export function App({
                         }),
                   emphasize: !state.originatingApp || !lastKnownDoc?.id,
                   run: () => {
-                    if (isSaveable && lastKnownDoc) {
+                    if (savingPermitted) {
                       setState((s) => ({ ...s, isSaveModalVisible: true }));
                     }
                   },
                   testId: 'lnsApp_saveButton',
-                  disableButton: !isSaveable,
+                  disableButton: !savingPermitted,
                 },
               ]}
               data-test-subj="lnsApp_topNav"
@@ -522,7 +537,10 @@ export function App({
                 doc: state.persistedDoc,
                 onError,
                 showNoDataPopover,
-                onChange: ({ filterableIndexPatterns, doc }) => {
+                onChange: ({ filterableIndexPatterns, doc, isSaveable }) => {
+                  if (isSaveable !== state.isSaveable) {
+                    setState((s) => ({ ...s, isSaveable }));
+                  }
                   if (!_.isEqual(state.persistedDoc, doc)) {
                     setState((s) => ({ ...s, lastKnownDoc: doc }));
                   }
@@ -530,8 +548,8 @@ export function App({
                   // Update the cached index patterns if the user made a change to any of them
                   if (
                     state.indexPatternsForTopNav.length !== filterableIndexPatterns.length ||
-                    filterableIndexPatterns.find(
-                      ({ id }) =>
+                    filterableIndexPatterns.some(
+                      (id) =>
                         !state.indexPatternsForTopNav.find((indexPattern) => indexPattern.id === id)
                     )
                   ) {
@@ -573,12 +591,12 @@ export function App({
 }
 
 export async function getAllIndexPatterns(
-  ids: Array<{ id: string }>,
+  ids: string[],
   indexPatternsService: IndexPatternsContract,
   notifications: NotificationsStart
 ): Promise<IndexPatternInstance[]> {
   try {
-    return await Promise.all(ids.map(({ id }) => indexPatternsService.get(id)));
+    return await Promise.all(ids.map((id) => indexPatternsService.get(id)));
   } catch (e) {
     notifications.toasts.addDanger(
       i18n.translate('xpack.lens.app.indexPatternLoadingError', {
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 0b6584277ffa7..194f12cf9291b 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.test.tsx
@@ -50,20 +50,6 @@ describe('Datatable Visualization', () => {
     });
   });
 
-  describe('#getPersistableState', () => {
-    it('should persist the internal state', () => {
-      const expectedState: DatatableVisualizationState = {
-        layers: [
-          {
-            layerId: 'baz',
-            columns: ['a', 'b', 'c'],
-          },
-        ],
-      };
-      expect(datatableVisualization.getPersistableState(expectedState)).toEqual(expectedState);
-    });
-  });
-
   describe('#getLayerIds', () => {
     it('return the layer ids', () => {
       const state: DatatableVisualizationState = {
@@ -340,7 +326,10 @@ describe('Datatable Visualization', () => {
         label: 'label',
       });
 
-      const expression = datatableVisualization.toExpression({ layers: [layer] }, frame) as Ast;
+      const expression = datatableVisualization.toExpression(
+        { layers: [layer] },
+        frame.datasourceLayers
+      ) as Ast;
       const tableArgs = buildExpression(expression).findFunction('lens_datatable_columns');
 
       expect(tableArgs).toHaveLength(1);
diff --git a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
index 659f8ea12bcb0..5aff4e14b17f2 100644
--- a/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/datatable_visualization/visualization.tsx
@@ -25,10 +25,7 @@ function newLayerState(layerId: string): LayerState {
   };
 }
 
-export const datatableVisualization: Visualization<
-  DatatableVisualizationState,
-  DatatableVisualizationState
-> = {
+export const datatableVisualization: Visualization<DatatableVisualizationState> = {
   id: 'lnsDatatable',
 
   visualizationTypes: [
@@ -75,8 +72,6 @@ export const datatableVisualization: Visualization<
     );
   },
 
-  getPersistableState: (state) => state,
-
   getSuggestions({
     table,
     state,
@@ -186,9 +181,9 @@ export const datatableVisualization: Visualization<
     };
   },
 
-  toExpression(state, frame): Ast {
+  toExpression(state, datasourceLayers): Ast {
     const layer = state.layers[0];
-    const datasource = frame.datasourceLayers[layer.layerId];
+    const datasource = datasourceLayers[layer.layerId];
     const originalOrder = datasource.getTableSpec().map(({ columnId }) => columnId);
     // When we add a column it could be empty, and therefore have no order
     const sortedColumns = Array.from(new Set(originalOrder.concat(layer.columns)));
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/__mocks__/expression_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/__mocks__/expression_helpers.ts
new file mode 100644
index 0000000000000..e0b3616315cbd
--- /dev/null
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/__mocks__/expression_helpers.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Ast } from '@kbn/interpreter/common';
+
+export function buildExpression(): Ast {
+  return {
+    type: 'expression',
+    chain: [{ type: 'function', function: 'test', arguments: {} }],
+  };
+}
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 38224bf962a3f..b2804cfddba58 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -124,7 +124,6 @@ export function LayerPanel(
                     const nextPublicAPI = layerDatasource.getPublicAPI({
                       state: newState,
                       layerId,
-                      dateRange: props.framePublicAPI.dateRange,
                     });
                     const nextTable = new Set(
                       nextPublicAPI.getTableSpec().map(({ columnId }) => columnId)
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 2f7a78197b2b2..e628ea0675a8d 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
@@ -170,25 +170,22 @@ describe('editor_frame', () => {
             doc={{
               visualizationType: 'testVis',
               title: '',
-              expression: '',
               state: {
                 datasourceStates: {
                   testDatasource: datasource1State,
                   testDatasource2: datasource2State,
                 },
                 visualization: {},
-                datasourceMetaData: {
-                  filterableIndexPatterns: [],
-                },
                 query: { query: '', language: 'lucene' },
                 filters: [],
               },
+              references: [],
             }}
           />
         );
       });
-      expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State);
-      expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State);
+      expect(mockDatasource.initialize).toHaveBeenCalledWith(datasource1State, []);
+      expect(mockDatasource2.initialize).toHaveBeenCalledWith(datasource2State, []);
       expect(mockDatasource3.initialize).not.toHaveBeenCalled();
     });
 
@@ -425,21 +422,6 @@ describe('editor_frame', () => {
               "function": "kibana",
               "type": "function",
             },
-            Object {
-              "arguments": Object {
-                "filters": Array [
-                  "[]",
-                ],
-                "query": Array [
-                  "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
-                ],
-                "timeRange": Array [
-                  "{\\"from\\":\\"\\",\\"to\\":\\"\\"}",
-                ],
-              },
-              "function": "kibana_context",
-              "type": "function",
-            },
             Object {
               "arguments": Object {
                 "layerIds": Array [
@@ -499,19 +481,16 @@ describe('editor_frame', () => {
             doc={{
               visualizationType: 'testVis',
               title: '',
-              expression: '',
               state: {
                 datasourceStates: {
                   testDatasource: {},
                   testDatasource2: {},
                 },
                 visualization: {},
-                datasourceMetaData: {
-                  filterableIndexPatterns: [],
-                },
                 query: { query: '', language: 'lucene' },
                 filters: [],
               },
+              references: [],
             }}
           />
         );
@@ -535,21 +514,6 @@ describe('editor_frame', () => {
               "function": "kibana",
               "type": "function",
             },
-            Object {
-              "arguments": Object {
-                "filters": Array [
-                  "[]",
-                ],
-                "query": Array [
-                  "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
-                ],
-                "timeRange": Array [
-                  "{\\"from\\":\\"\\",\\"to\\":\\"\\"}",
-                ],
-              },
-              "function": "kibana_context",
-              "type": "function",
-            },
             Object {
               "arguments": Object {
                 "layerIds": Array [
@@ -747,19 +711,16 @@ describe('editor_frame', () => {
             doc={{
               visualizationType: 'testVis',
               title: '',
-              expression: '',
               state: {
                 datasourceStates: {
                   testDatasource: {},
                   testDatasource2: {},
                 },
                 visualization: {},
-                datasourceMetaData: {
-                  filterableIndexPatterns: [],
-                },
                 query: { query: '', language: 'lucene' },
                 filters: [],
               },
+              references: [],
             }}
           />
         );
@@ -802,19 +763,16 @@ describe('editor_frame', () => {
             doc={{
               visualizationType: 'testVis',
               title: '',
-              expression: '',
               state: {
                 datasourceStates: {
                   testDatasource: datasource1State,
                   testDatasource2: datasource2State,
                 },
                 visualization: {},
-                datasourceMetaData: {
-                  filterableIndexPatterns: [],
-                },
                 query: { query: '', language: 'lucene' },
                 filters: [],
               },
+              references: [],
             }}
           />
         );
@@ -842,7 +800,6 @@ describe('editor_frame', () => {
 
     it('should give access to the datasource state in the datasource factory function', async () => {
       const datasourceState = {};
-      const dateRange = { fromDate: 'now-1w', toDate: 'now' };
       mockDatasource.initialize.mockResolvedValue(datasourceState);
       mockDatasource.getLayers.mockReturnValue(['first']);
 
@@ -850,7 +807,6 @@ describe('editor_frame', () => {
         mount(
           <EditorFrame
             {...getDefaultProps()}
-            dateRange={dateRange}
             visualizationMap={{
               testVis: mockVisualization,
             }}
@@ -865,7 +821,6 @@ describe('editor_frame', () => {
       });
 
       expect(mockDatasource.getPublicAPI).toHaveBeenCalledWith({
-        dateRange,
         state: datasourceState,
         layerId: 'first',
       });
@@ -1460,9 +1415,10 @@ describe('editor_frame', () => {
         })
       );
       mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource.getMetaData.mockReturnValue({
-        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
-      });
+      mockDatasource.getPersistableState = jest.fn((x) => ({
+        state: x,
+        savedObjectReferences: [{ type: 'index-pattern', id: '1', name: 'index-pattern-0' }],
+      }));
       mockVisualization.initialize.mockReturnValue({ initialState: true });
 
       await act(async () => {
@@ -1487,14 +1443,20 @@ describe('editor_frame', () => {
 
       expect(onChange).toHaveBeenCalledTimes(2);
       expect(onChange).toHaveBeenNthCalledWith(1, {
-        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
+        filterableIndexPatterns: ['1'],
         doc: {
-          expression: '',
           id: undefined,
+          description: undefined,
+          references: [
+            {
+              id: '1',
+              name: 'index-pattern-0',
+              type: 'index-pattern',
+            },
+          ],
           state: {
             visualization: null, // Not yet loaded
-            datasourceMetaData: { filterableIndexPatterns: [{ id: '1', title: 'resolved' }] },
-            datasourceStates: { testDatasource: undefined },
+            datasourceStates: { testDatasource: {} },
             query: { query: '', language: 'lucene' },
             filters: [],
           },
@@ -1502,18 +1464,23 @@ describe('editor_frame', () => {
           type: 'lens',
           visualizationType: 'testVis',
         },
+        isSaveable: false,
       });
       expect(onChange).toHaveBeenLastCalledWith({
-        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
+        filterableIndexPatterns: ['1'],
         doc: {
-          expression: '',
+          references: [
+            {
+              id: '1',
+              name: 'index-pattern-0',
+              type: 'index-pattern',
+            },
+          ],
+          description: undefined,
           id: undefined,
           state: {
             visualization: { initialState: true }, // Now loaded
-            datasourceMetaData: {
-              filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
-            },
-            datasourceStates: { testDatasource: undefined },
+            datasourceStates: { testDatasource: {} },
             query: { query: '', language: 'lucene' },
             filters: [],
           },
@@ -1521,6 +1488,7 @@ describe('editor_frame', () => {
           type: 'lens',
           visualizationType: 'testVis',
         },
+        isSaveable: false,
       });
     });
 
@@ -1562,11 +1530,10 @@ describe('editor_frame', () => {
       expect(onChange).toHaveBeenNthCalledWith(3, {
         filterableIndexPatterns: [],
         doc: {
-          expression: expect.stringContaining('vis "expression"'),
           id: undefined,
+          references: [],
           state: {
-            datasourceMetaData: { filterableIndexPatterns: [] },
-            datasourceStates: { testDatasource: undefined },
+            datasourceStates: { testDatasource: { datasource: '' } },
             visualization: { initialState: true },
             query: { query: 'new query', language: 'lucene' },
             filters: [],
@@ -1575,6 +1542,7 @@ describe('editor_frame', () => {
           type: 'lens',
           visualizationType: 'testVis',
         },
+        isSaveable: true,
       });
     });
 
@@ -1583,9 +1551,10 @@ describe('editor_frame', () => {
 
       mockDatasource.initialize.mockResolvedValue({});
       mockDatasource.getLayers.mockReturnValue(['first']);
-      mockDatasource.getMetaData.mockReturnValue({
-        filterableIndexPatterns: [{ id: '1', title: 'resolved' }],
-      });
+      mockDatasource.getPersistableState = jest.fn((x) => ({
+        state: x,
+        savedObjectReferences: [{ type: 'index-pattern', id: '1', name: '' }],
+      }));
       mockVisualization.initialize.mockReturnValue({ initialState: true });
 
       await act(async () => {
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 48a3511a8f359..72ad8e074226c 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
@@ -7,13 +7,7 @@
 import React, { useEffect, useReducer } from 'react';
 import { CoreSetup, CoreStart } from 'kibana/public';
 import { ReactExpressionRendererType } from '../../../../../../src/plugins/expressions/public';
-import {
-  Datasource,
-  DatasourcePublicAPI,
-  FramePublicAPI,
-  Visualization,
-  DatasourceMetaData,
-} from '../../types';
+import { Datasource, FramePublicAPI, Visualization } from '../../types';
 import { reducer, getInitialState } from './state_management';
 import { DataPanelWrapper } from './data_panel_wrapper';
 import { ConfigPanelWrapper } from './config_panel';
@@ -26,6 +20,7 @@ import { getSavedObjectFormat } from './save';
 import { generateId } from '../../id_generator';
 import { Filter, Query, SavedQuery } from '../../../../../../src/plugins/data/public';
 import { EditorFrameStartPlugins } from '../service';
+import { initializeDatasources, createDatasourceLayers } from './state_helpers';
 
 export interface EditorFrameProps {
   doc?: Document;
@@ -45,8 +40,9 @@ export interface EditorFrameProps {
   filters: Filter[];
   savedQuery?: SavedQuery;
   onChange: (arg: {
-    filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
+    filterableIndexPatterns: string[];
     doc: Document;
+    isSaveable: boolean;
   }) => void;
   showNoDataPopover: () => void;
 }
@@ -67,25 +63,19 @@ export function EditorFrame(props: EditorFrameProps) {
       // prevents executing dispatch on unmounted component
       let isUnmounted = false;
       if (!allLoaded) {
-        Object.entries(props.datasourceMap).forEach(([datasourceId, datasource]) => {
-          if (
-            state.datasourceStates[datasourceId] &&
-            state.datasourceStates[datasourceId].isLoading
-          ) {
-            datasource
-              .initialize(state.datasourceStates[datasourceId].state || undefined)
-              .then((datasourceState) => {
-                if (!isUnmounted) {
-                  dispatch({
-                    type: 'UPDATE_DATASOURCE_STATE',
-                    updater: datasourceState,
-                    datasourceId,
-                  });
-                }
-              })
-              .catch(onError);
-          }
-        });
+        initializeDatasources(props.datasourceMap, state.datasourceStates, props.doc?.references)
+          .then((result) => {
+            if (!isUnmounted) {
+              Object.entries(result).forEach(([datasourceId, { state: datasourceState }]) => {
+                dispatch({
+                  type: 'UPDATE_DATASOURCE_STATE',
+                  updater: datasourceState,
+                  datasourceId,
+                });
+              });
+            }
+          })
+          .catch(onError);
       }
       return () => {
         isUnmounted = true;
@@ -95,22 +85,7 @@ export function EditorFrame(props: EditorFrameProps) {
     [allLoaded, onError]
   );
 
-  const datasourceLayers: Record<string, DatasourcePublicAPI> = {};
-  Object.keys(props.datasourceMap)
-    .filter((id) => state.datasourceStates[id] && !state.datasourceStates[id].isLoading)
-    .forEach((id) => {
-      const datasourceState = state.datasourceStates[id].state;
-      const datasource = props.datasourceMap[id];
-
-      const layers = datasource.getLayers(datasourceState);
-      layers.forEach((layer) => {
-        datasourceLayers[layer] = props.datasourceMap[id].getPublicAPI({
-          state: datasourceState,
-          layerId: layer,
-          dateRange: props.dateRange,
-        });
-      });
-    });
+  const datasourceLayers = createDatasourceLayers(props.datasourceMap, state.datasourceStates);
 
   const framePublicAPI: FramePublicAPI = {
     datasourceLayers,
@@ -165,7 +140,18 @@ export function EditorFrame(props: EditorFrameProps) {
       if (props.doc) {
         dispatch({
           type: 'VISUALIZATION_LOADED',
-          doc: props.doc,
+          doc: {
+            ...props.doc,
+            state: {
+              ...props.doc.state,
+              visualization: props.doc.visualizationType
+                ? props.visualizationMap[props.doc.visualizationType].initialize(
+                    framePublicAPI,
+                    props.doc.state.visualization
+                  )
+                : props.doc.state.visualization,
+            },
+          },
         });
       } else {
         dispatch({
@@ -206,36 +192,20 @@ export function EditorFrame(props: EditorFrameProps) {
         return;
       }
 
-      const indexPatterns: DatasourceMetaData['filterableIndexPatterns'] = [];
-      Object.entries(props.datasourceMap)
-        .filter(([id, datasource]) => {
-          const stateWrapper = state.datasourceStates[id];
-          return (
-            stateWrapper &&
-            !stateWrapper.isLoading &&
-            datasource.getLayers(stateWrapper.state).length > 0
-          );
+      props.onChange(
+        getSavedObjectFormat({
+          activeDatasources: Object.keys(state.datasourceStates).reduce(
+            (datasourceMap, datasourceId) => ({
+              ...datasourceMap,
+              [datasourceId]: props.datasourceMap[datasourceId],
+            }),
+            {}
+          ),
+          visualization: activeVisualization,
+          state,
+          framePublicAPI,
         })
-        .forEach(([id, datasource]) => {
-          indexPatterns.push(
-            ...datasource.getMetaData(state.datasourceStates[id].state).filterableIndexPatterns
-          );
-        });
-
-      const doc = getSavedObjectFormat({
-        activeDatasources: Object.keys(state.datasourceStates).reduce(
-          (datasourceMap, datasourceId) => ({
-            ...datasourceMap,
-            [datasourceId]: props.datasourceMap[datasourceId],
-          }),
-          {}
-        ),
-        visualization: activeVisualization,
-        state,
-        framePublicAPI,
-      });
-
-      props.onChange({ filterableIndexPatterns: indexPatterns, doc });
+      );
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
index ee28ccfe1bf53..952718e13c8cf 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/expression_helpers.ts
@@ -5,8 +5,7 @@
  */
 
 import { Ast, fromExpression, ExpressionFunctionAST } from '@kbn/interpreter/common';
-import { Visualization, Datasource, FramePublicAPI } from '../../types';
-import { Filter, TimeRange, Query } from '../../../../../../src/plugins/data/public';
+import { Visualization, Datasource, DatasourcePublicAPI } from '../../types';
 
 export function prependDatasourceExpression(
   visualizationExpression: Ast | string | null,
@@ -58,40 +57,12 @@ export function prependDatasourceExpression(
       ? fromExpression(visualizationExpression)
       : visualizationExpression;
 
-  return {
-    type: 'expression',
-    chain: [datafetchExpression, ...parsedVisualizationExpression.chain],
-  };
-}
-
-export function prependKibanaContext(
-  expression: Ast | string,
-  {
-    timeRange,
-    query,
-    filters,
-  }: {
-    timeRange?: TimeRange;
-    query?: Query;
-    filters?: Filter[];
-  }
-): Ast {
-  const parsedExpression = typeof expression === 'string' ? fromExpression(expression) : expression;
-
   return {
     type: 'expression',
     chain: [
       { type: 'function', function: 'kibana', arguments: {} },
-      {
-        type: 'function',
-        function: 'kibana_context',
-        arguments: {
-          timeRange: timeRange ? [JSON.stringify(timeRange)] : [],
-          query: query ? [JSON.stringify(query)] : [],
-          filters: [JSON.stringify(filters || [])],
-        },
-      },
-      ...parsedExpression.chain,
+      datafetchExpression,
+      ...parsedVisualizationExpression.chain,
     ],
   };
 }
@@ -101,8 +72,7 @@ export function buildExpression({
   visualizationState,
   datasourceMap,
   datasourceStates,
-  framePublicAPI,
-  removeDateRange,
+  datasourceLayers,
 }: {
   visualization: Visualization | null;
   visualizationState: unknown;
@@ -114,24 +84,12 @@ export function buildExpression({
       state: unknown;
     }
   >;
-  framePublicAPI: FramePublicAPI;
-  removeDateRange?: boolean;
+  datasourceLayers: Record<string, DatasourcePublicAPI>;
 }): Ast | null {
   if (visualization === null) {
     return null;
   }
-  const visualizationExpression = visualization.toExpression(visualizationState, framePublicAPI);
-
-  const expressionContext = removeDateRange
-    ? { query: framePublicAPI.query, filters: framePublicAPI.filters }
-    : {
-        query: framePublicAPI.query,
-        timeRange: {
-          from: framePublicAPI.dateRange.fromDate,
-          to: framePublicAPI.dateRange.toDate,
-        },
-        filters: framePublicAPI.filters,
-      };
+  const visualizationExpression = visualization.toExpression(visualizationState, datasourceLayers);
 
   const completeExpression = prependDatasourceExpression(
     visualizationExpression,
@@ -139,9 +97,5 @@ export function buildExpression({
     datasourceStates
   );
 
-  if (completeExpression) {
-    return prependKibanaContext(completeExpression, expressionContext);
-  } else {
-    return null;
-  }
+  return completeExpression;
 }
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
index d72e5c57ce56e..45d24fd30e2fc 100644
--- 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
@@ -8,14 +8,18 @@ import { getSavedObjectFormat, Props } from './save';
 import { createMockDatasource, createMockVisualization } from '../mocks';
 import { esFilters, IIndexPattern, IFieldType } from '../../../../../../src/plugins/data/public';
 
+jest.mock('./expression_helpers');
+
 describe('save editor frame state', () => {
   const mockVisualization = createMockVisualization();
-  mockVisualization.getPersistableState.mockImplementation((x) => x);
   const mockDatasource = createMockDatasource('a');
   const mockIndexPattern = ({ id: 'indexpattern' } as unknown) as IIndexPattern;
   const mockField = ({ name: '@timestamp' } as unknown) as IFieldType;
 
-  mockDatasource.getPersistableState.mockImplementation((x) => x);
+  mockDatasource.getPersistableState.mockImplementation((x) => ({
+    state: x,
+    savedObjectReferences: [],
+  }));
   const saveArgs: Props = {
     activeDatasources: {
       indexpattern: mockDatasource,
@@ -47,15 +51,17 @@ describe('save editor frame state', () => {
   it('transforms from internal state to persisted doc format', async () => {
     const datasource = createMockDatasource('a');
     datasource.getPersistableState.mockImplementation((state) => ({
-      stuff: `${state}_datasource_persisted`,
+      state: {
+        stuff: `${state}_datasource_persisted`,
+      },
+      savedObjectReferences: [],
     }));
+    datasource.toExpression.mockReturnValue('my | expr');
 
     const visualization = createMockVisualization();
-    visualization.getPersistableState.mockImplementation((state) => ({
-      things: `${state}_vis_persisted`,
-    }));
+    visualization.toExpression.mockReturnValue('vis | expr');
 
-    const doc = await getSavedObjectFormat({
+    const { doc, filterableIndexPatterns, isSaveable } = await getSavedObjectFormat({
       ...saveArgs,
       activeDatasources: {
         indexpattern: datasource,
@@ -74,27 +80,32 @@ describe('save editor frame state', () => {
       visualization,
     });
 
+    expect(filterableIndexPatterns).toEqual([]);
+    expect(isSaveable).toEqual(true);
     expect(doc).toEqual({
       id: undefined,
-      expression: '',
       state: {
-        datasourceMetaData: {
-          filterableIndexPatterns: [],
-        },
         datasourceStates: {
           indexpattern: {
             stuff: '2_datasource_persisted',
           },
         },
-        visualization: { things: '4_vis_persisted' },
+        visualization: '4',
         query: { query: '', language: 'lucene' },
         filters: [
           {
-            meta: { index: 'indexpattern' },
+            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
index b41e93def966e..6da6d5a8c118f 100644
--- 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
@@ -5,11 +5,12 @@
  */
 
 import _ from 'lodash';
-import { toExpression } from '@kbn/interpreter/target/common';
+import { SavedObjectReference } from 'kibana/public';
 import { EditorFrameState } from './state_management';
 import { Document } from '../../persistence/saved_object_store';
-import { buildExpression } from './expression_helpers';
 import { Datasource, Visualization, FramePublicAPI } from '../../types';
+import { extractFilterReferences } from '../../persistence';
+import { buildExpression } from './expression_helpers';
 
 export interface Props {
   activeDatasources: Record<string, Datasource>;
@@ -23,43 +24,55 @@ export function getSavedObjectFormat({
   state,
   visualization,
   framePublicAPI,
-}: Props): Document {
+}: 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,
-    framePublicAPI,
-    removeDateRange: true,
-  });
-
-  const datasourceStates: Record<string, unknown> = {};
-  Object.entries(activeDatasources).forEach(([id, datasource]) => {
-    datasourceStates[id] = datasource.getPersistableState(state.datasourceStates[id].state);
-  });
-
-  const filterableIndexPatterns: Array<{ id: string; title: string }> = [];
-  Object.entries(activeDatasources).forEach(([id, datasource]) => {
-    filterableIndexPatterns.push(
-      ...datasource.getMetaData(state.datasourceStates[id].state).filterableIndexPatterns
-    );
+    datasourceLayers: framePublicAPI.datasourceLayers,
   });
 
   return {
-    id: state.persistedId,
-    title: state.title,
-    description: state.description,
-    type: 'lens',
-    visualizationType: state.visualization.activeId,
-    expression: expression ? toExpression(expression) : '',
-    state: {
-      datasourceStates,
-      datasourceMetaData: {
-        filterableIndexPatterns: _.uniqBy(filterableIndexPatterns, 'id'),
+    doc: {
+      id: 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,
       },
-      visualization: visualization.getPersistableState(state.visualization.state),
-      query: framePublicAPI.query,
-      filters: framePublicAPI.filters,
+      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
new file mode 100644
index 0000000000000..6deb9ffd37a06
--- /dev/null
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/state_helpers.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { SavedObjectReference } from 'kibana/public';
+import { Ast } from '@kbn/interpreter/common';
+import { Datasource, DatasourcePublicAPI, Visualization } from '../../types';
+import { buildExpression } from './expression_helpers';
+import { Document } from '../../persistence/saved_object_store';
+
+export async function initializeDatasources(
+  datasourceMap: Record<string, Datasource>,
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>,
+  references?: SavedObjectReference[]
+) {
+  const states: Record<string, { isLoading: boolean; state: unknown }> = {};
+  await Promise.all(
+    Object.entries(datasourceMap).map(([datasourceId, datasource]) => {
+      if (datasourceStates[datasourceId]) {
+        return datasource
+          .initialize(datasourceStates[datasourceId].state || undefined, references)
+          .then((datasourceState) => {
+            states[datasourceId] = { isLoading: false, state: datasourceState };
+          });
+      }
+    })
+  );
+  return states;
+}
+
+export function createDatasourceLayers(
+  datasourceMap: Record<string, Datasource>,
+  datasourceStates: Record<string, { state: unknown; isLoading: boolean }>
+) {
+  const datasourceLayers: Record<string, DatasourcePublicAPI> = {};
+  Object.keys(datasourceMap)
+    .filter((id) => datasourceStates[id] && !datasourceStates[id].isLoading)
+    .forEach((id) => {
+      const datasourceState = datasourceStates[id].state;
+      const datasource = datasourceMap[id];
+
+      const layers = datasource.getLayers(datasourceState);
+      layers.forEach((layer) => {
+        datasourceLayers[layer] = datasourceMap[id].getPublicAPI({
+          state: datasourceState,
+          layerId: layer,
+        });
+      });
+    });
+  return datasourceLayers;
+}
+
+export async function persistedStateToExpression(
+  datasources: Record<string, Datasource>,
+  visualizations: Record<string, Visualization>,
+  doc: Document
+): Promise<Ast | null> {
+  const {
+    state: { visualization: visualizationState, datasourceStates: persistedDatasourceStates },
+    visualizationType,
+    references,
+  } = doc;
+  if (!visualizationType) return null;
+  const visualization = visualizations[visualizationType!];
+  const datasourceStates = await initializeDatasources(
+    datasources,
+    Object.fromEntries(
+      Object.entries(persistedDatasourceStates).map(([id, state]) => [
+        id,
+        { isLoading: false, state },
+      ])
+    ),
+    references
+  );
+
+  const datasourceLayers = createDatasourceLayers(datasources, datasourceStates);
+
+  return buildExpression({
+    visualization,
+    visualizationState,
+    datasourceMap: datasources,
+    datasourceStates,
+    datasourceLayers,
+  });
+}
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
index 969467b5789ec..c7f505aeca517 100644
--- 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
@@ -57,19 +57,16 @@ describe('editor_frame state management', () => {
       const initialState = getInitialState({
         ...props,
         doc: {
-          expression: '',
           state: {
             datasourceStates: {
               testDatasource: { internalState1: '' },
               testDatasource2: { internalState2: '' },
             },
             visualization: {},
-            datasourceMetaData: {
-              filterableIndexPatterns: [],
-            },
             query: { query: '', language: 'lucene' },
             filters: [],
           },
+          references: [],
           title: '',
           visualizationType: 'testVis',
         },
@@ -380,9 +377,7 @@ describe('editor_frame state management', () => {
           type: 'VISUALIZATION_LOADED',
           doc: {
             id: 'b',
-            expression: '',
             state: {
-              datasourceMetaData: { filterableIndexPatterns: [] },
               datasourceStates: { a: { foo: 'c' } },
               visualization: { bar: 'd' },
               query: { query: '', language: 'lucene' },
@@ -392,6 +387,7 @@ describe('editor_frame state management', () => {
             description: 'My lens',
             type: 'lens',
             visualizationType: 'line',
+            references: [],
           },
         }
       );
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 263f7cd65f43d..2bb1baf9d54f2 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
@@ -107,7 +107,7 @@ export function getSuggestions({
  * title and preview expression.
  */
 function getVisualizationSuggestions(
-  visualization: Visualization<unknown, unknown>,
+  visualization: Visualization<unknown>,
   table: TableSuggestion,
   visualizationId: string,
   datasourceSuggestion: DatasourceSuggestion & { datasourceId: string },
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 fd509c0046e13..323472d717352 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
@@ -249,7 +249,6 @@ describe('suggestion_panel', () => {
 
     expect(passedExpression).toMatchInlineSnapshot(`
       "kibana
-      | kibana_context timeRange=\\"{\\\\\\"from\\\\\\":\\\\\\"now-7d\\\\\\",\\\\\\"to\\\\\\":\\\\\\"now\\\\\\"}\\" query=\\"{\\\\\\"query\\\\\\":\\\\\\"\\\\\\",\\\\\\"language\\\\\\":\\\\\\"lucene\\\\\\"}\\" filters=\\"[{\\\\\\"meta\\\\\\":{\\\\\\"index\\\\\\":\\\\\\"index1\\\\\\"},\\\\\\"exists\\\\\\":{\\\\\\"field\\\\\\":\\\\\\"myfield\\\\\\"}}]\\"
       | 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 7395075cf9f74..f1dc3fa306d15 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
@@ -21,6 +21,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 { ExecutionContextSearch } from 'src/plugins/expressions';
 import { Action, PreviewState } from './state_management';
 import { Datasource, Visualization, FramePublicAPI, DatasourcePublicAPI } from '../../types';
 import { getSuggestions, switchToSuggestion } from './suggestion_helpers';
@@ -28,7 +29,7 @@ import {
   ReactExpressionRendererProps,
   ReactExpressionRendererType,
 } from '../../../../../../src/plugins/expressions/public';
-import { prependDatasourceExpression, prependKibanaContext } from './expression_helpers';
+import { prependDatasourceExpression } from './expression_helpers';
 import { debouncedComponent } from '../../debounced_component';
 import { trackUiEvent, trackSuggestionEvent } from '../../lens_ui_telemetry';
 import { DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
@@ -112,7 +113,7 @@ const SuggestionPreview = ({
 }: {
   onSelect: () => void;
   preview: {
-    expression?: Ast;
+    expression?: Ast | null;
     icon: IconType;
     title: string;
   };
@@ -215,12 +216,24 @@ export function SuggestionPanel({
     visualizationMap,
   ]);
 
+  const context: ExecutionContextSearch = useMemo(
+    () => ({
+      query: frame.query,
+      timeRange: {
+        from: frame.dateRange.fromDate,
+        to: frame.dateRange.toDate,
+      },
+      filters: frame.filters,
+    }),
+    [frame.query, frame.dateRange.fromDate, frame.dateRange.toDate, frame.filters]
+  );
+
   const AutoRefreshExpressionRenderer = useMemo(() => {
     const autoRefreshFetch$ = plugins.data.query.timefilter.timefilter.getAutoRefreshFetch$();
     return (props: ReactExpressionRendererProps) => (
-      <ExpressionRendererComponent {...props} reload$={autoRefreshFetch$} />
+      <ExpressionRendererComponent {...props} searchContext={context} reload$={autoRefreshFetch$} />
     );
-  }, [plugins.data.query.timefilter.timefilter]);
+  }, [plugins.data.query.timefilter.timefilter, context]);
 
   const [lastSelectedSuggestion, setLastSelectedSuggestion] = useState<number>(-1);
 
@@ -252,15 +265,6 @@ export function SuggestionPanel({
     }
   }
 
-  const expressionContext = {
-    query: frame.query,
-    filters: frame.filters,
-    timeRange: {
-      from: frame.dateRange.fromDate,
-      to: frame.dateRange.toDate,
-    },
-  };
-
   return (
     <div className="lnsSuggestionPanel">
       <EuiFlexGroup alignItems="center">
@@ -305,9 +309,7 @@ export function SuggestionPanel({
         {currentVisualizationId && (
           <SuggestionPreview
             preview={{
-              expression: currentStateExpression
-                ? prependKibanaContext(currentStateExpression, expressionContext)
-                : undefined,
+              expression: currentStateExpression,
               icon:
                 visualizationMap[currentVisualizationId].getDescription(currentVisualizationState)
                   .icon || 'empty',
@@ -325,9 +327,7 @@ export function SuggestionPanel({
           return (
             <SuggestionPreview
               preview={{
-                expression: suggestion.previewExpression
-                  ? prependKibanaContext(suggestion.previewExpression, expressionContext)
-                  : undefined,
+                expression: suggestion.previewExpression,
                 icon: suggestion.previewIcon,
                 title: suggestion.title,
               }}
@@ -391,7 +391,6 @@ function getPreviewExpression(
       if (updatedLayerApis[layerId]) {
         updatedLayerApis[layerId] = datasource.getPublicAPI({
           layerId,
-          dateRange: frame.dateRange,
           state: datasourceState,
         });
       }
@@ -400,7 +399,7 @@ function getPreviewExpression(
 
   return visualization.toPreviewExpression(
     visualizableState.visualizationState,
-    suggestionFrameApi
+    suggestionFrameApi.datasourceLayers
   );
 }
 
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 88b791a7875ef..5640c52ac4325 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
@@ -260,7 +260,7 @@ export function ChartSwitch(props: Props) {
 function getTopSuggestion(
   props: Props,
   visualizationId: string,
-  newVisualization: Visualization<unknown, unknown>,
+  newVisualization: Visualization<unknown>,
   subVisualizationId?: string
 ): Suggestion | undefined {
   const unfilteredSuggestions = getSuggestions({
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 a9c638df8cad1..47e3b41df3b21 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
@@ -172,21 +172,6 @@ describe('workspace_panel', () => {
             "function": "kibana",
             "type": "function",
           },
-          Object {
-            "arguments": Object {
-              "filters": Array [
-                "[]",
-              ],
-              "query": Array [
-                "{\\"query\\":\\"\\",\\"language\\":\\"lucene\\"}",
-              ],
-              "timeRange": Array [
-                "{\\"from\\":\\"now-7d\\",\\"to\\":\\"now\\"}",
-              ],
-            },
-            "function": "kibana_context",
-            "type": "function",
-          },
           Object {
             "arguments": Object {
               "layerIds": Array [
@@ -305,10 +290,10 @@ describe('workspace_panel', () => {
     );
 
     expect(
-      (instance.find(expressionRendererMock).prop('expression') as Ast).chain[2].arguments.layerIds
+      (instance.find(expressionRendererMock).prop('expression') as Ast).chain[1].arguments.layerIds
     ).toEqual(['first', 'second', 'third']);
     expect(
-      (instance.find(expressionRendererMock).prop('expression') as Ast).chain[2].arguments.tables
+      (instance.find(expressionRendererMock).prop('expression') as Ast).chain[1].arguments.tables
     ).toMatchInlineSnapshot(`
                                     Array [
                                       Object {
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 b3a12271f377b..4f914bc65dc7c 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
@@ -18,6 +18,7 @@ import {
   EuiLink,
 } from '@elastic/eui';
 import { CoreStart, CoreSetup } from 'kibana/public';
+import { ExecutionContextSearch } from 'src/plugins/expressions';
 import {
   ExpressionRendererEvent,
   ReactExpressionRendererType,
@@ -129,7 +130,7 @@ export function InnerWorkspacePanel({
           visualizationState,
           datasourceMap,
           datasourceStates,
-          framePublicAPI,
+          datasourceLayers: framePublicAPI.datasourceLayers,
         });
       } catch (e) {
         // Most likely an error in the expression provided by a datasource or visualization
@@ -173,6 +174,23 @@ export function InnerWorkspacePanel({
     [plugins.data.query.timefilter.timefilter]
   );
 
+  const context: ExecutionContextSearch = useMemo(
+    () => ({
+      query: framePublicAPI.query,
+      timeRange: {
+        from: framePublicAPI.dateRange.fromDate,
+        to: framePublicAPI.dateRange.toDate,
+      },
+      filters: framePublicAPI.filters,
+    }),
+    [
+      framePublicAPI.query,
+      framePublicAPI.dateRange.fromDate,
+      framePublicAPI.dateRange.toDate,
+      framePublicAPI.filters,
+    ]
+  );
+
   useEffect(() => {
     // reset expression error if component attempts to run it again
     if (expression && localState.expressionBuildError) {
@@ -264,6 +282,7 @@ export function InnerWorkspacePanel({
           className="lnsExpressionRenderer__component"
           padding="m"
           expression={expression!}
+          searchContext={context}
           reload$={autoRefreshFetch$}
           onEvent={onEvent}
           renderError={(errorMessage?: string | null) => {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx
index 69447b3b9a9b8..1e2df28cad7b1 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.test.tsx
@@ -18,16 +18,13 @@ jest.mock('../../../../../../src/plugins/inspector/public/', () => ({
 }));
 
 const savedVis: Document = {
-  expression: 'my | expression',
   state: {
     visualization: {},
     datasourceStates: {},
-    datasourceMetaData: {
-      filterableIndexPatterns: [],
-    },
     query: { query: '', language: 'lucene' },
     filters: [],
   },
+  references: [],
   title: 'My title',
   visualizationType: '',
 };
@@ -59,13 +56,14 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123' }
     );
     embeddable.render(mountpoint);
 
     expect(expressionRenderer).toHaveBeenCalledTimes(1);
-    expect(expressionRenderer.mock.calls[0][0]!.expression).toEqual(savedVis.expression);
+    expect(expressionRenderer.mock.calls[0][0]!.expression).toEqual('my | expression');
   });
 
   it('should re-render if new input is pushed', () => {
@@ -82,6 +80,7 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123' }
     );
@@ -110,6 +109,7 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123', timeRange, query, filters }
     );
@@ -117,11 +117,52 @@ describe('embeddable', () => {
 
     expect(expressionRenderer.mock.calls[0][0].searchContext).toEqual({
       timeRange,
-      query,
+      query: [query, savedVis.state.query],
       filters,
     });
   });
 
+  it('should merge external context with query and filters of the saved object', () => {
+    const timeRange: TimeRange = { from: 'now-15d', to: 'now' };
+    const query: Query = { language: 'kquery', query: 'external filter' };
+    const filters: Filter[] = [{ meta: { alias: 'test', negate: false, disabled: false } }];
+
+    const embeddable = new Embeddable(
+      dataPluginMock.createSetupContract().query.timefilter.timefilter,
+      expressionRenderer,
+      getTrigger,
+      {
+        editPath: '',
+        editUrl: '',
+        editable: true,
+        savedVis: {
+          ...savedVis,
+          state: {
+            ...savedVis.state,
+            query: { language: 'kquery', query: 'saved filter' },
+            filters: [
+              { meta: { alias: 'test', negate: false, disabled: false, indexRefName: 'filter-0' } },
+            ],
+          },
+          references: [{ type: 'index-pattern', name: 'filter-0', id: 'my-index-pattern-id' }],
+        },
+        expression: 'my | expression',
+      },
+      { id: '123', timeRange, query, filters }
+    );
+    embeddable.render(mountpoint);
+
+    expect(expressionRenderer.mock.calls[0][0].searchContext).toEqual({
+      timeRange,
+      query: [query, { language: 'kquery', query: 'saved filter' }],
+      filters: [
+        filters[0],
+        // actual index pattern id gets injected
+        { meta: { alias: 'test', negate: false, disabled: false, index: 'my-index-pattern-id' } },
+      ],
+    });
+  });
+
   it('should execute trigger on event from expression renderer', () => {
     const embeddable = new Embeddable(
       dataPluginMock.createSetupContract().query.timefilter.timefilter,
@@ -132,6 +173,7 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123' }
     );
@@ -162,6 +204,7 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123', timeRange, query, filters }
     );
@@ -195,6 +238,7 @@ describe('embeddable', () => {
         editUrl: '',
         editable: true,
         savedVis,
+        expression: 'my | expression',
       },
       { id: '123', timeRange, query, filters }
     );
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
index bbd2b18907e9b..4df218a3e94e9 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable.tsx
@@ -14,6 +14,7 @@ import {
   TimefilterContract,
   TimeRange,
 } from 'src/plugins/data/public';
+import { ExecutionContextSearch } from 'src/plugins/expressions';
 
 import { Subscription } from 'rxjs';
 import {
@@ -28,12 +29,13 @@ import {
   EmbeddableOutput,
   IContainer,
 } from '../../../../../../src/plugins/embeddable/public';
-import { DOC_TYPE, Document } from '../../persistence';
+import { DOC_TYPE, Document, injectFilterReferences } from '../../persistence';
 import { ExpressionWrapper } from './expression_wrapper';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
 import { isLensBrushEvent, isLensFilterEvent } from '../../types';
 
 export interface LensEmbeddableConfiguration {
+  expression: string | null;
   savedVis: Document;
   editUrl: string;
   editPath: string;
@@ -56,12 +58,13 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
 
   private expressionRenderer: ReactExpressionRendererType;
   private getTrigger: UiActionsStart['getTrigger'] | undefined;
+  private expression: string | null;
   private savedVis: Document;
   private domNode: HTMLElement | Element | undefined;
   private subscription: Subscription;
   private autoRefreshFetchSubscription: Subscription;
 
-  private currentContext: {
+  private externalSearchContext: {
     timeRange?: TimeRange;
     query?: Query;
     filters?: Filter[];
@@ -72,7 +75,14 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
     timefilter: TimefilterContract,
     expressionRenderer: ReactExpressionRendererType,
     getTrigger: UiActionsStart['getTrigger'] | undefined,
-    { savedVis, editPath, editUrl, editable, indexPatterns }: LensEmbeddableConfiguration,
+    {
+      expression,
+      savedVis,
+      editPath,
+      editUrl,
+      editable,
+      indexPatterns,
+    }: LensEmbeddableConfiguration,
     initialInput: LensEmbeddableInput,
     parent?: IContainer
   ) {
@@ -95,6 +105,7 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
 
     this.getTrigger = getTrigger;
     this.expressionRenderer = expressionRenderer;
+    this.expression = expression;
     this.savedVis = savedVis;
     this.subscription = this.getInput$().subscribe((input) => this.onContainerStateChanged(input));
     this.onContainerStateChanged(initialInput);
@@ -122,14 +133,14 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
       ? containerState.filters.filter((filter) => !filter.meta.disabled)
       : undefined;
     if (
-      !_.isEqual(containerState.timeRange, this.currentContext.timeRange) ||
-      !_.isEqual(containerState.query, this.currentContext.query) ||
-      !_.isEqual(cleanedFilters, this.currentContext.filters)
+      !_.isEqual(containerState.timeRange, this.externalSearchContext.timeRange) ||
+      !_.isEqual(containerState.query, this.externalSearchContext.query) ||
+      !_.isEqual(cleanedFilters, this.externalSearchContext.filters)
     ) {
-      this.currentContext = {
+      this.externalSearchContext = {
         timeRange: containerState.timeRange,
         query: containerState.query,
-        lastReloadRequestTime: this.currentContext.lastReloadRequestTime,
+        lastReloadRequestTime: this.externalSearchContext.lastReloadRequestTime,
         filters: cleanedFilters,
       };
 
@@ -149,14 +160,37 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
     render(
       <ExpressionWrapper
         ExpressionRenderer={this.expressionRenderer}
-        expression={this.savedVis.expression}
-        context={this.currentContext}
+        expression={this.expression}
+        searchContext={this.getMergedSearchContext()}
         handleEvent={this.handleEvent}
       />,
       domNode
     );
   }
 
+  /**
+   * Combines the embeddable context with the saved object context, and replaces
+   * any references to index patterns
+   */
+  private getMergedSearchContext(): ExecutionContextSearch {
+    const output: ExecutionContextSearch = {
+      timeRange: this.externalSearchContext.timeRange,
+    };
+    if (this.externalSearchContext.query) {
+      output.query = [this.externalSearchContext.query, this.savedVis.state.query];
+    } else {
+      output.query = [this.savedVis.state.query];
+    }
+    if (this.externalSearchContext.filters?.length) {
+      output.filters = [...this.externalSearchContext.filters, ...this.savedVis.state.filters];
+    } else {
+      output.filters = [...this.savedVis.state.filters];
+    }
+
+    output.filters = injectFilterReferences(output.filters, this.savedVis.references);
+    return output;
+  }
+
   handleEvent = (event: ExpressionRendererEvent) => {
     if (!this.getTrigger || this.input.disableTriggers) {
       return;
@@ -188,9 +222,9 @@ export class Embeddable extends AbstractEmbeddable<LensEmbeddableInput, LensEmbe
 
   reload() {
     const currentTime = Date.now();
-    if (this.currentContext.lastReloadRequestTime !== currentTime) {
-      this.currentContext = {
-        ...this.currentContext,
+    if (this.externalSearchContext.lastReloadRequestTime !== currentTime) {
+      this.externalSearchContext = {
+        ...this.externalSearchContext,
         lastReloadRequestTime: currentTime,
       };
 
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts
index 9a901d3631ec3..b8f9f8de1d286 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/embeddable_factory.ts
@@ -7,6 +7,7 @@
 import { Capabilities, HttpSetup, SavedObjectsClientContract } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { RecursiveReadonly } from '@kbn/utility-types';
+import { toExpression, Ast } from '@kbn/interpreter/target/common';
 import {
   IndexPatternsContract,
   IndexPattern,
@@ -23,6 +24,7 @@ import { Embeddable } from './embeddable';
 import { SavedObjectIndexStore, DOC_TYPE } from '../../persistence';
 import { getEditPath } from '../../../common';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
+import { Document } from '../../persistence/saved_object_store';
 
 interface StartServices {
   timefilter: TimefilterContract;
@@ -32,6 +34,7 @@ interface StartServices {
   expressionRenderer: ReactExpressionRendererType;
   indexPatternService: IndexPatternsContract;
   uiActions?: UiActionsStart;
+  documentToExpression: (doc: Document) => Promise<Ast | null>;
 }
 
 export class EmbeddableFactory implements EmbeddableFactoryDefinition {
@@ -72,13 +75,15 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
       indexPatternService,
       timefilter,
       expressionRenderer,
+      documentToExpression,
       uiActions,
     } = await this.getStartServices();
     const store = new SavedObjectIndexStore(savedObjectsClient);
     const savedVis = await store.load(savedObjectId);
 
-    const promises = savedVis.state.datasourceMetaData.filterableIndexPatterns.map(
-      async ({ id }) => {
+    const promises = savedVis.references
+      .filter(({ type }) => type === 'index-pattern')
+      .map(async ({ id }) => {
         try {
           return await indexPatternService.get(id);
         } catch (error) {
@@ -87,14 +92,15 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
           // to show.
           return null;
         }
-      }
-    );
+      });
     const indexPatterns = (
       await Promise.all(promises)
     ).filter((indexPattern: IndexPattern | null): indexPattern is IndexPattern =>
       Boolean(indexPattern)
     );
 
+    const expression = await documentToExpression(savedVis);
+
     return new Embeddable(
       timefilter,
       expressionRenderer,
@@ -105,6 +111,7 @@ export class EmbeddableFactory implements EmbeddableFactoryDefinition {
         editUrl: coreHttp.basePath.prepend(`/app/lens${getEditPath(savedObjectId)}`),
         editable: await this.isEditable(),
         indexPatterns,
+        expression: expression ? toExpression(expression) : null,
       },
       input,
       parent
diff --git a/x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx
index 296dcef3e70b9..d0d2360ddc107 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/embeddable/expression_wrapper.tsx
@@ -8,28 +8,23 @@ import React from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiIcon } from '@elastic/eui';
-import { TimeRange, Filter, Query } from 'src/plugins/data/public';
 import {
   ExpressionRendererEvent,
   ReactExpressionRendererType,
 } from 'src/plugins/expressions/public';
+import { ExecutionContextSearch } from 'src/plugins/expressions';
 
 export interface ExpressionWrapperProps {
   ExpressionRenderer: ReactExpressionRendererType;
   expression: string | null;
-  context: {
-    timeRange?: TimeRange;
-    query?: Query;
-    filters?: Filter[];
-    lastReloadRequestTime?: number;
-  };
+  searchContext: ExecutionContextSearch;
   handleEvent: (event: ExpressionRendererEvent) => void;
 }
 
 export function ExpressionWrapper({
   ExpressionRenderer: ExpressionRendererComponent,
   expression,
-  context,
+  searchContext,
   handleEvent,
 }: ExpressionWrapperProps) {
   return (
@@ -54,7 +49,7 @@ export function ExpressionWrapper({
             className="lnsExpressionRenderer__component"
             padding="m"
             expression={expression}
-            searchContext={{ ...context }}
+            searchContext={searchContext}
             renderError={(error) => <div data-test-subj="expression-renderer-error">{error}</div>}
             onEvent={handleEvent}
           />
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 9c0825b3c2d27..86b137851d9bd 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/mocks.tsx
@@ -31,7 +31,6 @@ export function createMockVisualization(): jest.Mocked<Visualization> {
     getVisualizationTypeId: jest.fn((_state) => 'empty'),
     getDescription: jest.fn((_state) => ({ label: '' })),
     switchVisualizationType: jest.fn((_, x) => x),
-    getPersistableState: jest.fn((_state) => _state),
     getSuggestions: jest.fn((_options) => []),
     initialize: jest.fn((_frame, _state?) => ({})),
     getConfiguration: jest.fn((props) => ({
@@ -71,7 +70,7 @@ export function createMockDatasource(id: string): DatasourceMock {
     clearLayer: jest.fn((state, _layerId) => state),
     getDatasourceSuggestionsForField: jest.fn((_state, _item) => []),
     getDatasourceSuggestionsFromCurrentState: jest.fn((_state) => []),
-    getPersistableState: jest.fn(),
+    getPersistableState: jest.fn((x) => ({ state: x, savedObjectReferences: [] })),
     getPublicAPI: jest.fn().mockReturnValue(publicAPIMock),
     initialize: jest.fn((_state?) => Promise.resolve()),
     renderDataPanel: jest.fn(),
@@ -81,7 +80,6 @@ export function createMockDatasource(id: string): DatasourceMock {
     removeLayer: jest.fn((_state, _layerId) => {}),
     removeColumn: jest.fn((props) => {}),
     getLayers: jest.fn((_state) => []),
-    getMetaData: jest.fn((_state) => ({ filterableIndexPatterns: [] })),
 
     renderDimensionTrigger: jest.fn(),
     renderDimensionEditor: jest.fn(),
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 47339373b6d1a..5fc347179a032 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/service.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/service.tsx
@@ -21,12 +21,14 @@ import {
   EditorFrameInstance,
   EditorFrameStart,
 } from '../types';
+import { Document } from '../persistence/saved_object_store';
 import { EditorFrame } from './editor_frame';
 import { mergeTables } from './merge_tables';
 import { formatColumn } from './format_column';
 import { EmbeddableFactory } from './embeddable/embeddable_factory';
 import { getActiveDatasourceIdFromDoc } from './editor_frame/state_management';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
+import { persistedStateToExpression } from './editor_frame/state_helpers';
 
 export interface EditorFrameSetupPlugins {
   data: DataPublicPluginSetup;
@@ -59,6 +61,21 @@ export class EditorFrameService {
   private readonly datasources: Array<Datasource | Promise<Datasource>> = [];
   private readonly visualizations: Array<Visualization | Promise<Visualization>> = [];
 
+  /**
+   * This method takes a Lens saved object as returned from the persistence helper,
+   * initializes datsources and visualization and creates the current expression.
+   * This is an asynchronous process and should only be triggered once for a saved object.
+   * @param doc parsed Lens saved object
+   */
+  private async documentToExpression(doc: Document) {
+    const [resolvedDatasources, resolvedVisualizations] = await Promise.all([
+      collectAsyncDefinitions(this.datasources),
+      collectAsyncDefinitions(this.visualizations),
+    ]);
+
+    return await persistedStateToExpression(resolvedDatasources, resolvedVisualizations, doc);
+  }
+
   public setup(
     core: CoreSetup<EditorFrameStartPlugins>,
     plugins: EditorFrameSetupPlugins
@@ -74,6 +91,7 @@ export class EditorFrameService {
         coreHttp: coreStart.http,
         timefilter: deps.data.query.timefilter.timefilter,
         expressionRenderer: deps.expressions.ReactExpressionRenderer,
+        documentToExpression: this.documentToExpression.bind(this),
         indexPatternService: deps.data.indexPatterns,
         uiActions: deps.uiActions,
       };
@@ -88,7 +106,7 @@ export class EditorFrameService {
         this.datasources.push(datasource as Datasource<unknown, unknown>);
       },
       registerVisualization: (visualization) => {
-        this.visualizations.push(visualization as Visualization<unknown, unknown>);
+        this.visualizations.push(visualization as Visualization<unknown>);
       },
     };
   }
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts b/x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts
index ca5fe706985f8..c487e31f5a973 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/__mocks__/loader.ts
@@ -23,3 +23,7 @@ export function loadInitialState() {
   };
   return result;
 }
+
+const originalLoader = jest.requireActual('../loader');
+
+export const extractReferences = originalLoader.extractReferences;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
index dc3938ce436e5..0ba7b7df97853 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.test.ts
@@ -128,12 +128,15 @@ const expectedIndexPatterns = {
   },
 };
 
-function stateFromPersistedState(
-  persistedState: IndexPatternPersistedState
-): IndexPatternPrivateState {
+type IndexPatternBaseState = Omit<
+  IndexPatternPrivateState,
+  'indexPatternRefs' | 'indexPatterns' | 'existingFields' | 'isFirstExistenceFetch'
+>;
+
+function enrichBaseState(baseState: IndexPatternBaseState): IndexPatternPrivateState {
   return {
-    currentIndexPatternId: persistedState.currentIndexPatternId,
-    layers: persistedState.layers,
+    currentIndexPatternId: baseState.currentIndexPatternId,
+    layers: baseState.layers,
     indexPatterns: expectedIndexPatterns,
     indexPatternRefs: [],
     existingFields: {},
@@ -142,7 +145,10 @@ function stateFromPersistedState(
 }
 
 describe('IndexPattern Data Source', () => {
-  let persistedState: IndexPatternPersistedState;
+  let baseState: Omit<
+    IndexPatternPrivateState,
+    'indexPatternRefs' | 'indexPatterns' | 'existingFields' | 'isFirstExistenceFetch'
+  >;
   let indexPatternDatasource: Datasource<IndexPatternPrivateState, IndexPatternPersistedState>;
 
   beforeEach(() => {
@@ -153,7 +159,7 @@ describe('IndexPattern Data Source', () => {
       charts: chartPluginMock.createSetupContract(),
     });
 
-    persistedState = {
+    baseState = {
       currentIndexPatternId: '1',
       layers: {
         first: {
@@ -224,9 +230,37 @@ describe('IndexPattern Data Source', () => {
 
   describe('#getPersistedState', () => {
     it('should persist from saved state', async () => {
-      const state = stateFromPersistedState(persistedState);
+      const state = enrichBaseState(baseState);
 
-      expect(indexPatternDatasource.getPersistableState(state)).toEqual(persistedState);
+      expect(indexPatternDatasource.getPersistableState(state)).toEqual({
+        state: {
+          layers: {
+            first: {
+              columnOrder: ['col1'],
+              columns: {
+                col1: {
+                  label: 'My Op',
+                  dataType: 'string',
+                  isBucketed: true,
+
+                  // Private
+                  operationType: 'terms',
+                  sourceField: 'op',
+                  params: {
+                    size: 5,
+                    orderBy: { type: 'alphabetical' },
+                    orderDirection: 'asc',
+                  },
+                },
+              },
+            },
+          },
+        },
+        savedObjectReferences: [
+          { name: 'indexpattern-datasource-current-indexpattern', type: 'index-pattern', id: '1' },
+          { name: 'indexpattern-datasource-layer-first', type: 'index-pattern', id: '1' },
+        ],
+      });
     });
   });
 
@@ -237,7 +271,7 @@ describe('IndexPattern Data Source', () => {
     });
 
     it('should generate an expression for an aggregated query', async () => {
-      const queryPersistedState: IndexPatternPersistedState = {
+      const queryBaseState: IndexPatternBaseState = {
         currentIndexPatternId: '1',
         layers: {
           first: {
@@ -266,7 +300,7 @@ describe('IndexPattern Data Source', () => {
         },
       };
 
-      const state = stateFromPersistedState(queryPersistedState);
+      const state = enrichBaseState(queryBaseState);
 
       expect(indexPatternDatasource.toExpression(state, 'first')).toMatchInlineSnapshot(`
         Object {
@@ -311,7 +345,7 @@ describe('IndexPattern Data Source', () => {
     });
 
     it('should put all time fields used in date_histograms to the esaggs timeFields parameter', async () => {
-      const queryPersistedState: IndexPatternPersistedState = {
+      const queryBaseState: IndexPatternBaseState = {
         currentIndexPatternId: '1',
         layers: {
           first: {
@@ -350,14 +384,14 @@ describe('IndexPattern Data Source', () => {
         },
       };
 
-      const state = stateFromPersistedState(queryPersistedState);
+      const state = enrichBaseState(queryBaseState);
 
       const ast = indexPatternDatasource.toExpression(state, 'first') as Ast;
       expect(ast.chain[0].arguments.timeFields).toEqual(['timestamp', 'another_datefield']);
     });
 
     it('should not put date fields used outside date_histograms to the esaggs timeFields parameter', async () => {
-      const queryPersistedState: IndexPatternPersistedState = {
+      const queryBaseState: IndexPatternBaseState = {
         currentIndexPatternId: '1',
         layers: {
           first: {
@@ -386,7 +420,7 @@ describe('IndexPattern Data Source', () => {
         },
       };
 
-      const state = stateFromPersistedState(queryPersistedState);
+      const state = enrichBaseState(queryBaseState);
 
       const ast = indexPatternDatasource.toExpression(state, 'first') as Ast;
       expect(ast.chain[0].arguments.timeFields).toEqual(['timestamp']);
@@ -489,55 +523,14 @@ describe('IndexPattern Data Source', () => {
     });
   });
 
-  describe('#getMetadata', () => {
-    it('should return the title of the index patterns', () => {
-      expect(
-        indexPatternDatasource.getMetaData({
-          indexPatternRefs: [],
-          existingFields: {},
-          isFirstExistenceFetch: false,
-          indexPatterns: expectedIndexPatterns,
-          layers: {
-            first: {
-              indexPatternId: '1',
-              columnOrder: [],
-              columns: {},
-            },
-            second: {
-              indexPatternId: '2',
-              columnOrder: [],
-              columns: {},
-            },
-          },
-          currentIndexPatternId: '1',
-        })
-      ).toEqual({
-        filterableIndexPatterns: [
-          {
-            id: '1',
-            title: 'my-fake-index-pattern',
-          },
-          {
-            id: '2',
-            title: 'my-fake-restricted-pattern',
-          },
-        ],
-      });
-    });
-  });
-
   describe('#getPublicAPI', () => {
     let publicAPI: DatasourcePublicAPI;
 
     beforeEach(async () => {
-      const initialState = stateFromPersistedState(persistedState);
+      const initialState = enrichBaseState(baseState);
       publicAPI = indexPatternDatasource.getPublicAPI({
         state: initialState,
         layerId: 'first',
-        dateRange: {
-          fromDate: 'now-30d',
-          toDate: 'now',
-        },
       });
     });
 
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
index 2fb8d7fe0e553..e2ca933504849 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx
@@ -8,7 +8,7 @@ import _ from 'lodash';
 import React from 'react';
 import { render } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
-import { CoreStart } from 'kibana/public';
+import { CoreStart, SavedObjectReference } from 'kibana/public';
 import { i18n } from '@kbn/i18n';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
 import {
@@ -19,7 +19,12 @@ import {
   DatasourceLayerPanelProps,
   PublicAPIProps,
 } from '../types';
-import { loadInitialState, changeIndexPattern, changeLayerIndexPattern } from './loader';
+import {
+  loadInitialState,
+  changeIndexPattern,
+  changeLayerIndexPattern,
+  extractReferences,
+} from './loader';
 import { toExpression } from './to_expression';
 import {
   IndexPatternDimensionTrigger,
@@ -125,9 +130,13 @@ export function getIndexPatternDatasource({
   const indexPatternDatasource: Datasource<IndexPatternPrivateState, IndexPatternPersistedState> = {
     id: 'indexpattern',
 
-    async initialize(state?: IndexPatternPersistedState) {
+    async initialize(
+      persistedState?: IndexPatternPersistedState,
+      references?: SavedObjectReference[]
+    ) {
       return loadInitialState({
-        state,
+        persistedState,
+        references,
         savedObjectsClient: await savedObjectsClient,
         defaultIndexPatternId: core.uiSettings.get('defaultIndex'),
         storage,
@@ -135,8 +144,8 @@ export function getIndexPatternDatasource({
       });
     },
 
-    getPersistableState({ currentIndexPatternId, layers }: IndexPatternPrivateState) {
-      return { currentIndexPatternId, layers };
+    getPersistableState(state: IndexPatternPrivateState) {
+      return extractReferences(state);
     },
 
     insertLayer(state: IndexPatternPrivateState, newLayerId: string) {
@@ -183,19 +192,6 @@ export function getIndexPatternDatasource({
 
     toExpression,
 
-    getMetaData(state: IndexPatternPrivateState) {
-      return {
-        filterableIndexPatterns: _.uniq(
-          Object.values(state.layers)
-            .map((layer) => layer.indexPatternId)
-            .map((indexPatternId) => ({
-              id: indexPatternId,
-              title: state.indexPatterns[indexPatternId].title,
-            }))
-        ),
-      };
-    },
-
     renderDataPanel(
       domElement: Element,
       props: DatasourceDataPanelProps<IndexPatternPrivateState>
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
index cfabcb4edcef7..d80bf779a5d17 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts
@@ -12,6 +12,8 @@ import {
   changeIndexPattern,
   changeLayerIndexPattern,
   syncExistingFields,
+  extractReferences,
+  injectReferences,
 } from './loader';
 import { IndexPatternsContract } from '../../../../../src/plugins/data/public';
 import {
@@ -378,10 +380,8 @@ describe('loader', () => {
 
     it('should initialize from saved state', async () => {
       const savedState: IndexPatternPersistedState = {
-        currentIndexPatternId: '2',
         layers: {
           layerb: {
-            indexPatternId: '2',
             columnOrder: ['col1', 'col2'],
             columns: {
               col1: {
@@ -407,7 +407,12 @@ describe('loader', () => {
       };
       const storage = createMockStorage({ indexPatternId: '1' });
       const state = await loadInitialState({
-        state: savedState,
+        persistedState: savedState,
+        references: [
+          { name: 'indexpattern-datasource-current-indexpattern', id: '2', type: 'index-pattern' },
+          { name: 'indexpattern-datasource-layer-layerb', id: '2', type: 'index-pattern' },
+          { name: 'another-reference', id: 'c', type: 'index-pattern' },
+        ],
         savedObjectsClient: mockClient(),
         indexPatternsService: mockIndexPatternsService(),
         storage,
@@ -422,7 +427,7 @@ describe('loader', () => {
         indexPatterns: {
           '2': sampleIndexPatterns['2'],
         },
-        layers: savedState.layers,
+        layers: { layerb: { ...savedState.layers.layerb, indexPatternId: '2' } },
       });
 
       expect(storage.set).toHaveBeenCalledWith('lens-settings', {
@@ -431,6 +436,79 @@ describe('loader', () => {
     });
   });
 
+  describe('saved object references', () => {
+    const state: IndexPatternPrivateState = {
+      currentIndexPatternId: 'b',
+      indexPatternRefs: [],
+      indexPatterns: {},
+      existingFields: {},
+      layers: {
+        a: {
+          indexPatternId: 'id-index-pattern-a',
+          columnOrder: ['col1'],
+          columns: {
+            col1: {
+              dataType: 'number',
+              isBucketed: false,
+              label: '',
+              operationType: 'avg',
+              sourceField: 'myfield',
+            },
+          },
+        },
+        b: {
+          indexPatternId: 'id-index-pattern-b',
+          columnOrder: ['col2'],
+          columns: {
+            col2: {
+              dataType: 'number',
+              isBucketed: false,
+              label: '',
+              operationType: 'avg',
+              sourceField: 'myfield2',
+            },
+          },
+        },
+      },
+      isFirstExistenceFetch: false,
+    };
+
+    it('should create a reference for each layer and for current index pattern', () => {
+      const { savedObjectReferences } = extractReferences(state);
+      expect(savedObjectReferences).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "id": "b",
+            "name": "indexpattern-datasource-current-indexpattern",
+            "type": "index-pattern",
+          },
+          Object {
+            "id": "id-index-pattern-a",
+            "name": "indexpattern-datasource-layer-a",
+            "type": "index-pattern",
+          },
+          Object {
+            "id": "id-index-pattern-b",
+            "name": "indexpattern-datasource-layer-b",
+            "type": "index-pattern",
+          },
+        ]
+      `);
+    });
+
+    it('should restore layers', () => {
+      const { savedObjectReferences, state: persistedState } = extractReferences(state);
+      expect(injectReferences(persistedState, savedObjectReferences).layers).toEqual(state.layers);
+    });
+
+    it('should restore current index pattern', () => {
+      const { savedObjectReferences, state: persistedState } = extractReferences(state);
+      expect(injectReferences(persistedState, savedObjectReferences).currentIndexPatternId).toEqual(
+        state.currentIndexPatternId
+      );
+    });
+  });
+
   describe('changeIndexPattern', () => {
     it('loads the index pattern and then sets it as current', async () => {
       const setState = jest.fn();
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
index 9c4a19e58a052..24906790a9fc9 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/loader.ts
@@ -6,7 +6,7 @@
 
 import _ from 'lodash';
 import { IStorageWrapper } from 'src/plugins/kibana_utils/public';
-import { SavedObjectsClientContract, HttpSetup } from 'kibana/public';
+import { SavedObjectsClientContract, HttpSetup, SavedObjectReference } from 'kibana/public';
 import { StateSetter } from '../types';
 import {
   IndexPattern,
@@ -14,6 +14,7 @@ import {
   IndexPatternPersistedState,
   IndexPatternPrivateState,
   IndexPatternField,
+  IndexPatternLayer,
 } from './types';
 import { updateLayerIndexPattern } from './state_helpers';
 import { DateRange, ExistingFields } from '../../common/types';
@@ -115,14 +116,58 @@ const setLastUsedIndexPatternId = (storage: IStorageWrapper, value: string) => {
   writeToStorage(storage, 'indexPatternId', value);
 };
 
+const CURRENT_PATTERN_REFERENCE_NAME = 'indexpattern-datasource-current-indexpattern';
+function getLayerReferenceName(layerId: string) {
+  return `indexpattern-datasource-layer-${layerId}`;
+}
+
+export function extractReferences({ currentIndexPatternId, layers }: IndexPatternPrivateState) {
+  const savedObjectReferences: SavedObjectReference[] = [];
+  savedObjectReferences.push({
+    type: 'index-pattern',
+    id: currentIndexPatternId,
+    name: CURRENT_PATTERN_REFERENCE_NAME,
+  });
+  const persistableLayers: Record<string, Omit<IndexPatternLayer, 'indexPatternId'>> = {};
+  Object.entries(layers).forEach(([layerId, { indexPatternId, ...persistableLayer }]) => {
+    savedObjectReferences.push({
+      type: 'index-pattern',
+      id: indexPatternId,
+      name: getLayerReferenceName(layerId),
+    });
+    persistableLayers[layerId] = persistableLayer;
+  });
+  return { savedObjectReferences, state: { layers: persistableLayers } };
+}
+
+export function injectReferences(
+  state: IndexPatternPersistedState,
+  references: SavedObjectReference[]
+) {
+  const layers: Record<string, IndexPatternLayer> = {};
+  Object.entries(state.layers).forEach(([layerId, persistedLayer]) => {
+    layers[layerId] = {
+      ...persistedLayer,
+      indexPatternId: references.find(({ name }) => name === getLayerReferenceName(layerId))!.id,
+    };
+  });
+  return {
+    currentIndexPatternId: references.find(({ name }) => name === CURRENT_PATTERN_REFERENCE_NAME)!
+      .id,
+    layers,
+  };
+}
+
 export async function loadInitialState({
-  state,
+  persistedState,
+  references,
   savedObjectsClient,
   defaultIndexPatternId,
   storage,
   indexPatternsService,
 }: {
-  state?: IndexPatternPersistedState;
+  persistedState?: IndexPatternPersistedState;
+  references?: SavedObjectReference[];
   savedObjectsClient: SavedObjectsClient;
   defaultIndexPatternId?: string;
   storage: IStorageWrapper;
@@ -131,6 +176,9 @@ export async function loadInitialState({
   const indexPatternRefs = await loadIndexPatternRefs(savedObjectsClient);
   const lastUsedIndexPatternId = getLastUsedIndexPatternId(storage, indexPatternRefs);
 
+  const state =
+    persistedState && references ? injectReferences(persistedState, references) : undefined;
+
   const requiredPatterns = _.uniq(
     state
       ? Object.values(state.layers)
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
index 8d0e82b176aa9..95cc47e68f8a1 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/types.ts
@@ -40,11 +40,12 @@ export interface IndexPatternLayer {
 }
 
 export interface IndexPatternPersistedState {
-  currentIndexPatternId: string;
-  layers: Record<string, IndexPatternLayer>;
+  layers: Record<string, Omit<IndexPatternLayer, 'indexPatternId'>>;
 }
 
-export type IndexPatternPrivateState = IndexPatternPersistedState & {
+export interface IndexPatternPrivateState {
+  currentIndexPatternId: string;
+  layers: Record<string, IndexPatternLayer>;
   indexPatternRefs: IndexPatternRef[];
   indexPatterns: Record<string, IndexPattern>;
 
@@ -54,7 +55,7 @@ export type IndexPatternPrivateState = IndexPatternPersistedState & {
   existingFields: Record<string, Record<string, boolean>>;
   isFirstExistenceFetch: boolean;
   existenceFetchFailed?: boolean;
-};
+}
 
 export interface IndexPatternRef {
   id: string;
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts
index 62f47a21c85b0..f3c9a725ee2e2 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.test.ts
@@ -66,12 +66,6 @@ describe('metric_visualization', () => {
     });
   });
 
-  describe('#getPersistableState', () => {
-    it('persists the state as given', () => {
-      expect(metricVisualization.getPersistableState(exampleState())).toEqual(exampleState());
-    });
-  });
-
   describe('#getConfiguration', () => {
     it('can add a metric when there is no accessor', () => {
       expect(
@@ -168,7 +162,8 @@ describe('metric_visualization', () => {
         datasourceLayers: { l1: datasource },
       };
 
-      expect(metricVisualization.toExpression(exampleState(), frame)).toMatchInlineSnapshot(`
+      expect(metricVisualization.toExpression(exampleState(), frame.datasourceLayers))
+        .toMatchInlineSnapshot(`
         Object {
           "chain": Array [
             Object {
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx
index e565d2fa8b293..5f1ce5334dd36 100644
--- a/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/metric_visualization.tsx
@@ -7,20 +7,20 @@
 import { i18n } from '@kbn/i18n';
 import { Ast } from '@kbn/interpreter/target/common';
 import { getSuggestions } from './metric_suggestions';
-import { Visualization, FramePublicAPI, OperationMetadata } from '../types';
-import { State, PersistableState } from './types';
+import { Visualization, OperationMetadata, DatasourcePublicAPI } from '../types';
+import { State } from './types';
 import chartMetricSVG from '../assets/chart_metric.svg';
 
 const toExpression = (
   state: State,
-  frame: FramePublicAPI,
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
   mode: 'reduced' | 'full' = 'full'
 ): Ast | null => {
   if (!state.accessor) {
     return null;
   }
 
-  const [datasource] = Object.values(frame.datasourceLayers);
+  const [datasource] = Object.values(datasourceLayers);
   const operation = datasource && datasource.getOperationForColumnId(state.accessor);
 
   return {
@@ -39,7 +39,7 @@ const toExpression = (
   };
 };
 
-export const metricVisualization: Visualization<State, PersistableState> = {
+export const metricVisualization: Visualization<State> = {
   id: 'lnsMetric',
 
   visualizationTypes: [
@@ -88,8 +88,6 @@ export const metricVisualization: Visualization<State, PersistableState> = {
     );
   },
 
-  getPersistableState: (state) => state,
-
   getConfiguration(props) {
     return {
       groups: [
@@ -106,8 +104,8 @@ export const metricVisualization: Visualization<State, PersistableState> = {
   },
 
   toExpression,
-  toPreviewExpression: (state: State, frame: FramePublicAPI) =>
-    toExpression(state, frame, 'reduced'),
+  toPreviewExpression: (state, datasourceLayers) =>
+    toExpression(state, datasourceLayers, 'reduced'),
 
   setDimension({ prevState, columnId }) {
     return { ...prevState, accessor: columnId };
diff --git a/x-pack/plugins/lens/public/metric_visualization/types.ts b/x-pack/plugins/lens/public/metric_visualization/types.ts
index 53fc103934255..86a781716b345 100644
--- a/x-pack/plugins/lens/public/metric_visualization/types.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/types.ts
@@ -13,5 +13,3 @@ export interface MetricConfig extends State {
   title: string;
   mode: 'reduced' | 'full';
 }
-
-export type PersistableState = State;
diff --git a/x-pack/plugins/lens/public/persistence/filter_references.test.ts b/x-pack/plugins/lens/public/persistence/filter_references.test.ts
new file mode 100644
index 0000000000000..23c0cd1d11f1b
--- /dev/null
+++ b/x-pack/plugins/lens/public/persistence/filter_references.test.ts
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Filter } from 'src/plugins/data/public';
+import { extractFilterReferences, injectFilterReferences } from './filter_references';
+import { FilterStateStore } from 'src/plugins/data/common';
+
+describe('filter saved object references', () => {
+  const filters: Filter[] = [
+    {
+      $state: { store: FilterStateStore.APP_STATE },
+      meta: {
+        alias: null,
+        disabled: false,
+        index: '90943e30-9a47-11e8-b64d-95841ca0b247',
+        key: 'geo.src',
+        negate: true,
+        params: { query: 'CN' },
+        type: 'phrase',
+      },
+      query: { match_phrase: { 'geo.src': 'CN' } },
+    },
+    {
+      $state: { store: FilterStateStore.APP_STATE },
+      meta: {
+        alias: null,
+        disabled: false,
+        index: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+        key: 'geoip.country_iso_code',
+        negate: true,
+        params: { query: 'US' },
+        type: 'phrase',
+      },
+      query: { match_phrase: { 'geoip.country_iso_code': 'US' } },
+    },
+  ];
+
+  it('should create two index-pattern references', () => {
+    const { references } = extractFilterReferences(filters);
+    expect(references).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "id": "90943e30-9a47-11e8-b64d-95841ca0b247",
+          "name": "filter-index-pattern-0",
+          "type": "index-pattern",
+        },
+        Object {
+          "id": "ff959d40-b880-11e8-a6d9-e546fe2bba5f",
+          "name": "filter-index-pattern-1",
+          "type": "index-pattern",
+        },
+      ]
+    `);
+  });
+
+  it('should restore the same filter after extracting and injecting', () => {
+    const { persistableFilters, references } = extractFilterReferences(filters);
+    expect(injectFilterReferences(persistableFilters, references)).toEqual(filters);
+  });
+
+  it('should ignore other references', () => {
+    const { persistableFilters, references } = extractFilterReferences(filters);
+    expect(
+      injectFilterReferences(persistableFilters, [
+        { type: 'index-pattern', id: '1234', name: 'some other index pattern' },
+        ...references,
+      ])
+    ).toEqual(filters);
+  });
+
+  it('should inject other ids if references change', () => {
+    const { persistableFilters, references } = extractFilterReferences(filters);
+
+    expect(
+      injectFilterReferences(
+        persistableFilters,
+        references.map((reference, index) => ({ ...reference, id: `overwritten-id-${index}` }))
+      )
+    ).toEqual([
+      {
+        ...filters[0],
+        meta: {
+          ...filters[0].meta,
+          index: 'overwritten-id-0',
+        },
+      },
+      {
+        ...filters[1],
+        meta: {
+          ...filters[1].meta,
+          index: 'overwritten-id-1',
+        },
+      },
+    ]);
+  });
+});
diff --git a/x-pack/plugins/lens/public/persistence/filter_references.ts b/x-pack/plugins/lens/public/persistence/filter_references.ts
new file mode 100644
index 0000000000000..47564e510ce9c
--- /dev/null
+++ b/x-pack/plugins/lens/public/persistence/filter_references.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { Filter } from 'src/plugins/data/public';
+import { SavedObjectReference } from 'kibana/public';
+import { PersistableFilter } from '../../common';
+
+export function extractFilterReferences(
+  filters: Filter[]
+): { persistableFilters: PersistableFilter[]; references: SavedObjectReference[] } {
+  const references: SavedObjectReference[] = [];
+  const persistableFilters = filters.map((filterRow, i) => {
+    if (!filterRow.meta || !filterRow.meta.index) {
+      return filterRow;
+    }
+    const refName = `filter-index-pattern-${i}`;
+    references.push({
+      name: refName,
+      type: 'index-pattern',
+      id: filterRow.meta.index,
+    });
+    return {
+      ...filterRow,
+      meta: {
+        ...filterRow.meta,
+        indexRefName: refName,
+        index: undefined,
+      },
+    };
+  });
+
+  return { persistableFilters, references };
+}
+
+export function injectFilterReferences(
+  filters: PersistableFilter[],
+  references: SavedObjectReference[]
+) {
+  return filters.map((filterRow) => {
+    if (!filterRow.meta || !filterRow.meta.indexRefName) {
+      return filterRow as Filter;
+    }
+    const { indexRefName, ...metaRest } = filterRow.meta;
+    const reference = references.find((ref) => ref.name === indexRefName);
+    if (!reference) {
+      throw new Error(`Could not find reference for ${indexRefName}`);
+    }
+    return {
+      ...filterRow,
+      meta: { ...metaRest, index: reference.id },
+    };
+  });
+}
diff --git a/x-pack/plugins/lens/public/persistence/index.ts b/x-pack/plugins/lens/public/persistence/index.ts
index 1f823ff75c8c6..464bd46790422 100644
--- a/x-pack/plugins/lens/public/persistence/index.ts
+++ b/x-pack/plugins/lens/public/persistence/index.ts
@@ -5,3 +5,4 @@
  */
 
 export * from './saved_object_store';
+export * from './filter_references';
diff --git a/x-pack/plugins/lens/public/persistence/saved_object_store.test.ts b/x-pack/plugins/lens/public/persistence/saved_object_store.test.ts
index f8f8d889233a7..ba7c0ee6ae786 100644
--- a/x-pack/plugins/lens/public/persistence/saved_object_store.test.ts
+++ b/x-pack/plugins/lens/public/persistence/saved_object_store.test.ts
@@ -30,11 +30,8 @@ describe('LensStore', () => {
         title: 'Hello',
         description: 'My doc',
         visualizationType: 'bar',
-        expression: '',
+        references: [],
         state: {
-          datasourceMetaData: {
-            filterableIndexPatterns: [],
-          },
           datasourceStates: {
             indexpattern: { type: 'index_pattern', indexPattern: '.kibana_test' },
           },
@@ -49,11 +46,8 @@ describe('LensStore', () => {
         title: 'Hello',
         description: 'My doc',
         visualizationType: 'bar',
-        expression: '',
+        references: [],
         state: {
-          datasourceMetaData: {
-            filterableIndexPatterns: [],
-          },
           datasourceStates: {
             indexpattern: { type: 'index_pattern', indexPattern: '.kibana_test' },
           },
@@ -64,21 +58,25 @@ describe('LensStore', () => {
       });
 
       expect(client.create).toHaveBeenCalledTimes(1);
-      expect(client.create).toHaveBeenCalledWith('lens', {
-        title: 'Hello',
-        description: 'My doc',
-        visualizationType: 'bar',
-        expression: '',
-        state: {
-          datasourceMetaData: { filterableIndexPatterns: [] },
-          datasourceStates: {
-            indexpattern: { type: 'index_pattern', indexPattern: '.kibana_test' },
+      expect(client.create).toHaveBeenCalledWith(
+        'lens',
+        {
+          title: 'Hello',
+          description: 'My doc',
+          visualizationType: 'bar',
+          state: {
+            datasourceStates: {
+              indexpattern: { type: 'index_pattern', indexPattern: '.kibana_test' },
+            },
+            visualization: { x: 'foo', y: 'baz' },
+            query: { query: '', language: 'lucene' },
+            filters: [],
           },
-          visualization: { x: 'foo', y: 'baz' },
-          query: { query: '', language: 'lucene' },
-          filters: [],
         },
-      });
+        {
+          references: [],
+        }
+      );
     });
 
     test('updates and returns a visualization document', async () => {
@@ -87,9 +85,8 @@ describe('LensStore', () => {
         id: 'Gandalf',
         title: 'Even the very wise cannot see all ends.',
         visualizationType: 'line',
-        expression: '',
+        references: [],
         state: {
-          datasourceMetaData: { filterableIndexPatterns: [] },
           datasourceStates: { indexpattern: { type: 'index_pattern', indexPattern: 'lotr' } },
           visualization: { gear: ['staff', 'pointy hat'] },
           query: { query: '', language: 'lucene' },
@@ -101,9 +98,8 @@ describe('LensStore', () => {
         id: 'Gandalf',
         title: 'Even the very wise cannot see all ends.',
         visualizationType: 'line',
-        expression: '',
+        references: [],
         state: {
-          datasourceMetaData: { filterableIndexPatterns: [] },
           datasourceStates: { indexpattern: { type: 'index_pattern', indexPattern: 'lotr' } },
           visualization: { gear: ['staff', 'pointy hat'] },
           query: { query: '', language: 'lucene' },
@@ -116,22 +112,21 @@ describe('LensStore', () => {
         {
           type: 'lens',
           id: 'Gandalf',
+          references: [],
           attributes: {
             title: null,
             visualizationType: null,
-            expression: null,
             state: null,
           },
         },
         {
           type: 'lens',
           id: 'Gandalf',
+          references: [],
           attributes: {
             title: 'Even the very wise cannot see all ends.',
             visualizationType: 'line',
-            expression: '',
             state: {
-              datasourceMetaData: { filterableIndexPatterns: [] },
               datasourceStates: { indexpattern: { type: 'index_pattern', indexPattern: 'lotr' } },
               visualization: { gear: ['staff', 'pointy hat'] },
               query: { query: '', language: 'lucene' },
diff --git a/x-pack/plugins/lens/public/persistence/saved_object_store.ts b/x-pack/plugins/lens/public/persistence/saved_object_store.ts
index 59ead53956a8d..e4609213ec792 100644
--- a/x-pack/plugins/lens/public/persistence/saved_object_store.ts
+++ b/x-pack/plugins/lens/public/persistence/saved_object_store.ts
@@ -4,8 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { SavedObjectAttributes, SavedObjectsClientContract } from 'kibana/public';
-import { Query, Filter } from '../../../../../src/plugins/data/public';
+import {
+  SavedObjectAttributes,
+  SavedObjectsClientContract,
+  SavedObjectReference,
+} from 'kibana/public';
+import { Query } from '../../../../../src/plugins/data/public';
+import { PersistableFilter } from '../../common';
 
 export interface Document {
   id?: string;
@@ -13,16 +18,13 @@ export interface Document {
   visualizationType: string | null;
   title: string;
   description?: string;
-  expression: string | null;
   state: {
-    datasourceMetaData: {
-      filterableIndexPatterns: Array<{ id: string; title: string }>;
-    };
     datasourceStates: Record<string, unknown>;
     visualization: unknown;
     query: Query;
-    filters: Filter[];
+    filters: PersistableFilter[];
   };
+  references: SavedObjectReference[];
 }
 
 export const DOC_TYPE = 'lens';
@@ -45,14 +47,16 @@ export class SavedObjectIndexStore implements SavedObjectStore {
   }
 
   async save(vis: Document) {
-    const { id, type, ...rest } = vis;
+    const { id, type, references, ...rest } = vis;
     // TODO: SavedObjectAttributes should support this kind of object,
     // remove this workaround when SavedObjectAttributes is updated.
     const attributes = (rest as unknown) as SavedObjectAttributes;
 
     const result = await (id
-      ? this.safeUpdate(id, attributes)
-      : this.client.create(DOC_TYPE, attributes));
+      ? this.safeUpdate(id, attributes, references)
+      : this.client.create(DOC_TYPE, attributes, {
+          references,
+        }));
 
     return { ...vis, id: result.id };
   }
@@ -63,21 +67,25 @@ export class SavedObjectIndexStore implements SavedObjectStore {
   // deleted subtrees make it back into the object after a load.
   // This function fixes this by doing two updates - one to empty out the document setting
   // every key to null, and a second one to load the new content.
-  private async safeUpdate(id: string, attributes: SavedObjectAttributes) {
+  private async safeUpdate(
+    id: string,
+    attributes: SavedObjectAttributes,
+    references: SavedObjectReference[]
+  ) {
     const resetAttributes: SavedObjectAttributes = {};
     Object.keys(attributes).forEach((key) => {
       resetAttributes[key] = null;
     });
     return (
       await this.client.bulkUpdate([
-        { type: DOC_TYPE, id, attributes: resetAttributes },
-        { type: DOC_TYPE, id, attributes },
+        { type: DOC_TYPE, id, attributes: resetAttributes, references },
+        { type: DOC_TYPE, id, attributes, references },
       ])
     ).savedObjects[1];
   }
 
   async load(id: string): Promise<Document> {
-    const { type, attributes, error } = await this.client.get(DOC_TYPE, id);
+    const { type, attributes, references, error } = await this.client.get(DOC_TYPE, id);
 
     if (error) {
       throw error;
@@ -85,6 +93,7 @@ export class SavedObjectIndexStore implements SavedObjectStore {
 
     return {
       ...(attributes as SavedObjectAttributes),
+      references,
       id,
       type,
     } as Document;
diff --git a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx
index 5a68516db6aa3..855bacd4f794c 100644
--- a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx
+++ b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx
@@ -31,7 +31,7 @@ const bucketedOperations = (op: OperationMetadata) => op.isBucketed;
 const numberMetricOperations = (op: OperationMetadata) =>
   !op.isBucketed && op.dataType === 'number';
 
-export const pieVisualization: Visualization<PieVisualizationState, PieVisualizationState> = {
+export const pieVisualization: Visualization<PieVisualizationState> = {
   id: 'lnsPie',
 
   visualizationTypes: [
@@ -91,8 +91,6 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
     );
   },
 
-  getPersistableState: (state) => state,
-
   getSuggestions: suggestions,
 
   getConfiguration({ state, frame, layerId }) {
diff --git a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
index fbc47e8bfb00f..f36b9efb930a9 100644
--- a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts
@@ -5,21 +5,24 @@
  */
 
 import { Ast } from '@kbn/interpreter/common';
-import { FramePublicAPI, Operation } from '../types';
+import { Operation, DatasourcePublicAPI } from '../types';
 import { DEFAULT_PERCENT_DECIMALS } from './constants';
 import { PieVisualizationState } from './types';
 
-export function toExpression(state: PieVisualizationState, frame: FramePublicAPI) {
-  return expressionHelper(state, frame, false);
+export function toExpression(
+  state: PieVisualizationState,
+  datasourceLayers: Record<string, DatasourcePublicAPI>
+) {
+  return expressionHelper(state, datasourceLayers, false);
 }
 
 function expressionHelper(
   state: PieVisualizationState,
-  frame: FramePublicAPI,
+  datasourceLayers: Record<string, DatasourcePublicAPI>,
   isPreview: boolean
 ): Ast | null {
   const layer = state.layers[0];
-  const datasource = frame.datasourceLayers[layer.layerId];
+  const datasource = datasourceLayers[layer.layerId];
   const operations = layer.groups
     .map((columnId) => ({ columnId, operation: datasource.getOperationForColumnId(columnId) }))
     .filter((o): o is { columnId: string; operation: Operation } => !!o.operation);
@@ -50,6 +53,9 @@ function expressionHelper(
   };
 }
 
-export function toPreviewExpression(state: PieVisualizationState, frame: FramePublicAPI) {
-  return expressionHelper(state, frame, true);
+export function toPreviewExpression(
+  state: PieVisualizationState,
+  datasourceLayers: Record<string, DatasourcePublicAPI>
+) {
+  return expressionHelper(state, datasourceLayers, true);
 }
diff --git a/x-pack/plugins/lens/public/types.ts b/x-pack/plugins/lens/public/types.ts
index c7bda65cd1327..20f2ce6c56774 100644
--- a/x-pack/plugins/lens/public/types.ts
+++ b/x-pack/plugins/lens/public/types.ts
@@ -7,6 +7,7 @@
 import { Ast } from '@kbn/interpreter/common';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { CoreSetup } from 'kibana/public';
+import { SavedObjectReference } from 'kibana/public';
 import {
   ExpressionRendererEvent,
   IInterpreterRenderHandlers,
@@ -30,7 +31,6 @@ export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
 export interface PublicAPIProps<T> {
   state: T;
   layerId: string;
-  dateRange: DateRange;
 }
 
 export interface EditorFrameProps {
@@ -44,8 +44,9 @@ export interface EditorFrameProps {
   // Frame loader (app or embeddable) is expected to call this when it loads and updates
   // This should be replaced with a top-down state
   onChange: (newState: {
-    filterableIndexPatterns: DatasourceMetaData['filterableIndexPatterns'];
+    filterableIndexPatterns: string[];
     doc: Document;
+    isSaveable: boolean;
   }) => void;
   showNoDataPopover: () => void;
 }
@@ -57,9 +58,7 @@ export interface EditorFrameInstance {
 export interface EditorFrameSetup {
   // generic type on the API functions to pull the "unknown vs. specific type" error into the implementation
   registerDatasource: <T, P>(datasource: Datasource<T, P> | Promise<Datasource<T, P>>) => void;
-  registerVisualization: <T, P>(
-    visualization: Visualization<T, P> | Promise<Visualization<T, P>>
-  ) => void;
+  registerVisualization: <T>(visualization: Visualization<T> | Promise<Visualization<T>>) => void;
 }
 
 export interface EditorFrameStart {
@@ -131,10 +130,6 @@ export interface DatasourceSuggestion<T = unknown> {
   keptLayerIds: string[];
 }
 
-export interface DatasourceMetaData {
-  filterableIndexPatterns: Array<{ id: string; title: string }>;
-}
-
 export type StateSetter<T> = (newState: T | ((prevState: T) => T)) => void;
 
 /**
@@ -146,10 +141,10 @@ export interface Datasource<T = unknown, P = unknown> {
   // For initializing, either from an empty state or from persisted state
   // Because this will be called at runtime, state might have a type of `any` and
   // datasources should validate their arguments
-  initialize: (state?: P) => Promise<T>;
+  initialize: (state?: P, savedObjectReferences?: SavedObjectReference[]) => Promise<T>;
 
   // Given the current state, which parts should be saved?
-  getPersistableState: (state: T) => P;
+  getPersistableState: (state: T) => { state: P; savedObjectReferences: SavedObjectReference[] };
 
   insertLayer: (state: T, newLayerId: string) => T;
   removeLayer: (state: T, layerId: string) => T;
@@ -166,8 +161,6 @@ export interface Datasource<T = unknown, P = unknown> {
 
   toExpression: (state: T, layerId: string) => Ast | string | null;
 
-  getMetaData: (state: T) => DatasourceMetaData;
-
   getDatasourceSuggestionsForField: (state: T, field: unknown) => Array<DatasourceSuggestion<T>>;
   getDatasourceSuggestionsFromCurrentState: (state: T) => Array<DatasourceSuggestion<T>>;
 
@@ -408,7 +401,7 @@ export interface VisualizationType {
   label: string;
 }
 
-export interface Visualization<T = unknown, P = unknown> {
+export interface Visualization<T = unknown> {
   /** Plugin ID, such as "lnsXY" */
   id: string;
 
@@ -418,11 +411,7 @@ export interface Visualization<T = unknown, P = unknown> {
    * - Loadingn from a saved visualization
    * - When using suggestions, the suggested state is passed in
    */
-  initialize: (frame: FramePublicAPI, state?: P) => T;
-  /**
-   * Can remove any state that should not be persisted to saved object, such as UI state
-   */
-  getPersistableState: (state: T) => P;
+  initialize: (frame: FramePublicAPI, state?: T) => T;
 
   /**
    * Visualizations must provide at least one type for the chart switcher,
@@ -504,12 +493,18 @@ export interface Visualization<T = unknown, P = unknown> {
    */
   getSuggestions: (context: SuggestionRequest<T>) => Array<VisualizationSuggestion<T>>;
 
-  toExpression: (state: T, frame: FramePublicAPI) => Ast | string | null;
+  toExpression: (
+    state: T,
+    datasourceLayers: Record<string, DatasourcePublicAPI>
+  ) => Ast | string | null;
   /**
    * Expression to render a preview version of the chart in very constrained space.
    * If there is no expression provided, the preview icon is used.
    */
-  toPreviewExpression?: (state: T, frame: FramePublicAPI) => Ast | string | null;
+  toPreviewExpression?: (
+    state: T,
+    datasourceLayers: Record<string, DatasourcePublicAPI>
+  ) => Ast | string | null;
 }
 
 export interface LensFilterEvent {
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 876d1141740e1..f579085646f6f 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
@@ -53,7 +53,7 @@ describe('#toExpression', () => {
             },
           ],
         },
-        frame
+        frame.datasourceLayers
       )
     ).toMatchSnapshot();
   });
@@ -74,7 +74,7 @@ describe('#toExpression', () => {
             },
           ],
         },
-        frame
+        frame.datasourceLayers
       ) as Ast).chain[0].arguments.fittingFunction[0]
     ).toEqual('None');
   });
@@ -94,7 +94,7 @@ describe('#toExpression', () => {
           },
         ],
       },
-      frame
+      frame.datasourceLayers
     ) as Ast;
     expect(expression.chain[0].arguments.showXAxisTitle[0]).toBe(true);
     expect(expression.chain[0].arguments.showYAxisTitle[0]).toBe(true);
@@ -116,7 +116,7 @@ describe('#toExpression', () => {
             },
           ],
         },
-        frame
+        frame.datasourceLayers
       )
     ).toBeNull();
   });
@@ -137,7 +137,7 @@ describe('#toExpression', () => {
             },
           ],
         },
-        frame
+        frame.datasourceLayers
       )
     ).toBeNull();
   });
@@ -157,7 +157,7 @@ describe('#toExpression', () => {
           },
         ],
       },
-      frame
+      frame.datasourceLayers
     )! as Ast;
 
     expect(mockDatasource.publicAPIMock.getOperationForColumnId).toHaveBeenCalledWith('b');
@@ -191,7 +191,7 @@ describe('#toExpression', () => {
           },
         ],
       },
-      frame
+      frame.datasourceLayers
     ) as Ast;
     expect(
       (expression.chain[0].arguments.tickLabelsVisibilitySettings[0] as Ast).chain[0].arguments
@@ -216,7 +216,7 @@ describe('#toExpression', () => {
           },
         ],
       },
-      frame
+      frame.datasourceLayers
     ) as Ast;
     expect(
       (expression.chain[0].arguments.gridlinesVisibilitySettings[0] as Ast).chain[0].arguments
diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
index 9b9c159af265e..cd32d4f94c3e5 100644
--- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts
@@ -7,13 +7,16 @@
 import { Ast } from '@kbn/interpreter/common';
 import { ScaleType } from '@elastic/charts';
 import { State, LayerConfig } from './types';
-import { FramePublicAPI, OperationMetadata } from '../types';
+import { OperationMetadata, DatasourcePublicAPI } from '../types';
 
 interface ValidLayer extends LayerConfig {
   xAccessor: NonNullable<LayerConfig['xAccessor']>;
 }
 
-export const toExpression = (state: State, frame: FramePublicAPI): Ast | null => {
+export const toExpression = (
+  state: State,
+  datasourceLayers: Record<string, DatasourcePublicAPI>
+): Ast | null => {
   if (!state || !state.layers.length) {
     return null;
   }
@@ -21,19 +24,20 @@ export const toExpression = (state: State, frame: FramePublicAPI): Ast | null =>
   const metadata: Record<string, Record<string, OperationMetadata | null>> = {};
   state.layers.forEach((layer) => {
     metadata[layer.layerId] = {};
-    const datasource = frame.datasourceLayers[layer.layerId];
+    const datasource = datasourceLayers[layer.layerId];
     datasource.getTableSpec().forEach((column) => {
-      const operation = frame.datasourceLayers[layer.layerId].getOperationForColumnId(
-        column.columnId
-      );
+      const operation = datasourceLayers[layer.layerId].getOperationForColumnId(column.columnId);
       metadata[layer.layerId][column.columnId] = operation;
     });
   });
 
-  return buildExpression(state, metadata, frame);
+  return buildExpression(state, metadata, datasourceLayers);
 };
 
-export function toPreviewExpression(state: State, frame: FramePublicAPI) {
+export function toPreviewExpression(
+  state: State,
+  datasourceLayers: Record<string, DatasourcePublicAPI>
+) {
   return toExpression(
     {
       ...state,
@@ -44,7 +48,7 @@ export function toPreviewExpression(state: State, frame: FramePublicAPI) {
         isVisible: false,
       },
     },
-    frame
+    datasourceLayers
   );
 }
 
@@ -77,7 +81,7 @@ export function getScaleType(metadata: OperationMetadata | null, defaultScale: S
 export const buildExpression = (
   state: State,
   metadata: Record<string, Record<string, OperationMetadata | null>>,
-  frame?: FramePublicAPI
+  datasourceLayers?: Record<string, DatasourcePublicAPI>
 ): Ast | null => {
   const validLayers = state.layers.filter((layer): layer is ValidLayer =>
     Boolean(layer.xAccessor && layer.accessors.length)
@@ -149,8 +153,8 @@ export const buildExpression = (
           layers: validLayers.map((layer) => {
             const columnToLabel: Record<string, string> = {};
 
-            if (frame) {
-              const datasource = frame.datasourceLayers[layer.layerId];
+            if (datasourceLayers) {
+              const datasource = datasourceLayers[layer.layerId];
               layer.accessors
                 .concat(layer.splitAccessor ? [layer.splitAccessor] : [])
                 .forEach((accessor) => {
@@ -162,8 +166,8 @@ export const buildExpression = (
             }
 
             const xAxisOperation =
-              frame &&
-              frame.datasourceLayers[layer.layerId].getOperationForColumnId(layer.xAccessor);
+              datasourceLayers &&
+              datasourceLayers[layer.layerId].getOperationForColumnId(layer.xAccessor);
 
             const isHistogramDimension = Boolean(
               xAxisOperation &&
diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts
index ab689ceb183be..2739ffe42f13f 100644
--- a/x-pack/plugins/lens/public/xy_visualization/types.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/types.ts
@@ -339,7 +339,6 @@ export interface XYState {
 }
 
 export type State = XYState;
-export type PersistableState = XYState;
 
 export const visualizationTypes: VisualizationType[] = [
   {
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts
index 0a8e8bbe0c46f..53f7a23dcae98 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.test.ts
@@ -157,12 +157,6 @@ describe('xy_visualization', () => {
     });
   });
 
-  describe('#getPersistableState', () => {
-    it('persists the state as given', () => {
-      expect(xyVisualization.getPersistableState(exampleState())).toEqual(exampleState());
-    });
-  });
-
   describe('#removeLayer', () => {
     it('removes the specified layer', () => {
       const prevState: State = {
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
index f321e0962caa8..8c551c575764e 100644
--- a/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
+++ b/x-pack/plugins/lens/public/xy_visualization/xy_visualization.tsx
@@ -13,7 +13,7 @@ import { i18n } from '@kbn/i18n';
 import { getSuggestions } from './xy_suggestions';
 import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { Visualization, OperationMetadata, VisualizationType } from '../types';
-import { State, PersistableState, SeriesType, visualizationTypes, LayerConfig } from './types';
+import { State, SeriesType, visualizationTypes, LayerConfig } from './types';
 import chartBarStackedSVG from '../assets/chart_bar_stacked.svg';
 import chartMixedSVG from '../assets/chart_mixed_xy.svg';
 import { isHorizontalChart } from './state_helpers';
@@ -74,7 +74,7 @@ function getDescription(state?: State) {
   };
 }
 
-export const xyVisualization: Visualization<State, PersistableState> = {
+export const xyVisualization: Visualization<State> = {
   id: 'lnsXY',
 
   visualizationTypes,
@@ -159,8 +159,6 @@ export const xyVisualization: Visualization<State, PersistableState> = {
     );
   },
 
-  getPersistableState: (state) => state,
-
   getConfiguration(props) {
     const layer = props.state.layers.find((l) => l.layerId === props.layerId)!;
     return {
diff --git a/x-pack/plugins/lens/server/__snapshots__/migrations.test.ts.snap b/x-pack/plugins/lens/server/__snapshots__/migrations.test.ts.snap
new file mode 100644
index 0000000000000..4979438dbd3d0
--- /dev/null
+++ b/x-pack/plugins/lens/server/__snapshots__/migrations.test.ts.snap
@@ -0,0 +1,188 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Lens migrations 7.10.0 references should produce a valid document 1`] = `
+Object {
+  "attributes": Object {
+    "state": Object {
+      "datasourceStates": Object {
+        "indexpattern": Object {
+          "layers": Object {
+            "3b7791e9-326e-40d5-a787-b7594e48d906": Object {
+              "columnOrder": Array [
+                "77d8383e-f66e-471e-ae50-c427feedb5ba",
+                "a5c1b82d-51de-4448-a99d-6391432c3a03",
+              ],
+              "columns": Object {
+                "77d8383e-f66e-471e-ae50-c427feedb5ba": Object {
+                  "dataType": "string",
+                  "isBucketed": true,
+                  "label": "Top values of geoip.country_iso_code",
+                  "operationType": "terms",
+                  "params": Object {
+                    "orderBy": Object {
+                      "columnId": "a5c1b82d-51de-4448-a99d-6391432c3a03",
+                      "type": "column",
+                    },
+                    "orderDirection": "desc",
+                    "size": 5,
+                  },
+                  "scale": "ordinal",
+                  "sourceField": "geoip.country_iso_code",
+                },
+                "a5c1b82d-51de-4448-a99d-6391432c3a03": Object {
+                  "dataType": "number",
+                  "isBucketed": false,
+                  "label": "Count of records",
+                  "operationType": "count",
+                  "scale": "ratio",
+                  "sourceField": "Records",
+                },
+              },
+            },
+            "9a27f85d-35a9-4246-81b2-48e7ee9b0707": Object {
+              "columnOrder": Array [
+                "96352896-c508-4fca-90d8-66e9ebfce621",
+                "4ce9b4c7-2ebf-4d48-8669-0ea69d973353",
+              ],
+              "columns": Object {
+                "4ce9b4c7-2ebf-4d48-8669-0ea69d973353": Object {
+                  "dataType": "number",
+                  "isBucketed": false,
+                  "label": "Count of records",
+                  "operationType": "count",
+                  "scale": "ratio",
+                  "sourceField": "Records",
+                },
+                "96352896-c508-4fca-90d8-66e9ebfce621": Object {
+                  "dataType": "string",
+                  "isBucketed": true,
+                  "label": "Top values of geo.src",
+                  "operationType": "terms",
+                  "params": Object {
+                    "orderBy": Object {
+                      "columnId": "4ce9b4c7-2ebf-4d48-8669-0ea69d973353",
+                      "type": "column",
+                    },
+                    "orderDirection": "desc",
+                    "size": 5,
+                  },
+                  "scale": "ordinal",
+                  "sourceField": "geo.src",
+                },
+              },
+            },
+          },
+        },
+      },
+      "filters": Array [
+        Object {
+          "$state": Object {
+            "store": "appState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": undefined,
+            "indexRefName": "filter-index-pattern-0",
+            "key": "geo.src",
+            "negate": true,
+            "params": Object {
+              "query": "CN",
+            },
+            "type": "phrase",
+          },
+          "query": Object {
+            "match_phrase": Object {
+              "geo.src": "CN",
+            },
+          },
+        },
+        Object {
+          "$state": Object {
+            "store": "appState",
+          },
+          "meta": Object {
+            "alias": null,
+            "disabled": false,
+            "index": undefined,
+            "indexRefName": "filter-index-pattern-1",
+            "key": "geoip.country_iso_code",
+            "negate": true,
+            "params": Object {
+              "query": "US",
+            },
+            "type": "phrase",
+          },
+          "query": Object {
+            "match_phrase": Object {
+              "geoip.country_iso_code": "US",
+            },
+          },
+        },
+      ],
+      "query": Object {
+        "language": "kuery",
+        "query": "NOT bytes > 5000",
+      },
+      "visualization": Object {
+        "fittingFunction": "None",
+        "layers": Array [
+          Object {
+            "accessors": Array [
+              "4ce9b4c7-2ebf-4d48-8669-0ea69d973353",
+            ],
+            "layerId": "9a27f85d-35a9-4246-81b2-48e7ee9b0707",
+            "position": "top",
+            "seriesType": "bar",
+            "showGridlines": false,
+            "xAccessor": "96352896-c508-4fca-90d8-66e9ebfce621",
+          },
+          Object {
+            "accessors": Array [
+              "a5c1b82d-51de-4448-a99d-6391432c3a03",
+            ],
+            "layerId": "3b7791e9-326e-40d5-a787-b7594e48d906",
+            "seriesType": "bar",
+            "xAccessor": "77d8383e-f66e-471e-ae50-c427feedb5ba",
+          },
+        ],
+        "legend": Object {
+          "isVisible": true,
+          "position": "right",
+        },
+        "preferredSeriesType": "bar",
+      },
+    },
+    "title": "mylens",
+    "visualizationType": "lnsXY",
+  },
+  "references": Array [
+    Object {
+      "id": "ff959d40-b880-11e8-a6d9-e546fe2bba5f",
+      "name": "indexpattern-datasource-current-indexpattern",
+      "type": "index-pattern",
+    },
+    Object {
+      "id": "ff959d40-b880-11e8-a6d9-e546fe2bba5f",
+      "name": "indexpattern-datasource-layer-3b7791e9-326e-40d5-a787-b7594e48d906",
+      "type": "index-pattern",
+    },
+    Object {
+      "id": "90943e30-9a47-11e8-b64d-95841ca0b247",
+      "name": "indexpattern-datasource-layer-9a27f85d-35a9-4246-81b2-48e7ee9b0707",
+      "type": "index-pattern",
+    },
+    Object {
+      "id": "90943e30-9a47-11e8-b64d-95841ca0b247",
+      "name": "filter-index-pattern-0",
+      "type": "index-pattern",
+    },
+    Object {
+      "id": "ff959d40-b880-11e8-a6d9-e546fe2bba5f",
+      "name": "filter-index-pattern-1",
+      "type": "index-pattern",
+    },
+  ],
+  "type": "lens",
+}
+`;
diff --git a/x-pack/plugins/lens/server/migrations.test.ts b/x-pack/plugins/lens/server/migrations.test.ts
index 0541d9636577b..676494dcab619 100644
--- a/x-pack/plugins/lens/server/migrations.test.ts
+++ b/x-pack/plugins/lens/server/migrations.test.ts
@@ -278,4 +278,233 @@ describe('Lens migrations', () => {
       expect(result).toEqual(input);
     });
   });
+
+  describe('7.10.0 references', () => {
+    const context = {} as SavedObjectMigrationContext;
+
+    const example = {
+      attributes: {
+        description: '',
+        expression:
+          'kibana\n| kibana_context  query="{\\"query\\":\\"NOT bytes > 5000\\",\\"language\\":\\"kuery\\"}" \n  filters="[{\\"meta\\":{\\"index\\":\\"90943e30-9a47-11e8-b64d-95841ca0b247\\",\\"alias\\":null,\\"negate\\":true,\\"disabled\\":false,\\"type\\":\\"phrase\\",\\"key\\":\\"geo.src\\",\\"params\\":{\\"query\\":\\"CN\\"}},\\"query\\":{\\"match_phrase\\":{\\"geo.src\\":\\"CN\\"}},\\"$state\\":{\\"store\\":\\"appState\\"}},{\\"meta\\":{\\"index\\":\\"ff959d40-b880-11e8-a6d9-e546fe2bba5f\\",\\"alias\\":null,\\"negate\\":true,\\"disabled\\":false,\\"type\\":\\"phrase\\",\\"key\\":\\"geoip.country_iso_code\\",\\"params\\":{\\"query\\":\\"US\\"}},\\"query\\":{\\"match_phrase\\":{\\"geoip.country_iso_code\\":\\"US\\"}},\\"$state\\":{\\"store\\":\\"appState\\"}}]"\n| lens_merge_tables layerIds="9a27f85d-35a9-4246-81b2-48e7ee9b0707"\n  layerIds="3b7791e9-326e-40d5-a787-b7594e48d906" \n  tables={esaggs index="90943e30-9a47-11e8-b64d-95841ca0b247" metricsAtAllLevels=true partialRows=true includeFormatHints=true  aggConfigs="[{\\"id\\":\\"96352896-c508-4fca-90d8-66e9ebfce621\\",\\"enabled\\":true,\\"type\\":\\"terms\\",\\"schema\\":\\"segment\\",\\"params\\":{\\"field\\":\\"geo.src\\",\\"orderBy\\":\\"4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\",\\"order\\":\\"desc\\",\\"size\\":5,\\"otherBucket\\":false,\\"otherBucketLabel\\":\\"Other\\",\\"missingBucket\\":false,\\"missingBucketLabel\\":\\"Missing\\"}},{\\"id\\":\\"4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\",\\"enabled\\":true,\\"type\\":\\"count\\",\\"schema\\":\\"metric\\",\\"params\\":{}}]" | lens_rename_columns idMap="{\\"col-0-96352896-c508-4fca-90d8-66e9ebfce621\\":{\\"label\\":\\"Top values of geo.src\\",\\"dataType\\":\\"string\\",\\"operationType\\":\\"terms\\",\\"scale\\":\\"ordinal\\",\\"sourceField\\":\\"geo.src\\",\\"isBucketed\\":true,\\"params\\":{\\"size\\":5,\\"orderBy\\":{\\"type\\":\\"column\\",\\"columnId\\":\\"4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\"},\\"orderDirection\\":\\"desc\\"},\\"id\\":\\"96352896-c508-4fca-90d8-66e9ebfce621\\"},\\"col-1-4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\":{\\"label\\":\\"Count of records\\",\\"dataType\\":\\"number\\",\\"operationType\\":\\"count\\",\\"isBucketed\\":false,\\"scale\\":\\"ratio\\",\\"sourceField\\":\\"Records\\",\\"id\\":\\"4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\"}}"}\n  tables={esaggs index="ff959d40-b880-11e8-a6d9-e546fe2bba5f" metricsAtAllLevels=true partialRows=true includeFormatHints=true  aggConfigs="[{\\"id\\":\\"77d8383e-f66e-471e-ae50-c427feedb5ba\\",\\"enabled\\":true,\\"type\\":\\"terms\\",\\"schema\\":\\"segment\\",\\"params\\":{\\"field\\":\\"geoip.country_iso_code\\",\\"orderBy\\":\\"a5c1b82d-51de-4448-a99d-6391432c3a03\\",\\"order\\":\\"desc\\",\\"size\\":5,\\"otherBucket\\":false,\\"otherBucketLabel\\":\\"Other\\",\\"missingBucket\\":false,\\"missingBucketLabel\\":\\"Missing\\"}},{\\"id\\":\\"a5c1b82d-51de-4448-a99d-6391432c3a03\\",\\"enabled\\":true,\\"type\\":\\"count\\",\\"schema\\":\\"metric\\",\\"params\\":{}}]" | lens_rename_columns idMap="{\\"col-0-77d8383e-f66e-471e-ae50-c427feedb5ba\\":{\\"label\\":\\"Top values of geoip.country_iso_code\\",\\"dataType\\":\\"string\\",\\"operationType\\":\\"terms\\",\\"scale\\":\\"ordinal\\",\\"sourceField\\":\\"geoip.country_iso_code\\",\\"isBucketed\\":true,\\"params\\":{\\"size\\":5,\\"orderBy\\":{\\"type\\":\\"column\\",\\"columnId\\":\\"a5c1b82d-51de-4448-a99d-6391432c3a03\\"},\\"orderDirection\\":\\"desc\\"},\\"id\\":\\"77d8383e-f66e-471e-ae50-c427feedb5ba\\"},\\"col-1-a5c1b82d-51de-4448-a99d-6391432c3a03\\":{\\"label\\":\\"Count of records\\",\\"dataType\\":\\"number\\",\\"operationType\\":\\"count\\",\\"isBucketed\\":false,\\"scale\\":\\"ratio\\",\\"sourceField\\":\\"Records\\",\\"id\\":\\"a5c1b82d-51de-4448-a99d-6391432c3a03\\"}}"}\n| lens_xy_chart xTitle="Top values of geo.src" yTitle="Count of records" legend={lens_xy_legendConfig isVisible=true position="right"} fittingFunction="None" \n  layers={lens_xy_layer layerId="9a27f85d-35a9-4246-81b2-48e7ee9b0707" hide=false xAccessor="96352896-c508-4fca-90d8-66e9ebfce621" yScaleType="linear" xScaleType="ordinal" isHistogram=false   seriesType="bar" accessors="4ce9b4c7-2ebf-4d48-8669-0ea69d973353" columnToLabel="{\\"4ce9b4c7-2ebf-4d48-8669-0ea69d973353\\":\\"Count of records\\"}"}\n  layers={lens_xy_layer layerId="3b7791e9-326e-40d5-a787-b7594e48d906" hide=false xAccessor="77d8383e-f66e-471e-ae50-c427feedb5ba" yScaleType="linear" xScaleType="ordinal" isHistogram=false   seriesType="bar" accessors="a5c1b82d-51de-4448-a99d-6391432c3a03" columnToLabel="{\\"a5c1b82d-51de-4448-a99d-6391432c3a03\\":\\"Count of records [1]\\"}"}',
+        state: {
+          datasourceMetaData: {
+            filterableIndexPatterns: [
+              { id: '90943e30-9a47-11e8-b64d-95841ca0b247', title: 'kibana_sample_data_logs' },
+              { id: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f', title: 'kibana_sample_data_ecommerce' },
+            ],
+          },
+          datasourceStates: {
+            indexpattern: {
+              currentIndexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+              layers: {
+                '3b7791e9-326e-40d5-a787-b7594e48d906': {
+                  columnOrder: [
+                    '77d8383e-f66e-471e-ae50-c427feedb5ba',
+                    'a5c1b82d-51de-4448-a99d-6391432c3a03',
+                  ],
+                  columns: {
+                    '77d8383e-f66e-471e-ae50-c427feedb5ba': {
+                      dataType: 'string',
+                      isBucketed: true,
+                      label: 'Top values of geoip.country_iso_code',
+                      operationType: 'terms',
+                      params: {
+                        orderBy: {
+                          columnId: 'a5c1b82d-51de-4448-a99d-6391432c3a03',
+                          type: 'column',
+                        },
+                        orderDirection: 'desc',
+                        size: 5,
+                      },
+                      scale: 'ordinal',
+                      sourceField: 'geoip.country_iso_code',
+                    },
+                    'a5c1b82d-51de-4448-a99d-6391432c3a03': {
+                      dataType: 'number',
+                      isBucketed: false,
+                      label: 'Count of records',
+                      operationType: 'count',
+                      scale: 'ratio',
+                      sourceField: 'Records',
+                    },
+                  },
+                  indexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+                },
+                '9a27f85d-35a9-4246-81b2-48e7ee9b0707': {
+                  columnOrder: [
+                    '96352896-c508-4fca-90d8-66e9ebfce621',
+                    '4ce9b4c7-2ebf-4d48-8669-0ea69d973353',
+                  ],
+                  columns: {
+                    '4ce9b4c7-2ebf-4d48-8669-0ea69d973353': {
+                      dataType: 'number',
+                      isBucketed: false,
+                      label: 'Count of records',
+                      operationType: 'count',
+                      scale: 'ratio',
+                      sourceField: 'Records',
+                    },
+                    '96352896-c508-4fca-90d8-66e9ebfce621': {
+                      dataType: 'string',
+                      isBucketed: true,
+                      label: 'Top values of geo.src',
+                      operationType: 'terms',
+                      params: {
+                        orderBy: {
+                          columnId: '4ce9b4c7-2ebf-4d48-8669-0ea69d973353',
+                          type: 'column',
+                        },
+                        orderDirection: 'desc',
+                        size: 5,
+                      },
+                      scale: 'ordinal',
+                      sourceField: 'geo.src',
+                    },
+                  },
+                  indexPatternId: '90943e30-9a47-11e8-b64d-95841ca0b247',
+                },
+              },
+            },
+          },
+          filters: [
+            {
+              $state: { store: 'appState' },
+              meta: {
+                alias: null,
+                disabled: false,
+                index: '90943e30-9a47-11e8-b64d-95841ca0b247',
+                key: 'geo.src',
+                negate: true,
+                params: { query: 'CN' },
+                type: 'phrase',
+              },
+              query: { match_phrase: { 'geo.src': 'CN' } },
+            },
+            {
+              $state: { store: 'appState' },
+              meta: {
+                alias: null,
+                disabled: false,
+                index: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+                key: 'geoip.country_iso_code',
+                negate: true,
+                params: { query: 'US' },
+                type: 'phrase',
+              },
+              query: { match_phrase: { 'geoip.country_iso_code': 'US' } },
+            },
+          ],
+          query: { language: 'kuery', query: 'NOT bytes > 5000' },
+          visualization: {
+            fittingFunction: 'None',
+            layers: [
+              {
+                accessors: ['4ce9b4c7-2ebf-4d48-8669-0ea69d973353'],
+                layerId: '9a27f85d-35a9-4246-81b2-48e7ee9b0707',
+                position: 'top',
+                seriesType: 'bar',
+                showGridlines: false,
+                xAccessor: '96352896-c508-4fca-90d8-66e9ebfce621',
+              },
+              {
+                accessors: ['a5c1b82d-51de-4448-a99d-6391432c3a03'],
+                layerId: '3b7791e9-326e-40d5-a787-b7594e48d906',
+                seriesType: 'bar',
+                xAccessor: '77d8383e-f66e-471e-ae50-c427feedb5ba',
+              },
+            ],
+            legend: { isVisible: true, position: 'right' },
+            preferredSeriesType: 'bar',
+          },
+        },
+        title: 'mylens',
+        visualizationType: 'lnsXY',
+      },
+      type: 'lens',
+    };
+
+    it('should remove expression', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(result.attributes.expression).toBeUndefined();
+    });
+
+    it('should list references for layers', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(
+        result.references?.find(
+          (ref) => ref.name === 'indexpattern-datasource-layer-3b7791e9-326e-40d5-a787-b7594e48d906'
+        )?.id
+      ).toEqual('ff959d40-b880-11e8-a6d9-e546fe2bba5f');
+      expect(
+        result.references?.find(
+          (ref) => ref.name === 'indexpattern-datasource-layer-9a27f85d-35a9-4246-81b2-48e7ee9b0707'
+        )?.id
+      ).toEqual('90943e30-9a47-11e8-b64d-95841ca0b247');
+    });
+
+    it('should remove index pattern ids from layers', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(
+        result.attributes.state.datasourceStates.indexpattern.layers[
+          '3b7791e9-326e-40d5-a787-b7594e48d906'
+        ].indexPatternId
+      ).toBeUndefined();
+      expect(
+        result.attributes.state.datasourceStates.indexpattern.layers[
+          '9a27f85d-35a9-4246-81b2-48e7ee9b0707'
+        ].indexPatternId
+      ).toBeUndefined();
+    });
+
+    it('should remove datsource meta data', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(result.attributes.state.datasourceMetaData).toBeUndefined();
+    });
+
+    it('should list references for filters', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(result.references?.find((ref) => ref.name === 'filter-index-pattern-0')?.id).toEqual(
+        '90943e30-9a47-11e8-b64d-95841ca0b247'
+      );
+      expect(result.references?.find((ref) => ref.name === 'filter-index-pattern-1')?.id).toEqual(
+        'ff959d40-b880-11e8-a6d9-e546fe2bba5f'
+      );
+    });
+
+    it('should remove index pattern ids from filters', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(result.attributes.state.filters[0].meta.index).toBeUndefined();
+      expect(result.attributes.state.filters[0].meta.indexRefName).toEqual(
+        'filter-index-pattern-0'
+      );
+      expect(result.attributes.state.filters[1].meta.index).toBeUndefined();
+      expect(result.attributes.state.filters[1].meta.indexRefName).toEqual(
+        'filter-index-pattern-1'
+      );
+    });
+
+    it('should list reference for current index pattern', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(
+        result.references?.find(
+          (ref) => ref.name === 'indexpattern-datasource-current-indexpattern'
+        )?.id
+      ).toEqual('ff959d40-b880-11e8-a6d9-e546fe2bba5f');
+    });
+
+    it('should remove current index pattern id from datasource state', () => {
+      const result = migrations['7.10.0'](example, context);
+      expect(
+        result.attributes.state.datasourceStates.indexpattern.currentIndexPatternId
+      ).toBeUndefined();
+    });
+
+    it('should produce a valid document', () => {
+      const result = migrations['7.10.0'](example, context);
+      // changes to the outcome of this are critical - this test is a safe guard to not introduce changes accidentally
+      // if this test fails, make extra sure it's expected
+      expect(result).toMatchSnapshot();
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/server/migrations.ts b/x-pack/plugins/lens/server/migrations.ts
index d24a3e92cbd9c..fdbfa1e455f60 100644
--- a/x-pack/plugins/lens/server/migrations.ts
+++ b/x-pack/plugins/lens/server/migrations.ts
@@ -6,11 +6,16 @@
 
 import { cloneDeep } from 'lodash';
 import { fromExpression, toExpression, Ast, ExpressionFunctionAST } from '@kbn/interpreter/common';
-import { SavedObjectMigrationMap, SavedObjectMigrationFn } from 'src/core/server';
+import {
+  SavedObjectMigrationMap,
+  SavedObjectMigrationFn,
+  SavedObjectReference,
+  SavedObjectUnsanitizedDoc,
+} from 'src/core/server';
+import { Query, Filter } from 'src/plugins/data/public';
+import { PersistableFilter } from '../common';
 
-interface LensDocShape<VisualizationState = unknown> {
-  id?: string;
-  type?: string;
+interface LensDocShapePre710<VisualizationState = unknown> {
   visualizationType: string | null;
   title: string;
   expression: string | null;
@@ -21,18 +26,44 @@ interface LensDocShape<VisualizationState = unknown> {
     datasourceStates: {
       // This is hardcoded as our only datasource
       indexpattern: {
+        currentIndexPatternId: string;
         layers: Record<
           string,
           {
             columnOrder: string[];
             columns: Record<string, unknown>;
+            indexPatternId: string;
           }
         >;
       };
     };
     visualization: VisualizationState;
-    query: unknown;
-    filters: unknown[];
+    query: Query;
+    filters: Filter[];
+  };
+}
+
+interface LensDocShape<VisualizationState = unknown> {
+  id?: string;
+  type?: string;
+  visualizationType: string | null;
+  title: string;
+  state: {
+    datasourceStates: {
+      // This is hardcoded as our only datasource
+      indexpattern: {
+        layers: Record<
+          string,
+          {
+            columnOrder: string[];
+            columns: Record<string, unknown>;
+          }
+        >;
+      };
+    };
+    visualization: VisualizationState;
+    query: Query;
+    filters: PersistableFilter[];
   };
 }
 
@@ -55,7 +86,10 @@ interface XYStatePost77 {
  * Removes the `lens_auto_date` subexpression from a stored expression
  * string. For example: aggConfigs={lens_auto_date aggConfigs="JSON string"}
  */
-const removeLensAutoDate: SavedObjectMigrationFn<LensDocShape, LensDocShape> = (doc, context) => {
+const removeLensAutoDate: SavedObjectMigrationFn<LensDocShapePre710, LensDocShapePre710> = (
+  doc,
+  context
+) => {
   const expression = doc.attributes.expression;
   if (!expression) {
     return doc;
@@ -112,7 +146,10 @@ const removeLensAutoDate: SavedObjectMigrationFn<LensDocShape, LensDocShape> = (
 /**
  * Adds missing timeField arguments to esaggs in the Lens expression
  */
-const addTimeFieldToEsaggs: SavedObjectMigrationFn<LensDocShape, LensDocShape> = (doc, context) => {
+const addTimeFieldToEsaggs: SavedObjectMigrationFn<LensDocShapePre710, LensDocShapePre710> = (
+  doc,
+  context
+) => {
   const expression = doc.attributes.expression;
   if (!expression) {
     return doc;
@@ -174,14 +211,14 @@ const addTimeFieldToEsaggs: SavedObjectMigrationFn<LensDocShape, LensDocShape> =
 };
 
 const removeInvalidAccessors: SavedObjectMigrationFn<
-  LensDocShape<XYStatePre77>,
-  LensDocShape<XYStatePost77>
+  LensDocShapePre710<XYStatePre77>,
+  LensDocShapePre710<XYStatePost77>
 > = (doc) => {
   const newDoc = cloneDeep(doc);
   if (newDoc.attributes.visualizationType === 'lnsXY') {
     const datasourceLayers = newDoc.attributes.state.datasourceStates.indexpattern.layers || {};
     const xyState = newDoc.attributes.state.visualization;
-    (newDoc.attributes as LensDocShape<
+    (newDoc.attributes as LensDocShapePre710<
       XYStatePost77
     >).state.visualization.layers = xyState.layers.map((layer: XYLayerPre77) => {
       const layerId = layer.layerId;
@@ -197,9 +234,86 @@ const removeInvalidAccessors: SavedObjectMigrationFn<
   return newDoc;
 };
 
+const extractReferences: SavedObjectMigrationFn<LensDocShapePre710, LensDocShape> = ({
+  attributes,
+  references,
+  ...docMeta
+}) => {
+  const savedObjectReferences: SavedObjectReference[] = [];
+  // add currently selected index pattern to reference list
+  savedObjectReferences.push({
+    type: 'index-pattern',
+    id: attributes.state.datasourceStates.indexpattern.currentIndexPatternId,
+    name: 'indexpattern-datasource-current-indexpattern',
+  });
+
+  // add layer index patterns to list and remove index pattern ids from layers
+  const persistableLayers: Record<
+    string,
+    Omit<
+      LensDocShapePre710['state']['datasourceStates']['indexpattern']['layers'][string],
+      'indexPatternId'
+    >
+  > = {};
+  Object.entries(attributes.state.datasourceStates.indexpattern.layers).forEach(
+    ([layerId, { indexPatternId, ...persistableLayer }]) => {
+      savedObjectReferences.push({
+        type: 'index-pattern',
+        id: indexPatternId,
+        name: `indexpattern-datasource-layer-${layerId}`,
+      });
+      persistableLayers[layerId] = persistableLayer;
+    }
+  );
+
+  // add filter index patterns to reference list and remove index pattern ids from filter definitions
+  const persistableFilters = attributes.state.filters.map((filterRow, i) => {
+    if (!filterRow.meta || !filterRow.meta.index) {
+      return filterRow;
+    }
+    const refName = `filter-index-pattern-${i}`;
+    savedObjectReferences.push({
+      name: refName,
+      type: 'index-pattern',
+      id: filterRow.meta.index,
+    });
+    return {
+      ...filterRow,
+      meta: {
+        ...filterRow.meta,
+        indexRefName: refName,
+        index: undefined,
+      },
+    };
+  });
+
+  // put together new saved object format
+  const newDoc: SavedObjectUnsanitizedDoc<LensDocShape> = {
+    ...docMeta,
+    references: savedObjectReferences,
+    attributes: {
+      visualizationType: attributes.visualizationType,
+      title: attributes.title,
+      state: {
+        datasourceStates: {
+          indexpattern: {
+            layers: persistableLayers,
+          },
+        },
+        visualization: attributes.state.visualization,
+        query: attributes.state.query,
+        filters: persistableFilters,
+      },
+    },
+  };
+
+  return newDoc;
+};
+
 export const migrations: SavedObjectMigrationMap = {
   '7.7.0': removeInvalidAccessors,
   // The order of these migrations matter, since the timefield migration relies on the aggConfigs
   // sitting directly on the esaggs as an argument and not a nested function (which lens_auto_date was).
   '7.8.0': (doc, context) => addTimeFieldToEsaggs(removeLensAutoDate(doc, context), context),
+  '7.10.0': extractReferences,
 };

From 3031e668060ad56124a0f191f1c03cea71532697 Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Fri, 21 Aug 2020 09:16:17 -0700
Subject: [PATCH 08/25] Update datasets UI copy to data streams (#75618)

---
 x-pack/plugins/ingest_manager/dev_docs/definitions.md  |  6 +++---
 .../ingest_manager/constants/page_paths.ts             |  4 ++--
 .../ingest_manager/hooks/use_breadcrumbs.tsx           |  2 +-
 .../applications/ingest_manager/layouts/default.tsx    |  2 +-
 .../sections/data_stream/list_page/index.tsx           | 10 +++++-----
 .../standalone_instructions.tsx                        |  2 +-
 .../overview/components/datastream_section.tsx         |  8 ++++----
 .../public/applications/ingest_manager/types/index.ts  |  2 +-
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/x-pack/plugins/ingest_manager/dev_docs/definitions.md b/x-pack/plugins/ingest_manager/dev_docs/definitions.md
index be5aeb923e903..d9ff597c5e84b 100644
--- a/x-pack/plugins/ingest_manager/dev_docs/definitions.md
+++ b/x-pack/plugins/ingest_manager/dev_docs/definitions.md
@@ -13,9 +13,9 @@ definitions for one or multiple inputs and each input can contain one or multipl
 With the example of the nginx Package policy, it contains two inputs: `logs` and `nginx/metrics`. Logs and metrics are collected
 differently. The `logs` input contains two streams, `access` and `error`, the `nginx/metrics` input contains the stubstatus stream.
 
-## Data Stream
+## Data stream
 
-Data Streams are a [new concept](https://github.com/elastic/elasticsearch/issues/53100) in Elasticsearch which simplify
+Data streams are a [new concept](https://github.com/elastic/elasticsearch/issues/53100) in Elasticsearch which simplify
 ingesting data and the setup of Elasticsearch.
 
 ## Elastic Agent
@@ -35,7 +35,7 @@ Fleet is the part of the Ingest Manager UI in Kibana that handles the part of en
 
 Ingest Management + Elastic Agent follow a strict new indexing strategy: `{type}-{dataset}-{namespace}`. An example
 for this is `logs-nginx.access-default`. More details about it can be found in the Index Strategy below. All data of
-the index strategy is sent to Data Streams.
+the index strategy is sent to data streams.
 
 ## Input
 
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts
index 4a8dcfedc0936..c370f46b9f5a0 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/constants/page_paths.ts
@@ -53,7 +53,7 @@ export const PAGE_ROUTING_PATHS = {
   fleet_agent_details_events: '/fleet/agents/:agentId',
   fleet_agent_details_details: '/fleet/agents/:agentId/details',
   fleet_enrollment_tokens: '/fleet/enrollment-tokens',
-  data_streams: '/datasets',
+  data_streams: '/data-streams',
 };
 
 export const pagePathGetters: {
@@ -80,5 +80,5 @@ export const pagePathGetters: {
   fleet_agent_details: ({ agentId, tabId }) =>
     `/fleet/agents/${agentId}${tabId ? `/${tabId}` : ''}`,
   fleet_enrollment_tokens: () => '/fleet/enrollment-tokens',
-  data_streams: () => '/datasets',
+  data_streams: () => '/data-streams',
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx
index 6ef1351dc5b60..1d80495d2b347 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/hooks/use_breadcrumbs.tsx
@@ -207,7 +207,7 @@ const breadcrumbGetters: {
     BASE_BREADCRUMB,
     {
       text: i18n.translate('xpack.ingestManager.breadcrumbs.datastreamsPageTitle', {
-        defaultMessage: 'Datasets',
+        defaultMessage: 'Data streams',
       }),
     },
   ],
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
index 726da7a790b97..30294779d1a3d 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
@@ -96,7 +96,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
                   <EuiTab isSelected={section === 'data_stream'} href={getHref('data_streams')}>
                     <FormattedMessage
                       id="xpack.ingestManager.appNavigation.dataStreamsLinkText"
-                      defaultMessage="Datasets"
+                      defaultMessage="Data streams"
                     />
                   </EuiTab>
                 </EuiTabs>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx
index d8ab46fbf87f7..53fd6a713b523 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/data_stream/list_page/index.tsx
@@ -32,7 +32,7 @@ const DataStreamListPageLayout: React.FunctionComponent = ({ children }) => (
             <h1>
               <FormattedMessage
                 id="xpack.ingestManager.dataStreamList.pageTitle"
-                defaultMessage="Datasets"
+                defaultMessage="Data streams"
               />
             </h1>
           </EuiText>
@@ -173,7 +173,7 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
           <h2>
             <FormattedMessage
               id="xpack.ingestManager.dataStreamList.noDataStreamsPrompt"
-              defaultMessage="No datasets"
+              defaultMessage="No data streams"
             />
           </h2>
         }
@@ -216,14 +216,14 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
           isLoading ? (
             <FormattedMessage
               id="xpack.ingestManager.dataStreamList.loadingDataStreamsMessage"
-              defaultMessage="Loading datasets…"
+              defaultMessage="Loading data streams…"
             />
           ) : dataStreamsData && !dataStreamsData.data_streams.length ? (
             emptyPrompt
           ) : (
             <FormattedMessage
               id="xpack.ingestManager.dataStreamList.noFilteredDataStreamsMessage"
-              defaultMessage="No matching datasets found"
+              defaultMessage="No matching data streams found"
             />
           )
         }
@@ -253,7 +253,7 @@ export const DataStreamListPage: React.FunctionComponent<{}> = () => {
             placeholder: i18n.translate(
               'xpack.ingestManager.dataStreamList.searchPlaceholderTitle',
               {
-                defaultMessage: 'Filter datasets',
+                defaultMessage: 'Filter data streams',
               }
             ),
             incremental: true,
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/standalone_instructions.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/standalone_instructions.tsx
index abe834e7db19c..049ceca82b309 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/standalone_instructions.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/components/agent_enrollment_flyout/standalone_instructions.tsx
@@ -157,7 +157,7 @@ export const StandaloneInstructions: React.FunctionComponent<Props> = ({ agentPo
           <EuiText>
             <FormattedMessage
               id="xpack.ingestManager.agentEnrollment.stepCheckForDataDescription"
-              defaultMessage="The agent should begin sending data. Go to Datasets to view your data."
+              defaultMessage="The agent should begin sending data. Go to data streams to view your data."
             />
           </EuiText>
         </>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
index 41c011de2da5c..bece6ec074b88 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/components/datastream_section.tsx
@@ -47,14 +47,14 @@ export const OverviewDatastreamSection: React.FC = () => {
     <EuiFlexItem component="section">
       <OverviewPanel
         title={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelTitle', {
-          defaultMessage: 'Datasets',
+          defaultMessage: 'Data streams',
         })}
         tooltip={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelTooltip', {
-          defaultMessage: 'Data that your agents collect are organized into various datasets.',
+          defaultMessage: 'Data that your agents collect are organized into various data streams.',
         })}
         linkTo={getHref('data_streams')}
         linkToText={i18n.translate('xpack.ingestManager.overviewPageDataStreamsPanelAction', {
-          defaultMessage: 'View datasets',
+          defaultMessage: 'View data streams',
         })}
       >
         <OverviewStats>
@@ -65,7 +65,7 @@ export const OverviewDatastreamSection: React.FC = () => {
               <EuiDescriptionListTitle>
                 <FormattedMessage
                   id="xpack.ingestManager.overviewDatastreamTotalTitle"
-                  defaultMessage="Datasets"
+                  defaultMessage="Data streams"
                 />
               </EuiDescriptionListTitle>
               <EuiDescriptionListDescription>
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
index 80e27b7c4d0bf..30a6742af6ea6 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/types/index.ts
@@ -43,7 +43,7 @@ export {
   CreatePackagePolicyResponse,
   UpdatePackagePolicyRequest,
   UpdatePackagePolicyResponse,
-  // API schemas - Data Streams
+  // API schemas - Data streams
   GetDataStreamsResponse,
   // API schemas - Agents
   GetAgentsResponse,

From 82e30f6effdecbc8d9c6a7d4a5f53fb267b60541 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 21 Aug 2020 10:48:04 -0600
Subject: [PATCH 09/25] Upgrade EUI to v27.4.1 (#75240)

* eui to 27.4.1

* src snapshot updates

* x-pack snapshot updates

* remove increased default timeout

* revert date change

* delete default_timeout file

* reinstate storyshot

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 package.json                                  |    2 +-
 packages/kbn-ui-shared-deps/package.json      |    2 +-
 .../collapsible_nav.test.tsx.snap             | 7748 +++++------------
 .../header/__snapshots__/header.test.tsx.snap | 1281 ++-
 .../flyout_service.test.tsx.snap              |    4 +-
 .../__snapshots__/modal_service.test.tsx.snap |    6 +-
 src/dev/jest/config.js                        |    1 -
 src/dev/jest/setup/default_timeout.js         |   25 -
 .../__snapshots__/new_vis_modal.test.tsx.snap | 5080 +++--------
 .../plugins/kbn_tp_run_pipeline/package.json  |    2 +-
 .../kbn_sample_panel_action/package.json      |    2 +-
 .../kbn_tp_custom_visualizations/package.json |    2 +-
 x-pack/dev-tools/jest/create_jest_config.js   |    1 -
 x-pack/package.json                           |    2 +-
 .../TransactionActionMenu.test.tsx.snap       |    5 +-
 .../asset_manager.stories.storyshot           | 1052 +--
 .../custom_element_modal.stories.storyshot    | 1888 ++--
 .../keyboard_shortcuts_doc.stories.storyshot  | 2207 +++--
 .../saved_elements_modal.stories.storyshot    | 1362 ++-
 .../__snapshots__/settings.test.tsx.snap      |  898 +-
 .../upload_license.test.tsx.snap              |  989 +--
 .../report_info_button.test.tsx.snap          | 1236 +--
 .../helpers/home.helpers.ts                   |    2 +-
 .../__snapshots__/ml_flyout.test.tsx.snap     |  261 +-
 yarn.lock                                     |    8 +-
 25 files changed, 7978 insertions(+), 16088 deletions(-)
 delete mode 100644 src/dev/jest/setup/default_timeout.js

diff --git a/package.json b/package.json
index 23fc31f369b8d..46418e52d8548 100644
--- a/package.json
+++ b/package.json
@@ -128,7 +128,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",
diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
index a37281cb2263f..531513481b1d4 100644
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.8.1",
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",
diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
index 72d62730fa698..2cfe232bf5653 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
@@ -378,9 +378,7 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       <Portal
         containerInfo={
           <div
-            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
-            data-aria-hidden="true"
           />
         }
       />
@@ -389,4572 +387,1606 @@ exports[`CollapsibleNav renders links grouped by category 1`] = `
       clickOutsideDisables={true}
       disabled={false}
     >
-      <EuiOutsideClickDetector
-        isDisabled={false}
-        onOutsideClick={[Function]}
+      <div
+        data-eui="EuiFocusTrap"
       >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <nav
+          aria-label="Primary"
+          className="euiCollapsibleNav"
+          data-test-subj="collapsibleNav"
+          id="collapsibe-nav"
         >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "flexShrink": 0,
+              }
+            }
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
             >
-              <ForwardRef
-                enabled={true}
-                noIsolation={true}
-                returnFocus={true}
-                scrollLock={false}
-                sideCar={[Function]}
-              >
-                <ForwardRef
-                  as={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "classNames": Object {
-                        "fullWidth": "width-before-scroll-bar",
-                        "zeroRight": "right-scroll-bar-position",
-                      },
-                      "defaultProps": Object {
-                        "enabled": true,
-                        "inert": false,
-                        "removeScrollBar": true,
-                      },
-                      "render": [Function],
-                    }
+              <EuiCollapsibleNavGroup
+                background="light"
+                className="eui-yScroll"
+                style={
+                  Object {
+                    "maxHeight": "40vh",
                   }
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={false}
-                  lockProps={
+                }
+              >
+                <div
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                  id="mockId"
+                  style={
                     Object {
-                      "allowPinchZoom": undefined,
-                      "enabled": false,
-                      "inert": undefined,
-                      "onMouseDown": [Function],
-                      "onTouchStart": [Function],
-                      "shards": undefined,
-                      "sideCar": [Function],
+                      "maxHeight": "40vh",
                     }
                   }
-                  noFocusGuards={false}
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={true}
-                  sideCar={[Function]}
                 >
                   <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
-                  />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
+                    className="euiCollapsibleNavGroup__children"
+                  >
+                    <EuiListGroup
+                      color="text"
+                      gutterSize="none"
+                      listItems={
+                        Array [
+                          Object {
+                            "data-test-subj": "collapsibleNavCustomNavLink",
+                            "href": "Custom link",
+                            "icon": undefined,
+                            "iconType": undefined,
+                            "isActive": false,
+                            "isDisabled": undefined,
+                            "label": "Custom link",
+                            "onClick": [Function],
+                          },
+                        ]
                       }
-                    }
-                    tabIndex={1}
-                  />
-                  <RequireSideCar
-                    autoFocus={true}
-                    crossFrame={true}
-                    disabled={false}
-                    id={Object {}}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="false"
+                      maxWidth="none"
+                      size="s"
+                    >
+                      <ul
+                        className="euiListGroup"
+                        style={
+                          Object {
+                            "maxWidth": "none",
+                          }
+                        }
                       >
-                        <nav
-                          aria-label="Primary"
-                          class="euiCollapsibleNav"
-                          data-test-subj="collapsibleNav"
-                          id="collapsibe-nav"
+                        <EuiListGroupItem
+                          color="text"
+                          data-test-subj="collapsibleNavCustomNavLink"
+                          href="Custom link"
+                          isActive={false}
+                          key="title-0"
+                          label="Custom link"
+                          onClick={[Function]}
+                          showToolTip={false}
+                          size="s"
+                          wrapText={false}
                         >
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                            style="flex-shrink: 0;"
-                          >
-                            <div
-                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
-                              style="max-height: 40vh;"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup__children"
-                              >
-                                <ul
-                                  class="euiListGroup"
-                                  style="max-width: none;"
-                                >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavCustomNavLink"
-                                      href="Custom link"
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Custom link"
-                                      >
-                                        Custom link
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                          <hr
-                            class="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                          <div
-                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                            style="flex-shrink: 0;"
-                          >
-                            <div
-                              class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                              id="mockId"
-                              style="max-height: 40vh;"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup__children"
-                              >
-                                <ul
-                                  aria-label="Pinned links"
-                                  class="euiListGroup"
-                                  style="max-width: none;"
-                                >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      href="/"
-                                      rel="noreferrer"
-                                    >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="home"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Home"
-                                      >
-                                        Home
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                          <div
-                            class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          >
-                            <div
-                              class="euiAccordion__triggerWrapper"
-                            >
-                              <button
-                                aria-controls="mockId"
-                                aria-expanded="true"
-                                class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                type="button"
-                              >
-                                <span
-                                  class="euiAccordion__iconWrapper"
-                                >
-                                  <div
-                                    class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                    data-euiicon-type="arrowRight"
-                                  />
-                                </span>
-                                <span
-                                  class="euiIEFlexWrapFix"
-                                >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                  >
-                                    <div
-                                      class="euiFlexItem"
-                                    >
-                                      <h3
-                                        class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                        id="mockId__title"
-                                      >
-                                        Recently viewed
-                                      </h3>
-                                    </div>
-                                  </div>
-                                </span>
-                              </button>
-                            </div>
-                            <div
-                              class="euiAccordion__childWrapper"
-                              id="mockId"
-                            >
-                              <div>
-                                <div
-                                  class=""
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      aria-label="Recently viewed links"
-                                      class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                      style="max-width: none;"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          aria-label="recent 1"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink--recent"
-                                          href="http://localhost/recent%201"
-                                          rel="noreferrer"
-                                          title="recent 1"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="recent 1"
-                                          >
-                                            recent 1
-                                          </span>
-                                        </a>
-                                      </li>
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          aria-label="recent 2"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink--recent"
-                                          href="http://localhost/recent%202"
-                                          rel="noreferrer"
-                                          title="recent 2"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="recent 2"
-                                          >
-                                            recent 2
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                          <hr
-                            class="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                          <div
-                            class="euiFlexItem eui-yScroll"
-                          >
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-kibana"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                                      >
-                                        <div
-                                          data-euiicon-type="logoKibana"
-                                        />
-                                      </div>
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Kibana
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Primary navigation links, Kibana"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="discover"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="discover"
-                                            >
-                                              discover
-                                            </span>
-                                          </a>
-                                        </li>
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="visualize"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="visualize"
-                                            >
-                                              visualize
-                                            </span>
-                                          </a>
-                                        </li>
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="dashboard"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="dashboard"
-                                            >
-                                              dashboard
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-observability"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                                      >
-                                        <div
-                                          data-euiicon-type="logoObservability"
-                                        />
-                                      </div>
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Observability
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Primary navigation links, Observability"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="metrics"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="metrics"
-                                            >
-                                              metrics
-                                            </span>
-                                          </a>
-                                        </li>
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="logs"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="logs"
-                                            >
-                                              logs
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-security"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                                      >
-                                        <div
-                                          data-euiicon-type="logoSecurity"
-                                        />
-                                      </div>
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Security
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Primary navigation links, Security"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="siem"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="siem"
-                                            >
-                                              siem
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-management"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Management
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Primary navigation links, Management"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="monitoring"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="monitoring"
-                                            >
-                                              monitoring
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiCollapsibleNavGroup"
-                              data-test-subj="collapsibleNavGroup-noCategory"
-                              id="mockId"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup__children"
-                              >
-                                <ul
-                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                  >
-                                    <a
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsibleNavAppLink"
-                                      href="canvas"
-                                      rel="noreferrer"
-                                    >
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="canvas"
-                                      >
-                                        canvas
-                                      </span>
-                                    </a>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                            <div
-                              class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                              id="mockId"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup__children"
-                              >
-                                <ul
-                                  class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                >
-                                  <li
-                                    class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                  >
-                                    <button
-                                      aria-label="Dock primary navigation"
-                                      class="euiListGroupItem__button"
-                                      data-test-subj="collapsible-nav-lock"
-                                      type="button"
-                                    >
-                                      <div
-                                        class="euiListGroupItem__icon"
-                                        data-euiicon-type="lockOpen"
-                                      />
-                                      <span
-                                        class="euiListGroupItem__label"
-                                        title="Dock navigation"
-                                      >
-                                        Dock navigation
-                                      </span>
-                                    </button>
-                                  </li>
-                                </ul>
-                              </div>
-                            </div>
-                          </div>
-                          <button
-                            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            type="button"
+                          <li
+                            className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                           >
-                            <span
-                              class="euiButtonContent euiButtonEmpty__content"
+                            <a
+                              className="euiListGroupItem__button"
+                              data-test-subj="collapsibleNavCustomNavLink"
+                              href="Custom link"
+                              onClick={[Function]}
+                              rel="noreferrer"
                             >
-                              <div
-                                class="euiButtonContent__icon"
-                                data-euiicon-type="cross"
-                              />
                               <span
-                                class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                                className="euiListGroupItem__label"
+                                title="Custom link"
                               >
-                                close
+                                Custom link
                               </span>
-                            </span>
-                          </button>
-                        </nav>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                    returnFocus={[Function]}
-                    shards={Array []}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
+                            </a>
+                          </li>
+                        </EuiListGroupItem>
+                      </ul>
+                    </EuiListGroup>
+                  </div>
+                </div>
+              </EuiCollapsibleNavGroup>
+            </div>
+          </EuiFlexItem>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "flexShrink": 0,
+              }
+            }
+          >
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
+            >
+              <EuiCollapsibleNavGroup
+                background="light"
+                className="eui-yScroll"
+                style={
+                  Object {
+                    "maxHeight": "40vh",
+                  }
+                }
+              >
+                <div
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                  id="mockId"
+                  style={
+                    Object {
+                      "maxHeight": "40vh",
                     }
+                  }
+                >
+                  <div
+                    className="euiCollapsibleNavGroup__children"
                   >
-                    <SideCar
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={false}
-                      id={Object {}}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="false"
+                    <EuiListGroup
+                      aria-label="Pinned links"
+                      color="text"
+                      gutterSize="none"
+                      listItems={
+                        Array [
+                          Object {
+                            "href": "/",
+                            "iconType": "home",
+                            "label": "Home",
+                            "onClick": [Function],
+                          },
+                        ]
+                      }
+                      maxWidth="none"
+                      size="s"
+                    >
+                      <ul
+                        aria-label="Pinned links"
+                        className="euiListGroup"
+                        style={
+                          Object {
+                            "maxWidth": "none",
+                          }
+                        }
+                      >
+                        <EuiListGroupItem
+                          color="text"
+                          href="/"
+                          iconType="home"
+                          key="title-0"
+                          label="Home"
+                          onClick={[Function]}
+                          showToolTip={false}
+                          size="s"
+                          wrapText={false}
                         >
-                          <nav
-                            aria-label="Primary"
-                            class="euiCollapsibleNav"
-                            data-test-subj="collapsibleNav"
-                            id="collapsibe-nav"
+                          <li
+                            className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                           >
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                              style="flex-shrink: 0;"
+                            <a
+                              className="euiListGroupItem__button"
+                              href="/"
+                              onClick={[Function]}
+                              rel="noreferrer"
                             >
-                              <div
-                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style="max-height: 40vh;"
+                              <EuiIcon
+                                className="euiListGroupItem__icon"
+                                type="home"
                               >
                                 <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup"
-                                    style="max-width: none;"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <a
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavCustomNavLink"
-                                        href="Custom link"
-                                        rel="noreferrer"
-                                      >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Custom link"
-                                        >
-                                          Custom link
-                                        </span>
-                                      </a>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <hr
-                              class="euiHorizontalRule euiHorizontalRule--full"
-                            />
-                            <div
-                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                              style="flex-shrink: 0;"
-                            >
-                              <div
-                                class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style="max-height: 40vh;"
+                                  className="euiListGroupItem__icon"
+                                  data-euiicon-type="home"
+                                />
+                              </EuiIcon>
+                              <span
+                                className="euiListGroupItem__label"
+                                title="Home"
                               >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    aria-label="Pinned links"
-                                    class="euiListGroup"
-                                    style="max-width: none;"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <a
-                                        class="euiListGroupItem__button"
-                                        href="/"
-                                        rel="noreferrer"
-                                      >
-                                        <div
-                                          class="euiListGroupItem__icon"
-                                          data-euiicon-type="home"
-                                        />
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Home"
-                                        >
-                                          Home
-                                        </span>
-                                      </a>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            >
-                              <div
-                                class="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded="true"
-                                  class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiAccordion__iconWrapper"
-                                  >
-                                    <div
-                                      class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      data-euiicon-type="arrowRight"
-                                    />
-                                  </span>
-                                  <span
-                                    class="euiIEFlexWrapFix"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                    >
-                                      <div
-                                        class="euiFlexItem"
-                                      >
-                                        <h3
-                                          class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Recently viewed
-                                        </h3>
-                                      </div>
-                                    </div>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <div>
-                                  <div
-                                    class=""
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Recently viewed links"
-                                        class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            aria-label="recent 1"
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/recent%201"
-                                            rel="noreferrer"
-                                            title="recent 1"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="recent 1"
-                                            >
-                                              recent 1
-                                            </span>
-                                          </a>
-                                        </li>
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            aria-label="recent 2"
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink--recent"
-                                            href="http://localhost/recent%202"
-                                            rel="noreferrer"
-                                            title="recent 2"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="recent 2"
-                                            >
-                                              recent 2
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                            <hr
-                              class="euiHorizontalRule euiHorizontalRule--full"
-                            />
-                            <div
-                              class="euiFlexItem eui-yScroll"
-                            >
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-kibana"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                                        >
-                                          <div
-                                            data-euiicon-type="logoKibana"
-                                          />
-                                        </div>
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Kibana
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Primary navigation links, Kibana"
-                                          class="euiListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="discover"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="discover"
-                                              >
-                                                discover
-                                              </span>
-                                            </a>
-                                          </li>
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="visualize"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="visualize"
-                                              >
-                                                visualize
-                                              </span>
-                                            </a>
-                                          </li>
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="dashboard"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="dashboard"
-                                              >
-                                                dashboard
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-observability"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                                        >
-                                          <div
-                                            data-euiicon-type="logoObservability"
-                                          />
-                                        </div>
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Observability
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Primary navigation links, Observability"
-                                          class="euiListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="metrics"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="metrics"
-                                              >
-                                                metrics
-                                              </span>
-                                            </a>
-                                          </li>
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="logs"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="logs"
-                                              >
-                                                logs
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-security"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrowZero"
-                                        >
-                                          <div
-                                            data-euiicon-type="logoSecurity"
-                                          />
-                                        </div>
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Security
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Primary navigation links, Security"
-                                          class="euiListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="siem"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="siem"
-                                              >
-                                                siem
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-management"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Management
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Primary navigation links, Management"
-                                          class="euiListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink"
-                                              href="monitoring"
-                                              rel="noreferrer"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="monitoring"
-                                              >
-                                                monitoring
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiCollapsibleNavGroup"
-                                data-test-subj="collapsibleNavGroup-noCategory"
-                                id="mockId"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                    >
-                                      <a
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsibleNavAppLink"
-                                        href="canvas"
-                                        rel="noreferrer"
-                                      >
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="canvas"
-                                        >
-                                          canvas
-                                        </span>
-                                      </a>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                              <div
-                                class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                id="mockId"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup__children"
-                                >
-                                  <ul
-                                    class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                  >
-                                    <li
-                                      class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                    >
-                                      <button
-                                        aria-label="Dock primary navigation"
-                                        class="euiListGroupItem__button"
-                                        data-test-subj="collapsible-nav-lock"
-                                        type="button"
-                                      >
-                                        <div
-                                          class="euiListGroupItem__icon"
-                                          data-euiicon-type="lockOpen"
-                                        />
-                                        <span
-                                          class="euiListGroupItem__label"
-                                          title="Dock navigation"
-                                        >
-                                          Dock navigation
-                                        </span>
-                                      </button>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </div>
-                            </div>
-                            <button
-                              class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                              type="button"
-                            >
-                              <span
-                                class="euiButtonContent euiButtonEmpty__content"
-                              >
-                                <div
-                                  class="euiButtonContent__icon"
-                                  data-euiicon-type="cross"
-                                />
-                                <span
-                                  class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                >
-                                  close
-                                </span>
+                                Home
                               </span>
-                            </button>
-                          </nav>
-                        </div>
-                      }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
-                      persistentFocus={false}
-                      returnFocus={[Function]}
-                      shards={Array []}
-                      sideCar={
-                        Object {
-                          "assignMedium": [Function],
-                          "assignSyncMedium": [Function],
-                          "options": Object {
-                            "async": true,
-                            "ssr": false,
-                          },
-                          "read": [Function],
-                          "useMedium": [Function],
-                        }
-                      }
+                            </a>
+                          </li>
+                        </EuiListGroupItem>
+                      </ul>
+                    </EuiListGroup>
+                  </div>
+                </div>
+              </EuiCollapsibleNavGroup>
+            </div>
+          </EuiFlexItem>
+          <EuiCollapsibleNavGroup
+            background="light"
+            data-test-subj="collapsibleNavGroup-recentlyViewed"
+            initialIsOpen={true}
+            isCollapsible={true}
+            key="recentlyViewed"
+            onToggle={[Function]}
+            title="Recently viewed"
+          >
+            <EuiAccordion
+              arrowDisplay="right"
+              buttonClassName="euiCollapsibleNavGroup__heading"
+              buttonContent={
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="m"
+                  responsive={false}
+                >
+                  <EuiFlexItem>
+                    <EuiTitle
+                      size="xxs"
                     >
-                      <SideEffect(FocusWatcher)
-                        autoFocus={true}
-                        crossFrame={true}
-                        disabled={false}
-                        id={Object {}}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="false"
-                          >
-                            <nav
-                              aria-label="Primary"
-                              class="euiCollapsibleNav"
-                              data-test-subj="collapsibleNav"
-                              id="collapsibe-nav"
-                            >
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero"
-                                style="flex-shrink: 0;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                  id="mockId"
-                                  style="max-height: 40vh;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup"
-                                      style="max-width: none;"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavCustomNavLink"
-                                          href="Custom link"
-                                          rel="noreferrer"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Custom link"
-                                          >
-                                            Custom link
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <hr
-                                class="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero"
-                                style="flex-shrink: 0;"
-                              >
-                                <div
-                                  class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                  id="mockId"
-                                  style="max-height: 40vh;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      aria-label="Pinned links"
-                                      class="euiListGroup"
-                                      style="max-width: none;"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          href="/"
-                                          rel="noreferrer"
-                                        >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="home"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Home"
-                                          >
-                                            Home
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              >
-                                <div
-                                  class="euiAccordion__triggerWrapper"
-                                >
-                                  <button
-                                    aria-controls="mockId"
-                                    aria-expanded="true"
-                                    class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                    type="button"
-                                  >
-                                    <span
-                                      class="euiAccordion__iconWrapper"
-                                    >
-                                      <div
-                                        class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                      />
-                                    </span>
-                                    <span
-                                      class="euiIEFlexWrapFix"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <div
-                                          class="euiFlexItem"
-                                        >
-                                          <h3
-                                            class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                            id="mockId__title"
-                                          >
-                                            Recently viewed
-                                          </h3>
-                                        </div>
-                                      </div>
-                                    </span>
-                                  </button>
-                                </div>
-                                <div
-                                  class="euiAccordion__childWrapper"
-                                  id="mockId"
-                                >
-                                  <div>
-                                    <div
-                                      class=""
-                                    >
-                                      <div
-                                        class="euiCollapsibleNavGroup__children"
-                                      >
-                                        <ul
-                                          aria-label="Recently viewed links"
-                                          class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                          style="max-width: none;"
-                                        >
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              aria-label="recent 1"
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink--recent"
-                                              href="http://localhost/recent%201"
-                                              rel="noreferrer"
-                                              title="recent 1"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="recent 1"
-                                              >
-                                                recent 1
-                                              </span>
-                                            </a>
-                                          </li>
-                                          <li
-                                            class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <a
-                                              aria-label="recent 2"
-                                              class="euiListGroupItem__button"
-                                              data-test-subj="collapsibleNavAppLink--recent"
-                                              href="http://localhost/recent%202"
-                                              rel="noreferrer"
-                                              title="recent 2"
-                                            >
-                                              <span
-                                                class="euiListGroupItem__label"
-                                                title="recent 2"
-                                              >
-                                                recent 2
-                                              </span>
-                                            </a>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                              <hr
-                                class="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                              <div
-                                class="euiFlexItem eui-yScroll"
-                              >
-                                <div
-                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-kibana"
-                                >
-                                  <div
-                                    class="euiAccordion__triggerWrapper"
-                                  >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded="true"
-                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiAccordion__iconWrapper"
-                                      >
-                                        <div
-                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          data-euiicon-type="arrowRight"
-                                        />
-                                      </span>
-                                      <span
-                                        class="euiIEFlexWrapFix"
-                                      >
-                                        <div
-                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                        >
-                                          <div
-                                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                                          >
-                                            <div
-                                              data-euiicon-type="logoKibana"
-                                            />
-                                          </div>
-                                          <div
-                                            class="euiFlexItem"
-                                          >
-                                            <h3
-                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Kibana
-                                            </h3>
-                                          </div>
-                                        </div>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    class="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <div>
-                                      <div
-                                        class=""
-                                      >
-                                        <div
-                                          class="euiCollapsibleNavGroup__children"
-                                        >
-                                          <ul
-                                            aria-label="Primary navigation links, Kibana"
-                                            class="euiListGroup"
-                                            style="max-width: none;"
-                                          >
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="discover"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="discover"
-                                                >
-                                                  discover
-                                                </span>
-                                              </a>
-                                            </li>
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="visualize"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="visualize"
-                                                >
-                                                  visualize
-                                                </span>
-                                              </a>
-                                            </li>
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="dashboard"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="dashboard"
-                                                >
-                                                  dashboard
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-observability"
-                                >
-                                  <div
-                                    class="euiAccordion__triggerWrapper"
-                                  >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded="true"
-                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiAccordion__iconWrapper"
-                                      >
-                                        <div
-                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          data-euiicon-type="arrowRight"
-                                        />
-                                      </span>
-                                      <span
-                                        class="euiIEFlexWrapFix"
-                                      >
-                                        <div
-                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                        >
-                                          <div
-                                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                                          >
-                                            <div
-                                              data-euiicon-type="logoObservability"
-                                            />
-                                          </div>
-                                          <div
-                                            class="euiFlexItem"
-                                          >
-                                            <h3
-                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Observability
-                                            </h3>
-                                          </div>
-                                        </div>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    class="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <div>
-                                      <div
-                                        class=""
-                                      >
-                                        <div
-                                          class="euiCollapsibleNavGroup__children"
-                                        >
-                                          <ul
-                                            aria-label="Primary navigation links, Observability"
-                                            class="euiListGroup"
-                                            style="max-width: none;"
-                                          >
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="metrics"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="metrics"
-                                                >
-                                                  metrics
-                                                </span>
-                                              </a>
-                                            </li>
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="logs"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="logs"
-                                                >
-                                                  logs
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-security"
-                                >
-                                  <div
-                                    class="euiAccordion__triggerWrapper"
-                                  >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded="true"
-                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiAccordion__iconWrapper"
-                                      >
-                                        <div
-                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          data-euiicon-type="arrowRight"
-                                        />
-                                      </span>
-                                      <span
-                                        class="euiIEFlexWrapFix"
-                                      >
-                                        <div
-                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                        >
-                                          <div
-                                            class="euiFlexItem euiFlexItem--flexGrowZero"
-                                          >
-                                            <div
-                                              data-euiicon-type="logoSecurity"
-                                            />
-                                          </div>
-                                          <div
-                                            class="euiFlexItem"
-                                          >
-                                            <h3
-                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Security
-                                            </h3>
-                                          </div>
-                                        </div>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    class="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <div>
-                                      <div
-                                        class=""
-                                      >
-                                        <div
-                                          class="euiCollapsibleNavGroup__children"
-                                        >
-                                          <ul
-                                            aria-label="Primary navigation links, Security"
-                                            class="euiListGroup"
-                                            style="max-width: none;"
-                                          >
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="siem"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="siem"
-                                                >
-                                                  siem
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-management"
-                                >
-                                  <div
-                                    class="euiAccordion__triggerWrapper"
-                                  >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded="true"
-                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiAccordion__iconWrapper"
-                                      >
-                                        <div
-                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          data-euiicon-type="arrowRight"
-                                        />
-                                      </span>
-                                      <span
-                                        class="euiIEFlexWrapFix"
-                                      >
-                                        <div
-                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                        >
-                                          <div
-                                            class="euiFlexItem"
-                                          >
-                                            <h3
-                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Management
-                                            </h3>
-                                          </div>
-                                        </div>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    class="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <div>
-                                      <div
-                                        class=""
-                                      >
-                                        <div
-                                          class="euiCollapsibleNavGroup__children"
-                                        >
-                                          <ul
-                                            aria-label="Primary navigation links, Management"
-                                            class="euiListGroup"
-                                            style="max-width: none;"
-                                          >
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                href="monitoring"
-                                                rel="noreferrer"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="monitoring"
-                                                >
-                                                  monitoring
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiCollapsibleNavGroup"
-                                  data-test-subj="collapsibleNavGroup-noCategory"
-                                  id="mockId"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                      >
-                                        <a
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsibleNavAppLink"
-                                          href="canvas"
-                                          rel="noreferrer"
-                                        >
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="canvas"
-                                          >
-                                            canvas
-                                          </span>
-                                        </a>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                  id="mockId"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup__children"
-                                  >
-                                    <ul
-                                      class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                    >
-                                      <li
-                                        class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                      >
-                                        <button
-                                          aria-label="Dock primary navigation"
-                                          class="euiListGroupItem__button"
-                                          data-test-subj="collapsible-nav-lock"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiListGroupItem__icon"
-                                            data-euiicon-type="lockOpen"
-                                          />
-                                          <span
-                                            class="euiListGroupItem__label"
-                                            title="Dock navigation"
-                                          >
-                                            Dock navigation
-                                          </span>
-                                        </button>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <button
-                                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                                type="button"
-                              >
-                                <span
-                                  class="euiButtonContent euiButtonEmpty__content"
-                                >
-                                  <div
-                                    class="euiButtonContent__icon"
-                                    data-euiicon-type="cross"
-                                  />
-                                  <span
-                                    class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                  >
-                                    close
-                                  </span>
-                                </span>
-                              </button>
-                            </nav>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                        returnFocus={[Function]}
-                        shards={Array []}
+                      <h3
+                        className="euiCollapsibleNavGroup__title"
+                        id="mockId__title"
                       >
-                        <FocusWatcher
-                          autoFocus={true}
-                          crossFrame={true}
-                          disabled={false}
-                          id={Object {}}
-                          observed={
-                            <div
-                              data-focus-lock-disabled="false"
-                            >
-                              <nav
-                                aria-label="Primary"
-                                class="euiCollapsibleNav"
-                                data-test-subj="collapsibleNav"
-                                id="collapsibe-nav"
-                              >
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style="flex-shrink: 0;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                    id="mockId"
-                                    style="max-height: 40vh;"
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavCustomNavLink"
-                                            href="Custom link"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="Custom link"
-                                            >
-                                              Custom link
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                                <hr
-                                  class="euiHorizontalRule euiHorizontalRule--full"
-                                />
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero"
-                                  style="flex-shrink: 0;"
-                                >
-                                  <div
-                                    class="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                    id="mockId"
-                                    style="max-height: 40vh;"
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        aria-label="Pinned links"
-                                        class="euiListGroup"
-                                        style="max-width: none;"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            href="/"
-                                            rel="noreferrer"
-                                          >
-                                            <div
-                                              class="euiListGroupItem__icon"
-                                              data-euiicon-type="home"
-                                            />
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="Home"
-                                            >
-                                              Home
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-recentlyViewed"
-                                >
-                                  <div
-                                    class="euiAccordion__triggerWrapper"
-                                  >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded="true"
-                                      class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiAccordion__iconWrapper"
-                                      >
-                                        <div
-                                          class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          data-euiicon-type="arrowRight"
-                                        />
-                                      </span>
-                                      <span
-                                        class="euiIEFlexWrapFix"
-                                      >
-                                        <div
-                                          class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                        >
-                                          <div
-                                            class="euiFlexItem"
-                                          >
-                                            <h3
-                                              class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                              id="mockId__title"
-                                            >
-                                              Recently viewed
-                                            </h3>
-                                          </div>
-                                        </div>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    class="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <div>
-                                      <div
-                                        class=""
-                                      >
-                                        <div
-                                          class="euiCollapsibleNavGroup__children"
-                                        >
-                                          <ul
-                                            aria-label="Recently viewed links"
-                                            class="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                            style="max-width: none;"
-                                          >
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                aria-label="recent 1"
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink--recent"
-                                                href="http://localhost/recent%201"
-                                                rel="noreferrer"
-                                                title="recent 1"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="recent 1"
-                                                >
-                                                  recent 1
-                                                </span>
-                                              </a>
-                                            </li>
-                                            <li
-                                              class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                aria-label="recent 2"
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink--recent"
-                                                href="http://localhost/recent%202"
-                                                rel="noreferrer"
-                                                title="recent 2"
-                                              >
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="recent 2"
-                                                >
-                                                  recent 2
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                                <hr
-                                  class="euiHorizontalRule euiHorizontalRule--full"
-                                />
-                                <div
-                                  class="euiFlexItem eui-yScroll"
-                                >
-                                  <div
-                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                    data-test-subj="collapsibleNavGroup-kibana"
-                                  >
-                                    <div
-                                      class="euiAccordion__triggerWrapper"
-                                    >
-                                      <button
-                                        aria-controls="mockId"
-                                        aria-expanded="true"
-                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiAccordion__iconWrapper"
-                                        >
-                                          <div
-                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                          />
-                                        </span>
-                                        <span
-                                          class="euiIEFlexWrapFix"
-                                        >
-                                          <div
-                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <div
-                                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                                            >
-                                              <div
-                                                data-euiicon-type="logoKibana"
-                                              />
-                                            </div>
-                                            <div
-                                              class="euiFlexItem"
-                                            >
-                                              <h3
-                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Kibana
-                                              </h3>
-                                            </div>
-                                          </div>
-                                        </span>
-                                      </button>
-                                    </div>
-                                    <div
-                                      class="euiAccordion__childWrapper"
-                                      id="mockId"
-                                    >
-                                      <div>
-                                        <div
-                                          class=""
-                                        >
-                                          <div
-                                            class="euiCollapsibleNavGroup__children"
-                                          >
-                                            <ul
-                                              aria-label="Primary navigation links, Kibana"
-                                              class="euiListGroup"
-                                              style="max-width: none;"
-                                            >
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="discover"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="discover"
-                                                  >
-                                                    discover
-                                                  </span>
-                                                </a>
-                                              </li>
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="visualize"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="visualize"
-                                                  >
-                                                    visualize
-                                                  </span>
-                                                </a>
-                                              </li>
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="dashboard"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="dashboard"
-                                                  >
-                                                    dashboard
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </ul>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                    data-test-subj="collapsibleNavGroup-observability"
-                                  >
-                                    <div
-                                      class="euiAccordion__triggerWrapper"
-                                    >
-                                      <button
-                                        aria-controls="mockId"
-                                        aria-expanded="true"
-                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiAccordion__iconWrapper"
-                                        >
-                                          <div
-                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                          />
-                                        </span>
-                                        <span
-                                          class="euiIEFlexWrapFix"
-                                        >
-                                          <div
-                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <div
-                                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                                            >
-                                              <div
-                                                data-euiicon-type="logoObservability"
-                                              />
-                                            </div>
-                                            <div
-                                              class="euiFlexItem"
-                                            >
-                                              <h3
-                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Observability
-                                              </h3>
-                                            </div>
-                                          </div>
-                                        </span>
-                                      </button>
-                                    </div>
-                                    <div
-                                      class="euiAccordion__childWrapper"
-                                      id="mockId"
-                                    >
-                                      <div>
-                                        <div
-                                          class=""
-                                        >
-                                          <div
-                                            class="euiCollapsibleNavGroup__children"
-                                          >
-                                            <ul
-                                              aria-label="Primary navigation links, Observability"
-                                              class="euiListGroup"
-                                              style="max-width: none;"
-                                            >
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="metrics"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="metrics"
-                                                  >
-                                                    metrics
-                                                  </span>
-                                                </a>
-                                              </li>
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="logs"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="logs"
-                                                  >
-                                                    logs
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </ul>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                    data-test-subj="collapsibleNavGroup-security"
-                                  >
-                                    <div
-                                      class="euiAccordion__triggerWrapper"
-                                    >
-                                      <button
-                                        aria-controls="mockId"
-                                        aria-expanded="true"
-                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiAccordion__iconWrapper"
-                                        >
-                                          <div
-                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                          />
-                                        </span>
-                                        <span
-                                          class="euiIEFlexWrapFix"
-                                        >
-                                          <div
-                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <div
-                                              class="euiFlexItem euiFlexItem--flexGrowZero"
-                                            >
-                                              <div
-                                                data-euiicon-type="logoSecurity"
-                                              />
-                                            </div>
-                                            <div
-                                              class="euiFlexItem"
-                                            >
-                                              <h3
-                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Security
-                                              </h3>
-                                            </div>
-                                          </div>
-                                        </span>
-                                      </button>
-                                    </div>
-                                    <div
-                                      class="euiAccordion__childWrapper"
-                                      id="mockId"
-                                    >
-                                      <div>
-                                        <div
-                                          class=""
-                                        >
-                                          <div
-                                            class="euiCollapsibleNavGroup__children"
-                                          >
-                                            <ul
-                                              aria-label="Primary navigation links, Security"
-                                              class="euiListGroup"
-                                              style="max-width: none;"
-                                            >
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="siem"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="siem"
-                                                  >
-                                                    siem
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </ul>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                    data-test-subj="collapsibleNavGroup-management"
-                                  >
-                                    <div
-                                      class="euiAccordion__triggerWrapper"
-                                    >
-                                      <button
-                                        aria-controls="mockId"
-                                        aria-expanded="true"
-                                        class="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                        type="button"
-                                      >
-                                        <span
-                                          class="euiAccordion__iconWrapper"
-                                        >
-                                          <div
-                                            class="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                          />
-                                        </span>
-                                        <span
-                                          class="euiIEFlexWrapFix"
-                                        >
-                                          <div
-                                            class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <div
-                                              class="euiFlexItem"
-                                            >
-                                              <h3
-                                                class="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Management
-                                              </h3>
-                                            </div>
-                                          </div>
-                                        </span>
-                                      </button>
-                                    </div>
-                                    <div
-                                      class="euiAccordion__childWrapper"
-                                      id="mockId"
-                                    >
-                                      <div>
-                                        <div
-                                          class=""
-                                        >
-                                          <div
-                                            class="euiCollapsibleNavGroup__children"
-                                          >
-                                            <ul
-                                              aria-label="Primary navigation links, Management"
-                                              class="euiListGroup"
-                                              style="max-width: none;"
-                                            >
-                                              <li
-                                                class="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  class="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="monitoring"
-                                                  rel="noreferrer"
-                                                >
-                                                  <span
-                                                    class="euiListGroupItem__label"
-                                                    title="monitoring"
-                                                  >
-                                                    monitoring
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </ul>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiCollapsibleNavGroup"
-                                    data-test-subj="collapsibleNavGroup-noCategory"
-                                    id="mockId"
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="canvas"
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="canvas"
-                                            >
-                                              canvas
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                    id="mockId"
-                                  >
-                                    <div
-                                      class="euiCollapsibleNavGroup__children"
-                                    >
-                                      <ul
-                                        class="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                      >
-                                        <li
-                                          class="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                        >
-                                          <button
-                                            aria-label="Dock primary navigation"
-                                            class="euiListGroupItem__button"
-                                            data-test-subj="collapsible-nav-lock"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiListGroupItem__icon"
-                                              data-euiicon-type="lockOpen"
-                                            />
-                                            <span
-                                              class="euiListGroupItem__label"
-                                              title="Dock navigation"
-                                            >
-                                              Dock navigation
-                                            </span>
-                                          </button>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                                <button
-                                  class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                                  type="button"
+                        Recently viewed
+                      </h3>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+              data-test-subj="collapsibleNavGroup-recentlyViewed"
+              id="mockId"
+              initialIsOpen={true}
+              onToggle={[Function]}
+              paddingSize="none"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                data-test-subj="collapsibleNavGroup-recentlyViewed"
+                onToggle={[Function]}
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="mockId"
+                    aria-expanded={true}
+                    className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiAccordion__iconWrapper"
+                    >
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <div
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          data-euiicon-type="arrowRight"
+                          size="m"
+                        />
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                        >
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiTitle
+                                size="xxs"
+                              >
+                                <h3
+                                  className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                  id="mockId__title"
                                 >
-                                  <span
-                                    class="euiButtonContent euiButtonEmpty__content"
-                                  >
-                                    <div
-                                      class="euiButtonContent__icon"
-                                      data-euiicon-type="cross"
-                                    />
-                                    <span
-                                      class="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                    >
-                                      close
-                                    </span>
-                                  </span>
-                                </button>
-                              </nav>
+                                  Recently viewed
+                                </h3>
+                              </EuiTitle>
                             </div>
-                          }
-                          onActivation={[Function]}
-                          onDeactivation={[Function]}
-                          persistentFocus={false}
-                          returnFocus={[Function]}
-                          shards={Array []}
-                        />
-                      </SideEffect(FocusWatcher)>
-                    </SideCar>
-                  </RequireSideCar>
-                  <ForwardRef
-                    data-focus-lock-disabled={false}
-                    enabled={false}
-                    inert={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    removeScrollBar={true}
-                    sideCar={[Function]}
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="euiAccordion__childWrapper"
+                  id="mockId"
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
                   >
-                    <div
-                      data-focus-lock-disabled={false}
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onScrollCapture={[Function]}
-                      onTouchMoveCapture={[Function]}
-                      onTouchStart={[Function]}
-                      onWheelCapture={[Function]}
-                    >
-                      <nav
-                        aria-label="Primary"
-                        className="euiCollapsibleNav"
-                        data-test-subj="collapsibleNav"
-                        id="collapsibe-nav"
+                    <div>
+                      <div
+                        className=""
                       >
-                        <EuiFlexItem
-                          grow={false}
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
-                          }
+                        <div
+                          className="euiCollapsibleNavGroup__children"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                            style={
-                              Object {
-                                "flexShrink": 0,
-                              }
+                          <EuiListGroup
+                            aria-label="Recently viewed links"
+                            className="kbnCollapsibleNav__recentsListGroup"
+                            color="subdued"
+                            gutterSize="none"
+                            listItems={
+                              Array [
+                                Object {
+                                  "aria-label": "recent 1",
+                                  "data-test-subj": "collapsibleNavAppLink--recent",
+                                  "href": "http://localhost/recent%201",
+                                  "label": "recent 1",
+                                  "onClick": [Function],
+                                  "title": "recent 1",
+                                },
+                                Object {
+                                  "aria-label": "recent 2",
+                                  "data-test-subj": "collapsibleNavAppLink--recent",
+                                  "href": "http://localhost/recent%202",
+                                  "label": "recent 2",
+                                  "onClick": [Function],
+                                  "title": "recent 2",
+                                },
+                              ]
                             }
+                            maxWidth="none"
+                            size="s"
                           >
-                            <EuiCollapsibleNavGroup
-                              background="light"
-                              className="eui-yScroll"
+                            <ul
+                              aria-label="Recently viewed links"
+                              className="euiListGroup kbnCollapsibleNav__recentsListGroup"
                               style={
                                 Object {
-                                  "maxHeight": "40vh",
+                                  "maxWidth": "none",
                                 }
                               }
                             >
-                              <div
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style={
-                                  Object {
-                                    "maxHeight": "40vh",
-                                  }
-                                }
+                              <EuiListGroupItem
+                                aria-label="recent 1"
+                                color="subdued"
+                                data-test-subj="collapsibleNavAppLink--recent"
+                                href="http://localhost/recent%201"
+                                key="title-0"
+                                label="recent 1"
+                                onClick={[Function]}
+                                showToolTip={false}
+                                size="s"
+                                title="recent 1"
+                                wrapText={false}
                               >
-                                <div
-                                  className="euiCollapsibleNavGroup__children"
+                                <li
+                                  className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                 >
-                                  <EuiListGroup
-                                    color="text"
-                                    gutterSize="none"
-                                    listItems={
-                                      Array [
-                                        Object {
-                                          "data-test-subj": "collapsibleNavCustomNavLink",
-                                          "href": "Custom link",
-                                          "icon": undefined,
-                                          "iconType": undefined,
-                                          "isActive": false,
-                                          "isDisabled": undefined,
-                                          "label": "Custom link",
-                                          "onClick": [Function],
-                                        },
-                                      ]
-                                    }
-                                    maxWidth="none"
-                                    size="s"
+                                  <a
+                                    aria-label="recent 1"
+                                    className="euiListGroupItem__button"
+                                    data-test-subj="collapsibleNavAppLink--recent"
+                                    href="http://localhost/recent%201"
+                                    onClick={[Function]}
+                                    rel="noreferrer"
+                                    title="recent 1"
                                   >
-                                    <ul
-                                      className="euiListGroup"
-                                      style={
-                                        Object {
-                                          "maxWidth": "none",
-                                        }
-                                      }
+                                    <span
+                                      className="euiListGroupItem__label"
+                                      title="recent 1"
                                     >
-                                      <EuiListGroupItem
-                                        color="text"
-                                        data-test-subj="collapsibleNavCustomNavLink"
-                                        href="Custom link"
-                                        isActive={false}
-                                        key="title-0"
-                                        label="Custom link"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        wrapText={false}
-                                      >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            className="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavCustomNavLink"
-                                            href="Custom link"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="Custom link"
-                                            >
-                                              Custom link
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
-                                </div>
-                              </div>
-                            </EuiCollapsibleNavGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiHorizontalRule
-                          margin="none"
+                                      recent 1
+                                    </span>
+                                  </a>
+                                </li>
+                              </EuiListGroupItem>
+                              <EuiListGroupItem
+                                aria-label="recent 2"
+                                color="subdued"
+                                data-test-subj="collapsibleNavAppLink--recent"
+                                href="http://localhost/recent%202"
+                                key="title-1"
+                                label="recent 2"
+                                onClick={[Function]}
+                                showToolTip={false}
+                                size="s"
+                                title="recent 2"
+                                wrapText={false}
+                              >
+                                <li
+                                  className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
+                                >
+                                  <a
+                                    aria-label="recent 2"
+                                    className="euiListGroupItem__button"
+                                    data-test-subj="collapsibleNavAppLink--recent"
+                                    href="http://localhost/recent%202"
+                                    onClick={[Function]}
+                                    rel="noreferrer"
+                                    title="recent 2"
+                                  >
+                                    <span
+                                      className="euiListGroupItem__label"
+                                      title="recent 2"
+                                    >
+                                      recent 2
+                                    </span>
+                                  </a>
+                                </li>
+                              </EuiListGroupItem>
+                            </ul>
+                          </EuiListGroup>
+                        </div>
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+          </EuiCollapsibleNavGroup>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexItem
+            className="eui-yScroll"
+          >
+            <div
+              className="euiFlexItem eui-yScroll"
+            >
+              <EuiCollapsibleNavGroup
+                data-test-subj="collapsibleNavGroup-kibana"
+                iconType="logoKibana"
+                initialIsOpen={true}
+                isCollapsible={true}
+                key="kibana"
+                onToggle={[Function]}
+                title="Kibana"
+              >
+                <EuiAccordion
+                  arrowDisplay="right"
+                  buttonClassName="euiCollapsibleNavGroup__heading"
+                  buttonContent={
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="m"
+                      responsive={false}
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <EuiIcon
+                          size="l"
+                          type="logoKibana"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <EuiTitle
+                          size="xxs"
                         >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                        </EuiHorizontalRule>
-                        <EuiFlexItem
-                          grow={false}
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
-                          }
+                          <h3
+                            className="euiCollapsibleNavGroup__title"
+                            id="mockId__title"
+                          >
+                            Kibana
+                          </h3>
+                        </EuiTitle>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  }
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                  data-test-subj="collapsibleNavGroup-kibana"
+                  id="mockId"
+                  initialIsOpen={true}
+                  onToggle={[Function]}
+                  paddingSize="none"
+                >
+                  <div
+                    className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                    data-test-subj="collapsibleNavGroup-kibana"
+                    onToggle={[Function]}
+                  >
+                    <div
+                      className="euiAccordion__triggerWrapper"
+                    >
+                      <button
+                        aria-controls="mockId"
+                        aria-expanded={true}
+                        className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="euiAccordion__iconWrapper"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                            style={
-                              Object {
-                                "flexShrink": 0,
-                              }
-                            }
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
                           >
-                            <EuiCollapsibleNavGroup
-                              background="light"
-                              className="eui-yScroll"
-                              style={
-                                Object {
-                                  "maxHeight": "40vh",
-                                }
-                              }
+                            <div
+                              className="euiAccordion__icon euiAccordion__icon-isOpen"
+                              data-euiicon-type="arrowRight"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                             >
-                              <div
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style={
-                                  Object {
-                                    "maxHeight": "40vh",
-                                  }
-                                }
+                              <EuiFlexItem
+                                grow={false}
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup__children"
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
-                                  <EuiListGroup
-                                    aria-label="Pinned links"
-                                    color="text"
-                                    gutterSize="none"
-                                    listItems={
-                                      Array [
-                                        Object {
-                                          "href": "/",
-                                          "iconType": "home",
-                                          "label": "Home",
-                                          "onClick": [Function],
-                                        },
-                                      ]
-                                    }
-                                    maxWidth="none"
-                                    size="s"
+                                  <EuiIcon
+                                    size="l"
+                                    type="logoKibana"
                                   >
-                                    <ul
-                                      aria-label="Pinned links"
-                                      className="euiListGroup"
-                                      style={
-                                        Object {
-                                          "maxWidth": "none",
-                                        }
-                                      }
-                                    >
-                                      <EuiListGroupItem
-                                        color="text"
-                                        href="/"
-                                        iconType="home"
-                                        key="title-0"
-                                        label="Home"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        wrapText={false}
-                                      >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            className="euiListGroupItem__button"
-                                            href="/"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                          >
-                                            <EuiIcon
-                                              className="euiListGroupItem__icon"
-                                              type="home"
-                                            >
-                                              <div
-                                                className="euiListGroupItem__icon"
-                                                data-euiicon-type="home"
-                                              />
-                                            </EuiIcon>
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="Home"
-                                            >
-                                              Home
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
+                                    <div
+                                      data-euiicon-type="logoKibana"
+                                      size="l"
+                                    />
+                                  </EuiIcon>
                                 </div>
-                              </div>
-                            </EuiCollapsibleNavGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiCollapsibleNavGroup
-                          background="light"
-                          data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          initialIsOpen={true}
-                          isCollapsible={true}
-                          key="recentlyViewed"
-                          onToggle={[Function]}
-                          title="Recently viewed"
-                        >
-                          <EuiAccordion
-                            arrowDisplay="right"
-                            buttonClassName="euiCollapsibleNavGroup__heading"
-                            buttonContent={
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
-                              >
-                                <EuiFlexItem>
+                              </EuiFlexItem>
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
                                   <EuiTitle
                                     size="xxs"
                                   >
                                     <h3
-                                      className="euiCollapsibleNavGroup__title"
+                                      className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
                                       id="mockId__title"
                                     >
-                                      Recently viewed
+                                      Kibana
                                     </h3>
                                   </EuiTitle>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
-                            }
-                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            id="mockId"
-                            initialIsOpen={true}
-                            onToggle={[Function]}
-                            paddingSize="none"
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="euiAccordion__childWrapper"
+                      id="mockId"
+                    >
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
                           >
                             <div
-                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              onToggle={[Function]}
+                              className="euiCollapsibleNavGroup__children"
                             >
-                              <div
-                                className="euiAccordion__triggerWrapper"
+                              <EuiListGroup
+                                aria-label="Primary navigation links, Kibana"
+                                color="subdued"
+                                gutterSize="none"
+                                listItems={
+                                  Array [
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "discover",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "discover",
+                                      "onClick": [Function],
+                                    },
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "visualize",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "visualize",
+                                      "onClick": [Function],
+                                    },
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "dashboard",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "dashboard",
+                                      "onClick": [Function],
+                                    },
+                                  ]
+                                }
+                                maxWidth="none"
+                                size="s"
                               >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded={true}
-                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  onClick={[Function]}
-                                  type="button"
+                                <ul
+                                  aria-label="Primary navigation links, Kibana"
+                                  className="euiListGroup"
+                                  style={
+                                    Object {
+                                      "maxWidth": "none",
+                                    }
+                                  }
                                 >
-                                  <span
-                                    className="euiAccordion__iconWrapper"
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="discover"
+                                    isActive={false}
+                                    key="title-0"
+                                    label="discover"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <EuiIcon
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      size="m"
-                                      type="arrowRight"
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <div
-                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                        size="m"
-                                      />
-                                    </EuiIcon>
-                                  </span>
-                                  <span
-                                    className="euiIEFlexWrapFix"
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="discover"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
+                                      >
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="discover"
+                                        >
+                                          discover
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="visualize"
+                                    isActive={false}
+                                    key="title-1"
+                                    label="visualize"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <EuiFlexGroup
-                                      alignItems="center"
-                                      gutterSize="m"
-                                      responsive={false}
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <div
-                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="visualize"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
                                       >
-                                        <EuiFlexItem>
-                                          <div
-                                            className="euiFlexItem"
-                                          >
-                                            <EuiTitle
-                                              size="xxs"
-                                            >
-                                              <h3
-                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Recently viewed
-                                              </h3>
-                                            </EuiTitle>
-                                          </div>
-                                        </EuiFlexItem>
-                                      </div>
-                                    </EuiFlexGroup>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                className="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <EuiResizeObserver
-                                  onResize={[Function]}
-                                >
-                                  <div>
-                                    <div
-                                      className=""
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="visualize"
+                                        >
+                                          visualize
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="dashboard"
+                                    isActive={false}
+                                    key="title-2"
+                                    label="dashboard"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
+                                  >
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <div
-                                        className="euiCollapsibleNavGroup__children"
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="dashboard"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
                                       >
-                                        <EuiListGroup
-                                          aria-label="Recently viewed links"
-                                          className="kbnCollapsibleNav__recentsListGroup"
-                                          color="subdued"
-                                          gutterSize="none"
-                                          listItems={
-                                            Array [
-                                              Object {
-                                                "aria-label": "recent 1",
-                                                "data-test-subj": "collapsibleNavAppLink--recent",
-                                                "href": "http://localhost/recent%201",
-                                                "label": "recent 1",
-                                                "onClick": [Function],
-                                                "title": "recent 1",
-                                              },
-                                              Object {
-                                                "aria-label": "recent 2",
-                                                "data-test-subj": "collapsibleNavAppLink--recent",
-                                                "href": "http://localhost/recent%202",
-                                                "label": "recent 2",
-                                                "onClick": [Function],
-                                                "title": "recent 2",
-                                              },
-                                            ]
-                                          }
-                                          maxWidth="none"
-                                          size="s"
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="dashboard"
                                         >
-                                          <ul
-                                            aria-label="Recently viewed links"
-                                            className="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                            style={
-                                              Object {
-                                                "maxWidth": "none",
-                                              }
-                                            }
-                                          >
-                                            <EuiListGroupItem
-                                              aria-label="recent 1"
-                                              color="subdued"
-                                              data-test-subj="collapsibleNavAppLink--recent"
-                                              href="http://localhost/recent%201"
-                                              key="title-0"
-                                              label="recent 1"
-                                              onClick={[Function]}
-                                              showToolTip={false}
-                                              size="s"
-                                              title="recent 1"
-                                              wrapText={false}
-                                            >
-                                              <li
-                                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  aria-label="recent 1"
-                                                  className="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink--recent"
-                                                  href="http://localhost/recent%201"
-                                                  onClick={[Function]}
-                                                  rel="noreferrer"
-                                                  title="recent 1"
-                                                >
-                                                  <span
-                                                    className="euiListGroupItem__label"
-                                                    title="recent 1"
-                                                  >
-                                                    recent 1
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </EuiListGroupItem>
-                                            <EuiListGroupItem
-                                              aria-label="recent 2"
-                                              color="subdued"
-                                              data-test-subj="collapsibleNavAppLink--recent"
-                                              href="http://localhost/recent%202"
-                                              key="title-1"
-                                              label="recent 2"
-                                              onClick={[Function]}
-                                              showToolTip={false}
-                                              size="s"
-                                              title="recent 2"
-                                              wrapText={false}
-                                            >
-                                              <li
-                                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <a
-                                                  aria-label="recent 2"
-                                                  className="euiListGroupItem__button"
-                                                  data-test-subj="collapsibleNavAppLink--recent"
-                                                  href="http://localhost/recent%202"
-                                                  onClick={[Function]}
-                                                  rel="noreferrer"
-                                                  title="recent 2"
-                                                >
-                                                  <span
-                                                    className="euiListGroupItem__label"
-                                                    title="recent 2"
-                                                  >
-                                                    recent 2
-                                                  </span>
-                                                </a>
-                                              </li>
-                                            </EuiListGroupItem>
-                                          </ul>
-                                        </EuiListGroup>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </EuiResizeObserver>
-                              </div>
+                                          dashboard
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                </ul>
+                              </EuiListGroup>
                             </div>
-                          </EuiAccordion>
-                        </EuiCollapsibleNavGroup>
-                        <EuiHorizontalRule
-                          margin="none"
+                          </div>
+                        </div>
+                      </EuiResizeObserver>
+                    </div>
+                  </div>
+                </EuiAccordion>
+              </EuiCollapsibleNavGroup>
+              <EuiCollapsibleNavGroup
+                data-test-subj="collapsibleNavGroup-observability"
+                iconType="logoObservability"
+                initialIsOpen={true}
+                isCollapsible={true}
+                key="observability"
+                onToggle={[Function]}
+                title="Observability"
+              >
+                <EuiAccordion
+                  arrowDisplay="right"
+                  buttonClassName="euiCollapsibleNavGroup__heading"
+                  buttonContent={
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="m"
+                      responsive={false}
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <EuiIcon
+                          size="l"
+                          type="logoObservability"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <EuiTitle
+                          size="xxs"
+                        >
+                          <h3
+                            className="euiCollapsibleNavGroup__title"
+                            id="mockId__title"
+                          >
+                            Observability
+                          </h3>
+                        </EuiTitle>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  }
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                  data-test-subj="collapsibleNavGroup-observability"
+                  id="mockId"
+                  initialIsOpen={true}
+                  onToggle={[Function]}
+                  paddingSize="none"
+                >
+                  <div
+                    className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                    data-test-subj="collapsibleNavGroup-observability"
+                    onToggle={[Function]}
+                  >
+                    <div
+                      className="euiAccordion__triggerWrapper"
+                    >
+                      <button
+                        aria-controls="mockId"
+                        aria-expanded={true}
+                        className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="euiAccordion__iconWrapper"
                         >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                        </EuiHorizontalRule>
-                        <EuiFlexItem
-                          className="eui-yScroll"
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
+                          >
+                            <div
+                              className="euiAccordion__icon euiAccordion__icon-isOpen"
+                              data-euiicon-type="arrowRight"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
                         >
-                          <div
-                            className="euiFlexItem eui-yScroll"
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            responsive={false}
                           >
-                            <EuiCollapsibleNavGroup
-                              data-test-subj="collapsibleNavGroup-kibana"
-                              iconType="logoKibana"
-                              initialIsOpen={true}
-                              isCollapsible={true}
-                              key="kibana"
-                              onToggle={[Function]}
-                              title="Kibana"
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                             >
-                              <EuiAccordion
-                                arrowDisplay="right"
-                                buttonClassName="euiCollapsibleNavGroup__heading"
-                                buttonContent={
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <EuiFlexItem
-                                      grow={false}
-                                    >
-                                      <EuiIcon
-                                        size="l"
-                                        type="logoKibana"
-                                      />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem>
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Kibana
-                                        </h3>
-                                      </EuiTitle>
-                                    </EuiFlexItem>
-                                  </EuiFlexGroup>
-                                }
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-kibana"
-                                id="mockId"
-                                initialIsOpen={true}
-                                onToggle={[Function]}
-                                paddingSize="none"
+                              <EuiFlexItem
+                                grow={false}
                               >
                                 <div
-                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-kibana"
-                                  onToggle={[Function]}
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
-                                  <div
-                                    className="euiAccordion__triggerWrapper"
+                                  <EuiIcon
+                                    size="l"
+                                    type="logoObservability"
                                   >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded={true}
-                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="euiAccordion__iconWrapper"
-                                      >
-                                        <EuiIcon
-                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          size="m"
-                                          type="arrowRight"
-                                        >
-                                          <div
-                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </span>
-                                      <span
-                                        className="euiIEFlexWrapFix"
-                                      >
-                                        <EuiFlexGroup
-                                          alignItems="center"
-                                          gutterSize="m"
-                                          responsive={false}
-                                        >
-                                          <div
-                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <EuiFlexItem
-                                              grow={false}
-                                            >
-                                              <div
-                                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                                              >
-                                                <EuiIcon
-                                                  size="l"
-                                                  type="logoKibana"
-                                                >
-                                                  <div
-                                                    data-euiicon-type="logoKibana"
-                                                    size="l"
-                                                  />
-                                                </EuiIcon>
-                                              </div>
-                                            </EuiFlexItem>
-                                            <EuiFlexItem>
-                                              <div
-                                                className="euiFlexItem"
-                                              >
-                                                <EuiTitle
-                                                  size="xxs"
-                                                >
-                                                  <h3
-                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                    id="mockId__title"
-                                                  >
-                                                    Kibana
-                                                  </h3>
-                                                </EuiTitle>
-                                              </div>
-                                            </EuiFlexItem>
-                                          </div>
-                                        </EuiFlexGroup>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="euiAccordion__childWrapper"
-                                    id="mockId"
+                                    <div
+                                      data-euiicon-type="logoObservability"
+                                      size="l"
+                                    />
+                                  </EuiIcon>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiTitle
+                                    size="xxs"
                                   >
-                                    <EuiResizeObserver
-                                      onResize={[Function]}
+                                    <h3
+                                      className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
                                     >
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            className="euiCollapsibleNavGroup__children"
-                                          >
-                                            <EuiListGroup
-                                              aria-label="Primary navigation links, Kibana"
-                                              color="subdued"
-                                              gutterSize="none"
-                                              listItems={
-                                                Array [
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "discover",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "discover",
-                                                    "onClick": [Function],
-                                                  },
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "visualize",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "visualize",
-                                                    "onClick": [Function],
-                                                  },
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "dashboard",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "dashboard",
-                                                    "onClick": [Function],
-                                                  },
-                                                ]
-                                              }
-                                              maxWidth="none"
-                                              size="s"
-                                            >
-                                              <ul
-                                                aria-label="Primary navigation links, Kibana"
-                                                className="euiListGroup"
-                                                style={
-                                                  Object {
-                                                    "maxWidth": "none",
-                                                  }
-                                                }
-                                              >
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="discover"
-                                                  isActive={false}
-                                                  key="title-0"
-                                                  label="discover"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="discover"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="discover"
-                                                      >
-                                                        discover
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="visualize"
-                                                  isActive={false}
-                                                  key="title-1"
-                                                  label="visualize"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="visualize"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="visualize"
-                                                      >
-                                                        visualize
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="dashboard"
-                                                  isActive={false}
-                                                  key="title-2"
-                                                  label="dashboard"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="dashboard"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="dashboard"
-                                                      >
-                                                        dashboard
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                              </ul>
-                                            </EuiListGroup>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </EuiResizeObserver>
-                                  </div>
+                                      Observability
+                                    </h3>
+                                  </EuiTitle>
                                 </div>
-                              </EuiAccordion>
-                            </EuiCollapsibleNavGroup>
-                            <EuiCollapsibleNavGroup
-                              data-test-subj="collapsibleNavGroup-observability"
-                              iconType="logoObservability"
-                              initialIsOpen={true}
-                              isCollapsible={true}
-                              key="observability"
-                              onToggle={[Function]}
-                              title="Observability"
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="euiAccordion__childWrapper"
+                      id="mockId"
+                    >
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <div
+                              className="euiCollapsibleNavGroup__children"
                             >
-                              <EuiAccordion
-                                arrowDisplay="right"
-                                buttonClassName="euiCollapsibleNavGroup__heading"
-                                buttonContent={
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <EuiFlexItem
-                                      grow={false}
-                                    >
-                                      <EuiIcon
-                                        size="l"
-                                        type="logoObservability"
-                                      />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem>
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Observability
-                                        </h3>
-                                      </EuiTitle>
-                                    </EuiFlexItem>
-                                  </EuiFlexGroup>
+                              <EuiListGroup
+                                aria-label="Primary navigation links, Observability"
+                                color="subdued"
+                                gutterSize="none"
+                                listItems={
+                                  Array [
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "metrics",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "metrics",
+                                      "onClick": [Function],
+                                    },
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "logs",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "logs",
+                                      "onClick": [Function],
+                                    },
+                                  ]
                                 }
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-observability"
-                                id="mockId"
-                                initialIsOpen={true}
-                                onToggle={[Function]}
-                                paddingSize="none"
+                                maxWidth="none"
+                                size="s"
                               >
-                                <div
-                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-observability"
-                                  onToggle={[Function]}
+                                <ul
+                                  aria-label="Primary navigation links, Observability"
+                                  className="euiListGroup"
+                                  style={
+                                    Object {
+                                      "maxWidth": "none",
+                                    }
+                                  }
                                 >
-                                  <div
-                                    className="euiAccordion__triggerWrapper"
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="metrics"
+                                    isActive={false}
+                                    key="title-0"
+                                    label="metrics"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded={true}
-                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      onClick={[Function]}
-                                      type="button"
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <span
-                                        className="euiAccordion__iconWrapper"
-                                      >
-                                        <EuiIcon
-                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          size="m"
-                                          type="arrowRight"
-                                        >
-                                          <div
-                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </span>
-                                      <span
-                                        className="euiIEFlexWrapFix"
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="metrics"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
                                       >
-                                        <EuiFlexGroup
-                                          alignItems="center"
-                                          gutterSize="m"
-                                          responsive={false}
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="metrics"
                                         >
-                                          <div
-                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <EuiFlexItem
-                                              grow={false}
-                                            >
-                                              <div
-                                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                                              >
-                                                <EuiIcon
-                                                  size="l"
-                                                  type="logoObservability"
-                                                >
-                                                  <div
-                                                    data-euiicon-type="logoObservability"
-                                                    size="l"
-                                                  />
-                                                </EuiIcon>
-                                              </div>
-                                            </EuiFlexItem>
-                                            <EuiFlexItem>
-                                              <div
-                                                className="euiFlexItem"
-                                              >
-                                                <EuiTitle
-                                                  size="xxs"
-                                                >
-                                                  <h3
-                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                    id="mockId__title"
-                                                  >
-                                                    Observability
-                                                  </h3>
-                                                </EuiTitle>
-                                              </div>
-                                            </EuiFlexItem>
-                                          </div>
-                                        </EuiFlexGroup>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="euiAccordion__childWrapper"
-                                    id="mockId"
+                                          metrics
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="logs"
+                                    isActive={false}
+                                    key="title-1"
+                                    label="logs"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <EuiResizeObserver
-                                      onResize={[Function]}
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <div>
-                                        <div
-                                          className=""
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="logs"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
+                                      >
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="logs"
                                         >
-                                          <div
-                                            className="euiCollapsibleNavGroup__children"
-                                          >
-                                            <EuiListGroup
-                                              aria-label="Primary navigation links, Observability"
-                                              color="subdued"
-                                              gutterSize="none"
-                                              listItems={
-                                                Array [
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "metrics",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "metrics",
-                                                    "onClick": [Function],
-                                                  },
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "logs",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "logs",
-                                                    "onClick": [Function],
-                                                  },
-                                                ]
-                                              }
-                                              maxWidth="none"
-                                              size="s"
-                                            >
-                                              <ul
-                                                aria-label="Primary navigation links, Observability"
-                                                className="euiListGroup"
-                                                style={
-                                                  Object {
-                                                    "maxWidth": "none",
-                                                  }
-                                                }
-                                              >
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="metrics"
-                                                  isActive={false}
-                                                  key="title-0"
-                                                  label="metrics"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="metrics"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="metrics"
-                                                      >
-                                                        metrics
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="logs"
-                                                  isActive={false}
-                                                  key="title-1"
-                                                  label="logs"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="logs"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="logs"
-                                                      >
-                                                        logs
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                              </ul>
-                                            </EuiListGroup>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </EuiResizeObserver>
-                                  </div>
-                                </div>
-                              </EuiAccordion>
-                            </EuiCollapsibleNavGroup>
-                            <EuiCollapsibleNavGroup
-                              data-test-subj="collapsibleNavGroup-security"
-                              iconType="logoSecurity"
-                              initialIsOpen={true}
-                              isCollapsible={true}
-                              key="security"
-                              onToggle={[Function]}
-                              title="Security"
+                                          logs
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                </ul>
+                              </EuiListGroup>
+                            </div>
+                          </div>
+                        </div>
+                      </EuiResizeObserver>
+                    </div>
+                  </div>
+                </EuiAccordion>
+              </EuiCollapsibleNavGroup>
+              <EuiCollapsibleNavGroup
+                data-test-subj="collapsibleNavGroup-security"
+                iconType="logoSecurity"
+                initialIsOpen={true}
+                isCollapsible={true}
+                key="security"
+                onToggle={[Function]}
+                title="Security"
+              >
+                <EuiAccordion
+                  arrowDisplay="right"
+                  buttonClassName="euiCollapsibleNavGroup__heading"
+                  buttonContent={
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="m"
+                      responsive={false}
+                    >
+                      <EuiFlexItem
+                        grow={false}
+                      >
+                        <EuiIcon
+                          size="l"
+                          type="logoSecurity"
+                        />
+                      </EuiFlexItem>
+                      <EuiFlexItem>
+                        <EuiTitle
+                          size="xxs"
+                        >
+                          <h3
+                            className="euiCollapsibleNavGroup__title"
+                            id="mockId__title"
+                          >
+                            Security
+                          </h3>
+                        </EuiTitle>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  }
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                  data-test-subj="collapsibleNavGroup-security"
+                  id="mockId"
+                  initialIsOpen={true}
+                  onToggle={[Function]}
+                  paddingSize="none"
+                >
+                  <div
+                    className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                    data-test-subj="collapsibleNavGroup-security"
+                    onToggle={[Function]}
+                  >
+                    <div
+                      className="euiAccordion__triggerWrapper"
+                    >
+                      <button
+                        aria-controls="mockId"
+                        aria-expanded={true}
+                        className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="euiAccordion__iconWrapper"
+                        >
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
+                          >
+                            <div
+                              className="euiAccordion__icon euiAccordion__icon-isOpen"
+                              data-euiicon-type="arrowRight"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                             >
-                              <EuiAccordion
-                                arrowDisplay="right"
-                                buttonClassName="euiCollapsibleNavGroup__heading"
-                                buttonContent={
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <EuiFlexItem
-                                      grow={false}
-                                    >
-                                      <EuiIcon
-                                        size="l"
-                                        type="logoSecurity"
-                                      />
-                                    </EuiFlexItem>
-                                    <EuiFlexItem>
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Security
-                                        </h3>
-                                      </EuiTitle>
-                                    </EuiFlexItem>
-                                  </EuiFlexGroup>
-                                }
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-security"
-                                id="mockId"
-                                initialIsOpen={true}
-                                onToggle={[Function]}
-                                paddingSize="none"
+                              <EuiFlexItem
+                                grow={false}
                               >
                                 <div
-                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-security"
-                                  onToggle={[Function]}
+                                  className="euiFlexItem euiFlexItem--flexGrowZero"
                                 >
-                                  <div
-                                    className="euiAccordion__triggerWrapper"
+                                  <EuiIcon
+                                    size="l"
+                                    type="logoSecurity"
                                   >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded={true}
-                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      onClick={[Function]}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="euiAccordion__iconWrapper"
-                                      >
-                                        <EuiIcon
-                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          size="m"
-                                          type="arrowRight"
-                                        >
-                                          <div
-                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </span>
-                                      <span
-                                        className="euiIEFlexWrapFix"
-                                      >
-                                        <EuiFlexGroup
-                                          alignItems="center"
-                                          gutterSize="m"
-                                          responsive={false}
-                                        >
-                                          <div
-                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <EuiFlexItem
-                                              grow={false}
-                                            >
-                                              <div
-                                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                                              >
-                                                <EuiIcon
-                                                  size="l"
-                                                  type="logoSecurity"
-                                                >
-                                                  <div
-                                                    data-euiicon-type="logoSecurity"
-                                                    size="l"
-                                                  />
-                                                </EuiIcon>
-                                              </div>
-                                            </EuiFlexItem>
-                                            <EuiFlexItem>
-                                              <div
-                                                className="euiFlexItem"
-                                              >
-                                                <EuiTitle
-                                                  size="xxs"
-                                                >
-                                                  <h3
-                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                    id="mockId__title"
-                                                  >
-                                                    Security
-                                                  </h3>
-                                                </EuiTitle>
-                                              </div>
-                                            </EuiFlexItem>
-                                          </div>
-                                        </EuiFlexGroup>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="euiAccordion__childWrapper"
-                                    id="mockId"
+                                    <div
+                                      data-euiicon-type="logoSecurity"
+                                      size="l"
+                                    />
+                                  </EuiIcon>
+                                </div>
+                              </EuiFlexItem>
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiTitle
+                                    size="xxs"
                                   >
-                                    <EuiResizeObserver
-                                      onResize={[Function]}
+                                    <h3
+                                      className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
                                     >
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            className="euiCollapsibleNavGroup__children"
-                                          >
-                                            <EuiListGroup
-                                              aria-label="Primary navigation links, Security"
-                                              color="subdued"
-                                              gutterSize="none"
-                                              listItems={
-                                                Array [
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "siem",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "siem",
-                                                    "onClick": [Function],
-                                                  },
-                                                ]
-                                              }
-                                              maxWidth="none"
-                                              size="s"
-                                            >
-                                              <ul
-                                                aria-label="Primary navigation links, Security"
-                                                className="euiListGroup"
-                                                style={
-                                                  Object {
-                                                    "maxWidth": "none",
-                                                  }
-                                                }
-                                              >
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="siem"
-                                                  isActive={false}
-                                                  key="title-0"
-                                                  label="siem"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="siem"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="siem"
-                                                      >
-                                                        siem
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                              </ul>
-                                            </EuiListGroup>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </EuiResizeObserver>
-                                  </div>
+                                      Security
+                                    </h3>
+                                  </EuiTitle>
                                 </div>
-                              </EuiAccordion>
-                            </EuiCollapsibleNavGroup>
-                            <EuiCollapsibleNavGroup
-                              data-test-subj="collapsibleNavGroup-management"
-                              initialIsOpen={true}
-                              isCollapsible={true}
-                              key="management"
-                              onToggle={[Function]}
-                              title="Management"
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="euiAccordion__childWrapper"
+                      id="mockId"
+                    >
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <div
+                              className="euiCollapsibleNavGroup__children"
                             >
-                              <EuiAccordion
-                                arrowDisplay="right"
-                                buttonClassName="euiCollapsibleNavGroup__heading"
-                                buttonContent={
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <EuiFlexItem>
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Management
-                                        </h3>
-                                      </EuiTitle>
-                                    </EuiFlexItem>
-                                  </EuiFlexGroup>
+                              <EuiListGroup
+                                aria-label="Primary navigation links, Security"
+                                color="subdued"
+                                gutterSize="none"
+                                listItems={
+                                  Array [
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "siem",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "siem",
+                                      "onClick": [Function],
+                                    },
+                                  ]
                                 }
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-management"
-                                id="mockId"
-                                initialIsOpen={true}
-                                onToggle={[Function]}
-                                paddingSize="none"
+                                maxWidth="none"
+                                size="s"
                               >
-                                <div
-                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-management"
-                                  onToggle={[Function]}
+                                <ul
+                                  aria-label="Primary navigation links, Security"
+                                  className="euiListGroup"
+                                  style={
+                                    Object {
+                                      "maxWidth": "none",
+                                    }
+                                  }
                                 >
-                                  <div
-                                    className="euiAccordion__triggerWrapper"
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="siem"
+                                    isActive={false}
+                                    key="title-0"
+                                    label="siem"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded={true}
-                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      onClick={[Function]}
-                                      type="button"
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <span
-                                        className="euiAccordion__iconWrapper"
-                                      >
-                                        <EuiIcon
-                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          size="m"
-                                          type="arrowRight"
-                                        >
-                                          <div
-                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </span>
-                                      <span
-                                        className="euiIEFlexWrapFix"
+                                      <a
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink"
+                                        href="siem"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
                                       >
-                                        <EuiFlexGroup
-                                          alignItems="center"
-                                          gutterSize="m"
-                                          responsive={false}
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="siem"
                                         >
-                                          <div
-                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <EuiFlexItem>
-                                              <div
-                                                className="euiFlexItem"
-                                              >
-                                                <EuiTitle
-                                                  size="xxs"
-                                                >
-                                                  <h3
-                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                    id="mockId__title"
-                                                  >
-                                                    Management
-                                                  </h3>
-                                                </EuiTitle>
-                                              </div>
-                                            </EuiFlexItem>
-                                          </div>
-                                        </EuiFlexGroup>
-                                      </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="euiAccordion__childWrapper"
-                                    id="mockId"
+                                          siem
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                </ul>
+                              </EuiListGroup>
+                            </div>
+                          </div>
+                        </div>
+                      </EuiResizeObserver>
+                    </div>
+                  </div>
+                </EuiAccordion>
+              </EuiCollapsibleNavGroup>
+              <EuiCollapsibleNavGroup
+                data-test-subj="collapsibleNavGroup-management"
+                initialIsOpen={true}
+                isCollapsible={true}
+                key="management"
+                onToggle={[Function]}
+                title="Management"
+              >
+                <EuiAccordion
+                  arrowDisplay="right"
+                  buttonClassName="euiCollapsibleNavGroup__heading"
+                  buttonContent={
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="m"
+                      responsive={false}
+                    >
+                      <EuiFlexItem>
+                        <EuiTitle
+                          size="xxs"
+                        >
+                          <h3
+                            className="euiCollapsibleNavGroup__title"
+                            id="mockId__title"
+                          >
+                            Management
+                          </h3>
+                        </EuiTitle>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  }
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                  data-test-subj="collapsibleNavGroup-management"
+                  id="mockId"
+                  initialIsOpen={true}
+                  onToggle={[Function]}
+                  paddingSize="none"
+                >
+                  <div
+                    className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--withHeading"
+                    data-test-subj="collapsibleNavGroup-management"
+                    onToggle={[Function]}
+                  >
+                    <div
+                      className="euiAccordion__triggerWrapper"
+                    >
+                      <button
+                        aria-controls="mockId"
+                        aria-expanded={true}
+                        className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="euiAccordion__iconWrapper"
+                        >
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
+                          >
+                            <div
+                              className="euiAccordion__icon euiAccordion__icon-isOpen"
+                              data-euiicon-type="arrowRight"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                            >
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiTitle
+                                    size="xxs"
                                   >
-                                    <EuiResizeObserver
-                                      onResize={[Function]}
+                                    <h3
+                                      className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
                                     >
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            className="euiCollapsibleNavGroup__children"
-                                          >
-                                            <EuiListGroup
-                                              aria-label="Primary navigation links, Management"
-                                              color="subdued"
-                                              gutterSize="none"
-                                              listItems={
-                                                Array [
-                                                  Object {
-                                                    "data-test-subj": "collapsibleNavAppLink",
-                                                    "href": "monitoring",
-                                                    "isActive": false,
-                                                    "isDisabled": undefined,
-                                                    "label": "monitoring",
-                                                    "onClick": [Function],
-                                                  },
-                                                ]
-                                              }
-                                              maxWidth="none"
-                                              size="s"
-                                            >
-                                              <ul
-                                                aria-label="Primary navigation links, Management"
-                                                className="euiListGroup"
-                                                style={
-                                                  Object {
-                                                    "maxWidth": "none",
-                                                  }
-                                                }
-                                              >
-                                                <EuiListGroupItem
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink"
-                                                  href="monitoring"
-                                                  isActive={false}
-                                                  key="title-0"
-                                                  label="monitoring"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink"
-                                                      href="monitoring"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="monitoring"
-                                                      >
-                                                        monitoring
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                              </ul>
-                                            </EuiListGroup>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </EuiResizeObserver>
-                                  </div>
+                                      Management
+                                    </h3>
+                                  </EuiTitle>
                                 </div>
-                              </EuiAccordion>
-                            </EuiCollapsibleNavGroup>
-                            <EuiCollapsibleNavGroup
-                              data-test-subj="collapsibleNavGroup-noCategory"
-                              key="0"
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="euiAccordion__childWrapper"
+                      id="mockId"
+                    >
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <div
+                              className="euiCollapsibleNavGroup__children"
                             >
-                              <div
-                                className="euiCollapsibleNavGroup"
-                                data-test-subj="collapsibleNavGroup-noCategory"
-                                id="mockId"
+                              <EuiListGroup
+                                aria-label="Primary navigation links, Management"
+                                color="subdued"
+                                gutterSize="none"
+                                listItems={
+                                  Array [
+                                    Object {
+                                      "data-test-subj": "collapsibleNavAppLink",
+                                      "href": "monitoring",
+                                      "isActive": false,
+                                      "isDisabled": undefined,
+                                      "label": "monitoring",
+                                      "onClick": [Function],
+                                    },
+                                  ]
+                                }
+                                maxWidth="none"
+                                size="s"
                               >
-                                <div
-                                  className="euiCollapsibleNavGroup__children"
+                                <ul
+                                  aria-label="Primary navigation links, Management"
+                                  className="euiListGroup"
+                                  style={
+                                    Object {
+                                      "maxWidth": "none",
+                                    }
+                                  }
                                 >
-                                  <EuiListGroup
-                                    flush={true}
+                                  <EuiListGroupItem
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink"
+                                    href="monitoring"
+                                    isActive={false}
+                                    key="title-0"
+                                    label="monitoring"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    wrapText={false}
                                   >
-                                    <ul
-                                      className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <EuiListGroupItem
-                                        color="text"
+                                      <a
+                                        className="euiListGroupItem__button"
                                         data-test-subj="collapsibleNavAppLink"
-                                        href="canvas"
-                                        isActive={false}
-                                        label="canvas"
+                                        href="monitoring"
                                         onClick={[Function]}
-                                        size="s"
+                                        rel="noreferrer"
                                       >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="monitoring"
                                         >
-                                          <a
-                                            className="euiListGroupItem__button"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            href="canvas"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                          >
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="canvas"
-                                            >
-                                              canvas
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
-                                </div>
-                              </div>
-                            </EuiCollapsibleNavGroup>
-                            <EuiShowFor
-                              sizes={
-                                Array [
-                                  "l",
-                                  "xl",
-                                ]
-                              }
+                                          monitoring
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                </ul>
+                              </EuiListGroup>
+                            </div>
+                          </div>
+                        </div>
+                      </EuiResizeObserver>
+                    </div>
+                  </div>
+                </EuiAccordion>
+              </EuiCollapsibleNavGroup>
+              <EuiCollapsibleNavGroup
+                data-test-subj="collapsibleNavGroup-noCategory"
+                key="0"
+              >
+                <div
+                  className="euiCollapsibleNavGroup"
+                  data-test-subj="collapsibleNavGroup-noCategory"
+                  id="mockId"
+                >
+                  <div
+                    className="euiCollapsibleNavGroup__children"
+                  >
+                    <EuiListGroup
+                      flush={true}
+                    >
+                      <ul
+                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                      >
+                        <EuiListGroupItem
+                          color="text"
+                          data-test-subj="collapsibleNavAppLink"
+                          href="canvas"
+                          isActive={false}
+                          label="canvas"
+                          onClick={[Function]}
+                          size="s"
+                        >
+                          <li
+                            className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                          >
+                            <a
+                              className="euiListGroupItem__button"
+                              data-test-subj="collapsibleNavAppLink"
+                              href="canvas"
+                              onClick={[Function]}
+                              rel="noreferrer"
                             >
-                              <EuiCollapsibleNavGroup
-                                className="eui-showFor--l eui-showFor--xl"
-                                key=".0"
+                              <span
+                                className="euiListGroupItem__label"
+                                title="canvas"
                               >
-                                <div
-                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                  id="mockId"
+                                canvas
+                              </span>
+                            </a>
+                          </li>
+                        </EuiListGroupItem>
+                      </ul>
+                    </EuiListGroup>
+                  </div>
+                </div>
+              </EuiCollapsibleNavGroup>
+              <EuiShowFor
+                sizes={
+                  Array [
+                    "l",
+                    "xl",
+                  ]
+                }
+              >
+                <EuiCollapsibleNavGroup
+                  className="eui-showFor--l eui-showFor--xl"
+                  key=".0"
+                >
+                  <div
+                    className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                    id="mockId"
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup__children"
+                    >
+                      <EuiListGroup
+                        flush={true}
+                      >
+                        <ul
+                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                        >
+                          <EuiListGroupItem
+                            aria-label="Dock primary navigation"
+                            buttonRef={
+                              Object {
+                                "current": <button
+                                  aria-label="Dock primary navigation"
+                                  class="euiListGroupItem__button"
+                                  data-test-subj="collapsible-nav-lock"
+                                  type="button"
                                 >
                                   <div
-                                    className="euiCollapsibleNavGroup__children"
+                                    class="euiListGroupItem__icon"
+                                    data-euiicon-type="lockOpen"
+                                  />
+                                  <span
+                                    class="euiListGroupItem__label"
+                                    title="Dock navigation"
                                   >
-                                    <EuiListGroup
-                                      flush={true}
-                                    >
-                                      <ul
-                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                      >
-                                        <EuiListGroupItem
-                                          aria-label="Dock primary navigation"
-                                          buttonRef={
-                                            Object {
-                                              "current": <button
-                                                aria-label="Dock primary navigation"
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsible-nav-lock"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiListGroupItem__icon"
-                                                  data-euiicon-type="lockOpen"
-                                                />
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="Dock navigation"
-                                                >
-                                                  Dock navigation
-                                                </span>
-                                              </button>,
-                                            }
-                                          }
-                                          color="subdued"
-                                          data-test-subj="collapsible-nav-lock"
-                                          iconType="lockOpen"
-                                          label="Dock navigation"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <li
-                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <button
-                                              aria-label="Dock primary navigation"
-                                              className="euiListGroupItem__button"
-                                              data-test-subj="collapsible-nav-lock"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiIcon
-                                                className="euiListGroupItem__icon"
-                                                type="lockOpen"
-                                              >
-                                                <div
-                                                  className="euiListGroupItem__icon"
-                                                  data-euiicon-type="lockOpen"
-                                                />
-                                              </EuiIcon>
-                                              <span
-                                                className="euiListGroupItem__label"
-                                                title="Dock navigation"
-                                              >
-                                                Dock navigation
-                                              </span>
-                                            </button>
-                                          </li>
-                                        </EuiListGroupItem>
-                                      </ul>
-                                    </EuiListGroup>
-                                  </div>
-                                </div>
-                              </EuiCollapsibleNavGroup>
-                            </EuiShowFor>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiScreenReaderOnly
-                          showOnFocus={true}
-                        >
-                          <EuiButtonEmpty
-                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            iconType="cross"
-                            onClick={[Function]}
-                            size="xs"
-                            textProps={
-                              Object {
-                                "className": "euiCollapsibleNav__closeButtonText",
+                                    Dock navigation
+                                  </span>
+                                </button>,
                               }
                             }
+                            color="subdued"
+                            data-test-subj="collapsible-nav-lock"
+                            iconType="lockOpen"
+                            label="Dock navigation"
+                            onClick={[Function]}
+                            size="xs"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                              onClick={[Function]}
-                              type="button"
+                            <li
+                              className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                             >
-                              <EuiButtonContent
-                                className="euiButtonEmpty__content"
-                                iconSide="left"
-                                iconType="cross"
-                                textProps={
-                                  Object {
-                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
-                                  }
-                                }
+                              <button
+                                aria-label="Dock primary navigation"
+                                className="euiListGroupItem__button"
+                                data-test-subj="collapsible-nav-lock"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
                               >
+                                <EuiIcon
+                                  className="euiListGroupItem__icon"
+                                  type="lockOpen"
+                                >
+                                  <div
+                                    className="euiListGroupItem__icon"
+                                    data-euiicon-type="lockOpen"
+                                  />
+                                </EuiIcon>
                                 <span
-                                  className="euiButtonContent euiButtonEmpty__content"
+                                  className="euiListGroupItem__label"
+                                  title="Dock navigation"
                                 >
-                                  <EuiIcon
-                                    className="euiButtonContent__icon"
-                                    size="m"
-                                    type="cross"
-                                  >
-                                    <div
-                                      className="euiButtonContent__icon"
-                                      data-euiicon-type="cross"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                  >
-                                    <EuiI18n
-                                      default="close"
-                                      token="euiCollapsibleNav.closeButtonLabel"
-                                    >
-                                      close
-                                    </EuiI18n>
-                                  </span>
+                                  Dock navigation
                                 </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonEmpty>
-                        </EuiScreenReaderOnly>
-                      </nav>
+                              </button>
+                            </li>
+                          </EuiListGroupItem>
+                        </ul>
+                      </EuiListGroup>
                     </div>
-                  </ForwardRef>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
-                  />
-                </ForwardRef>
-                <RequireSideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
+                  </div>
+                </EuiCollapsibleNavGroup>
+              </EuiShowFor>
+            </div>
+          </EuiFlexItem>
+          <EuiScreenReaderOnly
+            showOnFocus={true}
+          >
+            <EuiButtonEmpty
+              className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+              iconType="cross"
+              onClick={[Function]}
+              size="xs"
+              textProps={
+                Object {
+                  "className": "euiCollapsibleNav__closeButtonText",
+                }
+              }
+            >
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="left"
+                  iconType="cross"
+                  textProps={
                     Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
+                      "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
                     }
                   }
                 >
-                  <SideCar
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
+                  <span
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
-                    <Effect
-                      noIsolation={true}
-                      setLockProps={[Function]}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      size="m"
+                      type="cross"
                     >
-                      <Component>
-                        <Sheet
-                          styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                        />
-                      </Component>
-                    </Effect>
-                  </SideCar>
-                </RequireSideCar>
-              </ForwardRef>
-            </ForwardRef>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
+                      <div
+                        className="euiButtonContent__icon"
+                        data-euiicon-type="cross"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                    >
+                      <EuiI18n
+                        default="close"
+                        token="euiCollapsibleNav.closeButtonLabel"
+                      >
+                        close
+                      </EuiI18n>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiScreenReaderOnly>
+        </nav>
+      </div>
     </EuiFocusTrap>
   </EuiCollapsibleNav>
 </CollapsibleNav>
@@ -5439,621 +2471,442 @@ exports[`CollapsibleNav renders the default nav 2`] = `
       clickOutsideDisables={true}
       disabled={false}
     >
-      <EuiOutsideClickDetector
-        isDisabled={false}
-        onOutsideClick={[Function]}
+      <div
+        data-eui="EuiFocusTrap"
       >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <nav
+          aria-label="Primary"
+          className="euiCollapsibleNav"
+          data-test-subj="collapsibleNav"
+          id="collapsibe-nav"
         >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "flexShrink": 0,
+              }
+            }
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
             >
-              <ForwardRef
-                enabled={true}
-                noIsolation={true}
-                returnFocus={true}
-                scrollLock={false}
-                sideCar={[Function]}
-              >
-                <ForwardRef
-                  as={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "classNames": Object {
-                        "fullWidth": "width-before-scroll-bar",
-                        "zeroRight": "right-scroll-bar-position",
-                      },
-                      "defaultProps": Object {
-                        "enabled": true,
-                        "inert": false,
-                        "removeScrollBar": true,
-                      },
-                      "render": [Function],
-                    }
+              <EuiCollapsibleNavGroup
+                background="light"
+                className="eui-yScroll"
+                style={
+                  Object {
+                    "maxHeight": "40vh",
                   }
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={true}
-                  lockProps={
+                }
+              >
+                <div
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                  id="mockId"
+                  style={
                     Object {
-                      "allowPinchZoom": undefined,
-                      "enabled": false,
-                      "inert": undefined,
-                      "shards": undefined,
-                      "sideCar": [Function],
+                      "maxHeight": "40vh",
                     }
                   }
-                  noFocusGuards={false}
-                  persistentFocus={false}
-                  returnFocus={true}
-                  sideCar={[Function]}
                 >
                   <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                  <ForwardRef
-                    data-focus-lock-disabled="disabled"
-                    enabled={false}
-                    inert={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    removeScrollBar={true}
-                    sideCar={[Function]}
+                    className="euiCollapsibleNavGroup__children"
                   >
-                    <div
-                      data-focus-lock-disabled="disabled"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onScrollCapture={[Function]}
-                      onTouchMoveCapture={[Function]}
-                      onWheelCapture={[Function]}
+                    <EuiListGroup
+                      aria-label="Pinned links"
+                      color="text"
+                      gutterSize="none"
+                      listItems={
+                        Array [
+                          Object {
+                            "href": "/",
+                            "iconType": "home",
+                            "label": "Home",
+                            "onClick": [Function],
+                          },
+                        ]
+                      }
+                      maxWidth="none"
+                      size="s"
                     >
-                      <nav
-                        aria-label="Primary"
-                        className="euiCollapsibleNav"
-                        data-test-subj="collapsibleNav"
-                        id="collapsibe-nav"
-                      >
-                        <EuiFlexItem
-                          grow={false}
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
+                      <ul
+                        aria-label="Pinned links"
+                        className="euiListGroup"
+                        style={
+                          Object {
+                            "maxWidth": "none",
                           }
+                        }
+                      >
+                        <EuiListGroupItem
+                          color="text"
+                          href="/"
+                          iconType="home"
+                          key="title-0"
+                          label="Home"
+                          onClick={[Function]}
+                          showToolTip={false}
+                          size="s"
+                          wrapText={false}
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
-                            style={
-                              Object {
-                                "flexShrink": 0,
-                              }
-                            }
+                          <li
+                            className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                           >
-                            <EuiCollapsibleNavGroup
-                              background="light"
-                              className="eui-yScroll"
-                              style={
-                                Object {
-                                  "maxHeight": "40vh",
-                                }
-                              }
+                            <a
+                              className="euiListGroupItem__button"
+                              href="/"
+                              onClick={[Function]}
+                              rel="noreferrer"
                             >
-                              <div
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style={
-                                  Object {
-                                    "maxHeight": "40vh",
-                                  }
-                                }
+                              <EuiIcon
+                                className="euiListGroupItem__icon"
+                                type="home"
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup__children"
-                                >
-                                  <EuiListGroup
-                                    aria-label="Pinned links"
-                                    color="text"
-                                    gutterSize="none"
-                                    listItems={
-                                      Array [
-                                        Object {
-                                          "href": "/",
-                                          "iconType": "home",
-                                          "label": "Home",
-                                          "onClick": [Function],
-                                        },
-                                      ]
-                                    }
-                                    maxWidth="none"
-                                    size="s"
-                                  >
-                                    <ul
-                                      aria-label="Pinned links"
-                                      className="euiListGroup"
-                                      style={
-                                        Object {
-                                          "maxWidth": "none",
-                                        }
-                                      }
-                                    >
-                                      <EuiListGroupItem
-                                        color="text"
-                                        href="/"
-                                        iconType="home"
-                                        key="title-0"
-                                        label="Home"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        wrapText={false}
-                                      >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            className="euiListGroupItem__button"
-                                            href="/"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                          >
-                                            <EuiIcon
-                                              className="euiListGroupItem__icon"
-                                              type="home"
-                                            >
-                                              <div
-                                                className="euiListGroupItem__icon"
-                                                data-euiicon-type="home"
-                                              />
-                                            </EuiIcon>
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="Home"
-                                            >
-                                              Home
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
-                                </div>
-                              </div>
-                            </EuiCollapsibleNavGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiCollapsibleNavGroup
-                          background="light"
-                          data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          initialIsOpen={true}
-                          isCollapsible={true}
-                          key="recentlyViewed"
-                          onToggle={[Function]}
-                          title="Recently viewed"
-                        >
-                          <EuiAccordion
-                            arrowDisplay="right"
-                            buttonClassName="euiCollapsibleNavGroup__heading"
-                            buttonContent={
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
+                                  className="euiListGroupItem__icon"
+                                  data-euiicon-type="home"
+                                />
+                              </EuiIcon>
+                              <span
+                                className="euiListGroupItem__label"
+                                title="Home"
                               >
-                                <EuiFlexItem>
-                                  <EuiTitle
-                                    size="xxs"
-                                  >
-                                    <h3
-                                      className="euiCollapsibleNavGroup__title"
-                                      id="mockId__title"
-                                    >
-                                      Recently viewed
-                                    </h3>
-                                  </EuiTitle>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
-                            }
-                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            id="mockId"
-                            initialIsOpen={true}
-                            onToggle={[Function]}
-                            paddingSize="none"
-                          >
+                                Home
+                              </span>
+                            </a>
+                          </li>
+                        </EuiListGroupItem>
+                      </ul>
+                    </EuiListGroup>
+                  </div>
+                </div>
+              </EuiCollapsibleNavGroup>
+            </div>
+          </EuiFlexItem>
+          <EuiCollapsibleNavGroup
+            background="light"
+            data-test-subj="collapsibleNavGroup-recentlyViewed"
+            initialIsOpen={true}
+            isCollapsible={true}
+            key="recentlyViewed"
+            onToggle={[Function]}
+            title="Recently viewed"
+          >
+            <EuiAccordion
+              arrowDisplay="right"
+              buttonClassName="euiCollapsibleNavGroup__heading"
+              buttonContent={
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="m"
+                  responsive={false}
+                >
+                  <EuiFlexItem>
+                    <EuiTitle
+                      size="xxs"
+                    >
+                      <h3
+                        className="euiCollapsibleNavGroup__title"
+                        id="mockId__title"
+                      >
+                        Recently viewed
+                      </h3>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+              data-test-subj="collapsibleNavGroup-recentlyViewed"
+              id="mockId"
+              initialIsOpen={true}
+              onToggle={[Function]}
+              paddingSize="none"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                data-test-subj="collapsibleNavGroup-recentlyViewed"
+                onToggle={[Function]}
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="mockId"
+                    aria-expanded={true}
+                    className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <span
+                      className="euiAccordion__iconWrapper"
+                    >
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
+                      >
+                        <div
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          data-euiicon-type="arrowRight"
+                          size="m"
+                        />
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
+                        >
+                          <EuiFlexItem>
                             <div
-                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              onToggle={[Function]}
+                              className="euiFlexItem"
                             >
-                              <div
-                                className="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded={true}
-                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  onClick={[Function]}
-                                  type="button"
-                                >
-                                  <span
-                                    className="euiAccordion__iconWrapper"
-                                  >
-                                    <EuiIcon
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      size="m"
-                                      type="arrowRight"
-                                    >
-                                      <div
-                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                        size="m"
-                                      />
-                                    </EuiIcon>
-                                  </span>
-                                  <span
-                                    className="euiIEFlexWrapFix"
-                                  >
-                                    <EuiFlexGroup
-                                      alignItems="center"
-                                      gutterSize="m"
-                                      responsive={false}
-                                    >
-                                      <div
-                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <EuiFlexItem>
-                                          <div
-                                            className="euiFlexItem"
-                                          >
-                                            <EuiTitle
-                                              size="xxs"
-                                            >
-                                              <h3
-                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Recently viewed
-                                              </h3>
-                                            </EuiTitle>
-                                          </div>
-                                        </EuiFlexItem>
-                                      </div>
-                                    </EuiFlexGroup>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                className="euiAccordion__childWrapper"
-                                id="mockId"
+                              <EuiTitle
+                                size="xxs"
                               >
-                                <EuiResizeObserver
-                                  onResize={[Function]}
+                                <h3
+                                  className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                  id="mockId__title"
                                 >
-                                  <div>
-                                    <div
-                                      className=""
-                                    >
-                                      <div
-                                        className="euiCollapsibleNavGroup__children"
-                                      >
-                                        <EuiText
-                                          color="subdued"
-                                          size="s"
-                                          style={
-                                            Object {
-                                              "padding": "0 8px 8px",
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiText euiText--small"
-                                            style={
-                                              Object {
-                                                "padding": "0 8px 8px",
-                                              }
-                                            }
-                                          >
-                                            <EuiTextColor
-                                              color="subdued"
-                                              component="div"
-                                            >
-                                              <div
-                                                className="euiTextColor euiTextColor--subdued"
-                                              >
-                                                <p>
-                                                  No recently viewed items
-                                                </p>
-                                              </div>
-                                            </EuiTextColor>
-                                          </div>
-                                        </EuiText>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </EuiResizeObserver>
-                              </div>
+                                  Recently viewed
+                                </h3>
+                              </EuiTitle>
                             </div>
-                          </EuiAccordion>
-                        </EuiCollapsibleNavGroup>
-                        <EuiHorizontalRule
-                          margin="none"
-                        >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                        </EuiHorizontalRule>
-                        <EuiFlexItem
-                          className="eui-yScroll"
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="euiAccordion__childWrapper"
+                  id="mockId"
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
+                  >
+                    <div>
+                      <div
+                        className=""
+                      >
+                        <div
+                          className="euiCollapsibleNavGroup__children"
                         >
-                          <div
-                            className="euiFlexItem eui-yScroll"
+                          <EuiText
+                            color="subdued"
+                            size="s"
+                            style={
+                              Object {
+                                "padding": "0 8px 8px",
+                              }
+                            }
                           >
-                            <EuiShowFor
-                              sizes={
-                                Array [
-                                  "l",
-                                  "xl",
-                                ]
+                            <div
+                              className="euiText euiText--small"
+                              style={
+                                Object {
+                                  "padding": "0 8px 8px",
+                                }
                               }
                             >
-                              <EuiCollapsibleNavGroup
-                                className="eui-showFor--l eui-showFor--xl"
-                                key=".0"
+                              <EuiTextColor
+                                color="subdued"
+                                component="div"
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                  id="mockId"
+                                  className="euiTextColor euiTextColor--subdued"
                                 >
-                                  <div
-                                    className="euiCollapsibleNavGroup__children"
-                                  >
-                                    <EuiListGroup
-                                      flush={true}
-                                    >
-                                      <ul
-                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                      >
-                                        <EuiListGroupItem
-                                          aria-label="Dock primary navigation"
-                                          buttonRef={
-                                            Object {
-                                              "current": <button
-                                                aria-label="Dock primary navigation"
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsible-nav-lock"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiListGroupItem__icon"
-                                                  data-euiicon-type="lockOpen"
-                                                />
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="Dock navigation"
-                                                >
-                                                  Dock navigation
-                                                </span>
-                                              </button>,
-                                            }
-                                          }
-                                          color="subdued"
-                                          data-test-subj="collapsible-nav-lock"
-                                          iconType="lockOpen"
-                                          label="Dock navigation"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <li
-                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <button
-                                              aria-label="Dock primary navigation"
-                                              className="euiListGroupItem__button"
-                                              data-test-subj="collapsible-nav-lock"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiIcon
-                                                className="euiListGroupItem__icon"
-                                                type="lockOpen"
-                                              >
-                                                <div
-                                                  className="euiListGroupItem__icon"
-                                                  data-euiicon-type="lockOpen"
-                                                />
-                                              </EuiIcon>
-                                              <span
-                                                className="euiListGroupItem__label"
-                                                title="Dock navigation"
-                                              >
-                                                Dock navigation
-                                              </span>
-                                            </button>
-                                          </li>
-                                        </EuiListGroupItem>
-                                      </ul>
-                                    </EuiListGroup>
-                                  </div>
+                                  <p>
+                                    No recently viewed items
+                                  </p>
                                 </div>
-                              </EuiCollapsibleNavGroup>
-                            </EuiShowFor>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiScreenReaderOnly
-                          showOnFocus={true}
+                              </EuiTextColor>
+                            </div>
+                          </EuiText>
+                        </div>
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+          </EuiCollapsibleNavGroup>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexItem
+            className="eui-yScroll"
+          >
+            <div
+              className="euiFlexItem eui-yScroll"
+            >
+              <EuiShowFor
+                sizes={
+                  Array [
+                    "l",
+                    "xl",
+                  ]
+                }
+              >
+                <EuiCollapsibleNavGroup
+                  className="eui-showFor--l eui-showFor--xl"
+                  key=".0"
+                >
+                  <div
+                    className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                    id="mockId"
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup__children"
+                    >
+                      <EuiListGroup
+                        flush={true}
+                      >
+                        <ul
+                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                         >
-                          <EuiButtonEmpty
-                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            iconType="cross"
-                            onClick={[Function]}
-                            size="xs"
-                            textProps={
+                          <EuiListGroupItem
+                            aria-label="Dock primary navigation"
+                            buttonRef={
                               Object {
-                                "className": "euiCollapsibleNav__closeButtonText",
+                                "current": <button
+                                  aria-label="Dock primary navigation"
+                                  class="euiListGroupItem__button"
+                                  data-test-subj="collapsible-nav-lock"
+                                  type="button"
+                                >
+                                  <div
+                                    class="euiListGroupItem__icon"
+                                    data-euiicon-type="lockOpen"
+                                  />
+                                  <span
+                                    class="euiListGroupItem__label"
+                                    title="Dock navigation"
+                                  >
+                                    Dock navigation
+                                  </span>
+                                </button>,
                               }
                             }
+                            color="subdued"
+                            data-test-subj="collapsible-nav-lock"
+                            iconType="lockOpen"
+                            label="Dock navigation"
+                            onClick={[Function]}
+                            size="xs"
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                              onClick={[Function]}
-                              type="button"
+                            <li
+                              className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                             >
-                              <EuiButtonContent
-                                className="euiButtonEmpty__content"
-                                iconSide="left"
-                                iconType="cross"
-                                textProps={
-                                  Object {
-                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
-                                  }
-                                }
+                              <button
+                                aria-label="Dock primary navigation"
+                                className="euiListGroupItem__button"
+                                data-test-subj="collapsible-nav-lock"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
                               >
+                                <EuiIcon
+                                  className="euiListGroupItem__icon"
+                                  type="lockOpen"
+                                >
+                                  <div
+                                    className="euiListGroupItem__icon"
+                                    data-euiicon-type="lockOpen"
+                                  />
+                                </EuiIcon>
                                 <span
-                                  className="euiButtonContent euiButtonEmpty__content"
+                                  className="euiListGroupItem__label"
+                                  title="Dock navigation"
                                 >
-                                  <EuiIcon
-                                    className="euiButtonContent__icon"
-                                    size="m"
-                                    type="cross"
-                                  >
-                                    <div
-                                      className="euiButtonContent__icon"
-                                      data-euiicon-type="cross"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                  >
-                                    <EuiI18n
-                                      default="close"
-                                      token="euiCollapsibleNav.closeButtonLabel"
-                                    >
-                                      close
-                                    </EuiI18n>
-                                  </span>
+                                  Dock navigation
                                 </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonEmpty>
-                        </EuiScreenReaderOnly>
-                      </nav>
+                              </button>
+                            </li>
+                          </EuiListGroupItem>
+                        </ul>
+                      </EuiListGroup>
                     </div>
-                  </ForwardRef>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                </ForwardRef>
-                <RequireSideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
+                  </div>
+                </EuiCollapsibleNavGroup>
+              </EuiShowFor>
+            </div>
+          </EuiFlexItem>
+          <EuiScreenReaderOnly
+            showOnFocus={true}
+          >
+            <EuiButtonEmpty
+              className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+              iconType="cross"
+              onClick={[Function]}
+              size="xs"
+              textProps={
+                Object {
+                  "className": "euiCollapsibleNav__closeButtonText",
+                }
+              }
+            >
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="left"
+                  iconType="cross"
+                  textProps={
                     Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
+                      "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
                     }
                   }
                 >
-                  <SideCar
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
+                  <span
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
-                    <Effect
-                      noIsolation={true}
-                      setLockProps={[Function]}
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      size="m"
+                      type="cross"
                     >
-                      <Component>
-                        <Sheet
-                          styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                        />
-                      </Component>
-                    </Effect>
-                  </SideCar>
-                </RequireSideCar>
-              </ForwardRef>
-            </ForwardRef>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
+                      <div
+                        className="euiButtonContent__icon"
+                        data-euiicon-type="cross"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                    >
+                      <EuiI18n
+                        default="close"
+                        token="euiCollapsibleNav.closeButtonLabel"
+                      >
+                        close
+                      </EuiI18n>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiScreenReaderOnly>
+        </nav>
+      </div>
     </EuiFocusTrap>
   </EuiCollapsibleNav>
 </CollapsibleNav>
@@ -6299,581 +3152,442 @@ exports[`CollapsibleNav renders the default nav 3`] = `
       clickOutsideDisables={true}
       disabled={true}
     >
-      <EuiOutsideClickDetector
-        isDisabled={true}
-        onOutsideClick={[Function]}
+      <div
+        data-eui="EuiFocusTrap"
       >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <nav
+          aria-label="Primary"
+          className="euiCollapsibleNav euiCollapsibleNav--isDocked"
+          data-test-subj="collapsibleNav"
+          id="collapsibe-nav"
         >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+          <EuiFlexItem
+            grow={false}
+            style={
+              Object {
+                "flexShrink": 0,
+              }
+            }
           >
-            <ForwardRef
-              enabled={false}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
+            <div
+              className="euiFlexItem euiFlexItem--flexGrowZero"
+              style={
+                Object {
+                  "flexShrink": 0,
+                }
+              }
             >
-              <ForwardRef
-                enabled={false}
-                noIsolation={true}
-                returnFocus={true}
-                scrollLock={false}
-                sideCar={[Function]}
-              >
-                <ForwardRef
-                  as={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "classNames": Object {
-                        "fullWidth": "width-before-scroll-bar",
-                        "zeroRight": "right-scroll-bar-position",
-                      },
-                      "defaultProps": Object {
-                        "enabled": true,
-                        "inert": false,
-                        "removeScrollBar": true,
-                      },
-                      "render": [Function],
-                    }
+              <EuiCollapsibleNavGroup
+                background="light"
+                className="eui-yScroll"
+                style={
+                  Object {
+                    "maxHeight": "40vh",
                   }
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={true}
-                  lockProps={
+                }
+              >
+                <div
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                  id="mockId"
+                  style={
                     Object {
-                      "allowPinchZoom": undefined,
-                      "enabled": false,
-                      "inert": undefined,
-                      "onMouseDown": [Function],
-                      "onTouchStart": [Function],
-                      "shards": undefined,
-                      "sideCar": [Function],
+                      "maxHeight": "40vh",
                     }
                   }
-                  noFocusGuards={false}
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={true}
-                  sideCar={[Function]}
                 >
                   <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={-1}
-                  />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
+                    className="euiCollapsibleNavGroup__children"
+                  >
+                    <EuiListGroup
+                      aria-label="Pinned links"
+                      color="text"
+                      gutterSize="none"
+                      listItems={
+                        Array [
+                          Object {
+                            "href": "/",
+                            "iconType": "home",
+                            "label": "Home",
+                            "onClick": [Function],
+                          },
+                        ]
                       }
-                    }
-                    tabIndex={-1}
-                  />
-                  <ForwardRef
-                    data-focus-lock-disabled="disabled"
-                    enabled={false}
-                    inert={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    removeScrollBar={true}
-                    sideCar={[Function]}
+                      maxWidth="none"
+                      size="s"
+                    >
+                      <ul
+                        aria-label="Pinned links"
+                        className="euiListGroup"
+                        style={
+                          Object {
+                            "maxWidth": "none",
+                          }
+                        }
+                      >
+                        <EuiListGroupItem
+                          color="text"
+                          href="/"
+                          iconType="home"
+                          key="title-0"
+                          label="Home"
+                          onClick={[Function]}
+                          showToolTip={false}
+                          size="s"
+                          wrapText={false}
+                        >
+                          <li
+                            className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                          >
+                            <a
+                              className="euiListGroupItem__button"
+                              href="/"
+                              onClick={[Function]}
+                              rel="noreferrer"
+                            >
+                              <EuiIcon
+                                className="euiListGroupItem__icon"
+                                type="home"
+                              >
+                                <div
+                                  className="euiListGroupItem__icon"
+                                  data-euiicon-type="home"
+                                />
+                              </EuiIcon>
+                              <span
+                                className="euiListGroupItem__label"
+                                title="Home"
+                              >
+                                Home
+                              </span>
+                            </a>
+                          </li>
+                        </EuiListGroupItem>
+                      </ul>
+                    </EuiListGroup>
+                  </div>
+                </div>
+              </EuiCollapsibleNavGroup>
+            </div>
+          </EuiFlexItem>
+          <EuiCollapsibleNavGroup
+            background="light"
+            data-test-subj="collapsibleNavGroup-recentlyViewed"
+            initialIsOpen={true}
+            isCollapsible={true}
+            key="recentlyViewed"
+            onToggle={[Function]}
+            title="Recently viewed"
+          >
+            <EuiAccordion
+              arrowDisplay="right"
+              buttonClassName="euiCollapsibleNavGroup__heading"
+              buttonContent={
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="m"
+                  responsive={false}
+                >
+                  <EuiFlexItem>
+                    <EuiTitle
+                      size="xxs"
+                    >
+                      <h3
+                        className="euiCollapsibleNavGroup__title"
+                        id="mockId__title"
+                      >
+                        Recently viewed
+                      </h3>
+                    </EuiTitle>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              }
+              className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+              data-test-subj="collapsibleNavGroup-recentlyViewed"
+              id="mockId"
+              initialIsOpen={true}
+              onToggle={[Function]}
+              paddingSize="none"
+            >
+              <div
+                className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                data-test-subj="collapsibleNavGroup-recentlyViewed"
+                onToggle={[Function]}
+              >
+                <div
+                  className="euiAccordion__triggerWrapper"
+                >
+                  <button
+                    aria-controls="mockId"
+                    aria-expanded={true}
+                    className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                    onClick={[Function]}
+                    type="button"
                   >
-                    <div
-                      data-focus-lock-disabled="disabled"
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onScrollCapture={[Function]}
-                      onTouchMoveCapture={[Function]}
-                      onTouchStart={[Function]}
-                      onWheelCapture={[Function]}
+                    <span
+                      className="euiAccordion__iconWrapper"
                     >
-                      <nav
-                        aria-label="Primary"
-                        className="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                        data-test-subj="collapsibleNav"
-                        id="collapsibe-nav"
+                      <EuiIcon
+                        className="euiAccordion__icon euiAccordion__icon-isOpen"
+                        size="m"
+                        type="arrowRight"
                       >
-                        <EuiFlexItem
-                          grow={false}
-                          style={
-                            Object {
-                              "flexShrink": 0,
-                            }
-                          }
+                        <div
+                          className="euiAccordion__icon euiAccordion__icon-isOpen"
+                          data-euiicon-type="arrowRight"
+                          size="m"
+                        />
+                      </EuiIcon>
+                    </span>
+                    <span
+                      className="euiIEFlexWrapFix"
+                    >
+                      <EuiFlexGroup
+                        alignItems="center"
+                        gutterSize="m"
+                        responsive={false}
+                      >
+                        <div
+                          className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                         >
-                          <div
-                            className="euiFlexItem euiFlexItem--flexGrowZero"
+                          <EuiFlexItem>
+                            <div
+                              className="euiFlexItem"
+                            >
+                              <EuiTitle
+                                size="xxs"
+                              >
+                                <h3
+                                  className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                  id="mockId__title"
+                                >
+                                  Recently viewed
+                                </h3>
+                              </EuiTitle>
+                            </div>
+                          </EuiFlexItem>
+                        </div>
+                      </EuiFlexGroup>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  className="euiAccordion__childWrapper"
+                  id="mockId"
+                >
+                  <EuiResizeObserver
+                    onResize={[Function]}
+                  >
+                    <div>
+                      <div
+                        className=""
+                      >
+                        <div
+                          className="euiCollapsibleNavGroup__children"
+                        >
+                          <EuiText
+                            color="subdued"
+                            size="s"
                             style={
                               Object {
-                                "flexShrink": 0,
+                                "padding": "0 8px 8px",
                               }
                             }
                           >
-                            <EuiCollapsibleNavGroup
-                              background="light"
-                              className="eui-yScroll"
+                            <div
+                              className="euiText euiText--small"
                               style={
                                 Object {
-                                  "maxHeight": "40vh",
+                                  "padding": "0 8px 8px",
                                 }
                               }
                             >
-                              <div
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                id="mockId"
-                                style={
-                                  Object {
-                                    "maxHeight": "40vh",
-                                  }
-                                }
+                              <EuiTextColor
+                                color="subdued"
+                                component="div"
                               >
                                 <div
-                                  className="euiCollapsibleNavGroup__children"
+                                  className="euiTextColor euiTextColor--subdued"
                                 >
-                                  <EuiListGroup
-                                    aria-label="Pinned links"
-                                    color="text"
-                                    gutterSize="none"
-                                    listItems={
-                                      Array [
-                                        Object {
-                                          "href": "/",
-                                          "iconType": "home",
-                                          "label": "Home",
-                                          "onClick": [Function],
-                                        },
-                                      ]
-                                    }
-                                    maxWidth="none"
-                                    size="s"
-                                  >
-                                    <ul
-                                      aria-label="Pinned links"
-                                      className="euiListGroup"
-                                      style={
-                                        Object {
-                                          "maxWidth": "none",
-                                        }
-                                      }
-                                    >
-                                      <EuiListGroupItem
-                                        color="text"
-                                        href="/"
-                                        iconType="home"
-                                        key="title-0"
-                                        label="Home"
-                                        onClick={[Function]}
-                                        showToolTip={false}
-                                        size="s"
-                                        wrapText={false}
-                                      >
-                                        <li
-                                          className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                        >
-                                          <a
-                                            className="euiListGroupItem__button"
-                                            href="/"
-                                            onClick={[Function]}
-                                            rel="noreferrer"
-                                          >
-                                            <EuiIcon
-                                              className="euiListGroupItem__icon"
-                                              type="home"
-                                            >
-                                              <div
-                                                className="euiListGroupItem__icon"
-                                                data-euiicon-type="home"
-                                              />
-                                            </EuiIcon>
-                                            <span
-                                              className="euiListGroupItem__label"
-                                              title="Home"
-                                            >
-                                              Home
-                                            </span>
-                                          </a>
-                                        </li>
-                                      </EuiListGroupItem>
-                                    </ul>
-                                  </EuiListGroup>
+                                  <p>
+                                    No recently viewed items
+                                  </p>
                                 </div>
-                              </div>
-                            </EuiCollapsibleNavGroup>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiCollapsibleNavGroup
-                          background="light"
-                          data-test-subj="collapsibleNavGroup-recentlyViewed"
-                          initialIsOpen={true}
-                          isCollapsible={true}
-                          key="recentlyViewed"
-                          onToggle={[Function]}
-                          title="Recently viewed"
+                              </EuiTextColor>
+                            </div>
+                          </EuiText>
+                        </div>
+                      </div>
+                    </div>
+                  </EuiResizeObserver>
+                </div>
+              </div>
+            </EuiAccordion>
+          </EuiCollapsibleNavGroup>
+          <EuiHorizontalRule
+            margin="none"
+          >
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full"
+            />
+          </EuiHorizontalRule>
+          <EuiFlexItem
+            className="eui-yScroll"
+          >
+            <div
+              className="euiFlexItem eui-yScroll"
+            >
+              <EuiShowFor
+                sizes={
+                  Array [
+                    "l",
+                    "xl",
+                  ]
+                }
+              >
+                <EuiCollapsibleNavGroup
+                  className="eui-showFor--l eui-showFor--xl"
+                  key=".0"
+                >
+                  <div
+                    className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                    id="mockId"
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup__children"
+                    >
+                      <EuiListGroup
+                        flush={true}
+                      >
+                        <ul
+                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
                         >
-                          <EuiAccordion
-                            arrowDisplay="right"
-                            buttonClassName="euiCollapsibleNavGroup__heading"
-                            buttonContent={
-                              <EuiFlexGroup
-                                alignItems="center"
-                                gutterSize="m"
-                                responsive={false}
-                              >
-                                <EuiFlexItem>
-                                  <EuiTitle
-                                    size="xxs"
-                                  >
-                                    <h3
-                                      className="euiCollapsibleNavGroup__title"
-                                      id="mockId__title"
-                                    >
-                                      Recently viewed
-                                    </h3>
-                                  </EuiTitle>
-                                </EuiFlexItem>
-                              </EuiFlexGroup>
-                            }
-                            className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                            data-test-subj="collapsibleNavGroup-recentlyViewed"
-                            id="mockId"
-                            initialIsOpen={true}
-                            onToggle={[Function]}
-                            paddingSize="none"
-                          >
-                            <div
-                              className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              onToggle={[Function]}
-                            >
-                              <div
-                                className="euiAccordion__triggerWrapper"
-                              >
-                                <button
-                                  aria-controls="mockId"
-                                  aria-expanded={true}
-                                  className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                  onClick={[Function]}
+                          <EuiListGroupItem
+                            aria-label="Undock primary navigation"
+                            buttonRef={
+                              Object {
+                                "current": <button
+                                  aria-label="Undock primary navigation"
+                                  class="euiListGroupItem__button"
+                                  data-test-subj="collapsible-nav-lock"
                                   type="button"
                                 >
+                                  <div
+                                    class="euiListGroupItem__icon"
+                                    data-euiicon-type="lock"
+                                  />
                                   <span
-                                    className="euiAccordion__iconWrapper"
-                                  >
-                                    <EuiIcon
-                                      className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                      size="m"
-                                      type="arrowRight"
-                                    >
-                                      <div
-                                        className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                        data-euiicon-type="arrowRight"
-                                        size="m"
-                                      />
-                                    </EuiIcon>
-                                  </span>
-                                  <span
-                                    className="euiIEFlexWrapFix"
+                                    class="euiListGroupItem__label"
+                                    title="Undock navigation"
                                   >
-                                    <EuiFlexGroup
-                                      alignItems="center"
-                                      gutterSize="m"
-                                      responsive={false}
-                                    >
-                                      <div
-                                        className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                      >
-                                        <EuiFlexItem>
-                                          <div
-                                            className="euiFlexItem"
-                                          >
-                                            <EuiTitle
-                                              size="xxs"
-                                            >
-                                              <h3
-                                                className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                id="mockId__title"
-                                              >
-                                                Recently viewed
-                                              </h3>
-                                            </EuiTitle>
-                                          </div>
-                                        </EuiFlexItem>
-                                      </div>
-                                    </EuiFlexGroup>
+                                    Undock navigation
                                   </span>
-                                </button>
-                              </div>
-                              <div
-                                className="euiAccordion__childWrapper"
-                                id="mockId"
-                              >
-                                <EuiResizeObserver
-                                  onResize={[Function]}
-                                >
-                                  <div>
-                                    <div
-                                      className=""
-                                    >
-                                      <div
-                                        className="euiCollapsibleNavGroup__children"
-                                      >
-                                        <EuiText
-                                          color="subdued"
-                                          size="s"
-                                          style={
-                                            Object {
-                                              "padding": "0 8px 8px",
-                                            }
-                                          }
-                                        >
-                                          <div
-                                            className="euiText euiText--small"
-                                            style={
-                                              Object {
-                                                "padding": "0 8px 8px",
-                                              }
-                                            }
-                                          >
-                                            <EuiTextColor
-                                              color="subdued"
-                                              component="div"
-                                            >
-                                              <div
-                                                className="euiTextColor euiTextColor--subdued"
-                                              >
-                                                <p>
-                                                  No recently viewed items
-                                                </p>
-                                              </div>
-                                            </EuiTextColor>
-                                          </div>
-                                        </EuiText>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </EuiResizeObserver>
-                              </div>
-                            </div>
-                          </EuiAccordion>
-                        </EuiCollapsibleNavGroup>
-                        <EuiHorizontalRule
-                          margin="none"
-                        >
-                          <hr
-                            className="euiHorizontalRule euiHorizontalRule--full"
-                          />
-                        </EuiHorizontalRule>
-                        <EuiFlexItem
-                          className="eui-yScroll"
-                        >
-                          <div
-                            className="euiFlexItem eui-yScroll"
-                          >
-                            <EuiShowFor
-                              sizes={
-                                Array [
-                                  "l",
-                                  "xl",
-                                ]
+                                </button>,
                               }
-                            >
-                              <EuiCollapsibleNavGroup
-                                className="eui-showFor--l eui-showFor--xl"
-                                key=".0"
-                              >
-                                <div
-                                  className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                  id="mockId"
-                                >
-                                  <div
-                                    className="euiCollapsibleNavGroup__children"
-                                  >
-                                    <EuiListGroup
-                                      flush={true}
-                                    >
-                                      <ul
-                                        className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                      >
-                                        <EuiListGroupItem
-                                          aria-label="Undock primary navigation"
-                                          buttonRef={
-                                            Object {
-                                              "current": <button
-                                                aria-label="Undock primary navigation"
-                                                class="euiListGroupItem__button"
-                                                data-test-subj="collapsible-nav-lock"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiListGroupItem__icon"
-                                                  data-euiicon-type="lock"
-                                                />
-                                                <span
-                                                  class="euiListGroupItem__label"
-                                                  title="Undock navigation"
-                                                >
-                                                  Undock navigation
-                                                </span>
-                                              </button>,
-                                            }
-                                          }
-                                          color="subdued"
-                                          data-test-subj="collapsible-nav-lock"
-                                          iconType="lock"
-                                          label="Undock navigation"
-                                          onClick={[Function]}
-                                          size="xs"
-                                        >
-                                          <li
-                                            className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                          >
-                                            <button
-                                              aria-label="Undock primary navigation"
-                                              className="euiListGroupItem__button"
-                                              data-test-subj="collapsible-nav-lock"
-                                              disabled={false}
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <EuiIcon
-                                                className="euiListGroupItem__icon"
-                                                type="lock"
-                                              >
-                                                <div
-                                                  className="euiListGroupItem__icon"
-                                                  data-euiicon-type="lock"
-                                                />
-                                              </EuiIcon>
-                                              <span
-                                                className="euiListGroupItem__label"
-                                                title="Undock navigation"
-                                              >
-                                                Undock navigation
-                                              </span>
-                                            </button>
-                                          </li>
-                                        </EuiListGroupItem>
-                                      </ul>
-                                    </EuiListGroup>
-                                  </div>
-                                </div>
-                              </EuiCollapsibleNavGroup>
-                            </EuiShowFor>
-                          </div>
-                        </EuiFlexItem>
-                        <EuiScreenReaderOnly
-                          showOnFocus={true}
-                        >
-                          <EuiButtonEmpty
-                            className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                            iconType="cross"
+                            }
+                            color="subdued"
+                            data-test-subj="collapsible-nav-lock"
+                            iconType="lock"
+                            label="Undock navigation"
                             onClick={[Function]}
                             size="xs"
-                            textProps={
-                              Object {
-                                "className": "euiCollapsibleNav__closeButtonText",
-                              }
-                            }
                           >
-                            <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                              onClick={[Function]}
-                              type="button"
+                            <li
+                              className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                             >
-                              <EuiButtonContent
-                                className="euiButtonEmpty__content"
-                                iconSide="left"
-                                iconType="cross"
-                                textProps={
-                                  Object {
-                                    "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
-                                  }
-                                }
+                              <button
+                                aria-label="Undock primary navigation"
+                                className="euiListGroupItem__button"
+                                data-test-subj="collapsible-nav-lock"
+                                disabled={false}
+                                onClick={[Function]}
+                                type="button"
                               >
+                                <EuiIcon
+                                  className="euiListGroupItem__icon"
+                                  type="lock"
+                                >
+                                  <div
+                                    className="euiListGroupItem__icon"
+                                    data-euiicon-type="lock"
+                                  />
+                                </EuiIcon>
                                 <span
-                                  className="euiButtonContent euiButtonEmpty__content"
+                                  className="euiListGroupItem__label"
+                                  title="Undock navigation"
                                 >
-                                  <EuiIcon
-                                    className="euiButtonContent__icon"
-                                    size="m"
-                                    type="cross"
-                                  >
-                                    <div
-                                      className="euiButtonContent__icon"
-                                      data-euiicon-type="cross"
-                                      size="m"
-                                    />
-                                  </EuiIcon>
-                                  <span
-                                    className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                  >
-                                    <EuiI18n
-                                      default="close"
-                                      token="euiCollapsibleNav.closeButtonLabel"
-                                    >
-                                      close
-                                    </EuiI18n>
-                                  </span>
+                                  Undock navigation
                                 </span>
-                              </EuiButtonContent>
-                            </button>
-                          </EuiButtonEmpty>
-                        </EuiScreenReaderOnly>
-                      </nav>
+                              </button>
+                            </li>
+                          </EuiListGroupItem>
+                        </ul>
+                      </EuiListGroup>
                     </div>
-                  </ForwardRef>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
+                  </div>
+                </EuiCollapsibleNavGroup>
+              </EuiShowFor>
+            </div>
+          </EuiFlexItem>
+          <EuiScreenReaderOnly
+            showOnFocus={true}
+          >
+            <EuiButtonEmpty
+              className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+              iconType="cross"
+              onClick={[Function]}
+              size="xs"
+              textProps={
+                Object {
+                  "className": "euiCollapsibleNav__closeButtonText",
+                }
+              }
+            >
+              <button
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                onClick={[Function]}
+                type="button"
+              >
+                <EuiButtonContent
+                  className="euiButtonEmpty__content"
+                  iconSide="left"
+                  iconType="cross"
+                  textProps={
+                    Object {
+                      "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
                     }
-                    tabIndex={-1}
-                  />
-                </ForwardRef>
-              </ForwardRef>
-            </ForwardRef>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
+                  }
+                >
+                  <span
+                    className="euiButtonContent euiButtonEmpty__content"
+                  >
+                    <EuiIcon
+                      className="euiButtonContent__icon"
+                      size="m"
+                      type="cross"
+                    >
+                      <div
+                        className="euiButtonContent__icon"
+                        data-euiicon-type="cross"
+                        size="m"
+                      />
+                    </EuiIcon>
+                    <span
+                      className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                    >
+                      <EuiI18n
+                        default="close"
+                        token="euiCollapsibleNav.closeButtonLabel"
+                      >
+                        close
+                      </EuiI18n>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonEmpty>
+          </EuiScreenReaderOnly>
+        </nav>
+      </div>
     </EuiFocusTrap>
   </EuiCollapsibleNav>
 </CollapsibleNav>
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
index a1920154d9f71..c02a763c40101 100644
--- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
+++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
@@ -8999,766 +8999,635 @@ exports[`Header renders 3`] = `
           clickOutsideDisables={true}
           disabled={true}
         >
-          <EuiOutsideClickDetector
-            isDisabled={true}
-            onOutsideClick={[Function]}
+          <div
+            data-eui="EuiFocusTrap"
           >
-            <OutsideEventDetector
-              handleEvent={[Function]}
-              onMouseDown={[Function]}
-              onMouseUp={[Function]}
-              onTouchEnd={[Function]}
-              onTouchStart={[Function]}
+            <nav
+              aria-label="Primary"
+              className="euiCollapsibleNav euiCollapsibleNav--isDocked"
+              data-test-subj="collapsibleNav"
+              id="mockId"
             >
-              <div
-                onMouseDown={[Function]}
-                onMouseUp={[Function]}
-                onTouchEnd={[Function]}
-                onTouchStart={[Function]}
+              <EuiFlexItem
+                grow={false}
+                style={
+                  Object {
+                    "flexShrink": 0,
+                  }
+                }
               >
-                <ForwardRef
-                  enabled={false}
-                  noIsolation={true}
-                  returnFocus={true}
-                  scrollLock={false}
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                  style={
+                    Object {
+                      "flexShrink": 0,
+                    }
+                  }
                 >
-                  <ForwardRef
-                    enabled={false}
-                    noIsolation={true}
-                    returnFocus={true}
-                    scrollLock={false}
-                    sideCar={[Function]}
-                  >
-                    <ForwardRef
-                      as={
-                        Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "classNames": Object {
-                            "fullWidth": "width-before-scroll-bar",
-                            "zeroRight": "right-scroll-bar-position",
-                          },
-                          "defaultProps": Object {
-                            "enabled": true,
-                            "inert": false,
-                            "removeScrollBar": true,
-                          },
-                          "render": [Function],
-                        }
+                  <EuiCollapsibleNavGroup
+                    background="light"
+                    className="eui-yScroll"
+                    style={
+                      Object {
+                        "maxHeight": "40vh",
                       }
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={true}
-                      lockProps={
+                    }
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                      id="mockId"
+                      style={
                         Object {
-                          "allowPinchZoom": undefined,
-                          "enabled": false,
-                          "inert": undefined,
-                          "shards": undefined,
-                          "sideCar": [Function],
+                          "maxHeight": "40vh",
                         }
                       }
-                      noFocusGuards={false}
-                      persistentFocus={false}
-                      returnFocus={true}
-                      sideCar={[Function]}
                     >
                       <div
-                        data-focus-guard={true}
-                        key="guard-first"
-                        style={
-                          Object {
-                            "height": "0px",
-                            "left": "1px",
-                            "overflow": "hidden",
-                            "padding": 0,
-                            "position": "fixed",
-                            "top": "1px",
-                            "width": "1px",
+                        className="euiCollapsibleNavGroup__children"
+                      >
+                        <EuiListGroup
+                          color="text"
+                          gutterSize="none"
+                          listItems={
+                            Array [
+                              Object {
+                                "data-test-subj": "collapsibleNavCustomNavLink",
+                                "href": undefined,
+                                "icon": undefined,
+                                "iconType": undefined,
+                                "isActive": false,
+                                "isDisabled": undefined,
+                                "label": "Manage cloud deployment",
+                                "onClick": [Function],
+                              },
+                            ]
                           }
+                          maxWidth="none"
+                          size="s"
+                        >
+                          <ul
+                            className="euiListGroup"
+                            style={
+                              Object {
+                                "maxWidth": "none",
+                              }
+                            }
+                          >
+                            <EuiListGroupItem
+                              color="text"
+                              data-test-subj="collapsibleNavCustomNavLink"
+                              isActive={false}
+                              key="title-0"
+                              label="Manage cloud deployment"
+                              onClick={[Function]}
+                              showToolTip={false}
+                              size="s"
+                              wrapText={false}
+                            >
+                              <li
+                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
+                              >
+                                <button
+                                  className="euiListGroupItem__button"
+                                  data-test-subj="collapsibleNavCustomNavLink"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
+                                >
+                                  <span
+                                    className="euiListGroupItem__label"
+                                    title="Manage cloud deployment"
+                                  >
+                                    Manage cloud deployment
+                                  </span>
+                                </button>
+                              </li>
+                            </EuiListGroupItem>
+                          </ul>
+                        </EuiListGroup>
+                      </div>
+                    </div>
+                  </EuiCollapsibleNavGroup>
+                </div>
+              </EuiFlexItem>
+              <EuiHorizontalRule
+                margin="none"
+              >
+                <hr
+                  className="euiHorizontalRule euiHorizontalRule--full"
+                />
+              </EuiHorizontalRule>
+              <EuiFlexItem
+                grow={false}
+                style={
+                  Object {
+                    "flexShrink": 0,
+                  }
+                }
+              >
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                  style={
+                    Object {
+                      "flexShrink": 0,
+                    }
+                  }
+                >
+                  <EuiCollapsibleNavGroup
+                    background="light"
+                    className="eui-yScroll"
+                    style={
+                      Object {
+                        "maxHeight": "40vh",
+                      }
+                    }
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
+                      id="mockId"
+                      style={
+                        Object {
+                          "maxHeight": "40vh",
                         }
-                        tabIndex={-1}
-                      />
+                      }
+                    >
                       <div
-                        data-focus-guard={true}
-                        key="guard-nearest"
-                        style={
-                          Object {
-                            "height": "0px",
-                            "left": "1px",
-                            "overflow": "hidden",
-                            "padding": 0,
-                            "position": "fixed",
-                            "top": "1px",
-                            "width": "1px",
-                          }
-                        }
-                        tabIndex={-1}
-                      />
-                      <ForwardRef
-                        data-focus-lock-disabled="disabled"
-                        enabled={false}
-                        inert={false}
-                        onBlur={[Function]}
-                        onFocus={[Function]}
-                        removeScrollBar={true}
-                        sideCar={[Function]}
+                        className="euiCollapsibleNavGroup__children"
                       >
-                        <div
-                          data-focus-lock-disabled="disabled"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                          onScrollCapture={[Function]}
-                          onTouchMoveCapture={[Function]}
-                          onWheelCapture={[Function]}
+                        <EuiListGroup
+                          aria-label="Pinned links"
+                          color="text"
+                          gutterSize="none"
+                          listItems={
+                            Array [
+                              Object {
+                                "href": "/",
+                                "iconType": "home",
+                                "label": "Home",
+                                "onClick": [Function],
+                              },
+                            ]
+                          }
+                          maxWidth="none"
+                          size="s"
                         >
-                          <nav
-                            aria-label="Primary"
-                            className="euiCollapsibleNav euiCollapsibleNav--isDocked"
-                            data-test-subj="collapsibleNav"
-                            id="mockId"
-                          >
-                            <EuiFlexItem
-                              grow={false}
-                              style={
-                                Object {
-                                  "flexShrink": 0,
-                                }
+                          <ul
+                            aria-label="Pinned links"
+                            className="euiListGroup"
+                            style={
+                              Object {
+                                "maxWidth": "none",
                               }
+                            }
+                          >
+                            <EuiListGroupItem
+                              color="text"
+                              href="/"
+                              iconType="home"
+                              key="title-0"
+                              label="Home"
+                              onClick={[Function]}
+                              showToolTip={false}
+                              size="s"
+                              wrapText={false}
                             >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                                style={
-                                  Object {
-                                    "flexShrink": 0,
-                                  }
-                                }
+                              <li
+                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                               >
-                                <EuiCollapsibleNavGroup
-                                  background="light"
-                                  className="eui-yScroll"
-                                  style={
-                                    Object {
-                                      "maxHeight": "40vh",
-                                    }
-                                  }
+                                <a
+                                  className="euiListGroupItem__button"
+                                  href="/"
+                                  onClick={[Function]}
+                                  rel="noreferrer"
                                 >
-                                  <div
-                                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                    id="mockId"
-                                    style={
-                                      Object {
-                                        "maxHeight": "40vh",
-                                      }
-                                    }
+                                  <EuiIcon
+                                    className="euiListGroupItem__icon"
+                                    type="home"
                                   >
                                     <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        color="text"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "data-test-subj": "collapsibleNavCustomNavLink",
-                                              "href": undefined,
-                                              "icon": undefined,
-                                              "iconType": undefined,
-                                              "isActive": false,
-                                              "isDisabled": undefined,
-                                              "label": "Manage cloud deployment",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
-                                      >
-                                        <ul
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
-                                        >
-                                          <EuiListGroupItem
-                                            color="text"
-                                            data-test-subj="collapsibleNavCustomNavLink"
-                                            isActive={false}
-                                            key="title-0"
-                                            label="Manage cloud deployment"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
-                                          >
-                                            <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                            >
-                                              <button
-                                                className="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavCustomNavLink"
-                                                disabled={false}
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <span
-                                                  className="euiListGroupItem__label"
-                                                  title="Manage cloud deployment"
-                                                >
-                                                  Manage cloud deployment
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
-                                    </div>
-                                  </div>
-                                </EuiCollapsibleNavGroup>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiHorizontalRule
-                              margin="none"
+                                      className="euiListGroupItem__icon"
+                                      data-euiicon-type="home"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiListGroupItem__label"
+                                    title="Home"
+                                  >
+                                    Home
+                                  </span>
+                                </a>
+                              </li>
+                            </EuiListGroupItem>
+                          </ul>
+                        </EuiListGroup>
+                      </div>
+                    </div>
+                  </EuiCollapsibleNavGroup>
+                </div>
+              </EuiFlexItem>
+              <EuiCollapsibleNavGroup
+                background="light"
+                data-test-subj="collapsibleNavGroup-recentlyViewed"
+                initialIsOpen={true}
+                isCollapsible={true}
+                key="recentlyViewed"
+                onToggle={[Function]}
+                title="Recently viewed"
+              >
+                <EuiAccordion
+                  arrowDisplay="right"
+                  buttonClassName="euiCollapsibleNavGroup__heading"
+                  buttonContent={
+                    <EuiFlexGroup
+                      alignItems="center"
+                      gutterSize="m"
+                      responsive={false}
+                    >
+                      <EuiFlexItem>
+                        <EuiTitle
+                          size="xxs"
+                        >
+                          <h3
+                            className="euiCollapsibleNavGroup__title"
+                            id="mockId__title"
+                          >
+                            Recently viewed
+                          </h3>
+                        </EuiTitle>
+                      </EuiFlexItem>
+                    </EuiFlexGroup>
+                  }
+                  className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                  data-test-subj="collapsibleNavGroup-recentlyViewed"
+                  id="mockId"
+                  initialIsOpen={true}
+                  onToggle={[Function]}
+                  paddingSize="none"
+                >
+                  <div
+                    className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
+                    data-test-subj="collapsibleNavGroup-recentlyViewed"
+                    onToggle={[Function]}
+                  >
+                    <div
+                      className="euiAccordion__triggerWrapper"
+                    >
+                      <button
+                        aria-controls="mockId"
+                        aria-expanded={true}
+                        className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
+                        onClick={[Function]}
+                        type="button"
+                      >
+                        <span
+                          className="euiAccordion__iconWrapper"
+                        >
+                          <EuiIcon
+                            className="euiAccordion__icon euiAccordion__icon-isOpen"
+                            size="m"
+                            type="arrowRight"
+                          >
+                            <div
+                              className="euiAccordion__icon euiAccordion__icon-isOpen"
+                              data-euiicon-type="arrowRight"
+                              size="m"
+                            />
+                          </EuiIcon>
+                        </span>
+                        <span
+                          className="euiIEFlexWrapFix"
+                        >
+                          <EuiFlexGroup
+                            alignItems="center"
+                            gutterSize="m"
+                            responsive={false}
+                          >
+                            <div
+                              className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
                             >
-                              <hr
-                                className="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                            </EuiHorizontalRule>
-                            <EuiFlexItem
-                              grow={false}
-                              style={
-                                Object {
-                                  "flexShrink": 0,
-                                }
-                              }
+                              <EuiFlexItem>
+                                <div
+                                  className="euiFlexItem"
+                                >
+                                  <EuiTitle
+                                    size="xxs"
+                                  >
+                                    <h3
+                                      className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
+                                      id="mockId__title"
+                                    >
+                                      Recently viewed
+                                    </h3>
+                                  </EuiTitle>
+                                </div>
+                              </EuiFlexItem>
+                            </div>
+                          </EuiFlexGroup>
+                        </span>
+                      </button>
+                    </div>
+                    <div
+                      className="euiAccordion__childWrapper"
+                      id="mockId"
+                    >
+                      <EuiResizeObserver
+                        onResize={[Function]}
+                      >
+                        <div>
+                          <div
+                            className=""
+                          >
+                            <div
+                              className="euiCollapsibleNavGroup__children"
                             >
-                              <div
-                                className="euiFlexItem euiFlexItem--flexGrowZero"
-                                style={
-                                  Object {
-                                    "flexShrink": 0,
-                                  }
+                              <EuiListGroup
+                                aria-label="Recently viewed links"
+                                className="kbnCollapsibleNav__recentsListGroup"
+                                color="subdued"
+                                gutterSize="none"
+                                listItems={
+                                  Array [
+                                    Object {
+                                      "aria-label": "dashboard, type: kibana",
+                                      "data-test-subj": "collapsibleNavAppLink--recent",
+                                      "href": "http://localhost/",
+                                      "label": "dashboard",
+                                      "onClick": [Function],
+                                      "title": "dashboard, type: kibana",
+                                    },
+                                  ]
                                 }
+                                maxWidth="none"
+                                size="s"
                               >
-                                <EuiCollapsibleNavGroup
-                                  background="light"
-                                  className="eui-yScroll"
+                                <ul
+                                  aria-label="Recently viewed links"
+                                  className="euiListGroup kbnCollapsibleNav__recentsListGroup"
                                   style={
                                     Object {
-                                      "maxHeight": "40vh",
+                                      "maxWidth": "none",
                                     }
                                   }
                                 >
-                                  <div
-                                    className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light eui-yScroll"
-                                    id="mockId"
-                                    style={
-                                      Object {
-                                        "maxHeight": "40vh",
-                                      }
-                                    }
+                                  <EuiListGroupItem
+                                    aria-label="dashboard, type: kibana"
+                                    color="subdued"
+                                    data-test-subj="collapsibleNavAppLink--recent"
+                                    href="http://localhost/"
+                                    key="title-0"
+                                    label="dashboard"
+                                    onClick={[Function]}
+                                    showToolTip={false}
+                                    size="s"
+                                    title="dashboard, type: kibana"
+                                    wrapText={false}
                                   >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
+                                    <li
+                                      className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
                                     >
-                                      <EuiListGroup
-                                        aria-label="Pinned links"
-                                        color="text"
-                                        gutterSize="none"
-                                        listItems={
-                                          Array [
-                                            Object {
-                                              "href": "/",
-                                              "iconType": "home",
-                                              "label": "Home",
-                                              "onClick": [Function],
-                                            },
-                                          ]
-                                        }
-                                        maxWidth="none"
-                                        size="s"
+                                      <a
+                                        aria-label="dashboard, type: kibana"
+                                        className="euiListGroupItem__button"
+                                        data-test-subj="collapsibleNavAppLink--recent"
+                                        href="http://localhost/"
+                                        onClick={[Function]}
+                                        rel="noreferrer"
+                                        title="dashboard, type: kibana"
                                       >
-                                        <ul
-                                          aria-label="Pinned links"
-                                          className="euiListGroup"
-                                          style={
-                                            Object {
-                                              "maxWidth": "none",
-                                            }
-                                          }
+                                        <span
+                                          className="euiListGroupItem__label"
+                                          title="dashboard"
                                         >
-                                          <EuiListGroupItem
-                                            color="text"
-                                            href="/"
-                                            iconType="home"
-                                            key="title-0"
-                                            label="Home"
-                                            onClick={[Function]}
-                                            showToolTip={false}
-                                            size="s"
-                                            wrapText={false}
-                                          >
-                                            <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                            >
-                                              <a
-                                                className="euiListGroupItem__button"
-                                                href="/"
-                                                onClick={[Function]}
-                                                rel="noreferrer"
-                                              >
-                                                <EuiIcon
-                                                  className="euiListGroupItem__icon"
-                                                  type="home"
-                                                >
-                                                  <div
-                                                    className="euiListGroupItem__icon"
-                                                    data-euiicon-type="home"
-                                                  />
-                                                </EuiIcon>
-                                                <span
-                                                  className="euiListGroupItem__label"
-                                                  title="Home"
-                                                >
-                                                  Home
-                                                </span>
-                                              </a>
-                                            </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
-                                    </div>
-                                  </div>
-                                </EuiCollapsibleNavGroup>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiCollapsibleNavGroup
-                              background="light"
-                              data-test-subj="collapsibleNavGroup-recentlyViewed"
-                              initialIsOpen={true}
-                              isCollapsible={true}
-                              key="recentlyViewed"
-                              onToggle={[Function]}
-                              title="Recently viewed"
+                                          dashboard
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </EuiListGroupItem>
+                                </ul>
+                              </EuiListGroup>
+                            </div>
+                          </div>
+                        </div>
+                      </EuiResizeObserver>
+                    </div>
+                  </div>
+                </EuiAccordion>
+              </EuiCollapsibleNavGroup>
+              <EuiHorizontalRule
+                margin="none"
+              >
+                <hr
+                  className="euiHorizontalRule euiHorizontalRule--full"
+                />
+              </EuiHorizontalRule>
+              <EuiFlexItem
+                className="eui-yScroll"
+              >
+                <div
+                  className="euiFlexItem eui-yScroll"
+                >
+                  <EuiCollapsibleNavGroup
+                    data-test-subj="collapsibleNavGroup-noCategory"
+                    key="0"
+                  >
+                    <div
+                      className="euiCollapsibleNavGroup"
+                      data-test-subj="collapsibleNavGroup-noCategory"
+                      id="mockId"
+                    >
+                      <div
+                        className="euiCollapsibleNavGroup__children"
+                      >
+                        <EuiListGroup
+                          flush={true}
+                        >
+                          <ul
+                            className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                          >
+                            <EuiListGroupItem
+                              color="text"
+                              data-test-subj="collapsibleNavAppLink"
+                              isActive={false}
+                              label="kibana"
+                              onClick={[Function]}
+                              size="s"
                             >
-                              <EuiAccordion
-                                arrowDisplay="right"
-                                buttonClassName="euiCollapsibleNavGroup__heading"
-                                buttonContent={
-                                  <EuiFlexGroup
-                                    alignItems="center"
-                                    gutterSize="m"
-                                    responsive={false}
-                                  >
-                                    <EuiFlexItem>
-                                      <EuiTitle
-                                        size="xxs"
-                                      >
-                                        <h3
-                                          className="euiCollapsibleNavGroup__title"
-                                          id="mockId__title"
-                                        >
-                                          Recently viewed
-                                        </h3>
-                                      </EuiTitle>
-                                    </EuiFlexItem>
-                                  </EuiFlexGroup>
-                                }
-                                className="euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                                data-test-subj="collapsibleNavGroup-recentlyViewed"
-                                id="mockId"
-                                initialIsOpen={true}
-                                onToggle={[Function]}
-                                paddingSize="none"
+                              <li
+                                className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
                               >
-                                <div
-                                  className="euiAccordion euiAccordion-isOpen euiCollapsibleNavGroup euiCollapsibleNavGroup--light euiCollapsibleNavGroup--withHeading"
-                                  data-test-subj="collapsibleNavGroup-recentlyViewed"
-                                  onToggle={[Function]}
+                                <button
+                                  className="euiListGroupItem__button"
+                                  data-test-subj="collapsibleNavAppLink"
+                                  disabled={false}
+                                  onClick={[Function]}
+                                  type="button"
                                 >
-                                  <div
-                                    className="euiAccordion__triggerWrapper"
+                                  <span
+                                    className="euiListGroupItem__label"
+                                    title="kibana"
                                   >
-                                    <button
-                                      aria-controls="mockId"
-                                      aria-expanded={true}
-                                      className="euiAccordion__button euiAccordion__buttonReverse euiCollapsibleNavGroup__heading"
-                                      onClick={[Function]}
+                                    kibana
+                                  </span>
+                                </button>
+                              </li>
+                            </EuiListGroupItem>
+                          </ul>
+                        </EuiListGroup>
+                      </div>
+                    </div>
+                  </EuiCollapsibleNavGroup>
+                  <EuiShowFor
+                    sizes={
+                      Array [
+                        "l",
+                        "xl",
+                      ]
+                    }
+                  >
+                    <EuiCollapsibleNavGroup
+                      className="eui-showFor--l eui-showFor--xl"
+                      key=".0"
+                    >
+                      <div
+                        className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
+                        id="mockId"
+                      >
+                        <div
+                          className="euiCollapsibleNavGroup__children"
+                        >
+                          <EuiListGroup
+                            flush={true}
+                          >
+                            <ul
+                              className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
+                            >
+                              <EuiListGroupItem
+                                aria-label="Undock primary navigation"
+                                buttonRef={
+                                  Object {
+                                    "current": <button
+                                      aria-label="Undock primary navigation"
+                                      class="euiListGroupItem__button"
+                                      data-test-subj="collapsible-nav-lock"
                                       type="button"
                                     >
+                                      <div
+                                        class="euiListGroupItem__icon"
+                                        data-euiicon-type="lock"
+                                      />
                                       <span
-                                        className="euiAccordion__iconWrapper"
-                                      >
-                                        <EuiIcon
-                                          className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                          size="m"
-                                          type="arrowRight"
-                                        >
-                                          <div
-                                            className="euiAccordion__icon euiAccordion__icon-isOpen"
-                                            data-euiicon-type="arrowRight"
-                                            size="m"
-                                          />
-                                        </EuiIcon>
-                                      </span>
-                                      <span
-                                        className="euiIEFlexWrapFix"
+                                        class="euiListGroupItem__label"
+                                        title="Undock navigation"
                                       >
-                                        <EuiFlexGroup
-                                          alignItems="center"
-                                          gutterSize="m"
-                                          responsive={false}
-                                        >
-                                          <div
-                                            className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow"
-                                          >
-                                            <EuiFlexItem>
-                                              <div
-                                                className="euiFlexItem"
-                                              >
-                                                <EuiTitle
-                                                  size="xxs"
-                                                >
-                                                  <h3
-                                                    className="euiTitle euiTitle--xxsmall euiCollapsibleNavGroup__title"
-                                                    id="mockId__title"
-                                                  >
-                                                    Recently viewed
-                                                  </h3>
-                                                </EuiTitle>
-                                              </div>
-                                            </EuiFlexItem>
-                                          </div>
-                                        </EuiFlexGroup>
+                                        Undock navigation
                                       </span>
-                                    </button>
-                                  </div>
-                                  <div
-                                    className="euiAccordion__childWrapper"
-                                    id="mockId"
-                                  >
-                                    <EuiResizeObserver
-                                      onResize={[Function]}
-                                    >
-                                      <div>
-                                        <div
-                                          className=""
-                                        >
-                                          <div
-                                            className="euiCollapsibleNavGroup__children"
-                                          >
-                                            <EuiListGroup
-                                              aria-label="Recently viewed links"
-                                              className="kbnCollapsibleNav__recentsListGroup"
-                                              color="subdued"
-                                              gutterSize="none"
-                                              listItems={
-                                                Array [
-                                                  Object {
-                                                    "aria-label": "dashboard, type: kibana",
-                                                    "data-test-subj": "collapsibleNavAppLink--recent",
-                                                    "href": "http://localhost/",
-                                                    "label": "dashboard",
-                                                    "onClick": [Function],
-                                                    "title": "dashboard, type: kibana",
-                                                  },
-                                                ]
-                                              }
-                                              maxWidth="none"
-                                              size="s"
-                                            >
-                                              <ul
-                                                aria-label="Recently viewed links"
-                                                className="euiListGroup kbnCollapsibleNav__recentsListGroup"
-                                                style={
-                                                  Object {
-                                                    "maxWidth": "none",
-                                                  }
-                                                }
-                                              >
-                                                <EuiListGroupItem
-                                                  aria-label="dashboard, type: kibana"
-                                                  color="subdued"
-                                                  data-test-subj="collapsibleNavAppLink--recent"
-                                                  href="http://localhost/"
-                                                  key="title-0"
-                                                  label="dashboard"
-                                                  onClick={[Function]}
-                                                  showToolTip={false}
-                                                  size="s"
-                                                  title="dashboard, type: kibana"
-                                                  wrapText={false}
-                                                >
-                                                  <li
-                                                    className="euiListGroupItem euiListGroupItem--small euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                                  >
-                                                    <a
-                                                      aria-label="dashboard, type: kibana"
-                                                      className="euiListGroupItem__button"
-                                                      data-test-subj="collapsibleNavAppLink--recent"
-                                                      href="http://localhost/"
-                                                      onClick={[Function]}
-                                                      rel="noreferrer"
-                                                      title="dashboard, type: kibana"
-                                                    >
-                                                      <span
-                                                        className="euiListGroupItem__label"
-                                                        title="dashboard"
-                                                      >
-                                                        dashboard
-                                                      </span>
-                                                    </a>
-                                                  </li>
-                                                </EuiListGroupItem>
-                                              </ul>
-                                            </EuiListGroup>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </EuiResizeObserver>
-                                  </div>
-                                </div>
-                              </EuiAccordion>
-                            </EuiCollapsibleNavGroup>
-                            <EuiHorizontalRule
-                              margin="none"
-                            >
-                              <hr
-                                className="euiHorizontalRule euiHorizontalRule--full"
-                              />
-                            </EuiHorizontalRule>
-                            <EuiFlexItem
-                              className="eui-yScroll"
-                            >
-                              <div
-                                className="euiFlexItem eui-yScroll"
-                              >
-                                <EuiCollapsibleNavGroup
-                                  data-test-subj="collapsibleNavGroup-noCategory"
-                                  key="0"
-                                >
-                                  <div
-                                    className="euiCollapsibleNavGroup"
-                                    data-test-subj="collapsibleNavGroup-noCategory"
-                                    id="mockId"
-                                  >
-                                    <div
-                                      className="euiCollapsibleNavGroup__children"
-                                    >
-                                      <EuiListGroup
-                                        flush={true}
-                                      >
-                                        <ul
-                                          className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                        >
-                                          <EuiListGroupItem
-                                            color="text"
-                                            data-test-subj="collapsibleNavAppLink"
-                                            isActive={false}
-                                            label="kibana"
-                                            onClick={[Function]}
-                                            size="s"
-                                          >
-                                            <li
-                                              className="euiListGroupItem euiListGroupItem--small euiListGroupItem--text euiListGroupItem-isClickable"
-                                            >
-                                              <button
-                                                className="euiListGroupItem__button"
-                                                data-test-subj="collapsibleNavAppLink"
-                                                disabled={false}
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <span
-                                                  className="euiListGroupItem__label"
-                                                  title="kibana"
-                                                >
-                                                  kibana
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </EuiListGroupItem>
-                                        </ul>
-                                      </EuiListGroup>
-                                    </div>
-                                  </div>
-                                </EuiCollapsibleNavGroup>
-                                <EuiShowFor
-                                  sizes={
-                                    Array [
-                                      "l",
-                                      "xl",
-                                    ]
+                                    </button>,
                                   }
-                                >
-                                  <EuiCollapsibleNavGroup
-                                    className="eui-showFor--l eui-showFor--xl"
-                                    key=".0"
-                                  >
-                                    <div
-                                      className="euiCollapsibleNavGroup eui-showFor--l eui-showFor--xl"
-                                      id="mockId"
-                                    >
-                                      <div
-                                        className="euiCollapsibleNavGroup__children"
-                                      >
-                                        <EuiListGroup
-                                          flush={true}
-                                        >
-                                          <ul
-                                            className="euiListGroup euiListGroup-flush euiListGroup--gutterSmall euiListGroup-maxWidthDefault"
-                                          >
-                                            <EuiListGroupItem
-                                              aria-label="Undock primary navigation"
-                                              buttonRef={
-                                                Object {
-                                                  "current": <button
-                                                    aria-label="Undock primary navigation"
-                                                    class="euiListGroupItem__button"
-                                                    data-test-subj="collapsible-nav-lock"
-                                                    type="button"
-                                                  >
-                                                    <div
-                                                      class="euiListGroupItem__icon"
-                                                      data-euiicon-type="lock"
-                                                    />
-                                                    <span
-                                                      class="euiListGroupItem__label"
-                                                      title="Undock navigation"
-                                                    >
-                                                      Undock navigation
-                                                    </span>
-                                                  </button>,
-                                                }
-                                              }
-                                              color="subdued"
-                                              data-test-subj="collapsible-nav-lock"
-                                              iconType="lock"
-                                              label="Undock navigation"
-                                              onClick={[Function]}
-                                              size="xs"
-                                            >
-                                              <li
-                                                className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
-                                              >
-                                                <button
-                                                  aria-label="Undock primary navigation"
-                                                  className="euiListGroupItem__button"
-                                                  data-test-subj="collapsible-nav-lock"
-                                                  disabled={false}
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiIcon
-                                                    className="euiListGroupItem__icon"
-                                                    type="lock"
-                                                  >
-                                                    <div
-                                                      className="euiListGroupItem__icon"
-                                                      data-euiicon-type="lock"
-                                                    />
-                                                  </EuiIcon>
-                                                  <span
-                                                    className="euiListGroupItem__label"
-                                                    title="Undock navigation"
-                                                  >
-                                                    Undock navigation
-                                                  </span>
-                                                </button>
-                                              </li>
-                                            </EuiListGroupItem>
-                                          </ul>
-                                        </EuiListGroup>
-                                      </div>
-                                    </div>
-                                  </EuiCollapsibleNavGroup>
-                                </EuiShowFor>
-                              </div>
-                            </EuiFlexItem>
-                            <EuiScreenReaderOnly
-                              showOnFocus={true}
-                            >
-                              <EuiButtonEmpty
-                                className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                                iconType="cross"
+                                }
+                                color="subdued"
+                                data-test-subj="collapsible-nav-lock"
+                                iconType="lock"
+                                label="Undock navigation"
                                 onClick={[Function]}
                                 size="xs"
-                                textProps={
-                                  Object {
-                                    "className": "euiCollapsibleNav__closeButtonText",
-                                  }
-                                }
                               >
-                                <button
-                                  className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
-                                  onClick={[Function]}
-                                  type="button"
+                                <li
+                                  className="euiListGroupItem euiListGroupItem--xSmall euiListGroupItem--subdued euiListGroupItem-isClickable"
                                 >
-                                  <EuiButtonContent
-                                    className="euiButtonEmpty__content"
-                                    iconSide="left"
-                                    iconType="cross"
-                                    textProps={
-                                      Object {
-                                        "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
-                                      }
-                                    }
+                                  <button
+                                    aria-label="Undock primary navigation"
+                                    className="euiListGroupItem__button"
+                                    data-test-subj="collapsible-nav-lock"
+                                    disabled={false}
+                                    onClick={[Function]}
+                                    type="button"
                                   >
+                                    <EuiIcon
+                                      className="euiListGroupItem__icon"
+                                      type="lock"
+                                    >
+                                      <div
+                                        className="euiListGroupItem__icon"
+                                        data-euiicon-type="lock"
+                                      />
+                                    </EuiIcon>
                                     <span
-                                      className="euiButtonContent euiButtonEmpty__content"
+                                      className="euiListGroupItem__label"
+                                      title="Undock navigation"
                                     >
-                                      <EuiIcon
-                                        className="euiButtonContent__icon"
-                                        size="m"
-                                        type="cross"
-                                      >
-                                        <div
-                                          className="euiButtonContent__icon"
-                                          data-euiicon-type="cross"
-                                          size="m"
-                                        />
-                                      </EuiIcon>
-                                      <span
-                                        className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
-                                      >
-                                        <EuiI18n
-                                          default="close"
-                                          token="euiCollapsibleNav.closeButtonLabel"
-                                        >
-                                          close
-                                        </EuiI18n>
-                                      </span>
+                                      Undock navigation
                                     </span>
-                                  </EuiButtonContent>
-                                </button>
-                              </EuiButtonEmpty>
-                            </EuiScreenReaderOnly>
-                          </nav>
+                                  </button>
+                                </li>
+                              </EuiListGroupItem>
+                            </ul>
+                          </EuiListGroup>
                         </div>
-                      </ForwardRef>
-                      <div
-                        data-focus-guard={true}
-                        style={
-                          Object {
-                            "height": "0px",
-                            "left": "1px",
-                            "overflow": "hidden",
-                            "padding": 0,
-                            "position": "fixed",
-                            "top": "1px",
-                            "width": "1px",
-                          }
+                      </div>
+                    </EuiCollapsibleNavGroup>
+                  </EuiShowFor>
+                </div>
+              </EuiFlexItem>
+              <EuiScreenReaderOnly
+                showOnFocus={true}
+              >
+                <EuiButtonEmpty
+                  className="euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                  iconType="cross"
+                  onClick={[Function]}
+                  size="xs"
+                  textProps={
+                    Object {
+                      "className": "euiCollapsibleNav__closeButtonText",
+                    }
+                  }
+                >
+                  <button
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiScreenReaderOnly--showOnFocus euiCollapsibleNav__closeButton"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <EuiButtonContent
+                      className="euiButtonEmpty__content"
+                      iconSide="left"
+                      iconType="cross"
+                      textProps={
+                        Object {
+                          "className": "euiButtonEmpty__text euiCollapsibleNav__closeButtonText",
                         }
-                        tabIndex={-1}
-                      />
-                    </ForwardRef>
-                  </ForwardRef>
-                </ForwardRef>
-              </div>
-            </OutsideEventDetector>
-          </EuiOutsideClickDetector>
+                      }
+                    >
+                      <span
+                        className="euiButtonContent euiButtonEmpty__content"
+                      >
+                        <EuiIcon
+                          className="euiButtonContent__icon"
+                          size="m"
+                          type="cross"
+                        >
+                          <div
+                            className="euiButtonContent__icon"
+                            data-euiicon-type="cross"
+                            size="m"
+                          />
+                        </EuiIcon>
+                        <span
+                          className="euiButtonEmpty__text euiCollapsibleNav__closeButtonText"
+                        >
+                          <EuiI18n
+                            default="close"
+                            token="euiCollapsibleNav.closeButtonLabel"
+                          >
+                            close
+                          </EuiI18n>
+                        </span>
+                      </span>
+                    </EuiButtonContent>
+                  </button>
+                </EuiButtonEmpty>
+              </EuiScreenReaderOnly>
+            </nav>
+          </div>
         </EuiFocusTrap>
       </EuiCollapsibleNav>
     </CollapsibleNav>
diff --git a/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap b/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap
index fa83b34e06b81..a5c1d46f74709 100644
--- a/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap
+++ b/src/core/public/overlays/flyout/__snapshots__/flyout_service.test.tsx.snap
@@ -26,7 +26,7 @@ Array [
 ]
 `;
 
-exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div></div>"`;
+exports[`FlyoutService openFlyout() renders a flyout to the DOM 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content</span></div></div></div>"`;
 
 exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 1`] = `
 Array [
@@ -59,4 +59,4 @@ Array [
 ]
 `;
 
-exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div></div>"`;
+exports[`FlyoutService openFlyout() with a currently active flyout replaces the current flyout with a new one 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div role=\\"dialog\\" class=\\"euiFlyout euiFlyout--medium\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiFlyout__closeButton\\" type=\\"button\\" aria-label=\\"Close this dialog\\" data-test-subj=\\"euiFlyoutCloseButton\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"kbnOverlayMountWrapper\\"><span>Flyout content 2</span></div></div></div>"`;
diff --git a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
index fb00ddc38c6dc..aea52eb8e7ab7 100644
--- a/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
+++ b/src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap
@@ -31,7 +31,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div>"`;
 
 exports[`ModalService openConfirm() renders a string confirm message 1`] = `
 Array [
@@ -53,7 +53,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div>"`;
 
 exports[`ModalService openConfirm() with a currently active confirm replaces the current confirm with the new one 1`] = `
 Array [
@@ -145,7 +145,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openModal() renders a modal to the DOM 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openModal() renders a modal to the DOM 2`] = `"<div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiModal euiModal--maxWidth-default\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div>"`;
 
 exports[`ModalService openModal() with a currently active confirm replaces the current confirm with the new one 1`] = `
 Array [
diff --git a/src/dev/jest/config.js b/src/dev/jest/config.js
index d46b955f6668d..74e1ec5e2b4ed 100644
--- a/src/dev/jest/config.js
+++ b/src/dev/jest/config.js
@@ -78,7 +78,6 @@ export default {
   setupFilesAfterEnv: [
     '<rootDir>/src/dev/jest/setup/mocks.js',
     '<rootDir>/src/dev/jest/setup/react_testing_library.js',
-    '<rootDir>/src/dev/jest/setup/default_timeout.js',
   ],
   coverageDirectory: '<rootDir>/target/kibana-coverage/jest',
   coverageReporters: !!process.env.CODE_COVERAGE ? ['json'] : ['html', 'text'],
diff --git a/src/dev/jest/setup/default_timeout.js b/src/dev/jest/setup/default_timeout.js
deleted file mode 100644
index eea38e745b960..0000000000000
--- a/src/dev/jest/setup/default_timeout.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-/* eslint-env jest */
-
-/**
- * Set the default timeout for the unit tests to 30 seconds, temporarily
- */
-jest.setTimeout(30 * 1000);
diff --git a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
index a27dfa13e743e..6aed16e937713 100644
--- a/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
+++ b/src/plugins/visualizations/public/wizard/__snapshots__/new_vis_modal.test.tsx.snap
@@ -142,21 +142,7 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
           class="euiOverlayMask euiOverlayMask--aboveHeader"
         >
           <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="0"
-          />
-          <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="1"
-          />
-          <div
-            data-focus-lock-disabled="false"
+            data-eui="EuiFocusTrap"
           >
             <div
               aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
@@ -402,13 +388,6 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
               </div>
             </div>
           </div>
-          <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="0"
-          />
         </div>
       }
     >
@@ -419,3912 +398,1491 @@ exports[`NewVisModal filter for visualization types should render as expected 1`
         role="menu"
       >
         <EuiFocusTrap>
-          <ForwardRef
-            enabled={true}
-            noIsolation={true}
-            returnFocus={true}
-            scrollLock={false}
+          <div
+            data-eui="EuiFocusTrap"
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
-              sideCar={[Function]}
+            <div
+              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
+              className="euiModal euiModal--maxWidth-default visNewVisDialog"
+              onKeyDown={[Function]}
+              role="menu"
+              tabIndex={0}
             >
-              <ForwardRef
-                as={
-                  Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "classNames": Object {
-                      "fullWidth": "width-before-scroll-bar",
-                      "zeroRight": "right-scroll-bar-position",
-                    },
-                    "defaultProps": Object {
-                      "enabled": true,
-                      "inert": false,
-                      "removeScrollBar": true,
-                    },
-                    "render": [Function],
-                  }
-                }
-                autoFocus={true}
-                crossFrame={true}
-                disabled={false}
-                lockProps={
-                  Object {
-                    "allowPinchZoom": undefined,
-                    "enabled": false,
-                    "inert": undefined,
-                    "onMouseDown": [Function],
-                    "onTouchStart": [Function],
-                    "shards": undefined,
-                    "sideCar": [Function],
-                  }
-                }
-                noFocusGuards={false}
-                onActivation={[Function]}
-                onDeactivation={[Function]}
-                persistentFocus={false}
-                returnFocus={true}
-                sideCar={[Function]}
+              <EuiI18n
+                default="Closes this modal window"
+                token="euiModal.closeModal"
               >
-                <div
-                  data-focus-guard={true}
-                  key="guard-first"
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={0}
-                />
-                <div
-                  data-focus-guard={true}
-                  key="guard-nearest"
-                  style={
+                <EuiButtonIcon
+                  aria-label="Closes this modal window"
+                  className="euiModal__closeIcon"
+                  color="text"
+                  iconType="cross"
+                  onClick={[Function]}
+                >
+                  <button
+                    aria-label="Closes this modal window"
+                    className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                    onClick={[Function]}
+                    type="button"
+                  >
+                    <EuiIcon
+                      aria-hidden="true"
+                      className="euiButtonIcon__icon"
+                      size="m"
+                      type="cross"
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="cross"
+                        size="m"
+                      />
+                    </EuiIcon>
+                  </button>
+                </EuiButtonIcon>
+              </EuiI18n>
+              <div
+                className="euiModal__flex"
+              >
+                <TypeSelection
+                  addBasePath={[Function]}
+                  onVisTypeSelected={[Function]}
+                  visTypesRegistry={
                     Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
+                      "all": [Function],
+                      "get": [Function],
+                      "getAliases": [Function],
                     }
                   }
-                  tabIndex={1}
-                />
-                <RequireSideCar
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={false}
-                  id={Object {}}
-                  observed={
+                >
+                  <EuiModalHeader>
                     <div
-                      data-focus-lock-disabled="false"
+                      className="euiModalHeader"
                     >
-                      <div
-                        aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                        class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                        role="menu"
-                        tabindex="0"
-                      >
-                        <button
-                          aria-label="Closes this modal window"
-                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            class="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                          />
-                        </button>
+                      <EuiModalHeaderTitle>
                         <div
-                          class="euiModal__flex"
+                          className="euiModalHeader__title"
                         >
-                          <div
-                            class="euiModalHeader"
+                          <FormattedMessage
+                            defaultMessage="New Visualization"
+                            id="visualizations.newVisWizard.title"
+                            values={Object {}}
                           >
-                            <div
-                              class="euiModalHeader__title"
-                            >
-                              New Visualization
-                            </div>
-                          </div>
+                            New Visualization
+                          </FormattedMessage>
+                        </div>
+                      </EuiModalHeaderTitle>
+                    </div>
+                  </EuiModalHeader>
+                  <div
+                    className="visNewVisDialog__body"
+                  >
+                    <EuiFlexGroup
+                      gutterSize="xl"
+                    >
+                      <div
+                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      >
+                        <EuiFlexItem>
                           <div
-                            class="visNewVisDialog__body"
+                            className="euiFlexItem"
                           >
-                            <div
-                              class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                            <EuiFlexGroup
+                              className="visNewVisDialog__list"
+                              direction="column"
+                              gutterSize="none"
+                              responsive={false}
                             >
                               <div
-                                class="euiFlexItem"
+                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                               >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                <EuiFlexItem
+                                  className="visNewVisDialog__searchWrapper"
+                                  grow={false}
                                 >
                                   <div
-                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                   >
-                                    <div
-                                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                    <EuiFieldSearch
+                                      aria-label="Filter for a visualization type"
+                                      compressed={false}
+                                      data-test-subj="filterVisType"
+                                      fullWidth={true}
+                                      incremental={false}
+                                      isClearable={true}
+                                      isLoading={false}
+                                      onChange={[Function]}
+                                      placeholder="Filter"
+                                      value="with"
                                     >
-                                      <div
-                                        class="euiFormControlLayout__childrenWrapper"
+                                      <EuiFormControlLayout
+                                        clear={
+                                          Object {
+                                            "onClick": [Function],
+                                          }
+                                        }
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
                                       >
-                                        <input
-                                          aria-label="Filter for a visualization type"
-                                          class="euiFieldSearch euiFieldSearch--fullWidth"
-                                          data-test-subj="filterVisType"
-                                          placeholder="Filter"
-                                          type="search"
-                                          value="with"
-                                        />
                                         <div
-                                          class="euiFormControlLayoutIcons"
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                         >
-                                          <span
-                                            class="euiFormControlLayoutCustomIcon"
-                                          >
-                                            <div
-                                              aria-hidden="true"
-                                              class="euiFormControlLayoutCustomIcon__icon"
-                                              data-euiicon-type="search"
-                                            />
-                                          </span>
-                                        </div>
-                                        <div
-                                          class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                        >
-                                          <button
-                                            aria-label="Clear input"
-                                            class="euiFormControlLayoutClearButton"
-                                            type="button"
+                                          <div
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <div
-                                              class="euiFormControlLayoutClearButton__icon"
-                                              data-euiicon-type="cross"
-                                            />
-                                          </button>
+                                            <EuiValidatableControl>
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                onChange={[Function]}
+                                                onKeyUp={[Function]}
+                                                placeholder="Filter"
+                                                type="search"
+                                                value="with"
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              clear={
+                                                Object {
+                                                  "onClick": [Function],
+                                                }
+                                              }
+                                              icon="search"
+                                              isLoading={false}
+                                            >
+                                              <div
+                                                className="euiFormControlLayoutIcons"
+                                              >
+                                                <EuiFormControlLayoutCustomIcon
+                                                  type="search"
+                                                >
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
+                                                  >
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      type="search"
+                                                    >
+                                                      <div
+                                                        aria-hidden="true"
+                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                        data-euiicon-type="search"
+                                                      />
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                              <div
+                                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                              >
+                                                <EuiFormControlLayoutClearButton
+                                                  onClick={[Function]}
+                                                >
+                                                  <EuiI18n
+                                                    default="Clear input"
+                                                    token="euiFormControlLayoutClearButton.label"
+                                                  >
+                                                    <button
+                                                      aria-label="Clear input"
+                                                      className="euiFormControlLayoutClearButton"
+                                                      onClick={[Function]}
+                                                      type="button"
+                                                    >
+                                                      <EuiIcon
+                                                        className="euiFormControlLayoutClearButton__icon"
+                                                        type="cross"
+                                                      >
+                                                        <div
+                                                          className="euiFormControlLayoutClearButton__icon"
+                                                          data-euiicon-type="cross"
+                                                        />
+                                                      </EuiIcon>
+                                                    </button>
+                                                  </EuiI18n>
+                                                </EuiFormControlLayoutClearButton>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
+                                          </div>
                                         </div>
-                                      </div>
-                                    </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
                                   </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__typesWrapper"
+                                  grow={1}
+                                >
                                   <div
-                                    class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
                                   >
-                                    <span
-                                      aria-live="polite"
-                                      class="euiScreenReaderOnly"
-                                    >
-                                      2 types found
-                                    </span>
-                                    <ul
-                                      class="euiKeyPadMenu visNewVisDialog__types"
+                                    <EuiScreenReaderOnly>
+                                      <span
+                                        aria-live="polite"
+                                        className="euiScreenReaderOnly"
+                                      >
+                                        <FormattedMessage
+                                          defaultMessage="{resultCount} {resultCount, plural, one {type} other {types} } found"
+                                          id="visualizations.newVisWizard.resultsFound"
+                                          values={
+                                            Object {
+                                              "resultCount": 2,
+                                            }
+                                          }
+                                        >
+                                          2 types found
+                                        </FormattedMessage>
+                                      </span>
+                                    </EuiScreenReaderOnly>
+                                    <EuiKeyPadMenu
+                                      className="visNewVisDialog__types"
                                       data-test-subj="visNewDialogTypes"
                                     >
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-visWithAliasUrl"
-                                          class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                          data-test-subj="visType-visWithAliasUrl"
-                                          data-vis-stage="alias"
-                                          role="menuitem"
-                                          type="button"
+                                      <ul
+                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                        data-test-subj="visNewDialogTypes"
+                                      >
+                                        <li
+                                          key=".$visWithAliasUrl"
                                         >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
-                                          >
-                                            <span
-                                              class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                            >
-                                              <span
-                                                class="euiToolTipAnchor"
-                                              >
-                                                <span
-                                                  class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                  tabindex="0"
-                                                >
-                                                  <div
-                                                    aria-hidden="true"
-                                                    class="euiBetaBadge__icon"
-                                                    data-euiicon-type="popout"
-                                                  />
-                                                </span>
-                                              </span>
-                                            </span>
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
-                                            >
-                                              <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-visWithAliasUrl"
+                                            betaBadgeIconType="popout"
+                                            betaBadgeLabel="Kibana application"
+                                            betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-visWithAliasUrl"
+                                            data-vis-stage="alias"
+                                            disabled={false}
+                                            key="visWithAliasUrl"
+                                            label={
                                               <span
                                                 data-test-subj="visTypeTitle"
                                               >
                                                 Vis with alias Url
                                               </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-visWithSearch"
-                                          class="euiKeyPadMenuItem visNewVisDialog__type"
-                                          data-test-subj="visType-visWithSearch"
-                                          data-vis-stage="production"
-                                          role="menuitem"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
                                           >
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithAliasUrl"
+                                              className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                              data-test-subj="visType-visWithAliasUrl"
+                                              data-vis-stage="alias"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
                                             >
                                               <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
+                                                className="euiKeyPadMenuItem__inner"
+                                              >
+                                                <span
+                                                  className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                >
+                                                  <EuiBetaBadge
+                                                    className="euiKeyPadMenuItem__betaBadge"
+                                                    iconType="popout"
+                                                    label="Kibana application"
+                                                    tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                  >
+                                                    <EuiToolTip
+                                                      content="Opens a Kibana application that is outside of Visualize."
+                                                      delay="regular"
+                                                      position="top"
+                                                      title="Kibana application"
+                                                    >
+                                                      <span
+                                                        className="euiToolTipAnchor"
+                                                        onKeyUp={[Function]}
+                                                        onMouseOut={[Function]}
+                                                        onMouseOver={[Function]}
+                                                      >
+                                                        <span
+                                                          className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                          onBlur={[Function]}
+                                                          onFocus={[Function]}
+                                                          tabIndex={0}
+                                                        >
+                                                          <EuiIcon
+                                                            aria-hidden="true"
+                                                            className="euiBetaBadge__icon"
+                                                            size="m"
+                                                            type="popout"
+                                                          >
+                                                            <div
+                                                              aria-hidden="true"
+                                                              className="euiBetaBadge__icon"
+                                                              data-euiicon-type="popout"
+                                                              size="m"
+                                                            />
+                                                          </EuiIcon>
+                                                        </span>
+                                                      </span>
+                                                    </EuiToolTip>
+                                                  </EuiBetaBadge>
+                                                </span>
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
+                                                    >
+                                                      <div
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with alias Url
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                        <li
+                                          key=".$visWithSearch"
+                                        >
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            key="visWithSearch"
+                                            label={
                                               <span
                                                 data-test-subj="visTypeTitle"
                                               >
                                                 Vis with search
                                               </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-vis"
-                                          class="euiKeyPadMenuItem visNewVisDialog__type"
-                                          data-test-subj="visType-vis"
-                                          data-vis-stage="production"
-                                          disabled=""
-                                          role="menuitem"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
                                           >
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
                                             >
                                               <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
+                                                className="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
+                                                    >
+                                                      <div
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                        <li
+                                          key=".$vis"
+                                        >
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-vis"
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            disabled={true}
+                                            key="vis"
+                                            label={
                                               <span
                                                 data-test-subj="visTypeTitle"
                                               >
                                                 Vis Type 1
                                               </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                    </ul>
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
+                                          >
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              disabled={true}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
+                                                    >
+                                                      <div
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                      </ul>
+                                    </EuiKeyPadMenu>
                                   </div>
-                                </div>
+                                </EuiFlexItem>
                               </div>
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                            </EuiFlexGroup>
+                          </div>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          className="visNewVisDialog__description"
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                          >
+                            <EuiTitle
+                              size="s"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--small"
                               >
-                                <h2
-                                  class="euiTitle euiTitle--small"
+                                <FormattedMessage
+                                  defaultMessage="Select a visualization type"
+                                  id="visualizations.newVisWizard.selectVisType"
+                                  values={Object {}}
                                 >
                                   Select a visualization type
-                                </h2>
-                                <div
-                                  class="euiSpacer euiSpacer--m"
-                                />
+                                </FormattedMessage>
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <NewVisHelp
+                              onPromotionClicked={[Function]}
+                              promotedTypes={Array []}
+                            >
+                              <EuiText>
                                 <div
-                                  class="euiText euiText--medium"
+                                  className="euiText euiText--medium"
                                 >
                                   <p>
-                                    Start creating your visualization by selecting a type for that visualization.
+                                    <FormattedMessage
+                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                      id="visualizations.newVisWizard.helpText"
+                                      values={Object {}}
+                                    >
+                                      Start creating your visualization by selecting a type for that visualization.
+                                    </FormattedMessage>
                                   </p>
                                 </div>
-                              </div>
-                            </div>
+                              </EuiText>
+                            </NewVisHelp>
                           </div>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={[Function]}
-                  shards={Array []}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
-                >
-                  <SideCar
-                    autoFocus={true}
-                    crossFrame={true}
-                    disabled={false}
-                    id={Object {}}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="false"
-                      >
-                        <div
-                          aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                          class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                          role="menu"
-                          tabindex="0"
-                        >
-                          <button
-                            aria-label="Closes this modal window"
-                            class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="cross"
-                            />
-                          </button>
-                          <div
-                            class="euiModal__flex"
-                          >
-                            <div
-                              class="euiModalHeader"
-                            >
-                              <div
-                                class="euiModalHeader__title"
-                              >
-                                New Visualization
-                              </div>
-                            </div>
-                            <div
-                              class="visNewVisDialog__body"
-                            >
-                              <div
-                                class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              >
-                                <div
-                                  class="euiFlexItem"
-                                >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                  >
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                    >
-                                      <div
-                                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                      >
-                                        <div
-                                          class="euiFormControlLayout__childrenWrapper"
-                                        >
-                                          <input
-                                            aria-label="Filter for a visualization type"
-                                            class="euiFieldSearch euiFieldSearch--fullWidth"
-                                            data-test-subj="filterVisType"
-                                            placeholder="Filter"
-                                            type="search"
-                                            value="with"
-                                          />
-                                          <div
-                                            class="euiFormControlLayoutIcons"
-                                          >
-                                            <span
-                                              class="euiFormControlLayoutCustomIcon"
-                                            >
-                                              <div
-                                                aria-hidden="true"
-                                                class="euiFormControlLayoutCustomIcon__icon"
-                                                data-euiicon-type="search"
-                                              />
-                                            </span>
-                                          </div>
-                                          <div
-                                            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                          >
-                                            <button
-                                              aria-label="Clear input"
-                                              class="euiFormControlLayoutClearButton"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiFormControlLayoutClearButton__icon"
-                                                data-euiicon-type="cross"
-                                              />
-                                            </button>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                    >
-                                      <span
-                                        aria-live="polite"
-                                        class="euiScreenReaderOnly"
-                                      >
-                                        2 types found
-                                      </span>
-                                      <ul
-                                        class="euiKeyPadMenu visNewVisDialog__types"
-                                        data-test-subj="visNewDialogTypes"
-                                      >
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-visWithAliasUrl"
-                                            class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                            data-test-subj="visType-visWithAliasUrl"
-                                            data-vis-stage="alias"
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <span
-                                                class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                              >
-                                                <span
-                                                  class="euiToolTipAnchor"
-                                                >
-                                                  <span
-                                                    class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                    tabindex="0"
-                                                  >
-                                                    <div
-                                                      aria-hidden="true"
-                                                      class="euiBetaBadge__icon"
-                                                      data-euiicon-type="popout"
-                                                    />
-                                                  </span>
-                                                </span>
-                                              </span>
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with alias Url
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-visWithSearch"
-                                            class="euiKeyPadMenuItem visNewVisDialog__type"
-                                            data-test-subj="visType-visWithSearch"
-                                            data-vis-stage="production"
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with search
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-vis"
-                                            class="euiKeyPadMenuItem visNewVisDialog__type"
-                                            data-test-subj="visType-vis"
-                                            data-vis-stage="production"
-                                            disabled=""
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis Type 1
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                >
-                                  <h2
-                                    class="euiTitle euiTitle--small"
-                                  >
-                                    Select a visualization type
-                                  </h2>
-                                  <div
-                                    class="euiSpacer euiSpacer--m"
-                                  />
-                                  <div
-                                    class="euiText euiText--medium"
-                                  >
-                                    <p>
-                                      Start creating your visualization by selecting a type for that visualization.
-                                    </p>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                    returnFocus={[Function]}
-                    shards={Array []}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <SideEffect(FocusWatcher)
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={false}
-                      id={Object {}}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="false"
-                        >
-                          <div
-                            aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                            class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                            role="menu"
-                            tabindex="0"
-                          >
-                            <button
-                              aria-label="Closes this modal window"
-                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                              type="button"
-                            >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
-                              />
-                            </button>
-                            <div
-                              class="euiModal__flex"
-                            >
-                              <div
-                                class="euiModalHeader"
-                              >
-                                <div
-                                  class="euiModalHeader__title"
-                                >
-                                  New Visualization
-                                </div>
-                              </div>
-                              <div
-                                class="visNewVisDialog__body"
-                              >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                                >
-                                  <div
-                                    class="euiFlexItem"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                      >
-                                        <div
-                                          class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                        >
-                                          <div
-                                            class="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <input
-                                              aria-label="Filter for a visualization type"
-                                              class="euiFieldSearch euiFieldSearch--fullWidth"
-                                              data-test-subj="filterVisType"
-                                              placeholder="Filter"
-                                              type="search"
-                                              value="with"
-                                            />
-                                            <div
-                                              class="euiFormControlLayoutIcons"
-                                            >
-                                              <span
-                                                class="euiFormControlLayoutCustomIcon"
-                                              >
-                                                <div
-                                                  aria-hidden="true"
-                                                  class="euiFormControlLayoutCustomIcon__icon"
-                                                  data-euiicon-type="search"
-                                                />
-                                              </span>
-                                            </div>
-                                            <div
-                                              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                            >
-                                              <button
-                                                aria-label="Clear input"
-                                                class="euiFormControlLayoutClearButton"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiFormControlLayoutClearButton__icon"
-                                                  data-euiicon-type="cross"
-                                                />
-                                              </button>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                      >
-                                        <span
-                                          aria-live="polite"
-                                          class="euiScreenReaderOnly"
-                                        >
-                                          2 types found
-                                        </span>
-                                        <ul
-                                          class="euiKeyPadMenu visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
-                                        >
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-visWithAliasUrl"
-                                              class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                              data-test-subj="visType-visWithAliasUrl"
-                                              data-vis-stage="alias"
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <span
-                                                  class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                                >
-                                                  <span
-                                                    class="euiToolTipAnchor"
-                                                  >
-                                                    <span
-                                                      class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                      tabindex="0"
-                                                    >
-                                                      <div
-                                                        aria-hidden="true"
-                                                        class="euiBetaBadge__icon"
-                                                        data-euiicon-type="popout"
-                                                      />
-                                                    </span>
-                                                  </span>
-                                                </span>
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis with alias Url
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              class="euiKeyPadMenuItem visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis with search
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-vis"
-                                              class="euiKeyPadMenuItem visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              disabled=""
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis Type 1
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                  >
-                                    <h2
-                                      class="euiTitle euiTitle--small"
-                                    >
-                                      Select a visualization type
-                                    </h2>
-                                    <div
-                                      class="euiSpacer euiSpacer--m"
-                                    />
-                                    <div
-                                      class="euiText euiText--medium"
-                                    >
-                                      <p>
-                                        Start creating your visualization by selecting a type for that visualization.
-                                      </p>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
-                      persistentFocus={false}
-                      returnFocus={[Function]}
-                      shards={Array []}
-                    >
-                      <FocusWatcher
-                        autoFocus={true}
-                        crossFrame={true}
-                        disabled={false}
-                        id={Object {}}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="false"
-                          >
-                            <div
-                              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                              class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                              role="menu"
-                              tabindex="0"
-                            >
-                              <button
-                                aria-label="Closes this modal window"
-                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                type="button"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                />
-                              </button>
-                              <div
-                                class="euiModal__flex"
-                              >
-                                <div
-                                  class="euiModalHeader"
-                                >
-                                  <div
-                                    class="euiModalHeader__title"
-                                  >
-                                    New Visualization
-                                  </div>
-                                </div>
-                                <div
-                                  class="visNewVisDialog__body"
-                                >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                                  >
-                                    <div
-                                      class="euiFlexItem"
-                                    >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                      >
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                        >
-                                          <div
-                                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                          >
-                                            <div
-                                              class="euiFormControlLayout__childrenWrapper"
-                                            >
-                                              <input
-                                                aria-label="Filter for a visualization type"
-                                                class="euiFieldSearch euiFieldSearch--fullWidth"
-                                                data-test-subj="filterVisType"
-                                                placeholder="Filter"
-                                                type="search"
-                                                value="with"
-                                              />
-                                              <div
-                                                class="euiFormControlLayoutIcons"
-                                              >
-                                                <span
-                                                  class="euiFormControlLayoutCustomIcon"
-                                                >
-                                                  <div
-                                                    aria-hidden="true"
-                                                    class="euiFormControlLayoutCustomIcon__icon"
-                                                    data-euiicon-type="search"
-                                                  />
-                                                </span>
-                                              </div>
-                                              <div
-                                                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                              >
-                                                <button
-                                                  aria-label="Clear input"
-                                                  class="euiFormControlLayoutClearButton"
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    class="euiFormControlLayoutClearButton__icon"
-                                                    data-euiicon-type="cross"
-                                                  />
-                                                </button>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                        >
-                                          <span
-                                            aria-live="polite"
-                                            class="euiScreenReaderOnly"
-                                          >
-                                            2 types found
-                                          </span>
-                                          <ul
-                                            class="euiKeyPadMenu visNewVisDialog__types"
-                                            data-test-subj="visNewDialogTypes"
-                                          >
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                                data-test-subj="visType-visWithAliasUrl"
-                                                data-vis-stage="alias"
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <span
-                                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                                  >
-                                                    <span
-                                                      class="euiToolTipAnchor"
-                                                    >
-                                                      <span
-                                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                        tabindex="0"
-                                                      >
-                                                        <div
-                                                          aria-hidden="true"
-                                                          class="euiBetaBadge__icon"
-                                                          data-euiicon-type="popout"
-                                                        />
-                                                      </span>
-                                                    </span>
-                                                  </span>
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with alias Url
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithSearch"
-                                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-visWithSearch"
-                                                data-vis-stage="production"
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with search
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-vis"
-                                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-vis"
-                                                data-vis-stage="production"
-                                                disabled=""
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis Type 1
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                    >
-                                      <h2
-                                        class="euiTitle euiTitle--small"
-                                      >
-                                        Select a visualization type
-                                      </h2>
-                                      <div
-                                        class="euiSpacer euiSpacer--m"
-                                      />
-                                      <div
-                                        class="euiText euiText--medium"
-                                      >
-                                        <p>
-                                          Start creating your visualization by selecting a type for that visualization.
-                                        </p>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                        returnFocus={[Function]}
-                        shards={Array []}
-                      />
-                    </SideEffect(FocusWatcher)>
-                  </SideCar>
-                </RequireSideCar>
-                <ForwardRef
-                  data-focus-lock-disabled={false}
-                  enabled={false}
-                  inert={false}
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onTouchStart={[Function]}
-                  removeScrollBar={true}
-                  sideCar={[Function]}
-                >
-                  <div
-                    data-focus-lock-disabled={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onScrollCapture={[Function]}
-                    onTouchMoveCapture={[Function]}
-                    onTouchStart={[Function]}
-                    onWheelCapture={[Function]}
-                  >
-                    <div
-                      aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                      className="euiModal euiModal--maxWidth-default visNewVisDialog"
-                      onKeyDown={[Function]}
-                      role="menu"
-                      tabIndex={0}
-                    >
-                      <EuiI18n
-                        default="Closes this modal window"
-                        token="euiModal.closeModal"
-                      >
-                        <EuiButtonIcon
-                          aria-label="Closes this modal window"
-                          className="euiModal__closeIcon"
-                          color="text"
-                          iconType="cross"
-                          onClick={[Function]}
-                        >
-                          <button
-                            aria-label="Closes this modal window"
-                            className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                            onClick={[Function]}
-                            type="button"
-                          >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              size="m"
-                              type="cross"
-                            >
-                              <div
-                                aria-hidden="true"
-                                className="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
-                                size="m"
-                              />
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
-                      </EuiI18n>
-                      <div
-                        className="euiModal__flex"
-                      >
-                        <TypeSelection
-                          addBasePath={[Function]}
-                          onVisTypeSelected={[Function]}
-                          visTypesRegistry={
-                            Object {
-                              "all": [Function],
-                              "get": [Function],
-                              "getAliases": [Function],
-                            }
-                          }
-                        >
-                          <EuiModalHeader>
-                            <div
-                              className="euiModalHeader"
-                            >
-                              <EuiModalHeaderTitle>
-                                <div
-                                  className="euiModalHeader__title"
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="New Visualization"
-                                    id="visualizations.newVisWizard.title"
-                                    values={Object {}}
-                                  >
-                                    New Visualization
-                                  </FormattedMessage>
-                                </div>
-                              </EuiModalHeaderTitle>
-                            </div>
-                          </EuiModalHeader>
-                          <div
-                            className="visNewVisDialog__body"
-                          >
-                            <EuiFlexGroup
-                              gutterSize="xl"
-                            >
-                              <div
-                                className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              >
-                                <EuiFlexItem>
-                                  <div
-                                    className="euiFlexItem"
-                                  >
-                                    <EuiFlexGroup
-                                      className="visNewVisDialog__list"
-                                      direction="column"
-                                      gutterSize="none"
-                                      responsive={false}
-                                    >
-                                      <div
-                                        className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                      >
-                                        <EuiFlexItem
-                                          className="visNewVisDialog__searchWrapper"
-                                          grow={false}
-                                        >
-                                          <div
-                                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                          >
-                                            <EuiFieldSearch
-                                              aria-label="Filter for a visualization type"
-                                              compressed={false}
-                                              data-test-subj="filterVisType"
-                                              fullWidth={true}
-                                              incremental={false}
-                                              isClearable={true}
-                                              isLoading={false}
-                                              onChange={[Function]}
-                                              placeholder="Filter"
-                                              value="with"
-                                            >
-                                              <EuiFormControlLayout
-                                                clear={
-                                                  Object {
-                                                    "onClick": [Function],
-                                                  }
-                                                }
-                                                compressed={false}
-                                                fullWidth={true}
-                                                icon="search"
-                                                isLoading={false}
-                                              >
-                                                <div
-                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                                >
-                                                  <div
-                                                    className="euiFormControlLayout__childrenWrapper"
-                                                  >
-                                                    <EuiValidatableControl>
-                                                      <input
-                                                        aria-label="Filter for a visualization type"
-                                                        className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                        data-test-subj="filterVisType"
-                                                        onChange={[Function]}
-                                                        onKeyUp={[Function]}
-                                                        placeholder="Filter"
-                                                        type="search"
-                                                        value="with"
-                                                      />
-                                                    </EuiValidatableControl>
-                                                    <EuiFormControlLayoutIcons
-                                                      clear={
-                                                        Object {
-                                                          "onClick": [Function],
-                                                        }
-                                                      }
-                                                      icon="search"
-                                                      isLoading={false}
-                                                    >
-                                                      <div
-                                                        className="euiFormControlLayoutIcons"
-                                                      >
-                                                        <EuiFormControlLayoutCustomIcon
-                                                          type="search"
-                                                        >
-                                                          <span
-                                                            className="euiFormControlLayoutCustomIcon"
-                                                          >
-                                                            <EuiIcon
-                                                              aria-hidden="true"
-                                                              className="euiFormControlLayoutCustomIcon__icon"
-                                                              type="search"
-                                                            >
-                                                              <div
-                                                                aria-hidden="true"
-                                                                className="euiFormControlLayoutCustomIcon__icon"
-                                                                data-euiicon-type="search"
-                                                              />
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiFormControlLayoutCustomIcon>
-                                                      </div>
-                                                      <div
-                                                        className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                                                      >
-                                                        <EuiFormControlLayoutClearButton
-                                                          onClick={[Function]}
-                                                        >
-                                                          <EuiI18n
-                                                            default="Clear input"
-                                                            token="euiFormControlLayoutClearButton.label"
-                                                          >
-                                                            <button
-                                                              aria-label="Clear input"
-                                                              className="euiFormControlLayoutClearButton"
-                                                              onClick={[Function]}
-                                                              type="button"
-                                                            >
-                                                              <EuiIcon
-                                                                className="euiFormControlLayoutClearButton__icon"
-                                                                type="cross"
-                                                              >
-                                                                <div
-                                                                  className="euiFormControlLayoutClearButton__icon"
-                                                                  data-euiicon-type="cross"
-                                                                />
-                                                              </EuiIcon>
-                                                            </button>
-                                                          </EuiI18n>
-                                                        </EuiFormControlLayoutClearButton>
-                                                      </div>
-                                                    </EuiFormControlLayoutIcons>
-                                                  </div>
-                                                </div>
-                                              </EuiFormControlLayout>
-                                            </EuiFieldSearch>
-                                          </div>
-                                        </EuiFlexItem>
-                                        <EuiFlexItem
-                                          className="visNewVisDialog__typesWrapper"
-                                          grow={1}
-                                        >
-                                          <div
-                                            className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                          >
-                                            <EuiScreenReaderOnly>
-                                              <span
-                                                aria-live="polite"
-                                                className="euiScreenReaderOnly"
-                                              >
-                                                <FormattedMessage
-                                                  defaultMessage="{resultCount} {resultCount, plural, one {type} other {types} } found"
-                                                  id="visualizations.newVisWizard.resultsFound"
-                                                  values={
-                                                    Object {
-                                                      "resultCount": 2,
-                                                    }
-                                                  }
-                                                >
-                                                  2 types found
-                                                </FormattedMessage>
-                                              </span>
-                                            </EuiScreenReaderOnly>
-                                            <EuiKeyPadMenu
-                                              className="visNewVisDialog__types"
-                                              data-test-subj="visNewDialogTypes"
-                                            >
-                                              <ul
-                                                className="euiKeyPadMenu visNewVisDialog__types"
-                                                data-test-subj="visNewDialogTypes"
-                                              >
-                                                <li
-                                                  key=".$visWithAliasUrl"
-                                                >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                    betaBadgeIconType="popout"
-                                                    betaBadgeLabel="Kibana application"
-                                                    betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-visWithAliasUrl"
-                                                    data-vis-stage="alias"
-                                                    disabled={false}
-                                                    key="visWithAliasUrl"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis with alias Url
-                                                      </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
-                                                  >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                      className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                                      data-test-subj="visType-visWithAliasUrl"
-                                                      data-vis-stage="alias"
-                                                      disabled={false}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
-                                                    >
-                                                      <div
-                                                        className="euiKeyPadMenuItem__inner"
-                                                      >
-                                                        <span
-                                                          className="euiKeyPadMenuItem__betaBadgeWrapper"
-                                                        >
-                                                          <EuiBetaBadge
-                                                            className="euiKeyPadMenuItem__betaBadge"
-                                                            iconType="popout"
-                                                            label="Kibana application"
-                                                            tooltipContent="Opens a Kibana application that is outside of Visualize."
-                                                          >
-                                                            <EuiToolTip
-                                                              content="Opens a Kibana application that is outside of Visualize."
-                                                              delay="regular"
-                                                              position="top"
-                                                              title="Kibana application"
-                                                            >
-                                                              <span
-                                                                className="euiToolTipAnchor"
-                                                                onKeyUp={[Function]}
-                                                                onMouseOut={[Function]}
-                                                                onMouseOver={[Function]}
-                                                              >
-                                                                <span
-                                                                  className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  tabIndex={0}
-                                                                >
-                                                                  <EuiIcon
-                                                                    aria-hidden="true"
-                                                                    className="euiBetaBadge__icon"
-                                                                    size="m"
-                                                                    type="popout"
-                                                                  >
-                                                                    <div
-                                                                      aria-hidden="true"
-                                                                      className="euiBetaBadge__icon"
-                                                                      data-euiicon-type="popout"
-                                                                      size="m"
-                                                                    />
-                                                                  </EuiIcon>
-                                                                </span>
-                                                              </span>
-                                                            </EuiToolTip>
-                                                          </EuiBetaBadge>
-                                                        </span>
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis with alias Url
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                                <li
-                                                  key=".$visWithSearch"
-                                                >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-visWithSearch"
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-visWithSearch"
-                                                    data-vis-stage="production"
-                                                    disabled={false}
-                                                    key="visWithSearch"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis with search
-                                                      </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
-                                                  >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-visWithSearch"
-                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                      data-test-subj="visType-visWithSearch"
-                                                      data-vis-stage="production"
-                                                      disabled={false}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
-                                                    >
-                                                      <div
-                                                        className="euiKeyPadMenuItem__inner"
-                                                      >
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis with search
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                                <li
-                                                  key=".$vis"
-                                                >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-vis"
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-vis"
-                                                    data-vis-stage="production"
-                                                    disabled={true}
-                                                    key="vis"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis Type 1
-                                                      </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
-                                                  >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-vis"
-                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                      data-test-subj="visType-vis"
-                                                      data-vis-stage="production"
-                                                      disabled={true}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
-                                                    >
-                                                      <div
-                                                        className="euiKeyPadMenuItem__inner"
-                                                      >
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis Type 1
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                              </ul>
-                                            </EuiKeyPadMenu>
-                                          </div>
-                                        </EuiFlexItem>
-                                      </div>
-                                    </EuiFlexGroup>
-                                  </div>
-                                </EuiFlexItem>
-                                <EuiFlexItem
-                                  className="visNewVisDialog__description"
-                                  grow={false}
-                                >
-                                  <div
-                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                  >
-                                    <EuiTitle
-                                      size="s"
-                                    >
-                                      <h2
-                                        className="euiTitle euiTitle--small"
-                                      >
-                                        <FormattedMessage
-                                          defaultMessage="Select a visualization type"
-                                          id="visualizations.newVisWizard.selectVisType"
-                                          values={Object {}}
-                                        >
-                                          Select a visualization type
-                                        </FormattedMessage>
-                                      </h2>
-                                    </EuiTitle>
-                                    <EuiSpacer
-                                      size="m"
-                                    >
-                                      <div
-                                        className="euiSpacer euiSpacer--m"
-                                      />
-                                    </EuiSpacer>
-                                    <NewVisHelp
-                                      onPromotionClicked={[Function]}
-                                      promotedTypes={Array []}
-                                    >
-                                      <EuiText>
-                                        <div
-                                          className="euiText euiText--medium"
-                                        >
-                                          <p>
-                                            <FormattedMessage
-                                              defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                              id="visualizations.newVisWizard.helpText"
-                                              values={Object {}}
-                                            >
-                                              Start creating your visualization by selecting a type for that visualization.
-                                            </FormattedMessage>
-                                          </p>
-                                        </div>
-                                      </EuiText>
-                                    </NewVisHelp>
-                                  </div>
-                                </EuiFlexItem>
-                              </div>
-                            </EuiFlexGroup>
-                          </div>
-                        </TypeSelection>
-                      </div>
-                    </div>
-                  </div>
-                </ForwardRef>
-                <div
-                  data-focus-guard={true}
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={0}
-                />
-              </ForwardRef>
-              <RequireSideCar
-                noIsolation={true}
-                setLockProps={[Function]}
-                sideCar={
-                  Object {
-                    "assignMedium": [Function],
-                    "assignSyncMedium": [Function],
-                    "options": Object {
-                      "async": true,
-                      "ssr": false,
-                    },
-                    "read": [Function],
-                    "useMedium": [Function],
-                  }
-                }
-              >
-                <SideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
-                >
-                  <Effect
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                  >
-                    <Component>
-                      <Sheet
-                        styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                      />
-                    </Component>
-                  </Effect>
-                </SideCar>
-              </RequireSideCar>
-            </ForwardRef>
-          </ForwardRef>
-        </EuiFocusTrap>
-      </EuiModal>
-    </Portal>
-  </EuiOverlayMask>
-</NewVisModal>
-`;
-
-exports[`NewVisModal should render as expected 1`] = `
-<NewVisModal
-  addBasePath={[Function]}
-  application={Object {}}
-  editorParams={Array []}
-  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,
-    }
-  }
-  isOpen={true}
-  onClose={[Function]}
-  savedObjects={Object {}}
-  uiSettings={
-    Object {
-      "get": [MockFunction] {
-        "calls": Array [
-          Array [
-            "visualize:enableLabs",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      },
-    }
-  }
-  visTypesRegistry={
-    Object {
-      "all": [Function],
-      "get": [Function],
-      "getAliases": [Function],
-    }
-  }
->
-  <EuiOverlayMask>
-    <Portal
-      containerInfo={
-        <div
-          class="euiOverlayMask euiOverlayMask--aboveHeader"
-        >
-          <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="0"
-          />
-          <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="1"
-          />
-          <div
-            data-focus-lock-disabled="false"
-          >
-            <div
-              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-              class="euiModal euiModal--maxWidth-default visNewVisDialog"
-              role="menu"
-              tabindex="0"
-            >
-              <button
-                aria-label="Closes this modal window"
-                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                type="button"
-              >
-                <div
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  data-euiicon-type="cross"
-                />
-              </button>
-              <div
-                class="euiModal__flex"
-              >
-                <div
-                  class="euiModalHeader"
-                >
-                  <div
-                    class="euiModalHeader__title"
-                  >
-                    New Visualization
-                  </div>
-                </div>
-                <div
-                  class="visNewVisDialog__body"
-                >
-                  <div
-                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                  >
-                    <div
-                      class="euiFlexItem"
-                    >
-                      <div
-                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                      >
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                        >
-                          <div
-                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                          >
-                            <div
-                              class="euiFormControlLayout__childrenWrapper"
-                            >
-                              <input
-                                aria-label="Filter for a visualization type"
-                                class="euiFieldSearch euiFieldSearch--fullWidth"
-                                data-test-subj="filterVisType"
-                                placeholder="Filter"
-                                type="search"
-                                value=""
-                              />
-                              <div
-                                class="euiFormControlLayoutIcons"
-                              >
-                                <span
-                                  class="euiFormControlLayoutCustomIcon"
-                                >
-                                  <div
-                                    aria-hidden="true"
-                                    class="euiFormControlLayoutCustomIcon__icon"
-                                    data-euiicon-type="search"
-                                  />
-                                </span>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                        >
-                          <span
-                            aria-live="polite"
-                            class="euiScreenReaderOnly"
-                          />
-                          <ul
-                            class="euiKeyPadMenu visNewVisDialog__types"
-                            data-test-subj="visNewDialogTypes"
-                          >
-                            <li>
-                              <button
-                                aria-describedby="visTypeDescription-vis"
-                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                data-test-subj="visType-vis"
-                                data-vis-stage="production"
-                                role="menuitem"
-                                type="button"
-                              >
-                                <div
-                                  class="euiKeyPadMenuItem__inner"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__icon"
-                                  >
-                                    <div
-                                      color="secondary"
-                                      data-euiicon-type="empty"
-                                    />
-                                  </div>
-                                  <p
-                                    class="euiKeyPadMenuItem__label"
-                                  >
-                                    <span
-                                      data-test-subj="visTypeTitle"
-                                    >
-                                      Vis Type 1
-                                    </span>
-                                  </p>
-                                </div>
-                              </button>
-                            </li>
-                            <li>
-                              <button
-                                aria-describedby="visTypeDescription-visWithAliasUrl"
-                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                data-test-subj="visType-visWithAliasUrl"
-                                data-vis-stage="alias"
-                                role="menuitem"
-                                type="button"
-                              >
-                                <div
-                                  class="euiKeyPadMenuItem__inner"
-                                >
-                                  <span
-                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                  >
-                                    <span
-                                      class="euiToolTipAnchor"
-                                    >
-                                      <span
-                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                        tabindex="0"
-                                      >
-                                        <div
-                                          aria-hidden="true"
-                                          class="euiBetaBadge__icon"
-                                          data-euiicon-type="popout"
-                                        />
-                                      </span>
-                                    </span>
-                                  </span>
-                                  <div
-                                    class="euiKeyPadMenuItem__icon"
-                                  >
-                                    <div
-                                      color="secondary"
-                                      data-euiicon-type="empty"
-                                    />
-                                  </div>
-                                  <p
-                                    class="euiKeyPadMenuItem__label"
-                                  >
-                                    <span
-                                      data-test-subj="visTypeTitle"
-                                    >
-                                      Vis with alias Url
-                                    </span>
-                                  </p>
-                                </div>
-                              </button>
-                            </li>
-                            <li>
-                              <button
-                                aria-describedby="visTypeDescription-visWithSearch"
-                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                data-test-subj="visType-visWithSearch"
-                                data-vis-stage="production"
-                                role="menuitem"
-                                type="button"
-                              >
-                                <div
-                                  class="euiKeyPadMenuItem__inner"
-                                >
-                                  <div
-                                    class="euiKeyPadMenuItem__icon"
-                                  >
-                                    <div
-                                      color="secondary"
-                                      data-euiicon-type="empty"
-                                    />
-                                  </div>
-                                  <p
-                                    class="euiKeyPadMenuItem__label"
-                                  >
-                                    <span
-                                      data-test-subj="visTypeTitle"
-                                    >
-                                      Vis with search
-                                    </span>
-                                  </p>
-                                </div>
-                              </button>
-                            </li>
-                          </ul>
-                        </div>
-                      </div>
-                    </div>
-                    <div
-                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                    >
-                      <h2
-                        class="euiTitle euiTitle--small"
-                      >
-                        Select a visualization type
-                      </h2>
-                      <div
-                        class="euiSpacer euiSpacer--m"
-                      />
-                      <div
-                        class="euiText euiText--medium"
-                      >
-                        <p>
-                          Start creating your visualization by selecting a type for that visualization.
-                        </p>
+                        </EuiFlexItem>
                       </div>
-                    </div>
+                    </EuiFlexGroup>
                   </div>
-                </div>
+                </TypeSelection>
               </div>
             </div>
           </div>
+        </EuiFocusTrap>
+      </EuiModal>
+    </Portal>
+  </EuiOverlayMask>
+</NewVisModal>
+`;
+
+exports[`NewVisModal should render as expected 1`] = `
+<NewVisModal
+  addBasePath={[Function]}
+  application={Object {}}
+  editorParams={Array []}
+  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,
+    }
+  }
+  isOpen={true}
+  onClose={[Function]}
+  savedObjects={Object {}}
+  uiSettings={
+    Object {
+      "get": [MockFunction] {
+        "calls": Array [
+          Array [
+            "visualize:enableLabs",
+          ],
+        ],
+        "results": Array [
+          Object {
+            "type": "return",
+            "value": undefined,
+          },
+        ],
+      },
+    }
+  }
+  visTypesRegistry={
+    Object {
+      "all": [Function],
+      "get": [Function],
+      "getAliases": [Function],
+    }
+  }
+>
+  <EuiOverlayMask>
+    <Portal
+      containerInfo={
+        <div
+          class="euiOverlayMask euiOverlayMask--aboveHeader"
+        >
           <div
-            aria-hidden="true"
-            data-aria-hidden="true"
-            data-focus-guard="true"
-            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-            tabindex="0"
-          />
-        </div>
-      }
-    >
-      <EuiModal
-        aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-        className="visNewVisDialog"
-        onClose={[Function]}
-        role="menu"
-      >
-        <EuiFocusTrap>
-          <ForwardRef
-            enabled={true}
-            noIsolation={true}
-            returnFocus={true}
-            scrollLock={false}
+            data-eui="EuiFocusTrap"
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
-              sideCar={[Function]}
+            <div
+              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
+              class="euiModal euiModal--maxWidth-default visNewVisDialog"
+              role="menu"
+              tabindex="0"
             >
-              <ForwardRef
-                as={
-                  Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "classNames": Object {
-                      "fullWidth": "width-before-scroll-bar",
-                      "zeroRight": "right-scroll-bar-position",
-                    },
-                    "defaultProps": Object {
-                      "enabled": true,
-                      "inert": false,
-                      "removeScrollBar": true,
-                    },
-                    "render": [Function],
-                  }
-                }
-                autoFocus={true}
-                crossFrame={true}
-                disabled={false}
-                lockProps={
-                  Object {
-                    "allowPinchZoom": undefined,
-                    "enabled": false,
-                    "inert": undefined,
-                    "onMouseDown": [Function],
-                    "onTouchStart": [Function],
-                    "shards": undefined,
-                    "sideCar": [Function],
-                  }
-                }
-                noFocusGuards={false}
-                onActivation={[Function]}
-                onDeactivation={[Function]}
-                persistentFocus={false}
-                returnFocus={true}
-                sideCar={[Function]}
+              <button
+                aria-label="Closes this modal window"
+                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                type="button"
               >
                 <div
-                  data-focus-guard={true}
-                  key="guard-first"
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={0}
-                />
-                <div
-                  data-focus-guard={true}
-                  key="guard-nearest"
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={1}
-                />
-                <RequireSideCar
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={false}
-                  id={Object {}}
-                  observed={
-                    <div
-                      data-focus-lock-disabled="false"
-                    >
-                      <div
-                        aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                        class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                        role="menu"
-                        tabindex="0"
-                      >
-                        <button
-                          aria-label="Closes this modal window"
-                          class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                          type="button"
-                        >
-                          <div
-                            aria-hidden="true"
-                            class="euiButtonIcon__icon"
-                            data-euiicon-type="cross"
-                          />
-                        </button>
-                        <div
-                          class="euiModal__flex"
-                        >
-                          <div
-                            class="euiModalHeader"
-                          >
-                            <div
-                              class="euiModalHeader__title"
-                            >
-                              New Visualization
-                            </div>
-                          </div>
-                          <div
-                            class="visNewVisDialog__body"
-                          >
-                            <div
-                              class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                            >
-                              <div
-                                class="euiFlexItem"
-                              >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                >
-                                  <div
-                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                  >
-                                    <div
-                                      class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                    >
-                                      <div
-                                        class="euiFormControlLayout__childrenWrapper"
-                                      >
-                                        <input
-                                          aria-label="Filter for a visualization type"
-                                          class="euiFieldSearch euiFieldSearch--fullWidth"
-                                          data-test-subj="filterVisType"
-                                          placeholder="Filter"
-                                          type="search"
-                                          value=""
-                                        />
-                                        <div
-                                          class="euiFormControlLayoutIcons"
-                                        >
-                                          <span
-                                            class="euiFormControlLayoutCustomIcon"
-                                          >
-                                            <div
-                                              aria-hidden="true"
-                                              class="euiFormControlLayoutCustomIcon__icon"
-                                              data-euiicon-type="search"
-                                            />
-                                          </span>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                  <div
-                                    class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                  >
-                                    <span
-                                      aria-live="polite"
-                                      class="euiScreenReaderOnly"
-                                    />
-                                    <ul
-                                      class="euiKeyPadMenu visNewVisDialog__types"
-                                      data-test-subj="visNewDialogTypes"
-                                    >
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-vis"
-                                          class="euiKeyPadMenuItem visNewVisDialog__type"
-                                          data-test-subj="visType-vis"
-                                          data-vis-stage="production"
-                                          role="menuitem"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
-                                            >
-                                              <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
-                                              <span
-                                                data-test-subj="visTypeTitle"
-                                              >
-                                                Vis Type 1
-                                              </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-visWithAliasUrl"
-                                          class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                          data-test-subj="visType-visWithAliasUrl"
-                                          data-vis-stage="alias"
-                                          role="menuitem"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
-                                          >
-                                            <span
-                                              class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                            >
-                                              <span
-                                                class="euiToolTipAnchor"
-                                              >
-                                                <span
-                                                  class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                  tabindex="0"
-                                                >
-                                                  <div
-                                                    aria-hidden="true"
-                                                    class="euiBetaBadge__icon"
-                                                    data-euiicon-type="popout"
-                                                  />
-                                                </span>
-                                              </span>
-                                            </span>
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
-                                            >
-                                              <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
-                                              <span
-                                                data-test-subj="visTypeTitle"
-                                              >
-                                                Vis with alias Url
-                                              </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                      <li>
-                                        <button
-                                          aria-describedby="visTypeDescription-visWithSearch"
-                                          class="euiKeyPadMenuItem visNewVisDialog__type"
-                                          data-test-subj="visType-visWithSearch"
-                                          data-vis-stage="production"
-                                          role="menuitem"
-                                          type="button"
-                                        >
-                                          <div
-                                            class="euiKeyPadMenuItem__inner"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__icon"
-                                            >
-                                              <div
-                                                color="secondary"
-                                                data-euiicon-type="empty"
-                                              />
-                                            </div>
-                                            <p
-                                              class="euiKeyPadMenuItem__label"
-                                            >
-                                              <span
-                                                data-test-subj="visTypeTitle"
-                                              >
-                                                Vis with search
-                                              </span>
-                                            </p>
-                                          </div>
-                                        </button>
-                                      </li>
-                                    </ul>
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                              >
-                                <h2
-                                  class="euiTitle euiTitle--small"
-                                >
-                                  Select a visualization type
-                                </h2>
-                                <div
-                                  class="euiSpacer euiSpacer--m"
-                                />
-                                <div
-                                  class="euiText euiText--medium"
-                                >
-                                  <p>
-                                    Start creating your visualization by selecting a type for that visualization.
-                                  </p>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  }
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={[Function]}
-                  shards={Array []}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
+                  aria-hidden="true"
+                  class="euiButtonIcon__icon"
+                  data-euiicon-type="cross"
+                />
+              </button>
+              <div
+                class="euiModal__flex"
+              >
+                <div
+                  class="euiModalHeader"
+                >
+                  <div
+                    class="euiModalHeader__title"
+                  >
+                    New Visualization
+                  </div>
+                </div>
+                <div
+                  class="visNewVisDialog__body"
                 >
-                  <SideCar
-                    autoFocus={true}
-                    crossFrame={true}
-                    disabled={false}
-                    id={Object {}}
-                    observed={
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  >
+                    <div
+                      class="euiFlexItem"
+                    >
                       <div
-                        data-focus-lock-disabled="false"
+                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                       >
                         <div
-                          aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                          class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                          role="menu"
-                          tabindex="0"
+                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                         >
-                          <button
-                            aria-label="Closes this modal window"
-                            class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="cross"
-                            />
-                          </button>
                           <div
-                            class="euiModal__flex"
+                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
                           >
                             <div
-                              class="euiModalHeader"
-                            >
-                              <div
-                                class="euiModalHeader__title"
-                              >
-                                New Visualization
-                              </div>
-                            </div>
-                            <div
-                              class="visNewVisDialog__body"
-                            >
-                              <div
-                                class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                              >
-                                <div
-                                  class="euiFlexItem"
-                                >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                  >
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                    >
-                                      <div
-                                        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                      >
-                                        <div
-                                          class="euiFormControlLayout__childrenWrapper"
-                                        >
-                                          <input
-                                            aria-label="Filter for a visualization type"
-                                            class="euiFieldSearch euiFieldSearch--fullWidth"
-                                            data-test-subj="filterVisType"
-                                            placeholder="Filter"
-                                            type="search"
-                                            value=""
-                                          />
-                                          <div
-                                            class="euiFormControlLayoutIcons"
-                                          >
-                                            <span
-                                              class="euiFormControlLayoutCustomIcon"
-                                            >
-                                              <div
-                                                aria-hidden="true"
-                                                class="euiFormControlLayoutCustomIcon__icon"
-                                                data-euiicon-type="search"
-                                              />
-                                            </span>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                    <div
-                                      class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                    >
-                                      <span
-                                        aria-live="polite"
-                                        class="euiScreenReaderOnly"
-                                      />
-                                      <ul
-                                        class="euiKeyPadMenu visNewVisDialog__types"
-                                        data-test-subj="visNewDialogTypes"
-                                      >
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-vis"
-                                            class="euiKeyPadMenuItem visNewVisDialog__type"
-                                            data-test-subj="visType-vis"
-                                            data-vis-stage="production"
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis Type 1
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-visWithAliasUrl"
-                                            class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                            data-test-subj="visType-visWithAliasUrl"
-                                            data-vis-stage="alias"
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <span
-                                                class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                              >
-                                                <span
-                                                  class="euiToolTipAnchor"
-                                                >
-                                                  <span
-                                                    class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                    tabindex="0"
-                                                  >
-                                                    <div
-                                                      aria-hidden="true"
-                                                      class="euiBetaBadge__icon"
-                                                      data-euiicon-type="popout"
-                                                    />
-                                                  </span>
-                                                </span>
-                                              </span>
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with alias Url
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                        <li>
-                                          <button
-                                            aria-describedby="visTypeDescription-visWithSearch"
-                                            class="euiKeyPadMenuItem visNewVisDialog__type"
-                                            data-test-subj="visType-visWithSearch"
-                                            data-vis-stage="production"
-                                            role="menuitem"
-                                            type="button"
-                                          >
-                                            <div
-                                              class="euiKeyPadMenuItem__inner"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__icon"
-                                              >
-                                                <div
-                                                  color="secondary"
-                                                  data-euiicon-type="empty"
-                                                />
-                                              </div>
-                                              <p
-                                                class="euiKeyPadMenuItem__label"
-                                              >
-                                                <span
-                                                  data-test-subj="visTypeTitle"
-                                                >
-                                                  Vis with search
-                                                </span>
-                                              </p>
-                                            </div>
-                                          </button>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </div>
-                                </div>
-                                <div
-                                  class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                >
-                                  <h2
-                                    class="euiTitle euiTitle--small"
-                                  >
-                                    Select a visualization type
-                                  </h2>
-                                  <div
-                                    class="euiSpacer euiSpacer--m"
-                                  />
-                                  <div
-                                    class="euiText euiText--medium"
-                                  >
-                                    <p>
-                                      Start creating your visualization by selecting a type for that visualization.
-                                    </p>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                    returnFocus={[Function]}
-                    shards={Array []}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <SideEffect(FocusWatcher)
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={false}
-                      id={Object {}}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="false"
-                        >
-                          <div
-                            aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                            class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                            role="menu"
-                            tabindex="0"
-                          >
-                            <button
-                              aria-label="Closes this modal window"
-                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                              type="button"
+                              class="euiFormControlLayout__childrenWrapper"
                             >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
+                              <input
+                                aria-label="Filter for a visualization type"
+                                class="euiFieldSearch euiFieldSearch--fullWidth"
+                                data-test-subj="filterVisType"
+                                placeholder="Filter"
+                                type="search"
+                                value=""
                               />
-                            </button>
-                            <div
-                              class="euiModal__flex"
-                            >
-                              <div
-                                class="euiModalHeader"
-                              >
-                                <div
-                                  class="euiModalHeader__title"
-                                >
-                                  New Visualization
-                                </div>
-                              </div>
                               <div
-                                class="visNewVisDialog__body"
+                                class="euiFormControlLayoutIcons"
                               >
-                                <div
-                                  class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
-                                >
-                                  <div
-                                    class="euiFlexItem"
-                                  >
-                                    <div
-                                      class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
-                                    >
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                      >
-                                        <div
-                                          class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                        >
-                                          <div
-                                            class="euiFormControlLayout__childrenWrapper"
-                                          >
-                                            <input
-                                              aria-label="Filter for a visualization type"
-                                              class="euiFieldSearch euiFieldSearch--fullWidth"
-                                              data-test-subj="filterVisType"
-                                              placeholder="Filter"
-                                              type="search"
-                                              value=""
-                                            />
-                                            <div
-                                              class="euiFormControlLayoutIcons"
-                                            >
-                                              <span
-                                                class="euiFormControlLayoutCustomIcon"
-                                              >
-                                                <div
-                                                  aria-hidden="true"
-                                                  class="euiFormControlLayoutCustomIcon__icon"
-                                                  data-euiicon-type="search"
-                                                />
-                                              </span>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                      >
-                                        <span
-                                          aria-live="polite"
-                                          class="euiScreenReaderOnly"
-                                        />
-                                        <ul
-                                          class="euiKeyPadMenu visNewVisDialog__types"
-                                          data-test-subj="visNewDialogTypes"
-                                        >
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-vis"
-                                              class="euiKeyPadMenuItem visNewVisDialog__type"
-                                              data-test-subj="visType-vis"
-                                              data-vis-stage="production"
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis Type 1
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-visWithAliasUrl"
-                                              class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                              data-test-subj="visType-visWithAliasUrl"
-                                              data-vis-stage="alias"
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <span
-                                                  class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                                >
-                                                  <span
-                                                    class="euiToolTipAnchor"
-                                                  >
-                                                    <span
-                                                      class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                      tabindex="0"
-                                                    >
-                                                      <div
-                                                        aria-hidden="true"
-                                                        class="euiBetaBadge__icon"
-                                                        data-euiicon-type="popout"
-                                                      />
-                                                    </span>
-                                                  </span>
-                                                </span>
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis with alias Url
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                          <li>
-                                            <button
-                                              aria-describedby="visTypeDescription-visWithSearch"
-                                              class="euiKeyPadMenuItem visNewVisDialog__type"
-                                              data-test-subj="visType-visWithSearch"
-                                              data-vis-stage="production"
-                                              role="menuitem"
-                                              type="button"
-                                            >
-                                              <div
-                                                class="euiKeyPadMenuItem__inner"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__icon"
-                                                >
-                                                  <div
-                                                    color="secondary"
-                                                    data-euiicon-type="empty"
-                                                  />
-                                                </div>
-                                                <p
-                                                  class="euiKeyPadMenuItem__label"
-                                                >
-                                                  <span
-                                                    data-test-subj="visTypeTitle"
-                                                  >
-                                                    Vis with search
-                                                  </span>
-                                                </p>
-                                              </div>
-                                            </button>
-                                          </li>
-                                        </ul>
-                                      </div>
-                                    </div>
-                                  </div>
+                                <span
+                                  class="euiFormControlLayoutCustomIcon"
+                                >
                                   <div
-                                    class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                  >
-                                    <h2
-                                      class="euiTitle euiTitle--small"
-                                    >
-                                      Select a visualization type
-                                    </h2>
-                                    <div
-                                      class="euiSpacer euiSpacer--m"
-                                    />
-                                    <div
-                                      class="euiText euiText--medium"
-                                    >
-                                      <p>
-                                        Start creating your visualization by selecting a type for that visualization.
-                                      </p>
-                                    </div>
-                                  </div>
-                                </div>
+                                    aria-hidden="true"
+                                    class="euiFormControlLayoutCustomIcon__icon"
+                                    data-euiicon-type="search"
+                                  />
+                                </span>
                               </div>
                             </div>
                           </div>
                         </div>
-                      }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
-                      persistentFocus={false}
-                      returnFocus={[Function]}
-                      shards={Array []}
-                    >
-                      <FocusWatcher
-                        autoFocus={true}
-                        crossFrame={true}
-                        disabled={false}
-                        id={Object {}}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="false"
+                        <div
+                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                        >
+                          <span
+                            aria-live="polite"
+                            class="euiScreenReaderOnly"
+                          />
+                          <ul
+                            class="euiKeyPadMenu visNewVisDialog__types"
+                            data-test-subj="visNewDialogTypes"
                           >
-                            <div
-                              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                              class="euiModal euiModal--maxWidth-default visNewVisDialog"
-                              role="menu"
-                              tabindex="0"
-                            >
+                            <li>
                               <button
-                                aria-label="Closes this modal window"
-                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                aria-describedby="visTypeDescription-vis"
+                                class="euiKeyPadMenuItem visNewVisDialog__type"
+                                data-test-subj="visType-vis"
+                                data-vis-stage="production"
+                                role="menuitem"
                                 type="button"
                               >
                                 <div
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                />
-                              </button>
-                              <div
-                                class="euiModal__flex"
-                              >
-                                <div
-                                  class="euiModalHeader"
+                                  class="euiKeyPadMenuItem__inner"
                                 >
                                   <div
-                                    class="euiModalHeader__title"
+                                    class="euiKeyPadMenuItem__icon"
                                   >
-                                    New Visualization
+                                    <div
+                                      color="secondary"
+                                      data-euiicon-type="empty"
+                                    />
                                   </div>
+                                  <p
+                                    class="euiKeyPadMenuItem__label"
+                                  >
+                                    <span
+                                      data-test-subj="visTypeTitle"
+                                    >
+                                      Vis Type 1
+                                    </span>
+                                  </p>
                                 </div>
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-describedby="visTypeDescription-visWithAliasUrl"
+                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                data-test-subj="visType-visWithAliasUrl"
+                                data-vis-stage="alias"
+                                role="menuitem"
+                                type="button"
+                              >
                                 <div
-                                  class="visNewVisDialog__body"
+                                  class="euiKeyPadMenuItem__inner"
                                 >
-                                  <div
-                                    class="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                  <span
+                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
                                   >
-                                    <div
-                                      class="euiFlexItem"
+                                    <span
+                                      class="euiToolTipAnchor"
                                     >
-                                      <div
-                                        class="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                      <span
+                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                        tabindex="0"
                                       >
                                         <div
-                                          class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
-                                        >
-                                          <div
-                                            class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                                          >
-                                            <div
-                                              class="euiFormControlLayout__childrenWrapper"
-                                            >
-                                              <input
-                                                aria-label="Filter for a visualization type"
-                                                class="euiFieldSearch euiFieldSearch--fullWidth"
-                                                data-test-subj="filterVisType"
-                                                placeholder="Filter"
-                                                type="search"
-                                                value=""
-                                              />
-                                              <div
-                                                class="euiFormControlLayoutIcons"
-                                              >
-                                                <span
-                                                  class="euiFormControlLayoutCustomIcon"
-                                                >
-                                                  <div
-                                                    aria-hidden="true"
-                                                    class="euiFormControlLayoutCustomIcon__icon"
-                                                    data-euiicon-type="search"
-                                                  />
-                                                </span>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </div>
-                                        <div
-                                          class="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                        >
-                                          <span
-                                            aria-live="polite"
-                                            class="euiScreenReaderOnly"
-                                          />
-                                          <ul
-                                            class="euiKeyPadMenu visNewVisDialog__types"
-                                            data-test-subj="visNewDialogTypes"
-                                          >
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-vis"
-                                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-vis"
-                                                data-vis-stage="production"
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis Type 1
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                class="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                                data-test-subj="visType-visWithAliasUrl"
-                                                data-vis-stage="alias"
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <span
-                                                    class="euiKeyPadMenuItem__betaBadgeWrapper"
-                                                  >
-                                                    <span
-                                                      class="euiToolTipAnchor"
-                                                    >
-                                                      <span
-                                                        class="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                        tabindex="0"
-                                                      >
-                                                        <div
-                                                          aria-hidden="true"
-                                                          class="euiBetaBadge__icon"
-                                                          data-euiicon-type="popout"
-                                                        />
-                                                      </span>
-                                                    </span>
-                                                  </span>
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with alias Url
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                            <li>
-                                              <button
-                                                aria-describedby="visTypeDescription-visWithSearch"
-                                                class="euiKeyPadMenuItem visNewVisDialog__type"
-                                                data-test-subj="visType-visWithSearch"
-                                                data-vis-stage="production"
-                                                role="menuitem"
-                                                type="button"
-                                              >
-                                                <div
-                                                  class="euiKeyPadMenuItem__inner"
-                                                >
-                                                  <div
-                                                    class="euiKeyPadMenuItem__icon"
-                                                  >
-                                                    <div
-                                                      color="secondary"
-                                                      data-euiicon-type="empty"
-                                                    />
-                                                  </div>
-                                                  <p
-                                                    class="euiKeyPadMenuItem__label"
-                                                  >
-                                                    <span
-                                                      data-test-subj="visTypeTitle"
-                                                    >
-                                                      Vis with search
-                                                    </span>
-                                                  </p>
-                                                </div>
-                                              </button>
-                                            </li>
-                                          </ul>
-                                        </div>
-                                      </div>
-                                    </div>
+                                          aria-hidden="true"
+                                          class="euiBetaBadge__icon"
+                                          data-euiicon-type="popout"
+                                        />
+                                      </span>
+                                    </span>
+                                  </span>
+                                  <div
+                                    class="euiKeyPadMenuItem__icon"
+                                  >
                                     <div
-                                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                                      color="secondary"
+                                      data-euiicon-type="empty"
+                                    />
+                                  </div>
+                                  <p
+                                    class="euiKeyPadMenuItem__label"
+                                  >
+                                    <span
+                                      data-test-subj="visTypeTitle"
                                     >
-                                      <h2
-                                        class="euiTitle euiTitle--small"
-                                      >
-                                        Select a visualization type
-                                      </h2>
-                                      <div
-                                        class="euiSpacer euiSpacer--m"
-                                      />
-                                      <div
-                                        class="euiText euiText--medium"
-                                      >
-                                        <p>
-                                          Start creating your visualization by selecting a type for that visualization.
-                                        </p>
-                                      </div>
-                                    </div>
+                                      Vis with alias Url
+                                    </span>
+                                  </p>
+                                </div>
+                              </button>
+                            </li>
+                            <li>
+                              <button
+                                aria-describedby="visTypeDescription-visWithSearch"
+                                class="euiKeyPadMenuItem visNewVisDialog__type"
+                                data-test-subj="visType-visWithSearch"
+                                data-vis-stage="production"
+                                role="menuitem"
+                                type="button"
+                              >
+                                <div
+                                  class="euiKeyPadMenuItem__inner"
+                                >
+                                  <div
+                                    class="euiKeyPadMenuItem__icon"
+                                  >
+                                    <div
+                                      color="secondary"
+                                      data-euiicon-type="empty"
+                                    />
                                   </div>
+                                  <p
+                                    class="euiKeyPadMenuItem__label"
+                                  >
+                                    <span
+                                      data-test-subj="visTypeTitle"
+                                    >
+                                      Vis with search
+                                    </span>
+                                  </p>
                                 </div>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                        returnFocus={[Function]}
-                        shards={Array []}
+                              </button>
+                            </li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                    >
+                      <h2
+                        class="euiTitle euiTitle--small"
+                      >
+                        Select a visualization type
+                      </h2>
+                      <div
+                        class="euiSpacer euiSpacer--m"
                       />
-                    </SideEffect(FocusWatcher)>
-                  </SideCar>
-                </RequireSideCar>
-                <ForwardRef
-                  data-focus-lock-disabled={false}
-                  enabled={false}
-                  inert={false}
-                  onBlur={[Function]}
-                  onFocus={[Function]}
-                  onMouseDown={[Function]}
-                  onTouchStart={[Function]}
-                  removeScrollBar={true}
-                  sideCar={[Function]}
+                      <div
+                        class="euiText euiText--medium"
+                      >
+                        <p>
+                          Start creating your visualization by selecting a type for that visualization.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      }
+    >
+      <EuiModal
+        aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
+        className="visNewVisDialog"
+        onClose={[Function]}
+        role="menu"
+      >
+        <EuiFocusTrap>
+          <div
+            data-eui="EuiFocusTrap"
+          >
+            <div
+              aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
+              className="euiModal euiModal--maxWidth-default visNewVisDialog"
+              onKeyDown={[Function]}
+              role="menu"
+              tabIndex={0}
+            >
+              <EuiI18n
+                default="Closes this modal window"
+                token="euiModal.closeModal"
+              >
+                <EuiButtonIcon
+                  aria-label="Closes this modal window"
+                  className="euiModal__closeIcon"
+                  color="text"
+                  iconType="cross"
+                  onClick={[Function]}
                 >
-                  <div
-                    data-focus-lock-disabled={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onScrollCapture={[Function]}
-                    onTouchMoveCapture={[Function]}
-                    onTouchStart={[Function]}
-                    onWheelCapture={[Function]}
+                  <button
+                    aria-label="Closes this modal window"
+                    className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                    onClick={[Function]}
+                    type="button"
                   >
+                    <EuiIcon
+                      aria-hidden="true"
+                      className="euiButtonIcon__icon"
+                      size="m"
+                      type="cross"
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="cross"
+                        size="m"
+                      />
+                    </EuiIcon>
+                  </button>
+                </EuiButtonIcon>
+              </EuiI18n>
+              <div
+                className="euiModal__flex"
+              >
+                <TypeSelection
+                  addBasePath={[Function]}
+                  onVisTypeSelected={[Function]}
+                  visTypesRegistry={
+                    Object {
+                      "all": [Function],
+                      "get": [Function],
+                      "getAliases": [Function],
+                    }
+                  }
+                >
+                  <EuiModalHeader>
                     <div
-                      aria-label="Start creating your visualization by selecting a type for that visualization. Hit escape to close this modal. Hit Tab key to go further."
-                      className="euiModal euiModal--maxWidth-default visNewVisDialog"
-                      onKeyDown={[Function]}
-                      role="menu"
-                      tabIndex={0}
+                      className="euiModalHeader"
                     >
-                      <EuiI18n
-                        default="Closes this modal window"
-                        token="euiModal.closeModal"
-                      >
-                        <EuiButtonIcon
-                          aria-label="Closes this modal window"
-                          className="euiModal__closeIcon"
-                          color="text"
-                          iconType="cross"
-                          onClick={[Function]}
+                      <EuiModalHeaderTitle>
+                        <div
+                          className="euiModalHeader__title"
                         >
-                          <button
-                            aria-label="Closes this modal window"
-                            className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                            onClick={[Function]}
-                            type="button"
+                          <FormattedMessage
+                            defaultMessage="New Visualization"
+                            id="visualizations.newVisWizard.title"
+                            values={Object {}}
                           >
-                            <EuiIcon
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              size="m"
-                              type="cross"
-                            >
-                              <div
-                                aria-hidden="true"
-                                className="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
-                                size="m"
-                              />
-                            </EuiIcon>
-                          </button>
-                        </EuiButtonIcon>
-                      </EuiI18n>
+                            New Visualization
+                          </FormattedMessage>
+                        </div>
+                      </EuiModalHeaderTitle>
+                    </div>
+                  </EuiModalHeader>
+                  <div
+                    className="visNewVisDialog__body"
+                  >
+                    <EuiFlexGroup
+                      gutterSize="xl"
+                    >
                       <div
-                        className="euiModal__flex"
+                        className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
                       >
-                        <TypeSelection
-                          addBasePath={[Function]}
-                          onVisTypeSelected={[Function]}
-                          visTypesRegistry={
-                            Object {
-                              "all": [Function],
-                              "get": [Function],
-                              "getAliases": [Function],
-                            }
-                          }
-                        >
-                          <EuiModalHeader>
-                            <div
-                              className="euiModalHeader"
-                            >
-                              <EuiModalHeaderTitle>
-                                <div
-                                  className="euiModalHeader__title"
-                                >
-                                  <FormattedMessage
-                                    defaultMessage="New Visualization"
-                                    id="visualizations.newVisWizard.title"
-                                    values={Object {}}
-                                  >
-                                    New Visualization
-                                  </FormattedMessage>
-                                </div>
-                              </EuiModalHeaderTitle>
-                            </div>
-                          </EuiModalHeader>
+                        <EuiFlexItem>
                           <div
-                            className="visNewVisDialog__body"
+                            className="euiFlexItem"
                           >
                             <EuiFlexGroup
-                              gutterSize="xl"
+                              className="visNewVisDialog__list"
+                              direction="column"
+                              gutterSize="none"
+                              responsive={false}
                             >
                               <div
-                                className="euiFlexGroup euiFlexGroup--gutterExtraLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
+                                className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
                               >
-                                <EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__searchWrapper"
+                                  grow={false}
+                                >
                                   <div
-                                    className="euiFlexItem"
+                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
                                   >
-                                    <EuiFlexGroup
-                                      className="visNewVisDialog__list"
-                                      direction="column"
-                                      gutterSize="none"
-                                      responsive={false}
+                                    <EuiFieldSearch
+                                      aria-label="Filter for a visualization type"
+                                      compressed={false}
+                                      data-test-subj="filterVisType"
+                                      fullWidth={true}
+                                      incremental={false}
+                                      isClearable={true}
+                                      isLoading={false}
+                                      onChange={[Function]}
+                                      placeholder="Filter"
+                                      value=""
                                     >
-                                      <div
-                                        className="euiFlexGroup euiFlexGroup--directionColumn visNewVisDialog__list"
+                                      <EuiFormControlLayout
+                                        compressed={false}
+                                        fullWidth={true}
+                                        icon="search"
+                                        isLoading={false}
                                       >
-                                        <EuiFlexItem
-                                          className="visNewVisDialog__searchWrapper"
-                                          grow={false}
+                                        <div
+                                          className="euiFormControlLayout euiFormControlLayout--fullWidth"
                                         >
                                           <div
-                                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__searchWrapper"
+                                            className="euiFormControlLayout__childrenWrapper"
                                           >
-                                            <EuiFieldSearch
-                                              aria-label="Filter for a visualization type"
-                                              compressed={false}
-                                              data-test-subj="filterVisType"
-                                              fullWidth={true}
-                                              incremental={false}
-                                              isClearable={true}
+                                            <EuiValidatableControl>
+                                              <input
+                                                aria-label="Filter for a visualization type"
+                                                className="euiFieldSearch euiFieldSearch--fullWidth"
+                                                data-test-subj="filterVisType"
+                                                onChange={[Function]}
+                                                onKeyUp={[Function]}
+                                                placeholder="Filter"
+                                                type="search"
+                                                value=""
+                                              />
+                                            </EuiValidatableControl>
+                                            <EuiFormControlLayoutIcons
+                                              icon="search"
                                               isLoading={false}
-                                              onChange={[Function]}
-                                              placeholder="Filter"
-                                              value=""
                                             >
-                                              <EuiFormControlLayout
-                                                compressed={false}
-                                                fullWidth={true}
-                                                icon="search"
-                                                isLoading={false}
+                                              <div
+                                                className="euiFormControlLayoutIcons"
                                               >
-                                                <div
-                                                  className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                                                <EuiFormControlLayoutCustomIcon
+                                                  type="search"
                                                 >
-                                                  <div
-                                                    className="euiFormControlLayout__childrenWrapper"
+                                                  <span
+                                                    className="euiFormControlLayoutCustomIcon"
                                                   >
-                                                    <EuiValidatableControl>
-                                                      <input
-                                                        aria-label="Filter for a visualization type"
-                                                        className="euiFieldSearch euiFieldSearch--fullWidth"
-                                                        data-test-subj="filterVisType"
-                                                        onChange={[Function]}
-                                                        onKeyUp={[Function]}
-                                                        placeholder="Filter"
-                                                        type="search"
-                                                        value=""
-                                                      />
-                                                    </EuiValidatableControl>
-                                                    <EuiFormControlLayoutIcons
-                                                      icon="search"
-                                                      isLoading={false}
+                                                    <EuiIcon
+                                                      aria-hidden="true"
+                                                      className="euiFormControlLayoutCustomIcon__icon"
+                                                      type="search"
                                                     >
                                                       <div
-                                                        className="euiFormControlLayoutIcons"
-                                                      >
-                                                        <EuiFormControlLayoutCustomIcon
-                                                          type="search"
-                                                        >
-                                                          <span
-                                                            className="euiFormControlLayoutCustomIcon"
-                                                          >
-                                                            <EuiIcon
-                                                              aria-hidden="true"
-                                                              className="euiFormControlLayoutCustomIcon__icon"
-                                                              type="search"
-                                                            >
-                                                              <div
-                                                                aria-hidden="true"
-                                                                className="euiFormControlLayoutCustomIcon__icon"
-                                                                data-euiicon-type="search"
-                                                              />
-                                                            </EuiIcon>
-                                                          </span>
-                                                        </EuiFormControlLayoutCustomIcon>
-                                                      </div>
-                                                    </EuiFormControlLayoutIcons>
-                                                  </div>
-                                                </div>
-                                              </EuiFormControlLayout>
-                                            </EuiFieldSearch>
+                                                        aria-hidden="true"
+                                                        className="euiFormControlLayoutCustomIcon__icon"
+                                                        data-euiicon-type="search"
+                                                      />
+                                                    </EuiIcon>
+                                                  </span>
+                                                </EuiFormControlLayoutCustomIcon>
+                                              </div>
+                                            </EuiFormControlLayoutIcons>
                                           </div>
-                                        </EuiFlexItem>
-                                        <EuiFlexItem
-                                          className="visNewVisDialog__typesWrapper"
-                                          grow={1}
+                                        </div>
+                                      </EuiFormControlLayout>
+                                    </EuiFieldSearch>
+                                  </div>
+                                </EuiFlexItem>
+                                <EuiFlexItem
+                                  className="visNewVisDialog__typesWrapper"
+                                  grow={1}
+                                >
+                                  <div
+                                    className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
+                                  >
+                                    <EuiScreenReaderOnly>
+                                      <span
+                                        aria-live="polite"
+                                        className="euiScreenReaderOnly"
+                                      />
+                                    </EuiScreenReaderOnly>
+                                    <EuiKeyPadMenu
+                                      className="visNewVisDialog__types"
+                                      data-test-subj="visNewDialogTypes"
+                                    >
+                                      <ul
+                                        className="euiKeyPadMenu visNewVisDialog__types"
+                                        data-test-subj="visNewDialogTypes"
+                                      >
+                                        <li
+                                          key=".$vis"
                                         >
-                                          <div
-                                            className="euiFlexItem euiFlexItem--flexGrow1 visNewVisDialog__typesWrapper"
-                                          >
-                                            <EuiScreenReaderOnly>
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-vis"
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-vis"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            key="vis"
+                                            label={
                                               <span
-                                                aria-live="polite"
-                                                className="euiScreenReaderOnly"
-                                              />
-                                            </EuiScreenReaderOnly>
-                                            <EuiKeyPadMenu
-                                              className="visNewVisDialog__types"
-                                              data-test-subj="visNewDialogTypes"
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis Type 1
+                                              </span>
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
+                                          >
+                                            <button
+                                              aria-describedby="visTypeDescription-vis"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-vis"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
                                             >
-                                              <ul
-                                                className="euiKeyPadMenu visNewVisDialog__types"
-                                                data-test-subj="visNewDialogTypes"
+                                              <div
+                                                className="euiKeyPadMenuItem__inner"
                                               >
-                                                <li
-                                                  key=".$vis"
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
                                                 >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-vis"
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-vis"
-                                                    data-vis-stage="production"
-                                                    disabled={false}
-                                                    key="vis"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis Type 1
-                                                      </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
-                                                  >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-vis"
-                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                      data-test-subj="visType-vis"
-                                                      data-vis-stage="production"
-                                                      disabled={false}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
                                                       <div
-                                                        className="euiKeyPadMenuItem__inner"
-                                                      >
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis Type 1
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                                <li
-                                                  key=".$visWithAliasUrl"
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
                                                 >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                    betaBadgeIconType="popout"
-                                                    betaBadgeLabel="Kibana application"
-                                                    betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-visWithAliasUrl"
-                                                    data-vis-stage="alias"
-                                                    disabled={false}
-                                                    key="visWithAliasUrl"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis with alias Url
-                                                      </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
                                                   >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-visWithAliasUrl"
-                                                      className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
-                                                      data-test-subj="visType-visWithAliasUrl"
-                                                      data-vis-stage="alias"
-                                                      disabled={false}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
+                                                    Vis Type 1
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                        <li
+                                          key=".$visWithAliasUrl"
+                                        >
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-visWithAliasUrl"
+                                            betaBadgeIconType="popout"
+                                            betaBadgeLabel="Kibana application"
+                                            betaBadgeTooltipContent="Opens a Kibana application that is outside of Visualize."
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-visWithAliasUrl"
+                                            data-vis-stage="alias"
+                                            disabled={false}
+                                            key="visWithAliasUrl"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis with alias Url
+                                              </span>
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
+                                          >
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithAliasUrl"
+                                              className="euiKeyPadMenuItem euiKeyPadMenuItem--hasBetaBadge visNewVisDialog__type"
+                                              data-test-subj="visType-visWithAliasUrl"
+                                              data-vis-stage="alias"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
+                                            >
+                                              <div
+                                                className="euiKeyPadMenuItem__inner"
+                                              >
+                                                <span
+                                                  className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                >
+                                                  <EuiBetaBadge
+                                                    className="euiKeyPadMenuItem__betaBadge"
+                                                    iconType="popout"
+                                                    label="Kibana application"
+                                                    tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                  >
+                                                    <EuiToolTip
+                                                      content="Opens a Kibana application that is outside of Visualize."
+                                                      delay="regular"
+                                                      position="top"
+                                                      title="Kibana application"
                                                     >
-                                                      <div
-                                                        className="euiKeyPadMenuItem__inner"
+                                                      <span
+                                                        className="euiToolTipAnchor"
+                                                        onKeyUp={[Function]}
+                                                        onMouseOut={[Function]}
+                                                        onMouseOver={[Function]}
                                                       >
                                                         <span
-                                                          className="euiKeyPadMenuItem__betaBadgeWrapper"
+                                                          className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
+                                                          onBlur={[Function]}
+                                                          onFocus={[Function]}
+                                                          tabIndex={0}
                                                         >
-                                                          <EuiBetaBadge
-                                                            className="euiKeyPadMenuItem__betaBadge"
-                                                            iconType="popout"
-                                                            label="Kibana application"
-                                                            tooltipContent="Opens a Kibana application that is outside of Visualize."
+                                                          <EuiIcon
+                                                            aria-hidden="true"
+                                                            className="euiBetaBadge__icon"
+                                                            size="m"
+                                                            type="popout"
                                                           >
-                                                            <EuiToolTip
-                                                              content="Opens a Kibana application that is outside of Visualize."
-                                                              delay="regular"
-                                                              position="top"
-                                                              title="Kibana application"
-                                                            >
-                                                              <span
-                                                                className="euiToolTipAnchor"
-                                                                onKeyUp={[Function]}
-                                                                onMouseOut={[Function]}
-                                                                onMouseOver={[Function]}
-                                                              >
-                                                                <span
-                                                                  className="euiBetaBadge euiBetaBadge--iconOnly euiKeyPadMenuItem__betaBadge"
-                                                                  onBlur={[Function]}
-                                                                  onFocus={[Function]}
-                                                                  tabIndex={0}
-                                                                >
-                                                                  <EuiIcon
-                                                                    aria-hidden="true"
-                                                                    className="euiBetaBadge__icon"
-                                                                    size="m"
-                                                                    type="popout"
-                                                                  >
-                                                                    <div
-                                                                      aria-hidden="true"
-                                                                      className="euiBetaBadge__icon"
-                                                                      data-euiicon-type="popout"
-                                                                      size="m"
-                                                                    />
-                                                                  </EuiIcon>
-                                                                </span>
-                                                              </span>
-                                                            </EuiToolTip>
-                                                          </EuiBetaBadge>
+                                                            <div
+                                                              aria-hidden="true"
+                                                              className="euiBetaBadge__icon"
+                                                              data-euiicon-type="popout"
+                                                              size="m"
+                                                            />
+                                                          </EuiIcon>
                                                         </span>
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis with alias Url
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                                <li
-                                                  key=".$visWithSearch"
-                                                >
-                                                  <EuiKeyPadMenuItem
-                                                    aria-describedby="visTypeDescription-visWithSearch"
-                                                    className="visNewVisDialog__type"
-                                                    data-test-subj="visType-visWithSearch"
-                                                    data-vis-stage="production"
-                                                    disabled={false}
-                                                    key="visWithSearch"
-                                                    label={
-                                                      <span
-                                                        data-test-subj="visTypeTitle"
-                                                      >
-                                                        Vis with search
                                                       </span>
-                                                    }
-                                                    onBlur={[Function]}
-                                                    onClick={[Function]}
-                                                    onFocus={[Function]}
-                                                    onMouseEnter={[Function]}
-                                                    onMouseLeave={[Function]}
-                                                    role="menuitem"
-                                                  >
-                                                    <button
-                                                      aria-describedby="visTypeDescription-visWithSearch"
-                                                      className="euiKeyPadMenuItem visNewVisDialog__type"
-                                                      data-test-subj="visType-visWithSearch"
-                                                      data-vis-stage="production"
-                                                      disabled={false}
-                                                      onBlur={[Function]}
-                                                      onClick={[Function]}
-                                                      onFocus={[Function]}
-                                                      onMouseEnter={[Function]}
-                                                      onMouseLeave={[Function]}
-                                                      role="menuitem"
-                                                      type="button"
+                                                    </EuiToolTip>
+                                                  </EuiBetaBadge>
+                                                </span>
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
                                                     >
                                                       <div
-                                                        className="euiKeyPadMenuItem__inner"
-                                                      >
-                                                        <div
-                                                          className="euiKeyPadMenuItem__icon"
-                                                        >
-                                                          <VisTypeIcon>
-                                                            <EuiIcon
-                                                              color="secondary"
-                                                              size="l"
-                                                              type="empty"
-                                                            >
-                                                              <div
-                                                                color="secondary"
-                                                                data-euiicon-type="empty"
-                                                                size="l"
-                                                              />
-                                                            </EuiIcon>
-                                                          </VisTypeIcon>
-                                                        </div>
-                                                        <p
-                                                          className="euiKeyPadMenuItem__label"
-                                                        >
-                                                          <span
-                                                            data-test-subj="visTypeTitle"
-                                                          >
-                                                            Vis with search
-                                                          </span>
-                                                        </p>
-                                                      </div>
-                                                    </button>
-                                                  </EuiKeyPadMenuItem>
-                                                </li>
-                                              </ul>
-                                            </EuiKeyPadMenu>
-                                          </div>
-                                        </EuiFlexItem>
-                                      </div>
-                                    </EuiFlexGroup>
-                                  </div>
-                                </EuiFlexItem>
-                                <EuiFlexItem
-                                  className="visNewVisDialog__description"
-                                  grow={false}
-                                >
-                                  <div
-                                    className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
-                                  >
-                                    <EuiTitle
-                                      size="s"
-                                    >
-                                      <h2
-                                        className="euiTitle euiTitle--small"
-                                      >
-                                        <FormattedMessage
-                                          defaultMessage="Select a visualization type"
-                                          id="visualizations.newVisWizard.selectVisType"
-                                          values={Object {}}
-                                        >
-                                          Select a visualization type
-                                        </FormattedMessage>
-                                      </h2>
-                                    </EuiTitle>
-                                    <EuiSpacer
-                                      size="m"
-                                    >
-                                      <div
-                                        className="euiSpacer euiSpacer--m"
-                                      />
-                                    </EuiSpacer>
-                                    <NewVisHelp
-                                      onPromotionClicked={[Function]}
-                                      promotedTypes={Array []}
-                                    >
-                                      <EuiText>
-                                        <div
-                                          className="euiText euiText--medium"
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with alias Url
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                        <li
+                                          key=".$visWithSearch"
                                         >
-                                          <p>
-                                            <FormattedMessage
-                                              defaultMessage="Start creating your visualization by selecting a type for that visualization."
-                                              id="visualizations.newVisWizard.helpText"
-                                              values={Object {}}
+                                          <EuiKeyPadMenuItem
+                                            aria-describedby="visTypeDescription-visWithSearch"
+                                            className="visNewVisDialog__type"
+                                            data-test-subj="visType-visWithSearch"
+                                            data-vis-stage="production"
+                                            disabled={false}
+                                            key="visWithSearch"
+                                            label={
+                                              <span
+                                                data-test-subj="visTypeTitle"
+                                              >
+                                                Vis with search
+                                              </span>
+                                            }
+                                            onBlur={[Function]}
+                                            onClick={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                            role="menuitem"
+                                          >
+                                            <button
+                                              aria-describedby="visTypeDescription-visWithSearch"
+                                              className="euiKeyPadMenuItem visNewVisDialog__type"
+                                              data-test-subj="visType-visWithSearch"
+                                              data-vis-stage="production"
+                                              disabled={false}
+                                              onBlur={[Function]}
+                                              onClick={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                              role="menuitem"
+                                              type="button"
                                             >
-                                              Start creating your visualization by selecting a type for that visualization.
-                                            </FormattedMessage>
-                                          </p>
-                                        </div>
-                                      </EuiText>
-                                    </NewVisHelp>
+                                              <div
+                                                className="euiKeyPadMenuItem__inner"
+                                              >
+                                                <div
+                                                  className="euiKeyPadMenuItem__icon"
+                                                >
+                                                  <VisTypeIcon>
+                                                    <EuiIcon
+                                                      color="secondary"
+                                                      size="l"
+                                                      type="empty"
+                                                    >
+                                                      <div
+                                                        color="secondary"
+                                                        data-euiicon-type="empty"
+                                                        size="l"
+                                                      />
+                                                    </EuiIcon>
+                                                  </VisTypeIcon>
+                                                </div>
+                                                <p
+                                                  className="euiKeyPadMenuItem__label"
+                                                >
+                                                  <span
+                                                    data-test-subj="visTypeTitle"
+                                                  >
+                                                    Vis with search
+                                                  </span>
+                                                </p>
+                                              </div>
+                                            </button>
+                                          </EuiKeyPadMenuItem>
+                                        </li>
+                                      </ul>
+                                    </EuiKeyPadMenu>
                                   </div>
                                 </EuiFlexItem>
                               </div>
                             </EuiFlexGroup>
                           </div>
-                        </TypeSelection>
+                        </EuiFlexItem>
+                        <EuiFlexItem
+                          className="visNewVisDialog__description"
+                          grow={false}
+                        >
+                          <div
+                            className="euiFlexItem euiFlexItem--flexGrowZero visNewVisDialog__description"
+                          >
+                            <EuiTitle
+                              size="s"
+                            >
+                              <h2
+                                className="euiTitle euiTitle--small"
+                              >
+                                <FormattedMessage
+                                  defaultMessage="Select a visualization type"
+                                  id="visualizations.newVisWizard.selectVisType"
+                                  values={Object {}}
+                                >
+                                  Select a visualization type
+                                </FormattedMessage>
+                              </h2>
+                            </EuiTitle>
+                            <EuiSpacer
+                              size="m"
+                            >
+                              <div
+                                className="euiSpacer euiSpacer--m"
+                              />
+                            </EuiSpacer>
+                            <NewVisHelp
+                              onPromotionClicked={[Function]}
+                              promotedTypes={Array []}
+                            >
+                              <EuiText>
+                                <div
+                                  className="euiText euiText--medium"
+                                >
+                                  <p>
+                                    <FormattedMessage
+                                      defaultMessage="Start creating your visualization by selecting a type for that visualization."
+                                      id="visualizations.newVisWizard.helpText"
+                                      values={Object {}}
+                                    >
+                                      Start creating your visualization by selecting a type for that visualization.
+                                    </FormattedMessage>
+                                  </p>
+                                </div>
+                              </EuiText>
+                            </NewVisHelp>
+                          </div>
+                        </EuiFlexItem>
                       </div>
-                    </div>
+                    </EuiFlexGroup>
                   </div>
-                </ForwardRef>
-                <div
-                  data-focus-guard={true}
-                  style={
-                    Object {
-                      "height": "0px",
-                      "left": "1px",
-                      "overflow": "hidden",
-                      "padding": 0,
-                      "position": "fixed",
-                      "top": "1px",
-                      "width": "1px",
-                    }
-                  }
-                  tabIndex={0}
-                />
-              </ForwardRef>
-              <RequireSideCar
-                noIsolation={true}
-                setLockProps={[Function]}
-                sideCar={
-                  Object {
-                    "assignMedium": [Function],
-                    "assignSyncMedium": [Function],
-                    "options": Object {
-                      "async": true,
-                      "ssr": false,
-                    },
-                    "read": [Function],
-                    "useMedium": [Function],
-                  }
-                }
-              >
-                <SideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
-                >
-                  <Effect
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                  >
-                    <Component>
-                      <Sheet
-                        styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                      />
-                    </Component>
-                  </Effect>
-                </SideCar>
-              </RequireSideCar>
-            </ForwardRef>
-          </ForwardRef>
+                </TypeSelection>
+              </div>
+            </div>
+          </div>
         </EuiFocusTrap>
       </EuiModal>
     </Portal>
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index b04fbc2bb2136..c5e080e3c8175 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
diff --git a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
index e4a66fe47d8f2..dac901f496304 100644
--- a/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 0e560dd7be7c3..b7c494807672e 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "react": "^16.12.0"
   },
   "scripts": {
diff --git a/x-pack/dev-tools/jest/create_jest_config.js b/x-pack/dev-tools/jest/create_jest_config.js
index 0e3f82792a2ba..a0574dbdf36da 100644
--- a/x-pack/dev-tools/jest/create_jest_config.js
+++ b/x-pack/dev-tools/jest/create_jest_config.js
@@ -58,7 +58,6 @@ export function createJestConfig({ kibanaDirectory, rootDir, xPackKibanaDirector
       `${xPackKibanaDirectory}/dev-tools/jest/setup/setup_test.js`,
       `${kibanaDirectory}/src/dev/jest/setup/mocks.js`,
       `${kibanaDirectory}/src/dev/jest/setup/react_testing_library.js`,
-      `${kibanaDirectory}/src/dev/jest/setup/default_timeout.js`,
     ],
     testEnvironment: 'jest-environment-jsdom-thirteen',
     testMatch: ['**/*.test.{js,mjs,ts,tsx}'],
diff --git a/x-pack/package.json b/x-pack/package.json
index a70373db36603..a9ffb85924562 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -206,7 +206,7 @@
     "@elastic/apm-rum-react": "^1.2.3",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "27.4.0",
+    "@elastic/eui": "27.4.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.2.1",
diff --git a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
index 1fa440ebb794c..30c65e71f8019 100644
--- a/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap
@@ -1,10 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionActionMenu component should match the snapshot 1`] = `
-<div
-  aria-hidden="true"
-  data-aria-hidden="true"
->
+<div>
   <div
     class="euiPopover euiPopover--anchorDownRight"
     id="transactionActionMenu"
diff --git a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
index 4f44c0cf85f17..26e586f4564dc 100644
--- a/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot
@@ -1,781 +1,673 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasAssetManager canvasModal--fixedSize"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "1000px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasAssetManager canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader canvasAssetManager__modalHeader"
       >
         <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
+          className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+        >
+          Manage workpad assets
+        </div>
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive canvasAssetManager__fileUploadWrapper"
         >
           <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
-          >
-            Manage workpad assets
-          </div>
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive canvasAssetManager__fileUploadWrapper"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              className="euiFilePicker euiFilePicker--compressed"
             >
               <div
-                className="euiFilePicker euiFilePicker--compressed"
+                className="euiFilePicker__wrap"
               >
+                <input
+                  accept="image/*"
+                  aria-describedby="generated-id"
+                  className="euiFilePicker__input"
+                  multiple={true}
+                  onChange={[Function]}
+                  onDragLeave={[Function]}
+                  onDragOver={[Function]}
+                  onDrop={[Function]}
+                  type="file"
+                />
                 <div
-                  className="euiFilePicker__wrap"
+                  className="euiFilePicker__prompt"
+                  id="generated-id"
                 >
-                  <input
-                    accept="image/*"
-                    aria-describedby="generated-id"
-                    className="euiFilePicker__input"
-                    multiple={true}
-                    onChange={[Function]}
-                    onDragLeave={[Function]}
-                    onDragOver={[Function]}
-                    onDrop={[Function]}
-                    type="file"
+                  <div
+                    aria-hidden="true"
+                    className="euiFilePicker__icon"
+                    data-euiicon-type="importAction"
+                    size="m"
                   />
                   <div
-                    className="euiFilePicker__prompt"
-                    id="generated-id"
+                    className="euiFilePicker__promptText"
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiFilePicker__icon"
-                      data-euiicon-type="importAction"
-                      size="m"
-                    />
-                    <div
-                      className="euiFilePicker__promptText"
-                    >
-                      Select or drag and drop images
-                    </div>
+                    Select or drag and drop images
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiText euiText--small"
           >
             <div
-              className="euiText euiText--small"
+              className="euiTextColor euiTextColor--subdued"
             >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              >
-                <p>
-                  Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.
-                </p>
-              </div>
+              <p>
+                Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.
+              </p>
             </div>
+          </div>
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiPanel euiPanel--paddingMedium canvasAssetManager__emptyPanel"
+          >
             <div
-              className="euiSpacer euiSpacer--l"
-            />
-            <div
-              className="euiPanel euiPanel--paddingMedium canvasAssetManager__emptyPanel"
+              className="euiEmptyPrompt"
             >
               <div
-                className="euiEmptyPrompt"
+                color="subdued"
+                data-euiicon-type="importAction"
+                size="xxl"
+              />
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+              <span
+                className="euiTextColor euiTextColor--subdued"
               >
+                <h2
+                  className="euiTitle euiTitle--xsmall"
+                >
+                  Import your assets to get started
+                </h2>
                 <div
-                  color="subdued"
-                  data-euiicon-type="importAction"
-                  size="xxl"
+                  className="euiSpacer euiSpacer--m"
                 />
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
-                <span
-                  className="euiTextColor euiTextColor--subdued"
-                >
-                  <h2
-                    className="euiTitle euiTitle--xsmall"
-                  >
-                    Import your assets to get started
-                  </h2>
-                  <div
-                    className="euiSpacer euiSpacer--m"
-                  />
-                </span>
-              </div>
+              </span>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter canvasAssetManager__modalFooter"
+      >
         <div
-          className="euiModalFooter canvasAssetManager__modalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow canvasAssetManager__meterWrapper"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow canvasAssetManager__meterWrapper"
+            className="euiFlexItem"
+          >
+            <progress
+              aria-hidden={false}
+              aria-labelledby="CanvasAssetManagerLabel"
+              className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
+              max={25000}
+              value={0}
+            />
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero eui-textNoWrap"
           >
             <div
-              className="euiFlexItem"
-            >
-              <progress
-                aria-hidden={false}
-                aria-labelledby="CanvasAssetManagerLabel"
-                className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
-                max={25000}
-                value={0}
-              />
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero eui-textNoWrap"
+              className="euiText euiText--medium"
+              id="CanvasAssetManagerLabel"
             >
-              <div
-                className="euiText euiText--medium"
-                id="CanvasAssetManagerLabel"
-              >
-                0% space used
-              </div>
+              0% space used
             </div>
           </div>
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            onClick={[Function]}
-            type="button"
+        </div>
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
           >
             <span
-              className="euiButtonContent euiButton__content"
+              className="euiButton__text"
             >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
+              Close
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/Assets/AssetManager two assets 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasAssetManager canvasModal--fixedSize"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "1000px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasAssetManager canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader canvasAssetManager__modalHeader"
       >
         <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
+          className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+        >
+          Manage workpad assets
+        </div>
+        <div
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive canvasAssetManager__fileUploadWrapper"
         >
           <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
-          >
-            Manage workpad assets
-          </div>
-          <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive canvasAssetManager__fileUploadWrapper"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
             <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              className="euiFilePicker euiFilePicker--compressed"
             >
               <div
-                className="euiFilePicker euiFilePicker--compressed"
+                className="euiFilePicker__wrap"
               >
+                <input
+                  accept="image/*"
+                  aria-describedby="generated-id"
+                  className="euiFilePicker__input"
+                  multiple={true}
+                  onChange={[Function]}
+                  onDragLeave={[Function]}
+                  onDragOver={[Function]}
+                  onDrop={[Function]}
+                  type="file"
+                />
                 <div
-                  className="euiFilePicker__wrap"
+                  className="euiFilePicker__prompt"
+                  id="generated-id"
                 >
-                  <input
-                    accept="image/*"
-                    aria-describedby="generated-id"
-                    className="euiFilePicker__input"
-                    multiple={true}
-                    onChange={[Function]}
-                    onDragLeave={[Function]}
-                    onDragOver={[Function]}
-                    onDrop={[Function]}
-                    type="file"
+                  <div
+                    aria-hidden="true"
+                    className="euiFilePicker__icon"
+                    data-euiicon-type="importAction"
+                    size="m"
                   />
                   <div
-                    className="euiFilePicker__prompt"
-                    id="generated-id"
+                    className="euiFilePicker__promptText"
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiFilePicker__icon"
-                      data-euiicon-type="importAction"
-                      size="m"
-                    />
-                    <div
-                      className="euiFilePicker__promptText"
-                    >
-                      Select or drag and drop images
-                    </div>
+                    Select or drag and drop images
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiText euiText--small"
           >
             <div
-              className="euiText euiText--small"
+              className="euiTextColor euiTextColor--subdued"
             >
-              <div
-                className="euiTextColor euiTextColor--subdued"
-              >
-                <p>
-                  Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.
-                </p>
-              </div>
+              <p>
+                Below are the image assets in this workpad. Any assets that are currently in use cannot be determined at this time. To reclaim space, delete assets.
+              </p>
             </div>
+          </div>
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
+          >
             <div
-              className="euiSpacer euiSpacer--l"
-            />
-            <div
-              className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
+              className="euiFlexItem"
             >
               <div
-                className="euiFlexItem"
+                className="euiPanel euiPanel--paddingSmall canvasAsset"
               >
                 <div
-                  className="euiPanel euiPanel--paddingSmall canvasAsset"
+                  className="canvasAsset__thumb canvasCheckered"
                 >
-                  <div
-                    className="canvasAsset__thumb canvasCheckered"
+                  <figure
+                    className="euiImage canvasAsset__img "
+                  >
+                    <img
+                      alt="Asset thumbnail"
+                      className="euiImage__img"
+                      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4="
+                      style={Object {}}
+                    />
+                  </figure>
+                </div>
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+                <div
+                  className="euiText euiText--extraSmall eui-textBreakAll"
+                >
+                  <p
+                    className="eui-textBreakAll"
                   >
-                    <figure
-                      className="euiImage canvasAsset__img "
+                    <strong>
+                      airplane
+                    </strong>
+                    <br />
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
                     >
-                      <img
-                        alt="Asset thumbnail"
-                        className="euiImage__img"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1Ni4zMSA1Ni4zMSI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMDc4YTA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPlBsYW5lIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNDkuNTEsNDguOTMsNDEuMjYsMjIuNTIsNTMuNzYsMTBhNS4yOSw1LjI5LDAsMCwwLTcuNDgtNy40N2wtMTIuNSwxMi41TDcuMzgsNi43OUEuNy43LDAsMCwwLDYuNjksN0wxLjIsMTIuNDVhLjcuNywwLDAsMCwwLDFMMTkuODUsMjlsLTcuMjQsNy4yNC03Ljc0LS42YS43MS43MSwwLDAsMC0uNTMuMkwxLjIxLDM5YS42Ny42NywwLDAsMCwuMDgsMUw5LjQ1LDQ2bC4wNywwYy4xMS4xMy4yMi4yNi4zNC4zOHMuMjUuMjMuMzguMzRhLjM2LjM2LDAsMCwwLDAsLjA3TDE2LjMzLDU1YS42OC42OCwwLDAsMCwxLC4wN0wyMC40OSw1MmEuNjcuNjcsMCwwLDAsLjE5LS41NGwtLjU5LTcuNzQsNy4yNC03LjI0TDQyLjg1LDU1LjA2YS42OC42OCwwLDAsMCwxLDBsNS41LTUuNUEuNjYuNjYsMCwwLDAsNDkuNTEsNDguOTNaIi8+PC9nPjwvZz48L3N2Zz4="
-                        style={Object {}}
-                      />
-                    </figure>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
+                      <small>
+                        (
+                        1
+                         kb)
+                      </small>
+                    </span>
+                  </p>
+                </div>
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
+                >
                   <div
-                    className="euiText euiText--extraSmall eui-textBreakAll"
+                    className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
                   >
-                    <p
-                      className="eui-textBreakAll"
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <strong>
-                        airplane
-                      </strong>
-                      <br />
-                      <span
-                        className="euiTextColor euiTextColor--subdued"
+                      <button
+                        aria-label="Create image element"
+                        className="euiButtonIcon euiButtonIcon--primary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
                       >
-                        <small>
-                          (
-                          1
-                           kb)
-                        </small>
-                      </span>
-                    </p>
+                        <div
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          data-euiicon-type="vector"
+                          size="m"
+                        />
+                      </button>
+                    </span>
                   </div>
                   <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
+                    className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
+                      <div
+                        className="canvasDownload"
+                        onClick={[Function]}
+                        onKeyPress={[Function]}
+                        role="button"
+                        tabIndex={0}
                       >
                         <button
-                          aria-label="Create image element"
+                          aria-label="Download"
                           className="euiButtonIcon euiButtonIcon--primary"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
                           type="button"
                         >
                           <div
                             aria-hidden="true"
                             className="euiButtonIcon__icon"
-                            data-euiicon-type="vector"
+                            data-euiicon-type="sortDown"
                             size="m"
                           />
                         </button>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasDownload"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Download"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="sortDown"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasClipboard"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Copy id to clipboard"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="copyClipboard"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      </div>
+                    </span>
+                  </div>
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
+                      <div
+                        className="canvasClipboard"
+                        onClick={[Function]}
+                        onKeyPress={[Function]}
+                        role="button"
+                        tabIndex={0}
                       >
                         <button
-                          aria-label="Delete"
-                          className="euiButtonIcon euiButtonIcon--danger"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
+                          aria-label="Copy id to clipboard"
+                          className="euiButtonIcon euiButtonIcon--primary"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
                             className="euiButtonIcon__icon"
-                            data-euiicon-type="trash"
+                            data-euiicon-type="copyClipboard"
                             size="m"
                           />
                         </button>
-                      </span>
-                    </div>
+                      </div>
+                    </span>
+                  </div>
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                    >
+                      <button
+                        aria-label="Delete"
+                        className="euiButtonIcon euiButtonIcon--danger"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
+                      >
+                        <div
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          data-euiicon-type="trash"
+                          size="m"
+                        />
+                      </button>
+                    </span>
                   </div>
                 </div>
               </div>
+            </div>
+            <div
+              className="euiFlexItem"
+            >
               <div
-                className="euiFlexItem"
+                className="euiPanel euiPanel--paddingSmall canvasAsset"
               >
                 <div
-                  className="euiPanel euiPanel--paddingSmall canvasAsset"
+                  className="canvasAsset__thumb canvasCheckered"
                 >
-                  <div
-                    className="canvasAsset__thumb canvasCheckered"
+                  <figure
+                    className="euiImage canvasAsset__img "
                   >
-                    <figure
-                      className="euiImage canvasAsset__img "
+                    <img
+                      alt="Asset thumbnail"
+                      className="euiImage__img"
+                      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4="
+                      style={Object {}}
+                    />
+                  </figure>
+                </div>
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+                <div
+                  className="euiText euiText--extraSmall eui-textBreakAll"
+                >
+                  <p
+                    className="eui-textBreakAll"
+                  >
+                    <strong>
+                      marker
+                    </strong>
+                    <br />
+                    <span
+                      className="euiTextColor euiTextColor--subdued"
                     >
-                      <img
-                        alt="Asset thumbnail"
-                        className="euiImage__img"
-                        src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzOC4zOSA1Ny41NyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7c3Ryb2tlOiMwMTliOGY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPkxvY2F0aW9uIEljb248L3RpdGxlPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkuMTksMUExOC4xOSwxOC4xOSwwLDAsMCwyLjk0LDI3LjM2aDBhMTkuNTEsMTkuNTEsMCwwLDAsMSwxLjc4TDE5LjE5LDU1LjU3LDM0LjM4LDI5LjIxQTE4LjE5LDE4LjE5LDAsMCwwLDE5LjE5LDFabTAsMjMuMjlhNS41Myw1LjUzLDAsMSwxLDUuNTMtNS41M0E1LjUzLDUuNTMsMCwwLDEsMTkuMTksMjQuMjlaIi8+PC9nPjwvZz48L3N2Zz4="
-                        style={Object {}}
-                      />
-                    </figure>
-                  </div>
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
+                      <small>
+                        (
+                        1
+                         kb)
+                      </small>
+                    </span>
+                  </p>
+                </div>
+                <div
+                  className="euiSpacer euiSpacer--s"
+                />
+                <div
+                  className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
+                >
                   <div
-                    className="euiText euiText--extraSmall eui-textBreakAll"
+                    className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
                   >
-                    <p
-                      className="eui-textBreakAll"
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <strong>
-                        marker
-                      </strong>
-                      <br />
-                      <span
-                        className="euiTextColor euiTextColor--subdued"
+                      <button
+                        aria-label="Create image element"
+                        className="euiButtonIcon euiButtonIcon--primary"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
                       >
-                        <small>
-                          (
-                          1
-                           kb)
-                        </small>
-                      </span>
-                    </p>
+                        <div
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          data-euiicon-type="vector"
+                          size="m"
+                        />
+                      </button>
+                    </span>
                   </div>
                   <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                  <div
-                    className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsBaseline euiFlexGroup--justifyContentCenter euiFlexGroup--directionRow"
+                    className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
                   >
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-create-image"
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
+                      <div
+                        className="canvasDownload"
+                        onClick={[Function]}
+                        onKeyPress={[Function]}
+                        role="button"
+                        tabIndex={0}
                       >
                         <button
-                          aria-label="Create image element"
+                          aria-label="Download"
                           className="euiButtonIcon euiButtonIcon--primary"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
                           type="button"
                         >
                           <div
                             aria-hidden="true"
                             className="euiButtonIcon__icon"
-                            data-euiicon-type="vector"
+                            data-euiicon-type="sortDown"
                             size="m"
                           />
                         </button>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero asset-download"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasDownload"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Download"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="sortDown"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
-                    >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
-                      >
-                        <div
-                          className="canvasClipboard"
-                          onClick={[Function]}
-                          onKeyPress={[Function]}
-                          role="button"
-                          tabIndex={0}
-                        >
-                          <button
-                            aria-label="Copy id to clipboard"
-                            className="euiButtonIcon euiButtonIcon--primary"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              className="euiButtonIcon__icon"
-                              data-euiicon-type="copyClipboard"
-                              size="m"
-                            />
-                          </button>
-                        </div>
-                      </span>
-                    </div>
-                    <div
-                      className="euiFlexItem euiFlexItem--flexGrowZero"
+                      </div>
+                    </span>
+                  </div>
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
                     >
-                      <span
-                        className="euiToolTipAnchor"
-                        onKeyUp={[Function]}
-                        onMouseOut={[Function]}
-                        onMouseOver={[Function]}
+                      <div
+                        className="canvasClipboard"
+                        onClick={[Function]}
+                        onKeyPress={[Function]}
+                        role="button"
+                        tabIndex={0}
                       >
                         <button
-                          aria-label="Delete"
-                          className="euiButtonIcon euiButtonIcon--danger"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
+                          aria-label="Copy id to clipboard"
+                          className="euiButtonIcon euiButtonIcon--primary"
                           type="button"
                         >
                           <div
                             aria-hidden="true"
                             className="euiButtonIcon__icon"
-                            data-euiicon-type="trash"
+                            data-euiicon-type="copyClipboard"
                             size="m"
                           />
                         </button>
-                      </span>
-                    </div>
+                      </div>
+                    </span>
+                  </div>
+                  <div
+                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  >
+                    <span
+                      className="euiToolTipAnchor"
+                      onKeyUp={[Function]}
+                      onMouseOut={[Function]}
+                      onMouseOver={[Function]}
+                    >
+                      <button
+                        aria-label="Delete"
+                        className="euiButtonIcon euiButtonIcon--danger"
+                        onBlur={[Function]}
+                        onClick={[Function]}
+                        onFocus={[Function]}
+                        type="button"
+                      >
+                        <div
+                          aria-hidden="true"
+                          className="euiButtonIcon__icon"
+                          data-euiicon-type="trash"
+                          size="m"
+                        />
+                      </button>
+                    </span>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter canvasAssetManager__modalFooter"
+      >
         <div
-          className="euiModalFooter canvasAssetManager__modalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow canvasAssetManager__meterWrapper"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow canvasAssetManager__meterWrapper"
+            className="euiFlexItem"
+          >
+            <progress
+              aria-hidden={false}
+              aria-labelledby="CanvasAssetManagerLabel"
+              className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
+              max={25000}
+              value={2}
+            />
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero eui-textNoWrap"
           >
             <div
-              className="euiFlexItem"
+              className="euiText euiText--medium"
+              id="CanvasAssetManagerLabel"
             >
-              <progress
-                aria-hidden={false}
-                aria-labelledby="CanvasAssetManagerLabel"
-                className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
-                max={25000}
-                value={2}
-              />
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero eui-textNoWrap"
-            >
-              <div
-                className="euiText euiText--medium"
-                id="CanvasAssetManagerLabel"
-              >
-                0% space used
-              </div>
+              0% space used
             </div>
           </div>
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            onClick={[Function]}
-            type="button"
+        </div>
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          onClick={[Function]}
+          type="button"
+        >
+          <span
+            className="euiButtonContent euiButton__content"
           >
             <span
-              className="euiButtonContent euiButton__content"
+              className="euiButton__text"
             >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
+              Close
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
index 0467161c58c34..0903b4f14084f 100644
--- a/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot
@@ -1,1424 +1,1208 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots components/Elements/CustomElementModal with description 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasCustomElementModal"
+    description="best element ever"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "700px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasCustomElementModal"
-      description="best element ever"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "700px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader"
       >
         <div
-          className="euiModalHeader"
+          className="euiModalHeader__title"
         >
-          <div
-            className="euiModalHeader__title"
-          >
-            <h3>
-              Edit custom element
-            </h3>
-          </div>
+          <h3>
+            Edit custom element
+          </h3>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
+                className="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow euiFormRow--compressed"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Name
-                    </label>
-                  </div>
+                    Name
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormControlLayout"
                   >
                     <div
-                      className="euiFormControlLayout"
-                    >
-                      <div
-                        className="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="generated-id-help"
-                          className="euiFieldText canvasCustomElementForm__name"
-                          data-test-subj="canvasCustomElementForm-name"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          required={true}
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      40 characters remaining
+                      <input
+                        aria-describedby="generated-id-help"
+                        className="euiFieldText canvasCustomElementForm__name"
+                        data-test-subj="canvasCustomElementForm-name"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={true}
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
+                  <div
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
+                  >
+                    40 characters remaining
+                  </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Description
-                    </label>
-                  </div>
+                    Description
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <textarea
+                    aria-describedby="generated-id-help"
+                    className="euiTextArea euiTextArea--resizeVertical"
+                    data-test-subj="canvasCustomElementForm-description"
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    rows={2}
+                    value="best element ever"
+                  />
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
                   >
-                    <textarea
-                      aria-describedby="generated-id-help"
-                      className="euiTextArea euiTextArea--resizeVertical"
-                      data-test-subj="canvasCustomElementForm-description"
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      rows={2}
-                      value="best element ever"
-                    />
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
-                    >
-                      83 characters remaining
-                    </div>
+                    83 characters remaining
                   </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Thumbnail image
-                    </label>
-                  </div>
+                    Thumbnail image
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFilePicker euiFilePicker--large canvasImageUpload"
                   >
                     <div
-                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
+                      className="euiFilePicker__wrap"
                     >
+                      <input
+                        accept="image/*"
+                        aria-describedby="generated-id-filePicker__prompt"
+                        className="euiFilePicker__input"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onDragLeave={[Function]}
+                        onDragOver={[Function]}
+                        onDrop={[Function]}
+                        onFocus={[Function]}
+                        type="file"
+                      />
                       <div
-                        className="euiFilePicker__wrap"
+                        className="euiFilePicker__prompt"
+                        id="generated-id-filePicker__prompt"
                       >
-                        <input
-                          accept="image/*"
-                          aria-describedby="generated-id-filePicker__prompt"
-                          className="euiFilePicker__input"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onDragLeave={[Function]}
-                          onDragOver={[Function]}
-                          onDrop={[Function]}
-                          onFocus={[Function]}
-                          type="file"
+                        <div
+                          aria-hidden="true"
+                          className="euiFilePicker__icon"
+                          data-euiicon-type="importAction"
+                          size="l"
                         />
                         <div
-                          className="euiFilePicker__prompt"
-                          id="generated-id-filePicker__prompt"
+                          className="euiFilePicker__promptText"
                         >
-                          <div
-                            aria-hidden="true"
-                            className="euiFilePicker__icon"
-                            data-euiicon-type="importAction"
-                            size="l"
-                          />
-                          <div
-                            className="euiFilePicker__promptText"
-                          >
-                            Select or drag and drop an image
-                          </div>
+                          Select or drag and drop an image
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div
-                  className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
-                >
-                  <p>
-                    Take a screenshot of your element and upload it here. This can also be done after saving.
-                  </p>
-                </div>
               </div>
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+                className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
+              >
+                <p>
+                  Take a screenshot of your element and upload it here. This can also be done after saving.
+                </p>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+            >
+              <h4
+                className="euiTitle euiTitle--xxxsmall"
+              >
+                Element preview
+              </h4>
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+              <div
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                onClick={[Function]}
               >
-                <h4
-                  className="euiTitle euiTitle--xxxsmall"
-                >
-                  Element preview
-                </h4>
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                  onClick={[Function]}
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiCard__top"
+                    className="euiCard__icon"
+                    data-euiicon-type="canvasApp"
+                    size="xxl"
+                  />
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <div
-                      className="euiCard__icon"
-                      data-euiicon-type="canvasApp"
-                      size="xxl"
-                    />
-                  </div>
+                    
+                  </span>
                   <div
-                    className="euiCard__content"
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
                   >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
-                      
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        best element ever
-                      </p>
-                    </div>
+                    <p>
+                      best element ever
+                    </p>
                   </div>
-                  <div
-                    className="euiCard__footer"
-                  />
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter"
+      >
         <div
-          className="euiModalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <button
+              className="euiButtonEmpty euiButtonEmpty--primary"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButtonEmpty euiButtonEmpty--primary"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
-                  className="euiButtonContent euiButtonEmpty__content"
+                  className="euiButtonEmpty__text"
                 >
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Cancel
-                  </span>
+                  Cancel
                 </span>
-              </button>
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              </span>
+            </button>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              className="euiButton euiButton--primary euiButton--fill"
+              data-test-subj="canvasCustomElementForm-submit"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButton euiButton--primary euiButton--fill"
-                data-test-subj="canvasCustomElementForm-submit"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButton__content"
               >
                 <span
-                  className="euiButtonContent euiButton__content"
+                  className="euiButton__text"
                 >
-                  <span
-                    className="euiButton__text"
-                  >
-                    Save
-                  </span>
+                  Save
                 </span>
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasCustomElementModal"
+    image="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "700px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasCustomElementModal"
-      image="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "700px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader"
       >
         <div
-          className="euiModalHeader"
+          className="euiModalHeader__title"
         >
-          <div
-            className="euiModalHeader__title"
-          >
-            <h3>
-              Edit custom element
-            </h3>
-          </div>
+          <h3>
+            Edit custom element
+          </h3>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
+                className="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow euiFormRow--compressed"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Name
-                    </label>
-                  </div>
+                    Name
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormControlLayout"
                   >
                     <div
-                      className="euiFormControlLayout"
-                    >
-                      <div
-                        className="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="generated-id-help"
-                          className="euiFieldText canvasCustomElementForm__name"
-                          data-test-subj="canvasCustomElementForm-name"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          required={true}
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      40 characters remaining
+                      <input
+                        aria-describedby="generated-id-help"
+                        className="euiFieldText canvasCustomElementForm__name"
+                        data-test-subj="canvasCustomElementForm-name"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={true}
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
+                  <div
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
+                  >
+                    40 characters remaining
+                  </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Description
-                    </label>
-                  </div>
+                    Description
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <textarea
+                    aria-describedby="generated-id-help"
+                    className="euiTextArea euiTextArea--resizeVertical"
+                    data-test-subj="canvasCustomElementForm-description"
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    rows={2}
+                    value=""
+                  />
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
                   >
-                    <textarea
-                      aria-describedby="generated-id-help"
-                      className="euiTextArea euiTextArea--resizeVertical"
-                      data-test-subj="canvasCustomElementForm-description"
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      rows={2}
-                      value=""
-                    />
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
-                    >
-                      100 characters remaining
-                    </div>
+                    100 characters remaining
                   </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Thumbnail image
-                    </label>
-                  </div>
+                    Thumbnail image
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFilePicker euiFilePicker--large canvasImageUpload"
                   >
                     <div
-                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
+                      className="euiFilePicker__wrap"
                     >
+                      <input
+                        accept="image/*"
+                        aria-describedby="generated-id-filePicker__prompt"
+                        className="euiFilePicker__input"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onDragLeave={[Function]}
+                        onDragOver={[Function]}
+                        onDrop={[Function]}
+                        onFocus={[Function]}
+                        type="file"
+                      />
                       <div
-                        className="euiFilePicker__wrap"
+                        className="euiFilePicker__prompt"
+                        id="generated-id-filePicker__prompt"
                       >
-                        <input
-                          accept="image/*"
-                          aria-describedby="generated-id-filePicker__prompt"
-                          className="euiFilePicker__input"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onDragLeave={[Function]}
-                          onDragOver={[Function]}
-                          onDrop={[Function]}
-                          onFocus={[Function]}
-                          type="file"
+                        <div
+                          aria-hidden="true"
+                          className="euiFilePicker__icon"
+                          data-euiicon-type="importAction"
+                          size="l"
                         />
                         <div
-                          className="euiFilePicker__prompt"
-                          id="generated-id-filePicker__prompt"
+                          className="euiFilePicker__promptText"
                         >
-                          <div
-                            aria-hidden="true"
-                            className="euiFilePicker__icon"
-                            data-euiicon-type="importAction"
-                            size="l"
-                          />
-                          <div
-                            className="euiFilePicker__promptText"
-                          >
-                            Select or drag and drop an image
-                          </div>
+                          Select or drag and drop an image
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div
-                  className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
-                >
-                  <p>
-                    Take a screenshot of your element and upload it here. This can also be done after saving.
-                  </p>
-                </div>
               </div>
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+                className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
+              >
+                <p>
+                  Take a screenshot of your element and upload it here. This can also be done after saving.
+                </p>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+            >
+              <h4
+                className="euiTitle euiTitle--xxxsmall"
+              >
+                Element preview
+              </h4>
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+              <div
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
+                onClick={[Function]}
               >
-                <h4
-                  className="euiTitle euiTitle--xxxsmall"
-                >
-                  Element preview
-                </h4>
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
-                  onClick={[Function]}
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiCard__top"
+                    className="euiCard__image"
                   >
-                    <div
-                      className="euiCard__image"
-                    >
-                      <img
-                        alt=""
-                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-                      />
-                    </div>
+                    <img
+                      alt=""
+                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                    />
                   </div>
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
+                  >
+                    
+                  </span>
                   <div
-                    className="euiCard__content"
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
                   >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
+                    <p>
                       
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        
-                      </p>
-                    </div>
+                    </p>
                   </div>
-                  <div
-                    className="euiCard__footer"
-                  />
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter"
+      >
         <div
-          className="euiModalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <button
+              className="euiButtonEmpty euiButtonEmpty--primary"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButtonEmpty euiButtonEmpty--primary"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
-                  className="euiButtonContent euiButtonEmpty__content"
+                  className="euiButtonEmpty__text"
                 >
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Cancel
-                  </span>
+                  Cancel
                 </span>
-              </button>
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              </span>
+            </button>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              className="euiButton euiButton--primary euiButton--fill"
+              data-test-subj="canvasCustomElementForm-submit"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButton euiButton--primary euiButton--fill"
-                data-test-subj="canvasCustomElementForm-submit"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButton__content"
               >
                 <span
-                  className="euiButtonContent euiButton__content"
+                  className="euiButton__text"
                 >
-                  <span
-                    className="euiButton__text"
-                  >
-                    Save
-                  </span>
+                  Save
                 </span>
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasCustomElementModal"
+    description=""
+    name="My Chart"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "700px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasCustomElementModal"
-      description=""
-      name="My Chart"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "700px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader"
       >
         <div
-          className="euiModalHeader"
+          className="euiModalHeader__title"
         >
-          <div
-            className="euiModalHeader__title"
-          >
-            <h3>
-              Edit custom element
-            </h3>
-          </div>
+          <h3>
+            Edit custom element
+          </h3>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
+                className="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow euiFormRow--compressed"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Name
-                    </label>
-                  </div>
+                    Name
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormControlLayout"
                   >
                     <div
-                      className="euiFormControlLayout"
-                    >
-                      <div
-                        className="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="generated-id-help"
-                          className="euiFieldText canvasCustomElementForm__name"
-                          data-test-subj="canvasCustomElementForm-name"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          required={true}
-                          type="text"
-                          value="My Chart"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      32 characters remaining
+                      <input
+                        aria-describedby="generated-id-help"
+                        className="euiFieldText canvasCustomElementForm__name"
+                        data-test-subj="canvasCustomElementForm-name"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={true}
+                        type="text"
+                        value="My Chart"
+                      />
                     </div>
                   </div>
+                  <div
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
+                  >
+                    32 characters remaining
+                  </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Description
-                    </label>
-                  </div>
+                    Description
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <textarea
+                    aria-describedby="generated-id-help"
+                    className="euiTextArea euiTextArea--resizeVertical"
+                    data-test-subj="canvasCustomElementForm-description"
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    rows={2}
+                    value=""
+                  />
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
                   >
-                    <textarea
-                      aria-describedby="generated-id-help"
-                      className="euiTextArea euiTextArea--resizeVertical"
-                      data-test-subj="canvasCustomElementForm-description"
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      rows={2}
-                      value=""
-                    />
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
-                    >
-                      100 characters remaining
-                    </div>
+                    100 characters remaining
                   </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Thumbnail image
-                    </label>
-                  </div>
+                    Thumbnail image
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFilePicker euiFilePicker--large canvasImageUpload"
                   >
                     <div
-                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
+                      className="euiFilePicker__wrap"
                     >
+                      <input
+                        accept="image/*"
+                        aria-describedby="generated-id-filePicker__prompt"
+                        className="euiFilePicker__input"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onDragLeave={[Function]}
+                        onDragOver={[Function]}
+                        onDrop={[Function]}
+                        onFocus={[Function]}
+                        type="file"
+                      />
                       <div
-                        className="euiFilePicker__wrap"
+                        className="euiFilePicker__prompt"
+                        id="generated-id-filePicker__prompt"
                       >
-                        <input
-                          accept="image/*"
-                          aria-describedby="generated-id-filePicker__prompt"
-                          className="euiFilePicker__input"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onDragLeave={[Function]}
-                          onDragOver={[Function]}
-                          onDrop={[Function]}
-                          onFocus={[Function]}
-                          type="file"
+                        <div
+                          aria-hidden="true"
+                          className="euiFilePicker__icon"
+                          data-euiicon-type="importAction"
+                          size="l"
                         />
                         <div
-                          className="euiFilePicker__prompt"
-                          id="generated-id-filePicker__prompt"
+                          className="euiFilePicker__promptText"
                         >
-                          <div
-                            aria-hidden="true"
-                            className="euiFilePicker__icon"
-                            data-euiicon-type="importAction"
-                            size="l"
-                          />
-                          <div
-                            className="euiFilePicker__promptText"
-                          >
-                            Select or drag and drop an image
-                          </div>
+                          Select or drag and drop an image
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div
-                  className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
-                >
-                  <p>
-                    Take a screenshot of your element and upload it here. This can also be done after saving.
-                  </p>
-                </div>
               </div>
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+                className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
+              >
+                <p>
+                  Take a screenshot of your element and upload it here. This can also be done after saving.
+                </p>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+            >
+              <h4
+                className="euiTitle euiTitle--xxxsmall"
+              >
+                Element preview
+              </h4>
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+              <div
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                onClick={[Function]}
               >
-                <h4
-                  className="euiTitle euiTitle--xxxsmall"
-                >
-                  Element preview
-                </h4>
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                  onClick={[Function]}
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiCard__top"
+                    className="euiCard__icon"
+                    data-euiicon-type="canvasApp"
+                    size="xxl"
+                  />
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <div
-                      className="euiCard__icon"
-                      data-euiicon-type="canvasApp"
-                      size="xxl"
-                    />
-                  </div>
+                    My Chart
+                  </span>
                   <div
-                    className="euiCard__content"
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
                   >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
-                      My Chart
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        
-                      </p>
-                    </div>
+                    <p>
+                      
+                    </p>
                   </div>
-                  <div
-                    className="euiCard__footer"
-                  />
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter"
+      >
         <div
-          className="euiModalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <button
+              className="euiButtonEmpty euiButtonEmpty--primary"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButtonEmpty euiButtonEmpty--primary"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
-                  className="euiButtonContent euiButtonEmpty__content"
+                  className="euiButtonEmpty__text"
                 >
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Cancel
-                  </span>
+                  Cancel
                 </span>
-              </button>
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              </span>
+            </button>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              className="euiButton euiButton--primary euiButton--fill"
+              data-test-subj="canvasCustomElementForm-submit"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButton euiButton--primary euiButton--fill"
-                data-test-subj="canvasCustomElementForm-submit"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButton__content"
               >
                 <span
-                  className="euiButtonContent euiButton__content"
+                  className="euiButton__text"
                 >
-                  <span
-                    className="euiButton__text"
-                  >
-                    Save
-                  </span>
+                  Save
                 </span>
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasCustomElementModal"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "700px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasCustomElementModal"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "700px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader"
       >
         <div
-          className="euiModalHeader"
+          className="euiModalHeader__title"
         >
-          <div
-            className="euiModalHeader__title"
-          >
-            <h3>
-              Create new element
-            </h3>
-          </div>
+          <h3>
+            Create new element
+          </h3>
         </div>
+      </div>
+      <div
+        className="euiModalBody"
+      >
         <div
-          className="euiModalBody"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
           >
             <div
-              className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+              className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
+                className="euiFormRow euiFormRow--compressed"
+                id="generated-id-row"
               >
                 <div
-                  className="euiFormRow euiFormRow--compressed"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Name
-                    </label>
-                  </div>
+                    Name
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormControlLayout"
                   >
                     <div
-                      className="euiFormControlLayout"
-                    >
-                      <div
-                        className="euiFormControlLayout__childrenWrapper"
-                      >
-                        <input
-                          aria-describedby="generated-id-help"
-                          className="euiFieldText canvasCustomElementForm__name"
-                          data-test-subj="canvasCustomElementForm-name"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onFocus={[Function]}
-                          required={true}
-                          type="text"
-                          value=""
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
+                      className="euiFormControlLayout__childrenWrapper"
                     >
-                      40 characters remaining
+                      <input
+                        aria-describedby="generated-id-help"
+                        className="euiFieldText canvasCustomElementForm__name"
+                        data-test-subj="canvasCustomElementForm-name"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onFocus={[Function]}
+                        required={true}
+                        type="text"
+                        value=""
+                      />
                     </div>
                   </div>
+                  <div
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
+                  >
+                    40 characters remaining
+                  </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Description
-                    </label>
-                  </div>
+                    Description
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
+                  <textarea
+                    aria-describedby="generated-id-help"
+                    className="euiTextArea euiTextArea--resizeVertical"
+                    data-test-subj="canvasCustomElementForm-description"
+                    id="generated-id"
+                    onBlur={[Function]}
+                    onChange={[Function]}
+                    onFocus={[Function]}
+                    rows={2}
+                    value=""
+                  />
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFormHelpText euiFormRow__text"
+                    id="generated-id-help"
                   >
-                    <textarea
-                      aria-describedby="generated-id-help"
-                      className="euiTextArea euiTextArea--resizeVertical"
-                      data-test-subj="canvasCustomElementForm-description"
-                      id="generated-id"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      onFocus={[Function]}
-                      rows={2}
-                      value=""
-                    />
-                    <div
-                      className="euiFormHelpText euiFormRow__text"
-                      id="generated-id-help"
-                    >
-                      100 characters remaining
-                    </div>
+                    100 characters remaining
                   </div>
                 </div>
+              </div>
+              <div
+                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                id="generated-id-row"
+              >
                 <div
-                  className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
-                  id="generated-id-row"
+                  className="euiFormRow__labelWrapper"
                 >
-                  <div
-                    className="euiFormRow__labelWrapper"
+                  <label
+                    className="euiFormLabel euiFormRow__label"
+                    htmlFor="generated-id"
                   >
-                    <label
-                      className="euiFormLabel euiFormRow__label"
-                      htmlFor="generated-id"
-                    >
-                      Thumbnail image
-                    </label>
-                  </div>
+                    Thumbnail image
+                  </label>
+                </div>
+                <div
+                  className="euiFormRow__fieldWrapper"
+                >
                   <div
-                    className="euiFormRow__fieldWrapper"
+                    className="euiFilePicker euiFilePicker--large canvasImageUpload"
                   >
                     <div
-                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
+                      className="euiFilePicker__wrap"
                     >
+                      <input
+                        accept="image/*"
+                        aria-describedby="generated-id-filePicker__prompt"
+                        className="euiFilePicker__input"
+                        id="generated-id"
+                        onBlur={[Function]}
+                        onChange={[Function]}
+                        onDragLeave={[Function]}
+                        onDragOver={[Function]}
+                        onDrop={[Function]}
+                        onFocus={[Function]}
+                        type="file"
+                      />
                       <div
-                        className="euiFilePicker__wrap"
+                        className="euiFilePicker__prompt"
+                        id="generated-id-filePicker__prompt"
                       >
-                        <input
-                          accept="image/*"
-                          aria-describedby="generated-id-filePicker__prompt"
-                          className="euiFilePicker__input"
-                          id="generated-id"
-                          onBlur={[Function]}
-                          onChange={[Function]}
-                          onDragLeave={[Function]}
-                          onDragOver={[Function]}
-                          onDrop={[Function]}
-                          onFocus={[Function]}
-                          type="file"
+                        <div
+                          aria-hidden="true"
+                          className="euiFilePicker__icon"
+                          data-euiicon-type="importAction"
+                          size="l"
                         />
                         <div
-                          className="euiFilePicker__prompt"
-                          id="generated-id-filePicker__prompt"
+                          className="euiFilePicker__promptText"
                         >
-                          <div
-                            aria-hidden="true"
-                            className="euiFilePicker__icon"
-                            data-euiicon-type="importAction"
-                            size="l"
-                          />
-                          <div
-                            className="euiFilePicker__promptText"
-                          >
-                            Select or drag and drop an image
-                          </div>
+                          Select or drag and drop an image
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
-                <div
-                  className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
-                >
-                  <p>
-                    Take a screenshot of your element and upload it here. This can also be done after saving.
-                  </p>
-                </div>
               </div>
               <div
-                className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+                className="euiText euiText--extraSmall canvasCustomElementForm__thumbnailHelp"
+              >
+                <p>
+                  Take a screenshot of your element and upload it here. This can also be done after saving.
+                </p>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem euiFlexItem--flexGrow1 canvasElementCard__wrapper canvasCustomElementForm__preview"
+            >
+              <h4
+                className="euiTitle euiTitle--xxxsmall"
+              >
+                Element preview
+              </h4>
+              <div
+                className="euiSpacer euiSpacer--s"
+              />
+              <div
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                onClick={[Function]}
               >
-                <h4
-                  className="euiTitle euiTitle--xxxsmall"
-                >
-                  Element preview
-                </h4>
-                <div
-                  className="euiSpacer euiSpacer--s"
-                />
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
-                  onClick={[Function]}
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiCard__top"
+                    className="euiCard__icon"
+                    data-euiicon-type="canvasApp"
+                    size="xxl"
+                  />
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <div
-                      className="euiCard__icon"
-                      data-euiicon-type="canvasApp"
-                      size="xxl"
-                    />
-                  </div>
+                    
+                  </span>
                   <div
-                    className="euiCard__content"
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
                   >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
+                    <p>
                       
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        
-                      </p>
-                    </div>
+                    </p>
                   </div>
-                  <div
-                    className="euiCard__footer"
-                  />
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
             </div>
           </div>
         </div>
+      </div>
+      <div
+        className="euiModalFooter"
+      >
         <div
-          className="euiModalFooter"
+          className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
         >
           <div
-            className="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentFlexEnd euiFlexGroup--directionRow euiFlexGroup--responsive"
+            className="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+            <button
+              className="euiButtonEmpty euiButtonEmpty--primary"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButtonEmpty euiButtonEmpty--primary"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
-                  className="euiButtonContent euiButtonEmpty__content"
+                  className="euiButtonEmpty__text"
                 >
-                  <span
-                    className="euiButtonEmpty__text"
-                  >
-                    Cancel
-                  </span>
+                  Cancel
                 </span>
-              </button>
-            </div>
-            <div
-              className="euiFlexItem euiFlexItem--flexGrowZero"
+              </span>
+            </button>
+          </div>
+          <div
+            className="euiFlexItem euiFlexItem--flexGrowZero"
+          >
+            <button
+              className="euiButton euiButton--primary euiButton--fill"
+              data-test-subj="canvasCustomElementForm-submit"
+              onClick={[Function]}
+              type="button"
             >
-              <button
-                className="euiButton euiButton--primary euiButton--fill"
-                data-test-subj="canvasCustomElementForm-submit"
-                onClick={[Function]}
-                type="button"
+              <span
+                className="euiButtonContent euiButton__content"
               >
                 <span
-                  className="euiButtonContent euiButton__content"
+                  className="euiButton__text"
                 >
-                  <span
-                    className="euiButton__text"
-                  >
-                    Save
-                  </span>
+                  Save
                 </span>
-              </button>
-            </div>
+              </span>
+            </button>
           </div>
         </div>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
index a40265f0353e7..b435bbbb73495 100644
--- a/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot
@@ -2,1163 +2,1104 @@
 
 exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
 <div
-  onMouseDown={[Function]}
-  onMouseUp={[Function]}
-  onTouchEnd={[Function]}
-  onTouchStart={[Function]}
+  data-eui="EuiFocusTrap"
 >
   <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
+    className="euiFlyout euiFlyout--small"
+    role="dialog"
     tabIndex={0}
-  />
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
-    <div
-      className="euiFlyout euiFlyout--small"
-      role="dialog"
-      tabIndex={0}
+    <button
+      aria-label="Closes keyboard shortcuts reference"
+      className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+      data-test-subj="euiFlyoutCloseButton"
+      onClick={[Function]}
+      type="button"
     >
-      <button
-        aria-label="Closes keyboard shortcuts reference"
-        className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-        data-test-subj="euiFlyoutCloseButton"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
+    <div
+      className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+    >
+      <h2
+        className="euiTitle euiTitle--small"
       >
-        <h2
-          className="euiTitle euiTitle--small"
-        >
-          Keyboard shortcuts
-        </h2>
-      </div>
+        Keyboard shortcuts
+      </h2>
+    </div>
+    <div
+      className="euiFlyoutBody"
+    >
       <div
-        className="euiFlyoutBody"
+        className="euiFlyoutBody__overflow"
       >
         <div
-          className="euiFlyoutBody__overflow"
+          className="euiFlyoutBody__overflowContent"
         >
           <div
-            className="euiFlyoutBody__overflowContent"
+            className="canvasKeyboardShortcut"
           >
-            <div
-              className="canvasKeyboardShortcut"
+            <h4
+              className="euiTitle euiTitle--xsmall"
+            >
+              Element controls
+            </h4>
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+            />
+            <dl
+              className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
             >
-              <h4
-                className="euiTitle euiTitle--xsmall"
-              >
-                Element controls
-              </h4>
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-              />
-              <dl
-                className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
-              >
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Cut
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        X
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Copy
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        C
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Paste
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        V
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Clone
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        D
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Delete
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        DEL
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        BACKSPACE
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Bring to front
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↑
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Bring forward
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↑
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Send backward
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↓
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Send to back
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↓
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Group
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        G
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Ungroup
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        U
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift up by 10px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ↑
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift down by 10px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ↓
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift left by 10px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ←
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift right by 10px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        →
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift up by 1px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↑
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift down by 1px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ↓
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift left by 1px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ←
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Shift right by 1px
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        →
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-              </dl>
-              <div
-                className="euiSpacer euiSpacer--l"
-              />
-            </div>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Cut
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      X
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Copy
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      C
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Paste
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      V
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Clone
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      D
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Delete
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      DEL
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      BACKSPACE
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Bring to front
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↑
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Bring forward
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↑
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Send backward
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↓
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Send to back
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↓
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Group
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      G
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Ungroup
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      U
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift up by 10px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ↑
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift down by 10px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ↓
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift left by 10px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ←
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift right by 10px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      →
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift up by 1px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↑
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift down by 1px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ↓
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift left by 1px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ←
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Shift right by 1px
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      →
+                    </code>
+                  </span>
+                </span>
+              </dd>
+            </dl>
             <div
-              className="canvasKeyboardShortcut"
+              className="euiSpacer euiSpacer--l"
+            />
+          </div>
+          <div
+            className="canvasKeyboardShortcut"
+          >
+            <h4
+              className="euiTitle euiTitle--xsmall"
+            >
+              Expression controls
+            </h4>
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+            />
+            <dl
+              className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
             >
-              <h4
-                className="euiTitle euiTitle--xsmall"
-              >
-                Expression controls
-              </h4>
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-              />
-              <dl
-                className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
-              >
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Run whole expression
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ENTER
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-              </dl>
-              <div
-                className="euiSpacer euiSpacer--l"
-              />
-            </div>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Run whole expression
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ENTER
+                    </code>
+                  </span>
+                </span>
+              </dd>
+            </dl>
             <div
-              className="canvasKeyboardShortcut"
+              className="euiSpacer euiSpacer--l"
+            />
+          </div>
+          <div
+            className="canvasKeyboardShortcut"
+          >
+            <h4
+              className="euiTitle euiTitle--xsmall"
             >
-              <h4
-                className="euiTitle euiTitle--xsmall"
-              >
-                Editor controls
-              </h4>
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-              />
-              <dl
-                className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
-              >
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Select multiple elements
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        CLICK
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Resize from center
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        DRAG
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Move, resize, and rotate without snapping
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        DRAG
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Select element below
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        CLICK
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Undo last action
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        Z
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Redo last action
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        SHIFT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        Z
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Go to previous page
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        [
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Go to next page
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ]
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Toggle edit mode
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        E
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Show grid
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        G
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Refresh workpad
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        R
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Zoom in
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        +
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Zoom out
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        -
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Reset zoom to 100%
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        CTRL
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        [
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Enter presentation mode
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        F
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        P
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-              </dl>
-              <div
-                className="euiSpacer euiSpacer--l"
-              />
-            </div>
+              Editor controls
+            </h4>
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+            />
+            <dl
+              className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            >
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Select multiple elements
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      CLICK
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Resize from center
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      DRAG
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Move, resize, and rotate without snapping
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      DRAG
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Select element below
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      CLICK
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Undo last action
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      Z
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Redo last action
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      SHIFT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      Z
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Go to previous page
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      [
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Go to next page
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ]
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Toggle edit mode
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      E
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Show grid
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      G
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Refresh workpad
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      R
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Zoom in
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      +
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Zoom out
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      -
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Reset zoom to 100%
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      CTRL
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      [
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Enter presentation mode
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      F
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      P
+                    </code>
+                  </span>
+                </span>
+              </dd>
+            </dl>
             <div
-              className="canvasKeyboardShortcut"
+              className="euiSpacer euiSpacer--l"
+            />
+          </div>
+          <div
+            className="canvasKeyboardShortcut"
+          >
+            <h4
+              className="euiTitle euiTitle--xsmall"
             >
-              <h4
-                className="euiTitle euiTitle--xsmall"
-              >
-                Presentation controls
-              </h4>
-              <hr
-                className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
-              />
-              <dl
-                className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
-              >
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Enter presentation mode
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        F
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        P
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Exit presentation mode
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ESC
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Go to previous page
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        [
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        BACKSPACE
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        ←
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Go to next page
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        ]
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        SPACE
-                      </code>
-                    </span>
-                  </span>
-                  <span>
-                     
-                    or
-                     
-                  </span>
-                  <span>
-                    <span>
-                      <code>
-                        →
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Refresh workpad
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        ALT
-                      </code>
-                    </span>
-                     
-                    <span>
-                      <code>
-                        R
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-                <dt
-                  className="euiDescriptionList__title"
-                >
-                  Toggle page cycling
-                </dt>
-                <dd
-                  className="euiDescriptionList__description"
-                >
-                  <span>
-                    <span>
-                      <code>
-                        P
-                      </code>
-                    </span>
-                  </span>
-                </dd>
-              </dl>
-              <div
-                className="euiSpacer euiSpacer--l"
-              />
-            </div>
+              Presentation controls
+            </h4>
+            <hr
+              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginSmall"
+            />
+            <dl
+              className="euiDescriptionList euiDescriptionList--column euiDescriptionList--reverse euiDescriptionList--compressed"
+            >
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Enter presentation mode
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      F
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      P
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Exit presentation mode
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ESC
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Go to previous page
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      [
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      BACKSPACE
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      ←
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Go to next page
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      ]
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      SPACE
+                    </code>
+                  </span>
+                </span>
+                <span>
+                   
+                  or
+                   
+                </span>
+                <span>
+                  <span>
+                    <code>
+                      →
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Refresh workpad
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      ALT
+                    </code>
+                  </span>
+                   
+                  <span>
+                    <code>
+                      R
+                    </code>
+                  </span>
+                </span>
+              </dd>
+              <dt
+                className="euiDescriptionList__title"
+              >
+                Toggle page cycling
+              </dt>
+              <dd
+                className="euiDescriptionList__description"
+              >
+                <span>
+                  <span>
+                    <code>
+                      P
+                    </code>
+                  </span>
+                </span>
+              </dd>
+            </dl>
+            <div
+              className="euiSpacer euiSpacer--l"
+            />
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />
 </div>
 `;
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
index fcc22cbe78134..0b345849b0a9a 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot
@@ -1,968 +1,806 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasModal--fixedSize"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "1000px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
-      >
-        <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
       <div
-        className="euiModal__flex"
+        className="euiModalHeader canvasAssetManager__modalHeader"
       >
         <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
+          className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
         >
-          <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
-          >
-            My elements
-          </div>
+          My elements
         </div>
-        <div
-          className="euiModalBody"
-          style={
-            Object {
-              "paddingRight": "1px",
-            }
+      </div>
+      <div
+        className="euiModalBody"
+        style={
+          Object {
+            "paddingRight": "1px",
           }
+        }
+      >
+        <div
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalBody__overflow"
+            className="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
             <div
-              className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              className="euiFormControlLayout__childrenWrapper"
             >
+              <input
+                className="euiFieldSearch euiFieldSearch--fullWidth"
+                onChange={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Find element"
+                type="search"
+                value=""
+              />
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayoutIcons"
               >
-                <input
-                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                  onChange={[Function]}
-                  onKeyUp={[Function]}
-                  placeholder="Find element"
-                  type="search"
-                  value=""
-                />
-                <div
-                  className="euiFormControlLayoutIcons"
+                <span
+                  className="euiFormControlLayoutCustomIcon"
                 >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
-                  >
-                    <div
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="search"
-                    />
-                  </span>
-                </div>
+                  <div
+                    aria-hidden="true"
+                    className="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="search"
+                  />
+                </span>
               </div>
             </div>
+          </div>
+          <div
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiEmptyPrompt"
+          >
             <div
-              className="euiSpacer euiSpacer--l"
+              color="subdued"
+              data-euiicon-type="vector"
+              size="xxl"
             />
             <div
-              className="euiEmptyPrompt"
+              className="euiSpacer euiSpacer--s"
+            />
+            <span
+              className="euiTextColor euiTextColor--subdued"
             >
+              <h2
+                className="euiTitle euiTitle--small"
+              >
+                Add new elements
+              </h2>
               <div
-                color="subdued"
-                data-euiicon-type="vector"
-                size="xxl"
+                className="euiSpacer euiSpacer--m"
               />
               <div
-                className="euiSpacer euiSpacer--s"
-              />
-              <span
-                className="euiTextColor euiTextColor--subdued"
+                className="euiText euiText--medium"
               >
-                <h2
-                  className="euiTitle euiTitle--small"
-                >
-                  Add new elements
-                </h2>
-                <div
-                  className="euiSpacer euiSpacer--m"
-                />
-                <div
-                  className="euiText euiText--medium"
-                >
-                  <p>
-                    Group and save workpad elements to create new elements
-                  </p>
-                </div>
-              </span>
-            </div>
+                <p>
+                  Group and save workpad elements to create new elements
+                </p>
+              </div>
+            </span>
           </div>
         </div>
-        <div
-          className="euiModalFooter"
+      </div>
+      <div
+        className="euiModalFooter"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          data-test-subj="saved-elements-modal-close-button"
+          onClick={[Function]}
+          type="button"
         >
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            data-test-subj="saved-elements-modal-close-button"
-            onClick={[Function]}
-            type="button"
+          <span
+            className="euiButtonContent euiButton__content"
           >
             <span
-              className="euiButtonContent euiButton__content"
+              className="euiButton__text"
             >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
+              Close
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/SavedElementsModal with custom elements 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasModal--fixedSize"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "1000px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="euiModalHeader canvasAssetManager__modalHeader"
       >
         <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
+          className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+        >
+          My elements
+        </div>
+      </div>
       <div
-        className="euiModal__flex"
+        className="euiModalBody"
+        style={
+          Object {
+            "paddingRight": "1px",
+          }
+        }
       >
         <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+            className="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
-            My elements
+            <div
+              className="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                className="euiFieldSearch euiFieldSearch--fullWidth"
+                onChange={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Find element"
+                type="search"
+                value=""
+              />
+              <div
+                className="euiFormControlLayoutIcons"
+              >
+                <span
+                  className="euiFormControlLayoutCustomIcon"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="search"
+                  />
+                </span>
+              </div>
+            </div>
           </div>
-        </div>
-        <div
-          className="euiModalBody"
-          style={
-            Object {
-              "paddingRight": "1px",
-            }
-          }
-        >
           <div
-            className="euiModalBody__overflow"
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
           >
             <div
-              className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                onClick={[Function]}
               >
-                <input
-                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                  onChange={[Function]}
-                  onKeyUp={[Function]}
-                  placeholder="Find element"
-                  type="search"
-                  value=""
+                <div
+                  className="euiCard__top"
+                >
+                  <div
+                    className="euiCard__image"
+                  >
+                    <img
+                      alt=""
+                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                    />
+                  </div>
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
+                  >
+                    <button
+                      aria-describedby=" generated-idDescription"
+                      className="euiCard__titleButton"
+                      onClick={[Function]}
+                    >
+                      Custom Element 1
+                    </button>
+                  </span>
+                  <div
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
+                  >
+                    <p>
+                      sample description
+                    </p>
+                  </div>
+                </div>
+                <div
+                  className="euiCard__footer"
                 />
+              </div>
+              <div
+                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
+              >
                 <div
-                  className="euiFormControlLayoutIcons"
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
                   <span
-                    className="euiFormControlLayoutCustomIcon"
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="search"
-                    />
+                    <button
+                      aria-label="Edit element"
+                      className="euiButtonIcon euiButtonIcon--primary"
+                      data-test-subj="canvasElementCard__editButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="pencil"
+                        size="m"
+                      />
+                    </button>
+                  </span>
+                </div>
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
+                  >
+                    <button
+                      aria-label="Delete element"
+                      className="euiButtonIcon euiButtonIcon--danger"
+                      data-test-subj="canvasElementCard__deleteButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
+                    >
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="trash"
+                        size="m"
+                      />
+                    </button>
                   </span>
                 </div>
               </div>
             </div>
             <div
-              className="euiSpacer euiSpacer--l"
-            />
-            <div
-              className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
+              className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiFlexItem canvasElementCard__wrapper"
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                onClick={[Function]}
               >
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
-                  onClick={[Function]}
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiCard__top"
+                    className="euiCard__image"
                   >
-                    <div
-                      className="euiCard__image"
-                    >
-                      <img
-                        alt=""
-                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
-                      />
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__content"
-                  >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
-                      <button
-                        aria-describedby=" generated-idDescription"
-                        className="euiCard__titleButton"
-                        onClick={[Function]}
-                      >
-                        Custom Element 1
-                      </button>
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        sample description
-                      </p>
-                    </div>
+                    <img
+                      alt=""
+                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                    />
                   </div>
-                  <div
-                    className="euiCard__footer"
-                  />
                 </div>
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
+                  className="euiCard__content"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
+                    <button
+                      aria-describedby=" generated-idDescription"
+                      className="euiCard__titleButton"
+                      onClick={[Function]}
                     >
-                      <button
-                        aria-label="Edit element"
-                        className="euiButtonIcon euiButtonIcon--primary"
-                        data-test-subj="canvasElementCard__editButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="pencil"
-                          size="m"
-                        />
-                      </button>
-                    </span>
-                  </div>
+                      Custom Element 2
+                    </button>
+                  </span>
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                    >
-                      <button
-                        aria-label="Delete element"
-                        className="euiButtonIcon euiButtonIcon--danger"
-                        data-test-subj="canvasElementCard__deleteButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="trash"
-                          size="m"
-                        />
-                      </button>
-                    </span>
+                    <p>
+                      Aenean eu justo auctor, placerat felis non, scelerisque dolor. 
+                    </p>
                   </div>
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
               <div
-                className="euiFlexItem canvasElementCard__wrapper"
+                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
               >
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
-                  onClick={[Function]}
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiCard__top"
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <div
-                      className="euiCard__image"
+                    <button
+                      aria-label="Edit element"
+                      className="euiButtonIcon euiButtonIcon--primary"
+                      data-test-subj="canvasElementCard__editButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <img
-                        alt=""
-                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="pencil"
+                        size="m"
                       />
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__content"
+                    </button>
+                  </span>
+                </div>
+                <div
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
+                >
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
+                    <button
+                      aria-label="Delete element"
+                      className="euiButtonIcon euiButtonIcon--danger"
+                      data-test-subj="canvasElementCard__deleteButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <button
-                        aria-describedby=" generated-idDescription"
-                        className="euiCard__titleButton"
-                        onClick={[Function]}
-                      >
-                        Custom Element 2
-                      </button>
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        Aenean eu justo auctor, placerat felis non, scelerisque dolor. 
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__footer"
-                  />
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="trash"
+                        size="m"
+                      />
+                    </button>
+                  </span>
                 </div>
+              </div>
+            </div>
+            <div
+              className="euiFlexItem canvasElementCard__wrapper"
+            >
+              <div
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                onClick={[Function]}
+              >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
+                  className="euiCard__top"
                 >
                   <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                    className="euiCard__image"
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                    >
-                      <button
-                        aria-label="Edit element"
-                        className="euiButtonIcon euiButtonIcon--primary"
-                        data-test-subj="canvasElementCard__editButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="pencil"
-                          size="m"
-                        />
-                      </button>
-                    </span>
+                    <img
+                      alt=""
+                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                    />
                   </div>
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                </div>
+                <div
+                  className="euiCard__content"
+                >
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
+                    <button
+                      aria-describedby=" generated-idDescription"
+                      className="euiCard__titleButton"
+                      onClick={[Function]}
                     >
-                      <button
-                        aria-label="Delete element"
-                        className="euiButtonIcon euiButtonIcon--danger"
-                        data-test-subj="canvasElementCard__deleteButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="trash"
-                          size="m"
-                        />
-                      </button>
-                    </span>
+                      Custom Element 3
+                    </button>
+                  </span>
+                  <div
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
+                  >
+                    <p>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis aliquet arcu ut turpis duis.
+                    </p>
                   </div>
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
               <div
-                className="euiFlexItem canvasElementCard__wrapper"
+                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
               >
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
-                  onClick={[Function]}
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiCard__top"
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <div
-                      className="euiCard__image"
+                    <button
+                      aria-label="Edit element"
+                      className="euiButtonIcon euiButtonIcon--primary"
+                      data-test-subj="canvasElementCard__editButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <img
-                        alt=""
-                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="pencil"
+                        size="m"
                       />
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__content"
-                  >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
-                      <button
-                        aria-describedby=" generated-idDescription"
-                        className="euiCard__titleButton"
-                        onClick={[Function]}
-                      >
-                        Custom Element 3
-                      </button>
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis aliquet arcu ut turpis duis.
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__footer"
-                  />
+                    </button>
+                  </span>
                 </div>
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                    >
-                      <button
-                        aria-label="Edit element"
-                        className="euiButtonIcon euiButtonIcon--primary"
-                        data-test-subj="canvasElementCard__editButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="pencil"
-                          size="m"
-                        />
-                      </button>
-                    </span>
-                  </div>
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
+                    <button
+                      aria-label="Delete element"
+                      className="euiButtonIcon euiButtonIcon--danger"
+                      data-test-subj="canvasElementCard__deleteButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <button
-                        aria-label="Delete element"
-                        className="euiButtonIcon euiButtonIcon--danger"
-                        data-test-subj="canvasElementCard__deleteButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="trash"
-                          size="m"
-                        />
-                      </button>
-                    </span>
-                  </div>
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="trash"
+                        size="m"
+                      />
+                    </button>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          className="euiModalFooter"
+      </div>
+      <div
+        className="euiModalFooter"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          data-test-subj="saved-elements-modal-close-button"
+          onClick={[Function]}
+          type="button"
         >
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            data-test-subj="saved-elements-modal-close-button"
-            onClick={[Function]}
-            type="button"
+          <span
+            className="euiButtonContent euiButton__content"
           >
             <span
-              className="euiButtonContent euiButton__content"
+              className="euiButton__text"
             >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
+              Close
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
 
 exports[`Storyshots components/SavedElementsModal with text filter 1`] = `
-Array [
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-guard={true}
+    className="euiModal canvasModal--fixedSize"
+    onKeyDown={[Function]}
     style={
       Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
+        "maxWidth": "1000px",
       }
     }
     tabIndex={0}
-  />,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={1}
-  />,
-  <div
-    data-focus-lock-disabled={false}
-    onBlur={[Function]}
-    onFocus={[Function]}
-    onMouseDown={[Function]}
-    onScrollCapture={[Function]}
-    onTouchMoveCapture={[Function]}
-    onTouchStart={[Function]}
-    onWheelCapture={[Function]}
   >
+    <button
+      aria-label="Closes this modal window"
+      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+      onClick={[Function]}
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        className="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+        size="m"
+      />
+    </button>
     <div
-      className="euiModal canvasModal--fixedSize"
-      onKeyDown={[Function]}
-      style={
-        Object {
-          "maxWidth": "1000px",
-        }
-      }
-      tabIndex={0}
+      className="euiModal__flex"
     >
-      <button
-        aria-label="Closes this modal window"
-        className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-        onClick={[Function]}
-        type="button"
+      <div
+        className="euiModalHeader canvasAssetManager__modalHeader"
       >
         <div
-          aria-hidden="true"
-          className="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-          size="m"
-        />
-      </button>
+          className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+        >
+          My elements
+        </div>
+      </div>
       <div
-        className="euiModal__flex"
+        className="euiModalBody"
+        style={
+          Object {
+            "paddingRight": "1px",
+          }
+        }
       >
         <div
-          className="euiModalHeader canvasAssetManager__modalHeader"
+          className="euiModalBody__overflow"
         >
           <div
-            className="euiModalHeader__title canvasAssetManager__modalHeaderTitle"
+            className="euiFormControlLayout euiFormControlLayout--fullWidth"
           >
-            My elements
+            <div
+              className="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                className="euiFieldSearch euiFieldSearch--fullWidth"
+                onChange={[Function]}
+                onKeyUp={[Function]}
+                placeholder="Find element"
+                type="search"
+                value="Element 2"
+              />
+              <div
+                className="euiFormControlLayoutIcons"
+              >
+                <span
+                  className="euiFormControlLayoutCustomIcon"
+                >
+                  <div
+                    aria-hidden="true"
+                    className="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="search"
+                  />
+                </span>
+              </div>
+              <div
+                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              >
+                <button
+                  aria-label="Clear input"
+                  className="euiFormControlLayoutClearButton"
+                  onClick={[Function]}
+                  type="button"
+                >
+                  <div
+                    className="euiFormControlLayoutClearButton__icon"
+                    data-euiicon-type="cross"
+                  />
+                </button>
+              </div>
+            </div>
           </div>
-        </div>
-        <div
-          className="euiModalBody"
-          style={
-            Object {
-              "paddingRight": "1px",
-            }
-          }
-        >
           <div
-            className="euiModalBody__overflow"
+            className="euiSpacer euiSpacer--l"
+          />
+          <div
+            className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
           >
             <div
-              className="euiFormControlLayout euiFormControlLayout--fullWidth"
+              className="euiFlexItem canvasElementCard__wrapper"
             >
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                onClick={[Function]}
               >
-                <input
-                  className="euiFieldSearch euiFieldSearch--fullWidth"
-                  onChange={[Function]}
-                  onKeyUp={[Function]}
-                  placeholder="Find element"
-                  type="search"
-                  value="Element 2"
-                />
                 <div
-                  className="euiFormControlLayoutIcons"
+                  className="euiCard__top"
                 >
-                  <span
-                    className="euiFormControlLayoutCustomIcon"
+                  <div
+                    className="euiCard__image"
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiFormControlLayoutCustomIcon__icon"
-                      data-euiicon-type="search"
+                    <img
+                      alt=""
+                      src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
                     />
-                  </span>
+                  </div>
                 </div>
                 <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  className="euiCard__content"
                 >
-                  <button
-                    aria-label="Clear input"
-                    className="euiFormControlLayoutClearButton"
-                    onClick={[Function]}
-                    type="button"
+                  <span
+                    className="euiTitle euiTitle--small euiCard__title"
+                    id="generated-idTitle"
                   >
-                    <div
-                      className="euiFormControlLayoutClearButton__icon"
-                      data-euiicon-type="cross"
-                    />
-                  </button>
+                    <button
+                      aria-describedby=" generated-idDescription"
+                      className="euiCard__titleButton"
+                      onClick={[Function]}
+                    >
+                      Custom Element 2
+                    </button>
+                  </span>
+                  <div
+                    className="euiText euiText--small euiCard__description"
+                    id="generated-idDescription"
+                  >
+                    <p>
+                      Aenean eu justo auctor, placerat felis non, scelerisque dolor. 
+                    </p>
+                  </div>
                 </div>
+                <div
+                  className="euiCard__footer"
+                />
               </div>
-            </div>
-            <div
-              className="euiSpacer euiSpacer--l"
-            />
-            <div
-              className="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--fourths euiFlexGrid--responsive"
-            >
               <div
-                className="euiFlexItem canvasElementCard__wrapper"
+                className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
               >
                 <div
-                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
-                  onClick={[Function]}
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiCard__top"
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <div
-                      className="euiCard__image"
+                    <button
+                      aria-label="Edit element"
+                      className="euiButtonIcon euiButtonIcon--primary"
+                      data-test-subj="canvasElementCard__editButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <img
-                        alt=""
-                        src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmlld0JveD0iMCAwIDI3MC42MDAwMSAyNjkuNTQ2NjYiCiAgIGhlaWdodD0iMjY5LjU0NjY2IgogICB3aWR0aD0iMjcwLjYwMDAxIgogICB4bWw6c3BhY2U9InByZXNlcnZlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIj48bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE4Ij48cmRmOlJERj48Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+PGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+PGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPjwvY2M6V29yaz48L3JkZjpSREY+PC9tZXRhZGF0YT48ZGVmcwogICAgIGlkPSJkZWZzNiIgLz48ZwogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzMzMzMzMywwLDAsLTEuMzMzMzMzMywwLDI2OS41NDY2NykiCiAgICAgaWQ9ImcxMCI+PGcKICAgICAgIHRyYW5zZm9ybT0ic2NhbGUoMC4xKSIKICAgICAgIGlkPSJnMTIiPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMTQiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMjAyOS40OCw5NjIuNDQxIGMgMCwxNzAuMDk5IC0xMDUuNDYsMzE4Ljc5OSAtMjY0LjE3LDM3Ni42NTkgNi45OCwzNS44NiAxMC42Miw3MS43MSAxMC42MiwxMDkuMDUgMCwzMTYuMTkgLTI1Ny4yNCw1NzMuNDMgLTU3My40Nyw1NzMuNDMgLTE4NC43MiwwIC0zNTYuNTU4LC04OC41OSAtNDY0LjUzLC0yMzcuODUgLTUzLjA5LDQxLjE4IC0xMTguMjg1LDYzLjc1IC0xODYuMzA1LDYzLjc1IC0xNjcuODM2LDAgLTMwNC4zODMsLTEzNi41NCAtMzA0LjM4MywtMzA0LjM4IDAsLTM3LjA4IDYuNjE3LC03Mi41OCAxOS4wMzEsLTEwNi4wOCBDIDEwOC40ODgsMTM4MC4wOSAwLDEyMjcuODkgMCwxMDU4Ljg4IDAsODg3LjkxIDEwNS45NzcsNzM4LjUzOSAyNjUuMzk4LDY4MS4wOSBjIC02Ljc2OSwtMzUuNDQyIC0xMC40NiwtNzIuMDIgLTEwLjQ2LC0xMDkgQyAyNTQuOTM4LDI1Ni42MjEgNTExLjU2NiwwIDgyNy4wMjcsMCAxMDEyLjIsMCAxMTgzLjk0LDg4Ljk0MTQgMTI5MS4zLDIzOC44MzIgYyA1My40NSwtNDEuOTYxIDExOC44LC02NC45OTIgMTg2LjU2LC02NC45OTIgMTY3LjgzLDAgMzA0LjM4LDEzNi40OTIgMzA0LjM4LDMwNC4zMzIgMCwzNy4wNzggLTYuNjIsNzIuNjI5IC0xOS4wMywxMDYuMTI5IDE1Ny43OCw1Ni44NzkgMjY2LjI3LDIwOS4xMjkgMjY2LjI3LDM3OC4xNCIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDE2IgogICAgICAgICBzdHlsZT0iZmlsbDojZmFjZjA5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDc5Ny44OTgsMTE1MC45MyA0NDQuMDcyLC0yMDIuNDUgNDQ4LjA1LDM5Mi41OCBjIDYuNDksMzIuMzkgOS42Niw2NC42NyA5LjY2LDk4LjQ2IDAsMjc2LjIzIC0yMjQuNjgsNTAwLjk1IC01MDAuOSw1MDAuOTUgLTE2NS4yNCwwIC0zMTkuMzcsLTgxLjM2IC00MTMuMDUzLC0yMTcuNzkgbCAtNzQuNTI0LC0zODYuNjQgODYuNjk1LC0xODUuMTEiIC8+PHBhdGgKICAgICAgICAgaWQ9InBhdGgxOCIKICAgICAgICAgc3R5bGU9ImZpbGw6IzQ5YzFhZTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgZD0ibSAzMzguMjIzLDY4MC42NzIgYyAtNi40ODksLTMyLjM4MyAtOS44MDksLTY1Ljk4MSAtOS44MDksLTk5Ljk3MyAwLC0yNzYuOTI5IDIyNS4zMzYsLTUwMi4yNTc2IDUwMi4zMTMsLTUwMi4yNTc2IDE2Ni41OTMsMCAzMjEuNDczLDgyLjExNzYgNDE1LjAxMywyMTkuOTQ5NiBsIDczLjk3LDM4NS4zNDcgLTk4LjcyLDE4OC42MjEgTCA3NzUuMTU2LDEwNzUuNTcgMzM4LjIyMyw2ODAuNjcyIiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjAiCiAgICAgICAgIHN0eWxlPSJmaWxsOiNlZjI5OWI7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMzM1LjQxLDE0NDkuMTggMzA0LjMzMiwtNzEuODYgNjYuNjgsMzQ2LjAyIGMgLTQxLjU4NiwzMS43OCAtOTIuOTMsNDkuMTggLTE0NS43MzEsNDkuMTggLTEzMi4yNSwwIC0yMzkuODEyLC0xMDcuNjEgLTIzOS44MTIsLTIzOS44NyAwLC0yOS4yMSA0Ljg3OSwtNTcuMjIgMTQuNTMxLC04My40NyIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDIyIgogICAgICAgICBzdHlsZT0iZmlsbDojNGNhYmU0O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJNIDMwOC45OTIsMTM3Ni43IEMgMTczLjAyLDEzMzEuNjQgNzguNDgwNSwxMjAxLjMgNzguNDgwNSwxMDU3LjkzIDc4LjQ4MDUsOTE4LjM0IDE2NC44Miw3OTMuNjggMjk0LjQwNiw3NDQuMzUyIGwgNDI2Ljk4MSwzODUuOTM4IC03OC4zOTUsMTY3LjUxIC0zMzQsNzguOSIgLz48cGF0aAogICAgICAgICBpZD0icGF0aDI0IgogICAgICAgICBzdHlsZT0iZmlsbDojODVjZTI2O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgICBkPSJtIDEzMjMuOCwyOTguNDEgYyA0MS43NCwtMzIuMDkgOTIuODMsLTQ5LjU5IDE0NC45OCwtNDkuNTkgMTMyLjI1LDAgMjM5LjgxLDEwNy41NTkgMjM5LjgxLDIzOS44MjEgMCwyOS4xNiAtNC44OCw1Ny4xNjggLTE0LjUzLDgzLjQxOCBsIC0zMDQuMDgsNzEuMTYgLTY2LjE4LC0zNDQuODA5IiAvPjxwYXRoCiAgICAgICAgIGlkPSJwYXRoMjYiCiAgICAgICAgIHN0eWxlPSJmaWxsOiMzMTc3YTc7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICAgIGQ9Im0gMTM4NS42Nyw3MjIuOTMgMzM0Ljc2LC03OC4zMDEgYyAxMzYuMDIsNDQuOTYxIDIzMC41NiwxNzUuMzUxIDIzMC41NiwzMTguNzYyIDAsMTM5LjMzOSAtODYuNTQsMjYzLjg1OSAtMjE2LjM4LDMxMy4wMzkgbCAtNDM3Ljg0LC0zODMuNTkgODguOSwtMTY5LjkxIiAvPjwvZz48L2c+PC9zdmc+"
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="pencil"
+                        size="m"
                       />
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__content"
-                  >
-                    <span
-                      className="euiTitle euiTitle--small euiCard__title"
-                      id="generated-idTitle"
-                    >
-                      <button
-                        aria-describedby=" generated-idDescription"
-                        className="euiCard__titleButton"
-                        onClick={[Function]}
-                      >
-                        Custom Element 2
-                      </button>
-                    </span>
-                    <div
-                      className="euiText euiText--small euiCard__description"
-                      id="generated-idDescription"
-                    >
-                      <p>
-                        Aenean eu justo auctor, placerat felis non, scelerisque dolor. 
-                      </p>
-                    </div>
-                  </div>
-                  <div
-                    className="euiCard__footer"
-                  />
+                    </button>
+                  </span>
                 </div>
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive canvasElementCard__controls"
+                  className="euiFlexItem euiFlexItem--flexGrowZero"
                 >
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
-                  >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
-                    >
-                      <button
-                        aria-label="Edit element"
-                        className="euiButtonIcon euiButtonIcon--primary"
-                        data-test-subj="canvasElementCard__editButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="pencil"
-                          size="m"
-                        />
-                      </button>
-                    </span>
-                  </div>
-                  <div
-                    className="euiFlexItem euiFlexItem--flexGrowZero"
+                  <span
+                    className="euiToolTipAnchor"
+                    onKeyUp={[Function]}
+                    onMouseOut={[Function]}
+                    onMouseOver={[Function]}
                   >
-                    <span
-                      className="euiToolTipAnchor"
-                      onKeyUp={[Function]}
-                      onMouseOut={[Function]}
-                      onMouseOver={[Function]}
+                    <button
+                      aria-label="Delete element"
+                      className="euiButtonIcon euiButtonIcon--danger"
+                      data-test-subj="canvasElementCard__deleteButton"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      type="button"
                     >
-                      <button
-                        aria-label="Delete element"
-                        className="euiButtonIcon euiButtonIcon--danger"
-                        data-test-subj="canvasElementCard__deleteButton"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        type="button"
-                      >
-                        <div
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          data-euiicon-type="trash"
-                          size="m"
-                        />
-                      </button>
-                    </span>
-                  </div>
+                      <div
+                        aria-hidden="true"
+                        className="euiButtonIcon__icon"
+                        data-euiicon-type="trash"
+                        size="m"
+                      />
+                    </button>
+                  </span>
                 </div>
               </div>
             </div>
           </div>
         </div>
-        <div
-          className="euiModalFooter"
+      </div>
+      <div
+        className="euiModalFooter"
+      >
+        <button
+          className="euiButton euiButton--primary euiButton--small"
+          data-test-subj="saved-elements-modal-close-button"
+          onClick={[Function]}
+          type="button"
         >
-          <button
-            className="euiButton euiButton--primary euiButton--small"
-            data-test-subj="saved-elements-modal-close-button"
-            onClick={[Function]}
-            type="button"
+          <span
+            className="euiButtonContent euiButton__content"
           >
             <span
-              className="euiButtonContent euiButton__content"
+              className="euiButton__text"
             >
-              <span
-                className="euiButton__text"
-              >
-                Close
-              </span>
+              Close
             </span>
-          </button>
-        </div>
+          </span>
+        </button>
       </div>
     </div>
-  </div>,
-  <div
-    data-focus-guard={true}
-    style={
-      Object {
-        "height": "0px",
-        "left": "1px",
-        "overflow": "hidden",
-        "padding": 0,
-        "position": "fixed",
-        "top": "1px",
-        "width": "1px",
-      }
-    }
-    tabIndex={0}
-  />,
-]
+  </div>
+</div>
 `;
diff --git a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
index 04cc3e0f383b0..75e132863e47e 100644
--- a/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
+++ b/x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap
@@ -2,357 +2,328 @@
 
 exports[`<Settings /> can navigate Autoplay Settings 1`] = `
 <div>
-  <div>
+  <div
+    data-eui="EuiFocusTrap"
+  >
     <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      data-focus-lock-disabled="disabled"
+      aria-describedby="generated-id"
+      aria-live="assertive"
+      aria-modal="true"
+      class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
+      role="dialog"
+      style="top: -16px; left: -22px; z-index: 2000;"
     >
       <div
-        aria-describedby="generated-id"
-        aria-live="assertive"
-        aria-modal="true"
-        class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
-        role="dialog"
-        style="top: -16px; left: -22px; z-index: 2000;"
-      >
+        class="euiPopover__panelArrow euiPopover__panelArrow--top"
+        style="left: 10px; top: 0px;"
+      />
+      <div>
         <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--top"
-          style="left: 10px; top: 0px;"
-        />
-        <div>
+          class="euiContextMenu"
+          style="height: 0px;"
+        >
           <div
-            class="euiContextMenu"
-            style="height: 0px;"
+            class="euiContextMenuPanel euiContextMenu__panel"
+            tabindex="0"
           >
             <div
-              class="euiContextMenuPanel euiContextMenu__panel"
-              tabindex="0"
+              class="euiPopoverTitle"
             >
-              <div
-                class="euiPopoverTitle"
+              <span
+                class="euiContextMenu__itemLayout"
               >
-                <span
-                  class="euiContextMenu__itemLayout"
-                >
-                  Settings
-                </span>
-              </div>
+                Settings
+              </span>
+            </div>
+            <div>
               <div>
-                <div>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="play"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="play"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Auto Play
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Auto Play
                     </span>
-                  </button>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="boxesHorizontal"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="boxesHorizontal"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Toolbar
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Toolbar
                     </span>
-                  </button>
-                </div>
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
 exports[`<Settings /> can navigate Autoplay Settings 2`] = `
 <div>
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
+  <div
+    data-eui="EuiFocusTrap"
+  >
     <div
-      data-focus-lock-disabled="disabled"
+      aria-describedby="generated-id"
+      aria-live="assertive"
+      aria-modal="true"
+      class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
+      role="dialog"
+      style="top: -16px; left: -22px; z-index: 2000;"
     >
       <div
-        aria-describedby="generated-id"
-        aria-live="assertive"
-        aria-modal="true"
-        class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
-        role="dialog"
-        style="top: -16px; left: -22px; z-index: 2000;"
-      >
+        class="euiPopover__panelArrow euiPopover__panelArrow--top"
+        style="left: 10px; top: 0px;"
+      />
+      <div>
         <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--top"
-          style="left: 10px; top: 0px;"
-        />
-        <div>
+          class="euiContextMenu"
+          style="height: 0px;"
+        >
           <div
-            class="euiContextMenu"
-            style="height: 0px;"
+            class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft"
+            tabindex="0"
           >
             <div
-              class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft"
-              tabindex="0"
+              class="euiPopoverTitle"
             >
-              <div
-                class="euiPopoverTitle"
+              <span
+                class="euiContextMenu__itemLayout"
               >
-                <span
-                  class="euiContextMenu__itemLayout"
-                >
-                  Settings
-                </span>
-              </div>
+                Settings
+              </span>
+            </div>
+            <div>
               <div>
-                <div>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="play"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="play"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Auto Play
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Auto Play
                     </span>
-                  </button>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="boxesHorizontal"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="boxesHorizontal"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Toolbar
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Toolbar
                     </span>
-                  </button>
-                </div>
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft"
-              tabindex="0"
+          </div>
+          <div
+            class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft"
+            tabindex="0"
+          >
+            <button
+              class="euiContextMenuPanelTitle"
+              data-test-subj="contextMenuPanelTitleButton"
+              type="button"
             >
-              <button
-                class="euiContextMenuPanelTitle"
-                data-test-subj="contextMenuPanelTitleButton"
-                type="button"
+              <span
+                class="euiContextMenu__itemLayout"
               >
+                <div
+                  class="euiContextMenu__icon"
+                  data-euiicon-type="arrowLeft"
+                />
                 <span
-                  class="euiContextMenu__itemLayout"
+                  class="euiContextMenu__text"
                 >
-                  <div
-                    class="euiContextMenu__icon"
-                    data-euiicon-type="arrowLeft"
-                  />
-                  <span
-                    class="euiContextMenu__text"
-                  >
-                    Auto Play
-                  </span>
+                  Auto Play
                 </span>
-              </button>
+              </span>
+            </button>
+            <div>
               <div>
-                <div>
+                <div
+                  style="padding: 16px;"
+                >
                   <div
-                    style="padding: 16px;"
+                    class="euiSwitch"
                   >
-                    <div
-                      class="euiSwitch"
+                    <button
+                      aria-checked="false"
+                      aria-labelledby="generated-id"
+                      class="euiSwitch__button"
+                      id="cycle"
+                      name="cycle"
+                      role="switch"
+                      type="button"
                     >
-                      <button
-                        aria-checked="false"
-                        aria-labelledby="generated-id"
-                        class="euiSwitch__button"
-                        id="cycle"
-                        name="cycle"
-                        role="switch"
-                        type="button"
+                      <span
+                        class="euiSwitch__body"
                       >
                         <span
-                          class="euiSwitch__body"
+                          class="euiSwitch__thumb"
+                        />
+                        <span
+                          class="euiSwitch__track"
                         >
-                          <span
-                            class="euiSwitch__thumb"
+                          <div
+                            class="euiSwitch__icon"
+                            data-euiicon-type="cross"
+                          />
+                          <div
+                            class="euiSwitch__icon euiSwitch__icon--checked"
+                            data-euiicon-type="check"
                           />
-                          <span
-                            class="euiSwitch__track"
-                          >
-                            <div
-                              class="euiSwitch__icon"
-                              data-euiicon-type="cross"
-                            />
-                            <div
-                              class="euiSwitch__icon euiSwitch__icon--checked"
-                              data-euiicon-type="check"
-                            />
-                          </span>
                         </span>
-                      </button>
-                      <span
-                        class="euiSwitch__label"
-                        id="generated-id"
-                      >
-                        Cycle Slides
                       </span>
-                    </div>
-                    <hr
-                      class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                    />
-                    <form>
+                    </button>
+                    <span
+                      class="euiSwitch__label"
+                      id="generated-id"
+                    >
+                      Cycle Slides
+                    </span>
+                  </div>
+                  <hr
+                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                  />
+                  <form>
+                    <div
+                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                    >
                       <div
-                        class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                        class="euiFlexItem"
                       >
                         <div
-                          class="euiFlexItem"
+                          class="euiFormRow euiFormRow--compressed"
+                          id="generated-id-row"
                         >
                           <div
-                            class="euiFormRow euiFormRow--compressed"
-                            id="generated-id-row"
+                            class="euiFormRow__labelWrapper"
                           >
-                            <div
-                              class="euiFormRow__labelWrapper"
+                            <label
+                              class="euiFormLabel euiFormRow__label"
+                              for="generated-id"
                             >
-                              <label
-                                class="euiFormLabel euiFormRow__label"
-                                for="generated-id"
-                              >
-                                Set a custom interval
-                              </label>
-                            </div>
+                              Set a custom interval
+                            </label>
+                          </div>
+                          <div
+                            class="euiFormRow__fieldWrapper"
+                          >
                             <div
-                              class="euiFormRow__fieldWrapper"
+                              class="euiFormControlLayout euiFormControlLayout--compressed"
                             >
                               <div
-                                class="euiFormControlLayout euiFormControlLayout--compressed"
+                                class="euiFormControlLayout__childrenWrapper"
                               >
-                                <div
-                                  class="euiFormControlLayout__childrenWrapper"
-                                >
-                                  <input
-                                    aria-describedby="generated-id-help"
-                                    class="euiFieldText euiFieldText--compressed"
-                                    id="generated-id"
-                                    type="text"
-                                    value="5s"
-                                  />
-                                </div>
-                              </div>
-                              <div
-                                class="euiFormHelpText euiFormRow__text"
-                                id="generated-id-help"
-                              >
-                                Use shorthand notation, like 30s, 10m, or 1h
+                                <input
+                                  aria-describedby="generated-id-help"
+                                  class="euiFieldText euiFieldText--compressed"
+                                  id="generated-id"
+                                  type="text"
+                                  value="5s"
+                                />
                               </div>
                             </div>
+                            <div
+                              class="euiFormHelpText euiFormRow__text"
+                              id="generated-id-help"
+                            >
+                              Use shorthand notation, like 30s, 10m, or 1h
+                            </div>
                           </div>
                         </div>
+                      </div>
+                      <div
+                        class="euiFlexItem euiFlexItem--flexGrowZero"
+                      >
                         <div
-                          class="euiFlexItem euiFlexItem--flexGrowZero"
+                          class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+                          id="generated-id-row"
                         >
                           <div
-                            class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
-                            id="generated-id-row"
+                            class="euiFormRow__fieldWrapper"
                           >
-                            <div
-                              class="euiFormRow__fieldWrapper"
+                            <button
+                              class="euiButton euiButton--primary euiButton--small"
+                              id="generated-id"
+                              style="min-width: auto;"
+                              type="submit"
                             >
-                              <button
-                                class="euiButton euiButton--primary euiButton--small"
-                                id="generated-id"
-                                style="min-width: auto;"
-                                type="submit"
+                              <span
+                                class="euiButtonContent euiButton__content"
                               >
                                 <span
-                                  class="euiButtonContent euiButton__content"
+                                  class="euiButton__text"
                                 >
-                                  <span
-                                    class="euiButton__text"
-                                  >
-                                    Set
-                                  </span>
+                                  Set
                                 </span>
-                              </button>
-                            </div>
+                              </span>
+                            </button>
                           </div>
                         </div>
                       </div>
-                    </form>
-                  </div>
+                    </div>
+                  </form>
                 </div>
               </div>
             </div>
@@ -360,300 +331,266 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
         </div>
       </div>
     </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
 exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] = `
 <div>
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
+  <div
+    data-eui="EuiFocusTrap"
+  >
     <div
-      data-focus-lock-disabled="disabled"
+      aria-describedby="generated-id"
+      aria-live="assertive"
+      aria-modal="true"
+      class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
+      role="dialog"
+      style="top: -16px; left: -22px; z-index: 2000;"
     >
       <div
-        aria-describedby="generated-id"
-        aria-live="assertive"
-        aria-modal="true"
-        class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle"
-        role="dialog"
-        style="top: -16px; left: -22px; z-index: 2000;"
-      >
+        class="euiPopover__panelArrow euiPopover__panelArrow--top"
+        style="left: 10px; top: 0px;"
+      />
+      <div>
         <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--top"
-          style="left: 10px; top: 0px;"
-        />
-        <div>
+          class="euiContextMenu"
+          style="height: 0px;"
+        >
           <div
-            class="euiContextMenu"
-            style="height: 0px;"
+            class="euiContextMenuPanel euiContextMenu__panel"
+            tabindex="0"
           >
             <div
-              class="euiContextMenuPanel euiContextMenu__panel"
-              tabindex="0"
+              class="euiPopoverTitle"
             >
-              <div
-                class="euiPopoverTitle"
+              <span
+                class="euiContextMenu__itemLayout"
               >
-                <span
-                  class="euiContextMenu__itemLayout"
-                >
-                  Settings
-                </span>
-              </div>
+                Settings
+              </span>
+            </div>
+            <div>
               <div>
-                <div>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="play"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="play"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Auto Play
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Auto Play
                     </span>
-                  </button>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="boxesHorizontal"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="boxesHorizontal"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Toolbar
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Toolbar
                     </span>
-                  </button>
-                </div>
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
 exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] = `
 <div>
-  <div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
+  <div
+    data-eui="EuiFocusTrap"
+  >
     <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
-    <div
-      data-focus-lock-disabled="disabled"
+      aria-describedby="generated-id"
+      aria-live="assertive"
+      aria-modal="true"
+      class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
+      role="dialog"
+      style="top: -16px; left: -22px; z-index: 2000;"
     >
       <div
-        aria-describedby="generated-id"
-        aria-live="assertive"
-        aria-modal="true"
-        class="euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-isOpen euiPopover__panel-withTitle"
-        role="dialog"
-        style="top: -16px; left: -22px; z-index: 2000;"
-      >
+        class="euiPopover__panelArrow euiPopover__panelArrow--top"
+        style="left: 10px; top: 0px;"
+      />
+      <div>
         <div
-          class="euiPopover__panelArrow euiPopover__panelArrow--top"
-          style="left: 10px; top: 0px;"
-        />
-        <div>
+          class="euiContextMenu"
+          style="height: 0px;"
+        >
           <div
-            class="euiContextMenu"
-            style="height: 0px;"
+            class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft"
+            tabindex="0"
           >
             <div
-              class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft"
-              tabindex="0"
+              class="euiPopoverTitle"
             >
-              <div
-                class="euiPopoverTitle"
+              <span
+                class="euiContextMenu__itemLayout"
               >
-                <span
-                  class="euiContextMenu__itemLayout"
-                >
-                  Settings
-                </span>
-              </div>
+                Settings
+              </span>
+            </div>
+            <div>
               <div>
-                <div>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="play"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="play"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Auto Play
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Auto Play
                     </span>
-                  </button>
-                  <button
-                    class="euiContextMenuItem"
-                    type="button"
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
+                <button
+                  class="euiContextMenuItem"
+                  type="button"
+                >
+                  <span
+                    class="euiContextMenu__itemLayout"
                   >
+                    <div
+                      class="euiContextMenu__icon"
+                      data-euiicon-type="boxesHorizontal"
+                    />
                     <span
-                      class="euiContextMenu__itemLayout"
+                      class="euiContextMenuItem__text"
                     >
-                      <div
-                        class="euiContextMenu__icon"
-                        data-euiicon-type="boxesHorizontal"
-                      />
-                      <span
-                        class="euiContextMenuItem__text"
-                      >
-                        Toolbar
-                      </span>
-                      <div
-                        class="euiContextMenu__arrow"
-                        data-euiicon-type="arrowRight"
-                      />
+                      Toolbar
                     </span>
-                  </button>
-                </div>
+                    <div
+                      class="euiContextMenu__arrow"
+                      data-euiicon-type="arrowRight"
+                    />
+                  </span>
+                </button>
               </div>
             </div>
-            <div
-              class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft"
-              tabindex="0"
+          </div>
+          <div
+            class="euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft"
+            tabindex="0"
+          >
+            <button
+              class="euiContextMenuPanelTitle"
+              data-test-subj="contextMenuPanelTitleButton"
+              type="button"
             >
-              <button
-                class="euiContextMenuPanelTitle"
-                data-test-subj="contextMenuPanelTitleButton"
-                type="button"
+              <span
+                class="euiContextMenu__itemLayout"
               >
+                <div
+                  class="euiContextMenu__icon"
+                  data-euiicon-type="arrowLeft"
+                />
                 <span
-                  class="euiContextMenu__itemLayout"
+                  class="euiContextMenu__text"
                 >
-                  <div
-                    class="euiContextMenu__icon"
-                    data-euiicon-type="arrowLeft"
-                  />
-                  <span
-                    class="euiContextMenu__text"
-                  >
-                    Toolbar
-                  </span>
+                  Toolbar
                 </span>
-              </button>
+              </span>
+            </button>
+            <div>
               <div>
-                <div>
+                <div
+                  style="padding: 16px;"
+                >
                   <div
-                    style="padding: 16px;"
+                    class="euiFormRow"
+                    id="generated-id-row"
                   >
                     <div
-                      class="euiFormRow"
-                      id="generated-id-row"
+                      class="euiFormRow__fieldWrapper"
                     >
                       <div
-                        class="euiFormRow__fieldWrapper"
+                        class="euiSwitch"
                       >
-                        <div
-                          class="euiSwitch"
+                        <button
+                          aria-checked="false"
+                          aria-describedby="generated-id-help"
+                          aria-labelledby="generated-id"
+                          class="euiSwitch__button"
+                          data-test-subj="hideToolbarSwitch"
+                          id="generated-id"
+                          name="toolbarHide"
+                          role="switch"
+                          type="button"
                         >
-                          <button
-                            aria-checked="false"
-                            aria-describedby="generated-id-help"
-                            aria-labelledby="generated-id"
-                            class="euiSwitch__button"
-                            data-test-subj="hideToolbarSwitch"
-                            id="generated-id"
-                            name="toolbarHide"
-                            role="switch"
-                            type="button"
+                          <span
+                            class="euiSwitch__body"
                           >
                             <span
-                              class="euiSwitch__body"
+                              class="euiSwitch__thumb"
+                            />
+                            <span
+                              class="euiSwitch__track"
                             >
-                              <span
-                                class="euiSwitch__thumb"
+                              <div
+                                class="euiSwitch__icon"
+                                data-euiicon-type="cross"
+                              />
+                              <div
+                                class="euiSwitch__icon euiSwitch__icon--checked"
+                                data-euiicon-type="check"
                               />
-                              <span
-                                class="euiSwitch__track"
-                              >
-                                <div
-                                  class="euiSwitch__icon"
-                                  data-euiicon-type="cross"
-                                />
-                                <div
-                                  class="euiSwitch__icon euiSwitch__icon--checked"
-                                  data-euiicon-type="check"
-                                />
-                              </span>
                             </span>
-                          </button>
-                          <span
-                            class="euiSwitch__label"
-                            id="generated-id"
-                          >
-                            Hide Toolbar
                           </span>
-                        </div>
-                        <div
-                          class="euiFormHelpText euiFormRow__text"
-                          id="generated-id-help"
+                        </button>
+                        <span
+                          class="euiSwitch__label"
+                          id="generated-id"
                         >
-                          Hide the toolbar when the mouse is not within the Canvas?
-                        </div>
+                          Hide Toolbar
+                        </span>
+                      </div>
+                      <div
+                        class="euiFormHelpText euiFormRow__text"
+                        id="generated-id-help"
+                      >
+                        Hide the toolbar when the mouse is not within the Canvas?
                       </div>
                     </div>
                   </div>
@@ -664,13 +601,8 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
         </div>
       </div>
     </div>
-    <div
-      data-focus-guard="true"
-      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-      tabindex="-1"
-    />
   </div>
 </div>
 `;
 
-exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"disabled\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiPopoverTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenuItem__text\\">Auto Play</span><div data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></div></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenuItem__text\\">Toolbar</span><div data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></div></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><div data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></div><div data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></div></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"-1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div></div></div>"`;
+exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPopover__panel euiPopover__panel--top euiPopover__panel-withTitle\\" aria-live=\\"assertive\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"0\\"><div class=\\"euiPopoverTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenuItem__text\\">Auto Play</span><div data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></div></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenuItem__text\\">Toolbar</span><div data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></div></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"0\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></div><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><div data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></div><div data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></div></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
diff --git a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
index 32e4d116f0a06..b3e2c055c6738 100644
--- a/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
+++ b/x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap
@@ -297,21 +297,7 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                           class="euiOverlayMask euiOverlayMask--aboveHeader"
                         >
                           <div
-                            aria-hidden="true"
-                            data-aria-hidden="true"
-                            data-focus-guard="true"
-                            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                            tabindex="0"
-                          />
-                          <div
-                            aria-hidden="true"
-                            data-aria-hidden="true"
-                            data-focus-guard="true"
-                            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                            tabindex="1"
-                          />
-                          <div
-                            data-focus-lock-disabled="false"
+                            data-eui="EuiFocusTrap"
                           >
                             <div
                               class="euiModal euiModal--maxWidth-default euiModal--confirmation"
@@ -407,13 +393,6 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                               </div>
                             </div>
                           </div>
-                          <div
-                            aria-hidden="true"
-                            data-aria-hidden="true"
-                            data-focus-guard="true"
-                            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-                            tabindex="0"
-                          />
                         </div>
                       }
                     >
@@ -447,843 +426,209 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                           onClose={[Function]}
                         >
                           <EuiFocusTrap>
-                            <ForwardRef
-                              enabled={true}
-                              noIsolation={true}
-                              returnFocus={true}
-                              scrollLock={false}
+                            <div
+                              data-eui="EuiFocusTrap"
                             >
-                              <ForwardRef
-                                enabled={true}
-                                noIsolation={true}
-                                returnFocus={true}
-                                scrollLock={false}
-                                sideCar={[Function]}
+                              <div
+                                className="euiModal euiModal--maxWidth-default euiModal--confirmation"
+                                onKeyDown={[Function]}
+                                tabIndex={0}
                               >
-                                <ForwardRef
-                                  as={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "classNames": Object {
-                                        "fullWidth": "width-before-scroll-bar",
-                                        "zeroRight": "right-scroll-bar-position",
-                                      },
-                                      "defaultProps": Object {
-                                        "enabled": true,
-                                        "inert": false,
-                                        "removeScrollBar": true,
-                                      },
-                                      "render": [Function],
-                                    }
-                                  }
-                                  autoFocus={true}
-                                  crossFrame={true}
-                                  disabled={false}
-                                  lockProps={
-                                    Object {
-                                      "allowPinchZoom": undefined,
-                                      "enabled": false,
-                                      "inert": undefined,
-                                      "onMouseDown": [Function],
-                                      "onTouchStart": [Function],
-                                      "shards": undefined,
-                                      "sideCar": [Function],
-                                    }
-                                  }
-                                  noFocusGuards={false}
-                                  onActivation={[Function]}
-                                  onDeactivation={[Function]}
-                                  persistentFocus={false}
-                                  returnFocus={true}
-                                  sideCar={[Function]}
+                                <EuiI18n
+                                  default="Closes this modal window"
+                                  token="euiModal.closeModal"
                                 >
-                                  <div
-                                    data-focus-guard={true}
-                                    key="guard-first"
-                                    style={
-                                      Object {
-                                        "height": "0px",
-                                        "left": "1px",
-                                        "overflow": "hidden",
-                                        "padding": 0,
-                                        "position": "fixed",
-                                        "top": "1px",
-                                        "width": "1px",
-                                      }
-                                    }
-                                    tabIndex={0}
-                                  />
-                                  <div
-                                    data-focus-guard={true}
-                                    key="guard-nearest"
-                                    style={
-                                      Object {
-                                        "height": "0px",
-                                        "left": "1px",
-                                        "overflow": "hidden",
-                                        "padding": 0,
-                                        "position": "fixed",
-                                        "top": "1px",
-                                        "width": "1px",
-                                      }
-                                    }
-                                    tabIndex={1}
-                                  />
-                                  <RequireSideCar
-                                    autoFocus={true}
-                                    crossFrame={true}
-                                    disabled={false}
-                                    id={Object {}}
-                                    observed={
-                                      <div
-                                        data-focus-lock-disabled="false"
+                                  <EuiButtonIcon
+                                    aria-label="Closes this modal window"
+                                    className="euiModal__closeIcon"
+                                    color="text"
+                                    iconType="cross"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      aria-label="Closes this modal window"
+                                      className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
+                                      onClick={[Function]}
+                                      type="button"
+                                    >
+                                      <EuiIcon
+                                        aria-hidden="true"
+                                        className="euiButtonIcon__icon"
+                                        size="m"
+                                        type="cross"
                                       >
                                         <div
-                                          class="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                          tabindex="0"
-                                        >
-                                          <button
-                                            aria-label="Closes this modal window"
-                                            class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                            type="button"
-                                          >
-                                            <div
-                                              aria-hidden="true"
-                                              class="euiButtonIcon__icon"
-                                              data-euiicon-type="cross"
-                                            />
-                                          </button>
-                                          <div
-                                            class="euiModal__flex"
-                                          >
-                                            <div
-                                              class="euiModalHeader"
-                                            >
-                                              <div
-                                                class="euiModalHeader__title"
-                                                data-test-subj="confirmModalTitleText"
-                                              >
-                                                Confirm License Upload
-                                              </div>
-                                            </div>
-                                            <div
-                                              class="euiModalBody"
-                                            >
-                                              <div
-                                                class="euiModalBody__overflow"
-                                              >
-                                                <div
-                                                  class="euiText euiText--medium"
-                                                  data-test-subj="confirmModalBodyText"
-                                                >
-                                                  <div>
-                                                    <div
-                                                      class="euiText euiText--medium"
-                                                    >
-                                                      Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                    </div>
-                                                    <div
-                                                      class="euiText euiText--medium"
-                                                    >
-                                                      <ul>
-                                                        <li>
-                                                          Watcher will be disabled
-                                                        </li>
-                                                      </ul>
-                                                    </div>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </div>
-                                            <div
-                                              class="euiModalFooter"
-                                            >
-                                              <button
-                                                class="euiButtonEmpty euiButtonEmpty--primary"
-                                                data-test-subj="confirmModalCancelButton"
-                                                type="button"
-                                              >
-                                                <span
-                                                  class="euiButtonContent euiButtonEmpty__content"
-                                                >
-                                                  <span
-                                                    class="euiButtonEmpty__text"
-                                                  >
-                                                    Cancel
-                                                  </span>
-                                                </span>
-                                              </button>
-                                              <button
-                                                class="euiButton euiButton--primary euiButton--fill"
-                                                data-test-subj="confirmModalConfirmButton"
-                                                type="button"
-                                              >
-                                                <span
-                                                  class="euiButtonContent euiButton__content"
-                                                >
-                                                  <span
-                                                    class="euiButton__text"
-                                                  >
-                                                    Confirm
-                                                  </span>
-                                                </span>
-                                              </button>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    }
-                                    onActivation={[Function]}
-                                    onDeactivation={[Function]}
-                                    persistentFocus={false}
-                                    returnFocus={[Function]}
-                                    shards={Array []}
-                                    sideCar={
-                                      Object {
-                                        "assignMedium": [Function],
-                                        "assignSyncMedium": [Function],
-                                        "options": Object {
-                                          "async": true,
-                                          "ssr": false,
-                                        },
-                                        "read": [Function],
-                                        "useMedium": [Function],
-                                      }
-                                    }
-                                  >
-                                    <SideCar
-                                      autoFocus={true}
-                                      crossFrame={true}
-                                      disabled={false}
-                                      id={Object {}}
-                                      observed={
+                                          aria-hidden="true"
+                                          className="euiButtonIcon__icon"
+                                          data-euiicon-type="cross"
+                                          size="m"
+                                        />
+                                      </EuiIcon>
+                                    </button>
+                                  </EuiButtonIcon>
+                                </EuiI18n>
+                                <div
+                                  className="euiModal__flex"
+                                >
+                                  <EuiModalHeader>
+                                    <div
+                                      className="euiModalHeader"
+                                    >
+                                      <EuiModalHeaderTitle
+                                        data-test-subj="confirmModalTitleText"
+                                      >
                                         <div
-                                          data-focus-lock-disabled="false"
+                                          className="euiModalHeader__title"
+                                          data-test-subj="confirmModalTitleText"
                                         >
-                                          <div
-                                            class="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                            tabindex="0"
+                                          <FormattedMessage
+                                            defaultMessage="Confirm License Upload"
+                                            id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
+                                            values={Object {}}
                                           >
-                                            <button
-                                              aria-label="Closes this modal window"
-                                              class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                              type="button"
-                                            >
-                                              <div
-                                                aria-hidden="true"
-                                                class="euiButtonIcon__icon"
-                                                data-euiicon-type="cross"
-                                              />
-                                            </button>
-                                            <div
-                                              class="euiModal__flex"
-                                            >
-                                              <div
-                                                class="euiModalHeader"
-                                              >
-                                                <div
-                                                  class="euiModalHeader__title"
-                                                  data-test-subj="confirmModalTitleText"
-                                                >
-                                                  Confirm License Upload
-                                                </div>
-                                              </div>
-                                              <div
-                                                class="euiModalBody"
-                                              >
-                                                <div
-                                                  class="euiModalBody__overflow"
-                                                >
-                                                  <div
-                                                    class="euiText euiText--medium"
-                                                    data-test-subj="confirmModalBodyText"
-                                                  >
-                                                    <div>
-                                                      <div
-                                                        class="euiText euiText--medium"
-                                                      >
-                                                        Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                      </div>
-                                                      <div
-                                                        class="euiText euiText--medium"
-                                                      >
-                                                        <ul>
-                                                          <li>
-                                                            Watcher will be disabled
-                                                          </li>
-                                                        </ul>
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                              <div
-                                                class="euiModalFooter"
-                                              >
-                                                <button
-                                                  class="euiButtonEmpty euiButtonEmpty--primary"
-                                                  data-test-subj="confirmModalCancelButton"
-                                                  type="button"
-                                                >
-                                                  <span
-                                                    class="euiButtonContent euiButtonEmpty__content"
-                                                  >
-                                                    <span
-                                                      class="euiButtonEmpty__text"
-                                                    >
-                                                      Cancel
-                                                    </span>
-                                                  </span>
-                                                </button>
-                                                <button
-                                                  class="euiButton euiButton--primary euiButton--fill"
-                                                  data-test-subj="confirmModalConfirmButton"
-                                                  type="button"
-                                                >
-                                                  <span
-                                                    class="euiButtonContent euiButton__content"
-                                                  >
-                                                    <span
-                                                      class="euiButton__text"
-                                                    >
-                                                      Confirm
-                                                    </span>
-                                                  </span>
-                                                </button>
-                                              </div>
-                                            </div>
-                                          </div>
+                                            Confirm License Upload
+                                          </FormattedMessage>
                                         </div>
-                                      }
-                                      onActivation={[Function]}
-                                      onDeactivation={[Function]}
-                                      persistentFocus={false}
-                                      returnFocus={[Function]}
-                                      shards={Array []}
-                                      sideCar={
-                                        Object {
-                                          "assignMedium": [Function],
-                                          "assignSyncMedium": [Function],
-                                          "options": Object {
-                                            "async": true,
-                                            "ssr": false,
-                                          },
-                                          "read": [Function],
-                                          "useMedium": [Function],
-                                        }
-                                      }
+                                      </EuiModalHeaderTitle>
+                                    </div>
+                                  </EuiModalHeader>
+                                  <EuiModalBody>
+                                    <div
+                                      className="euiModalBody"
                                     >
-                                      <SideEffect(FocusWatcher)
-                                        autoFocus={true}
-                                        crossFrame={true}
-                                        disabled={false}
-                                        id={Object {}}
-                                        observed={
+                                      <div
+                                        className="euiModalBody__overflow"
+                                      >
+                                        <EuiText
+                                          data-test-subj="confirmModalBodyText"
+                                        >
                                           <div
-                                            data-focus-lock-disabled="false"
+                                            className="euiText euiText--medium"
+                                            data-test-subj="confirmModalBodyText"
                                           >
-                                            <div
-                                              class="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                              tabindex="0"
-                                            >
-                                              <button
-                                                aria-label="Closes this modal window"
-                                                class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                                type="button"
-                                              >
+                                            <div>
+                                              <EuiText>
                                                 <div
-                                                  aria-hidden="true"
-                                                  class="euiButtonIcon__icon"
-                                                  data-euiicon-type="cross"
-                                                />
-                                              </button>
-                                              <div
-                                                class="euiModal__flex"
-                                              >
-                                                <div
-                                                  class="euiModalHeader"
+                                                  className="euiText euiText--medium"
                                                 >
-                                                  <div
-                                                    class="euiModalHeader__title"
-                                                    data-test-subj="confirmModalTitleText"
-                                                  >
-                                                    Confirm License Upload
-                                                  </div>
+                                                  Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
                                                 </div>
+                                              </EuiText>
+                                              <EuiText>
                                                 <div
-                                                  class="euiModalBody"
+                                                  className="euiText euiText--medium"
                                                 >
-                                                  <div
-                                                    class="euiModalBody__overflow"
-                                                  >
-                                                    <div
-                                                      class="euiText euiText--medium"
-                                                      data-test-subj="confirmModalBodyText"
-                                                    >
-                                                      <div>
-                                                        <div
-                                                          class="euiText euiText--medium"
-                                                        >
-                                                          Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                        </div>
-                                                        <div
-                                                          class="euiText euiText--medium"
-                                                        >
-                                                          <ul>
-                                                            <li>
-                                                              Watcher will be disabled
-                                                            </li>
-                                                          </ul>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                                </div>
-                                                <div
-                                                  class="euiModalFooter"
-                                                >
-                                                  <button
-                                                    class="euiButtonEmpty euiButtonEmpty--primary"
-                                                    data-test-subj="confirmModalCancelButton"
-                                                    type="button"
-                                                  >
-                                                    <span
-                                                      class="euiButtonContent euiButtonEmpty__content"
-                                                    >
-                                                      <span
-                                                        class="euiButtonEmpty__text"
-                                                      >
-                                                        Cancel
-                                                      </span>
-                                                    </span>
-                                                  </button>
-                                                  <button
-                                                    class="euiButton euiButton--primary euiButton--fill"
-                                                    data-test-subj="confirmModalConfirmButton"
-                                                    type="button"
-                                                  >
-                                                    <span
-                                                      class="euiButtonContent euiButton__content"
+                                                  <ul>
+                                                    <li
+                                                      key="Watcher will be disabled"
                                                     >
-                                                      <span
-                                                        class="euiButton__text"
-                                                      >
-                                                        Confirm
-                                                      </span>
-                                                    </span>
-                                                  </button>
+                                                      Watcher will be disabled
+                                                    </li>
+                                                  </ul>
                                                 </div>
-                                              </div>
+                                              </EuiText>
                                             </div>
                                           </div>
-                                        }
-                                        onActivation={[Function]}
-                                        onDeactivation={[Function]}
-                                        persistentFocus={false}
-                                        returnFocus={[Function]}
-                                        shards={Array []}
-                                      >
-                                        <FocusWatcher
-                                          autoFocus={true}
-                                          crossFrame={true}
-                                          disabled={false}
-                                          id={Object {}}
-                                          observed={
-                                            <div
-                                              data-focus-lock-disabled="false"
-                                            >
-                                              <div
-                                                class="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                                tabindex="0"
-                                              >
-                                                <button
-                                                  aria-label="Closes this modal window"
-                                                  class="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    aria-hidden="true"
-                                                    class="euiButtonIcon__icon"
-                                                    data-euiicon-type="cross"
-                                                  />
-                                                </button>
-                                                <div
-                                                  class="euiModal__flex"
-                                                >
-                                                  <div
-                                                    class="euiModalHeader"
-                                                  >
-                                                    <div
-                                                      class="euiModalHeader__title"
-                                                      data-test-subj="confirmModalTitleText"
-                                                    >
-                                                      Confirm License Upload
-                                                    </div>
-                                                  </div>
-                                                  <div
-                                                    class="euiModalBody"
-                                                  >
-                                                    <div
-                                                      class="euiModalBody__overflow"
-                                                    >
-                                                      <div
-                                                        class="euiText euiText--medium"
-                                                        data-test-subj="confirmModalBodyText"
-                                                      >
-                                                        <div>
-                                                          <div
-                                                            class="euiText euiText--medium"
-                                                          >
-                                                            Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                          </div>
-                                                          <div
-                                                            class="euiText euiText--medium"
-                                                          >
-                                                            <ul>
-                                                              <li>
-                                                                Watcher will be disabled
-                                                              </li>
-                                                            </ul>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </div>
-                                                  <div
-                                                    class="euiModalFooter"
-                                                  >
-                                                    <button
-                                                      class="euiButtonEmpty euiButtonEmpty--primary"
-                                                      data-test-subj="confirmModalCancelButton"
-                                                      type="button"
-                                                    >
-                                                      <span
-                                                        class="euiButtonContent euiButtonEmpty__content"
-                                                      >
-                                                        <span
-                                                          class="euiButtonEmpty__text"
-                                                        >
-                                                          Cancel
-                                                        </span>
-                                                      </span>
-                                                    </button>
-                                                    <button
-                                                      class="euiButton euiButton--primary euiButton--fill"
-                                                      data-test-subj="confirmModalConfirmButton"
-                                                      type="button"
-                                                    >
-                                                      <span
-                                                        class="euiButtonContent euiButton__content"
-                                                      >
-                                                        <span
-                                                          class="euiButton__text"
-                                                        >
-                                                          Confirm
-                                                        </span>
-                                                      </span>
-                                                    </button>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          }
-                                          onActivation={[Function]}
-                                          onDeactivation={[Function]}
-                                          persistentFocus={false}
-                                          returnFocus={[Function]}
-                                          shards={Array []}
-                                        />
-                                      </SideEffect(FocusWatcher)>
-                                    </SideCar>
-                                  </RequireSideCar>
-                                  <ForwardRef
-                                    data-focus-lock-disabled={false}
-                                    enabled={false}
-                                    inert={false}
-                                    onBlur={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseDown={[Function]}
-                                    onTouchStart={[Function]}
-                                    removeScrollBar={true}
-                                    sideCar={[Function]}
-                                  >
+                                        </EuiText>
+                                      </div>
+                                    </div>
+                                  </EuiModalBody>
+                                  <EuiModalFooter>
                                     <div
-                                      data-focus-lock-disabled={false}
-                                      onBlur={[Function]}
-                                      onFocus={[Function]}
-                                      onMouseDown={[Function]}
-                                      onScrollCapture={[Function]}
-                                      onTouchMoveCapture={[Function]}
-                                      onTouchStart={[Function]}
-                                      onWheelCapture={[Function]}
+                                      className="euiModalFooter"
                                     >
-                                      <div
-                                        className="euiModal euiModal--maxWidth-default euiModal--confirmation"
-                                        onKeyDown={[Function]}
-                                        tabIndex={0}
+                                      <EuiButtonEmpty
+                                        buttonRef={[Function]}
+                                        data-test-subj="confirmModalCancelButton"
+                                        onClick={[Function]}
                                       >
-                                        <EuiI18n
-                                          default="Closes this modal window"
-                                          token="euiModal.closeModal"
+                                        <button
+                                          className="euiButtonEmpty euiButtonEmpty--primary"
+                                          data-test-subj="confirmModalCancelButton"
+                                          onClick={[Function]}
+                                          type="button"
                                         >
-                                          <EuiButtonIcon
-                                            aria-label="Closes this modal window"
-                                            className="euiModal__closeIcon"
-                                            color="text"
-                                            iconType="cross"
-                                            onClick={[Function]}
+                                          <EuiButtonContent
+                                            className="euiButtonEmpty__content"
+                                            iconSide="left"
+                                            textProps={
+                                              Object {
+                                                "className": "euiButtonEmpty__text",
+                                              }
+                                            }
                                           >
-                                            <button
-                                              aria-label="Closes this modal window"
-                                              className="euiButtonIcon euiButtonIcon--text euiModal__closeIcon"
-                                              onClick={[Function]}
-                                              type="button"
+                                            <span
+                                              className="euiButtonContent euiButtonEmpty__content"
                                             >
-                                              <EuiIcon
-                                                aria-hidden="true"
-                                                className="euiButtonIcon__icon"
-                                                size="m"
-                                                type="cross"
+                                              <span
+                                                className="euiButtonEmpty__text"
                                               >
-                                                <div
-                                                  aria-hidden="true"
-                                                  className="euiButtonIcon__icon"
-                                                  data-euiicon-type="cross"
-                                                  size="m"
-                                                />
-                                              </EuiIcon>
-                                            </button>
-                                          </EuiButtonIcon>
-                                        </EuiI18n>
-                                        <div
-                                          className="euiModal__flex"
+                                                <FormattedMessage
+                                                  defaultMessage="Cancel"
+                                                  id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
+                                                  values={Object {}}
+                                                >
+                                                  Cancel
+                                                </FormattedMessage>
+                                              </span>
+                                            </span>
+                                          </EuiButtonContent>
+                                        </button>
+                                      </EuiButtonEmpty>
+                                      <EuiButton
+                                        buttonRef={[Function]}
+                                        color="primary"
+                                        data-test-subj="confirmModalConfirmButton"
+                                        fill={true}
+                                        onClick={[Function]}
+                                      >
+                                        <EuiButtonDisplay
+                                          color="primary"
+                                          data-test-subj="confirmModalConfirmButton"
+                                          element="button"
+                                          fill={true}
+                                          onClick={[Function]}
+                                          type="button"
                                         >
-                                          <EuiModalHeader>
-                                            <div
-                                              className="euiModalHeader"
+                                          <button
+                                            className="euiButton euiButton--primary euiButton--fill"
+                                            data-test-subj="confirmModalConfirmButton"
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiButtonContent
+                                              className="euiButton__content"
+                                              iconSide="left"
+                                              textProps={
+                                                Object {
+                                                  "className": "euiButton__text",
+                                                }
+                                              }
                                             >
-                                              <EuiModalHeaderTitle
-                                                data-test-subj="confirmModalTitleText"
+                                              <span
+                                                className="euiButtonContent euiButton__content"
                                               >
-                                                <div
-                                                  className="euiModalHeader__title"
-                                                  data-test-subj="confirmModalTitleText"
+                                                <span
+                                                  className="euiButton__text"
                                                 >
                                                   <FormattedMessage
-                                                    defaultMessage="Confirm License Upload"
-                                                    id="xpack.licenseMgmt.uploadLicense.confirmModalTitle"
+                                                    defaultMessage="Confirm"
+                                                    id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
                                                     values={Object {}}
                                                   >
-                                                    Confirm License Upload
+                                                    Confirm
                                                   </FormattedMessage>
-                                                </div>
-                                              </EuiModalHeaderTitle>
-                                            </div>
-                                          </EuiModalHeader>
-                                          <EuiModalBody>
-                                            <div
-                                              className="euiModalBody"
-                                            >
-                                              <div
-                                                className="euiModalBody__overflow"
-                                              >
-                                                <EuiText
-                                                  data-test-subj="confirmModalBodyText"
-                                                >
-                                                  <div
-                                                    className="euiText euiText--medium"
-                                                    data-test-subj="confirmModalBodyText"
-                                                  >
-                                                    <div>
-                                                      <EuiText>
-                                                        <div
-                                                          className="euiText euiText--medium"
-                                                        >
-                                                          Some functionality will be lost if you replace your TRIAL license with a BASIC license. Review the list of features below.
-                                                        </div>
-                                                      </EuiText>
-                                                      <EuiText>
-                                                        <div
-                                                          className="euiText euiText--medium"
-                                                        >
-                                                          <ul>
-                                                            <li
-                                                              key="Watcher will be disabled"
-                                                            >
-                                                              Watcher will be disabled
-                                                            </li>
-                                                          </ul>
-                                                        </div>
-                                                      </EuiText>
-                                                    </div>
-                                                  </div>
-                                                </EuiText>
-                                              </div>
-                                            </div>
-                                          </EuiModalBody>
-                                          <EuiModalFooter>
-                                            <div
-                                              className="euiModalFooter"
-                                            >
-                                              <EuiButtonEmpty
-                                                buttonRef={[Function]}
-                                                data-test-subj="confirmModalCancelButton"
-                                                onClick={[Function]}
-                                              >
-                                                <button
-                                                  className="euiButtonEmpty euiButtonEmpty--primary"
-                                                  data-test-subj="confirmModalCancelButton"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <EuiButtonContent
-                                                    className="euiButtonEmpty__content"
-                                                    iconSide="left"
-                                                    textProps={
-                                                      Object {
-                                                        "className": "euiButtonEmpty__text",
-                                                      }
-                                                    }
-                                                  >
-                                                    <span
-                                                      className="euiButtonContent euiButtonEmpty__content"
-                                                    >
-                                                      <span
-                                                        className="euiButtonEmpty__text"
-                                                      >
-                                                        <FormattedMessage
-                                                          defaultMessage="Cancel"
-                                                          id="xpack.licenseMgmt.uploadLicense.confirmModal.cancelButtonLabel"
-                                                          values={Object {}}
-                                                        >
-                                                          Cancel
-                                                        </FormattedMessage>
-                                                      </span>
-                                                    </span>
-                                                  </EuiButtonContent>
-                                                </button>
-                                              </EuiButtonEmpty>
-                                              <EuiButton
-                                                buttonRef={[Function]}
-                                                color="primary"
-                                                data-test-subj="confirmModalConfirmButton"
-                                                fill={true}
-                                                onClick={[Function]}
-                                              >
-                                                <EuiButtonDisplay
-                                                  color="primary"
-                                                  data-test-subj="confirmModalConfirmButton"
-                                                  element="button"
-                                                  fill={true}
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <button
-                                                    className="euiButton euiButton--primary euiButton--fill"
-                                                    data-test-subj="confirmModalConfirmButton"
-                                                    onClick={[Function]}
-                                                    type="button"
-                                                  >
-                                                    <EuiButtonContent
-                                                      className="euiButton__content"
-                                                      iconSide="left"
-                                                      textProps={
-                                                        Object {
-                                                          "className": "euiButton__text",
-                                                        }
-                                                      }
-                                                    >
-                                                      <span
-                                                        className="euiButtonContent euiButton__content"
-                                                      >
-                                                        <span
-                                                          className="euiButton__text"
-                                                        >
-                                                          <FormattedMessage
-                                                            defaultMessage="Confirm"
-                                                            id="xpack.licenseMgmt.uploadLicense.confirmModal.confirmButtonLabel"
-                                                            values={Object {}}
-                                                          >
-                                                            Confirm
-                                                          </FormattedMessage>
-                                                        </span>
-                                                      </span>
-                                                    </EuiButtonContent>
-                                                  </button>
-                                                </EuiButtonDisplay>
-                                              </EuiButton>
-                                            </div>
-                                          </EuiModalFooter>
-                                        </div>
-                                      </div>
+                                                </span>
+                                              </span>
+                                            </EuiButtonContent>
+                                          </button>
+                                        </EuiButtonDisplay>
+                                      </EuiButton>
                                     </div>
-                                  </ForwardRef>
-                                  <div
-                                    data-focus-guard={true}
-                                    style={
-                                      Object {
-                                        "height": "0px",
-                                        "left": "1px",
-                                        "overflow": "hidden",
-                                        "padding": 0,
-                                        "position": "fixed",
-                                        "top": "1px",
-                                        "width": "1px",
-                                      }
-                                    }
-                                    tabIndex={0}
-                                  />
-                                </ForwardRef>
-                                <RequireSideCar
-                                  noIsolation={true}
-                                  setLockProps={[Function]}
-                                  sideCar={
-                                    Object {
-                                      "assignMedium": [Function],
-                                      "assignSyncMedium": [Function],
-                                      "options": Object {
-                                        "async": true,
-                                        "ssr": false,
-                                      },
-                                      "read": [Function],
-                                      "useMedium": [Function],
-                                    }
-                                  }
-                                >
-                                  <SideCar
-                                    noIsolation={true}
-                                    setLockProps={[Function]}
-                                    sideCar={
-                                      Object {
-                                        "assignMedium": [Function],
-                                        "assignSyncMedium": [Function],
-                                        "options": Object {
-                                          "async": true,
-                                          "ssr": false,
-                                        },
-                                        "read": [Function],
-                                        "useMedium": [Function],
-                                      }
-                                    }
-                                  >
-                                    <Effect
-                                      noIsolation={true}
-                                      setLockProps={[Function]}
-                                    >
-                                      <Component>
-                                        <Sheet
-                                          styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                                        />
-                                      </Component>
-                                    </Effect>
-                                  </SideCar>
-                                </RequireSideCar>
-                              </ForwardRef>
-                            </ForwardRef>
+                                  </EuiModalFooter>
+                                </div>
+                              </div>
+                            </div>
                           </EuiFocusTrap>
                         </EuiModal>
                       </EuiConfirmModal>
diff --git a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
index a8982a9683d03..49d4cd4968d5e 100644
--- a/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
+++ b/x-pack/plugins/reporting/public/components/buttons/__snapshots__/report_info_button.test.tsx.snap
@@ -44,9 +44,7 @@ Array [
       <Portal
         containerInfo={
           <div
-            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
-            data-aria-hidden="true"
           />
         }
       />
@@ -54,562 +52,92 @@ Array [
     <EuiFocusTrap
       clickOutsideDisables={true}
     >
-      <EuiOutsideClickDetector
-        isDisabled={false}
-        onOutsideClick={[Function]}
+      <div
+        data-eui="EuiFocusTrap"
       >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <div
+          aria-labelledby="flyoutTitle"
+          className="euiFlyout euiFlyout--small"
+          data-test-subj="reportInfoFlyout"
+          role="dialog"
+          tabIndex={0}
         >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+          <EuiI18n
+            default="Close this dialog"
+            token="euiFlyout.closeAriaLabel"
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
+            <EuiButtonIcon
+              aria-label="Close this dialog"
+              className="euiFlyout__closeButton"
+              color="text"
+              data-test-subj="euiFlyoutCloseButton"
+              iconType="cross"
+              onClick={[Function]}
             >
-              <ForwardRef
-                enabled={true}
-                noIsolation={true}
-                returnFocus={true}
-                scrollLock={false}
-                sideCar={[Function]}
+              <button
+                aria-label="Close this dialog"
+                className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                data-test-subj="euiFlyoutCloseButton"
+                onClick={[Function]}
+                type="button"
               >
-                <ForwardRef
-                  as={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "classNames": Object {
-                        "fullWidth": "width-before-scroll-bar",
-                        "zeroRight": "right-scroll-bar-position",
-                      },
-                      "defaultProps": Object {
-                        "enabled": true,
-                        "inert": false,
-                        "removeScrollBar": true,
-                      },
-                      "render": [Function],
-                    }
-                  }
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={false}
-                  lockProps={
-                    Object {
-                      "allowPinchZoom": undefined,
-                      "enabled": false,
-                      "inert": undefined,
-                      "onMouseDown": [Function],
-                      "onTouchStart": [Function],
-                      "shards": undefined,
-                      "sideCar": [Function],
-                    }
-                  }
-                  noFocusGuards={false}
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={true}
-                  sideCar={[Function]}
+                <EuiIcon
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  size="m"
+                  type="cross"
                 >
                   <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    data-euiicon-type="cross"
+                    size="m"
                   />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={1}
-                  />
-                  <RequireSideCar
-                    autoFocus={true}
-                    crossFrame={true}
-                    disabled={false}
-                    id={Object {}}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="false"
-                      >
-                        <div
-                          aria-labelledby="flyoutTitle"
-                          class="euiFlyout euiFlyout--small"
-                          data-test-subj="reportInfoFlyout"
-                          role="dialog"
-                          tabindex="0"
-                        >
-                          <button
-                            aria-label="Close this dialog"
-                            class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                            data-test-subj="euiFlyoutCloseButton"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="cross"
-                            />
-                          </button>
-                          <div
-                            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                          >
-                            <h2
-                              class="euiTitle euiTitle--medium"
-                              id="flyoutTitle"
-                            >
-                              Unable to fetch report info
-                            </h2>
-                          </div>
-                          <div
-                            class="euiFlyoutBody"
-                          >
-                            <div
-                              class="euiFlyoutBody__overflow"
-                            >
-                              <div
-                                class="euiFlyoutBody__overflowContent"
-                              >
-                                <div
-                                  class="euiText euiText--medium"
-                                >
-                                  Could not fetch the job info
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                    returnFocus={[Function]}
-                    shards={Array []}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <SideCar
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={false}
-                      id={Object {}}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="false"
-                        >
-                          <div
-                            aria-labelledby="flyoutTitle"
-                            class="euiFlyout euiFlyout--small"
-                            data-test-subj="reportInfoFlyout"
-                            role="dialog"
-                            tabindex="0"
-                          >
-                            <button
-                              aria-label="Close this dialog"
-                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                              data-test-subj="euiFlyoutCloseButton"
-                              type="button"
-                            >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
-                              />
-                            </button>
-                            <div
-                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                            >
-                              <h2
-                                class="euiTitle euiTitle--medium"
-                                id="flyoutTitle"
-                              >
-                                Unable to fetch report info
-                              </h2>
-                            </div>
-                            <div
-                              class="euiFlyoutBody"
-                            >
-                              <div
-                                class="euiFlyoutBody__overflow"
-                              >
-                                <div
-                                  class="euiFlyoutBody__overflowContent"
-                                >
-                                  <div
-                                    class="euiText euiText--medium"
-                                  >
-                                    Could not fetch the job info
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
-                      persistentFocus={false}
-                      returnFocus={[Function]}
-                      shards={Array []}
-                      sideCar={
-                        Object {
-                          "assignMedium": [Function],
-                          "assignSyncMedium": [Function],
-                          "options": Object {
-                            "async": true,
-                            "ssr": false,
-                          },
-                          "read": [Function],
-                          "useMedium": [Function],
-                        }
-                      }
-                    >
-                      <SideEffect(FocusWatcher)
-                        autoFocus={true}
-                        crossFrame={true}
-                        disabled={false}
-                        id={Object {}}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="false"
-                          >
-                            <div
-                              aria-labelledby="flyoutTitle"
-                              class="euiFlyout euiFlyout--small"
-                              data-test-subj="reportInfoFlyout"
-                              role="dialog"
-                              tabindex="0"
-                            >
-                              <button
-                                aria-label="Close this dialog"
-                                class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                                data-test-subj="euiFlyoutCloseButton"
-                                type="button"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                />
-                              </button>
-                              <div
-                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                              >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="flyoutTitle"
-                                >
-                                  Unable to fetch report info
-                                </h2>
-                              </div>
-                              <div
-                                class="euiFlyoutBody"
-                              >
-                                <div
-                                  class="euiFlyoutBody__overflow"
-                                >
-                                  <div
-                                    class="euiFlyoutBody__overflowContent"
-                                  >
-                                    <div
-                                      class="euiText euiText--medium"
-                                    >
-                                      Could not fetch the job info
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                        returnFocus={[Function]}
-                        shards={Array []}
-                      >
-                        <FocusWatcher
-                          autoFocus={true}
-                          crossFrame={true}
-                          disabled={false}
-                          id={Object {}}
-                          observed={
-                            <div
-                              data-focus-lock-disabled="false"
-                            >
-                              <div
-                                aria-labelledby="flyoutTitle"
-                                class="euiFlyout euiFlyout--small"
-                                data-test-subj="reportInfoFlyout"
-                                role="dialog"
-                                tabindex="0"
-                              >
-                                <button
-                                  aria-label="Close this dialog"
-                                  class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                                  data-test-subj="euiFlyoutCloseButton"
-                                  type="button"
-                                >
-                                  <div
-                                    aria-hidden="true"
-                                    class="euiButtonIcon__icon"
-                                    data-euiicon-type="cross"
-                                  />
-                                </button>
-                                <div
-                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                                >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="flyoutTitle"
-                                  >
-                                    Unable to fetch report info
-                                  </h2>
-                                </div>
-                                <div
-                                  class="euiFlyoutBody"
-                                >
-                                  <div
-                                    class="euiFlyoutBody__overflow"
-                                  >
-                                    <div
-                                      class="euiFlyoutBody__overflowContent"
-                                    >
-                                      <div
-                                        class="euiText euiText--medium"
-                                      >
-                                        Could not fetch the job info
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          }
-                          onActivation={[Function]}
-                          onDeactivation={[Function]}
-                          persistentFocus={false}
-                          returnFocus={[Function]}
-                          shards={Array []}
-                        />
-                      </SideEffect(FocusWatcher)>
-                    </SideCar>
-                  </RequireSideCar>
-                  <ForwardRef
-                    data-focus-lock-disabled={false}
-                    enabled={false}
-                    inert={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    removeScrollBar={true}
-                    sideCar={[Function]}
-                  >
+                </EuiIcon>
+              </button>
+            </EuiButtonIcon>
+          </EuiI18n>
+          <EuiFlyoutHeader
+            hasBorder={true}
+          >
+            <div
+              className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+            >
+              <EuiTitle
+                size="m"
+              >
+                <h2
+                  className="euiTitle euiTitle--medium"
+                  id="flyoutTitle"
+                >
+                  Unable to fetch report info
+                </h2>
+              </EuiTitle>
+            </div>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <div
+              className="euiFlyoutBody"
+            >
+              <div
+                className="euiFlyoutBody__overflow"
+              >
+                <div
+                  className="euiFlyoutBody__overflowContent"
+                >
+                  <EuiText>
                     <div
-                      data-focus-lock-disabled={false}
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onScrollCapture={[Function]}
-                      onTouchMoveCapture={[Function]}
-                      onTouchStart={[Function]}
-                      onWheelCapture={[Function]}
+                      className="euiText euiText--medium"
                     >
-                      <div
-                        aria-labelledby="flyoutTitle"
-                        className="euiFlyout euiFlyout--small"
-                        data-test-subj="reportInfoFlyout"
-                        role="dialog"
-                        tabIndex={0}
-                      >
-                        <EuiI18n
-                          default="Close this dialog"
-                          token="euiFlyout.closeAriaLabel"
-                        >
-                          <EuiButtonIcon
-                            aria-label="Close this dialog"
-                            className="euiFlyout__closeButton"
-                            color="text"
-                            data-test-subj="euiFlyoutCloseButton"
-                            iconType="cross"
-                            onClick={[Function]}
-                          >
-                            <button
-                              aria-label="Close this dialog"
-                              className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                              data-test-subj="euiFlyoutCloseButton"
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiButtonIcon__icon"
-                                size="m"
-                                type="cross"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                            </button>
-                          </EuiButtonIcon>
-                        </EuiI18n>
-                        <EuiFlyoutHeader
-                          hasBorder={true}
-                        >
-                          <div
-                            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                          >
-                            <EuiTitle
-                              size="m"
-                            >
-                              <h2
-                                className="euiTitle euiTitle--medium"
-                                id="flyoutTitle"
-                              >
-                                Unable to fetch report info
-                              </h2>
-                            </EuiTitle>
-                          </div>
-                        </EuiFlyoutHeader>
-                        <EuiFlyoutBody>
-                          <div
-                            className="euiFlyoutBody"
-                          >
-                            <div
-                              className="euiFlyoutBody__overflow"
-                            >
-                              <div
-                                className="euiFlyoutBody__overflowContent"
-                              >
-                                <EuiText>
-                                  <div
-                                    className="euiText euiText--medium"
-                                  >
-                                    Could not fetch the job info
-                                  </div>
-                                </EuiText>
-                              </div>
-                            </div>
-                          </div>
-                        </EuiFlyoutBody>
-                      </div>
+                      Could not fetch the job info
                     </div>
-                  </ForwardRef>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
-                  />
-                </ForwardRef>
-                <RequireSideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
-                >
-                  <SideCar
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <Effect
-                      noIsolation={true}
-                      setLockProps={[Function]}
-                    >
-                      <Component>
-                        <Sheet
-                          styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                        />
-                      </Component>
-                    </Effect>
-                  </SideCar>
-                </RequireSideCar>
-              </ForwardRef>
-            </ForwardRef>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
+                  </EuiText>
+                </div>
+              </div>
+            </div>
+          </EuiFlyoutBody>
+        </div>
+      </div>
     </EuiFocusTrap>
   </EuiFlyout>,
   <div
@@ -717,9 +245,7 @@ Array [
       <Portal
         containerInfo={
           <div
-            aria-hidden="true"
             class="euiOverlayMask euiOverlayMask--belowHeader"
-            data-aria-hidden="true"
           />
         }
       />
@@ -727,552 +253,90 @@ Array [
     <EuiFocusTrap
       clickOutsideDisables={true}
     >
-      <EuiOutsideClickDetector
-        isDisabled={false}
-        onOutsideClick={[Function]}
+      <div
+        data-eui="EuiFocusTrap"
       >
-        <OutsideEventDetector
-          handleEvent={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+        <div
+          aria-labelledby="flyoutTitle"
+          className="euiFlyout euiFlyout--small"
+          data-test-subj="reportInfoFlyout"
+          role="dialog"
+          tabIndex={0}
         >
-          <div
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+          <EuiI18n
+            default="Close this dialog"
+            token="euiFlyout.closeAriaLabel"
           >
-            <ForwardRef
-              enabled={true}
-              noIsolation={true}
-              returnFocus={true}
-              scrollLock={false}
+            <EuiButtonIcon
+              aria-label="Close this dialog"
+              className="euiFlyout__closeButton"
+              color="text"
+              data-test-subj="euiFlyoutCloseButton"
+              iconType="cross"
+              onClick={[Function]}
             >
-              <ForwardRef
-                enabled={true}
-                noIsolation={true}
-                returnFocus={true}
-                scrollLock={false}
-                sideCar={[Function]}
+              <button
+                aria-label="Close this dialog"
+                className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+                data-test-subj="euiFlyoutCloseButton"
+                onClick={[Function]}
+                type="button"
               >
-                <ForwardRef
-                  as={
-                    Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "classNames": Object {
-                        "fullWidth": "width-before-scroll-bar",
-                        "zeroRight": "right-scroll-bar-position",
-                      },
-                      "defaultProps": Object {
-                        "enabled": true,
-                        "inert": false,
-                        "removeScrollBar": true,
-                      },
-                      "render": [Function],
-                    }
-                  }
-                  autoFocus={true}
-                  crossFrame={true}
-                  disabled={false}
-                  lockProps={
-                    Object {
-                      "allowPinchZoom": undefined,
-                      "enabled": false,
-                      "inert": undefined,
-                      "onMouseDown": [Function],
-                      "onTouchStart": [Function],
-                      "shards": undefined,
-                      "sideCar": [Function],
-                    }
-                  }
-                  noFocusGuards={false}
-                  onActivation={[Function]}
-                  onDeactivation={[Function]}
-                  persistentFocus={false}
-                  returnFocus={true}
-                  sideCar={[Function]}
+                <EuiIcon
+                  aria-hidden="true"
+                  className="euiButtonIcon__icon"
+                  size="m"
+                  type="cross"
                 >
                   <div
-                    data-focus-guard={true}
-                    key="guard-first"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
+                    aria-hidden="true"
+                    className="euiButtonIcon__icon"
+                    data-euiicon-type="cross"
+                    size="m"
                   />
-                  <div
-                    data-focus-guard={true}
-                    key="guard-nearest"
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={1}
-                  />
-                  <RequireSideCar
-                    autoFocus={true}
-                    crossFrame={true}
-                    disabled={false}
-                    id={Object {}}
-                    observed={
-                      <div
-                        data-focus-lock-disabled="false"
-                      >
-                        <div
-                          aria-labelledby="flyoutTitle"
-                          class="euiFlyout euiFlyout--small"
-                          data-test-subj="reportInfoFlyout"
-                          role="dialog"
-                          tabindex="0"
-                        >
-                          <button
-                            aria-label="Close this dialog"
-                            class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                            data-test-subj="euiFlyoutCloseButton"
-                            type="button"
-                          >
-                            <div
-                              aria-hidden="true"
-                              class="euiButtonIcon__icon"
-                              data-euiicon-type="cross"
-                            />
-                          </button>
-                          <div
-                            class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                          >
-                            <h2
-                              class="euiTitle euiTitle--medium"
-                              id="flyoutTitle"
-                            >
-                              Job Info
-                            </h2>
-                          </div>
-                          <div
-                            class="euiFlyoutBody"
-                          >
-                            <div
-                              class="euiFlyoutBody__overflow"
-                            >
-                              <div
-                                class="euiFlyoutBody__overflowContent"
-                              >
-                                <div
-                                  class="euiText euiText--medium"
-                                />
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
-                    onActivation={[Function]}
-                    onDeactivation={[Function]}
-                    persistentFocus={false}
-                    returnFocus={[Function]}
-                    shards={Array []}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <SideCar
-                      autoFocus={true}
-                      crossFrame={true}
-                      disabled={false}
-                      id={Object {}}
-                      observed={
-                        <div
-                          data-focus-lock-disabled="false"
-                        >
-                          <div
-                            aria-labelledby="flyoutTitle"
-                            class="euiFlyout euiFlyout--small"
-                            data-test-subj="reportInfoFlyout"
-                            role="dialog"
-                            tabindex="0"
-                          >
-                            <button
-                              aria-label="Close this dialog"
-                              class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                              data-test-subj="euiFlyoutCloseButton"
-                              type="button"
-                            >
-                              <div
-                                aria-hidden="true"
-                                class="euiButtonIcon__icon"
-                                data-euiicon-type="cross"
-                              />
-                            </button>
-                            <div
-                              class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                            >
-                              <h2
-                                class="euiTitle euiTitle--medium"
-                                id="flyoutTitle"
-                              >
-                                Job Info
-                              </h2>
-                            </div>
-                            <div
-                              class="euiFlyoutBody"
-                            >
-                              <div
-                                class="euiFlyoutBody__overflow"
-                              >
-                                <div
-                                  class="euiFlyoutBody__overflowContent"
-                                >
-                                  <div
-                                    class="euiText euiText--medium"
-                                  />
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      }
-                      onActivation={[Function]}
-                      onDeactivation={[Function]}
-                      persistentFocus={false}
-                      returnFocus={[Function]}
-                      shards={Array []}
-                      sideCar={
-                        Object {
-                          "assignMedium": [Function],
-                          "assignSyncMedium": [Function],
-                          "options": Object {
-                            "async": true,
-                            "ssr": false,
-                          },
-                          "read": [Function],
-                          "useMedium": [Function],
-                        }
-                      }
-                    >
-                      <SideEffect(FocusWatcher)
-                        autoFocus={true}
-                        crossFrame={true}
-                        disabled={false}
-                        id={Object {}}
-                        observed={
-                          <div
-                            data-focus-lock-disabled="false"
-                          >
-                            <div
-                              aria-labelledby="flyoutTitle"
-                              class="euiFlyout euiFlyout--small"
-                              data-test-subj="reportInfoFlyout"
-                              role="dialog"
-                              tabindex="0"
-                            >
-                              <button
-                                aria-label="Close this dialog"
-                                class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                                data-test-subj="euiFlyoutCloseButton"
-                                type="button"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  class="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                />
-                              </button>
-                              <div
-                                class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                              >
-                                <h2
-                                  class="euiTitle euiTitle--medium"
-                                  id="flyoutTitle"
-                                >
-                                  Job Info
-                                </h2>
-                              </div>
-                              <div
-                                class="euiFlyoutBody"
-                              >
-                                <div
-                                  class="euiFlyoutBody__overflow"
-                                >
-                                  <div
-                                    class="euiFlyoutBody__overflowContent"
-                                  >
-                                    <div
-                                      class="euiText euiText--medium"
-                                    />
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        }
-                        onActivation={[Function]}
-                        onDeactivation={[Function]}
-                        persistentFocus={false}
-                        returnFocus={[Function]}
-                        shards={Array []}
-                      >
-                        <FocusWatcher
-                          autoFocus={true}
-                          crossFrame={true}
-                          disabled={false}
-                          id={Object {}}
-                          observed={
-                            <div
-                              data-focus-lock-disabled="false"
-                            >
-                              <div
-                                aria-labelledby="flyoutTitle"
-                                class="euiFlyout euiFlyout--small"
-                                data-test-subj="reportInfoFlyout"
-                                role="dialog"
-                                tabindex="0"
-                              >
-                                <button
-                                  aria-label="Close this dialog"
-                                  class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                                  data-test-subj="euiFlyoutCloseButton"
-                                  type="button"
-                                >
-                                  <div
-                                    aria-hidden="true"
-                                    class="euiButtonIcon__icon"
-                                    data-euiicon-type="cross"
-                                  />
-                                </button>
-                                <div
-                                  class="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                                >
-                                  <h2
-                                    class="euiTitle euiTitle--medium"
-                                    id="flyoutTitle"
-                                  >
-                                    Job Info
-                                  </h2>
-                                </div>
-                                <div
-                                  class="euiFlyoutBody"
-                                >
-                                  <div
-                                    class="euiFlyoutBody__overflow"
-                                  >
-                                    <div
-                                      class="euiFlyoutBody__overflowContent"
-                                    >
-                                      <div
-                                        class="euiText euiText--medium"
-                                      />
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          }
-                          onActivation={[Function]}
-                          onDeactivation={[Function]}
-                          persistentFocus={false}
-                          returnFocus={[Function]}
-                          shards={Array []}
-                        />
-                      </SideEffect(FocusWatcher)>
-                    </SideCar>
-                  </RequireSideCar>
-                  <ForwardRef
-                    data-focus-lock-disabled={false}
-                    enabled={false}
-                    inert={false}
-                    onBlur={[Function]}
-                    onFocus={[Function]}
-                    onMouseDown={[Function]}
-                    onTouchStart={[Function]}
-                    removeScrollBar={true}
-                    sideCar={[Function]}
-                  >
-                    <div
-                      data-focus-lock-disabled={false}
-                      onBlur={[Function]}
-                      onFocus={[Function]}
-                      onMouseDown={[Function]}
-                      onScrollCapture={[Function]}
-                      onTouchMoveCapture={[Function]}
-                      onTouchStart={[Function]}
-                      onWheelCapture={[Function]}
-                    >
-                      <div
-                        aria-labelledby="flyoutTitle"
-                        className="euiFlyout euiFlyout--small"
-                        data-test-subj="reportInfoFlyout"
-                        role="dialog"
-                        tabIndex={0}
-                      >
-                        <EuiI18n
-                          default="Close this dialog"
-                          token="euiFlyout.closeAriaLabel"
-                        >
-                          <EuiButtonIcon
-                            aria-label="Close this dialog"
-                            className="euiFlyout__closeButton"
-                            color="text"
-                            data-test-subj="euiFlyoutCloseButton"
-                            iconType="cross"
-                            onClick={[Function]}
-                          >
-                            <button
-                              aria-label="Close this dialog"
-                              className="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-                              data-test-subj="euiFlyoutCloseButton"
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiButtonIcon__icon"
-                                size="m"
-                                type="cross"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className="euiButtonIcon__icon"
-                                  data-euiicon-type="cross"
-                                  size="m"
-                                />
-                              </EuiIcon>
-                            </button>
-                          </EuiButtonIcon>
-                        </EuiI18n>
-                        <EuiFlyoutHeader
-                          hasBorder={true}
-                        >
-                          <div
-                            className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
-                          >
-                            <EuiTitle
-                              size="m"
-                            >
-                              <h2
-                                className="euiTitle euiTitle--medium"
-                                id="flyoutTitle"
-                              >
-                                Job Info
-                              </h2>
-                            </EuiTitle>
-                          </div>
-                        </EuiFlyoutHeader>
-                        <EuiFlyoutBody>
-                          <div
-                            className="euiFlyoutBody"
-                          >
-                            <div
-                              className="euiFlyoutBody__overflow"
-                            >
-                              <div
-                                className="euiFlyoutBody__overflowContent"
-                              >
-                                <EuiText>
-                                  <div
-                                    className="euiText euiText--medium"
-                                  />
-                                </EuiText>
-                              </div>
-                            </div>
-                          </div>
-                        </EuiFlyoutBody>
-                      </div>
-                    </div>
-                  </ForwardRef>
-                  <div
-                    data-focus-guard={true}
-                    style={
-                      Object {
-                        "height": "0px",
-                        "left": "1px",
-                        "overflow": "hidden",
-                        "padding": 0,
-                        "position": "fixed",
-                        "top": "1px",
-                        "width": "1px",
-                      }
-                    }
-                    tabIndex={0}
-                  />
-                </ForwardRef>
-                <RequireSideCar
-                  noIsolation={true}
-                  setLockProps={[Function]}
-                  sideCar={
-                    Object {
-                      "assignMedium": [Function],
-                      "assignSyncMedium": [Function],
-                      "options": Object {
-                        "async": true,
-                        "ssr": false,
-                      },
-                      "read": [Function],
-                      "useMedium": [Function],
-                    }
-                  }
+                </EuiIcon>
+              </button>
+            </EuiButtonIcon>
+          </EuiI18n>
+          <EuiFlyoutHeader
+            hasBorder={true}
+          >
+            <div
+              className="euiFlyoutHeader euiFlyoutHeader--hasBorder"
+            >
+              <EuiTitle
+                size="m"
+              >
+                <h2
+                  className="euiTitle euiTitle--medium"
+                  id="flyoutTitle"
                 >
-                  <SideCar
-                    noIsolation={true}
-                    setLockProps={[Function]}
-                    sideCar={
-                      Object {
-                        "assignMedium": [Function],
-                        "assignSyncMedium": [Function],
-                        "options": Object {
-                          "async": true,
-                          "ssr": false,
-                        },
-                        "read": [Function],
-                        "useMedium": [Function],
-                      }
-                    }
-                  >
-                    <Effect
-                      noIsolation={true}
-                      setLockProps={[Function]}
-                    >
-                      <Component>
-                        <Sheet
-                          styles="
- [data-focus-on-hidden] {
-   pointer-events: none !important;
- }
-"
-                        />
-                      </Component>
-                    </Effect>
-                  </SideCar>
-                </RequireSideCar>
-              </ForwardRef>
-            </ForwardRef>
-          </div>
-        </OutsideEventDetector>
-      </EuiOutsideClickDetector>
+                  Job Info
+                </h2>
+              </EuiTitle>
+            </div>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <div
+              className="euiFlyoutBody"
+            >
+              <div
+                className="euiFlyoutBody__overflow"
+              >
+                <div
+                  className="euiFlyoutBody__overflowContent"
+                >
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
+                    />
+                  </EuiText>
+                </div>
+              </div>
+            </div>
+          </EuiFlyoutBody>
+        </div>
+      </div>
     </EuiFocusTrap>
   </EuiFlyout>,
   <div
diff --git a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts
index 917c41b998dec..a8e8117d85f5f 100644
--- a/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts
+++ b/x-pack/plugins/snapshot_restore/__jest__/client_integration/helpers/home.helpers.ts
@@ -65,7 +65,7 @@ export const setup = async (): Promise<HomeTestBed> => {
     await act(async () => {
       const { href } = repositoryLink.props();
       router.navigateTo(href!);
-      await nextTick();
+      await nextTick(10);
       component.update();
     });
   };
diff --git a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
index 97927a71118d5..b2f69b1676fb5 100644
--- a/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
+++ b/x-pack/plugins/uptime/public/components/monitor/ml/__tests__/__snapshots__/ml_flyout.test.tsx.snap
@@ -80,190 +80,173 @@ exports[`ML Flyout component renders without errors 1`] = `
 `;
 
 exports[`ML Flyout component shows license info if no ml available 1`] = `
-<div>
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />
+<div
+  data-eui="EuiFocusTrap"
+>
   <div
-    data-focus-lock-disabled="disabled"
+    class="euiFlyout euiFlyout--small"
+    data-test-subj="uptimeMLFlyout"
+    role="dialog"
+    tabindex="0"
   >
+    <button
+      aria-label="Close this dialog"
+      class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+      data-test-subj="euiFlyoutCloseButton"
+      type="button"
+    >
+      <div
+        aria-hidden="true"
+        class="euiButtonIcon__icon"
+        data-euiicon-type="cross"
+      />
+    </button>
     <div
-      class="euiFlyout euiFlyout--small"
-      data-test-subj="uptimeMLFlyout"
-      role="dialog"
-      tabindex="0"
+      class="euiFlyoutHeader"
     >
-      <button
-        aria-label="Close this dialog"
-        class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
-        data-test-subj="euiFlyoutCloseButton"
-        type="button"
+      <h2
+        class="euiTitle euiTitle--medium"
       >
-        <div
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          data-euiicon-type="cross"
-        />
-      </button>
+        Enable anomaly detection
+      </h2>
       <div
-        class="euiFlyoutHeader"
-      >
-        <h2
-          class="euiTitle euiTitle--medium"
-        >
-          Enable anomaly detection
-        </h2>
-        <div
-          class="euiSpacer euiSpacer--s"
-        />
-      </div>
+        class="euiSpacer euiSpacer--s"
+      />
+    </div>
+    <div
+      class="euiFlyoutBody"
+    >
       <div
-        class="euiFlyoutBody"
+        class="euiFlyoutBody__overflow"
       >
         <div
-          class="euiFlyoutBody__overflow"
+          class="euiFlyoutBody__overflowContent"
         >
           <div
-            class="euiFlyoutBody__overflowContent"
+            class="euiCallOut euiCallOut--primary license-info-trial"
+            data-test-subj="uptimeMLLicenseInfo"
           >
             <div
-              class="euiCallOut euiCallOut--primary license-info-trial"
-              data-test-subj="uptimeMLLicenseInfo"
+              class="euiCallOutHeader"
             >
               <div
-                class="euiCallOutHeader"
-              >
-                <div
-                  aria-hidden="true"
-                  class="euiCallOutHeader__icon"
-                  data-euiicon-type="help"
-                />
-                <span
-                  class="euiCallOutHeader__title"
-                >
-                  Start free 14-day trial
-                </span>
-              </div>
-              <div
-                class="euiText euiText--small"
+                aria-hidden="true"
+                class="euiCallOutHeader__icon"
+                data-euiicon-type="help"
+              />
+              <span
+                class="euiCallOutHeader__title"
               >
-                <p>
-                  In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license.
-                </p>
-                <span>
-                  <a
-                    class="euiButton euiButton--primary"
-                    href="/app/management/stack/license_management/home"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <span
-                      class="euiButtonContent euiButton__content"
-                    >
-                      <span
-                        class="euiButton__text"
-                      >
-                        Start free 14-day trial
-                      </span>
-                    </span>
-                  </a>
-                </span>
-              </div>
+                Start free 14-day trial
+              </span>
             </div>
             <div
-              class="euiSpacer euiSpacer--l"
-            />
-            <div
-              class="euiText euiText--medium"
+              class="euiText euiText--small"
             >
               <p>
-                Here you can create a machine learning job to calculate anomaly scores on
-    response durations for Uptime Monitor. Once enabled, the monitor duration chart on the details page
-    will show the expected bounds and annotate the graph with anomalies. You can also potentially
-     identify periods of increased latency across geographical regions.
+                In order to access duration anomaly detection, you have to be subscribed to an Elastic Platinum license.
               </p>
-              <p>
-                Once a job is created, you can manage it and see more details in the 
+              <span>
                 <a
-                  class="euiLink euiLink--primary"
-                  href="/app/ml"
-                  rel="noreferrer"
+                  class="euiButton euiButton--primary"
+                  href="/app/management/stack/license_management/home"
+                  rel="noopener noreferrer"
+                  target="_blank"
                 >
-                  Machine Learning jobs management page
+                  <span
+                    class="euiButtonContent euiButton__content"
+                  >
+                    <span
+                      class="euiButton__text"
+                    >
+                      Start free 14-day trial
+                    </span>
+                  </span>
                 </a>
-                .
-              </p>
-              <p>
-                <em>
-                  Note: It might take a few minutes for the job to begin calculating results.
-                </em>
-              </p>
+              </span>
             </div>
-            <div
-              class="euiSpacer euiSpacer--l"
-            />
           </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <div
+            class="euiText euiText--medium"
+          >
+            <p>
+              Here you can create a machine learning job to calculate anomaly scores on
+    response durations for Uptime Monitor. Once enabled, the monitor duration chart on the details page
+    will show the expected bounds and annotate the graph with anomalies. You can also potentially
+     identify periods of increased latency across geographical regions.
+            </p>
+            <p>
+              Once a job is created, you can manage it and see more details in the 
+              <a
+                class="euiLink euiLink--primary"
+                href="/app/ml"
+                rel="noreferrer"
+              >
+                Machine Learning jobs management page
+              </a>
+              .
+            </p>
+            <p>
+              <em>
+                Note: It might take a few minutes for the job to begin calculating results.
+              </em>
+            </p>
+          </div>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
         </div>
       </div>
+    </div>
+    <div
+      class="euiFlyoutFooter"
+    >
       <div
-        class="euiFlyoutFooter"
+        class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow euiFlexGroup--responsive"
+          class="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+          <button
+            class="euiButtonEmpty euiButtonEmpty--primary"
+            type="button"
           >
-            <button
-              class="euiButtonEmpty euiButtonEmpty--primary"
-              type="button"
+            <span
+              class="euiButtonContent euiButtonEmpty__content"
             >
               <span
-                class="euiButtonContent euiButtonEmpty__content"
+                class="euiButtonEmpty__text"
               >
-                <span
-                  class="euiButtonEmpty__text"
-                >
-                  Cancel
-                </span>
+                Cancel
               </span>
-            </button>
-          </div>
-          <div
-            class="euiFlexItem euiFlexItem--flexGrowZero"
+            </span>
+          </button>
+        </div>
+        <div
+          class="euiFlexItem euiFlexItem--flexGrowZero"
+        >
+          <button
+            class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+            data-test-subj="uptimeMLCreateJobBtn"
+            disabled=""
+            type="button"
           >
-            <button
-              class="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
-              data-test-subj="uptimeMLCreateJobBtn"
-              disabled=""
-              type="button"
+            <span
+              class="euiButtonContent euiButton__content"
             >
               <span
-                class="euiButtonContent euiButton__content"
+                class="euiButton__text"
               >
-                <span
-                  class="euiButton__text"
-                >
-                  Create new job
-                </span>
+                Create new job
               </span>
-            </button>
-          </div>
+            </span>
+          </button>
         </div>
       </div>
     </div>
   </div>
-  <div
-    data-focus-guard="true"
-    style="width:1px;height:0px;padding:0;overflow:hidden;position:fixed;top:1px;left:1px"
-    tabindex="-1"
-  />
 </div>
 `;
diff --git a/yarn.lock b/yarn.lock
index ed9dda820d66a..f00bee1d13dc2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1229,10 +1229,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@27.4.0":
-  version "27.4.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-27.4.0.tgz#4a96a6ac827f53c879451a3eeec093287fcc7255"
-  integrity sha512-wMr52SAWu5MwKUAIMb5Vfz2mw7VwKWuNxBaMlnmBKTo0WK7Trlp8cUyVTVZYy96p1MKyqDvKH6FxVDJ8JZVb6w==
+"@elastic/eui@27.4.1":
+  version "27.4.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-27.4.1.tgz#9803f6f6c6997c769720381f521e5319ef07a599"
+  integrity sha512-eGztErFlvkwI4BFxDs6tFBGFiN15NQdJdRHvSi5caOQFGabuR8XCRNUWcNFHlwKVJaDaGsJRuwbbSLh9XdWubQ==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.116"

From d013eb2f1b74b699cca11ba72782625c3ee385f5 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Fri, 21 Aug 2020 11:02:43 -0600
Subject: [PATCH 10/25] [Security Solution] Fix missing key error (#75576)

---
 .../public/cases/components/tag_list/index.tsx              | 4 ++--
 .../public/cases/components/user_action_tree/helpers.tsx    | 2 +-
 .../exceptions/viewer/exception_item/exception_entries.tsx  | 6 +++++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/cases/components/tag_list/index.tsx b/x-pack/plugins/security_solution/public/cases/components/tag_list/index.tsx
index b5af1934f379c..eeb7c49eceab5 100644
--- a/x-pack/plugins/security_solution/public/cases/components/tag_list/index.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/tag_list/index.tsx
@@ -102,8 +102,8 @@ export const TagList = React.memo(
           <EuiBadgeGroup>
             {tags.length > 0 &&
               !isEditTags &&
-              tags.map((tag, key) => (
-                <EuiBadge data-test-subj={`case-tag-${tag}`} color="hollow">
+              tags.map((tag) => (
+                <EuiBadge data-test-subj={`case-tag-${tag}`} color="hollow" key={tag}>
                   {tag}
                 </EuiBadge>
               ))}
diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx
index 1401ac2c46528..e343c3da6cc8b 100644
--- a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/helpers.tsx
@@ -53,7 +53,7 @@ const getTagsLabelTitle = (action: CaseUserActions) => (
     <EuiBadgeGroup>
       {action.newValue != null &&
         action.newValue.split(',').map((tag) => (
-          <EuiBadge data-test-subj={`ua-tag`} color="default">
+          <EuiBadge data-test-subj={`ua-tag`} color="default" key={tag}>
             {tag}
           </EuiBadge>
         ))}
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
index f441baaec7d80..9720a325ce418 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/viewer/exception_item/exception_entries.tsx
@@ -122,7 +122,11 @@ const ExceptionEntriesComponent = ({
             return (
               <ValueBadgeGroup gutterSize="xs">
                 {values.map((value) => {
-                  return <EuiBadge color="#DDD">{value}</EuiBadge>;
+                  return (
+                    <EuiBadge color="#DDD" key={value}>
+                      {value}
+                    </EuiBadge>
+                  );
                 })}
               </ValueBadgeGroup>
             );

From a9b62a85dbee90a2c3b9b1b16681620624d879d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?=
 <alejandro.haro@elastic.co>
Date: Fri, 21 Aug 2020 18:18:55 +0100
Subject: [PATCH 11/25] Fix returned payload by "search" usage collector
 (#75340)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/plugins/data/server/search/collectors/fetch.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/plugins/data/server/search/collectors/fetch.ts b/src/plugins/data/server/search/collectors/fetch.ts
index ee29607b63ede..3551767eab017 100644
--- a/src/plugins/data/server/search/collectors/fetch.ts
+++ b/src/plugins/data/server/search/collectors/fetch.ts
@@ -19,14 +19,18 @@
 
 import { Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
-import { LegacyAPICaller, SharedGlobalConfig } from '../../../../../core/server';
+import { LegacyAPICaller, SharedGlobalConfig } from 'kibana/server';
 import { Usage } from './register';
 
+interface SearchTelemetrySavedObject {
+  'search-telemetry': Usage;
+}
+
 export function fetchProvider(config$: Observable<SharedGlobalConfig>) {
   return async (callCluster: LegacyAPICaller): Promise<Usage> => {
     const config = await config$.pipe(first()).toPromise();
 
-    const response = await callCluster('search', {
+    const response = await callCluster<SearchTelemetrySavedObject>('search', {
       index: config.kibana.index,
       body: {
         query: { term: { type: { value: 'search-telemetry' } } },
@@ -35,7 +39,7 @@ export function fetchProvider(config$: Observable<SharedGlobalConfig>) {
     });
 
     return response.hits.hits.length
-      ? (response.hits.hits[0]._source as Usage)
+      ? response.hits.hits[0]._source['search-telemetry']
       : {
           successCount: 0,
           errorCount: 0,

From 384213fd495915df65fb3359fd21e5135c5e418f Mon Sep 17 00:00:00 2001
From: Josh Dover <me@joshdover.com>
Date: Fri, 21 Aug 2020 11:29:18 -0600
Subject: [PATCH 12/25] Configure ScopedHistory consistenty regardless of URL
 used to mount app (#75074)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 src/core/public/application/ui/app_router.tsx  |  4 ++--
 .../core_plugin_a/public/application.tsx       |  7 ++++---
 .../test_suites/core_plugins/applications.ts   | 18 +++++++++++++++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/core/public/application/ui/app_router.tsx b/src/core/public/application/ui/app_router.tsx
index f2d2d1e6587ac..f1f22237c32db 100644
--- a/src/core/public/application/ui/app_router.tsx
+++ b/src/core/public/application/ui/app_router.tsx
@@ -64,9 +64,9 @@ export const AppRouter: FunctionComponent<Props> = ({
               key={mounter.appRoute}
               path={mounter.appRoute}
               exact={mounter.exactRoute}
-              render={({ match: { url } }) => (
+              render={({ match: { path } }) => (
                 <AppContainer
-                  appPath={url}
+                  appPath={path}
                   appStatus={appStatuses.get(appId) ?? AppStatus.inaccessible}
                   createScopedHistory={createScopedHistory}
                   {...{ appId, mounter, setAppLeaveHandler, setIsMounting }}
diff --git a/test/plugin_functional/plugins/core_plugin_a/public/application.tsx b/test/plugin_functional/plugins/core_plugin_a/public/application.tsx
index 159bb54f50903..9cf81d27e4e8d 100644
--- a/test/plugin_functional/plugins/core_plugin_a/public/application.tsx
+++ b/test/plugin_functional/plugins/core_plugin_a/public/application.tsx
@@ -20,7 +20,7 @@
 import { History } from 'history';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
+import { Router, Route, withRouter, RouteComponentProps, Redirect } from 'react-router-dom';
 
 import {
   EuiPage,
@@ -95,7 +95,7 @@ const Nav = withRouter(({ history, navigateToApp }: NavProps) => (
           {
             id: 'home',
             name: 'Home',
-            onClick: () => history.push(''),
+            onClick: () => history.push('/home'),
             'data-test-subj': 'fooNavHome',
           },
           {
@@ -122,7 +122,8 @@ const FooApp = ({ history, context }: { history: History; context: AppMountConte
       <EuiPageSideBar>
         <Nav navigateToApp={context.core.application.navigateToApp} />
       </EuiPageSideBar>
-      <Route path="/" exact component={Home} />
+      <Route path="/" exact render={() => <Redirect to="/home" />} />
+      <Route path="/home" exact component={Home} />
       <Route path="/page-a" component={PageA} />
     </EuiPage>
   </Router>
diff --git a/test/plugin_functional/test_suites/core_plugins/applications.ts b/test/plugin_functional/test_suites/core_plugins/applications.ts
index 9306b62b9d521..9ecef65f5f09a 100644
--- a/test/plugin_functional/test_suites/core_plugins/applications.ts
+++ b/test/plugin_functional/test_suites/core_plugins/applications.ts
@@ -54,6 +54,9 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
     });
   };
 
+  const navigateTo = async (path: string) =>
+    await browser.navigateTo(`${PageObjects.common.getHostPort()}${path}`);
+
   describe('ui applications', function describeIndexTests() {
     before(async () => {
       await PageObjects.common.navigateToApp('foo');
@@ -63,6 +66,15 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
       await testSubjects.existOrFail('fooAppHome');
     });
 
+    it('redirects and renders correctly regardless of trailing slash', async () => {
+      await navigateTo(`/app/foo`);
+      await waitForUrlToBe('/app/foo/home');
+      await testSubjects.existOrFail('fooAppHome');
+      await navigateTo(`/app/foo/`);
+      await waitForUrlToBe('/app/foo/home');
+      await testSubjects.existOrFail('fooAppHome');
+    });
+
     it('navigates to its own pages', async () => {
       // Go to page A
       await testSubjects.click('fooNavPageA');
@@ -72,7 +84,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
       // Go to home page
       await testSubjects.click('fooNavHome');
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });
@@ -86,7 +98,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
     it('navigates to app root when navlink is clicked', async () => {
       await appsMenu.clickLink('Foo');
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       // await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });
@@ -105,7 +117,7 @@ export default function ({ getService, getPageObjects }: PluginFunctionalProvide
 
     it('can use the back button to navigate back to previous app', async () => {
       await browser.goBack();
-      await waitForUrlToBe('/app/foo');
+      await waitForUrlToBe('/app/foo/home');
       await loadingScreenNotShown();
       await testSubjects.existOrFail('fooAppHome');
     });

From 6a334c354633535db835fee4c4ae014507e7b8fa Mon Sep 17 00:00:00 2001
From: Brian Seeders <brian.seeders@elastic.co>
Date: Fri, 21 Aug 2020 13:35:18 -0400
Subject: [PATCH 13/25] Skip failing lens test

---
 x-pack/plugins/lens/public/app_plugin/app.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 442f82161512f..892058d82a80f 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -300,7 +300,7 @@ describe('Lens App', () => {
     ]);
   });
 
-  it('sets originatingApp breadcrumb when the document title changes', async () => {
+  it.skip('sets originatingApp breadcrumb when the document title changes', async () => {
     const defaultArgs = makeDefaultArgs();
     defaultArgs.originatingApp = 'ultraCoolDashboard';
     defaultArgs.getAppNameFromId = () => 'The Coolest Container Ever Made';

From 5edba21e30684c2eae1014265aec08e1321d1cf4 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <marta.bondyra@gmail.com>
Date: Fri, 21 Aug 2020 20:07:19 +0200
Subject: [PATCH 14/25] [Lens] Show 'No data for this field' for empty field in
 accordion (#73772)

---
 .../public/indexpattern_datasource/field_item.tsx | 15 ++++++++-------
 .../indexpattern_datasource/fields_accordion.tsx  |  6 +++---
 .../plugins/translations/translations/ja-JP.json  |  1 -
 .../plugins/translations/translations/zh-CN.json  |  1 -
 4 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
index 5bcfbc64ec706..a0cc5ec352130 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -186,9 +186,13 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
           ? i18n.translate('xpack.lens.indexPattern.fieldItemTooltip', {
               defaultMessage: 'Drag and drop to visualize.',
             })
-          : i18n.translate('xpack.lens.indexPattern.fieldStatsButtonLabel', {
+          : exists
+          ? i18n.translate('xpack.lens.indexPattern.fieldStatsButtonLabel', {
               defaultMessage: 'Click for a field preview, or drag and drop to visualize.',
             })
+          : i18n.translate('xpack.lens.indexPattern.fieldStatsButtonEmptyLabel', {
+              defaultMessage: "This field doesn't have data. Drag and drop to visualize.",
+            })
       }
       type="iInCircle"
       color="subdued"
@@ -217,11 +221,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
             isDraggable
             isActive={infoIsOpen}
             data-test-subj={`lnsFieldListPanelField-${field.name}`}
-            onClick={() => {
-              if (exists) {
-                togglePopover();
-              }
-            }}
+            onClick={togglePopover}
             aria-label={i18n.translate('xpack.lens.indexPattern.fieldStatsButtonAriaLabel', {
               defaultMessage: '{fieldName}: {fieldType}. Hit enter for a field preview.',
               values: {
@@ -313,7 +313,8 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
     return (
       <EuiText size="s">
         {i18n.translate('xpack.lens.indexPattern.fieldStatsNoData', {
-          defaultMessage: 'No data to display.',
+          defaultMessage:
+            'This field is empty because it doesn’t exist in the 500 sampled documents.',
         })}
       </EuiText>
     );
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx
index 1d60b0b5cbbee..af2ed97ad8125 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx
@@ -64,9 +64,9 @@ export const InnerFieldsAccordion = function InnerFieldsAccordion({
   showExistenceFetchError,
 }: FieldsAccordionProps) {
   const renderField = useCallback(
-    (field: IndexPatternField) => {
-      return <FieldItem {...fieldProps} key={field.name} field={field} exists={!!exists} />;
-    },
+    (field: IndexPatternField) => (
+      <FieldItem {...fieldProps} key={field.name} field={field} exists={!!exists} />
+    ),
     [fieldProps, exists]
   );
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 6a7737d367005..b1e24958d5365 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9934,7 +9934,6 @@
     "xpack.lens.indexPattern.fieldStatsButtonLabel": "フィールドプレビューを表示するには、クリックします。可視化するには、ドラッグアンドドロップします。",
     "xpack.lens.indexPattern.fieldStatsCountLabel": "カウント",
     "xpack.lens.indexPattern.fieldStatsDisplayToggle": "次のどちらかを切り替えます:",
-    "xpack.lens.indexPattern.fieldStatsNoData": "表示するデータがありません",
     "xpack.lens.indexPattern.fieldTimeDistributionLabel": "時間分布",
     "xpack.lens.indexPattern.fieldTopValuesLabel": "トップの値",
     "xpack.lens.indexPattern.groupByDropdown": "グループ分けの条件",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 4d0186141f38d..82abb924611fb 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -9937,7 +9937,6 @@
     "xpack.lens.indexPattern.fieldStatsButtonLabel": "单击以进行字段预览，或拖放以进行可视化。",
     "xpack.lens.indexPattern.fieldStatsCountLabel": "计数",
     "xpack.lens.indexPattern.fieldStatsDisplayToggle": "切换",
-    "xpack.lens.indexPattern.fieldStatsNoData": "没有可显示的数据",
     "xpack.lens.indexPattern.fieldTimeDistributionLabel": "时间分布",
     "xpack.lens.indexPattern.fieldTopValuesLabel": "排名最前值",
     "xpack.lens.indexPattern.groupByDropdown": "分组依据",

From 68dc4e84101e687e5ade61f297d292f92f2deb7a Mon Sep 17 00:00:00 2001
From: Joe Portner <5295965+jportner@users.noreply.github.com>
Date: Fri, 21 Aug 2020 14:30:25 -0400
Subject: [PATCH 15/25] Filter saved object `version` during legacy import
 (#75597)

---
 .../server/lib/import/import_dashboards.test.ts        | 10 ++++++++--
 .../server/lib/import/import_dashboards.ts             |  3 ++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/plugins/legacy_export/server/lib/import/import_dashboards.test.ts b/src/plugins/legacy_export/server/lib/import/import_dashboards.test.ts
index 9d4dbb6067946..37e00a8c67fe3 100644
--- a/src/plugins/legacy_export/server/lib/import/import_dashboards.test.ts
+++ b/src/plugins/legacy_export/server/lib/import/import_dashboards.test.ts
@@ -30,12 +30,18 @@ describe('importDashboards(req)', () => {
     savedObjectClient.bulkCreate.mockResolvedValue({ saved_objects: [] });
 
     importedObjects = [
-      { id: 'dashboard-01', type: 'dashboard', attributes: { panelJSON: '{}' }, references: [] },
+      {
+        id: 'dashboard-01',
+        type: 'dashboard',
+        attributes: { panelJSON: '{}' },
+        references: [],
+        version: 'foo',
+      },
       { id: 'panel-01', type: 'visualization', attributes: { visState: '{}' }, references: [] },
     ];
   });
 
-  test('should call bulkCreate with each asset', async () => {
+  test('should call bulkCreate with each asset, filtering out any version if present', async () => {
     await importDashboards(savedObjectClient, importedObjects, { overwrite: false, exclude: [] });
 
     expect(savedObjectClient.bulkCreate).toHaveBeenCalledTimes(1);
diff --git a/src/plugins/legacy_export/server/lib/import/import_dashboards.ts b/src/plugins/legacy_export/server/lib/import/import_dashboards.ts
index 7b7562aecd7bd..8c9eb2fac61af 100644
--- a/src/plugins/legacy_export/server/lib/import/import_dashboards.ts
+++ b/src/plugins/legacy_export/server/lib/import/import_dashboards.ts
@@ -31,7 +31,8 @@ export async function importDashboards(
   // docs are not seen as automatically up-to-date.
   const docs = objects
     .filter((item) => !exclude.includes(item.type))
-    .map((doc) => ({ ...doc, migrationVersion: doc.migrationVersion || {} }));
+    // filter out any document version, if present
+    .map(({ version, ...doc }) => ({ ...doc, migrationVersion: doc.migrationVersion || {} }));
 
   const results = await savedObjectsClient.bulkCreate(docs, { overwrite });
   return { objects: results.saved_objects };

From 8e770ea86e11c9524e57dcbaaf4945b59b86b268 Mon Sep 17 00:00:00 2001
From: Brian Seeders <brian.seeders@elastic.co>
Date: Fri, 21 Aug 2020 15:14:58 -0400
Subject: [PATCH 16/25] Skip failing security_solution test

---
 .../cypress/integration/url_compatibility.spec.ts               | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts b/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
index 5b42897b065e3..7146cf70dc8c8 100644
--- a/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
+++ b/x-pack/plugins/security_solution/cypress/integration/url_compatibility.spec.ts
@@ -18,7 +18,7 @@ const ABSOLUTE_DATE = {
   startTime: '2019-08-01T20:03:29.186Z',
 };
 
-describe('URL compatibility', () => {
+describe.skip('URL compatibility', () => {
   it('Redirects to Detection alerts from old Detections URL', () => {
     loginAndWaitForPage(DETECTIONS);
 

From e0cea771f3bedb2f2e1a66f81aa62dcaba92e9f9 Mon Sep 17 00:00:00 2001
From: Tim Sullivan <tsullivan@users.noreply.github.com>
Date: Fri, 21 Aug 2020 13:21:16 -0700
Subject: [PATCH 17/25] [Reporting/Fn Test] Re-enable listing of reports tests
 (#75383)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../reporting_management/report_listing.ts    | 67 ++-----------------
 1 file changed, 7 insertions(+), 60 deletions(-)

diff --git a/x-pack/test/functional/apps/reporting_management/report_listing.ts b/x-pack/test/functional/apps/reporting_management/report_listing.ts
index 6662bfb17949c..e58b12fafb11e 100644
--- a/x-pack/test/functional/apps/reporting_management/report_listing.ts
+++ b/x-pack/test/functional/apps/reporting_management/report_listing.ts
@@ -5,20 +5,8 @@
  */
 
 import expect from '@kbn/expect';
-import { WebElementWrapper } from 'test/functional/services/lib/web_element_wrapper';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-const getTableTextFromElement = async (tableEl: WebElementWrapper) => {
-  const rows = await tableEl.findAllByCssSelector('tbody tr');
-  return (
-    await Promise.all(
-      rows.map(async (row) => {
-        return await row.getVisibleText();
-      })
-    )
-  ).join('\n');
-};
-
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const pageObjects = getPageObjects(['common', 'reporting']);
   const log = getService('log');
@@ -28,8 +16,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
   const testSubjects = getService('testSubjects');
   const esArchiver = getService('esArchiver');
 
-  // FLAKY: https://github.com/elastic/kibana/issues/75044
-  describe.skip('Listing of Reports', function () {
+  describe('Listing of Reports', function () {
     before(async () => {
       await security.testUser.setRoles(['kibana_admin', 'reporting_user']);
       await esArchiver.load('empty_kibana');
@@ -69,60 +56,20 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
 
     it('Paginates historical reports', async () => {
-      // wait for first row of page 1
-      await testSubjects.find('checkboxSelectRow-k9a9xlwl0gpe1457b10rraq3');
-
-      const previousButton = await testSubjects.find('pagination-button-previous');
-
       // previous CAN NOT be clicked
+      const previousButton = await testSubjects.find('pagination-button-previous');
       expect(await previousButton.getAttribute('disabled')).to.be('true');
 
-      // scan page 1
-      let tableText = await getTableTextFromElement(await testSubjects.find('reportJobListing'));
-      const PAGE_CONTENT_1 = `[Logs] File Type Scatter Plot\nvisualization\n2020-04-21 @ 07:01 PM\ntest_user\nCompleted at 2020-04-21 @ 07:02 PM
-[Logs] File Type Scatter Plot\nvisualization\n2020-04-21 @ 07:01 PM\ntest_user\nCompleted at 2020-04-21 @ 07:02 PM
-[Logs] Heatmap\nvisualization\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:01 PM
-[Logs] Heatmap\nvisualization\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:01 PM
-[Flights] Flight Delays\nvisualization\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:01 PM
-[Flights] Flight Delays\nvisualization\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:01 PM
-pdf\ndashboard\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:00 PM
-pdf\ndashboard\n2020-04-21 @ 07:00 PM\ntest_user\nCompleted at 2020-04-21 @ 07:00 PM
-[Flights] Flight Cancellations\nvisualization\n2020-04-21 @ 06:59 PM\ntest_user\nCompleted at 2020-04-21 @ 07:00 PM
-[Flights] Markdown Instructions\nvisualization\n2020-04-21 @ 06:59 PM\ntest_user\nCompleted at 2020-04-21 @ 07:00 PM`;
-      expect(tableText).to.be(PAGE_CONTENT_1);
+      await testSubjects.find('checkboxSelectRow-k9a9xlwl0gpe1457b10rraq3'); // find first row of page 1
 
-      // click page 2
-      await testSubjects.click('pagination-button-1');
+      await testSubjects.click('pagination-button-1'); // click page 2
+      await testSubjects.find('checkboxSelectRow-k9a9uc4x0gpe1457b16wthc8'); // wait for first row of page 2
 
-      // wait for first row of page 2
-      await testSubjects.find('checkboxSelectRow-k9a9uc4x0gpe1457b16wthc8');
+      await testSubjects.click('pagination-button-2'); // click page 3
+      await testSubjects.find('checkboxSelectRow-k9a9p1840gpe1457b1ghfxw5'); // wait for first row of page 3
 
       // previous CAN be clicked
       expect(await previousButton.getAttribute('disabled')).to.be(null);
-
-      // scan page 2
-      tableText = await getTableTextFromElement(await testSubjects.find('reportJobListing'));
-      const PAGE_CONTENT_2 = `[eCommerce] Revenue Tracking\ncanvas workpad\n2020-04-21 @ 06:58 PM\ntest_user\nCompleted at 2020-04-21 @ 06:59 PM
-[Logs] Web Traffic\ncanvas workpad\n2020-04-21 @ 06:58 PM\ntest_user\nCompleted at 2020-04-21 @ 06:59 PM
-[Flights] Overview\ncanvas workpad\n2020-04-21 @ 06:58 PM\ntest_user\nCompleted at 2020-04-21 @ 06:59 PM
-[eCommerce] Revenue Dashboard\ndashboard\n2020-04-21 @ 06:57 PM\ntest_user\nCompleted at 2020-04-21 @ 06:58 PM
-[Logs] Web Traffic\ndashboard\n2020-04-21 @ 06:57 PM\ntest_user\nCompleted at 2020-04-21 @ 06:58 PM
-[Flights] Global Flight Dashboard\ndashboard\n2020-04-21 @ 06:56 PM\ntest_user\nCompleted at 2020-04-21 @ 06:57 PM
-[Flights] Global Flight Dashboard\ndashboard\n2020-04-21 @ 06:56 PM\ntest_user\nCompleted at 2020-04-21 @ 06:57 PM
-report4csv\n2020-04-21 @ 06:55 PM\ntest_user\nCompleted at 2020-04-21 @ 06:56 PM - Max size reached\nreport3csv\n2020-04-21 @ 06:55 PM
-test_user\nCompleted at 2020-04-21 @ 06:55 PM - Max size reached\nreport2csv\n2020-04-21 @ 06:54 PM\ntest_user\nCompleted at 2020-04-21 @ 06:55 PM - Max size reached`;
-      expect(tableText).to.be(PAGE_CONTENT_2);
-
-      // click page 3
-      await testSubjects.click('pagination-button-2');
-
-      // wait for first row of page 3
-      await testSubjects.find('checkboxSelectRow-k9a9p1840gpe1457b1ghfxw5');
-
-      // scan page 3
-      tableText = await getTableTextFromElement(await testSubjects.find('reportJobListing'));
-      const PAGE_CONTENT_3 = `report1csv\n2020-04-21 @ 06:54 PM\ntest_user\nCompleted at 2020-04-21 @ 06:54 PM - Max size reached`;
-      expect(tableText).to.be(PAGE_CONTENT_3);
     });
   });
 };

From a4fa73054aaa01d7d1417bb5f3076fc8cb870441 Mon Sep 17 00:00:00 2001
From: Lukas Olson <olson.lukas@gmail.com>
Date: Fri, 21 Aug 2020 13:53:41 -0700
Subject: [PATCH 18/25] [Search] Change logging level to debug (#74971)

* [Search] Change logging level to debug

* Fix tests
---
 .../data/server/search/es_search/es_search_strategy.test.ts   | 2 +-
 .../data/server/search/es_search/es_search_strategy.ts        | 2 +-
 src/plugins/data/server/search/search_service.test.ts         | 2 +-
 src/plugins/data/server/search/search_service.ts              | 4 ++--
 .../data_enhanced/server/search/es_search_strategy.test.ts    | 2 +-
 .../plugins/data_enhanced/server/search/es_search_strategy.ts | 4 ++--
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/plugins/data/server/search/es_search/es_search_strategy.test.ts b/src/plugins/data/server/search/es_search/es_search_strategy.test.ts
index 11564bb336b08..c34c3a310814c 100644
--- a/src/plugins/data/server/search/es_search/es_search_strategy.test.ts
+++ b/src/plugins/data/server/search/es_search/es_search_strategy.test.ts
@@ -23,7 +23,7 @@ import { esSearchStrategyProvider } from './es_search_strategy';
 
 describe('ES search strategy', () => {
   const mockLogger: any = {
-    info: () => {},
+    debug: () => {},
   };
   const mockApiCaller = jest.fn().mockResolvedValue({
     body: {
diff --git a/src/plugins/data/server/search/es_search/es_search_strategy.ts b/src/plugins/data/server/search/es_search/es_search_strategy.ts
index 7f9cb665b96b5..eabbf3e3e2600 100644
--- a/src/plugins/data/server/search/es_search/es_search_strategy.ts
+++ b/src/plugins/data/server/search/es_search/es_search_strategy.ts
@@ -31,7 +31,7 @@ export const esSearchStrategyProvider = (
 ): ISearchStrategy => {
   return {
     search: async (context, request, options) => {
-      logger.info(`search ${request.params?.index}`);
+      logger.debug(`search ${request.params?.index}`);
       const config = await config$.pipe(first()).toPromise();
       const defaultParams = getDefaultSearchParams(config);
 
diff --git a/src/plugins/data/server/search/search_service.test.ts b/src/plugins/data/server/search/search_service.test.ts
index 030f37d0f7c46..7057c9c7ca15c 100644
--- a/src/plugins/data/server/search/search_service.test.ts
+++ b/src/plugins/data/server/search/search_service.test.ts
@@ -32,7 +32,7 @@ describe('Search service', () => {
 
   beforeEach(() => {
     const mockLogger: any = {
-      info: () => {},
+      debug: () => {},
     };
     plugin = new SearchService(coreMock.createPluginInitializerContext({}), mockLogger);
     mockCoreSetup = coreMock.createSetup();
diff --git a/src/plugins/data/server/search/search_service.ts b/src/plugins/data/server/search/search_service.ts
index a8b1cdd608a84..5643406932552 100644
--- a/src/plugins/data/server/search/search_service.ts
+++ b/src/plugins/data/server/search/search_service.ts
@@ -126,12 +126,12 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
   }
 
   private registerSearchStrategy = (name: string, strategy: ISearchStrategy) => {
-    this.logger.info(`Register strategy ${name}`);
+    this.logger.debug(`Register strategy ${name}`);
     this.searchStrategies[name] = strategy;
   };
 
   private getSearchStrategy = (name: string): ISearchStrategy => {
-    this.logger.info(`Get strategy ${name}`);
+    this.logger.debug(`Get strategy ${name}`);
     const strategy = this.searchStrategies[name];
     if (!strategy) {
       throw new Error(`Search strategy ${name} not found`);
diff --git a/x-pack/plugins/data_enhanced/server/search/es_search_strategy.test.ts b/x-pack/plugins/data_enhanced/server/search/es_search_strategy.test.ts
index 5cff7fea601d3..054baa6ac81d1 100644
--- a/x-pack/plugins/data_enhanced/server/search/es_search_strategy.test.ts
+++ b/x-pack/plugins/data_enhanced/server/search/es_search_strategy.test.ts
@@ -36,7 +36,7 @@ const mockRollupResponse = {
 describe('ES search strategy', () => {
   const mockApiCaller = jest.fn();
   const mockLogger: any = {
-    info: () => {},
+    debug: () => {},
   };
   const mockContext = {
     core: {
diff --git a/x-pack/plugins/data_enhanced/server/search/es_search_strategy.ts b/x-pack/plugins/data_enhanced/server/search/es_search_strategy.ts
index f6425a63cef67..46609af52d072 100644
--- a/x-pack/plugins/data_enhanced/server/search/es_search_strategy.ts
+++ b/x-pack/plugins/data_enhanced/server/search/es_search_strategy.ts
@@ -39,7 +39,7 @@ export const enhancedEsSearchStrategyProvider = (
     request: IEnhancedEsSearchRequest,
     options?: ISearchOptions
   ) => {
-    logger.info(`search ${JSON.stringify(request.params) || request.id}`);
+    logger.debug(`search ${JSON.stringify(request.params) || request.id}`);
     const config = await config$.pipe(first()).toPromise();
     const client = context.core.elasticsearch.client.asCurrentUser;
     const defaultParams = getDefaultSearchParams(config);
@@ -70,7 +70,7 @@ export const enhancedEsSearchStrategyProvider = (
   };
 
   const cancel = async (context: RequestHandlerContext, id: string) => {
-    logger.info(`cancel ${id}`);
+    logger.debug(`cancel ${id}`);
     await context.core.elasticsearch.client.asCurrentUser.transport.request({
       method: 'DELETE',
       path: encodeURI(`/_async_search/${id}`),

From 3df47dc66b6cedb8a76c770d0c78a825506c87e8 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Fri, 21 Aug 2020 15:40:07 -0600
Subject: [PATCH 19/25]  [Maps] convert style classes to TS (#75374)

* [Maps] convert style classes to TS

* convert VectorStyle to TS

* clean up

* revert change to fix unit test

* review feedback

* review feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../layer_descriptor_types.ts                 |  33 --
 .../style_property_descriptor_types.ts        |  41 +-
 .../public/actions/data_request_actions.ts    |   9 +-
 .../maps/public/actions/layer_actions.ts      |  10 +-
 .../maps/public/classes/joins/inner_join.d.ts |   2 +
 .../plugins/maps/public/classes/joins/join.ts |   2 +
 .../blended_vector_layer.ts                   |   1 +
 .../layers/vector_layer/vector_layer.js       |   6 +-
 .../sources/es_agg_source/es_agg_source.d.ts  |   2 +
 .../sources/vector_source/vector_source.d.ts  |   1 +
 ...end_row.js => ranged_style_legend_row.tsx} |  27 +-
 .../{heatmap_legend.js => heatmap_legend.tsx} |  21 +-
 .../{heatmap_style.js => heatmap_style.tsx}   |  55 ++-
 .../maps/public/classes/styles/style.ts       |  45 +--
 .../public/classes/styles/tile/tile_style.ts  |  19 +-
 .../components/legend/ordinal_legend.tsx      |   1 -
 .../components/legend/vector_style_legend.tsx |   4 +-
 .../vector/properties/__tests__/test_util.ts  |  13 +-
 ...rty.js => dynamic_orientation_property.ts} |   6 +-
 .../classes/styles/vector/style_meta.ts       |   8 +-
 .../classes/styles/vector/vector_style.d.ts   |  34 --
 .../{vector_style.js => vector_style.tsx}     | 356 +++++++++++++-----
 .../toc_entry_actions_popover.test.tsx        |  14 +-
 .../translations/translations/ja-JP.json      |   1 -
 .../translations/translations/zh-CN.json      |   1 -
 25 files changed, 433 insertions(+), 279 deletions(-)
 rename x-pack/plugins/maps/public/classes/styles/components/{ranged_style_legend_row.js => ranged_style_legend_row.tsx} (71%)
 rename x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/{heatmap_legend.js => heatmap_legend.tsx} (80%)
 rename x-pack/plugins/maps/public/classes/styles/heatmap/{heatmap_style.js => heatmap_style.tsx} (68%)
 rename x-pack/plugins/maps/public/classes/styles/vector/properties/{dynamic_orientation_property.js => dynamic_orientation_property.ts} (82%)
 delete mode 100644 x-pack/plugins/maps/public/classes/styles/vector/vector_style.d.ts
 rename x-pack/plugins/maps/public/classes/styles/vector/{vector_style.js => vector_style.tsx} (65%)

diff --git a/x-pack/plugins/maps/common/descriptor_types/layer_descriptor_types.ts b/x-pack/plugins/maps/common/descriptor_types/layer_descriptor_types.ts
index a04d0e1a978fd..b67f05cb169fd 100644
--- a/x-pack/plugins/maps/common/descriptor_types/layer_descriptor_types.ts
+++ b/x-pack/plugins/maps/common/descriptor_types/layer_descriptor_types.ts
@@ -38,36 +38,3 @@ export type LayerDescriptor = {
 export type VectorLayerDescriptor = LayerDescriptor & {
   style: VectorStyleDescriptor;
 };
-
-export type RangeFieldMeta = {
-  min: number;
-  max: number;
-  delta: number;
-  isMinOutsideStdRange?: boolean;
-  isMaxOutsideStdRange?: boolean;
-};
-
-export type Category = {
-  key: string;
-  count: number;
-};
-
-export type CategoryFieldMeta = {
-  categories: Category[];
-};
-
-export type GeometryTypes = {
-  isPointsOnly: boolean;
-  isLinesOnly: boolean;
-  isPolygonsOnly: boolean;
-};
-
-export type StyleMetaDescriptor = {
-  geometryTypes?: GeometryTypes;
-  fieldMeta: {
-    [key: string]: {
-      range: RangeFieldMeta;
-      categories: CategoryFieldMeta;
-    };
-  };
-};
diff --git a/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts b/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
index ce6539c9c4520..5aba9b06a6ccf 100644
--- a/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
+++ b/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
@@ -12,7 +12,6 @@ import {
   SYMBOLIZE_AS_TYPES,
   VECTOR_STYLES,
   STYLE_TYPE,
-  LAYER_STYLE_TYPE,
 } from '../constants';
 
 // Non-static/dynamic options
@@ -193,9 +192,47 @@ export type StyleDescriptor = {
   type: string;
 };
 
+export type RangeFieldMeta = {
+  min: number;
+  max: number;
+  delta: number;
+  isMinOutsideStdRange?: boolean;
+  isMaxOutsideStdRange?: boolean;
+};
+
+export type Category = {
+  key: string;
+  count: number;
+};
+
+export type CategoryFieldMeta = {
+  categories: Category[];
+};
+
+export type GeometryTypes = {
+  isPointsOnly: boolean;
+  isLinesOnly: boolean;
+  isPolygonsOnly: boolean;
+};
+
+export type StyleMetaDescriptor = {
+  geometryTypes?: GeometryTypes;
+  fieldMeta: {
+    [key: string]: {
+      range?: RangeFieldMeta;
+      categories?: CategoryFieldMeta;
+    };
+  };
+};
+
 export type VectorStyleDescriptor = StyleDescriptor & {
-  type: LAYER_STYLE_TYPE.VECTOR;
   properties: VectorStylePropertiesDescriptor;
+  isTimeAware: boolean;
+  __styleMeta?: StyleMetaDescriptor;
+};
+
+export type HeatmapStyleDescriptor = StyleDescriptor & {
+  colorRampName: string;
 };
 
 export type StylePropertyOptions =
diff --git a/x-pack/plugins/maps/public/actions/data_request_actions.ts b/x-pack/plugins/maps/public/actions/data_request_actions.ts
index 6f5ed680ac64f..41d9f3fc13b5b 100644
--- a/x-pack/plugins/maps/public/actions/data_request_actions.ts
+++ b/x-pack/plugins/maps/public/actions/data_request_actions.ts
@@ -11,7 +11,7 @@ import uuid from 'uuid/v4';
 import { multiPoint } from '@turf/helpers';
 import { FeatureCollection } from 'geojson';
 import { MapStoreState } from '../reducers/store';
-import { LAYER_TYPE, SOURCE_DATA_REQUEST_ID } from '../../common/constants';
+import { LAYER_STYLE_TYPE, LAYER_TYPE, SOURCE_DATA_REQUEST_ID } from '../../common/constants';
 import {
   getDataFilters,
   getDataRequestDescriptor,
@@ -42,6 +42,7 @@ import { IVectorLayer } from '../classes/layers/vector_layer/vector_layer';
 import { DataMeta, MapExtent, MapFilters } from '../../common/descriptor_types';
 import { DataRequestAbortError } from '../classes/util/data_request';
 import { scaleBounds, turfBboxToBounds } from '../../common/elasticsearch_geo_utils';
+import { IVectorStyle } from '../classes/styles/vector/vector_style';
 
 const FIT_TO_BOUNDS_SCALE_FACTOR = 0.1;
 
@@ -85,10 +86,12 @@ export function updateStyleMeta(layerId: string | null) {
     }
     const sourceDataRequest = layer.getSourceDataRequest();
     const style = layer.getCurrentStyle();
-    if (!style || !sourceDataRequest) {
+    if (!style || !sourceDataRequest || style.getType() !== LAYER_STYLE_TYPE.VECTOR) {
       return;
     }
-    const styleMeta = await style.pluckStyleMetaFromSourceDataRequest(sourceDataRequest);
+    const styleMeta = await (style as IVectorStyle).pluckStyleMetaFromSourceDataRequest(
+      sourceDataRequest
+    );
     dispatch({
       type: SET_LAYER_STYLE_META,
       layerId,
diff --git a/x-pack/plugins/maps/public/actions/layer_actions.ts b/x-pack/plugins/maps/public/actions/layer_actions.ts
index 472e42129816b..675bb14722889 100644
--- a/x-pack/plugins/maps/public/actions/layer_actions.ts
+++ b/x-pack/plugins/maps/public/actions/layer_actions.ts
@@ -40,7 +40,8 @@ import { cleanTooltipStateForLayer } from './tooltip_actions';
 import { JoinDescriptor, LayerDescriptor, StyleDescriptor } from '../../common/descriptor_types';
 import { ILayer } from '../classes/layers/layer';
 import { IVectorLayer } from '../classes/layers/vector_layer/vector_layer';
-import { LAYER_TYPE } from '../../common/constants';
+import { LAYER_STYLE_TYPE, LAYER_TYPE } from '../../common/constants';
+import { IVectorStyle } from '../classes/styles/vector/vector_style';
 
 export function trackCurrentLayerState(layerId: string) {
   return {
@@ -381,12 +382,15 @@ export function clearMissingStyleProperties(layerId: string) {
     }
 
     const style = targetLayer!.getCurrentStyle();
-    if (!style) {
+    if (!style || style.getType() !== LAYER_STYLE_TYPE.VECTOR) {
       return;
     }
 
     const nextFields = await (targetLayer as IVectorLayer).getFields(); // take into account all fields, since labels can be driven by any field (source or join)
-    const { hasChanges, nextStyleDescriptor } = style.getDescriptorWithMissingStylePropsRemoved(
+    const {
+      hasChanges,
+      nextStyleDescriptor,
+    } = (style as IVectorStyle).getDescriptorWithMissingStylePropsRemoved(
       nextFields,
       getMapColors(getState())
     );
diff --git a/x-pack/plugins/maps/public/classes/joins/inner_join.d.ts b/x-pack/plugins/maps/public/classes/joins/inner_join.d.ts
index 452a3fdc3a19f..befff0965fb70 100644
--- a/x-pack/plugins/maps/public/classes/joins/inner_join.d.ts
+++ b/x-pack/plugins/maps/public/classes/joins/inner_join.d.ts
@@ -17,4 +17,6 @@ export class InnerJoin implements IJoin {
   toDescriptor(): JoinDescriptor;
 
   getSourceMetaDataRequestId(): string;
+
+  getSourceFormattersDataRequestId(): string;
 }
diff --git a/x-pack/plugins/maps/public/classes/joins/join.ts b/x-pack/plugins/maps/public/classes/joins/join.ts
index 4a551c5bcc485..5bcc4bfdec87e 100644
--- a/x-pack/plugins/maps/public/classes/joins/join.ts
+++ b/x-pack/plugins/maps/public/classes/joins/join.ts
@@ -13,4 +13,6 @@ export interface IJoin {
   toDescriptor(): JoinDescriptor;
 
   getSourceMetaDataRequestId(): string;
+
+  getSourceFormattersDataRequestId(): string;
 }
diff --git a/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts b/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts
index 950d9890a3c65..90e8d25a77958 100644
--- a/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts
+++ b/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts
@@ -102,6 +102,7 @@ function getClusterStyleDescriptor(
         },
       },
     },
+    isTimeAware: true,
   };
   documentStyle
     .getAllStyleProperties()
diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
index f5f5071bab158..2ba7f750e9b40 100644
--- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
+++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.js
@@ -309,7 +309,7 @@ export class VectorLayer extends AbstractLayer {
   _getSearchFilters(dataFilters, source, style) {
     const fieldNames = [
       ...source.getFieldNames(),
-      ...style.getSourceFieldNames(),
+      ...(style.getType() === LAYER_STYLE_TYPE.VECTOR ? style.getSourceFieldNames() : []),
       ...this.getValidJoins().map((join) => join.getLeftField().getName()),
     ];
 
@@ -415,7 +415,7 @@ export class VectorLayer extends AbstractLayer {
   }
 
   async _syncSourceStyleMeta(syncContext, source, style) {
-    if (this.getCurrentStyle().constructor.type !== LAYER_STYLE_TYPE.VECTOR) {
+    if (this.getCurrentStyle().getType() !== LAYER_STYLE_TYPE.VECTOR) {
       return;
     }
 
@@ -511,7 +511,7 @@ export class VectorLayer extends AbstractLayer {
   }
 
   async _syncSourceFormatters(syncContext, source, style) {
-    if (style.constructor.type !== LAYER_STYLE_TYPE.VECTOR) {
+    if (style.getType() !== LAYER_STYLE_TYPE.VECTOR) {
       return;
     }
 
diff --git a/x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.d.ts b/x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.d.ts
index 91ed0ab52b08e..eb50cd7528c8b 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.d.ts
+++ b/x-pack/plugins/maps/public/classes/sources/es_agg_source/es_agg_source.d.ts
@@ -15,6 +15,7 @@ export interface IESAggSource extends IESSource {
   getAggLabel(aggType: AGG_TYPE, fieldName: string): string;
   getMetricFields(): IESAggField[];
   hasMatchingMetricField(fieldName: string): boolean;
+  getMetricFieldForName(fieldName: string): IESAggField | null;
 }
 
 export class AbstractESAggSource extends AbstractESSource implements IESAggSource {
@@ -24,4 +25,5 @@ export class AbstractESAggSource extends AbstractESSource implements IESAggSourc
   getAggLabel(aggType: AGG_TYPE, fieldName: string): string;
   getMetricFields(): IESAggField[];
   hasMatchingMetricField(fieldName: string): boolean;
+  getMetricFieldForName(fieldName: string): IESAggField | null;
 }
diff --git a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
index 62fc5a283e5f3..271505010f36a 100644
--- a/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
+++ b/x-pack/plugins/maps/public/classes/sources/vector_source/vector_source.d.ts
@@ -53,6 +53,7 @@ export interface IVectorSource extends ISource {
   getApplyGlobalQuery(): boolean;
   createField({ fieldName }: { fieldName: string }): IField;
   canFormatFeatureProperties(): boolean;
+  getSupportedShapeTypes(): Promise<VECTOR_SHAPE_TYPE[]>;
 }
 
 export class AbstractVectorSource extends AbstractSource implements IVectorSource {
diff --git a/x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.js b/x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.tsx
similarity index 71%
rename from x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.js
rename to x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.tsx
index 4a43cc24e2c07..24812cb35b070 100644
--- a/x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.js
+++ b/x-pack/plugins/maps/public/classes/styles/components/ranged_style_legend_row.tsx
@@ -4,12 +4,25 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactElement } from 'react';
 
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
 
-export function RangedStyleLegendRow({ header, minLabel, maxLabel, propertyLabel, fieldLabel }) {
+interface Props {
+  header: ReactElement<any>;
+  minLabel: string | number;
+  maxLabel: string | number;
+  propertyLabel: string;
+  fieldLabel: string;
+}
+
+export function RangedStyleLegendRow({
+  header,
+  minLabel,
+  maxLabel,
+  propertyLabel,
+  fieldLabel,
+}: Props) {
   return (
     <div>
       <EuiFlexGroup gutterSize="xs" justifyContent="spaceBetween">
@@ -39,11 +52,3 @@ export function RangedStyleLegendRow({ header, minLabel, maxLabel, propertyLabel
     </div>
   );
 }
-
-RangedStyleLegendRow.propTypes = {
-  header: PropTypes.node.isRequired,
-  minLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  maxLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  propertyLabel: PropTypes.string.isRequired,
-  fieldLabel: PropTypes.string.isRequired,
-};
diff --git a/x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.js b/x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.tsx
similarity index 80%
rename from x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.js
rename to x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.tsx
index 5c3600a149afe..7024adc891b50 100644
--- a/x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.js
+++ b/x-pack/plugins/maps/public/classes/styles/heatmap/components/legend/heatmap_legend.tsx
@@ -4,18 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { Component } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { ColorGradient } from './color_gradient';
 import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row';
 import { HEATMAP_COLOR_RAMP_LABEL } from '../heatmap_constants';
+import { IField } from '../../../../fields/field';
 
-export class HeatmapLegend extends React.Component {
-  constructor() {
-    super();
-    this.state = { label: '' };
-  }
+interface Props {
+  colorRampName: string;
+  field: IField;
+}
+
+interface State {
+  label: string;
+}
+
+export class HeatmapLegend extends Component<Props, State> {
+  private _isMounted: boolean = false;
+
+  state: State = { label: '' };
 
   componentDidUpdate() {
     this._loadLabel();
diff --git a/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.js b/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx
similarity index 68%
rename from x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.js
rename to x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx
index 55bbbc9319dfb..a300225178526 100644
--- a/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.js
+++ b/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx
@@ -5,43 +5,48 @@
  */
 
 import React from 'react';
-import { AbstractStyle } from '../style';
+import { Map as MbMap } from 'mapbox-gl';
+import { i18n } from '@kbn/i18n';
+import { EuiIcon } from '@elastic/eui';
+import { IStyle } from '../style';
 import { HeatmapStyleEditor } from './components/heatmap_style_editor';
 import { HeatmapLegend } from './components/legend/heatmap_legend';
 import { DEFAULT_HEATMAP_COLOR_RAMP_NAME, getOrdinalMbColorRampStops } from '../color_palettes';
 import { LAYER_STYLE_TYPE, GRID_RESOLUTION } from '../../../../common/constants';
+import { HeatmapStyleDescriptor, StyleDescriptor } from '../../../../common/descriptor_types';
+import { IField } from '../../fields/field';
 
-import { i18n } from '@kbn/i18n';
-import { EuiIcon } from '@elastic/eui';
-
-//The heatmap range chosen hear runs from 0 to 1. It is arbitrary.
-//Weighting is on the raw count/sum values.
+// The heatmap range chosen hear runs from 0 to 1. It is arbitrary.
+// Weighting is on the raw count/sum values.
 const MIN_RANGE = 0.1; // 0 to 0.1 is displayed as transparent color stop
 const MAX_RANGE = 1;
 
-export class HeatmapStyle extends AbstractStyle {
-  static type = LAYER_STYLE_TYPE.HEATMAP;
+export class HeatmapStyle implements IStyle {
+  readonly _descriptor: HeatmapStyleDescriptor;
 
-  constructor(descriptor = {}) {
-    super();
+  constructor(
+    descriptor: { colorRampName: string } = { colorRampName: DEFAULT_HEATMAP_COLOR_RAMP_NAME }
+  ) {
     this._descriptor = HeatmapStyle.createDescriptor(descriptor.colorRampName);
   }
 
-  static createDescriptor(colorRampName) {
+  static createDescriptor(colorRampName: string) {
     return {
-      type: HeatmapStyle.type,
+      type: LAYER_STYLE_TYPE.HEATMAP,
       colorRampName: colorRampName ? colorRampName : DEFAULT_HEATMAP_COLOR_RAMP_NAME,
     };
   }
 
-  static getDisplayName() {
-    return i18n.translate('xpack.maps.style.heatmap.displayNameLabel', {
-      defaultMessage: 'Heatmap style',
-    });
+  getType() {
+    return LAYER_STYLE_TYPE.HEATMAP;
   }
 
-  renderEditor({ onStyleDescriptorChange }) {
-    const onHeatmapColorChange = ({ colorRampName }) => {
+  renderEditor({
+    onStyleDescriptorChange,
+  }: {
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
+  }) {
+    const onHeatmapColorChange = ({ colorRampName }: { colorRampName: string }) => {
       const styleDescriptor = HeatmapStyle.createDescriptor(colorRampName);
       onStyleDescriptorChange(styleDescriptor);
     };
@@ -54,7 +59,7 @@ export class HeatmapStyle extends AbstractStyle {
     );
   }
 
-  renderLegendDetails(field) {
+  renderLegendDetails(field: IField) {
     return <HeatmapLegend colorRampName={this._descriptor.colorRampName} field={field} />;
   }
 
@@ -62,7 +67,17 @@ export class HeatmapStyle extends AbstractStyle {
     return <EuiIcon size="m" type="heatmap" />;
   }
 
-  setMBPaintProperties({ mbMap, layerId, propertyName, resolution }) {
+  setMBPaintProperties({
+    mbMap,
+    layerId,
+    propertyName,
+    resolution,
+  }: {
+    mbMap: MbMap;
+    layerId: string;
+    propertyName: string;
+    resolution: GRID_RESOLUTION;
+  }) {
     let radius;
     if (resolution === GRID_RESOLUTION.COARSE) {
       radius = 128;
diff --git a/x-pack/plugins/maps/public/classes/styles/style.ts b/x-pack/plugins/maps/public/classes/styles/style.ts
index 1859c7875ad11..abaa6184b0ca4 100644
--- a/x-pack/plugins/maps/public/classes/styles/style.ts
+++ b/x-pack/plugins/maps/public/classes/styles/style.ts
@@ -5,18 +5,11 @@
  */
 
 import { ReactElement } from 'react';
-import { StyleDescriptor, StyleMetaDescriptor } from '../../../common/descriptor_types';
+import { StyleDescriptor } from '../../../common/descriptor_types';
 import { ILayer } from '../layers/layer';
-import { IField } from '../fields/field';
-import { DataRequest } from '../util/data_request';
 
 export interface IStyle {
-  getDescriptor(): StyleDescriptor | null;
-  getDescriptorWithMissingStylePropsRemoved(
-    nextFields: IField[],
-    mapColors: string[]
-  ): { hasChanges: boolean; nextStyleDescriptor?: StyleDescriptor };
-  pluckStyleMetaFromSourceDataRequest(sourceDataRequest: DataRequest): StyleMetaDescriptor;
+  getType(): string;
   renderEditor({
     layer,
     onStyleDescriptorChange,
@@ -24,38 +17,4 @@ export interface IStyle {
     layer: ILayer;
     onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
   }): ReactElement<any> | null;
-  getSourceFieldNames(): string[];
-}
-
-export class AbstractStyle implements IStyle {
-  readonly _descriptor: StyleDescriptor | null;
-
-  constructor(descriptor: StyleDescriptor | null) {
-    this._descriptor = descriptor;
-  }
-
-  getDescriptorWithMissingStylePropsRemoved(
-    nextFields: IField[],
-    mapColors: string[]
-  ): { hasChanges: boolean; nextStyleDescriptor?: StyleDescriptor } {
-    return {
-      hasChanges: false,
-    };
-  }
-
-  pluckStyleMetaFromSourceDataRequest(sourceDataRequest: DataRequest): StyleMetaDescriptor {
-    return { fieldMeta: {} };
-  }
-
-  getDescriptor(): StyleDescriptor | null {
-    return this._descriptor;
-  }
-
-  renderEditor(/* { layer, onStyleDescriptorChange } */) {
-    return null;
-  }
-
-  getSourceFieldNames(): string[] {
-    return [];
-  }
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts b/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts
index f658d0821edf2..cac3913d3149d 100644
--- a/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts
+++ b/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts
@@ -4,13 +4,24 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { AbstractStyle } from '../style';
+import { IStyle } from '../style';
+import { StyleDescriptor } from '../../../../common/descriptor_types';
 import { LAYER_STYLE_TYPE } from '../../../../common/constants';
 
-export class TileStyle extends AbstractStyle {
+export class TileStyle implements IStyle {
+  readonly _descriptor: StyleDescriptor;
+
   constructor() {
-    super({
+    this._descriptor = {
       type: LAYER_STYLE_TYPE.TILE,
-    });
+    };
+  }
+
+  getType() {
+    return LAYER_STYLE_TYPE.TILE;
+  }
+
+  renderEditor(/* { layer, onStyleDescriptorChange } */) {
+    return null;
   }
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.tsx
index a99548b6af7bf..1851c14f7b952 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/ordinal_legend.tsx
@@ -7,7 +7,6 @@
 import React, { Component, Fragment } from 'react';
 import _ from 'lodash';
 import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule } from '@elastic/eui';
-// @ts-expect-error
 import { RangedStyleLegendRow } from '../../../components/ranged_style_legend_row';
 import { VECTOR_STYLES } from '../../../../../../common/constants';
 import { CircleIcon } from './circle_icon';
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
index 4d50c632bfd6d..fcf7a735d743a 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
@@ -11,7 +11,7 @@ interface Props {
   isLinesOnly: boolean;
   isPointsOnly: boolean;
   styles: Array<IStyleProperty<any>>;
-  symbolId: string;
+  symbolId?: string;
 }
 
 export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId }: Props) {
@@ -31,5 +31,5 @@ export function VectorStyleLegend({ isLinesOnly, isPointsOnly, styles, symbolId
     );
   }
 
-  return legendRows;
+  return <>{legendRows}</>;
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts b/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts
index a8fba834d65ab..3f6edc81e30ef 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/__tests__/test_util.ts
@@ -14,7 +14,7 @@ import {
   StyleMetaDescriptor,
 } from '../../../../../../common/descriptor_types';
 import { AbstractField, IField } from '../../../../fields/field';
-import { IStyle, AbstractStyle } from '../../../style';
+import { IStyle } from '../../../style';
 
 class MockField extends AbstractField {
   async getLabel(): Promise<string> {
@@ -30,16 +30,23 @@ export const mockField: IField = new MockField({
   origin: FIELD_ORIGIN.SOURCE,
 });
 
-export class MockStyle extends AbstractStyle implements IStyle {
+export class MockStyle implements IStyle {
   private readonly _min: number;
   private readonly _max: number;
 
   constructor({ min = 0, max = 100 } = {}) {
-    super(null);
     this._min = min;
     this._max = max;
   }
 
+  renderEditor() {
+    return null;
+  }
+
+  getType() {
+    return 'mockStyle';
+  }
+
   getStyleMeta(): StyleMeta {
     const geomTypes: GeometryTypes = {
       isPointsOnly: false,
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.ts
similarity index 82%
rename from x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js
rename to x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.ts
index 763eb81ad0f98..dd976027a50f2 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/properties/dynamic_orientation_property.ts
@@ -4,12 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Map as MbMap } from 'mapbox-gl';
 import { DynamicStyleProperty } from './dynamic_style_property';
 import { getComputedFieldName } from '../style_util';
 import { VECTOR_STYLES } from '../../../../../common/constants';
+import { OrientationDynamicOptions } from '../../../../../common/descriptor_types';
 
-export class DynamicOrientationProperty extends DynamicStyleProperty {
-  syncIconRotationWithMb(symbolLayerId, mbMap) {
+export class DynamicOrientationProperty extends DynamicStyleProperty<OrientationDynamicOptions> {
+  syncIconRotationWithMb(symbolLayerId: string, mbMap: MbMap) {
     if (this._field && this._field.isValid()) {
       const targetName = this._field.supportsAutoDomain()
         ? getComputedFieldName(VECTOR_STYLES.ICON_ORIENTATION, this.getFieldName())
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/style_meta.ts b/x-pack/plugins/maps/public/classes/styles/vector/style_meta.ts
index 646b88d005af7..590a859c67558 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/style_meta.ts
+++ b/x-pack/plugins/maps/public/classes/styles/vector/style_meta.ts
@@ -17,14 +17,14 @@ export class StyleMeta {
   }
 
   getRangeFieldMetaDescriptor(fieldName: string): RangeFieldMeta | null {
-    return this._descriptor && this._descriptor.fieldMeta[fieldName]
-      ? this._descriptor.fieldMeta[fieldName].range
+    return this._descriptor.fieldMeta[fieldName] && this._descriptor.fieldMeta[fieldName].range
+      ? this._descriptor.fieldMeta[fieldName].range!
       : null;
   }
 
   getCategoryFieldMetaDescriptor(fieldName: string): CategoryFieldMeta | null {
-    return this._descriptor && this._descriptor.fieldMeta[fieldName]
-      ? this._descriptor.fieldMeta[fieldName].categories
+    return this._descriptor.fieldMeta[fieldName] && this._descriptor.fieldMeta[fieldName].categories
+      ? this._descriptor.fieldMeta[fieldName].categories!
       : null;
   }
 
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.d.ts b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.d.ts
deleted file mode 100644
index d48d075288a28..0000000000000
--- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.d.ts
+++ /dev/null
@@ -1,34 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-import { IStyleProperty } from './properties/style_property';
-import { IDynamicStyleProperty } from './properties/dynamic_style_property';
-import { IVectorLayer } from '../../layers/vector_layer/vector_layer';
-import { IVectorSource } from '../../sources/vector_source';
-import { AbstractStyle, IStyle } from '../style';
-import {
-  DynamicStylePropertyOptions,
-  StylePropertyOptions,
-  VectorStyleDescriptor,
-  VectorStylePropertiesDescriptor,
-} from '../../../../common/descriptor_types';
-import { StyleMeta } from './style_meta';
-
-export interface IVectorStyle extends IStyle {
-  getAllStyleProperties(): Array<IStyleProperty<StylePropertyOptions>>;
-  getDynamicPropertiesArray(): Array<IDynamicStyleProperty<DynamicStylePropertyOptions>>;
-  getSourceFieldNames(): string[];
-  getStyleMeta(): StyleMeta;
-}
-
-export class VectorStyle extends AbstractStyle implements IVectorStyle {
-  static createDescriptor(properties: VectorStylePropertiesDescriptor): VectorStyleDescriptor;
-  static createDefaultStyleProperties(mapColors: string[]): VectorStylePropertiesDescriptor;
-  constructor(descriptor: VectorStyleDescriptor, source: IVectorSource, layer: IVectorLayer);
-  getSourceFieldNames(): string[];
-  getAllStyleProperties(): Array<IStyleProperty<StylePropertyOptions>>;
-  getDynamicPropertiesArray(): Array<IDynamicStyleProperty<DynamicStylePropertyOptions>>;
-  getStyleMeta(): StyleMeta;
-}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
similarity index 65%
rename from x-pack/plugins/maps/public/classes/styles/vector/vector_style.js
rename to x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
index 907e16a6a8427..956522524a2eb 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/vector_style.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/vector_style.tsx
@@ -6,6 +6,9 @@
 
 import _ from 'lodash';
 import React from 'react';
+import { Map as MbMap, FeatureIdentifier } from 'mapbox-gl';
+import { FeatureCollection } from 'geojson';
+// @ts-expect-error
 import { VectorStyleEditor } from './components/vector_style_editor';
 import {
   getDefaultProperties,
@@ -13,7 +16,6 @@ import {
   LINE_STYLES,
   POLYGON_STYLES,
 } from './vector_style_defaults';
-import { AbstractStyle } from '../style';
 import {
   GEO_JSON_TYPE,
   FIELD_ORIGIN,
@@ -43,45 +45,109 @@ import { extractColorFromStyleProperty } from './components/legend/extract_color
 import { SymbolizeAsProperty } from './properties/symbolize_as_property';
 import { StaticIconProperty } from './properties/static_icon_property';
 import { DynamicIconProperty } from './properties/dynamic_icon_property';
+import {
+  ColorDynamicOptions,
+  ColorStaticOptions,
+  ColorStylePropertyDescriptor,
+  DynamicStylePropertyOptions,
+  IconDynamicOptions,
+  IconStaticOptions,
+  IconStylePropertyDescriptor,
+  LabelDynamicOptions,
+  LabelStaticOptions,
+  LabelStylePropertyDescriptor,
+  OrientationDynamicOptions,
+  OrientationStaticOptions,
+  OrientationStylePropertyDescriptor,
+  SizeDynamicOptions,
+  SizeStaticOptions,
+  SizeStylePropertyDescriptor,
+  StyleDescriptor,
+  StyleMetaDescriptor,
+  StylePropertyField,
+  StylePropertyOptions,
+  VectorStyleDescriptor,
+  VectorStylePropertiesDescriptor,
+} from '../../../../common/descriptor_types';
+import { DataRequest } from '../../util/data_request';
+import { IStyle } from '../style';
+import { IStyleProperty } from './properties/style_property';
+import { IDynamicStyleProperty } from './properties/dynamic_style_property';
+import { IField } from '../../fields/field';
+import { IVectorLayer } from '../../layers/vector_layer/vector_layer';
+import { IVectorSource } from '../../sources/vector_source';
+import { ILayer } from '../../layers/layer';
 
 const POINTS = [GEO_JSON_TYPE.POINT, GEO_JSON_TYPE.MULTI_POINT];
 const LINES = [GEO_JSON_TYPE.LINE_STRING, GEO_JSON_TYPE.MULTI_LINE_STRING];
 const POLYGONS = [GEO_JSON_TYPE.POLYGON, GEO_JSON_TYPE.MULTI_POLYGON];
 
-function getNumericalMbFeatureStateValue(value) {
+function getNumericalMbFeatureStateValue(value: string) {
   const valueAsFloat = parseFloat(value);
   return isNaN(valueAsFloat) ? null : valueAsFloat;
 }
 
-export class VectorStyle extends AbstractStyle {
-  static type = LAYER_STYLE_TYPE.VECTOR;
+export interface IVectorStyle extends IStyle {
+  getAllStyleProperties(): Array<IStyleProperty<StylePropertyOptions>>;
+  getDynamicPropertiesArray(): Array<IDynamicStyleProperty<DynamicStylePropertyOptions>>;
+  getSourceFieldNames(): string[];
+  getStyleMeta(): StyleMeta;
+  getDescriptorWithMissingStylePropsRemoved(
+    nextFields: IField[],
+    mapColors: string[]
+  ): { hasChanges: boolean; nextStyleDescriptor?: VectorStyleDescriptor };
+  pluckStyleMetaFromSourceDataRequest(sourceDataRequest: DataRequest): Promise<StyleMetaDescriptor>;
+}
+
+export class VectorStyle implements IVectorStyle {
+  private readonly _descriptor: VectorStyleDescriptor;
+  private readonly _layer: IVectorLayer;
+  private readonly _source: IVectorSource;
+  private readonly _styleMeta: StyleMeta;
+
+  private readonly _symbolizeAsStyleProperty: SymbolizeAsProperty;
+  private readonly _lineColorStyleProperty: StaticColorProperty | DynamicColorProperty;
+  private readonly _fillColorStyleProperty: StaticColorProperty | DynamicColorProperty;
+  private readonly _lineWidthStyleProperty: StaticSizeProperty | DynamicSizeProperty;
+  private readonly _iconStyleProperty: StaticIconProperty | DynamicIconProperty;
+  private readonly _iconSizeStyleProperty: StaticSizeProperty | DynamicSizeProperty;
+  private readonly _iconOrientationProperty: StaticOrientationProperty | DynamicOrientationProperty;
+  private readonly _labelStyleProperty: StaticTextProperty | DynamicTextProperty;
+  private readonly _labelSizeStyleProperty: StaticSizeProperty | DynamicSizeProperty;
+  private readonly _labelColorStyleProperty: StaticColorProperty | DynamicColorProperty;
+  private readonly _labelBorderColorStyleProperty: StaticColorProperty | DynamicColorProperty;
+  private readonly _labelBorderSizeStyleProperty: LabelBorderSizeProperty;
 
   static createDescriptor(properties = {}, isTimeAware = true) {
     return {
-      type: VectorStyle.type,
+      type: LAYER_STYLE_TYPE.VECTOR,
       properties: { ...getDefaultProperties(), ...properties },
       isTimeAware,
     };
   }
 
-  static createDefaultStyleProperties(mapColors) {
+  static createDefaultStyleProperties(mapColors: string[]) {
     return getDefaultProperties(mapColors);
   }
 
-  constructor(descriptor = {}, source, layer) {
-    super();
-    descriptor = descriptor === null ? {} : descriptor;
+  constructor(
+    descriptor: VectorStyleDescriptor | null,
+    source: IVectorSource,
+    layer: IVectorLayer
+  ) {
     this._source = source;
     this._layer = layer;
-    this._descriptor = {
-      ...descriptor,
-      ...VectorStyle.createDescriptor(descriptor.properties, descriptor.isTimeAware),
-    };
+    this._descriptor = descriptor
+      ? {
+          ...descriptor,
+          ...VectorStyle.createDescriptor(descriptor.properties, descriptor.isTimeAware),
+        }
+      : VectorStyle.createDescriptor();
 
     this._styleMeta = new StyleMeta(this._descriptor.__styleMeta);
 
     this._symbolizeAsStyleProperty = new SymbolizeAsProperty(
-      this._descriptor.properties[VECTOR_STYLES.SYMBOLIZE_AS].options,
+      this._descriptor.properties[VECTOR_STYLES.SYMBOLIZE_AS]!.options,
       VECTOR_STYLES.SYMBOLIZE_AS
     );
     this._lineColorStyleProperty = this._makeColorProperty(
@@ -94,7 +160,8 @@ export class VectorStyle extends AbstractStyle {
     );
     this._lineWidthStyleProperty = this._makeSizeProperty(
       this._descriptor.properties[VECTOR_STYLES.LINE_WIDTH],
-      VECTOR_STYLES.LINE_WIDTH
+      VECTOR_STYLES.LINE_WIDTH,
+      this._symbolizeAsStyleProperty.isSymbolizedAsIcon()
     );
     this._iconStyleProperty = this._makeIconProperty(
       this._descriptor.properties[VECTOR_STYLES.ICON]
@@ -113,7 +180,8 @@ export class VectorStyle extends AbstractStyle {
     );
     this._labelSizeStyleProperty = this._makeSizeProperty(
       this._descriptor.properties[VECTOR_STYLES.LABEL_SIZE],
-      VECTOR_STYLES.LABEL_SIZE
+      VECTOR_STYLES.LABEL_SIZE,
+      this._symbolizeAsStyleProperty.isSymbolizedAsIcon()
     );
     this._labelColorStyleProperty = this._makeColorProperty(
       this._descriptor.properties[VECTOR_STYLES.LABEL_COLOR],
@@ -124,12 +192,16 @@ export class VectorStyle extends AbstractStyle {
       VECTOR_STYLES.LABEL_BORDER_COLOR
     );
     this._labelBorderSizeStyleProperty = new LabelBorderSizeProperty(
-      this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_SIZE].options,
+      this._descriptor.properties[VECTOR_STYLES.LABEL_BORDER_SIZE]!.options,
       VECTOR_STYLES.LABEL_BORDER_SIZE,
       this._labelSizeStyleProperty
     );
   }
 
+  getType() {
+    return LAYER_STYLE_TYPE.VECTOR;
+  }
+
   getAllStyleProperties() {
     return [
       this._symbolizeAsStyleProperty,
@@ -150,18 +222,24 @@ export class VectorStyle extends AbstractStyle {
   _hasBorder() {
     return this._lineWidthStyleProperty.isDynamic()
       ? this._lineWidthStyleProperty.isComplete()
-      : this._lineWidthStyleProperty.getOptions().size !== 0;
+      : (this._lineWidthStyleProperty as StaticSizeProperty).getOptions().size !== 0;
   }
 
-  renderEditor({ layer, onStyleDescriptorChange }) {
+  renderEditor({
+    layer,
+    onStyleDescriptorChange,
+  }: {
+    layer: ILayer;
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
+  }) {
     const rawProperties = this.getRawProperties();
-    const handlePropertyChange = (propertyName, settings) => {
-      rawProperties[propertyName] = settings; //override single property, but preserve the rest
+    const handlePropertyChange = (propertyName: VECTOR_STYLES, settings: any) => {
+      rawProperties[propertyName] = settings; // override single property, but preserve the rest
       const vectorStyleDescriptor = VectorStyle.createDescriptor(rawProperties, this.isTimeAware());
       onStyleDescriptorChange(vectorStyleDescriptor);
     };
 
-    const onIsTimeAwareChange = (isTimeAware) => {
+    const onIsTimeAwareChange = (isTimeAware: boolean) => {
       const vectorStyleDescriptor = VectorStyle.createDescriptor(rawProperties, isTimeAware);
       onStyleDescriptorChange(vectorStyleDescriptor);
     };
@@ -170,8 +248,9 @@ export class VectorStyle extends AbstractStyle {
       return dynamicStyleProp.isFieldMetaEnabled();
     });
 
-    const styleProperties = {};
+    const styleProperties: VectorStylePropertiesDescriptor = {};
     this.getAllStyleProperties().forEach((styleProperty) => {
+      // @ts-expect-error
       styleProperties[styleProperty.getStyleName()] = styleProperty;
     });
 
@@ -201,26 +280,40 @@ export class VectorStyle extends AbstractStyle {
    * This method does not update its descriptor. It just returns a new descriptor that the caller
    * can then use to update store state via dispatch.
    */
-  getDescriptorWithMissingStylePropsRemoved(nextFields, mapColors) {
+  getDescriptorWithMissingStylePropsRemoved(nextFields: IField[], mapColors: string[]) {
     const originalProperties = this.getRawProperties();
-    const updatedProperties = {};
+    const updatedProperties = {} as VectorStylePropertiesDescriptor;
 
-    const dynamicProperties = Object.keys(originalProperties).filter((key) => {
-      const { type, options } = originalProperties[key] || {};
-      return type === STYLE_TYPE.DYNAMIC && options.field && options.field.name;
+    const dynamicProperties = (Object.keys(originalProperties) as VECTOR_STYLES[]).filter((key) => {
+      if (!originalProperties[key]) {
+        return false;
+      }
+      const propertyDescriptor = originalProperties[key];
+      if (
+        !propertyDescriptor ||
+        !('type' in propertyDescriptor) ||
+        propertyDescriptor.type !== STYLE_TYPE.DYNAMIC ||
+        !propertyDescriptor.options
+      ) {
+        return false;
+      }
+      const dynamicOptions = propertyDescriptor.options as DynamicStylePropertyOptions;
+      return dynamicOptions.field && dynamicOptions.field.name;
     });
 
-    dynamicProperties.forEach((key) => {
+    dynamicProperties.forEach((key: VECTOR_STYLES) => {
       // Convert dynamic styling to static stying when there are no nextFields
       if (nextFields.length === 0) {
         const staticProperties = getDefaultStaticProperties(mapColors);
-        updatedProperties[key] = staticProperties[key];
+        updatedProperties[key] = staticProperties[key] as any;
         return;
       }
 
       const dynamicProperty = originalProperties[key];
-      const fieldName =
-        dynamicProperty && dynamicProperty.options.field && dynamicProperty.options.field.name;
+      if (!dynamicProperty || !dynamicProperty.options) {
+        return;
+      }
+      const fieldName = (dynamicProperty.options as DynamicStylePropertyOptions).field!.name;
       if (!fieldName) {
         return;
       }
@@ -236,9 +329,10 @@ export class VectorStyle extends AbstractStyle {
       updatedProperties[key] = {
         type: DynamicStyleProperty.type,
         options: {
-          ...originalProperties[key].options,
+          ...originalProperties[key]!.options,
         },
-      };
+      } as any;
+      // @ts-expect-error
       delete updatedProperties[key].options.field;
     });
 
@@ -261,7 +355,7 @@ export class VectorStyle extends AbstractStyle {
     };
   }
 
-  async pluckStyleMetaFromSourceDataRequest(sourceDataRequest) {
+  async pluckStyleMetaFromSourceDataRequest(sourceDataRequest: DataRequest) {
     const features = _.get(sourceDataRequest.getData(), 'features', []);
 
     const supportedFeatures = await this._source.getSupportedShapeTypes();
@@ -307,7 +401,7 @@ export class VectorStyle extends AbstractStyle {
         ),
       },
       fieldMeta: {},
-    };
+    } as StyleMetaDescriptor;
 
     const dynamicProperties = this.getDynamicPropertiesArray();
     if (dynamicProperties.length === 0 || features.length === 0) {
@@ -318,7 +412,7 @@ export class VectorStyle extends AbstractStyle {
     dynamicProperties.forEach((dynamicProperty) => {
       const categoricalStyleMeta = dynamicProperty.pluckCategoricalStyleMetaFromFeatures(features);
       const ordinalStyleMeta = dynamicProperty.pluckOrdinalStyleMetaFromFeatures(features);
-      const name = dynamicProperty.getField().getName();
+      const name = dynamicProperty.getFieldName();
       if (!styleMeta.fieldMeta[name]) {
         styleMeta.fieldMeta[name] = {};
       }
@@ -335,10 +429,10 @@ export class VectorStyle extends AbstractStyle {
   }
 
   getSourceFieldNames() {
-    const fieldNames = [];
+    const fieldNames: string[] = [];
     this.getDynamicPropertiesArray().forEach((styleProperty) => {
       if (styleProperty.getFieldOrigin() === FIELD_ORIGIN.SOURCE) {
-        fieldNames.push(styleProperty.getField().getName());
+        fieldNames.push(styleProperty.getFieldName());
       }
     });
     return fieldNames;
@@ -356,7 +450,7 @@ export class VectorStyle extends AbstractStyle {
     const styleProperties = this.getAllStyleProperties();
     return styleProperties.filter(
       (styleProperty) => styleProperty.isDynamic() && styleProperty.isComplete()
-    );
+    ) as Array<IDynamicStyleProperty<DynamicStylePropertyOptions>>;
   }
 
   _getIsPointsOnly = () => {
@@ -371,10 +465,10 @@ export class VectorStyle extends AbstractStyle {
     return this._styleMeta.isPolygonsOnly();
   };
 
-  _getDynamicPropertyByFieldName(fieldName) {
+  _getDynamicPropertyByFieldName(fieldName: string) {
     const dynamicProps = this.getDynamicPropertiesArray();
     return dynamicProps.find((dynamicProp) => {
-      return fieldName === dynamicProp.getField().getName();
+      return fieldName === dynamicProp.getFieldName();
     });
   }
 
@@ -382,7 +476,7 @@ export class VectorStyle extends AbstractStyle {
     return this._styleMeta;
   }
 
-  _getFieldFormatter = (fieldName) => {
+  _getFieldFormatter = (fieldName: string) => {
     const dynamicProp = this._getDynamicPropertyByFieldName(fieldName);
     if (!dynamicProp) {
       return null;
@@ -392,11 +486,11 @@ export class VectorStyle extends AbstractStyle {
     if (dynamicProp.getFieldOrigin() === FIELD_ORIGIN.SOURCE) {
       dataRequestId = SOURCE_FORMATTERS_DATA_REQUEST_ID;
     } else {
-      const join = this._layer.getValidJoins().find((join) => {
+      const targetJoin = this._layer.getValidJoins().find((join) => {
         return join.getRightJoinSource().hasMatchingMetricField(fieldName);
       });
-      if (join) {
-        dataRequestId = join.getSourceFormattersDataRequestId();
+      if (targetJoin) {
+        dataRequestId = targetJoin.getSourceFormattersDataRequestId();
       }
     }
 
@@ -410,13 +504,14 @@ export class VectorStyle extends AbstractStyle {
     }
 
     const formatters = formattersDataRequest.getData();
-    return formatters[fieldName];
+    // @ts-expect-error
+    return formatters ? formatters[fieldName] : null;
   };
 
   _getSymbolId() {
-    return this.arePointsSymbolizedAsCircles()
+    return this.arePointsSymbolizedAsCircles() || this._iconStyleProperty.isDynamic()
       ? undefined
-      : this._iconStyleProperty.getOptions().value;
+      : (this._iconStyleProperty as StaticIconProperty).getOptions().value;
   }
 
   getIcon = () => {
@@ -434,7 +529,7 @@ export class VectorStyle extends AbstractStyle {
       );
     }
     const fillColor = isLinesOnly
-      ? null
+      ? undefined
       : extractColorFromStyleProperty(
           this._descriptor.properties[VECTOR_STYLES.FILL_COLOR],
           'grey'
@@ -485,10 +580,10 @@ export class VectorStyle extends AbstractStyle {
     );
   }
 
-  clearFeatureState(featureCollection, mbMap, sourceId) {
-    const tmpFeatureIdentifier = {
-      source: null,
-      id: null,
+  clearFeatureState(featureCollection: FeatureCollection, mbMap: MbMap, sourceId: string) {
+    const tmpFeatureIdentifier: FeatureIdentifier = {
+      source: '',
+      id: undefined,
     };
     for (let i = 0; i < featureCollection.features.length; i++) {
       const feature = featureCollection.features[i];
@@ -498,7 +593,11 @@ export class VectorStyle extends AbstractStyle {
     }
   }
 
-  setFeatureStateAndStyleProps(featureCollection, mbMap, mbSourceId) {
+  setFeatureStateAndStyleProps(
+    featureCollection: FeatureCollection,
+    mbMap: MbMap,
+    mbSourceId: string
+  ) {
     if (!featureCollection) {
       return;
     }
@@ -508,24 +607,24 @@ export class VectorStyle extends AbstractStyle {
       return;
     }
 
-    const tmpFeatureIdentifier = {
-      source: null,
-      id: null,
+    const tmpFeatureIdentifier: FeatureIdentifier = {
+      source: '',
+      id: undefined,
     };
-    const tmpFeatureState = {};
+    const tmpFeatureState: any = {};
 
     for (let i = 0; i < featureCollection.features.length; i++) {
       const feature = featureCollection.features[i];
 
       for (let j = 0; j < dynamicStyleProps.length; j++) {
         const dynamicStyleProp = dynamicStyleProps[j];
-        const name = dynamicStyleProp.getField().getName();
+        const name = dynamicStyleProp.getFieldName();
         const computedName = getComputedFieldName(dynamicStyleProp.getStyleName(), name);
-        const rawValue = feature.properties[name];
+        const rawValue = feature.properties ? feature.properties[name] : undefined;
         if (dynamicStyleProp.supportsMbFeatureState()) {
-          tmpFeatureState[name] = getNumericalMbFeatureStateValue(rawValue); //the same value will be potentially overridden multiple times, if the name remains identical
+          tmpFeatureState[name] = getNumericalMbFeatureStateValue(rawValue); // the same value will be potentially overridden multiple times, if the name remains identical
         } else {
-          //in practice, a new system property will only be created for:
+          // in practice, a new system property will only be created for:
           // - label text: this requires the value to be formatted first.
           // - icon orientation: this is a lay-out property which do not support feature-state (but we're still coercing to a number)
 
@@ -533,7 +632,7 @@ export class VectorStyle extends AbstractStyle {
             ? getNumericalMbFeatureStateValue(rawValue)
             : dynamicStyleProp.formatField(rawValue);
 
-          feature.properties[computedName] = formattedValue;
+          if (feature.properties) feature.properties[computedName] = formattedValue;
         }
       }
       tmpFeatureIdentifier.source = mbSourceId;
@@ -541,10 +640,10 @@ export class VectorStyle extends AbstractStyle {
       mbMap.setFeatureState(tmpFeatureIdentifier, tmpFeatureState);
     }
 
-    //returns boolean indicating if styles do not support feature-state and some values are stored in geojson properties
-    //this return-value is used in an optimization for style-updates with mapbox-gl.
-    //`true` indicates the entire data needs to reset on the source (otherwise the style-rules will not be reapplied)
-    //`false` indicates the data does not need to be reset on the store, because styles are re-evaluated if they use featureState
+    // returns boolean indicating if styles do not support feature-state and some values are stored in geojson properties
+    // this return-value is used in an optimization for style-updates with mapbox-gl.
+    // `true` indicates the entire data needs to reset on the source (otherwise the style-rules will not be reapplied)
+    // `false` indicates the data does not need to be reset on the store, because styles are re-evaluated if they use featureState
     return dynamicStyleProps.some((dynamicStyleProp) => !dynamicStyleProp.supportsMbFeatureState());
   }
 
@@ -552,23 +651,49 @@ export class VectorStyle extends AbstractStyle {
     return !this._symbolizeAsStyleProperty.isSymbolizedAsIcon();
   }
 
-  setMBPaintProperties({ alpha, mbMap, fillLayerId, lineLayerId }) {
+  setMBPaintProperties({
+    alpha,
+    mbMap,
+    fillLayerId,
+    lineLayerId,
+  }: {
+    alpha: number;
+    mbMap: MbMap;
+    fillLayerId: string;
+    lineLayerId: string;
+  }) {
     this._fillColorStyleProperty.syncFillColorWithMb(fillLayerId, mbMap, alpha);
     this._lineColorStyleProperty.syncLineColorWithMb(lineLayerId, mbMap, alpha);
     this._lineWidthStyleProperty.syncLineWidthWithMb(lineLayerId, mbMap);
   }
 
-  setMBPaintPropertiesForPoints({ alpha, mbMap, pointLayerId }) {
+  setMBPaintPropertiesForPoints({
+    alpha,
+    mbMap,
+    pointLayerId,
+  }: {
+    alpha: number;
+    mbMap: MbMap;
+    pointLayerId: string;
+  }) {
     this._fillColorStyleProperty.syncCircleColorWithMb(pointLayerId, mbMap, alpha);
     this._lineColorStyleProperty.syncCircleStrokeWithMb(pointLayerId, mbMap, alpha);
     const hasNoRadius =
       !this._iconSizeStyleProperty.isDynamic() &&
-      this._iconSizeStyleProperty.getOptions().size === 0;
+      (this._iconSizeStyleProperty as StaticSizeProperty).getOptions().size === 0;
     this._lineWidthStyleProperty.syncCircleStrokeWidthWithMb(pointLayerId, mbMap, hasNoRadius);
-    this._iconSizeStyleProperty.syncCircleRadiusWithMb(pointLayerId, mbMap, hasNoRadius);
+    this._iconSizeStyleProperty.syncCircleRadiusWithMb(pointLayerId, mbMap);
   }
 
-  setMBPropertiesForLabelText({ alpha, mbMap, textLayerId }) {
+  setMBPropertiesForLabelText({
+    alpha,
+    mbMap,
+    textLayerId,
+  }: {
+    alpha: number;
+    mbMap: MbMap;
+    textLayerId: string;
+  }) {
     mbMap.setLayoutProperty(textLayerId, 'icon-allow-overlap', true);
     mbMap.setLayoutProperty(textLayerId, 'text-allow-overlap', true);
     this._labelStyleProperty.syncTextFieldWithMb(textLayerId, mbMap);
@@ -578,7 +703,15 @@ export class VectorStyle extends AbstractStyle {
     this._labelBorderColorStyleProperty.syncLabelBorderColorWithMb(textLayerId, mbMap);
   }
 
-  setMBSymbolPropertiesForPoints({ mbMap, symbolLayerId, alpha }) {
+  setMBSymbolPropertiesForPoints({
+    mbMap,
+    symbolLayerId,
+    alpha,
+  }: {
+    alpha: number;
+    mbMap: MbMap;
+    symbolLayerId: string;
+  }) {
     mbMap.setLayoutProperty(symbolLayerId, 'icon-ignore-placement', true);
     mbMap.setPaintProperty(symbolLayerId, 'icon-opacity', alpha);
 
@@ -595,34 +728,41 @@ export class VectorStyle extends AbstractStyle {
     this._iconOrientationProperty.syncIconRotationWithMb(symbolLayerId, mbMap);
   }
 
-  _makeField(fieldDescriptor) {
+  _makeField(fieldDescriptor?: StylePropertyField) {
     if (!fieldDescriptor || !fieldDescriptor.name) {
       return null;
     }
 
-    //fieldDescriptor.label is ignored. This is essentially cruft duplicating label-info from the metric-selection
-    //Ignore this custom label
+    // fieldDescriptor.label is ignored. This is essentially cruft duplicating label-info from the metric-selection
+    // Ignore this custom label
     if (fieldDescriptor.origin === FIELD_ORIGIN.SOURCE) {
       return this._source.getFieldByName(fieldDescriptor.name);
     } else if (fieldDescriptor.origin === FIELD_ORIGIN.JOIN) {
-      const join = this._layer.getValidJoins().find((join) => {
+      const targetJoin = this._layer.getValidJoins().find((join) => {
         return join.getRightJoinSource().hasMatchingMetricField(fieldDescriptor.name);
       });
-      return join ? join.getRightJoinSource().getMetricFieldForName(fieldDescriptor.name) : null;
+      return targetJoin
+        ? targetJoin.getRightJoinSource().getMetricFieldForName(fieldDescriptor.name)
+        : null;
     } else {
       throw new Error(`Unknown origin-type ${fieldDescriptor.origin}`);
     }
   }
 
-  _makeSizeProperty(descriptor, styleName, isSymbolizedAsIcon) {
+  _makeSizeProperty(
+    descriptor: SizeStylePropertyDescriptor | undefined,
+    styleName: VECTOR_STYLES,
+    isSymbolizedAsIcon: boolean
+  ) {
     if (!descriptor || !descriptor.options) {
       return new StaticSizeProperty({ size: 0 }, styleName);
     } else if (descriptor.type === StaticStyleProperty.type) {
-      return new StaticSizeProperty(descriptor.options, styleName);
+      return new StaticSizeProperty(descriptor.options as SizeStaticOptions, styleName);
     } else if (descriptor.type === DynamicStyleProperty.type) {
-      const field = this._makeField(descriptor.options.field);
+      const options = descriptor.options as SizeDynamicOptions;
+      const field = this._makeField(options.field);
       return new DynamicSizeProperty(
-        descriptor.options,
+        options,
         styleName,
         field,
         this._layer,
@@ -634,15 +774,19 @@ export class VectorStyle extends AbstractStyle {
     }
   }
 
-  _makeColorProperty(descriptor, styleName) {
+  _makeColorProperty(
+    descriptor: ColorStylePropertyDescriptor | undefined,
+    styleName: VECTOR_STYLES
+  ) {
     if (!descriptor || !descriptor.options) {
-      return new StaticColorProperty({ color: null }, styleName);
+      return new StaticColorProperty({ color: '' }, styleName);
     } else if (descriptor.type === StaticStyleProperty.type) {
-      return new StaticColorProperty(descriptor.options, styleName);
+      return new StaticColorProperty(descriptor.options as ColorStaticOptions, styleName);
     } else if (descriptor.type === DynamicStyleProperty.type) {
-      const field = this._makeField(descriptor.options.field);
+      const options = descriptor.options as ColorDynamicOptions;
+      const field = this._makeField(options.field);
       return new DynamicColorProperty(
-        descriptor.options,
+        options,
         styleName,
         field,
         this._layer,
@@ -653,15 +797,22 @@ export class VectorStyle extends AbstractStyle {
     }
   }
 
-  _makeOrientationProperty(descriptor, styleName) {
+  _makeOrientationProperty(
+    descriptor: OrientationStylePropertyDescriptor | undefined,
+    styleName: VECTOR_STYLES
+  ) {
     if (!descriptor || !descriptor.options) {
       return new StaticOrientationProperty({ orientation: 0 }, styleName);
     } else if (descriptor.type === StaticStyleProperty.type) {
-      return new StaticOrientationProperty(descriptor.options, styleName);
+      return new StaticOrientationProperty(
+        descriptor.options as OrientationStaticOptions,
+        styleName
+      );
     } else if (descriptor.type === DynamicStyleProperty.type) {
-      const field = this._makeField(descriptor.options.field);
+      const options = descriptor.options as OrientationDynamicOptions;
+      const field = this._makeField(options.field);
       return new DynamicOrientationProperty(
-        descriptor.options,
+        options,
         styleName,
         field,
         this._layer,
@@ -672,15 +823,19 @@ export class VectorStyle extends AbstractStyle {
     }
   }
 
-  _makeLabelProperty(descriptor) {
+  _makeLabelProperty(descriptor?: LabelStylePropertyDescriptor) {
     if (!descriptor || !descriptor.options) {
       return new StaticTextProperty({ value: '' }, VECTOR_STYLES.LABEL_TEXT);
     } else if (descriptor.type === StaticStyleProperty.type) {
-      return new StaticTextProperty(descriptor.options, VECTOR_STYLES.LABEL_TEXT);
+      return new StaticTextProperty(
+        descriptor.options as LabelStaticOptions,
+        VECTOR_STYLES.LABEL_TEXT
+      );
     } else if (descriptor.type === DynamicStyleProperty.type) {
-      const field = this._makeField(descriptor.options.field);
+      const options = descriptor.options as LabelDynamicOptions;
+      const field = this._makeField(options.field);
       return new DynamicTextProperty(
-        descriptor.options,
+        options,
         VECTOR_STYLES.LABEL_TEXT,
         field,
         this._layer,
@@ -691,15 +846,16 @@ export class VectorStyle extends AbstractStyle {
     }
   }
 
-  _makeIconProperty(descriptor) {
+  _makeIconProperty(descriptor?: IconStylePropertyDescriptor) {
     if (!descriptor || !descriptor.options) {
       return new StaticIconProperty({ value: DEFAULT_ICON }, VECTOR_STYLES.ICON);
     } else if (descriptor.type === StaticStyleProperty.type) {
-      return new StaticIconProperty(descriptor.options, VECTOR_STYLES.ICON);
+      return new StaticIconProperty(descriptor.options as IconStaticOptions, VECTOR_STYLES.ICON);
     } else if (descriptor.type === DynamicStyleProperty.type) {
-      const field = this._makeField(descriptor.options.field);
+      const options = descriptor.options as IconDynamicOptions;
+      const field = this._makeField(options.field);
       return new DynamicIconProperty(
-        descriptor.options,
+        options,
         VECTOR_STYLES.ICON,
         field,
         this._layer,
diff --git a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
index 95f13574105b7..6c6cb6ba143cd 100644
--- a/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
+++ b/x-pack/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/toc_entry_actions_popover/toc_entry_actions_popover.test.tsx
@@ -9,7 +9,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { AbstractLayer, ILayer } from '../../../../../../classes/layers/layer';
 import { AbstractSource, ISource } from '../../../../../../classes/sources/source';
-import { AbstractStyle, IStyle } from '../../../../../../classes/styles/style';
+import { IStyle } from '../../../../../../classes/styles/style';
 
 import { TOCEntryActionsPopover } from './toc_entry_actions_popover';
 
@@ -17,7 +17,15 @@ let supportsFitToBounds: boolean;
 
 class MockSource extends AbstractSource implements ISource {}
 
-class MockStyle extends AbstractStyle implements IStyle {}
+class MockStyle implements IStyle {
+  renderEditor() {
+    return null;
+  }
+
+  getType() {
+    return 'mockStyle';
+  }
+}
 
 class LayerMock extends AbstractLayer implements ILayer {
   constructor() {
@@ -25,7 +33,7 @@ class LayerMock extends AbstractLayer implements ILayer {
       type: 'mySourceType',
     };
     const source = new MockSource(sourceDescriptor);
-    const style = new MockStyle({ type: 'myStyleType' });
+    const style = new MockStyle();
     const layerDescriptor = {
       id: 'testLayer',
       sourceDescriptor,
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index b1e24958d5365..8287f8f42abdc 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -10609,7 +10609,6 @@
     "xpack.maps.style.customColorPaletteLabel": "カスタムカラーパレット",
     "xpack.maps.style.customColorRampLabel": "カスタマカラーランプ",
     "xpack.maps.style.fieldSelect.OriginLabel": "{fieldOrigin} からのフィールド",
-    "xpack.maps.style.heatmap.displayNameLabel": "ヒートマップスタイル",
     "xpack.maps.style.heatmap.resolutionStyleErrorMessage": "解像度パラメーターが認識されません: {resolution}",
     "xpack.maps.styles.categorical.otherCategoryLabel": "その他",
     "xpack.maps.styles.color.staticDynamicSelect.staticLabel": "塗りつぶし",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 82abb924611fb..aff78ad79ae48 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -10612,7 +10612,6 @@
     "xpack.maps.style.customColorPaletteLabel": "定制调色板",
     "xpack.maps.style.customColorRampLabel": "定制颜色渐变",
     "xpack.maps.style.fieldSelect.OriginLabel": "来自 {fieldOrigin} 的字段",
-    "xpack.maps.style.heatmap.displayNameLabel": "热图样式",
     "xpack.maps.style.heatmap.resolutionStyleErrorMessage": "无法识别分辨率参数：{resolution}",
     "xpack.maps.styles.categorical.otherCategoryLabel": "其他",
     "xpack.maps.styles.color.staticDynamicSelect.staticLabel": "纯色",

From 6c02dc8e209cecf05643efd022cd5ecbd780916f Mon Sep 17 00:00:00 2001
From: Brian Seeders <seeders@gmail.com>
Date: Fri, 21 Aug 2020 17:58:11 -0400
Subject: [PATCH 20/25] skip suite blocking es snapshot promotion (#75707)

---
 x-pack/test/api_integration/apis/security/basic_login.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/test/api_integration/apis/security/basic_login.js b/x-pack/test/api_integration/apis/security/basic_login.js
index 70eddc9aee4d8..db58f17582c60 100644
--- a/x-pack/test/api_integration/apis/security/basic_login.js
+++ b/x-pack/test/api_integration/apis/security/basic_login.js
@@ -15,7 +15,8 @@ export default function ({ getService }) {
   const validUsername = kibanaServerConfig.username;
   const validPassword = kibanaServerConfig.password;
 
-  describe('Basic authentication', () => {
+  // Failing: See https://github.com/elastic/kibana/issues/75707
+  describe.skip('Basic authentication', () => {
     it('should redirect non-AJAX requests to the login page if not authenticated', async () => {
       const response = await supertest.get('/abc/xyz').expect(302);
 

From 19c5ba838a309a9fb8519105c44858c7fa76e0ab Mon Sep 17 00:00:00 2001
From: spalger <spalger@users.noreply.github.com>
Date: Fri, 21 Aug 2020 16:49:36 -0700
Subject: [PATCH 21/25] skip suite blocking es snapshot promotion (#75707)

---
 .../kerberos_api_integration/apis/security/kerberos_login.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/x-pack/test/kerberos_api_integration/apis/security/kerberos_login.ts b/x-pack/test/kerberos_api_integration/apis/security/kerberos_login.ts
index 38a8697e05252..3c211dca2a783 100644
--- a/x-pack/test/kerberos_api_integration/apis/security/kerberos_login.ts
+++ b/x-pack/test/kerberos_api_integration/apis/security/kerberos_login.ts
@@ -37,7 +37,8 @@ export default function ({ getService }: FtrProviderContext) {
     expect(cookie.maxAge).to.be(0);
   }
 
-  describe('Kerberos authentication', () => {
+  // FAILING: https://github.com/elastic/kibana/issues/75707
+  describe.skip('Kerberos authentication', () => {
     before(async () => {
       await getService('esSupertest')
         .post('/_security/role_mapping/krb5')

From 50499a589c554b49da3c8130fa8f83fb9aa14aaf Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Fri, 21 Aug 2020 17:53:03 -0700
Subject: [PATCH 22/25] Surface data stream stats, index template, and ILM
 policy in the UI (#75107)

* Add Index Management README and quick testing steps for data streams.
* Surface data stream health in Data Streams tab (table and detail panel).
  - Extract out DataHealth component for use in both Data Streams and Indices tabs.
  - Refactor detail panel to use data structure & algo to build component.
  - Refactor detail panel to use i18n.translate instead of FormattedMessage.
* Render index template name and index lifecycle policy name in the detail panel.
* Render storage size and max timestamp information in table and detail panel.
  - Add 'Include stats' switch.
  - Add humanizeTimeStamp service, localized to data streams.
---
 .../architecture/code-exploration.asciidoc    |   4 +-
 x-pack/plugins/index_management/README.md     |  22 ++
 .../helpers/test_subjects.ts                  |   7 +-
 .../home/data_streams_tab.helpers.ts          |  11 +
 .../home/data_streams_tab.test.ts             |  44 ++-
 .../common/lib/data_stream_serialization.ts   |  19 +-
 .../common/types/data_streams.ts              |  14 +
 .../index_management/common/types/index.ts    |   2 +-
 .../data_health.tsx}                          |  14 +-
 .../public/application/components/index.ts    |   1 +
 .../data_stream_detail_panel.tsx              | 265 +++++++++++-------
 .../data_stream_list/data_stream_list.tsx     |  93 ++++--
 .../data_stream_table/data_stream_table.tsx   | 161 +++++++----
 .../data_stream_list/humanize_time_stamp.ts   |  10 +
 .../detail_panel/summary/summary.js           |   5 +-
 .../index_list/index_table/index_table.js     |   6 +-
 .../public/application/services/api.ts        |   5 +-
 .../public/application/services/index.ts      |   1 -
 .../api/data_streams/register_get_route.ts    |  63 ++++-
 .../index_management/data_streams.ts          |  46 ++-
 20 files changed, 568 insertions(+), 225 deletions(-)
 create mode 100644 x-pack/plugins/index_management/README.md
 rename x-pack/plugins/index_management/public/application/{services/health_to_color.ts => components/data_health.tsx} (53%)
 create mode 100644 x-pack/plugins/index_management/public/application/sections/home/data_stream_list/humanize_time_stamp.ts

diff --git a/docs/developer/architecture/code-exploration.asciidoc b/docs/developer/architecture/code-exploration.asciidoc
index 6e814921d3f32..d65456f2ad928 100644
--- a/docs/developer/architecture/code-exploration.asciidoc
+++ b/docs/developer/architecture/code-exploration.asciidoc
@@ -426,9 +426,9 @@ You can test that the Frozen badge, phase filtering, and lifecycle information i
 Index Management by running this series of requests in Console:
 
 
-- {kib-repo}blob/{branch}/x-pack/plugins/index_management[indexManagement]
+- {kib-repo}blob/{branch}/x-pack/plugins/index_management/README.md[indexManagement]
 
-WARNING: Missing README.
+Create a data stream using Console and you'll be able to view it in the UI:
 
 
 - {kib-repo}blob/{branch}/x-pack/plugins/infra/README.md[infra]
diff --git a/x-pack/plugins/index_management/README.md b/x-pack/plugins/index_management/README.md
new file mode 100644
index 0000000000000..07c5b9317b5cb
--- /dev/null
+++ b/x-pack/plugins/index_management/README.md
@@ -0,0 +1,22 @@
+# Index Management UI
+
+## Data streams tab
+
+### Quick steps for testing
+
+Create a data stream using Console and you'll be able to view it in the UI:
+
+```
+# Configure template for creating a data stream
+PUT _index_template/ds
+{
+  "index_patterns": ["ds"],
+  "data_stream": {}
+}
+
+# Add a document to the data stream
+POST ds/_doc
+{
+  "@timestamp": "2020-01-27"
+}
+```
\ No newline at end of file
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
index ecedf819e6185..8a610a04f8bb1 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/test_subjects.ts
@@ -20,6 +20,7 @@ export type TestSubjects =
   | 'documentationLink'
   | 'emptyPrompt'
   | 'filterList.filterItem'
+  | 'includeStatsSwitch'
   | 'indexTable'
   | 'indexTableIncludeHiddenIndicesToggle'
   | 'indexTableIndexNameLink'
@@ -28,16 +29,17 @@ export type TestSubjects =
   | 'legacyTemplateTable'
   | 'manageTemplateButton'
   | 'mappingsTabContent'
-  | 'previewTabContent'
   | 'noAliasesCallout'
   | 'noMappingsCallout'
   | 'noSettingsCallout'
+  | 'previewTabContent'
   | 'reloadButton'
   | 'reloadIndicesButton'
   | 'row'
   | 'sectionError'
   | 'sectionLoading'
   | 'settingsTabContent'
+  | 'simulateTemplatePreview'
   | 'summaryTab'
   | 'summaryTitle'
   | 'systemTemplatesSwitch'
@@ -49,5 +51,4 @@ export type TestSubjects =
   | 'templateList'
   | 'templatesTab'
   | 'templateTable'
-  | 'viewButton'
-  | 'simulateTemplatePreview';
+  | 'viewButton';
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
index db7541c93f9ac..2fcf2a822cb2d 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.helpers.ts
@@ -22,6 +22,7 @@ export interface DataStreamsTabTestBed extends TestBed<TestSubjects> {
   actions: {
     goToDataStreamsList: () => void;
     clickEmptyPromptIndexTemplateLink: () => void;
+    clickIncludeStatsSwitch: () => void;
     clickReloadButton: () => void;
     clickNameAt: (index: number) => void;
     clickIndicesAt: (index: number) => void;
@@ -74,6 +75,11 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     component.update();
   };
 
+  const clickIncludeStatsSwitch = () => {
+    const { find } = testBed;
+    find('includeStatsSwitch').simulate('click');
+  };
+
   const clickReloadButton = () => {
     const { find } = testBed;
     find('reloadButton').simulate('click');
@@ -149,6 +155,7 @@ export const setup = async (overridingDependencies: any = {}): Promise<DataStrea
     actions: {
       goToDataStreamsList,
       clickEmptyPromptIndexTemplateLink,
+      clickIncludeStatsSwitch,
       clickReloadButton,
       clickNameAt,
       clickIndicesAt,
@@ -174,4 +181,8 @@ export const createDataStreamPayload = (name: string): DataStream => ({
     },
   ],
   generation: 1,
+  health: 'green',
+  indexTemplateName: 'indexTemplate',
+  storageSize: '1b',
+  maxTimeStamp: 420,
 });
diff --git a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
index 89a95135bb07a..ade4a62ceb198 100644
--- a/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/home/data_streams_tab.test.ts
@@ -78,7 +78,13 @@ describe('Data Streams tab', () => {
 
   describe('when there are data streams', () => {
     beforeEach(async () => {
-      httpRequestsMockHelpers.setLoadIndicesResponse([
+      const {
+        setLoadIndicesResponse,
+        setLoadDataStreamsResponse,
+        setLoadDataStreamResponse,
+      } = httpRequestsMockHelpers;
+
+      setLoadIndicesResponse([
         {
           health: '',
           status: '',
@@ -105,20 +111,16 @@ describe('Data Streams tab', () => {
       ]);
 
       const dataStreamForDetailPanel = createDataStreamPayload('dataStream1');
-
-      httpRequestsMockHelpers.setLoadDataStreamsResponse([
+      setLoadDataStreamsResponse([
         dataStreamForDetailPanel,
         createDataStreamPayload('dataStream2'),
       ]);
-
-      httpRequestsMockHelpers.setLoadDataStreamResponse(dataStreamForDetailPanel);
+      setLoadDataStreamResponse(dataStreamForDetailPanel);
 
       testBed = await setup();
-
       await act(async () => {
         testBed.actions.goToDataStreamsList();
       });
-
       testBed.component.update();
     });
 
@@ -127,8 +129,8 @@ describe('Data Streams tab', () => {
       const { tableCellsValues } = table.getMetaData('dataStreamTable');
 
       expect(tableCellsValues).toEqual([
-        ['', 'dataStream1', '1', 'Delete'],
-        ['', 'dataStream2', '1', 'Delete'],
+        ['', 'dataStream1', 'green', '1', 'Delete'],
+        ['', 'dataStream2', 'green', '1', 'Delete'],
       ]);
     });
 
@@ -146,6 +148,30 @@ describe('Data Streams tab', () => {
       expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
     });
 
+    test('has a switch that will reload the data streams with additional stats when clicked', async () => {
+      const { exists, actions, table, component } = testBed;
+      const totalRequests = server.requests.length;
+
+      expect(exists('includeStatsSwitch')).toBe(true);
+
+      // Changing the switch will automatically reload the data streams.
+      await act(async () => {
+        actions.clickIncludeStatsSwitch();
+      });
+      component.update();
+
+      // A request is sent, but sinon isn't capturing the query parameters for some reason.
+      expect(server.requests.length).toBe(totalRequests + 1);
+      expect(server.requests[server.requests.length - 1].url).toBe(`${API_BASE_PATH}/data_streams`);
+
+      // The table renders with the stats columns though.
+      const { tableCellsValues } = table.getMetaData('dataStreamTable');
+      expect(tableCellsValues).toEqual([
+        ['', 'dataStream1', 'green', 'December 31st, 1969 7:00:00 PM', '1b', '1', 'Delete'],
+        ['', 'dataStream2', 'green', 'December 31st, 1969 7:00:00 PM', '1b', '1', 'Delete'],
+      ]);
+    });
+
     test('clicking the indices count navigates to the backing indices', async () => {
       const { table, actions } = testBed;
       await actions.clickIndicesAt(0);
diff --git a/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts b/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
index 7832662aea494..69004eaa020eb 100644
--- a/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
+++ b/x-pack/plugins/index_management/common/lib/data_stream_serialization.ts
@@ -4,10 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DataStream, DataStreamFromEs } from '../types';
+import { DataStream, DataStreamFromEs, Health } from '../types';
 
 export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataStream {
-  const { name, timestamp_field: timeStampField, indices, generation } = dataStreamFromEs;
+  const {
+    name,
+    timestamp_field: timeStampField,
+    indices,
+    generation,
+    status,
+    template,
+    ilm_policy: ilmPolicyName,
+    store_size: storageSize,
+    maximum_timestamp: maxTimeStamp,
+  } = dataStreamFromEs;
 
   return {
     name,
@@ -20,6 +30,11 @@ export function deserializeDataStream(dataStreamFromEs: DataStreamFromEs): DataS
       })
     ),
     generation,
+    health: status.toLowerCase() as Health, // ES typically returns status in all-caps
+    indexTemplateName: template,
+    ilmPolicyName,
+    storageSize,
+    maxTimeStamp,
   };
 }
 
diff --git a/x-pack/plugins/index_management/common/types/data_streams.ts b/x-pack/plugins/index_management/common/types/data_streams.ts
index d1936c4426b49..7c348f9a8085d 100644
--- a/x-pack/plugins/index_management/common/types/data_streams.ts
+++ b/x-pack/plugins/index_management/common/types/data_streams.ts
@@ -10,11 +10,18 @@ interface TimestampFieldFromEs {
 
 type TimestampField = TimestampFieldFromEs;
 
+export type HealthFromEs = 'GREEN' | 'YELLOW' | 'RED';
+
 export interface DataStreamFromEs {
   name: string;
   timestamp_field: TimestampFieldFromEs;
   indices: DataStreamIndexFromEs[];
   generation: number;
+  status: HealthFromEs;
+  template: string;
+  ilm_policy?: string;
+  store_size?: string;
+  maximum_timestamp?: number;
 }
 
 export interface DataStreamIndexFromEs {
@@ -22,11 +29,18 @@ export interface DataStreamIndexFromEs {
   index_uuid: string;
 }
 
+export type Health = 'green' | 'yellow' | 'red';
+
 export interface DataStream {
   name: string;
   timeStampField: TimestampField;
   indices: DataStreamIndex[];
   generation: number;
+  health: Health;
+  indexTemplateName: string;
+  ilmPolicyName?: string;
+  storageSize?: string;
+  maxTimeStamp?: number;
 }
 
 export interface DataStreamIndex {
diff --git a/x-pack/plugins/index_management/common/types/index.ts b/x-pack/plugins/index_management/common/types/index.ts
index c4ba60573d430..0a6f18be2e030 100644
--- a/x-pack/plugins/index_management/common/types/index.ts
+++ b/x-pack/plugins/index_management/common/types/index.ts
@@ -12,6 +12,6 @@ export * from './mappings';
 
 export * from './templates';
 
-export { DataStreamFromEs, DataStream, DataStreamIndex } from './data_streams';
+export { DataStreamFromEs, Health, DataStream, DataStreamIndex } from './data_streams';
 
 export * from './component_templates';
diff --git a/x-pack/plugins/index_management/public/application/services/health_to_color.ts b/x-pack/plugins/index_management/public/application/components/data_health.tsx
similarity index 53%
rename from x-pack/plugins/index_management/public/application/services/health_to_color.ts
rename to x-pack/plugins/index_management/public/application/components/data_health.tsx
index ab3d042529aa5..21df8a16947d5 100644
--- a/x-pack/plugins/index_management/public/application/services/health_to_color.ts
+++ b/x-pack/plugins/index_management/public/application/components/data_health.tsx
@@ -4,7 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const healthToColor = (health: 'green' | 'yellow' | 'red') => {
+import React from 'react';
+import { EuiHealth } from '@elastic/eui';
+import { Health } from '../../../common/types';
+
+interface Props {
+  health: Health;
+}
+
+const healthToColor = (health: Health) => {
   switch (health) {
     case 'green':
       return 'success';
@@ -14,3 +22,7 @@ export const healthToColor = (health: 'green' | 'yellow' | 'red') => {
       return 'danger';
   }
 };
+
+export const DataHealth: React.FunctionComponent<Props> = ({ health }) => (
+  <EuiHealth color={healthToColor(health)}>{health}</EuiHealth>
+);
diff --git a/x-pack/plugins/index_management/public/application/components/index.ts b/x-pack/plugins/index_management/public/application/components/index.ts
index b6a325c0d56ad..4b0bf4680c49a 100644
--- a/x-pack/plugins/index_management/public/application/components/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/index.ts
@@ -10,6 +10,7 @@ export { NoMatch } from './no_match';
 export { PageErrorForbidden } from './page_error';
 export { TemplateDeleteModal } from './template_delete_modal';
 export { TemplateForm } from './template_form';
+export { DataHealth } from './data_health';
 export * from './mappings_editor';
 export * from './component_templates';
 export * from './index_templates';
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
index a0381557db21e..0af22b497a4c0 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_detail_panel/data_stream_detail_panel.tsx
@@ -5,7 +5,7 @@
  */
 
 import React, { useState } from 'react';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { i18n } from '@kbn/i18n';
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -24,9 +24,51 @@ import {
 } from '@elastic/eui';
 
 import { reactRouterNavigate } from '../../../../../shared_imports';
-import { SectionLoading, SectionError, Error } from '../../../../components';
+import { SectionLoading, SectionError, Error, DataHealth } from '../../../../components';
 import { useLoadDataStream } from '../../../../services/api';
 import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
+import { humanizeTimeStamp } from '../humanize_time_stamp';
+
+interface DetailsListProps {
+  details: Array<{
+    name: string;
+    toolTip: string;
+    content: any;
+  }>;
+}
+
+const DetailsList: React.FunctionComponent<DetailsListProps> = ({ details }) => {
+  const groups: any[] = [];
+  let items: any[];
+
+  details.forEach((detail, index) => {
+    const { name, toolTip, content } = detail;
+
+    if (index % 2 === 0) {
+      items = [];
+
+      groups.push(<EuiFlexGroup key={groups.length}>{items}</EuiFlexGroup>);
+    }
+
+    items.push(
+      <EuiFlexItem key={name}>
+        <EuiDescriptionListTitle>
+          <EuiFlexGroup alignItems="center" gutterSize="s">
+            <EuiFlexItem grow={false}>{name}</EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              {toolTip && <EuiIconTip content={toolTip} position="top" />}
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiDescriptionListTitle>
+
+        <EuiDescriptionListDescription>{content}</EuiDescriptionListDescription>
+      </EuiFlexItem>
+    );
+  });
+
+  return <EuiDescriptionList textStyle="reverse">{groups}</EuiDescriptionList>;
+};
 
 interface Props {
   dataStreamName: string;
@@ -48,116 +90,123 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
   if (isLoading) {
     content = (
       <SectionLoading>
-        <FormattedMessage
-          id="xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamDescription"
-          defaultMessage="Loading data stream"
-        />
+        {i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamDescription', {
+          defaultMessage: 'Loading data stream',
+        })}
       </SectionLoading>
     );
   } else if (error) {
     content = (
       <SectionError
-        title={
-          <FormattedMessage
-            id="xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamErrorMessage"
-            defaultMessage="Error loading data stream"
-          />
-        }
+        title={i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.loadingDataStreamErrorMessage', {
+          defaultMessage: 'Error loading data stream',
+        })}
         error={error as Error}
         data-test-subj="sectionError"
       />
     );
   } else if (dataStream) {
-    const { indices, timeStampField, generation } = dataStream;
+    const {
+      health,
+      indices,
+      timeStampField,
+      generation,
+      indexTemplateName,
+      ilmPolicyName,
+      storageSize,
+      maxTimeStamp,
+    } = dataStream;
+    const details = [
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.healthTitle', {
+          defaultMessage: 'Health',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.healthToolTip', {
+          defaultMessage: `The health of the data stream's current backing indices`,
+        }),
+        content: <DataHealth health={health} />,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.maxTimeStampTitle', {
+          defaultMessage: 'Last updated',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.maxTimeStampToolTip', {
+          defaultMessage: 'The most recent document to be added to the data stream',
+        }),
+        content: maxTimeStamp ? (
+          humanizeTimeStamp(maxTimeStamp)
+        ) : (
+          <em>
+            {i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.maxTimeStampNoneMessage', {
+              defaultMessage: `Never`,
+            })}
+          </em>
+        ),
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.storageSizeTitle', {
+          defaultMessage: 'Storage size',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.storageSizeToolTip', {
+          defaultMessage: `Total size of all shards in the data stream’s backing indices`,
+        }),
+        content: storageSize,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.indicesTitle', {
+          defaultMessage: 'Indices',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.indicesToolTip', {
+          defaultMessage: `The data stream's current backing indices`,
+        }),
+        content: <EuiLink {...backingIndicesLink}>{indices.length}</EuiLink>,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.timestampFieldTitle', {
+          defaultMessage: 'Timestamp field',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.timestampFieldToolTip', {
+          defaultMessage: 'Timestamp field shared by all documents in the data stream',
+        }),
+        content: timeStampField.name,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.generationTitle', {
+          defaultMessage: 'Generation',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.generationToolTip', {
+          defaultMessage: 'Cumulative count of backing indices created for the data stream',
+        }),
+        content: generation,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.indexTemplateTitle', {
+          defaultMessage: 'Index template',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.indexTemplateToolTip', {
+          defaultMessage:
+            'The index template that configured the data stream and configures its backing indices',
+        }),
+        content: indexTemplateName,
+      },
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.ilmPolicyTitle', {
+          defaultMessage: 'Index lifecycle policy',
+        }),
+        toolTip: i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.ilmPolicyToolTip', {
+          defaultMessage: `The index lifecycle policy that manages the data stream's data`,
+        }),
+        content: ilmPolicyName ?? (
+          <em>
+            {i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.ilmPolicyContentNoneMessage', {
+              defaultMessage: `None`,
+            })}
+          </em>
+        ),
+      },
+    ];
 
-    content = (
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiDescriptionList textStyle="reverse">
-            <EuiDescriptionListTitle>
-              <EuiFlexGroup alignItems="center" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <FormattedMessage
-                    id="xpack.idxMgmt.dataStreamDetailPanel.indicesTitle"
-                    defaultMessage="Indices"
-                  />
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiIconTip
-                    content={
-                      <FormattedMessage
-                        id="xpack.idxMgmt.dataStreamDetailPanel.indicesToolTip"
-                        defaultMessage="The data stream's current backing indices"
-                      />
-                    }
-                    position="top"
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiDescriptionListTitle>
-
-            <EuiDescriptionListDescription>
-              <EuiLink {...backingIndicesLink}>{indices.length}</EuiLink>
-            </EuiDescriptionListDescription>
-
-            <EuiDescriptionListTitle>
-              <EuiFlexGroup alignItems="center" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <FormattedMessage
-                    id="xpack.idxMgmt.dataStreamDetailPanel.timestampFieldTitle"
-                    defaultMessage="Timestamp field"
-                  />
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiIconTip
-                    content={
-                      <FormattedMessage
-                        id="xpack.idxMgmt.dataStreamDetailPanel.timestampFieldToolTip"
-                        defaultMessage="Timestamp field shared by all documents in the data stream"
-                      />
-                    }
-                    position="top"
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiDescriptionListTitle>
-
-            <EuiDescriptionListDescription>{timeStampField.name}</EuiDescriptionListDescription>
-          </EuiDescriptionList>
-        </EuiFlexItem>
-
-        <EuiFlexItem>
-          <EuiDescriptionList textStyle="reverse">
-            <EuiDescriptionListTitle>
-              <EuiFlexGroup alignItems="center" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <FormattedMessage
-                    id="xpack.idxMgmt.dataStreamDetailPanel.generationTitle"
-                    defaultMessage="Generation"
-                  />
-                </EuiFlexItem>
-
-                <EuiFlexItem grow={false}>
-                  <EuiIconTip
-                    content={
-                      <FormattedMessage
-                        id="xpack.idxMgmt.dataStreamDetailPanel.generationToolTip"
-                        defaultMessage="Cumulative count of backing indices created for the data stream"
-                      />
-                    }
-                    position="top"
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiDescriptionListTitle>
-
-            <EuiDescriptionListDescription>{generation}</EuiDescriptionListDescription>
-          </EuiDescriptionList>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    );
+    content = <DetailsList details={details} />;
   }
 
   return (
@@ -201,10 +250,9 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
                 onClick={() => onClose()}
                 data-test-subj="closeDetailsButton"
               >
-                <FormattedMessage
-                  id="xpack.idxMgmt.dataStreamDetailPanel.closeButtonLabel"
-                  defaultMessage="Close"
-                />
+                {i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.closeButtonLabel', {
+                  defaultMessage: 'Close',
+                })}
               </EuiButtonEmpty>
             </EuiFlexItem>
 
@@ -216,10 +264,9 @@ export const DataStreamDetailPanel: React.FunctionComponent<Props> = ({
                   onClick={() => setIsDeleting(true)}
                   data-test-subj="deleteDataStreamButton"
                 >
-                  <FormattedMessage
-                    id="xpack.idxMgmt.dataStreamDetailPanel.deleteButtonLabel"
-                    defaultMessage="Delete data stream"
-                  />
+                  {i18n.translate('xpack.idxMgmt.dataStreamDetailPanel.deleteButtonLabel', {
+                    defaultMessage: 'Delete data stream',
+                  })}
                 </EuiButton>
               </EuiFlexItem>
             ) : null}
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
index 239b119051c06..d37576f18e849 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_list.tsx
@@ -4,11 +4,20 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { EuiText, EuiSpacer, EuiEmptyPrompt, EuiLink } from '@elastic/eui';
+import {
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSwitch,
+  EuiText,
+  EuiIconTip,
+  EuiSpacer,
+  EuiEmptyPrompt,
+  EuiLink,
+} from '@elastic/eui';
 import { ScopedHistory } from 'kibana/public';
 
 import { reactRouterNavigate, extractQueryParams } from '../../../../shared_imports';
@@ -39,7 +48,10 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
     plugins: { ingestManager },
   } = useAppContext();
 
-  const { error, isLoading, data: dataStreams, sendRequest: reload } = useLoadDataStreams();
+  const [isIncludeStatsChecked, setIsIncludeStatsChecked] = useState(false);
+  const { error, isLoading, data: dataStreams, sendRequest: reload } = useLoadDataStreams({
+    includeStats: isIncludeStatsChecked,
+  });
 
   let content;
 
@@ -134,26 +146,60 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
   } else if (Array.isArray(dataStreams) && dataStreams.length > 0) {
     content = (
       <>
-        {/* TODO: Add a switch for toggling on data streams created by Ingest Manager */}
-        <EuiText color="subdued">
-          <FormattedMessage
-            id="xpack.idxMgmt.dataStreamList.dataStreamsDescription"
-            defaultMessage="Data streams store time-series data across multiple indices. {learnMoreLink}"
-            values={{
-              learnMoreLink: (
-                <EuiLink
-                  href={documentationService.getDataStreamsDocumentationLink()}
-                  target="_blank"
-                  external
-                >
-                  {i18n.translate('xpack.idxMgmt.dataStreamListDescription.learnMoreLinkText', {
-                    defaultMessage: 'Learn more.',
-                  })}
-                </EuiLink>
-              ),
-            }}
-          />
-        </EuiText>
+        <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
+          <EuiFlexItem>
+            {/* TODO: Add a switch for toggling on data streams created by Ingest Manager */}
+            <EuiText color="subdued">
+              <FormattedMessage
+                id="xpack.idxMgmt.dataStreamList.dataStreamsDescription"
+                defaultMessage="Data streams store time-series data across multiple indices. {learnMoreLink}"
+                values={{
+                  learnMoreLink: (
+                    <EuiLink
+                      href={documentationService.getDataStreamsDocumentationLink()}
+                      target="_blank"
+                      external
+                    >
+                      {i18n.translate('xpack.idxMgmt.dataStreamListDescription.learnMoreLinkText', {
+                        defaultMessage: 'Learn more.',
+                      })}
+                    </EuiLink>
+                  ),
+                }}
+              />
+            </EuiText>
+          </EuiFlexItem>
+
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiSwitch
+                  label={i18n.translate(
+                    'xpack.idxMgmt.dataStreamListControls.includeStatsSwitchLabel',
+                    {
+                      defaultMessage: 'Include stats',
+                    }
+                  )}
+                  checked={isIncludeStatsChecked}
+                  onChange={(e) => setIsIncludeStatsChecked(e.target.checked)}
+                  data-test-subj="includeStatsSwitch"
+                />
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <EuiIconTip
+                  content={i18n.translate(
+                    'xpack.idxMgmt.dataStreamListControls.includeStatsSwitchToolTip',
+                    {
+                      defaultMessage: 'Including stats can increase reload times',
+                    }
+                  )}
+                  position="top"
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
         <EuiSpacer size="l" />
 
@@ -166,6 +212,7 @@ export const DataStreamList: React.FunctionComponent<RouteComponentProps<MatchPa
           dataStreams={dataStreams}
           reload={reload}
           history={history as ScopedHistory}
+          includeStats={isIncludeStatsChecked}
         />
       </>
     );
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
index d1e093f1ffc83..a586e9495cf71 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/data_stream_table/data_stream_table.tsx
@@ -13,13 +13,16 @@ import { ScopedHistory } from 'kibana/public';
 import { DataStream } from '../../../../../../common/types';
 import { reactRouterNavigate } from '../../../../../shared_imports';
 import { encodePathForReactRouter } from '../../../../services/routing';
+import { DataHealth } from '../../../../components';
 import { Section } from '../../../home';
 import { DeleteDataStreamConfirmationModal } from '../delete_data_stream_confirmation_modal';
+import { humanizeTimeStamp } from '../humanize_time_stamp';
 
 interface Props {
   dataStreams?: DataStream[];
   reload: () => {};
   history: ScopedHistory;
+  includeStats: boolean;
   filters?: string;
 }
 
@@ -28,76 +31,118 @@ export const DataStreamTable: React.FunctionComponent<Props> = ({
   reload,
   history,
   filters,
+  includeStats,
 }) => {
   const [selection, setSelection] = useState<DataStream[]>([]);
   const [dataStreamsToDelete, setDataStreamsToDelete] = useState<string[]>([]);
 
-  const columns: Array<EuiBasicTableColumn<DataStream>> = [
-    {
-      field: 'name',
-      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.nameColumnTitle', {
-        defaultMessage: 'Name',
-      }),
-      truncateText: true,
-      sortable: true,
-      render: (name: DataStream['name'], item: DataStream) => {
-        return (
-          <EuiLink
-            data-test-subj="nameLink"
-            {...reactRouterNavigate(history, {
-              pathname: `/${Section.DataStreams}/${encodePathForReactRouter(name)}`,
-            })}
-          >
-            {name}
-          </EuiLink>
-        );
-      },
-    },
-    {
-      field: 'indices',
-      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.indicesColumnTitle', {
-        defaultMessage: 'Indices',
-      }),
-      truncateText: true,
-      sortable: true,
-      render: (indices: DataStream['indices'], dataStream) => (
+  const columns: Array<EuiBasicTableColumn<DataStream>> = [];
+
+  columns.push({
+    field: 'name',
+    name: i18n.translate('xpack.idxMgmt.dataStreamList.table.nameColumnTitle', {
+      defaultMessage: 'Name',
+    }),
+    truncateText: true,
+    sortable: true,
+    render: (name: DataStream['name'], item: DataStream) => {
+      return (
         <EuiLink
-          data-test-subj="indicesLink"
+          data-test-subj="nameLink"
           {...reactRouterNavigate(history, {
-            pathname: '/indices',
-            search: `includeHiddenIndices=true&filter=data_stream=${encodePathForReactRouter(
-              dataStream.name
-            )}`,
+            pathname: `/${Section.DataStreams}/${encodePathForReactRouter(name)}`,
           })}
         >
-          {indices.length}
+          {name}
         </EuiLink>
-      ),
+      );
     },
-    {
-      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionColumnTitle', {
-        defaultMessage: 'Actions',
+  });
+
+  columns.push({
+    field: 'health',
+    name: i18n.translate('xpack.idxMgmt.dataStreamList.table.healthColumnTitle', {
+      defaultMessage: 'Health',
+    }),
+    truncateText: true,
+    sortable: true,
+    render: (health: DataStream['health']) => {
+      return <DataHealth health={health} />;
+    },
+  });
+
+  if (includeStats) {
+    columns.push({
+      field: 'maxTimeStamp',
+      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.maxTimeStampColumnTitle', {
+        defaultMessage: 'Last updated',
       }),
-      actions: [
-        {
-          name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteText', {
-            defaultMessage: 'Delete',
-          }),
-          description: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteDecription', {
-            defaultMessage: 'Delete this data stream',
-          }),
-          icon: 'trash',
-          color: 'danger',
-          type: 'icon',
-          onClick: ({ name }: DataStream) => {
-            setDataStreamsToDelete([name]);
-          },
-          isPrimary: true,
-          'data-test-subj': 'deleteDataStream',
+      width: '300px',
+      truncateText: true,
+      sortable: true,
+      render: (maxTimeStamp: DataStream['maxTimeStamp']) =>
+        maxTimeStamp
+          ? humanizeTimeStamp(maxTimeStamp)
+          : i18n.translate('xpack.idxMgmt.dataStreamList.table.maxTimeStampColumnNoneMessage', {
+              defaultMessage: 'Never',
+            }),
+    });
+
+    columns.push({
+      field: 'storageSize',
+      name: i18n.translate('xpack.idxMgmt.dataStreamList.table.storageSizeColumnTitle', {
+        defaultMessage: 'Storage size',
+      }),
+      truncateText: true,
+      sortable: true,
+    });
+  }
+
+  columns.push({
+    field: 'indices',
+    name: i18n.translate('xpack.idxMgmt.dataStreamList.table.indicesColumnTitle', {
+      defaultMessage: 'Indices',
+    }),
+    truncateText: true,
+    sortable: true,
+    render: (indices: DataStream['indices'], dataStream) => (
+      <EuiLink
+        data-test-subj="indicesLink"
+        {...reactRouterNavigate(history, {
+          pathname: '/indices',
+          search: `includeHiddenIndices=true&filter=data_stream=${encodePathForReactRouter(
+            dataStream.name
+          )}`,
+        })}
+      >
+        {indices.length}
+      </EuiLink>
+    ),
+  });
+
+  columns.push({
+    name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionColumnTitle', {
+      defaultMessage: 'Actions',
+    }),
+    actions: [
+      {
+        name: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteText', {
+          defaultMessage: 'Delete',
+        }),
+        description: i18n.translate('xpack.idxMgmt.dataStreamList.table.actionDeleteDecription', {
+          defaultMessage: 'Delete this data stream',
+        }),
+        icon: 'trash',
+        color: 'danger',
+        type: 'icon',
+        onClick: ({ name }: DataStream) => {
+          setDataStreamsToDelete([name]);
         },
-      ],
-    },
-  ];
+        isPrimary: true,
+        'data-test-subj': 'deleteDataStream',
+      },
+    ],
+  });
 
   const pagination = {
     initialPageSize: 20,
diff --git a/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/humanize_time_stamp.ts b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/humanize_time_stamp.ts
new file mode 100644
index 0000000000000..b346f82890179
--- /dev/null
+++ b/x-pack/plugins/index_management/public/application/sections/home/data_stream_list/humanize_time_stamp.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import moment from 'moment';
+
+export const humanizeTimeStamp = (timeStamp: number): string =>
+  moment(timeStamp).format('MMMM Do, YYYY h:mm:ss A');
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
index 2fda71035fb58..6b3c83daa28a8 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
@@ -10,7 +10,6 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
-  EuiHealth,
   EuiDescriptionList,
   EuiHorizontalRule,
   EuiDescriptionListTitle,
@@ -18,7 +17,7 @@ import {
   EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
-import { healthToColor } from '../../../../../services';
+import { DataHealth } from '../../../../../components';
 import { AppContextConsumer } from '../../../../../app_context';
 
 const getHeaders = () => {
@@ -78,7 +77,7 @@ export class Summary extends React.PureComponent {
       const value = index[fieldName];
       let content = value;
       if (fieldName === 'health') {
-        content = <EuiHealth color={healthToColor(value)}>{value}</EuiHealth>;
+        content = <DataHealth health={value} />;
       }
       if (Array.isArray(content)) {
         content = content.join(', ');
diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
index 85a8571c1e725..b4e003b667074 100644
--- a/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
+++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
@@ -13,7 +13,6 @@ import qs from 'query-string';
 import {
   EuiButton,
   EuiCallOut,
-  EuiHealth,
   EuiLink,
   EuiCheckbox,
   EuiFlexGroup,
@@ -38,12 +37,11 @@ import {
 import { UIM_SHOW_DETAILS_CLICK } from '../../../../../../common/constants';
 import { reactRouterNavigate } from '../../../../../shared_imports';
 import { REFRESH_RATE_INDEX_LIST } from '../../../../constants';
-import { healthToColor } from '../../../../services';
 import { encodePathForReactRouter } from '../../../../services/routing';
 import { documentationService } from '../../../../services/documentation';
 import { AppContextConsumer } from '../../../../app_context';
 import { renderBadges } from '../../../../lib/render_badges';
-import { NoMatch, PageErrorForbidden } from '../../../../components';
+import { NoMatch, PageErrorForbidden, DataHealth } from '../../../../components';
 import { IndexActionsContextMenu } from '../index_actions_context_menu';
 
 const HEADERS = {
@@ -260,7 +258,7 @@ export class IndexTable extends Component {
     const { openDetailPanel, filterChanged, history } = this.props;
 
     if (fieldName === 'health') {
-      return <EuiHealth color={healthToColor(value)}>{value}</EuiHealth>;
+      return <DataHealth health={value} />;
     } else if (fieldName === 'name') {
       return (
         <Fragment>
diff --git a/x-pack/plugins/index_management/public/application/services/api.ts b/x-pack/plugins/index_management/public/application/services/api.ts
index 546a0115ee4a9..35ded3ea73d91 100644
--- a/x-pack/plugins/index_management/public/application/services/api.ts
+++ b/x-pack/plugins/index_management/public/application/services/api.ts
@@ -47,10 +47,13 @@ export const setUiMetricService = (_uiMetricService: UiMetricService<IndexMgmtMe
 };
 // End hack
 
-export function useLoadDataStreams() {
+export function useLoadDataStreams({ includeStats }: { includeStats: boolean }) {
   return useRequest<DataStream[]>({
     path: `${API_BASE_PATH}/data_streams`,
     method: 'get',
+    query: {
+      includeStats,
+    },
   });
 }
 
diff --git a/x-pack/plugins/index_management/public/application/services/index.ts b/x-pack/plugins/index_management/public/application/services/index.ts
index a78e0bac14ae1..86c11b4a9c1eb 100644
--- a/x-pack/plugins/index_management/public/application/services/index.ts
+++ b/x-pack/plugins/index_management/public/application/services/index.ts
@@ -24,7 +24,6 @@ export {
   useLoadIndexTemplates,
   simulateIndexTemplate,
 } from './api';
-export { healthToColor } from './health_to_color';
 export { sortTable } from './sort_table';
 
 export { UiMetricService } from './ui_metric';
diff --git a/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts b/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
index b91c7b4650180..34edcb6fb7477 100644
--- a/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
+++ b/x-pack/plugins/index_management/server/routes/api/data_streams/register_get_route.ts
@@ -10,19 +10,52 @@ import { deserializeDataStream, deserializeDataStreamList } from '../../../../co
 import { RouteDependencies } from '../../../types';
 import { addBasePath } from '../index';
 
+const querySchema = schema.object({
+  includeStats: schema.maybe(schema.oneOf([schema.literal('true'), schema.literal('false')])),
+});
+
 export function registerGetAllRoute({ router, license, lib: { isEsError } }: RouteDependencies) {
   router.get(
-    { path: addBasePath('/data_streams'), validate: false },
+    { path: addBasePath('/data_streams'), validate: { query: querySchema } },
     license.guardApiRoute(async (ctx, req, res) => {
       const { callAsCurrentUser } = ctx.dataManagement!.client;
 
+      const includeStats = (req.query as TypeOf<typeof querySchema>).includeStats === 'true';
+
       try {
         const { data_streams: dataStreams } = await callAsCurrentUser(
           'dataManagement.getDataStreams'
         );
-        const body = deserializeDataStreamList(dataStreams);
 
-        return res.ok({ body });
+        if (includeStats) {
+          const {
+            data_streams: dataStreamsStats,
+          } = await ctx.core.elasticsearch.legacy.client.callAsCurrentUser('transport.request', {
+            path: '/_data_stream/*/_stats',
+            method: 'GET',
+            query: {
+              human: true,
+            },
+          });
+
+          // Merge stats into data streams.
+          for (let i = 0; i < dataStreams.length; i++) {
+            const dataStream = dataStreams[i];
+
+            // eslint-disable-next-line @typescript-eslint/naming-convention
+            const { store_size, maximum_timestamp } = dataStreamsStats.find(
+              ({ data_stream: statsName }: { data_stream: string }) => statsName === dataStream.name
+            );
+
+            dataStreams[i] = {
+              ...dataStream,
+              store_size,
+              maximum_timestamp,
+            };
+          }
+        }
+
+        return res.ok({ body: deserializeDataStreamList(dataStreams) });
       } catch (error) {
         if (isEsError(error)) {
           return res.customError({
@@ -52,12 +85,28 @@ export function registerGetOneRoute({ router, license, lib: { isEsError } }: Rou
       const { callAsCurrentUser } = ctx.dataManagement!.client;
 
       try {
-        const { data_streams: dataStream } = await callAsCurrentUser(
-          'dataManagement.getDataStream',
-          { name }
-        );
+        const [
+          { data_streams: dataStream },
+          { data_streams: dataStreamsStats },
+        ] = await Promise.all([
+          callAsCurrentUser('dataManagement.getDataStream', { name }),
+          ctx.core.elasticsearch.legacy.client.callAsCurrentUser('transport.request', {
+            path: `/_data_stream/${name}/_stats`,
+            method: 'GET',
+            query: {
+              human: true,
+            },
+          }),
+        ]);
 
         if (dataStream[0]) {
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          const { store_size, maximum_timestamp } = dataStreamsStats[0];
+          dataStream[0] = {
+            ...dataStream[0],
+            store_size,
+            maximum_timestamp,
+          };
           const body = deserializeDataStream(dataStream[0]);
           return res.ok({ body });
         }
diff --git a/x-pack/test/api_integration/apis/management/index_management/data_streams.ts b/x-pack/test/api_integration/apis/management/index_management/data_streams.ts
index f8ddca374209b..f4b947336e044 100644
--- a/x-pack/test/api_integration/apis/management/index_management/data_streams.ts
+++ b/x-pack/test/api_integration/apis/management/index_management/data_streams.ts
@@ -51,6 +51,14 @@ export default function ({ getService }: FtrProviderContext) {
     await deleteComposableIndexTemplate(name);
   };
 
+  const assertDataStreamStorageSizeExists = (storageSize: string) => {
+    // Storage size of a document doesn't like it would be deterministic (could vary depending
+    // on how ES, Lucene, and the file system interact), so we'll just assert its presence and
+    // type.
+    expect(storageSize).to.be.ok();
+    expect(typeof storageSize).to.be('string');
+  };
+
   describe('Data streams', function () {
     describe('Get', () => {
       const testDataStreamName = 'test-data-stream';
@@ -77,10 +85,40 @@ export default function ({ getService }: FtrProviderContext) {
               },
             ],
             generation: 1,
+            health: 'yellow',
+            indexTemplateName: testDataStreamName,
           },
         ]);
       });
 
+      it('includes stats when provided the includeStats query parameter', async () => {
+        const { body: dataStreams } = await supertest
+          .get(`${API_BASE_PATH}/data_streams?includeStats=true`)
+          .set('kbn-xsrf', 'xxx')
+          .expect(200);
+
+        // ES determines these values so we'll just echo them back.
+        const { name: indexName, uuid } = dataStreams[0].indices[0];
+        const { storageSize, ...dataStreamWithoutStorageSize } = dataStreams[0];
+        assertDataStreamStorageSizeExists(storageSize);
+
+        expect(dataStreams.length).to.be(1);
+        expect(dataStreamWithoutStorageSize).to.eql({
+          name: testDataStreamName,
+          timeStampField: { name: '@timestamp' },
+          indices: [
+            {
+              name: indexName,
+              uuid,
+            },
+          ],
+          generation: 1,
+          health: 'yellow',
+          indexTemplateName: testDataStreamName,
+          maxTimeStamp: 0,
+        });
+      });
+
       it('returns a single data stream by ID', async () => {
         const { body: dataStream } = await supertest
           .get(`${API_BASE_PATH}/data_streams/${testDataStreamName}`)
@@ -89,7 +127,10 @@ export default function ({ getService }: FtrProviderContext) {
 
         // ES determines these values so we'll just echo them back.
         const { name: indexName, uuid } = dataStream.indices[0];
-        expect(dataStream).to.eql({
+        const { storageSize, ...dataStreamWithoutStorageSize } = dataStream;
+        assertDataStreamStorageSizeExists(storageSize);
+
+        expect(dataStreamWithoutStorageSize).to.eql({
           name: testDataStreamName,
           timeStampField: { name: '@timestamp' },
           indices: [
@@ -99,6 +140,9 @@ export default function ({ getService }: FtrProviderContext) {
             },
           ],
           generation: 1,
+          health: 'yellow',
+          indexTemplateName: testDataStreamName,
+          maxTimeStamp: 0,
         });
       });
     });

From f7cfceae1c5ccc0e026e1c7ba5b675ab09222f7b Mon Sep 17 00:00:00 2001
From: Luke Elmers <luke.elmers@elastic.co>
Date: Fri, 21 Aug 2020 19:27:34 -0600
Subject: [PATCH 23/25] [@elastic/datemath] Remove build step from datemath
 package. (#75505)

* Remove build step from datemath.

* Remove outdated docs reference to datemath.

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../contributing/development-tests.asciidoc    |  2 +-
 packages/elastic-datemath/.babelrc             |  4 ----
 packages/elastic-datemath/.npmignore           |  4 ----
 packages/elastic-datemath/__tests__/index.js   |  8 ++++----
 packages/elastic-datemath/{src => }/index.d.ts |  0
 packages/elastic-datemath/{src => }/index.js   |  4 ++--
 packages/elastic-datemath/package.json         | 18 ++----------------
 packages/elastic-datemath/tsconfig.json        |  8 ++------
 packages/elastic-datemath/yarn.lock            |  1 -
 9 files changed, 11 insertions(+), 38 deletions(-)
 delete mode 100644 packages/elastic-datemath/.babelrc
 rename packages/elastic-datemath/{src => }/index.d.ts (100%)
 rename packages/elastic-datemath/{src => }/index.js (98%)
 delete mode 120000 packages/elastic-datemath/yarn.lock

diff --git a/docs/developer/contributing/development-tests.asciidoc b/docs/developer/contributing/development-tests.asciidoc
index 2e40f664faba9..e4bd49e12101b 100644
--- a/docs/developer/contributing/development-tests.asciidoc
+++ b/docs/developer/contributing/development-tests.asciidoc
@@ -20,7 +20,7 @@ root)
 |`yarn test:jest_integration -t regexp [test path]`
 
 |Mocha
-|`src/**/__tests__/**/*.js` `!src/**/public/__tests__/*.js``packages/kbn-datemath/test/**/*.js` `packages/kbn-dev-utils/src/**/__tests__/**/*.js` `tasks/**/__tests__/**/*.js`
+|`src/**/__tests__/**/*.js` `!src/**/public/__tests__/*.js` `packages/kbn-dev-utils/src/**/__tests__/**/*.js` `tasks/**/__tests__/**/*.js`
 |`node scripts/mocha --grep=regexp [test path]`
 
 |Functional
diff --git a/packages/elastic-datemath/.babelrc b/packages/elastic-datemath/.babelrc
deleted file mode 100644
index 64daee413aeb3..0000000000000
--- a/packages/elastic-datemath/.babelrc
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "presets": ["@babel/preset-env"],
-  "plugins": ["add-module-exports"]
-}
diff --git a/packages/elastic-datemath/.npmignore b/packages/elastic-datemath/.npmignore
index a56a2f3ff793e..591be7afd1669 100644
--- a/packages/elastic-datemath/.npmignore
+++ b/packages/elastic-datemath/.npmignore
@@ -1,6 +1,2 @@
-/src
-/test
 /tsconfig.json
-/.babelrc
-/yarn.lock
 /__tests__
diff --git a/packages/elastic-datemath/__tests__/index.js b/packages/elastic-datemath/__tests__/index.js
index 8f06ff0ab4aad..1a61021b48a6e 100644
--- a/packages/elastic-datemath/__tests__/index.js
+++ b/packages/elastic-datemath/__tests__/index.js
@@ -17,10 +17,10 @@
  * under the License.
  */
 
-import dateMath from '../src';
-import moment from 'moment';
-import sinon from 'sinon';
-import expect from '@kbn/expect';
+const dateMath = require('../index');
+const moment = require('moment');
+const sinon = require('sinon');
+const expect = require('@kbn/expect');
 
 /**
  * Require a new instance of the moment library, bypassing the require cache.
diff --git a/packages/elastic-datemath/src/index.d.ts b/packages/elastic-datemath/index.d.ts
similarity index 100%
rename from packages/elastic-datemath/src/index.d.ts
rename to packages/elastic-datemath/index.d.ts
diff --git a/packages/elastic-datemath/src/index.js b/packages/elastic-datemath/index.js
similarity index 98%
rename from packages/elastic-datemath/src/index.js
rename to packages/elastic-datemath/index.js
index 52ce12ddf7027..8a69d251d057d 100644
--- a/packages/elastic-datemath/src/index.js
+++ b/packages/elastic-datemath/index.js
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import moment from 'moment';
+const moment = require('moment');
 
 const unitsMap = {
   ms: { weight: 1, type: 'fixed', base: 1 },
@@ -151,7 +151,7 @@ function parseDateMath(mathString, time, roundUp) {
   return dateTime;
 }
 
-export default {
+module.exports = {
   parse: parse,
   unitsMap: Object.freeze(unitsMap),
   units: Object.freeze(units),
diff --git a/packages/elastic-datemath/package.json b/packages/elastic-datemath/package.json
index ad4190f981439..04bb96206e47e 100644
--- a/packages/elastic-datemath/package.json
+++ b/packages/elastic-datemath/package.json
@@ -3,22 +3,8 @@
   "version": "5.0.3",
   "description": "elasticsearch datemath parser, used in kibana",
   "license": "Apache-2.0",
-  "main": "target/index.js",
-  "typings": "target/index.d.ts",
-  "scripts": {
-    "build": "babel src --out-dir target --copy-files",
-    "kbn:bootstrap": "yarn build --quiet",
-    "kbn:watch": "yarn build --watch"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.10.5",
-    "@babel/preset-env": "^7.11.0",
-    "babel-plugin-add-module-exports": "^1.0.2",
-    "moment": "^2.24.0"
-  },
-  "dependencies": {
-    "tslib": "^2.0.0"
-  },
+  "main": "index.js",
+  "typings": "index.d.ts",
   "peerDependencies": {
     "moment": "^2.24.0"
   }
diff --git a/packages/elastic-datemath/tsconfig.json b/packages/elastic-datemath/tsconfig.json
index c23b6635a5c19..3604f1004cf6c 100644
--- a/packages/elastic-datemath/tsconfig.json
+++ b/packages/elastic-datemath/tsconfig.json
@@ -1,10 +1,6 @@
 {
   "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "./target"
-  },
   "include": [
-    "./src/**/*.ts"
-  ]
+    "index.d.ts"
+  ],
 }
diff --git a/packages/elastic-datemath/yarn.lock b/packages/elastic-datemath/yarn.lock
deleted file mode 120000
index 3f82ebc9cdbae..0000000000000
--- a/packages/elastic-datemath/yarn.lock
+++ /dev/null
@@ -1 +0,0 @@
-../../yarn.lock
\ No newline at end of file

From 6dbc4be8f7f418315a96532562fad683c7a493d4 Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <189600+XavierM@users.noreply.github.com>
Date: Sat, 22 Aug 2020 08:59:14 -0400
Subject: [PATCH 24/25] [SECURITY SOLUTION] Add our first search strategy for
 all host query (#75439)

* add security solution search strategy on server side

* get security solution search strategy in the public app for all host

* fix types

* fix Check core API changes

* thank you cypress test

* Remove any by the right type IESearchRequest

Co-authored-by: Lukas Olson <olson.lukas@gmail.com>

* add translation and filter error when we abort the query

* pr review

* fix translation

* review II

* fix merge issue

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Co-authored-by: Lukas Olson <olson.lukas@gmail.com>
---
 ...kibana-plugin-core-public.doclinksstart.md |   2 +-
 ...n-plugins-data-public.iessearchresponse.md |   4 +-
 ...ta-public.iessearchresponse.rawresponse.md |   2 +-
 ...ugin-plugins-data-public.isearchgeneric.md |   2 +-
 ...n-plugins-data-server.iessearchresponse.md |   4 +-
 ...ta-server.iessearchresponse.rawresponse.md |   2 +-
 ...plugin-plugins-data-server.isearchsetup.md |   2 +-
 ...ver.isearchsetup.registersearchstrategy.md |   2 +-
 ...a-server.isearchstart.getsearchstrategy.md |   2 +-
 ...plugin-plugins-data-server.isearchstart.md |   4 +-
 ...gin-plugins-data-server.isearchstrategy.md |   4 +-
 ...gins-data-server.isearchstrategy.search.md |   2 +-
 ...plugin-plugins-data-server.plugin.start.md |   4 +-
 .../data/common/search/es_search/types.ts     |   4 +-
 src/plugins/data/public/public.api.md         |   6 +-
 .../data/public/search/search_interceptor.ts  |   2 +-
 .../data/public/search/search_service.ts      |   4 +-
 src/plugins/data/public/search/types.ts       |   9 +-
 src/plugins/data/server/search/routes.test.ts |   4 +-
 src/plugins/data/server/search/routes.ts      |  12 +-
 .../data/server/search/search_service.ts      |  19 +-
 src/plugins/data/server/search/types.ts       |  26 +-
 src/plugins/data/server/server.api.md         |  16 +-
 .../public/search/search_interceptor.ts       |   2 +-
 .../common/ecs/auditd/index.ts                |  45 +++
 .../common/ecs/cloud/index.ts                 |  20 ++
 .../common/ecs/destination/index.ts           |  21 ++
 .../security_solution/common/ecs/dns/index.ts |  19 +
 .../common/ecs/endgame/index.ts               |  33 ++
 .../common/ecs/event/index.ts                 |  45 +++
 .../common/ecs/file/index.ts                  |  37 ++
 .../security_solution/common/ecs/geo/index.ts |  27 ++
 .../common/ecs/host/index.ts                  |  35 ++
 .../common/ecs/http/index.ts                  |  37 ++
 .../security_solution/common/ecs/index.ts     |  78 +++++
 .../common/ecs/network/index.ts               |  19 +
 .../common/ecs/process/index.ts               |  39 +++
 .../common/ecs/rule/index.ts                  |  69 ++++
 .../common/ecs/signal/index.ts                |  13 +
 .../common/ecs/source/index.ts                |  21 ++
 .../common/ecs/suricata/index.ts              |  23 ++
 .../common/ecs/system/index.ts                |  39 +++
 .../security_solution/common/ecs/tls/index.ts |  33 ++
 .../security_solution/common/ecs/url/index.ts |  15 +
 .../common/ecs/user/index.ts                  |  21 ++
 .../common/ecs/winlog/index.ts                |   9 +
 .../common/ecs/zeek/index.ts                  | 133 +++++++
 .../security_solution/hosts/index.ts          |  84 +++++
 .../security_solution/index.ts                | 109 ++++++
 .../public/hosts/containers/hosts/index.tsx   | 324 ++++++++++--------
 .../hosts/containers/hosts/translations.ts    |  21 ++
 .../pages/navigation/hosts_query_tab_body.tsx |  56 ++-
 .../security_solution/server/plugin.ts        |  13 +
 .../hosts/dsl/query.detail_host.dsl.ts        |  49 +++
 .../factory/hosts/dsl/query.hosts.dsl.ts      |  89 +++++
 .../dsl/query.last_first_seen_host.dsl.ts     |  35 ++
 .../factory/hosts/helpers.ts                  | 115 +++++++
 .../security_solution/factory/hosts/index.ts  |  92 +++++
 .../security_solution/factory/index.ts        |  17 +
 .../security_solution/factory/types.ts        |  23 ++
 .../security_solution/index.ts                |  38 ++
 .../server/utils/build_query/filters.ts       |   2 +-
 .../server/utils/build_query/index.ts         |   2 +-
 63 files changed, 1802 insertions(+), 238 deletions(-)
 create mode 100644 x-pack/plugins/security_solution/common/ecs/auditd/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/cloud/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/destination/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/dns/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/endgame/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/event/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/file/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/geo/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/host/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/http/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/network/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/process/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/rule/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/signal/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/source/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/suricata/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/system/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/tls/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/url/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/user/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/winlog/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/ecs/zeek/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/index.ts
 create mode 100644 x-pack/plugins/security_solution/common/search_strategy/security_solution/index.ts
 create mode 100644 x-pack/plugins/security_solution/public/hosts/containers/hosts/translations.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.detail_host.dsl.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.hosts.dsl.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.last_first_seen_host.dsl.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/helpers.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/index.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/index.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/types.ts
 create mode 100644 x-pack/plugins/security_solution/server/search_strategy/security_solution/index.ts

diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
index fa2d9090e3159..4644dc432bc9a 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
@@ -17,5 +17,5 @@ export interface DocLinksStart
 |  --- | --- | --- |
 |  [DOC\_LINK\_VERSION](./kibana-plugin-core-public.doclinksstart.doc_link_version.md) | <code>string</code> |  |
 |  [ELASTIC\_WEBSITE\_URL](./kibana-plugin-core-public.doclinksstart.elastic_website_url.md) | <code>string</code> |  |
-|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly drilldowns: string;</code><br/><code>        };</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly loadingData: string;</code><br/><code>            readonly introduction: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly siem: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>    }</code> |  |
+|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly drilldowns: string;</code><br/><code>        };</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly loadingData: string;</code><br/><code>            readonly introduction: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly siem: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>    }</code> |  |
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.md
index 041d79de3282e..7c9a6aa702463 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-export interface IEsSearchResponse extends IKibanaSearchResponse 
+export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse 
 ```
 
 ## Properties
@@ -16,5 +16,5 @@ export interface IEsSearchResponse extends IKibanaSearchResponse
 |  --- | --- | --- |
 |  [isPartial](./kibana-plugin-plugins-data-public.iessearchresponse.ispartial.md) | <code>boolean</code> | Indicates whether the results returned are complete or partial |
 |  [isRunning](./kibana-plugin-plugins-data-public.iessearchresponse.isrunning.md) | <code>boolean</code> | Indicates whether async search is still in flight |
-|  [rawResponse](./kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md) | <code>SearchResponse&lt;any&gt;</code> |  |
+|  [rawResponse](./kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md) | <code>SearchResponse&lt;Source&gt;</code> |  |
 
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md
index d7912f377ca9f..f4648143ebc2e 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.iessearchresponse.rawresponse.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-rawResponse: SearchResponse<any>;
+rawResponse: SearchResponse<Source>;
 ```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.isearchgeneric.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.isearchgeneric.md
index 3bd6a398c8df5..861b59e73ef04 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.isearchgeneric.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.isearchgeneric.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-export declare type ISearchGeneric = (request: IEsSearchRequest, options?: ISearchOptions) => Observable<IEsSearchResponse>;
+export declare type ISearchGeneric = <SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse>(request: SearchStrategyRequest, options?: ISearchOptions) => Observable<SearchStrategyResponse>;
 ```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.md
index 0407dce5fe418..55c0399e90e2f 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-export interface IEsSearchResponse extends IKibanaSearchResponse 
+export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse 
 ```
 
 ## Properties
@@ -16,5 +16,5 @@ export interface IEsSearchResponse extends IKibanaSearchResponse
 |  --- | --- | --- |
 |  [isPartial](./kibana-plugin-plugins-data-server.iessearchresponse.ispartial.md) | <code>boolean</code> | Indicates whether the results returned are complete or partial |
 |  [isRunning](./kibana-plugin-plugins-data-server.iessearchresponse.isrunning.md) | <code>boolean</code> | Indicates whether async search is still in flight |
-|  [rawResponse](./kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md) | <code>SearchResponse&lt;any&gt;</code> |  |
+|  [rawResponse](./kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md) | <code>SearchResponse&lt;Source&gt;</code> |  |
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md
index 0ee1691d0f697..9987debfa551c 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.iessearchresponse.rawresponse.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-rawResponse: SearchResponse<any>;
+rawResponse: SearchResponse<Source>;
 ```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.md
index e5b11a0b997ea..ac2ae13372f7a 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.md
@@ -15,6 +15,6 @@ export interface ISearchSetup
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [aggs](./kibana-plugin-plugins-data-server.isearchsetup.aggs.md) | <code>AggsSetup</code> |  |
-|  [registerSearchStrategy](./kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md) | <code>(name: string, strategy: ISearchStrategy) =&gt; void</code> | Extension point exposed for other plugins to register their own search strategies. |
+|  [registerSearchStrategy](./kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md) | <code>&lt;SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse&gt;(name: string, strategy: ISearchStrategy&lt;SearchStrategyRequest, SearchStrategyResponse&gt;) =&gt; void</code> | Extension point exposed for other plugins to register their own search strategies. |
 |  [usage](./kibana-plugin-plugins-data-server.isearchsetup.usage.md) | <code>SearchUsage</code> | Used internally for telemetry |
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md
index 73c575e7095ed..f20c6f4911062 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchsetup.registersearchstrategy.md
@@ -9,5 +9,5 @@ Extension point exposed for other plugins to register their own search strategie
 <b>Signature:</b>
 
 ```typescript
-registerSearchStrategy: (name: string, strategy: ISearchStrategy) => void;
+registerSearchStrategy: <SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse>(name: string, strategy: ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>) => void;
 ```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md
index 970b2811a574b..398ea21641942 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md
@@ -9,5 +9,5 @@ Get other registered search strategies. For example, if a new strategy needs to
 <b>Signature:</b>
 
 ```typescript
-getSearchStrategy: (name: string) => ISearchStrategy;
+getSearchStrategy: (name: string) => ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>;
 ```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.md
index 3762da963d4d9..62d954cb80eb7 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstart.md
@@ -7,7 +7,7 @@
 <b>Signature:</b>
 
 ```typescript
-export interface ISearchStart 
+export interface ISearchStart<SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse> 
 ```
 
 ## Properties
@@ -15,6 +15,6 @@ export interface ISearchStart
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [aggs](./kibana-plugin-plugins-data-server.isearchstart.aggs.md) | <code>AggsStart</code> |  |
-|  [getSearchStrategy](./kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md) | <code>(name: string) =&gt; ISearchStrategy</code> | Get other registered search strategies. For example, if a new strategy needs to use the already-registered ES search strategy, it can use this function to accomplish that. |
+|  [getSearchStrategy](./kibana-plugin-plugins-data-server.isearchstart.getsearchstrategy.md) | <code>(name: string) =&gt; ISearchStrategy&lt;SearchStrategyRequest, SearchStrategyResponse&gt;</code> | Get other registered search strategies. For example, if a new strategy needs to use the already-registered ES search strategy, it can use this function to accomplish that. |
 |  [search](./kibana-plugin-plugins-data-server.isearchstart.search.md) | <code>(context: RequestHandlerContext, request: IKibanaSearchRequest, options: ISearchOptions) =&gt; Promise&lt;IKibanaSearchResponse&gt;</code> |  |
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.md
index d54e027c4b847..dc076455ab272 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.md
@@ -9,7 +9,7 @@ Search strategy interface contains a search method that takes in a request and r
 <b>Signature:</b>
 
 ```typescript
-export interface ISearchStrategy 
+export interface ISearchStrategy<SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse> 
 ```
 
 ## Properties
@@ -17,5 +17,5 @@ export interface ISearchStrategy
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [cancel](./kibana-plugin-plugins-data-server.isearchstrategy.cancel.md) | <code>(context: RequestHandlerContext, id: string) =&gt; Promise&lt;void&gt;</code> |  |
-|  [search](./kibana-plugin-plugins-data-server.isearchstrategy.search.md) | <code>(context: RequestHandlerContext, request: IEsSearchRequest, options?: ISearchOptions) =&gt; Promise&lt;IEsSearchResponse&gt;</code> |  |
+|  [search](./kibana-plugin-plugins-data-server.isearchstrategy.search.md) | <code>(context: RequestHandlerContext, request: SearchStrategyRequest, options?: ISearchOptions) =&gt; Promise&lt;SearchStrategyResponse&gt;</code> |  |
 
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.search.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.search.md
index 1a225d0c9aeab..45f43648ab603 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.search.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.isearchstrategy.search.md
@@ -7,5 +7,5 @@
 <b>Signature:</b>
 
 ```typescript
-search: (context: RequestHandlerContext, request: IEsSearchRequest, options?: ISearchOptions) => Promise<IEsSearchResponse>;
+search: (context: RequestHandlerContext, request: SearchStrategyRequest, options?: ISearchOptions) => Promise<SearchStrategyResponse>;
 ```
diff --git a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
index 74bffc516725f..2d9104ef894bc 100644
--- a/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
+++ b/docs/development/plugins/data/server/kibana-plugin-plugins-data-server.plugin.start.md
@@ -8,7 +8,7 @@
 
 ```typescript
 start(core: CoreStart): {
-        search: ISearchStart;
+        search: ISearchStart<import(".").IEsSearchRequest, import(".").IEsSearchResponse<any>>;
         fieldFormats: {
             fieldFormatServiceFactory: (uiSettings: import("../../../core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
@@ -27,7 +27,7 @@ start(core: CoreStart): {
 <b>Returns:</b>
 
 `{
-        search: ISearchStart;
+        search: ISearchStart<import(".").IEsSearchRequest, import(".").IEsSearchResponse<any>>;
         fieldFormats: {
             fieldFormatServiceFactory: (uiSettings: import("../../../core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
diff --git a/src/plugins/data/common/search/es_search/types.ts b/src/plugins/data/common/search/es_search/types.ts
index 8853e40dd0ad2..654ed3899656d 100644
--- a/src/plugins/data/common/search/es_search/types.ts
+++ b/src/plugins/data/common/search/es_search/types.ts
@@ -31,7 +31,7 @@ export interface IEsSearchRequest extends IKibanaSearchRequest {
   indexType?: string;
 }
 
-export interface IEsSearchResponse extends IKibanaSearchResponse {
+export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse {
   /**
    * Indicates whether async search is still in flight
    */
@@ -40,5 +40,5 @@ export interface IEsSearchResponse extends IKibanaSearchResponse {
    * Indicates whether the results returned are complete or partial
    */
   isPartial?: boolean;
-  rawResponse: SearchResponse<any>;
+  rawResponse: SearchResponse<Source>;
 }
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index 7defddb8f570a..35ee1789b2fdf 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -791,11 +791,11 @@ export interface IEsSearchRequest extends IKibanaSearchRequest {
 // Warning: (ae-missing-release-tag) "IEsSearchResponse" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export interface IEsSearchResponse extends IKibanaSearchResponse {
+export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse {
     isPartial?: boolean;
     isRunning?: boolean;
     // (undocumented)
-    rawResponse: SearchResponse_2<any>;
+    rawResponse: SearchResponse_2<Source>;
 }
 
 // Warning: (ae-missing-release-tag) "IFieldFormat" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1240,7 +1240,7 @@ export type ISearch = (request: IKibanaSearchRequest, options?: ISearchOptions)
 // Warning: (ae-missing-release-tag) "ISearchGeneric" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type ISearchGeneric = (request: IEsSearchRequest, options?: ISearchOptions) => Observable<IEsSearchResponse>;
+export type ISearchGeneric = <SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse>(request: SearchStrategyRequest, options?: ISearchOptions) => Observable<SearchStrategyResponse>;
 
 // Warning: (ae-missing-release-tag) "ISearchOptions" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
diff --git a/src/plugins/data/public/search/search_interceptor.ts b/src/plugins/data/public/search/search_interceptor.ts
index 99fccda7fddf3..30e509edd4987 100644
--- a/src/plugins/data/public/search/search_interceptor.ts
+++ b/src/plugins/data/public/search/search_interceptor.ts
@@ -106,7 +106,7 @@ export class SearchInterceptor {
   ): Observable<IEsSearchResponse> {
     const { id, ...searchRequest } = request;
     const path = trimEnd(`/internal/search/${strategy || ES_SEARCH_STRATEGY}/${id || ''}`, '/');
-    const body = JSON.stringify(id != null ? {} : searchRequest);
+    const body = JSON.stringify(searchRequest);
     return from(
       this.deps.http.fetch({
         method: 'POST',
diff --git a/src/plugins/data/public/search/search_service.ts b/src/plugins/data/public/search/search_service.ts
index a65b2b4b71f20..9a30a15936fe5 100644
--- a/src/plugins/data/public/search/search_service.ts
+++ b/src/plugins/data/public/search/search_service.ts
@@ -103,9 +103,9 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
     { application, http, injectedMetadata, notifications, uiSettings }: CoreStart,
     { fieldFormats, indexPatterns }: SearchServiceStartDependencies
   ): ISearchStart {
-    const search: ISearchGeneric = (request, options) => {
+    const search = ((request, options) => {
       return this.searchInterceptor.search(request, options);
-    };
+    }) as ISearchGeneric;
 
     const legacySearch = {
       esClient: this.esClient!,
diff --git a/src/plugins/data/public/search/types.ts b/src/plugins/data/public/search/types.ts
index d1a4437943402..55726e40f5a77 100644
--- a/src/plugins/data/public/search/types.ts
+++ b/src/plugins/data/public/search/types.ts
@@ -43,10 +43,13 @@ export type ISearch = (
   options?: ISearchOptions
 ) => Observable<IKibanaSearchResponse>;
 
-export type ISearchGeneric = (
-  request: IEsSearchRequest,
+export type ISearchGeneric = <
+  SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+  SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+>(
+  request: SearchStrategyRequest,
   options?: ISearchOptions
-) => Observable<IEsSearchResponse>;
+) => Observable<SearchStrategyResponse>;
 
 export interface ISearchStartLegacy {
   esClient: LegacyApiCaller;
diff --git a/src/plugins/data/server/search/routes.test.ts b/src/plugins/data/server/search/routes.test.ts
index 167bd5af5d51d..d91aeee1fe818 100644
--- a/src/plugins/data/server/search/routes.test.ts
+++ b/src/plugins/data/server/search/routes.test.ts
@@ -36,7 +36,7 @@ describe('Search service', () => {
     const response = { id: 'yay' };
     mockDataStart.search.search.mockResolvedValue(response);
     const mockContext = {};
-    const mockBody = { params: {} };
+    const mockBody = { id: undefined, params: {} };
     const mockParams = { strategy: 'foo' };
     const mockRequest = httpServerMock.createKibanaRequest({
       body: mockBody,
@@ -67,7 +67,7 @@ describe('Search service', () => {
     });
 
     const mockContext = {};
-    const mockBody = { params: {} };
+    const mockBody = { id: undefined, params: {} };
     const mockParams = { strategy: 'foo' };
     const mockRequest = httpServerMock.createKibanaRequest({
       body: mockBody,
diff --git a/src/plugins/data/server/search/routes.ts b/src/plugins/data/server/search/routes.ts
index 32d8f8c1b09e0..3d813f745305f 100644
--- a/src/plugins/data/server/search/routes.ts
+++ b/src/plugins/data/server/search/routes.ts
@@ -47,10 +47,14 @@ export function registerSearchRoute(core: CoreSetup<object, DataPluginStart>): v
       const [, , selfStart] = await core.getStartServices();
 
       try {
-        const response = await selfStart.search.search(context, id ? { id } : searchRequest, {
-          signal,
-          strategy,
-        });
+        const response = await selfStart.search.search(
+          context,
+          { ...searchRequest, id },
+          {
+            signal,
+            strategy,
+          }
+        );
         return res.ok({ body: response });
       } catch (err) {
         return res.customError({
diff --git a/src/plugins/data/server/search/search_service.ts b/src/plugins/data/server/search/search_service.ts
index 5643406932552..cc23c455bed26 100644
--- a/src/plugins/data/server/search/search_service.ts
+++ b/src/plugins/data/server/search/search_service.ts
@@ -37,11 +37,12 @@ import { UsageCollectionSetup } from '../../../usage_collection/server';
 import { registerUsageCollector } from './collectors/register';
 import { usageProvider } from './collectors/usage';
 import { searchTelemetry } from '../saved_objects';
-import { IEsSearchRequest } from '../../common';
+import { IEsSearchRequest, IEsSearchResponse } from '../../common';
 
-interface StrategyMap {
-  [name: string]: ISearchStrategy;
-}
+type StrategyMap<
+  SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+  SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+> = Record<string, ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>>;
 
 /** @internal */
 export interface SearchServiceSetupDependencies {
@@ -56,7 +57,7 @@ export interface SearchServiceStartDependencies {
 
 export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
   private readonly aggsService = new AggsService();
-  private searchStrategies: StrategyMap = {};
+  private searchStrategies: StrategyMap<any, any> = {};
 
   constructor(
     private initializerContext: PluginInitializerContext,
@@ -125,7 +126,13 @@ export class SearchService implements Plugin<ISearchSetup, ISearchStart> {
     this.aggsService.stop();
   }
 
-  private registerSearchStrategy = (name: string, strategy: ISearchStrategy) => {
+  private registerSearchStrategy = <
+    SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+    SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+  >(
+    name: string,
+    strategy: ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>
+  ) => {
     this.logger.debug(`Register strategy ${name}`);
     this.searchStrategies[name] = strategy;
   };
diff --git a/src/plugins/data/server/search/types.ts b/src/plugins/data/server/search/types.ts
index fe54975d76624..56f803512aa19 100644
--- a/src/plugins/data/server/search/types.ts
+++ b/src/plugins/data/server/search/types.ts
@@ -37,7 +37,13 @@ export interface ISearchSetup {
    * Extension point exposed for other plugins to register their own search
    * strategies.
    */
-  registerSearchStrategy: (name: string, strategy: ISearchStrategy) => void;
+  registerSearchStrategy: <
+    SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+    SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+  >(
+    name: string,
+    strategy: ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>
+  ) => void;
 
   /**
    * Used internally for telemetry
@@ -45,13 +51,18 @@ export interface ISearchSetup {
   usage?: SearchUsage;
 }
 
-export interface ISearchStart {
+export interface ISearchStart<
+  SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+  SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+> {
   aggs: AggsStart;
   /**
    * Get other registered search strategies. For example, if a new strategy needs to use the
    * already-registered ES search strategy, it can use this function to accomplish that.
    */
-  getSearchStrategy: (name: string) => ISearchStrategy;
+  getSearchStrategy: (
+    name: string
+  ) => ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>;
   search: (
     context: RequestHandlerContext,
     request: IKibanaSearchRequest,
@@ -63,11 +74,14 @@ export interface ISearchStart {
  * Search strategy interface contains a search method that takes in a request and returns a promise
  * that resolves to a response.
  */
-export interface ISearchStrategy {
+export interface ISearchStrategy<
+  SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest,
+  SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse
+> {
   search: (
     context: RequestHandlerContext,
-    request: IEsSearchRequest,
+    request: SearchStrategyRequest,
     options?: ISearchOptions
-  ) => Promise<IEsSearchResponse>;
+  ) => Promise<SearchStrategyResponse>;
   cancel?: (context: RequestHandlerContext, id: string) => Promise<void>;
 }
diff --git a/src/plugins/data/server/server.api.md b/src/plugins/data/server/server.api.md
index f0a0d2763ff23..f870030ae9562 100644
--- a/src/plugins/data/server/server.api.md
+++ b/src/plugins/data/server/server.api.md
@@ -498,11 +498,11 @@ export interface IEsSearchRequest extends IKibanaSearchRequest {
 // Warning: (ae-missing-release-tag) "IEsSearchResponse" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export interface IEsSearchResponse extends IKibanaSearchResponse {
+export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse {
     isPartial?: boolean;
     isRunning?: boolean;
     // (undocumented)
-    rawResponse: SearchResponse<any>;
+    rawResponse: SearchResponse<Source>;
 }
 
 // Warning: (ae-missing-release-tag) "IFieldFormatsRegistry" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -689,19 +689,19 @@ export interface ISearchSetup {
     //
     // (undocumented)
     aggs: AggsSetup;
-    registerSearchStrategy: (name: string, strategy: ISearchStrategy) => void;
+    registerSearchStrategy: <SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse>(name: string, strategy: ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>) => void;
     usage?: SearchUsage;
 }
 
 // Warning: (ae-missing-release-tag) "ISearchStart" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export interface ISearchStart {
+export interface ISearchStart<SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse> {
     // Warning: (ae-forgotten-export) The symbol "AggsStart" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
     aggs: AggsStart;
-    getSearchStrategy: (name: string) => ISearchStrategy;
+    getSearchStrategy: (name: string) => ISearchStrategy<SearchStrategyRequest, SearchStrategyResponse>;
     // Warning: (ae-forgotten-export) The symbol "RequestHandlerContext" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -711,11 +711,11 @@ export interface ISearchStart {
 // Warning: (ae-missing-release-tag) "ISearchStrategy" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public
-export interface ISearchStrategy {
+export interface ISearchStrategy<SearchStrategyRequest extends IEsSearchRequest = IEsSearchRequest, SearchStrategyResponse extends IEsSearchResponse = IEsSearchResponse> {
     // (undocumented)
     cancel?: (context: RequestHandlerContext, id: string) => Promise<void>;
     // (undocumented)
-    search: (context: RequestHandlerContext, request: IEsSearchRequest, options?: ISearchOptions) => Promise<IEsSearchResponse>;
+    search: (context: RequestHandlerContext, request: SearchStrategyRequest, options?: ISearchOptions) => Promise<SearchStrategyResponse>;
 }
 
 // @public (undocumented)
@@ -862,7 +862,7 @@ export class Plugin implements Plugin_2<PluginSetup, PluginStart, DataPluginSetu
     };
     // (undocumented)
     start(core: CoreStart): {
-        search: ISearchStart;
+        search: ISearchStart<import(".").IEsSearchRequest, import(".").IEsSearchResponse<any>>;
         fieldFormats: {
             fieldFormatServiceFactory: (uiSettings: import("../../../core/server").IUiSettingsClient) => Promise<import("../common").FieldFormatsRegistry>;
         };
diff --git a/x-pack/plugins/data_enhanced/public/search/search_interceptor.ts b/x-pack/plugins/data_enhanced/public/search/search_interceptor.ts
index ae6dddf33536f..47099e32fcc72 100644
--- a/x-pack/plugins/data_enhanced/public/search/search_interceptor.ts
+++ b/x-pack/plugins/data_enhanced/public/search/search_interceptor.ts
@@ -96,7 +96,7 @@ export class EnhancedSearchInterceptor extends SearchInterceptor {
         return timer(pollInterval).pipe(
           // Send future requests using just the ID from the response
           mergeMap(() => {
-            return this.runSearch({ id }, combinedSignal, options?.strategy);
+            return this.runSearch({ ...request, id }, combinedSignal, options?.strategy);
           })
         );
       }),
diff --git a/x-pack/plugins/security_solution/common/ecs/auditd/index.ts b/x-pack/plugins/security_solution/common/ecs/auditd/index.ts
new file mode 100644
index 0000000000000..4b170eec98c02
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/auditd/index.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface AuditdEcs {
+  result?: string[];
+
+  session?: string[];
+
+  data?: AuditdDataEcs;
+
+  summary?: SummaryEcs;
+
+  sequence?: string[];
+}
+
+export interface AuditdDataEcs {
+  acct?: string[];
+
+  terminal?: string[];
+
+  op?: string[];
+}
+
+export interface SummaryEcs {
+  actor?: PrimarySecondaryEcs;
+
+  object?: PrimarySecondaryEcs;
+
+  how?: string[];
+
+  message_type?: string[];
+
+  sequence?: string[];
+}
+
+export interface PrimarySecondaryEcs {
+  primary?: string[];
+
+  secondary?: string[];
+
+  type?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/cloud/index.ts b/x-pack/plugins/security_solution/common/ecs/cloud/index.ts
new file mode 100644
index 0000000000000..812b30bcc13f1
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/cloud/index.ts
@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface CloudEcs {
+  instance?: CloudInstanceEcs;
+  machine?: CloudMachineEcs;
+  provider?: string[];
+  region?: string[];
+}
+
+export interface CloudMachineEcs {
+  type?: string[];
+}
+
+export interface CloudInstanceEcs {
+  id?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/destination/index.ts b/x-pack/plugins/security_solution/common/ecs/destination/index.ts
new file mode 100644
index 0000000000000..9b4038205350e
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/destination/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { GeoEcs } from '../geo';
+
+export interface DestinationEcs {
+  bytes?: number[];
+
+  ip?: string[];
+
+  port?: number[];
+
+  domain?: string[];
+
+  geo?: GeoEcs;
+
+  packets?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/dns/index.ts b/x-pack/plugins/security_solution/common/ecs/dns/index.ts
new file mode 100644
index 0000000000000..6844cd517aceb
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/dns/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface DnsEcs {
+  question?: DnsQuestionEcs;
+
+  resolved_ip?: string[];
+
+  response_code?: string[];
+}
+
+export interface DnsQuestionEcs {
+  name?: string[];
+
+  type?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/endgame/index.ts b/x-pack/plugins/security_solution/common/ecs/endgame/index.ts
new file mode 100644
index 0000000000000..f435db4f47810
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/endgame/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface EndgameEcs {
+  exit_code?: number;
+
+  file_name?: string;
+
+  file_path?: string;
+
+  logon_type?: number;
+
+  parent_process_name?: string;
+
+  pid?: number;
+
+  process_name?: string;
+
+  subject_domain_name?: string;
+
+  subject_logon_id?: string;
+
+  subject_user_name?: string;
+
+  target_domain_name?: string;
+
+  target_logon_id?: string;
+
+  target_user_name?: string;
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/event/index.ts b/x-pack/plugins/security_solution/common/ecs/event/index.ts
new file mode 100644
index 0000000000000..cb18a8c5881e8
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/event/index.ts
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface EventEcs {
+  action?: string[];
+
+  category?: string[];
+
+  code?: string[];
+
+  created?: string[];
+
+  dataset?: string[];
+
+  duration?: number[];
+
+  end?: string[];
+
+  hash?: string[];
+
+  id?: string[];
+
+  kind?: string[];
+
+  module?: string[];
+
+  original?: string[];
+
+  outcome?: string[];
+
+  risk_score?: number[];
+
+  risk_score_norm?: number[];
+
+  severity?: number[];
+
+  start?: string[];
+
+  timezone?: string[];
+
+  type?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/file/index.ts b/x-pack/plugins/security_solution/common/ecs/file/index.ts
new file mode 100644
index 0000000000000..808e9eaa3c854
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/file/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface FileEcs {
+  name?: string[];
+
+  path?: string[];
+
+  target_path?: string[];
+
+  extension?: string[];
+
+  type?: string[];
+
+  device?: string[];
+
+  inode?: string[];
+
+  uid?: string[];
+
+  owner?: string[];
+
+  gid?: string[];
+
+  group?: string[];
+
+  mode?: string[];
+
+  size?: number[];
+
+  mtime?: string[];
+
+  ctime?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/geo/index.ts b/x-pack/plugins/security_solution/common/ecs/geo/index.ts
new file mode 100644
index 0000000000000..409b5bbdc17a4
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/geo/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface GeoEcs {
+  city_name?: string[];
+
+  continent_name?: string[];
+
+  country_iso_code?: string[];
+
+  country_name?: string[];
+
+  location?: Location;
+
+  region_iso_code?: string[];
+
+  region_name?: string[];
+}
+
+export interface Location {
+  lon?: number[];
+
+  lat?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/host/index.ts b/x-pack/plugins/security_solution/common/ecs/host/index.ts
new file mode 100644
index 0000000000000..056291a70b62f
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/host/index.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface HostEcs {
+  architecture?: string[];
+
+  id?: string[];
+
+  ip?: string[];
+
+  mac?: string[];
+
+  name?: string[];
+
+  os?: OsEcs;
+
+  type?: string[];
+}
+
+export interface OsEcs {
+  platform?: string[];
+
+  name?: string[];
+
+  full?: string[];
+
+  family?: string[];
+
+  version?: string[];
+
+  kernel?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/http/index.ts b/x-pack/plugins/security_solution/common/ecs/http/index.ts
new file mode 100644
index 0000000000000..ff56d15e70bb3
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/http/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface HttpEcs {
+  version?: string[];
+
+  request?: HttpRequestData;
+
+  response?: HttpResponseData;
+}
+
+export interface HttpRequestData {
+  method?: string[];
+
+  body?: HttpBodyData;
+
+  referrer?: string[];
+
+  bytes?: number[];
+}
+
+export interface HttpBodyData {
+  content?: string[];
+
+  bytes?: number[];
+}
+
+export interface HttpResponseData {
+  status_code?: number[];
+
+  body?: HttpBodyData;
+
+  bytes?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/index.ts b/x-pack/plugins/security_solution/common/ecs/index.ts
new file mode 100644
index 0000000000000..ff21ebc5ef973
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AuditdEcs } from './auditd';
+import { DestinationEcs } from './destination';
+import { DnsEcs } from './dns';
+import { EndgameEcs } from './endgame';
+import { EventEcs } from './event';
+import { GeoEcs } from './geo';
+import { HostEcs } from './host';
+import { NetworkEcs } from './network';
+import { RuleEcs } from './rule';
+import { SignalEcs } from './signal';
+import { SourceEcs } from './source';
+import { SuricataEcs } from './suricata';
+import { TlsEcs } from './tls';
+import { ZeekEcs } from './zeek';
+import { HttpEcs } from './http';
+import { UrlEcs } from './url';
+import { UserEcs } from './user';
+import { WinlogEcs } from './winlog';
+import { ProcessEcs } from './process';
+import { SystemEcs } from './system';
+
+export interface Ecs {
+  _id: string;
+
+  _index?: string;
+
+  auditd?: AuditdEcs;
+
+  destination?: DestinationEcs;
+
+  dns?: DnsEcs;
+
+  endgame?: EndgameEcs;
+
+  event?: EventEcs;
+
+  geo?: GeoEcs;
+
+  host?: HostEcs;
+
+  network?: NetworkEcs;
+
+  rule?: RuleEcs;
+
+  signal?: SignalEcs;
+
+  source?: SourceEcs;
+
+  suricata?: SuricataEcs;
+
+  tls?: TlsEcs;
+
+  zeek?: ZeekEcs;
+
+  http?: HttpEcs;
+
+  url?: UrlEcs;
+
+  timestamp?: string;
+
+  message?: string[];
+
+  user?: UserEcs;
+
+  winlog?: WinlogEcs;
+
+  process?: ProcessEcs;
+
+  file?: File;
+
+  system?: SystemEcs;
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/network/index.ts b/x-pack/plugins/security_solution/common/ecs/network/index.ts
new file mode 100644
index 0000000000000..c2fc3cb4b9f48
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/network/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface NetworkEcs {
+  bytes?: number[];
+
+  community_id?: string[];
+
+  direction?: string[];
+
+  packets?: number[];
+
+  protocol?: string[];
+
+  transport?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/process/index.ts b/x-pack/plugins/security_solution/common/ecs/process/index.ts
new file mode 100644
index 0000000000000..0584d95c8059d
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/process/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface ProcessEcs {
+  hash?: ProcessHashData;
+
+  pid?: number[];
+
+  name?: string[];
+
+  ppid?: number[];
+
+  args?: string[];
+
+  executable?: string[];
+
+  title?: string[];
+
+  thread?: Thread;
+
+  working_directory?: string[];
+}
+
+export interface ProcessHashData {
+  md5?: string[];
+
+  sha1?: string[];
+
+  sha256?: string[];
+}
+
+export interface Thread {
+  id?: number[];
+
+  start?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/rule/index.ts b/x-pack/plugins/security_solution/common/ecs/rule/index.ts
new file mode 100644
index 0000000000000..c1ef1ee17ca0c
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/rule/index.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface RuleEcs {
+  id?: string[];
+
+  rule_id?: string[];
+
+  false_positives: string[];
+
+  saved_id?: string[];
+
+  timeline_id?: string[];
+
+  timeline_title?: string[];
+
+  max_signals?: number[];
+
+  risk_score?: string[];
+
+  output_index?: string[];
+
+  description?: string[];
+
+  from?: string[];
+
+  immutable?: boolean[];
+
+  index?: string[];
+
+  interval?: string[];
+
+  language?: string[];
+
+  query?: string[];
+
+  references?: string[];
+
+  severity?: string[];
+
+  tags?: string[];
+
+  threat?: unknown;
+
+  type?: string[];
+
+  size?: string[];
+
+  to?: string[];
+
+  enabled?: boolean[];
+
+  filters?: unknown;
+
+  created_at?: string[];
+
+  updated_at?: string[];
+
+  created_by?: string[];
+
+  updated_by?: string[];
+
+  version?: string[];
+
+  note?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/signal/index.ts b/x-pack/plugins/security_solution/common/ecs/signal/index.ts
new file mode 100644
index 0000000000000..66e35e26af341
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/signal/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { RuleEcs } from '../rule';
+
+export interface SignalEcs {
+  rule?: RuleEcs;
+
+  original_time?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/source/index.ts b/x-pack/plugins/security_solution/common/ecs/source/index.ts
new file mode 100644
index 0000000000000..9e6b6563cec68
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/source/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { GeoEcs } from '../geo';
+
+export interface SourceEcs {
+  bytes?: number[];
+
+  ip?: string[];
+
+  port?: number[];
+
+  domain?: string[];
+
+  geo?: GeoEcs;
+
+  packets?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/suricata/index.ts b/x-pack/plugins/security_solution/common/ecs/suricata/index.ts
new file mode 100644
index 0000000000000..53c193edddaf2
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/suricata/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface SuricataEcs {
+  eve?: SuricataEveData;
+}
+
+export interface SuricataEveData {
+  alert?: SuricataAlertData;
+
+  flow_id?: number[];
+
+  proto?: string[];
+}
+
+export interface SuricataAlertData {
+  signature?: string[];
+
+  signature_id?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/system/index.ts b/x-pack/plugins/security_solution/common/ecs/system/index.ts
new file mode 100644
index 0000000000000..803d8197080ff
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/system/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface SystemEcs {
+  audit?: AuditEcs;
+
+  auth?: AuthEcs;
+}
+
+export interface AuditEcs {
+  package?: PackageEcs;
+}
+
+export interface PackageEcs {
+  arch?: string[];
+
+  entity_id?: string[];
+
+  name?: string[];
+
+  size?: number[];
+
+  summary?: string[];
+
+  version?: string[];
+}
+
+export interface AuthEcs {
+  ssh?: SshEcs;
+}
+
+export interface SshEcs {
+  method?: string[];
+
+  signature?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/tls/index.ts b/x-pack/plugins/security_solution/common/ecs/tls/index.ts
new file mode 100644
index 0000000000000..86a2a1a9459a2
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/tls/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface TlsEcs {
+  client_certificate?: TlsClientCertificateData;
+
+  fingerprints?: TlsFingerprintsData;
+
+  server_certificate?: TlsServerCertificateData;
+}
+
+export interface TlsClientCertificateData {
+  fingerprint?: FingerprintData;
+}
+
+export interface FingerprintData {
+  sha1?: string[];
+}
+
+export interface TlsFingerprintsData {
+  ja3?: TlsJa3Data;
+}
+
+export interface TlsJa3Data {
+  hash?: string[];
+}
+
+export interface TlsServerCertificateData {
+  fingerprint?: FingerprintData;
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/url/index.ts b/x-pack/plugins/security_solution/common/ecs/url/index.ts
new file mode 100644
index 0000000000000..66033ea9f0725
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/url/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface UrlEcs {
+  domain?: string[];
+
+  original?: string[];
+
+  username?: string[];
+
+  password?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/user/index.ts b/x-pack/plugins/security_solution/common/ecs/user/index.ts
new file mode 100644
index 0000000000000..d72362d5f5cf9
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/user/index.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface UserEcs {
+  domain?: string[];
+
+  id?: string[];
+
+  name?: string[];
+
+  full_name?: string[];
+
+  email?: string[];
+
+  hash?: string[];
+
+  group?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/winlog/index.ts b/x-pack/plugins/security_solution/common/ecs/winlog/index.ts
new file mode 100644
index 0000000000000..a449fb9130e6f
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/winlog/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface WinlogEcs {
+  event_id?: number[];
+}
diff --git a/x-pack/plugins/security_solution/common/ecs/zeek/index.ts b/x-pack/plugins/security_solution/common/ecs/zeek/index.ts
new file mode 100644
index 0000000000000..289390a87db12
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/ecs/zeek/index.ts
@@ -0,0 +1,133 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export interface ZeekEcs {
+  session_id?: string[];
+
+  connection?: ZeekConnectionData;
+
+  notice?: ZeekNoticeData;
+
+  dns?: ZeekDnsData;
+
+  http?: ZeekHttpData;
+
+  files?: ZeekFileData;
+
+  ssl?: ZeekSslData;
+}
+
+export interface ZeekConnectionData {
+  local_resp?: boolean[];
+
+  local_orig?: boolean[];
+
+  missed_bytes?: number[];
+
+  state?: string[];
+
+  history?: string[];
+}
+
+export interface ZeekNoticeData {
+  suppress_for?: number[];
+
+  msg?: string[];
+
+  note?: string[];
+
+  sub?: string[];
+
+  dst?: string[];
+
+  dropped?: boolean[];
+
+  peer_descr?: string[];
+}
+
+export interface ZeekDnsData {
+  AA?: boolean[];
+
+  qclass_name?: string[];
+
+  RD?: boolean[];
+
+  qtype_name?: string[];
+
+  rejected?: boolean[];
+
+  qtype?: string[];
+
+  query?: string[];
+
+  trans_id?: number[];
+
+  qclass?: string[];
+
+  RA?: boolean[];
+
+  TC?: boolean[];
+}
+
+export interface ZeekHttpData {
+  resp_mime_types?: string[];
+
+  trans_depth?: string[];
+
+  status_msg?: string[];
+
+  resp_fuids?: string[];
+
+  tags?: string[];
+}
+
+export interface ZeekFileData {
+  session_ids?: string[];
+
+  timedout?: boolean[];
+
+  local_orig?: boolean[];
+
+  tx_host?: string[];
+
+  source?: string[];
+
+  is_orig?: boolean[];
+
+  overflow_bytes?: number[];
+
+  sha1?: string[];
+
+  duration?: number[];
+
+  depth?: number[];
+
+  analyzers?: string[];
+
+  mime_type?: string[];
+
+  rx_host?: string[];
+
+  total_bytes?: number[];
+
+  fuid?: string[];
+
+  seen_bytes?: number[];
+
+  missing_bytes?: number[];
+
+  md5?: string[];
+}
+
+export interface ZeekSslData {
+  cipher?: string[];
+
+  established?: boolean[];
+
+  resumed?: boolean[];
+
+  version?: string[];
+}
diff --git a/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/index.ts b/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/index.ts
new file mode 100644
index 0000000000000..3a0942d2decb8
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/search_strategy/security_solution/hosts/index.ts
@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IEsSearchResponse } from '../../../../../../../src/plugins/data/common';
+import { CloudEcs } from '../../../ecs/cloud';
+import { HostEcs } from '../../../ecs/host';
+
+import {
+  CursorType,
+  Inspect,
+  Maybe,
+  PageInfoPaginated,
+  RequestOptionsPaginated,
+  SortField,
+  TimerangeInput,
+} from '..';
+
+export enum HostsQueries {
+  hosts = 'hosts',
+  hostOverview = 'hostOverview',
+}
+
+export enum HostPolicyResponseActionStatus {
+  success = 'success',
+  failure = 'failure',
+  warning = 'warning',
+}
+
+export interface EndpointFields {
+  endpointPolicy?: Maybe<string>;
+
+  sensorVersion?: Maybe<string>;
+
+  policyStatus?: Maybe<HostPolicyResponseActionStatus>;
+}
+
+export interface HostItem {
+  _id?: Maybe<string>;
+
+  cloud?: Maybe<CloudEcs>;
+
+  endpoint?: Maybe<EndpointFields>;
+
+  host?: Maybe<HostEcs>;
+
+  lastSeen?: Maybe<string>;
+}
+
+export interface HostsEdges {
+  node: HostItem;
+
+  cursor: CursorType;
+}
+
+export interface HostsStrategyResponse extends IEsSearchResponse {
+  edges: HostsEdges[];
+
+  totalCount: number;
+
+  pageInfo: PageInfoPaginated;
+
+  inspect?: Maybe<Inspect>;
+}
+
+export interface HostOverviewStrategyResponse extends IEsSearchResponse, HostItem {
+  inspect?: Maybe<Inspect>;
+}
+
+export interface HostsRequestOptions extends RequestOptionsPaginated {
+  sort: SortField;
+  defaultIndex: string[];
+}
+
+export interface HostLastFirstSeenRequestOptions extends Partial<RequestOptionsPaginated> {
+  hostName: string;
+}
+
+export interface HostOverviewRequestOptions extends HostLastFirstSeenRequestOptions {
+  fields: string[];
+  timerange: TimerangeInput;
+}
diff --git a/x-pack/plugins/security_solution/common/search_strategy/security_solution/index.ts b/x-pack/plugins/security_solution/common/search_strategy/security_solution/index.ts
new file mode 100644
index 0000000000000..edb5dda2ca6da
--- /dev/null
+++ b/x-pack/plugins/security_solution/common/search_strategy/security_solution/index.ts
@@ -0,0 +1,109 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { IEsSearchRequest } from '../../../../../../src/plugins/data/common';
+import { ESQuery } from '../../typed_json';
+import {
+  HostOverviewStrategyResponse,
+  HostOverviewRequestOptions,
+  HostsQueries,
+  HostsRequestOptions,
+  HostsStrategyResponse,
+} from './hosts';
+export * from './hosts';
+export type Maybe<T> = T | null;
+
+export type FactoryQueryTypes = HostsQueries;
+
+export interface Inspect {
+  dsl: string[];
+  response: string[];
+}
+
+export interface PageInfoPaginated {
+  activePage: number;
+  fakeTotalCount: number;
+  showMorePagesIndicator: boolean;
+}
+
+export interface CursorType {
+  value?: Maybe<string>;
+  tiebreaker?: Maybe<string>;
+}
+
+export enum Direction {
+  asc = 'asc',
+  desc = 'desc',
+}
+
+export interface SortField {
+  field: string;
+  direction: Direction;
+}
+
+export interface TimerangeInput {
+  /** The interval string to use for last bucket. The format is '{value}{unit}'. For example '5m' would return the metrics for the last 5 minutes of the timespan. */
+  interval: string;
+  /** The end of the timerange */
+  to: string;
+  /** The beginning of the timerange */
+  from: string;
+}
+
+export interface PaginationInput {
+  /** The limit parameter allows you to configure the maximum amount of items to be returned */
+  limit: number;
+  /** The cursor parameter defines the next result you want to fetch */
+  cursor?: Maybe<string>;
+  /** The tiebreaker parameter allow to be more precise to fetch the next item */
+  tiebreaker?: Maybe<string>;
+}
+
+export interface PaginationInputPaginated {
+  /** The activePage parameter defines the page of results you want to fetch */
+  activePage: number;
+  /** The cursorStart parameter defines the start of the results to be displayed */
+  cursorStart: number;
+  /** The fakePossibleCount parameter determines the total count in order to show 5 additional pages */
+  fakePossibleCount: number;
+  /** The querySize parameter is the number of items to be returned */
+  querySize: number;
+}
+
+export interface DocValueFields {
+  field: string;
+  format: string;
+}
+
+export interface RequestBasicOptions extends IEsSearchRequest {
+  timerange: TimerangeInput;
+  filterQuery: ESQuery | string | undefined;
+  defaultIndex: string[];
+  docValueFields?: DocValueFields[];
+  factoryQueryType?: FactoryQueryTypes;
+}
+
+export interface RequestOptions extends RequestBasicOptions {
+  pagination: PaginationInput;
+  sortField?: SortField;
+}
+
+export interface RequestOptionsPaginated extends RequestBasicOptions {
+  pagination: PaginationInputPaginated;
+  sortField?: SortField;
+}
+
+export type StrategyResponseType<T extends FactoryQueryTypes> = T extends HostsQueries.hosts
+  ? HostsStrategyResponse
+  : T extends HostsQueries.hostOverview
+  ? HostOverviewStrategyResponse
+  : never;
+
+export type StrategyRequestType<T extends FactoryQueryTypes> = T extends HostsQueries.hosts
+  ? HostsRequestOptions
+  : T extends HostsQueries.hostOverview
+  ? HostOverviewRequestOptions
+  : never;
diff --git a/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx b/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx
index 8af24e6e6abc1..346de9f87313f 100644
--- a/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/containers/hosts/index.tsx
@@ -4,185 +4,211 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { get, getOr } from 'lodash/fp';
-import memoizeOne from 'memoize-one';
-import React from 'react';
-import { Query } from 'react-apollo';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import deepEqual from 'fast-deep-equal';
+import { noop } from 'lodash/fp';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import { DEFAULT_INDEX_KEY } from '../../../../common/constants';
-import {
-  Direction,
-  GetHostsTableQuery,
-  HostsEdges,
-  HostsFields,
-  PageInfoPaginated,
-} from '../../../graphql/types';
-import { inputsModel, State, inputsSelectors } from '../../../common/store';
-import { createFilter, getDefaultFetchPolicy } from '../../../common/containers/helpers';
-import {
-  QueryTemplatePaginated,
-  QueryTemplatePaginatedProps,
-} from '../../../common/containers/query_template_paginated';
-import { withKibana, WithKibanaProps } from '../../../common/lib/kibana';
+import { HostsEdges, PageInfoPaginated } from '../../../graphql/types';
+import { inputsModel, State } from '../../../common/store';
+import { createFilter } from '../../../common/containers/helpers';
+import { useKibana } from '../../../common/lib/kibana';
 import { hostsModel, hostsSelectors } from '../../store';
-import { HostsTableQuery } from './hosts_table.gql_query';
 import { generateTablePaginationOptions } from '../../../common/components/paginated_table/helpers';
+import {
+  DocValueFields,
+  HostsQueries,
+  HostsRequestOptions,
+  HostsStrategyResponse,
+} from '../../../../common/search_strategy/security_solution';
+import { ESTermQuery } from '../../../../common/typed_json';
+
+import * as i18n from './translations';
+import { AbortError } from '../../../../../../../src/plugins/data/common';
 
 const ID = 'hostsQuery';
 
+type LoadPage = (newActivePage: number) => void;
 export interface HostsArgs {
   endDate: string;
   hosts: HostsEdges[];
   id: string;
   inspect: inputsModel.InspectQuery;
   isInspected: boolean;
-  loading: boolean;
-  loadPage: (newActivePage: number) => void;
+  loadPage: LoadPage;
   pageInfo: PageInfoPaginated;
   refetch: inputsModel.Refetch;
   startDate: string;
   totalCount: number;
 }
 
-export interface OwnProps extends QueryTemplatePaginatedProps {
-  children: (args: HostsArgs) => React.ReactNode;
-  type: hostsModel.HostsType;
-  startDate: string;
+interface UseAllHost {
+  docValueFields?: DocValueFields[];
+  filterQuery?: ESTermQuery | string;
   endDate: string;
+  startDate: string;
+  type: hostsModel.HostsType;
 }
 
-export interface HostsComponentReduxProps {
-  activePage: number;
-  isInspected: boolean;
-  limit: number;
-  sortField: HostsFields;
-  direction: Direction;
-}
-
-type HostsProps = OwnProps & HostsComponentReduxProps & WithKibanaProps;
+export const useAllHost = ({
+  docValueFields,
+  filterQuery,
+  endDate,
+  startDate,
+  type,
+}: UseAllHost): [boolean, HostsArgs] => {
+  const getHostsSelector = hostsSelectors.hostsSelector();
+  const { activePage, direction, limit, sortField } = useSelector((state: State) =>
+    getHostsSelector(state, type)
+  );
+  const { data, notifications, uiSettings } = useKibana().services;
+  const refetch = useRef<inputsModel.Refetch>(noop);
+  const abortCtrl = useRef(new AbortController());
+  const defaultIndex = uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
+  const [loading, setLoading] = useState(false);
+  const [hostsRequest, setHostRequest] = useState<HostsRequestOptions>({
+    defaultIndex,
+    docValueFields: docValueFields ?? [],
+    factoryQueryType: HostsQueries.hosts,
+    filterQuery: createFilter(filterQuery),
+    pagination: generateTablePaginationOptions(activePage, limit),
+    timerange: {
+      interval: '12h',
+      from: startDate,
+      to: endDate,
+    },
+    sort: {
+      direction,
+      field: sortField,
+    },
+    // inspect: isInspected,
+  });
 
-class HostsComponentQuery extends QueryTemplatePaginated<
-  HostsProps,
-  GetHostsTableQuery.Query,
-  GetHostsTableQuery.Variables
-> {
-  private memoizedHosts: (
-    variables: string,
-    data: GetHostsTableQuery.Source | undefined
-  ) => HostsEdges[];
+  const wrappedLoadMore = useCallback(
+    (newActivePage: number) => {
+      setHostRequest((prevRequest) => {
+        return {
+          ...prevRequest,
+          pagination: generateTablePaginationOptions(newActivePage, limit),
+        };
+      });
+    },
+    [limit]
+  );
 
-  constructor(props: HostsProps) {
-    super(props);
-    this.memoizedHosts = memoizeOne(this.getHosts);
-  }
+  const [hostsResponse, setHostsResponse] = useState<HostsArgs>({
+    endDate,
+    hosts: [],
+    id: ID,
+    inspect: {
+      dsl: [],
+      response: [],
+    },
+    isInspected: false,
+    loadPage: wrappedLoadMore,
+    pageInfo: {
+      activePage: 0,
+      fakeTotalCount: 0,
+      showMorePagesIndicator: false,
+    },
+    refetch: refetch.current,
+    startDate,
+    totalCount: -1,
+  });
 
-  public render() {
-    const {
-      activePage,
-      docValueFields,
-      id = ID,
-      isInspected,
-      children,
-      direction,
-      filterQuery,
-      endDate,
-      kibana,
-      limit,
-      startDate,
-      skip,
-      sourceId,
-      sortField,
-    } = this.props;
-    const defaultIndex = kibana.services.uiSettings.get<string[]>(DEFAULT_INDEX_KEY);
+  const hostsSearch = useCallback(
+    (request: HostsRequestOptions) => {
+      let didCancel = false;
+      const asyncSearch = async () => {
+        abortCtrl.current = new AbortController();
+        setLoading(true);
 
-    const variables: GetHostsTableQuery.Variables = {
-      sourceId,
-      timerange: {
-        interval: '12h',
-        from: startDate,
-        to: endDate,
-      },
-      sort: {
-        direction,
-        field: sortField,
-      },
-      pagination: generateTablePaginationOptions(activePage, limit),
-      filterQuery: createFilter(filterQuery),
-      defaultIndex,
-      docValueFields: docValueFields ?? [],
-      inspect: isInspected,
-    };
-    return (
-      <Query<GetHostsTableQuery.Query, GetHostsTableQuery.Variables>
-        query={HostsTableQuery}
-        fetchPolicy={getDefaultFetchPolicy()}
-        notifyOnNetworkStatusChange
-        variables={variables}
-        skip={skip}
-      >
-        {({ data, loading, fetchMore, networkStatus, refetch }) => {
-          this.setFetchMore(fetchMore);
-          this.setFetchMoreOptions((newActivePage: number) => ({
-            variables: {
-              pagination: generateTablePaginationOptions(newActivePage, limit),
+        const searchSubscription$ = data.search
+          .search<HostsRequestOptions, HostsStrategyResponse>(request, {
+            strategy: 'securitySolutionSearchStrategy',
+            signal: abortCtrl.current.signal,
+          })
+          .subscribe({
+            next: (response) => {
+              if (!response.isPartial && !response.isRunning) {
+                if (!didCancel) {
+                  setLoading(false);
+                  setHostsResponse((prevResponse) => ({
+                    ...prevResponse,
+                    hosts: response.edges,
+                    inspect: response.inspect ?? prevResponse.inspect,
+                    pageInfo: response.pageInfo,
+                    refetch: refetch.current,
+                    totalCount: response.totalCount,
+                  }));
+                }
+                searchSubscription$.unsubscribe();
+              } else if (response.isPartial && !response.isRunning) {
+                if (!didCancel) {
+                  setLoading(false);
+                }
+                // TODO: Make response error status clearer
+                notifications.toasts.addWarning(i18n.ERROR_ALL_HOST);
+                searchSubscription$.unsubscribe();
+              }
             },
-            updateQuery: (prev, { fetchMoreResult }) => {
-              if (!fetchMoreResult) {
-                return prev;
+            error: (msg) => {
+              if (!(msg instanceof AbortError)) {
+                notifications.toasts.addDanger({ title: i18n.FAIL_ALL_HOST, text: msg.message });
               }
-              return {
-                ...fetchMoreResult,
-                source: {
-                  ...fetchMoreResult.source,
-                  Hosts: {
-                    ...fetchMoreResult.source.Hosts,
-                    edges: [...fetchMoreResult.source.Hosts.edges],
-                  },
-                },
-              };
             },
-          }));
-          const isLoading = this.isItAValidLoading(loading, variables, networkStatus);
-          return children({
-            endDate,
-            hosts: this.memoizedHosts(JSON.stringify(variables), get('source', data)),
-            id,
-            inspect: getOr(null, 'source.Hosts.inspect', data),
-            isInspected,
-            loading: isLoading,
-            loadPage: this.wrappedLoadMore,
-            pageInfo: getOr({}, 'source.Hosts.pageInfo', data),
-            refetch: this.memoizedRefetchQuery(variables, limit, refetch),
-            startDate,
-            totalCount: getOr(-1, 'source.Hosts.totalCount', data),
           });
-        }}
-      </Query>
-    );
-  }
+      };
+      abortCtrl.current.abort();
+      asyncSearch();
+      refetch.current = asyncSearch;
+      return () => {
+        didCancel = true;
+        abortCtrl.current.abort();
+      };
+    },
+    [data.search, notifications.toasts]
+  );
 
-  private getHosts = (
-    variables: string,
-    source: GetHostsTableQuery.Source | undefined
-  ): HostsEdges[] => getOr([], 'Hosts.edges', source);
-}
+  useEffect(() => {
+    setHostRequest((prevRequest) => {
+      const myRequest = {
+        ...prevRequest,
+        defaultIndex,
+        docValueFields: docValueFields ?? [],
+        filterQuery: createFilter(filterQuery),
+        pagination: generateTablePaginationOptions(activePage, limit),
+        timerange: {
+          interval: '12h',
+          from: startDate,
+          to: endDate,
+        },
+        sort: {
+          direction,
+          field: sortField,
+        },
+      };
+      if (!deepEqual(prevRequest, myRequest)) {
+        return myRequest;
+      }
+      return prevRequest;
+    });
+  }, [
+    activePage,
+    defaultIndex,
+    direction,
+    docValueFields,
+    endDate,
+    filterQuery,
+    limit,
+    startDate,
+    sortField,
+  ]);
 
-const makeMapStateToProps = () => {
-  const getHostsSelector = hostsSelectors.hostsSelector();
-  const getQuery = inputsSelectors.globalQueryByIdSelector();
-  const mapStateToProps = (state: State, { type, id = ID }: OwnProps) => {
-    const { isInspected } = getQuery(state, id);
-    return {
-      ...getHostsSelector(state, type),
-      isInspected,
-    };
-  };
-  return mapStateToProps;
-};
+  useEffect(() => {
+    hostsSearch(hostsRequest);
+  }, [hostsRequest, hostsSearch]);
 
-export const HostsQuery = compose<React.ComponentClass<OwnProps>>(
-  connect(makeMapStateToProps),
-  withKibana
-)(HostsComponentQuery);
+  return [loading, hostsResponse];
+};
diff --git a/x-pack/plugins/security_solution/public/hosts/containers/hosts/translations.ts b/x-pack/plugins/security_solution/public/hosts/containers/hosts/translations.ts
new file mode 100644
index 0000000000000..ada713d135c22
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/hosts/containers/hosts/translations.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+export const ERROR_ALL_HOST = i18n.translate(
+  'xpack.securitySolution.allHost.errorSearchDescription',
+  {
+    defaultMessage: `An error has occurred on all hosts search`,
+  }
+);
+
+export const FAIL_ALL_HOST = i18n.translate(
+  'xpack.securitySolution.allHost.failSearchDescription',
+  {
+    defaultMessage: `Failed to run search on all hosts`,
+  }
+);
diff --git a/x-pack/plugins/security_solution/public/hosts/pages/navigation/hosts_query_tab_body.tsx b/x-pack/plugins/security_solution/public/hosts/pages/navigation/hosts_query_tab_body.tsx
index 80cf62bc49f78..5232dcfd88189 100644
--- a/x-pack/plugins/security_solution/public/hosts/pages/navigation/hosts_query_tab_body.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/pages/navigation/hosts_query_tab_body.tsx
@@ -6,7 +6,7 @@
 
 import { getOr } from 'lodash/fp';
 import React from 'react';
-import { HostsQuery } from '../../containers/hosts';
+import { useAllHost } from '../../containers/hosts';
 import { HostsComponentsQueryProps } from './types';
 import { HostsTable } from '../../components/hosts_table';
 import { manageQuery } from '../../../common/components/page/manage_query';
@@ -23,35 +23,29 @@ export const HostsQueryTabBody = ({
   setQuery,
   startDate,
   type,
-}: HostsComponentsQueryProps) => (
-  <HostsQuery
-    docValueFields={docValueFields}
-    endDate={endDate}
-    filterQuery={filterQuery}
-    skip={skip}
-    sourceId="default"
-    startDate={startDate}
-    type={type}
-  >
-    {({ hosts, totalCount, loading, pageInfo, loadPage, id, inspect, isInspected, refetch }) => (
-      <HostsTableManage
-        deleteQuery={deleteQuery}
-        data={hosts}
-        fakeTotalCount={getOr(50, 'fakeTotalCount', pageInfo)}
-        id={id}
-        indexPattern={indexPattern}
-        inspect={inspect}
-        isInspect={isInspected}
-        loading={loading}
-        loadPage={loadPage}
-        refetch={refetch}
-        setQuery={setQuery}
-        showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', pageInfo)}
-        totalCount={totalCount}
-        type={type}
-      />
-    )}
-  </HostsQuery>
-);
+}: HostsComponentsQueryProps) => {
+  const [
+    loading,
+    { hosts, totalCount, pageInfo, loadPage, id, inspect, isInspected, refetch },
+  ] = useAllHost({ docValueFields, endDate, filterQuery, startDate, type });
+  return (
+    <HostsTableManage
+      deleteQuery={deleteQuery}
+      data={hosts}
+      fakeTotalCount={getOr(50, 'fakeTotalCount', pageInfo)}
+      id={id}
+      indexPattern={indexPattern}
+      inspect={inspect}
+      isInspect={isInspected}
+      loading={loading}
+      loadPage={loadPage}
+      refetch={refetch}
+      setQuery={setQuery}
+      showMorePagesIndicator={getOr(false, 'showMorePagesIndicator', pageInfo)}
+      totalCount={totalCount}
+      type={type}
+    />
+  );
+};
 
 HostsQueryTabBody.displayName = 'HostsQueryTabBody';
diff --git a/x-pack/plugins/security_solution/server/plugin.ts b/x-pack/plugins/security_solution/server/plugin.ts
index 85764eaaee32d..25ca89ce9186e 100644
--- a/x-pack/plugins/security_solution/server/plugin.ts
+++ b/x-pack/plugins/security_solution/server/plugin.ts
@@ -17,6 +17,8 @@ import {
   PluginInitializerContext,
   SavedObjectsClient,
 } from '../../../../src/core/server';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { DataPluginSetup, DataPluginStart } from '../../../../src/plugins/data/server/plugin';
 import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/server';
 import { PluginSetupContract as AlertingSetup } from '../../alerts/server';
 import { SecurityPluginSetup as SecuritySetup } from '../../security/server';
@@ -58,9 +60,11 @@ import { EndpointAppContext } from './endpoint/types';
 import { registerDownloadExceptionListRoute } from './endpoint/routes/artifacts';
 import { initUsageCollectors } from './usage';
 import { AppRequestContext } from './types';
+import { securitySolutionSearchStrategyProvider } from './search_strategy/security_solution';
 
 export interface SetupPlugins {
   alerts: AlertingSetup;
+  data: DataPluginSetup;
   encryptedSavedObjects?: EncryptedSavedObjectsSetup;
   features: FeaturesSetup;
   licensing: LicensingPluginSetup;
@@ -73,6 +77,7 @@ export interface SetupPlugins {
 }
 
 export interface StartPlugins {
+  data: DataPluginStart;
   ingestManager?: IngestManagerStartContract;
   taskManager?: TaskManagerStartContract;
 }
@@ -263,6 +268,14 @@ export class Plugin implements IPlugin<PluginSetup, PluginStart, SetupPlugins, S
     const libs = compose(core, plugins, this.context.env.mode.prod, endpointContext);
     initServer(libs);
 
+    core.getStartServices().then(([_, depsStart]) => {
+      const securitySolutionSearchStrategy = securitySolutionSearchStrategyProvider(depsStart.data);
+      plugins.data.search.registerSearchStrategy(
+        'securitySolutionSearchStrategy',
+        securitySolutionSearchStrategy
+      );
+    });
+
     return {};
   }
 
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.detail_host.dsl.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.detail_host.dsl.ts
new file mode 100644
index 0000000000000..5c5dec92a5100
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.detail_host.dsl.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ISearchRequestParams } from '../../../../../../../../../src/plugins/data/common';
+import { HostOverviewRequestOptions } from '../../../../../../common/search_strategy/security_solution';
+import { cloudFieldsMap, hostFieldsMap } from '../../../../../lib/ecs_fields';
+import { buildFieldsTermAggregation } from '../../../../../lib/hosts/helpers';
+import { reduceFields } from '../../../../../utils/build_query/reduce_fields';
+
+export const buildHostOverviewQuery = ({
+  fields,
+  hostName,
+  defaultIndex,
+  timerange: { from, to },
+}: HostOverviewRequestOptions): ISearchRequestParams => {
+  const esFields = reduceFields(fields, { ...hostFieldsMap, ...cloudFieldsMap });
+
+  const filter = [
+    { term: { 'host.name': hostName } },
+    {
+      range: {
+        '@timestamp': {
+          format: 'strict_date_optional_time',
+          gte: from,
+          lte: to,
+        },
+      },
+    },
+  ];
+
+  const dslQuery = {
+    allowNoIndices: true,
+    index: defaultIndex,
+    ignoreUnavailable: true,
+    body: {
+      aggregations: {
+        ...buildFieldsTermAggregation(esFields.filter((field) => !['@timestamp'].includes(field))),
+      },
+      query: { bool: { filter } },
+      size: 0,
+      track_total_hits: false,
+    },
+  };
+
+  return dslQuery;
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.hosts.dsl.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.hosts.dsl.ts
new file mode 100644
index 0000000000000..3d72f98f35355
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.hosts.dsl.ts
@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isEmpty, isString } from 'lodash/fp';
+import { ISearchRequestParams } from '../../../../../../../../../src/plugins/data/common';
+import {
+  Direction,
+  HostsRequestOptions,
+  SortField,
+} from '../../../../../../common/search_strategy/security_solution';
+import { assertUnreachable, createQueryFilterClauses } from '../../../../../utils/build_query';
+
+export const buildHostsQuery = ({
+  defaultIndex,
+  docValueFields,
+  filterQuery,
+  pagination: { querySize },
+  sort,
+  timerange: { from, to },
+}: HostsRequestOptions): ISearchRequestParams => {
+  const filter = [
+    ...createQueryFilterClauses(isString(filterQuery) ? JSON.parse(filterQuery) : filterQuery),
+    {
+      range: {
+        '@timestamp': {
+          gte: from,
+          lte: to,
+          format: 'strict_date_optional_time',
+        },
+      },
+    },
+  ];
+
+  const agg = { host_count: { cardinality: { field: 'host.name' } } };
+
+  const dslQuery = {
+    allowNoIndices: true,
+    index: defaultIndex,
+    ignoreUnavailable: true,
+    body: {
+      ...(isEmpty(docValueFields) ? { docvalue_fields: docValueFields } : {}),
+      aggregations: {
+        ...agg,
+        host_data: {
+          terms: { size: querySize, field: 'host.name', order: getQueryOrder(sort) },
+          aggs: {
+            lastSeen: { max: { field: '@timestamp' } },
+            os: {
+              top_hits: {
+                size: 1,
+                sort: [
+                  {
+                    '@timestamp': {
+                      order: 'desc',
+                    },
+                  },
+                ],
+                _source: {
+                  includes: ['host.os.*'],
+                },
+              },
+            },
+          },
+        },
+      },
+      query: { bool: { filter } },
+      size: 0,
+      track_total_hits: false,
+    },
+  };
+
+  return dslQuery;
+};
+
+type QueryOrder = { lastSeen: Direction } | { _key: Direction };
+
+const getQueryOrder = (sort: SortField): QueryOrder => {
+  switch (sort.field) {
+    case 'lastSeen':
+      return { lastSeen: sort.direction };
+    case 'hostName':
+      return { _key: sort.direction };
+    default:
+      return assertUnreachable(sort.field);
+  }
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.last_first_seen_host.dsl.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.last_first_seen_host.dsl.ts
new file mode 100644
index 0000000000000..b57bbd2960e4f
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/dsl/query.last_first_seen_host.dsl.ts
@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { isEmpty } from 'lodash/fp';
+import { ISearchRequestParams } from '../../../../../../../../../src/plugins/data/common';
+import { HostLastFirstSeenRequestOptions } from '../../../../../../common/search_strategy/security_solution';
+
+export const buildLastFirstSeenHostQuery = ({
+  hostName,
+  defaultIndex,
+  docValueFields,
+}: HostLastFirstSeenRequestOptions): ISearchRequestParams => {
+  const filter = [{ term: { 'host.name': hostName } }];
+
+  const dslQuery = {
+    allowNoIndices: true,
+    index: defaultIndex,
+    ignoreUnavailable: true,
+    body: {
+      ...(isEmpty(docValueFields) ? { docvalue_fields: docValueFields } : {}),
+      aggregations: {
+        firstSeen: { min: { field: '@timestamp' } },
+        lastSeen: { max: { field: '@timestamp' } },
+      },
+      query: { bool: { filter } },
+      size: 0,
+      track_total_hits: false,
+    },
+  };
+
+  return dslQuery;
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/helpers.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/helpers.ts
new file mode 100644
index 0000000000000..a7ec822839d21
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/helpers.ts
@@ -0,0 +1,115 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { set } from '@elastic/safer-lodash-set/fp';
+import { get, has, head } from 'lodash/fp';
+import {
+  HostsEdges,
+  HostItem,
+} from '../../../../../common/search_strategy/security_solution/hosts';
+import { hostFieldsMap } from '../../../../lib/ecs_fields';
+
+import { HostAggEsItem, HostBuckets, HostValue } from '../../../../lib/hosts/types';
+
+const hostsFields = ['_id', 'lastSeen', 'host.id', 'host.name', 'host.os.name', 'host.os.version'];
+
+export const formatHostEdgesData = (bucket: HostAggEsItem): HostsEdges =>
+  hostsFields.reduce<HostsEdges>(
+    (flattenedFields, fieldName) => {
+      const hostId = get('key', bucket);
+      flattenedFields.node._id = hostId || null;
+      flattenedFields.cursor.value = hostId || '';
+      const fieldValue = getHostFieldValue(fieldName, bucket);
+      if (fieldValue != null) {
+        return set(
+          `node.${fieldName}`,
+          Array.isArray(fieldValue) ? fieldValue : [fieldValue],
+          flattenedFields
+        );
+      }
+      return flattenedFields;
+    },
+    {
+      node: {},
+      cursor: {
+        value: '',
+        tiebreaker: null,
+      },
+    } as HostsEdges
+  );
+
+const hostFields = [
+  '_id',
+  'host.architecture',
+  'host.id',
+  'host.ip',
+  'host.id',
+  'host.mac',
+  'host.name',
+  'host.os.family',
+  'host.os.name',
+  'host.os.platform',
+  'host.os.version',
+  'host.type',
+  'cloud.instance.id',
+  'cloud.machine.type',
+  'cloud.provider',
+  'cloud.region',
+  'endpoint.endpointPolicy',
+  'endpoint.policyStatus',
+  'endpoint.sensorVersion',
+];
+
+export const formatHostItem = (bucket: HostAggEsItem): HostItem =>
+  hostFields.reduce<HostItem>((flattenedFields, fieldName) => {
+    const fieldValue = getHostFieldValue(fieldName, bucket);
+    if (fieldValue != null) {
+      return set(fieldName, fieldValue, flattenedFields);
+    }
+    return flattenedFields;
+  }, {});
+
+const getHostFieldValue = (fieldName: string, bucket: HostAggEsItem): string | string[] | null => {
+  const aggField = hostFieldsMap[fieldName]
+    ? hostFieldsMap[fieldName].replace(/\./g, '_')
+    : fieldName.replace(/\./g, '_');
+  if (
+    [
+      'host.ip',
+      'host.mac',
+      'cloud.instance.id',
+      'cloud.machine.type',
+      'cloud.provider',
+      'cloud.region',
+    ].includes(fieldName) &&
+    has(aggField, bucket)
+  ) {
+    const data: HostBuckets = get(aggField, bucket);
+    return data.buckets.map((obj) => obj.key);
+  } else if (has(`${aggField}.buckets`, bucket)) {
+    return getFirstItem(get(`${aggField}`, bucket));
+  } else if (has(aggField, bucket)) {
+    const valueObj: HostValue = get(aggField, bucket);
+    return valueObj.value_as_string;
+  } else if (['host.name', 'host.os.name', 'host.os.version'].includes(fieldName)) {
+    switch (fieldName) {
+      case 'host.name':
+        return get('key', bucket) || null;
+      case 'host.os.name':
+        return get('os.hits.hits[0]._source.host.os.name', bucket) || null;
+      case 'host.os.version':
+        return get('os.hits.hits[0]._source.host.os.version', bucket) || null;
+    }
+  }
+  return null;
+};
+
+const getFirstItem = (data: HostBuckets): string | null => {
+  const firstItem = head(data.buckets);
+  if (firstItem == null) {
+    return null;
+  }
+  return firstItem.key;
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/index.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/index.ts
new file mode 100644
index 0000000000000..443e524d71ca3
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/hosts/index.ts
@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { get, getOr } from 'lodash/fp';
+
+import { IEsSearchResponse } from '../../../../../../../../src/plugins/data/common';
+
+import { DEFAULT_MAX_TABLE_QUERY_SIZE } from '../../../../../common/constants';
+import { FactoryQueryTypes } from '../../../../../common/search_strategy/security_solution';
+import {
+  HostsStrategyResponse,
+  HostOverviewStrategyResponse,
+  HostsQueries,
+  HostsRequestOptions,
+  HostOverviewRequestOptions,
+} from '../../../../../common/search_strategy/security_solution/hosts';
+
+// TO DO need to move all this types in common
+import { HostAggEsData, HostAggEsItem } from '../../../../lib/hosts/types';
+
+import { inspectStringifyObject } from '../../../../utils/build_query';
+import { SecuritySolutionFactory } from '../types';
+import { buildHostOverviewQuery } from './dsl/query.detail_host.dsl';
+import { buildHostsQuery } from './dsl/query.hosts.dsl';
+import { formatHostEdgesData, formatHostItem } from './helpers';
+
+export const allHosts: SecuritySolutionFactory<HostsQueries.hosts> = {
+  buildDsl: (options: HostsRequestOptions) => {
+    if (options.pagination && options.pagination.querySize >= DEFAULT_MAX_TABLE_QUERY_SIZE) {
+      throw new Error(`No query size above ${DEFAULT_MAX_TABLE_QUERY_SIZE}`);
+    }
+    return buildHostsQuery(options);
+  },
+  parse: async (
+    options: HostsRequestOptions,
+    response: IEsSearchResponse<unknown>
+  ): Promise<HostsStrategyResponse> => {
+    const { activePage, cursorStart, fakePossibleCount, querySize } = options.pagination;
+    const totalCount = getOr(0, 'aggregations.host_count.value', response.rawResponse);
+    const buckets: HostAggEsItem[] = getOr(
+      [],
+      'aggregations.host_data.buckets',
+      response.rawResponse
+    );
+    const hostsEdges = buckets.map((bucket) => formatHostEdgesData(bucket));
+    const fakeTotalCount = fakePossibleCount <= totalCount ? fakePossibleCount : totalCount;
+    const edges = hostsEdges.splice(cursorStart, querySize - cursorStart);
+    const inspect = {
+      dsl: [inspectStringifyObject(buildHostsQuery(options))],
+      response: [inspectStringifyObject(response)],
+    };
+    const showMorePagesIndicator = totalCount > fakeTotalCount;
+
+    return {
+      ...response,
+      inspect,
+      edges,
+      totalCount,
+      pageInfo: {
+        activePage: activePage ? activePage : 0,
+        fakeTotalCount,
+        showMorePagesIndicator,
+      },
+    };
+  },
+};
+
+export const overviewHost: SecuritySolutionFactory<HostsQueries.hostOverview> = {
+  buildDsl: (options: HostOverviewRequestOptions) => {
+    return buildHostOverviewQuery(options);
+  },
+  parse: async (
+    options: HostOverviewRequestOptions,
+    response: IEsSearchResponse<HostAggEsData>
+  ): Promise<HostOverviewStrategyResponse> => {
+    const aggregations: HostAggEsItem = get('aggregations', response.rawResponse) || {};
+    const inspect = {
+      dsl: [inspectStringifyObject(buildHostOverviewQuery(options))],
+      response: [inspectStringifyObject(response)],
+    };
+    const formattedHostItem = formatHostItem(aggregations);
+    return { ...response, inspect, _id: options.hostName, ...formattedHostItem };
+  },
+};
+
+export const hostsFactory: Record<HostsQueries, SecuritySolutionFactory<FactoryQueryTypes>> = {
+  [HostsQueries.hosts]: allHosts,
+  [HostsQueries.hostOverview]: overviewHost,
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/index.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/index.ts
new file mode 100644
index 0000000000000..53433dfc208cb
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FactoryQueryTypes } from '../../../../common/search_strategy/security_solution';
+
+import { hostsFactory } from './hosts';
+import { SecuritySolutionFactory } from './types';
+
+export const securitySolutionFactory: Record<
+  FactoryQueryTypes,
+  SecuritySolutionFactory<FactoryQueryTypes>
+> = {
+  ...hostsFactory,
+};
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/types.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/types.ts
new file mode 100644
index 0000000000000..cb9e3a3d7628a
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/factory/types.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  IEsSearchResponse,
+  ISearchRequestParams,
+} from '../../../../../../../src/plugins/data/common';
+import {
+  FactoryQueryTypes,
+  StrategyRequestType,
+  StrategyResponseType,
+} from '../../../../common/search_strategy/security_solution';
+
+export interface SecuritySolutionFactory<T extends FactoryQueryTypes> {
+  buildDsl: (options: StrategyRequestType<T>) => ISearchRequestParams;
+  parse: (
+    options: StrategyRequestType<T>,
+    response: IEsSearchResponse
+  ) => Promise<StrategyResponseType<T>>;
+}
diff --git a/x-pack/plugins/security_solution/server/search_strategy/security_solution/index.ts b/x-pack/plugins/security_solution/server/search_strategy/security_solution/index.ts
new file mode 100644
index 0000000000000..d94a32174cd7a
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/search_strategy/security_solution/index.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ISearchStrategy, PluginStart } from '../../../../../../src/plugins/data/server';
+import {
+  FactoryQueryTypes,
+  StrategyResponseType,
+  StrategyRequestType,
+} from '../../../common/search_strategy/security_solution';
+import { securitySolutionFactory } from './factory';
+import { SecuritySolutionFactory } from './factory/types';
+
+export const securitySolutionSearchStrategyProvider = <T extends FactoryQueryTypes>(
+  data: PluginStart
+): ISearchStrategy<StrategyRequestType<T>, StrategyResponseType<T>> => {
+  const es = data.search.getSearchStrategy('es');
+
+  return {
+    search: async (context, request, options) => {
+      if (request.factoryQueryType == null) {
+        throw new Error('factoryQueryType is required');
+      }
+      const queryFactory: SecuritySolutionFactory<T> =
+        securitySolutionFactory[request.factoryQueryType];
+      const dsl = queryFactory.buildDsl(request);
+      const esSearchRes = await es.search(context, { ...request, params: dsl }, options);
+      return queryFactory.parse(request, esSearchRes);
+    },
+    cancel: async (context, id) => {
+      if (es.cancel) {
+        es.cancel(context, id);
+      }
+    },
+  };
+};
diff --git a/x-pack/plugins/security_solution/server/utils/build_query/filters.ts b/x-pack/plugins/security_solution/server/utils/build_query/filters.ts
index 95c9a975454f2..ac736e8cb51ee 100644
--- a/x-pack/plugins/security_solution/server/utils/build_query/filters.ts
+++ b/x-pack/plugins/security_solution/server/utils/build_query/filters.ts
@@ -8,5 +8,5 @@ import { isEmpty } from 'lodash/fp';
 
 import { ESQuery } from '../../../common/typed_json';
 
-export const createQueryFilterClauses = (filterQuery: ESQuery | undefined) =>
+export const createQueryFilterClauses = (filterQuery: ESQuery | string | undefined) =>
   !isEmpty(filterQuery) ? [filterQuery] : [];
diff --git a/x-pack/plugins/security_solution/server/utils/build_query/index.ts b/x-pack/plugins/security_solution/server/utils/build_query/index.ts
index c97e78aad2b69..233ba70968fa1 100644
--- a/x-pack/plugins/security_solution/server/utils/build_query/index.ts
+++ b/x-pack/plugins/security_solution/server/utils/build_query/index.ts
@@ -10,7 +10,7 @@ export * from './merge_fields_with_hits';
 export * from './calculate_timeseries_interval';
 
 export const assertUnreachable = (
-  x: never,
+  x: unknown,
   message: string = 'Unknown Field in switch statement'
 ): never => {
   throw new Error(`${message} ${x}`);

From bdb73b55efdf071ccd56a814581d9c2722471baf Mon Sep 17 00:00:00 2001
From: Liza Katz <lizka.k@gmail.com>
Date: Sun, 23 Aug 2020 15:34:40 +0300
Subject: [PATCH 25/25] [Search] Cleanup SearchRequest and SearchResponse types
 (#75471)

* improve test stability

* Replace SearchRequest = any with Record<string, any>

* Remove SearchResponse = any from data plugin

* docs

* logs

* Revert "Replace SearchRequest = any with Record<string, any>"

This reverts commit 9914ab5a01642fe037a8f5af5fc111de828ce859.

* code review

* list control

* null check

* null null null

* Jest fix
---
 .../kibana-plugin-plugins-data-public.md      |  2 -
 ...lugin-plugins-data-public.searchrequest.md | 11 -----
 ...ugin-plugins-data-public.searchresponse.md | 11 -----
 .../data/common/search/es_search/types.ts     |  4 +-
 src/plugins/data/public/index.ts              |  1 -
 src/plugins/data/public/public.api.md         | 46 ++++++++-----------
 .../search/fetch/handle_response.test.ts      | 12 +++--
 .../public/search/fetch/handle_response.tsx   | 13 ++----
 .../data/public/search/fetch/request_error.ts |  7 +--
 src/plugins/data/public/search/fetch/types.ts | 10 +++-
 src/plugins/data/public/search/index.ts       |  8 +---
 .../data/public/search/legacy/call_client.ts  |  5 +-
 .../public/search/legacy/es_client/types.ts   |  5 +-
 .../public/search/legacy/fetch_soon.test.ts   | 20 ++++++--
 .../data/public/search/legacy/fetch_soon.ts   | 12 +++--
 .../data/public/search/legacy/types.ts        |  7 +--
 .../search/search_source/search_source.ts     | 17 +++++--
 src/plugins/data/public/ui/index.ts           |  6 +--
 .../__mocks__/shard_failure_response.ts       |  7 +--
 .../public/ui/shard_failure_modal/index.ts    |  2 +-
 .../shard_failure_description.test.tsx        |  3 +-
 .../shard_failure_modal.tsx                   | 15 ++++--
 .../shard_failure_open_modal_button.tsx       |  5 +-
 .../shard_failure_table.test.tsx              |  2 +-
 .../shard_failure_types.ts                    | 10 ----
 .../api/utils/fetch_hits_in_interval.ts       |  5 +-
 .../public/control/list_control_factory.ts    |  4 +-
 .../public/utils/logs_overview_fetchers.ts    |  8 ++--
 28 files changed, 125 insertions(+), 133 deletions(-)
 delete mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchrequest.md
 delete mode 100644 docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchresponse.md

diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
index dc83cfb930d7d..a5453c7c51d5b 100644
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
+++ b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.md
@@ -156,8 +156,6 @@
 |  [RangeFilterMeta](./kibana-plugin-plugins-data-public.rangefiltermeta.md) |  |
 |  [SavedQueryTimeFilter](./kibana-plugin-plugins-data-public.savedquerytimefilter.md) |  |
 |  [SearchBarProps](./kibana-plugin-plugins-data-public.searchbarprops.md) |  |
-|  [SearchRequest](./kibana-plugin-plugins-data-public.searchrequest.md) |  |
-|  [SearchResponse](./kibana-plugin-plugins-data-public.searchresponse.md) |  |
 |  [StatefulSearchBarProps](./kibana-plugin-plugins-data-public.statefulsearchbarprops.md) |  |
 |  [TabbedAggRow](./kibana-plugin-plugins-data-public.tabbedaggrow.md) | \* |
 |  [TimefilterContract](./kibana-plugin-plugins-data-public.timefiltercontract.md) |  |
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchrequest.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchrequest.md
deleted file mode 100644
index dbb465839e52c..0000000000000
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchrequest.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [SearchRequest](./kibana-plugin-plugins-data-public.searchrequest.md)
-
-## SearchRequest type
-
-<b>Signature:</b>
-
-```typescript
-export declare type SearchRequest = any;
-```
diff --git a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchresponse.md b/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchresponse.md
deleted file mode 100644
index 6da31c8bced7e..0000000000000
--- a/docs/development/plugins/data/public/kibana-plugin-plugins-data-public.searchresponse.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<!-- Do not edit this file. It is automatically generated by API Documenter. -->
-
-[Home](./index.md) &gt; [kibana-plugin-plugins-data-public](./kibana-plugin-plugins-data-public.md) &gt; [SearchResponse](./kibana-plugin-plugins-data-public.searchresponse.md)
-
-## SearchResponse type
-
-<b>Signature:</b>
-
-```typescript
-export declare type SearchResponse = any;
-```
diff --git a/src/plugins/data/common/search/es_search/types.ts b/src/plugins/data/common/search/es_search/types.ts
index 654ed3899656d..3184fbe341705 100644
--- a/src/plugins/data/common/search/es_search/types.ts
+++ b/src/plugins/data/common/search/es_search/types.ts
@@ -22,9 +22,9 @@ import { IKibanaSearchRequest, IKibanaSearchResponse } from '../types';
 
 export const ES_SEARCH_STRATEGY = 'es';
 
-export type ISearchRequestParams = {
+export type ISearchRequestParams<T = Record<string, any>> = {
   trackTotalHits?: boolean;
-} & Search;
+} & Search<T>;
 
 export interface IEsSearchRequest extends IKibanaSearchRequest {
   params?: ISearchRequestParams;
diff --git a/src/plugins/data/public/index.ts b/src/plugins/data/public/index.ts
index ecf076aa517fb..eb5703f1c63c1 100644
--- a/src/plugins/data/public/index.ts
+++ b/src/plugins/data/public/index.ts
@@ -360,7 +360,6 @@ export {
   SearchInterceptor,
   SearchInterceptorDeps,
   SearchRequest,
-  SearchResponse,
   SearchSourceFields,
   SortDirection,
   // expression functions and types
diff --git a/src/plugins/data/public/public.api.md b/src/plugins/data/public/public.api.md
index 35ee1789b2fdf..f8a108a5a4c58 100644
--- a/src/plugins/data/public/public.api.md
+++ b/src/plugins/data/public/public.api.md
@@ -61,7 +61,7 @@ import { SavedObject } from 'src/core/server';
 import { SavedObject as SavedObject_3 } from 'src/core/public';
 import { SavedObjectsClientContract } from 'src/core/public';
 import { Search } from '@elastic/elasticsearch/api/requestParams';
-import { SearchResponse as SearchResponse_2 } from 'elasticsearch';
+import { SearchResponse } from 'elasticsearch';
 import { SerializedFieldFormat as SerializedFieldFormat_2 } from 'src/plugins/expressions/common';
 import { Subscription } from 'rxjs';
 import { Toast } from 'kibana/public';
@@ -727,6 +727,7 @@ export function getEsPreference(uiSettings: IUiSettingsClient_2, sessionId?: str
 export const getKbnTypeNames: () => string[];
 
 // Warning: (ae-forgotten-export) The symbol "ISearchRequestParams" needs to be exported by the entry point index.d.ts
+// Warning: (ae-incompatible-release-tags) The symbol "getSearchParamsFromRequest" is marked as @public, but its signature references "SearchRequest" which is marked as @internal
 //
 // @public (undocumented)
 export function getSearchParamsFromRequest(searchRequest: SearchRequest, dependencies: {
@@ -795,7 +796,7 @@ export interface IEsSearchResponse<Source = any> extends IKibanaSearchResponse {
     isPartial?: boolean;
     isRunning?: boolean;
     // (undocumented)
-    rawResponse: SearchResponse_2<Source>;
+    rawResponse: SearchResponse<Source>;
 }
 
 // Warning: (ae-missing-release-tag) "IFieldFormat" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -1783,15 +1784,8 @@ export interface SearchInterceptorDeps {
     usageCollector?: SearchUsageCollector;
 }
 
-// Warning: (ae-missing-release-tag) "SearchRequest" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export type SearchRequest = any;
-
-// Warning: (ae-missing-release-tag) "SearchResponse" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
-//
-// @public (undocumented)
-export type SearchResponse = any;
+// @internal
+export type SearchRequest = Record<string, any>;
 
 // Warning: (ae-missing-release-tag) "SearchSourceFields" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -1991,21 +1985,21 @@ export const UI_SETTINGS: {
 // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "getFromSavedObject" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "flattenHitWrapper" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/index.ts:234:27 - (ae-forgotten-export) The symbol "formatHitProvider" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:372:20 - (ae-forgotten-export) The symbol "getRequestInspectorStats" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:372:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:372:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:372:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:374:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:375:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:384:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:385:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:386:1 - (ae-forgotten-export) The symbol "Ipv4Address" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:387:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:391:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:392:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:395:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:396:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts
-// src/plugins/data/public/index.ts:399:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:371:20 - (ae-forgotten-export) The symbol "getRequestInspectorStats" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:371:20 - (ae-forgotten-export) The symbol "getResponseInspectorStats" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:371:20 - (ae-forgotten-export) The symbol "tabifyAggResponse" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:371:20 - (ae-forgotten-export) The symbol "tabifyGetColumns" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:373:1 - (ae-forgotten-export) The symbol "CidrMask" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:374:1 - (ae-forgotten-export) The symbol "dateHistogramInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:383:1 - (ae-forgotten-export) The symbol "InvalidEsCalendarIntervalError" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:384:1 - (ae-forgotten-export) The symbol "InvalidEsIntervalFormatError" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:385:1 - (ae-forgotten-export) The symbol "Ipv4Address" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:386:1 - (ae-forgotten-export) The symbol "isDateHistogramBucketAggConfig" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:390:1 - (ae-forgotten-export) The symbol "isValidEsInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:391:1 - (ae-forgotten-export) The symbol "isValidInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:394:1 - (ae-forgotten-export) The symbol "parseInterval" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:395:1 - (ae-forgotten-export) The symbol "propFilter" needs to be exported by the entry point index.d.ts
+// src/plugins/data/public/index.ts:398:1 - (ae-forgotten-export) The symbol "toAbsoluteDates" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/query/state_sync/connect_to_query_state.ts:45:5 - (ae-forgotten-export) The symbol "FilterStateStore" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/types.ts:62:5 - (ae-forgotten-export) The symbol "createFiltersFromValueClickAction" needs to be exported by the entry point index.d.ts
 // src/plugins/data/public/types.ts:63:5 - (ae-forgotten-export) The symbol "createFiltersFromRangeSelectAction" needs to be exported by the entry point index.d.ts
diff --git a/src/plugins/data/public/search/fetch/handle_response.test.ts b/src/plugins/data/public/search/fetch/handle_response.test.ts
index 10e6eda3de3d0..9a9d806bc9cf8 100644
--- a/src/plugins/data/public/search/fetch/handle_response.test.ts
+++ b/src/plugins/data/public/search/fetch/handle_response.test.ts
@@ -23,6 +23,7 @@ import { handleResponse } from './handle_response';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { notificationServiceMock } from '../../../../../core/public/notifications/notifications_service.mock';
 import { setNotifications } from '../../services';
+import { SearchResponse } from 'elasticsearch';
 
 jest.mock('@kbn/i18n', () => {
   return {
@@ -44,7 +45,7 @@ describe('handleResponse', () => {
     const request = { body: {} };
     const response = {
       timed_out: true,
-    };
+    } as SearchResponse<any>;
     const result = handleResponse(request, response);
     expect(result).toBe(response);
     expect(notifications.toasts.addWarning).toBeCalled();
@@ -57,9 +58,12 @@ describe('handleResponse', () => {
     const request = { body: {} };
     const response = {
       _shards: {
-        failed: true,
+        failed: 1,
+        total: 2,
+        successful: 1,
+        skipped: 1,
       },
-    };
+    } as SearchResponse<any>;
     const result = handleResponse(request, response);
     expect(result).toBe(response);
     expect(notifications.toasts.addWarning).toBeCalled();
@@ -70,7 +74,7 @@ describe('handleResponse', () => {
 
   test('returns the response', () => {
     const request = {};
-    const response = {};
+    const response = {} as SearchResponse<any>;
     const result = handleResponse(request, response);
     expect(result).toBe(response);
   });
diff --git a/src/plugins/data/public/search/fetch/handle_response.tsx b/src/plugins/data/public/search/fetch/handle_response.tsx
index 7905468f91c5f..14e9b59f49bfb 100644
--- a/src/plugins/data/public/search/fetch/handle_response.tsx
+++ b/src/plugins/data/public/search/fetch/handle_response.tsx
@@ -20,12 +20,13 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiSpacer } from '@elastic/eui';
-import { ShardFailureOpenModalButton, ShardFailureRequest, ShardFailureResponse } from '../../ui';
+import { SearchResponse } from 'elasticsearch';
+import { ShardFailureOpenModalButton } from '../../ui';
 import { toMountPoint } from '../../../../kibana_react/public';
 import { getNotifications } from '../../services';
-import { SearchRequest, SearchResponse } from '..';
+import { SearchRequest } from '..';
 
-export function handleResponse(request: SearchRequest, response: SearchResponse) {
+export function handleResponse(request: SearchRequest, response: SearchResponse<any>) {
   if (response.timed_out) {
     getNotifications().toasts.addWarning({
       title: i18n.translate('data.search.searchSource.fetch.requestTimedOutNotificationMessage', {
@@ -53,11 +54,7 @@ export function handleResponse(request: SearchRequest, response: SearchResponse)
       <>
         {description}
         <EuiSpacer size="s" />
-        <ShardFailureOpenModalButton
-          request={request.body as ShardFailureRequest}
-          response={response as ShardFailureResponse}
-          title={title}
-        />
+        <ShardFailureOpenModalButton request={request.body} response={response} title={title} />
       </>
     );
 
diff --git a/src/plugins/data/public/search/fetch/request_error.ts b/src/plugins/data/public/search/fetch/request_error.ts
index 5e42a6fcf5b65..efaaafadf404e 100644
--- a/src/plugins/data/public/search/fetch/request_error.ts
+++ b/src/plugins/data/public/search/fetch/request_error.ts
@@ -17,8 +17,9 @@
  * under the License.
  */
 
+import { SearchResponse } from 'elasticsearch';
 import { KbnError } from '../../../../kibana_utils/common';
-import { SearchError, SearchResponse } from './types';
+import { SearchError } from './types';
 
 /**
  * Request Failure - When an entire multi request fails
@@ -26,8 +27,8 @@ import { SearchError, SearchResponse } from './types';
  * @param {Object} resp - optional HTTP response
  */
 export class RequestFailure extends KbnError {
-  public resp: SearchResponse;
-  constructor(err: SearchError | null = null, resp?: SearchResponse) {
+  public resp?: SearchResponse<any>;
+  constructor(err: SearchError | null = null, resp?: SearchResponse<any>) {
     super(`Request to Elasticsearch failed: ${JSON.stringify(resp || err?.message)}`);
 
     this.resp = resp;
diff --git a/src/plugins/data/public/search/fetch/types.ts b/src/plugins/data/public/search/fetch/types.ts
index 18d277204815b..670c4f731971a 100644
--- a/src/plugins/data/public/search/fetch/types.ts
+++ b/src/plugins/data/public/search/fetch/types.ts
@@ -20,8 +20,14 @@
 import { GetConfigFn } from '../../../common';
 import { ISearchStartLegacy } from '../types';
 
-export type SearchRequest = any;
-export type SearchResponse = any;
+/**
+ * @internal
+ *
+ * This type is used when flattenning a SearchSource and passing it down to legacy search.
+ * Once legacy search is removed, this type should become internal to `SearchSource`,
+ * where `ISearchRequestParams` is used externally instead.
+ */
+export type SearchRequest = Record<string, any>;
 
 export interface FetchOptions {
   abortSignal?: AbortSignal;
diff --git a/src/plugins/data/public/search/index.ts b/src/plugins/data/public/search/index.ts
index 32bcd8a279036..14eff13b378ee 100644
--- a/src/plugins/data/public/search/index.ts
+++ b/src/plugins/data/public/search/index.ts
@@ -34,13 +34,7 @@ export { getEsPreference } from './es_search';
 
 export { IKibanaSearchResponse, IKibanaSearchRequest } from '../../common/search';
 
-export {
-  SearchError,
-  FetchOptions,
-  SearchRequest,
-  SearchResponse,
-  getSearchParamsFromRequest,
-} from './fetch';
+export { SearchError, FetchOptions, getSearchParamsFromRequest, SearchRequest } from './fetch';
 
 export {
   ISearchSource,
diff --git a/src/plugins/data/public/search/legacy/call_client.ts b/src/plugins/data/public/search/legacy/call_client.ts
index 4b12f517daf78..3dcf11f72a742 100644
--- a/src/plugins/data/public/search/legacy/call_client.ts
+++ b/src/plugins/data/public/search/legacy/call_client.ts
@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import { SearchResponse } from 'elasticsearch';
 import { FetchOptions, FetchHandlers, handleResponse } from '../fetch';
 import { defaultSearchStrategy } from './default_search_strategy';
 import { SearchRequest } from '../index';
@@ -32,7 +33,7 @@ export function callClient(
     FetchOptions
   ]> = searchRequests.map((request, i) => [request, requestsOptions[i]]);
   const requestOptionsMap = new Map<SearchRequest, FetchOptions>(requestOptionEntries);
-  const requestResponseMap = new Map();
+  const requestResponseMap = new Map<SearchRequest, Promise<SearchResponse<any>>>();
 
   const { searching, abort } = defaultSearchStrategy.search({
     searchRequests,
@@ -45,5 +46,5 @@ export function callClient(
     if (abortSignal) abortSignal.addEventListener('abort', abort);
     requestResponseMap.set(request, response);
   });
-  return searchRequests.map((request) => requestResponseMap.get(request));
+  return searchRequests.map((request) => requestResponseMap.get(request)!);
 }
diff --git a/src/plugins/data/public/search/legacy/es_client/types.ts b/src/plugins/data/public/search/legacy/es_client/types.ts
index 7a56b9b0cb00a..2d35188322a4e 100644
--- a/src/plugins/data/public/search/legacy/es_client/types.ts
+++ b/src/plugins/data/public/search/legacy/es_client/types.ts
@@ -17,13 +17,14 @@
  * under the License.
  */
 
-import { SearchRequest, SearchResponse } from '../../fetch';
+import { SearchResponse } from 'elasticsearch';
+import { SearchRequest } from '../../fetch';
 
 export interface LegacyApiCaller {
   search: (searchRequest: SearchRequest) => LegacyApiCallerResponse;
   msearch: (searchRequest: SearchRequest) => LegacyApiCallerResponse;
 }
 
-interface LegacyApiCallerResponse extends Promise<SearchResponse> {
+interface LegacyApiCallerResponse extends Promise<SearchResponse<any>> {
   abort: () => void;
 }
diff --git a/src/plugins/data/public/search/legacy/fetch_soon.test.ts b/src/plugins/data/public/search/legacy/fetch_soon.test.ts
index d375398af1add..d7a85e65b475d 100644
--- a/src/plugins/data/public/search/legacy/fetch_soon.test.ts
+++ b/src/plugins/data/public/search/legacy/fetch_soon.test.ts
@@ -20,17 +20,27 @@
 import { fetchSoon } from './fetch_soon';
 import { callClient } from './call_client';
 import { FetchHandlers, FetchOptions } from '../fetch/types';
-import { SearchRequest, SearchResponse } from '../index';
+import { SearchRequest } from '../index';
+import { SearchResponse } from 'elasticsearch';
 import { GetConfigFn, UI_SETTINGS } from '../../../common';
 
 function getConfigStub(config: any = {}): GetConfigFn {
   return (key) => config[key];
 }
 
-const mockResponses: Record<string, SearchResponse> = {
-  foo: {},
-  bar: {},
-  baz: {},
+const mockResponses: Record<string, SearchResponse<any>> = {
+  foo: {
+    took: 1,
+    timed_out: false,
+  } as SearchResponse<any>,
+  bar: {
+    took: 2,
+    timed_out: false,
+  } as SearchResponse<any>,
+  baz: {
+    took: 3,
+    timed_out: false,
+  } as SearchResponse<any>,
 };
 
 jest.useFakeTimers();
diff --git a/src/plugins/data/public/search/legacy/fetch_soon.ts b/src/plugins/data/public/search/legacy/fetch_soon.ts
index 252682c7c8e58..16920a8a4dd97 100644
--- a/src/plugins/data/public/search/legacy/fetch_soon.ts
+++ b/src/plugins/data/public/search/legacy/fetch_soon.ts
@@ -17,9 +17,10 @@
  * under the License.
  */
 
+import { SearchResponse } from 'elasticsearch';
 import { callClient } from './call_client';
 import { FetchHandlers, FetchOptions } from '../fetch/types';
-import { SearchRequest, SearchResponse } from '../index';
+import { SearchRequest } from '../index';
 import { UI_SETTINGS } from '../../../common';
 
 /**
@@ -53,7 +54,7 @@ let requestsToFetch: SearchRequest[] = [];
 let requestOptions: FetchOptions[] = [];
 
 // The in-progress fetch (if there is one)
-let fetchInProgress: Promise<SearchResponse> | null = null;
+let fetchInProgress: any = null;
 
 /**
  * Delay fetching for a given amount of time, while batching up the requests to be fetched.
@@ -67,7 +68,7 @@ async function delayedFetch(
   options: FetchOptions,
   fetchHandlers: FetchHandlers,
   ms: number
-) {
+): Promise<SearchResponse<any>> {
   if (ms === 0) {
     return callClient([request], [options], fetchHandlers)[0];
   }
@@ -75,7 +76,10 @@ async function delayedFetch(
   const i = requestsToFetch.length;
   requestsToFetch = [...requestsToFetch, request];
   requestOptions = [...requestOptions, options];
-  const responses: SearchResponse[] = await (fetchInProgress =
+
+  // Note: the typescript here only worked because `SearchResponse` was `any`
+  // Since this code is legacy, I'm leaving the any here.
+  const responses: any[] = await (fetchInProgress =
     fetchInProgress ||
     delay(() => {
       const response = callClient(requestsToFetch, requestOptions, fetchHandlers);
diff --git a/src/plugins/data/public/search/legacy/types.ts b/src/plugins/data/public/search/legacy/types.ts
index 3812cec7a2aa2..ed17db464feff 100644
--- a/src/plugins/data/public/search/legacy/types.ts
+++ b/src/plugins/data/public/search/legacy/types.ts
@@ -17,8 +17,9 @@
  * under the License.
  */
 
+import { SearchResponse } from 'elasticsearch';
 import { FetchHandlers } from '../fetch';
-import { SearchRequest, SearchResponse } from '..';
+import { SearchRequest } from '..';
 
 export interface SearchStrategySearchParams extends FetchHandlers {
   searchRequests: SearchRequest[];
@@ -30,7 +31,7 @@ export interface SearchStrategyProvider {
   search: (params: SearchStrategySearchParams) => SearchStrategyResponse;
 }
 
-export interface SearchStrategyResponse {
-  searching: Promise<SearchResponse[]>;
+export interface SearchStrategyResponse<T = any> {
+  searching: Promise<Array<SearchResponse<T>>>;
   abort: () => void;
 }
diff --git a/src/plugins/data/public/search/search_source/search_source.ts b/src/plugins/data/public/search/search_source/search_source.ts
index 06ad13bfcfdf5..d2e3370762059 100644
--- a/src/plugins/data/public/search/search_source/search_source.ts
+++ b/src/plugins/data/public/search/search_source/search_source.ts
@@ -75,9 +75,15 @@ import { map } from 'rxjs/operators';
 import { normalizeSortRequest } from './normalize_sort_request';
 import { filterDocvalueFields } from './filter_docvalue_fields';
 import { fieldWildcardFilter } from '../../../../kibana_utils/common';
-import { IIndexPattern, ISearchGeneric, SearchRequest } from '../..';
+import { IIndexPattern, ISearchGeneric } from '../..';
 import { SearchSourceOptions, SearchSourceFields } from './types';
-import { FetchOptions, RequestFailure, handleResponse, getSearchParamsFromRequest } from '../fetch';
+import {
+  FetchOptions,
+  RequestFailure,
+  handleResponse,
+  getSearchParamsFromRequest,
+  SearchRequest,
+} from '../fetch';
 
 import { getEsQueryConfig, buildEsQuery, Filter, UI_SETTINGS } from '../../../common';
 import { getHighlightRequest } from '../../../common/field_formats';
@@ -268,10 +274,11 @@ export class SearchSource {
     if (getConfig(UI_SETTINGS.COURIER_BATCH_SEARCHES)) {
       response = await this.legacyFetch(searchRequest, options);
     } else {
-      response = this.fetch$(searchRequest, options.abortSignal).toPromise();
+      response = await this.fetch$(searchRequest, options.abortSignal).toPromise();
     }
 
-    if (response.error) {
+    // TODO: Remove casting when https://github.com/elastic/elasticsearch-js/issues/1287 is resolved
+    if ((response as any).error) {
       throw new RequestFailure(null, response);
     }
 
@@ -403,7 +410,7 @@ export class SearchSource {
     return searchRequest;
   }
 
-  private getIndexType(index: IIndexPattern) {
+  private getIndexType(index?: IIndexPattern) {
     if (this.searchStrategyId) {
       return this.searchStrategyId === 'default' ? undefined : this.searchStrategyId;
     } else {
diff --git a/src/plugins/data/public/ui/index.ts b/src/plugins/data/public/ui/index.ts
index cb46a838a8c30..35b1bc50ddb1e 100644
--- a/src/plugins/data/public/ui/index.ts
+++ b/src/plugins/data/public/ui/index.ts
@@ -24,11 +24,7 @@ export { QueryStringInput } from './query_string_input/query_string_input';
 export { SearchBar, SearchBarProps, StatefulSearchBarProps } from './search_bar';
 
 // @internal
-export {
-  ShardFailureOpenModalButton,
-  ShardFailureRequest,
-  ShardFailureResponse,
-} from './shard_failure_modal';
+export { ShardFailureOpenModalButton, ShardFailureRequest } from './shard_failure_modal';
 
 // @internal
 export { SavedQueryManagementComponent } from './saved_query_management';
diff --git a/src/plugins/data/public/ui/shard_failure_modal/__mocks__/shard_failure_response.ts b/src/plugins/data/public/ui/shard_failure_modal/__mocks__/shard_failure_response.ts
index 573aeefcdf469..6178fcf92a790 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/__mocks__/shard_failure_response.ts
+++ b/src/plugins/data/public/ui/shard_failure_modal/__mocks__/shard_failure_response.ts
@@ -16,9 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { ShardFailureResponse } from '../shard_failure_types';
 
-export const shardFailureResponse = {
+import { SearchResponse } from 'elasticsearch';
+
+export const shardFailureResponse: SearchResponse<any> = {
   _shards: {
     total: 2,
     successful: 1,
@@ -43,4 +44,4 @@ export const shardFailureResponse = {
       },
     ],
   },
-} as ShardFailureResponse;
+} as any;
diff --git a/src/plugins/data/public/ui/shard_failure_modal/index.ts b/src/plugins/data/public/ui/shard_failure_modal/index.ts
index f4c2e26a756e3..e5af9633e73b7 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/index.ts
+++ b/src/plugins/data/public/ui/shard_failure_modal/index.ts
@@ -17,5 +17,5 @@
  * under the License.
  */
 
-export { ShardFailureRequest, ShardFailureResponse } from './shard_failure_types';
+export { ShardFailureRequest } from './shard_failure_types';
 export { ShardFailureOpenModalButton } from './shard_failure_open_modal_button';
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.test.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.test.tsx
index 49983c9926381..d40770fb74ef1 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.test.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_description.test.tsx
@@ -24,7 +24,8 @@ import { ShardFailure } from './shard_failure_types';
 
 describe('ShardFailureDescription', () => {
   it('renders matching snapshot given valid properties', () => {
-    const failure = shardFailureResponse._shards.failures[0] as ShardFailure;
+    // TODO: remove cast once https://github.com/elastic/elasticsearch-js/issues/1286 is resolved
+    const failure = (shardFailureResponse._shards as any).failures[0] as ShardFailure;
     const component = shallowWithIntl(<ShardFailureDescription {...failure} />);
     expect(component).toMatchSnapshot();
   });
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_modal.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_modal.tsx
index 535f63161966d..52f3cf702c2fb 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_modal.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_modal.tsx
@@ -32,18 +32,24 @@ import {
   EuiButtonEmpty,
   EuiCallOut,
 } from '@elastic/eui';
+import { SearchResponse } from 'elasticsearch';
 import { ShardFailureTable } from './shard_failure_table';
-import { ShardFailureResponse, ShardFailureRequest } from './shard_failure_types';
+import { ShardFailureRequest } from './shard_failure_types';
 
 export interface Props {
   onClose: () => void;
   request: ShardFailureRequest;
-  response: ShardFailureResponse;
+  response: SearchResponse<any>;
   title: string;
 }
 
 export function ShardFailureModal({ request, response, title, onClose }: Props) {
-  if (!response || !response._shards || !Array.isArray(response._shards.failures) || !request) {
+  if (
+    !response ||
+    !response._shards ||
+    !Array.isArray((response._shards as any).failures) ||
+    !request
+  ) {
     // this should never ever happen, but just in case
     return (
       <EuiCallOut title="Sorry, there was an error" color="danger" iconType="alert">
@@ -51,10 +57,9 @@ export function ShardFailureModal({ request, response, title, onClose }: Props)
       </EuiCallOut>
     );
   }
-
+  const failures = (response._shards as any).failures;
   const requestJSON = JSON.stringify(request, null, 2);
   const responseJSON = JSON.stringify(response, null, 2);
-  const failures = response._shards.failures;
 
   const tabs = [
     {
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.tsx
index fa42745da2e48..9d89dc4cb1a29 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.tsx
@@ -20,14 +20,15 @@ import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButton, EuiTextAlign } from '@elastic/eui';
 
+import { SearchResponse } from 'elasticsearch';
 import { getOverlays } from '../../services';
 import { toMountPoint } from '../../../../kibana_react/public';
 import { ShardFailureModal } from './shard_failure_modal';
-import { ShardFailureResponse, ShardFailureRequest } from './shard_failure_types';
+import { ShardFailureRequest } from './shard_failure_types';
 
 interface Props {
   request: ShardFailureRequest;
-  response: ShardFailureResponse;
+  response: SearchResponse<any>;
   title: string;
 }
 
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_table.test.tsx b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_table.test.tsx
index 9d00233d37f8c..22478ebd57393 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_table.test.tsx
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_table.test.tsx
@@ -24,7 +24,7 @@ import { ShardFailure } from './shard_failure_types';
 
 describe('ShardFailureTable', () => {
   it('renders matching snapshot given valid properties', () => {
-    const failures = shardFailureResponse._shards.failures as ShardFailure[];
+    const failures = (shardFailureResponse._shards as any).failures as ShardFailure[];
     const component = shallowWithIntl(<ShardFailureTable failures={failures} />);
     expect(component).toMatchSnapshot();
   });
diff --git a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_types.ts b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_types.ts
index b1ce3f30c4278..a7a56d2de9621 100644
--- a/src/plugins/data/public/ui/shard_failure_modal/shard_failure_types.ts
+++ b/src/plugins/data/public/ui/shard_failure_modal/shard_failure_types.ts
@@ -25,16 +25,6 @@ export interface ShardFailureRequest {
   stored_fields: string[];
 }
 
-export interface ShardFailureResponse {
-  _shards: {
-    failed: number;
-    failures: ShardFailure[];
-    skipped: number;
-    successful: number;
-    total: number;
-  };
-}
-
 export interface ShardFailure {
   index: string;
   node: string;
diff --git a/src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts b/src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
index 437898201863f..9a199ea4a62fc 100644
--- a/src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
+++ b/src/plugins/discover/public/application/angular/context/api/utils/fetch_hits_in_interval.ts
@@ -18,7 +18,7 @@
  */
 import { ISearchSource, EsQuerySortValue, SortDirection } from '../../../../../../../data/public';
 import { convertTimeValueToIso } from './date_conversion';
-import { EsHitRecordList } from '../context';
+import { EsHitRecordList, EsHitRecord } from '../context';
 import { IntervalValue } from './generate_intervals';
 import { EsQuerySearchAfter } from './get_es_query_search_after';
 
@@ -76,5 +76,6 @@ export async function fetchHitsInInterval(
     .setField('version', true)
     .fetch();
 
-  return response.hits ? response.hits.hits : [];
+  // TODO: There's a difference in the definition of SearchResponse and EsHitRecord
+  return ((response.hits?.hits as unknown) as EsHitRecord[]) || [];
 }
diff --git a/src/plugins/input_control_vis/public/control/list_control_factory.ts b/src/plugins/input_control_vis/public/control/list_control_factory.ts
index acbbf08c7d004..325eb471d510b 100644
--- a/src/plugins/input_control_vis/public/control/list_control_factory.ts
+++ b/src/plugins/input_control_vis/public/control/list_control_factory.ts
@@ -190,7 +190,9 @@ export class ListControl extends Control<PhraseFilterManager> {
       return;
     }
 
-    this.partialResults = resp.terminated_early || resp.timed_out;
+    // TODO: terminated_early is missing from response definition.
+    // https://github.com/elastic/elasticsearch-js/issues/1289
+    this.partialResults = (resp as any).terminated_early || resp.timed_out;
     this.selectOptions = selectOptions;
     this.enable = true;
     this.disabledReason = '';
diff --git a/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts b/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts
index 02d5a415eec2e..9ca6db40a3054 100644
--- a/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts
+++ b/x-pack/plugins/infra/public/utils/logs_overview_fetchers.ts
@@ -5,7 +5,7 @@
  */
 
 import { encode } from 'rison-node';
-import { SearchResponse } from 'src/plugins/data/public';
+import { SearchResponse } from 'elasticsearch';
 import {
   FetchData,
   FetchDataParams,
@@ -87,7 +87,7 @@ async function fetchLogsOverview(
   dataPlugin: InfraClientStartDeps['data']
 ): Promise<StatsAndSeries> {
   return new Promise((resolve, reject) => {
-    let esResponse: SearchResponse = {};
+    let esResponse: SearchResponse<any> | undefined;
 
     dataPlugin.search
       .search({
@@ -104,8 +104,8 @@ async function fetchLogsOverview(
         (response) => (esResponse = response.rawResponse),
         (error) => reject(error),
         () => {
-          if (esResponse.aggregations) {
-            resolve(processLogsOverviewAggregations(esResponse.aggregations));
+          if (esResponse?.aggregations) {
+            resolve(processLogsOverviewAggregations(esResponse!.aggregations));
           } else {
             resolve({ stats: {}, series: {} });
           }