From 9ebb129d7fd743293eaec8e54fe5425f07d79525 Mon Sep 17 00:00:00 2001
From: Kevin Logan <56395104+kevinlog@users.noreply.github.com>
Date: Mon, 9 May 2022 11:46:44 -0400
Subject: [PATCH 1/6] Disable progress bar in PowerShell wget, and extract
 Windows zip to cwd (#131799)

Co-authored-by: Gabriel Landau <42078554+gabriellandau@users.noreply.github.com>
---
 .../components/enrollment_instructions/manual/index.tsx      | 5 +++--
 .../components/enrollment_instructions/standalone/index.tsx  | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx
index 5b777803552fb0..ca7293a8c99c96 100644
--- a/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx
+++ b/x-pack/plugins/fleet/public/components/enrollment_instructions/manual/index.tsx
@@ -26,8 +26,9 @@ tar xzvf elastic-agent-${kibanaVersion}-darwin-x86_64.tar.gz
 cd elastic-agent-${kibanaVersion}-darwin-x86_64
 sudo ./elastic-agent install ${enrollArgs}`;
 
-  const windowsCommand = `wget https://artifacts.elastic.co/downloads/beats/elastic-agent/elastic-agent-${kibanaVersion}-windows-x86_64.zip -OutFile elastic-agent-${kibanaVersion}-windows-x86_64.zip
-Expand-Archive .\\elastic-agent-${kibanaVersion}-windows-x86_64.zip
+  const windowsCommand = `$ProgressPreference = 'SilentlyContinue'
+wget https://artifacts.elastic.co/downloads/beats/elastic-agent/elastic-agent-${kibanaVersion}-windows-x86_64.zip -OutFile elastic-agent-${kibanaVersion}-windows-x86_64.zip
+Expand-Archive .\\elastic-agent-${kibanaVersion}-windows-x86_64.zip -DestinationPath .
 cd elastic-agent-${kibanaVersion}-windows-x86_64
 .\\elastic-agent.exe install ${enrollArgs}`;
 
diff --git a/x-pack/plugins/fleet/public/components/enrollment_instructions/standalone/index.tsx b/x-pack/plugins/fleet/public/components/enrollment_instructions/standalone/index.tsx
index 75378cdc863780..2d9326cf6cbb1c 100644
--- a/x-pack/plugins/fleet/public/components/enrollment_instructions/standalone/index.tsx
+++ b/x-pack/plugins/fleet/public/components/enrollment_instructions/standalone/index.tsx
@@ -23,8 +23,9 @@ tar xzvf elastic-agent-${kibanaVersion}-darwin-x86_64.tar.gz
 cd elastic-agent-${kibanaVersion}-darwin-x86_64
 sudo ./elastic-agent install`;
 
-  const STANDALONE_RUN_INSTRUCTIONS_WINDOWS = `wget https://artifacts.elastic.co/downloads/beats/elastic-agent/elastic-agent-${kibanaVersion}-windows-x86_64.zip -OutFile elastic-agent-${kibanaVersion}-windows-x86_64.zip
-Expand-Archive .\elastic-agent-${kibanaVersion}-windows-x86_64.zip
+  const STANDALONE_RUN_INSTRUCTIONS_WINDOWS = `$ProgressPreference = 'SilentlyContinue'
+wget https://artifacts.elastic.co/downloads/beats/elastic-agent/elastic-agent-${kibanaVersion}-windows-x86_64.zip -OutFile elastic-agent-${kibanaVersion}-windows-x86_64.zip
+Expand-Archive .\elastic-agent-${kibanaVersion}-windows-x86_64.zip -DestinationPath .
 cd elastic-agent-${kibanaVersion}-windows-x86_64
 .\\elastic-agent.exe install`;
 

From 2b5de747a6039fe05957692ea8e13872982ac6b7 Mon Sep 17 00:00:00 2001
From: Dominique Clarke <dominique.clarke@elastic.co>
Date: Mon, 9 May 2022 11:55:15 -0400
Subject: [PATCH 2/6] [Synthetics] copy alert state to alert context and
 implement alert recovery (#128693)

* copy alert state to alert context

* adjust alert translations

* uptime - implement alert recovery

* adjust tests

* [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

* remove unused constant

* update snapshot

* add default recovery messages

* update snapshot

* add doesSetRecoveryContext to uptime duration anomaly alert

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../plugins/synthetics/common/translations.ts |  69 +++++++---
 .../lib/alert_types/duration_anomaly.tsx      |   3 +-
 .../lib/alert_types/monitor_status.test.ts    |   3 +-
 .../lib/alert_types/monitor_status.tsx        |   3 +-
 .../legacy_uptime/lib/alert_types/tls.tsx     |   3 +-
 .../state/api/alert_actions.test.ts           |   8 +-
 .../legacy_uptime/state/api/alert_actions.ts  |  16 +--
 .../synthetics/server/lib/alerts/common.ts    |  11 +-
 .../lib/alerts/duration_anomaly.test.ts       | 130 +++++++++++++-----
 .../server/lib/alerts/duration_anomaly.ts     |  26 +++-
 .../server/lib/alerts/status_check.test.ts    | 119 +++++++++++++++-
 .../server/lib/alerts/status_check.ts         |  72 ++++++----
 .../server/lib/alerts/test_utils/index.ts     |  28 ++--
 .../synthetics/server/lib/alerts/tls.test.ts  |  81 +++++++----
 .../synthetics/server/lib/alerts/tls.ts       |  11 +-
 .../apps/uptime/simple_down_alert.ts          |   2 +-
 16 files changed, 444 insertions(+), 141 deletions(-)

diff --git a/x-pack/plugins/synthetics/common/translations.ts b/x-pack/plugins/synthetics/common/translations.ts
index 9bef65bd9dad69..52f0dbf5d906e5 100644
--- a/x-pack/plugins/synthetics/common/translations.ts
+++ b/x-pack/plugins/synthetics/common/translations.ts
@@ -28,11 +28,23 @@ export const MonitorStatusTranslations = {
       defaultMessage:
         'Monitor {monitorName} with url {monitorUrl} from {observerLocation} {statusMessage} The latest error message is {latestErrorMessage}',
       values: {
-        monitorName: '{{state.monitorName}}',
-        monitorUrl: '{{{state.monitorUrl}}}',
-        statusMessage: '{{{state.statusMessage}}}',
-        latestErrorMessage: '{{{state.latestErrorMessage}}}',
-        observerLocation: '{{state.observerLocation}}',
+        monitorName: '{{context.monitorName}}',
+        monitorUrl: '{{{context.monitorUrl}}}',
+        statusMessage: '{{{context.statusMessage}}}',
+        latestErrorMessage: '{{{context.latestErrorMessage}}}',
+        observerLocation: '{{context.observerLocation}}',
+      },
+    }
+  ),
+  defaultRecoveryMessage: i18n.translate(
+    'xpack.synthetics.alerts.monitorStatus.defaultRecoveryMessage',
+    {
+      defaultMessage:
+        'Alert for monitor {monitorName} with url {monitorUrl} from {observerLocation} has recovered',
+      values: {
+        monitorName: '{{context.monitorName}}',
+        monitorUrl: '{{{context.monitorUrl}}}',
+        observerLocation: '{{context.observerLocation}}',
       },
     }
   ),
@@ -46,13 +58,19 @@ export const MonitorStatusTranslations = {
 
 export const TlsTranslations = {
   defaultActionMessage: i18n.translate('xpack.synthetics.alerts.tls.defaultActionMessage', {
-    defaultMessage: `Detected TLS certificate {commonName} from issuer {issuer} is {status}. Certificate {summary}
-`,
+    defaultMessage: `Detected TLS certificate {commonName} from issuer {issuer} is {status}. Certificate {summary}`,
     values: {
-      commonName: '{{state.commonName}}',
-      issuer: '{{state.issuer}}',
-      summary: '{{state.summary}}',
-      status: '{{state.status}}',
+      commonName: '{{context.commonName}}',
+      issuer: '{{context.issuer}}',
+      summary: '{{context.summary}}',
+      status: '{{context.status}}',
+    },
+  }),
+  defaultRecoveryMessage: i18n.translate('xpack.synthetics.alerts.tls.defaultRecoveryMessage', {
+    defaultMessage: `Alert for TLS certificate {commonName} from issuer {issuer} has recovered`,
+    values: {
+      commonName: '{{context.commonName}}',
+      issuer: '{{context.issuer}}',
     },
   }),
   name: i18n.translate('xpack.synthetics.alerts.tls.clientName', {
@@ -103,14 +121,27 @@ export const DurationAnomalyTranslations = {
       defaultMessage: `Abnormal ({severity} level) response time detected on {monitor} with url {monitorUrl} at {anomalyStartTimestamp}. Anomaly severity score is {severityScore}.
 Response times as high as {slowestAnomalyResponse} have been detected from location {observerLocation}. Expected response time is {expectedResponseTime}.`,
       values: {
-        severity: '{{state.severity}}',
-        anomalyStartTimestamp: '{{state.anomalyStartTimestamp}}',
-        monitor: '{{state.monitor}}',
-        monitorUrl: '{{{state.monitorUrl}}}',
-        slowestAnomalyResponse: '{{state.slowestAnomalyResponse}}',
-        expectedResponseTime: '{{state.expectedResponseTime}}',
-        severityScore: '{{state.severityScore}}',
-        observerLocation: '{{state.observerLocation}}',
+        severity: '{{context.severity}}',
+        anomalyStartTimestamp: '{{context.anomalyStartTimestamp}}',
+        monitor: '{{context.monitor}}',
+        monitorUrl: '{{{context.monitorUrl}}}',
+        slowestAnomalyResponse: '{{context.slowestAnomalyResponse}}',
+        expectedResponseTime: '{{context.expectedResponseTime}}',
+        severityScore: '{{context.severityScore}}',
+        observerLocation: '{{context.observerLocation}}',
+      },
+    }
+  ),
+  defaultRecoveryMessage: i18n.translate(
+    'xpack.synthetics.alerts.durationAnomaly.defaultRecoveryMessage',
+    {
+      defaultMessage: `Alert for abnormal ({severity} level) response time detected on monitor {monitor} with url {monitorUrl} from location {observerLocation} at {anomalyStartTimestamp} has recovered`,
+      values: {
+        severity: '{{context.severity}}',
+        anomalyStartTimestamp: '{{context.anomalyStartTimestamp}}',
+        monitor: '{{context.monitor}}',
+        monitorUrl: '{{{context.monitorUrl}}}',
+        observerLocation: '{{context.observerLocation}}',
       },
     }
   ),
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/duration_anomaly.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/duration_anomaly.tsx
index c866ca4c76956d..5f0c8c07172bb3 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/duration_anomaly.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/duration_anomaly.tsx
@@ -16,7 +16,7 @@ import { getMonitorRouteFromMonitorId } from '../../../../common/utils/get_monit
 import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 import { DurationAnomalyTranslations } from '../../../../common/translations';
 
-const { defaultActionMessage, description } = DurationAnomalyTranslations;
+const { defaultActionMessage, defaultRecoveryMessage, description } = DurationAnomalyTranslations;
 const DurationAnomalyAlert = React.lazy(() => import('./lazy_wrapper/duration_anomaly'));
 
 export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
@@ -34,6 +34,7 @@ export const initDurationAnomalyAlertType: AlertTypeInitializer = ({
   description,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
+  defaultRecoveryMessage,
   requiresAppContext: true,
   format: ({ fields }) => ({
     reason: fields[ALERT_REASON] || '',
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.test.ts b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.test.ts
index 2f67219ac1ae59..c4d02806b59137 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.test.ts
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.test.ts
@@ -202,7 +202,8 @@ describe('monitor status alert type', () => {
       })
     ).toMatchInlineSnapshot(`
       Object {
-        "defaultActionMessage": "Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}",
+        "defaultActionMessage": "Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}",
+        "defaultRecoveryMessage": "Alert for monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} has recovered",
         "description": "Alert when a monitor is down or an availability threshold is breached.",
         "documentationUrl": [Function],
         "format": [Function],
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.tsx
index 0361e6408e43bd..f7584cb04320e0 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/monitor_status.tsx
@@ -23,7 +23,7 @@ import { getMonitorRouteFromMonitorId } from '../../../../common/utils/get_monit
 import { MonitorStatusTranslations } from '../../../../common/translations';
 import { CLIENT_ALERT_TYPES } from '../../../../common/constants/alerts';
 
-const { defaultActionMessage, description } = MonitorStatusTranslations;
+const { defaultActionMessage, defaultRecoveryMessage, description } = MonitorStatusTranslations;
 
 const MonitorStatusAlert = React.lazy(() => import('./lazy_wrapper/monitor_status'));
 
@@ -54,6 +54,7 @@ export const initMonitorStatusAlertType: AlertTypeInitializer = ({
     return validateFunc ? validateFunc(ruleParams) : ({} as ValidationResult);
   },
   defaultActionMessage,
+  defaultRecoveryMessage,
   requiresAppContext: false,
   format: ({ fields }) => ({
     reason: fields[ALERT_REASON] || '',
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/tls.tsx b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/tls.tsx
index 2c1238028ccf5e..b9ab025ecc021c 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/tls.tsx
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/lib/alert_types/tls.tsx
@@ -14,7 +14,7 @@ import { AlertTypeInitializer } from '.';
 
 import { CERTIFICATES_ROUTE } from '../../../../common/constants/ui';
 
-const { defaultActionMessage, description } = TlsTranslations;
+const { defaultActionMessage, defaultRecoveryMessage, description } = TlsTranslations;
 const TLSAlert = React.lazy(() => import('./lazy_wrapper/tls_alert'));
 export const initTlsAlertType: AlertTypeInitializer = ({
   core,
@@ -29,6 +29,7 @@ export const initTlsAlertType: AlertTypeInitializer = ({
   description,
   validate: () => ({ errors: {} }),
   defaultActionMessage,
+  defaultRecoveryMessage,
   requiresAppContext: false,
   format: ({ fields }) => ({
     reason: fields[ALERT_REASON] || '',
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.test.ts b/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.test.ts
index 16c49d7c3afcbb..068cdfd90b1ae0 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.test.ts
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.test.ts
@@ -50,7 +50,7 @@ describe('Alert Actions factory', () => {
             eventAction: 'trigger',
             severity: 'error',
             summary:
-              'Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}',
+              'Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}',
           },
           id: 'f2a3b195-ed76-499a-805d-82d24d4eeba9',
         },
@@ -75,7 +75,7 @@ describe('Alert Actions factory', () => {
           eventAction: 'trigger',
           severity: 'error',
           summary:
-            'Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}',
+            'Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}',
         },
       },
     ]);
@@ -93,7 +93,7 @@ describe('Alert Actions factory', () => {
             eventAction: 'trigger',
             severity: 'error',
             summary:
-              'Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}',
+              'Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}',
           },
           id: 'f2a3b195-ed76-499a-805d-82d24d4eeba9',
         },
@@ -118,7 +118,7 @@ describe('Alert Actions factory', () => {
           eventAction: 'trigger',
           severity: 'error',
           summary:
-            'Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}',
+            'Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}',
         },
       },
     ]);
diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.ts b/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.ts
index eabfe42691e8dd..31d8c0577780c1 100644
--- a/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.ts
+++ b/x-pack/plugins/synthetics/public/legacy_uptime/state/api/alert_actions.ts
@@ -127,11 +127,11 @@ function getIndexActionParams(selectedMonitor: Ping, recovery = false): IndexAct
     return {
       documents: [
         {
-          monitorName: '{{state.monitorName}}',
-          monitorUrl: '{{{state.monitorUrl}}}',
+          monitorName: '{{context.monitorName}}',
+          monitorUrl: '{{{context.monitorUrl}}}',
           statusMessage: getRecoveryMessage(selectedMonitor),
           latestErrorMessage: '',
-          observerLocation: '{{state.observerLocation}}',
+          observerLocation: '{{context.observerLocation}}',
         },
       ],
       indexOverride: null,
@@ -140,11 +140,11 @@ function getIndexActionParams(selectedMonitor: Ping, recovery = false): IndexAct
   return {
     documents: [
       {
-        monitorName: '{{state.monitorName}}',
-        monitorUrl: '{{{state.monitorUrl}}}',
-        statusMessage: '{{{state.statusMessage}}}',
-        latestErrorMessage: '{{{state.latestErrorMessage}}}',
-        observerLocation: '{{state.observerLocation}}',
+        monitorName: '{{context.monitorName}}',
+        monitorUrl: '{{{context.monitorUrl}}}',
+        statusMessage: '{{{context.statusMessage}}}',
+        latestErrorMessage: '{{{context.latestErrorMessage}}}',
+        observerLocation: '{{context.observerLocation}}',
       },
     ],
     indexOverride: null,
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/common.ts b/x-pack/plugins/synthetics/server/lib/alerts/common.ts
index 8381adce21d2c6..f370b258b482fb 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/common.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/common.ts
@@ -8,6 +8,7 @@
 import { isRight } from 'fp-ts/lib/Either';
 import Mustache from 'mustache';
 import { IBasePath } from '@kbn/core/server';
+import { RuleExecutorServices } from '@kbn/alerting-plugin/server';
 import { UptimeCommonState, UptimeCommonStateType } from '../../../common/runtime_types';
 
 export type UpdateUptimeAlertState = (
@@ -59,9 +60,17 @@ export const updateState: UpdateUptimeAlertState = (state, isTriggeredNow) => {
 };
 
 export const generateAlertMessage = (messageTemplate: string, fields: Record<string, any>) => {
-  return Mustache.render(messageTemplate, { state: { ...fields } });
+  return Mustache.render(messageTemplate, { context: { ...fields }, state: { ...fields } });
 };
 export const getViewInAppUrl = (relativeViewInAppUrl: string, basePath: IBasePath) =>
   basePath.publicBaseUrl
     ? new URL(basePath.prepend(relativeViewInAppUrl), basePath.publicBaseUrl).toString()
     : relativeViewInAppUrl;
+
+export const setRecoveredAlertsContext = (alertFactory: RuleExecutorServices['alertFactory']) => {
+  const { getRecoveredAlerts } = alertFactory.done();
+  for (const alert of getRecoveredAlerts()) {
+    const state = alert.getState();
+    alert.setContext(state);
+  }
+};
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.test.ts b/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.test.ts
index eb4509850414bc..ad821a509b77b6 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.test.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.test.ts
@@ -12,7 +12,6 @@ import {
 import { durationAnomalyAlertFactory } from './duration_anomaly';
 import { DURATION_ANOMALY } from '../../../common/constants/alerts';
 import { AnomaliesTableRecord, AnomalyRecordDoc } from '@kbn/ml-plugin/common/types/anomalies';
-import { DynamicSettings } from '../../../common/runtime_types';
 import { createRuleTypeMocks, bootstrapDependencies } from './test_utils';
 import { getSeverityType } from '@kbn/ml-plugin/common/util/anomaly_utils';
 import { Ping } from '../../../common/runtime_types/ping';
@@ -33,34 +32,6 @@ interface MockAnomalyResult {
 const monitorId = 'uptime-monitor';
 const mockUrl = 'https://elastic.co';
 
-/**
- * This function aims to provide an easy way to give mock props that will
- * reduce boilerplate for tests.
- * @param dynamic the expiration and aging thresholds received at alert creation time
- * @param params the params received at alert creation time
- * @param state the state the alert maintains
- */
-const mockOptions = (
-  dynamicCertSettings?: {
-    certExpirationThreshold: DynamicSettings['certExpirationThreshold'];
-    certAgeThreshold: DynamicSettings['certAgeThreshold'];
-  },
-  state = {},
-  params = {
-    timerange: { from: 'now-15m', to: 'now' },
-    monitorId,
-    severity: 'warning',
-  }
-): any => {
-  const { services } = createRuleTypeMocks(dynamicCertSettings);
-
-  return {
-    params,
-    state,
-    services,
-  };
-};
-
 const mockAnomaliesResult: MockAnomalyResult = {
   anomalies: [
     {
@@ -94,6 +65,50 @@ const mockPing: Partial<Ping> = {
   },
 };
 
+const mockRecoveredAlerts = mockAnomaliesResult.anomalies.map((result) => ({
+  firstCheckedAt: 'date',
+  firstTriggeredAt: undefined,
+  lastCheckedAt: 'date',
+  lastResolvedAt: undefined,
+  isTriggered: false,
+  anomalyStartTimestamp: 'date',
+  currentTriggerStarted: undefined,
+  expectedResponseTime: `${Math.round(result.typicalSort / 1000)} ms`,
+  lastTriggeredAt: undefined,
+  monitor: monitorId,
+  monitorUrl: mockPing.url?.full,
+  observerLocation: result.entityValue,
+  severity: getSeverityType(result.severity),
+  severityScore: result.severity,
+  slowestAnomalyResponse: `${Math.round(result.actualSort / 1000)} ms`,
+  bucketSpan: result.source.bucket_span,
+}));
+
+/**
+ * This function aims to provide an easy way to give mock props that will
+ * reduce boilerplate for tests.
+ * @param dynamic the expiration and aging thresholds received at alert creation time
+ * @param params the params received at alert creation time
+ * @param state the state the alert maintains
+ */
+const mockOptions = (
+  state = {},
+  params = {
+    timerange: { from: 'now-15m', to: 'now' },
+    monitorId,
+    severity: 'warning',
+  }
+): any => {
+  const { services, setContext } = createRuleTypeMocks(mockRecoveredAlerts);
+
+  return {
+    params,
+    state,
+    services,
+    setContext,
+  };
+};
+
 describe('duration anomaly alert', () => {
   let toISOStringSpy: jest.SpyInstance<string, []>;
   const mockDate = 'date';
@@ -206,7 +221,7 @@ Response times as high as ${slowestResponse} ms have been detected from location
         )} level) response time detected on uptime-monitor with url ${
           mockPing.url?.full
         } at date. Anomaly severity score is ${anomaly.severity}.
-        Response times as high as ${slowestResponse} ms have been detected from location ${
+Response times as high as ${slowestResponse} ms have been detected from location ${
           anomaly.entityValue
         }. Expected response time is ${typicalResponse} ms.`;
 
@@ -218,7 +233,17 @@ Response times as high as ${slowestResponse} ms have been detected from location
         Array [
           "xpack.uptime.alerts.actionGroups.durationAnomaly",
           Object {
-            "${ALERT_REASON_MSG}": "${reasonMessages[0]}",
+            "anomalyStartTimestamp": "date",
+            "bucketSpan": 900,
+            "expectedResponseTime": "10 ms",
+            "monitor": "uptime-monitor",
+            "monitorUrl": "https://elastic.co",
+            "observerLocation": "harrisburg",
+            "${ALERT_REASON_MSG}": "Abnormal (minor level) response time detected on uptime-monitor with url https://elastic.co at date. Anomaly severity score is 25.
+        Response times as high as 200 ms have been detected from location harrisburg. Expected response time is 10 ms.",
+            "severity": "minor",
+            "severityScore": 25,
+            "slowestAnomalyResponse": "200 ms",
             "${VIEW_IN_APP_URL}": "http://localhost:5601/hfe/app/uptime/monitor/eHBhY2sudXB0aW1lLmFsZXJ0cy5hY3Rpb25Hcm91cHMuZHVyYXRpb25Bbm9tYWx5MA==?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z",
           },
         ]
@@ -227,11 +252,52 @@ Response times as high as ${slowestResponse} ms have been detected from location
         Array [
           "xpack.uptime.alerts.actionGroups.durationAnomaly",
           Object {
-            "${ALERT_REASON_MSG}": "${reasonMessages[1]}",
+            "anomalyStartTimestamp": "date",
+            "bucketSpan": 900,
+            "expectedResponseTime": "20 ms",
+            "monitor": "uptime-monitor",
+            "monitorUrl": "https://elastic.co",
+            "observerLocation": "fairbanks",
+            "${ALERT_REASON_MSG}": "Abnormal (warning level) response time detected on uptime-monitor with url https://elastic.co at date. Anomaly severity score is 10.
+        Response times as high as 300 ms have been detected from location fairbanks. Expected response time is 20 ms.",
+            "severity": "warning",
+            "severityScore": 10,
+            "slowestAnomalyResponse": "300 ms",
             "${VIEW_IN_APP_URL}": "http://localhost:5601/hfe/app/uptime/monitor/eHBhY2sudXB0aW1lLmFsZXJ0cy5hY3Rpb25Hcm91cHMuZHVyYXRpb25Bbm9tYWx5MQ==?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z",
           },
         ]
       `);
     });
+
+    it('sets alert recovery context for recovered alerts', async () => {
+      toISOStringSpy.mockImplementation(() => mockDate);
+      const mockResultServiceProviderGetter: jest.Mock<{
+        getAnomaliesTableData: jest.Mock<MockAnomalyResult>;
+      }> = jest.fn();
+      const mockGetAnomliesTableDataGetter: jest.Mock<MockAnomalyResult> = jest.fn();
+      const mockGetLatestMonitorGetter: jest.Mock<Partial<Ping>> = jest.fn();
+
+      mockGetLatestMonitorGetter.mockReturnValue(mockPing);
+      mockGetAnomliesTableDataGetter.mockReturnValue(mockAnomaliesResult);
+      mockResultServiceProviderGetter.mockReturnValue({
+        getAnomaliesTableData: mockGetAnomliesTableDataGetter,
+      });
+      const { server, libs, plugins } = bootstrapDependencies(
+        { getLatestMonitor: mockGetLatestMonitorGetter },
+        {
+          ml: {
+            resultsServiceProvider: mockResultServiceProviderGetter,
+          },
+        }
+      );
+      const alert = durationAnomalyAlertFactory(server, libs, plugins);
+      const options = mockOptions();
+      // @ts-ignore the executor can return `void`, but ours never does
+      const state: Record<string, any> = await alert.executor(options);
+      expect(options.setContext).toHaveBeenCalledTimes(2);
+      mockRecoveredAlerts.forEach((alertState) => {
+        expect(options.setContext).toHaveBeenCalledWith(alertState);
+      });
+    });
   });
 });
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.ts b/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.ts
index f2ec05b11f5eac..a93d44013708b2 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/duration_anomaly.ts
@@ -15,7 +15,12 @@ import {
 import { ActionGroupIdsOf } from '@kbn/alerting-plugin/common';
 import { AnomaliesTableRecord } from '@kbn/ml-plugin/common/types/anomalies';
 import { getSeverityType } from '@kbn/ml-plugin/common/util/anomaly_utils';
-import { updateState, generateAlertMessage, getViewInAppUrl } from './common';
+import {
+  updateState,
+  generateAlertMessage,
+  getViewInAppUrl,
+  setRecoveredAlertsContext,
+} from './common';
 import { CLIENT_ALERT_TYPES, DURATION_ANOMALY } from '../../../common/constants/alerts';
 import { commonStateTranslations, durationAnomalyTranslations } from './translations';
 import { UptimeCorePluginsSetup } from '../adapters/framework';
@@ -94,14 +99,26 @@ export const durationAnomalyAlertFactory: UptimeAlertTypeFactory<ActionGroupIds>
     },
   ],
   actionVariables: {
-    context: [ACTION_VARIABLES[ALERT_REASON_MSG], ACTION_VARIABLES[VIEW_IN_APP_URL]],
+    context: [
+      ACTION_VARIABLES[ALERT_REASON_MSG],
+      ACTION_VARIABLES[VIEW_IN_APP_URL],
+      ...durationAnomalyTranslations.actionVariables,
+      ...commonStateTranslations,
+    ],
     state: [...durationAnomalyTranslations.actionVariables, ...commonStateTranslations],
   },
   isExportable: true,
   minimumLicenseRequired: 'platinum',
+  doesSetRecoveryContext: true,
   async executor({
     params,
-    services: { alertWithLifecycle, scopedClusterClient, savedObjectsClient, getAlertStartedDate },
+    services: {
+      alertWithLifecycle,
+      scopedClusterClient,
+      savedObjectsClient,
+      getAlertStartedDate,
+      alertFactory,
+    },
     state,
     startedAt,
   }) {
@@ -160,10 +177,13 @@ export const durationAnomalyAlertFactory: UptimeAlertTypeFactory<ActionGroupIds>
         alertInstance.scheduleActions(DURATION_ANOMALY.id, {
           [ALERT_REASON_MSG]: alertReasonMessage,
           [VIEW_IN_APP_URL]: getViewInAppUrl(relativeViewInAppUrl, basePath),
+          ...summary,
         });
       });
     }
 
+    setRecoveredAlertsContext(alertFactory);
+
     return updateState(state, foundAnomalies);
   },
 });
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/status_check.test.ts b/x-pack/plugins/synthetics/server/lib/alerts/status_check.test.ts
index 84e7c0d68400c6..b9a90ee18038a1 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/status_check.test.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/status_check.test.ts
@@ -56,6 +56,53 @@ const mockMonitors = [
   },
 ];
 
+const mockRecoveredAlerts = [
+  {
+    currentTriggerStarted: '2022-04-25T14:36:31.511Z',
+    firstCheckedAt: '2022-04-25T14:10:30.785Z',
+    firstTriggeredAt: '2022-04-25T14:10:30.785Z',
+    lastCheckedAt: '2022-04-25T14:36:31.511Z',
+    lastTriggeredAt: '2022-04-25T14:36:31.511Z',
+    lastResolvedAt: '2022-04-25T14:23:43.007Z',
+    isTriggered: true,
+    monitorUrl: 'https://expired.badssl.com/',
+    monitorId: 'expired-badssl',
+    monitorName: 'BadSSL Expired',
+    monitorType: 'http',
+    latestErrorMessage:
+      'Get "https://expired.badssl.com/": x509: certificate has expired or is not yet valid: current time 2022-04-25T10:36:27-04:00 is after 2015-04-12T23:59:59Z',
+    observerLocation: 'Unnamed-location',
+    observerHostname: 'Dominiques-MacBook-Pro-2.local',
+    reason:
+      'BadSSL Expired from Unnamed-location failed 2 times in the last 3 mins. Alert when > 1.',
+    statusMessage: 'failed 2 times in the last 3 mins. Alert when > 1.',
+    start: '2022-04-25T14:36:31.621Z',
+    duration: 315110000000,
+  },
+  {
+    currentTriggerStarted: '2022-04-25T14:36:31.511Z',
+    firstCheckedAt: '2022-04-25T14:10:30.785Z',
+    firstTriggeredAt: '2022-04-25T14:10:30.785Z',
+    lastCheckedAt: '2022-04-25T14:36:31.511Z',
+    lastTriggeredAt: '2022-04-25T14:36:31.511Z',
+    lastResolvedAt: '2022-04-25T14:23:43.007Z',
+    isTriggered: true,
+    monitorUrl: 'https://invalid.badssl.com/',
+    monitorId: 'expired-badssl',
+    monitorName: 'BadSSL Expired',
+    monitorType: 'http',
+    latestErrorMessage:
+      'Get "https://invalid.badssl.com/": x509: certificate has expired or is not yet valid: current time 2022-04-25T10:36:27-04:00 is after 2015-04-12T23:59:59Z',
+    observerLocation: 'Unnamed-location',
+    observerHostname: 'Dominiques-MacBook-Pro-2.local',
+    reason:
+      'BadSSL Expired from Unnamed-location failed 2 times in the last 3 mins. Alert when > 1.',
+    statusMessage: 'failed 2 times in the last 3 mins. Alert when > 1.',
+    start: '2022-04-25T14:36:31.621Z',
+    duration: 315110000000,
+  },
+];
+
 const mockCommonAlertDocumentFields = (monitorInfo: GetMonitorStatusResult['monitorInfo']) => ({
   'agent.name': monitorInfo.agent?.name,
   'error.message': monitorInfo.error?.message,
@@ -121,13 +168,14 @@ const mockOptions = (
     },
   }
 ): any => {
-  const { services } = createRuleTypeMocks();
+  const { services, setContext } = createRuleTypeMocks(mockRecoveredAlerts);
 
   return {
     params,
     state,
     services,
     rule,
+    setContext,
   };
 };
 
@@ -142,6 +190,7 @@ describe('status check alert', () => {
   afterEach(() => {
     jest.clearAllMocks();
   });
+
   describe('executor', () => {
     it('does not trigger when there are no monitors down', async () => {
       expect.assertions(5);
@@ -242,7 +291,15 @@ describe('status check alert', () => {
         Array [
           "xpack.uptime.alerts.actionGroups.monitorStatus",
           Object {
+            "latestErrorMessage": "error message 1",
+            "monitorId": "first",
+            "monitorName": "First",
+            "monitorType": "myType",
+            "monitorUrl": "localhost:8080",
+            "observerHostname": undefined,
+            "observerLocation": "harrisburg",
             "reason": "First from harrisburg failed 234 times in the last 15 mins. Alert when > 5.",
+            "statusMessage": "failed 234 times in the last 15 mins. Alert when > 5.",
             "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/Zmlyc3Q=?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22harrisburg%22%5D%5D%5D",
           },
         ]
@@ -313,7 +370,15 @@ describe('status check alert', () => {
         Array [
           "xpack.uptime.alerts.actionGroups.monitorStatus",
           Object {
+            "latestErrorMessage": "error message 1",
+            "monitorId": "first",
+            "monitorName": "First",
+            "monitorType": "myType",
+            "monitorUrl": "localhost:8080",
+            "observerHostname": undefined,
+            "observerLocation": "harrisburg",
             "reason": "First from harrisburg failed 234 times in the last 15m. Alert when > 5.",
+            "statusMessage": "failed 234 times in the last 15m. Alert when > 5.",
             "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/Zmlyc3Q=?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22harrisburg%22%5D%5D%5D",
           },
         ]
@@ -785,28 +850,60 @@ describe('status check alert', () => {
           Array [
             "xpack.uptime.alerts.actionGroups.monitorStatus",
             Object {
+              "latestErrorMessage": undefined,
+              "monitorId": "foo",
+              "monitorName": "Foo",
+              "monitorType": "myType",
+              "monitorUrl": "https://foo.com",
+              "observerHostname": undefined,
+              "observerLocation": "harrisburg",
               "reason": "Foo from harrisburg 35 days availability is 99.28%. Alert when < 99.34%.",
+              "statusMessage": "35 days availability is 99.28%. Alert when < 99.34%.",
               "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/Zm9v?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22harrisburg%22%5D%5D%5D",
             },
           ],
           Array [
             "xpack.uptime.alerts.actionGroups.monitorStatus",
             Object {
+              "latestErrorMessage": undefined,
+              "monitorId": "foo",
+              "monitorName": "Foo",
+              "monitorType": "myType",
+              "monitorUrl": "https://foo.com",
+              "observerHostname": undefined,
+              "observerLocation": "fairbanks",
               "reason": "Foo from fairbanks 35 days availability is 98.03%. Alert when < 99.34%.",
+              "statusMessage": "35 days availability is 98.03%. Alert when < 99.34%.",
               "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/Zm9v?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22fairbanks%22%5D%5D%5D",
             },
           ],
           Array [
             "xpack.uptime.alerts.actionGroups.monitorStatus",
             Object {
+              "latestErrorMessage": undefined,
+              "monitorId": "unreliable",
+              "monitorName": "Unreliable",
+              "monitorType": "myType",
+              "monitorUrl": "https://unreliable.co",
+              "observerHostname": undefined,
+              "observerLocation": "fairbanks",
               "reason": "Unreliable from fairbanks 35 days availability is 90.92%. Alert when < 99.34%.",
+              "statusMessage": "35 days availability is 90.92%. Alert when < 99.34%.",
               "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/dW5yZWxpYWJsZQ==?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22fairbanks%22%5D%5D%5D",
             },
           ],
           Array [
             "xpack.uptime.alerts.actionGroups.monitorStatus",
             Object {
+              "latestErrorMessage": undefined,
+              "monitorId": "no-name",
+              "monitorName": "no-name",
+              "monitorType": "myType",
+              "monitorUrl": "https://no-name.co",
+              "observerHostname": undefined,
+              "observerLocation": "fairbanks",
               "reason": "no-name from fairbanks 35 days availability is 90.92%. Alert when < 99.34%.",
+              "statusMessage": "35 days availability is 90.92%. Alert when < 99.34%.",
               "viewInAppUrl": "http://localhost:5601/hfe/app/uptime/monitor/bm8tbmFtZQ==?dateRangeEnd=now&dateRangeStart=2022-03-17T13%3A13%3A33.755Z&filters=%5B%5B%22observer.geo.name%22%2C%5B%22fairbanks%22%5D%5D%5D",
             },
           ],
@@ -909,6 +1006,26 @@ describe('status check alert', () => {
         })
       );
     });
+
+    it('sets alert recovery context for recovered alerts', async () => {
+      toISOStringSpy.mockImplementation(() => 'foo date string');
+      const mockGetter: jest.Mock<GetMonitorStatusResult[]> = jest.fn();
+
+      mockGetter.mockReturnValue(mockMonitors);
+      const { server, libs, plugins } = bootstrapDependencies({ getMonitorStatus: mockGetter });
+      const alert = statusCheckAlertFactory(server, libs, plugins);
+      const options = mockOptions();
+      // @ts-ignore the executor can return `void`, but ours never does
+      const state: Record<string, any> = await alert.executor(options);
+      expect(options.setContext).toHaveBeenCalledTimes(2);
+      mockRecoveredAlerts.forEach((alertState) => {
+        expect(options.setContext).toHaveBeenCalledWith(alertState);
+      });
+    });
+  });
+
+  describe('alert recovery', () => {
+    it('sets context for alert recovery', () => {});
   });
 
   describe('alert factory', () => {
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/status_check.ts b/x-pack/plugins/synthetics/server/lib/alerts/status_check.ts
index d305dedea3e109..243749f6861065 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/status_check.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/status_check.ts
@@ -21,7 +21,7 @@ import {
   GetMonitorAvailabilityParams,
 } from '../../../common/runtime_types';
 import { CLIENT_ALERT_TYPES, MONITOR_STATUS } from '../../../common/constants/alerts';
-import { updateState, getViewInAppUrl } from './common';
+import { updateState, getViewInAppUrl, setRecoveredAlertsContext } from './common';
 import {
   commonMonitorStateI18,
   commonStateTranslations,
@@ -47,6 +47,7 @@ import {
 import { getMonitorRouteFromMonitorId } from '../../../common/utils/get_monitor_url';
 
 export type ActionGroupIds = ActionGroupIdsOf<typeof MONITOR_STATUS>;
+
 /**
  * Returns the appropriate range for filtering the documents by `@timestamp`.
  *
@@ -75,22 +76,6 @@ export function getTimestampRange({
   };
 }
 
-const getMonIdByLoc = (monitorId: string, location: string) => {
-  return monitorId + '-' + location;
-};
-
-const uniqueDownMonitorIds = (items: GetMonitorStatusResult[]): Set<string> =>
-  items.reduce(
-    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
-    new Set<string>()
-  );
-
-const uniqueAvailMonitorIds = (items: GetMonitorAvailabilityResult[]): Set<string> =>
-  items.reduce(
-    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
-    new Set<string>()
-  );
-
 export const getUniqueIdsByLoc = (
   downMonitorsByLocation: GetMonitorStatusResult[],
   availabilityResults: GetMonitorAvailabilityResult[]
@@ -161,7 +146,7 @@ export const getMonitorSummary = (monitorInfo: Ping, statusMessage: string) => {
 
   return {
     ...summary,
-    reason: `${monitorName} from ${observerLocation} ${statusMessage}`,
+    [ALERT_REASON_MSG]: `${monitorName} from ${observerLocation} ${statusMessage}`,
   };
 };
 
@@ -222,6 +207,22 @@ export const getInstanceId = (monitorInfo: Ping, monIdByLoc: string) => {
   return `${urlText}_${monIdByLoc}`;
 };
 
+const getMonIdByLoc = (monitorId: string, location: string) => {
+  return monitorId + '-' + location;
+};
+
+const uniqueDownMonitorIds = (items: GetMonitorStatusResult[]): Set<string> =>
+  items.reduce(
+    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
+    new Set<string>()
+  );
+
+const uniqueAvailMonitorIds = (items: GetMonitorAvailabilityResult[]): Set<string> =>
+  items.reduce(
+    (acc, { monitorId, location }) => acc.add(getMonIdByLoc(monitorId, location)),
+    new Set<string>()
+  );
+
 export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (server, libs) => ({
   id: CLIENT_ALERT_TYPES.MONITOR_STATUS,
   producer: 'uptime',
@@ -281,15 +282,23 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
       ACTION_VARIABLES[MONITOR_WITH_GEO],
       ACTION_VARIABLES[ALERT_REASON_MSG],
       ACTION_VARIABLES[VIEW_IN_APP_URL],
+      ...commonMonitorStateI18,
     ],
     state: [...commonMonitorStateI18, ...commonStateTranslations],
   },
   isExportable: true,
   minimumLicenseRequired: 'basic',
+  doesSetRecoveryContext: true,
   async executor({
     params: rawParams,
     state,
-    services: { savedObjectsClient, scopedClusterClient, alertWithLifecycle, getAlertStartedDate },
+    services: {
+      savedObjectsClient,
+      scopedClusterClient,
+      alertWithLifecycle,
+      getAlertStartedDate,
+      alertFactory,
+    },
     rule: {
       schedule: { interval },
     },
@@ -314,14 +323,12 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
     });
 
     const filterString = await formatFilterString(uptimeEsClient, filters, search, libs);
-
     const timespanInterval = `${String(timerangeCount)}${timerangeUnit}`;
     // Range filter for `monitor.timespan`, the range of time the ping is valid
     const timespanRange = oldVersionTimeRange || {
       from: `now-${timespanInterval}`,
       to: 'now',
     };
-
     // Range filter for `@timestamp`, the time the document was indexed
     const timestampRange = getTimestampRange({
       ruleScheduleLookback: `now-${interval}`,
@@ -364,10 +371,14 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
           fields: getMonitorAlertDocument(monitorSummary),
         });
 
-        alert.replaceState({
-          ...state,
+        const context = {
           ...monitorSummary,
           statusMessage,
+        };
+
+        alert.replaceState({
+          ...state,
+          ...context,
           ...updateState(state, true),
         });
 
@@ -381,10 +392,11 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
         });
 
         alert.scheduleActions(MONITOR_STATUS.id, {
-          [ALERT_REASON_MSG]: monitorSummary.reason,
           [VIEW_IN_APP_URL]: getViewInAppUrl(relativeViewInAppUrl, basePath),
+          ...context,
         });
       }
+      setRecoveredAlertsContext(alertFactory);
       return updateState(state, downMonitorsByLocation.length > 0);
     }
 
@@ -436,11 +448,16 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
         fields: getMonitorAlertDocument(monitorSummary),
       });
 
-      alert.replaceState({
-        ...updateState(state, true),
+      const context = {
         ...monitorSummary,
         statusMessage,
+      };
+
+      alert.replaceState({
+        ...updateState(state, true),
+        ...context,
       });
+
       const relativeViewInAppUrl = getMonitorRouteFromMonitorId({
         monitorId: monitorSummary.monitorId,
         dateRangeEnd: 'now',
@@ -451,10 +468,11 @@ export const statusCheckAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (
       });
 
       alert.scheduleActions(MONITOR_STATUS.id, {
-        [ALERT_REASON_MSG]: monitorSummary.reason,
         [VIEW_IN_APP_URL]: getViewInAppUrl(relativeViewInAppUrl, basePath),
+        ...context,
       });
     });
+    setRecoveredAlertsContext(alertFactory);
     return updateState(state, downMonitorsByLocation.length > 0);
   },
 });
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/test_utils/index.ts b/x-pack/plugins/synthetics/server/lib/alerts/test_utils/index.ts
index af248af730eee0..456b0675eee874 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/test_utils/index.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/test_utils/index.ts
@@ -13,8 +13,6 @@ import { UMServerLibs } from '../../lib';
 import { UptimeCorePluginsSetup, UptimeServerSetup } from '../../adapters';
 import type { UptimeRouter } from '../../../types';
 import { getUptimeESMockClient } from '../../requests/helper';
-import { DynamicSettings } from '../../../../common/runtime_types';
-import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../../common/constants';
 
 /**
  * The alert takes some dependencies as parameters; these are things like
@@ -41,15 +39,7 @@ export const bootstrapDependencies = (customRequests?: any, customPlugins: any =
   return { server, libs, plugins };
 };
 
-export const createRuleTypeMocks = (
-  dynamicCertSettings: {
-    certAgeThreshold: DynamicSettings['certAgeThreshold'];
-    certExpirationThreshold: DynamicSettings['certExpirationThreshold'];
-  } = {
-    certAgeThreshold: DYNAMIC_SETTINGS_DEFAULTS.certAgeThreshold,
-    certExpirationThreshold: DYNAMIC_SETTINGS_DEFAULTS.certExpirationThreshold,
-  }
-) => {
+export const createRuleTypeMocks = (recoveredAlerts: Array<Record<string, any>> = []) => {
   const loggerMock = {
     debug: jest.fn(),
     warn: jest.fn(),
@@ -58,10 +48,17 @@ export const createRuleTypeMocks = (
 
   const scheduleActions = jest.fn();
   const replaceState = jest.fn();
+  const setContext = jest.fn();
 
   const services = {
     ...getUptimeESMockClient(),
     ...alertsMock.createRuleExecutorServices(),
+    alertFactory: {
+      ...alertsMock.createRuleExecutorServices().alertFactory,
+      done: () => ({
+        getRecoveredAlerts: () => createRecoveredAlerts(recoveredAlerts, setContext),
+      }),
+    },
     alertWithLifecycle: jest.fn().mockReturnValue({ scheduleActions, replaceState }),
     getAlertStartedDate: jest.fn().mockReturnValue('2022-03-17T13:13:33.755Z'),
     logger: loggerMock,
@@ -77,5 +74,14 @@ export const createRuleTypeMocks = (
     services,
     scheduleActions,
     replaceState,
+    setContext,
   };
 };
+
+const createRecoveredAlerts = (alerts: Array<Record<string, any>>, setContext: jest.Mock) => {
+  return alerts.map((alert) => ({
+    getState: () => alert,
+    setContext,
+    context: {},
+  }));
+};
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/tls.test.ts b/x-pack/plugins/synthetics/server/lib/alerts/tls.test.ts
index 31a5e98bf9f021..88f8b964eb590a 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/tls.test.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/tls.test.ts
@@ -7,7 +7,7 @@
 import moment from 'moment';
 import { tlsAlertFactory, getCertSummary } from './tls';
 import { TLS } from '../../../common/constants/alerts';
-import { CertResult, DynamicSettings } from '../../../common/runtime_types';
+import { CertResult } from '../../../common/runtime_types';
 import { createRuleTypeMocks, bootstrapDependencies } from './test_utils';
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../common/constants';
 
@@ -19,24 +19,6 @@ import { savedObjectsAdapter, UMSavedObjectsAdapter } from '../saved_objects/sav
  * @param params the params received at alert creation time
  * @param state the state the alert maintains
  */
-const mockOptions = (
-  dynamicCertSettings?: {
-    certExpirationThreshold: DynamicSettings['certExpirationThreshold'];
-    certAgeThreshold: DynamicSettings['certAgeThreshold'];
-  },
-  state = {}
-): any => {
-  const { services } = createRuleTypeMocks(dynamicCertSettings);
-  const params = {
-    timerange: { from: 'now-15m', to: 'now' },
-  };
-
-  return {
-    params,
-    state,
-    services,
-  };
-};
 
 const mockCertResult: CertResult = {
   certs: [
@@ -76,6 +58,35 @@ const mockCertResult: CertResult = {
   total: 4,
 };
 
+const mockRecoveredAlerts = [
+  {
+    commonName: mockCertResult.certs[0].common_name ?? '',
+    issuer: mockCertResult.certs[0].issuer ?? '',
+    summary: 'sample summary',
+    status: 'expired',
+  },
+  {
+    commonName: mockCertResult.certs[1].common_name ?? '',
+    issuer: mockCertResult.certs[1].issuer ?? '',
+    summary: 'sample summary 2',
+    status: 'aging',
+  },
+];
+
+const mockOptions = (state = {}): any => {
+  const { services, setContext } = createRuleTypeMocks(mockRecoveredAlerts);
+  const params = {
+    timerange: { from: 'now-15m', to: 'now' },
+  };
+
+  return {
+    params,
+    state,
+    services,
+    setContext,
+  };
+};
+
 describe('tls alert', () => {
   let toISOStringSpy: jest.SpyInstance<string, []>;
   let savedObjectsAdapterSpy: jest.SpyInstance<
@@ -131,16 +142,18 @@ describe('tls alert', () => {
       const [{ value: alertInstanceMock }] = alertWithLifecycle.mock.results;
       expect(alertInstanceMock.replaceState).toHaveBeenCalledTimes(4);
       mockCertResult.certs.forEach((cert) => {
-        expect(alertInstanceMock.replaceState).toBeCalledWith(
-          expect.objectContaining({
-            commonName: cert.common_name,
-            issuer: cert.issuer,
-            status: 'expired',
-          })
+        const context = {
+          commonName: cert.common_name,
+          issuer: cert.issuer,
+          status: 'expired',
+        };
+        expect(alertInstanceMock.replaceState).toBeCalledWith(expect.objectContaining(context));
+        expect(alertInstanceMock.scheduleActions).toBeCalledWith(
+          TLS.id,
+          expect.objectContaining(context)
         );
       });
       expect(alertInstanceMock.scheduleActions).toHaveBeenCalledTimes(4);
-      expect(alertInstanceMock.scheduleActions).toBeCalledWith(TLS.id);
     });
 
     it('handles dynamic settings for aging or expiration threshold', async () => {
@@ -167,6 +180,22 @@ describe('tls alert', () => {
         })
       );
     });
+
+    it('sets alert recovery context for recovered alerts', async () => {
+      toISOStringSpy.mockImplementation(() => 'foo date string');
+      const mockGetter: jest.Mock<CertResult> = jest.fn();
+
+      mockGetter.mockReturnValue(mockCertResult);
+      const { server, libs, plugins } = bootstrapDependencies({ getCerts: mockGetter });
+      const alert = tlsAlertFactory(server, libs, plugins);
+      const options = mockOptions();
+      // @ts-ignore the executor can return `void`, but ours never does
+      const state: Record<string, any> = await alert.executor(options);
+      expect(options.setContext).toHaveBeenCalledTimes(2);
+      mockRecoveredAlerts.forEach((alertState) => {
+        expect(options.setContext).toHaveBeenCalledWith(alertState);
+      });
+    });
   });
 
   describe('getCertSummary', () => {
diff --git a/x-pack/plugins/synthetics/server/lib/alerts/tls.ts b/x-pack/plugins/synthetics/server/lib/alerts/tls.ts
index 0a6fb24c88156f..127171eab0f4dc 100644
--- a/x-pack/plugins/synthetics/server/lib/alerts/tls.ts
+++ b/x-pack/plugins/synthetics/server/lib/alerts/tls.ts
@@ -9,7 +9,7 @@ import { schema } from '@kbn/config-schema';
 import { ALERT_REASON } from '@kbn/rule-data-utils';
 import { ActionGroupIdsOf } from '@kbn/alerting-plugin/common';
 import { UptimeAlertTypeFactory } from './types';
-import { updateState, generateAlertMessage } from './common';
+import { updateState, generateAlertMessage, setRecoveredAlertsContext } from './common';
 import { CLIENT_ALERT_TYPES, TLS } from '../../../common/constants/alerts';
 import { DYNAMIC_SETTINGS_DEFAULTS } from '../../../common/constants';
 import { Cert, CertResult } from '../../../common/runtime_types';
@@ -108,13 +108,14 @@ export const tlsAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (_server,
     },
   ],
   actionVariables: {
-    context: [],
+    context: [...tlsTranslations.actionVariables, ...commonStateTranslations],
     state: [...tlsTranslations.actionVariables, ...commonStateTranslations],
   },
   isExportable: true,
   minimumLicenseRequired: 'basic',
+  doesSetRecoveryContext: true,
   async executor({
-    services: { alertWithLifecycle, savedObjectsClient, scopedClusterClient },
+    services: { alertWithLifecycle, savedObjectsClient, scopedClusterClient, alertFactory },
     state,
   }) {
     const dynamicSettings = await savedObjectsAdapter.getUptimeDynamicSettings(savedObjectsClient);
@@ -173,10 +174,12 @@ export const tlsAlertFactory: UptimeAlertTypeFactory<ActionGroupIds> = (_server,
           ...updateState(state, foundCerts),
           ...summary,
         });
-        alertInstance.scheduleActions(TLS.id);
+        alertInstance.scheduleActions(TLS.id, { ...summary });
       });
     }
 
+    setRecoveredAlertsContext(alertFactory);
+
     return updateState(state, foundCerts);
   },
 });
diff --git a/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts b/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
index 425ce5a55524db..963acca117881e 100644
--- a/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/uptime/simple_down_alert.ts
@@ -107,7 +107,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
           group: 'xpack.uptime.alerts.actionGroups.monitorStatus',
           params: {
             message:
-              'Monitor {{state.monitorName}} with url {{{state.monitorUrl}}} from {{state.observerLocation}} {{{state.statusMessage}}} The latest error message is {{{state.latestErrorMessage}}}',
+              'Monitor {{context.monitorName}} with url {{{context.monitorUrl}}} from {{context.observerLocation}} {{{context.statusMessage}}} The latest error message is {{{context.latestErrorMessage}}}',
           },
           id: 'my-slack1',
         },

From 9ca3f4a92dcefd15d6f608ff0438101c49d8f3b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20St=C3=BCrmer?= <weltenwort@users.noreply.github.com>
Date: Mon, 9 May 2022 18:08:33 +0200
Subject: [PATCH 3/6] [Stack Monitoring] Convert elasticsearch_settings routes
 to TypeScript (#131261)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../get_elasticsearch_settings_cluster.ts     | 12 ++++++++
 .../get_elasticsearch_settings_nodes.ts       | 12 ++++++++
 .../http_api/elasticsearch_settings/index.ts  | 12 ++++++++
 ...sticsearch_settings_internal_monitoring.ts | 24 ++++++++++++++++
 ...asticsearch_settings_collection_enabled.ts | 12 ++++++++
 ...sticsearch_settings_collection_interval.ts | 12 ++++++++
 .../check/{cluster.js => cluster.ts}          | 14 +++++-----
 .../check/internal_monitoring.ts              | 28 ++++++++++++-------
 .../check/{nodes.js => nodes.ts}              | 12 ++++----
 .../{index.js => index.ts}                    |  2 +-
 ...ction_enabled.js => collection_enabled.ts} | 12 ++++----
 ...ion_interval.js => collection_interval.ts} | 12 ++++----
 12 files changed, 128 insertions(+), 36 deletions(-)
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_cluster.ts
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_nodes.ts
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/index.ts
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/post_elasticsearch_settings_internal_monitoring.ts
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_enabled.ts
 create mode 100644 x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_interval.ts
 rename x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/{cluster.js => cluster.ts} (65%)
 rename x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/{nodes.js => nodes.ts} (67%)
 rename x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/{index.js => index.ts} (100%)
 rename x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/{collection_enabled.js => collection_enabled.ts} (64%)
 rename x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/{collection_interval.js => collection_interval.ts} (64%)

diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_cluster.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_cluster.ts
new file mode 100644
index 00000000000000..e68a2920155a58
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_cluster.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as rt from 'io-ts';
+
+export const getElasticsearchSettingsClusterResponsePayloadRT = rt.type({
+  // TODO: add payload entries
+});
diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_nodes.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_nodes.ts
new file mode 100644
index 00000000000000..2621683b85d976
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/get_elasticsearch_settings_nodes.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as rt from 'io-ts';
+
+export const getElasticsearchSettingsNodesResponsePayloadRT = rt.type({
+  // TODO: add payload entries
+});
diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/index.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/index.ts
new file mode 100644
index 00000000000000..3268982b69b9a1
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export * from './get_elasticsearch_settings_cluster';
+export * from './get_elasticsearch_settings_nodes';
+export * from './post_elasticsearch_settings_internal_monitoring';
+export * from './put_elasticsearch_settings_collection_enabled';
+export * from './put_elasticsearch_settings_collection_interval';
diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/post_elasticsearch_settings_internal_monitoring.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/post_elasticsearch_settings_internal_monitoring.ts
new file mode 100644
index 00000000000000..54b65d4c1c5276
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/post_elasticsearch_settings_internal_monitoring.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as rt from 'io-ts';
+import { ccsRT } from '../shared';
+
+export const postElasticsearchSettingsInternalMonitoringRequestPayloadRT = rt.partial({
+  ccs: ccsRT,
+});
+
+export type PostElasticsearchSettingsInternalMonitoringRequestPayload = rt.TypeOf<
+  typeof postElasticsearchSettingsInternalMonitoringRequestPayloadRT
+>;
+
+export const postElasticsearchSettingsInternalMonitoringResponsePayloadRT = rt.type({
+  body: rt.type({
+    legacy_indices: rt.number,
+    mb_indices: rt.number,
+  }),
+});
diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_enabled.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_enabled.ts
new file mode 100644
index 00000000000000..f65fdaddc45488
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_enabled.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as rt from 'io-ts';
+
+export const putElasticsearchSettingsCollectionEnabledResponsePayloadRT = rt.type({
+  // TODO: add payload entries
+});
diff --git a/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_interval.ts b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_interval.ts
new file mode 100644
index 00000000000000..da4905c044fe02
--- /dev/null
+++ b/x-pack/plugins/monitoring/common/http_api/elasticsearch_settings/put_elasticsearch_settings_collection_interval.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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as rt from 'io-ts';
+
+export const putElasticsearchSettingsCollectionIntervalResponsePayloadRT = rt.type({
+  // TODO: add payload entries
+});
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.js b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.ts
similarity index 65%
rename from x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.js
rename to x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.ts
index 6996c4885d25dc..df2fafa2a952cf 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.js
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/cluster.ts
@@ -5,25 +5,25 @@
  * 2.0.
  */
 
+import { getElasticsearchSettingsClusterResponsePayloadRT } from '../../../../../../common/http_api/elasticsearch_settings';
 import { checkClusterSettings } from '../../../../../lib/elasticsearch_settings';
 import { handleSettingsError } from '../../../../../lib/errors';
+import { MonitoringCore } from '../../../../../types';
 
 /*
  * Cluster Settings Check Route
  */
-export function clusterSettingsCheckRoute(server) {
+export function clusterSettingsCheckRoute(server: MonitoringCore) {
   server.route({
-    method: 'GET',
+    method: 'get',
     path: '/api/monitoring/v1/elasticsearch_settings/check/cluster',
-    config: {
-      validate: {},
-    },
+    validate: {},
     async handler(req) {
       try {
         const response = await checkClusterSettings(req); // needs to be try/catch to handle privilege error
-        return response;
+        return getElasticsearchSettingsClusterResponsePayloadRT.encode(response);
       } catch (err) {
-        console.log(err);
+        server.log.error(err);
         throw handleSettingsError(err);
       }
     },
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/internal_monitoring.ts b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/internal_monitoring.ts
index 8bee3f273e1072..11e0eec3f08f0b 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/internal_monitoring.ts
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/internal_monitoring.ts
@@ -5,17 +5,21 @@
  * 2.0.
  */
 
-import { schema } from '@kbn/config-schema';
-import { RequestHandlerContext } from '@kbn/core/server';
 import type * as estypes from '@elastic/elasticsearch/lib/api/typesWithBodyKey';
+import { RequestHandlerContext } from '@kbn/core/server';
+import { prefixIndexPatternWithCcs } from '../../../../../../common/ccs_utils';
 import {
   INDEX_PATTERN_ELASTICSEARCH,
   INDEX_PATTERN_KIBANA,
   INDEX_PATTERN_LOGSTASH,
 } from '../../../../../../common/constants';
-import { prefixIndexPatternWithCcs } from '../../../../../../common/ccs_utils';
+import {
+  postElasticsearchSettingsInternalMonitoringRequestPayloadRT,
+  postElasticsearchSettingsInternalMonitoringResponsePayloadRT,
+} from '../../../../../../common/http_api/elasticsearch_settings';
+import { createValidationFunction } from '../../../../../lib/create_route_validation_function';
 import { handleError } from '../../../../../lib/errors';
-import { RouteDependencies, LegacyServer } from '../../../../../types';
+import { LegacyServer, RouteDependencies } from '../../../../../types';
 
 const queryBody = {
   size: 0,
@@ -69,13 +73,15 @@ const checkLatestMonitoringIsLegacy = async (context: RequestHandlerContext, ind
 };
 
 export function internalMonitoringCheckRoute(server: LegacyServer, npRoute: RouteDependencies) {
+  const validateBody = createValidationFunction(
+    postElasticsearchSettingsInternalMonitoringRequestPayloadRT
+  );
+
   npRoute.router.post(
     {
       path: '/api/monitoring/v1/elasticsearch_settings/check/internal_monitoring',
       validate: {
-        body: schema.object({
-          ccs: schema.maybe(schema.string()),
-        }),
+        body: validateBody,
       },
     },
     async (context, request, response) => {
@@ -101,9 +107,11 @@ export function internalMonitoringCheckRoute(server: LegacyServer, npRoute: Rout
           typeCount.mb_indices += counts.mbIndicesCount;
         });
 
-        return response.ok({
-          body: typeCount,
-        });
+        return response.ok(
+          postElasticsearchSettingsInternalMonitoringResponsePayloadRT.encode({
+            body: typeCount,
+          })
+        );
       } catch (err) {
         throw handleError(err);
       }
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.js b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.ts
similarity index 67%
rename from x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.js
rename to x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.ts
index fe675302a982fd..90c37c6f910c94 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.js
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/check/nodes.ts
@@ -5,23 +5,23 @@
  * 2.0.
  */
 
+import { getElasticsearchSettingsNodesResponsePayloadRT } from '../../../../../../common/http_api/elasticsearch_settings';
 import { checkNodesSettings } from '../../../../../lib/elasticsearch_settings';
 import { handleSettingsError } from '../../../../../lib/errors';
+import { MonitoringCore } from '../../../../../types';
 
 /*
  * Cluster Settings Check Route
  */
-export function nodesSettingsCheckRoute(server) {
+export function nodesSettingsCheckRoute(server: MonitoringCore) {
   server.route({
-    method: 'GET',
+    method: 'get',
     path: '/api/monitoring/v1/elasticsearch_settings/check/nodes',
-    config: {
-      validate: {},
-    },
+    validate: {},
     async handler(req) {
       try {
         const response = await checkNodesSettings(req); // needs to be try/catch to handle privilege error
-        return response;
+        return getElasticsearchSettingsNodesResponsePayloadRT.encode(response);
       } catch (err) {
         throw handleSettingsError(err);
       }
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.js b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.ts
similarity index 100%
rename from x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.js
rename to x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.ts
index 8eb50a57fb858c..61bb1ba804a5ac 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.js
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/index.ts
@@ -5,8 +5,8 @@
  * 2.0.
  */
 
-export { internalMonitoringCheckRoute } from './check/internal_monitoring';
 export { clusterSettingsCheckRoute } from './check/cluster';
+export { internalMonitoringCheckRoute } from './check/internal_monitoring';
 export { nodesSettingsCheckRoute } from './check/nodes';
 export { setCollectionEnabledRoute } from './set/collection_enabled';
 export { setCollectionIntervalRoute } from './set/collection_interval';
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.js b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.ts
similarity index 64%
rename from x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.js
rename to x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.ts
index c8bf24156f129e..941818699ede20 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.js
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_enabled.ts
@@ -5,23 +5,23 @@
  * 2.0.
  */
 
+import { putElasticsearchSettingsCollectionEnabledResponsePayloadRT } from '../../../../../../common/http_api/elasticsearch_settings';
 import { setCollectionEnabled } from '../../../../../lib/elasticsearch_settings';
 import { handleSettingsError } from '../../../../../lib/errors';
+import { MonitoringCore } from '../../../../../types';
 
 /*
  * Cluster Settings Check Route
  */
-export function setCollectionEnabledRoute(server) {
+export function setCollectionEnabledRoute(server: MonitoringCore) {
   server.route({
-    method: 'PUT',
+    method: 'put',
     path: '/api/monitoring/v1/elasticsearch_settings/set/collection_enabled',
-    config: {
-      validate: {},
-    },
+    validate: {},
     async handler(req) {
       try {
         const response = await setCollectionEnabled(req);
-        return response;
+        return putElasticsearchSettingsCollectionEnabledResponsePayloadRT.encode(response);
       } catch (err) {
         throw handleSettingsError(err);
       }
diff --git a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.js b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.ts
similarity index 64%
rename from x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.js
rename to x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.ts
index 60216650062c05..eb4798efc36cc9 100644
--- a/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.js
+++ b/x-pack/plugins/monitoring/server/routes/api/v1/elasticsearch_settings/set/collection_interval.ts
@@ -5,23 +5,23 @@
  * 2.0.
  */
 
+import { putElasticsearchSettingsCollectionIntervalResponsePayloadRT } from '../../../../../../common/http_api/elasticsearch_settings';
 import { setCollectionInterval } from '../../../../../lib/elasticsearch_settings';
 import { handleSettingsError } from '../../../../../lib/errors';
+import { MonitoringCore } from '../../../../../types';
 
 /*
  * Cluster Settings Check Route
  */
-export function setCollectionIntervalRoute(server) {
+export function setCollectionIntervalRoute(server: MonitoringCore) {
   server.route({
-    method: 'PUT',
+    method: 'put',
     path: '/api/monitoring/v1/elasticsearch_settings/set/collection_interval',
-    config: {
-      validate: {},
-    },
+    validate: {},
     async handler(req) {
       try {
         const response = await setCollectionInterval(req);
-        return response;
+        return putElasticsearchSettingsCollectionIntervalResponsePayloadRT.encode(response);
       } catch (err) {
         throw handleSettingsError(err);
       }

From 53d170aeca3160b6ffbb737f5605867d7231b3dd Mon Sep 17 00:00:00 2001
From: Tiago Costa <tiago.costa@elastic.co>
Date: Mon, 9 May 2022 17:34:43 +0100
Subject: [PATCH 4/6] skip flaky suite (#131729)

---
 .../from_the_browser/core_context_providers.ts                 | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/test/analytics/tests/instrumented_events/from_the_browser/core_context_providers.ts b/test/analytics/tests/instrumented_events/from_the_browser/core_context_providers.ts
index 58d8de723639d1..eb6c8fb0888f25 100644
--- a/test/analytics/tests/instrumented_events/from_the_browser/core_context_providers.ts
+++ b/test/analytics/tests/instrumented_events/from_the_browser/core_context_providers.ts
@@ -15,7 +15,8 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const ebtUIHelper = getService('kibana_ebt_ui');
   const { common } = getPageObjects(['common']);
 
-  describe('Core Context Providers', () => {
+  // FLAKY: https://github.com/elastic/kibana/issues/131729
+  describe.skip('Core Context Providers', () => {
     let event: Event;
     before(async () => {
       await common.navigateToApp('home');

From 5bdad23a7e44ebf5304ecd2cc0b83b0dff05ae3a Mon Sep 17 00:00:00 2001
From: Clint Andrew Hall <clint.hall@elastic.co>
Date: Mon, 9 May 2022 11:53:11 -0500
Subject: [PATCH 5/6] [Shared UX] Redirect App Link to package (#131575)

* [Shared UX] Redirect App Link to package

* Fix types
---
 package.json                                  |   2 +
 packages/BUILD.bazel                          |   2 +
 packages/kbn-shared-ux-components/BUILD.bazel |  10 +-
 .../kbn-shared-ux-components/src/index.ts     |   2 -
 ...elastic_agent_card.component.test.tsx.snap | 132 ++----
 .../elastic_agent_card.test.tsx.snap          | 408 +++++++++---------
 .../elastic_agent_card.component.test.tsx     |  34 +-
 .../elastic_agent_card.component.tsx          |  41 +-
 .../elastic_agent_card.stories.tsx            |  22 +-
 .../no_data_card/elastic_agent_card.tsx       |  29 +-
 .../src/redirect_app_links/click_handler.ts   |  48 ---
 .../src/redirect_app_links/index.ts           |  18 -
 .../redirect_app_links/redirect_app_links.mdx |  12 -
 .../redirect_app_links.stories.tsx            |  43 --
 .../redirect_app_links.test.tsx               | 249 -----------
 .../redirect_app_links/redirect_app_links.tsx |  68 ---
 .../icon_button_group.test.tsx.snap           |   4 +-
 .../__snapshots__/primary.test.tsx.snap       |   4 +-
 .../src/services/mock/application.mock.ts     |   4 +-
 .../src/services/application.ts               |   4 +-
 .../shared-ux/link/redirect_app/BUILD.bazel   | 140 ++++++
 .../shared-ux/link/redirect_app/README.mdx    |  86 ++++
 .../link/redirect_app/jest.config.js          |  14 +
 .../shared-ux/link/redirect_app/package.json  |   8 +
 .../redirect_app/src}/click_handler.test.ts   |  72 +++-
 .../link/redirect_app/src/click_handler.ts    |  57 +++
 .../shared-ux/link/redirect_app/src/index.tsx |  39 ++
 .../src/redirect_app_links.component.tsx      |  57 +++
 .../src/redirect_app_links.stories.tsx        |  71 +++
 .../src/redirect_app_links.test.tsx           | 292 +++++++++++++
 .../redirect_app/src/redirect_app_links.tsx   |  30 ++
 .../link/redirect_app/src/services.tsx        |  79 ++++
 .../shared-ux/link/redirect_app/src/types.ts  |   9 +
 .../shared-ux/link/redirect_app/tsconfig.json |  19 +
 yarn.lock                                     |   8 +
 35 files changed, 1270 insertions(+), 847 deletions(-)
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.ts
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/index.ts
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.mdx
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.stories.tsx
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.test.tsx
 delete mode 100644 packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/BUILD.bazel
 create mode 100644 packages/shared-ux/link/redirect_app/README.mdx
 create mode 100644 packages/shared-ux/link/redirect_app/jest.config.js
 create mode 100644 packages/shared-ux/link/redirect_app/package.json
 rename packages/{kbn-shared-ux-components/src/redirect_app_links => shared-ux/link/redirect_app/src}/click_handler.test.ts (84%)
 create mode 100644 packages/shared-ux/link/redirect_app/src/click_handler.ts
 create mode 100644 packages/shared-ux/link/redirect_app/src/index.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/redirect_app_links.component.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/redirect_app_links.stories.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/redirect_app_links.test.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/redirect_app_links.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/services.tsx
 create mode 100644 packages/shared-ux/link/redirect_app/src/types.ts
 create mode 100644 packages/shared-ux/link/redirect_app/tsconfig.json

diff --git a/package.json b/package.json
index b0b21934009c5b..d1e5972cb7ae63 100644
--- a/package.json
+++ b/package.json
@@ -180,6 +180,7 @@
     "@kbn/server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository",
     "@kbn/shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen",
     "@kbn/shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components",
+    "@kbn/shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app",
     "@kbn/shared-ux-services": "link:bazel-bin/packages/kbn-shared-ux-services",
     "@kbn/shared-ux-storybook": "link:bazel-bin/packages/kbn-shared-ux-storybook",
     "@kbn/shared-ux-utility": "link:bazel-bin/packages/kbn-shared-ux-utility",
@@ -667,6 +668,7 @@
     "@types/kbn__server-route-repository": "link:bazel-bin/packages/kbn-server-route-repository/npm_module_types",
     "@types/kbn__shared-ux-button-exit-full-screen": "link:bazel-bin/packages/shared-ux/button/exit_full_screen/npm_module_types",
     "@types/kbn__shared-ux-components": "link:bazel-bin/packages/kbn-shared-ux-components/npm_module_types",
+    "@types/kbn__shared-ux-link-redirect-app": "link:bazel-bin/packages/shared-ux/link/redirect_app/npm_module_types",
     "@types/kbn__shared-ux-services": "link:bazel-bin/packages/kbn-shared-ux-services/npm_module_types",
     "@types/kbn__shared-ux-storybook": "link:bazel-bin/packages/kbn-shared-ux-storybook/npm_module_types",
     "@types/kbn__shared-ux-utility": "link:bazel-bin/packages/kbn-shared-ux-utility/npm_module_types",
diff --git a/packages/BUILD.bazel b/packages/BUILD.bazel
index 45f57b4c4bed0e..7ce1fa1eb4dfcf 100644
--- a/packages/BUILD.bazel
+++ b/packages/BUILD.bazel
@@ -110,6 +110,7 @@ filegroup(
     "//packages/kbn-utility-types:build",
     "//packages/kbn-utils:build",
     "//packages/shared-ux/button/exit_full_screen:build",
+    "//packages/shared-ux/link/redirect_app:build",
   ],
 )
 
@@ -203,6 +204,7 @@ filegroup(
     "//packages/kbn-utility-types:build_types",
     "//packages/kbn-utils:build_types",
     "//packages/shared-ux/button/exit_full_screen:build_types",
+    "//packages/shared-ux/link/redirect_app:build_types",
   ],
 )
 
diff --git a/packages/kbn-shared-ux-components/BUILD.bazel b/packages/kbn-shared-ux-components/BUILD.bazel
index 8eca4da0144933..ca815e2d0cf5ca 100644
--- a/packages/kbn-shared-ux-components/BUILD.bazel
+++ b/packages/kbn-shared-ux-components/BUILD.bazel
@@ -40,8 +40,9 @@ NPM_MODULE_EXTRA_FILES = [
 #    "@npm//name-of-package"
 #    eg. "@npm//lodash"
 RUNTIME_DEPS = [
-  "//packages/kbn-i18n",
   "//packages/kbn-i18n-react",
+  "//packages/kbn-i18n",
+  "//packages/shared-ux/link/redirect_app",
   "//packages/kbn-shared-ux-services",
   "//packages/kbn-shared-ux-storybook",
   "//packages/kbn-shared-ux-utility",
@@ -51,6 +52,7 @@ RUNTIME_DEPS = [
   "@npm//classnames",
   "@npm//react-use",
   "@npm//react",
+  "@npm//rxjs",
   "@npm//url-loader",
 ]
 
@@ -64,12 +66,13 @@ RUNTIME_DEPS = [
 #
 #  References to NPM packages work the same as RUNTIME_DEPS
 TYPES_DEPS = [
-  "//packages/kbn-i18n:npm_module_types",
+  "//packages/kbn-ambient-ui-types",
   "//packages/kbn-i18n-react:npm_module_types",
+  "//packages/kbn-i18n:npm_module_types",
+  "//packages/shared-ux/link/redirect_app:npm_module_types",
   "//packages/kbn-shared-ux-services:npm_module_types",
   "//packages/kbn-shared-ux-storybook:npm_module_types",
   "//packages/kbn-shared-ux-utility:npm_module_types",
-  "//packages/kbn-ambient-ui-types",
   "@npm//@types/node",
   "@npm//@types/jest",
   "@npm//@types/react",
@@ -78,6 +81,7 @@ TYPES_DEPS = [
   "@npm//@emotion/css",
   "@npm//@elastic/eui",
   "@npm//react-use",
+  "@npm//rxjs",
 ]
 
 jsts_transpiler(
diff --git a/packages/kbn-shared-ux-components/src/index.ts b/packages/kbn-shared-ux-components/src/index.ts
index 05afc94f782c87..058f7cf8cfec38 100644
--- a/packages/kbn-shared-ux-components/src/index.ts
+++ b/packages/kbn-shared-ux-components/src/index.ts
@@ -15,8 +15,6 @@ export const LazyToolbarButton = React.lazy(() =>
   }))
 );
 
-export const RedirectAppLinks = React.lazy(() => import('./redirect_app_links'));
-
 /**
  * A `ToolbarButton` component that is wrapped by the `withSuspense` HOC.  This component can
  * be used directly by consumers and will load the `LazyToolbarButton` component lazily with
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
index 79fce9de0feece..ab465d9a6c5b2a 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.component.test.tsx.snap
@@ -1,112 +1,48 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ElasticAgentCardComponent props button 1`] = `
-<RedirectAppLinks
-  currentAppId$={
-    Observable {
-      "source": Subject {
-        "closed": false,
-        "currentObservers": null,
-        "hasError": false,
-        "isStopped": false,
-        "observers": Array [],
-        "thrownError": null,
-      },
-    }
-  }
-  navigateToUrl={[MockFunction]}
->
-  <NoDataCard
-    button="Button"
-    description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-    image="test-file-stub"
-    title="Add Elastic Agent"
-  />
-</RedirectAppLinks>
+<NoDataCard
+  button="Button"
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
+  image="test-file-stub"
+  title="Add Elastic Agent"
+/>
 `;
 
 exports[`ElasticAgentCardComponent props href 1`] = `
-<RedirectAppLinks
-  currentAppId$={
-    Observable {
-      "source": Subject {
-        "closed": false,
-        "currentObservers": null,
-        "hasError": false,
-        "isStopped": false,
-        "observers": Array [],
-        "thrownError": null,
-      },
-    }
-  }
-  navigateToUrl={[MockFunction]}
->
-  <NoDataCard
-    description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-    href="some path"
-    image="test-file-stub"
-    title="Add Elastic Agent"
-  />
-</RedirectAppLinks>
+<NoDataCard
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
+  href="some path"
+  image="test-file-stub"
+  title="Add Elastic Agent"
+/>
 `;
 
 exports[`ElasticAgentCardComponent renders 1`] = `
-<RedirectAppLinks
-  currentAppId$={
-    Observable {
-      "source": Subject {
-        "closed": false,
-        "currentObservers": null,
-        "hasError": false,
-        "isStopped": false,
-        "observers": Array [],
-        "thrownError": null,
-      },
-    }
-  }
-  navigateToUrl={[MockFunction]}
->
-  <NoDataCard
-    description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-    image="test-file-stub"
-    title="Add Elastic Agent"
-  />
-</RedirectAppLinks>
+<NoDataCard
+  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
+  image="test-file-stub"
+  title="Add Elastic Agent"
+/>
 `;
 
 exports[`ElasticAgentCardComponent renders with canAccessFleet false 1`] = `
-<RedirectAppLinks
-  currentAppId$={
-    Observable {
-      "source": Subject {
-        "closed": false,
-        "currentObservers": null,
-        "hasError": false,
-        "isStopped": false,
-        "observers": Array [],
-        "thrownError": null,
-      },
-    }
+<NoDataCard
+  description={
+    <EuiTextColor
+      color="default"
+    >
+      This integration is not yet enabled. Your administrator has the required permissions to turn it on.
+    </EuiTextColor>
+  }
+  image="test-file-stub"
+  isDisabled={true}
+  title={
+    <EuiTextColor
+      color="default"
+    >
+      Contact your administrator
+    </EuiTextColor>
   }
-  navigateToUrl={[MockFunction]}
->
-  <NoDataCard
-    description={
-      <EuiTextColor
-        color="default"
-      >
-        This integration is not yet enabled. Your administrator has the required permissions to turn it on.
-      </EuiTextColor>
-    }
-    image="test-file-stub"
-    isDisabled={true}
-    title={
-      <EuiTextColor
-        color="default"
-      >
-        Contact your administrator
-      </EuiTextColor>
-    }
-  />
-</RedirectAppLinks>
+/>
 `;
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
index 79c0ea245b6cbd..b15f254a5274aa 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/__snapshots__/elastic_agent_card.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`ElasticAgentCard renders 1`] = `
 <SharedUxServicesProvider
   application={
     Object {
-      "currentAppId$": Observable {},
+      "currentAppId$": Observable {
+        "_subscribe": [Function],
+      },
       "navigateToUrl": [Function],
     }
   }
@@ -157,223 +159,235 @@ exports[`ElasticAgentCard renders 1`] = `
   }
 >
   <ElasticAgentCard>
-    <ElasticAgentCardComponent
-      canAccessFleet={true}
-      currentAppId$={Observable {}}
-      href="/app/integrations/browse"
+    <RedirectAppLinks
+      currentAppId="abc123"
       navigateToUrl={[Function]}
     >
-      <RedirectAppLinks
-        currentAppId$={Observable {}}
+      <RedirectAppLinksProvider
+        currentAppId="abc123"
         navigateToUrl={[Function]}
       >
-        <div>
-          <NoDataCard
-            description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-            href="/app/integrations/browse"
-            image="test-file-stub"
-            title="Add Elastic Agent"
+        <RedirectAppLinks>
+          <RedirectAppLinks
+            currentAppId="abc123"
+            navigateToUrl={[Function]}
           >
-            <EuiCard
-              css={
-                Object {
-                  "marginInline": "auto",
-                  "maxWidth": 400,
-                }
-              }
-              description="Use Elastic Agent for a simple, unified way to collect data from your machines."
-              footer={
-                <EuiButton
-                  fill={true}
-                >
-                  Add Elastic Agent
-                </EuiButton>
-              }
-              href="/app/integrations/browse"
-              image="test-file-stub"
-              paddingSize="l"
-              title="Add Elastic Agent"
+            <div
+              onClick={[Function]}
             >
-              <EuiPanel
-                css="unknown styles"
-                element="div"
-                hasShadow={true}
-                onClick={[Function]}
-                paddingSize="l"
+              <ElasticAgentCardComponent
+                canAccessFleet={true}
+                href="/app/integrations/browse"
               >
-                <Insertion
-                  cache={
-                    Object {
-                      "insert": [Function],
-                      "inserted": Object {
-                        "1hu4pg0-EuiCard": true,
-                      },
-                      "key": "css",
-                      "nonce": undefined,
-                      "registered": Object {
-                        "css-1hu4pg0-EuiCard": "max-width:400px;margin-inline:auto;;label:EuiCard;",
-                      },
-                      "sheet": StyleSheet {
-                        "_alreadyInsertedOrderInsensitiveRule": true,
-                        "_insertTag": [Function],
-                        "before": null,
-                        "container": <head>
-                          <style
-                            data-emotion="css"
-                            data-s=""
-                          >
-                            
-                            .css-1hu4pg0-EuiCard{max-width:400px;margin-inline:auto;}
-                          </style>
-                          <style
-                            data-styled="active"
-                            data-styled-version="5.1.0"
-                          />
-                        </head>,
-                        "ctr": 1,
-                        "insertionPoint": undefined,
-                        "isSpeedy": false,
-                        "key": "css",
-                        "nonce": undefined,
-                        "prepend": undefined,
-                        "tags": Array [
-                          <style
-                            data-emotion="css"
-                            data-s=""
-                          >
-                            
-                            .css-1hu4pg0-EuiCard{max-width:400px;margin-inline:auto;}
-                          </style>,
-                        ],
-                      },
+                <NoDataCard
+                  description="Use Elastic Agent for a simple, unified way to collect data from your machines."
+                  href="/app/integrations/browse"
+                  image="test-file-stub"
+                  title="Add Elastic Agent"
+                >
+                  <EuiCard
+                    css={
+                      Object {
+                        "marginInline": "auto",
+                        "maxWidth": 400,
+                      }
                     }
-                  }
-                  isStringTag={false}
-                  serialized={
-                    Object {
-                      "map": undefined,
-                      "name": "1hu4pg0-EuiCard",
-                      "next": undefined,
-                      "styles": "max-width:400px;margin-inline:auto;;label:EuiCard;",
-                      "toString": [Function],
+                    description="Use Elastic Agent for a simple, unified way to collect data from your machines."
+                    footer={
+                      <EuiButton
+                        fill={true}
+                      >
+                        Add Elastic Agent
+                      </EuiButton>
                     }
-                  }
-                />
-                <EuiPanel
-                  className="euiCard euiCard--centerAligned euiCard--isClickable css-1hu4pg0-EuiCard"
-                  element="div"
-                  hasShadow={true}
-                  onClick={[Function]}
-                  paddingSize="l"
-                >
-                  <div
-                    className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable css-1hu4pg0-EuiCard"
-                    onClick={[Function]}
+                    href="/app/integrations/browse"
+                    image="test-file-stub"
+                    paddingSize="l"
+                    title="Add Elastic Agent"
                   >
-                    <div
-                      className="euiCard__top"
-                    >
-                      <div
-                        className="euiCard__image"
-                      >
-                        <img
-                          alt=""
-                          src="test-file-stub"
-                        />
-                      </div>
-                    </div>
-                    <div
-                      className="euiCard__content"
+                    <EuiPanel
+                      css="unknown styles"
+                      element="div"
+                      hasShadow={true}
+                      onClick={[Function]}
+                      paddingSize="l"
                     >
-                      <EuiTitle
-                        className="euiCard__title"
-                        id="generated-idTitle"
-                        size="s"
-                      >
-                        <span
-                          className="euiTitle euiTitle--small euiCard__title"
-                          id="generated-idTitle"
-                        >
-                          <a
-                            aria-describedby="generated-idDescription"
-                            className="euiCard__titleAnchor"
-                            href="/app/integrations/browse"
-                            rel="noreferrer"
-                          >
-                            Add Elastic Agent
-                          </a>
-                        </span>
-                      </EuiTitle>
-                      <EuiText
-                        className="euiCard__description"
-                        id="generated-idDescription"
-                        size="s"
+                      <Insertion
+                        cache={
+                          Object {
+                            "insert": [Function],
+                            "inserted": Object {
+                              "1hu4pg0-EuiCard": true,
+                            },
+                            "key": "css",
+                            "nonce": undefined,
+                            "registered": Object {
+                              "css-1hu4pg0-EuiCard": "max-width:400px;margin-inline:auto;;label:EuiCard;",
+                            },
+                            "sheet": StyleSheet {
+                              "_alreadyInsertedOrderInsensitiveRule": true,
+                              "_insertTag": [Function],
+                              "before": null,
+                              "container": <head>
+                                <style
+                                  data-emotion="css"
+                                  data-s=""
+                                >
+                                  
+                                  .css-1hu4pg0-EuiCard{max-width:400px;margin-inline:auto;}
+                                </style>
+                                <style
+                                  data-styled="active"
+                                  data-styled-version="5.1.0"
+                                />
+                              </head>,
+                              "ctr": 1,
+                              "insertionPoint": undefined,
+                              "isSpeedy": false,
+                              "key": "css",
+                              "nonce": undefined,
+                              "prepend": undefined,
+                              "tags": Array [
+                                <style
+                                  data-emotion="css"
+                                  data-s=""
+                                >
+                                  
+                                  .css-1hu4pg0-EuiCard{max-width:400px;margin-inline:auto;}
+                                </style>,
+                              ],
+                            },
+                          }
+                        }
+                        isStringTag={false}
+                        serialized={
+                          Object {
+                            "map": undefined,
+                            "name": "1hu4pg0-EuiCard",
+                            "next": undefined,
+                            "styles": "max-width:400px;margin-inline:auto;;label:EuiCard;",
+                            "toString": [Function],
+                          }
+                        }
+                      />
+                      <EuiPanel
+                        className="euiCard euiCard--centerAligned euiCard--isClickable css-1hu4pg0-EuiCard"
+                        element="div"
+                        hasShadow={true}
+                        onClick={[Function]}
+                        paddingSize="l"
                       >
                         <div
-                          className="euiText euiText--small euiCard__description"
-                          id="generated-idDescription"
+                          className="euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPanel--isClickable euiCard euiCard--centerAligned euiCard--isClickable css-1hu4pg0-EuiCard"
+                          onClick={[Function]}
                         >
-                          <p>
-                            Use Elastic Agent for a simple, unified way to collect data from your machines.
-                          </p>
-                        </div>
-                      </EuiText>
-                    </div>
-                    <div
-                      className="euiCard__footer"
-                    >
-                      <EuiButton
-                        fill={true}
-                      >
-                        <EuiButtonDisplay
-                          baseClassName="euiButton"
-                          disabled={false}
-                          element="button"
-                          fill={true}
-                          isDisabled={false}
-                          type="button"
-                        >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
-                            disabled={false}
-                            style={
-                              Object {
-                                "minWidth": undefined,
-                              }
-                            }
-                            type="button"
+                          <div
+                            className="euiCard__top"
+                          >
+                            <div
+                              className="euiCard__image"
+                            >
+                              <img
+                                alt=""
+                                src="test-file-stub"
+                              />
+                            </div>
+                          </div>
+                          <div
+                            className="euiCard__content"
                           >
-                            <EuiButtonContent
-                              className="euiButton__content"
-                              iconSide="left"
-                              textProps={
-                                Object {
-                                  "className": "euiButton__text",
-                                }
-                              }
+                            <EuiTitle
+                              className="euiCard__title"
+                              id="generated-idTitle"
+                              size="s"
                             >
                               <span
-                                className="euiButtonContent euiButton__content"
+                                className="euiTitle euiTitle--small euiCard__title"
+                                id="generated-idTitle"
                               >
-                                <span
-                                  className="euiButton__text"
+                                <a
+                                  aria-describedby="generated-idDescription"
+                                  className="euiCard__titleAnchor"
+                                  href="/app/integrations/browse"
+                                  rel="noreferrer"
                                 >
                                   Add Elastic Agent
-                                </span>
+                                </a>
                               </span>
-                            </EuiButtonContent>
-                          </button>
-                        </EuiButtonDisplay>
-                      </EuiButton>
-                    </div>
-                  </div>
-                </EuiPanel>
-              </EuiPanel>
-            </EuiCard>
-          </NoDataCard>
-        </div>
-      </RedirectAppLinks>
-    </ElasticAgentCardComponent>
+                            </EuiTitle>
+                            <EuiText
+                              className="euiCard__description"
+                              id="generated-idDescription"
+                              size="s"
+                            >
+                              <div
+                                className="euiText euiText--small euiCard__description"
+                                id="generated-idDescription"
+                              >
+                                <p>
+                                  Use Elastic Agent for a simple, unified way to collect data from your machines.
+                                </p>
+                              </div>
+                            </EuiText>
+                          </div>
+                          <div
+                            className="euiCard__footer"
+                          >
+                            <EuiButton
+                              fill={true}
+                            >
+                              <EuiButtonDisplay
+                                baseClassName="euiButton"
+                                disabled={false}
+                                element="button"
+                                fill={true}
+                                isDisabled={false}
+                                type="button"
+                              >
+                                <button
+                                  className="euiButton euiButton--primary euiButton--fill"
+                                  disabled={false}
+                                  style={
+                                    Object {
+                                      "minWidth": undefined,
+                                    }
+                                  }
+                                  type="button"
+                                >
+                                  <EuiButtonContent
+                                    className="euiButton__content"
+                                    iconSide="left"
+                                    textProps={
+                                      Object {
+                                        "className": "euiButton__text",
+                                      }
+                                    }
+                                  >
+                                    <span
+                                      className="euiButtonContent euiButton__content"
+                                    >
+                                      <span
+                                        className="euiButton__text"
+                                      >
+                                        Add Elastic Agent
+                                      </span>
+                                    </span>
+                                  </EuiButtonContent>
+                                </button>
+                              </EuiButtonDisplay>
+                            </EuiButton>
+                          </div>
+                        </div>
+                      </EuiPanel>
+                    </EuiPanel>
+                  </EuiCard>
+                </NoDataCard>
+              </ElasticAgentCardComponent>
+            </div>
+          </RedirectAppLinks>
+        </RedirectAppLinks>
+      </RedirectAppLinksProvider>
+    </RedirectAppLinks>
   </ElasticAgentCard>
 </SharedUxServicesProvider>
 `;
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.test.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.test.tsx
index f25edb069c6293..367fcd10b96a92 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.test.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.test.tsx
@@ -10,31 +10,15 @@ import { shallow } from 'enzyme';
 import React from 'react';
 import { ElasticAgentCardComponent } from './elastic_agent_card.component';
 import { NoDataCard } from './no_data_card';
-import { Subject } from 'rxjs';
 
 describe('ElasticAgentCardComponent', () => {
-  const navigateToUrl = jest.fn();
-  const currentAppId$ = new Subject<string | undefined>().asObservable();
-
   test('renders', () => {
-    const component = shallow(
-      <ElasticAgentCardComponent
-        canAccessFleet={true}
-        navigateToUrl={navigateToUrl}
-        currentAppId$={currentAppId$}
-      />
-    );
+    const component = shallow(<ElasticAgentCardComponent canAccessFleet={true} />);
     expect(component).toMatchSnapshot();
   });
 
   test('renders with canAccessFleet false', () => {
-    const component = shallow(
-      <ElasticAgentCardComponent
-        canAccessFleet={false}
-        navigateToUrl={navigateToUrl}
-        currentAppId$={currentAppId$}
-      />
-    );
+    const component = shallow(<ElasticAgentCardComponent canAccessFleet={false} />);
     expect(component.find(NoDataCard).props().isDisabled).toBe(true);
     expect(component).toMatchSnapshot();
   });
@@ -42,12 +26,7 @@ describe('ElasticAgentCardComponent', () => {
   describe('props', () => {
     test('button', () => {
       const component = shallow(
-        <ElasticAgentCardComponent
-          button="Button"
-          canAccessFleet={true}
-          navigateToUrl={navigateToUrl}
-          currentAppId$={currentAppId$}
-        />
+        <ElasticAgentCardComponent button="Button" canAccessFleet={true} />
       );
       expect(component.find(NoDataCard).props().button).toBe('Button');
       expect(component).toMatchSnapshot();
@@ -55,12 +34,7 @@ describe('ElasticAgentCardComponent', () => {
 
     test('href', () => {
       const component = shallow(
-        <ElasticAgentCardComponent
-          canAccessFleet={true}
-          href={'some path'}
-          navigateToUrl={navigateToUrl}
-          currentAppId$={currentAppId$}
-        />
+        <ElasticAgentCardComponent canAccessFleet={true} href={'some path'} />
       );
       expect(component.find(NoDataCard).props().href).toBe('some path');
       expect(component).toMatchSnapshot();
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
index 0bca3929f4c2d4..7b046bbe3fe8c2 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.component.tsx
@@ -9,16 +9,12 @@
 import React, { FunctionComponent } from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTextColor } from '@elastic/eui';
-import { Observable } from 'rxjs';
 import { ElasticAgentCardProps } from './types';
 import { NoDataCard } from './no_data_card';
 import ElasticAgentCardIllustration from './assets/elastic_agent_card.svg';
-import { RedirectAppLinks } from '../../../redirect_app_links';
 
 export type ElasticAgentCardComponentProps = ElasticAgentCardProps & {
   canAccessFleet: boolean;
-  navigateToUrl: (url: string) => Promise<void>;
-  currentAppId$: Observable<string | undefined>;
 };
 
 const noPermissionTitle = i18n.translate(
@@ -54,32 +50,19 @@ const elasticAgentCardDescription = i18n.translate(
  */
 export const ElasticAgentCardComponent: FunctionComponent<ElasticAgentCardComponentProps> = ({
   canAccessFleet,
-  title,
-  navigateToUrl,
-  currentAppId$,
+  title = elasticAgentCardTitle,
   ...cardRest
 }) => {
-  const noAccessCard = (
-    <NoDataCard
-      image={ElasticAgentCardIllustration}
-      title={<EuiTextColor color="default">{noPermissionTitle}</EuiTextColor>}
-      description={<EuiTextColor color="default">{noPermissionDescription}</EuiTextColor>}
-      isDisabled
-      {...cardRest}
-    />
-  );
-  const card = (
-    <NoDataCard
-      image={ElasticAgentCardIllustration}
-      title={title || elasticAgentCardTitle}
-      description={elasticAgentCardDescription}
-      {...cardRest}
-    />
-  );
+  const props = canAccessFleet
+    ? {
+        title,
+        description: elasticAgentCardDescription,
+      }
+    : {
+        title: <EuiTextColor color="default">{noPermissionTitle}</EuiTextColor>,
+        description: <EuiTextColor color="default">{noPermissionDescription}</EuiTextColor>,
+        isDisabled: true,
+      };
 
-  return (
-    <RedirectAppLinks navigateToUrl={navigateToUrl} currentAppId$={currentAppId$}>
-      {canAccessFleet ? card : noAccessCard}
-    </RedirectAppLinks>
-  );
+  return <NoDataCard image={ElasticAgentCardIllustration} {...props} {...cardRest} />;
 };
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx
index 77c41cddde6dac..84cbfb1c73a949 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.stories.tsx
@@ -7,29 +7,23 @@
  */
 
 import React from 'react';
-import { applicationServiceFactory } from '@kbn/shared-ux-storybook';
 
 import {
-  ElasticAgentCardComponent,
-  ElasticAgentCardComponentProps,
+  ElasticAgentCardComponent as Component,
+  ElasticAgentCardComponentProps as ComponentProps,
 } from './elastic_agent_card.component';
 
+import { ElasticAgentCard } from './elastic_agent_card';
+
 export default {
   title: 'Page Template/No Data/Elastic Agent Data Card',
   description: 'A solution-specific wrapper around NoDataCard, to be used on NoData page',
 };
 
-type Params = Pick<ElasticAgentCardComponentProps, 'canAccessFleet'>;
+type Params = Pick<ComponentProps, 'canAccessFleet'>;
 
 export const PureComponent = (params: Params) => {
-  const { currentAppId$, navigateToUrl } = applicationServiceFactory();
-  return (
-    <ElasticAgentCardComponent
-      {...params}
-      currentAppId$={currentAppId$}
-      navigateToUrl={navigateToUrl}
-    />
-  );
+  return <Component {...params} />;
 };
 
 PureComponent.argTypes = {
@@ -38,3 +32,7 @@ PureComponent.argTypes = {
     defaultValue: true,
   },
 };
+
+export const ConnectedComponent = () => {
+  return <ElasticAgentCard href="#" />;
+};
diff --git a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.tsx b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
index 42d42dd805650f..3702dd4a456a71 100644
--- a/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
+++ b/packages/kbn-shared-ux-components/src/page_template/no_data_page/no_data_card/elastic_agent_card.tsx
@@ -6,8 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useApplication, useHttp, usePermissions } from '@kbn/shared-ux-services';
+import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
+import useObservable from 'react-use/lib/useObservable';
 
 import { ElasticAgentCardProps } from './types';
 import { ElasticAgentCardComponent } from './elastic_agent_card.component';
@@ -16,27 +18,28 @@ export const ElasticAgentCard = (props: ElasticAgentCardProps) => {
   const { canAccessFleet } = usePermissions();
   const { addBasePath } = useHttp();
   const { navigateToUrl, currentAppId$ } = useApplication();
+  const currentAppId = useObservable(currentAppId$);
 
-  const createHref = () => {
-    const { href, category } = props;
-    if (href) {
-      return href;
+  const { href: srcHref, category } = props;
+
+  const href = useMemo(() => {
+    if (srcHref) {
+      return srcHref;
     }
+
     // TODO: get this URL from a locator
     const prefix = '/app/integrations/browse';
+
     if (category) {
       return addBasePath(`${prefix}/${category}`);
     }
+
     return addBasePath(prefix);
-  };
+  }, [addBasePath, srcHref, category]);
 
   return (
-    <ElasticAgentCardComponent
-      {...props}
-      href={createHref()}
-      canAccessFleet={canAccessFleet}
-      navigateToUrl={navigateToUrl}
-      currentAppId$={currentAppId$}
-    />
+    <RedirectAppLinks {...{ currentAppId, navigateToUrl }}>
+      <ElasticAgentCardComponent {...{ ...props, href, canAccessFleet }} />
+    </RedirectAppLinks>
   );
 };
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.ts b/packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.ts
deleted file mode 100644
index db2990726dc932..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { getClosestLink, hasActiveModifierKey } from '@kbn/shared-ux-utility';
-
-interface CreateCrossAppClickHandlerOptions {
-  navigateToUrl(url: string): Promise<void>;
-  container?: HTMLElement;
-}
-
-export const createNavigateToUrlClickHandler = ({
-  container,
-  navigateToUrl,
-}: CreateCrossAppClickHandlerOptions): React.MouseEventHandler<HTMLElement> => {
-  return (e) => {
-    if (!container) {
-      return;
-    }
-    // see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
-    const target = e.target as HTMLElement;
-
-    const link = getClosestLink(target, container);
-    if (!link) {
-      return;
-    }
-
-    const isNotEmptyHref = link.href;
-    const hasNoTarget = link.target === '' || link.target === '_self';
-    const isLeftClickOnly = e.button === 0;
-
-    if (
-      isNotEmptyHref &&
-      hasNoTarget &&
-      isLeftClickOnly &&
-      !e.defaultPrevented &&
-      !hasActiveModifierKey(e)
-    ) {
-      e.preventDefault();
-      navigateToUrl(link.href);
-    }
-  };
-};
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/index.ts b/packages/kbn-shared-ux-components/src/redirect_app_links/index.ts
deleted file mode 100644
index db7462d7cb1bf0..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/index.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-/* eslint-disable import/no-default-export */
-
-import { RedirectAppLinks } from './redirect_app_links';
-export type { RedirectAppLinksProps } from './redirect_app_links';
-export { RedirectAppLinks } from './redirect_app_links';
-
-/**
- * Exporting the RedirectAppLinks component as a default export so it can be
- * loaded by React.lazy.
- */
-export default RedirectAppLinks;
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.mdx b/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.mdx
deleted file mode 100644
index 0023182940ae97..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
----
-id: sharedUX/Components/AppLink
-slug: /shared-ux/components/redirect-app-link
-title: Redirect App Link
-summary: The component for redirect links.
-tags: ['shared-ux', 'component']
-date: 2022-02-01
----
-
-> This documentation is in progress.
-
-**This component has been refactored.** Instead of requiring the entire `application`, it instead takes just `navigateToUrl` and `currentAppId$`. This makes the component more lightweight.
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.stories.tsx b/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.stories.tsx
deleted file mode 100644
index 0ca0e2a8d99780..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.stories.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { EuiButton } from '@elastic/eui';
-import React from 'react';
-import { BehaviorSubject } from 'rxjs';
-
-import { action } from '@storybook/addon-actions';
-import { RedirectAppLinks } from './redirect_app_links';
-import mdx from './redirect_app_links.mdx';
-
-export default {
-  title: 'Redirect App Links',
-  description: 'app links component that takes in an application id and navigation url.',
-  parameters: {
-    docs: {
-      page: mdx,
-    },
-  },
-};
-
-export const Component = () => {
-  return (
-    <RedirectAppLinks
-      navigateToUrl={() => Promise.resolve()}
-      currentAppId$={new BehaviorSubject('test')}
-    >
-      <EuiButton
-        data-test-subj="storybookButton"
-        fill
-        iconType="plusInCircle"
-        onClick={action('button pressed')}
-      >
-        Test link
-      </EuiButton>
-    </RedirectAppLinks>
-  );
-};
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.test.tsx b/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.test.tsx
deleted file mode 100644
index d36bace70b7c8c..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.test.tsx
+++ /dev/null
@@ -1,249 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, { MouseEvent } from 'react';
-import { mount } from 'enzyme';
-import { BehaviorSubject } from 'rxjs';
-
-import { RedirectAppLinks } from './redirect_app_links';
-
-export type UnmountCallback = () => void;
-export type MountPoint<T extends HTMLElement = HTMLElement> = (element: T) => UnmountCallback;
-
-const createServiceMock = () => {
-  const currentAppId$ = new BehaviorSubject<string>('currentApp');
-
-  return {
-    currentAppId$: currentAppId$.asObservable(),
-    navigateToApp: jest.fn(),
-    navigateToUrl: jest.fn(),
-  };
-};
-
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-
-describe('RedirectAppLinks', () => {
-  let application = createServiceMock();
-
-  beforeEach(() => {
-    application = createServiceMock();
-  });
-
-  it('intercept click events on children link elements', () => {
-    let event: MouseEvent;
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks
-          navigateToUrl={application.navigateToUrl}
-          currentAppId$={application.currentAppId$}
-        >
-          <div>
-            <a href="/mocked-anyway">content</a>
-          </div>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('a').simulate('click', { button: 0, defaultPrevented: false });
-    expect(application.navigateToUrl).toHaveBeenCalledTimes(1);
-    expect(event!.defaultPrevented).toBe(true);
-  });
-
-  it('intercept click events on children inside link elements', async () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks
-          navigateToUrl={application.navigateToUrl}
-          currentAppId$={application.currentAppId$}
-        >
-          <div>
-            <a href="/mocked-anyway">
-              <span>content</span>
-            </a>
-          </div>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('span').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToUrl).toHaveBeenCalledTimes(1);
-    expect(event!.defaultPrevented).toBe(true);
-  });
-
-  it('does not intercept click events when the target is not inside a link', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <span>
-            <a href="/mocked-anyway">content</a>
-          </span>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('span').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(false);
-  });
-
-  it('does not intercept click events when the link is a parent of the container', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <a href="/mocked-anyway">
-          <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-            <span>content</span>
-          </RedirectAppLinks>
-        </a>
-      </div>
-    );
-
-    component.find('span').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(false);
-  });
-
-  it('does not intercept click events when the link has an external target', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <a href="/mocked-anyway" target="_blank">
-            content
-          </a>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('a').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(false);
-  });
-
-  it('does not intercept click events when the event is already defaultPrevented', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <a href="/mocked-anyway" target="_blank">
-            <span onClick={(e) => e.preventDefault()}>content</span>
-          </a>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('span').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(true);
-  });
-
-  it('does not intercept click events when the event propagation is stopped', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <a href="/mocked-anyway" target="_blank" onClick={(e) => e.stopPropagation()}>
-            content
-          </a>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('a').simulate('click', { button: 0, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!).toBe(undefined);
-  });
-
-  it('does not intercept click events when the event is not triggered from the left button', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <div>
-            <a href="/mocked-anyway">content</a>
-          </div>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('a').simulate('click', { button: 1, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(false);
-  });
-
-  it('does not intercept click events when the event has a modifier key enabled', () => {
-    let event: MouseEvent;
-
-    const component = mount(
-      <div
-        onClick={(e) => {
-          event = e;
-        }}
-      >
-        <RedirectAppLinks navigateToUrl={jest.fn()} currentAppId$={application.currentAppId$}>
-          <div>
-            <a href="/mocked-anyway">content</a>
-          </div>
-        </RedirectAppLinks>
-      </div>
-    );
-
-    component.find('a').simulate('click', { button: 0, ctrlKey: true, defaultPrevented: false });
-
-    expect(application.navigateToApp).not.toHaveBeenCalled();
-    expect(event!.defaultPrevented).toBe(false);
-  });
-});
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.tsx b/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.tsx
deleted file mode 100644
index e1d0bd4bed653e..00000000000000
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/redirect_app_links.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, { useRef, useMemo } from 'react';
-import type { HTMLAttributes, DetailedHTMLProps, FC } from 'react';
-import useObservable from 'react-use/lib/useObservable';
-import { Observable } from 'rxjs';
-
-import { createNavigateToUrlClickHandler } from './click_handler';
-
-type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-/**
- * TODO: this interface recreates props from the `ApplicationStart` interface.
- * see: https://github.com/elastic/kibana/issues/127695
- */
-export interface RedirectAppLinksProps extends DivProps {
-  currentAppId$: Observable<string | undefined>;
-  navigateToUrl(url: string): Promise<void>;
-}
-
-/**
- * Utility component that will intercept click events on children anchor (`<a>`) elements to call
- * `application.navigateToUrl` with the link's href. This will trigger SPA friendly navigation
- * when the link points to a valid Kibana app.
- *
- * @example
- * ```tsx
- * <RedirectAppLinks navigateToUrl={() => url} currentAppId$={observableAppId}>
- *   <a href="/base-path/app/another-app/some-path">Go to another-app</a>
- * </RedirectAppLinks>
- * ```
- *
- * @remarks
- * It is recommended to use the component at the highest possible level of the component tree that would
- * require to handle the links. A good practice is to consider it as a context provider and to use it
- * at the root level of an application or of the page that require the feature.
- */
-export const RedirectAppLinks: FC<RedirectAppLinksProps> = ({
-  navigateToUrl,
-  currentAppId$,
-  children,
-  ...otherProps
-}) => {
-  const currentAppId = useObservable(currentAppId$, undefined);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const clickHandler = useMemo(
-    () =>
-      containerRef.current && currentAppId
-        ? createNavigateToUrlClickHandler({
-            container: containerRef.current,
-            navigateToUrl,
-          })
-        : undefined,
-    [currentAppId, navigateToUrl]
-  );
-
-  return (
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    <div ref={containerRef} {...otherProps} onClick={clickHandler}>
-      {children}
-    </div>
-  );
-};
diff --git a/packages/kbn-shared-ux-components/src/toolbar/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap b/packages/kbn-shared-ux-components/src/toolbar/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap
index c3b7dc63bce947..8091bd222d1a32 100644
--- a/packages/kbn-shared-ux-components/src/toolbar/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/toolbar/buttons/icon_button_group/__snapshots__/icon_button_group.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`<IconButtonGroup /> is rendered 1`] = `
 <SharedUxServicesProvider
   application={
     Object {
-      "currentAppId$": Observable {},
+      "currentAppId$": Observable {
+        "_subscribe": [Function],
+      },
       "navigateToUrl": [Function],
     }
   }
diff --git a/packages/kbn-shared-ux-components/src/toolbar/buttons/primary/__snapshots__/primary.test.tsx.snap b/packages/kbn-shared-ux-components/src/toolbar/buttons/primary/__snapshots__/primary.test.tsx.snap
index 9dc8913562d2bb..fbe628e30314ca 100644
--- a/packages/kbn-shared-ux-components/src/toolbar/buttons/primary/__snapshots__/primary.test.tsx.snap
+++ b/packages/kbn-shared-ux-components/src/toolbar/buttons/primary/__snapshots__/primary.test.tsx.snap
@@ -4,7 +4,9 @@ exports[`<ToolbarButton /> is rendered 1`] = `
 <SharedUxServicesProvider
   application={
     Object {
-      "currentAppId$": Observable {},
+      "currentAppId$": Observable {
+        "_subscribe": [Function],
+      },
       "navigateToUrl": [Function],
     }
   }
diff --git a/packages/kbn-shared-ux-services/src/services/mock/application.mock.ts b/packages/kbn-shared-ux-services/src/services/mock/application.mock.ts
index abb68a1edb642b..947113c4a31686 100644
--- a/packages/kbn-shared-ux-services/src/services/mock/application.mock.ts
+++ b/packages/kbn-shared-ux-services/src/services/mock/application.mock.ts
@@ -17,5 +17,7 @@ export type MockApplicationServiceFactory = ServiceFactory<SharedUxApplicationSe
  */
 export const applicationServiceFactory: MockApplicationServiceFactory = () => ({
   navigateToUrl: () => Promise.resolve(),
-  currentAppId$: new Observable(),
+  currentAppId$: new Observable((subscriber) => {
+    subscriber.next('abc123');
+  }),
 });
diff --git a/packages/kbn-shared-ux-storybook/src/services/application.ts b/packages/kbn-shared-ux-storybook/src/services/application.ts
index 2a544445fc474c..1b16526bc8be85 100644
--- a/packages/kbn-shared-ux-storybook/src/services/application.ts
+++ b/packages/kbn-shared-ux-storybook/src/services/application.ts
@@ -16,8 +16,8 @@ export type ApplicationServiceFactory = ServiceFactory<SharedUxApplicationServic
  * A factory function for creating for creating a storybook implementation of `SharedUXApplicationService`.
  */
 export const applicationServiceFactory: ApplicationServiceFactory = () => ({
-  navigateToUrl: () => {
-    action('NavigateToUrl');
+  navigateToUrl: (url) => {
+    action('navigateToUrl')(url);
     return Promise.resolve();
   },
   currentAppId$: new BehaviorSubject('123'),
diff --git a/packages/shared-ux/link/redirect_app/BUILD.bazel b/packages/shared-ux/link/redirect_app/BUILD.bazel
new file mode 100644
index 00000000000000..861b9aa277db9f
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/BUILD.bazel
@@ -0,0 +1,140 @@
+load("@npm//@bazel/typescript:index.bzl", "ts_config")
+load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
+load("//src/dev/bazel:index.bzl", "jsts_transpiler", "pkg_npm", "pkg_npm_types", "ts_project")
+
+PKG_DIRNAME = "redirect_app"
+PKG_REQUIRE_NAME = "@kbn/shared-ux-link-redirect-app"
+
+SOURCE_FILES = glob(
+  [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.mdx",
+  ],
+  exclude = [
+    "**/*.test.*",
+  ],
+)
+
+SRCS = SOURCE_FILES
+
+filegroup(
+  name = "srcs",
+  srcs = SRCS,
+)
+
+NPM_MODULE_EXTRA_FILES = [
+  "package.json",
+]
+
+# In this array place runtime dependencies, including other packages and NPM packages
+# which must be available for this code to run.
+#
+#  To reference other packages use:
+#    "//repo/relative/path/to/package"
+#    eg. "//packages/kbn-utils"
+#
+#  To reference a NPM package use:
+#    "@npm//name-of-package"
+#    eg. "@npm//lodash"
+RUNTIME_DEPS = [
+  "@npm//@elastic/eui",
+  "@npm//@storybook/addon-actions",
+  "@npm//react-use",
+  "@npm//react",
+  "@npm//rxjs",
+  "//packages/kbn-shared-ux-utility",
+]
+
+# In this array place dependencies necessary to build the types, which will include the
+# :npm_module_types target of other packages and packages from NPM, including @types/*
+# packages.
+#
+#  To reference the types for another package use:
+#    "//repo/relative/path/to/package:npm_module_types"
+#    eg. "//packages/kbn-utils:npm_module_types"
+#
+#  References to NPM packages work the same as RUNTIME_DEPS
+TYPES_DEPS = [
+  "@npm//@elastic/eui",
+  "@npm//@storybook/addon-actions",
+  "@npm//@types/jest",
+  "@npm//@types/node",
+  "@npm//@types/react",
+  "@npm//rxjs",
+  "@npm//react-use",
+  "//packages/kbn-ambient-ui-types",
+  "//packages/kbn-shared-ux-utility:npm_module_types",
+]
+
+jsts_transpiler(
+  name = "target_node",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+)
+
+jsts_transpiler(
+  name = "target_web",
+  srcs = SRCS,
+  build_pkg_name = package_name(),
+  web = True,
+  additional_args = [
+    "--copy-files",
+    "--quiet"
+  ],
+)
+
+ts_config(
+  name = "tsconfig",
+  src = "tsconfig.json",
+  deps = [
+    "//:tsconfig.base.json",
+    "//:tsconfig.bazel.json",
+  ],
+)
+
+ts_project(
+  name = "tsc_types",
+  args = ['--pretty'],
+  srcs = SRCS,
+  deps = TYPES_DEPS,
+  declaration = True,
+  emit_declaration_only = True,
+  out_dir = "target_types",
+  root_dir = "src",
+  tsconfig = ":tsconfig",
+)
+
+js_library(
+  name = PKG_DIRNAME,
+  srcs = NPM_MODULE_EXTRA_FILES,
+  deps = RUNTIME_DEPS + [":target_node", ":target_web"],
+  package_name = PKG_REQUIRE_NAME,
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm(
+  name = "npm_module",
+  deps = [":" + PKG_DIRNAME],
+)
+
+filegroup(
+  name = "build",
+  srcs = [":npm_module"],
+  visibility = ["//visibility:public"],
+)
+
+pkg_npm_types(
+  name = "npm_module_types",
+  srcs = SRCS,
+  deps = [":tsc_types"],
+  package_name = PKG_REQUIRE_NAME,
+  tsconfig = ":tsconfig",
+  visibility = ["//visibility:public"],
+)
+
+filegroup(
+  name = "build_types",
+  srcs = [":npm_module_types"],
+  visibility = ["//visibility:public"],
+)
diff --git a/packages/shared-ux/link/redirect_app/README.mdx b/packages/shared-ux/link/redirect_app/README.mdx
new file mode 100644
index 00000000000000..8e2eada760ea2a
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/README.mdx
@@ -0,0 +1,86 @@
+---
+id: sharedUX/Components/AppLink
+slug: /shared-ux/components/redirect-app-links
+title: Redirect App Links
+summary: A component for redirecting links contained within it to the appropriate Kibana solution without a page refresh.
+tags: ['shared-ux', 'component']
+date: 2022-05-04
+---
+
+## Description
+
+This component is an "area of effect" component, which produces a container that intercepts actions for specific elements within it.  In this case, the container intercepts clicks on anchor elements and redirects them to Kibana solutions without a page refresh.
+
+## Pure Component
+
+The pure component allows you create a container to intercept clicks without contextual services, (e.g. Kibana Core).  This likely does not have much utility for solutions in Kibana, but rather is useful for shared components where we want to ensure clicks are redirected correctly.
+
+```tsx
+import { RedirectAppLinksComponent as RedirectAppLinks } from '@kbn/shared-ux-links-redirect-app';
+
+<RedirectAppLinks currentAppId="appId" navigateToUrl={(url) => { ... }}>
+  <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+</RedirectAppLinks>
+```
+
+## Connected Component
+
+The connected component uses a React Context to access services that provide the current app id and a function to navigate to a new url.  This is useful in that a solution can wrap their entire application in the context and use `RedirectAppLinks` in specific areas.
+
+```tsx
+import { RedirectAppLinksContainer as RedirectAppLinks, RedirectAppLinksProvider } from '@kbn/shared-ux-links-redirect-app';
+
+<RedirectAppLinksProvider currentAppId="appId" navigateToUrl={(url) => { ... }}>
+  .
+  {/* other components that don't need to redirect */}
+  .
+  <RedirectAppLinks>
+    <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+  </RedirectAppLinks>
+  .
+  .
+  .
+</RedirectAppLinksProvider>
+```
+
+You can also use the Kibana provider:
+
+```tsx
+import { 
+  RedirectAppLinksContainer as RedirectAppLinks, 
+  RedirectAppLinksKibanaProvider as RedirectAppLinksProvider 
+} from '@kbn/shared-ux-links-redirect-app';
+
+<RedirectAppLinksProvider {...coreStart}>
+  .
+  {/* other components that don't need to redirect */}
+  .
+  <RedirectAppLinks>
+    <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+  </RedirectAppLinks>
+  .
+  .
+</RedirectAppLinksProvider>
+```
+
+## Top-level Component
+
+This is the component is likely the most useful to solutions in Kibana.  It assumes an entire solution needs this redirect functionality, and combines the context provider with the container.  This top-level component can be used with either pure props or with Kibana services.
+
+```tsx
+import { RedirectAppLinks } from '@kbn/shared-ux-links-redirect-app';
+
+<RedirectAppLinksProvider currentAppId="appId" navigateToUrl={(url) => { ... }}>
+  .
+  <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+  .
+</RedirectAppLinksProvider>
+
+{/* OR */}
+
+<RedirectAppLinksProvider {...coreStart}>
+  .
+  <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+  .
+</RedirectAppLinksProvider>
+```
\ No newline at end of file
diff --git a/packages/shared-ux/link/redirect_app/jest.config.js b/packages/shared-ux/link/redirect_app/jest.config.js
new file mode 100644
index 00000000000000..5f564a9709d0cf
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/jest.config.js
@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../..',
+  roots: ['<rootDir>/packages/shared-ux/link/redirect_app'],
+  verbose: true,
+};
diff --git a/packages/shared-ux/link/redirect_app/package.json b/packages/shared-ux/link/redirect_app/package.json
new file mode 100644
index 00000000000000..6deb187dcec2a9
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/package.json
@@ -0,0 +1,8 @@
+{
+  "name": "@kbn/shared-ux-link-redirect-app",
+  "private": true,
+  "version": "1.0.0",
+  "main": "./target_node/index.js",
+  "browser": "./target_web/index.js",
+  "license": "SSPL-1.0 OR Elastic License 2.0"
+}
diff --git a/packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.test.ts b/packages/shared-ux/link/redirect_app/src/click_handler.test.ts
similarity index 84%
rename from packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.test.ts
rename to packages/shared-ux/link/redirect_app/src/click_handler.test.ts
index dd26443eed171d..c46b93bb67aafd 100644
--- a/packages/kbn-shared-ux-components/src/redirect_app_links/click_handler.test.ts
+++ b/packages/shared-ux/link/redirect_app/src/click_handler.test.ts
@@ -7,7 +7,7 @@
  */
 
 import { MouseEvent } from 'react';
-import { createNavigateToUrlClickHandler } from './click_handler';
+import { navigateToUrlClickHandler } from './click_handler';
 
 const createLink = ({
   href = '/base-path/app/targetApp',
@@ -43,27 +43,59 @@ const createEvent = ({
 
 type NavigateToURLFn = (url: string) => Promise<void>;
 
-describe('createNavigateToUrlClickHandler', () => {
+describe('navigateToUrlClickHandler', () => {
   let container: HTMLElement;
   let navigateToUrl: jest.MockedFunction<NavigateToURLFn>;
+  const currentAppId = 'abc123';
 
-  const createHandler = () =>
-    createNavigateToUrlClickHandler({
+  const handler = (event: MouseEvent<HTMLElement>): void => {
+    navigateToUrlClickHandler({
+      event,
+      currentAppId,
       container,
       navigateToUrl,
     });
+  };
 
   beforeEach(() => {
     container = document.createElement('div');
     navigateToUrl = jest.fn();
   });
 
-  it('calls `navigateToUrl` with the link url', () => {
-    const handler = createHandler();
+  it("doesn't call `navigateToUrl` without a container", () => {
+    const event = createEvent({
+      target: createLink({ href: '/base-path/app/targetApp' }),
+    });
 
+    navigateToUrlClickHandler({
+      event,
+      currentAppId,
+      container: null,
+      navigateToUrl,
+    });
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(0);
+  });
+
+  it("doesn't call `navigateToUrl` without a `currentAppId`", () => {
     const event = createEvent({
       target: createLink({ href: '/base-path/app/targetApp' }),
     });
+
+    navigateToUrlClickHandler({
+      event,
+      container,
+      navigateToUrl,
+    });
+
+    expect(event.preventDefault).toHaveBeenCalledTimes(0);
+  });
+
+  it('calls `navigateToUrl` with the link url', () => {
+    const event = createEvent({
+      target: createLink({ href: '/base-path/app/targetApp' }),
+    });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -71,13 +103,12 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is triggered if a non-link target has a parent link', () => {
-    const handler = createHandler();
-
     const link = createLink();
     const target = document.createElement('span');
     link.appendChild(target);
 
     const event = createEvent({ target });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -85,13 +116,12 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is not triggered if a non-link target has no parent link', () => {
-    const handler = createHandler();
-
     const parent = document.createElement('div');
     const target = document.createElement('span');
     parent.appendChild(target);
 
     const event = createEvent({ target });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -99,11 +129,10 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is not triggered when the link has no href', () => {
-    const handler = createHandler();
-
     const event = createEvent({
       target: createLink({ href: '' }),
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -111,11 +140,10 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is only triggered when the link does not have an external target', () => {
-    const handler = createHandler();
-
     let event = createEvent({
       target: createLink({ target: '_blank' }),
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -124,6 +152,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       target: createLink({ target: 'some-target' }),
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -132,6 +161,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       target: createLink({ target: '_self' }),
     });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -140,6 +170,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       target: createLink({ target: '' }),
     });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -147,11 +178,10 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is only triggered from left clicks', () => {
-    const handler = createHandler();
-
     let event = createEvent({
       button: 1,
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -160,6 +190,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       button: 12,
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -168,6 +199,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       button: 0,
     });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -175,11 +207,10 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is not triggered if the event default is prevented', () => {
-    const handler = createHandler();
-
     let event = createEvent({
       defaultPrevented: true,
     });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
@@ -188,6 +219,7 @@ describe('createNavigateToUrlClickHandler', () => {
     event = createEvent({
       defaultPrevented: false,
     });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
@@ -195,15 +227,15 @@ describe('createNavigateToUrlClickHandler', () => {
   });
 
   it('is not triggered if any modifier key is pressed', () => {
-    const handler = createHandler();
-
     let event = createEvent({ modifierKey: true });
+
     handler(event);
 
     expect(event.preventDefault).not.toHaveBeenCalled();
     expect(navigateToUrl).not.toHaveBeenCalled();
 
     event = createEvent({ modifierKey: false });
+
     handler(event);
 
     expect(event.preventDefault).toHaveBeenCalledTimes(1);
diff --git a/packages/shared-ux/link/redirect_app/src/click_handler.ts b/packages/shared-ux/link/redirect_app/src/click_handler.ts
new file mode 100644
index 00000000000000..8c94aa0033f2b0
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/click_handler.ts
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { MouseEvent } from 'react';
+import { getClosestLink, hasActiveModifierKey } from '@kbn/shared-ux-utility';
+import { NavigateToUrl } from './types';
+
+interface CreateCrossAppClickHandlerOptions {
+  event: MouseEvent<HTMLElement>;
+  navigateToUrl: NavigateToUrl;
+  container: HTMLElement | null;
+  currentAppId?: string;
+}
+
+/**
+ * Constructs a click handler that will redirect the user using `navigateToUrl` if the
+ * correct conditions are met.
+ */
+export const navigateToUrlClickHandler = ({
+  event,
+  container,
+  navigateToUrl,
+  currentAppId,
+}: CreateCrossAppClickHandlerOptions) => {
+  if (!container || !currentAppId) {
+    return;
+  }
+
+  // see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+  const target = event.target as HTMLElement;
+
+  const link = getClosestLink(target, container);
+
+  if (!link) {
+    return;
+  }
+
+  const isNotEmptyHref = link.href;
+  const hasNoTarget = link.target === '' || link.target === '_self';
+  const isLeftClickOnly = event.button === 0;
+
+  if (
+    isNotEmptyHref &&
+    hasNoTarget &&
+    isLeftClickOnly &&
+    !event.defaultPrevented &&
+    !hasActiveModifierKey(event)
+  ) {
+    event.preventDefault();
+    navigateToUrl(link.href);
+  }
+};
diff --git a/packages/shared-ux/link/redirect_app/src/index.tsx b/packages/shared-ux/link/redirect_app/src/index.tsx
new file mode 100644
index 00000000000000..5efb99cc486649
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { RedirectAppLinks as RedirectAppLinksContainer } from './redirect_app_links';
+export { RedirectAppLinks as RedirectAppLinksComponent } from './redirect_app_links';
+export { RedirectAppLinksKibanaProvider, RedirectAppLinksProvider } from './services';
+
+import React, { FC } from 'react';
+import { RedirectAppLinks as RedirectAppLinksContainer } from './redirect_app_links';
+import {
+  Services,
+  KibanaServices,
+  RedirectAppLinksKibanaProvider,
+  RedirectAppLinksProvider,
+} from './services';
+
+const isKibanaContract = (services: any): services is KibanaServices => {
+  return typeof services.coreStart !== 'undefined';
+};
+
+/**
+ * This component composes `RedirectAppLinksContainer` with either `RedirectAppLinksProvider` or
+ * `RedirectAppLinksKibanaProvider` based on the services provided, creating a single component
+ * with which consumers can wrap their components or solutions.
+ */
+export const RedirectAppLinks: FC<Services | KibanaServices> = ({ children, ...services }) => {
+  const container = <RedirectAppLinksContainer>{children}</RedirectAppLinksContainer>;
+
+  return isKibanaContract(services) ? (
+    <RedirectAppLinksKibanaProvider {...services}>{container}</RedirectAppLinksKibanaProvider>
+  ) : (
+    <RedirectAppLinksProvider {...services}>{container}</RedirectAppLinksProvider>
+  );
+};
diff --git a/packages/shared-ux/link/redirect_app/src/redirect_app_links.component.tsx b/packages/shared-ux/link/redirect_app/src/redirect_app_links.component.tsx
new file mode 100644
index 00000000000000..477471fe71824c
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/redirect_app_links.component.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useRef, MouseEventHandler, useCallback } from 'react';
+import type { HTMLAttributes, DetailedHTMLProps, FC } from 'react';
+
+import { navigateToUrlClickHandler } from './click_handler';
+import { NavigateToUrl } from './types';
+
+export interface Props extends DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+  navigateToUrl: NavigateToUrl;
+  currentAppId?: string | undefined;
+}
+
+/**
+ * Utility component that will intercept click events on children anchor (`<a>`) elements to call
+ * `navigateToUrl` with the link's href. This will trigger SPA friendly navigation when the link points
+ * to a valid Kibana app.
+ *
+ * @example
+ * ```tsx
+ * <RedirectAppLinks currentAppId="appId" navigateToUrl={(url) => { ... }}>
+ *   <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+ * </RedirectAppLinks>
+ * ```
+ */
+export const RedirectAppLinks: FC<Props> = ({
+  children,
+  navigateToUrl,
+  currentAppId,
+  ...otherProps
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const handleClick: MouseEventHandler<HTMLDivElement> = useCallback(
+    (event) =>
+      navigateToUrlClickHandler({
+        event,
+        currentAppId,
+        navigateToUrl,
+        container: containerRef.current,
+      }),
+    [currentAppId, navigateToUrl]
+  );
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    <div {...otherProps} ref={containerRef} onClick={handleClick}>
+      {children}
+    </div>
+  );
+};
diff --git a/packages/shared-ux/link/redirect_app/src/redirect_app_links.stories.tsx b/packages/shared-ux/link/redirect_app/src/redirect_app_links.stories.tsx
new file mode 100644
index 00000000000000..9bb3d0d9782d49
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/redirect_app_links.stories.tsx
@@ -0,0 +1,71 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiButton, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import React from 'react';
+
+import { action } from '@storybook/addon-actions';
+import { RedirectAppLinks } from '.';
+import mdx from '../README.mdx';
+
+export default {
+  title: 'Redirect App Links',
+  description:
+    'An "area of effect" component which intercepts clicks on anchor elements and redirects them to Kibana solutions without a page refresh.',
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Component = () => {
+  const navigateToUrl = async (url: string) => {
+    action('navigateToUrl')(url);
+  };
+
+  const currentAppId = 'abc123';
+
+  return (
+    <>
+      <RedirectAppLinks {...{ currentAppId, navigateToUrl }}>
+        <EuiFlexGroup>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="storybookButton"
+              iconType="plusInCircle"
+              href="/some-test-url"
+            >
+              Button with URL
+            </EuiButton>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiButton
+              data-test-subj="storybookButton"
+              iconType="plusInCircle"
+              onClick={action('onClick')}
+            >
+              Button without URL
+            </EuiButton>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </RedirectAppLinks>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            data-test-subj="storybookButton"
+            iconType="plusInCircle"
+            href="/?path=/story/redirect-app-links--component"
+          >
+            Button outside RedirectAppLinks
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </>
+  );
+};
diff --git a/packages/shared-ux/link/redirect_app/src/redirect_app_links.test.tsx b/packages/shared-ux/link/redirect_app/src/redirect_app_links.test.tsx
new file mode 100644
index 00000000000000..1bb3875aec7aed
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/redirect_app_links.test.tsx
@@ -0,0 +1,292 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+import React, { MouseEvent } from 'react';
+import { mount as enzymeMount, ReactWrapper } from 'enzyme';
+
+import { RedirectAppLinksKibanaProvider, RedirectAppLinksProvider } from './services';
+import { RedirectAppLinks } from './redirect_app_links';
+import { RedirectAppLinks as ComposedWrapper } from '.';
+import { Observable } from 'rxjs';
+
+export type UnmountCallback = () => void;
+export type MountPoint<T extends HTMLElement = HTMLElement> = (element: T) => UnmountCallback;
+type Mount = (
+  node: React.ReactElement
+) => ReactWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+const commonTests = (name: string, mount: Mount, navigateToUrl: jest.Mock) => {
+  beforeEach(() => {
+    navigateToUrl.mockReset();
+  });
+
+  describe(`RedirectAppLinks with ${name}`, () => {
+    it('intercept click events on children link elements', () => {
+      let event: MouseEvent;
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <div>
+              <a href="/mocked-anyway">content</a>
+            </div>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('a').simulate('click', { button: 0, defaultPrevented: false });
+      expect(navigateToUrl).toHaveBeenCalledTimes(1);
+      expect(event!.defaultPrevented).toBe(true);
+    });
+
+    it('intercept click events on children inside link elements', async () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <div>
+              <a href="/mocked-anyway">
+                <span>content</span>
+              </a>
+            </div>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('span').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).toHaveBeenCalledTimes(1);
+      expect(event!.defaultPrevented).toBe(true);
+    });
+
+    it('does not intercept click events when the target is not inside a link', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <span>
+              <a href="/mocked-anyway">content</a>
+            </span>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('span').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(false);
+    });
+
+    it('does not intercept click events when the link has an external target', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <a href="/mocked-anyway" target="_blank">
+              content
+            </a>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('a').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(false);
+    });
+
+    it('does not intercept click events when the event is already defaultPrevented', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <a href="/mocked-anyway" target="_blank">
+              <span onClick={(e) => e.preventDefault()}>content</span>
+            </a>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('span').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(true);
+    });
+
+    it('does not intercept click events when the event propagation is stopped', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <a href="/mocked-anyway" target="_blank" onClick={(e) => e.stopPropagation()}>
+              content
+            </a>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('a').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!).toBe(undefined);
+    });
+
+    it('does not intercept click events when the event is not triggered from the left button', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <div>
+              <a href="/mocked-anyway">content</a>
+            </div>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('a').simulate('click', { button: 1, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(false);
+    });
+
+    it('does not intercept click events when the event has a modifier key enabled', () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <RedirectAppLinks>
+            <div>
+              <a href="/mocked-anyway">content</a>
+            </div>
+          </RedirectAppLinks>
+        </div>
+      );
+
+      component.find('a').simulate('click', { button: 0, ctrlKey: true, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(false);
+    });
+  });
+};
+
+const targetedTests = (name: string, mount: Mount, navigateToUrl: jest.Mock) => {
+  beforeEach(() => {
+    navigateToUrl.mockReset();
+  });
+
+  describe(`${name} with isolated areas of effect`, () => {
+    it(`does not intercept click events when the link is a parent of the container`, () => {
+      let event: MouseEvent;
+
+      const component = mount(
+        <div
+          onClick={(e) => {
+            event = e;
+          }}
+        >
+          <a href="/mocked-anyway">
+            <RedirectAppLinks>
+              <span>content</span>
+            </RedirectAppLinks>
+          </a>
+        </div>
+      );
+
+      component.find('span').simulate('click', { button: 0, defaultPrevented: false });
+
+      expect(navigateToUrl).not.toHaveBeenCalled();
+      expect(event!.defaultPrevented).toBe(false);
+    });
+  });
+};
+
+describe('RedirectAppLinks', () => {
+  const navigateToUrl = jest.fn();
+
+  beforeEach(() => {
+    navigateToUrl.mockReset();
+  });
+
+  const kibana = {
+    coreStart: {
+      application: {
+        currentAppId$: new Observable<string>((subscriber) => {
+          subscriber.next('123');
+        }),
+        navigateToUrl,
+      },
+    },
+  };
+
+  const services = {
+    currentAppId: 'abc123',
+    navigateToUrl,
+  };
+
+  const provider = (node: React.ReactElement) =>
+    enzymeMount(<RedirectAppLinksProvider {...services}>{node}</RedirectAppLinksProvider>);
+
+  const kibanaProvider = (node: React.ReactElement) =>
+    enzymeMount(
+      <RedirectAppLinksKibanaProvider {...kibana}>{node}</RedirectAppLinksKibanaProvider>
+    );
+
+  const composedProvider = (node: React.ReactElement) =>
+    enzymeMount(<ComposedWrapper {...services}>{node}</ComposedWrapper>);
+
+  const composedKibanaProvider = (node: React.ReactElement) =>
+    enzymeMount(<ComposedWrapper {...kibana}>{node}</ComposedWrapper>);
+
+  describe('Test all Providers', () => {
+    commonTests('RedirectAppLinksProvider', provider, navigateToUrl);
+    targetedTests('RedirectAppLinksProvider', provider, navigateToUrl);
+    commonTests('RedirectAppLinksKibanaProvider', kibanaProvider, navigateToUrl);
+    targetedTests('RedirectAppLinksKibanaProvider', kibanaProvider, navigateToUrl);
+    commonTests('Provider Props', composedProvider, navigateToUrl);
+    commonTests('Kibana Props', composedKibanaProvider, navigateToUrl);
+  });
+});
diff --git a/packages/shared-ux/link/redirect_app/src/redirect_app_links.tsx b/packages/shared-ux/link/redirect_app/src/redirect_app_links.tsx
new file mode 100644
index 00000000000000..1e805ad4475b60
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/redirect_app_links.tsx
@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { useServices } from './services';
+import {
+  RedirectAppLinks as Component,
+  Props as ComponentProps,
+} from './redirect_app_links.component';
+
+type Props = Omit<ComponentProps, 'navigateToUrl' | 'currentAppId'>;
+
+/**
+ * A service-enabled component that provides Kibana-specific functionality to the `RedirectAppLinks`
+ * pure component.
+ *
+ * @example
+ * ```tsx
+ * <RedirectAppLinks>
+ *   <a href="/base-path/app/another-app/some-path">Go to another-app</a>
+ * </RedirectAppLinks>
+ * ```
+ */
+export const RedirectAppLinks = (props: Props) => <Component {...useServices()} {...props} />;
diff --git a/packages/shared-ux/link/redirect_app/src/services.tsx b/packages/shared-ux/link/redirect_app/src/services.tsx
new file mode 100644
index 00000000000000..22bc5a5cd0c55e
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/services.tsx
@@ -0,0 +1,79 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FC, useContext } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { Observable } from 'rxjs';
+import { NavigateToUrl } from './types';
+
+/**
+ * Contextual services for this component.
+ */
+export interface Services {
+  navigateToUrl: NavigateToUrl;
+  currentAppId?: string;
+}
+
+const RedirectAppLinksContext = React.createContext<Services | null>(null);
+
+/**
+ * Contextual services Provider.
+ */
+export const RedirectAppLinksProvider: FC<Services> = ({ children, ...services }) => {
+  return (
+    <RedirectAppLinksContext.Provider value={{ ...services }}>
+      {children}
+    </RedirectAppLinksContext.Provider>
+  );
+};
+
+/**
+ * Kibana-specific contextual services to be adapted for this component.
+ */
+export interface KibanaServices {
+  coreStart: {
+    application: {
+      currentAppId$: Observable<string | undefined>;
+      navigateToUrl: NavigateToUrl;
+    };
+  };
+}
+
+/**
+ * Kibana-specific contextual services Provider.
+ */
+export const RedirectAppLinksKibanaProvider: FC<KibanaServices> = ({ children, coreStart }) => {
+  const { navigateToUrl, currentAppId$ } = coreStart.application;
+  const currentAppId = useObservable(currentAppId$, undefined);
+
+  return (
+    <RedirectAppLinksContext.Provider
+      value={{
+        navigateToUrl,
+        currentAppId,
+      }}
+    >
+      {children}
+    </RedirectAppLinksContext.Provider>
+  );
+};
+
+/**
+ * React hook for accessing pre-wired services.
+ */
+export function useServices() {
+  const context = useContext(RedirectAppLinksContext);
+
+  if (!context) {
+    throw new Error(
+      'RedirectAppLinksContext is missing.  Ensure your component or React root is wrapped with RedirectAppLinksProvider.'
+    );
+  }
+
+  return context;
+}
diff --git a/packages/shared-ux/link/redirect_app/src/types.ts b/packages/shared-ux/link/redirect_app/src/types.ts
new file mode 100644
index 00000000000000..2c27ccde84d67e
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/src/types.ts
@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type NavigateToUrl = (url: string) => Promise<void> | void;
diff --git a/packages/shared-ux/link/redirect_app/tsconfig.json b/packages/shared-ux/link/redirect_app/tsconfig.json
new file mode 100644
index 00000000000000..93076efae5d7ca
--- /dev/null
+++ b/packages/shared-ux/link/redirect_app/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "extends": "../../../../tsconfig.bazel.json",
+  "compilerOptions": {
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "target_types",
+    "rootDir": "src",
+    "stripInternal": false,
+    "types": [
+      "jest",
+      "node",
+      "react",
+      "@kbn/ambient-ui-types"
+    ]
+  },
+  "include": [
+    "src/**/*"
+  ]
+}
diff --git a/yarn.lock b/yarn.lock
index 45307af4aa044b..5f54b15903affb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3212,6 +3212,10 @@
   version "0.0.0"
   uid ""
 
+"@kbn/shared-ux-link-redirect-app@link:bazel-bin/packages/shared-ux/link/redirect_app":
+  version "0.0.0"
+  uid ""
+
 "@kbn/shared-ux-services@link:bazel-bin/packages/kbn-shared-ux-services":
   version "0.0.0"
   uid ""
@@ -6300,6 +6304,10 @@
   version "0.0.0"
   uid ""
 
+"@types/kbn__shared-ux-link-redirect-app@link:bazel-bin/packages/shared-ux/link/redirect_app/npm_module_types":
+  version "0.0.0"
+  uid ""
+
 "@types/kbn__shared-ux-services@link:bazel-bin/packages/kbn-shared-ux-services/npm_module_types":
   version "0.0.0"
   uid ""

From 7d0db74f6a7c074cd369de02eb6375a2ac733304 Mon Sep 17 00:00:00 2001
From: Steph Milovic <stephanie.milovic@elastic.co>
Date: Mon, 9 May 2022 10:56:03 -0600
Subject: [PATCH 6/6]  [Security Solution] Tweak Text on Getting Started Page 
 (#131808)

---
 .../public/common/components/landing_cards/translations.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/landing_cards/translations.tsx b/x-pack/plugins/security_solution/public/common/components/landing_cards/translations.tsx
index 51da2e72c3bbd0..fb91c358486d86 100644
--- a/x-pack/plugins/security_solution/public/common/components/landing_cards/translations.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/landing_cards/translations.tsx
@@ -42,7 +42,7 @@ export const ENDPOINT_TITLE = i18n.translate(
 export const ENDPOINT_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.overview.landingCards.box.endpoint.desc',
   {
-    defaultMessage: 'Prevent, collect, detect and respond -- all with Elastic Agent.',
+    defaultMessage: 'Prevent, collect, detect and respond — all with Elastic Agent.',
   }
 );
 
@@ -55,7 +55,7 @@ export const SIEM_CARD_TITLE = i18n.translate(
 export const SIEM_CARD_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.overview.landingCards.box.siemCard.desc',
   {
-    defaultMessage: 'Detect, investigate, and respond to evolving threats',
+    defaultMessage: 'Detect, investigate, and respond to evolving threats.',
   }
 );
 
@@ -69,6 +69,6 @@ export const UNIFY_DESCRIPTION = i18n.translate(
   'xpack.securitySolution.overview.landingCards.box.unify.desc',
   {
     defaultMessage:
-      'Elastic Security modernizes security operations — enabling analytics across years of data, automating key processes, and bringing native endpoint security to every host.',
+      'Elastic Security modernizes security operations — enabling analytics across years of data, automating key processes, and protecting every host.',
   }
 );