diff --git a/docs/apm/images/apm-anomaly-alert.png b/docs/apm/images/apm-anomaly-alert.png
new file mode 100644
index 0000000000000..35ce9a2296c9c
Binary files /dev/null and b/docs/apm/images/apm-anomaly-alert.png differ
diff --git a/docs/apm/machine-learning.asciidoc b/docs/apm/machine-learning.asciidoc
index b203b8668072f..db2a1ef6e2da0 100644
--- a/docs/apm/machine-learning.asciidoc
+++ b/docs/apm/machine-learning.asciidoc
@@ -1,36 +1,61 @@
 [role="xpack"]
 [[machine-learning-integration]]
-===  integration
+=== Machine learning integration
 
 ++++
 <titleabbrev>Integrate with machine learning</titleabbrev>
 ++++
 
-The Machine Learning integration initiates a new job predefined to calculate anomaly scores on APM transaction durations.
-Jobs can be created per transaction type, and are based on the service's average response time.
+The Machine learning integration initiates a new job predefined to calculate anomaly scores on APM transaction durations.
+With this integration, you can quickly pinpoint anomalous transactions and see the health of
+any upstream and downstream services.
 
-After a machine learning job is created, results are shown in two places:
+Machine learning jobs are created per environment, and are based on a service's average response time.
+Because jobs are created at the environment level,
+you can add new services to your existing environments without the need for additional machine learning jobs.
 
-The transaction duration graph will show the expected bounds and add an annotation when the anomaly score is 75 or above.
+After a machine learning job is created, results are shown in two places:
 
+* The transaction duration chart will show the expected bounds and add an annotation when the anomaly score is 75 or above.
++
 [role="screenshot"]
 image::apm/images/apm-ml-integration.png[Example view of anomaly scores on response times in the APM app]
 
-Service maps will display a color-coded anomaly indicator based on the detected anomaly score.
-
+* Service maps will display a color-coded anomaly indicator based on the detected anomaly score.
++
 [role="screenshot"]
 image::apm/images/apm-service-map-anomaly.png[Example view of anomaly scores on service maps in the APM app]
 
 [float]
 [[create-ml-integration]]
-=== Create a new machine learning job
+=== Enable anomaly detection
+
+To enable machine learning anomaly detection:
+
+. From the Services overview, Traces overview, or Service Map tab,
+select **Anomaly detection**.
+
+. Click **Create ML Job**.
 
-To enable machine learning anomaly detection, first choose a service to monitor.
-Then, select **Integrations** > **Enable ML anomaly detection** and click **Create job**.
+. Machine learning jobs are created at the environment level.
+Select all of the service environments that you want to enable anomaly detection in.
+Anomalies will surface for all services and transaction types within the selected environments.
+
+. Click **Create Jobs**.
 
 That's it! After a few minutes, the job will begin calculating results;
-it might take additional time for results to appear on your graph.
-Jobs can be managed in *Machine Learning jobs management*.
+it might take additional time for results to appear on your service maps.
+Existing jobs can be managed in *Machine Learning jobs management*.
 
 APM specific anomaly detection wizards are also available for certain Agents.
 See the machine learning {ml-docs}/ootb-ml-jobs-apm.html[APM anomaly detection configurations] for more information.
+
+[float]
+[[warning-ml-integration]]
+=== Anomaly detection warning
+
+To make machine learning as easy as possible to set up,
+the APM app will warn you when filtered to an environment without a machine learning job.
+
+[role="screenshot"]
+image::apm/images/apm-anomaly-alert.png[Example view of anomaly alert in the APM app]
\ No newline at end of file
diff --git a/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.completed_.md b/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.completed_.md
new file mode 100644
index 0000000000000..c9f8ab11f6b12
--- /dev/null
+++ b/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.completed_.md
@@ -0,0 +1,18 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [kibana-plugin-core-server](./kibana-plugin-core-server.md) &gt; [KibanaRequestEvents](./kibana-plugin-core-server.kibanarequestevents.md) &gt; [completed$](./kibana-plugin-core-server.kibanarequestevents.completed_.md)
+
+## KibanaRequestEvents.completed$ property
+
+Observable that emits once if and when the request has been completely handled.
+
+<b>Signature:</b>
+
+```typescript
+completed$: Observable<void>;
+```
+
+## Remarks
+
+The request may be considered completed if: - A response has been sent to the client; or - The request was aborted.
+
diff --git a/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.md b/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.md
index 21826c8b29383..dfd7efd27cb5a 100644
--- a/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.md
+++ b/docs/development/core/server/kibana-plugin-core-server.kibanarequestevents.md
@@ -17,4 +17,5 @@ export interface KibanaRequestEvents
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [aborted$](./kibana-plugin-core-server.kibanarequestevents.aborted_.md) | <code>Observable&lt;void&gt;</code> | Observable that emits once if and when the request has been aborted. |
+|  [completed$](./kibana-plugin-core-server.kibanarequestevents.completed_.md) | <code>Observable&lt;void&gt;</code> | Observable that emits once if and when the request has been completely handled. |
 
diff --git a/src/core/server/http/integration_tests/request.test.ts b/src/core/server/http/integration_tests/request.test.ts
index 2d018f7f464b5..3a7335583296e 100644
--- a/src/core/server/http/integration_tests/request.test.ts
+++ b/src/core/server/http/integration_tests/request.test.ts
@@ -23,6 +23,7 @@ import { HttpService } from '../http_service';
 import { contextServiceMock } from '../../context/context_service.mock';
 import { loggingSystemMock } from '../../logging/logging_system.mock';
 import { createHttpServer } from '../test_utils';
+import { schema } from '@kbn/config-schema';
 
 let server: HttpService;
 
@@ -195,6 +196,96 @@ describe('KibanaRequest', () => {
         expect(nextSpy).toHaveBeenCalledTimes(0);
         expect(completeSpy).toHaveBeenCalledTimes(1);
       });
+
+      it('does not complete before response has been sent', async () => {
+        const { server: innerServer, createRouter, registerOnPreAuth } = await server.setup(
+          setupDeps
+        );
+        const router = createRouter('/');
+
+        const nextSpy = jest.fn();
+        const completeSpy = jest.fn();
+
+        registerOnPreAuth((req, res, toolkit) => {
+          req.events.aborted$.subscribe({
+            next: nextSpy,
+            complete: completeSpy,
+          });
+          return toolkit.next();
+        });
+
+        router.post(
+          { path: '/', validate: { body: schema.any() } },
+          async (context, request, res) => {
+            expect(completeSpy).not.toHaveBeenCalled();
+            return res.ok({ body: 'ok' });
+          }
+        );
+
+        await server.start();
+
+        await supertest(innerServer.listener).post('/').send({ data: 'test' }).expect(200);
+
+        expect(nextSpy).toHaveBeenCalledTimes(0);
+        expect(completeSpy).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    describe('completed$', () => {
+      it('emits once and completes when response is sent', async () => {
+        const { server: innerServer, createRouter } = await server.setup(setupDeps);
+        const router = createRouter('/');
+
+        const nextSpy = jest.fn();
+        const completeSpy = jest.fn();
+
+        router.get({ path: '/', validate: false }, async (context, req, res) => {
+          req.events.completed$.subscribe({
+            next: nextSpy,
+            complete: completeSpy,
+          });
+
+          expect(nextSpy).not.toHaveBeenCalled();
+          expect(completeSpy).not.toHaveBeenCalled();
+          return res.ok({ body: 'ok' });
+        });
+
+        await server.start();
+
+        await supertest(innerServer.listener).get('/').expect(200);
+        expect(nextSpy).toHaveBeenCalledTimes(1);
+        expect(completeSpy).toHaveBeenCalledTimes(1);
+      });
+
+      it('emits once and completes when response is aborted', async (done) => {
+        expect.assertions(2);
+        const { server: innerServer, createRouter } = await server.setup(setupDeps);
+        const router = createRouter('/');
+
+        const nextSpy = jest.fn();
+
+        router.get({ path: '/', validate: false }, async (context, req, res) => {
+          req.events.completed$.subscribe({
+            next: nextSpy,
+            complete: () => {
+              expect(nextSpy).toHaveBeenCalledTimes(1);
+              done();
+            },
+          });
+
+          expect(nextSpy).not.toHaveBeenCalled();
+          await delay(30000);
+          return res.ok({ body: 'ok' });
+        });
+
+        await server.start();
+
+        const incomingRequest = supertest(innerServer.listener)
+          .get('/')
+          // end required to send request
+          .end();
+        setTimeout(() => incomingRequest.abort(), 50);
+      });
     });
   });
 });
diff --git a/src/core/server/http/router/request.ts b/src/core/server/http/router/request.ts
index 0e73431fe7c6d..93ffb5aa48259 100644
--- a/src/core/server/http/router/request.ts
+++ b/src/core/server/http/router/request.ts
@@ -64,6 +64,16 @@ export interface KibanaRequestEvents {
    * Observable that emits once if and when the request has been aborted.
    */
   aborted$: Observable<void>;
+
+  /**
+   * Observable that emits once if and when the request has been completely handled.
+   *
+   * @remarks
+   * The request may be considered completed if:
+   * - A response has been sent to the client; or
+   * - The request was aborted.
+   */
+  completed$: Observable<void>;
 }
 
 /**
@@ -186,11 +196,16 @@ export class KibanaRequest<
 
   private getEvents(request: Request): KibanaRequestEvents {
     const finish$ = merge(
-      fromEvent(request.raw.req, 'end'), // all data consumed
+      fromEvent(request.raw.res, 'finish'), // Response has been sent
       fromEvent(request.raw.req, 'close') // connection was closed
     ).pipe(shareReplay(1), first());
+
+    const aborted$ = fromEvent<void>(request.raw.req, 'aborted').pipe(first(), takeUntil(finish$));
+    const completed$ = merge<void, void>(finish$, aborted$).pipe(shareReplay(1), first());
+
     return {
-      aborted$: fromEvent<void>(request.raw.req, 'aborted').pipe(first(), takeUntil(finish$)),
+      aborted$,
+      completed$,
     } as const;
   }
 
diff --git a/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap b/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap
index 95230b52c5c03..eab29731ea524 100644
--- a/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap
+++ b/src/core/server/rendering/__snapshots__/rendering_service.test.ts.snap
@@ -10,37 +10,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -83,37 +64,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -156,37 +118,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -233,37 +176,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/translations/en.json",
@@ -306,37 +230,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -379,37 +284,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -452,37 +338,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/translations/en.json",
@@ -525,37 +392,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -600,37 +448,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
@@ -673,37 +502,18 @@ Object {
     "warnLegacyBrowsers": true,
   },
   "env": Object {
-    "binDir": Any<String>,
-    "cliArgs": Object {
-      "basePath": false,
-      "dev": true,
-      "open": false,
-      "optimize": false,
-      "oss": false,
-      "quiet": false,
-      "repl": false,
-      "runExamples": false,
-      "silent": false,
-      "watch": false,
-    },
-    "configDir": Any<String>,
-    "configs": Array [],
-    "homeDir": Any<String>,
-    "isDevClusterMaster": false,
-    "logDir": Any<String>,
     "mode": Object {
-      "dev": true,
-      "name": "development",
-      "prod": false,
+      "dev": Any<Boolean>,
+      "name": Any<String>,
+      "prod": Any<Boolean>,
     },
     "packageInfo": Object {
       "branch": Any<String>,
       "buildNum": Any<Number>,
       "buildSha": Any<String>,
-      "dist": false,
+      "dist": Any<Boolean>,
       "version": Any<String>,
     },
-    "pluginSearchPaths": Any<Array>,
   },
   "i18n": Object {
     "translationsUrl": "/mock-server-basepath/translations/en.json",
diff --git a/src/core/server/rendering/rendering_service.test.ts b/src/core/server/rendering/rendering_service.test.ts
index d1c527aca4dba..7caf4af850c10 100644
--- a/src/core/server/rendering/rendering_service.test.ts
+++ b/src/core/server/rendering/rendering_service.test.ts
@@ -30,17 +30,18 @@ const INJECTED_METADATA = {
   branch: expect.any(String),
   buildNumber: expect.any(Number),
   env: {
-    binDir: expect.any(String),
-    configDir: expect.any(String),
-    homeDir: expect.any(String),
-    logDir: expect.any(String),
+    mode: {
+      name: expect.any(String),
+      dev: expect.any(Boolean),
+      prod: expect.any(Boolean),
+    },
     packageInfo: {
       branch: expect.any(String),
       buildNum: expect.any(Number),
       buildSha: expect.any(String),
+      dist: expect.any(Boolean),
       version: expect.any(String),
     },
-    pluginSearchPaths: expect.any(Array),
   },
   legacyMetadata: {
     branch: expect.any(String),
diff --git a/src/core/server/rendering/rendering_service.tsx b/src/core/server/rendering/rendering_service.tsx
index 8f87d62496891..f49952ec713fb 100644
--- a/src/core/server/rendering/rendering_service.tsx
+++ b/src/core/server/rendering/rendering_service.tsx
@@ -55,7 +55,10 @@ export class RenderingService implements CoreService<InternalRenderingServiceSet
         if (!this.legacyInternals) {
           throw new Error('Cannot render before "start"');
         }
-        const { env } = this.coreContext;
+        const env = {
+          mode: this.coreContext.env.mode,
+          packageInfo: this.coreContext.env.packageInfo,
+        };
         const basePath = http.basePath.get(request);
         const serverBasePath = http.basePath.serverBasePath;
         const settings = {
diff --git a/src/core/server/rendering/types.ts b/src/core/server/rendering/types.ts
index 8746f455ced11..d41c308ac66a4 100644
--- a/src/core/server/rendering/types.ts
+++ b/src/core/server/rendering/types.ts
@@ -19,7 +19,7 @@
 
 import { i18n } from '@kbn/i18n';
 
-import { Env } from '../config';
+import { EnvironmentMode, PackageInfo } from '../config';
 import { ICspConfig } from '../csp';
 import { InternalHttpServiceSetup, KibanaRequest, LegacyRequest } from '../http';
 import { LegacyNavLink, LegacyServiceDiscoverPlugins } from '../legacy';
@@ -41,7 +41,10 @@ export interface RenderingMetadata {
     branch: string;
     basePath: string;
     serverBasePath: string;
-    env: Env;
+    env: {
+      mode: EnvironmentMode;
+      packageInfo: PackageInfo;
+    };
     legacyMode: boolean;
     anonymousStatusPage: boolean;
     i18n: {
diff --git a/src/core/server/server.api.md b/src/core/server/server.api.md
index c1054c27d084e..21ef66230f698 100644
--- a/src/core/server/server.api.md
+++ b/src/core/server/server.api.md
@@ -1071,6 +1071,7 @@ export class KibanaRequest<Params = unknown, Query = unknown, Body = unknown, Me
 // @public
 export interface KibanaRequestEvents {
     aborted$: Observable<void>;
+    completed$: Observable<void>;
 }
 
 // @public
diff --git a/src/dev/build/tasks/os_packages/service_templates/sysv/etc/init.d/kibana b/src/dev/build/tasks/os_packages/service_templates/sysv/etc/init.d/kibana
index 8facbb709cc5c..449fc4e75fce8 100755
--- a/src/dev/build/tasks/os_packages/service_templates/sysv/etc/init.d/kibana
+++ b/src/dev/build/tasks/os_packages/service_templates/sysv/etc/init.d/kibana
@@ -22,7 +22,7 @@ pidfile="/var/run/kibana/$name.pid"
 [ -r /etc/default/$name ] && . /etc/default/$name
 [ -r /etc/sysconfig/$name ] && . /etc/sysconfig/$name
 
-export KIBANA_PATH_CONF
+export KBN_PATH_CONF
 export NODE_OPTIONS
 
 [ -z "$nice" ] && nice=0
diff --git a/src/legacy/server/status/routes/api/register_stats.js b/src/legacy/server/status/routes/api/register_stats.js
index 0221c7e0ea085..2cd780d21f681 100644
--- a/src/legacy/server/status/routes/api/register_stats.js
+++ b/src/legacy/server/status/routes/api/register_stats.js
@@ -19,6 +19,7 @@
 
 import Joi from 'joi';
 import boom from 'boom';
+import { defaultsDeep } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { wrapAuthConfig } from '../../wrap_auth_config';
 import { getKibanaInfoForStats } from '../../lib';
@@ -120,10 +121,9 @@ export function registerStatsApi(usageCollection, server, config, kbnServer) {
                     },
                   };
                 } else {
-                  accum = {
-                    ...accum,
-                    [usageKey]: usage[usageKey],
-                  };
+                  // I don't think we need to it this for the above conditions, but do it for most as it will
+                  // match the behavior done in monitoring/bulk_uploader
+                  defaultsDeep(accum, { [usageKey]: usage[usageKey] });
                 }
 
                 return accum;
diff --git a/src/plugins/dashboard/config.ts b/src/plugins/dashboard/config.ts
new file mode 100644
index 0000000000000..ff968a51679e0
--- /dev/null
+++ b/src/plugins/dashboard/config.ts
@@ -0,0 +1,26 @@
+/*
+ * 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.
+ */
+
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  allowByValueEmbeddables: schema.boolean({ defaultValue: false }),
+});
+
+export type ConfigSchema = TypeOf<typeof configSchema>;
diff --git a/src/plugins/dashboard/public/plugin.tsx b/src/plugins/dashboard/public/plugin.tsx
index f0b57fec169fd..f1319665d258b 100644
--- a/src/plugins/dashboard/public/plugin.tsx
+++ b/src/plugins/dashboard/public/plugin.tsx
@@ -94,6 +94,10 @@ declare module '../../share/public' {
 
 export type DashboardUrlGenerator = UrlGeneratorContract<typeof DASHBOARD_APP_URL_GENERATOR>;
 
+interface DashboardFeatureFlagConfig {
+  allowByValueEmbeddables: boolean;
+}
+
 interface SetupDependencies {
   data: DataPublicPluginSetup;
   embeddable: EmbeddableSetup;
@@ -125,6 +129,7 @@ export interface DashboardStart {
     embeddableType: string;
   }) => void | undefined;
   dashboardUrlGenerator?: DashboardUrlGenerator;
+  dashboardFeatureFlagConfig: DashboardFeatureFlagConfig;
   DashboardContainerByValueRenderer: ReturnType<typeof createDashboardContainerByValueRenderer>;
 }
 
@@ -411,6 +416,7 @@ export class DashboardPlugin
       getSavedDashboardLoader: () => savedDashboardLoader,
       addEmbeddableToDashboard: this.addEmbeddableToDashboard.bind(this, core),
       dashboardUrlGenerator: this.dashboardUrlGenerator,
+      dashboardFeatureFlagConfig: this.initializerContext.config.get<DashboardFeatureFlagConfig>(),
       DashboardContainerByValueRenderer: createDashboardContainerByValueRenderer({
         factory: dashboardContainerFactory,
       }),
diff --git a/src/plugins/dashboard/server/index.ts b/src/plugins/dashboard/server/index.ts
index 9719586001c59..3ef7abba5776b 100644
--- a/src/plugins/dashboard/server/index.ts
+++ b/src/plugins/dashboard/server/index.ts
@@ -17,8 +17,16 @@
  * under the License.
  */
 
-import { PluginInitializerContext } from '../../../core/server';
+import { PluginInitializerContext, PluginConfigDescriptor } from '../../../core/server';
 import { DashboardPlugin } from './plugin';
+import { configSchema, ConfigSchema } from '../config';
+
+export const config: PluginConfigDescriptor<ConfigSchema> = {
+  exposeToBrowser: {
+    allowByValueEmbeddables: true,
+  },
+  schema: configSchema,
+};
 
 //  This exports static code and TypeScript types,
 //  as well as, Kibana Platform `plugin()` initializer.
diff --git a/src/plugins/vis_type_timeseries/server/saved_objects/tsvb_telemetry.ts b/src/plugins/vis_type_timeseries/server/saved_objects/tsvb_telemetry.ts
index a9b542af68c9d..dd748ea2d3815 100644
--- a/src/plugins/vis_type_timeseries/server/saved_objects/tsvb_telemetry.ts
+++ b/src/plugins/vis_type_timeseries/server/saved_objects/tsvb_telemetry.ts
@@ -42,5 +42,7 @@ export const tsvbTelemetrySavedObjectType: SavedObjectsType = {
   migrations: {
     '7.7.0': flow(resetCount),
     '7.8.0': flow(resetCount),
+    '7.9.0': flow(resetCount),
+    '7.10.0': flow(resetCount),
   },
 };
diff --git a/x-pack/plugins/apm/public/components/app/Home/index.tsx b/x-pack/plugins/apm/public/components/app/Home/index.tsx
index c6c0861c26a34..b2f15dbb11341 100644
--- a/x-pack/plugins/apm/public/components/app/Home/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Home/index.tsx
@@ -84,7 +84,7 @@ interface Props {
 
 export function Home({ tab }: Props) {
   const { config, core } = useApmPluginContext();
-  const isMLEnabled = !!core.application.capabilities.ml;
+  const canAccessML = !!core.application.capabilities.ml?.canAccessML;
   const homeTabs = getHomeTabs(config);
   const selectedTab = homeTabs.find(
     (homeTab) => homeTab.name === tab
@@ -106,7 +106,7 @@ export function Home({ tab }: Props) {
               </EuiButtonEmpty>
             </SettingsLink>
           </EuiFlexItem>
-          {isMLEnabled && (
+          {canAccessML && (
             <EuiFlexItem grow={false}>
               <AnomalyDetectionSetupLink />
             </EuiFlexItem>
diff --git a/x-pack/plugins/apm/public/components/app/Settings/index.tsx b/x-pack/plugins/apm/public/components/app/Settings/index.tsx
index 1471bc345d850..cb4726244e50c 100644
--- a/x-pack/plugins/apm/public/components/app/Settings/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/Settings/index.tsx
@@ -20,7 +20,7 @@ import { useApmPluginContext } from '../../../hooks/useApmPluginContext';
 
 export function Settings(props: { children: ReactNode }) {
   const plugin = useApmPluginContext();
-  const isMLEnabled = !!plugin.core.application.capabilities.ml;
+  const canAccessML = !!plugin.core.application.capabilities.ml?.canAccessML;
   const { search, pathname } = useLocation();
   return (
     <>
@@ -51,7 +51,7 @@ export function Settings(props: { children: ReactNode }) {
                       '/settings/agent-configuration'
                     ),
                   },
-                  ...(isMLEnabled
+                  ...(canAccessML
                     ? [
                         {
                           name: i18n.translate(
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
new file mode 100644
index 0000000000000..0b5bd8adf8cb9
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.component.tsx
@@ -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 React, { FC } from 'react';
+import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
+import {
+  SavedObjectFinderUi,
+  SavedObjectMetaData,
+} from '../../../../../../src/plugins/saved_objects/public/';
+import { ComponentStrings } from '../../../i18n';
+import { useServices } from '../../services';
+
+const { AddEmbeddableFlyout: strings } = ComponentStrings;
+
+export interface Props {
+  onClose: () => void;
+  onSelect: (id: string, embeddableType: string) => void;
+  availableEmbeddables: string[];
+}
+
+export const AddEmbeddableFlyout: FC<Props> = ({ onSelect, availableEmbeddables, onClose }) => {
+  const services = useServices();
+  const { embeddables, platform } = services;
+  const { getEmbeddableFactories } = embeddables;
+  const { getSavedObjects, getUISettings } = platform;
+
+  const onAddPanel = (id: string, savedObjectType: string, name: string) => {
+    const embeddableFactories = getEmbeddableFactories();
+
+    // Find the embeddable type from the saved object type
+    const found = Array.from(embeddableFactories).find((embeddableFactory) => {
+      return Boolean(
+        embeddableFactory.savedObjectMetaData &&
+          embeddableFactory.savedObjectMetaData.type === savedObjectType
+      );
+    });
+
+    const foundEmbeddableType = found ? found.type : 'unknown';
+
+    onSelect(id, foundEmbeddableType);
+  };
+
+  const embeddableFactories = getEmbeddableFactories();
+
+  const availableSavedObjects = Array.from(embeddableFactories)
+    .filter((factory) => {
+      return availableEmbeddables.includes(factory.type);
+    })
+    .map((factory) => factory.savedObjectMetaData)
+    .filter<SavedObjectMetaData<{}>>(function (
+      maybeSavedObjectMetaData
+    ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
+      return maybeSavedObjectMetaData !== undefined;
+    });
+
+  return (
+    <EuiFlyout ownFocus onClose={onClose} data-test-subj="dashboardAddPanel">
+      <EuiFlyoutHeader hasBorder>
+        <EuiTitle size="m">
+          <h2>{strings.getTitleText()}</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        <SavedObjectFinderUi
+          onChoose={onAddPanel}
+          savedObjectMetaData={availableSavedObjects}
+          showFilter={true}
+          noItemsMessage={strings.getNoItemsText()}
+          savedObjects={getSavedObjects()}
+          uiSettings={getUISettings()}
+        />
+      </EuiFlyoutBody>
+    </EuiFlyout>
+  );
+};
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
index 0b5bd8adf8cb9..8c84e3d7a85d8 100644
--- a/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/flyout.tsx
@@ -4,75 +4,107 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FC } from 'react';
-import { EuiFlyout, EuiFlyoutHeader, EuiFlyoutBody, EuiTitle } from '@elastic/eui';
-import {
-  SavedObjectFinderUi,
-  SavedObjectMetaData,
-} from '../../../../../../src/plugins/saved_objects/public/';
-import { ComponentStrings } from '../../../i18n';
-import { useServices } from '../../services';
-
-const { AddEmbeddableFlyout: strings } = ComponentStrings;
-
-export interface Props {
-  onClose: () => void;
-  onSelect: (id: string, embeddableType: string) => void;
-  availableEmbeddables: string[];
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { compose } from 'recompose';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { AddEmbeddableFlyout as Component, Props as ComponentProps } from './flyout.component';
+// @ts-expect-error untyped local
+import { addElement } from '../../state/actions/elements';
+import { getSelectedPage } from '../../state/selectors/workpad';
+import { EmbeddableTypes } from '../../../canvas_plugin_src/expression_types/embeddable';
+
+const allowedEmbeddables = {
+  [EmbeddableTypes.map]: (id: string) => {
+    return `savedMap id="${id}" | render`;
+  },
+  [EmbeddableTypes.lens]: (id: string) => {
+    return `savedLens id="${id}" | render`;
+  },
+  [EmbeddableTypes.visualization]: (id: string) => {
+    return `savedVisualization id="${id}" | render`;
+  },
+  /*
+  [EmbeddableTypes.search]: (id: string) => {
+    return `filters | savedSearch id="${id}" | render`;
+  },*/
+};
+
+interface StateProps {
+  pageId: string;
+}
+
+interface DispatchProps {
+  addEmbeddable: (pageId: string, partialElement: { expression: string }) => void;
 }
 
-export const AddEmbeddableFlyout: FC<Props> = ({ onSelect, availableEmbeddables, onClose }) => {
-  const services = useServices();
-  const { embeddables, platform } = services;
-  const { getEmbeddableFactories } = embeddables;
-  const { getSavedObjects, getUISettings } = platform;
+// FIX: Missing state type
+const mapStateToProps = (state: any) => ({ pageId: getSelectedPage(state) });
 
-  const onAddPanel = (id: string, savedObjectType: string, name: string) => {
-    const embeddableFactories = getEmbeddableFactories();
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  addEmbeddable: (pageId, partialElement): DispatchProps['addEmbeddable'] =>
+    dispatch(addElement(pageId, partialElement)),
+});
 
-    // Find the embeddable type from the saved object type
-    const found = Array.from(embeddableFactories).find((embeddableFactory) => {
-      return Boolean(
-        embeddableFactory.savedObjectMetaData &&
-          embeddableFactory.savedObjectMetaData.type === savedObjectType
-      );
-    });
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => {
+  const { pageId, ...remainingStateProps } = stateProps;
+  const { addEmbeddable } = dispatchProps;
 
-    const foundEmbeddableType = found ? found.type : 'unknown';
+  return {
+    ...remainingStateProps,
+    ...ownProps,
+    onSelect: (id: string, type: string): void => {
+      const partialElement = {
+        expression: `markdown "Could not find embeddable for type ${type}" | render`,
+      };
+      if (allowedEmbeddables[type]) {
+        partialElement.expression = allowedEmbeddables[type](id);
+      }
 
-    onSelect(id, foundEmbeddableType);
+      addEmbeddable(pageId, partialElement);
+      ownProps.onClose();
+    },
   };
-
-  const embeddableFactories = getEmbeddableFactories();
-
-  const availableSavedObjects = Array.from(embeddableFactories)
-    .filter((factory) => {
-      return availableEmbeddables.includes(factory.type);
-    })
-    .map((factory) => factory.savedObjectMetaData)
-    .filter<SavedObjectMetaData<{}>>(function (
-      maybeSavedObjectMetaData
-    ): maybeSavedObjectMetaData is SavedObjectMetaData<{}> {
-      return maybeSavedObjectMetaData !== undefined;
-    });
-
-  return (
-    <EuiFlyout ownFocus onClose={onClose} data-test-subj="dashboardAddPanel">
-      <EuiFlyoutHeader hasBorder>
-        <EuiTitle size="m">
-          <h2>{strings.getTitleText()}</h2>
-        </EuiTitle>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <SavedObjectFinderUi
-          onChoose={onAddPanel}
-          savedObjectMetaData={availableSavedObjects}
-          showFilter={true}
-          noItemsMessage={strings.getNoItemsText()}
-          savedObjects={getSavedObjects()}
-          uiSettings={getUISettings()}
-        />
-      </EuiFlyoutBody>
-    </EuiFlyout>
-  );
 };
+
+export class EmbeddableFlyoutPortal extends React.Component<ComponentProps> {
+  el?: HTMLElement;
+
+  constructor(props: ComponentProps) {
+    super(props);
+
+    this.el = document.createElement('div');
+  }
+  componentDidMount() {
+    const body = document.querySelector('body');
+    if (body && this.el) {
+      body.appendChild(this.el);
+    }
+  }
+
+  componentWillUnmount() {
+    const body = document.querySelector('body');
+
+    if (body && this.el) {
+      body.removeChild(this.el);
+    }
+  }
+
+  render() {
+    if (this.el) {
+      return ReactDOM.createPortal(
+        <Component {...this.props} availableEmbeddables={Object.keys(allowedEmbeddables)} />,
+        this.el
+      );
+    }
+  }
+}
+
+export const AddEmbeddablePanel = compose<ComponentProps, { onClose: () => void }>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(EmbeddableFlyoutPortal);
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts
new file mode 100644
index 0000000000000..a7fac10b0c02d
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { EmbeddableFlyoutPortal, AddEmbeddablePanel } from './flyout';
+export {
+  AddEmbeddableFlyout as AddEmbeddableFlyoutComponent,
+  Props as AddEmbeddableFlyoutComponentProps,
+} from './flyout.component';
diff --git a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx b/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx
deleted file mode 100644
index 62a073daf4c59..0000000000000
--- a/x-pack/plugins/canvas/public/components/embeddable_flyout/index.tsx
+++ /dev/null
@@ -1,113 +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 React from 'react';
-import ReactDOM from 'react-dom';
-import { compose } from 'recompose';
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { AddEmbeddableFlyout, Props } from './flyout';
-// @ts-expect-error untyped local
-import { addElement } from '../../state/actions/elements';
-import { getSelectedPage } from '../../state/selectors/workpad';
-import { EmbeddableTypes } from '../../../canvas_plugin_src/expression_types/embeddable';
-
-const allowedEmbeddables = {
-  [EmbeddableTypes.map]: (id: string) => {
-    return `savedMap id="${id}" | render`;
-  },
-  [EmbeddableTypes.lens]: (id: string) => {
-    return `savedLens id="${id}" | render`;
-  },
-  [EmbeddableTypes.visualization]: (id: string) => {
-    return `savedVisualization id="${id}" | render`;
-  },
-  /*
-  [EmbeddableTypes.search]: (id: string) => {
-    return `filters | savedSearch id="${id}" | render`;
-  },*/
-};
-
-interface StateProps {
-  pageId: string;
-}
-
-interface DispatchProps {
-  addEmbeddable: (pageId: string, partialElement: { expression: string }) => void;
-}
-
-// FIX: Missing state type
-const mapStateToProps = (state: any) => ({ pageId: getSelectedPage(state) });
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  addEmbeddable: (pageId, partialElement): DispatchProps['addEmbeddable'] =>
-    dispatch(addElement(pageId, partialElement)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: Props
-): Props => {
-  const { pageId, ...remainingStateProps } = stateProps;
-  const { addEmbeddable } = dispatchProps;
-
-  return {
-    ...remainingStateProps,
-    ...ownProps,
-    onSelect: (id: string, type: string): void => {
-      const partialElement = {
-        expression: `markdown "Could not find embeddable for type ${type}" | render`,
-      };
-      if (allowedEmbeddables[type]) {
-        partialElement.expression = allowedEmbeddables[type](id);
-      }
-
-      addEmbeddable(pageId, partialElement);
-      ownProps.onClose();
-    },
-  };
-};
-
-export class EmbeddableFlyoutPortal extends React.Component<Props> {
-  el?: HTMLElement;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.el = document.createElement('div');
-  }
-  componentDidMount() {
-    const body = document.querySelector('body');
-    if (body && this.el) {
-      body.appendChild(this.el);
-    }
-  }
-
-  componentWillUnmount() {
-    const body = document.querySelector('body');
-
-    if (body && this.el) {
-      body.removeChild(this.el);
-    }
-  }
-
-  render() {
-    if (this.el) {
-      return ReactDOM.createPortal(
-        <AddEmbeddableFlyout
-          {...this.props}
-          availableEmbeddables={Object.keys(allowedEmbeddables)}
-        />,
-        this.el
-      );
-    }
-  }
-}
-
-export const AddEmbeddablePanel = compose<Props, { onClose: () => void }>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(EmbeddableFlyoutPortal);
diff --git a/x-pack/plugins/canvas/public/components/page_manager/index.ts b/x-pack/plugins/canvas/public/components/page_manager/index.ts
index d19540cd6a687..abe7a4a3a5bb1 100644
--- a/x-pack/plugins/canvas/public/components/page_manager/index.ts
+++ b/x-pack/plugins/canvas/public/components/page_manager/index.ts
@@ -4,28 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Dispatch } from 'redux';
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import * as pageActions from '../../state/actions/pages';
-import { canUserWrite } from '../../state/selectors/app';
-import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad';
-import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
-import { PageManager as Component } from './page_manager';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-  pages: getPages(state),
-  selectedPage: getSelectedPage(state),
-  workpadId: getWorkpad(state).id,
-  workpadCSS: getWorkpad(state).css || DEFAULT_WORKPAD_CSS,
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onAddPage: () => dispatch(pageActions.addPage()),
-  onMovePage: (id: string, position: number) => dispatch(pageActions.movePage(id, position)),
-  onRemovePage: (id: string) => dispatch(pageActions.removePage(id)),
-});
-
-export const PageManager = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { PageManager } from './page_manager';
+export { PageManager as PageManagerComponent } from './page_manager.component';
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx b/x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/page_manager/page_manager.tsx
rename to x-pack/plugins/canvas/public/components/page_manager/page_manager.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts b/x-pack/plugins/canvas/public/components/page_manager/page_manager.ts
new file mode 100644
index 0000000000000..a92f7c6b4c352
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_manager/page_manager.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 { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import * as pageActions from '../../state/actions/pages';
+import { canUserWrite } from '../../state/selectors/app';
+import { getSelectedPage, getWorkpad, getPages, isWriteable } from '../../state/selectors/workpad';
+import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
+import { PageManager as Component } from './page_manager.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+  pages: getPages(state),
+  selectedPage: getSelectedPage(state),
+  workpadId: getWorkpad(state).id,
+  workpadCSS: getWorkpad(state).css || DEFAULT_WORKPAD_CSS,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onAddPage: () => dispatch(pageActions.addPage()),
+  onMovePage: (id: string, position: number) => dispatch(pageActions.movePage(id, position)),
+  onRemovePage: (id: string) => dispatch(pageActions.removePage(id)),
+});
+
+export const PageManager = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/page_preview/index.ts b/x-pack/plugins/canvas/public/components/page_preview/index.ts
index 25d3254595d2e..22e3861eb9652 100644
--- a/x-pack/plugins/canvas/public/components/page_preview/index.ts
+++ b/x-pack/plugins/canvas/public/components/page_preview/index.ts
@@ -4,21 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Dispatch } from 'redux';
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import * as pageActions from '../../state/actions/pages';
-import { canUserWrite } from '../../state/selectors/app';
-import { isWriteable } from '../../state/selectors/workpad';
-import { PagePreview as Component } from './page_preview';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  onDuplicate: (id: string) => dispatch(pageActions.duplicatePage(id)),
-});
-
-export const PagePreview = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { PagePreview } from './page_preview';
+export { PagePreview as PagePreviewComponent } from './page_preview.component';
diff --git a/x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx b/x-pack/plugins/canvas/public/components/page_preview/page_preview.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/page_preview/page_preview.tsx
rename to x-pack/plugins/canvas/public/components/page_preview/page_preview.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts b/x-pack/plugins/canvas/public/components/page_preview/page_preview.ts
new file mode 100644
index 0000000000000..8768a2fc169ef
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/page_preview/page_preview.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 { Dispatch } from 'redux';
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import * as pageActions from '../../state/actions/pages';
+import { canUserWrite } from '../../state/selectors/app';
+import { isWriteable } from '../../state/selectors/workpad';
+import { PagePreview as Component } from './page_preview.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  onDuplicate: (id: string) => dispatch(pageActions.duplicatePage(id)),
+});
+
+export const PagePreview = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx
index 4941d8cb2efa7..a811a296f2e7b 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/saved_elements_modal.stories.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { SavedElementsModal } from '../saved_elements_modal';
+import { SavedElementsModal } from '../saved_elements_modal.component';
 import { testCustomElements } from './fixtures/test_elements';
 import { CustomElement } from '../../../../types';
 
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
index da2955c146193..46faf8d14f9b5 100644
--- a/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/index.ts
@@ -4,130 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { compose, withState } from 'recompose';
-import { camelCase } from 'lodash';
-import { cloneSubgraphs } from '../../lib/clone_subgraphs';
-import * as customElementService from '../../lib/custom_element_service';
-import { withServices, WithServicesProps } from '../../services';
-// @ts-expect-error untyped local
-import { selectToplevelNodes } from '../../state/actions/transient';
-// @ts-expect-error untyped local
-import { insertNodes } from '../../state/actions/elements';
-import { getSelectedPage } from '../../state/selectors/workpad';
-import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
-import { SavedElementsModal as Component, Props as ComponentProps } from './saved_elements_modal';
-import { State, PositionedElement, CustomElement } from '../../../types';
-
-const customElementAdded = 'elements-custom-added';
-
-interface OwnProps {
-  onClose: () => void;
-}
-
-interface OwnPropsWithState extends OwnProps {
-  customElements: CustomElement[];
-  setCustomElements: (customElements: CustomElement[]) => void;
-  search: string;
-  setSearch: (search: string) => void;
-}
-
-interface DispatchProps {
-  selectToplevelNodes: (nodes: PositionedElement[]) => void;
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) => void;
-}
-
-interface StateProps {
-  pageId: string;
-}
-
-const mapStateToProps = (state: State): StateProps => ({
-  pageId: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
-  selectToplevelNodes: (nodes: PositionedElement[]) =>
-    dispatch(
-      selectToplevelNodes(
-        nodes
-          .filter((e: PositionedElement): boolean => !e.position.parent)
-          .map((e: PositionedElement): string => e.id)
-      )
-    ),
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
-    dispatch(insertNodes(selectedNodes, pageId)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: OwnPropsWithState & WithServicesProps
-): ComponentProps => {
-  const { pageId } = stateProps;
-  const { onClose, search, setCustomElements } = ownProps;
-
-  const findCustomElements = async () => {
-    const { customElements } = await customElementService.find(search);
-    setCustomElements(customElements);
-  };
-
-  return {
-    ...ownProps,
-    // add custom element to the page
-    addCustomElement: (customElement: CustomElement) => {
-      const { selectedNodes = [] } = JSON.parse(customElement.content) || {};
-      const clonedNodes = selectedNodes && cloneSubgraphs(selectedNodes);
-      if (clonedNodes) {
-        dispatchProps.insertNodes(clonedNodes, pageId); // first clone and persist the new node(s)
-        dispatchProps.selectToplevelNodes(clonedNodes); // then select the cloned node(s)
-      }
-      onClose();
-      trackCanvasUiMetric(METRIC_TYPE.LOADED, customElementAdded);
-    },
-    // custom element search
-    findCustomElements: async (text?: string) => {
-      try {
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't find custom elements`,
-        });
-      }
-    },
-    // remove custom element
-    removeCustomElement: async (id: string) => {
-      try {
-        await customElementService.remove(id);
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't delete custom elements`,
-        });
-      }
-    },
-    // update custom element
-    updateCustomElement: async (id: string, name: string, description: string, image: string) => {
-      try {
-        await customElementService.update(id, {
-          name: camelCase(name),
-          displayName: name,
-          image,
-          help: description,
-        });
-        await findCustomElements();
-      } catch (err) {
-        ownProps.services.notify.error(err, {
-          title: `Couldn't update custom elements`,
-        });
-      }
-    },
-  };
-};
-
-export const SavedElementsModal = compose<ComponentProps, OwnProps>(
-  withServices,
-  withState('search', 'setSearch', ''),
-  withState('customElements', 'setCustomElements', []),
-  connect(mapStateToProps, mapDispatchToProps, mergeProps)
-)(Component);
+export { SavedElementsModal } from './saved_elements_modal';
+export {
+  SavedElementsModal as SavedElementsModalComponent,
+  Props as SavedElementsModalComponentProps,
+} from './saved_elements_modal.component';
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.tsx
rename to x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
new file mode 100644
index 0000000000000..a5c5a2e0adce9
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/saved_elements_modal/saved_elements_modal.ts
@@ -0,0 +1,136 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { compose, withState } from 'recompose';
+import { camelCase } from 'lodash';
+import { cloneSubgraphs } from '../../lib/clone_subgraphs';
+import * as customElementService from '../../lib/custom_element_service';
+import { withServices, WithServicesProps } from '../../services';
+// @ts-expect-error untyped local
+import { selectToplevelNodes } from '../../state/actions/transient';
+// @ts-expect-error untyped local
+import { insertNodes } from '../../state/actions/elements';
+import { getSelectedPage } from '../../state/selectors/workpad';
+import { trackCanvasUiMetric, METRIC_TYPE } from '../../lib/ui_metric';
+import {
+  SavedElementsModal as Component,
+  Props as ComponentProps,
+} from './saved_elements_modal.component';
+import { State, PositionedElement, CustomElement } from '../../../types';
+
+const customElementAdded = 'elements-custom-added';
+
+interface OwnProps {
+  onClose: () => void;
+}
+
+interface OwnPropsWithState extends OwnProps {
+  customElements: CustomElement[];
+  setCustomElements: (customElements: CustomElement[]) => void;
+  search: string;
+  setSearch: (search: string) => void;
+}
+
+interface DispatchProps {
+  selectToplevelNodes: (nodes: PositionedElement[]) => void;
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) => void;
+}
+
+interface StateProps {
+  pageId: string;
+}
+
+const mapStateToProps = (state: State): StateProps => ({
+  pageId: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch): DispatchProps => ({
+  selectToplevelNodes: (nodes: PositionedElement[]) =>
+    dispatch(
+      selectToplevelNodes(
+        nodes
+          .filter((e: PositionedElement): boolean => !e.position.parent)
+          .map((e: PositionedElement): string => e.id)
+      )
+    ),
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
+    dispatch(insertNodes(selectedNodes, pageId)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: OwnPropsWithState & WithServicesProps
+): ComponentProps => {
+  const { pageId } = stateProps;
+  const { onClose, search, setCustomElements } = ownProps;
+
+  const findCustomElements = async () => {
+    const { customElements } = await customElementService.find(search);
+    setCustomElements(customElements);
+  };
+
+  return {
+    ...ownProps,
+    // add custom element to the page
+    addCustomElement: (customElement: CustomElement) => {
+      const { selectedNodes = [] } = JSON.parse(customElement.content) || {};
+      const clonedNodes = selectedNodes && cloneSubgraphs(selectedNodes);
+      if (clonedNodes) {
+        dispatchProps.insertNodes(clonedNodes, pageId); // first clone and persist the new node(s)
+        dispatchProps.selectToplevelNodes(clonedNodes); // then select the cloned node(s)
+      }
+      onClose();
+      trackCanvasUiMetric(METRIC_TYPE.LOADED, customElementAdded);
+    },
+    // custom element search
+    findCustomElements: async (text?: string) => {
+      try {
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't find custom elements`,
+        });
+      }
+    },
+    // remove custom element
+    removeCustomElement: async (id: string) => {
+      try {
+        await customElementService.remove(id);
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't delete custom elements`,
+        });
+      }
+    },
+    // update custom element
+    updateCustomElement: async (id: string, name: string, description: string, image: string) => {
+      try {
+        await customElementService.update(id, {
+          name: camelCase(name),
+          displayName: name,
+          image,
+          help: description,
+        });
+        await findCustomElements();
+      } catch (err) {
+        ownProps.services.notify.error(err, {
+          title: `Couldn't update custom elements`,
+        });
+      }
+    },
+  };
+};
+
+export const SavedElementsModal = compose<ComponentProps, OwnProps>(
+  withServices,
+  withState('search', 'setSearch', ''),
+  withState('customElements', 'setCustomElements', []),
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
new file mode 100644
index 0000000000000..e3f4e00f4de01
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx
@@ -0,0 +1,55 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { EuiTabbedContent } from '@elastic/eui';
+// @ts-expect-error unconverted component
+import { Datasource } from '../../datasource';
+// @ts-expect-error unconverted component
+import { FunctionFormList } from '../../function_form_list';
+import { PositionedElement } from '../../../../types';
+import { ComponentStrings } from '../../../../i18n';
+
+interface Props {
+  /**
+   * a Canvas element used to populate config forms
+   */
+  element: PositionedElement;
+}
+
+const { ElementSettings: strings } = ComponentStrings;
+
+export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
+  const tabs = [
+    {
+      id: 'edit',
+      name: strings.getDisplayTabLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <div className="canvasSidebar--args">
+            <FunctionFormList element={element} />
+          </div>
+        </div>
+      ),
+    },
+    {
+      id: 'data',
+      name: strings.getDataTabLabel(),
+      content: (
+        <div className="canvasSidebar__pop">
+          <Datasource />
+        </div>
+      ),
+    },
+  ];
+
+  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />;
+};
+
+ElementSettings.propTypes = {
+  element: PropTypes.object,
+};
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
index e3f4e00f4de01..ba7e31a25daba 100644
--- a/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.tsx
@@ -3,53 +3,32 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
-import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
-import { EuiTabbedContent } from '@elastic/eui';
-// @ts-expect-error unconverted component
-import { Datasource } from '../../datasource';
-// @ts-expect-error unconverted component
-import { FunctionFormList } from '../../function_form_list';
-import { PositionedElement } from '../../../../types';
-import { ComponentStrings } from '../../../../i18n';
+import React from 'react';
+import { connect } from 'react-redux';
+import { getElementById, getSelectedPage } from '../../../state/selectors/workpad';
+import { ElementSettings as Component } from './element_settings.component';
+import { State, PositionedElement } from '../../../../types';
 
 interface Props {
-  /**
-   * a Canvas element used to populate config forms
-   */
-  element: PositionedElement;
+  selectedElementId: string;
 }
 
-const { ElementSettings: strings } = ComponentStrings;
+const mapStateToProps = (state: State, { selectedElementId }: Props): StateProps => ({
+  element: getElementById(state, selectedElementId, getSelectedPage(state)),
+});
+
+interface StateProps {
+  element: PositionedElement | undefined;
+}
 
-export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
-  const tabs = [
-    {
-      id: 'edit',
-      name: strings.getDisplayTabLabel(),
-      content: (
-        <div className="canvasSidebar__pop">
-          <div className="canvasSidebar--args">
-            <FunctionFormList element={element} />
-          </div>
-        </div>
-      ),
-    },
-    {
-      id: 'data',
-      name: strings.getDataTabLabel(),
-      content: (
-        <div className="canvasSidebar__pop">
-          <Datasource />
-        </div>
-      ),
-    },
-  ];
+const renderIfElement: React.FunctionComponent<StateProps> = (props) => {
+  if (props.element) {
+    return <Component element={props.element} />;
+  }
 
-  return <EuiTabbedContent tabs={tabs} initialSelectedTab={tabs[0]} size="s" />;
+  return null;
 };
 
-ElementSettings.propTypes = {
-  element: PropTypes.object,
-};
+export const ElementSettings = connect<StateProps, {}, Props, State>(mapStateToProps)(
+  renderIfElement
+);
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts
new file mode 100644
index 0000000000000..68b90f232fb8b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ElementSettings } from './element_settings';
+export { ElementSettings as ElementSettingsComponent } from './element_settings.component';
diff --git a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx b/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx
deleted file mode 100644
index b8d5882234899..0000000000000
--- a/x-pack/plugins/canvas/public/components/sidebar/element_settings/index.tsx
+++ /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 React from 'react';
-import { connect } from 'react-redux';
-import { getElementById, getSelectedPage } from '../../../state/selectors/workpad';
-import { ElementSettings as Component } from './element_settings';
-import { State, PositionedElement } from '../../../../types';
-
-interface Props {
-  selectedElementId: string;
-}
-
-const mapStateToProps = (state: State, { selectedElementId }: Props): StateProps => ({
-  element: getElementById(state, selectedElementId, getSelectedPage(state)),
-});
-
-interface StateProps {
-  element: PositionedElement | undefined;
-}
-
-const renderIfElement: React.FunctionComponent<StateProps> = (props) => {
-  if (props.element) {
-    return <Component element={props.element} />;
-  }
-
-  return null;
-};
-
-export const ElementSettings = connect<StateProps, {}, Props, State>(mapStateToProps)(
-  renderIfElement
-);
diff --git a/x-pack/plugins/canvas/public/components/toolbar/index.js b/x-pack/plugins/canvas/public/components/toolbar/index.js
index 16860063f8a45..a95371f5f032a 100644
--- a/x-pack/plugins/canvas/public/components/toolbar/index.js
+++ b/x-pack/plugins/canvas/public/components/toolbar/index.js
@@ -44,6 +44,6 @@ export const Toolbar = compose(
       props.router.navigateTo('loadWorkpad', { id: props.workpadId, page: pageNumber });
     },
   }),
-  withState('tray', 'setTray', (props) => props.tray),
+  withState('tray', 'setTray', null),
   withState('showWorkpadManager', 'setShowWorkpadManager', false)
 )(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts b/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
index abd40731078ec..34e3d3ff4b057 100644
--- a/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_color_picker/index.ts
@@ -4,20 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { addColor, removeColor } from '../../state/actions/workpad';
-import { getWorkpadColors } from '../../state/selectors/workpad';
-
-import { WorkpadColorPicker as Component } from '../workpad_color_picker/workpad_color_picker';
-import { State } from '../../../types';
-
-const mapStateToProps = (state: State) => ({
-  colors: getWorkpadColors(state),
-});
-
-const mapDispatchToProps = {
-  onAddColor: addColor,
-  onRemoveColor: removeColor,
-};
-
-export const WorkpadColorPicker = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { WorkpadColorPicker } from './workpad_color_picker';
+export { WorkpadColorPicker as WorkpadColorPickerComponent } from './workpad_color_picker.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.tsx
rename to x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.ts
new file mode 100644
index 0000000000000..2f4b0fe7b4ec1
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_color_picker/workpad_color_picker.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 { connect } from 'react-redux';
+import { addColor, removeColor } from '../../state/actions/workpad';
+import { getWorkpadColors } from '../../state/selectors/workpad';
+
+import { WorkpadColorPicker as Component } from '../workpad_color_picker/workpad_color_picker.component';
+import { State } from '../../../types';
+
+const mapStateToProps = (state: State) => ({
+  colors: getWorkpadColors(state),
+});
+
+const mapDispatchToProps = {
+  onAddColor: addColor,
+  onRemoveColor: removeColor,
+};
+
+export const WorkpadColorPicker = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/index.ts b/x-pack/plugins/canvas/public/components/workpad_config/index.ts
index bba08d7647e9e..63db96ca5aef9 100644
--- a/x-pack/plugins/canvas/public/components/workpad_config/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_config/index.ts
@@ -4,40 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-
-import { get } from 'lodash';
-import {
-  sizeWorkpad as setSize,
-  setName,
-  setWorkpadCSS,
-  updateWorkpadVariables,
-} from '../../state/actions/workpad';
-
-import { getWorkpad } from '../../state/selectors/workpad';
-import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
-import { WorkpadConfig as Component } from './workpad_config';
-import { State, CanvasVariable } from '../../../types';
-
-const mapStateToProps = (state: State) => {
-  const workpad = getWorkpad(state);
-
-  return {
-    name: get(workpad, 'name'),
-    size: {
-      width: get(workpad, 'width'),
-      height: get(workpad, 'height'),
-    },
-    css: get(workpad, 'css', DEFAULT_WORKPAD_CSS),
-    variables: get(workpad, 'variables', []),
-  };
-};
-
-const mapDispatchToProps = {
-  setSize,
-  setName,
-  setWorkpadCSS,
-  setWorkpadVariables: (vars: CanvasVariable[]) => updateWorkpadVariables(vars),
-};
-
-export const WorkpadConfig = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { WorkpadConfig } from './workpad_config';
+export { WorkpadConfig as WorkpadConfigComponent } from './workpad_config.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.tsx b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_config/workpad_config.tsx
rename to x-pack/plugins/canvas/public/components/workpad_config/workpad_config.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts
new file mode 100644
index 0000000000000..e4ddf31141972
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_config/workpad_config.ts
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+
+import { get } from 'lodash';
+import {
+  sizeWorkpad as setSize,
+  setName,
+  setWorkpadCSS,
+  updateWorkpadVariables,
+} from '../../state/actions/workpad';
+
+import { getWorkpad } from '../../state/selectors/workpad';
+import { DEFAULT_WORKPAD_CSS } from '../../../common/lib/constants';
+import { WorkpadConfig as Component } from './workpad_config.component';
+import { State, CanvasVariable } from '../../../types';
+
+const mapStateToProps = (state: State) => {
+  const workpad = getWorkpad(state);
+
+  return {
+    name: get(workpad, 'name'),
+    size: {
+      width: get(workpad, 'width'),
+      height: get(workpad, 'height'),
+    },
+    css: get(workpad, 'css', DEFAULT_WORKPAD_CSS),
+    variables: get(workpad, 'variables', []),
+  };
+};
+
+const mapDispatchToProps = {
+  setSize,
+  setName,
+  setWorkpadCSS,
+  setWorkpadVariables: (vars: CanvasVariable[]) => updateWorkpadVariables(vars),
+};
+
+export const WorkpadConfig = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
index 8bbc3e09af4bf..be6247b0bbcab 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/edit_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { EditMenu } from '../edit_menu';
+import { EditMenu } from '../edit_menu.component';
 import { PositionedElement } from '../../../../../types';
 
 const handlers = {
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.ts
new file mode 100644
index 0000000000000..3a2264c05eb4b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/edit_menu.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.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withHandlers, withProps } from 'recompose';
+import { Dispatch } from 'redux';
+import { State, PositionedElement } from '../../../../types';
+import { getClipboardData } from '../../../lib/clipboard';
+// @ts-expect-error untyped local
+import { flatten } from '../../../lib/aeroelastic/functional';
+// @ts-expect-error untyped local
+import { globalStateUpdater } from '../../workpad_page/integration_utils';
+// @ts-expect-error untyped local
+import { crawlTree } from '../../workpad_page/integration_utils';
+// @ts-expect-error untyped local
+import { insertNodes, elementLayer, removeElements } from '../../../state/actions/elements';
+// @ts-expect-error untyped local
+import { undoHistory, redoHistory } from '../../../state/actions/history';
+// @ts-expect-error untyped local
+import { selectToplevelNodes } from '../../../state/actions/transient';
+import {
+  getSelectedPage,
+  getNodes,
+  getSelectedToplevelNodes,
+} from '../../../state/selectors/workpad';
+import {
+  layerHandlerCreators,
+  clipboardHandlerCreators,
+  basicHandlerCreators,
+  groupHandlerCreators,
+  alignmentDistributionHandlerCreators,
+} from '../../../lib/element_handler_creators';
+import { EditMenu as Component, Props as ComponentProps } from './edit_menu.component';
+
+type LayoutState = any;
+
+type CommitFn = (type: string, payload: any) => LayoutState;
+
+interface OwnProps {
+  commit: CommitFn;
+}
+
+const withGlobalState = (
+  commit: CommitFn,
+  updateGlobalState: (layoutState: LayoutState) => void
+) => (type: string, payload: any) => {
+  const newLayoutState = commit(type, payload);
+  if (newLayoutState.currentScene.gestureEnd) {
+    updateGlobalState(newLayoutState);
+  }
+};
+
+/*
+ * TODO: this is all copied from interactive_workpad_page and workpad_shortcuts
+ */
+const mapStateToProps = (state: State) => {
+  const pageId = getSelectedPage(state);
+  const nodes = getNodes(state, pageId) as PositionedElement[];
+  const selectedToplevelNodes = getSelectedToplevelNodes(state);
+
+  const selectedPrimaryShapeObjects = selectedToplevelNodes
+    .map((id: string) => nodes.find((s: PositionedElement) => s.id === id))
+    .filter((shape?: PositionedElement) => shape) as PositionedElement[];
+
+  const selectedPersistentPrimaryNodes = flatten(
+    selectedPrimaryShapeObjects.map((shape: PositionedElement) =>
+      nodes.find((n: PositionedElement) => n.id === shape.id) // is it a leaf or a persisted group?
+        ? [shape.id]
+        : nodes.filter((s: PositionedElement) => s.position.parent === shape.id).map((s) => s.id)
+    )
+  );
+
+  const selectedNodeIds: string[] = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
+  const selectedNodes = selectedNodeIds
+    .map((id: string) => nodes.find((s) => s.id === id))
+    .filter((node: PositionedElement | undefined): node is PositionedElement => {
+      return !!node;
+    });
+
+  return {
+    pageId,
+    selectedToplevelNodes,
+    selectedNodes,
+    state,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
+    dispatch(insertNodes(selectedNodes, pageId)),
+  removeNodes: (nodeIds: string[], pageId: string) => dispatch(removeElements(nodeIds, pageId)),
+  selectToplevelNodes: (nodes: PositionedElement[]) =>
+    dispatch(
+      selectToplevelNodes(
+        nodes.filter((e: PositionedElement) => !e.position.parent).map((e) => e.id)
+      )
+    ),
+  elementLayer: (pageId: string, elementId: string, movement: number) => {
+    dispatch(elementLayer({ pageId, elementId, movement }));
+  },
+  undoHistory: () => dispatch(undoHistory()),
+  redoHistory: () => dispatch(redoHistory()),
+  dispatch,
+});
+
+const mergeProps = (
+  { state, selectedToplevelNodes, ...restStateProps }: ReturnType<typeof mapStateToProps>,
+  { dispatch, ...restDispatchProps }: ReturnType<typeof mapDispatchToProps>,
+  { commit }: OwnProps
+) => {
+  const updateGlobalState = globalStateUpdater(dispatch, state);
+
+  return {
+    ...restDispatchProps,
+    ...restStateProps,
+    commit: withGlobalState(commit, updateGlobalState),
+    groupIsSelected:
+      selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group'),
+  };
+};
+
+export const EditMenu = compose<ComponentProps, OwnProps>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withProps(() => ({ hasPasteData: Boolean(getClipboardData()) })),
+  withHandlers(basicHandlerCreators),
+  withHandlers(clipboardHandlerCreators),
+  withHandlers(layerHandlerCreators),
+  withHandlers(groupHandlerCreators),
+  withHandlers(alignmentDistributionHandlerCreators)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
index 8f013f70aefcd..0db425f01cccd 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/edit_menu/index.ts
@@ -4,130 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withHandlers, withProps } from 'recompose';
-import { Dispatch } from 'redux';
-import { State, PositionedElement } from '../../../../types';
-import { getClipboardData } from '../../../lib/clipboard';
-// @ts-expect-error untyped local
-import { flatten } from '../../../lib/aeroelastic/functional';
-// @ts-expect-error untyped local
-import { globalStateUpdater } from '../../workpad_page/integration_utils';
-// @ts-expect-error untyped local
-import { crawlTree } from '../../workpad_page/integration_utils';
-// @ts-expect-error untyped local
-import { insertNodes, elementLayer, removeElements } from '../../../state/actions/elements';
-// @ts-expect-error untyped local
-import { undoHistory, redoHistory } from '../../../state/actions/history';
-// @ts-expect-error untyped local
-import { selectToplevelNodes } from '../../../state/actions/transient';
-import {
-  getSelectedPage,
-  getNodes,
-  getSelectedToplevelNodes,
-} from '../../../state/selectors/workpad';
-import {
-  layerHandlerCreators,
-  clipboardHandlerCreators,
-  basicHandlerCreators,
-  groupHandlerCreators,
-  alignmentDistributionHandlerCreators,
-} from '../../../lib/element_handler_creators';
-import { EditMenu as Component, Props as ComponentProps } from './edit_menu';
-
-type LayoutState = any;
-
-type CommitFn = (type: string, payload: any) => LayoutState;
-
-interface OwnProps {
-  commit: CommitFn;
-}
-
-const withGlobalState = (
-  commit: CommitFn,
-  updateGlobalState: (layoutState: LayoutState) => void
-) => (type: string, payload: any) => {
-  const newLayoutState = commit(type, payload);
-  if (newLayoutState.currentScene.gestureEnd) {
-    updateGlobalState(newLayoutState);
-  }
-};
-
-/*
- * TODO: this is all copied from interactive_workpad_page and workpad_shortcuts
- */
-const mapStateToProps = (state: State) => {
-  const pageId = getSelectedPage(state);
-  const nodes = getNodes(state, pageId) as PositionedElement[];
-  const selectedToplevelNodes = getSelectedToplevelNodes(state);
-
-  const selectedPrimaryShapeObjects = selectedToplevelNodes
-    .map((id: string) => nodes.find((s: PositionedElement) => s.id === id))
-    .filter((shape?: PositionedElement) => shape) as PositionedElement[];
-
-  const selectedPersistentPrimaryNodes = flatten(
-    selectedPrimaryShapeObjects.map((shape: PositionedElement) =>
-      nodes.find((n: PositionedElement) => n.id === shape.id) // is it a leaf or a persisted group?
-        ? [shape.id]
-        : nodes.filter((s: PositionedElement) => s.position.parent === shape.id).map((s) => s.id)
-    )
-  );
-
-  const selectedNodeIds: string[] = flatten(selectedPersistentPrimaryNodes.map(crawlTree(nodes)));
-  const selectedNodes = selectedNodeIds
-    .map((id: string) => nodes.find((s) => s.id === id))
-    .filter((node: PositionedElement | undefined): node is PositionedElement => {
-      return !!node;
-    });
-
-  return {
-    pageId,
-    selectedToplevelNodes,
-    selectedNodes,
-    state,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  insertNodes: (selectedNodes: PositionedElement[], pageId: string) =>
-    dispatch(insertNodes(selectedNodes, pageId)),
-  removeNodes: (nodeIds: string[], pageId: string) => dispatch(removeElements(nodeIds, pageId)),
-  selectToplevelNodes: (nodes: PositionedElement[]) =>
-    dispatch(
-      selectToplevelNodes(
-        nodes.filter((e: PositionedElement) => !e.position.parent).map((e) => e.id)
-      )
-    ),
-  elementLayer: (pageId: string, elementId: string, movement: number) => {
-    dispatch(elementLayer({ pageId, elementId, movement }));
-  },
-  undoHistory: () => dispatch(undoHistory()),
-  redoHistory: () => dispatch(redoHistory()),
-  dispatch,
-});
-
-const mergeProps = (
-  { state, selectedToplevelNodes, ...restStateProps }: ReturnType<typeof mapStateToProps>,
-  { dispatch, ...restDispatchProps }: ReturnType<typeof mapDispatchToProps>,
-  { commit }: OwnProps
-) => {
-  const updateGlobalState = globalStateUpdater(dispatch, state);
-
-  return {
-    ...restDispatchProps,
-    ...restStateProps,
-    commit: withGlobalState(commit, updateGlobalState),
-    groupIsSelected:
-      selectedToplevelNodes.length === 1 && selectedToplevelNodes[0].includes('group'),
-  };
-};
-
-export const EditMenu = compose<ComponentProps, OwnProps>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withProps(() => ({ hasPasteData: Boolean(getClipboardData()) })),
-  withHandlers(basicHandlerCreators),
-  withHandlers(clipboardHandlerCreators),
-  withHandlers(layerHandlerCreators),
-  withHandlers(groupHandlerCreators),
-  withHandlers(alignmentDistributionHandlerCreators)
-)(Component);
+export { EditMenu } from './edit_menu';
+export { EditMenu as EditMenuComponent } from './edit_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
index 9aca5ce33ba02..cf9b334ffe8ea 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/element_menu.stories.tsx
@@ -8,7 +8,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 import { ElementSpec } from '../../../../../types';
-import { ElementMenu } from '../element_menu';
+import { ElementMenu } from '../element_menu.component';
 
 const testElements: { [key: string]: ElementSpec } = {
   areaChart: {
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
new file mode 100644
index 0000000000000..6d9233aaba22b
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.component.tsx
@@ -0,0 +1,214 @@
+/*
+ * 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 { sortBy } from 'lodash';
+import React, { Fragment, FunctionComponent, useState } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EuiButton,
+  EuiContextMenu,
+  EuiIcon,
+  EuiContextMenuPanelItemDescriptor,
+} from '@elastic/eui';
+import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib';
+import { ComponentStrings } from '../../../../i18n/components';
+import { ElementSpec } from '../../../../types';
+import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
+import { getId } from '../../../lib/get_id';
+import { Popover, ClosePopoverFn } from '../../popover';
+import { AssetManager } from '../../asset_manager';
+import { SavedElementsModal } from '../../saved_elements_modal';
+
+interface CategorizedElementLists {
+  [key: string]: ElementSpec[];
+}
+
+interface ElementTypeMeta {
+  [key: string]: { name: string; icon: string };
+}
+
+export const { WorkpadHeaderElementMenu: strings } = ComponentStrings;
+
+// label and icon for the context menu item for each element type
+const elementTypeMeta: ElementTypeMeta = {
+  chart: { name: strings.getChartMenuItemLabel(), icon: 'visArea' },
+  filter: { name: strings.getFilterMenuItemLabel(), icon: 'filter' },
+  image: { name: strings.getImageMenuItemLabel(), icon: 'image' },
+  other: { name: strings.getOtherMenuItemLabel(), icon: 'empty' },
+  progress: { name: strings.getProgressMenuItemLabel(), icon: 'visGoal' },
+  shape: { name: strings.getShapeMenuItemLabel(), icon: 'node' },
+  text: { name: strings.getTextMenuItemLabel(), icon: 'visText' },
+};
+
+const getElementType = (element: ElementSpec): string =>
+  element && element.type && Object.keys(elementTypeMeta).includes(element.type)
+    ? element.type
+    : 'other';
+
+const categorizeElementsByType = (elements: ElementSpec[]): { [key: string]: ElementSpec[] } => {
+  elements = sortBy(elements, 'displayName');
+
+  const categories: CategorizedElementLists = { other: [] };
+
+  elements.forEach((element: ElementSpec) => {
+    const type = getElementType(element);
+
+    if (categories[type]) {
+      categories[type].push(element);
+    } else {
+      categories[type] = [element];
+    }
+  });
+
+  return categories;
+};
+
+export interface Props {
+  /**
+   * Dictionary of elements from elements registry
+   */
+  elements: { [key: string]: ElementSpec };
+  /**
+   * Handler for adding a selected element to the workpad
+   */
+  addElement: (element: ElementSpec) => void;
+  /**
+   * Renders embeddable flyout
+   */
+  renderEmbedPanel: (onClose: () => void) => JSX.Element;
+}
+
+export const ElementMenu: FunctionComponent<Props> = ({
+  elements,
+  addElement,
+  renderEmbedPanel,
+}) => {
+  const [isAssetModalVisible, setAssetModalVisible] = useState(false);
+  const [isEmbedPanelVisible, setEmbedPanelVisible] = useState(false);
+  const [isSavedElementsModalVisible, setSavedElementsModalVisible] = useState(false);
+
+  const hideAssetModal = () => setAssetModalVisible(false);
+  const showAssetModal = () => setAssetModalVisible(true);
+  const hideEmbedPanel = () => setEmbedPanelVisible(false);
+  const showEmbedPanel = () => setEmbedPanelVisible(true);
+  const hideSavedElementsModal = () => setSavedElementsModalVisible(false);
+  const showSavedElementsModal = () => setSavedElementsModalVisible(true);
+
+  const {
+    chart: chartElements,
+    filter: filterElements,
+    image: imageElements,
+    other: otherElements,
+    progress: progressElements,
+    shape: shapeElements,
+    text: textElements,
+  } = categorizeElementsByType(Object.values(elements));
+
+  const getPanelTree = (closePopover: ClosePopoverFn) => {
+    const elementToMenuItem = (element: ElementSpec): EuiContextMenuPanelItemDescriptor => ({
+      name: element.displayName || element.name,
+      icon: element.icon,
+      onClick: () => {
+        addElement(element);
+        closePopover();
+      },
+    });
+
+    const elementListToMenuItems = (elementList: ElementSpec[]) => {
+      const type = getElementType(elementList[0]);
+      const { name, icon } = elementTypeMeta[type] || elementTypeMeta.other;
+
+      if (elementList.length > 1) {
+        return {
+          name,
+          icon: <EuiIcon type={icon} size="m" />,
+          panel: {
+            id: getId('element-type'),
+            title: name,
+            items: elementList.map(elementToMenuItem),
+          },
+        };
+      }
+
+      return elementToMenuItem(elementList[0]);
+    };
+
+    return {
+      id: 0,
+      items: [
+        elementListToMenuItems(textElements),
+        elementListToMenuItems(shapeElements),
+        elementListToMenuItems(chartElements),
+        elementListToMenuItems(imageElements),
+        elementListToMenuItems(filterElements),
+        elementListToMenuItems(progressElements),
+        elementListToMenuItems(otherElements),
+        {
+          name: strings.getMyElementsMenuItemLabel(),
+          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
+          'data-test-subj': 'saved-elements-menu-option',
+          icon: <EuiIcon type="empty" size="m" />,
+          onClick: () => {
+            showSavedElementsModal();
+            closePopover();
+          },
+        },
+        {
+          name: strings.getAssetsMenuItemLabel(),
+          icon: <EuiIcon type="empty" size="m" />,
+          onClick: () => {
+            showAssetModal();
+            closePopover();
+          },
+        },
+        {
+          name: strings.getEmbedObjectMenuItemLabel(),
+          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
+          icon: <EuiIcon type="logoKibana" size="m" />,
+          onClick: () => {
+            showEmbedPanel();
+            closePopover();
+          },
+        },
+      ],
+    };
+  };
+
+  const exportControl = (togglePopover: React.MouseEventHandler<any>) => (
+    <EuiButton
+      fill
+      iconType="plusInCircle"
+      size="s"
+      aria-label={strings.getElementMenuLabel()}
+      onClick={togglePopover}
+      className="canvasElementMenu__popoverButton"
+      data-test-subj="add-element-button"
+    >
+      {strings.getElementMenuButtonLabel()}
+    </EuiButton>
+  );
+
+  return (
+    <Fragment>
+      <Popover button={exportControl} panelPaddingSize="none" anchorPosition="downLeft">
+        {({ closePopover }: { closePopover: ClosePopoverFn }) => (
+          <EuiContextMenu
+            initialPanelId={0}
+            panels={flattenPanelTree(getPanelTree(closePopover))}
+          />
+        )}
+      </Popover>
+      {isAssetModalVisible ? <AssetManager onClose={hideAssetModal} /> : null}
+      {isEmbedPanelVisible ? renderEmbedPanel(hideEmbedPanel) : null}
+      {isSavedElementsModalVisible ? <SavedElementsModal onClose={hideSavedElementsModal} /> : null}
+    </Fragment>
+  );
+};
+
+ElementMenu.propTypes = {
+  elements: PropTypes.object,
+  addElement: PropTypes.func.isRequired,
+};
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
index 6d9233aaba22b..2cbe4ae5a6575 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/element_menu.tsx
@@ -4,211 +4,44 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { sortBy } from 'lodash';
-import React, { Fragment, FunctionComponent, useState } from 'react';
-import PropTypes from 'prop-types';
-import {
-  EuiButton,
-  EuiContextMenu,
-  EuiIcon,
-  EuiContextMenuPanelItemDescriptor,
-} from '@elastic/eui';
-import { CONTEXT_MENU_TOP_BORDER_CLASSNAME } from '../../../../common/lib';
-import { ComponentStrings } from '../../../../i18n/components';
-import { ElementSpec } from '../../../../types';
-import { flattenPanelTree } from '../../../lib/flatten_panel_tree';
-import { getId } from '../../../lib/get_id';
-import { Popover, ClosePopoverFn } from '../../popover';
-import { AssetManager } from '../../asset_manager';
-import { SavedElementsModal } from '../../saved_elements_modal';
-
-interface CategorizedElementLists {
-  [key: string]: ElementSpec[];
-}
-
-interface ElementTypeMeta {
-  [key: string]: { name: string; icon: string };
+import React from 'react';
+import { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import { Dispatch } from 'redux';
+import { State, ElementSpec } from '../../../../types';
+// @ts-expect-error untyped local
+import { elementsRegistry } from '../../../lib/elements_registry';
+import { ElementMenu as Component, Props as ComponentProps } from './element_menu.component';
+// @ts-expect-error untyped local
+import { addElement } from '../../../state/actions/elements';
+import { getSelectedPage } from '../../../state/selectors/workpad';
+import { AddEmbeddablePanel } from '../../embeddable_flyout';
+
+interface StateProps {
+  pageId: string;
 }
 
-export const { WorkpadHeaderElementMenu: strings } = ComponentStrings;
-
-// label and icon for the context menu item for each element type
-const elementTypeMeta: ElementTypeMeta = {
-  chart: { name: strings.getChartMenuItemLabel(), icon: 'visArea' },
-  filter: { name: strings.getFilterMenuItemLabel(), icon: 'filter' },
-  image: { name: strings.getImageMenuItemLabel(), icon: 'image' },
-  other: { name: strings.getOtherMenuItemLabel(), icon: 'empty' },
-  progress: { name: strings.getProgressMenuItemLabel(), icon: 'visGoal' },
-  shape: { name: strings.getShapeMenuItemLabel(), icon: 'node' },
-  text: { name: strings.getTextMenuItemLabel(), icon: 'visText' },
-};
-
-const getElementType = (element: ElementSpec): string =>
-  element && element.type && Object.keys(elementTypeMeta).includes(element.type)
-    ? element.type
-    : 'other';
-
-const categorizeElementsByType = (elements: ElementSpec[]): { [key: string]: ElementSpec[] } => {
-  elements = sortBy(elements, 'displayName');
-
-  const categories: CategorizedElementLists = { other: [] };
-
-  elements.forEach((element: ElementSpec) => {
-    const type = getElementType(element);
-
-    if (categories[type]) {
-      categories[type].push(element);
-    } else {
-      categories[type] = [element];
-    }
-  });
-
-  return categories;
-};
-
-export interface Props {
-  /**
-   * Dictionary of elements from elements registry
-   */
-  elements: { [key: string]: ElementSpec };
-  /**
-   * Handler for adding a selected element to the workpad
-   */
-  addElement: (element: ElementSpec) => void;
-  /**
-   * Renders embeddable flyout
-   */
-  renderEmbedPanel: (onClose: () => void) => JSX.Element;
+interface DispatchProps {
+  addElement: (pageId: string) => (partialElement: ElementSpec) => void;
 }
 
-export const ElementMenu: FunctionComponent<Props> = ({
-  elements,
-  addElement,
-  renderEmbedPanel,
-}) => {
-  const [isAssetModalVisible, setAssetModalVisible] = useState(false);
-  const [isEmbedPanelVisible, setEmbedPanelVisible] = useState(false);
-  const [isSavedElementsModalVisible, setSavedElementsModalVisible] = useState(false);
-
-  const hideAssetModal = () => setAssetModalVisible(false);
-  const showAssetModal = () => setAssetModalVisible(true);
-  const hideEmbedPanel = () => setEmbedPanelVisible(false);
-  const showEmbedPanel = () => setEmbedPanelVisible(true);
-  const hideSavedElementsModal = () => setSavedElementsModalVisible(false);
-  const showSavedElementsModal = () => setSavedElementsModalVisible(true);
-
-  const {
-    chart: chartElements,
-    filter: filterElements,
-    image: imageElements,
-    other: otherElements,
-    progress: progressElements,
-    shape: shapeElements,
-    text: textElements,
-  } = categorizeElementsByType(Object.values(elements));
-
-  const getPanelTree = (closePopover: ClosePopoverFn) => {
-    const elementToMenuItem = (element: ElementSpec): EuiContextMenuPanelItemDescriptor => ({
-      name: element.displayName || element.name,
-      icon: element.icon,
-      onClick: () => {
-        addElement(element);
-        closePopover();
-      },
-    });
-
-    const elementListToMenuItems = (elementList: ElementSpec[]) => {
-      const type = getElementType(elementList[0]);
-      const { name, icon } = elementTypeMeta[type] || elementTypeMeta.other;
-
-      if (elementList.length > 1) {
-        return {
-          name,
-          icon: <EuiIcon type={icon} size="m" />,
-          panel: {
-            id: getId('element-type'),
-            title: name,
-            items: elementList.map(elementToMenuItem),
-          },
-        };
-      }
-
-      return elementToMenuItem(elementList[0]);
-    };
-
-    return {
-      id: 0,
-      items: [
-        elementListToMenuItems(textElements),
-        elementListToMenuItems(shapeElements),
-        elementListToMenuItems(chartElements),
-        elementListToMenuItems(imageElements),
-        elementListToMenuItems(filterElements),
-        elementListToMenuItems(progressElements),
-        elementListToMenuItems(otherElements),
-        {
-          name: strings.getMyElementsMenuItemLabel(),
-          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
-          'data-test-subj': 'saved-elements-menu-option',
-          icon: <EuiIcon type="empty" size="m" />,
-          onClick: () => {
-            showSavedElementsModal();
-            closePopover();
-          },
-        },
-        {
-          name: strings.getAssetsMenuItemLabel(),
-          icon: <EuiIcon type="empty" size="m" />,
-          onClick: () => {
-            showAssetModal();
-            closePopover();
-          },
-        },
-        {
-          name: strings.getEmbedObjectMenuItemLabel(),
-          className: CONTEXT_MENU_TOP_BORDER_CLASSNAME,
-          icon: <EuiIcon type="logoKibana" size="m" />,
-          onClick: () => {
-            showEmbedPanel();
-            closePopover();
-          },
-        },
-      ],
-    };
-  };
-
-  const exportControl = (togglePopover: React.MouseEventHandler<any>) => (
-    <EuiButton
-      fill
-      iconType="plusInCircle"
-      size="s"
-      aria-label={strings.getElementMenuLabel()}
-      onClick={togglePopover}
-      className="canvasElementMenu__popoverButton"
-      data-test-subj="add-element-button"
-    >
-      {strings.getElementMenuButtonLabel()}
-    </EuiButton>
-  );
-
-  return (
-    <Fragment>
-      <Popover button={exportControl} panelPaddingSize="none" anchorPosition="downLeft">
-        {({ closePopover }: { closePopover: ClosePopoverFn }) => (
-          <EuiContextMenu
-            initialPanelId={0}
-            panels={flattenPanelTree(getPanelTree(closePopover))}
-          />
-        )}
-      </Popover>
-      {isAssetModalVisible ? <AssetManager onClose={hideAssetModal} /> : null}
-      {isEmbedPanelVisible ? renderEmbedPanel(hideEmbedPanel) : null}
-      {isSavedElementsModalVisible ? <SavedElementsModal onClose={hideSavedElementsModal} /> : null}
-    </Fragment>
-  );
-};
-
-ElementMenu.propTypes = {
-  elements: PropTypes.object,
-  addElement: PropTypes.func.isRequired,
-};
+const mapStateToProps = (state: State) => ({
+  pageId: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  addElement: (pageId: string) => (element: ElementSpec) => dispatch(addElement(pageId, element)),
+});
+
+const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => ({
+  ...stateProps,
+  ...dispatchProps,
+  addElement: dispatchProps.addElement(stateProps.pageId),
+  // Moved this section out of the main component to enable stories
+  renderEmbedPanel: (onClose: () => void) => <AddEmbeddablePanel onClose={onClose} />,
+});
+
+export const ElementMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withProps(() => ({ elements: elementsRegistry.toJS() }))
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts
new file mode 100644
index 0000000000000..26f81e125f6e2
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { ElementMenu } from './element_menu';
+export { ElementMenu as ElementMenuComponent } from './element_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx
deleted file mode 100644
index 264873fc994dd..0000000000000
--- a/x-pack/plugins/canvas/public/components/workpad_header/element_menu/index.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import React from 'react';
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import { Dispatch } from 'redux';
-import { State, ElementSpec } from '../../../../types';
-// @ts-expect-error untyped local
-import { elementsRegistry } from '../../../lib/elements_registry';
-import { ElementMenu as Component, Props as ComponentProps } from './element_menu';
-// @ts-expect-error untyped local
-import { addElement } from '../../../state/actions/elements';
-import { getSelectedPage } from '../../../state/selectors/workpad';
-import { AddEmbeddablePanel } from '../../embeddable_flyout';
-
-interface StateProps {
-  pageId: string;
-}
-
-interface DispatchProps {
-  addElement: (pageId: string) => (partialElement: ElementSpec) => void;
-}
-
-const mapStateToProps = (state: State) => ({
-  pageId: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  addElement: (pageId: string) => (element: ElementSpec) => dispatch(addElement(pageId, element)),
-});
-
-const mergeProps = (stateProps: StateProps, dispatchProps: DispatchProps) => ({
-  ...stateProps,
-  ...dispatchProps,
-  addElement: dispatchProps.addElement(stateProps.pageId),
-  // Moved this section out of the main component to enable stories
-  renderEmbedPanel: (onClose: () => void) => <AddEmbeddablePanel onClose={onClose} />,
-});
-
-export const ElementMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withProps(() => ({ elements: elementsRegistry.toJS() }))
-)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/index.ts
new file mode 100644
index 0000000000000..0b6f8cc06d198
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { WorkpadHeader } from './workpad_header';
+export { WorkpadHeader as WorkpadHeaderComponent } from './workpad_header.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/index.tsx b/x-pack/plugins/canvas/public/components/workpad_header/index.tsx
deleted file mode 100644
index 407b4ff932811..0000000000000
--- a/x-pack/plugins/canvas/public/components/workpad_header/index.tsx
+++ /dev/null
@@ -1,46 +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 { connect } from 'react-redux';
-import { Dispatch } from 'redux';
-import { canUserWrite } from '../../state/selectors/app';
-import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
-import { setWriteable } from '../../state/actions/workpad';
-import { State } from '../../../types';
-import { WorkpadHeader as Component, Props as ComponentProps } from './workpad_header';
-
-interface StateProps {
-  isWriteable: boolean;
-  canUserWrite: boolean;
-  selectedPage: string;
-}
-
-interface DispatchProps {
-  setWriteable: (isWorkpadWriteable: boolean) => void;
-}
-
-const mapStateToProps = (state: State): StateProps => ({
-  isWriteable: isWriteable(state) && canUserWrite(state),
-  canUserWrite: canUserWrite(state),
-  selectedPage: getSelectedPage(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: ComponentProps
-): ComponentProps => ({
-  ...stateProps,
-  ...dispatchProps,
-  ...ownProps,
-  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
-});
-
-export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
index 87b926d93ccb9..8db62f5ac2d87 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/index.ts
@@ -4,19 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-// @ts-expect-error untyped local
-import { fetchAllRenderables } from '../../../state/actions/elements';
-import { getInFlight } from '../../../state/selectors/resolved_args';
-import { State } from '../../../../types';
-import { RefreshControl as Component } from './refresh_control';
-
-const mapStateToProps = (state: State) => ({
-  inFlight: getInFlight(state),
-});
-
-const mapDispatchToProps = {
-  doRefresh: fetchAllRenderables,
-};
-
-export const RefreshControl = connect(mapStateToProps, mapDispatchToProps)(Component);
+export { RefreshControl } from './refresh_control';
+export { RefreshControl as RefreshControlComponent } from './refresh_control.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts
new file mode 100644
index 0000000000000..a7f01e46927ce
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/refresh_control/refresh_control.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+// @ts-expect-error untyped local
+import { fetchAllRenderables } from '../../../state/actions/elements';
+import { getInFlight } from '../../../state/selectors/resolved_args';
+import { State } from '../../../../types';
+import { RefreshControl as Component } from './refresh_control.component';
+
+const mapStateToProps = (state: State) => ({
+  inFlight: getInFlight(state),
+});
+
+const mapDispatchToProps = {
+  doRefresh: fetchAllRenderables,
+};
+
+export const RefreshControl = connect(mapStateToProps, mapDispatchToProps)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
index ab9137b1676c9..e0a1f0e381fd3 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/share_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ShareMenu } from '../share_menu';
+import { ShareMenu } from '../share_menu.component';
 
 storiesOf('components/WorkpadHeader/ShareMenu', module).add('default', () => (
   <ShareMenu
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/share_website_flyout.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
similarity index 94%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/share_website_flyout.stories.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
index 886ddcfd763e1..54c88c548ade5 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/share_website_flyout.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ShareWebsiteFlyout } from '../share_website_flyout';
+import { ShareWebsiteFlyout } from '../flyout.component';
 
 storiesOf('components/WorkpadHeader/ShareMenu/ShareWebsiteFlyout', module)
   .addParameters({
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
similarity index 98%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
index 5fd381baa73f5..a538848e6b47e 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/share_website_flyout.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.component.tsx
@@ -24,7 +24,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 import { ZIP, CANVAS, HTML } from '../../../../../i18n/constants';
-import { OnCloseFn } from '../share_menu';
+import { OnCloseFn } from '../share_menu.component';
 import { WorkpadStep } from './workpad_step';
 import { RuntimeStep } from './runtime_step';
 import { SnippetsStep } from './snippets_step';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
new file mode 100644
index 0000000000000..e8d7a3e2cef53
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/flyout.ts
@@ -0,0 +1,101 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import {
+  getWorkpad,
+  getRenderedWorkpad,
+  getRenderedWorkpadExpressions,
+} from '../../../../state/selectors/workpad';
+import {
+  downloadRenderedWorkpad,
+  downloadRuntime,
+  downloadZippedRuntime,
+} from '../../../../lib/download_workpad';
+import { ShareWebsiteFlyout as Component, Props as ComponentProps } from './flyout.component';
+import { State, CanvasWorkpad } from '../../../../../types';
+import { CanvasRenderedWorkpad } from '../../../../../shareable_runtime/types';
+import { arrayBufferFetch } from '../../../../../common/lib/fetch';
+import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants';
+import { renderFunctionNames } from '../../../../../shareable_runtime/supported_renderers';
+
+import { ComponentStrings } from '../../../../../i18n/components';
+import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public/';
+import { OnCloseFn } from '../share_menu.component';
+import { WithKibanaProps } from '../../../../index';
+
+export { OnDownloadFn, OnCopyFn } from './flyout.component';
+
+const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
+
+const getUnsupportedRenderers = (state: State) => {
+  const renderers: string[] = [];
+  const expressions = getRenderedWorkpadExpressions(state);
+  expressions.forEach((expression) => {
+    if (!renderFunctionNames.includes(expression)) {
+      renderers.push(expression);
+    }
+  });
+
+  return renderers;
+};
+
+const mapStateToProps = (state: State) => ({
+  renderedWorkpad: getRenderedWorkpad(state),
+  unsupportedRenderers: getUnsupportedRenderers(state),
+  workpad: getWorkpad(state),
+});
+
+interface Props {
+  onClose: OnCloseFn;
+  renderedWorkpad: CanvasRenderedWorkpad;
+  unsupportedRenderers: string[];
+  workpad: CanvasWorkpad;
+}
+
+export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>>(
+  connect(mapStateToProps),
+  withKibana,
+  withProps(
+    ({
+      unsupportedRenderers,
+      renderedWorkpad,
+      onClose,
+      workpad,
+      kibana,
+    }: Props & WithKibanaProps): ComponentProps => ({
+      unsupportedRenderers,
+      onClose,
+      onCopy: () => {
+        kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage());
+      },
+      onDownload: (type) => {
+        switch (type) {
+          case 'share':
+            downloadRenderedWorkpad(renderedWorkpad);
+            return;
+          case 'shareRuntime':
+            downloadRuntime(kibana.services.http.basePath.get());
+            return;
+          case 'shareZip':
+            const basePath = kibana.services.http.basePath.get();
+            arrayBufferFetch
+              .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad))
+              .then((blob) => downloadZippedRuntime(blob.data))
+              .catch((err: Error) => {
+                kibana.services.canvas.notify.error(err, {
+                  title: strings.getShareableZipErrorTitle(workpad.name),
+                });
+              });
+            return;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+    })
+  )
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
index 1e1eac2a1dcf3..335c5dff6ed74 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/index.ts
@@ -4,95 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import {
-  getWorkpad,
-  getRenderedWorkpad,
-  getRenderedWorkpadExpressions,
-} from '../../../../state/selectors/workpad';
-import {
-  downloadRenderedWorkpad,
-  downloadRuntime,
-  downloadZippedRuntime,
-} from '../../../../lib/download_workpad';
-import { ShareWebsiteFlyout as Component, Props as ComponentProps } from './share_website_flyout';
-import { State, CanvasWorkpad } from '../../../../../types';
-import { CanvasRenderedWorkpad } from '../../../../../shareable_runtime/types';
-import { arrayBufferFetch } from '../../../../../common/lib/fetch';
-import { API_ROUTE_SHAREABLE_ZIP } from '../../../../../common/lib/constants';
-import { renderFunctionNames } from '../../../../../shareable_runtime/supported_renderers';
-
-import { ComponentStrings } from '../../../../../i18n/components';
-import { withKibana } from '../../../../../../../../src/plugins/kibana_react/public/';
-import { OnCloseFn } from '../share_menu';
-import { WithKibanaProps } from '../../../../index';
-const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
-
-const getUnsupportedRenderers = (state: State) => {
-  const renderers: string[] = [];
-  const expressions = getRenderedWorkpadExpressions(state);
-  expressions.forEach((expression) => {
-    if (!renderFunctionNames.includes(expression)) {
-      renderers.push(expression);
-    }
-  });
-
-  return renderers;
-};
-
-const mapStateToProps = (state: State) => ({
-  renderedWorkpad: getRenderedWorkpad(state),
-  unsupportedRenderers: getUnsupportedRenderers(state),
-  workpad: getWorkpad(state),
-});
-
-interface Props {
-  onClose: OnCloseFn;
-  renderedWorkpad: CanvasRenderedWorkpad;
-  unsupportedRenderers: string[];
-  workpad: CanvasWorkpad;
-}
-
-export const ShareWebsiteFlyout = compose<ComponentProps, Pick<Props, 'onClose'>>(
-  connect(mapStateToProps),
-  withKibana,
-  withProps(
-    ({
-      unsupportedRenderers,
-      renderedWorkpad,
-      onClose,
-      workpad,
-      kibana,
-    }: Props & WithKibanaProps): ComponentProps => ({
-      unsupportedRenderers,
-      onClose,
-      onCopy: () => {
-        kibana.services.canvas.notify.info(strings.getCopyShareConfigMessage());
-      },
-      onDownload: (type) => {
-        switch (type) {
-          case 'share':
-            downloadRenderedWorkpad(renderedWorkpad);
-            return;
-          case 'shareRuntime':
-            downloadRuntime(kibana.services.http.basePath.get());
-            return;
-          case 'shareZip':
-            const basePath = kibana.services.http.basePath.get();
-            arrayBufferFetch
-              .post(`${basePath}${API_ROUTE_SHAREABLE_ZIP}`, JSON.stringify(renderedWorkpad))
-              .then((blob) => downloadZippedRuntime(blob.data))
-              .catch((err: Error) => {
-                kibana.services.canvas.notify.error(err, {
-                  title: strings.getShareableZipErrorTitle(workpad.name),
-                });
-              });
-            return;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-    })
-  )
-)(Component);
+export { ShareWebsiteFlyout } from './flyout';
+export { ShareWebsiteFlyout as ShareWebsiteFlyoutComponent } from './flyout.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
index ea8aba688b2a6..b38226bb12a23 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/runtime_step.tsx
@@ -9,7 +9,7 @@ import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 
-import { OnDownloadFn } from './share_website_flyout';
+import { OnDownloadFn } from './flyout';
 
 const { ShareWebsiteRuntimeStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
index 81f559651eb25..42497fcd316fe 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/snippets_step.tsx
@@ -19,7 +19,7 @@ import {
 import { ComponentStrings } from '../../../../../i18n/components';
 
 import { Clipboard } from '../../../clipboard';
-import { OnCopyFn } from './share_website_flyout';
+import { OnCopyFn } from './flyout';
 
 const { ShareWebsiteSnippetsStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
index 1a5884d89d066..ac4dfe6872d3c 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/flyout/workpad_step.tsx
@@ -9,7 +9,7 @@ import { EuiText, EuiSpacer, EuiButton } from '@elastic/eui';
 
 import { ComponentStrings } from '../../../../../i18n/components';
 
-import { OnDownloadFn } from './share_website_flyout';
+import { OnDownloadFn } from './flyout';
 
 const { ShareWebsiteWorkpadStep: strings } = ComponentStrings;
 
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
index 01bcfebc0dba9..19dc9b668e61a 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/index.ts
@@ -4,95 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withProps } from 'recompose';
-import { jobCompletionNotifications } from '../../../../../../plugins/reporting/public';
-import { getWorkpad, getPages } from '../../../state/selectors/workpad';
-import { getWindow } from '../../../lib/get_window';
-import { downloadWorkpad } from '../../../lib/download_workpad';
-import { ShareMenu as Component, Props as ComponentProps } from './share_menu';
-import { getPdfUrl, createPdf } from './utils';
-import { State, CanvasWorkpad } from '../../../../types';
-import { withServices, WithServicesProps } from '../../../services';
-
-import { ComponentStrings } from '../../../../i18n';
-
-const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
-
-const mapStateToProps = (state: State) => ({
-  workpad: getWorkpad(state),
-  pageCount: getPages(state).length,
-});
-
-const getAbsoluteUrl = (path: string) => {
-  const { location } = getWindow();
-
-  if (!location) {
-    return path;
-  } // fallback for mocked window object
-
-  const { protocol, hostname, port } = location;
-  return `${protocol}//${hostname}:${port}${path}`;
-};
-
-interface Props {
-  workpad: CanvasWorkpad;
-  pageCount: number;
-}
-
-export const ShareMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps),
-  withServices,
-  withProps(
-    ({ workpad, pageCount, services }: Props & WithServicesProps): ComponentProps => ({
-      getExportUrl: (type) => {
-        if (type === 'pdf') {
-          const pdfUrl = getPdfUrl(
-            workpad,
-            { pageCount },
-            services.platform.getBasePathInterface()
-          );
-          return getAbsoluteUrl(pdfUrl);
-        }
-
-        throw new Error(strings.getUnknownExportErrorMessage(type));
-      },
-      onCopy: (type) => {
-        switch (type) {
-          case 'pdf':
-            services.notify.info(strings.getCopyPDFMessage());
-            break;
-          case 'reportingConfig':
-            services.notify.info(strings.getCopyReportingConfigMessage());
-            break;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-      onExport: (type) => {
-        switch (type) {
-          case 'pdf':
-            return createPdf(workpad, { pageCount }, services.platform.getBasePathInterface())
-              .then(({ data }: { data: { job: { id: string } } }) => {
-                services.notify.info(strings.getExportPDFMessage(), {
-                  title: strings.getExportPDFTitle(workpad.name),
-                });
-
-                // register the job so a completion notification shows up when it's ready
-                jobCompletionNotifications.add(data.job.id);
-              })
-              .catch((err: Error) => {
-                services.notify.error(err, {
-                  title: strings.getExportPDFErrorTitle(workpad.name),
-                });
-              });
-          case 'json':
-            downloadWorkpad(workpad.id);
-            return;
-          default:
-            throw new Error(strings.getUnknownExportErrorMessage(type));
-        }
-      },
-    })
-  )
-)(Component);
+export { ShareMenu } from './share_menu';
+export { ShareMenu as ShareMenuComponent } from './share_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
new file mode 100644
index 0000000000000..85c4b14a28c13
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.ts
@@ -0,0 +1,98 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { compose, withProps } from 'recompose';
+import { jobCompletionNotifications } from '../../../../../../plugins/reporting/public';
+import { getWorkpad, getPages } from '../../../state/selectors/workpad';
+import { getWindow } from '../../../lib/get_window';
+import { downloadWorkpad } from '../../../lib/download_workpad';
+import { ShareMenu as Component, Props as ComponentProps } from './share_menu.component';
+import { getPdfUrl, createPdf } from './utils';
+import { State, CanvasWorkpad } from '../../../../types';
+import { withServices, WithServicesProps } from '../../../services';
+
+import { ComponentStrings } from '../../../../i18n';
+
+const { WorkpadHeaderShareMenu: strings } = ComponentStrings;
+
+const mapStateToProps = (state: State) => ({
+  workpad: getWorkpad(state),
+  pageCount: getPages(state).length,
+});
+
+const getAbsoluteUrl = (path: string) => {
+  const { location } = getWindow();
+
+  if (!location) {
+    return path;
+  } // fallback for mocked window object
+
+  const { protocol, hostname, port } = location;
+  return `${protocol}//${hostname}:${port}${path}`;
+};
+
+interface Props {
+  workpad: CanvasWorkpad;
+  pageCount: number;
+}
+
+export const ShareMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps),
+  withServices,
+  withProps(
+    ({ workpad, pageCount, services }: Props & WithServicesProps): ComponentProps => ({
+      getExportUrl: (type) => {
+        if (type === 'pdf') {
+          const pdfUrl = getPdfUrl(
+            workpad,
+            { pageCount },
+            services.platform.getBasePathInterface()
+          );
+          return getAbsoluteUrl(pdfUrl);
+        }
+
+        throw new Error(strings.getUnknownExportErrorMessage(type));
+      },
+      onCopy: (type) => {
+        switch (type) {
+          case 'pdf':
+            services.notify.info(strings.getCopyPDFMessage());
+            break;
+          case 'reportingConfig':
+            services.notify.info(strings.getCopyReportingConfigMessage());
+            break;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+      onExport: (type) => {
+        switch (type) {
+          case 'pdf':
+            return createPdf(workpad, { pageCount }, services.platform.getBasePathInterface())
+              .then(({ data }: { data: { job: { id: string } } }) => {
+                services.notify.info(strings.getExportPDFMessage(), {
+                  title: strings.getExportPDFTitle(workpad.name),
+                });
+
+                // register the job so a completion notification shows up when it's ready
+                jobCompletionNotifications.add(data.job.id);
+              })
+              .catch((err: Error) => {
+                services.notify.error(err, {
+                  title: strings.getExportPDFErrorTitle(workpad.name),
+                });
+              });
+          case 'json':
+            downloadWorkpad(workpad.id);
+            return;
+          default:
+            throw new Error(strings.getUnknownExportErrorMessage(type));
+        }
+      },
+    })
+  )
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
index 5b4de05da3a3d..6b033feb26021 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/view_menu.stories.tsx
@@ -6,7 +6,7 @@
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import React from 'react';
-import { ViewMenu } from '../view_menu';
+import { ViewMenu } from '../view_menu.component';
 
 const handlers = {
   setZoomScale: action('setZoomScale'),
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
index e2a05d13b017e..167b3822fd13d 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/index.ts
@@ -4,97 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { connect } from 'react-redux';
-import { compose, withHandlers } from 'recompose';
-import { Dispatch } from 'redux';
-import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
-import { State, CanvasWorkpadBoundingBox } from '../../../../types';
-// @ts-expect-error untyped local
-import { fetchAllRenderables } from '../../../state/actions/elements';
-// @ts-expect-error untyped local
-import { setZoomScale, setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
-import {
-  setWriteable,
-  setRefreshInterval,
-  enableAutoplay,
-  setAutoplayInterval,
-} from '../../../state/actions/workpad';
-import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
-import {
-  getWorkpadBoundingBox,
-  getWorkpadWidth,
-  getWorkpadHeight,
-  isWriteable,
-  getRefreshInterval,
-  getAutoplay,
-} from '../../../state/selectors/workpad';
-import { ViewMenu as Component, Props as ComponentProps } from './view_menu';
-import { getFitZoomScale } from './lib/get_fit_zoom_scale';
-
-interface StateProps {
-  zoomScale: number;
-  boundingBox: CanvasWorkpadBoundingBox;
-  workpadWidth: number;
-  workpadHeight: number;
-  isWriteable: boolean;
-}
-
-interface DispatchProps {
-  setWriteable: (isWorkpadWriteable: boolean) => void;
-  setZoomScale: (scale: number) => void;
-  setFullscreen: (showFullscreen: boolean) => void;
-}
-
-const mapStateToProps = (state: State) => {
-  const { enabled, interval } = getAutoplay(state);
-
-  return {
-    zoomScale: getZoomScale(state),
-    boundingBox: getWorkpadBoundingBox(state),
-    workpadWidth: getWorkpadWidth(state),
-    workpadHeight: getWorkpadHeight(state),
-    isWriteable: isWriteable(state) && canUserWrite(state),
-    refreshInterval: getRefreshInterval(state),
-    autoplayEnabled: enabled,
-    autoplayInterval: interval,
-  };
-};
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
-  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
-  setFullscreen: (value: boolean) => {
-    dispatch(setFullscreen(value));
-
-    if (value) {
-      dispatch(selectToplevelNodes([]));
-    }
-  },
-  doRefresh: () => dispatch(fetchAllRenderables()),
-  setRefreshInterval: (interval: number) => dispatch(setRefreshInterval(interval)),
-  enableAutoplay: (autoplay: number) => dispatch(enableAutoplay(!!autoplay)),
-  setAutoplayInterval: (interval: number) => dispatch(setAutoplayInterval(interval)),
-});
-
-const mergeProps = (
-  stateProps: StateProps,
-  dispatchProps: DispatchProps,
-  ownProps: ComponentProps
-): ComponentProps => {
-  const { boundingBox, workpadWidth, workpadHeight, ...remainingStateProps } = stateProps;
-
-  return {
-    ...remainingStateProps,
-    ...dispatchProps,
-    ...ownProps,
-    toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
-    enterFullscreen: () => dispatchProps.setFullscreen(true),
-    fitToWindow: () =>
-      dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
-  };
-};
-
-export const ViewMenu = compose<ComponentProps, {}>(
-  connect(mapStateToProps, mapDispatchToProps, mergeProps),
-  withHandlers(zoomHandlerCreators)
-)(Component);
+export { ViewMenu } from './view_menu';
+export { ViewMenu as ViewMenuComponent } from './view_menu.component';
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
similarity index 100%
rename from x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.tsx
rename to x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.component.tsx
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
new file mode 100644
index 0000000000000..c9650a35ea2a6
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/view_menu/view_menu.ts
@@ -0,0 +1,100 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { connect } from 'react-redux';
+import { compose, withHandlers } from 'recompose';
+import { Dispatch } from 'redux';
+import { zoomHandlerCreators } from '../../../lib/app_handler_creators';
+import { State, CanvasWorkpadBoundingBox } from '../../../../types';
+// @ts-expect-error untyped local
+import { fetchAllRenderables } from '../../../state/actions/elements';
+// @ts-expect-error untyped local
+import { setZoomScale, setFullscreen, selectToplevelNodes } from '../../../state/actions/transient';
+import {
+  setWriteable,
+  setRefreshInterval,
+  enableAutoplay,
+  setAutoplayInterval,
+} from '../../../state/actions/workpad';
+import { getZoomScale, canUserWrite } from '../../../state/selectors/app';
+import {
+  getWorkpadBoundingBox,
+  getWorkpadWidth,
+  getWorkpadHeight,
+  isWriteable,
+  getRefreshInterval,
+  getAutoplay,
+} from '../../../state/selectors/workpad';
+import { ViewMenu as Component, Props as ComponentProps } from './view_menu.component';
+import { getFitZoomScale } from './lib/get_fit_zoom_scale';
+
+interface StateProps {
+  zoomScale: number;
+  boundingBox: CanvasWorkpadBoundingBox;
+  workpadWidth: number;
+  workpadHeight: number;
+  isWriteable: boolean;
+}
+
+interface DispatchProps {
+  setWriteable: (isWorkpadWriteable: boolean) => void;
+  setZoomScale: (scale: number) => void;
+  setFullscreen: (showFullscreen: boolean) => void;
+}
+
+const mapStateToProps = (state: State) => {
+  const { enabled, interval } = getAutoplay(state);
+
+  return {
+    zoomScale: getZoomScale(state),
+    boundingBox: getWorkpadBoundingBox(state),
+    workpadWidth: getWorkpadWidth(state),
+    workpadHeight: getWorkpadHeight(state),
+    isWriteable: isWriteable(state) && canUserWrite(state),
+    refreshInterval: getRefreshInterval(state),
+    autoplayEnabled: enabled,
+    autoplayInterval: interval,
+  };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setZoomScale: (scale: number) => dispatch(setZoomScale(scale)),
+  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
+  setFullscreen: (value: boolean) => {
+    dispatch(setFullscreen(value));
+
+    if (value) {
+      dispatch(selectToplevelNodes([]));
+    }
+  },
+  doRefresh: () => dispatch(fetchAllRenderables()),
+  setRefreshInterval: (interval: number) => dispatch(setRefreshInterval(interval)),
+  enableAutoplay: (autoplay: number) => dispatch(enableAutoplay(!!autoplay)),
+  setAutoplayInterval: (interval: number) => dispatch(setAutoplayInterval(interval)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => {
+  const { boundingBox, workpadWidth, workpadHeight, ...remainingStateProps } = stateProps;
+
+  return {
+    ...remainingStateProps,
+    ...dispatchProps,
+    ...ownProps,
+    toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
+    enterFullscreen: () => dispatchProps.setFullscreen(true),
+    fitToWindow: () =>
+      dispatchProps.setZoomScale(getFitZoomScale(boundingBox, workpadWidth, workpadHeight)),
+  };
+};
+
+export const ViewMenu = compose<ComponentProps, {}>(
+  connect(mapStateToProps, mapDispatchToProps, mergeProps),
+  withHandlers(zoomHandlerCreators)
+)(Component);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx
new file mode 100644
index 0000000000000..eb4b451896b46
--- /dev/null
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.component.tsx
@@ -0,0 +1,150 @@
+/*
+ * 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 React, { FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+// @ts-expect-error no @types definition
+import { Shortcuts } from 'react-shortcuts';
+import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { ComponentStrings } from '../../../i18n';
+import { ToolTipShortcut } from '../tool_tip_shortcut/';
+import { RefreshControl } from './refresh_control';
+// @ts-expect-error untyped local
+import { FullscreenControl } from './fullscreen_control';
+import { EditMenu } from './edit_menu';
+import { ElementMenu } from './element_menu';
+import { ShareMenu } from './share_menu';
+import { ViewMenu } from './view_menu';
+
+const { WorkpadHeader: strings } = ComponentStrings;
+
+export interface Props {
+  isWriteable: boolean;
+  toggleWriteable: () => void;
+  canUserWrite: boolean;
+  commit: (type: string, payload: any) => any;
+}
+
+export const WorkpadHeader: FunctionComponent<Props> = ({
+  isWriteable,
+  canUserWrite,
+  toggleWriteable,
+  commit,
+}) => {
+  const keyHandler = (action: string) => {
+    if (action === 'EDITING') {
+      toggleWriteable();
+    }
+  };
+
+  const fullscreenButton = ({ toggleFullscreen }: { toggleFullscreen: () => void }) => (
+    <EuiToolTip
+      position="bottom"
+      content={
+        <span>
+          {strings.getFullScreenTooltip()}{' '}
+          <ToolTipShortcut namespace="PRESENTATION" action="FULLSCREEN" />
+        </span>
+      }
+    >
+      <EuiButtonIcon
+        iconType="fullScreen"
+        aria-label={strings.getFullScreenButtonAriaLabel()}
+        onClick={toggleFullscreen}
+      />
+    </EuiToolTip>
+  );
+
+  const getEditToggleToolTipText = () => {
+    if (!canUserWrite) {
+      return strings.getNoWritePermissionTooltipText();
+    }
+
+    const content = isWriteable
+      ? strings.getHideEditControlTooltip()
+      : strings.getShowEditControlTooltip();
+
+    return content;
+  };
+
+  const getEditToggleToolTip = ({ textOnly } = { textOnly: false }) => {
+    const content = getEditToggleToolTipText();
+
+    if (textOnly) {
+      return content;
+    }
+
+    return (
+      <span>
+        {content} <ToolTipShortcut namespace="EDITOR" action="EDITING" />
+      </span>
+    );
+  };
+
+  return (
+    <EuiFlexGroup
+      gutterSize="none"
+      alignItems="center"
+      justifyContent="spaceBetween"
+      className="canvasLayout__stageHeaderInner"
+    >
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="none">
+          {isWriteable && (
+            <EuiFlexItem grow={false}>
+              <ElementMenu />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false}>
+            <ViewMenu />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EditMenu commit={commit} />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <ShareMenu />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            {canUserWrite && (
+              <Shortcuts
+                name="EDITOR"
+                handler={keyHandler}
+                targetNodeSelector="body"
+                global
+                isolate
+              />
+            )}
+            <EuiToolTip position="bottom" content={getEditToggleToolTip()}>
+              <EuiButtonIcon
+                iconType={isWriteable ? 'eyeClosed' : 'eye'}
+                onClick={toggleWriteable}
+                size="s"
+                aria-label={getEditToggleToolTipText()}
+                isDisabled={!canUserWrite}
+              />
+            </EuiToolTip>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <RefreshControl />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FullscreenControl>{fullscreenButton}</FullscreenControl>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+};
+
+WorkpadHeader.propTypes = {
+  isWriteable: PropTypes.bool,
+  toggleWriteable: PropTypes.func,
+  canUserWrite: PropTypes.bool,
+};
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
index eb4b451896b46..1f630040b0c36 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/workpad_header.tsx
@@ -4,147 +4,43 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent } from 'react';
-import PropTypes from 'prop-types';
-// @ts-expect-error no @types definition
-import { Shortcuts } from 'react-shortcuts';
-import { EuiFlexItem, EuiFlexGroup, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { ComponentStrings } from '../../../i18n';
-import { ToolTipShortcut } from '../tool_tip_shortcut/';
-import { RefreshControl } from './refresh_control';
-// @ts-expect-error untyped local
-import { FullscreenControl } from './fullscreen_control';
-import { EditMenu } from './edit_menu';
-import { ElementMenu } from './element_menu';
-import { ShareMenu } from './share_menu';
-import { ViewMenu } from './view_menu';
-
-const { WorkpadHeader: strings } = ComponentStrings;
-
-export interface Props {
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { canUserWrite } from '../../state/selectors/app';
+import { getSelectedPage, isWriteable } from '../../state/selectors/workpad';
+import { setWriteable } from '../../state/actions/workpad';
+import { State } from '../../../types';
+import { WorkpadHeader as Component, Props as ComponentProps } from './workpad_header.component';
+
+interface StateProps {
   isWriteable: boolean;
-  toggleWriteable: () => void;
   canUserWrite: boolean;
-  commit: (type: string, payload: any) => any;
+  selectedPage: string;
 }
 
-export const WorkpadHeader: FunctionComponent<Props> = ({
-  isWriteable,
-  canUserWrite,
-  toggleWriteable,
-  commit,
-}) => {
-  const keyHandler = (action: string) => {
-    if (action === 'EDITING') {
-      toggleWriteable();
-    }
-  };
-
-  const fullscreenButton = ({ toggleFullscreen }: { toggleFullscreen: () => void }) => (
-    <EuiToolTip
-      position="bottom"
-      content={
-        <span>
-          {strings.getFullScreenTooltip()}{' '}
-          <ToolTipShortcut namespace="PRESENTATION" action="FULLSCREEN" />
-        </span>
-      }
-    >
-      <EuiButtonIcon
-        iconType="fullScreen"
-        aria-label={strings.getFullScreenButtonAriaLabel()}
-        onClick={toggleFullscreen}
-      />
-    </EuiToolTip>
-  );
-
-  const getEditToggleToolTipText = () => {
-    if (!canUserWrite) {
-      return strings.getNoWritePermissionTooltipText();
-    }
-
-    const content = isWriteable
-      ? strings.getHideEditControlTooltip()
-      : strings.getShowEditControlTooltip();
-
-    return content;
-  };
-
-  const getEditToggleToolTip = ({ textOnly } = { textOnly: false }) => {
-    const content = getEditToggleToolTipText();
-
-    if (textOnly) {
-      return content;
-    }
-
-    return (
-      <span>
-        {content} <ToolTipShortcut namespace="EDITOR" action="EDITING" />
-      </span>
-    );
-  };
-
-  return (
-    <EuiFlexGroup
-      gutterSize="none"
-      alignItems="center"
-      justifyContent="spaceBetween"
-      className="canvasLayout__stageHeaderInner"
-    >
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="center" gutterSize="none">
-          {isWriteable && (
-            <EuiFlexItem grow={false}>
-              <ElementMenu />
-            </EuiFlexItem>
-          )}
-          <EuiFlexItem grow={false}>
-            <ViewMenu />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EditMenu commit={commit} />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <ShareMenu />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiFlexGroup alignItems="center" gutterSize="s">
-          <EuiFlexItem grow={false}>
-            {canUserWrite && (
-              <Shortcuts
-                name="EDITOR"
-                handler={keyHandler}
-                targetNodeSelector="body"
-                global
-                isolate
-              />
-            )}
-            <EuiToolTip position="bottom" content={getEditToggleToolTip()}>
-              <EuiButtonIcon
-                iconType={isWriteable ? 'eyeClosed' : 'eye'}
-                onClick={toggleWriteable}
-                size="s"
-                aria-label={getEditToggleToolTipText()}
-                isDisabled={!canUserWrite}
-              />
-            </EuiToolTip>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <RefreshControl />
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <FullscreenControl>{fullscreenButton}</FullscreenControl>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  );
-};
+interface DispatchProps {
+  setWriteable: (isWorkpadWriteable: boolean) => void;
+}
 
-WorkpadHeader.propTypes = {
-  isWriteable: PropTypes.bool,
-  toggleWriteable: PropTypes.func,
-  canUserWrite: PropTypes.bool,
-};
+const mapStateToProps = (state: State): StateProps => ({
+  isWriteable: isWriteable(state) && canUserWrite(state),
+  canUserWrite: canUserWrite(state),
+  selectedPage: getSelectedPage(state),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch) => ({
+  setWriteable: (isWorkpadWriteable: boolean) => dispatch(setWriteable(isWorkpadWriteable)),
+});
+
+const mergeProps = (
+  stateProps: StateProps,
+  dispatchProps: DispatchProps,
+  ownProps: ComponentProps
+): ComponentProps => ({
+  ...stateProps,
+  ...dispatchProps,
+  ...ownProps,
+  toggleWriteable: () => dispatchProps.setWriteable(!stateProps.isWriteable),
+});
+
+export const WorkpadHeader = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Component);
diff --git a/x-pack/plugins/canvas/storybook/storyshots.test.js b/x-pack/plugins/canvas/storybook/storyshots.test.js
index b6a3b4d43027f..6a275f3edfd2a 100644
--- a/x-pack/plugins/canvas/storybook/storyshots.test.js
+++ b/x-pack/plugins/canvas/storybook/storyshots.test.js
@@ -73,7 +73,7 @@ jest.mock('@elastic/eui/lib/components/overlay_mask/overlay_mask', () => {
 
 // Disabling this test due to https://github.com/elastic/eui/issues/2242
 jest.mock(
-  '../public/components/workpad_header/share_menu/flyout/__stories__/share_website_flyout.stories',
+  '../public/components/workpad_header/share_menu/flyout/__stories__/flyout.stories',
   () => {
     return 'Disabled Panel';
   }
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.test.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.test.ts
index 04aeba41fa00d..ca4fc0abc37a4 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.test.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.test.ts
@@ -157,6 +157,25 @@ describe('createTSVBLink()', () => {
     });
   });
 
+  it('should use the workaround index pattern when there are multiple listed in the source', () => {
+    const customSource = {
+      ...source,
+      metricAlias: 'my-beats-*,metrics-*',
+      fields: { ...source.fields, timestamp: 'time' },
+    };
+    const link = createTSVBLink(customSource, options, series, timeRange, chartOptions);
+    expect(link).toStrictEqual({
+      app: 'visualize',
+      hash: '/create',
+      search: {
+        _a:
+          "(filters:!(),linked:!f,query:(language:kuery,query:''),uiState:(),vis:(aggs:!(),params:(axis_formatter:number,axis_min:0,axis_position:left,axis_scale:normal,default_index_pattern:'metric*',filter:(language:kuery,query:'host.name : \"example-01\"'),id:test-id,index_pattern:'metric*',interval:auto,series:!((axis_position:right,chart_type:line,color:#6092C0,fill:0,formatter:percent,id:test-id,label:'avg(system.cpu.user.pct)',line_width:2,metrics:!((field:system.cpu.user.pct,id:test-id,type:avg)),point_size:0,separate_axis:0,split_mode:everything,stacked:none,value_template:{{value}})),show_grid:1,show_legend:1,time_field:time,type:timeseries),title:example-01,type:metrics))",
+        _g: '(refreshInterval:(pause:!t,value:0),time:(from:now-1h,to:now))',
+        type: 'metrics',
+      },
+    });
+  });
+
   test('createFilterFromOptions()', () => {
     const customOptions = { ...options, groupBy: 'host.name' };
     const customSeries = { ...series, id: 'test"foo' };
diff --git a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.ts b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.ts
index 3afc0d050e736..afddaf6621f10 100644
--- a/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/helpers/create_tsvb_link.ts
@@ -23,6 +23,14 @@ import { SourceQuery } from '../../../../../graphql/types';
 import { createMetricLabel } from './create_metric_label';
 import { LinkDescriptor } from '../../../../../hooks/use_link_props';
 
+/*
+ We've recently changed the default index pattern in Metrics UI from `metricbeat-*` to 
+ `metrics-*,metricbeat-*`. There is a bug in TSVB when there is an empty index in the pattern
+ the field dropdowns are not populated correctly. This index pattern is a temporary fix.
+ See: https://github.com/elastic/kibana/issues/73987 
+*/
+const TSVB_WORKAROUND_INDEX_PATTERN = 'metric*';
+
 export const metricsExplorerMetricToTSVBMetric = (metric: MetricsExplorerOptionsMetric) => {
   if (metric.aggregation === 'rate') {
     const metricId = uuid.v1();
@@ -128,6 +136,13 @@ export const createFilterFromOptions = (
   return { language: 'kuery', query: filters.join(' and ') };
 };
 
+const createTSVBIndexPattern = (alias: string) => {
+  if (alias.split(',').length > 1) {
+    return TSVB_WORKAROUND_INDEX_PATTERN;
+  }
+  return alias;
+};
+
 export const createTSVBLink = (
   source: SourceQuery.Query['source']['configuration'] | undefined,
   options: MetricsExplorerOptions,
@@ -135,6 +150,9 @@ export const createTSVBLink = (
   timeRange: MetricsExplorerTimeOptions,
   chartOptions: MetricsExplorerChartOptions
 ): LinkDescriptor => {
+  const tsvbIndexPattern = createTSVBIndexPattern(
+    (source && source.metricAlias) || TSVB_WORKAROUND_INDEX_PATTERN
+  );
   const appState = {
     filters: [],
     linked: false,
@@ -147,8 +165,8 @@ export const createTSVBLink = (
         axis_position: 'left',
         axis_scale: 'normal',
         id: uuid.v1(),
-        default_index_pattern: (source && source.metricAlias) || 'metricbeat-*',
-        index_pattern: (source && source.metricAlias) || 'metricbeat-*',
+        default_index_pattern: tsvbIndexPattern,
+        index_pattern: tsvbIndexPattern,
         interval: 'auto',
         series: options.metrics.map(mapMetricToSeries(chartOptions)),
         show_grid: 1,
diff --git a/x-pack/plugins/ingest_manager/common/types/index.ts b/x-pack/plugins/ingest_manager/common/types/index.ts
index 7acef263f973a..69bcc498c18be 100644
--- a/x-pack/plugins/ingest_manager/common/types/index.ts
+++ b/x-pack/plugins/ingest_manager/common/types/index.ts
@@ -22,7 +22,8 @@ export interface IngestManagerConfigType {
       host?: string;
       ca_sha256?: string;
     };
-    agentConfigRolloutConcurrency: number;
+    agentConfigRolloutRateLimitIntervalMs: number;
+    agentConfigRolloutRateLimitRequestPerInterval: number;
   };
 }
 
diff --git a/x-pack/plugins/ingest_manager/dev_docs/definitions.md b/x-pack/plugins/ingest_manager/dev_docs/definitions.md
index a33d95f3afa38..bd20780611055 100644
--- a/x-pack/plugins/ingest_manager/dev_docs/definitions.md
+++ b/x-pack/plugins/ingest_manager/dev_docs/definitions.md
@@ -10,7 +10,7 @@ This section is to define terms used across ingest management.
 A package config is a definition on how to collect data from a service, for example `nginx`. A package config contains
 definitions for one or multiple inputs and each input can contain one or multiple streams.
 
-With the example of the nginx Package Config, it contains to inputs: `logs` and `nginx/metrics`. Logs and metrics are collected
+With the example of the nginx Package Config, 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
diff --git a/x-pack/plugins/ingest_manager/server/index.ts b/x-pack/plugins/ingest_manager/server/index.ts
index 6f8c4948559d3..e2f659f54d625 100644
--- a/x-pack/plugins/ingest_manager/server/index.ts
+++ b/x-pack/plugins/ingest_manager/server/index.ts
@@ -35,7 +35,8 @@ export const config = {
         host: schema.maybe(schema.string()),
         ca_sha256: schema.maybe(schema.string()),
       }),
-      agentConfigRolloutConcurrency: schema.number({ defaultValue: 10 }),
+      agentConfigRolloutRateLimitIntervalMs: schema.number({ defaultValue: 5000 }),
+      agentConfigRolloutRateLimitRequestPerInterval: schema.number({ defaultValue: 5 }),
     }),
   }),
 };
diff --git a/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.test.ts b/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.test.ts
index f84f417ce402d..e5b5a83743287 100644
--- a/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.test.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.test.ts
@@ -39,7 +39,7 @@ describe('registerLimitedConcurrencyRoutes', () => {
 });
 
 // assertions for calls to .decrease are commented out because it's called on the
-// "req.events.aborted$ observable (which) will never emit from a mocked request in a jest unit test environment"
+// "req.events.completed$ observable (which) will never emit from a mocked request in a jest unit test environment"
 // https://github.com/elastic/kibana/pull/72338#issuecomment-661908791
 describe('preAuthHandler', () => {
   test(`ignores routes when !isMatch`, async () => {
diff --git a/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.ts b/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.ts
index 11fdc944e031d..7ba8e151b726c 100644
--- a/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.ts
+++ b/x-pack/plugins/ingest_manager/server/routes/limited_concurrency.ts
@@ -66,9 +66,7 @@ export function createLimitedPreAuthHandler({
 
     maxCounter.increase();
 
-    // requests.events.aborted$ has a bug (but has test which explicitly verifies) where it's fired even when the request completes
-    // https://github.com/elastic/kibana/pull/70495#issuecomment-656288766
-    request.events.aborted$.toPromise().then(() => {
+    request.events.completed$.toPromise().then(() => {
       maxCounter.decrease();
     });
 
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.test.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.test.ts
deleted file mode 100644
index 70207dcf325c4..0000000000000
--- a/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.test.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import * as Rx from 'rxjs';
-import { share } from 'rxjs/operators';
-import { createSubscriberConcurrencyLimiter } from './rxjs_utils';
-
-function createSpyObserver(o: Rx.Observable<any>): [Rx.Subscription, jest.Mock] {
-  const spy = jest.fn();
-  const observer = o.subscribe(spy);
-  return [observer, spy];
-}
-
-describe('createSubscriberConcurrencyLimiter', () => {
-  it('should not publish to more than n concurrent subscriber', async () => {
-    const subject = new Rx.Subject<any>();
-    const sharedObservable = subject.pipe(share());
-
-    const limiter = createSubscriberConcurrencyLimiter(2);
-
-    const [observer1, spy1] = createSpyObserver(sharedObservable.pipe(limiter()));
-    const [observer2, spy2] = createSpyObserver(sharedObservable.pipe(limiter()));
-    const [observer3, spy3] = createSpyObserver(sharedObservable.pipe(limiter()));
-    const [observer4, spy4] = createSpyObserver(sharedObservable.pipe(limiter()));
-    subject.next('test1');
-
-    expect(spy1).toBeCalled();
-    expect(spy2).toBeCalled();
-    expect(spy3).not.toBeCalled();
-    expect(spy4).not.toBeCalled();
-
-    observer1.unsubscribe();
-    expect(spy3).toBeCalled();
-    expect(spy4).not.toBeCalled();
-
-    observer2.unsubscribe();
-    expect(spy4).toBeCalled();
-
-    observer3.unsubscribe();
-    observer4.unsubscribe();
-  });
-});
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
index dc0ed35207e46..dddade6841460 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/rxjs_utils.ts
@@ -43,23 +43,37 @@ export const toPromiseAbortable = <T>(
     }
   });
 
-export function createSubscriberConcurrencyLimiter(maxConcurrency: number) {
-  let observers: Array<[Rx.Subscriber<any>, any]> = [];
-  let activeObservers: Array<Rx.Subscriber<any>> = [];
+export function createRateLimiter(
+  ratelimitIntervalMs: number,
+  ratelimitRequestPerInterval: number
+) {
+  function createCurrentInterval() {
+    return {
+      startedAt: Rx.asyncScheduler.now(),
+      numRequests: 0,
+    };
+  }
 
-  function processNext() {
-    if (activeObservers.length >= maxConcurrency) {
-      return;
-    }
-    const observerValuePair = observers.shift();
+  let currentInterval: { startedAt: number; numRequests: number } = createCurrentInterval();
+  let observers: Array<[Rx.Subscriber<any>, any]> = [];
+  let timerSubscription: Rx.Subscription | undefined;
 
-    if (!observerValuePair) {
+  function createTimeout() {
+    if (timerSubscription) {
       return;
     }
-
-    const [observer, value] = observerValuePair;
-    activeObservers.push(observer);
-    observer.next(value);
+    timerSubscription = Rx.asyncScheduler.schedule(() => {
+      timerSubscription = undefined;
+      currentInterval = createCurrentInterval();
+      for (const [waitingObserver, value] of observers) {
+        if (currentInterval.numRequests >= ratelimitRequestPerInterval) {
+          createTimeout();
+          continue;
+        }
+        currentInterval.numRequests++;
+        waitingObserver.next(value);
+      }
+    }, ratelimitIntervalMs);
   }
 
   return function limit<T>(): Rx.MonoTypeOperatorFunction<T> {
@@ -67,8 +81,14 @@ export function createSubscriberConcurrencyLimiter(maxConcurrency: number) {
       new Rx.Observable<T>((observer) => {
         const subscription = observable.subscribe({
           next(value) {
+            if (currentInterval.numRequests < ratelimitRequestPerInterval) {
+              currentInterval.numRequests++;
+              observer.next(value);
+              return;
+            }
+
             observers = [...observers, [observer, value]];
-            processNext();
+            createTimeout();
           },
           error(err) {
             observer.error(err);
@@ -79,10 +99,8 @@ export function createSubscriberConcurrencyLimiter(maxConcurrency: number) {
         });
 
         return () => {
-          activeObservers = activeObservers.filter((o) => o !== observer);
           observers = observers.filter((o) => o[0] !== observer);
           subscription.unsubscribe();
-          processNext();
         };
       });
   };
diff --git a/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
index 53270afe453c4..1547b6b5ea053 100644
--- a/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
+++ b/x-pack/plugins/ingest_manager/server/services/agents/checkin/state_new_actions.ts
@@ -28,7 +28,7 @@ import * as APIKeysService from '../../api_keys';
 import { AGENT_SAVED_OBJECT_TYPE, AGENT_UPDATE_ACTIONS_INTERVAL_MS } from '../../../constants';
 import { createAgentAction, getNewActionsSince } from '../actions';
 import { appContextService } from '../../app_context';
-import { toPromiseAbortable, AbortError, createSubscriberConcurrencyLimiter } from './rxjs_utils';
+import { toPromiseAbortable, AbortError, createRateLimiter } from './rxjs_utils';
 
 function getInternalUserSOClient() {
   const fakeRequest = ({
@@ -134,8 +134,9 @@ export function agentCheckinStateNewActionsFactory() {
   const agentConfigs$ = new Map<string, Observable<FullAgentConfig | null>>();
   const newActions$ = createNewActionsSharedObservable();
   // Rx operators
-  const concurrencyLimiter = createSubscriberConcurrencyLimiter(
-    appContextService.getConfig()?.fleet.agentConfigRolloutConcurrency ?? 10
+  const rateLimiter = createRateLimiter(
+    appContextService.getConfig()?.fleet.agentConfigRolloutRateLimitIntervalMs ?? 5000,
+    appContextService.getConfig()?.fleet.agentConfigRolloutRateLimitRequestPerInterval ?? 50
   );
 
   async function subscribeToNewActions(
@@ -158,7 +159,7 @@ export function agentCheckinStateNewActionsFactory() {
     const stream$ = agentConfig$.pipe(
       timeout(appContextService.getConfig()?.fleet.pollingRequestTimeout || 0),
       filter((config) => shouldCreateAgentConfigAction(agent, config)),
-      concurrencyLimiter(),
+      rateLimiter(),
       mergeMap((config) => createAgentActionFromConfig(soClient, agent, config)),
       merge(newActions$),
       mergeMap(async (data) => {
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 a72f4f429a1be..b30a586487009 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.test.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.test.tsx
@@ -249,6 +249,27 @@ describe('Lens App', () => {
     expect(defaultArgs.data.query.filterManager.setAppFilters).toHaveBeenCalledWith([]);
   });
 
+  it('passes global filters to frame', async () => {
+    const args = makeDefaultArgs();
+    args.editorFrame = frame;
+    const indexPattern = ({ id: 'index1' } as unknown) as IIndexPattern;
+    const pinnedField = ({ name: 'pinnedField' } as unknown) as IFieldType;
+    const pinnedFilter = esFilters.buildExistsFilter(pinnedField, indexPattern);
+    args.data.query.filterManager.getFilters = jest.fn().mockImplementation(() => {
+      return [pinnedFilter];
+    });
+    const component = mount(<App {...args} />);
+    component.update();
+    expect(frame.mount).toHaveBeenCalledWith(
+      expect.any(Element),
+      expect.objectContaining({
+        dateRange: { fromDate: 'now-7d', toDate: 'now' },
+        query: { query: '', language: 'kuery' },
+        filters: [pinnedFilter],
+      })
+    );
+  });
+
   it('sets breadcrumbs when the document title changes', async () => {
     const defaultArgs = makeDefaultArgs();
     instance = mount(<App {...defaultArgs} />);
diff --git a/x-pack/plugins/lens/public/app_plugin/app.tsx b/x-pack/plugins/lens/public/app_plugin/app.tsx
index 2a7eaff32fa08..ab4c4820315ac 100644
--- a/x-pack/plugins/lens/public/app_plugin/app.tsx
+++ b/x-pack/plugins/lens/public/app_plugin/app.tsx
@@ -94,7 +94,7 @@ export function App({
         toDate: currentRange.to,
       },
       originatingApp,
-      filters: [],
+      filters: data.query.filterManager.getFilters(),
       indicateNoData: false,
     };
   });
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/details_step/details_step_form.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/details_step/details_step_form.tsx
index 0ac237bb33e76..1d6a603caa817 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/details_step/details_step_form.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/details_step/details_step_form.tsx
@@ -44,7 +44,7 @@ export const DetailsStepForm: FC<CreateAnalyticsStepProps> = ({
   const { ELASTIC_WEBSITE_URL, DOC_LINK_VERSION } = docLinks;
 
   const { setFormState } = actions;
-  const { form, cloneJob, isJobCreated } = state;
+  const { form, cloneJob, hasSwitchedToEditor, isJobCreated } = state;
   const {
     createIndexPattern,
     description,
@@ -61,7 +61,9 @@ export const DetailsStepForm: FC<CreateAnalyticsStepProps> = ({
     resultsField,
   } = form;
 
-  const [destIndexSameAsId, setDestIndexSameAsId] = useState<boolean>(cloneJob === undefined);
+  const [destIndexSameAsId, setDestIndexSameAsId] = useState<boolean>(
+    cloneJob === undefined && hasSwitchedToEditor === false
+  );
 
   const forceInput = useRef<HTMLInputElement | null>(null);
 
@@ -90,7 +92,11 @@ export const DetailsStepForm: FC<CreateAnalyticsStepProps> = ({
   useEffect(() => {
     if (destinationIndexNameValid === true) {
       debouncedIndexCheck();
-    } else if (destinationIndex.trim() === '' && destinationIndexNameExists === true) {
+    } else if (
+      typeof destinationIndex === 'string' &&
+      destinationIndex.trim() === '' &&
+      destinationIndexNameExists === true
+    ) {
       setFormState({ destinationIndexNameExists: false });
     }
 
@@ -102,7 +108,7 @@ export const DetailsStepForm: FC<CreateAnalyticsStepProps> = ({
   useEffect(() => {
     if (destIndexSameAsId === true && !jobIdEmpty && jobIdValid) {
       setFormState({ destinationIndex: jobId });
-    } else if (destIndexSameAsId === false) {
+    } else if (destIndexSameAsId === false && hasSwitchedToEditor === false) {
       setFormState({ destinationIndex: '' });
     }
   }, [destIndexSameAsId, jobId]);
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/page.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/page.tsx
index 04dd25896d443..2f0e2ed3428c0 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/page.tsx
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/page.tsx
@@ -6,7 +6,6 @@
 
 import React, { FC, useEffect, useState } from 'react';
 import {
-  EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -16,7 +15,7 @@ import {
   EuiSpacer,
   EuiSteps,
   EuiStepStatus,
-  EuiText,
+  EuiSwitch,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -48,9 +47,15 @@ export const Page: FC<Props> = ({ jobId }) => {
   const { currentIndexPattern } = mlContext;
 
   const createAnalyticsForm = useCreateAnalyticsForm();
-  const { isAdvancedEditorEnabled } = createAnalyticsForm.state;
-  const { jobType } = createAnalyticsForm.state.form;
-  const { initiateWizard, setJobClone, switchToAdvancedEditor } = createAnalyticsForm.actions;
+  const { state } = createAnalyticsForm;
+  const { isAdvancedEditorEnabled, disableSwitchToForm } = state;
+  const { jobType } = state.form;
+  const {
+    initiateWizard,
+    setJobClone,
+    switchToAdvancedEditor,
+    switchToForm,
+  } = createAnalyticsForm.actions;
 
   useEffect(() => {
     initiateWizard();
@@ -170,34 +175,40 @@ export const Page: FC<Props> = ({ jobId }) => {
                 </EuiFlexItem>
               </EuiFlexGroup>
             </EuiFlexItem>
-            {isAdvancedEditorEnabled === false && (
-              <EuiFlexItem grow={false}>
-                <EuiFormRow
-                  helpText={i18n.translate(
-                    'xpack.ml.dataframe.analytics.create.enableJsonEditorHelpText',
+
+            <EuiFlexItem grow={false}>
+              <EuiFormRow
+                helpText={
+                  disableSwitchToForm &&
+                  i18n.translate(
+                    'xpack.ml.dataframe.analytics.create.jsonEditorDisabledSwitchText',
+                    {
+                      defaultMessage:
+                        'Configuration contains advanced fields not supported by the form. You cannot switch back to the form.',
+                    }
+                  )
+                }
+              >
+                <EuiSwitch
+                  disabled={jobType === undefined || disableSwitchToForm}
+                  label={i18n.translate(
+                    'xpack.ml.dataframe.analytics.create.switchToJsonEditorSwitch',
                     {
-                      defaultMessage: 'You cannot switch back to this form from the json editor.',
+                      defaultMessage: 'Switch to json editor',
                     }
                   )}
-                >
-                  <EuiButtonEmpty
-                    isDisabled={jobType === undefined}
-                    iconType="link"
-                    onClick={switchToAdvancedEditor}
-                    data-test-subj="mlAnalyticsCreateJobWizardAdvancedEditorSwitch"
-                  >
-                    <EuiText size="s" grow={false}>
-                      {i18n.translate(
-                        'xpack.ml.dataframe.analytics.create.switchToJsonEditorSwitch',
-                        {
-                          defaultMessage: 'Switch to json editor',
-                        }
-                      )}
-                    </EuiText>
-                  </EuiButtonEmpty>
-                </EuiFormRow>
-              </EuiFlexItem>
-            )}
+                  checked={isAdvancedEditorEnabled}
+                  onChange={(e) => {
+                    if (e.target.checked === true) {
+                      switchToAdvancedEditor();
+                    } else {
+                      switchToForm();
+                    }
+                  }}
+                  data-test-subj="mlAnalyticsCreateJobWizardAdvancedEditorSwitch"
+                />
+              </EuiFormRow>
+            </EuiFlexItem>
           </EuiFlexGroup>
           <EuiSpacer />
           {isAdvancedEditorEnabled === true && (
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/actions.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/actions.ts
index 4bfee9f308313..5f3045696f170 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/actions.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/actions.ts
@@ -25,6 +25,7 @@ export enum ACTION {
   SET_JOB_CONFIG,
   SET_JOB_IDS,
   SWITCH_TO_ADVANCED_EDITOR,
+  SWITCH_TO_FORM,
   SET_ESTIMATED_MODEL_MEMORY_LIMIT,
   SET_JOB_CLONE,
 }
@@ -38,7 +39,8 @@ export type Action =
         | ACTION.OPEN_MODAL
         | ACTION.RESET_ADVANCED_EDITOR_MESSAGES
         | ACTION.RESET_FORM
-        | ACTION.SWITCH_TO_ADVANCED_EDITOR;
+        | ACTION.SWITCH_TO_ADVANCED_EDITOR
+        | ACTION.SWITCH_TO_FORM;
     }
   // Actions with custom payloads:
   | { type: ACTION.ADD_REQUEST_MESSAGE; requestMessage: FormMessage }
@@ -71,6 +73,7 @@ export interface ActionDispatchers {
   setJobConfig: (payload: State['jobConfig']) => void;
   startAnalyticsJob: () => void;
   switchToAdvancedEditor: () => void;
+  switchToForm: () => void;
   setEstimatedModelMemoryLimit: (value: State['estimatedModelMemoryLimit']) => void;
   setJobClone: (cloneJob: DeepReadonly<DataFrameAnalyticsConfig>) => Promise<void>;
 }
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/reducer.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/reducer.ts
index acdaf15cdf4b7..8d8421a116b91 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/reducer.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/reducer.ts
@@ -8,13 +8,17 @@ import { i18n } from '@kbn/i18n';
 import { memoize } from 'lodash';
 // @ts-ignore
 import numeral from '@elastic/numeral';
-import { isEmpty } from 'lodash';
 import { isValidIndexName } from '../../../../../../../common/util/es_utils';
 
 import { collapseLiteralStrings } from '../../../../../../../../../../src/plugins/es_ui_shared/public';
 
 import { Action, ACTION } from './actions';
-import { getInitialState, getJobConfigFromFormState, State } from './state';
+import {
+  getInitialState,
+  getFormStateFromJobConfig,
+  getJobConfigFromFormState,
+  State,
+} from './state';
 import {
   isJobIdValid,
   validateModelMemoryLimitUnits,
@@ -41,6 +45,7 @@ import {
   TRAINING_PERCENT_MAX,
 } from '../../../../common/analytics';
 import { indexPatterns } from '../../../../../../../../../../src/plugins/data/public';
+import { isAdvancedConfig } from '../../components/action_clone/clone_button';
 
 const mmlAllowedUnitsStr = `${ALLOWED_DATA_UNITS.slice(0, ALLOWED_DATA_UNITS.length - 1).join(
   ', '
@@ -458,13 +463,16 @@ export function reducer(state: State, action: Action): State {
 
     case ACTION.SET_ADVANCED_EDITOR_RAW_STRING:
       let resultJobConfig;
+      let disableSwitchToForm = false;
       try {
         resultJobConfig = JSON.parse(collapseLiteralStrings(action.advancedEditorRawString));
+        disableSwitchToForm = isAdvancedConfig(resultJobConfig);
       } catch (e) {
         return {
           ...state,
           advancedEditorRawString: action.advancedEditorRawString,
           isAdvancedEditorValidJson: false,
+          disableSwitchToForm: true,
           advancedEditorMessages: [],
         };
       }
@@ -473,6 +481,7 @@ export function reducer(state: State, action: Action): State {
         ...validateAdvancedEditor({ ...state, jobConfig: resultJobConfig }),
         advancedEditorRawString: action.advancedEditorRawString,
         isAdvancedEditorValidJson: true,
+        disableSwitchToForm,
       };
 
     case ACTION.SET_FORM_STATE:
@@ -538,17 +547,53 @@ export function reducer(state: State, action: Action): State {
 
     case ACTION.SWITCH_TO_ADVANCED_EDITOR:
       let { jobConfig } = state;
-      const isJobConfigEmpty = isEmpty(state.jobConfig);
-      if (isJobConfigEmpty) {
-        jobConfig = getJobConfigFromFormState(state.form);
-      }
+      jobConfig = getJobConfigFromFormState(state.form);
+      const shouldDisableSwitchToForm = isAdvancedConfig(jobConfig);
+
       return validateAdvancedEditor({
         ...state,
         advancedEditorRawString: JSON.stringify(jobConfig, null, 2),
         isAdvancedEditorEnabled: true,
+        disableSwitchToForm: shouldDisableSwitchToForm,
+        hasSwitchedToEditor: true,
         jobConfig,
       });
 
+    case ACTION.SWITCH_TO_FORM:
+      const { jobConfig: config, jobIds } = state;
+      const { jobId } = state.form;
+      // @ts-ignore
+      const formState = getFormStateFromJobConfig(config, false);
+
+      if (typeof jobId === 'string' && jobId.trim() !== '') {
+        formState.jobId = jobId;
+      }
+
+      formState.jobIdExists = jobIds.some((id) => formState.jobId === id);
+      formState.jobIdEmpty = jobId === '';
+      formState.jobIdValid = isJobIdValid(jobId);
+      formState.jobIdInvalidMaxLength = !!maxLengthValidator(JOB_ID_MAX_LENGTH)(jobId);
+
+      formState.destinationIndexNameEmpty = formState.destinationIndex === '';
+      formState.destinationIndexNameValid = isValidIndexName(formState.destinationIndex || '');
+      formState.destinationIndexPatternTitleExists =
+        state.indexPatternsMap[formState.destinationIndex || ''] !== undefined;
+
+      if (formState.numTopFeatureImportanceValues !== undefined) {
+        formState.numTopFeatureImportanceValuesValid = validateNumTopFeatureImportanceValues(
+          formState.numTopFeatureImportanceValues
+        );
+      }
+
+      return validateForm({
+        ...state,
+        // @ts-ignore
+        form: formState,
+        isAdvancedEditorEnabled: false,
+        advancedEditorRawString: JSON.stringify(config, null, 2),
+        jobConfig: config,
+      });
+
     case ACTION.SET_ESTIMATED_MODEL_MEMORY_LIMIT:
       return {
         ...state,
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.test.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.test.ts
index d397dfc315da4..499318ebddc19 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.test.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.test.ts
@@ -4,11 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import {
-  getCloneFormStateFromJobConfig,
-  getInitialState,
-  getJobConfigFromFormState,
-} from './state';
+import { getFormStateFromJobConfig, getInitialState, getJobConfigFromFormState } from './state';
 
 const regJobConfig = {
   id: 'reg-test-01',
@@ -96,8 +92,8 @@ describe('useCreateAnalyticsForm', () => {
     ]);
   });
 
-  test('state: getCloneFormStateFromJobConfig() regression', () => {
-    const clonedState = getCloneFormStateFromJobConfig(regJobConfig);
+  test('state: getFormStateFromJobConfig() regression', () => {
+    const clonedState = getFormStateFromJobConfig(regJobConfig);
 
     expect(clonedState?.sourceIndex).toBe('reg-test-index');
     expect(clonedState?.includes).toStrictEqual([]);
@@ -112,8 +108,8 @@ describe('useCreateAnalyticsForm', () => {
     expect(clonedState?.jobId).toBe(undefined);
   });
 
-  test('state: getCloneFormStateFromJobConfig() outlier detection', () => {
-    const clonedState = getCloneFormStateFromJobConfig(outlierJobConfig);
+  test('state: getFormStateFromJobConfig() outlier detection', () => {
+    const clonedState = getFormStateFromJobConfig(outlierJobConfig);
 
     expect(clonedState?.sourceIndex).toBe('outlier-test-index');
     expect(clonedState?.includes).toStrictEqual(['field', 'other_field']);
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts
index 725fc8751408e..69599f43ef297 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/state.ts
@@ -12,6 +12,7 @@ import {
   DataFrameAnalyticsId,
   DataFrameAnalyticsConfig,
   ANALYSIS_CONFIG_TYPE,
+  defaultSearchQuery,
 } from '../../../../common/analytics';
 import { CloneDataFrameAnalyticsConfig } from '../../components/action_clone';
 
@@ -44,6 +45,7 @@ export interface FormMessage {
 export interface State {
   advancedEditorMessages: FormMessage[];
   advancedEditorRawString: string;
+  disableSwitchToForm: boolean;
   form: {
     computeFeatureInfluence: string;
     createIndexPattern: boolean;
@@ -97,6 +99,7 @@ export interface State {
   indexPatternsMap: SourceIndexMap;
   isAdvancedEditorEnabled: boolean;
   isAdvancedEditorValidJson: boolean;
+  hasSwitchedToEditor: boolean;
   isJobCreated: boolean;
   isJobStarted: boolean;
   isValid: boolean;
@@ -110,6 +113,7 @@ export interface State {
 export const getInitialState = (): State => ({
   advancedEditorMessages: [],
   advancedEditorRawString: '',
+  disableSwitchToForm: false,
   form: {
     computeFeatureInfluence: 'true',
     createIndexPattern: true,
@@ -131,7 +135,7 @@ export const getInitialState = (): State => ({
     jobIdInvalidMaxLength: false,
     jobIdValid: false,
     jobType: undefined,
-    jobConfigQuery: { match_all: {} },
+    jobConfigQuery: defaultSearchQuery,
     jobConfigQueryString: undefined,
     lambda: undefined,
     loadingFieldOptions: false,
@@ -167,6 +171,7 @@ export const getInitialState = (): State => ({
   indexPatternsMap: {},
   isAdvancedEditorEnabled: false,
   isAdvancedEditorValidJson: true,
+  hasSwitchedToEditor: false,
   isJobCreated: false,
   isJobStarted: false,
   isValid: false,
@@ -283,8 +288,9 @@ function toCamelCase(property: string): string {
  * Extracts form state for a job clone from the analytics job configuration.
  * For cloning we keep job id and destination index empty.
  */
-export function getCloneFormStateFromJobConfig(
-  analyticsJobConfig: Readonly<CloneDataFrameAnalyticsConfig>
+export function getFormStateFromJobConfig(
+  analyticsJobConfig: Readonly<CloneDataFrameAnalyticsConfig>,
+  isClone: boolean = true
 ): Partial<State['form']> {
   const jobType = Object.keys(analyticsJobConfig.analysis)[0] as ANALYSIS_CONFIG_TYPE;
 
@@ -300,6 +306,10 @@ export function getCloneFormStateFromJobConfig(
     includes: analyticsJobConfig.analyzed_fields.includes,
   };
 
+  if (isClone === false) {
+    resultState.destinationIndex = analyticsJobConfig?.dest.index ?? '';
+  }
+
   const analysisConfig = analyticsJobConfig.analysis[jobType];
 
   for (const key in analysisConfig) {
diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
index 035610684d556..9612b9213d120 100644
--- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
+++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_management/hooks/use_create_analytics_form/use_create_analytics_form.ts
@@ -28,7 +28,7 @@ import {
   FormMessage,
   State,
   SourceIndexMap,
-  getCloneFormStateFromJobConfig,
+  getFormStateFromJobConfig,
 } from './state';
 
 import { ANALYTICS_STEPS } from '../../../analytics_creation/page';
@@ -283,6 +283,10 @@ export const useCreateAnalyticsForm = (): CreateAnalyticsFormProps => {
     dispatch({ type: ACTION.SWITCH_TO_ADVANCED_EDITOR });
   };
 
+  const switchToForm = () => {
+    dispatch({ type: ACTION.SWITCH_TO_FORM });
+  };
+
   const setEstimatedModelMemoryLimit = (value: State['estimatedModelMemoryLimit']) => {
     dispatch({ type: ACTION.SET_ESTIMATED_MODEL_MEMORY_LIMIT, value });
   };
@@ -294,7 +298,7 @@ export const useCreateAnalyticsForm = (): CreateAnalyticsFormProps => {
       setJobConfig(config);
       switchToAdvancedEditor();
     } else {
-      setFormState(getCloneFormStateFromJobConfig(config));
+      setFormState(getFormStateFromJobConfig(config));
       setEstimatedModelMemoryLimit(config.model_memory_limit);
     }
 
@@ -311,6 +315,7 @@ export const useCreateAnalyticsForm = (): CreateAnalyticsFormProps => {
     setJobConfig,
     startAnalyticsJob,
     switchToAdvancedEditor,
+    switchToForm,
     setEstimatedModelMemoryLimit,
     setJobClone,
   };
diff --git a/x-pack/plugins/ml/public/application/overview/components/sidebar.tsx b/x-pack/plugins/ml/public/application/overview/components/sidebar.tsx
index 119346ec8035a..903a3c467a38b 100644
--- a/x-pack/plugins/ml/public/application/overview/components/sidebar.tsx
+++ b/x-pack/plugins/ml/public/application/overview/components/sidebar.tsx
@@ -9,29 +9,12 @@ import { EuiFlexItem, EuiLink, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui
 import { FormattedMessage } from '@kbn/i18n/react';
 import { useMlKibana } from '../../contexts/kibana';
 
-const createJobLink = '#/jobs/new_job/step/index_or_search';
 const feedbackLink = 'https://www.elastic.co/community/';
 
 interface Props {
   createAnomalyDetectionJobDisabled: boolean;
 }
 
-function getCreateJobLink(createAnomalyDetectionJobDisabled: boolean) {
-  return createAnomalyDetectionJobDisabled === true ? (
-    <FormattedMessage
-      id="xpack.ml.overview.gettingStartedSectionCreateJob"
-      defaultMessage="creating a new job"
-    />
-  ) : (
-    <EuiLink href={createJobLink} target="blank">
-      <FormattedMessage
-        id="xpack.ml.overview.gettingStartedSectionCreateJob"
-        defaultMessage="creating a new job"
-      />
-    </EuiLink>
-  );
-}
-
 export const OverviewSideBar: FC<Props> = ({ createAnomalyDetectionJobDisabled }) => {
   const {
     services: {
@@ -59,7 +42,7 @@ export const OverviewSideBar: FC<Props> = ({ createAnomalyDetectionJobDisabled }
         <p>
           <FormattedMessage
             id="xpack.ml.overview.gettingStartedSectionText"
-            defaultMessage="Welcome to Machine Learning. Get started by reviewing our {docs} or {createJob}. We recommend using {transforms} to create feature indices for analytics jobs."
+            defaultMessage="Welcome to Machine Learning. Get started by reviewing our {docs} or creating a new job. We recommend using {transforms} to create feature indices for analytics jobs."
             values={{
               docs: (
                 <EuiLink href={docsLink} target="blank">
@@ -69,7 +52,6 @@ export const OverviewSideBar: FC<Props> = ({ createAnomalyDetectionJobDisabled }
                   />
                 </EuiLink>
               ),
-              createJob: getCreateJobLink(createAnomalyDetectionJobDisabled),
               transforms: (
                 <EuiLink href={transformsLink} target="blank">
                   <FormattedMessage
diff --git a/x-pack/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.test.js b/x-pack/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.test.js
index e56627369475b..083ebfb27fd51 100644
--- a/x-pack/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.test.js
+++ b/x-pack/plugins/monitoring/server/lib/setup/collection/__test__/get_collection_status.test.js
@@ -10,7 +10,12 @@ import { getCollectionStatus } from '..';
 import { getIndexPatterns } from '../../../cluster/get_index_patterns';
 
 const liveClusterUuid = 'a12';
-const mockReq = (searchResult = {}, securityEnabled = true, userHasPermissions = true) => {
+const mockReq = (
+  searchResult = {},
+  securityEnabled = true,
+  userHasPermissions = true,
+  securityErrorMessage = null
+) => {
   return {
     server: {
       newPlatform: {
@@ -37,12 +42,14 @@ const mockReq = (searchResult = {}, securityEnabled = true, userHasPermissions =
         },
       },
       plugins: {
-        xpack_main: {
+        monitoring: {
           info: {
-            isAvailable: () => true,
-            feature: () => ({
-              isEnabled: () => securityEnabled,
-            }),
+            getSecurityFeature: () => {
+              return {
+                isAvailable: securityEnabled,
+                isEnabled: securityEnabled,
+              };
+            },
           },
         },
         elasticsearch: {
@@ -61,6 +68,11 @@ const mockReq = (searchResult = {}, securityEnabled = true, userHasPermissions =
                   params &&
                   params.path === '/_security/user/_has_privileges'
                 ) {
+                  if (securityErrorMessage !== null) {
+                    return Promise.reject({
+                      message: securityErrorMessage,
+                    });
+                  }
                   return Promise.resolve({ has_all_requested: userHasPermissions });
                 }
                 if (type === 'transport.request' && params && params.path === '/_nodes') {
@@ -245,6 +257,34 @@ describe('getCollectionStatus', () => {
     expect(result.kibana.detected.doesExist).to.be(true);
   });
 
+  it('should work properly with an unknown security message', async () => {
+    const req = mockReq({ hits: { total: { value: 1 } } }, true, true, 'foobar');
+    const result = await getCollectionStatus(req, getIndexPatterns(req.server), liveClusterUuid);
+    expect(result._meta.hasPermissions).to.be(false);
+  });
+
+  it('should work properly with a known security message', async () => {
+    const req = mockReq(
+      { hits: { total: { value: 1 } } },
+      true,
+      true,
+      'no handler found for uri [/_security/user/_has_privileges] and method [POST]'
+    );
+    const result = await getCollectionStatus(req, getIndexPatterns(req.server), liveClusterUuid);
+    expect(result.kibana.detected.doesExist).to.be(true);
+  });
+
+  it('should work properly with another known security message', async () => {
+    const req = mockReq(
+      { hits: { total: { value: 1 } } },
+      true,
+      true,
+      'Invalid index name [_security]'
+    );
+    const result = await getCollectionStatus(req, getIndexPatterns(req.server), liveClusterUuid);
+    expect(result.kibana.detected.doesExist).to.be(true);
+  });
+
   it('should not work if the user does not have the necessary permissions', async () => {
     const req = mockReq({ hits: { total: { value: 1 } } }, true, false);
     const result = await getCollectionStatus(req, getIndexPatterns(req.server), liveClusterUuid);
diff --git a/x-pack/plugins/monitoring/server/lib/setup/collection/get_collection_status.js b/x-pack/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
index 607503673276b..81cdfd6ecd172 100644
--- a/x-pack/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
+++ b/x-pack/plugins/monitoring/server/lib/setup/collection/get_collection_status.js
@@ -233,6 +233,10 @@ function isBeatFromAPM(bucket) {
 }
 
 async function hasNecessaryPermissions(req) {
+  const securityFeature = req.server.plugins.monitoring.info.getSecurityFeature();
+  if (!securityFeature.isAvailable || !securityFeature.isEnabled) {
+    return true;
+  }
   try {
     const { callWithRequest } = req.server.plugins.elasticsearch.getCluster('data');
     const response = await callWithRequest(req, 'transport.request', {
@@ -250,6 +254,9 @@ async function hasNecessaryPermissions(req) {
     ) {
       return true;
     }
+    if (err.message.includes('Invalid index name [_security]')) {
+      return true;
+    }
     return false;
   }
 }
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/pre_packaged_rules/translations.ts b/x-pack/plugins/security_solution/public/detections/components/rules/pre_packaged_rules/translations.ts
index 49da7dbf6d514..9b0cec99b1b38 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/pre_packaged_rules/translations.ts
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/pre_packaged_rules/translations.ts
@@ -17,7 +17,7 @@ export const PRE_BUILT_MSG = i18n.translate(
   'xpack.securitySolution.detectionEngine.rules.prePackagedRules.emptyPromptMessage',
   {
     defaultMessage:
-      'Elastic Security comes with prebuilt detection rules that run in the background and create alerts when their conditions are met. By default, all prebuilt rules are disabled and you select which rules you want to activate.',
+      'Elastic Security comes with prebuilt detection rules that run in the background and create alerts when their conditions are met. By default, all prebuilt rules except the Elastic Endpoint Security rule are disabled. You can select additional rules you want to activate.',
   }
 );
 
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx
index 35816e82540d1..0f16cb99862a5 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx
@@ -70,7 +70,7 @@ export const RiskScoreField = ({
           {
             field: newField?.name ?? '',
             operator: 'equals',
-            value: undefined,
+            value: '',
             riskScore: undefined,
           },
         ],
diff --git a/x-pack/plugins/security_solution/public/management/common/routing.ts b/x-pack/plugins/security_solution/public/management/common/routing.ts
index 3636358ebe842..eeb1533f57a67 100644
--- a/x-pack/plugins/security_solution/public/management/common/routing.ts
+++ b/x-pack/plugins/security_solution/public/management/common/routing.ts
@@ -54,7 +54,8 @@ export const getHostListPath = (
 };
 
 export const getHostDetailsPath = (
-  props: { name: 'hostDetails' | 'hostPolicyResponse' } & HostDetailsUrlProps,
+  props: { name: 'hostDetails' | 'hostPolicyResponse' } & HostIndexUIQueryParams &
+    HostDetailsUrlProps,
   search?: string
 ) => {
   const { name, ...queryParams } = props;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
index 58442ab417b60..f91bba3e3125a 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.tsx
@@ -263,6 +263,7 @@ export const HostList = () => {
         render: (policy: HostInfo['metadata']['Endpoint']['policy']['applied'], item: HostInfo) => {
           const toRoutePath = getHostDetailsPath({
             name: 'hostPolicyResponse',
+            ...queryParams,
             selected_host: item.metadata.host.id,
           });
           const toRouteUrl = formatUrl(toRoutePath);
diff --git a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx
index 7a61427c56a3b..2a2354921a3d4 100644
--- a/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx
@@ -251,6 +251,20 @@ export class Simulator {
     return this.findInDOM('[data-test-subj="resolver:graph"]');
   }
 
+  /**
+   * The outer panel container.
+   */
+  public panelElement(): ReactWrapper {
+    return this.findInDOM('[data-test-subj="resolver:panel"]');
+  }
+
+  /**
+   * The panel content element (which may include tables, lists, other data depending on the view).
+   */
+  public panelContentElement(): ReactWrapper {
+    return this.findInDOM('[data-test-subj^="resolver:panel:"]');
+  }
+
   /**
    * Like `this.wrapper.find` but only returns DOM nodes.
    */
diff --git a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
index 9cb900736677e..f339d128944cc 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/clickthrough.test.tsx
@@ -63,6 +63,16 @@ describe('Resolver, when analyzing a tree that has 1 ancestor and 2 children', (
       expect(simulator.processNodeElements().length).toBe(3);
     });
 
+    it(`should have the default "process list" panel present`, async () => {
+      expect(simulator.panelElement().length).toBe(1);
+      expect(simulator.panelContentElement().length).toBe(1);
+      const testSubjectName = simulator
+        .panelContentElement()
+        .getDOMNode()
+        .getAttribute('data-test-subj');
+      expect(testSubjectName).toMatch(/process-list/g);
+    });
+
     describe("when the second child node's first button has been clicked", () => {
       beforeEach(() => {
         // Click the first button under the second child element.
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panel.tsx b/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
index 83d3930065da6..f378ab36bac94 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panel.tsx
@@ -220,7 +220,7 @@ PanelContent.displayName = 'PanelContent';
 
 export const Panel = memo(function Event({ className }: { className?: string }) {
   return (
-    <EuiPanel className={className}>
+    <EuiPanel className={className} data-test-subj="resolver:panel">
       <PanelContent />
     </EuiPanel>
   );
diff --git a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
index efb96cde431e5..8ca002ace26fe 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/panels/panel_content_process_list.tsx
@@ -187,7 +187,12 @@ export const ProcessListWithCounts = memo(function ProcessListWithCounts({
       <StyledBreadcrumbs breadcrumbs={crumbs} />
       {showWarning && <StyledLimitWarning numberDisplayed={numberOfProcesses} />}
       <EuiSpacer size="l" />
-      <EuiInMemoryTable<ProcessTableView> items={processTableView} columns={columns} sorting />
+      <EuiInMemoryTable<ProcessTableView>
+        data-test-subj="resolver:panel:process-list"
+        items={processTableView}
+        columns={columns}
+        sorting
+      />
     </>
   );
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx
index 6c1c88f511edb..75b6413bf08f9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/index.test.tsx
@@ -17,11 +17,25 @@ import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines_page';
 
 import { NotePreviews } from './note_previews';
 import { OPEN_TIMELINE_CLASS_NAME } from './helpers';
-import { TimelineTabsStyle } from './types';
 
 import { StatefulOpenTimeline } from '.';
+
 import { useGetAllTimeline, getAllTimeline } from '../../containers/all';
+
+import { useParams } from 'react-router-dom';
+import { TimelineType } from '../../../../common/types/timeline';
+
 jest.mock('../../../common/lib/kibana');
+jest.mock('../../../common/components/link_to');
+
+jest.mock('./helpers', () => {
+  const originalModule = jest.requireActual('./helpers');
+  return {
+    ...originalModule,
+    queryTimelineById: jest.fn(),
+  };
+});
+
 jest.mock('../../containers/all', () => {
   const originalModule = jest.requireActual('../../containers/all');
   return {
@@ -30,19 +44,21 @@ jest.mock('../../containers/all', () => {
     getAllTimeline: originalModule.getAllTimeline,
   };
 });
-jest.mock('./use_timeline_types', () => {
+
+jest.mock('react-router-dom', () => {
+  const originalModule = jest.requireActual('react-router-dom');
+
   return {
-    useTimelineTypes: jest.fn().mockReturnValue({
-      timelineType: 'default',
-      timelineTabs: <div data-test-subj="timeline-tab" />,
-      timelineFilters: <div data-test-subj="timeline-filter" />,
-    }),
+    ...originalModule,
+    useParams: jest.fn(),
+    useHistory: jest.fn().mockReturnValue([]),
   };
 });
 
 describe('StatefulOpenTimeline', () => {
   const title = 'All Timelines / Open Timelines';
   beforeEach(() => {
+    (useParams as jest.Mock).mockReturnValue({ tabName: TimelineType.default });
     ((useGetAllTimeline as unknown) as jest.Mock).mockReturnValue({
       fetchAllTimeline: jest.fn(),
       timelines: getAllTimeline(
@@ -433,10 +449,7 @@ describe('StatefulOpenTimeline', () => {
       });
     });
 
-    /**
-     * enable this test when createtTemplateTimeline is ready
-     */
-    test.skip('it renders the tabs', async () => {
+    test('it has the expected initial state for openTimeline - templateTimelineFilter', () => {
       const wrapper = mount(
         <TestProviders>
           <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
@@ -451,11 +464,27 @@ describe('StatefulOpenTimeline', () => {
         </TestProviders>
       );
 
-      await waitFor(() => {
-        expect(
-          wrapper.find(`[data-test-subj="timeline-${TimelineTabsStyle.tab}"]`).exists()
-        ).toEqual(true);
-      });
+      expect(wrapper.find('[data-test-subj="open-timeline-subtabs"]').exists()).toEqual(true);
+    });
+
+    test('it has the expected initial state for openTimelineModalBody - templateTimelineFilter', () => {
+      const wrapper = mount(
+        <TestProviders>
+          <MockedProvider mocks={mockOpenTimelineQueryResults} addTypename={false}>
+            <StatefulOpenTimeline
+              data-test-subj="stateful-timeline"
+              apolloClient={apolloClient}
+              isModal={true}
+              defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+              title={title}
+            />
+          </MockedProvider>
+        </TestProviders>
+      );
+
+      expect(wrapper.find('[data-test-subj="open-timeline-modal-body-filters"]').exists()).toEqual(
+        true
+      );
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
index 7d54bb2209850..55afe845cdfb3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/use_timeline_types.tsx
@@ -7,26 +7,31 @@ import React, { useState, useCallback, useMemo } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { EuiTabs, EuiTab, EuiSpacer, EuiFilterButton } from '@elastic/eui';
 
+import { noop } from 'lodash/fp';
 import { TimelineTypeLiteralWithNull, TimelineType } from '../../../../common/types/timeline';
 import { SecurityPageName } from '../../../app/types';
 import { getTimelineTabsUrl, useFormatUrl } from '../../../common/components/link_to';
 import * as i18n from './translations';
 import { TimelineTabsStyle, TimelineTab } from './types';
 
-export const useTimelineTypes = ({
-  defaultTimelineCount,
-  templateTimelineCount,
-}: {
+export interface UseTimelineTypesArgs {
   defaultTimelineCount?: number | null;
   templateTimelineCount?: number | null;
-}): {
+}
+
+export interface UseTimelineTypesResult {
   timelineType: TimelineTypeLiteralWithNull;
   timelineTabs: JSX.Element;
   timelineFilters: JSX.Element[];
-} => {
+}
+
+export const useTimelineTypes = ({
+  defaultTimelineCount,
+  templateTimelineCount,
+}: UseTimelineTypesArgs): UseTimelineTypesResult => {
   const history = useHistory();
   const { formatUrl, search: urlSearch } = useFormatUrl(SecurityPageName.timelines);
-  const { tabName } = useParams<{ pageName: string; tabName: string }>();
+  const { tabName } = useParams<{ pageName: SecurityPageName; tabName: string }>();
   const [timelineType, setTimelineTypes] = useState<TimelineTypeLiteralWithNull>(
     tabName === TimelineType.default || tabName === TimelineType.template ? tabName : null
   );
@@ -61,7 +66,7 @@ export const useTimelineTypes = ({
           timelineTabsStyle === TimelineTabsStyle.filter
             ? defaultTimelineCount ?? undefined
             : undefined,
-        onClick: goToTimeline,
+        onClick: timelineTabsStyle === TimelineTabsStyle.tab ? goToTimeline : noop,
       },
       {
         id: TimelineType.template,
@@ -76,7 +81,7 @@ export const useTimelineTypes = ({
           timelineTabsStyle === TimelineTabsStyle.filter
             ? templateTimelineCount ?? undefined
             : undefined,
-        onClick: goToTemplateTimeline,
+        onClick: timelineTabsStyle === TimelineTabsStyle.tab ? goToTemplateTimeline : noop,
       },
     ],
     [
@@ -106,7 +111,7 @@ export const useTimelineTypes = ({
   const timelineTabs = useMemo(() => {
     return (
       <>
-        <EuiTabs>
+        <EuiTabs data-test-subj="open-timeline-subtabs">
           {getFilterOrTabs(TimelineTabsStyle.tab).map((tab: TimelineTab) => (
             <EuiTab
               isSelected={tab.id === tabName}
@@ -131,6 +136,7 @@ export const useTimelineTypes = ({
   const timelineFilters = useMemo(() => {
     return getFilterOrTabs(TimelineTabsStyle.filter).map((tab: TimelineTab) => (
       <EuiFilterButton
+        data-test-subj="open-timeline-modal-body-filters"
         hasActiveFilters={tab.id === timelineType}
         key={`timeline-${TimelineTabsStyle.filter}-${tab.id}`}
         numFilters={tab.count}
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts
index c8adaa891610a..f4dc691f3d059 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.test.ts
@@ -9,6 +9,7 @@ import { Ecs } from '../../../../graphql/types';
 import {
   eventHasNotes,
   eventIsPinned,
+  getPinOnClick,
   getPinTooltip,
   stringifyEvent,
   isInvestigateInResolverActionEnabled,
@@ -298,4 +299,72 @@ describe('helpers', () => {
       expect(isInvestigateInResolverActionEnabled(data)).toBeFalsy();
     });
   });
+
+  describe('getPinOnClick', () => {
+    const eventId = 'abcd';
+
+    test('it invokes `onPinEvent` with the expected eventId when the event is NOT pinned, and allowUnpinning is true', () => {
+      const isEventPinned = false; // the event is NOT pinned
+      const allowUnpinning = true;
+      const onPinEvent = jest.fn();
+
+      getPinOnClick({
+        allowUnpinning,
+        eventId,
+        onPinEvent,
+        onUnPinEvent: jest.fn(),
+        isEventPinned,
+      });
+
+      expect(onPinEvent).toBeCalledWith(eventId);
+    });
+
+    test('it does NOT invoke `onPinEvent` when the event is NOT pinned, and allowUnpinning is false', () => {
+      const isEventPinned = false; // the event is NOT pinned
+      const allowUnpinning = false;
+      const onPinEvent = jest.fn();
+
+      getPinOnClick({
+        allowUnpinning,
+        eventId,
+        onPinEvent,
+        onUnPinEvent: jest.fn(),
+        isEventPinned,
+      });
+
+      expect(onPinEvent).not.toBeCalled();
+    });
+
+    test('it invokes `onUnPinEvent` with the expected eventId when the event is pinned, and allowUnpinning is true', () => {
+      const isEventPinned = true; // the event is pinned
+      const allowUnpinning = true;
+      const onUnPinEvent = jest.fn();
+
+      getPinOnClick({
+        allowUnpinning,
+        eventId,
+        onPinEvent: jest.fn(),
+        onUnPinEvent,
+        isEventPinned,
+      });
+
+      expect(onUnPinEvent).toBeCalledWith(eventId);
+    });
+
+    test('it does NOT invoke `onUnPinEvent` when the event is pinned, and allowUnpinning is false', () => {
+      const isEventPinned = true; // the event is pinned
+      const allowUnpinning = false;
+      const onUnPinEvent = jest.fn();
+
+      getPinOnClick({
+        allowUnpinning,
+        eventId,
+        onPinEvent: jest.fn(),
+        onUnPinEvent,
+        isEventPinned,
+      });
+
+      expect(onUnPinEvent).not.toBeCalled();
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
index 6a5e25632c29b..73b5a58ef7b65 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/helpers.ts
@@ -3,7 +3,8 @@
  * 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, isEmpty, noop } from 'lodash/fp';
+
+import { get, isEmpty } from 'lodash/fp';
 import { Dispatch } from 'redux';
 
 import { Ecs, TimelineItem, TimelineNonEcsData } from '../../../../graphql/types';
@@ -65,11 +66,16 @@ export const getPinOnClick = ({
   onPinEvent,
   onUnPinEvent,
   isEventPinned,
-}: GetPinOnClickParams): (() => void) => {
+}: GetPinOnClickParams) => {
   if (!allowUnpinning) {
-    return noop;
+    return;
+  }
+
+  if (isEventPinned) {
+    onUnPinEvent(eventId);
+  } else {
+    onPinEvent(eventId);
   }
-  return isEventPinned ? () => onUnPinEvent(eventId) : () => onPinEvent(eventId);
 };
 
 /**
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.test.tsx
index 657976e2f4787..2ca27ded86c9d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.test.tsx
@@ -4,7 +4,16 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getPinIcon } from './';
+import { mount } from 'enzyme';
+import React from 'react';
+
+import { TimelineType } from '../../../../../common/types/timeline';
+
+import { getPinIcon, Pin } from './';
+
+interface ButtonIcon {
+  isDisabled: boolean;
+}
 
 describe('pin', () => {
   describe('getPinRotation', () => {
@@ -16,4 +25,62 @@ describe('pin', () => {
       expect(getPinIcon(false)).toEqual('pin');
     });
   });
+
+  describe('disabled button behavior', () => {
+    test('the button is enabled when allowUnpinning is true, and timelineType is NOT `template` (the default)', () => {
+      const allowUnpinning = true;
+      const wrapper = mount(
+        <Pin allowUnpinning={allowUnpinning} onClick={jest.fn()} pinned={false} />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(false);
+    });
+
+    test('the button is disabled when allowUnpinning is false, and timelineType is NOT `template` (the default)', () => {
+      const allowUnpinning = false;
+      const wrapper = mount(
+        <Pin allowUnpinning={allowUnpinning} onClick={jest.fn()} pinned={false} />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+
+    test('the button is disabled when allowUnpinning is true, and timelineType is `template`', () => {
+      const allowUnpinning = true;
+      const timelineType = TimelineType.template;
+      const wrapper = mount(
+        <Pin
+          allowUnpinning={allowUnpinning}
+          onClick={jest.fn()}
+          pinned={false}
+          timelineType={timelineType}
+        />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+
+    test('the button is disabled when allowUnpinning is false, and timelineType is `template`', () => {
+      const allowUnpinning = false;
+      const timelineType = TimelineType.template;
+      const wrapper = mount(
+        <Pin
+          allowUnpinning={allowUnpinning}
+          onClick={jest.fn()}
+          pinned={false}
+          timelineType={timelineType}
+        />
+      );
+
+      expect(
+        (wrapper.find('[data-test-subj="pin"]').first().props() as ButtonIcon).isDisabled
+      ).toBe(true);
+    });
+  });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx
index 30fe8ae0ca1f6..27780c7754d00 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/pin/index.tsx
@@ -34,7 +34,7 @@ export const Pin = React.memo<Props>(
         iconSize={iconSize}
         iconType={getPinIcon(pinned)}
         onClick={onClick}
-        isDisabled={isTemplate}
+        isDisabled={isTemplate || !allowUnpinning}
       />
     );
   }
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
index b59f9e90f8e74..c22acf6ba7cc1 100644
--- a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
@@ -33,7 +33,7 @@ const TimelinesContainer = styled.div`
 export const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
 
 export const TimelinesPageComponent: React.FC = () => {
-  const { tabName } = useParams();
+  const { tabName } = useParams<{ pageName: SecurityPageName; tabName: string }>();
   const [importDataModalToggle, setImportDataModalToggle] = useState<boolean>(false);
   const onImportTimelineBtnClick = useCallback(() => {
     setImportDataModalToggle(true);
diff --git a/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.test.ts b/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.test.ts
new file mode 100644
index 0000000000000..1735c6473bb3a
--- /dev/null
+++ b/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.test.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 { filterIndexes } from './resolvers';
+
+describe('resolvers', () => {
+  test('it should filter single index that has an empty string', () => {
+    const emptyArray = filterIndexes(['']);
+    expect(emptyArray).toEqual([]);
+  });
+
+  test('it should filter single index that has blanks within it', () => {
+    const emptyArray = filterIndexes(['   ']);
+    expect(emptyArray).toEqual([]);
+  });
+
+  test('it should filter indexes that has an empty string and a valid index', () => {
+    const emptyArray = filterIndexes(['', 'valid-index']);
+    expect(emptyArray).toEqual(['valid-index']);
+  });
+
+  test('it should filter indexes that have blanks within them and a valid index', () => {
+    const emptyArray = filterIndexes(['   ', 'valid-index']);
+    expect(emptyArray).toEqual(['valid-index']);
+  });
+
+  test('it should filter single index that has _all within it', () => {
+    const emptyArray = filterIndexes(['_all']);
+    expect(emptyArray).toEqual([]);
+  });
+
+  test('it should filter single index that has _all within it surrounded by spaces', () => {
+    const emptyArray = filterIndexes(['  _all  ']);
+    expect(emptyArray).toEqual([]);
+  });
+
+  test('it should filter indexes that _all within them and a valid index', () => {
+    const emptyArray = filterIndexes(['_all', 'valid-index']);
+    expect(emptyArray).toEqual(['valid-index']);
+  });
+
+  test('it should filter indexes that _all surrounded with spaces within them and a valid index', () => {
+    const emptyArray = filterIndexes(['  _all   ', 'valid-index']);
+    expect(emptyArray).toEqual(['valid-index']);
+  });
+});
diff --git a/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.ts b/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.ts
index 8d55e645d6791..84320b1699531 100644
--- a/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.ts
+++ b/x-pack/plugins/security_solution/server/graphql/source_status/resolvers.ts
@@ -32,27 +32,34 @@ export const createSourceStatusResolvers = (libs: {
   };
 } => ({
   SourceStatus: {
-    async indicesExist(source, args, { req }) {
-      if (
-        args.defaultIndex.length === 1 &&
-        (args.defaultIndex[0] === '' || args.defaultIndex[0] === '_all')
-      ) {
+    async indicesExist(_, args, { req }) {
+      const indexes = filterIndexes(args.defaultIndex);
+      if (indexes.length !== 0) {
+        return libs.sourceStatus.hasIndices(req, indexes);
+      } else {
         return false;
       }
-      return libs.sourceStatus.hasIndices(req, args.defaultIndex);
     },
-    async indexFields(source, args, { req }) {
-      if (
-        args.defaultIndex.length === 1 &&
-        (args.defaultIndex[0] === '' || args.defaultIndex[0] === '_all')
-      ) {
+    async indexFields(_, args, { req }) {
+      const indexes = filterIndexes(args.defaultIndex);
+      if (indexes.length !== 0) {
+        return libs.fields.getFields(req, indexes);
+      } else {
         return [];
       }
-      return libs.fields.getFields(req, args.defaultIndex);
     },
   },
 });
 
+/**
+ * Given a set of indexes this will remove anything that is:
+ *   - blank or empty strings are removed as not valid indexes
+ *   - _all is removed as that is not a valid index
+ * @param indexes Indexes with invalid values removed
+ */
+export const filterIndexes = (indexes: string[]): string[] =>
+  indexes.filter((index) => index.trim() !== '' && index.trim() !== '_all');
+
 export const toIFieldSubTypeNonNullableScalar = new GraphQLScalarType({
   name: 'IFieldSubType',
   description: 'Represents value in index pattern field item',
diff --git a/x-pack/plugins/security_solution/server/lib/index_fields/elasticsearch_adapter.ts b/x-pack/plugins/security_solution/server/lib/index_fields/elasticsearch_adapter.ts
index 944fc588afc8a..bb0a4b9e2ba9b 100644
--- a/x-pack/plugins/security_solution/server/lib/index_fields/elasticsearch_adapter.ts
+++ b/x-pack/plugins/security_solution/server/lib/index_fields/elasticsearch_adapter.ts
@@ -17,26 +17,21 @@ import {
 import { FrameworkAdapter, FrameworkRequest } from '../framework';
 import { FieldsAdapter, IndexFieldDescriptor } from './types';
 
-type IndexesAliasIndices = Record<string, string[]>;
-
 export class ElasticsearchIndexFieldAdapter implements FieldsAdapter {
   constructor(private readonly framework: FrameworkAdapter) {}
 
   public async getIndexFields(request: FrameworkRequest, indices: string[]): Promise<IndexField[]> {
     const indexPatternsService = this.framework.getIndexPatternsService(request);
-    const indexesAliasIndices: IndexesAliasIndices = indices.reduce(
-      (accumulator: IndexesAliasIndices, indice: string) => {
-        const key = getIndexAlias(indices, indice);
+    const indexesAliasIndices = indices.reduce<Record<string, string[]>>((accumulator, indice) => {
+      const key = getIndexAlias(indices, indice);
 
-        if (get(key, accumulator)) {
-          accumulator[key] = [...accumulator[key], indice];
-        } else {
-          accumulator[key] = [indice];
-        }
-        return accumulator;
-      },
-      {} as IndexesAliasIndices
-    );
+      if (get(key, accumulator)) {
+        accumulator[key] = [...accumulator[key], indice];
+      } else {
+        accumulator[key] = [indice];
+      }
+      return accumulator;
+    }, {});
     const responsesIndexFields: IndexFieldDescriptor[][] = await Promise.all(
       Object.values(indexesAliasIndices).map((indicesByGroup) =>
         indexPatternsService.getFieldsForWildcard({
diff --git a/x-pack/plugins/security_solution/server/utils/beat_schema/index.test.ts b/x-pack/plugins/security_solution/server/utils/beat_schema/index.test.ts
index 56ceca2b70e9c..5f002aa7fad7b 100644
--- a/x-pack/plugins/security_solution/server/utils/beat_schema/index.test.ts
+++ b/x-pack/plugins/security_solution/server/utils/beat_schema/index.test.ts
@@ -401,10 +401,17 @@ describe('Schema Beat', () => {
       const result = getIndexAlias([leadingWildcardIndex], leadingWildcardIndex);
       expect(result).toBe(leadingWildcardIndex);
     });
+
     test('getIndexAlias no match returns "unknown" string', () => {
       const index = 'auditbeat-*';
       const result = getIndexAlias([index], 'hello');
       expect(result).toBe('unknown');
     });
+
+    test('empty index should not cause an error to return although it will cause an invalid regular expression to occur', () => {
+      const index = '';
+      const result = getIndexAlias([index], 'hello');
+      expect(result).toBe('unknown');
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/server/utils/beat_schema/index.ts b/x-pack/plugins/security_solution/server/utils/beat_schema/index.ts
index ff7331cf39bc7..6ec15d328714d 100644
--- a/x-pack/plugins/security_solution/server/utils/beat_schema/index.ts
+++ b/x-pack/plugins/security_solution/server/utils/beat_schema/index.ts
@@ -77,10 +77,16 @@ const convertFieldsToAssociativeArray = (
     : {};
 
 export const getIndexAlias = (defaultIndex: string[], indexName: string): string => {
-  const found = defaultIndex.find((index) => `\\${indexName}`.match(`\\${index}`) != null);
-  if (found != null) {
-    return found;
-  } else {
+  try {
+    const found = defaultIndex.find((index) => `\\${indexName}`.match(`\\${index}`) != null);
+    if (found != null) {
+      return found;
+    } else {
+      return 'unknown';
+    }
+  } catch (error) {
+    // if we encounter an error because the index contains invalid regular expressions then we should return an unknown
+    // rather than blow up with a toaster error upstream
     return 'unknown';
   }
 };
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index c81aade2b063e..e2f59f3fa910a 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -11084,7 +11084,6 @@
     "xpack.ml.dataframe.analytics.create.detailsDetails.editButtonText": "編集",
     "xpack.ml.dataframe.analytics.create.duplicateIndexPatternErrorMessage": "Kibanaインデックスパターンの作成中にエラーが発生しました。",
     "xpack.ml.dataframe.analytics.create.duplicateIndexPatternErrorMessageError": "インデックスパターン{indexPatternName}はすでに作成されています。",
-    "xpack.ml.dataframe.analytics.create.enableJsonEditorHelpText": "JSONエディターからこのフォームには戻れません。",
     "xpack.ml.dataframe.analytics.create.errorCreatingDataFrameAnalyticsJob": "データフレーム分析ジョブの作成中にエラーが発生しました。",
     "xpack.ml.dataframe.analytics.create.errorGettingDataFrameAnalyticsList": "既存のデータフレーム分析ジョブIDの取得中にエラーが発生しました。",
     "xpack.ml.dataframe.analytics.create.errorGettingIndexPatternTitles": "既存のインデックスパターンのタイトルの取得中にエラーが発生しました。",
@@ -12362,9 +12361,7 @@
     "xpack.ml.overview.feedbackSectionLink": "オンラインでのフィードバック",
     "xpack.ml.overview.feedbackSectionText": "ご利用に際し、ご意見やご提案がありましたら、{feedbackLink}までお送りください。",
     "xpack.ml.overview.feedbackSectionTitle": "フィードバック",
-    "xpack.ml.overview.gettingStartedSectionCreateJob": "新規ジョブを作成中",
     "xpack.ml.overview.gettingStartedSectionDocs": "ドキュメンテーション",
-    "xpack.ml.overview.gettingStartedSectionText": "機械学習へようこそ。はじめに{docs}や{createJob}をご参照ください。{transforms}を使用して、分析ジョブの機能インデックスを作成することをお勧めします。",
     "xpack.ml.overview.gettingStartedSectionTitle": "はじめて使う",
     "xpack.ml.overview.gettingStartedSectionTransforms": "Elasticsearchの変換",
     "xpack.ml.overview.overviewLabel": "概要",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index aba5adf72c2f8..316d3247d19d5 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -11086,7 +11086,6 @@
     "xpack.ml.dataframe.analytics.create.detailsDetails.editButtonText": "编辑",
     "xpack.ml.dataframe.analytics.create.duplicateIndexPatternErrorMessage": "创建 Kibana 索引模式时发生错误：",
     "xpack.ml.dataframe.analytics.create.duplicateIndexPatternErrorMessageError": "索引模式 {indexPatternName} 已存在。",
-    "xpack.ml.dataframe.analytics.create.enableJsonEditorHelpText": "您不能从 json 编辑器切回到此表单。",
     "xpack.ml.dataframe.analytics.create.errorCreatingDataFrameAnalyticsJob": "创建数据帧分析作业时发生错误：",
     "xpack.ml.dataframe.analytics.create.errorGettingDataFrameAnalyticsList": "获取现有数据帧分析作业 ID 时发生错误：",
     "xpack.ml.dataframe.analytics.create.errorGettingIndexPatternTitles": "获取现有索引模式标题时发生错误：",
@@ -12365,9 +12364,7 @@
     "xpack.ml.overview.feedbackSectionLink": "在线反馈",
     "xpack.ml.overview.feedbackSectionText": "如果您在体验方面有任何意见或建议，请提交{feedbackLink}。",
     "xpack.ml.overview.feedbackSectionTitle": "反馈",
-    "xpack.ml.overview.gettingStartedSectionCreateJob": "创建新作业",
     "xpack.ml.overview.gettingStartedSectionDocs": "文档",
-    "xpack.ml.overview.gettingStartedSectionText": "欢迎使用 Machine Learning。首先阅读我们的{docs}或{createJob}。建议使用 {transforms} 为分析作业创建功能索引。",
     "xpack.ml.overview.gettingStartedSectionTitle": "入门",
     "xpack.ml.overview.gettingStartedSectionTransforms": "Elasticsearch 的转换",
     "xpack.ml.overview.overviewLabel": "概览",
diff --git a/x-pack/test/api_integration/apis/ml/annotations/common_jobs.ts b/x-pack/test/api_integration/apis/ml/annotations/common_jobs.ts
new file mode 100644
index 0000000000000..873cdc5d71baa
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/common_jobs.ts
@@ -0,0 +1,58 @@
+/*
+ * 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 { ANNOTATION_TYPE } from '../../../../../plugins/ml/common/constants/annotations';
+import { Annotation } from '../../../../../plugins/ml/common/types/annotations';
+
+export const commonJobConfig = {
+  description: 'test_job_annotation',
+  groups: ['farequote', 'automated', 'single-metric'],
+  analysis_config: {
+    bucket_span: '15m',
+    influencers: [],
+    detectors: [
+      {
+        function: 'mean',
+        field_name: 'responsetime',
+      },
+      {
+        function: 'min',
+        field_name: 'responsetime',
+      },
+    ],
+  },
+  data_description: { time_field: '@timestamp' },
+  analysis_limits: { model_memory_limit: '10mb' },
+};
+
+export const createJobConfig = (jobId: string) => {
+  return { ...commonJobConfig, job_id: jobId };
+};
+
+export const testSetupJobConfigs = [1, 2, 3, 4].map((num) => ({
+  ...commonJobConfig,
+  job_id: `job_annotation_${num}_${Date.now()}`,
+  description: `Test annotation ${num}`,
+}));
+export const jobIds = testSetupJobConfigs.map((j) => j.job_id);
+
+export const createAnnotationRequestBody = (jobId: string): Partial<Annotation> => {
+  return {
+    timestamp: Date.now(),
+    end_timestamp: Date.now(),
+    annotation: 'Test annotation',
+    job_id: jobId,
+    type: ANNOTATION_TYPE.ANNOTATION,
+    event: 'user',
+    detector_index: 1,
+    partition_field_name: 'airline',
+    partition_field_value: 'AAL',
+  };
+};
+
+export const testSetupAnnotations = testSetupJobConfigs.map((job) =>
+  createAnnotationRequestBody(job.job_id)
+);
diff --git a/x-pack/test/api_integration/apis/ml/annotations/create_annotations.ts b/x-pack/test/api_integration/apis/ml/annotations/create_annotations.ts
new file mode 100644
index 0000000000000..14ecf1bfe524e
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/create_annotations.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 expect from '@kbn/expect';
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { COMMON_REQUEST_HEADERS } from '../../../../functional/services/ml/common';
+import { USER } from '../../../../functional/services/ml/security_common';
+import { Annotation } from '../../../../../plugins/ml/common/types/annotations';
+import { createJobConfig, createAnnotationRequestBody } from './common_jobs';
+// eslint-disable-next-line import/no-default-export
+export default ({ getService }: FtrProviderContext) => {
+  const esArchiver = getService('esArchiver');
+  const supertest = getService('supertestWithoutAuth');
+  const ml = getService('ml');
+
+  const jobId = `job_annotation_${Date.now()}`;
+  const testJobConfig = createJobConfig(jobId);
+  const annotationRequestBody = createAnnotationRequestBody(jobId);
+
+  describe('create_annotations', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+      await ml.testResources.setKibanaTimeZoneToUTC();
+      await ml.api.createAnomalyDetectionJob(testJobConfig);
+    });
+
+    after(async () => {
+      await ml.api.cleanMlIndices();
+    });
+
+    it('should successfully create annotations for anomaly job', async () => {
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationRequestBody)
+        .expect(200);
+      const annotationId = body._id;
+
+      const fetchedAnnotation = await ml.api.getAnnotationById(annotationId);
+
+      expect(fetchedAnnotation).to.not.be(undefined);
+
+      if (fetchedAnnotation) {
+        Object.keys(annotationRequestBody).forEach((key) => {
+          const field = key as keyof Annotation;
+          expect(fetchedAnnotation[field]).to.eql(annotationRequestBody[field]);
+        });
+      }
+      expect(fetchedAnnotation?.create_username).to.eql(USER.ML_POWERUSER);
+    });
+
+    it('should successfully create annotation for user with ML read permissions', async () => {
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_VIEWER, ml.securityCommon.getPasswordForUser(USER.ML_VIEWER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationRequestBody)
+        .expect(200);
+
+      const annotationId = body._id;
+      const fetchedAnnotation = await ml.api.getAnnotationById(annotationId);
+      expect(fetchedAnnotation).to.not.be(undefined);
+      if (fetchedAnnotation) {
+        Object.keys(annotationRequestBody).forEach((key) => {
+          const field = key as keyof Annotation;
+          expect(fetchedAnnotation[field]).to.eql(annotationRequestBody[field]);
+        });
+      }
+      expect(fetchedAnnotation?.create_username).to.eql(USER.ML_VIEWER);
+    });
+
+    it('should not allow to create annotation for unauthorized user', async () => {
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_UNAUTHORIZED, ml.securityCommon.getPasswordForUser(USER.ML_UNAUTHORIZED))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationRequestBody)
+        .expect(404);
+
+      expect(body.error).to.eql('Not Found');
+      expect(body.message).to.eql('Not Found');
+    });
+  });
+};
diff --git a/x-pack/test/api_integration/apis/ml/annotations/delete_annotations.ts b/x-pack/test/api_integration/apis/ml/annotations/delete_annotations.ts
new file mode 100644
index 0000000000000..4fbb26e9b5a3e
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/delete_annotations.ts
@@ -0,0 +1,91 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { COMMON_REQUEST_HEADERS } from '../../../../functional/services/ml/common';
+import { USER } from '../../../../functional/services/ml/security_common';
+import { testSetupJobConfigs, jobIds, testSetupAnnotations } from './common_jobs';
+
+// eslint-disable-next-line import/no-default-export
+export default ({ getService }: FtrProviderContext) => {
+  const esArchiver = getService('esArchiver');
+  const supertest = getService('supertestWithoutAuth');
+  const ml = getService('ml');
+
+  describe('delete_annotations', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+      await ml.testResources.setKibanaTimeZoneToUTC();
+
+      // generate one annotation for each job
+      for (let i = 0; i < testSetupJobConfigs.length; i++) {
+        const job = testSetupJobConfigs[i];
+        const annotationToIndex = testSetupAnnotations[i];
+        await ml.api.createAnomalyDetectionJob(job);
+        await ml.api.indexAnnotation(annotationToIndex);
+      }
+    });
+
+    after(async () => {
+      await ml.api.cleanMlIndices();
+    });
+
+    it('should delete annotation by id', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[0]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const annotationIdToDelete = annotationsForJob[0]._id;
+
+      const { body } = await supertest
+        .delete(`/api/ml/annotations/delete/${annotationIdToDelete}`)
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .expect(200);
+
+      expect(body._id).to.eql(annotationIdToDelete);
+      expect(body.result).to.eql('deleted');
+
+      await ml.api.waitForAnnotationNotToExist(annotationIdToDelete);
+    });
+
+    it('should delete annotation by id for user with viewer permission', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[1]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const annotationIdToDelete = annotationsForJob[0]._id;
+
+      const { body } = await supertest
+        .delete(`/api/ml/annotations/delete/${annotationIdToDelete}`)
+        .auth(USER.ML_VIEWER, ml.securityCommon.getPasswordForUser(USER.ML_VIEWER))
+        .set(COMMON_REQUEST_HEADERS)
+        .expect(200);
+
+      expect(body._id).to.eql(annotationIdToDelete);
+      expect(body.result).to.eql('deleted');
+
+      await ml.api.waitForAnnotationNotToExist(annotationIdToDelete);
+    });
+
+    it('should not delete annotation for unauthorized user', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[2]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const annotationIdToDelete = annotationsForJob[0]._id;
+
+      const { body } = await supertest
+        .delete(`/api/ml/annotations/delete/${annotationIdToDelete}`)
+        .auth(USER.ML_UNAUTHORIZED, ml.securityCommon.getPasswordForUser(USER.ML_UNAUTHORIZED))
+        .set(COMMON_REQUEST_HEADERS)
+        .expect(404);
+
+      expect(body.error).to.eql('Not Found');
+      expect(body.message).to.eql('Not Found');
+
+      await ml.api.waitForAnnotationToExist(annotationIdToDelete);
+    });
+  });
+};
diff --git a/x-pack/test/api_integration/apis/ml/annotations/get_annotations.ts b/x-pack/test/api_integration/apis/ml/annotations/get_annotations.ts
new file mode 100644
index 0000000000000..710473eed6901
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/get_annotations.ts
@@ -0,0 +1,130 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { omit } from 'lodash';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { COMMON_REQUEST_HEADERS } from '../../../../functional/services/ml/common';
+import { USER } from '../../../../functional/services/ml/security_common';
+import { testSetupJobConfigs, jobIds, testSetupAnnotations } from './common_jobs';
+
+// eslint-disable-next-line import/no-default-export
+export default ({ getService }: FtrProviderContext) => {
+  const esArchiver = getService('esArchiver');
+  const supertest = getService('supertestWithoutAuth');
+  const ml = getService('ml');
+
+  describe('get_annotations', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+      await ml.testResources.setKibanaTimeZoneToUTC();
+
+      // generate one annotation for each job
+      for (let i = 0; i < testSetupJobConfigs.length; i++) {
+        const job = testSetupJobConfigs[i];
+        const annotationToIndex = testSetupAnnotations[i];
+        await ml.api.createAnomalyDetectionJob(job);
+        await ml.api.indexAnnotation(annotationToIndex);
+      }
+    });
+
+    after(async () => {
+      await ml.api.cleanMlIndices();
+    });
+
+    it('should fetch all annotations for jobId', async () => {
+      const requestBody = {
+        jobIds: [jobIds[0]],
+        earliestMs: 1454804100000,
+        latestMs: Date.now(),
+        maxAnnotations: 500,
+      };
+      const { body } = await supertest
+        .post('/api/ml/annotations')
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(requestBody)
+        .expect(200);
+
+      expect(body.success).to.eql(true);
+      expect(body.annotations).not.to.be(undefined);
+      [jobIds[0]].forEach((jobId, idx) => {
+        expect(body.annotations).to.have.property(jobId);
+        expect(body.annotations[jobId]).to.have.length(1);
+
+        const indexedAnnotation = omit(body.annotations[jobId][0], '_id');
+        expect(indexedAnnotation).to.eql(testSetupAnnotations[idx]);
+      });
+    });
+
+    it('should fetch all annotations for multiple jobs', async () => {
+      const requestBody = {
+        jobIds,
+        earliestMs: 1454804100000,
+        latestMs: Date.now(),
+        maxAnnotations: 500,
+      };
+      const { body } = await supertest
+        .post('/api/ml/annotations')
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(requestBody)
+        .expect(200);
+
+      expect(body.success).to.eql(true);
+      expect(body.annotations).not.to.be(undefined);
+      jobIds.forEach((jobId, idx) => {
+        expect(body.annotations).to.have.property(jobId);
+        expect(body.annotations[jobId]).to.have.length(1);
+
+        const indexedAnnotation = omit(body.annotations[jobId][0], '_id');
+        expect(indexedAnnotation).to.eql(testSetupAnnotations[idx]);
+      });
+    });
+
+    it('should fetch all annotations for user with ML read permissions', async () => {
+      const requestBody = {
+        jobIds: testSetupJobConfigs.map((j) => j.job_id),
+        earliestMs: 1454804100000,
+        latestMs: Date.now(),
+        maxAnnotations: 500,
+      };
+      const { body } = await supertest
+        .post('/api/ml/annotations')
+        .auth(USER.ML_VIEWER, ml.securityCommon.getPasswordForUser(USER.ML_VIEWER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(requestBody)
+        .expect(200);
+      expect(body.success).to.eql(true);
+      expect(body.annotations).not.to.be(undefined);
+      jobIds.forEach((jobId, idx) => {
+        expect(body.annotations).to.have.property(jobId);
+        expect(body.annotations[jobId]).to.have.length(1);
+
+        const indexedAnnotation = omit(body.annotations[jobId][0], '_id');
+        expect(indexedAnnotation).to.eql(testSetupAnnotations[idx]);
+      });
+    });
+
+    it('should not allow to fetch annotation for unauthorized user', async () => {
+      const requestBody = {
+        jobIds: testSetupJobConfigs.map((j) => j.job_id),
+        earliestMs: 1454804100000,
+        latestMs: Date.now(),
+        maxAnnotations: 500,
+      };
+      const { body } = await supertest
+        .post('/api/ml/annotations')
+        .auth(USER.ML_UNAUTHORIZED, ml.securityCommon.getPasswordForUser(USER.ML_UNAUTHORIZED))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(requestBody)
+        .expect(404);
+
+      expect(body.error).to.eql('Not Found');
+      expect(body.message).to.eql('Not Found');
+    });
+  });
+};
diff --git a/x-pack/test/api_integration/apis/ml/annotations/index.ts b/x-pack/test/api_integration/apis/ml/annotations/index.ts
new file mode 100644
index 0000000000000..7d73ee43d4d99
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/index.ts
@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { FtrProviderContext } from '../../../ftr_provider_context';
+
+export default function ({ loadTestFile }: FtrProviderContext) {
+  describe('annotations', function () {
+    loadTestFile(require.resolve('./create_annotations'));
+    loadTestFile(require.resolve('./get_annotations'));
+    loadTestFile(require.resolve('./delete_annotations'));
+    loadTestFile(require.resolve('./update_annotations'));
+  });
+}
diff --git a/x-pack/test/api_integration/apis/ml/annotations/update_annotations.ts b/x-pack/test/api_integration/apis/ml/annotations/update_annotations.ts
new file mode 100644
index 0000000000000..ba73617151120
--- /dev/null
+++ b/x-pack/test/api_integration/apis/ml/annotations/update_annotations.ts
@@ -0,0 +1,175 @@
+/*
+ * 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 expect from '@kbn/expect';
+import { FtrProviderContext } from '../../../ftr_provider_context';
+import { COMMON_REQUEST_HEADERS } from '../../../../functional/services/ml/common';
+import { USER } from '../../../../functional/services/ml/security_common';
+import { ANNOTATION_TYPE } from '../../../../../plugins/ml/common/constants/annotations';
+import { Annotation } from '../../../../../plugins/ml/common/types/annotations';
+import { testSetupJobConfigs, jobIds, testSetupAnnotations } from './common_jobs';
+
+// eslint-disable-next-line import/no-default-export
+export default ({ getService }: FtrProviderContext) => {
+  const esArchiver = getService('esArchiver');
+  const supertest = getService('supertestWithoutAuth');
+  const ml = getService('ml');
+
+  const commonAnnotationUpdateRequestBody: Partial<Annotation> = {
+    timestamp: Date.now(),
+    end_timestamp: Date.now(),
+    annotation: 'Updated annotation',
+    type: ANNOTATION_TYPE.ANNOTATION,
+    event: 'model_change',
+    detector_index: 2,
+    partition_field_name: 'airline',
+    partition_field_value: 'ANA',
+  };
+
+  describe('update_annotations', function () {
+    before(async () => {
+      await esArchiver.loadIfNeeded('ml/farequote');
+      await ml.testResources.setKibanaTimeZoneToUTC();
+
+      // generate one annotation for each job
+      for (let i = 0; i < testSetupJobConfigs.length; i++) {
+        const job = testSetupJobConfigs[i];
+        const annotationToIndex = testSetupAnnotations[i];
+        await ml.api.createAnomalyDetectionJob(job);
+        await ml.api.indexAnnotation(annotationToIndex);
+      }
+    });
+
+    after(async () => {
+      await ml.api.cleanMlIndices();
+    });
+
+    it('should correctly update annotation by id', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[0]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const originalAnnotation = annotationsForJob[0];
+      const annotationUpdateRequestBody = {
+        ...commonAnnotationUpdateRequestBody,
+        job_id: originalAnnotation._source.job_id,
+        _id: originalAnnotation._id,
+      };
+
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationUpdateRequestBody)
+        .expect(200);
+
+      expect(body._id).to.eql(originalAnnotation._id);
+      expect(body.result).to.eql('updated');
+
+      const updatedAnnotation = await ml.api.getAnnotationById(originalAnnotation._id);
+
+      if (updatedAnnotation) {
+        Object.keys(commonAnnotationUpdateRequestBody).forEach((key) => {
+          const field = key as keyof Annotation;
+          expect(updatedAnnotation[field]).to.eql(annotationUpdateRequestBody[field]);
+        });
+      }
+    });
+
+    it('should correctly update annotation for user with viewer permission', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[1]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const originalAnnotation = annotationsForJob[0];
+      const annotationUpdateRequestBody = {
+        ...commonAnnotationUpdateRequestBody,
+        job_id: originalAnnotation._source.job_id,
+        _id: originalAnnotation._id,
+      };
+
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_VIEWER, ml.securityCommon.getPasswordForUser(USER.ML_VIEWER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationUpdateRequestBody)
+        .expect(200);
+
+      expect(body._id).to.eql(originalAnnotation._id);
+      expect(body.result).to.eql('updated');
+
+      const updatedAnnotation = await ml.api.getAnnotationById(originalAnnotation._id);
+      if (updatedAnnotation) {
+        Object.keys(commonAnnotationUpdateRequestBody).forEach((key) => {
+          const field = key as keyof Annotation;
+          expect(updatedAnnotation[field]).to.eql(annotationUpdateRequestBody[field]);
+        });
+      }
+    });
+
+    it('should not update annotation for unauthorized user', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[2]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const originalAnnotation = annotationsForJob[0];
+
+      const annotationUpdateRequestBody = {
+        ...commonAnnotationUpdateRequestBody,
+        job_id: originalAnnotation._source.job_id,
+        _id: originalAnnotation._id,
+      };
+
+      const { body } = await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_UNAUTHORIZED, ml.securityCommon.getPasswordForUser(USER.ML_UNAUTHORIZED))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationUpdateRequestBody)
+        .expect(404);
+
+      expect(body.error).to.eql('Not Found');
+      expect(body.message).to.eql('Not Found');
+
+      const updatedAnnotation = await ml.api.getAnnotationById(originalAnnotation._id);
+      expect(updatedAnnotation).to.eql(originalAnnotation._source);
+    });
+
+    it('should override fields correctly', async () => {
+      const annotationsForJob = await ml.api.getAnnotations(jobIds[3]);
+      expect(annotationsForJob).to.have.length(1);
+
+      const originalAnnotation = annotationsForJob[0];
+      const annotationUpdateRequestBodyWithMissingFields: Partial<Annotation> = {
+        timestamp: Date.now(),
+        end_timestamp: Date.now(),
+        annotation: 'Updated annotation',
+        job_id: originalAnnotation._source.job_id,
+        type: ANNOTATION_TYPE.ANNOTATION,
+        event: 'model_change',
+        detector_index: 2,
+        _id: originalAnnotation._id,
+      };
+      await supertest
+        .put('/api/ml/annotations/index')
+        .auth(USER.ML_POWERUSER, ml.securityCommon.getPasswordForUser(USER.ML_POWERUSER))
+        .set(COMMON_REQUEST_HEADERS)
+        .send(annotationUpdateRequestBodyWithMissingFields)
+        .expect(200);
+
+      const updatedAnnotation = await ml.api.getAnnotationById(originalAnnotation._id);
+      if (updatedAnnotation) {
+        Object.keys(annotationUpdateRequestBodyWithMissingFields).forEach((key) => {
+          if (key !== '_id') {
+            const field = key as keyof Annotation;
+            expect(updatedAnnotation[field]).to.eql(
+              annotationUpdateRequestBodyWithMissingFields[field]
+            );
+          }
+        });
+      }
+      // validate missing fields in the annotationUpdateRequestBody
+      expect(updatedAnnotation?.partition_field_name).to.be(undefined);
+      expect(updatedAnnotation?.partition_field_value).to.be(undefined);
+    });
+  });
+};
diff --git a/x-pack/test/api_integration/apis/ml/index.ts b/x-pack/test/api_integration/apis/ml/index.ts
index b29bc47b50394..969f291b0d8b3 100644
--- a/x-pack/test/api_integration/apis/ml/index.ts
+++ b/x-pack/test/api_integration/apis/ml/index.ts
@@ -60,5 +60,6 @@ export default function ({ getService, loadTestFile }: FtrProviderContext) {
     loadTestFile(require.resolve('./data_frame_analytics'));
     loadTestFile(require.resolve('./filters'));
     loadTestFile(require.resolve('./calendars'));
+    loadTestFile(require.resolve('./annotations'));
   });
 }
diff --git a/x-pack/test/api_integration/apis/security_solution/sources.ts b/x-pack/test/api_integration/apis/security_solution/sources.ts
index a9bbf09a9e6f9..f99dd4c65fc83 100644
--- a/x-pack/test/api_integration/apis/security_solution/sources.ts
+++ b/x-pack/test/api_integration/apis/security_solution/sources.ts
@@ -18,22 +18,97 @@ export default function ({ getService }: FtrProviderContext) {
     before(() => esArchiver.load('auditbeat/default'));
     after(() => esArchiver.unload('auditbeat/default'));
 
-    it('Make sure that we get source information when auditbeat indices is there', () => {
-      return client
-        .query<SourceQuery.Query>({
-          query: sourceQuery,
-          variables: {
-            sourceId: 'default',
-            defaultIndex: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
-            docValueFields: [],
-          },
-        })
-        .then((resp) => {
-          const sourceStatus = resp.data.source.status;
-          // test data in x-pack/test/functional/es_archives/auditbeat_test_data/data.json.gz
-          expect(sourceStatus.indexFields.length).to.be(397);
-          expect(sourceStatus.indicesExist).to.be(true);
-        });
+    it('Make sure that we get source information when auditbeat indices is there', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      // test data in x-pack/test/functional/es_archives/auditbeat_test_data/data.json.gz
+      expect(sourceStatus.indexFields.length).to.be(397);
+      expect(sourceStatus.indicesExist).to.be(true);
+    });
+
+    it('should find indexes as being available when they exist', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: ['auditbeat-*', 'filebeat-*', 'packetbeat-*', 'winlogbeat-*'],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(true);
+    });
+
+    it('should not find indexes as existing when there is an empty array of them', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: [],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(false);
+    });
+
+    it('should not find indexes as existing when there is a _all within it', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: ['_all'],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(false);
+    });
+
+    it('should not find indexes as existing when there are empty strings within it', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: [''],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(false);
+    });
+
+    it('should not find indexes as existing when there are blank spaces within it', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: ['   '],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(false);
+    });
+
+    it('should find indexes when one is an empty index but the others are valid', async () => {
+      const resp = await client.query<SourceQuery.Query>({
+        query: sourceQuery,
+        variables: {
+          sourceId: 'default',
+          defaultIndex: ['', 'auditbeat-*'],
+          docValueFields: [],
+        },
+      });
+      const sourceStatus = resp.data.source.status;
+      expect(sourceStatus.indicesExist).to.be(true);
     });
   });
 }
diff --git a/x-pack/test/functional/apps/graph/graph.ts b/x-pack/test/functional/apps/graph/graph.ts
index c2500dca78444..68e5045c1f36c 100644
--- a/x-pack/test/functional/apps/graph/graph.ts
+++ b/x-pack/test/functional/apps/graph/graph.ts
@@ -129,17 +129,16 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
     it('should show venn when clicking a line', async function () {
       await buildGraph();
-      const { edges } = await PageObjects.graph.getGraphObjects();
 
       await PageObjects.graph.isolateEdge('test', '/test/wp-admin/');
 
       await PageObjects.graph.stopLayout();
       await PageObjects.common.sleep(1000);
-      const testTestWpAdminBlogEdge = edges.find(
-        ({ sourceNode, targetNode }) =>
-          targetNode.label === '/test/wp-admin/' && sourceNode.label === 'test'
-      )!;
-      await testTestWpAdminBlogEdge.element.click();
+      await browser.execute(() => {
+        const event = document.createEvent('SVGEvents');
+        event.initEvent('click', true, true);
+        return document.getElementsByClassName('gphEdge')[0].dispatchEvent(event);
+      });
       await PageObjects.common.sleep(1000);
       await PageObjects.graph.startLayout();
 
diff --git a/x-pack/test/functional/apps/uptime/certificates.ts b/x-pack/test/functional/apps/uptime/certificates.ts
index ccf35a1e63e37..7e9a2cd85935e 100644
--- a/x-pack/test/functional/apps/uptime/certificates.ts
+++ b/x-pack/test/functional/apps/uptime/certificates.ts
@@ -14,8 +14,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
   const es = getService('es');
 
-  // Failing: See https://github.com/elastic/kibana/issues/70493
-  describe.skip('certificates', function () {
+  describe('certificates', function () {
     before(async () => {
       await makeCheck({ es, tls: true });
       await uptime.goToRoot(true);
@@ -58,6 +57,15 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         const certId = getSha256();
         const { monitorId } = await makeCheck({
           es,
+          monitorId: 'cert-test-check-id',
+          fields: {
+            monitor: {
+              name: 'Cert Test Check',
+            },
+            url: {
+              full: 'https://site-to-check.com/',
+            },
+          },
           tls: {
             sha256: certId,
           },
diff --git a/x-pack/test/functional/apps/uptime/index.ts b/x-pack/test/functional/apps/uptime/index.ts
index 028ab3ff8803a..6b2b61cba2b64 100644
--- a/x-pack/test/functional/apps/uptime/index.ts
+++ b/x-pack/test/functional/apps/uptime/index.ts
@@ -55,6 +55,7 @@ export default ({ loadTestFile, getService }: FtrProviderContext) => {
       loadTestFile(require.resolve('./settings'));
       loadTestFile(require.resolve('./certificates'));
     });
+
     describe('with real-world data', () => {
       before(async () => {
         await esArchiver.unload(ARCHIVE);
diff --git a/x-pack/test/functional/services/ml/api.ts b/x-pack/test/functional/services/ml/api.ts
index 9dfec3a17dec0..401a96c5c11bd 100644
--- a/x-pack/test/functional/services/ml/api.ts
+++ b/x-pack/test/functional/services/ml/api.ts
@@ -5,13 +5,29 @@
  */
 import expect from '@kbn/expect';
 import { ProvidedType } from '@kbn/test/types/ftr';
+import { IndexDocumentParams } from 'elasticsearch';
 import { Calendar, CalendarEvent } from '../../../../plugins/ml/server/models/calendar/index';
+import { Annotation } from '../../../../plugins/ml/common/types/annotations';
 import { DataFrameAnalyticsConfig } from '../../../../plugins/ml/public/application/data_frame_analytics/common';
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { DATAFEED_STATE, JOB_STATE } from '../../../../plugins/ml/common/constants/states';
 import { DATA_FRAME_TASK_STATE } from '../../../../plugins/ml/public/application/data_frame_analytics/pages/analytics_management/components/analytics_list/common';
 import { Datafeed, Job } from '../../../../plugins/ml/common/types/anomaly_detection_jobs';
 export type MlApi = ProvidedType<typeof MachineLearningAPIProvider>;
+import {
+  ML_ANNOTATIONS_INDEX_ALIAS_READ,
+  ML_ANNOTATIONS_INDEX_ALIAS_WRITE,
+} from '../../../../plugins/ml/common/constants/index_patterns';
+
+interface EsIndexResult {
+  _index: string;
+  _id: string;
+  _version: number;
+  result: string;
+  _shards: any;
+  _seq_no: number;
+  _primary_term: number;
+}
 
 export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
   const es = getService('legacyEs');
@@ -634,5 +650,77 @@ export function MachineLearningAPIProvider({ getService }: FtrProviderContext) {
         }
       });
     },
+
+    async getAnnotations(jobId: string) {
+      log.debug(`Fetching annotations for job '${jobId}'...`);
+
+      const results = await es.search<Annotation>({
+        index: ML_ANNOTATIONS_INDEX_ALIAS_READ,
+        body: {
+          query: {
+            match: {
+              job_id: jobId,
+            },
+          },
+        },
+      });
+      expect(results).to.not.be(undefined);
+      expect(results).to.have.property('hits');
+      return results.hits.hits;
+    },
+
+    async getAnnotationById(annotationId: string): Promise<Annotation | undefined> {
+      log.debug(`Fetching annotation '${annotationId}'...`);
+
+      const result = await es.search({
+        index: ML_ANNOTATIONS_INDEX_ALIAS_READ,
+        body: {
+          size: 1,
+          query: {
+            match: {
+              _id: annotationId,
+            },
+          },
+        },
+      });
+      // @ts-ignore due to outdated type for hits.total
+      if (result.hits.total.value === 1) {
+        return result?.hits?.hits[0]?._source as Annotation;
+      }
+      return undefined;
+    },
+
+    async indexAnnotation(annotationRequestBody: Partial<Annotation>) {
+      log.debug(`Indexing annotation '${JSON.stringify(annotationRequestBody)}'...`);
+      // @ts-ignore due to outdated type for IndexDocumentParams.type
+      const params: IndexDocumentParams<Partial<Annotation>> = {
+        index: ML_ANNOTATIONS_INDEX_ALIAS_WRITE,
+        body: annotationRequestBody,
+        refresh: 'wait_for',
+      };
+      const results: EsIndexResult = await es.index(params);
+      await this.waitForAnnotationToExist(results._id);
+      return results;
+    },
+
+    async waitForAnnotationToExist(annotationId: string, errorMsg?: string) {
+      await retry.tryForTime(30 * 1000, async () => {
+        if ((await this.getAnnotationById(annotationId)) !== undefined) {
+          return true;
+        } else {
+          throw new Error(errorMsg ?? `annotation '${annotationId}' should exist`);
+        }
+      });
+    },
+
+    async waitForAnnotationNotToExist(annotationId: string, errorMsg?: string) {
+      await retry.tryForTime(30 * 1000, async () => {
+        if ((await this.getAnnotationById(annotationId)) === undefined) {
+          return true;
+        } else {
+          throw new Error(errorMsg ?? `annotation '${annotationId}' should not exist`);
+        }
+      });
+    },
   };
 }
diff --git a/x-pack/test/functional/services/uptime/certificates.ts b/x-pack/test/functional/services/uptime/certificates.ts
index 2ceab1ca89e54..06de9be5af7e9 100644
--- a/x-pack/test/functional/services/uptime/certificates.ts
+++ b/x-pack/test/functional/services/uptime/certificates.ts
@@ -7,10 +7,12 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
-export function UptimeCertProvider({ getService }: FtrProviderContext) {
+export function UptimeCertProvider({ getService, getPageObjects }: FtrProviderContext) {
   const testSubjects = getService('testSubjects');
   const retry = getService('retry');
 
+  const PageObjects = getPageObjects(['common', 'timePicker', 'header']);
+
   const changeSearchField = async (text: string) => {
     const input = await testSubjects.find('uptimeCertSearch');
     await input.clearValueWithKeyboard();
@@ -61,6 +63,7 @@ export function UptimeCertProvider({ getService }: FtrProviderContext) {
       const self = this;
       return retry.tryForTime(60 * 1000, async () => {
         await changeSearchField(monId);
+        await PageObjects.header.waitUntilLoadingHasFinished();
         await self.hasCertificates(1);
       });
     },
diff --git a/x-pack/test/functional/services/uptime/navigation.ts b/x-pack/test/functional/services/uptime/navigation.ts
index ab511abf130a5..710923c886cbe 100644
--- a/x-pack/test/functional/services/uptime/navigation.ts
+++ b/x-pack/test/functional/services/uptime/navigation.ts
@@ -17,7 +17,7 @@ export function UptimeNavigationProvider({ getService, getPageObjects }: FtrProv
       if (await testSubjects.exists('uptimeSettingsToOverviewLink', { timeout: 0 })) {
         await testSubjects.click('uptimeSettingsToOverviewLink');
         await testSubjects.existOrFail('uptimeOverviewPage', { timeout: 2000 });
-      } else if (!(await testSubjects.exists('uptimeOverviewPage', { timeout: 0 }))) {
+      } else {
         await PageObjects.common.navigateToApp('uptime');
         await PageObjects.header.waitUntilLoadingHasFinished();
         await testSubjects.existOrFail('uptimeOverviewPage', { timeout: 2000 });
diff --git a/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts b/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
index 6cb74aff95be2..a6de87d6f7b1a 100644
--- a/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/uptime/alert_flyout.ts
@@ -8,8 +8,7 @@ import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default ({ getPageObjects, getService }: FtrProviderContext) => {
-  // FLAKY: https://github.com/elastic/kibana/issues/65948
-  describe.skip('uptime alerts', () => {
+  describe('uptime alerts', () => {
     const pageObjects = getPageObjects(['common', 'uptime']);
     const supertest = getService('supertest');
     const retry = getService('retry');
@@ -105,7 +104,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           alertTypeId,
           consumer,
           id,
-          params: { numTimes, timerange, locations, filters },
+          params: { numTimes, timerangeUnit, timerangeCount, filters },
           schedule: { interval },
           tags,
         } = alert;
@@ -119,14 +118,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           expect(interval).to.eql('11m');
           expect(tags).to.eql(['uptime', 'another']);
           expect(numTimes).to.be(3);
-          expect(timerange.from).to.be('now-1h');
-          expect(timerange.to).to.be('now');
-          expect(locations).to.eql(['mpls']);
-          expect(filters).to.eql(
-            '{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"monitor.id":"0001-up"}}],' +
-              '"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match":{"observer.geo.name":"mpls"}}],' +
-              '"minimum_should_match":1}},{"bool":{"filter":[{"bool":{"should":[{"match":{"url.port":5678}}],' +
-              '"minimum_should_match":1}},{"bool":{"should":[{"match":{"monitor.type":"http"}}],"minimum_should_match":1}}]}}]}}]}}'
+          expect(timerangeUnit).to.be('h');
+          expect(timerangeCount).to.be(1);
+          expect(JSON.stringify(filters)).to.eql(
+            `{"url.port":["5678"],"observer.geo.name":["mpls"],"monitor.type":["http"],"tags":[]}`
           );
         } finally {
           await supertest.delete(`/api/alerts/alert/${id}`).set('kbn-xsrf', 'true').expect(204);