diff --git a/docs/developer/architecture/development-plugin-saved-objects.asciidoc b/docs/developer/architecture/development-plugin-saved-objects.asciidoc
new file mode 100644
index 0000000000000..0d31f5d90f668
--- /dev/null
+++ b/docs/developer/architecture/development-plugin-saved-objects.asciidoc
@@ -0,0 +1,311 @@
+[[development-plugin-saved-objects]]
+== Using Saved Objects
+
+Saved Objects allow {kib} plugins to use {es} like a primary
+database. Think of it as an Object Document Mapper for {es}. Once a
+plugin has registered one or more Saved Object types, the Saved Objects client
+can be used to query or perform create, read, update and delete operations on
+each type.
+
+By using Saved Objects your plugin can take advantage of the following
+features:
+ 
+* Migrations can evolve your document's schema by transforming documents and
+ensuring that the field mappings on the index are always up to date.
+* a <<saved-objects-api,HTTP API>> is automatically exposed for each type (unless
+`hidden=true` is specified).
+* a Saved Objects client that can be used from both the server and the browser.
+* Users can import or export Saved Objects using the Saved Objects management
+UI or the Saved Objects import/export API.
+* By declaring `references`, an object's entire reference graph will be
+exported. This makes it easy for users to export e.g. a `dashboard` object and
+have all the `visualization` objects required to display the dashboard
+included in the export.
+* When the X-Pack security and spaces plugins are enabled these transparently
+provide RBAC access control and the ability to organize Saved Objects into
+spaces.
+
+This document contains developer guidelines and best-practices for plugins
+wanting to use Saved Objects.
+
+=== Registering a Saved Object type
+Saved object type definitions should be defined in their own `my_plugin/server/saved_objects` directory.
+
+The folder should contain a file per type, named after the snake_case name of the type, and an `index.ts` file exporting all the types.
+
+.src/plugins/my_plugin/server/saved_objects/dashboard_visualization.ts
+[source,typescript]
+----
+import { SavedObjectsType } from 'src/core/server';
+
+export const dashboardVisualization: SavedObjectsType = {
+  name: 'dashboard_visualization', // <1>
+  hidden: false,
+  namespaceType: 'single',
+  mappings: {
+    dynamic: false,
+    properties: {
+      description: {
+        type: 'text',
+      },
+      hits: {
+        type: 'integer',
+      },
+    },
+  },
+  migrations: {
+    '1.0.0': migratedashboardVisualizationToV1,
+    '2.0.0': migratedashboardVisualizationToV2,
+  },
+};
+----
+<1> Since the name of a Saved Object type forms part of the url path for the
+public Saved Objects HTTP API, these should follow our API URL path convention
+and always be written as snake case.
+
+.src/plugins/my_plugin/server/saved_objects/index.ts
+[source,typescript]
+----
+export { dashboardVisualization } from './dashboard_visualization';
+export { dashboard } from './dashboard'; 
+----
+
+.src/plugins/my_plugin/server/plugin.ts
+[source,typescript]
+----
+import { dashboard, dashboardVisualization } from './saved_objects';
+
+export class MyPlugin implements Plugin {
+  setup({ savedObjects }) {
+    savedObjects.registerType(dashboard);
+    savedObjects.registerType(dashboardVisualization);
+  }
+}
+----
+
+=== Mappings
+Each Saved Object type can define it's own {es} field mappings.
+Because multiple Saved Object types can share the same index, mappings defined
+by a type will be nested under a top-level field that matches the type name.
+
+For example, the mappings defined by the `dashboard_visualization` Saved
+Object type:
+
+.src/plugins/my_plugin/server/saved_objects/dashboard_visualization.ts
+[source,typescript]
+----
+import { SavedObjectsType } from 'src/core/server';
+
+export const dashboardVisualization: SavedObjectsType = {
+  name: 'dashboard_visualization',
+  ...
+  mappings: {
+    properties: {
+      dynamic: false,
+      description: {
+        type: 'text',
+      },
+      hits: {
+        type: 'integer',
+      },
+    },
+  },
+  migrations: { ... },
+};
+----
+
+Will result in the following mappings being applied to the `.kibana` index:
+[source,json]
+----
+{
+  "mappings": {
+    "dynamic": "strict",
+    "properties": {
+      ...
+      "dashboard_vizualization": {
+        "dynamic": false,
+        "properties": {
+          "description": {
+            "type": "text",
+          },
+          "hits": {
+            "type": "integer",
+          },
+        },
+      }
+    }
+  }
+}
+----
+
+Do not use field mappings like you would use data types for the columns of a
+SQL database. Instead, field mappings are analogous to a SQL index. Only
+specify field mappings for the fields you wish to search on or query. By
+specifying `dynamic: false` in any level of your mappings, {es} will
+accept and store any other fields even if they are not specified in your mappings.
+
+Since {es} has a default limit of 1000 fields per index, plugins
+should carefully consider the fields they add to the mappings. Similarly,
+Saved Object types should never use `dynamic: true` as this can cause an
+arbitrary amount of fields to be added to the `.kibana` index.
+
+=== References
+When a Saved Object declares `references` to other Saved Objects, the
+Saved Objects Export API will automatically export the target object with all
+of it's references. This makes it easy for users to export the entire
+reference graph of an object. 
+
+If a Saved Object can't be used on it's own, that is, it needs other objects
+to exist for a feature to function correctly, that Saved Object should declare
+references to all the objects it requires. For example, a `dashboard`
+object might have panels for several `visualization` objects. When these
+`visualization` objects don't exist, the dashboard cannot be rendered
+correctly. The `dashboard` object should declare references to all it's
+visualizations.
+
+However, `visualization` objects can continue to be rendered or embedded into
+other dashboards even if the `dashboard` it was originally embedded into
+doesn't exist. As a result, `visualization` objects should not declare
+references to `dashboard` objects.
+
+For each referenced object, an `id`, `type` and `name` are added to the
+`references` array:
+
+[source, typescript]
+----
+router.get(
+  { path: '/some-path', validate: false },
+  async (context, req, res) => {
+    const object = await context.core.savedObjects.client.create(
+      'dashboard',
+      {
+        title: 'my dashboard',
+        panels: [
+          { visualization: 'vis1' }, // <1>
+        ],
+        indexPattern: 'indexPattern1'
+      },
+      { references: [
+          { id: '...', type: 'visualization', name: 'vis1' },
+          { id: '...', type: 'index_pattern', name: 'indexPattern1' },
+        ]
+      }
+    )
+    ...
+  }
+);
+----
+<1> Note how `dashboard.panels[0].visualization` stores the `name` property of
+the reference (not the `id` directly) to be able to uniquely identify this
+reference. This guarantees that the id the reference points to always remains
+up to date. If a visualization `id` was directly stored in
+`dashboard.panels[0].visualization` there is a risk that this `id` gets
+updated without updating the reference in the references array.
+
+==== Writing Migrations
+
+Saved Objects support schema changes between Kibana versions, which we call
+migrations. Migrations are applied when a Kibana installation is upgraded from
+one version to the next, when exports are imported via the Saved Objects
+Management UI, or when a new object is created via the HTTP API.
+
+Each Saved Object type may define migrations for its schema. Migrations are
+specified by the Kibana version number, receive an input document, and must
+return the fully migrated document to be persisted to Elasticsearch.
+
+Let's say we want to define two migrations:
+- In version 1.1.0, we want to drop the `subtitle` field and append it to the
+  title
+- In version 1.4.0, we want to add a new `id` field to every panel with a newly
+  generated UUID.
+
+First, the current `mappings` should always reflect the latest or "target"
+schema. Next, we should define a migration function for each step in the schema
+evolution:
+
+src/plugins/my_plugin/server/saved_objects/dashboard_visualization.ts
+[source,typescript]
+----
+import { SavedObjectsType, SavedObjectMigrationFn } from 'src/core/server';
+import uuid from 'uuid';
+
+interface DashboardVisualizationPre110 {
+  title: string;
+  subtitle: string;
+  panels: Array<{}>;
+}
+interface DashboardVisualization110 {
+  title: string;
+  panels: Array<{}>;
+}
+
+interface DashboardVisualization140 {
+  title: string;
+  panels: Array<{ id: string }>;
+}
+
+const migrateDashboardVisualization110: SavedObjectMigrationFn<
+  DashboardVisualizationPre110, // <1>
+  DashboardVisualization110
+> = (doc) => {
+  const { subtitle, ...attributesWithoutSubtitle } = doc.attributes;
+  return {
+    ...doc, // <2>
+    attributes: {
+      ...attributesWithoutSubtitle,
+      title: `${doc.attributes.title} - ${doc.attributes.subtitle}`,
+    },
+  };
+};
+
+const migrateDashboardVisualization140: SavedObjectMigrationFn<
+  DashboardVisualization110,
+  DashboardVisualization140
+> = (doc) => {
+  const outPanels = doc.attributes.panels?.map((panel) => {
+    return { ...panel, id: uuid.v4() };
+  });
+  return {
+    ...doc,
+    attributes: {
+      ...doc.attributes,
+      panels: outPanels,
+    },
+  };
+};
+
+export const dashboardVisualization: SavedObjectsType = {
+  name: 'dashboard_visualization', // <1>
+  /** ... */
+  migrations: {
+    // Takes a pre 1.1.0 doc, and converts it to 1.1.0
+    '1.1.0': migrateDashboardVisualization110,
+
+    // Takes a 1.1.0 doc, and converts it to 1.4.0
+    '1.4.0': migrateDashboardVisualization140,  // <3>
+  },
+};
+----
+<1> It is useful to define an interface for each version of the schema. This
+allows TypeScript to ensure that you are properly handling the input and output
+types correctly as the schema evolves.
+<2> Returning a shallow copy is necessary to avoid type errors when using
+different types for the input and output shape.
+<3> Migrations do not have to be defined for every version. The version number
+of a migration must always be the earliest Kibana version in which this
+migration was released. So if you are creating a migration which will be
+part of the v7.10.0 release, but will also be backported and released as
+v7.9.3, the migration version should be: 7.9.3.
+
+Migrations should be written defensively, an exception in a migration function
+will prevent a Kibana upgrade from succeeding and will cause downtime for our
+users. Having said that, if a document is encountered that is not in the
+expected shape, migrations are encouraged to throw an exception to abort the
+upgrade. In most scenarios, it is better to fail an upgrade than to silently
+ignore a corrupt document which can cause unexpected behaviour at some future
+point in time.
+
+It is critical that you have extensive tests to ensure that migrations behave
+as expected with all possible input documents. Given how simple it is to test
+all the branch conditions in a migration function and the high impact of a bug
+in this code, there's really no reason not to aim for 100% test code coverage.
\ No newline at end of file
diff --git a/docs/developer/architecture/index.asciidoc b/docs/developer/architecture/index.asciidoc
index ac25fe003df08..dc15b90b69d1a 100644
--- a/docs/developer/architecture/index.asciidoc
+++ b/docs/developer/architecture/index.asciidoc
@@ -15,12 +15,16 @@ A few services also automatically generate api documentation which can be browse
 A few notable services are called out below.
 
 * <<development-security>>
+* <<development-plugin-saved-objects>>
 * <<add-data-tutorials>>
 * <<development-visualize-index>>
 
+include::security/index.asciidoc[leveloffset=+1]
+
+include::development-plugin-saved-objects.asciidoc[leveloffset=+1]
+
 include::add-data-tutorials.asciidoc[leveloffset=+1]
 
 include::development-visualize-index.asciidoc[leveloffset=+1]
 
-include::security/index.asciidoc[leveloffset=+1]
 
diff --git a/src/legacy/server/config/schema.js b/src/legacy/server/config/schema.js
index a94766ef06926..feeb8e0bf6e4c 100644
--- a/src/legacy/server/config/schema.js
+++ b/src/legacy/server/config/schema.js
@@ -38,12 +38,8 @@ export default () =>
       prod: Joi.boolean().default(Joi.ref('$prod')),
     }).default(),
 
-    dev: Joi.object({
-      basePathProxyTarget: Joi.number().default(5603),
-    }).default(),
-
+    dev: HANDLED_IN_NEW_PLATFORM,
     pid: HANDLED_IN_NEW_PLATFORM,
-
     csp: HANDLED_IN_NEW_PLATFORM,
 
     server: Joi.object({
@@ -125,10 +121,7 @@ export default () =>
 
     ops: Joi.object({
       interval: Joi.number().default(5000),
-      cGroupOverrides: Joi.object().keys({
-        cpuPath: Joi.string().default(),
-        cpuAcctPath: Joi.string().default(),
-      }),
+      cGroupOverrides: HANDLED_IN_NEW_PLATFORM,
     }).default(),
 
     // still used by the legacy i18n mixin
@@ -139,15 +132,8 @@ export default () =>
     }).default(),
 
     path: HANDLED_IN_NEW_PLATFORM,
-
-    stats: Joi.object({
-      maximumWaitTimeForAllCollectorsInS: Joi.number().default(60),
-    }).default(),
-
-    status: Joi.object({
-      allowAnonymous: Joi.boolean().default(false),
-    }).default(),
-
+    stats: HANDLED_IN_NEW_PLATFORM,
+    status: HANDLED_IN_NEW_PLATFORM,
     map: HANDLED_IN_NEW_PLATFORM,
 
     i18n: Joi.object({
@@ -163,8 +149,5 @@ export default () =>
       autocompleteTimeout: Joi.number().integer().min(1).default(1000),
     }).default(),
 
-    savedObjects: Joi.object({
-      maxImportPayloadBytes: Joi.number().default(10485760),
-      maxImportExportSize: Joi.number().default(10000),
-    }).default(),
+    savedObjects: HANDLED_IN_NEW_PLATFORM,
   }).default();
diff --git a/x-pack/plugins/actions/server/builtin_action_types/pagerduty.test.ts b/x-pack/plugins/actions/server/builtin_action_types/pagerduty.test.ts
index 772e7df416979..e406b37ae61fb 100644
--- a/x-pack/plugins/actions/server/builtin_action_types/pagerduty.test.ts
+++ b/x-pack/plugins/actions/server/builtin_action_types/pagerduty.test.ts
@@ -169,6 +169,16 @@ describe('validateParams()', () => {
       });
     }).toThrowError(`error validating action params: error parsing timestamp "${timestamp}"`);
   });
+
+  test('should validate and throw error when dedupKey is missing on resolve', () => {
+    expect(() => {
+      validateParams(actionType, {
+        eventAction: 'resolve',
+      });
+    }).toThrowError(
+      `error validating action params: DedupKey is required when eventAction is "resolve"`
+    );
+  });
 });
 
 describe('execute()', () => {
@@ -199,7 +209,6 @@ describe('execute()', () => {
       Object {
         "apiUrl": "https://events.pagerduty.com/v2/enqueue",
         "data": Object {
-          "dedup_key": "action:some-action-id",
           "event_action": "trigger",
           "payload": Object {
             "severity": "info",
@@ -509,4 +518,61 @@ describe('execute()', () => {
       }
     `);
   });
+
+  test('should not set a default dedupkey to ensure each execution is a unique PagerDuty incident', async () => {
+    const randoDate = new Date('1963-09-23T01:23:45Z').toISOString();
+    const secrets = {
+      routingKey: 'super-secret',
+    };
+    const config = {
+      apiUrl: 'the-api-url',
+    };
+    const params: ActionParamsType = {
+      eventAction: 'trigger',
+      summary: 'the summary',
+      source: 'the-source',
+      severity: 'critical',
+      timestamp: randoDate,
+    };
+
+    postPagerdutyMock.mockImplementation(() => {
+      return { status: 202, data: 'data-here' };
+    });
+
+    const actionId = 'some-action-id';
+    const executorOptions: PagerDutyActionTypeExecutorOptions = {
+      actionId,
+      config,
+      params,
+      secrets,
+      services,
+    };
+    const actionResponse = await actionType.executor(executorOptions);
+    const { apiUrl, data, headers } = postPagerdutyMock.mock.calls[0][0];
+    expect({ apiUrl, data, headers }).toMatchInlineSnapshot(`
+      Object {
+        "apiUrl": "the-api-url",
+        "data": Object {
+          "event_action": "trigger",
+          "payload": Object {
+            "severity": "critical",
+            "source": "the-source",
+            "summary": "the summary",
+            "timestamp": "1963-09-23T01:23:45.000Z",
+          },
+        },
+        "headers": Object {
+          "Content-Type": "application/json",
+          "X-Routing-Key": "super-secret",
+        },
+      }
+    `);
+    expect(actionResponse).toMatchInlineSnapshot(`
+      Object {
+        "actionId": "some-action-id",
+        "data": "data-here",
+        "status": "ok",
+      }
+    `);
+  });
 });
diff --git a/x-pack/plugins/actions/server/builtin_action_types/pagerduty.ts b/x-pack/plugins/actions/server/builtin_action_types/pagerduty.ts
index 640a38d77b6c2..4574b748e6014 100644
--- a/x-pack/plugins/actions/server/builtin_action_types/pagerduty.ts
+++ b/x-pack/plugins/actions/server/builtin_action_types/pagerduty.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { curry } from 'lodash';
+import { curry, isUndefined, pick, omitBy } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { schema, TypeOf } from '@kbn/config-schema';
 import { postPagerduty } from './lib/post_pagerduty';
@@ -51,6 +51,10 @@ export type ActionParamsType = TypeOf<typeof ParamsSchema>;
 const EVENT_ACTION_TRIGGER = 'trigger';
 const EVENT_ACTION_RESOLVE = 'resolve';
 const EVENT_ACTION_ACKNOWLEDGE = 'acknowledge';
+const EVENT_ACTIONS_WITH_REQUIRED_DEDUPKEY = new Set([
+  EVENT_ACTION_RESOLVE,
+  EVENT_ACTION_ACKNOWLEDGE,
+]);
 
 const EventActionSchema = schema.oneOf([
   schema.literal(EVENT_ACTION_TRIGGER),
@@ -81,7 +85,7 @@ const ParamsSchema = schema.object(
 );
 
 function validateParams(paramsObject: unknown): string | void {
-  const { timestamp } = paramsObject as ActionParamsType;
+  const { timestamp, eventAction, dedupKey } = paramsObject as ActionParamsType;
   if (timestamp != null) {
     try {
       const date = Date.parse(timestamp);
@@ -103,6 +107,14 @@ function validateParams(paramsObject: unknown): string | void {
       });
     }
   }
+  if (eventAction && EVENT_ACTIONS_WITH_REQUIRED_DEDUPKEY.has(eventAction) && !dedupKey) {
+    return i18n.translate('xpack.actions.builtin.pagerduty.missingDedupkeyErrorMessage', {
+      defaultMessage: `DedupKey is required when eventAction is "{eventAction}"`,
+      values: {
+        eventAction,
+      },
+    });
+  }
 }
 
 // action type definition
@@ -230,26 +242,29 @@ async function executor(
 
 const AcknowledgeOrResolve = new Set([EVENT_ACTION_ACKNOWLEDGE, EVENT_ACTION_RESOLVE]);
 
-function getBodyForEventAction(actionId: string, params: ActionParamsType): unknown {
-  const eventAction = params.eventAction || EVENT_ACTION_TRIGGER;
-  const dedupKey = params.dedupKey || `action:${actionId}`;
-
-  const data: {
-    event_action: ActionParamsType['eventAction'];
-    dedup_key: string;
-    payload?: {
-      summary: string;
-      source: string;
-      severity: string;
-      timestamp?: string;
-      component?: string;
-      group?: string;
-      class?: string;
-    };
-  } = {
+interface PagerDutyPayload {
+  event_action: ActionParamsType['eventAction'];
+  dedup_key?: string;
+  payload?: {
+    summary: string;
+    source: string;
+    severity: string;
+    timestamp?: string;
+    component?: string;
+    group?: string;
+    class?: string;
+  };
+}
+
+function getBodyForEventAction(actionId: string, params: ActionParamsType): PagerDutyPayload {
+  const eventAction = params.eventAction ?? EVENT_ACTION_TRIGGER;
+
+  const data: PagerDutyPayload = {
     event_action: eventAction,
-    dedup_key: dedupKey,
   };
+  if (params.dedupKey) {
+    data.dedup_key = params.dedupKey;
+  }
 
   // for acknowledge / resolve, just send the dedup key
   if (AcknowledgeOrResolve.has(eventAction)) {
@@ -260,12 +275,8 @@ function getBodyForEventAction(actionId: string, params: ActionParamsType): unkn
     summary: params.summary || 'No summary provided.',
     source: params.source || `Kibana Action ${actionId}`,
     severity: params.severity || 'info',
+    ...omitBy(pick(params, ['timestamp', 'component', 'group', 'class']), isUndefined),
   };
 
-  if (params.timestamp != null) data.payload.timestamp = params.timestamp;
-  if (params.component != null) data.payload.component = params.component;
-  if (params.group != null) data.payload.group = params.group;
-  if (params.class != null) data.payload.class = params.class;
-
   return data;
 }
diff --git a/x-pack/plugins/alerts/server/saved_objects/migrations.test.ts b/x-pack/plugins/alerts/server/saved_objects/migrations.test.ts
index 1c1261ae3fa08..10e1a9ae421b7 100644
--- a/x-pack/plugins/alerts/server/saved_objects/migrations.test.ts
+++ b/x-pack/plugins/alerts/server/saved_objects/migrations.test.ts
@@ -85,6 +85,120 @@ describe('7.10.0', () => {
       },
     });
   });
+
+  test('migrates PagerDuty actions to set a default dedupkey of the AlertId', () => {
+    const migration710 = getMigrations(encryptedSavedObjectsSetup)['7.10.0'];
+    const alert = getMockData({
+      actions: [
+        {
+          actionTypeId: '.pagerduty',
+          group: 'default',
+          params: {
+            summary: 'fired {{alertInstanceId}}',
+            eventAction: 'resolve',
+            component: '',
+          },
+          id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+        },
+      ],
+    });
+    expect(migration710(alert, { log })).toMatchObject({
+      ...alert,
+      attributes: {
+        ...alert.attributes,
+        actions: [
+          {
+            actionTypeId: '.pagerduty',
+            group: 'default',
+            params: {
+              summary: 'fired {{alertInstanceId}}',
+              eventAction: 'resolve',
+              dedupKey: '{{alertId}}',
+              component: '',
+            },
+            id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+          },
+        ],
+      },
+    });
+  });
+
+  test('skips PagerDuty actions with a specified dedupkey', () => {
+    const migration710 = getMigrations(encryptedSavedObjectsSetup)['7.10.0'];
+    const alert = getMockData({
+      actions: [
+        {
+          actionTypeId: '.pagerduty',
+          group: 'default',
+          params: {
+            summary: 'fired {{alertInstanceId}}',
+            eventAction: 'trigger',
+            dedupKey: '{{alertInstanceId}}',
+            component: '',
+          },
+          id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+        },
+      ],
+    });
+    expect(migration710(alert, { log })).toMatchObject({
+      ...alert,
+      attributes: {
+        ...alert.attributes,
+        actions: [
+          {
+            actionTypeId: '.pagerduty',
+            group: 'default',
+            params: {
+              summary: 'fired {{alertInstanceId}}',
+              eventAction: 'trigger',
+              dedupKey: '{{alertInstanceId}}',
+              component: '',
+            },
+            id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+          },
+        ],
+      },
+    });
+  });
+
+  test('skips PagerDuty actions with an eventAction of "trigger"', () => {
+    const migration710 = getMigrations(encryptedSavedObjectsSetup)['7.10.0'];
+    const alert = getMockData({
+      actions: [
+        {
+          actionTypeId: '.pagerduty',
+          group: 'default',
+          params: {
+            summary: 'fired {{alertInstanceId}}',
+            eventAction: 'trigger',
+            component: '',
+          },
+          id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+        },
+      ],
+    });
+    expect(migration710(alert, { log })).toEqual({
+      ...alert,
+      attributes: {
+        ...alert.attributes,
+        meta: {
+          versionApiKeyLastmodified: 'pre-7.10.0',
+        },
+        actions: [
+          {
+            actionTypeId: '.pagerduty',
+            group: 'default',
+            params: {
+              summary: 'fired {{alertInstanceId}}',
+              eventAction: 'trigger',
+              component: '',
+            },
+            id: 'b62ea790-5366-4abc-a7df-33db1db78410',
+          },
+        ],
+      },
+    });
+  });
 });
 
 describe('7.10.0 migrates with failure', () => {
diff --git a/x-pack/plugins/alerts/server/saved_objects/migrations.ts b/x-pack/plugins/alerts/server/saved_objects/migrations.ts
index c88f4d786c212..537c21e85c0bd 100644
--- a/x-pack/plugins/alerts/server/saved_objects/migrations.ts
+++ b/x-pack/plugins/alerts/server/saved_objects/migrations.ts
@@ -18,10 +18,20 @@ import {
 
 export const LEGACY_LAST_MODIFIED_VERSION = 'pre-7.10.0';
 
+type AlertMigration = (
+  doc: SavedObjectUnsanitizedDoc<RawAlert>
+) => SavedObjectUnsanitizedDoc<RawAlert>;
+
 export function getMigrations(
   encryptedSavedObjects: EncryptedSavedObjectsPluginSetup
 ): SavedObjectMigrationMap {
-  const migrationWhenRBACWasIntroduced = markAsLegacyAndChangeConsumer(encryptedSavedObjects);
+  const migrationWhenRBACWasIntroduced = encryptedSavedObjects.createMigration<RawAlert, RawAlert>(
+    function shouldBeMigrated(doc): doc is SavedObjectUnsanitizedDoc<RawAlert> {
+      // migrate all documents in 7.10 in order to add the "meta" RBAC field
+      return true;
+    },
+    pipeMigrations(markAsLegacyAndChangeConsumer, setAlertIdAsDefaultDedupkeyOnPagerDutyActions)
+  );
 
   return {
     '7.10.0': executeMigrationWithErrorHandling(migrationWhenRBACWasIntroduced, '7.10.0'),
@@ -52,29 +62,55 @@ const consumersToChange: Map<string, string> = new Map(
     [SIEM_APP_ID]: SIEM_SERVER_APP_ID,
   })
 );
+
 function markAsLegacyAndChangeConsumer(
-  encryptedSavedObjects: EncryptedSavedObjectsPluginSetup
-): SavedObjectMigrationFn<RawAlert, RawAlert> {
-  return encryptedSavedObjects.createMigration<RawAlert, RawAlert>(
-    function shouldBeMigrated(doc): doc is SavedObjectUnsanitizedDoc<RawAlert> {
-      // migrate all documents in 7.10 in order to add the "meta" RBAC field
-      return true;
+  doc: SavedObjectUnsanitizedDoc<RawAlert>
+): SavedObjectUnsanitizedDoc<RawAlert> {
+  const {
+    attributes: { consumer },
+  } = doc;
+  return {
+    ...doc,
+    attributes: {
+      ...doc.attributes,
+      consumer: consumersToChange.get(consumer) ?? consumer,
+      // mark any alert predating 7.10 as a legacy alert
+      meta: {
+        versionApiKeyLastmodified: LEGACY_LAST_MODIFIED_VERSION,
+      },
     },
-    (doc: SavedObjectUnsanitizedDoc<RawAlert>): SavedObjectUnsanitizedDoc<RawAlert> => {
-      const {
-        attributes: { consumer },
-      } = doc;
-      return {
-        ...doc,
-        attributes: {
-          ...doc.attributes,
-          consumer: consumersToChange.get(consumer) ?? consumer,
-          // mark any alert predating 7.10 as a legacy alert
-          meta: {
-            versionApiKeyLastmodified: LEGACY_LAST_MODIFIED_VERSION,
-          },
-        },
-      };
-    }
-  );
+  };
+}
+
+function setAlertIdAsDefaultDedupkeyOnPagerDutyActions(
+  doc: SavedObjectUnsanitizedDoc<RawAlert>
+): SavedObjectUnsanitizedDoc<RawAlert> {
+  const { attributes } = doc;
+  return {
+    ...doc,
+    attributes: {
+      ...attributes,
+      ...(attributes.actions
+        ? {
+            actions: attributes.actions.map((action) => {
+              if (action.actionTypeId !== '.pagerduty' || action.params.eventAction === 'trigger') {
+                return action;
+              }
+              return {
+                ...action,
+                params: {
+                  ...action.params,
+                  dedupKey: action.params.dedupKey ?? '{{alertId}}',
+                },
+              };
+            }),
+          }
+        : {}),
+    },
+  };
+}
+
+function pipeMigrations(...migrations: AlertMigration[]): AlertMigration {
+  return (doc: SavedObjectUnsanitizedDoc<RawAlert>) =>
+    migrations.reduce((migratedDoc, nextMigration) => nextMigration(migratedDoc), doc);
 }
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
index c17845fd61468..75974ef9c202c 100644
--- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/csm_filters.ts
@@ -14,16 +14,40 @@ When(/^the user filters by "([^"]*)"$/, (filterName) => {
   cy.get('.euiStat__title-isLoading').should('not.be.visible');
   cy.get(`#local-filter-${filterName}`).click();
 
-  if (filterName === 'os') {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('Mac OS X')
-      .click();
-  } else {
-    cy.get('span.euiSelectableListItem__text', DEFAULT_TIMEOUT)
-      .contains('DE')
-      .click();
-  }
-  cy.get('[data-cy=applyFilter]').click();
+  cy.get(`#local-filter-popover-${filterName}`, DEFAULT_TIMEOUT).within(() => {
+    if (filterName === 'os') {
+      const osItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2);
+      osItem.should('have.text', 'Mac OS X8 ');
+      osItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      osItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(2).click();
+        }
+      });
+    } else {
+      const deItem = cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0);
+      deItem.should('have.text', 'DE28 ');
+      deItem.click();
+
+      // sometimes click doesn't work as expected so we need to retry here
+      deItem.invoke('attr', 'aria-selected').then((val) => {
+        if (val === 'false') {
+          cy.get('li.euiSelectableListItem', DEFAULT_TIMEOUT).eq(0).click();
+        }
+      });
+    }
+    cy.get('[data-cy=applyFilter]').click();
+  });
+
+  cy.get(`div#local-filter-values-${filterName}`, DEFAULT_TIMEOUT).within(
+    () => {
+      cy.get('span.euiBadge__content')
+        .eq(0)
+        .should('have.text', filterName === 'os' ? 'Mac OS X' : 'DE');
+    }
+  );
 });
 
 Then(/^it filters the client metrics "([^"]*)"$/, (filterName) => {
diff --git a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
index 4169149bc7339..b3899a5649b72 100644
--- a/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
+++ b/x-pack/plugins/apm/e2e/cypress/support/step_definitions/csm/service_name_filter.ts
@@ -5,15 +5,13 @@
  */
 
 import { When, Then } from 'cypress-cucumber-preprocessor/steps';
-import { DEFAULT_TIMEOUT } from '../apm';
 import { verifyClientMetrics } from './client_metrics_helper';
+import { DEFAULT_TIMEOUT } from './csm_dashboard';
 
-When('the user changes the selected service name', (filterName) => {
+When('the user changes the selected service name', () => {
   // wait for all loading to finish
   cy.get('kbnLoadingIndicator').should('not.be.visible');
-  cy.get(`[data-cy=serviceNameFilter]`, { timeout: DEFAULT_TIMEOUT }).select(
-    'client'
-  );
+  cy.get(`[data-cy=serviceNameFilter]`, DEFAULT_TIMEOUT).select('client');
 });
 
 Then(`it displays relevant client metrics`, () => {
diff --git a/x-pack/plugins/apm/e2e/ingest-data/replay.js b/x-pack/plugins/apm/e2e/ingest-data/replay.js
index 74c86b1b09ab4..326cb739e23c6 100644
--- a/x-pack/plugins/apm/e2e/ingest-data/replay.js
+++ b/x-pack/plugins/apm/e2e/ingest-data/replay.js
@@ -96,7 +96,7 @@ function setRumAgent(item) {
   if (item.body) {
     item.body = item.body.replace(
       '"name":"client"',
-      '"name":"opbean-client-rum"'
+      '"name":"elastic-frontend"'
     );
   }
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
index a77d27c4bc883..bc1e0a86f17db 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ClientMetrics/index.tsx
@@ -6,10 +6,12 @@
 import * as React from 'react';
 import numeral from '@elastic/numeral';
 import styled from 'styled-components';
+import { useContext, useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiStat, EuiToolTip } from '@elastic/eui';
 import { useFetcher } from '../../../../hooks/useFetcher';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
 import { I18LABELS } from '../translations';
+import { CsmSharedContext } from '../CsmSharedContext';
 
 const ClFlexGroup = styled(EuiFlexGroup)`
   flex-direction: row;
@@ -45,6 +47,12 @@ export function ClientMetrics() {
     [start, end, uiFilters, searchTerm]
   );
 
+  const { setSharedData } = useContext(CsmSharedContext);
+
+  useEffect(() => {
+    setSharedData({ totalPageViews: data?.pageViews?.value ?? 0 });
+  }, [data, setSharedData]);
+
   const STAT_STYLE = { width: '240px' };
 
   return (
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx
new file mode 100644
index 0000000000000..3d445104d6d10
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/CsmSharedContext/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React, { createContext, useMemo, useState } from 'react';
+
+interface SharedData {
+  totalPageViews: number;
+}
+
+interface Index {
+  sharedData: SharedData;
+  setSharedData: (data: SharedData) => void;
+}
+
+const defaultContext: Index = {
+  sharedData: { totalPageViews: 0 },
+  setSharedData: (d) => {
+    throw new Error(
+      'setSharedData was not initialized, set it when you invoke the context'
+    );
+  },
+};
+
+export const CsmSharedContext = createContext(defaultContext);
+
+export function CsmSharedContextProvider({
+  children,
+}: {
+  children: JSX.Element[];
+}) {
+  const [newData, setNewData] = useState<SharedData>({ totalPageViews: 0 });
+
+  const setSharedData = React.useCallback((data: SharedData) => {
+    setNewData(data);
+  }, []);
+
+  const value = useMemo(() => {
+    return { sharedData: newData, setSharedData };
+  }, [newData, setSharedData]);
+
+  return <CsmSharedContext.Provider value={value} children={children} />;
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
new file mode 100644
index 0000000000000..805b328cb1fb0
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/JSErrors.tsx
@@ -0,0 +1,138 @@
+/*
+ * 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, { useContext, useState } from 'react';
+import {
+  EuiBasicTable,
+  EuiFlexItem,
+  EuiFlexGroup,
+  EuiSpacer,
+  EuiTitle,
+  EuiStat,
+  EuiToolTip,
+} from '@elastic/eui';
+import numeral from '@elastic/numeral';
+import { i18n } from '@kbn/i18n';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { I18LABELS } from '../translations';
+import { CsmSharedContext } from '../CsmSharedContext';
+
+export function JSErrors() {
+  const { urlParams, uiFilters } = useUrlParams();
+
+  const { start, end, serviceName } = urlParams;
+
+  const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 5 });
+
+  const { data, status } = useFetcher(
+    (callApmApi) => {
+      if (start && end && serviceName) {
+        return callApmApi({
+          pathname: '/api/apm/rum-client/js-errors',
+          params: {
+            query: {
+              start,
+              end,
+              uiFilters: JSON.stringify(uiFilters),
+              pageSize: String(pagination.pageSize),
+              pageIndex: String(pagination.pageIndex),
+            },
+          },
+        });
+      }
+      return Promise.resolve(null);
+    },
+    [start, end, serviceName, uiFilters, pagination]
+  );
+
+  const {
+    sharedData: { totalPageViews },
+  } = useContext(CsmSharedContext);
+
+  const items = (data?.items ?? []).map(({ errorMessage, count }) => ({
+    errorMessage,
+    percent: i18n.translate('xpack.apm.rum.jsErrors.percent', {
+      defaultMessage: '{pageLoadPercent} %',
+      values: { pageLoadPercent: ((count / totalPageViews) * 100).toFixed(1) },
+    }),
+  }));
+
+  const cols = [
+    {
+      field: 'errorMessage',
+      name: I18LABELS.errorMessage,
+    },
+    {
+      name: I18LABELS.impactedPageLoads,
+      field: 'percent',
+      align: 'right' as const,
+    },
+  ];
+
+  const onTableChange = ({
+    page,
+  }: {
+    page: { size: number; index: number };
+  }) => {
+    setPagination({
+      pageIndex: page.index,
+      pageSize: page.size,
+    });
+  };
+
+  return (
+    <>
+      <EuiTitle size="xs">
+        <h3>{I18LABELS.jsErrors}</h3>
+      </EuiTitle>
+      <EuiSpacer size="s" />
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            title={
+              <EuiToolTip content={data?.totalErrors ?? 0}>
+                <>{numeral(data?.totalErrors ?? 0).format('0 a')}</>
+              </EuiToolTip>
+            }
+            description={I18LABELS.totalErrors}
+            isLoading={status !== 'success'}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiStat
+            titleSize="s"
+            title={i18n.translate('xpack.apm.rum.jsErrors.errorRateValue', {
+              defaultMessage: '{errorRate} %',
+              values: {
+                errorRate: (
+                  ((data?.totalErrorPages ?? 0) / totalPageViews) *
+                  100
+                ).toFixed(0),
+              },
+            })}
+            description={I18LABELS.errorRate}
+            isLoading={status !== 'success'}
+          />
+        </EuiFlexItem>{' '}
+      </EuiFlexGroup>
+      <EuiSpacer size="s" />
+      <EuiBasicTable
+        loading={status !== 'success'}
+        responsive={false}
+        compressed={true}
+        columns={cols}
+        items={items}
+        onChange={onTableChange}
+        pagination={{
+          ...pagination,
+          totalItemCount: data?.totalErrorGroups ?? 0,
+        }}
+      />
+    </>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx
new file mode 100644
index 0000000000000..34cb6338eb948
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/ImpactfulMetrics/index.tsx
@@ -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 React from 'react';
+import { EuiFlexItem, EuiPanel, EuiFlexGroup, EuiSpacer } from '@elastic/eui';
+import { JSErrors } from './JSErrors';
+
+export function ImpactfulMetrics() {
+  return (
+    <EuiPanel>
+      <EuiSpacer size="xs" />
+      <EuiFlexGroup wrap>
+        <EuiFlexItem style={{ flexBasis: 650 }}>
+          <JSErrors />
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiPanel>
+  );
+}
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
index ddef5cd08e521..37522b06970c1 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumDashboard.tsx
@@ -19,6 +19,7 @@ import { I18LABELS } from './translations';
 import { VisitorBreakdown } from './VisitorBreakdown';
 import { UXMetrics } from './UXMetrics';
 import { VisitorBreakdownMap } from './VisitorBreakdownMap';
+import { ImpactfulMetrics } from './ImpactfulMetrics';
 
 export function RumDashboard() {
   return (
@@ -66,6 +67,9 @@ export function RumDashboard() {
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
+      <EuiFlexItem>
+        <ImpactfulMetrics />
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
index 9abf792d7a0cf..28bb5307b6e8c 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/RumHome.tsx
@@ -9,6 +9,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { RumOverview } from '../RumDashboard';
 import { RumHeader } from './RumHeader';
+import { CsmSharedContextProvider } from './CsmSharedContext';
 
 export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
   defaultMessage: 'User Experience',
@@ -17,16 +18,18 @@ export const UX_LABEL = i18n.translate('xpack.apm.ux.title', {
 export function RumHome() {
   return (
     <div>
-      <RumHeader>
-        <EuiFlexGroup alignItems="center">
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="l">
-              <h1>{UX_LABEL}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </RumHeader>
-      <RumOverview />
+      <CsmSharedContextProvider>
+        <RumHeader>
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={false}>
+              <EuiTitle size="l">
+                <h1>{UX_LABEL}</h1>
+              </EuiTitle>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </RumHeader>
+        <RumOverview />
+      </CsmSharedContextProvider>
     </div>
   );
 }
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
index 714788ef468c6..f92a1d5a5945b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/translations.ts
@@ -37,6 +37,18 @@ export const I18LABELS = {
       defaultMessage: 'Page load distribution',
     }
   ),
+  jsErrors: i18n.translate(
+    'xpack.apm.rum.dashboard.impactfulMetrics.jsErrors',
+    {
+      defaultMessage: 'JavaScript errors',
+    }
+  ),
+  highTrafficPages: i18n.translate(
+    'xpack.apm.rum.dashboard.impactfulMetrics.highTrafficPages',
+    {
+      defaultMessage: 'High traffic pages',
+    }
+  ),
   resetZoom: i18n.translate('xpack.apm.rum.dashboard.resetZoom.label', {
     defaultMessage: 'Reset zoom',
   }),
@@ -105,6 +117,21 @@ export const I18LABELS = {
   noResults: i18n.translate('xpack.apm.rum.filters.url.noResults', {
     defaultMessage: 'No results available',
   }),
+  totalErrors: i18n.translate('xpack.apm.rum.jsErrors.totalErrors', {
+    defaultMessage: 'Total errors',
+  }),
+  errorRate: i18n.translate('xpack.apm.rum.jsErrors.errorRate', {
+    defaultMessage: 'Error rate',
+  }),
+  errorMessage: i18n.translate('xpack.apm.rum.jsErrors.errorMessage', {
+    defaultMessage: 'Error message',
+  }),
+  impactedPageLoads: i18n.translate(
+    'xpack.apm.rum.jsErrors.impactedPageLoads',
+    {
+      defaultMessage: 'Impacted page loads',
+    }
+  ),
 };
 
 export const VisitorBreakdownLabel = i18n.translate(
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
index ed8d865d2d288..ee240cfef3b21 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/FilterBadgeList.tsx
@@ -19,6 +19,7 @@ const BadgeText = styled.div`
 interface Props {
   value: string[];
   onRemove: (val: string) => void;
+  name: string;
 }
 
 const removeFilterLabel = i18n.translate(
@@ -26,9 +27,9 @@ const removeFilterLabel = i18n.translate(
   { defaultMessage: 'Remove filter' }
 );
 
-function FilterBadgeList({ onRemove, value }: Props) {
+function FilterBadgeList({ onRemove, value, name }: Props) {
   return (
-    <EuiFlexGrid gutterSize="s">
+    <EuiFlexGrid gutterSize="s" id={`local-filter-values-${name}`}>
       {value.map((val) => (
         <EuiFlexItem key={val} grow={false}>
           <EuiBadge
diff --git a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
index 48ebc2add0053..82c07a278b2ba 100644
--- a/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/LocalUIFilters/Filter/index.tsx
@@ -113,7 +113,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
           searchable={true}
         >
           {(list, search) => (
-            <SelectContainer>
+            <SelectContainer id={`local-filter-popover-${name}`}>
               <EuiFlexGroup direction="column" gutterSize="none">
                 <FlexItem grow={true}>
                   <EuiTitle size="xxxs" textTransform="uppercase">
@@ -159,6 +159,7 @@ function Filter({ name, title, options, onChange, value, showCount }: Props) {
       {value.length ? (
         <>
           <FilterBadgeList
+            name={name}
             onRemove={(val) => {
               onChange(value.filter((v) => val !== v));
             }}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
index ceffb4f4d6654..66cfa954965d2 100644
--- a/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
+++ b/x-pack/plugins/apm/server/lib/rum_client/__snapshots__/queries.test.ts.snap
@@ -72,6 +72,97 @@ Object {
 }
 `;
 
+exports[`rum client dashboard queries fetches js errors 1`] = `
+Object {
+  "apm": Object {
+    "events": Array [
+      "error",
+    ],
+  },
+  "body": Object {
+    "aggs": Object {
+      "errors": Object {
+        "aggs": Object {
+          "bucket_truncate": Object {
+            "bucket_sort": Object {
+              "from": 0,
+              "size": 5,
+            },
+          },
+          "sample": Object {
+            "top_hits": Object {
+              "_source": Array [
+                "error.exception.message",
+                "error.exception.type",
+                "error.grouping_key",
+                "@timestamp",
+              ],
+              "size": 1,
+              "sort": Array [
+                Object {
+                  "@timestamp": "desc",
+                },
+              ],
+            },
+          },
+        },
+        "terms": Object {
+          "field": "error.grouping_key",
+          "size": 500,
+        },
+      },
+      "totalErrorGroups": Object {
+        "cardinality": Object {
+          "field": "error.grouping_key",
+        },
+      },
+      "totalErrorPages": Object {
+        "cardinality": Object {
+          "field": "transaction.id",
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "range": Object {
+              "@timestamp": Object {
+                "format": "epoch_millis",
+                "gte": 1528113600000,
+                "lte": 1528977600000,
+              },
+            },
+          },
+          Object {
+            "term": Object {
+              "agent.name": "rum-js",
+            },
+          },
+          Object {
+            "term": Object {
+              "transaction.type": "page-load",
+            },
+          },
+          Object {
+            "term": Object {
+              "service.language.name": "javascript",
+            },
+          },
+          Object {
+            "term": Object {
+              "my.custom.ui.filter": "foo-bar",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+    "track_total_hits": true,
+  },
+}
+`;
+
 exports[`rum client dashboard queries fetches long task metrics 1`] = `
 Object {
   "apm": Object {
diff --git a/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts b/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts
new file mode 100644
index 0000000000000..0540ea4bf09dd
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/rum_client/get_js_errors.ts
@@ -0,0 +1,99 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { mergeProjection } from '../../projections/util/merge_projection';
+import {
+  Setup,
+  SetupTimeRange,
+  SetupUIFilters,
+} from '../helpers/setup_request';
+import { getRumErrorsProjection } from '../../projections/rum_page_load_transactions';
+import {
+  ERROR_EXC_MESSAGE,
+  ERROR_EXC_TYPE,
+  ERROR_GROUP_ID,
+  TRANSACTION_ID,
+} from '../../../common/elasticsearch_fieldnames';
+
+export async function getJSErrors({
+  setup,
+  pageSize,
+  pageIndex,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+  pageSize: number;
+  pageIndex: number;
+}) {
+  const projection = getRumErrorsProjection({
+    setup,
+  });
+
+  const params = mergeProjection(projection, {
+    body: {
+      size: 0,
+      track_total_hits: true,
+      aggs: {
+        totalErrorGroups: {
+          cardinality: {
+            field: ERROR_GROUP_ID,
+          },
+        },
+        totalErrorPages: {
+          cardinality: {
+            field: TRANSACTION_ID,
+          },
+        },
+        errors: {
+          terms: {
+            field: ERROR_GROUP_ID,
+            size: 500,
+          },
+          aggs: {
+            bucket_truncate: {
+              bucket_sort: {
+                size: pageSize,
+                from: pageIndex * pageSize,
+              },
+            },
+            sample: {
+              top_hits: {
+                _source: [
+                  ERROR_EXC_MESSAGE,
+                  ERROR_EXC_TYPE,
+                  ERROR_GROUP_ID,
+                  '@timestamp',
+                ],
+                sort: [{ '@timestamp': 'desc' as const }],
+                size: 1,
+              },
+            },
+          },
+        },
+      },
+    },
+  });
+
+  const { apmEventClient } = setup;
+
+  const response = await apmEventClient.search(params);
+
+  const { totalErrorGroups, totalErrorPages, errors } =
+    response.aggregations ?? {};
+
+  return {
+    totalErrorPages: totalErrorPages?.value ?? 0,
+    totalErrors: response.hits.total.value ?? 0,
+    totalErrorGroups: totalErrorGroups?.value ?? 0,
+    items: errors?.buckets.map(({ sample, doc_count: count }) => {
+      return {
+        count,
+        errorMessage: (sample.hits.hits[0]._source as {
+          error: { exception: Array<{ message: string }> };
+        }).error.exception?.[0].message,
+      };
+    }),
+  };
+}
diff --git a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
index 14cec21cceb79..23d2cb829b8d5 100644
--- a/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
+++ b/x-pack/plugins/apm/server/lib/rum_client/queries.test.ts
@@ -14,6 +14,7 @@ import { getPageLoadDistribution } from './get_page_load_distribution';
 import { getRumServices } from './get_rum_services';
 import { getLongTaskMetrics } from './get_long_task_metrics';
 import { getWebCoreVitals } from './get_web_core_vitals';
+import { getJSErrors } from './get_js_errors';
 
 describe('rum client dashboard queries', () => {
   let mock: SearchParamsMock;
@@ -79,4 +80,15 @@ describe('rum client dashboard queries', () => {
     );
     expect(mock.params).toMatchSnapshot();
   });
+
+  it('fetches js errors', async () => {
+    mock = await inspectSearchParams((setup) =>
+      getJSErrors({
+        setup,
+        pageSize: 5,
+        pageIndex: 0,
+      })
+    );
+    expect(mock.params).toMatchSnapshot();
+  });
 });
diff --git a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts b/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
index 3c3eaaca7efdb..a8505337e8aec 100644
--- a/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
+++ b/x-pack/plugins/apm/server/projections/rum_page_load_transactions.ts
@@ -11,7 +11,9 @@ import {
 } from '../../server/lib/helpers/setup_request';
 import {
   SPAN_TYPE,
+  AGENT_NAME,
   TRANSACTION_TYPE,
+  SERVICE_LANGUAGE_NAME,
 } from '../../common/elasticsearch_fieldnames';
 import { rangeFilter } from '../../common/utils/range_filter';
 import { ProcessorEvent } from '../../common/processor_event';
@@ -90,3 +92,36 @@ export function getRumLongTasksProjection({
     },
   };
 }
+
+export function getRumErrorsProjection({
+  setup,
+}: {
+  setup: Setup & SetupTimeRange & SetupUIFilters;
+}) {
+  const { start, end, uiFiltersES } = setup;
+
+  const bool = {
+    filter: [
+      { range: rangeFilter(start, end) },
+      { term: { [AGENT_NAME]: 'rum-js' } },
+      { term: { [TRANSACTION_TYPE]: TRANSACTION_PAGE_LOAD } },
+      {
+        term: {
+          [SERVICE_LANGUAGE_NAME]: 'javascript',
+        },
+      },
+      ...uiFiltersES,
+    ],
+  };
+
+  return {
+    apm: {
+      events: [ProcessorEvent.error],
+    },
+    body: {
+      query: {
+        bool,
+      },
+    },
+  };
+}
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index f975ab177f147..0560b977e708e 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -69,17 +69,6 @@ import {
   listCustomLinksRoute,
   customLinkTransactionRoute,
 } from './settings/custom_link';
-import {
-  rumClientMetricsRoute,
-  rumPageViewsTrendRoute,
-  rumPageLoadDistributionRoute,
-  rumPageLoadDistBreakdownRoute,
-  rumServicesRoute,
-  rumVisitorsBreakdownRoute,
-  rumWebCoreVitals,
-  rumUrlSearch,
-  rumLongTaskMetrics,
-} from './rum_client';
 import {
   observabilityOverviewHasDataRoute,
   observabilityOverviewRoute,
@@ -89,6 +78,18 @@ import {
   createAnomalyDetectionJobsRoute,
   anomalyDetectionEnvironmentsRoute,
 } from './settings/anomaly_detection';
+import {
+  rumClientMetricsRoute,
+  rumJSErrors,
+  rumLongTaskMetrics,
+  rumPageLoadDistBreakdownRoute,
+  rumPageLoadDistributionRoute,
+  rumPageViewsTrendRoute,
+  rumServicesRoute,
+  rumUrlSearch,
+  rumVisitorsBreakdownRoute,
+  rumWebCoreVitals,
+} from './rum_client';
 
 const createApmApi = () => {
   const api = createApi()
@@ -165,7 +166,16 @@ const createApmApi = () => {
     .add(listCustomLinksRoute)
     .add(customLinkTransactionRoute)
 
-    // Rum Overview
+    // Observability dashboard
+    .add(observabilityOverviewHasDataRoute)
+    .add(observabilityOverviewRoute)
+
+    // Anomaly detection
+    .add(anomalyDetectionJobsRoute)
+    .add(createAnomalyDetectionJobsRoute)
+    .add(anomalyDetectionEnvironmentsRoute)
+
+    // User Experience app api routes
     .add(rumOverviewLocalFiltersRoute)
     .add(rumPageViewsTrendRoute)
     .add(rumPageLoadDistributionRoute)
@@ -174,17 +184,9 @@ const createApmApi = () => {
     .add(rumServicesRoute)
     .add(rumVisitorsBreakdownRoute)
     .add(rumWebCoreVitals)
+    .add(rumJSErrors)
     .add(rumUrlSearch)
-    .add(rumLongTaskMetrics)
-
-    // Observability dashboard
-    .add(observabilityOverviewHasDataRoute)
-    .add(observabilityOverviewRoute)
-
-    // Anomaly detection
-    .add(anomalyDetectionJobsRoute)
-    .add(createAnomalyDetectionJobsRoute)
-    .add(anomalyDetectionEnvironmentsRoute);
+    .add(rumLongTaskMetrics);
 
   return api;
 };
diff --git a/x-pack/plugins/apm/server/routes/rum_client.ts b/x-pack/plugins/apm/server/routes/rum_client.ts
index e3a846f9fb5c7..c0351991e4c0d 100644
--- a/x-pack/plugins/apm/server/routes/rum_client.ts
+++ b/x-pack/plugins/apm/server/routes/rum_client.ts
@@ -15,6 +15,7 @@ import { getPageLoadDistBreakdown } from '../lib/rum_client/get_pl_dist_breakdow
 import { getRumServices } from '../lib/rum_client/get_rum_services';
 import { getVisitorBreakdown } from '../lib/rum_client/get_visitor_breakdown';
 import { getWebCoreVitals } from '../lib/rum_client/get_web_core_vitals';
+import { getJSErrors } from '../lib/rum_client/get_js_errors';
 import { getLongTaskMetrics } from '../lib/rum_client/get_long_task_metrics';
 import { getUrlSearch } from '../lib/rum_client/get_url_search';
 
@@ -191,3 +192,27 @@ export const rumUrlSearch = createRoute(() => ({
     return getUrlSearch({ setup, urlQuery });
   },
 }));
+
+export const rumJSErrors = createRoute(() => ({
+  path: '/api/apm/rum-client/js-errors',
+  params: {
+    query: t.intersection([
+      uiFiltersRt,
+      rangeRt,
+      t.type({ pageSize: t.string, pageIndex: t.string }),
+    ]),
+  },
+  handler: async ({ context, request }) => {
+    const setup = await setupRequest(context, request);
+
+    const {
+      query: { pageSize, pageIndex },
+    } = context.params;
+
+    return getJSErrors({
+      setup,
+      pageSize: Number(pageSize),
+      pageIndex: Number(pageIndex),
+    });
+  },
+}));
diff --git a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
index 93f8b115256b4..534321201938d 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/aggregations.ts
@@ -153,6 +153,11 @@ export interface AggregationOptionsByType {
     keyed?: boolean;
     hdr?: { number_of_significant_value_digits: number };
   } & AggregationSourceOptions;
+  bucket_sort: {
+    sort?: SortOptions;
+    from?: number;
+    size?: number;
+  };
 }
 
 type AggregationType = keyof AggregationOptionsByType;
@@ -329,6 +334,7 @@ interface AggregationResponsePart<
       ? Array<{ key: number; value: number }>
       : Record<string, number>;
   };
+  bucket_sort: undefined;
 }
 
 // Type for debugging purposes. If you see an error in AggregationResponseMap
diff --git a/x-pack/plugins/apm/typings/elasticsearch/index.ts b/x-pack/plugins/apm/typings/elasticsearch/index.ts
index 064b684cf9aa6..9a05fe631e888 100644
--- a/x-pack/plugins/apm/typings/elasticsearch/index.ts
+++ b/x-pack/plugins/apm/typings/elasticsearch/index.ts
@@ -7,11 +7,22 @@
 import { SearchParams, SearchResponse } from 'elasticsearch';
 import { AggregationResponseMap, AggregationInputMap } from './aggregations';
 
+interface CollapseQuery {
+  field: string;
+  inner_hits: {
+    name: string;
+    size?: number;
+    sort?: [{ date: 'asc' | 'desc' }];
+  };
+  max_concurrent_group_searches?: number;
+}
+
 export interface ESSearchBody {
   query?: any;
   size?: number;
   aggs?: AggregationInputMap;
   track_total_hits?: boolean | number;
+  collapse?: CollapseQuery;
 }
 
 export type ESSearchRequest = Omit<SearchParams, 'body'> & {
diff --git a/x-pack/plugins/enterprise_search/common/types/index.ts b/x-pack/plugins/enterprise_search/common/types/index.ts
index d5774adc0d516..1006d39138759 100644
--- a/x-pack/plugins/enterprise_search/common/types/index.ts
+++ b/x-pack/plugins/enterprise_search/common/types/index.ts
@@ -30,3 +30,14 @@ export interface IConfiguredLimits {
   appSearch: IAppSearchConfiguredLimits;
   workplaceSearch: IWorkplaceSearchConfiguredLimits;
 }
+
+export interface IMetaPage {
+  current: number;
+  size: number;
+  total_pages: number;
+  total_results: number;
+}
+
+export interface IMeta {
+  page: IMetaPage;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts
new file mode 100644
index 0000000000000..92d14f7275185
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/constants.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import { i18n } from '@kbn/i18n';
+
+export const ADMIN = 'admin';
+export const PRIVATE = 'private';
+export const SEARCH = 'search';
+
+export const TOKEN_TYPE_DESCRIPTION = {
+  [SEARCH]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.search.description', {
+    defaultMessage: 'Public Search Keys are used for search endpoints only.',
+  }),
+  [PRIVATE]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.private.description', {
+    defaultMessage:
+      'Private API Keys are used for read and/or write access on one or more Engines.',
+  }),
+  [ADMIN]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.admin.description', {
+    defaultMessage: 'Private Admin Keys are used to interact with the Credentials API.',
+  }),
+};
+
+export const TOKEN_TYPE_DISPLAY_NAMES = {
+  [SEARCH]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.search.name', {
+    defaultMessage: 'Public Search Key',
+  }),
+  [PRIVATE]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.private.name', {
+    defaultMessage: 'Private API Key',
+  }),
+  [ADMIN]: i18n.translate('xpack.enterpriseSearch.appSearch.tokens.admin.name', {
+    defaultMessage: 'Private Admin Key',
+  }),
+};
+
+export const TOKEN_TYPE_INFO = [
+  { value: SEARCH, text: TOKEN_TYPE_DISPLAY_NAMES[SEARCH] },
+  { value: PRIVATE, text: TOKEN_TYPE_DISPLAY_NAMES[PRIVATE] },
+  { value: ADMIN, text: TOKEN_TYPE_DISPLAY_NAMES[ADMIN] },
+];
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts
new file mode 100644
index 0000000000000..c5cb8a2c61759
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.test.ts
@@ -0,0 +1,1196 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { resetContext } from 'kea';
+
+import { CredentialsLogic } from './credentials_logic';
+import { ADMIN, PRIVATE } from './constants';
+
+jest.mock('../../../shared/http', () => ({
+  HttpLogic: { values: { http: { get: jest.fn(), delete: jest.fn() } } },
+}));
+import { HttpLogic } from '../../../shared/http';
+jest.mock('../../../shared/flash_messages', () => ({
+  flashAPIErrors: jest.fn(),
+}));
+import { flashAPIErrors } from '../../../shared/flash_messages';
+
+describe('CredentialsLogic', () => {
+  const DEFAULT_VALUES = {
+    activeApiToken: {
+      name: '',
+      type: PRIVATE,
+      read: true,
+      write: true,
+      access_all_engines: true,
+    },
+    activeApiTokenIsExisting: false,
+    activeApiTokenRawName: '',
+    apiTokens: [],
+    dataLoading: true,
+    engines: [],
+    formErrors: [],
+    isCredentialsDataComplete: false,
+    isCredentialsDetailsComplete: false,
+    meta: {},
+    nameInputBlurred: false,
+    showCredentialsForm: false,
+  };
+
+  const mount = (defaults?: object) => {
+    if (!defaults) {
+      resetContext({});
+    } else {
+      resetContext({
+        defaults: {
+          enterprise_search: {
+            app_search: {
+              credentials_logic: {
+                ...defaults,
+              },
+            },
+          },
+        },
+      });
+    }
+    CredentialsLogic.mount();
+  };
+
+  const newToken = {
+    id: 1,
+    name: 'myToken',
+    type: PRIVATE,
+    read: true,
+    write: true,
+    access_all_engines: true,
+    engines: [],
+  };
+
+  const credentialsDetails = {
+    engines: [
+      { name: 'engine1', type: 'indexed', language: 'english', result_fields: [] },
+      { name: 'engine1', type: 'indexed', language: 'english', result_fields: [] },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('has expected default values', () => {
+    mount();
+    expect(CredentialsLogic.values).toEqual(DEFAULT_VALUES);
+  });
+
+  describe('addEngineName', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it("should add an engine to the active api token's engine list", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.addEngineName('newEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['someEngine', 'newEngine'] },
+        });
+      });
+
+      it("should create a new engines list if one doesn't exist", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: undefined,
+          },
+        });
+
+        CredentialsLogic.actions.addEngineName('newEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['newEngine'] },
+        });
+      });
+    });
+  });
+
+  describe('removeEngineName', () => {
+    describe('activeApiToken', () => {
+      const values = {
+        ...DEFAULT_VALUES,
+        activeApiToken: expect.any(Object),
+      };
+
+      it("should remove an engine from the active api token's engine list", () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.removeEngineName('someEngine');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['anotherEngine'] },
+        });
+      });
+
+      it('will not remove the engine if it is not found', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.removeEngineName('notfound');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: ['someEngine', 'anotherEngine'] },
+        });
+      });
+
+      it('does not throw a type error if no engines are stored in state', () => {
+        mount({
+          activeApiToken: {},
+        });
+        CredentialsLogic.actions.removeEngineName('');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { engines: [] },
+        });
+      });
+    });
+  });
+
+  describe('setAccessAllEngines', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it('should set the value of access_all_engines and clear out engines list if true', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: false,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.setAccessAllEngines(true);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, engines: [], access_all_engines: true },
+        });
+      });
+
+      it('should set the value of access_all_engines and but maintain engines list if false', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: true,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+
+        CredentialsLogic.actions.setAccessAllEngines(false);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...newToken,
+            access_all_engines: false,
+            engines: ['someEngine', 'anotherEngine'],
+          },
+        });
+      });
+    });
+  });
+
+  describe('onApiKeyDelete', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+    };
+
+    describe('apiTokens', () => {
+      it('should remove specified token from apiTokens if name matches', () => {
+        mount({
+          apiTokens: [newToken],
+        });
+
+        CredentialsLogic.actions.onApiKeyDelete(newToken.name);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [],
+        });
+      });
+
+      it('should not remove specified token from apiTokens if name does not match', () => {
+        mount({
+          apiTokens: [newToken],
+        });
+
+        CredentialsLogic.actions.onApiKeyDelete('foo');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenCreateSuccess', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      showCredentialsForm: expect.any(Boolean),
+      formErrors: expect.any(Array),
+    };
+
+    describe('apiTokens', () => {
+      const existingToken = {
+        name: 'some_token',
+        type: PRIVATE,
+      };
+
+      it('should add the provided token to the apiTokens list', () => {
+        mount({
+          apiTokens: [existingToken],
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [existingToken, newToken],
+        });
+      });
+    });
+
+    describe('activeApiToken', () => {
+      // TODO It is weird that methods like this update activeApiToken but not activeApiTokenIsExisting...
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('should reset to the default value, which closes the credentials form', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.onApiTokenCreateSuccess(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenError', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      formErrors: expect.any(Array),
+    };
+
+    describe('formErrors', () => {
+      it('should set `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.onApiTokenError(['I am the NEW error']);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: ['I am the NEW error'],
+        });
+      });
+    });
+  });
+
+  describe('onApiTokenUpdateSuccess', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      showCredentialsForm: expect.any(Boolean),
+    };
+
+    describe('apiTokens', () => {
+      const existingToken = {
+        name: 'some_token',
+        type: PRIVATE,
+      };
+
+      it('should replace the existing token with the new token by name', () => {
+        mount({
+          apiTokens: [newToken, existingToken],
+        });
+        const updatedExistingToken = {
+          ...existingToken,
+          type: ADMIN,
+        };
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess(updatedExistingToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, updatedExistingToken],
+        });
+      });
+
+      // TODO Not sure if this is a good behavior or not
+      it('if for some reason the existing token is not found, it adds a new token...', () => {
+        mount({
+          apiTokens: [newToken, existingToken],
+        });
+        const brandNewToken = {
+          name: 'brand new token',
+          type: ADMIN,
+        };
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess(brandNewToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, existingToken, brandNewToken],
+        });
+      });
+    });
+
+    describe('activeApiToken', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should reset to the default value, which effectively clears out the current form', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('should reset to the default value, which closes the credentials form', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.onApiTokenUpdateSuccess({ ...newToken, type: ADMIN });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+  });
+
+  describe('setCredentialsData', () => {
+    const meta = {
+      page: {
+        current: 1,
+        size: 1,
+        total_pages: 1,
+        total_results: 1,
+      },
+    };
+
+    const values = {
+      ...DEFAULT_VALUES,
+      apiTokens: expect.any(Array),
+      meta: expect.any(Object),
+      isCredentialsDataComplete: expect.any(Boolean),
+    };
+
+    describe('apiTokens', () => {
+      it('should be set', () => {
+        mount();
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          apiTokens: [newToken, newToken],
+        });
+      });
+    });
+
+    describe('meta', () => {
+      it('should be set', () => {
+        mount();
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          meta,
+        });
+      });
+    });
+
+    describe('isCredentialsDataComplete', () => {
+      it('should be set to true so we know that data fetching has completed', () => {
+        mount({
+          isCredentialsDataComplete: false,
+        });
+
+        CredentialsLogic.actions.setCredentialsData(meta, [newToken, newToken]);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDataComplete: true,
+        });
+      });
+    });
+  });
+
+  describe('setCredentialsDetails', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      engines: expect.any(Array),
+      isCredentialsDetailsComplete: expect.any(Boolean),
+    };
+
+    describe('isCredentialsDataComplete', () => {
+      it('should be set to true so that we know data fetching has been completed', () => {
+        mount({
+          isCredentialsDetailsComplete: false,
+        });
+
+        CredentialsLogic.actions.setCredentialsDetails(credentialsDetails);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDetailsComplete: true,
+        });
+      });
+    });
+
+    describe('engines', () => {
+      it('should set `engines` from the provided details object', () => {
+        mount({
+          engines: [],
+        });
+
+        CredentialsLogic.actions.setCredentialsDetails(credentialsDetails);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          engines: credentialsDetails.engines,
+        });
+      });
+    });
+  });
+
+  describe('setNameInputBlurred', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      nameInputBlurred: expect.any(Boolean),
+    };
+
+    describe('nameInputBlurred', () => {
+      it('should set this value', () => {
+        mount({
+          nameInputBlurred: false,
+        });
+
+        CredentialsLogic.actions.setNameInputBlurred(true);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          nameInputBlurred: true,
+        });
+      });
+    });
+  });
+
+  describe('setTokenReadWrite', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+    };
+
+    describe('activeApiToken', () => {
+      it('should set "read" or "write" values', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            read: false,
+          },
+        });
+
+        CredentialsLogic.actions.setTokenReadWrite({ name: 'read', checked: true });
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...newToken,
+            read: true,
+          },
+        });
+      });
+    });
+  });
+
+  describe('setTokenName', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+    };
+
+    describe('activeApiToken', () => {
+      it('update the name property on the activeApiToken, formatted correctly', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            name: 'bar',
+          },
+        });
+
+        CredentialsLogic.actions.setTokenName('New Name');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: { ...newToken, name: 'new-name' },
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('updates the raw name, with no formatting applied', () => {
+        mount();
+
+        CredentialsLogic.actions.setTokenName('New Name');
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: 'New Name',
+        });
+      });
+    });
+  });
+
+  describe('setTokenType', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiToken: {
+        ...newToken,
+        type: expect.any(String),
+        read: expect.any(Boolean),
+        write: expect.any(Boolean),
+        access_all_engines: expect.any(Boolean),
+        engines: expect.any(Array),
+      },
+    };
+
+    describe('activeApiToken.access_all_engines', () => {
+      describe('when value is ADMIN', () => {
+        it('updates access_all_engines to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: false,
+            },
+          });
+        });
+      });
+
+      describe('when value is not ADMIN', () => {
+        it('will maintain access_all_engines value when true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: true,
+            },
+          });
+        });
+
+        it('will maintain access_all_engines value when false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              access_all_engines: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              access_all_engines: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.engines', () => {
+      describe('when value is ADMIN', () => {
+        it('clears the array', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              engines: [{}, {}],
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              engines: [],
+            },
+          });
+        });
+      });
+
+      describe('when value is not ADMIN', () => {
+        it('will maintain engines array', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              engines: [{}, {}],
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              engines: [{}, {}],
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.write', () => {
+      describe('when value is PRIVATE', () => {
+        it('sets this to true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              write: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              write: true,
+            },
+          });
+        });
+      });
+
+      describe('when value is not PRIVATE', () => {
+        it('sets this to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              write: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              write: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.read', () => {
+      describe('when value is PRIVATE', () => {
+        it('sets this to true', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              read: false,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(PRIVATE);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              read: true,
+            },
+          });
+        });
+      });
+
+      describe('when value is not PRIVATE', () => {
+        it('sets this to false', () => {
+          mount({
+            activeApiToken: {
+              ...newToken,
+              read: true,
+            },
+          });
+
+          CredentialsLogic.actions.setTokenType(ADMIN);
+          expect(CredentialsLogic.values).toEqual({
+            ...values,
+            activeApiToken: {
+              ...values.activeApiToken,
+              read: false,
+            },
+          });
+        });
+      });
+    });
+
+    describe('activeApiToken.type', () => {
+      it('sets the type value', () => {
+        mount({
+          activeApiToken: {
+            ...newToken,
+            type: ADMIN,
+          },
+        });
+
+        CredentialsLogic.actions.setTokenType(PRIVATE);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: {
+            ...values.activeApiToken,
+            type: PRIVATE,
+          },
+        });
+      });
+    });
+  });
+
+  describe('toggleCredentialsForm', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      activeApiTokenIsExisting: expect.any(Boolean),
+      activeApiToken: expect.any(Object),
+      activeApiTokenRawName: expect.any(String),
+      formErrors: expect.any(Array),
+      showCredentialsForm: expect.any(Boolean),
+    };
+
+    describe('showCredentialsForm', () => {
+      it('should toggle `showCredentialsForm`', () => {
+        mount({
+          showCredentialsForm: false,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset `formErrors`', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+
+    describe('activeApiTokenRawName', () => {
+      it('should set `activeApiTokenRawName` to the name of the provided token', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: 'myToken',
+        });
+      });
+
+      it('should set `activeApiTokenRawName` to the default value if no token is provided', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+        });
+      });
+
+      // TODO: This fails, is this an issue? Instead of reseting back to the default value, it sets it to the previously
+      // used value... to be honest, this should probably just be a selector
+      // it('should set `activeApiTokenRawName` back to the default value if no token is provided', () => {
+      //   mount();
+      //   CredentialsLogic.actions.toggleCredentialsForm(newToken);
+      //   CredentialsLogic.actions.toggleCredentialsForm();
+      //   expect(CredentialsLogic.values).toEqual({
+      //     ...values,
+      //     activeApiTokenRawName: DEFAULT_VALUES.activeApiTokenRawName,
+      // });
+      // });
+    });
+
+    describe('activeApiToken', () => {
+      it('should set `activeApiToken` to the provided token', () => {
+        mount();
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: newToken,
+        });
+      });
+
+      it('should set `activeApiToken` to the default value if no token is provided', () => {
+        mount({
+          activeApiToken: newToken,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiToken: DEFAULT_VALUES.activeApiToken,
+        });
+      });
+    });
+
+    // TODO: This should probably just be a selector...
+    describe('activeApiTokenIsExisting', () => {
+      it('should set `activeApiTokenIsExisting` to true when the provided token has an id', () => {
+        mount({
+          activeApiTokenIsExisting: false,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm(newToken);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: true,
+        });
+      });
+
+      it('should set `activeApiTokenIsExisting` to false when the provided token has no id', () => {
+        mount({
+          activeApiTokenIsExisting: true,
+        });
+        const { id, ...newTokenWithoutId } = newToken;
+
+        CredentialsLogic.actions.toggleCredentialsForm(newTokenWithoutId);
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: false,
+        });
+      });
+
+      it('should set `activeApiTokenIsExisting` to false when no token is provided', () => {
+        mount({
+          activeApiTokenIsExisting: true,
+        });
+
+        CredentialsLogic.actions.toggleCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenIsExisting: false,
+        });
+      });
+    });
+  });
+
+  describe('hideCredentialsForm', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      showCredentialsForm: expect.any(Boolean),
+      activeApiTokenRawName: expect.any(String),
+    };
+
+    describe('activeApiTokenRawName', () => {
+      it('resets this value', () => {
+        mount({
+          activeApiTokenRawName: 'foo',
+        });
+
+        CredentialsLogic.actions.hideCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          activeApiTokenRawName: '',
+        });
+      });
+    });
+
+    describe('showCredentialsForm', () => {
+      it('resets this value', () => {
+        mount({
+          showCredentialsForm: true,
+        });
+
+        CredentialsLogic.actions.hideCredentialsForm();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          showCredentialsForm: false,
+        });
+      });
+    });
+  });
+
+  describe('resetCredentials', () => {
+    const values = {
+      ...DEFAULT_VALUES,
+      isCredentialsDetailsComplete: expect.any(Boolean),
+      isCredentialsDataComplete: expect.any(Boolean),
+      formErrors: expect.any(Array),
+    };
+
+    describe('isCredentialsDetailsComplete', () => {
+      it('should reset to false', () => {
+        mount({
+          isCredentialsDetailsComplete: true,
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDetailsComplete: false,
+        });
+      });
+    });
+
+    describe('isCredentialsDataComplete', () => {
+      it('should reset to false', () => {
+        mount({
+          isCredentialsDataComplete: true,
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          isCredentialsDataComplete: false,
+        });
+      });
+    });
+
+    describe('formErrors', () => {
+      it('should reset', () => {
+        mount({
+          formErrors: ['I am an error'],
+        });
+
+        CredentialsLogic.actions.resetCredentials();
+        expect(CredentialsLogic.values).toEqual({
+          ...values,
+          formErrors: [],
+        });
+      });
+    });
+  });
+
+  describe('initializeCredentialsData', () => {
+    it('should call fetchCredentials and fetchDetails', () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'fetchCredentials').mockImplementationOnce(() => {});
+      jest.spyOn(CredentialsLogic.actions, 'fetchDetails').mockImplementationOnce(() => {});
+
+      CredentialsLogic.actions.initializeCredentialsData();
+      expect(CredentialsLogic.actions.fetchCredentials).toHaveBeenCalled();
+      expect(CredentialsLogic.actions.fetchDetails).toHaveBeenCalled();
+    });
+  });
+
+  describe('fetchCredentials', () => {
+    const meta = {
+      page: {
+        current: 1,
+        size: 1,
+        total_pages: 1,
+        total_results: 1,
+      },
+    };
+    const results: object[] = [];
+
+    it('will call an API endpoint and set the results with the `setCredentialsData` action', async () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'setCredentialsData').mockImplementationOnce(() => {});
+      const promise = Promise.resolve({ meta, results });
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchCredentials(2);
+      expect(HttpLogic.values.http.get).toHaveBeenCalledWith('/api/app_search/credentials', {
+        query: {
+          'page[current]': 2,
+        },
+      });
+      await promise;
+      expect(CredentialsLogic.actions.setCredentialsData).toHaveBeenCalledWith(meta, results);
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchCredentials();
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+
+  describe('fetchDetails', () => {
+    it('will call an API endpoint and set the results with the `setCredentialsDetails` action', async () => {
+      mount();
+      jest
+        .spyOn(CredentialsLogic.actions, 'setCredentialsDetails')
+        .mockImplementationOnce(() => {});
+      const promise = Promise.resolve(credentialsDetails);
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchDetails();
+      expect(HttpLogic.values.http.get).toHaveBeenCalledWith('/api/app_search/credentials/details');
+      await promise;
+      expect(CredentialsLogic.actions.setCredentialsDetails).toHaveBeenCalledWith(
+        credentialsDetails
+      );
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.get as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.fetchDetails();
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+
+  describe('deleteApiKey', () => {
+    const tokenName = 'abc123';
+
+    it('will call an API endpoint and set the results with the `onApiKeyDelete` action', async () => {
+      mount();
+      jest.spyOn(CredentialsLogic.actions, 'onApiKeyDelete').mockImplementationOnce(() => {});
+      const promise = Promise.resolve();
+      (HttpLogic.values.http.delete as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.deleteApiKey(tokenName);
+      expect(HttpLogic.values.http.delete).toHaveBeenCalledWith(
+        `/api/app_search/credentials/${tokenName}`
+      );
+      await promise;
+      expect(CredentialsLogic.actions.onApiKeyDelete).toHaveBeenCalledWith(tokenName);
+    });
+
+    it('handles errors', async () => {
+      mount();
+      const promise = Promise.reject('An error occured');
+      (HttpLogic.values.http.delete as jest.Mock).mockReturnValue(promise);
+
+      CredentialsLogic.actions.deleteApiKey(tokenName);
+      try {
+        await promise;
+      } catch {
+        expect(flashAPIErrors).toHaveBeenCalledWith('An error occured');
+      }
+    });
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts
new file mode 100644
index 0000000000000..43f2731711823
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/credentials_logic.ts
@@ -0,0 +1,264 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { kea, MakeLogicType } from 'kea';
+
+import { formatApiName } from '../../utils/format_api_name';
+import { ADMIN, PRIVATE } from './constants';
+
+import { HttpLogic } from '../../../shared/http';
+import { IMeta } from '../../../../../common/types';
+import { flashAPIErrors } from '../../../shared/flash_messages';
+import { IEngine } from '../../types';
+import { IApiToken, ICredentialsDetails } from './types';
+
+interface ITokenReadWrite {
+  name: 'read' | 'write';
+  checked: boolean;
+}
+
+const defaultApiToken: IApiToken = {
+  name: '',
+  type: PRIVATE,
+  read: true,
+  write: true,
+  access_all_engines: true,
+};
+
+// TODO CREATE_MESSAGE, UPDATE_MESSAGE, and DELETE_MESSAGE from ent-search
+
+export interface ICredentialsLogicActions {
+  addEngineName(engineName: string): string;
+  onApiKeyDelete(tokenName: string): string;
+  onApiTokenCreateSuccess(apiToken: IApiToken): IApiToken;
+  onApiTokenError(formErrors: string[]): string[];
+  onApiTokenUpdateSuccess(apiToken: IApiToken): IApiToken;
+  removeEngineName(engineName: string): string;
+  setAccessAllEngines(accessAll: boolean): boolean;
+  setCredentialsData(meta: IMeta, apiTokens: IApiToken[]): { meta: IMeta; apiTokens: IApiToken[] };
+  setCredentialsDetails(details: ICredentialsDetails): ICredentialsDetails;
+  setNameInputBlurred(isBlurred: boolean): boolean;
+  setTokenReadWrite(tokenReadWrite: ITokenReadWrite): ITokenReadWrite;
+  setTokenName(name: string): string;
+  setTokenType(tokenType: string): string;
+  toggleCredentialsForm(apiToken?: IApiToken): IApiToken;
+  hideCredentialsForm(): { value: boolean };
+  resetCredentials(): { value: boolean };
+  initializeCredentialsData(): { value: boolean };
+  fetchCredentials(page?: number): number;
+  fetchDetails(): { value: boolean };
+  deleteApiKey(tokenName: string): string;
+}
+
+export interface ICredentialsLogicValues {
+  activeApiToken: IApiToken;
+  activeApiTokenIsExisting: boolean;
+  activeApiTokenRawName: string;
+  apiTokens: IApiToken[];
+  dataLoading: boolean;
+  engines: IEngine[];
+  formErrors: string[];
+  isCredentialsDataComplete: boolean;
+  isCredentialsDetailsComplete: boolean;
+  fullEngineAccessChecked: boolean;
+  meta: Partial<IMeta>;
+  nameInputBlurred: boolean;
+  showCredentialsForm: boolean;
+}
+
+export const CredentialsLogic = kea<
+  MakeLogicType<ICredentialsLogicValues, ICredentialsLogicActions>
+>({
+  path: ['enterprise_search', 'app_search', 'credentials_logic'],
+  actions: () => ({
+    addEngineName: (engineName) => engineName,
+    onApiKeyDelete: (tokenName) => tokenName,
+    onApiTokenCreateSuccess: (apiToken) => apiToken,
+    onApiTokenError: (formErrors) => formErrors,
+    onApiTokenUpdateSuccess: (apiToken) => apiToken,
+    removeEngineName: (engineName) => engineName,
+    setAccessAllEngines: (accessAll) => accessAll,
+    setCredentialsData: (meta, apiTokens) => ({ meta, apiTokens }),
+    setCredentialsDetails: (details) => details,
+    setNameInputBlurred: (nameInputBlurred) => nameInputBlurred,
+    setTokenReadWrite: ({ name, checked }) => ({
+      name,
+      checked,
+    }),
+    setTokenName: (name) => name,
+    setTokenType: (tokenType) => tokenType,
+    toggleCredentialsForm: (apiToken = { ...defaultApiToken }) => apiToken,
+    hideCredentialsForm: false,
+    resetCredentials: false,
+    initializeCredentialsData: true,
+    fetchCredentials: (page) => page,
+    fetchDetails: true,
+    deleteApiKey: (tokenName) => tokenName,
+  }),
+  reducers: () => ({
+    apiTokens: [
+      [],
+      {
+        setCredentialsData: (_, { apiTokens }) => apiTokens,
+        onApiTokenCreateSuccess: (apiTokens, apiToken) => [...apiTokens, apiToken],
+        onApiTokenUpdateSuccess: (apiTokens, apiToken) => [
+          ...apiTokens.filter((token) => token.name !== apiToken.name),
+          apiToken,
+        ],
+        onApiKeyDelete: (apiTokens, tokenName) =>
+          apiTokens.filter((token) => token.name !== tokenName),
+      },
+    ],
+    meta: [
+      {},
+      {
+        setCredentialsData: (_, { meta }) => meta,
+      },
+    ],
+    isCredentialsDetailsComplete: [
+      false,
+      {
+        setCredentialsDetails: () => true,
+        resetCredentials: () => false,
+      },
+    ],
+    isCredentialsDataComplete: [
+      false,
+      {
+        setCredentialsData: () => true,
+        resetCredentials: () => false,
+      },
+    ],
+    engines: [
+      [],
+      {
+        setCredentialsDetails: (_, { engines }) => engines,
+      },
+    ],
+    nameInputBlurred: [
+      false,
+      {
+        setNameInputBlurred: (_, nameInputBlurred) => nameInputBlurred,
+      },
+    ],
+    activeApiToken: [
+      defaultApiToken,
+      {
+        addEngineName: (activeApiToken, engineName) => ({
+          ...activeApiToken,
+          engines: [...(activeApiToken.engines || []), engineName],
+        }),
+        removeEngineName: (activeApiToken, engineName) => ({
+          ...activeApiToken,
+          engines: (activeApiToken.engines || []).filter((name) => name !== engineName),
+        }),
+        setAccessAllEngines: (activeApiToken, accessAll) => ({
+          ...activeApiToken,
+          access_all_engines: accessAll,
+          engines: accessAll ? [] : activeApiToken.engines,
+        }),
+        onApiTokenCreateSuccess: () => defaultApiToken,
+        onApiTokenUpdateSuccess: () => defaultApiToken,
+        setTokenName: (activeApiToken, name) => ({ ...activeApiToken, name: formatApiName(name) }),
+        setTokenReadWrite: (activeApiToken, { name, checked }) => ({
+          ...activeApiToken,
+          [name]: checked,
+        }),
+        setTokenType: (activeApiToken, tokenType) => ({
+          ...activeApiToken,
+          access_all_engines: tokenType === ADMIN ? false : activeApiToken.access_all_engines,
+          engines: tokenType === ADMIN ? [] : activeApiToken.engines,
+          write: tokenType === PRIVATE,
+          read: tokenType === PRIVATE,
+          type: tokenType,
+        }),
+        toggleCredentialsForm: (_, activeApiToken) => activeApiToken,
+      },
+    ],
+    activeApiTokenRawName: [
+      '',
+      {
+        setTokenName: (_, activeApiTokenRawName) => activeApiTokenRawName,
+        toggleCredentialsForm: (activeApiTokenRawName, activeApiToken) =>
+          activeApiToken.name || activeApiTokenRawName,
+        hideCredentialsForm: () => '',
+        onApiTokenCreateSuccess: () => '',
+        onApiTokenUpdateSuccess: () => '',
+      },
+    ],
+    activeApiTokenIsExisting: [
+      false,
+      {
+        toggleCredentialsForm: (_, activeApiToken) => !!activeApiToken.id,
+      },
+    ],
+    showCredentialsForm: [
+      false,
+      {
+        toggleCredentialsForm: (showCredentialsForm) => !showCredentialsForm,
+        hideCredentialsForm: () => false,
+        onApiTokenCreateSuccess: () => false,
+        onApiTokenUpdateSuccess: () => false,
+      },
+    ],
+    formErrors: [
+      [],
+      {
+        onApiTokenError: (_, formErrors) => formErrors,
+        onApiTokenCreateSuccess: () => [],
+        toggleCredentialsForm: () => [],
+        resetCredentials: () => [],
+      },
+    ],
+  }),
+  selectors: ({ selectors }) => ({
+    // TODO fullEngineAccessChecked from ent-search
+    dataLoading: [
+      () => [selectors.isCredentialsDetailsComplete, selectors.isCredentialsDataComplete],
+      (isCredentialsDetailsComplete, isCredentialsDataComplete) => {
+        return isCredentialsDetailsComplete === false || isCredentialsDataComplete === false;
+      },
+    ],
+  }),
+  listeners: ({ actions, values }) => ({
+    initializeCredentialsData: () => {
+      actions.fetchCredentials();
+      actions.fetchDetails();
+    },
+    fetchCredentials: async (page = 1) => {
+      try {
+        const { http } = HttpLogic.values;
+        const query = { 'page[current]': page };
+        const response = await http.get('/api/app_search/credentials', { query });
+        actions.setCredentialsData(response.meta, response.results);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    fetchDetails: async () => {
+      try {
+        const { http } = HttpLogic.values;
+        const response = await http.get('/api/app_search/credentials/details');
+
+        actions.setCredentialsDetails(response);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    deleteApiKey: async (tokenName) => {
+      try {
+        const { http } = HttpLogic.values;
+        await http.delete(`/api/app_search/credentials/${tokenName}`);
+
+        actions.onApiKeyDelete(tokenName);
+      } catch (e) {
+        flashAPIErrors(e);
+      }
+    },
+    // TODO onApiTokenChange from ent-search
+    // TODO onEngineSelect from ent-search
+  }),
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.ts
new file mode 100644
index 0000000000000..9b09bd13a9086
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/components/credentials/types.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 { IEngine } from '../../types';
+
+export interface ICredentialsDetails {
+  engines: IEngine[];
+}
+
+export interface IApiToken {
+  access_all_engines?: boolean;
+  key?: string;
+  engines?: string[];
+  id?: number;
+  name: string;
+  read?: boolean;
+  type: string;
+  write?: boolean;
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
index 3cabc1051c74a..568a0a3365982 100644
--- a/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/types.ts
@@ -6,3 +6,10 @@
 
 export * from '../../../common/types/app_search';
 export { IRole, TRole, TAbility } from './utils/role';
+
+export interface IEngine {
+  name: string;
+  type: string;
+  language: string;
+  result_fields: object[];
+}
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts
new file mode 100644
index 0000000000000..352ff237e4f08
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.test.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { formatApiName } from '.';
+
+describe('formatApiName', () => {
+  it('replaces non-alphanumeric characters with dashes', () => {
+    expect(formatApiName('f1  &&o$ 1  2 *&%da')).toEqual('f1-o-1-2-da');
+  });
+
+  it('strips leading and trailing non-alphanumeric characters', () => {
+    expect(formatApiName('$$hello world**')).toEqual('hello-world');
+  });
+
+  it('strips leading and trailing whitespace', () => {
+    expect(formatApiName('  test  ')).toEqual('test');
+  });
+
+  it('lowercases text', () => {
+    expect(formatApiName('SomeName')).toEqual('somename');
+  });
+});
diff --git a/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts
new file mode 100644
index 0000000000000..cd1b1cfe15637
--- /dev/null
+++ b/x-pack/plugins/enterprise_search/public/applications/app_search/utils/format_api_name/index.ts
@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const formatApiName = (rawName: string) =>
+  rawName
+    .trim()
+    .replace(/[^a-zA-Z0-9]+/g, '-') // Replace all special/non-alphanumerical characters with dashes
+    .replace(/^[-]+|[-]+$/g, '') // Strip all leading and trailing dashes
+    .toLowerCase();
diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
index 000e6d63b5999..6b5f4a05b3aa6 100644
--- a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
+++ b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.test.ts
@@ -25,41 +25,6 @@ describe('credentials routes', () => {
     it('creates a request handler', () => {
       expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
         path: '/as/credentials/collection',
-        hasValidData: expect.any(Function),
-      });
-    });
-
-    describe('hasValidData', () => {
-      it('should correctly validate that a response has data', () => {
-        const response = {
-          meta: {
-            page: {
-              current: 1,
-              total_pages: 1,
-              total_results: 1,
-              size: 25,
-            },
-          },
-          results: [
-            {
-              id: 'loco_moco_account_id:5f3575de2b76ff13405f3155|name:asdfasdf',
-              key: 'search-fe49u2z8d5gvf9s4ekda2ad4',
-              name: 'asdfasdf',
-              type: 'search',
-              access_all_engines: true,
-            },
-          ],
-        };
-
-        expect(mockRequestHandler.hasValidData(response)).toBe(true);
-      });
-
-      it('should correctly validate that a response does not have data', () => {
-        const response = {
-          foo: 'bar',
-        };
-
-        expect(mockRequestHandler.hasValidData(response)).toBe(false);
       });
     });
 
@@ -75,4 +40,52 @@ describe('credentials routes', () => {
       });
     });
   });
+
+  describe('GET /api/app_search/credentials/details', () => {
+    let mockRouter: MockRouter;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockRouter = new MockRouter({ method: 'get', payload: 'query' });
+
+      registerCredentialsRoutes({
+        ...mockDependencies,
+        router: mockRouter.router,
+      });
+    });
+
+    it('creates a request handler', () => {
+      expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
+        path: '/as/credentials/details',
+      });
+    });
+  });
+
+  describe('DELETE /api/app_search/credentials/{name}', () => {
+    let mockRouter: MockRouter;
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+      mockRouter = new MockRouter({ method: 'delete', payload: 'params' });
+
+      registerCredentialsRoutes({
+        ...mockDependencies,
+        router: mockRouter.router,
+      });
+    });
+
+    it('creates a request to enterprise search', () => {
+      const mockRequest = {
+        params: {
+          name: 'abc123',
+        },
+      };
+
+      mockRouter.callRoute(mockRequest);
+
+      expect(mockRequestHandler.createRequest).toHaveBeenCalledWith({
+        path: '/as/credentials/abc123',
+      });
+    });
+  });
 });
diff --git a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
index 432f54c8e5b1c..0f2c1133192c5 100644
--- a/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
+++ b/x-pack/plugins/enterprise_search/server/routes/app_search/credentials.ts
@@ -8,25 +8,6 @@ import { schema } from '@kbn/config-schema';
 
 import { IRouteDependencies } from '../../plugin';
 
-interface ICredential {
-  id: string;
-  key: string;
-  name: string;
-  type: string;
-  access_all_engines: boolean;
-}
-interface ICredentialsResponse {
-  results: ICredential[];
-  meta?: {
-    page?: {
-      current: number;
-      total_results: number;
-      total_pages: number;
-      size: number;
-    };
-  };
-}
-
 export function registerCredentialsRoutes({
   router,
   enterpriseSearchRequestHandler,
@@ -42,9 +23,30 @@ export function registerCredentialsRoutes({
     },
     enterpriseSearchRequestHandler.createRequest({
       path: '/as/credentials/collection',
-      hasValidData: (body?: ICredentialsResponse) => {
-        return Array.isArray(body?.results) && typeof body?.meta?.page?.total_results === 'number';
-      },
     })
   );
+  router.get(
+    {
+      path: '/api/app_search/credentials/details',
+      validate: false,
+    },
+    enterpriseSearchRequestHandler.createRequest({
+      path: '/as/credentials/details',
+    })
+  );
+  router.delete(
+    {
+      path: '/api/app_search/credentials/{name}',
+      validate: {
+        params: schema.object({
+          name: schema.string(),
+        }),
+      },
+    },
+    async (context, request, response) => {
+      return enterpriseSearchRequestHandler.createRequest({
+        path: `/as/credentials/${request.params.name}`,
+      })(context, request, response);
+    }
+  );
 }
diff --git a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx
index a800bd690f710..a85d7a310bc06 100644
--- a/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/add_comment/index.test.tsx
@@ -17,8 +17,7 @@ import { usePostComment } from '../../containers/use_post_comment';
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
 import { useFormData } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data';
 
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
index e6e0823214195..e301e80c9561d 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases/index.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment-timezone';
-
+import { waitFor } from '@testing-library/react';
 import '../../../common/mock/match_media';
 import { AllCases } from '.';
 import { TestProviders } from '../../../common/mock';
@@ -85,16 +85,6 @@ describe('AllCases', () => {
 
   let navigateToApp: jest.Mock;
 
-  /* eslint-disable no-console */
-  // Silence until enzyme fixed to use ReactTestUtils.act()
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
   beforeEach(() => {
     jest.clearAllMocks();
     navigateToApp = jest.fn();
@@ -106,36 +96,38 @@ describe('AllCases', () => {
     moment.tz.setDefault('UTC');
   });
 
-  it('should render AllCases', () => {
+  it('should render AllCases', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().prop('href')).toEqual(
-      `/${useGetCasesMockState.data.cases[0].id}`
-    );
-    expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().text()).toEqual(
-      useGetCasesMockState.data.cases[0].title
-    );
-    expect(
-      wrapper.find(`span[data-test-subj="case-table-column-tags-0"]`).first().prop('title')
-    ).toEqual(useGetCasesMockState.data.cases[0].tags[0]);
-    expect(wrapper.find(`[data-test-subj="case-table-column-createdBy"]`).first().text()).toEqual(
-      useGetCasesMockState.data.cases[0].createdBy.fullName
-    );
-    expect(
-      wrapper
-        .find(`[data-test-subj="case-table-column-createdAt"]`)
-        .first()
-        .childAt(0)
-        .prop('value')
-    ).toBe(useGetCasesMockState.data.cases[0].createdAt);
-    expect(wrapper.find(`[data-test-subj="case-table-case-count"]`).first().text()).toEqual(
-      'Showing 10 cases'
-    );
+    await waitFor(() => {
+      expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().prop('href')).toEqual(
+        `/${useGetCasesMockState.data.cases[0].id}`
+      );
+      expect(wrapper.find(`a[data-test-subj="case-details-link"]`).first().text()).toEqual(
+        useGetCasesMockState.data.cases[0].title
+      );
+      expect(
+        wrapper.find(`span[data-test-subj="case-table-column-tags-0"]`).first().prop('title')
+      ).toEqual(useGetCasesMockState.data.cases[0].tags[0]);
+      expect(wrapper.find(`[data-test-subj="case-table-column-createdBy"]`).first().text()).toEqual(
+        useGetCasesMockState.data.cases[0].createdBy.fullName
+      );
+      expect(
+        wrapper
+          .find(`[data-test-subj="case-table-column-createdAt"]`)
+          .first()
+          .childAt(0)
+          .prop('value')
+      ).toBe(useGetCasesMockState.data.cases[0].createdAt);
+      expect(wrapper.find(`[data-test-subj="case-table-case-count"]`).first().text()).toEqual(
+        'Showing 10 cases'
+      );
+    });
   });
-  it('should render empty fields', () => {
+  it('should render empty fields', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       data: {
@@ -166,53 +158,63 @@ describe('AllCases', () => {
       expect(column.find('.euiTableRowCell--hideForDesktop').text()).toEqual(columnName);
       expect(column.find('span').text()).toEqual(emptyTag);
     };
-    getCasesColumns([], 'open', false).map((i, key) => i.name != null && checkIt(`${i.name}`, key));
+    await waitFor(() => {
+      getCasesColumns([], 'open', false).map(
+        (i, key) => i.name != null && checkIt(`${i.name}`, key)
+      );
+    });
   });
 
-  it('should not render case link or actions on modal=true', () => {
+  it('should not render case link or actions on modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={true} />
       </TestProviders>
     );
-    const checkIt = (columnName: string) => {
-      expect(columnName).not.toEqual(i18n.ACTIONS);
-    };
-    getCasesColumns([], 'open', true).map((i, key) => i.name != null && checkIt(`${i.name}`));
-    expect(wrapper.find(`a[data-test-subj="case-details-link"]`).exists()).toBeFalsy();
+    await waitFor(() => {
+      const checkIt = (columnName: string) => {
+        expect(columnName).not.toEqual(i18n.ACTIONS);
+      };
+      getCasesColumns([], 'open', true).map((i, key) => i.name != null && checkIt(`${i.name}`));
+      expect(wrapper.find(`a[data-test-subj="case-details-link"]`).exists()).toBeFalsy();
+    });
   });
 
-  it('should tableHeaderSortButton AllCases', () => {
+  it('should tableHeaderSortButton AllCases', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="tableHeaderSortButton"]').first().simulate('click');
-    expect(setQueryParams).toBeCalledWith({
-      page: 1,
-      perPage: 5,
-      sortField: 'createdAt',
-      sortOrder: 'asc',
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="tableHeaderSortButton"]').first().simulate('click');
+      expect(setQueryParams).toBeCalledWith({
+        page: 1,
+        perPage: 5,
+        sortField: 'createdAt',
+        sortOrder: 'asc',
+      });
     });
   });
-  it('closes case when row action icon clicked', () => {
+  it('closes case when row action icon clicked', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="action-close"]').first().simulate('click');
-    const firstCase = useGetCasesMockState.data.cases[0];
-    expect(dispatchUpdateCaseProperty).toBeCalledWith({
-      caseId: firstCase.id,
-      updateKey: 'status',
-      updateValue: 'closed',
-      refetchCasesStatus: fetchCasesStatus,
-      version: firstCase.version,
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="action-close"]').first().simulate('click');
+      const firstCase = useGetCasesMockState.data.cases[0];
+      expect(dispatchUpdateCaseProperty).toBeCalledWith({
+        caseId: firstCase.id,
+        updateKey: 'status',
+        updateValue: 'closed',
+        refetchCasesStatus: fetchCasesStatus,
+        version: firstCase.version,
+      });
     });
   });
-  it('opens case when row action icon clicked', () => {
+  it('opens case when row action icon clicked', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       filterOptions: { ...defaultGetCases.filterOptions, status: 'closed' },
@@ -223,17 +225,19 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="action-open"]').first().simulate('click');
-    const firstCase = useGetCasesMockState.data.cases[0];
-    expect(dispatchUpdateCaseProperty).toBeCalledWith({
-      caseId: firstCase.id,
-      updateKey: 'status',
-      updateValue: 'open',
-      refetchCasesStatus: fetchCasesStatus,
-      version: firstCase.version,
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="action-open"]').first().simulate('click');
+      const firstCase = useGetCasesMockState.data.cases[0];
+      expect(dispatchUpdateCaseProperty).toBeCalledWith({
+        caseId: firstCase.id,
+        updateKey: 'status',
+        updateValue: 'open',
+        refetchCasesStatus: fetchCasesStatus,
+        version: firstCase.version,
+      });
     });
   });
-  it('Bulk delete', () => {
+  it('Bulk delete', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       selectedCases: useGetCasesMockState.data.cases,
@@ -254,21 +258,23 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
-    wrapper.find('[data-test-subj="cases-bulk-delete-button"]').first().simulate('click');
-    expect(handleToggleModal).toBeCalled();
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
+      wrapper.find('[data-test-subj="cases-bulk-delete-button"]').first().simulate('click');
+      expect(handleToggleModal).toBeCalled();
 
-    wrapper
-      .find(
-        '[data-test-subj="confirm-delete-case-modal"] [data-test-subj="confirmModalConfirmButton"]'
-      )
-      .last()
-      .simulate('click');
-    expect(handleOnDeleteConfirm.mock.calls[0][0]).toStrictEqual(
-      useGetCasesMockState.data.cases.map(({ id }) => ({ id }))
-    );
+      wrapper
+        .find(
+          '[data-test-subj="confirm-delete-case-modal"] [data-test-subj="confirmModalConfirmButton"]'
+        )
+        .last()
+        .simulate('click');
+      expect(handleOnDeleteConfirm.mock.calls[0][0]).toStrictEqual(
+        useGetCasesMockState.data.cases.map(({ id }) => ({ id }))
+      );
+    });
   });
-  it('Bulk close status update', () => {
+  it('Bulk close status update', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       selectedCases: useGetCasesMockState.data.cases,
@@ -279,11 +285,13 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
-    wrapper.find('[data-test-subj="cases-bulk-close-button"]').first().simulate('click');
-    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'closed');
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
+      wrapper.find('[data-test-subj="cases-bulk-close-button"]').first().simulate('click');
+      expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'closed');
+    });
   });
-  it('Bulk open status update', () => {
+  it('Bulk open status update', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       selectedCases: useGetCasesMockState.data.cases,
@@ -298,11 +306,13 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
-    wrapper.find('[data-test-subj="cases-bulk-open-button"]').first().simulate('click');
-    expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'open');
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="case-table-bulk-actions"] button').first().simulate('click');
+      wrapper.find('[data-test-subj="cases-bulk-open-button"]').first().simulate('click');
+      expect(updateBulkStatus).toBeCalledWith(useGetCasesMockState.data.cases, 'open');
+    });
   });
-  it('isDeleted is true, refetch', () => {
+  it('isDeleted is true, refetch', async () => {
     useDeleteCasesMock.mockReturnValue({
       ...defaultDeleteCases,
       isDeleted: true,
@@ -313,11 +323,13 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    expect(refetchCases).toBeCalled();
-    expect(fetchCasesStatus).toBeCalled();
-    expect(dispatchResetIsDeleted).toBeCalled();
+    await waitFor(() => {
+      expect(refetchCases).toBeCalled();
+      expect(fetchCasesStatus).toBeCalled();
+      expect(dispatchResetIsDeleted).toBeCalled();
+    });
   });
-  it('isUpdated is true, refetch', () => {
+  it('isUpdated is true, refetch', async () => {
     useUpdateCasesMock.mockReturnValue({
       ...defaultUpdateCases,
       isUpdated: true,
@@ -328,42 +340,51 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} />
       </TestProviders>
     );
-    expect(refetchCases).toBeCalled();
-    expect(fetchCasesStatus).toBeCalled();
-    expect(dispatchResetIsUpdated).toBeCalled();
+    await waitFor(() => {
+      expect(refetchCases).toBeCalled();
+      expect(fetchCasesStatus).toBeCalled();
+      expect(dispatchResetIsUpdated).toBeCalled();
+    });
   });
 
-  it('should not render header when modal=true', () => {
+  it('should not render header when modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={true} />
       </TestProviders>
     );
-
-    expect(wrapper.find('[data-test-subj="all-cases-header"]').exists()).toBe(false);
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="all-cases-header"]').exists()).toBe(false);
+    });
   });
 
-  it('should not render table utility bar when modal=true', () => {
+  it('should not render table utility bar when modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={true} />
       </TestProviders>
     );
-
-    expect(wrapper.find('[data-test-subj="case-table-utility-bar-actions"]').exists()).toBe(false);
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="case-table-utility-bar-actions"]').exists()).toBe(
+        false
+      );
+    });
   });
 
-  it('case table should not be selectable when modal=true', () => {
+  it('case table should not be selectable when modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={true} />
       </TestProviders>
     );
-
-    expect(wrapper.find('[data-test-subj="cases-table"]').first().prop('isSelectable')).toBe(false);
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="cases-table"]').first().prop('isSelectable')).toBe(
+        false
+      );
+    });
   });
 
-  it('should call onRowClick with no cases and modal=true', () => {
+  it('should call onRowClick with no cases and modal=true', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       data: {
@@ -378,12 +399,13 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} isModal={true} onRowClick={onRowClick} />
       </TestProviders>
     );
-
-    wrapper.find('[data-test-subj="cases-table-add-case"]').first().simulate('click');
-    expect(onRowClick).toHaveBeenCalled();
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="cases-table-add-case"]').first().simulate('click');
+      expect(onRowClick).toHaveBeenCalled();
+    });
   });
 
-  it('should call navigateToApp with no cases and modal=false', () => {
+  it('should call navigateToApp with no cases and modal=false', async () => {
     useGetCasesMock.mockReturnValue({
       ...defaultGetCases,
       data: {
@@ -398,30 +420,33 @@ describe('AllCases', () => {
         <AllCases userCanCrud={true} isModal={false} />
       </TestProviders>
     );
-
-    wrapper.find('[data-test-subj="cases-table-add-case"]').first().simulate('click');
-    expect(navigateToApp).toHaveBeenCalledWith('securitySolution:case', { path: '/create' });
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="cases-table-add-case"]').first().simulate('click');
+      expect(navigateToApp).toHaveBeenCalledWith('securitySolution:case', { path: '/create' });
+    });
   });
 
-  it('should call onRowClick when clicking a case with modal=true', () => {
+  it('should call onRowClick when clicking a case with modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={true} onRowClick={onRowClick} />
       </TestProviders>
     );
-
-    wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
-    expect(onRowClick).toHaveBeenCalledWith('1');
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
+      expect(onRowClick).toHaveBeenCalledWith('1');
+    });
   });
 
-  it('should NOT call onRowClick when clicking a case with modal=true', () => {
+  it('should NOT call onRowClick when clicking a case with modal=true', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCases userCanCrud={true} isModal={false} />
       </TestProviders>
     );
-
-    wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
-    expect(onRowClick).not.toHaveBeenCalled();
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="cases-table-row-1"]').first().simulate('click');
+      expect(onRowClick).not.toHaveBeenCalled();
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
index b93de014f5c18..725759068a3ea 100644
--- a/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/all_cases_modal/index.test.tsx
@@ -5,6 +5,7 @@
  */
 import { mount } from 'enzyme';
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import '../../../common/mock/match_media';
 import { AllCasesModal } from '.';
 import { TestProviders } from '../../../common/mock';
@@ -96,16 +97,6 @@ describe('AllCasesModal', () => {
     dispatchResetIsUpdated,
     updateBulkStatus,
   };
-  /* eslint-disable no-console */
-  // Silence until enzyme fixed to use ReactTestUtils.act()
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
   beforeEach(() => {
     jest.resetAllMocks();
     useUpdateCasesMock.mockImplementation(() => defaultUpdateCases);
@@ -114,41 +105,49 @@ describe('AllCasesModal', () => {
     useGetCasesStatusMock.mockImplementation(() => defaultCasesStatus);
   });
 
-  it('renders with unselectable rows', () => {
+  it('renders with unselectable rows', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCasesModal {...defaultProps} />
       </TestProviders>
     );
-    expect(wrapper.find(`[data-test-subj='all-cases-modal']`).exists()).toBeTruthy();
-    expect(wrapper.find(EuiTableRow).first().prop('isSelectable')).toBeFalsy();
+    await waitFor(() => {
+      expect(wrapper.find(`[data-test-subj='all-cases-modal']`).exists()).toBeTruthy();
+      expect(wrapper.find(EuiTableRow).first().prop('isSelectable')).toBeFalsy();
+    });
   });
-  it('does not render modal if showCaseModal: false', () => {
+  it('does not render modal if showCaseModal: false', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCasesModal {...{ ...defaultProps, showCaseModal: false }} />
       </TestProviders>
     );
-    expect(wrapper.find(`[data-test-subj='all-cases-modal']`).exists()).toBeFalsy();
+    await waitFor(() => {
+      expect(wrapper.find(`[data-test-subj='all-cases-modal']`).exists()).toBeFalsy();
+    });
   });
-  it('onRowClick called when row is clicked', () => {
+  it('onRowClick called when row is clicked', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCasesModal {...defaultProps} />
       </TestProviders>
     );
-    const firstRow = wrapper.find(EuiTableRow).first();
-    firstRow.simulate('click');
-    expect(onRowClick.mock.calls[0][0]).toEqual(basicCaseId);
+    await waitFor(() => {
+      const firstRow = wrapper.find(EuiTableRow).first();
+      firstRow.simulate('click');
+      expect(onRowClick.mock.calls[0][0]).toEqual(basicCaseId);
+    });
   });
-  it('Closing modal calls onCloseCaseModal', () => {
+  it('Closing modal calls onCloseCaseModal', async () => {
     const wrapper = mount(
       <TestProviders>
         <AllCasesModal {...defaultProps} />
       </TestProviders>
     );
-    const modalClose = wrapper.find('.euiModal__closeIcon').first();
-    modalClose.simulate('click');
-    expect(onCloseCaseModal).toBeCalled();
+    await waitFor(() => {
+      const modalClose = wrapper.find('.euiModal__closeIcon').first();
+      modalClose.simulate('click');
+      expect(onCloseCaseModal).toBeCalled();
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
index 246df1c94b817..3859b4527991b 100644
--- a/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/case_view/index.test.tsx
@@ -15,9 +15,7 @@ import { TestProviders } from '../../../common/mock';
 import { useUpdateCase } from '../../containers/use_update_case';
 import { useGetCase } from '../../containers/use_get_case';
 import { useGetCaseUserActions } from '../../containers/use_get_case_user_actions';
-
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 import { useConnectors } from '../../containers/configure/use_connectors';
 import { connectorsMock } from '../../containers/configure/mock';
@@ -29,6 +27,7 @@ jest.mock('../../containers/use_get_case_user_actions');
 jest.mock('../../containers/use_get_case');
 jest.mock('../../containers/configure/use_connectors');
 jest.mock('../../containers/use_post_push_to_service');
+jest.mock('../user_action_tree/user_action_timestamp');
 
 const useUpdateCaseMock = useUpdateCase as jest.Mock;
 const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
@@ -63,16 +62,6 @@ describe('CaseView ', () => {
     updateCase,
     fetchCase,
   };
-  /* eslint-disable no-console */
-  // Silence until enzyme fixed to use ReactTestUtils.act()
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
 
   const defaultUpdateCaseState = {
     isLoading: false,
@@ -96,6 +85,7 @@ describe('CaseView ', () => {
   beforeEach(() => {
     jest.resetAllMocks();
     useUpdateCaseMock.mockImplementation(() => defaultUpdateCaseState);
+
     jest.spyOn(routeData, 'useLocation').mockReturnValue(mockLocation);
     useGetCaseUserActionsMock.mockImplementation(() => defaultUseGetCaseUserActions);
     usePostPushToServiceMock.mockImplementation(() => ({ isLoading: false, postPushToService }));
@@ -191,7 +181,7 @@ describe('CaseView ', () => {
     });
   });
 
-  it('should display EditableTitle isLoading', () => {
+  it('should display EditableTitle isLoading', async () => {
     useUpdateCaseMock.mockImplementation(() => ({
       ...defaultUpdateCaseState,
       isLoading: true,
@@ -204,13 +194,17 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(wrapper.find('[data-test-subj="editable-title-loading"]').first().exists()).toBeTruthy();
-    expect(
-      wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()
-    ).toBeFalsy();
+    await waitFor(() => {
+      expect(
+        wrapper.find('[data-test-subj="editable-title-loading"]').first().exists()
+      ).toBeTruthy();
+      expect(
+        wrapper.find('[data-test-subj="editable-title-edit-icon"]').first().exists()
+      ).toBeFalsy();
+    });
   });
 
-  it('should display Toggle Status isLoading', () => {
+  it('should display Toggle Status isLoading', async () => {
     useUpdateCaseMock.mockImplementation(() => ({
       ...defaultUpdateCaseState,
       isLoading: true,
@@ -223,12 +217,14 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(
-      wrapper.find('[data-test-subj="toggle-case-status"]').first().prop('isLoading')
-    ).toBeTruthy();
+    await waitFor(() => {
+      expect(
+        wrapper.find('[data-test-subj="toggle-case-status"]').first().prop('isLoading')
+      ).toBeTruthy();
+    });
   });
 
-  it('should display description isLoading', () => {
+  it('should display description isLoading', async () => {
     useUpdateCaseMock.mockImplementation(() => ({
       ...defaultUpdateCaseState,
       isLoading: true,
@@ -241,21 +237,25 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(
-      wrapper
-        .find('[data-test-subj="description-action"] [data-test-subj="user-action-title-loading"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    expect(
-      wrapper
-        .find('[data-test-subj="description-action"] [data-test-subj="property-actions"]')
-        .first()
-        .exists()
-    ).toBeFalsy();
+    await waitFor(() => {
+      expect(
+        wrapper
+          .find(
+            '[data-test-subj="description-action"] [data-test-subj="user-action-title-loading"]'
+          )
+          .first()
+          .exists()
+      ).toBeTruthy();
+      expect(
+        wrapper
+          .find('[data-test-subj="description-action"] [data-test-subj="property-actions"]')
+          .first()
+          .exists()
+      ).toBeFalsy();
+    });
   });
 
-  it('should display tags isLoading', () => {
+  it('should display tags isLoading', async () => {
     useUpdateCaseMock.mockImplementation(() => ({
       ...defaultUpdateCaseState,
       isLoading: true,
@@ -268,16 +268,18 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(
-      wrapper
-        .find('[data-test-subj="case-view-tag-list"] [data-test-subj="tag-list-loading"]')
-        .first()
-        .exists()
-    ).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="tag-list-edit"]').first().exists()).toBeFalsy();
+    await waitFor(() => {
+      expect(
+        wrapper
+          .find('[data-test-subj="case-view-tag-list"] [data-test-subj="tag-list-loading"]')
+          .first()
+          .exists()
+      ).toBeTruthy();
+      expect(wrapper.find('[data-test-subj="tag-list-edit"]').first().exists()).toBeFalsy();
+    });
   });
 
-  it('should update title', () => {
+  it('should update title', async () => {
     const wrapper = mount(
       <TestProviders>
         <Router history={mockHistory}>
@@ -285,21 +287,23 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    const newTitle = 'The new title';
-    wrapper.find(`[data-test-subj="editable-title-edit-icon"]`).first().simulate('click');
-    wrapper.update();
-    wrapper
-      .find(`[data-test-subj="editable-title-input-field"]`)
-      .last()
-      .simulate('change', { target: { value: newTitle } });
-
-    wrapper.update();
-    wrapper.find(`[data-test-subj="editable-title-submit-btn"]`).first().simulate('click');
-
-    wrapper.update();
-    const updateObject = updateCaseProperty.mock.calls[0][0];
-    expect(updateObject.updateKey).toEqual('title');
-    expect(updateObject.updateValue).toEqual(newTitle);
+    await waitFor(() => {
+      const newTitle = 'The new title';
+      wrapper.find(`[data-test-subj="editable-title-edit-icon"]`).first().simulate('click');
+      wrapper.update();
+      wrapper
+        .find(`[data-test-subj="editable-title-input-field"]`)
+        .last()
+        .simulate('change', { target: { value: newTitle } });
+
+      wrapper.update();
+      wrapper.find(`[data-test-subj="editable-title-submit-btn"]`).first().simulate('click');
+
+      wrapper.update();
+      const updateObject = updateCaseProperty.mock.calls[0][0];
+      expect(updateObject.updateKey).toEqual('title');
+      expect(updateObject.updateValue).toEqual(newTitle);
+    });
   });
 
   it('should push updates on button click', async () => {
@@ -329,7 +333,7 @@ describe('CaseView ', () => {
     });
   });
 
-  it('should return null if error', () => {
+  it('should return null if error', async () => {
     (useGetCase as jest.Mock).mockImplementation(() => ({
       ...defaultGetCase,
       isError: true,
@@ -346,10 +350,12 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(wrapper).toEqual({});
+    await waitFor(() => {
+      expect(wrapper).toEqual({});
+    });
   });
 
-  it('should return spinner if loading', () => {
+  it('should return spinner if loading', async () => {
     (useGetCase as jest.Mock).mockImplementation(() => ({
       ...defaultGetCase,
       isLoading: true,
@@ -366,10 +372,12 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(wrapper.find('[data-test-subj="case-view-loading"]').exists()).toBeTruthy();
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="case-view-loading"]').exists()).toBeTruthy();
+    });
   });
 
-  it('should return case view when data is there', () => {
+  it('should return case view when data is there', async () => {
     (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
     const wrapper = mount(
       <TestProviders>
@@ -383,10 +391,12 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    expect(wrapper.find('[data-test-subj="case-view-title"]').exists()).toBeTruthy();
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="case-view-title"]').exists()).toBeTruthy();
+    });
   });
 
-  it('should refresh data on refresh', () => {
+  it('should refresh data on refresh', async () => {
     (useGetCase as jest.Mock).mockImplementation(() => defaultGetCase);
     const wrapper = mount(
       <TestProviders>
@@ -400,12 +410,14 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="case-refresh"]').first().simulate('click');
-    expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
-    expect(fetchCase).toBeCalled();
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="case-refresh"]').first().simulate('click');
+      expect(fetchCaseUserActions).toBeCalledWith(caseProps.caseData.id);
+      expect(fetchCase).toBeCalled();
+    });
   });
 
-  it('should disable the push button when connector is invalid', () => {
+  it('should disable the push button when connector is invalid', async () => {
     useGetCaseUserActionsMock.mockImplementation(() => ({
       ...defaultUseGetCaseUserActions,
       hasDataToPush: true,
@@ -424,10 +436,11 @@ describe('CaseView ', () => {
         </Router>
       </TestProviders>
     );
-
-    expect(
-      wrapper.find('button[data-test-subj="push-to-external-service"]').first().prop('disabled')
-    ).toBeTruthy();
+    await waitFor(() => {
+      expect(
+        wrapper.find('button[data-test-subj="push-to-external-service"]').first().prop('disabled')
+      ).toBeTruthy();
+    });
   });
 
   it('should revert to the initial connector in case of failure', async () => {
diff --git a/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
index 4f1e45ae7c115..d27f00aacff2c 100644
--- a/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/create/index.test.tsx
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-
 import { Create } from '.';
 import { TestProviders } from '../../../common/mock';
 import { getFormMock } from '../__mock__/form';
@@ -19,9 +18,16 @@ import { useGetTags } from '../../containers/use_get_tags';
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
 import { useFormData } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form_data';
 
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    // eslint-disable-next-line react/display-name
+    EuiFieldText: () => <input />,
+  };
+});
 jest.mock('../../../timelines/components/timeline/insert_timeline_popover/use_insert_timeline');
 jest.mock('../../containers/use_post_case');
 
@@ -74,16 +80,6 @@ const defaultPostCase = {
   postCase,
 };
 describe('Create case', () => {
-  // Suppress warnings about "noSuggestions" prop
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
   const fetchTags = jest.fn();
   const formHookMock = getFormMock(sampleData);
   beforeEach(() => {
diff --git a/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx
index e531b71e8c90c..12d549a2f71a9 100644
--- a/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/edit_connector/index.test.tsx
@@ -11,9 +11,8 @@ import { EditConnector } from './index';
 import { getFormMock, useFormMock } from '../__mock__/form';
 import { TestProviders } from '../../../common/mock';
 import { connectorsMock } from '../../containers/configure/mock';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
+
 jest.mock(
   '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form'
 );
@@ -67,10 +66,8 @@ describe('EditConnector ', () => {
 
     expect(wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().exists()).toBeTruthy();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
-      await waitFor(() => expect(onSubmit.mock.calls[0][0]).toBe(sampleConnector));
-    });
+    wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
+    await waitFor(() => expect(onSubmit.mock.calls[0][0]).toBe(sampleConnector));
   });
 
   it('Revert to initial external service on error', async () => {
@@ -90,12 +87,10 @@ describe('EditConnector ', () => {
 
     expect(wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().exists()).toBeTruthy();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(formHookMock.setFieldValue).toHaveBeenCalledWith('connector', 'none');
-      });
+    wrapper.find(`[data-test-subj="edit-connectors-submit"]`).last().simulate('click');
+    await waitFor(() => {
+      wrapper.update();
+      expect(formHookMock.setFieldValue).toHaveBeenCalledWith('connector', 'none');
     });
   });
 
@@ -114,15 +109,13 @@ describe('EditConnector ', () => {
     wrapper.find('button[data-test-subj="dropdown-connector-servicenow-2"]').simulate('click');
     wrapper.update();
 
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-connectors-cancel"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(formHookMock.setFieldValue).toBeCalledWith(
-          'connector',
-          defaultProps.selectedConnector
-        );
-      });
+    wrapper.find(`[data-test-subj="edit-connectors-cancel"]`).last().simulate('click');
+    await waitFor(() => {
+      wrapper.update();
+      expect(formHookMock.setFieldValue).toBeCalledWith(
+        'connector',
+        defaultProps.selectedConnector
+      );
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx
index a60167a18762f..013f7bd0a9ba7 100644
--- a/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/tag_list/index.test.tsx
@@ -6,13 +6,11 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 
 import { TagList } from '.';
 import { getFormMock } from '../__mock__/form';
 import { TestProviders } from '../../../common/mock';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { useForm } from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form';
 import { useGetTags } from '../../containers/use_get_tags';
 
@@ -27,6 +25,14 @@ jest.mock(
       children({ tags: ['rad', 'dude'] }),
   })
 );
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    // eslint-disable-next-line react/display-name
+    EuiFieldText: () => <input />,
+  };
+});
 const onSubmit = jest.fn();
 const defaultProps = {
   disabled: false,
@@ -36,16 +42,6 @@ const defaultProps = {
 };
 
 describe('TagList ', () => {
-  // Suppress warnings about "noSuggestions" prop
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-  /* eslint-enable no-console */
   const sampleTags = ['coke', 'pepsi'];
   const fetchTags = jest.fn();
   const formHookMock = getFormMock({ tags: sampleTags });
@@ -78,10 +74,8 @@ describe('TagList ', () => {
       </TestProviders>
     );
     wrapper.find(`[data-test-subj="tag-list-edit-button"]`).last().simulate('click');
-    await act(async () => {
-      wrapper.find(`[data-test-subj="edit-tags-submit"]`).last().simulate('click');
-      await waitFor(() => expect(onSubmit).toBeCalledWith(sampleTags));
-    });
+    wrapper.find(`[data-test-subj="edit-tags-submit"]`).last().simulate('click');
+    await waitFor(() => expect(onSubmit).toBeCalledWith(sampleTags));
   });
 
   it('Tag options render with new tags added', () => {
@@ -96,7 +90,7 @@ describe('TagList ', () => {
     ).toEqual([{ label: 'coke' }, { label: 'pepsi' }, { label: 'rad' }, { label: 'dude' }]);
   });
 
-  it('Cancels on cancel', async () => {
+  it('Cancels on cancel', () => {
     const props = {
       ...defaultProps,
       tags: ['pepsi'],
@@ -109,14 +103,11 @@ describe('TagList ', () => {
 
     expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
     wrapper.find(`[data-test-subj="tag-list-edit-button"]`).last().simulate('click');
-    await act(async () => {
-      expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeFalsy();
-      wrapper.find(`[data-test-subj="edit-tags-cancel"]`).last().simulate('click');
-      await waitFor(() => {
-        wrapper.update();
-        expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
-      });
-    });
+
+    expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeFalsy();
+    wrapper.find(`[data-test-subj="edit-tags-cancel"]`).last().simulate('click');
+    wrapper.update();
+    expect(wrapper.find(`[data-test-subj="tag-pepsi"]`).last().exists()).toBeTruthy();
   });
 
   it('Renders disabled button', () => {
diff --git a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.test.tsx b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.test.tsx
index 0b376f26a1ae0..4d9b7d030fec0 100644
--- a/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/cases/components/user_action_tree/index.test.tsx
@@ -7,7 +7,6 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { waitFor } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
 
 import { Router, routeData, mockHistory, mockLocation } from '../__mock__/router';
 import { getFormMock, useFormMock, useFormDataMock } from '../__mock__/form';
@@ -33,6 +32,7 @@ const defaultProps = {
 };
 const useUpdateCommentMock = useUpdateComment as jest.Mock;
 jest.mock('../../containers/use_update_comment');
+jest.mock('./user_action_timestamp');
 
 const patchComment = jest.fn();
 describe('UserActionTree ', () => {
@@ -90,16 +90,14 @@ describe('UserActionTree ', () => {
       },
       caseUserActions: ourActions,
     };
-
-    await act(async () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
-
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    await waitFor(() => {
       expect(wrapper.find(`[data-test-subj="top-footer"]`).exists()).toBeTruthy();
       expect(wrapper.find(`[data-test-subj="bottom-footer"]`).exists()).toBeTruthy();
     });
@@ -121,14 +119,14 @@ describe('UserActionTree ', () => {
       },
     };
 
-    await act(async () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+    await waitFor(() => {
       expect(wrapper.find(`[data-test-subj="top-footer"]`).exists()).toBeTruthy();
       expect(wrapper.find(`[data-test-subj="bottom-footer"]`).exists()).toBeFalsy();
     });
@@ -141,15 +139,15 @@ describe('UserActionTree ', () => {
       caseUserActions: ourActions,
     };
 
-    await act(async () => {
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
 
+    await waitFor(() => {
       expect(
         wrapper
           .find(`[data-test-subj="comment-create-action-${props.data.comments[0].id}"]`)
@@ -164,34 +162,32 @@ describe('UserActionTree ', () => {
         .first()
         .simulate('click');
 
-      await waitFor(() => {
-        wrapper.update();
-        expect(
-          wrapper
-            .find(`[data-test-subj="comment-create-action-${props.data.comments[0].id}"]`)
-            .first()
-            .hasClass('outlined')
-        ).toBeTruthy();
-      });
+      wrapper.update();
+      expect(
+        wrapper
+          .find(`[data-test-subj="comment-create-action-${props.data.comments[0].id}"]`)
+          .first()
+          .hasClass('outlined')
+      ).toBeTruthy();
     });
   });
 
   it('Switches to markdown when edit is clicked and back to panel when canceled', async () => {
-    await waitFor(() => {
-      const ourActions = [getUserAction(['comment'], 'create')];
-      const props = {
-        ...defaultProps,
-        caseUserActions: ourActions,
-      };
-
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
+    const ourActions = [getUserAction(['comment'], 'create')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
 
+    await waitFor(() => {
       expect(
         wrapper
           .find(
@@ -277,24 +273,22 @@ describe('UserActionTree ', () => {
       .first()
       .simulate('click');
 
-    await act(async () => {
-      await waitFor(() => {
-        wrapper.update();
-        expect(
-          wrapper
-            .find(
-              `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
-            )
-            .exists()
-        ).toEqual(false);
-        expect(patchComment).toBeCalledWith({
-          commentUpdate: sampleData.content,
-          caseId: props.data.id,
-          commentId: props.data.comments[0].id,
-          fetchUserActions,
-          updateCase,
-          version: props.data.comments[0].version,
-        });
+    await waitFor(() => {
+      wrapper.update();
+      expect(
+        wrapper
+          .find(
+            `[data-test-subj="comment-create-action-${props.data.comments[0].id}"] [data-test-subj="user-action-markdown-form"]`
+          )
+          .exists()
+      ).toEqual(false);
+      expect(patchComment).toBeCalledWith({
+        commentUpdate: sampleData.content,
+        caseId: props.data.id,
+        commentId: props.data.comments[0].id,
+        fetchUserActions,
+        updateCase,
+        version: props.data.comments[0].version,
       });
     });
   });
@@ -319,89 +313,86 @@ describe('UserActionTree ', () => {
       .first()
       .simulate('click');
 
-    await act(async () => {
-      wrapper
-        .find(`[data-test-subj="description-action"] [data-test-subj="user-action-save-markdown"]`)
-        .first()
-        .simulate('click');
-    });
-
-    wrapper.update();
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="user-action-save-markdown"]`)
+      .first()
+      .simulate('click');
+    await waitFor(() => {
+      wrapper.update();
 
-    expect(
-      wrapper
-        .find(`[data-test-subj="description-action"] [data-test-subj="user-action-markdown-form"]`)
-        .exists()
-    ).toEqual(false);
+      expect(
+        wrapper
+          .find(
+            `[data-test-subj="description-action"] [data-test-subj="user-action-markdown-form"]`
+          )
+          .exists()
+      ).toEqual(false);
 
-    expect(onUpdateField).toBeCalledWith({ key: 'description', value: sampleData.content });
+      expect(onUpdateField).toBeCalledWith({ key: 'description', value: sampleData.content });
+    });
   });
 
   it('quotes', async () => {
-    await act(async () => {
-      const commentData = {
-        comment: '',
-      };
-      const setFieldValue = jest.fn();
-
-      const formHookMock = getFormMock(commentData);
-      useFormMock.mockImplementation(() => ({ form: { ...formHookMock, setFieldValue } }));
-
-      const props = defaultProps;
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
+    const commentData = {
+      comment: '',
+    };
+    const setFieldValue = jest.fn();
 
-      wrapper
-        .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
-        .first()
-        .simulate('click');
+    const formHookMock = getFormMock(commentData);
+    useFormMock.mockImplementation(() => ({ form: { ...formHookMock, setFieldValue } }));
 
-      await waitFor(() => {
-        wrapper.update();
+    const props = defaultProps;
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
 
-        wrapper
-          .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
-          .first()
-          .simulate('click');
-      });
+    wrapper
+      .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-ellipses"]`)
+      .first()
+      .simulate('click');
+
+    await waitFor(() => {
+      wrapper.update();
 
-      expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n`);
+      wrapper
+        .find(`[data-test-subj="description-action"] [data-test-subj="property-actions-quote"]`)
+        .first()
+        .simulate('click');
     });
+
+    expect(setFieldValue).toBeCalledWith('comment', `> ${props.data.description} \n`);
   });
 
   it('Outlines comment when url param is provided', async () => {
     const commentId = 'basic-comment-id';
     jest.spyOn(routeData, 'useParams').mockReturnValue({ commentId });
 
-    await act(async () => {
-      const ourActions = [getUserAction(['comment'], 'create')];
-      const props = {
-        ...defaultProps,
-        caseUserActions: ourActions,
-      };
-
-      const wrapper = mount(
-        <TestProviders>
-          <Router history={mockHistory}>
-            <UserActionTree {...props} />
-          </Router>
-        </TestProviders>
-      );
-
-      await waitFor(() => {
-        wrapper.update();
-        expect(
-          wrapper
-            .find(`[data-test-subj="comment-create-action-${commentId}"]`)
-            .first()
-            .hasClass('outlined')
-        ).toBeTruthy();
-      });
+    const ourActions = [getUserAction(['comment'], 'create')];
+    const props = {
+      ...defaultProps,
+      caseUserActions: ourActions,
+    };
+
+    const wrapper = mount(
+      <TestProviders>
+        <Router history={mockHistory}>
+          <UserActionTree {...props} />
+        </Router>
+      </TestProviders>
+    );
+
+    await waitFor(() => {
+      wrapper.update();
+      expect(
+        wrapper
+          .find(`[data-test-subj="comment-create-action-${commentId}"]`)
+          .first()
+          .hasClass('outlined')
+      ).toBeTruthy();
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx
index eced73e9c3d67..c8e12adef656a 100644
--- a/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/add_filter_to_global_search_bar/index.test.tsx
@@ -6,7 +6,7 @@
 
 import { mount, shallow } from 'enzyme';
 import React from 'react';
-
+import { waitFor } from '@testing-library/react';
 import {
   apolloClientObservable,
   mockGlobalState,
@@ -157,39 +157,40 @@ describe('AddFilterToGlobalSearchBar Component', () => {
         </AddFilterToGlobalSearchBar>
       </TestProviders>
     );
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
+      wrapper.update();
+      jest.runAllTimers();
+      wrapper.update();
 
-    wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
-    wrapper.update();
-    jest.runAllTimers();
-    wrapper.update();
-
-    wrapper
-      .find('[data-test-subj="hover-actions-container"] [data-euiicon-type]')
-      .first()
-      .simulate('click');
-    wrapper.update();
+      wrapper
+        .find('[data-test-subj="hover-actions-container"] [data-euiicon-type]')
+        .first()
+        .simulate('click');
+      wrapper.update();
 
-    expect(mockAddFilters.mock.calls[0][0]).toEqual({
-      meta: {
-        alias: null,
-        disabled: false,
-        key: 'host.name',
-        negate: false,
-        params: {
-          query: 'siem-kibana',
-        },
-        type: 'phrase',
-        value: 'siem-kibana',
-      },
-      query: {
-        match: {
-          'host.name': {
+      expect(mockAddFilters.mock.calls[0][0]).toEqual({
+        meta: {
+          alias: null,
+          disabled: false,
+          key: 'host.name',
+          negate: false,
+          params: {
             query: 'siem-kibana',
-            type: 'phrase',
           },
+          type: 'phrase',
+          value: 'siem-kibana',
         },
-      },
+        query: {
+          match: {
+            'host.name': {
+              query: 'siem-kibana',
+              type: 'phrase',
+            },
+          },
+        },
+      });
+      expect(onFilterAdded).toHaveBeenCalledTimes(1);
     });
-    expect(onFilterAdded).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx
index eef6e09d496db..e38aaeedad8fd 100644
--- a/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/field_value_lists.test.tsx
@@ -8,8 +8,7 @@ import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
 import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
 import { ListSchema } from '../../../lists_plugin_deps';
diff --git a/x-pack/plugins/security_solution/public/common/components/autocomplete/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/autocomplete/helpers.test.ts
index bbcbcbcf928b3..225b407e4649e 100644
--- a/x-pack/plugins/security_solution/public/common/components/autocomplete/helpers.test.ts
+++ b/x-pack/plugins/security_solution/public/common/components/autocomplete/helpers.test.ts
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import moment from 'moment';
 import '../../../common/mock/match_media';
 import { getField } from '../../../../../../../src/plugins/data/common/index_patterns/fields/fields.mocks';
 
@@ -17,6 +17,8 @@ import {
 import { getOperators, paramIsValid, getGenericComboBoxProps } from './helpers';
 
 describe('helpers', () => {
+  // @ts-ignore
+  moment.suppressDeprecationWarnings = true;
   describe('#getOperators', () => {
     test('it returns "isOperator" if passed in field is "undefined"', () => {
       const operator = getOperators(undefined);
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
index 64c8fde87a6bc..aa638abf65f7e 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/barchart.test.tsx
@@ -13,6 +13,7 @@ import { ThemeProvider } from 'styled-components';
 import { escapeDataProviderId } from '../drag_and_drop/helpers';
 import { TestProviders } from '../../mock';
 import '../../mock/match_media';
+import '../../mock/react_beautiful_dnd';
 
 import { BarChartBaseComponent, BarChartComponent } from './barchart';
 import { ChartSeriesData } from './common';
@@ -131,19 +132,6 @@ const mockConfig = {
   customHeight: 324,
 };
 
-// Suppress warnings about "react-beautiful-dnd"
-/* eslint-disable no-console */
-const originalError = console.error;
-const originalWarn = console.warn;
-beforeAll(() => {
-  console.warn = jest.fn();
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-  console.warn = originalWarn;
-});
-
 describe('BarChartBaseComponent', () => {
   let shallowWrapper: ShallowWrapper;
   const mockBarChartData: ChartSeriesData[] = [
@@ -350,7 +338,10 @@ describe.each(chartDataSets)('BarChart with stackByField', () => {
       )}-${escapeDataProviderId(datum.key)}`;
 
       expect(
-        wrapper.find(`div [data-rbd-draggable-id="${dataProviderId}"]`).first().text()
+        wrapper
+          .find(`[draggableId="${dataProviderId}"] [data-test-subj="providerContainer"]`)
+          .first()
+          .text()
       ).toEqual(datum.key);
     });
   });
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
index 8fd2fa1fdef12..ffc2404bd4321 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend.test.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
 import '../../mock/match_media';
+import '../../mock/react_beautiful_dnd';
 import { TestProviders } from '../../mock';
 
 import { MIN_LEGEND_HEIGHT, DraggableLegend } from './draggable_legend';
@@ -58,20 +59,6 @@ const legendItems: LegendItem[] = [
 
 describe('DraggableLegend', () => {
   const height = 400;
-
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
   describe('rendering', () => {
     let wrapper: ReactWrapper;
 
diff --git a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx
index 9f6e614c3c285..72e44da3297ea 100644
--- a/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/charts/draggable_legend_item.test.tsx
@@ -10,6 +10,7 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
 import '../../mock/match_media';
+import '../../mock/react_beautiful_dnd';
 import { TestProviders } from '../../mock';
 
 import { DraggableLegendItem, LegendItem } from './draggable_legend_item';
@@ -17,19 +18,6 @@ import { DraggableLegendItem, LegendItem } from './draggable_legend_item';
 const theme = () => ({ eui: euiDarkVars, darkMode: true });
 
 describe('DraggableLegendItem', () => {
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
   describe('rendering a regular (non "All others") legend item', () => {
     const legendItem: LegendItem = {
       color: '#1EA593',
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
index 46e7298677f49..5223452c8b93d 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper.test.tsx
@@ -7,7 +7,7 @@
 import { shallow } from 'enzyme';
 import React from 'react';
 import { DraggableStateSnapshot, DraggingStyle } from 'react-beautiful-dnd';
-
+import { waitFor } from '@testing-library/react';
 import '../../mock/match_media';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
@@ -62,7 +62,7 @@ describe('DraggableWrapper', () => {
       expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(false);
     });
 
-    test('it renders hover actions when the mouse is over the text of draggable wrapper', () => {
+    test('it renders hover actions when the mouse is over the text of draggable wrapper', async () => {
       const wrapper = mount(
         <TestProviders>
           <DragDropContextWrapper browserFields={mockBrowserFields}>
@@ -71,11 +71,13 @@ describe('DraggableWrapper', () => {
         </TestProviders>
       );
 
-      wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
-      wrapper.update();
-      jest.runAllTimers();
-      wrapper.update();
-      expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
+      await waitFor(() => {
+        wrapper.find('[data-test-subj="withHoverActionsButton"]').simulate('mouseenter');
+        wrapper.update();
+        jest.runAllTimers();
+        wrapper.update();
+        expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
+      });
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
index 8aa926a36988b..af7e9ad5f1492 100644
--- a/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/drag_and_drop/draggable_wrapper_hover_content.test.tsx
@@ -85,22 +85,6 @@ describe('DraggableWrapperHoverContent', () => {
     });
   });
 
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
   /**
    * The tests for "Filter for value" and "Filter out value" are similar enough
    * to combine them into "table tests" using this array
diff --git a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx
index 79773630e0dc0..d791ea44f8198 100644
--- a/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/endpoint/link_to_app.test.tsx
@@ -44,7 +44,7 @@ describe('LinkToApp component', () => {
   });
   it('should support onClick prop', () => {
     // Take `_event` (even though it is not used) so that `jest.fn` will have a type that expects to be called with an event
-    const spyOnClickHandler: LinkToAppOnClickMock = jest.fn((_event) => {});
+    const spyOnClickHandler: LinkToAppOnClickMock = jest.fn().mockImplementation((_event) => {});
     const renderResult = render(
       <LinkToApp appId="ingestManager" href="/app/ingest" onClick={spyOnClickHandler}>
         {'link'}
@@ -98,20 +98,24 @@ describe('LinkToApp component', () => {
   });
   it('should still preventDefault if onClick callback throws', () => {
     // Take `_event` (even though it is not used) so that `jest.fn` will have a type that expects to be called with an event
-    const spyOnClickHandler: LinkToAppOnClickMock<never> = jest.fn((_event) => {
+    const spyOnClickHandler = jest.fn().mockImplementation((_event) => {
       throw new Error('test');
     });
-    const renderResult = render(
-      <LinkToApp appId="ingestManager" href="/app/ingest" onClick={spyOnClickHandler}>
-        {'link'}
-      </LinkToApp>
-    );
-    expect(() => renderResult.find('EuiLink').simulate('click')).toThrow();
-    const clickEventArg = spyOnClickHandler.mock.calls[0][0];
-    expect(clickEventArg.isDefaultPrevented()).toBe(true);
+    // eslint-disable-next-line no-empty
+    try {
+    } catch (e) {
+      const renderResult = render(
+        <LinkToApp appId="ingestManager" href="/app/ingest" onClick={spyOnClickHandler}>
+          {'link'}
+        </LinkToApp>
+      );
+      expect(() => renderResult.find('EuiLink').simulate('click')).toThrowError();
+      const clickEventArg = spyOnClickHandler.mock.calls[0][0];
+      expect(clickEventArg.isDefaultPrevented()).toBe(true);
+    }
   });
   it('should not navigate if onClick callback prevents default', () => {
-    const spyOnClickHandler: LinkToAppOnClickMock = jest.fn((ev) => {
+    const spyOnClickHandler: LinkToAppOnClickMock = jest.fn().mockImplementation((ev) => {
       ev.preventDefault();
     });
     const renderResult = render(
diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
index 01b0810830dd8..c3c7c864ac99b 100644
--- a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.test.tsx
@@ -8,16 +8,19 @@ import { shallow } from 'enzyme';
 import React from 'react';
 
 import '../../mock/match_media';
-import { mockDetailItemData, mockDetailItemDataId } from '../../mock/mock_detail_item';
-import { TestProviders } from '../../mock/test_providers';
+import '../../mock/react_beautiful_dnd';
+import {
+  defaultHeaders,
+  mockDetailItemData,
+  mockDetailItemDataId,
+  TestProviders,
+} from '../../mock';
 
 import { EventDetails, View } from './event_details';
 import { mockBrowserFields } from '../../containers/source/mock';
-import { defaultHeaders } from '../../mock/header';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
 jest.mock('../link_to');
-
 describe('EventDetails', () => {
   const mount = useMountAppended();
   const onEventToggled = jest.fn();
diff --git a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx
index 9a3c0fa1cad2e..928521c118ba5 100644
--- a/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/events_viewer/index.test.tsx
@@ -8,8 +8,7 @@ import React from 'react';
 import useResizeObserver from 'use-resize-observer/polyfilled';
 
 import '../../mock/match_media';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { TestProviders } from '../../mock';
 import { useMountAppended } from '../../utils/use_mount_appended';
 
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx
index ed1c1c1cdad1f..fa9838aa37015 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/add_exception_modal/index.test.tsx
@@ -8,10 +8,11 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { mount, ReactWrapper } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 import { AddExceptionModal } from './';
 import { useCurrentUser } from '../../../../common/lib/kibana';
+import { useAsync } from '../../../../shared_imports';
 import { getExceptionListSchemaMock } from '../../../../../../lists/common/schemas/response/exception_list_schema.mock';
 import { useFetchIndex } from '../../../containers/source';
 import { stubIndexPattern } from 'src/plugins/data/common/index_patterns/index_pattern.stub';
@@ -33,6 +34,7 @@ jest.mock('../../../../detections/containers/detection_engine/rules');
 jest.mock('../use_add_exception');
 jest.mock('../use_fetch_or_create_rule_exception_list');
 jest.mock('../builder');
+jest.mock('../../../../shared_imports');
 
 describe('When the add exception modal is opened', () => {
   const ruleName = 'test rule';
@@ -48,6 +50,11 @@ describe('When the add exception modal is opened', () => {
       .spyOn(builder, 'ExceptionBuilderComponent')
       .mockReturnValue(<></>);
 
+    (useAsync as jest.Mock).mockImplementation(() => ({
+      start: jest.fn(),
+      loading: false,
+    }));
+
     (useAddOrUpdateException as jest.Mock).mockImplementation(() => [
       { isLoading: false },
       jest.fn(),
@@ -104,7 +111,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is no alert data passed to an endpoint list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = mount(
         <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
           <AddExceptionModal
@@ -118,7 +125,7 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [] }));
+      await waitFor(() => callProps.onChange({ exceptionItems: [] }));
     });
     it('has the add exception button disabled', () => {
       expect(
@@ -140,7 +147,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is alert data passed to an endpoint list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       const alertDataMock: { ecsData: Ecs; nonEcsData: TimelineNonEcsData[] } = {
         ecsData: { _id: 'test-id' },
         nonEcsData: [{ field: 'file.path', value: ['test/path'] }],
@@ -159,7 +166,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -191,7 +200,7 @@ describe('When the add exception modal is opened', () => {
 
   describe('when there is alert data passed to a detection list exception', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       const alertDataMock: { ecsData: Ecs; nonEcsData: TimelineNonEcsData[] } = {
         ecsData: { _id: 'test-id' },
         nonEcsData: [{ field: 'file.path', value: ['test/path'] }],
@@ -210,7 +219,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [getExceptionListItemSchemaMock()] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [getExceptionListItemSchemaMock()] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -243,7 +254,7 @@ describe('When the add exception modal is opened', () => {
       onChange: (props: { exceptionItems: ExceptionListItemSchema[] }) => void;
       exceptionListItems: ExceptionListItemSchema[];
     };
-    beforeEach(() => {
+    beforeEach(async () => {
       // Mocks the index patterns to contain the pre-populated endpoint fields so that the exception qualifies as bulk closable
       (useFetchIndex as jest.Mock).mockImplementation(() => [
         false,
@@ -278,7 +289,9 @@ describe('When the add exception modal is opened', () => {
         </ThemeProvider>
       );
       callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() =>
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] })
+      );
     });
     it('has the add exception button enabled', () => {
       expect(
@@ -307,8 +320,8 @@ describe('When the add exception modal is opened', () => {
       ).not.toBeDisabled();
     });
     describe('when a "is in list" entry is added', () => {
-      it('should have the bulk close checkbox disabled', () => {
-        act(() =>
+      it('should have the bulk close checkbox disabled', async () => {
+        await waitFor(() =>
           callProps.onChange({
             exceptionItems: [
               ...callProps.exceptionListItems,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx
index 2d389a7dbcee1..e6f57fe666780 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/builder/index.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { mount } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 import {
   fields,
diff --git a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx
index d5d2091cc9bc8..551a9173351fc 100644
--- a/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/exceptions/edit_exception_modal/index.test.tsx
@@ -5,10 +5,10 @@
  */
 
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import { ThemeProvider } from 'styled-components';
 import { mount, ReactWrapper } from 'enzyme';
 import euiLightVars from '@elastic/eui/dist/eui_theme_light.json';
-import { act } from 'react-dom/test-utils';
 
 import { EditExceptionModal } from './';
 import { useCurrentUser } from '../../../../common/lib/kibana';
@@ -66,15 +66,14 @@ describe('When the edit exception modal is opened', () => {
   });
 
   describe('when the modal is loading', () => {
-    let wrapper: ReactWrapper;
-    beforeEach(() => {
+    it('renders the loading spinner', async () => {
       (useFetchIndex as jest.Mock).mockImplementation(() => [
         true,
         {
           indexPatterns: stubIndexPattern,
         },
       ]);
-      wrapper = mount(
+      const wrapper = mount(
         <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
           <EditExceptionModal
             ruleIndices={[]}
@@ -87,16 +86,16 @@ describe('When the edit exception modal is opened', () => {
           />
         </ThemeProvider>
       );
-    });
-    it('renders the loading spinner', () => {
-      expect(wrapper.find('[data-test-subj="loadingEditExceptionModal"]').exists()).toBeTruthy();
+      await waitFor(() => {
+        expect(wrapper.find('[data-test-subj="loadingEditExceptionModal"]').exists()).toBeTruthy();
+      });
     });
   });
 
   describe('when an endpoint exception with exception data is passed', () => {
     describe('when exception entry fields are included in the index pattern', () => {
       let wrapper: ReactWrapper;
-      beforeEach(() => {
+      beforeEach(async () => {
         const exceptionItemMock = {
           ...getExceptionListItemSchemaMock(),
           entries: [
@@ -117,7 +116,9 @@ describe('When the edit exception modal is opened', () => {
           </ThemeProvider>
         );
         const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-        act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+        await waitFor(() => {
+          callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
+        });
       });
       it('has the edit exception button enabled', () => {
         expect(
@@ -145,7 +146,7 @@ describe('When the edit exception modal is opened', () => {
 
     describe("when exception entry fields aren't included in the index pattern", () => {
       let wrapper: ReactWrapper;
-      beforeEach(() => {
+      beforeEach(async () => {
         wrapper = mount(
           <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
             <EditExceptionModal
@@ -160,7 +161,9 @@ describe('When the edit exception modal is opened', () => {
           </ThemeProvider>
         );
         const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-        act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+        await waitFor(() => {
+          callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
+        });
       });
       it('has the edit exception button enabled', () => {
         expect(
@@ -189,7 +192,7 @@ describe('When the edit exception modal is opened', () => {
 
   describe('when an detection exception with entries is passed', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       wrapper = mount(
         <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
           <EditExceptionModal
@@ -204,7 +207,9 @@ describe('When the edit exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() => {
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
+      });
     });
     it('has the edit exception button enabled', () => {
       expect(
@@ -228,7 +233,7 @@ describe('When the edit exception modal is opened', () => {
 
   describe('when an exception with no entries is passed', () => {
     let wrapper: ReactWrapper;
-    beforeEach(() => {
+    beforeEach(async () => {
       const exceptionItemMock = { ...getExceptionListItemSchemaMock(), entries: [] };
       wrapper = mount(
         <ThemeProvider theme={() => ({ eui: euiLightVars, darkMode: false })}>
@@ -244,7 +249,9 @@ describe('When the edit exception modal is opened', () => {
         </ThemeProvider>
       );
       const callProps = ExceptionBuilderComponent.mock.calls[0][0];
-      act(() => callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] }));
+      await waitFor(() => {
+        callProps.onChange({ exceptionItems: [...callProps.exceptionListItems] });
+      });
     });
     it('has the edit exception button disabled', () => {
       expect(
diff --git a/x-pack/plugins/security_solution/public/common/components/last_event_time/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/last_event_time/index.test.tsx
index cc0c4d4c837a3..d9b5c5e10893c 100644
--- a/x-pack/plugins/security_solution/public/common/components/last_event_time/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/last_event_time/index.test.tsx
@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-
+import '../../../common/mock/formatted_relative';
 import { getEmptyValue } from '../empty_value';
 import { LastEventIndexKey } from '../../../../common/search_strategy';
 import { mockLastEventTimeQuery } from '../../containers/events/last_event_time/mock';
@@ -57,7 +57,7 @@ describe('Last Event Time Stat', () => {
         <LastEventTime docValueFields={[]} indexKey={LastEventIndexKey.hosts} indexNames={[]} />
       </TestProviders>
     );
-    expect(wrapper.html()).toBe('Last event: <span class="euiToolTipAnchor">12 minutes ago</span>');
+    expect(wrapper.html()).toBe('Last event: <span class="euiToolTipAnchor">20 hours ago</span>');
   });
   test('Bad date time string', async () => {
     (useTimelineLastEventTime as jest.Mock).mockReturnValue([
diff --git a/x-pack/plugins/security_solution/public/common/components/link_icon/index.tsx b/x-pack/plugins/security_solution/public/common/components/link_icon/index.tsx
index 19f1d70e6e230..55842342c6677 100644
--- a/x-pack/plugins/security_solution/public/common/components/link_icon/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/link_icon/index.tsx
@@ -6,16 +6,16 @@
 
 import { EuiIcon, EuiLink, IconSize, IconType } from '@elastic/eui';
 import { LinkAnchorProps } from '@elastic/eui/src/components/link/link';
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useCallback, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 
 interface LinkProps {
+  ariaLabel?: string;
   color?: LinkAnchorProps['color'];
   disabled?: boolean;
   href?: string;
   iconSide?: 'left' | 'right';
   onClick?: Function;
-  ariaLabel?: string;
 }
 
 export const Link = styled(({ iconSide, children, ...rest }) => (
@@ -55,6 +55,7 @@ export interface LinkIconProps extends LinkProps {
 
 export const LinkIcon = React.memo<LinkIconProps>(
   ({
+    ariaLabel,
     children,
     color,
     dataTestSubj,
@@ -64,21 +65,41 @@ export const LinkIcon = React.memo<LinkIconProps>(
     iconSize = 's',
     iconType,
     onClick,
-    ariaLabel,
-  }) => (
-    <Link
-      className="siemLinkIcon"
-      color={color}
-      data-test-subj={dataTestSubj}
-      disabled={disabled}
-      href={href}
-      iconSide={iconSide}
-      onClick={onClick}
-      aria-label={ariaLabel ?? children}
-    >
-      <EuiIcon size={iconSize} type={iconType} />
-      <span className="siemLinkIcon__label">{children}</span>
-    </Link>
-  )
+  }) => {
+    const getChildrenString = useCallback((theChild: string | ReactNode): string => {
+      if (
+        typeof theChild === 'object' &&
+        theChild != null &&
+        'props' in theChild &&
+        theChild.props &&
+        theChild.props.children
+      ) {
+        return getChildrenString(theChild.props.children);
+      }
+      return theChild != null && Object.keys(theChild).length > 0 ? (theChild as string) : '';
+    }, []);
+    const aria = useMemo(() => {
+      if (ariaLabel) {
+        return ariaLabel;
+      }
+      return getChildrenString(children);
+    }, [ariaLabel, children, getChildrenString]);
+
+    return (
+      <Link
+        className="siemLinkIcon"
+        color={color}
+        data-test-subj={dataTestSubj}
+        disabled={disabled}
+        href={href}
+        iconSide={iconSide}
+        onClick={onClick}
+        aria-label={aria}
+      >
+        <EuiIcon size={iconSize} type={iconType} />
+        <span className="siemLinkIcon__label">{children}</span>
+      </Link>
+    );
+  }
 );
 LinkIcon.displayName = 'LinkIcon';
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.test.tsx
index e9940d088e606..07d148ff96dfa 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/entity_draggable.test.tsx
@@ -11,7 +11,6 @@ import '../../mock/match_media';
 import { EntityDraggableComponent } from './entity_draggable';
 import { TestProviders } from '../../mock/test_providers';
 import { useMountAppended } from '../../utils/use_mount_appended';
-
 describe('entity_draggable', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
index 434cbd8ada88e..cb10c61302d3c 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_score.test.tsx
@@ -19,7 +19,6 @@ const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
 
 const narrowDateRange = jest.fn();
-
 describe('anomaly_scores', () => {
   let anomalies: Anomalies = cloneDeep(mockAnomalies);
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
index a900c3e49f912..52151f217e01a 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/score/anomaly_scores.test.tsx
@@ -19,7 +19,6 @@ import { useMountAppended } from '../../../utils/use_mount_appended';
 const startDate: string = '2020-07-07T08:20:18.966Z';
 const endDate: string = '3000-01-01T00:00:00.000Z';
 const narrowDateRange = jest.fn();
-
 describe('anomaly_scores', () => {
   let anomalies: Anomalies = cloneDeep(mockAnomalies);
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
index d370a901a6262..3092cbf265ea9 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_host_table_columns.test.tsx
@@ -19,7 +19,6 @@ const startDate = new Date(2001).toISOString();
 const endDate = new Date(3000).toISOString();
 const interval = 'days';
 const narrowDateRange = jest.fn();
-
 describe('get_anomalies_host_table_columns', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
index 69a4e383413f2..89f94a3819e65 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml/tables/get_anomalies_network_table_columns.test.tsx
@@ -16,7 +16,6 @@ import { useMountAppended } from '../../../utils/use_mount_appended';
 
 const startDate = new Date(2001).toISOString();
 const endDate = new Date(3000).toISOString();
-
 describe('get_anomalies_network_table_columns', () => {
   const mount = useMountAppended();
 
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/job_switch.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/job_switch.test.tsx
index e58d76bd1dde0..13518acdefdde 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/job_switch.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/job_switch.test.tsx
@@ -7,6 +7,7 @@
 import { shallow, mount } from 'enzyme';
 import React from 'react';
 
+import { waitFor } from '@testing-library/react';
 import { JobSwitchComponent } from './job_switch';
 import { cloneDeep } from 'lodash/fp';
 import { mockSecurityJobs } from '../api.mock';
@@ -31,7 +32,7 @@ describe('JobSwitch', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('should call onJobStateChange when the switch is clicked to be true/open', () => {
+  test('should call onJobStateChange when the switch is clicked to be true/open', async () => {
     const wrapper = mount(
       <JobSwitchComponent
         job={securityJobs[0]}
@@ -46,12 +47,13 @@ describe('JobSwitch', () => {
       .simulate('click', {
         target: { checked: true },
       });
-
-    expect(onJobStateChangeMock.mock.calls[0][0].id).toEqual(
-      'linux_anomalous_network_activity_ecs'
-    );
-    expect(onJobStateChangeMock.mock.calls[0][1]).toEqual(1571022859393);
-    expect(onJobStateChangeMock.mock.calls[0][2]).toEqual(true);
+    await waitFor(() => {
+      expect(onJobStateChangeMock.mock.calls[0][0].id).toEqual(
+        'linux_anomalous_network_activity_ecs'
+      );
+      expect(onJobStateChangeMock.mock.calls[0][1]).toEqual(1571022859393);
+      expect(onJobStateChangeMock.mock.calls[0][2]).toEqual(true);
+    });
   });
 
   test('should have a switch when it is not in the loading state', () => {
diff --git a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx
index dfcabe7b5aedf..3d7e47a15fc1e 100644
--- a/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/ml_popover/jobs_table/jobs_table.test.tsx
@@ -6,6 +6,7 @@
 
 import { shallow, mount } from 'enzyme';
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 import { JobsTableComponent } from './jobs_table';
 import { mockSecurityJobs } from '../api.mock';
 import { cloneDeep } from 'lodash/fp';
@@ -59,7 +60,7 @@ describe('JobsTableComponent', () => {
     );
   });
 
-  test('should call onJobStateChange when the switch is clicked to be true/open', () => {
+  test('should call onJobStateChange when the switch is clicked to be true/open', async () => {
     const wrapper = mount(
       <JobsTableComponent
         isLoading={false}
@@ -73,7 +74,9 @@ describe('JobsTableComponent', () => {
       .simulate('click', {
         target: { checked: true },
       });
-    expect(onJobStateChangeMock.mock.calls[0]).toEqual([securityJobs[0], 1571022859393, true]);
+    await waitFor(() => {
+      expect(onJobStateChangeMock.mock.calls[0]).toEqual([securityJobs[0], 1571022859393, true]);
+    });
   });
 
   test('should have a switch when it is not in the loading state', () => {
diff --git a/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx
index aa61688f1f986..12199ce5c1b66 100644
--- a/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/query_bar/index.test.tsx
@@ -6,7 +6,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-
+import { waitFor } from '@testing-library/react';
 import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { DEFAULT_FROM, DEFAULT_TO } from '../../../../common/constants';
 import { TestProviders, mockIndexPattern } from '../../mock';
@@ -16,22 +16,6 @@ import { QueryBar, QueryBarComponentProps } from '.';
 const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
 
 describe('QueryBar ', () => {
-  // We are doing that because we need to wrapped this component with redux
-  // and redux does not like to be updated and since we need to update our
-  // child component (BODY) and we do not want to scare anyone with this error
-  // we are hiding it!!!
-  // eslint-disable-next-line no-console
-  const originalError = console.error;
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (...args: string[]) => {
-      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
   const mockOnChangeQuery = jest.fn();
   const mockOnSubmitQuery = jest.fn();
   const mockOnSavedQuery = jest.fn();
@@ -372,7 +356,7 @@ describe('QueryBar ', () => {
   });
 
   describe('SavedQueryManagementComponent state', () => {
-    test('popover should hidden when "Save current query" button was clicked', () => {
+    test('popover should hidden when "Save current query" button was clicked', async () => {
       const Proxy = (props: QueryBarComponentProps) => (
         <TestProviders>
           <QueryBar {...props} />
@@ -397,21 +381,24 @@ describe('QueryBar ', () => {
           onSavedQuery={mockOnSavedQuery}
         />
       );
+      await waitFor(() => {
+        const isSavedQueryPopoverOpen = () =>
+          wrapper.find('EuiPopover[id="savedQueryPopover"]').prop('isOpen');
 
-      const isSavedQueryPopoverOpen = () =>
-        wrapper.find('EuiPopover[id="savedQueryPopover"]').prop('isOpen');
-
-      expect(isSavedQueryPopoverOpen()).toBeFalsy();
+        expect(isSavedQueryPopoverOpen()).toBeFalsy();
 
-      wrapper
-        .find('button[data-test-subj="saved-query-management-popover-button"]')
-        .simulate('click');
+        wrapper
+          .find('button[data-test-subj="saved-query-management-popover-button"]')
+          .simulate('click');
 
-      expect(isSavedQueryPopoverOpen()).toBeTruthy();
+        expect(isSavedQueryPopoverOpen()).toBeTruthy();
 
-      wrapper.find('button[data-test-subj="saved-query-management-save-button"]').simulate('click');
+        wrapper
+          .find('button[data-test-subj="saved-query-management-save-button"]')
+          .simulate('click');
 
-      expect(isSavedQueryPopoverOpen()).toBeFalsy();
+        expect(isSavedQueryPopoverOpen()).toBeFalsy();
+      });
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx
index bd9f2677ec966..2696b115cdc18 100644
--- a/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/sourcerer/index.test.tsx
@@ -20,8 +20,7 @@ import {
 } from '../../mock';
 import { createStore, State } from '../../store';
 import { EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
-import { act } from 'react-dom/test-utils';
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 const mockDispatch = jest.fn();
 jest.mock('react-redux', () => {
@@ -126,13 +125,11 @@ describe('Sourcerer component', () => {
     expect(true).toBeTruthy();
     wrapper.find(`[data-test-subj="sourcerer-trigger"]`).first().simulate('click');
 
-    await act(async () => {
+    await waitFor(() => {
       ((wrapper.find(EuiComboBox).props() as unknown) as {
         onChange: (a: EuiComboBoxOptionOption[]) => void;
       }).onChange([mockOptions[0], mockOptions[1]]);
-      await waitFor(() => {
-        wrapper.update();
-      });
+      wrapper.update();
     });
     wrapper.find(`[data-test-subj="add-index"]`).first().simulate('click');
 
diff --git a/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx b/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
index b28c7e70b8ae8..f091f22abcb94 100644
--- a/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/tables/helpers.test.tsx
@@ -17,7 +17,6 @@ import {
 import { TestProviders } from '../../mock';
 import { getEmptyValue } from '../empty_value';
 import { useMountAppended } from '../../utils/use_mount_appended';
-
 describe('Table Helpers', () => {
   const items = ['item1', 'item2', 'item3'];
   const mount = useMountAppended();
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
index 594bffbd4ff63..fd1fa1c29a807 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/index.test.tsx
@@ -6,7 +6,7 @@
 
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
-
+import { waitFor } from '@testing-library/react';
 import '../../mock/match_media';
 import { mockBrowserFields } from '../../containers/source/mock';
 import {
@@ -180,19 +180,6 @@ let testProps = {
 };
 
 describe('StatefulTopN', () => {
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
   describe('rendering in a global NON-timeline context', () => {
     let wrapper: ReactWrapper;
 
@@ -343,7 +330,7 @@ describe('StatefulTopN', () => {
     });
   });
   describe('rendering in a NON-active timeline context', () => {
-    test(`defaults to the 'Alert events' option when rendering in a NON-active timeline context (e.g. the Alerts table on the Detections page) when 'documentType' from 'useTimelineTypeContext()' is 'alerts'`, () => {
+    test(`defaults to the 'Alert events' option when rendering in a NON-active timeline context (e.g. the Alerts table on the Detections page) when 'documentType' from 'useTimelineTypeContext()' is 'alerts'`, async () => {
       const filterManager = new FilterManager(mockUiSettingsForFilterManager);
 
       const manageTimelineForTesting = {
@@ -365,10 +352,11 @@ describe('StatefulTopN', () => {
           </ManageGlobalTimeline>
         </TestProviders>
       );
+      await waitFor(() => {
+        const props = wrapper.find('[data-test-subj="top-n"]').first().props() as Props;
 
-      const props = wrapper.find('[data-test-subj="top-n"]').first().props() as Props;
-
-      expect(props.defaultView).toEqual('alert');
+        expect(props.defaultView).toEqual('alert');
+      });
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
index 829f918ddfe1b..f7ad35f2c5a37 100644
--- a/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/top_n/top_n.test.tsx
@@ -6,15 +6,13 @@
 
 import { mount, ReactWrapper } from 'enzyme';
 import React from 'react';
-
+import { waitFor } from '@testing-library/react';
 import '../../mock/match_media';
 import { TestProviders, mockIndexPattern } from '../../mock';
 import { setAbsoluteRangeDatePicker } from '../../store/inputs/actions';
 
 import { allEvents, defaultOptions } from './helpers';
-import { TopN } from './top_n';
-import { TimelineEventsType } from '../../../../common/types/timeline';
-import { InputsModelId } from '../../store/inputs/constants';
+import { TopN, Props as TopNProps } from './top_n';
 
 jest.mock('react-router-dom', () => {
   const original = jest.requireActual('react-router-dom');
@@ -90,28 +88,15 @@ const combinedQueries = {
 };
 
 describe('TopN', () => {
-  // Suppress warnings about "react-beautiful-dnd"
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  const originalWarn = console.warn;
-  beforeAll(() => {
-    console.warn = jest.fn();
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-    console.warn = originalWarn;
-  });
-
   const query = { query: '', language: 'kuery' };
 
   const toggleTopN = jest.fn();
-  const eventTypes: { [id: string]: TimelineEventsType } = {
+  const eventTypes: { [id: string]: TopNProps['defaultView'] } = {
     raw: 'raw',
     alert: 'alert',
     all: 'all',
   };
-  let testProps = {
+  let testProps: TopNProps = {
     defaultView: eventTypes.raw,
     field,
     filters: [],
@@ -121,7 +106,7 @@ describe('TopN', () => {
     options: defaultOptions,
     query,
     setAbsoluteRangeDatePicker,
-    setAbsoluteRangeDatePickerTarget: 'global' as InputsModelId,
+    setAbsoluteRangeDatePickerTarget: 'global',
     setQuery: jest.fn(),
     to: '2020-04-15T00:31:47.695Z',
     toggleTopN,
@@ -172,28 +157,35 @@ describe('TopN', () => {
   });
 
   describe('alerts view', () => {
-    let wrapper: ReactWrapper;
-
-    beforeEach(() => {
+    beforeAll(() => {
       testProps = {
         ...testProps,
         defaultView: eventTypes.alert,
       };
-      wrapper = mount(
+    });
+
+    test(`it renders SignalsByCategory when defaultView is 'alert'`, async () => {
+      const wrapper = mount(
         <TestProviders>
           <TopN {...testProps} />
         </TestProviders>
       );
+      await waitFor(() => {
+        expect(wrapper.find('[data-test-subj="alerts-histogram-panel"]').exists()).toBe(true);
+      });
     });
 
-    test(`it renders SignalsByCategory when defaultView is 'alert'`, () => {
-      expect(wrapper.find('[data-test-subj="alerts-histogram-panel"]').exists()).toBe(true);
-    });
-
-    test(`it does NOT render EventsByDataset when defaultView is 'alert'`, () => {
-      expect(
-        wrapper.find('[data-test-subj="eventsByDatasetOverview-uuid.v4()Panel"]').exists()
-      ).toBe(false);
+    test(`it does NOT render EventsByDataset when defaultView is 'alert'`, async () => {
+      const wrapper = mount(
+        <TestProviders>
+          <TopN {...testProps} />
+        </TestProviders>
+      );
+      await waitFor(() => {
+        expect(
+          wrapper.find('[data-test-subj="eventsByDatasetOverview-uuid.v4()Panel"]').exists()
+        ).toBe(false);
+      });
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
index fc970c066e8a5..f4a48eaea69c2 100644
--- a/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/url_state/index.test.tsx
@@ -21,8 +21,7 @@ import {
 } from './test_dependencies';
 import { UrlStateContainerPropTypes } from './types';
 import { useUrlStateHooks } from './use_url_state';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 let mockProps: UrlStateContainerPropTypes;
 
diff --git a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
index c026b65853a4c..6f8ff2e1bb21a 100644
--- a/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
+++ b/x-pack/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -13,20 +13,20 @@ import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_r
 import { dataPluginMock } from '../../../../../../../src/plugins/data/public/mocks';
 import { securityMock } from '../../../../../../plugins/security/public/mocks';
 import {
-  DEFAULT_APP_TIME_RANGE,
   DEFAULT_APP_REFRESH_INTERVAL,
-  DEFAULT_INDEX_KEY,
+  DEFAULT_APP_TIME_RANGE,
+  DEFAULT_BYTES_FORMAT,
+  DEFAULT_DARK_MODE,
   DEFAULT_DATE_FORMAT,
   DEFAULT_DATE_FORMAT_TZ,
-  DEFAULT_DARK_MODE,
-  DEFAULT_TIME_RANGE,
-  DEFAULT_REFRESH_RATE_INTERVAL,
   DEFAULT_FROM,
-  DEFAULT_TO,
+  DEFAULT_INDEX_KEY,
+  DEFAULT_INDEX_PATTERN,
   DEFAULT_INTERVAL_PAUSE,
   DEFAULT_INTERVAL_VALUE,
-  DEFAULT_BYTES_FORMAT,
-  DEFAULT_INDEX_PATTERN,
+  DEFAULT_REFRESH_RATE_INTERVAL,
+  DEFAULT_TIME_RANGE,
+  DEFAULT_TO,
 } from '../../../../common/constants';
 import { StartServices } from '../../../types';
 import { createSecuritySolutionStorageMock } from '../../mock/mock_local_storage';
@@ -77,14 +77,43 @@ export const createStartServicesMock = (): StartServices => {
   const data = dataPluginMock.createStartContract();
   const security = securityMock.createSetup();
 
-  const services = ({
+  return ({
     ...core,
-    data,
+    data: {
+      ...data,
+      query: {
+        ...data.query,
+        savedQueries: {
+          ...data.query.savedQueries,
+          getAllSavedQueries: jest.fn(() =>
+            Promise.resolve({
+              id: '123',
+              attributes: {
+                total: 123,
+              },
+            })
+          ),
+          findSavedQueries: jest.fn(() =>
+            Promise.resolve({
+              total: 123,
+              queries: [],
+            })
+          ),
+        },
+      },
+      search: {
+        ...data.search,
+        search: jest.fn().mockImplementation(() => ({
+          subscribe: jest.fn().mockImplementation(() => ({
+            error: jest.fn(),
+            next: jest.fn(),
+          })),
+        })),
+      },
+    },
     security,
     storage,
   } as unknown) as StartServices;
-
-  return services;
 };
 
 export const createWithKibanaMock = () => {
diff --git a/x-pack/plugins/security_solution/public/common/mock/formatted_relative.ts b/x-pack/plugins/security_solution/public/common/mock/formatted_relative.ts
new file mode 100644
index 0000000000000..0eb1c9a478ca0
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/mock/formatted_relative.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+jest.mock('@kbn/i18n/react', () => {
+  const originalModule = jest.requireActual('@kbn/i18n/react');
+  const FormattedRelative = jest.fn().mockImplementation(() => '20 hours ago');
+
+  return {
+    ...originalModule,
+    FormattedRelative,
+  };
+});
diff --git a/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts b/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts
new file mode 100644
index 0000000000000..e077d28925912
--- /dev/null
+++ b/x-pack/plugins/security_solution/public/common/mock/react_beautiful_dnd.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 {
+  DraggableProvided,
+  DraggableStateSnapshot,
+  DroppableProvided,
+  DroppableStateSnapshot,
+} from 'react-beautiful-dnd';
+import React from 'react';
+
+jest.mock('react-beautiful-dnd', () => ({
+  Droppable: ({
+    children,
+  }: {
+    children: (a: DroppableProvided, b: DroppableStateSnapshot) => void;
+  }) =>
+    children(
+      {
+        droppableProps: {
+          'data-rbd-droppable-context-id': '123',
+          'data-rbd-droppable-id': '123',
+        },
+        innerRef: jest.fn(),
+      },
+      {
+        isDraggingOver: false,
+        isUsingPlaceholder: false,
+      }
+    ),
+  Draggable: ({
+    children,
+  }: {
+    children: (a: DraggableProvided, b: DraggableStateSnapshot) => void;
+  }) =>
+    children(
+      {
+        draggableProps: {
+          'data-rbd-draggable-context-id': '123',
+          'data-rbd-draggable-id': '123',
+        },
+        innerRef: jest.fn(),
+      },
+      {
+        isDragging: false,
+        isDropAnimating: false,
+      }
+    ),
+  DragDropContext: ({ children }: { children: React.ReactNode }) => children,
+}));
diff --git a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
index 8c186addf783d..e84f80655fbe4 100644
--- a/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
+++ b/x-pack/plugins/security_solution/public/common/mock/test_providers.tsx
@@ -46,7 +46,7 @@ export const kibanaObservable = new BehaviorSubject(createStartServicesMock());
 Object.defineProperty(window, 'localStorage', {
   value: localStorageMock(),
 });
-
+window.scrollTo = jest.fn();
 const MockKibanaContextProvider = createKibanaContextProviderMock();
 const { storage } = createSecuritySolutionStorageMock();
 
diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx
index 4312be0b46990..2bdc813639740 100644
--- a/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule/index.test.tsx
@@ -7,6 +7,7 @@ import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { ThemeProvider } from 'styled-components';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_light.json';
+import { act } from '@testing-library/react';
 
 import { stubIndexPattern } from 'src/plugins/data/common/index_patterns/index_pattern.stub';
 import { StepAboutRule } from '.';
@@ -23,18 +24,17 @@ import { fillEmptySeverityMappings } from '../../../pages/detection_engine/rules
 
 jest.mock('../../../../common/containers/source');
 const theme = () => ({ eui: euiDarkVars, darkMode: true });
-
-/* eslint-disable no-console */
-// Silence until enzyme fixed to use ReactTestUtils.act()
-const originalError = console.error;
-beforeAll(() => {
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
+jest.mock('@elastic/eui', () => {
+  const original = jest.requireActual('@elastic/eui');
+  return {
+    ...original,
+    // eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+    EuiFieldText: (props: any) => {
+      const { isInvalid, isLoading, fullWidth, inputRef, isDisabled, ...validInputProps } = props;
+      return <input {...validInputProps} />;
+    },
+  };
 });
-/* eslint-enable no-console */
-
 describe('StepAboutRuleComponent', () => {
   let formHook: RuleStepsFormHooks[RuleStep.aboutRule] | null = null;
   const setFormHook = <K extends keyof RuleStepsFormHooks>(
@@ -54,7 +54,7 @@ describe('StepAboutRuleComponent', () => {
     ]);
   });
 
-  test('it renders StepRuleDescription if isReadOnlyView is true and "name" property exists', () => {
+  it('it renders StepRuleDescription if isReadOnlyView is true and "name" property exists', () => {
     const wrapper = shallow(
       <StepAboutRule
         addPadding={false}
@@ -82,17 +82,18 @@ describe('StepAboutRuleComponent', () => {
       </ThemeProvider>
     );
 
-    if (!formHook) {
-      throw new Error('Form hook not set, but tests depend on it');
-    }
-
-    wrapper
-      .find('[data-test-subj="detectionEngineStepAboutRuleName"] input')
-      .first()
-      .simulate('change', { target: { value: 'Test name text' } });
-
-    const result = await formHook();
-    expect(result?.isValid).toEqual(false);
+    await act(async () => {
+      if (!formHook) {
+        throw new Error('Form hook not set, but tests depend on it');
+      }
+      wrapper
+        .find('[data-test-subj="detectionEngineStepAboutRuleName"] input')
+        .first()
+        .simulate('change', { target: { value: 'Test name text' } });
+
+      const result = await formHook();
+      expect(result?.isValid).toEqual(false);
+    });
   });
 
   it('is invalid if no "name" is present', async () => {
@@ -109,17 +110,18 @@ describe('StepAboutRuleComponent', () => {
       </ThemeProvider>
     );
 
-    if (!formHook) {
-      throw new Error('Form hook not set, but tests depend on it');
-    }
-
-    wrapper
-      .find('[data-test-subj="detectionEngineStepAboutRuleDescription"] textarea')
-      .first()
-      .simulate('change', { target: { value: 'Test description text' } });
-
-    const result = await formHook();
-    expect(result?.isValid).toEqual(false);
+    await act(async () => {
+      if (!formHook) {
+        throw new Error('Form hook not set, but tests depend on it');
+      }
+
+      wrapper
+        .find('[data-test-subj="detectionEngineStepAboutRuleDescription"] textarea')
+        .first()
+        .simulate('change', { target: { value: 'Test description text' } });
+      const result = await formHook();
+      expect(result?.isValid).toEqual(false);
+    });
   });
 
   it('is valid if both "name" and "description" are present', async () => {
@@ -136,10 +138,6 @@ describe('StepAboutRuleComponent', () => {
       </ThemeProvider>
     );
 
-    if (!formHook) {
-      throw new Error('Form hook not set, but tests depend on it');
-    }
-
     wrapper
       .find('[data-test-subj="detectionEngineStepAboutRuleDescription"] textarea')
       .first()
@@ -173,12 +171,17 @@ describe('StepAboutRuleComponent', () => {
       ],
     };
 
-    const result = await formHook();
-    expect(result?.isValid).toEqual(true);
-    expect(result?.data).toEqual(expected);
+    await act(async () => {
+      if (!formHook) {
+        throw new Error('Form hook not set, but tests depend on it');
+      }
+      const result = await formHook();
+      expect(result?.isValid).toEqual(true);
+      expect(result?.data).toEqual(expected);
+    });
   });
 
-  test('it allows user to set the risk score as a number (and not a string)', async () => {
+  it('it allows user to set the risk score as a number (and not a string)', async () => {
     const wrapper = mount(
       <ThemeProvider theme={theme}>
         <StepAboutRule
@@ -192,10 +195,6 @@ describe('StepAboutRuleComponent', () => {
       </ThemeProvider>
     );
 
-    if (!formHook) {
-      throw new Error('Form hook not set, but tests depend on it');
-    }
-
     wrapper
       .find('[data-test-subj="detectionEngineStepAboutRuleName"] input')
       .first()
@@ -235,9 +234,14 @@ describe('StepAboutRuleComponent', () => {
       ],
     };
 
-    const result = await formHook();
-    expect(result?.isValid).toEqual(true);
-    expect(result?.data).toEqual(expected);
+    await act(async () => {
+      if (!formHook) {
+        throw new Error('Form hook not set, but tests depend on it');
+      }
+      const result = await formHook();
+      expect(result?.isValid).toEqual(true);
+      expect(result?.data).toEqual(expected);
+    });
   });
 
   it('does not modify the provided risk score until the user changes the severity', async () => {
@@ -254,10 +258,6 @@ describe('StepAboutRuleComponent', () => {
       </ThemeProvider>
     );
 
-    if (!formHook) {
-      throw new Error('Form hook not set, but tests depend on it');
-    }
-
     wrapper
       .find('[data-test-subj="detectionEngineStepAboutRuleName"] input')
       .first()
@@ -268,18 +268,23 @@ describe('StepAboutRuleComponent', () => {
       .first()
       .simulate('change', { target: { value: 'Test description text' } });
 
-    const result = await formHook();
-    expect(result?.isValid).toEqual(true);
-    expect(result?.data?.riskScore.value).toEqual(21);
-
-    wrapper
-      .find('[data-test-subj="detectionEngineStepAboutRuleSeverity"] [data-test-subj="select"]')
-      .last()
-      .simulate('click');
-    wrapper.find('button#medium').simulate('click');
-
-    const result2 = await formHook();
-    expect(result2?.isValid).toEqual(true);
-    expect(result2?.data?.riskScore.value).toEqual(47);
+    await act(async () => {
+      if (!formHook) {
+        throw new Error('Form hook not set, but tests depend on it');
+      }
+      const result = await formHook();
+      expect(result?.isValid).toEqual(true);
+      expect(result?.data?.riskScore.value).toEqual(21);
+
+      wrapper
+        .find('[data-test-subj="detectionEngineStepAboutRuleSeverity"] [data-test-subj="select"]')
+        .last()
+        .simulate('click');
+      wrapper.find('button#medium').simulate('click');
+
+      const result2 = await formHook();
+      expect(result2?.isValid).toEqual(true);
+      expect(result2?.data?.riskScore.value).toEqual(47);
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.test.tsx b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.test.tsx
index 591e1c81cd2ad..bae5a237bd124 100644
--- a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/form.test.tsx
@@ -5,7 +5,7 @@
  */
 import React, { FormEvent } from 'react';
 import { mount, ReactWrapper } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 import { TestProviders } from '../../../common/mock';
 import { ValueListsForm } from './form';
@@ -24,7 +24,7 @@ const mockSelectFile: <P>(container: ReactWrapper<P>, file: File) => Promise<voi
   file
 ) => {
   const fileChange = container.find('EuiFilePicker').prop('onChange');
-  act(() => {
+  await waitFor(() => {
     if (fileChange) {
       fileChange(({ item: () => file } as unknown) as FormEvent);
     }
diff --git a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/modal.test.tsx b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/modal.test.tsx
index ff743d1d5090a..dc40c997bc840 100644
--- a/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/modal.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/value_lists_management_modal/modal.test.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 import { getListResponseMock } from '../../../../../lists/common/schemas/response/list_schema.mock';
 import { exportList, useDeleteList, useFindLists, ListSchema } from '../../../shared_imports';
@@ -46,7 +46,6 @@ describe('ValueListsModal', () => {
     );
 
     expect(container.find('EuiModal')).toHaveLength(0);
-    container.unmount();
   });
 
   it('renders modal if showModal is true', () => {
@@ -57,7 +56,6 @@ describe('ValueListsModal', () => {
     );
 
     expect(container.find('EuiModal')).toHaveLength(1);
-    container.unmount();
   });
 
   it('calls onClose when modal is closed', () => {
@@ -71,7 +69,6 @@ describe('ValueListsModal', () => {
     container.find('button[data-test-subj="value-lists-modal-close-action"]').simulate('click');
 
     expect(onClose).toHaveBeenCalled();
-    container.unmount();
   });
 
   it('renders ValueListsForm and an EuiTable', () => {
@@ -83,29 +80,27 @@ describe('ValueListsModal', () => {
 
     expect(container.find('ValueListsForm')).toHaveLength(1);
     expect(container.find('EuiBasicTable')).toHaveLength(1);
-    container.unmount();
   });
 
   describe('modal table actions', () => {
-    it('calls exportList when export is clicked', () => {
+    it('calls exportList when export is clicked', async () => {
       const container = mount(
         <TestProviders>
           <ValueListsModal showModal={true} onClose={jest.fn()} />
         </TestProviders>
       );
 
-      act(() => {
+      await waitFor(() => {
         container
           .find('button[data-test-subj="action-export-value-list"]')
           .first()
           .simulate('click');
-        container.unmount();
       });
 
       expect(exportList).toHaveBeenCalledWith(expect.objectContaining({ listId: 'some-list-id' }));
     });
 
-    it('calls deleteList when delete is clicked', () => {
+    it('calls deleteList when delete is clicked', async () => {
       const deleteListMock = jest.fn();
       (useDeleteList as jest.Mock).mockReturnValue({
         start: deleteListMock,
@@ -117,12 +112,11 @@ describe('ValueListsModal', () => {
         </TestProviders>
       );
 
-      act(() => {
+      await waitFor(() => {
         container
           .find('button[data-test-subj="action-delete-value-list"]')
           .first()
           .simulate('click');
-        container.unmount();
       });
 
       expect(deleteListMock).toHaveBeenCalledWith(expect.objectContaining({ id: 'some-list-id' }));
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx
index a5d21d2847586..0982b5740b893 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { useParams } from 'react-router-dom';
-
+import { waitFor } from '@testing-library/react';
 import '../../../common/mock/match_media';
 import {
   apolloClientObservable,
@@ -80,7 +80,7 @@ describe('DetectionEnginePageComponent', () => {
     });
   });
 
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     const wrapper = mount(
       <TestProviders store={store}>
         <Router history={mockHistory}>
@@ -93,7 +93,8 @@ describe('DetectionEnginePageComponent', () => {
         </Router>
       </TestProviders>
     );
-
-    expect(wrapper.find('FiltersGlobal').exists()).toBe(true);
+    await waitFor(() => {
+      expect(wrapper.find('FiltersGlobal').exists()).toBe(true);
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx
index 9f486dc11e99d..13c6985a30c2b 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/all/index.test.tsx
@@ -6,12 +6,11 @@
 
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
 
 import '../../../../../common/mock/match_media';
+import '../../../../../common/mock/formatted_relative';
 import { TestProviders } from '../../../../../common/mock';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { AllRules } from './index';
 
 jest.mock('react-router-dom', () => {
@@ -198,11 +197,9 @@ describe('AllRules', () => {
       </TestProviders>
     );
 
-    await act(async () => {
-      await waitFor(() => {
-        expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeFalsy();
-        expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeTruthy();
-      });
+    await waitFor(() => {
+      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeFalsy();
+      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeTruthy();
     });
   });
 
@@ -226,12 +223,10 @@ describe('AllRules', () => {
     const monitoringTab = wrapper.find('[data-test-subj="allRulesTableTab-monitoring"] button');
     monitoringTab.simulate('click');
 
-    await act(async () => {
-      await waitFor(() => {
-        wrapper.update();
-        expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeTruthy();
-        expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeFalsy();
-      });
+    await waitFor(() => {
+      wrapper.update();
+      expect(wrapper.exists('[data-test-subj="monitoring-table"]')).toBeTruthy();
+      expect(wrapper.exists('[data-test-subj="rules-table"]')).toBeFalsy();
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx
index 22c3c43fb2356..afa4777e74856 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.test.tsx
@@ -6,6 +6,7 @@
 
 import React from 'react';
 import { mount } from 'enzyme';
+import { waitFor } from '@testing-library/react';
 
 import '../../../../../common/mock/match_media';
 import {
@@ -77,7 +78,7 @@ describe('RuleDetailsPageComponent', () => {
     });
   });
 
-  it('renders correctly', () => {
+  it('renders correctly', async () => {
     const wrapper = mount(
       <TestProviders store={store}>
         <Router history={mockHistory}>
@@ -93,7 +94,8 @@ describe('RuleDetailsPageComponent', () => {
         wrappingComponent: TestProviders,
       }
     );
-
-    expect(wrapper.find('[data-test-subj="header-page-title"]').exists()).toBe(true);
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="header-page-title"]').exists()).toBe(true);
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/helpers.test.tsx b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/helpers.test.tsx
index f11b0ac4ec3f8..8545e5da512bb 100644
--- a/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/helpers.test.tsx
+++ b/x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/helpers.test.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
+import moment from 'moment';
 import {
   GetStepsData,
   getDefineStepsData,
@@ -31,6 +31,8 @@ import {
 } from './types';
 
 describe('rule helpers', () => {
+  // @ts-ignore
+  moment.suppressDeprecationWarnings = true;
   describe('getStepsData', () => {
     test('returns object with about, define, schedule and actions step properties formatted', () => {
       const {
diff --git a/x-pack/plugins/security_solution/public/hosts/components/first_last_seen_host/index.test.tsx b/x-pack/plugins/security_solution/public/hosts/components/first_last_seen_host/index.test.tsx
index 4f64cca45d162..4f2dff47af5a6 100644
--- a/x-pack/plugins/security_solution/public/hosts/components/first_last_seen_host/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/hosts/components/first_last_seen_host/index.test.tsx
@@ -6,8 +6,7 @@
 
 import React from 'react';
 
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { render, act, wait as waitFor } from '@testing-library/react';
+import { render, waitFor } from '@testing-library/react';
 
 import { useFirstLastSeenHost } from '../../containers/hosts/first_last_seen';
 import { TestProviders } from '../../../common/mock';
@@ -26,16 +25,6 @@ describe('FirstLastSeen Component', () => {
   const firstSeen = 'Apr 8, 2019 @ 16:09:40.692';
   const lastSeen = 'Apr 8, 2019 @ 18:35:45.064';
 
-  // Suppress warnings about "react-apollo" until we migrate to apollo@3
-  /* eslint-disable no-console */
-  const originalError = console.error;
-  beforeAll(() => {
-    console.error = jest.fn();
-  });
-  afterAll(() => {
-    console.error = originalError;
-  });
-
   test('Loading', async () => {
     useFirstLastSeenHostMock.mockReturnValue([true, MOCKED_RESPONSE]);
     const { container } = render(
@@ -66,13 +55,11 @@ describe('FirstLastSeen Component', () => {
       </TestProviders>
     );
 
-    await act(() =>
-      waitFor(() => {
-        expect(container.innerHTML).toBe(
-          `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
-        );
-      })
-    );
+    await waitFor(() => {
+      expect(container.innerHTML).toBe(
+        `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
+      );
+    });
   });
 
   test('Last Seen', async () => {
@@ -87,13 +74,11 @@ describe('FirstLastSeen Component', () => {
         />
       </TestProviders>
     );
-    await act(() =>
-      waitFor(() => {
-        expect(container.innerHTML).toBe(
-          `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
-        );
-      })
-    );
+    await waitFor(() => {
+      expect(container.innerHTML).toBe(
+        `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
+      );
+    });
   });
 
   test('First Seen is empty but not Last Seen', async () => {
@@ -115,13 +100,11 @@ describe('FirstLastSeen Component', () => {
       </TestProviders>
     );
 
-    await act(() =>
-      waitFor(() => {
-        expect(container.innerHTML).toBe(
-          `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
-        );
-      })
-    );
+    await waitFor(() => {
+      expect(container.innerHTML).toBe(
+        `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${lastSeen}</span></div>`
+      );
+    });
   });
 
   test('Last Seen is empty but not First Seen', async () => {
@@ -143,13 +126,11 @@ describe('FirstLastSeen Component', () => {
       </TestProviders>
     );
 
-    await act(() =>
-      waitFor(() => {
-        expect(container.innerHTML).toBe(
-          `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
-        );
-      })
-    );
+    await waitFor(() => {
+      expect(container.innerHTML).toBe(
+        `<div class="euiText euiText--small"><span class="euiToolTipAnchor">${firstSeen}</span></div>`
+      );
+    });
   });
 
   test('First Seen With a bad date time string', async () => {
@@ -170,11 +151,9 @@ describe('FirstLastSeen Component', () => {
         />
       </TestProviders>
     );
-    await act(() =>
-      waitFor(() => {
-        expect(container.textContent).toBe('something-invalid');
-      })
-    );
+    await waitFor(() => {
+      expect(container.textContent).toBe('something-invalid');
+    });
   });
 
   test('Last Seen With a bad date time string', async () => {
@@ -195,10 +174,8 @@ describe('FirstLastSeen Component', () => {
         />
       </TestProviders>
     );
-    await act(() =>
-      waitFor(() => {
-        expect(container.textContent).toBe('something-invalid');
-      })
-    );
+    await waitFor(() => {
+      expect(container.textContent).toBe('something-invalid');
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/endpoint_pagination.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/endpoint_pagination.test.ts
index b4e00319485e9..1e3a92e6ec135 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/endpoint_pagination.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/endpoint_pagination.test.ts
@@ -26,6 +26,10 @@ import {
 } from '../../../../common/store/test_utils';
 import { getEndpointListPath } from '../../../common/routing';
 
+jest.mock('../../policy/store/policy_list/services/ingest', () => ({
+  sendGetAgentPolicyList: () => Promise.resolve({ items: [] }),
+  sendGetEndpointSecurityPackage: () => Promise.resolve({}),
+}));
 describe('endpoint list pagination: ', () => {
   let fakeCoreStart: jest.Mocked<CoreStart>;
   let depsStart: DepsStartMock;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
index c4d2886f3e8e5..d19b3a0ce4177 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/store/middleware.test.ts
@@ -24,8 +24,9 @@ import { endpointMiddlewareFactory } from './middleware';
 import { getEndpointListPath } from '../../../common/routing';
 
 jest.mock('../../policy/store/policy_list/services/ingest', () => ({
-  sendGetEndpointSecurityPackage: () => Promise.resolve({}),
   sendGetAgentConfigList: () => Promise.resolve({ items: [] }),
+  sendGetAgentPolicyList: () => Promise.resolve({ items: [] }),
+  sendGetEndpointSecurityPackage: () => Promise.resolve({}),
 }));
 
 describe('endpoint list middleware', () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index 51a6be18471aa..bb4be42b04d4e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -7,7 +7,8 @@
 import React from 'react';
 import * as reactTestingLibrary from '@testing-library/react';
 import { EndpointList } from './index';
-import '../../../../common/mock/match_media.ts';
+import '../../../../common/mock/match_media';
+
 import {
   mockEndpointDetailsApiResult,
   mockEndpointResultList,
@@ -26,8 +27,25 @@ import { EndpointDocGenerator } from '../../../../../common/endpoint/generate_da
 import { POLICY_STATUS_TO_HEALTH_COLOR, POLICY_STATUS_TO_TEXT } from './host_constants';
 import { mockPolicyResultList } from '../../policy/store/policy_list/test_mock_utils';
 
-jest.mock('../../../../common/components/link_to');
+// not sure why this can't be imported from '../../../../common/mock/formatted_relative';
+// but sure enough it needs to be inline in this one file
+jest.mock('@kbn/i18n/react', () => {
+  const originalModule = jest.requireActual('@kbn/i18n/react');
+  const FormattedRelative = jest.fn().mockImplementation(() => '20 hours ago');
 
+  return {
+    ...originalModule,
+    FormattedRelative,
+  };
+});
+jest.mock('../../../../common/components/link_to');
+jest.mock('../../policy/store/policy_list/services/ingest', () => {
+  const originalModule = jest.requireActual('../../policy/store/policy_list/services/ingest');
+  return {
+    ...originalModule,
+    sendGetEndpointSecurityPackage: () => Promise.resolve({}),
+  };
+});
 describe('when on the list page', () => {
   const docGenerator = new EndpointDocGenerator();
   let render: () => ReturnType<AppContextTestRender['render']>;
@@ -35,7 +53,6 @@ describe('when on the list page', () => {
   let store: AppContextTestRender['store'];
   let coreStart: AppContextTestRender['coreStart'];
   let middlewareSpy: AppContextTestRender['middlewareSpy'];
-
   beforeEach(() => {
     const mockedContext = createAppRootMockRenderer();
     ({ history, store, coreStart, middlewareSpy } = mockedContext);
diff --git a/x-pack/plugins/security_solution/public/management/pages/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/index.test.tsx
index c04d3b1ec1a90..bb947310644f8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/index.test.tsx
@@ -15,10 +15,21 @@ jest.mock('../../common/hooks/endpoint/ingest_enabled');
 
 describe('when in the Admistration tab', () => {
   let render: () => ReturnType<AppContextTestRender['render']>;
+  let coreStart: AppContextTestRender['coreStart'];
 
   beforeEach(() => {
     const mockedContext = createAppRootMockRenderer();
+    coreStart = mockedContext.coreStart;
     render = () => mockedContext.render(<ManagementContainer />);
+    coreStart.http.get.mockImplementation(() =>
+      Promise.resolve({
+        response: [
+          {
+            name: 'endpoint',
+          },
+        ],
+      })
+    );
   });
 
   it('should display the No Permissions view when Ingest is OFF', async () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/index.tsx b/x-pack/plugins/security_solution/public/management/pages/index.tsx
index 959753cba7bd7..2d29e33c8d3d5 100644
--- a/x-pack/plugins/security_solution/public/management/pages/index.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/index.tsx
@@ -71,14 +71,12 @@ const NoPermissions = memo(() => {
           />
         }
         body={
-          <p>
-            <EuiText color="subdued">
-              <FormattedMessage
-                id="xpack.securitySolution.endpointManagement.noPermissionsSubText"
-                defaultMessage="It looks like Ingest Manager is disabled. Ingest Manager must be enabled to use this feature. If you do not have permissions to enable Ingest Manager, contact your Kibana administrator."
-              />
-            </EuiText>
-          </p>
+          <EuiText color="subdued">
+            <FormattedMessage
+              id="xpack.securitySolution.endpointManagement.noPermissionsSubText"
+              defaultMessage="It looks like Ingest Manager is disabled. Ingest Manager must be enabled to use this feature. If you do not have permissions to enable Ingest Manager, contact your Kibana administrator."
+            />
+          </EuiText>
         }
       />
       <SpyRoute pageName={SecurityPageName.administration} />
diff --git a/x-pack/plugins/security_solution/public/network/pages/network.test.tsx b/x-pack/plugins/security_solution/public/network/pages/network.test.tsx
index 3539fe717e14d..f600c15f4c7d8 100644
--- a/x-pack/plugins/security_solution/public/network/pages/network.test.tsx
+++ b/x-pack/plugins/security_solution/public/network/pages/network.test.tsx
@@ -7,7 +7,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 import { Router } from 'react-router-dom';
-
+import { waitFor } from '@testing-library/react';
 import '../../common/mock/match_media';
 import { Filter } from '../../../../../../src/plugins/data/common/es_query';
 import { useSourcererScope } from '../../common/containers/sourcerer';
@@ -71,7 +71,7 @@ const mockProps = {
   hasMlUserPermissions: true,
 };
 const mockUseSourcererScope = useSourcererScope as jest.Mock;
-describe('rendering - rendering', () => {
+describe('Network page - rendering', () => {
   test('it renders the Setup Instructions text when no index is available', () => {
     mockUseSourcererScope.mockReturnValue({
       selectedPatterns: [],
@@ -88,7 +88,7 @@ describe('rendering - rendering', () => {
     expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(true);
   });
 
-  test('it DOES NOT render the Setup Instructions text when an index is available', () => {
+  test('it DOES NOT render the Setup Instructions text when an index is available', async () => {
     mockUseSourcererScope.mockReturnValue({
       selectedPatterns: [],
       indicesExist: true,
@@ -101,10 +101,12 @@ describe('rendering - rendering', () => {
         </Router>
       </TestProviders>
     );
-    expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(false);
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(false);
+    });
   });
 
-  test('it should add the new filters after init', () => {
+  test('it should add the new filters after init', async () => {
     const newFilters: Filter[] = [
       {
         query: {
@@ -157,12 +159,14 @@ describe('rendering - rendering', () => {
         </Router>
       </TestProviders>
     );
-    wrapper.update();
+    await waitFor(() => {
+      wrapper.update();
 
-    myStore.dispatch(inputsActions.setSearchBarFilter({ id: 'global', filters: newFilters }));
-    wrapper.update();
-    expect(wrapper.find(NetworkRoutes).props().filterQuery).toEqual(
-      '{"bool":{"must":[],"filter":[{"match_all":{}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"host.name":"ItRocks"}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}'
-    );
+      myStore.dispatch(inputsActions.setSearchBarFilter({ id: 'global', filters: newFilters }));
+      wrapper.update();
+      expect(wrapper.find(NetworkRoutes).props().filterQuery).toEqual(
+        '{"bool":{"must":[],"filter":[{"match_all":{}},{"bool":{"filter":[{"bool":{"should":[{"match_phrase":{"host.name":"ItRocks"}}],"minimum_should_match":1}}]}}],"should":[],"must_not":[]}}'
+      );
+    });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
index 6f1b7e95e763d..704506d9813d9 100644
--- a/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/alerts_by_category/index.test.tsx
@@ -10,9 +10,9 @@ import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
 import '../../../common/mock/match_media';
+import '../../../common/mock/react_beautiful_dnd';
 import { useMatrixHistogram } from '../../../common/containers/matrix_histogram';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { mockIndexPattern, TestProviders } from '../../../common/mock';
 
 import { AlertsByCategory } from '.';
diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
index fee38ad3c6289..bb47fcd5512fc 100644
--- a/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/overview/components/host_overview/endpoint_overview/index.test.tsx
@@ -8,6 +8,7 @@ import { mount } from 'enzyme';
 import React from 'react';
 
 import '../../../../common/mock/match_media';
+import '../../../../common/mock/react_beautiful_dnd';
 import { TestProviders } from '../../../../common/mock';
 
 import { EndpointOverview } from './index';
diff --git a/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx b/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx
index 5406b444cee56..3d275a961bb2a 100644
--- a/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx
+++ b/x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx
@@ -5,8 +5,8 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { render, act, RenderResult, fireEvent } from '@testing-library/react';
-import { renderHook, act as hooksAct } from '@testing-library/react-hooks';
+import { render, waitFor, RenderResult, fireEvent } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { useCamera, useAutoUpdatingClientRect } from './use_camera';
 import { Provider } from 'react-redux';
 import * as selectors from '../store/selectors';
@@ -69,8 +69,8 @@ describe('useCamera on an unpainted element', () => {
     const topMargin = 20;
     const centerX = width / 2 + leftMargin;
     const centerY = height / 2 + topMargin;
-    beforeEach(() => {
-      act(() => {
+    beforeEach(async () => {
+      await waitFor(() => {
         simulator.controls.simulateElementResize(element, {
           width,
           height,
@@ -97,11 +97,11 @@ describe('useCamera on an unpainted element', () => {
       const resizeObserverSpy = jest.spyOn(simulator.mock.ResizeObserver.prototype, 'observe');
 
       let [rect, ref] = result.current;
-      hooksAct(() => ref(element));
+      act(() => ref(element));
       expect(resizeObserverSpy).toHaveBeenCalledWith(element);
 
       const div = document.createElement('div');
-      hooksAct(() => ref(div));
+      act(() => ref(div));
       expect(resizeObserverSpy).toHaveBeenCalledWith(div);
 
       [rect, ref] = result.current;
@@ -161,7 +161,7 @@ describe('useCamera on an unpainted element', () => {
     });
     describe('when the camera begins animation', () => {
       let process: SafeResolverEvent;
-      beforeEach(() => {
+      beforeEach(async () => {
         const events: SafeResolverEvent[] = [];
         const numberOfEvents: number = 10;
 
@@ -184,7 +184,7 @@ describe('useCamera on an unpainted element', () => {
             type: 'serverReturnedResolverData',
             payload: { result: tree, parameters: mockTreeFetcherParameters() },
           };
-          act(() => {
+          await waitFor(() => {
             store.dispatch(serverResponseAction);
           });
         } else {
@@ -205,7 +205,7 @@ describe('useCamera on an unpainted element', () => {
             process,
           },
         };
-        act(() => {
+        await waitFor(() => {
           store.dispatch(cameraAction);
         });
       });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category.test.tsx
index 62306046c7b8c..4f5e3c814751c 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/category.test.tsx
@@ -16,7 +16,6 @@ import { TestProviders } from '../../../common/mock';
 import { useMountAppended } from '../../../common/utils/use_mount_appended';
 
 import * as i18n from './translations';
-
 describe('Category', () => {
   const timelineId = 'test';
   const selectedCategoryId = 'client';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx
index 90f4444562c5a..a3a19d3877fa1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/field_name.test.tsx
@@ -6,7 +6,7 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-
+import { waitFor } from '@testing-library/react';
 import { mockBrowserFields } from '../../../common/containers/source/mock';
 import { TestProviders } from '../../../common/mock';
 import '../../../common/mock/match_media';
@@ -44,17 +44,19 @@ describe('FieldName', () => {
     ).toEqual(timestampFieldId);
   });
 
-  test('it renders a copy to clipboard action menu item a user hovers over the name', () => {
+  test('it renders a copy to clipboard action menu item a user hovers over the name', async () => {
     const wrapper = mount(
       <TestProviders>
         <FieldName {...defaultProps} />
       </TestProviders>
     );
-    wrapper.find('[data-test-subj="withHoverActionsButton"]').at(0).simulate('mouseenter');
-    wrapper.update();
-    jest.runAllTimers();
-    wrapper.update();
-    expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
+    await waitFor(() => {
+      wrapper.find('[data-test-subj="withHoverActionsButton"]').at(0).simulate('mouseenter');
+      wrapper.update();
+      jest.runAllTimers();
+      wrapper.update();
+      expect(wrapper.find('[data-test-subj="copy-to-clipboard"]').exists()).toBe(true);
+    });
   });
 
   test('it highlights the text specified by the `highlight` prop', () => {
diff --git a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
index a3c7440bece24..3bfeabc614ea9 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/fields_browser/index.test.tsx
@@ -6,8 +6,10 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
+import { waitFor } from '@testing-library/react';
 
 import '../../../common/mock/match_media';
+import '../../../common/mock/react_beautiful_dnd';
 import { mockBrowserFields } from '../../../common/containers/source/mock';
 import { TestProviders } from '../../../common/mock';
 
@@ -15,19 +17,6 @@ import { FIELD_BROWSER_HEIGHT, FIELD_BROWSER_WIDTH } from './helpers';
 
 import { StatefulFieldsBrowserComponent } from '.';
 
-// Suppress warnings about "react-beautiful-dnd" until we migrate to @testing-library/react
-/* eslint-disable no-console */
-const originalError = console.error;
-const originalWarn = console.warn;
-beforeAll(() => {
-  console.warn = jest.fn();
-  console.error = jest.fn();
-});
-afterAll(() => {
-  console.error = originalError;
-  console.warn = originalWarn;
-});
-
 describe('StatefulFieldsBrowser', () => {
   const timelineId = 'test';
 
@@ -93,7 +82,7 @@ describe('StatefulFieldsBrowser', () => {
     beforeEach(() => {
       jest.useFakeTimers();
     });
-    test('it updates the selectedCategoryId state, which makes the category bold, when the user clicks a category name in the left hand side of the field browser', () => {
+    test('it updates the selectedCategoryId state, which makes the category bold, when the user clicks a category name in the left hand side of the field browser', async () => {
       const wrapper = mount(
         <TestProviders>
           <StatefulFieldsBrowserComponent
@@ -111,14 +100,15 @@ describe('StatefulFieldsBrowser', () => {
       wrapper.find('[data-test-subj="show-field-browser"]').first().simulate('click');
 
       wrapper.find(`.field-browser-category-pane-auditd-${timelineId}`).first().simulate('click');
-
-      wrapper.update();
-      expect(
-        wrapper.find(`.field-browser-category-pane-auditd-${timelineId}`).at(1)
-      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+      await waitFor(() => {
+        wrapper.update();
+        expect(
+          wrapper.find(`.field-browser-category-pane-auditd-${timelineId}`).at(1)
+        ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+      });
     });
 
-    test('it updates the selectedCategoryId state according to most fields returned', () => {
+    test('it updates the selectedCategoryId state according to most fields returned', async () => {
       const wrapper = mount(
         <TestProviders>
           <StatefulFieldsBrowserComponent
@@ -133,20 +123,22 @@ describe('StatefulFieldsBrowser', () => {
         </TestProviders>
       );
 
-      wrapper.find('[data-test-subj="show-field-browser"]').first().simulate('click');
-      expect(
-        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).at(1)
-      ).toHaveStyleRule('font-weight', 'normal', { modifier: '.euiText' });
-      wrapper
-        .find('[data-test-subj="field-search"]')
-        .last()
-        .simulate('change', { target: { value: 'cloud' } });
-
-      jest.runOnlyPendingTimers();
-      wrapper.update();
-      expect(
-        wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).at(1)
-      ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+      await waitFor(() => {
+        wrapper.find('[data-test-subj="show-field-browser"]').first().simulate('click');
+        expect(
+          wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).at(1)
+        ).toHaveStyleRule('font-weight', 'normal', { modifier: '.euiText' });
+        wrapper
+          .find('[data-test-subj="field-search"]')
+          .last()
+          .simulate('change', { target: { value: 'cloud' } });
+
+        jest.runOnlyPendingTimers();
+        wrapper.update();
+        expect(
+          wrapper.find(`.field-browser-category-pane-cloud-${timelineId}`).at(1)
+        ).toHaveStyleRule('font-weight', 'bold', { modifier: '.euiText' });
+      });
     });
   });
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx
index aa19fb6f68ed4..95ad5285507c5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.test.tsx
@@ -8,6 +8,7 @@ import { mount, shallow } from 'enzyme';
 import { set } from '@elastic/safer-lodash-set/fp';
 import React from 'react';
 import { ActionCreator } from 'typescript-fsa';
+import '../../../common/mock/react_beautiful_dnd';
 
 import {
   apolloClientObservable,
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/index.test.tsx
index a927627353f69..8aebc8519bcb7 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/index.test.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ThemeProvider } from 'styled-components';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import '../../../../common/mock/formatted_relative';
 
 import { NoteCard } from '.';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_card_header.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_card_header.test.tsx
index fcb0d0294fa22..bc46c238c5ae8 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_card_header.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_card_header.test.tsx
@@ -7,6 +7,7 @@
 import moment from 'moment-timezone';
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import '../../../../common/mock/formatted_relative';
 
 import * as i18n from '../translations';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_created.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_created.test.tsx
index 4bb9a6b666a87..7b51a9eaa1a2d 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_created.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_card/note_created.test.tsx
@@ -7,6 +7,7 @@
 import moment from 'moment-timezone';
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
+import '../../../../common/mock/formatted_relative';
 
 import { NoteCreated } from './note_created';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
index 952295d0858ee..5506514999f35 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/notes/note_cards/index.test.tsx
@@ -8,6 +8,7 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ThemeProvider } from 'styled-components';
 import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
+import '../../../../common/mock/formatted_relative';
 
 import { Note } from '../../../../common/lib/note';
 
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 64b9db59467e1..f6ac1ab4cec3e 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
@@ -14,11 +14,11 @@ import { waitFor } from '@testing-library/react';
 import { useHistory, useParams } from 'react-router-dom';
 
 import '../../../common/mock/match_media';
+import '../../../common/mock/formatted_relative';
 import { SecurityPageName } from '../../../app/types';
 import { TimelineType } from '../../../../common/types/timeline';
 
-import { TestProviders, apolloClient } from '../../../common/mock/test_providers';
-import { mockOpenTimelineQueryResults } from '../../../common/mock/timeline_results';
+import { TestProviders, apolloClient, mockOpenTimelineQueryResults } from '../../../common/mock';
 import { getTimelineTabsUrl } from '../../../common/components/link_to';
 
 import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines_page';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx
index 3f737a5ba73db..cb0eba910c342 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/index.test.tsx
@@ -10,6 +10,7 @@ import moment from 'moment';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
+import '../../../../common/mock/formatted_relative';
 
 import { mockTimelineResults } from '../../../../common/mock/timeline_results';
 import { OpenTimelineResult, TimelineResultNote } from '../types';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
index e23c9b7fe2083..feabe46edfa82 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/note_previews/note_preview.test.tsx
@@ -8,6 +8,7 @@ import euiDarkVars from '@elastic/eui/dist/eui_theme_dark.json';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
+import '../../../../common/mock/formatted_relative';
 
 import { getEmptyValue } from '../../../../common/components/empty_value';
 import { NotePreview } from './note_preview';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx
index 3d5c5f60d1d9b..2d5849463270b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline.test.tsx
@@ -9,7 +9,7 @@ import { cloneDeep } from 'lodash/fp';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
-import { act } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 
 import '../../../common/mock/match_media';
 import { DEFAULT_SEARCH_RESULTS_PER_PAGE } from '../../pages/timelines_page';
@@ -293,7 +293,7 @@ describe('OpenTimeline', () => {
     );
 
     wrapper.find('[data-test-subj="utility-bar-action"]').find('EuiLink').simulate('click');
-    await act(async () => {
+    await waitFor(() => {
       expect(
         wrapper.find('[data-test-subj="export-timeline-action"]').first().prop('disabled')
       ).toEqual(true);
@@ -313,7 +313,7 @@ describe('OpenTimeline', () => {
     );
 
     wrapper.find('[data-test-subj="utility-bar-action"]').find('EuiLink').simulate('click');
-    await act(async () => {
+    await waitFor(() => {
       expect(
         wrapper.find('[data-test-subj="delete-timeline-action"]').first().prop('disabled')
       ).toEqual(true);
@@ -333,7 +333,7 @@ describe('OpenTimeline', () => {
     );
 
     wrapper.find('[data-test-subj="utility-bar-action"]').find('EuiLink').simulate('click');
-    await act(async () => {
+    await waitFor(() => {
       expect(
         wrapper.find('[data-test-subj="export-timeline-action"]').first().prop('disabled')
       ).toEqual(false);
@@ -353,7 +353,7 @@ describe('OpenTimeline', () => {
     );
 
     wrapper.find('[data-test-subj="utility-bar-action"]').find('EuiLink').simulate('click');
-    await act(async () => {
+    await waitFor(() => {
       expect(
         wrapper.find('[data-test-subj="delete-timeline-action"]').first().prop('disabled')
       ).toEqual(false);
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
index 9632b0e6ecea4..2744e0b42efce 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_body.test.tsx
@@ -49,7 +49,7 @@ describe('OpenTimelineModal', () => {
     sortField: DEFAULT_SORT_FIELD,
     timelineType: TimelineType.default,
     timelineStatus: TimelineStatus.active,
-    templateTimelineFilter: [<div />],
+    templateTimelineFilter: [<div key={0} />],
     title,
     totalSearchResultsCount: mockSearchResults.length,
   });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
index ea587aeca2061..35b6c99c04176 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/open_timeline_modal/open_timeline_modal_button.test.tsx
@@ -10,8 +10,7 @@ import React from 'react';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { ThemeProvider } from 'styled-components';
 
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { TestProviders } from '../../../../common/mock/test_providers';
 import { mockOpenTimelineQueryResults } from '../../../../common/mock/timeline_results';
 import * as i18n from '../translations';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
index b8b2630e09c6e..18270a30eb0e1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/open_timeline/timelines_table/common_columns.test.tsx
@@ -12,6 +12,7 @@ import { ThemeProvider } from 'styled-components';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
 import '../../../../common/mock/match_media';
+import '../../../../common/mock/formatted_relative';
 import { getEmptyValue } from '../../../../common/components/empty_value';
 import { OpenTimelineResult } from '../types';
 import { mockTimelineResults } from '../../../../common/mock/timeline_results';
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx
index efad85775a9e4..a08820e9435d3 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/column_headers/header_tooltip_content/index.tsx
@@ -20,13 +20,14 @@ const IconType = styled(EuiIcon)`
 `;
 IconType.displayName = 'IconType';
 
-const P = styled.p`
+const P = styled.span`
   margin-bottom: 5px;
 `;
 P.displayName = 'P';
 
 const ToolTipTableMetadata = styled.span`
   margin-right: 5px;
+  display: block;
 `;
 ToolTipTableMetadata.displayName = 'ToolTipTableMetadata';
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
index 8b859c1746a46..8fa5d18c0c4f5 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/index.test.tsx
@@ -15,8 +15,7 @@ import { TestProviders } from '../../../../common/mock/test_providers';
 import { Body, BodyProps } from '.';
 import { columnRenderers, rowRenderers } from './renderers';
 import { Sort } from './sort';
-// we don't have the types for waitFor just yet, so using "as waitFor" until when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import { useMountAppended } from '../../../../common/utils/use_mount_appended';
 import { SELECTOR_TIMELINE_BODY_CLASS_NAME, TimelineBody } from '../styles';
 import { TimelineType } from '../../../../../common/types/timeline';
@@ -195,22 +194,6 @@ describe('Body', () => {
       wrapper.update();
     };
 
-    // We are doing that because we need to wrapped this component with redux
-    // and redux does not like to be updated and since we need to update our
-    // child component (BODY) and we do not want to scare anyone with this error
-    // we are hiding it!!!
-    // eslint-disable-next-line no-console
-    const originalError = console.error;
-    beforeAll(() => {
-      // eslint-disable-next-line no-console
-      console.error = (...args: string[]) => {
-        if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-          return;
-        }
-        originalError.call(console, ...args);
-      };
-    });
-
     beforeEach(() => {
       dispatchAddNoteToEvent.mockClear();
       dispatchOnPinEvent.mockClear();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
index efb19275336db..19344a7fd7c9b 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/index.test.tsx
@@ -22,8 +22,7 @@ import { useThrottledResizeObserver } from '../../../../common/components/utils'
 import { Properties, showDescriptionThreshold, showNotesThreshold } from '.';
 import { setInsertTimeline } from '../../../store/timeline/actions';
 export { nextTick } from '../../../../../../../test_utils';
-
-import { act } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 jest.mock('../../../../common/components/link_to');
 
@@ -372,18 +371,16 @@ describe('Properties', () => {
     wrapper.find('[data-test-subj="settings-gear"]').at(0).simulate('click');
     wrapper.find('[data-test-subj="attach-timeline-case"]').first().simulate('click');
 
-    await act(async () => {
-      await Promise.resolve({});
+    await waitFor(() => {
+      expect(mockNavigateToApp).toBeCalledWith('securitySolution:case', { path: '/create' });
+      expect(mockDispatch).toBeCalledWith(
+        setInsertTimeline({
+          timelineId: defaultProps.timelineId,
+          timelineSavedObjectId: '1',
+          timelineTitle: 'coolness',
+        })
+      );
     });
-
-    expect(mockNavigateToApp).toBeCalledWith('securitySolution:case', { path: '/create' });
-    expect(mockDispatch).toBeCalledWith(
-      setInsertTimeline({
-        timelineId: defaultProps.timelineId,
-        timelineSavedObjectId: '1',
-        timelineTitle: 'coolness',
-      })
-    );
   });
 
   test('insert timeline - existing case', async () => {
@@ -397,9 +394,8 @@ describe('Properties', () => {
     wrapper.find('[data-test-subj="settings-gear"]').at(0).simulate('click');
     wrapper.find('[data-test-subj="attach-timeline-existing-case"]').first().simulate('click');
 
-    await act(async () => {
-      await Promise.resolve({});
+    await waitFor(() => {
+      expect(wrapper.find('[data-test-subj="all-cases-modal"]').exists()).toBeTruthy();
     });
-    expect(wrapper.find('[data-test-subj="all-cases-modal"]').exists()).toBeTruthy();
   });
 });
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.test.tsx
index 7da3cf940da50..c21592bed12e0 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/properties/use_create_timeline.test.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import { act as actDom } from 'react-dom/test-utils';
+import { waitFor } from '@testing-library/react';
 
 import { renderHook, act } from '@testing-library/react-hooks';
 import { mount, shallow } from 'enzyme';
@@ -86,7 +86,7 @@ describe('useCreateTimelineButton', () => {
 
       await waitForNextUpdate();
       const button = result.current.getButton({ outline: false, title: 'mock title' });
-      actDom(() => {
+      await waitFor(() => {
         const wrapper = mount(button);
         wrapper.update();
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
index 6c8fd4975c657..87956647c11f1 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/query_bar/index.test.tsx
@@ -24,22 +24,6 @@ const mockUiSettingsForFilterManager = coreMock.createStart().uiSettings;
 jest.mock('../../../../common/lib/kibana');
 
 describe('Timeline QueryBar ', () => {
-  // We are doing that because we need to wrapped this component with redux
-  // and redux does not like to be updated and since we need to update our
-  // child component (BODY) and we do not want to scare anyone with this error
-  // we are hiding it!!!
-  // eslint-disable-next-line no-console
-  const originalError = console.error;
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (...args: string[]) => {
-      if (/<Provider> does not support changing `store` on the fly/.test(args[0])) {
-        return;
-      }
-      originalError.call(console, ...args);
-    };
-  });
-
   const mockApplyKqlFilterQuery = jest.fn();
   const mockSetFilters = jest.fn();
   const mockSetKqlFilterQueryDraft = jest.fn();
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx
index b64ca0ccc0b35..519372d0ac797 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/selectable_timeline/index.test.tsx
@@ -7,31 +7,18 @@ import React from 'react';
 import { shallow, ShallowWrapper, mount } from 'enzyme';
 import { TimelineType } from '../../../../../common/types/timeline';
 import { SortFieldTimeline, Direction } from '../../../../graphql/types';
-import { SearchProps } from './';
+import { SelectableTimeline, ORIGINAL_PAGE_SIZE, SearchProps } from './';
 
+const mockFetchAllTimeline = jest.fn();
+jest.mock('../../../containers/all', () => {
+  return {
+    useGetAllTimeline: jest.fn(() => ({
+      fetchAllTimeline: mockFetchAllTimeline,
+      timelines: [],
+    })),
+  };
+});
 describe('SelectableTimeline', () => {
-  const mockFetchAllTimeline = jest.fn();
-  const mockEuiSelectable = jest.fn();
-
-  jest.doMock('@elastic/eui', () => {
-    const originalModule = jest.requireActual('@elastic/eui');
-    return {
-      ...originalModule,
-      EuiSelectable: mockEuiSelectable.mockImplementation(({ children }) => <div>{children}</div>),
-    };
-  });
-
-  jest.doMock('../../../containers/all', () => {
-    return {
-      useGetAllTimeline: jest.fn(() => ({
-        fetchAllTimeline: mockFetchAllTimeline,
-        timelines: [],
-      })),
-    };
-  });
-
-  const { SelectableTimeline, ORIGINAL_PAGE_SIZE } = jest.requireActual('./');
-
   const props = {
     hideUntitled: false,
     getSelectableOptions: jest.fn(),
diff --git a/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts b/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts
index 8ef740f7bc1d7..a439699d27f6d 100644
--- a/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts
+++ b/x-pack/plugins/security_solution/public/timelines/containers/api.test.ts
@@ -11,157 +11,101 @@ import { ImportDataProps } from '../../detections/containers/detection_engine/ru
 
 jest.mock('../../common/lib/kibana', () => {
   return {
-    KibanaServices: { get: jest.fn(() => ({ http: { fetch: jest.fn() } })) },
+    KibanaServices: {
+      get: jest.fn(() => ({
+        http: {
+          fetch: jest.fn(),
+        },
+      })),
+    },
   };
 });
 
+const timelineData = {
+  columns: [
+    {
+      columnHeaderType: 'not-filtered',
+      id: '@timestamp',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'message',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'event.category',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'event.action',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'host.name',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'source.ip',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'destination.ip',
+    },
+    {
+      columnHeaderType: 'not-filtered',
+      id: 'user.name',
+    },
+  ],
+  dataProviders: [],
+  description: 'x',
+  eventType: 'all',
+  filters: [],
+  kqlMode: 'filter',
+  kqlQuery: {
+    filterQuery: null,
+  },
+  title: '',
+  timelineType: TimelineType.default,
+  templateTimelineVersion: null,
+  templateTimelineId: null,
+  dateRange: {
+    start: 1590998565409,
+    end: 1591084965409,
+  },
+  savedQueryId: null,
+  sort: {
+    columnId: '@timestamp',
+    sortDirection: 'desc',
+  },
+  status: TimelineStatus.active,
+};
+const mockPatchTimelineResponse = {
+  data: {
+    persistTimeline: {
+      code: 200,
+      message: 'success',
+      timeline: {
+        ...timelineData,
+        savedObjectId: '9d5693e0-a42a-11ea-b8f4-c5434162742a',
+        version: 'WzM0NSwxXQ==',
+      },
+    },
+  },
+};
 describe('persistTimeline', () => {
   describe('create draft timeline', () => {
     const timelineId = null;
     const initialDraftTimeline = {
-      columns: [
-        {
-          columnHeaderType: 'not-filtered',
-          id: '@timestamp',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'message',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.category',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.action',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'host.name',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'source.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'destination.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'user.name',
-        },
-      ],
-      dataProviders: [],
-      description: 'x',
-      eventType: 'all',
-      filters: [],
-      kqlMode: 'filter',
-      kqlQuery: {
-        filterQuery: null,
-      },
-      title: '',
-      timelineType: TimelineType.default,
-      templateTimelineVersion: null,
-      templateTimelineId: null,
-      dateRange: {
-        start: 1590998565409,
-        end: 1591084965409,
-      },
-      savedQueryId: null,
-      sort: {
-        columnId: '@timestamp',
-        sortDirection: 'desc',
-      },
+      ...timelineData,
       status: TimelineStatus.draft,
     };
     const mockDraftResponse = {
       data: {
         persistTimeline: {
           timeline: {
+            ...initialDraftTimeline,
             savedObjectId: '9d5693e0-a42a-11ea-b8f4-c5434162742a',
             version: 'WzMzMiwxXQ==',
-            columns: [
-              { columnHeaderType: 'not-filtered', id: '@timestamp' },
-              { columnHeaderType: 'not-filtered', id: 'message' },
-              { columnHeaderType: 'not-filtered', id: 'event.category' },
-              { columnHeaderType: 'not-filtered', id: 'event.action' },
-              { columnHeaderType: 'not-filtered', id: 'host.name' },
-              { columnHeaderType: 'not-filtered', id: 'source.ip' },
-              { columnHeaderType: 'not-filtered', id: 'destination.ip' },
-              { columnHeaderType: 'not-filtered', id: 'user.name' },
-            ],
-            dataProviders: [],
-            description: '',
-            eventType: 'all',
-            filters: [],
-            kqlMode: 'filter',
-            timelineType: 'default',
-            kqlQuery: { filterQuery: null },
-            title: '',
-            sort: { columnId: '@timestamp', sortDirection: 'desc' },
-            status: 'draft',
-            created: 1591091394733,
-            createdBy: 'angela',
-            updated: 1591091394733,
-            updatedBy: 'angela',
-            templateTimelineId: null,
-            templateTimelineVersion: null,
-            dateRange: { start: 1590998565409, end: 1591084965409 },
-            savedQueryId: null,
-            favorite: [],
-            eventIdToNoteIds: [],
-            noteIds: [],
-            notes: [],
-            pinnedEventIds: [],
-            pinnedEventsSaveObject: [],
-          },
-        },
-      },
-    };
-    const mockPatchTimelineResponse = {
-      data: {
-        persistTimeline: {
-          code: 200,
-          message: 'success',
-          timeline: {
-            savedObjectId: '9d5693e0-a42a-11ea-b8f4-c5434162742a',
-            version: 'WzM0NSwxXQ==',
-            columns: [
-              { columnHeaderType: 'not-filtered', id: '@timestamp' },
-              { columnHeaderType: 'not-filtered', id: 'message' },
-              { columnHeaderType: 'not-filtered', id: 'event.category' },
-              { columnHeaderType: 'not-filtered', id: 'event.action' },
-              { columnHeaderType: 'not-filtered', id: 'host.name' },
-              { columnHeaderType: 'not-filtered', id: 'source.ip' },
-              { columnHeaderType: 'not-filtered', id: 'destination.ip' },
-              { columnHeaderType: 'not-filtered', id: 'user.name' },
-            ],
-            dataProviders: [],
-            description: 'x',
-            eventType: 'all',
-            filters: [],
-            kqlMode: 'filter',
-            timelineType: 'default',
-            kqlQuery: { filterQuery: null },
-            title: '',
-            sort: { columnId: '@timestamp', sortDirection: 'desc' },
-            status: 'draft',
-            created: 1591092702804,
-            createdBy: 'angela',
-            updated: 1591092705206,
-            updatedBy: 'angela',
-            templateTimelineId: null,
-            templateTimelineVersion: null,
-            dateRange: { start: 1590998565409, end: 1591084965409 },
-            savedQueryId: null,
-            favorite: [],
-            eventIdToNoteIds: [],
-            noteIds: [],
-            notes: [],
-            pinnedEventIds: [],
-            pinnedEventsSaveObject: [],
           },
         },
       },
@@ -223,61 +167,7 @@ describe('persistTimeline', () => {
   describe('create draft timeline in read-only permission', () => {
     const timelineId = null;
     const initialDraftTimeline = {
-      columns: [
-        {
-          columnHeaderType: 'not-filtered',
-          id: '@timestamp',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'message',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.category',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.action',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'host.name',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'source.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'destination.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'user.name',
-        },
-      ],
-      dataProviders: [],
-      description: 'x',
-      eventType: 'all',
-      filters: [],
-      kqlMode: 'filter',
-      kqlQuery: {
-        filterQuery: null,
-      },
-      title: '',
-      timelineType: TimelineType.default,
-      templateTimelineVersion: null,
-      templateTimelineId: null,
-      dateRange: {
-        start: 1590998565409,
-        end: 1591084965409,
-      },
-      savedQueryId: null,
-      sort: {
-        columnId: '@timestamp',
-        sortDirection: 'desc',
-      },
+      ...timelineData,
       status: TimelineStatus.draft,
     };
 
@@ -325,104 +215,14 @@ describe('persistTimeline', () => {
 
   describe('create active timeline (import)', () => {
     const timelineId = null;
-    const importTimeline = {
-      columns: [
-        {
-          columnHeaderType: 'not-filtered',
-          id: '@timestamp',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'message',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.category',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.action',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'host.name',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'source.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'destination.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'user.name',
-        },
-      ],
-      dataProviders: [],
-      description: 'x',
-      eventType: 'all',
-      filters: [],
-      kqlMode: 'filter',
-      kqlQuery: {
-        filterQuery: null,
-      },
-      title: '',
-      timelineType: TimelineType.default,
-      templateTimelineVersion: null,
-      templateTimelineId: null,
-      dateRange: {
-        start: 1590998565409,
-        end: 1591084965409,
-      },
-      savedQueryId: null,
-      sort: {
-        columnId: '@timestamp',
-        sortDirection: 'desc',
-      },
-      status: TimelineStatus.active,
-    };
+    const importTimeline = timelineData;
     const mockPostTimelineResponse = {
       data: {
         persistTimeline: {
           timeline: {
+            ...timelineData,
             savedObjectId: '9d5693e0-a42a-11ea-b8f4-c5434162742a',
             version: 'WzMzMiwxXQ==',
-            columns: [
-              { columnHeaderType: 'not-filtered', id: '@timestamp' },
-              { columnHeaderType: 'not-filtered', id: 'message' },
-              { columnHeaderType: 'not-filtered', id: 'event.category' },
-              { columnHeaderType: 'not-filtered', id: 'event.action' },
-              { columnHeaderType: 'not-filtered', id: 'host.name' },
-              { columnHeaderType: 'not-filtered', id: 'source.ip' },
-              { columnHeaderType: 'not-filtered', id: 'destination.ip' },
-              { columnHeaderType: 'not-filtered', id: 'user.name' },
-            ],
-            dataProviders: [],
-            description: '',
-            eventType: 'all',
-            filters: [],
-            kqlMode: 'filter',
-            timelineType: 'default',
-            kqlQuery: { filterQuery: null },
-            title: '',
-            sort: { columnId: '@timestamp', sortDirection: 'desc' },
-            status: 'draft',
-            created: 1591091394733,
-            createdBy: 'angela',
-            updated: 1591091394733,
-            updatedBy: 'angela',
-            templateTimelineId: null,
-            templateTimelineVersion: null,
-            dateRange: { start: 1590998565409, end: 1591084965409 },
-            savedQueryId: null,
-            favorite: [],
-            eventIdToNoteIds: [],
-            noteIds: [],
-            notes: [],
-            pinnedEventIds: [],
-            pinnedEventsSaveObject: [],
           },
         },
       },
@@ -462,104 +262,16 @@ describe('persistTimeline', () => {
 
   describe('update active timeline', () => {
     const timelineId = '9d5693e0-a42a-11ea-b8f4-c5434162742a';
-    const inputTimeline = {
-      columns: [
-        {
-          columnHeaderType: 'not-filtered',
-          id: '@timestamp',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'message',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.category',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'event.action',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'host.name',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'source.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'destination.ip',
-        },
-        {
-          columnHeaderType: 'not-filtered',
-          id: 'user.name',
-        },
-      ],
-      dataProviders: [],
-      description: 'x',
-      eventType: 'all',
-      filters: [],
-      kqlMode: 'filter',
-      kqlQuery: {
-        filterQuery: null,
-      },
-      title: '',
-      timelineType: TimelineType.default,
-      templateTimelineVersion: null,
-      templateTimelineId: null,
-      dateRange: {
-        start: 1590998565409,
-        end: 1591084965409,
-      },
-      savedQueryId: null,
-      sort: {
-        columnId: '@timestamp',
-        sortDirection: 'desc',
-      },
-      status: TimelineStatus.active,
-    };
-    const mockPatchTimelineResponse = {
+    const inputTimeline = timelineData;
+    const mockPatchTimelineResponseNew = {
       data: {
         persistTimeline: {
           timeline: {
-            savedObjectId: '9d5693e0-a42a-11ea-b8f4-c5434162742a',
+            ...mockPatchTimelineResponse.data.persistTimeline.timeline,
             version: 'WzMzMiwxXQ==',
-            columns: [
-              { columnHeaderType: 'not-filtered', id: '@timestamp' },
-              { columnHeaderType: 'not-filtered', id: 'message' },
-              { columnHeaderType: 'not-filtered', id: 'event.category' },
-              { columnHeaderType: 'not-filtered', id: 'event.action' },
-              { columnHeaderType: 'not-filtered', id: 'host.name' },
-              { columnHeaderType: 'not-filtered', id: 'source.ip' },
-              { columnHeaderType: 'not-filtered', id: 'destination.ip' },
-              { columnHeaderType: 'not-filtered', id: 'user.name' },
-            ],
-            dataProviders: [],
-            description: '',
-            eventType: 'all',
-            filters: [],
-            kqlMode: 'filter',
-            timelineType: 'default',
-            kqlQuery: { filterQuery: null },
-            title: '',
-            sort: { columnId: '@timestamp', sortDirection: 'desc' },
-            status: 'draft',
-            created: 1591091394733,
-            createdBy: 'angela',
-            updated: 1591091394733,
-            updatedBy: 'angela',
-            templateTimelineId: null,
-            templateTimelineVersion: null,
-            dateRange: { start: 1590998565409, end: 1591084965409 },
-            savedQueryId: null,
-            favorite: [],
-            eventIdToNoteIds: [],
-            noteIds: [],
-            notes: [],
-            pinnedEventIds: [],
-            pinnedEventsSaveObject: [],
+            description: 'x',
+            created: 1591092702804,
+            updated: 1591092705206,
           },
         },
       },
@@ -578,7 +290,7 @@ describe('persistTimeline', () => {
         http: {
           fetch: fetchMock,
           post: postMock,
-          patch: patchMock.mockReturnValue(mockPatchTimelineResponse),
+          patch: patchMock.mockReturnValue(mockPatchTimelineResponseNew),
         },
       });
       api.persistTimeline({ timelineId, timeline: inputTimeline, version });
@@ -674,7 +386,7 @@ describe('getDraftTimeline', () => {
 
     (KibanaServices.get as jest.Mock).mockReturnValue({
       http: {
-        get: getMock,
+        get: getMock.mockImplementation(() => Promise.resolve(mockPatchTimelineResponse)),
       },
     });
     api.getDraftTimeline(timelineType);
@@ -696,7 +408,7 @@ describe('cleanDraftTimeline', () => {
 
     (KibanaServices.get as jest.Mock).mockReturnValue({
       http: {
-        post: postMock,
+        post: postMock.mockImplementation(() => Promise.resolve(mockPatchTimelineResponse)),
       },
     });
   });
diff --git a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
index 6507603d30444..1f79b26394a69 100644
--- a/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/store/timeline/epic_local_storage.test.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 // we don't have the types for waitFor just yet, so using "as waitFor" for when we do
-import { wait as waitFor } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import '../../../common/mock/match_media';
 import {
   mockGlobalState,
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx
index 0674e5b35c61f..059bae6e3ebff 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.test.tsx
@@ -91,6 +91,7 @@ describe('pagerduty action params validation', () => {
 
     expect(actionTypeModel.validateParams(actionParams)).toEqual({
       errors: {
+        dedupKey: [],
         summary: [],
         timestamp: [],
       },
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx
index 90d8da346c71d..03bfbb38da6f2 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty.tsx
@@ -50,8 +50,22 @@ export function getActionType(): ActionTypeModel {
       const errors = {
         summary: new Array<string>(),
         timestamp: new Array<string>(),
+        dedupKey: new Array<string>(),
       };
       validationResult.errors = errors;
+      if (
+        !actionParams.dedupKey?.length &&
+        (actionParams.eventAction === 'resolve' || actionParams.eventAction === 'acknowledge')
+      ) {
+        errors.dedupKey.push(
+          i18n.translate(
+            'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.error.requiredDedupKeyText',
+            {
+              defaultMessage: 'DedupKey is required when resolving or acknowledging an incident.',
+            }
+          )
+        );
+      }
       if (!actionParams.summary?.length) {
         errors.summary.push(
           i18n.translate(
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
index 6a11dc8d0d6a5..fe83054edbe07 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.test.tsx
@@ -26,7 +26,7 @@ describe('PagerDutyParamsFields renders', () => {
     const wrapper = mountWithIntl(
       <PagerDutyParamsFields
         actionParams={actionParams}
-        errors={{ summary: [], timestamp: [] }}
+        errors={{ summary: [], timestamp: [], dedupKey: [] }}
         editAction={() => {}}
         index={0}
         docLinks={{ ELASTIC_WEBSITE_URL: '', DOC_LINK_VERSION: '' } as DocLinksStart}
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
index c8ad5f5b7080e..39800865ed761 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/pagerduty/pagerduty_params.tsx
@@ -94,6 +94,9 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
       ),
     },
   ];
+
+  const isDedupeKeyRequired = eventAction !== 'trigger';
+
   return (
     <Fragment>
       <EuiFlexGroup>
@@ -144,12 +147,23 @@ const PagerDutyParamsFields: React.FunctionComponent<ActionParamsProps<PagerDuty
         <EuiFlexItem>
           <EuiFormRow
             fullWidth
-            label={i18n.translate(
-              'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.dedupKeyTextFieldLabel',
-              {
-                defaultMessage: 'DedupKey (optional)',
-              }
-            )}
+            error={errors.dedupKey}
+            isInvalid={errors.dedupKey.length > 0}
+            label={
+              isDedupeKeyRequired
+                ? i18n.translate(
+                    'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.dedupKeyTextRequiredFieldLabel',
+                    {
+                      defaultMessage: 'DedupKey',
+                    }
+                  )
+                : i18n.translate(
+                    'xpack.triggersActionsUI.components.builtinActionTypes.pagerDutyAction.dedupKeyTextFieldLabel',
+                    {
+                      defaultMessage: 'DedupKey (optional)',
+                    }
+                  )
+            }
           >
             <TextFieldWithMessageVariables
               index={index}
diff --git a/x-pack/test/alerting_api_integration/common/fixtures/plugins/actions_simulators/server/pagerduty_simulation.ts b/x-pack/test/alerting_api_integration/common/fixtures/plugins/actions_simulators/server/pagerduty_simulation.ts
index 278dbd46d8bcf..ea40bd1f080cf 100644
--- a/x-pack/test/alerting_api_integration/common/fixtures/plugins/actions_simulators/server/pagerduty_simulation.ts
+++ b/x-pack/test/alerting_api_integration/common/fixtures/plugins/actions_simulators/server/pagerduty_simulation.ts
@@ -23,7 +23,7 @@ export function initPlugin(router: IRouter, path: string) {
       validate: {
         body: schema.object(
           {
-            dedup_key: schema.string(),
+            dedup_key: schema.maybe(schema.string()),
             payload: schema.object(
               {
                 summary: schema.string(),
@@ -48,12 +48,7 @@ export function initPlugin(router: IRouter, path: string) {
       res: KibanaResponseFactory
     ): Promise<IKibanaResponse<any>> {
       const { body } = req;
-      let dedupKey = body && body.dedup_key;
-      const summary = body && body.payload && body.payload.summary;
-
-      if (dedupKey == null) {
-        dedupKey = `kibana-ft-simulator-dedup-key-${new Date().toISOString()}`;
-      }
+      const summary = body?.payload?.summary;
 
       switch (summary) {
         case 'respond-with-429':
@@ -67,7 +62,7 @@ export function initPlugin(router: IRouter, path: string) {
       return jsonResponse(res, 202, {
         status: 'success',
         message: 'Event processed',
-        dedup_key: dedupKey,
+        ...(body?.dedup_key ? { dedup_key: body?.dedup_key } : {}),
       });
     }
   );
diff --git a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
index 0c4d9096aa31a..caa1884636007 100644
--- a/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
+++ b/x-pack/test/alerting_api_integration/security_and_spaces/tests/actions/builtin_action_types/pagerduty.ts
@@ -163,7 +163,6 @@ export default function pagerdutyTest({ getService }: FtrProviderContext) {
         status: 'ok',
         actionId: simulatedActionId,
         data: {
-          dedup_key: `action:${simulatedActionId}`,
           message: 'Event processed',
           status: 'success',
         },
diff --git a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/migrations.ts b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/migrations.ts
index 81f7c8c97ba8c..17070a14069ce 100644
--- a/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/migrations.ts
+++ b/x-pack/test/alerting_api_integration/spaces_only/tests/alerting/migrations.ts
@@ -39,5 +39,48 @@ export default function createGetTests({ getService }: FtrProviderContext) {
       expect(response.status).to.eql(200);
       expect(response.body.consumer).to.equal('infrastructure');
     });
+
+    it('7.10.0 migrates PagerDuty actions to have a default dedupKey', async () => {
+      const response = await supertest.get(
+        `${getUrlPrefix(``)}/api/alerts/alert/b6087f72-994f-46fb-8120-c6e5c50d0f8f`
+      );
+
+      expect(response.status).to.eql(200);
+
+      expect(response.body.actions).to.eql([
+        {
+          actionTypeId: '.pagerduty',
+          id: 'a6a8ab7a-35cf-445e-ade3-215a029c2ee3',
+          group: 'default',
+          params: {
+            component: '',
+            eventAction: 'trigger',
+            summary: 'fired {{alertInstanceId}}',
+          },
+        },
+        {
+          actionTypeId: '.pagerduty',
+          id: 'a6a8ab7a-35cf-445e-ade3-215a029c2ee3',
+          group: 'default',
+          params: {
+            component: '',
+            dedupKey: '{{alertId}}',
+            eventAction: 'resolve',
+            summary: 'fired {{alertInstanceId}}',
+          },
+        },
+        {
+          actionTypeId: '.pagerduty',
+          id: 'a6a8ab7a-35cf-445e-ade3-215a029c2ee3',
+          group: 'default',
+          params: {
+            component: '',
+            dedupKey: '{{alertInstanceId}}',
+            eventAction: 'resolve',
+            summary: 'fired {{alertInstanceId}}',
+          },
+        },
+      ]);
+    });
   });
 }
diff --git a/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts b/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts
new file mode 100644
index 0000000000000..0edffe7999a65
--- /dev/null
+++ b/x-pack/test/apm_api_integration/trial/tests/csm/js_errors.ts
@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from '@kbn/expect';
+import { expectSnapshot } from '../../../common/match_snapshot';
+import { FtrProviderContext } from '../../../common/ftr_provider_context';
+
+export default function rumJsErrorsApiTests({ getService }: FtrProviderContext) {
+  const supertest = getService('supertest');
+  const esArchiver = getService('esArchiver');
+
+  describe('CSM js errors', () => {
+    describe('when there is no data', () => {
+      it('returns no js errors', async () => {
+        const response = await supertest.get(
+          '/api/apm/rum-client/js-errors?pageSize=5&pageIndex=0&start=2020-09-07T20%3A35%3A54.654Z&end=2020-09-14T20%3A35%3A54.654Z&uiFilters=%7B%22serviceName%22%3A%5B%22elastic-co-rum-test%22%5D%7D'
+        );
+
+        expect(response.status).to.be(200);
+        expectSnapshot(response.body).toMatchInline(`
+          Object {
+            "totalErrorGroups": 0,
+            "totalErrorPages": 0,
+            "totalErrors": 0,
+          }
+        `);
+      });
+    });
+
+    describe('when there is data', () => {
+      before(async () => {
+        await esArchiver.load('8.0.0');
+        await esArchiver.load('rum_8.0.0');
+      });
+      after(async () => {
+        await esArchiver.unload('8.0.0');
+        await esArchiver.unload('rum_8.0.0');
+      });
+
+      it('returns js errors', async () => {
+        const response = await supertest.get(
+          '/api/apm/rum-client/js-errors?pageSize=5&pageIndex=0&start=2020-09-07T20%3A35%3A54.654Z&end=2020-09-16T20%3A35%3A54.654Z&uiFilters=%7B%22serviceName%22%3A%5B%22kibana-frontend-8_0_0%22%5D%7D'
+        );
+
+        expect(response.status).to.be(200);
+
+        expectSnapshot(response.body).toMatchInline(`
+          Object {
+            "items": Array [],
+            "totalErrorGroups": 0,
+            "totalErrorPages": 0,
+            "totalErrors": 0,
+          }
+        `);
+      });
+    });
+  });
+}
diff --git a/x-pack/test/apm_api_integration/trial/tests/index.ts b/x-pack/test/apm_api_integration/trial/tests/index.ts
index 69e54ea33c559..a6a031def34ea 100644
--- a/x-pack/test/apm_api_integration/trial/tests/index.ts
+++ b/x-pack/test/apm_api_integration/trial/tests/index.ts
@@ -37,6 +37,7 @@ export default function observabilityApiIntegrationTests({ loadTestFile }: FtrPr
       loadTestFile(require.resolve('./csm/long_task_metrics.ts'));
       loadTestFile(require.resolve('./csm/url_search.ts'));
       loadTestFile(require.resolve('./csm/page_views.ts'));
+      loadTestFile(require.resolve('./csm/js_errors.ts'));
     });
   });
 }
diff --git a/x-pack/test/functional/es_archives/alerts/data.json b/x-pack/test/functional/es_archives/alerts/data.json
index cc246b0fe44da..4e879116d8cda 100644
--- a/x-pack/test/functional/es_archives/alerts/data.json
+++ b/x-pack/test/functional/es_archives/alerts/data.json
@@ -80,4 +80,115 @@
       "updated_at": "2020-06-17T15:35:39.839Z"
     }
   }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "action:a6a8ab7a-35cf-445e-ade3-215a029c2ee3",
+    "index": ".kibana_1",
+    "source": {
+      "action": {
+        "actionTypeId": ".pagerduty",
+        "config": {
+          "apiUrl": "http://elastic:changeme@localhost:5620/api/_actions-FTS-external-service-simulators/pagerduty"
+        },
+        "name": "A pagerduty action",
+        "secrets": "kvjaTWYKGmCqptyv4giaN+nQGgsZrKXmlULcbAP8KK3JmR8Ei9ADqh5mB+uVC+x+Q7/vTQ5SKZCj3dHv3pmNzZ5WGyZYQFBaaa63Mkp3kIcnpE1OdSAv+3Z/Y+XihHAM19zUm3JRpojnIpYegoS5/vMx1sOzcf/+miYUuZw2lgo0lNE="
+      },
+      "references": [
+      ],
+      "type": "action",
+      "updated_at": "2020-09-22T15:16:06.924Z"
+    }
+  }
+}
+
+{
+  "type": "doc",
+  "value": {
+    "id": "alert:b6087f72-994f-46fb-8120-c6e5c50d0f8f",
+    "index": ".kibana_1",
+    "source": {
+      "alert": {
+        "actions": [
+          {
+            "actionRef": "action_0",
+            "actionTypeId": ".pagerduty",
+            "group": "default",
+            "params": {
+              "component": "",
+              "eventAction": "trigger",
+              "summary": "fired {{alertInstanceId}}"
+            }
+          },
+          {
+            "actionRef": "action_1",
+            "actionTypeId": ".pagerduty",
+            "group": "default",
+            "params": {
+              "component": "",
+              "eventAction": "resolve",
+              "summary": "fired {{alertInstanceId}}"
+            }
+          },
+          {
+            "actionRef": "action_2",
+            "actionTypeId": ".pagerduty",
+            "group": "default",
+            "params": {
+              "component": "",
+              "dedupKey": "{{alertInstanceId}}",
+              "eventAction": "resolve",
+              "summary": "fired {{alertInstanceId}}"
+            }
+          }
+        ],
+        "alertTypeId": "test.noop",
+        "apiKey": null,
+        "apiKeyOwner": null,
+        "consumer": "alertsFixture",
+        "createdAt": "2020-09-22T15:16:07.451Z",
+        "createdBy": null,
+        "enabled": true,
+        "muteAll": false,
+        "mutedInstanceIds": [
+        ],
+        "name": "abc",
+        "params": {
+        },
+        "schedule": {
+          "interval": "1m"
+        },
+        "scheduledTaskId": "8a7c6ff0-fce6-11ea-a888-9337d77a2c25",
+        "tags": [
+          "foo"
+        ],
+        "throttle": "1m",
+        "updatedBy": null
+      },
+      "migrationVersion": {
+        "alert": "7.9.0"
+      },
+      "references": [
+        {
+          "id": "a6a8ab7a-35cf-445e-ade3-215a029c2ee3",
+          "name": "action_0",
+          "type": "action"
+        },
+        {
+          "id": "a6a8ab7a-35cf-445e-ade3-215a029c2ee3",
+          "name": "action_1",
+          "type": "action"
+        },
+        {
+          "id": "a6a8ab7a-35cf-445e-ade3-215a029c2ee3",
+          "name": "action_2",
+          "type": "action"
+        }
+      ],
+      "type": "alert",
+      "updated_at": "2020-09-22T15:16:08.456Z"
+    }
+  }
 }
\ No newline at end of file