From d5d1c8fa75e85740db0fc63648c65728e5b49184 Mon Sep 17 00:00:00 2001
From: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
Date: Wed, 5 Mar 2025 15:17:55 +0100
Subject: [PATCH 01/12] Hide main analytics applications on overview page if
 unavailable (#213198)

## Summary

This PR fixes a bug where unavailable (due to lack of permissions)
"main" analytics applications would show for users on Kibana overview
page.
Closes: #212171
---
 .../public/components/overview/overview.tsx   | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.tsx b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.tsx
index c4a36e966142b..af33c00575918 100644
--- a/src/platform/plugins/private/kibana_overview/public/components/overview/overview.tsx
+++ b/src/platform/plugins/private/kibana_overview/public/components/overview/overview.tsx
@@ -10,7 +10,7 @@
 import './overview.scss';
 
 import { snakeCase } from 'lodash';
-import React, { FC, useState, useEffect } from 'react';
+import React, { FC, useState, useEffect, useMemo } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import {
   EuiCard,
@@ -165,6 +165,19 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
   // Dashboard and discover are displayed in larger cards
   const mainApps = ['dashboards', 'discover'];
   const remainingApps = kibanaApps.map(({ id }) => id).filter((id) => !mainApps.includes(id));
+  const mainAppsUserHasAccessTo = useMemo(() => {
+    const applications = [];
+
+    if (application.capabilities.dashboards_v2?.show) {
+      applications.push('dashboards');
+    }
+
+    if (application.capabilities.discover_v2?.show) {
+      applications.push('discover');
+    }
+
+    return applications;
+  }, [application.capabilities]);
 
   const onDataViewCreated = () => {
     setNewKibanaInstance(false);
@@ -256,13 +269,13 @@ export const Overview: FC<Props> = ({ newsFetchResult, solutions, features }) =>
           </h2>
         </EuiScreenReaderOnly>
 
-        {mainApps.length ? (
+        {mainAppsUserHasAccessTo.length ? (
           <>
             <EuiFlexGroup
               className="kbnOverviewApps__group kbnOverviewApps__group--primary"
               justifyContent="center"
             >
-              {mainApps.map(renderAppCard)}
+              {mainAppsUserHasAccessTo.map(renderAppCard)}
             </EuiFlexGroup>
 
             <EuiSpacer size="l" />

From 197a281bf918ca021979dc1c948730fe99fd07de Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Wed, 5 Mar 2025 15:53:26 +0100
Subject: [PATCH 02/12] [Siem Migrations] Translated Rules Upsell Page
 (#212777)

## Summary

This PR adds the Upsell for `Translated Rules` Page as per
[design](https://www.figma.com/design/BD9GZZz6y8pfSbubAt5H2W/%5B8.18%5D-GenAI-Powered-SIEM-Migration%3A-Rule-translation?node-id=63-81202&p=f&t=oJug1zebtufPlNKM-0).


Below is the Demo for the same.

|Instance|Demo|
|---|---|
|ESS|<video
src="https://github.com/user-attachments/assets/d7484635-292d-4bf0-883b-c9fd93b72096"/>|
|Serverless|<video
src="https://github.com/user-attachments/assets/767d8409-a391-41b8-b4d1-1c838dffc363"/>|




### Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

- [x] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios


### Identify risks

Does this PR introduce any risks? For example, consider risks like hard
to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified
risk. Invite stakeholders and evaluate how to proceed before merging.

- [ ] [See some risk
examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx)
- [ ] ...

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../packages/upselling/messages/index.tsx     |  7 ++
 .../siem_migrations_translated_rules.test.tsx | 50 +++++++++++++
 .../siem_migrations_translated_rules.tsx      | 74 +++++++++++++++++++
 .../packages/upselling/pages/translations.ts  |  7 ++
 .../sections/siem_migrations_start.tsx        |  3 +-
 .../public/upselling/lazy_upselling.tsx       | 10 +++
 .../siem_migrations_translated_rules.tsx      | 27 +++++++
 .../upselling/register_upsellings.test.tsx    |  2 +-
 .../public/upselling/register_upsellings.tsx  |  7 ++
 .../public/upselling/translations.ts          |  8 ++
 .../public/upselling/lazy_upselling.tsx       | 10 +++
 .../siem_migrations_translated_rules.tsx      | 21 ++++++
 .../public/upselling/translations.ts          |  8 ++
 .../public/upselling/upsellings.tsx           |  6 ++
 .../tsconfig.json                             |  2 +-
 15 files changed, 239 insertions(+), 3 deletions(-)
 create mode 100644 x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.test.tsx
 create mode 100644 x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution_ess/public/upselling/pages/siem_migrations_translated_rules.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/pages/siem_migrations_translated_rules.tsx

diff --git a/x-pack/solutions/security/packages/upselling/messages/index.tsx b/x-pack/solutions/security/packages/upselling/messages/index.tsx
index d61114e472a23..0bf255fc8e2e6 100644
--- a/x-pack/solutions/security/packages/upselling/messages/index.tsx
+++ b/x-pack/solutions/security/packages/upselling/messages/index.tsx
@@ -79,3 +79,10 @@ export const PREBUILT_RULE_CUSTOMIZATION_DESCRIPTION = (
       },
     }
   );
+
+export const SIEM_MIGRATION_MANAGER_LICENSE_BTN = i18n.translate(
+  'securitySolutionPackages.upselling.siemMigrations.manageLicenseBtn',
+  {
+    defaultMessage: 'Manage license',
+  }
+);
diff --git a/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.test.tsx b/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.test.tsx
new file mode 100644
index 0000000000000..0b4c25d1dad92
--- /dev/null
+++ b/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.test.tsx
@@ -0,0 +1,50 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SiemMigrationsTranslatedRulesUpsellPage } from './siem_migrations_translated_rules';
+import { render, screen } from '@testing-library/react';
+
+describe('SiemMigrationsTranslatedRulesUpsellPage', () => {
+  it('should render the component with all sections correctly', () => {
+    render(
+      <SiemMigrationsTranslatedRulesUpsellPage
+        title="title"
+        upgradeMessage="upgradeMessage"
+        upgradeHref="https://upgrade.Href"
+      />
+    );
+
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellButton')).toBeVisible();
+
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellTitle')).toBeVisible();
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellTitle')).toHaveTextContent(
+      'title'
+    );
+
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellUpgradeMessage')).toBeVisible();
+    expect(
+      screen.getByTestId('siemMigrationTranslatedRulesUpsellUpgradeMessage')
+    ).toHaveTextContent('upgradeMessage');
+
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellButton')).toBeVisible();
+    expect(screen.getByTestId('siemMigrationTranslatedRulesUpsellButton')).toHaveAttribute(
+      'href',
+      'https://upgrade.Href'
+    );
+  });
+
+  it('should render the component without upgradeHref', () => {
+    render(
+      <SiemMigrationsTranslatedRulesUpsellPage title="title" upgradeMessage="upgradeMessage" />
+    );
+
+    expect(
+      screen.queryByTestId('siemMigrationTranslatedRulesUpsellButton')
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.tsx b/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.tsx
new file mode 100644
index 0000000000000..33b2758f438f9
--- /dev/null
+++ b/x-pack/solutions/security/packages/upselling/pages/siem_migrations_translated_rules.tsx
@@ -0,0 +1,74 @@
+/*
+ * 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 { EuiButton, EuiEmptyPrompt, EuiPageHeader, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
+import { css } from '@emotion/react';
+import { SIEM_MIGRATION_MANAGER_LICENSE_BTN } from '../messages';
+import * as i18n from './translations';
+
+export const SiemMigrationsTranslatedRulesUpsellPage = React.memo(
+  function SiemMigrationsTranslatedRulesUpsellPage({
+    title,
+    upgradeMessage,
+    upgradeHref,
+  }: {
+    title: React.ReactNode;
+    upgradeMessage: React.ReactNode;
+    upgradeHref?: string;
+  }) {
+    const CTAButton = useMemo(() => {
+      return (
+        <EuiButton
+          data-test-subj="siemMigrationTranslatedRulesUpsellButton"
+          href={upgradeHref}
+          color="primary"
+          iconType="gear"
+        >
+          {SIEM_MIGRATION_MANAGER_LICENSE_BTN}
+        </EuiButton>
+      );
+    }, [upgradeHref]);
+
+    return (
+      <KibanaPageTemplate contentBorder={false} grow={true} restrictWidth={false}>
+        <KibanaPageTemplate.Section color="plain" paddingSize="none">
+          <EuiPageHeader bottomBorder pageTitle={i18n.SIEM_MIGRATION_UPSELLING_PAGE_TITLE} />
+          <EuiFlexGroup
+            css={css`
+              /**
+              * Height of 210px applies to both ESS and Serverless.
+              * It is combination of height of Kibana Header + Action Bar and Page Header
+              *
+              */
+              min-height: calc(100vh - 210px);
+            `}
+            justifyContent="center"
+            alignItems="center"
+            direction="column"
+          >
+            <EuiFlexItem>
+              <EuiEmptyPrompt
+                title={
+                  <span data-test-subj="siemMigrationTranslatedRulesUpsellTitle">{title}</span>
+                }
+                actions={upgradeHref ? CTAButton : null}
+                iconType={'logoSecurity'}
+                body={
+                  <span data-test-subj="siemMigrationTranslatedRulesUpsellUpgradeMessage">
+                    {upgradeMessage}
+                  </span>
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </KibanaPageTemplate.Section>
+      </KibanaPageTemplate>
+    );
+  }
+);
diff --git a/x-pack/solutions/security/packages/upselling/pages/translations.ts b/x-pack/solutions/security/packages/upselling/pages/translations.ts
index c68df712769ea..07f533f2c495c 100644
--- a/x-pack/solutions/security/packages/upselling/pages/translations.ts
+++ b/x-pack/solutions/security/packages/upselling/pages/translations.ts
@@ -28,3 +28,10 @@ export const ENTITY_ANALYTICS_TITLE = i18n.translate(
     defaultMessage: 'Entity Analytics',
   }
 );
+
+export const SIEM_MIGRATION_UPSELLING_PAGE_TITLE = i18n.translate(
+  'securitySolutionPackages.siemMigration.pageTitle',
+  {
+    defaultMessage: 'Translate Rules',
+  }
+);
diff --git a/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.tsx b/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.tsx
index bf61709313ff3..e5725f037869e 100644
--- a/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.tsx
+++ b/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.tsx
@@ -7,6 +7,7 @@
 
 import { EuiButton, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
 import React from 'react';
+import { SIEM_MIGRATION_MANAGER_LICENSE_BTN } from '../messages';
 
 export const SiemMigrationStartUpsellSection = React.memo(function SiemMigrationStartUpsellSection({
   title,
@@ -40,7 +41,7 @@ export const SiemMigrationStartUpsellSection = React.memo(function SiemMigration
                   color="warning"
                   fill
                 >
-                  {'Manage License'}
+                  {SIEM_MIGRATION_MANAGER_LICENSE_BTN}
                 </EuiButton>
               </EuiFlexItem>
             ) : null}
diff --git a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/lazy_upselling.tsx b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/lazy_upselling.tsx
index f77c5a32efe6f..ce3bb04713807 100644
--- a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/lazy_upselling.tsx
+++ b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/lazy_upselling.tsx
@@ -27,6 +27,16 @@ export const SiemMigrationsStartUpsellSectionLazy = withSuspenseUpsell(
   )
 );
 
+export const SiemMigrationsTranslatedRulesUpsellPageLazy = withSuspenseUpsell(
+  lazy(() =>
+    import('./pages/siem_migrations_translated_rules').then(
+      ({ SiemMigrationsTranslatedRulesPage }) => ({
+        default: SiemMigrationsTranslatedRulesPage,
+      })
+    )
+  )
+);
+
 export const EntityAnalyticsUpsellingPageLazy = lazy(() =>
   import('./pages/entity_analytics_upselling').then(({ EntityAnalyticsUpsellingPageESS }) => ({
     default: EntityAnalyticsUpsellingPageESS,
diff --git a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/pages/siem_migrations_translated_rules.tsx b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/pages/siem_migrations_translated_rules.tsx
new file mode 100644
index 0000000000000..e62f6b26acef9
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/pages/siem_migrations_translated_rules.tsx
@@ -0,0 +1,27 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SiemMigrationsTranslatedRulesUpsellPage as SiemMigrationsTranslatedRulesUpsellPageCommonn } from '@kbn/security-solution-upselling/pages/siem_migrations_translated_rules';
+import { useKibana } from '../../common/services';
+import * as i18n from '../translations';
+
+export const SiemMigrationsTranslatedRulesPage = React.memo(
+  function SiemMigrationsTranslatedRulesPage() {
+    const { services } = useKibana();
+
+    return (
+      <SiemMigrationsTranslatedRulesUpsellPageCommonn
+        title={i18n.SIEM_MIGRATION_UPSELLING_TITLE('Enterprise')}
+        upgradeMessage={i18n.SIEM_MIGRATION_RULES_PAGE_UPGRADE_LICENSE_MESSAGE}
+        upgradeHref={services.application.getUrlForApp('management', {
+          path: 'stack/license_management',
+        })}
+      />
+    );
+  }
+);
diff --git a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.test.tsx b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.test.tsx
index e7fdcf39e4e72..ae382f0460875 100644
--- a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.test.tsx
@@ -10,7 +10,7 @@ import { SecurityPageName } from '@kbn/security-solution-plugin/common';
 import { upsellingPages } from './register_upsellings';
 
 describe('upsellingPages', () => {
-  it('registers the Attack discovery page with the expected minimum license for self managed', () => {
+  it('should register the Attack discovery page with the expected minimum license for self managed', () => {
     const attackDiscoveryPage = upsellingPages.find(
       ({ pageName }) => pageName === SecurityPageName.attackDiscovery
     );
diff --git a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.tsx b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.tsx
index eb7124cb1c942..5febfbd9a64fd 100644
--- a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.tsx
+++ b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.tsx
@@ -32,6 +32,7 @@ import {
   EntityAnalyticsUpsellingPageLazy,
   EntityAnalyticsUpsellingSectionLazy,
   SiemMigrationsStartUpsellSectionLazy,
+  SiemMigrationsTranslatedRulesUpsellPageLazy,
 } from './lazy_upselling';
 
 interface UpsellingsConfig {
@@ -102,6 +103,12 @@ export const upsellingPages: UpsellingPages = [
     minimumLicenseRequired: 'enterprise',
     component: AttackDiscoveryUpsellingPageLazy,
   },
+
+  {
+    pageName: SecurityPageName.siemMigrationsRules,
+    minimumLicenseRequired: 'enterprise',
+    component: SiemMigrationsTranslatedRulesUpsellPageLazy,
+  },
 ];
 
 // Upsellings for sections, linked by arbitrary ids
diff --git a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/translations.ts b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/translations.ts
index 867755b9ba9d5..fd284852cb7b1 100644
--- a/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/translations.ts
+++ b/x-pack/solutions/security/plugins/security_solution_ess/public/upselling/translations.ts
@@ -29,3 +29,11 @@ export const SIEM_MIGRATION_UPGRADE_LICENSE_MESSAGE = i18n.translate(
     defaultMessage: 'To use this feature, upgrade your Elastic subscription level.',
   }
 );
+
+export const SIEM_MIGRATION_RULES_PAGE_UPGRADE_LICENSE_MESSAGE = i18n.translate(
+  'xpack.securitySolutionEss.upselling.siemMigrations.rulesPageUpgradeLicenseMessage',
+  {
+    defaultMessage:
+      'To use this feature, upgrade your Elastic subscription level. If you have created a migration previously, you will be able to access it after upgrade.',
+  }
+);
diff --git a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/lazy_upselling.tsx b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/lazy_upselling.tsx
index 014ba27debec4..a68774fbe4eaa 100644
--- a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/lazy_upselling.tsx
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/lazy_upselling.tsx
@@ -49,6 +49,16 @@ export const SiemMigrationsStartUpsellSectionLazy = withSuspenseUpsell(
   )
 );
 
+export const SiemMigrationsTranslatedRulesUpsellPageLazy = withSuspenseUpsell(
+  lazy(() =>
+    import('./pages/siem_migrations_translated_rules').then(
+      ({ SiemMigrationsTranslatedRulesUpsellPage }) => ({
+        default: SiemMigrationsTranslatedRulesUpsellPage,
+      })
+    )
+  )
+);
+
 export const AttackDiscoveryUpsellingPageLazy = withSuspenseUpsell(
   lazy(() =>
     import('./pages/attack_discovery').then(({ AttackDiscoveryUpsellingPageServerless }) => ({
diff --git a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/pages/siem_migrations_translated_rules.tsx b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/pages/siem_migrations_translated_rules.tsx
new file mode 100644
index 0000000000000..4dd2ecb067042
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/pages/siem_migrations_translated_rules.tsx
@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { SiemMigrationsTranslatedRulesUpsellPage as SiemMigrationsTranslatedRulesUpsellPageCommon } from '@kbn/security-solution-upselling/pages/siem_migrations_translated_rules';
+import * as i18n from '../translations';
+
+export const SiemMigrationsTranslatedRulesUpsellPage = React.memo(
+  function SiemMigrationsTranslatedRulesUpsellPage() {
+    return (
+      <SiemMigrationsTranslatedRulesUpsellPageCommon
+        title={i18n.SIEM_MIGRATION_UPSELLING_TITLE('Complete')}
+        upgradeMessage={i18n.SIEM_MIGRATION_RULES_PAGE_UPGRADE_LICENSE_MESSAGE}
+      />
+    );
+  }
+);
diff --git a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/translations.ts b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/translations.ts
index 39db5f3198b3e..dc7af33165b79 100644
--- a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/translations.ts
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/translations.ts
@@ -42,3 +42,11 @@ export const SIEM_MIGRATION_UPGRADE_MESSAGE = i18n.translate(
       'To use this feature, you need to upgrade your Elastic Cloud Serverless feature tier. Update your subscription or contact your administrator for assistance.',
   }
 );
+
+export const SIEM_MIGRATION_RULES_PAGE_UPGRADE_LICENSE_MESSAGE = i18n.translate(
+  'xpack.securitySolutionServerless.upselling.siemMigrations.rulesPageUpgradeLicenseMessage',
+  {
+    defaultMessage:
+      'To use this feature, you need to upgrade your Elastic Cloud Serverless feature tier. Update your subscription or contact your administrator for assistance. If you have created a migration previously, you will be able to access it after upgrade.',
+  }
+);
diff --git a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/upsellings.tsx b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/upsellings.tsx
index e726917d356b7..6b4e6e4b7302f 100644
--- a/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/upsellings.tsx
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/public/upselling/upsellings.tsx
@@ -34,6 +34,7 @@ import {
   EntityAnalyticsUpsellingSectionLazy,
   OsqueryResponseActionsUpsellingSectionLazy,
   SiemMigrationsStartUpsellSectionLazy,
+  SiemMigrationsTranslatedRulesUpsellPageLazy,
   ThreatIntelligencePaywallLazy,
 } from './lazy_upselling';
 import * as i18n from './translations';
@@ -86,6 +87,11 @@ export const upsellingPages: UpsellingPages = [
     pli: ProductFeatureKey.attackDiscovery,
     component: () => <AttackDiscoveryUpsellingPageLazy />,
   },
+  {
+    pageName: SecurityPageName.siemMigrationsRules,
+    pli: ProductFeatureKey.siemMigrations,
+    component: () => <SiemMigrationsTranslatedRulesUpsellPageLazy />,
+  },
 ];
 
 const entityAnalyticsProductType = getProductTypeByPLI(ProductFeatureKey.advancedInsights) ?? '';
diff --git a/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json b/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json
index 68c52590670dd..b20fdb00f5910 100644
--- a/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json
@@ -46,6 +46,6 @@
     "@kbn/logging",
     "@kbn/automatic-import-plugin",
     "@kbn/cloud-security-posture-common",
-    "@kbn/dev-utils"
+    "@kbn/dev-utils",
   ]
 }

From 529a8573fab67f1b0ff3b7add303707fd25bc6b4 Mon Sep 17 00:00:00 2001
From: Luke Gmys <11671118+lgestc@users.noreply.github.com>
Date: Wed, 5 Mar 2025 17:03:45 +0100
Subject: [PATCH 03/12] [Case Observables] Implement server side validation
 (#209706)

## Summary

This PR introduces validation rules for Case Observables, shared between
client and the server.

### Testing

- Create a case
- Add on observable to it, picking up the ipv4 as an observable type
(for instance)
- Verify that only the valid values are allowed.
- Try updating the observable after it is created, same validation rules
apply.
- Do the same thing using API routes.
---
 .../common/observables/validators.test.ts     | 124 ++++++++++
 .../cases/common/observables/validators.ts    | 113 +++++++++
 .../observables/fields_config.test.ts         | 142 ++---------
 .../components/observables/fields_config.ts   | 225 +++++-------------
 .../server/client/cases/observables.test.ts   |  39 +++
 .../cases/server/client/cases/observables.ts  |   8 +
 .../cases/server/client/validators.test.ts    |  19 +-
 .../shared/cases/server/client/validators.ts  |  15 ++
 .../tests/trial/internal/observables.ts       |  48 ++++
 9 files changed, 447 insertions(+), 286 deletions(-)
 create mode 100644 x-pack/platform/plugins/shared/cases/common/observables/validators.test.ts
 create mode 100644 x-pack/platform/plugins/shared/cases/common/observables/validators.ts

diff --git a/x-pack/platform/plugins/shared/cases/common/observables/validators.test.ts b/x-pack/platform/plugins/shared/cases/common/observables/validators.test.ts
new file mode 100644
index 0000000000000..a4e77f65d4078
--- /dev/null
+++ b/x-pack/platform/plugins/shared/cases/common/observables/validators.test.ts
@@ -0,0 +1,124 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { validateDomain, validateEmail, validateGenericValue, validateIp } from './validators';
+
+describe('validateEmail', () => {
+  it('should return an error if the value is not a string', () => {
+    const result = validateEmail(undefined);
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_STRING',
+    });
+  });
+
+  it('should return an error if the value is not a valid email', () => {
+    const result = validateEmail('invalid-email');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_EMAIL',
+    });
+  });
+
+  it('should return undefined if the value is a valid email', () => {
+    const result = validateEmail('test@example.com');
+
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('genericValidator', () => {
+  it('should return an error if the value is not a string', () => {
+    const result = validateGenericValue(123);
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_STRING',
+    });
+  });
+
+  it('should return an error if the value is not valid', () => {
+    const result = validateGenericValue('invalid value!');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+
+  it('should return an error if the value is a json', () => {
+    const result = validateGenericValue('{}');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+
+  it('should return undefined if the value is valid', () => {
+    const result = validateGenericValue('valid_value');
+
+    expect(result).toBeUndefined();
+  });
+});
+
+describe('validateDomain', () => {
+  it('should return undefined for a valid domain', () => {
+    const result = validateDomain('example.com');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return an error for an invalid domain', () => {
+    const result = validateDomain('-invalid.com');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+
+  it('should return an error for hyphen-spaced strings', () => {
+    const result = validateDomain('test-test');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+
+  it('should return an error for a non-string value', () => {
+    const result = validateDomain(12345);
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_STRING',
+    });
+  });
+});
+
+describe('validateIp', () => {
+  it('should return undefined for a valid ipv4', () => {
+    const result = validateIp('ipv4')('127.0.0.1');
+
+    expect(result).toBeUndefined();
+  });
+
+  it('should return an error for invalid ipv4', () => {
+    const result = validateIp('ipv4')('invalid ip');
+
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+
+  it('should return undefined for a valid ipv6', () => {
+    const result = validateIp('ipv6')('::1');
+    expect(result).toBeUndefined();
+  });
+
+  it('should return an error for an invalid ipv6', () => {
+    const result = validateIp('ipv6')('invalid ipv6');
+    expect(result).toEqual({
+      code: 'ERR_NOT_VALID',
+    });
+  });
+});
diff --git a/x-pack/platform/plugins/shared/cases/common/observables/validators.ts b/x-pack/platform/plugins/shared/cases/common/observables/validators.ts
new file mode 100644
index 0000000000000..34ad50ca5f172
--- /dev/null
+++ b/x-pack/platform/plugins/shared/cases/common/observables/validators.ts
@@ -0,0 +1,113 @@
+/*
+ * 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 ipaddr from 'ipaddr.js';
+import { parseAddressList } from 'email-addresses';
+import isString from 'lodash/isString';
+
+import {
+  OBSERVABLE_TYPE_DOMAIN,
+  OBSERVABLE_TYPE_EMAIL,
+  OBSERVABLE_TYPE_IPV4,
+  OBSERVABLE_TYPE_IPV6,
+  OBSERVABLE_TYPE_URL,
+} from '../constants';
+
+const DOMAIN_REGEX = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)\.[A-Za-z]{2,}$/;
+const GENERIC_REGEX = /^[a-zA-Z0-9._:/\\]+$/;
+
+export interface ValidationError {
+  code: string;
+}
+
+export type SharedValidationFunction = (value: unknown) => ValidationError | undefined;
+
+export const createStringValidationFunction =
+  (stringValidator: (value: string) => ValidationError | undefined): SharedValidationFunction =>
+  (value: unknown): ValidationError | undefined => {
+    if (!isString(value)) {
+      return { code: 'ERR_NOT_STRING' };
+    }
+
+    if (!value.length) {
+      return { code: 'ERR_EMPTY' };
+    }
+
+    return stringValidator(value);
+  };
+
+export const validateDomain = createStringValidationFunction((value) => {
+  return DOMAIN_REGEX.test(value) ? undefined : { code: 'ERR_NOT_VALID' };
+});
+export const validateGenericValue = createStringValidationFunction((value) => {
+  return GENERIC_REGEX.test(value) ? undefined : { code: 'ERR_NOT_VALID' };
+});
+
+export const validateIp = (kind: 'ipv6' | 'ipv4') =>
+  createStringValidationFunction((value: string) => {
+    try {
+      const parsed = ipaddr.parse(value);
+
+      if (parsed.kind() !== kind) {
+        return {
+          code: 'ERR_NOT_VALID',
+        };
+      }
+    } catch (error) {
+      return {
+        code: 'ERR_NOT_VALID',
+      };
+    }
+  });
+
+export const validateUrl = createStringValidationFunction((value) => {
+  try {
+    new URL(value);
+  } catch (error) {
+    return {
+      code: 'ERR_NOT_VALID',
+    };
+  }
+});
+
+export const validateEmail = createStringValidationFunction((value: string) => {
+  if (parseAddressList(value) === null) {
+    return {
+      code: 'ERR_NOT_EMAIL',
+    };
+  }
+});
+
+export const getValidatorForObservableType = (
+  observableTypeKey: string | undefined
+): SharedValidationFunction => {
+  switch (observableTypeKey) {
+    case OBSERVABLE_TYPE_URL.key: {
+      return validateUrl;
+    }
+
+    case OBSERVABLE_TYPE_DOMAIN.key: {
+      return validateDomain;
+    }
+
+    case OBSERVABLE_TYPE_EMAIL.key: {
+      return validateEmail;
+    }
+
+    case OBSERVABLE_TYPE_IPV4.key: {
+      return validateIp('ipv4');
+    }
+
+    case OBSERVABLE_TYPE_IPV6.key: {
+      return validateIp('ipv6');
+    }
+
+    default: {
+      return validateGenericValue;
+    }
+  }
+};
diff --git a/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.test.ts b/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.test.ts
index 348b5b1ca27b5..3f535b198a27e 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.test.ts
+++ b/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.test.ts
@@ -5,142 +5,32 @@
  * 2.0.
  */
 
-import type { ValidationFunc } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib/types';
-import { domainValidator, emailValidator, genericValidator, ipv4Validator } from './fields_config';
+import { normalizeValueType, fieldsConfig } from './fields_config';
+import { OBSERVABLE_TYPE_DOMAIN } from '../../../common/constants';
 
-describe('emailValidator', () => {
-  it('should return an error if the value is not a string', () => {
-    const result = emailValidator({
-      value: undefined,
-      path: 'email',
-    } as Parameters<ValidationFunc>[0]);
-
-    expect(result).toEqual({
-      code: 'ERR_NOT_STRING',
-      message: 'Value should be a string',
-      path: 'email',
-    });
-  });
-
-  it('should return an error if the value is not a valid email', () => {
-    const result = emailValidator({
-      value: 'invalid-email',
-      path: 'email',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_EMAIL',
-      message: 'Value should be a valid email',
-      path: 'email',
-    });
-  });
-
-  it('should return undefined if the value is a valid email', () => {
-    const result = emailValidator({
-      value: 'test@example.com',
-      path: 'email',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toBeUndefined();
-  });
-});
-
-describe('genericValidator', () => {
-  it('should return an error if the value is not a string', () => {
-    const result = genericValidator({
-      value: 123,
-      path: 'generic',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_STRING',
-      message: 'Value should be a string',
-      path: 'generic',
-    });
-  });
-
-  it('should return an error if the value is not valid', () => {
-    const result = genericValidator({
-      value: 'invalid value!',
-      path: 'generic',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_VALID',
-      message: 'Value is invalid',
-      path: 'generic',
+describe('fields_config.ts', () => {
+  describe('normalizeValueType', () => {
+    it('should return the correct value type if it exists', () => {
+      expect(normalizeValueType(OBSERVABLE_TYPE_DOMAIN.key)).toEqual(OBSERVABLE_TYPE_DOMAIN.key);
     });
-  });
-
-  it('should return undefined if the value is valid', () => {
-    const result = genericValidator({
-      value: 'valid_value',
-      path: 'generic',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toBeUndefined();
-  });
-});
-
-describe('domainValidator', () => {
-  it('should return undefined for a valid domain', () => {
-    const result = domainValidator({
-      value: 'example.com',
-      path: 'domain',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toBeUndefined();
-  });
 
-  it('should return an error for an invalid domain', () => {
-    const result = domainValidator({
-      value: '-invalid.com',
-      path: 'domain',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_VALID',
-      message: 'Value is invalid',
-      path: 'domain',
+    it('should return "generic" if value type does not exist', () => {
+      expect(normalizeValueType('nonExistentKey')).toEqual('generic');
     });
   });
 
-  it('should return an error for hyphen-spaced strings', () => {
-    const result = domainValidator({
-      value: 'test-test',
-      path: 'domain',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_VALID',
-      message: 'Value is invalid',
-      path: 'domain',
-    });
-  });
+  describe('fieldsConfig', () => {
+    it('should have correct default values for type key validation', () => {
+      const typeKeyValidations = fieldsConfig.typeKey.validations;
 
-  it('should return an error for a non-string value', () => {
-    const result = domainValidator({
-      value: 12345,
-      path: 'domain',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_STRING',
-      message: 'Value should be a string',
-      path: 'domain',
+      expect(typeKeyValidations.length).toBe(1);
+      expect(typeKeyValidations[0].validator).toBeDefined();
     });
-  });
-});
 
-describe('ipv4Validator', () => {
-  it('should return undefined for a valid ipv4', () => {
-    const result = ipv4Validator({
-      value: '127.0.0.1',
-      path: 'ipv4',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toBeUndefined();
-  });
+    it('should have observable value field types defined', () => {
+      const valueConfigs = fieldsConfig.value;
 
-  it('should return an error for invalid ipv4', () => {
-    const result = domainValidator({
-      value: 'invalid ip',
-      path: 'ipv4',
-    } as Parameters<ValidationFunc>[0]);
-    expect(result).toEqual({
-      code: 'ERR_NOT_VALID',
-      message: 'Value is invalid',
-      path: 'ipv4',
+      expect(Object.keys(valueConfigs).length).toBeGreaterThan(0);
     });
   });
 });
diff --git a/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.ts b/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.ts
index b858bb1251bb2..0962428250979 100644
--- a/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.ts
+++ b/x-pack/platform/plugins/shared/cases/public/components/observables/fields_config.ts
@@ -6,10 +6,10 @@
  */
 
 import { type ValidationFunc } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import { parseAddressList } from 'email-addresses';
-import ipaddr from 'ipaddr.js';
 import { fieldValidators } from '@kbn/es-ui-shared-plugin/static/forms/helpers';
 
+import { getValidatorForObservableType } from '../../../common/observables/validators';
+
 import {
   OBSERVABLE_TYPE_DOMAIN,
   OBSERVABLE_TYPE_EMAIL,
@@ -19,182 +19,89 @@ import {
 } from '../../../common/constants';
 import * as i18n from './translations';
 
-export const normalizeValueType = (value: string): keyof typeof fieldsConfig.value | 'generic' => {
-  if (value in fieldsConfig.value) {
-    return value as keyof typeof fieldsConfig.value;
+const GENERIC_OBSERVABLE_VALUE_TYPE = 'generic' as const;
+
+export const normalizeValueType = (
+  observableTypeKey: string
+): keyof typeof fieldsConfig.value | typeof GENERIC_OBSERVABLE_VALUE_TYPE => {
+  if (observableTypeKey in fieldsConfig.value) {
+    return observableTypeKey as keyof typeof fieldsConfig.value;
   }
 
-  return 'generic';
+  return GENERIC_OBSERVABLE_VALUE_TYPE;
 };
 
-const DOMAIN_REGEX = /^(?!-)[A-Za-z0-9-]{1,63}(?<!-)\.[A-Za-z]{2,}$/;
-const GENERIC_REGEX = /^[a-zA-Z0-9._:/\\]+$/;
-
-const notStringError = (path: string) => ({
-  code: 'ERR_NOT_STRING',
-  message: 'Value should be a string',
-  path,
-});
-
 const { emptyField } = fieldValidators;
 
-const validatorFactory =
-  (
-    regex: RegExp,
-    message: string = i18n.INVALID_VALUE,
-    code: string = 'ERR_NOT_VALID'
-  ): ValidationFunc =>
-  (...args: Parameters<ValidationFunc>) => {
-    const [{ value, path }] = args;
-
-    if (typeof value !== 'string') {
-      return notStringError(path);
-    }
+interface FieldValidationConfig {
+  validator: ValidationFunc;
+}
 
-    if (!regex.test(value)) {
-      return {
-        code,
-        message,
-        path,
-      };
-    }
-  };
-
-export const genericValidator = validatorFactory(GENERIC_REGEX);
-export const domainValidator = validatorFactory(DOMAIN_REGEX);
-
-const ipValidatorFactory =
-  (kind: 'ipv6' | 'ipv4') =>
-  (...args: Parameters<ValidationFunc>) => {
-    const [{ value, path }] = args;
-
-    if (typeof value !== 'string') {
-      return notStringError(path);
-    }
+const validationsFactory = (
+  observableTypeKey: string | undefined,
+  message: string = i18n.INVALID_VALUE
+): FieldValidationConfig[] => [
+  {
+    validator: emptyField(i18n.REQUIRED_VALUE),
+  },
+  {
+    validator: (...args: Parameters<ValidationFunc>) => {
+      const [{ value, path }] = args;
 
-    try {
-      const parsed = ipaddr.parse(value);
+      const validationResult = getValidatorForObservableType(observableTypeKey)(value);
 
-      if (parsed.kind() !== kind) {
+      if (validationResult) {
         return {
-          code: 'ERR_NOT_VALID',
-          message: i18n.INVALID_VALUE,
+          ...validationResult,
+          message,
           path,
         };
       }
-    } catch (error) {
-      return {
-        code: 'ERR_NOT_VALID',
-        message: i18n.INVALID_VALUE,
-        path,
-      };
-    }
-  };
-
-export const ipv6Validator = ipValidatorFactory('ipv6');
-export const ipv4Validator = ipValidatorFactory('ipv4');
-
-export const urlValidator = (...args: Parameters<ValidationFunc>) => {
-  const [{ value, path }] = args;
+    },
+  },
+];
 
-  if (typeof value !== 'string') {
-    return notStringError(path);
-  }
+const observableValueFieldTypes = [
+  {
+    key: undefined,
+    label: i18n.FIELD_LABEL_VALUE,
+  },
+  {
+    key: OBSERVABLE_TYPE_EMAIL.key,
+    label: 'Email',
+  },
+  {
+    key: OBSERVABLE_TYPE_DOMAIN.key,
+    label: 'Domain',
+  },
+  {
+    key: OBSERVABLE_TYPE_IPV4.key,
+    label: 'IPv4',
+  },
+  {
+    key: OBSERVABLE_TYPE_IPV6.key,
+    label: 'IPv6',
+  },
+  {
+    key: OBSERVABLE_TYPE_URL.key,
+    label: 'URL',
+  },
+];
 
-  try {
-    new URL(value);
-  } catch (error) {
-    return {
-      code: 'ERR_NOT_VALID',
-      message: i18n.INVALID_VALUE,
-      path,
+const fieldsValueConfigsPerObservableType = observableValueFieldTypes.reduce(
+  (fieldsConfig, valueFieldConfig) => {
+    fieldsConfig[valueFieldConfig.key ?? GENERIC_OBSERVABLE_VALUE_TYPE] = {
+      label: valueFieldConfig.label,
+      validations: validationsFactory(valueFieldConfig.key),
     };
-  }
-};
-
-export const emailValidator = (...args: Parameters<ValidationFunc>) => {
-  const [{ value, path }] = args;
 
-  if (typeof value !== 'string') {
-    return notStringError(path);
-  }
-
-  const emailAddresses = parseAddressList(value);
-
-  if (emailAddresses == null) {
-    return { message: i18n.INVALID_EMAIL, code: 'ERR_NOT_EMAIL', path };
-  }
-};
+    return fieldsConfig;
+  },
+  {} as Record<string, { label: string; validations: FieldValidationConfig[] }>
+);
 
 export const fieldsConfig = {
-  value: {
-    generic: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: genericValidator,
-        },
-      ],
-      label: i18n.FIELD_LABEL_VALUE,
-    },
-    [OBSERVABLE_TYPE_EMAIL.key]: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: emailValidator,
-        },
-      ],
-      label: 'Email',
-    },
-    [OBSERVABLE_TYPE_DOMAIN.key]: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: domainValidator,
-        },
-      ],
-      label: 'Domain',
-    },
-    [OBSERVABLE_TYPE_IPV4.key]: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: ipv4Validator,
-        },
-      ],
-      label: 'IPv4',
-    },
-    [OBSERVABLE_TYPE_IPV6.key]: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: ipv6Validator,
-        },
-      ],
-      label: 'IPv6',
-    },
-    [OBSERVABLE_TYPE_URL.key]: {
-      validations: [
-        {
-          validator: emptyField(i18n.REQUIRED_VALUE),
-        },
-        {
-          validator: urlValidator,
-        },
-      ],
-      label: 'URL',
-    },
-  },
+  value: fieldsValueConfigsPerObservableType,
   typeKey: {
     validations: [
       {
diff --git a/x-pack/platform/plugins/shared/cases/server/client/cases/observables.test.ts b/x-pack/platform/plugins/shared/cases/server/client/cases/observables.test.ts
index 1d211615cab7a..10677043b8da3 100644
--- a/x-pack/platform/plugins/shared/cases/server/client/cases/observables.test.ts
+++ b/x-pack/platform/plugins/shared/cases/server/client/cases/observables.test.ts
@@ -73,6 +73,23 @@ describe('addObservable', () => {
     );
   });
 
+  it('should throw an error if the value is not valid', async () => {
+    mockLicensingService.isAtLeastPlatinum.mockResolvedValue(true);
+
+    await expect(
+      addObservable(
+        'case-id',
+        { observable: { typeKey: OBSERVABLE_TYPE_IPV4.key, value: 'not an ip', description: '' } },
+        mockClientArgs,
+        mockCasesClient
+      )
+    ).rejects.toThrow(
+      Boom.forbidden(
+        'Failed to add observable: Error: Observable value "not an ip" is not valid for selected observable type observable-type-ipv4.'
+      )
+    );
+  });
+
   it('should throw an error if observable type is invalid', async () => {
     mockLicensingService.isAtLeastPlatinum.mockResolvedValue(true);
 
@@ -150,6 +167,28 @@ describe('updateObservable', () => {
     expect(result).toBeDefined();
   });
 
+  it('should not update an observable when the provided value is not valid', async () => {
+    mockLicensingService.isAtLeastPlatinum.mockResolvedValue(true);
+    await expect(
+      updateObservable(
+        'case-id',
+        mockObservable.id,
+        {
+          observable: {
+            value: 'not an ip',
+            description: 'Updated description',
+          },
+        },
+        mockClientArgs,
+        mockCasesClient
+      )
+    ).rejects.toThrow(
+      Boom.forbidden(
+        'Failed to update observable: Error: Observable value "not an ip" is not valid for selected observable type observable-type-ipv4.'
+      )
+    );
+  });
+
   it('should throw an error if license is not platinum', async () => {
     mockLicensingService.isAtLeastPlatinum.mockResolvedValue(false);
 
diff --git a/x-pack/platform/plugins/shared/cases/server/client/cases/observables.ts b/x-pack/platform/plugins/shared/cases/server/client/cases/observables.ts
index 732dbd73e4a39..8295a8f2853dd 100644
--- a/x-pack/platform/plugins/shared/cases/server/client/cases/observables.ts
+++ b/x-pack/platform/plugins/shared/cases/server/client/cases/observables.ts
@@ -28,6 +28,7 @@ import { LICENSING_CASE_OBSERVABLES_FEATURE } from '../../common/constants';
 import {
   validateDuplicatedObservablesInRequest,
   validateObservableTypeKeyExists,
+  validateObservableValue,
 } from '../validators';
 
 const ensureUpdateAuthorized = async (
@@ -76,6 +77,8 @@ export const addObservable = async (
       observableTypeKey: params.observable.typeKey,
     });
 
+    validateObservableValue(paramArgs.observable.typeKey, paramArgs.observable.value);
+
     const currentObservables = retrievedCase.attributes.observables ?? [];
 
     if (currentObservables.length === MAX_OBSERVABLES_PER_CASE) {
@@ -156,6 +159,11 @@ export const updateObservable = async (
       throw Boom.notFound(`Failed to update observable: observable id ${observableId} not found`);
     }
 
+    validateObservableValue(
+      currentObservables[observableIndex].typeKey,
+      paramArgs.observable.value
+    );
+
     const updatedObservables = [...currentObservables];
     updatedObservables[observableIndex] = {
       ...updatedObservables[observableIndex],
diff --git a/x-pack/platform/plugins/shared/cases/server/client/validators.test.ts b/x-pack/platform/plugins/shared/cases/server/client/validators.test.ts
index 869c32cae06e8..727911d88a282 100644
--- a/x-pack/platform/plugins/shared/cases/server/client/validators.test.ts
+++ b/x-pack/platform/plugins/shared/cases/server/client/validators.test.ts
@@ -5,13 +5,14 @@
  * 2.0.
  */
 
-import { OBSERVABLE_TYPE_IPV4 } from '../../common/constants';
+import { OBSERVABLE_TYPE_EMAIL, OBSERVABLE_TYPE_IPV4 } from '../../common/constants';
 import { createCasesClientMock } from './mocks';
 import {
   validateDuplicatedKeysInRequest,
   validateDuplicatedObservableTypesInRequest,
   validateDuplicatedObservablesInRequest,
   validateObservableTypeKeyExists,
+  validateObservableValue,
 } from './validators';
 
 describe('validators', () => {
@@ -220,4 +221,20 @@ describe('validators', () => {
       );
     });
   });
+
+  describe('validateObservableValue', () => {
+    it('throws an error if any observable value is not valid', async () => {
+      expect(() =>
+        validateObservableValue(OBSERVABLE_TYPE_EMAIL.key, 'test')
+      ).toThrowErrorMatchingInlineSnapshot(
+        `"Observable value \\"test\\" is not valid for selected observable type observable-type-email."`
+      );
+    });
+
+    it('does not throw when obserable value is valid', async () => {
+      expect(() =>
+        validateObservableValue(OBSERVABLE_TYPE_EMAIL.key, 'test@test.com')
+      ).not.toThrow();
+    });
+  });
 });
diff --git a/x-pack/platform/plugins/shared/cases/server/client/validators.ts b/x-pack/platform/plugins/shared/cases/server/client/validators.ts
index 6e309600fcb17..eca5d64381866 100644
--- a/x-pack/platform/plugins/shared/cases/server/client/validators.ts
+++ b/x-pack/platform/plugins/shared/cases/server/client/validators.ts
@@ -6,6 +6,7 @@
  */
 
 import Boom from '@hapi/boom';
+import { getValidatorForObservableType } from '../../common/observables/validators';
 import { OBSERVABLE_TYPES_BUILTIN } from '../../common/constants';
 import { type CasesClient } from './client';
 import { getAvailableObservableTypesMap } from './observable_types';
@@ -127,3 +128,17 @@ export const validateObservableTypeKeyExists = async (
     throw Boom.badRequest(`Invalid observable type, key does not exist: ${observableTypeKey}`);
   }
 };
+
+export const validateObservableValue = (
+  observableTypeKey: string | undefined,
+  observableValue: unknown
+) => {
+  const validator = getValidatorForObservableType(observableTypeKey);
+  const validationError = validator(observableValue);
+
+  if (validationError) {
+    throw Boom.badRequest(
+      `Observable value "${observableValue}" is not valid for selected observable type ${observableTypeKey}.`
+    );
+  }
+};
diff --git a/x-pack/test/cases_api_integration/security_and_spaces/tests/trial/internal/observables.ts b/x-pack/test/cases_api_integration/security_and_spaces/tests/trial/internal/observables.ts
index 6945711b0d148..79cb1cbbb7eb1 100644
--- a/x-pack/test/cases_api_integration/security_and_spaces/tests/trial/internal/observables.ts
+++ b/x-pack/test/cases_api_integration/security_and_spaces/tests/trial/internal/observables.ts
@@ -53,6 +53,26 @@ export default ({ getService }: FtrProviderContext): void => {
         expect(updatedCase.observables.length).to.be.greaterThan(0);
       });
 
+      it('can returns bad request when observable value does not pass validation', async () => {
+        const postedCase = await createCase(supertest, getPostCaseRequest());
+        expect(postedCase.observables).to.eql([]);
+
+        const newObservableData = {
+          value: 'not ip actually',
+          typeKey: OBSERVABLE_TYPE_IPV4.key,
+          description: '',
+        };
+
+        await addObservable({
+          supertest,
+          caseId: postedCase.id,
+          params: {
+            observable: newObservableData,
+          },
+          expectedHttpCode: 400,
+        });
+      });
+
       it('returns bad request when using unknown observable type', async () => {
         const postedCase = await createCase(supertest, getPostCaseRequest());
         expect(postedCase.observables).to.eql([]);
@@ -103,6 +123,34 @@ export default ({ getService }: FtrProviderContext): void => {
 
         expect(updatedObservable.observables[0].value).to.be('192.168.68.1');
       });
+
+      it('returns bad request when observable value does not pass validation', async () => {
+        const postedCase = await createCase(supertest, getPostCaseRequest());
+
+        const newObservableData = {
+          value: '127.0.0.1',
+          typeKey: OBSERVABLE_TYPE_IPV4.key,
+          description: '',
+        };
+
+        const {
+          observables: [observable],
+        } = await addObservable({
+          supertest,
+          caseId: postedCase.id,
+          params: {
+            observable: newObservableData,
+          },
+        });
+
+        await updateObservable({
+          supertest,
+          params: { observable: { description: '', value: 'not ip' } },
+          caseId: postedCase.id,
+          observableId: observable.id as string,
+          expectedHttpCode: 400,
+        });
+      });
     });
 
     describe('delete observable', () => {

From af147b5cc6612bc9e5632c2004f868f8c2b2a7f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alberto=20Bl=C3=A1zquez?=
 <albertoblaz@users.noreply.github.com>
Date: Wed, 5 Mar 2025 17:21:54 +0100
Subject: [PATCH 04/12] Set from & to as optional args in @kbn/grouping
 (#213212)

## Summary

Set `from` and `to` as optional args in `getGroupingQuery`, a function
exposed by `@kbn/grouping`.

It will unblock this PR:
- https://github.com/elastic/kibana/pull/212955

### Motivation

`getGroupingQuery` returns an ES aggregation for grouping documents.
This function assumes data will be queried in a certain interval of
time. However, Asset Inventory needs to query data from the beginning of
time because the UI will not provide any time-range filter. So in order
to reuse this logic, we need to set both args as optional.

Reason for wrapping both fields in an optional `timeRange` record is to
have either both present or both undefined, not only one of them
present.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [x] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

### Risks

No risk at all. It would be a breaking change otherwise, if we had to
require args that were optional before.
---
 .../src/containers/query/index.test.ts        |  6 +++--
 .../src/containers/query/index.ts             | 23 +++++++++++--------
 .../src/containers/query/types.ts             |  6 +++--
 .../use_latest_findings_grouping.tsx          |  6 +++--
 .../use_latest_vulnerabilities_grouping.tsx   |  6 +++--
 .../grouping_settings/query_builder.ts        |  6 +++--
 6 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/platform/packages/shared/kbn-grouping/src/containers/query/index.test.ts b/src/platform/packages/shared/kbn-grouping/src/containers/query/index.test.ts
index 6ccfd8d413680..450b5c617f4ad 100644
--- a/src/platform/packages/shared/kbn-grouping/src/containers/query/index.test.ts
+++ b/src/platform/packages/shared/kbn-grouping/src/containers/query/index.test.ts
@@ -15,7 +15,10 @@ import { groupingBucket } from '../../mocks';
 
 const testProps: GroupingQueryArgs = {
   additionalFilters: [],
-  from: '2022-12-28T15:35:32.871Z',
+  timeRange: {
+    from: '2022-12-28T15:35:32.871Z',
+    to: '2023-02-23T06:59:59.999Z',
+  },
   groupByField: 'host.name',
   statsAggregations: [
     {
@@ -59,7 +62,6 @@ const testProps: GroupingQueryArgs = {
   runtimeMappings: {},
   uniqueValue: 'whatAGreatAndUniqueValue',
   size: 25,
-  to: '2023-02-23T06:59:59.999Z',
 };
 describe('group selector', () => {
   beforeEach(() => {
diff --git a/src/platform/packages/shared/kbn-grouping/src/containers/query/index.ts b/src/platform/packages/shared/kbn-grouping/src/containers/query/index.ts
index b31b0701de4f9..29ac53aa43999 100644
--- a/src/platform/packages/shared/kbn-grouping/src/containers/query/index.ts
+++ b/src/platform/packages/shared/kbn-grouping/src/containers/query/index.ts
@@ -38,7 +38,6 @@ export const MAX_QUERY_SIZE = 10000;
 
 export const getGroupingQuery = ({
   additionalFilters = [],
-  from,
   groupByField,
   pageNumber,
   rootAggregations,
@@ -46,8 +45,8 @@ export const getGroupingQuery = ({
   size = DEFAULT_GROUP_BY_FIELD_SIZE,
   sort,
   statsAggregations,
-  to,
   uniqueValue,
+  timeRange,
 }: GroupingQueryArgs): GroupingQuery => ({
   size: 0,
   runtime_mappings: {
@@ -104,14 +103,18 @@ export const getGroupingQuery = ({
     bool: {
       filter: [
         ...additionalFilters,
-        {
-          range: {
-            '@timestamp': {
-              gte: from,
-              lte: to,
-            },
-          },
-        },
+        ...(timeRange
+          ? [
+              {
+                range: {
+                  '@timestamp': {
+                    gte: timeRange.from,
+                    lte: timeRange.to,
+                  },
+                },
+              },
+            ]
+          : []),
       ],
     },
   },
diff --git a/src/platform/packages/shared/kbn-grouping/src/containers/query/types.ts b/src/platform/packages/shared/kbn-grouping/src/containers/query/types.ts
index 6a3f9635162de..8cda4f3045c45 100644
--- a/src/platform/packages/shared/kbn-grouping/src/containers/query/types.ts
+++ b/src/platform/packages/shared/kbn-grouping/src/containers/query/types.ts
@@ -32,7 +32,6 @@ export type NamedAggregation = Record<string, estypes.AggregationsAggregationCon
 
 export interface GroupingQueryArgs {
   additionalFilters: BoolAgg[];
-  from: string;
   groupByField: string;
   rootAggregations?: NamedAggregation[];
   runtimeMappings?: RunTimeMappings;
@@ -42,7 +41,10 @@ export interface GroupingQueryArgs {
   size?: number;
   sort?: Array<{ [category: string]: { order: 'asc' | 'desc' } }>;
   statsAggregations?: NamedAggregation[];
-  to: string;
+  timeRange?: {
+    from: string;
+    to: string;
+  };
 }
 
 export interface MainAggregation extends NamedAggregation {
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx
index fd277348d3dee..6d47af68ac869 100644
--- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx
+++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/configurations/latest_findings/use_latest_findings_grouping.tsx
@@ -207,8 +207,10 @@ export const useLatestFindingsGrouping = ({
     additionalFilters: query ? [query, additionalFilters] : [additionalFilters],
     groupByField: currentSelectedGroup,
     uniqueValue,
-    from: `now-${CDR_3RD_PARTY_RETENTION_POLICY}`,
-    to: 'now',
+    timeRange: {
+      from: `now-${CDR_3RD_PARTY_RETENTION_POLICY}`,
+      to: 'now',
+    },
     pageNumber: activePageIndex * pageSize,
     size: pageSize,
     sort: [{ groupByField: { order: 'desc' } }, { complianceScore: { order: 'asc' } }],
diff --git a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_latest_vulnerabilities_grouping.tsx b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_latest_vulnerabilities_grouping.tsx
index 43b22b60bcfac..24e2fc9903831 100644
--- a/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_latest_vulnerabilities_grouping.tsx
+++ b/x-pack/solutions/security/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_latest_vulnerabilities_grouping.tsx
@@ -180,8 +180,10 @@ export const useLatestVulnerabilitiesGrouping = ({
     additionalFilters: query ? [query, additionalFilters] : [additionalFilters],
     groupByField: currentSelectedGroup,
     uniqueValue,
-    from: `now-${CDR_3RD_PARTY_RETENTION_POLICY}`,
-    to: 'now',
+    timeRange: {
+      from: `now-${CDR_3RD_PARTY_RETENTION_POLICY}`,
+      to: 'now',
+    },
     pageNumber: activePageIndex * pageSize,
     size: pageSize,
     sort: [{ groupByField: { order: 'desc' } }],
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/query_builder.ts b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/query_builder.ts
index 8cfaa94b1a89b..0ee1794e384a8 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/query_builder.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/detections/components/alerts_table/grouping_settings/query_builder.ts
@@ -35,7 +35,10 @@ export const getAlertsGroupingQuery = ({
 }: AlertsGroupingQueryParams) =>
   getGroupingQuery({
     additionalFilters,
-    from,
+    timeRange: {
+      from,
+      to,
+    },
     groupByField: selectedGroup,
     statsAggregations: !isNoneGroup([selectedGroup])
       ? getAggregationsByGroupField(selectedGroup)
@@ -45,7 +48,6 @@ export const getAlertsGroupingQuery = ({
     uniqueValue,
     size: pageSize,
     sort: [{ unitsCount: { order: 'desc' } }],
-    to,
   });
 
 const getAggregationsByGroupField = (field: string): NamedAggregation[] => {

From e676a6399ca8405a2d0ace36a3e0b5fb28757aa2 Mon Sep 17 00:00:00 2001
From: Anton Dosov <anton.dosov@elastic.co>
Date: Wed, 5 Mar 2025 17:40:05 +0100
Subject: [PATCH 05/12] Clean up `REACT_18=true` variable (#213246)

## Summary

Clean up `REACT_18=true` variable post [react@18
upgrade](https://github.com/elastic/kibana/pull/209337)


Should also address issue reported in slack

> error https://registry.yarnpkg.com/react/-/react-18.2.0.tgz: Integrity
check failed for "react" [...]

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 package.json                                  |  2 --
 .../kbn-optimizer/src/common/worker_config.ts |  7 -----
 .../src/optimizer/optimizer_cache_key.test.ts |  1 -
 .../src/optimizer/optimizer_config.test.ts    | 11 -------
 .../src/optimizer/optimizer_config.ts         | 10 ++-----
 .../src/worker/webpack.config.ts              |  4 +--
 .../src/tasks/bazel_packages.ts               |  2 +-
 renovate.json                                 | 19 ------------
 .../kbn-ui-shared-deps-npm/BUILD.bazel        |  3 --
 .../kbn-ui-shared-deps-npm/webpack.config.js  |  4 +--
 .../kbn-ui-shared-deps-src/BUILD.bazel        |  3 +-
 .../kbn-ui-shared-deps-src/webpack.config.js  |  4 +--
 .../shared/kbn-test/src/jest/resolver.js      | 14 ---------
 yarn.lock                                     | 30 +++++++++----------
 14 files changed, 22 insertions(+), 92 deletions(-)

diff --git a/package.json b/package.json
index a2c5b25088b49..e550b9d9b7f32 100644
--- a/package.json
+++ b/package.json
@@ -1225,10 +1225,8 @@
     "re-resizable": "^6.9.9",
     "re2js": "0.4.3",
     "react": "~18.2.0",
-    "react-18": "npm:react@~18.2.0",
     "react-diff-view": "^3.2.1",
     "react-dom": "~18.2.0",
-    "react-dom-18": "npm:react-dom@~18.2.0",
     "react-dropzone": "^11.7.1",
     "react-fast-compare": "^2.0.4",
     "react-hook-form": "^7.44.2",
diff --git a/packages/kbn-optimizer/src/common/worker_config.ts b/packages/kbn-optimizer/src/common/worker_config.ts
index 0906ea96e3d98..6a61c3a99af07 100644
--- a/packages/kbn-optimizer/src/common/worker_config.ts
+++ b/packages/kbn-optimizer/src/common/worker_config.ts
@@ -21,7 +21,6 @@ export interface WorkerConfig {
   readonly profileWebpack: boolean;
   readonly browserslistEnv: string;
   readonly optimizerCacheKey: unknown;
-  readonly reactVersion: string;
 }
 
 export type CacheableWorkerConfig = Omit<WorkerConfig, 'watch' | 'profileWebpack' | 'cache'>;
@@ -73,11 +72,6 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       throw new Error('`browserslistEnv` must be a string');
     }
 
-    const reactVersion = parsed.reactVersion;
-    if (typeof reactVersion !== 'string') {
-      throw new Error('`reactVersion` must be a string');
-    }
-
     const themes = parseThemeTags(parsed.themeTags);
 
     return {
@@ -89,7 +83,6 @@ export function parseWorkerConfig(json: string): WorkerConfig {
       optimizerCacheKey,
       browserslistEnv,
       themeTags: themes,
-      reactVersion,
     };
   } catch (error) {
     throw new Error(`unable to parse worker config: ${error.message}`);
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
index b3fdeec1ed77e..5eba4ec93fdf3 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_cache_key.test.ts
@@ -88,7 +88,6 @@ describe('getOptimizerCacheKey()', () => {
           "browserslistEnv": "dev",
           "dist": false,
           "optimizerCacheKey": "♻",
-          "reactVersion": "17",
           "repoRoot": <absolute path>,
           "themeTags": Array [
             "borealislight",
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
index 0b07ea8c3e334..f438b32628283 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_config.test.ts
@@ -128,7 +128,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -157,7 +156,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -186,7 +184,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -214,7 +211,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -243,7 +239,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -272,7 +267,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -301,7 +295,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -331,7 +324,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -361,7 +353,6 @@ describe('OptimizerConfig::parseOptions()', () => {
           "testPlugins": false,
         },
         "profileWebpack": false,
-        "reactVersion": "17",
         "repoRoot": <absolute path>,
         "themeTags": undefined,
         "watch": false,
@@ -424,7 +415,6 @@ describe('OptimizerConfig::create()', () => {
         focus: [],
         includeCoreBundle: false,
         pluginSelector: Symbol('plugin selector'),
-        reactVersion: 17,
       })
     );
   });
@@ -448,7 +438,6 @@ describe('OptimizerConfig::create()', () => {
           Symbol(plugin2),
         ],
         "profileWebpack": Symbol(parsed profile webpack),
-        "reactVersion": 17,
         "repoRoot": Symbol(parsed repo root),
         "themeTags": Symbol(theme tags),
         "watch": Symbol(parsed watch),
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
index bc78a3ebf82aa..e22624335098d 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
@@ -163,7 +163,6 @@ export interface ParsedOptions {
   includeCoreBundle: boolean;
   themeTags: ThemeTags;
   pluginSelector: PluginSelector;
-  reactVersion: string;
 }
 
 export class OptimizerConfig {
@@ -178,7 +177,6 @@ export class OptimizerConfig {
     const includeCoreBundle = !!options.includeCoreBundle;
     const filters = options.filter || [];
     const focus = options.focus || [];
-    const reactVersion = process.env.REACT_18 ? '18' : '17';
 
     const repoRoot = options.repoRoot;
     if (!Path.isAbsolute(repoRoot)) {
@@ -223,7 +221,6 @@ export class OptimizerConfig {
       outputRoot,
       maxWorkerCount,
       profileWebpack,
-      reactVersion,
       cache,
       filters,
       focus,
@@ -281,8 +278,7 @@ export class OptimizerConfig {
       options.maxWorkerCount,
       options.dist,
       options.profileWebpack,
-      options.themeTags,
-      options.reactVersion
+      options.themeTags
     );
   }
 
@@ -297,8 +293,7 @@ export class OptimizerConfig {
     public readonly maxWorkerCount: number,
     public readonly dist: boolean,
     public readonly profileWebpack: boolean,
-    public readonly themeTags: ThemeTags,
-    public readonly reactVersion: string
+    public readonly themeTags: ThemeTags
   ) {}
 
   getWorkerConfig(optimizerCacheKey: unknown): WorkerConfig {
@@ -311,7 +306,6 @@ export class OptimizerConfig {
       optimizerCacheKey,
       themeTags: this.themeTags,
       browserslistEnv: this.dist ? 'production' : process.env.BROWSERSLIST_ENV || 'dev',
-      reactVersion: this.reactVersion,
     };
   }
 
diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
index 65d755b0c01c9..563789ee314eb 100644
--- a/packages/kbn-optimizer/src/worker/webpack.config.ts
+++ b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -293,10 +293,8 @@ export function getWebpackConfig(
           'src/core/public/styles/core_app/images'
         ),
         vega: Path.resolve(worker.repoRoot, 'node_modules/vega/build-es5/vega.js'),
-        'react-dom$':
-          worker.reactVersion === '18' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+        'react-dom$': 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
-        react: worker.reactVersion === '18' ? 'react-18' : 'react',
       },
     },
 
diff --git a/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts b/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts
index 08f82e497f45a..05358ad856610 100644
--- a/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts
+++ b/packages/kbn-plugin-helpers/src/tasks/bazel_packages.ts
@@ -13,7 +13,7 @@ import { TaskContext } from '../task_context';
 export async function buildBazelPackages({ log, dist }: TaskContext) {
   log.info('run bazel and build required artifacts for the optimizer');
 
-  const args = [`--define=REACT_18=${Boolean(process.env.REACT_18)}`];
+  const args = [];
   if (dist) args.push('--define=dist=true');
   try {
     await runBazel(
diff --git a/renovate.json b/renovate.json
index c2cfbacfa838e..3791e27775a00 100644
--- a/renovate.json
+++ b/renovate.json
@@ -318,25 +318,6 @@
       ],
       "enabled": true
     },
-    {
-      "groupName": "@elastic/appex-sharedux react-18 dependencies",
-      "matchDepNames": [
-        "react-18",
-        "react-dom-18"
-      ],
-      "reviewers": [
-        "team:appex-sharedux"
-      ],
-      "matchBaseBranches": [
-        "main"
-      ],
-      "labels": [
-        "Team:SharedUX",
-        "release_note:skip",
-        "backport:all-open"
-      ],
-      "enabled": true
-    },
     {
       "groupName": "react-markdown",
       "matchDepNames": [
diff --git a/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel b/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
index aba889fb905ac..2ea008532ba9d 100644
--- a/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
+++ b/src/platform/packages/private/kbn-ui-shared-deps-npm/BUILD.bazel
@@ -55,12 +55,10 @@ RUNTIME_DEPS = [
   "@npm//moment-timezone",
   "@npm//node-libs-browser",
   "@npm//react-dom",
-  "@npm//react-dom-18",
   "@npm//react-router-dom",
   "@npm//react-router-dom-v5-compat",
   "@npm//react-router",
   "@npm//react",
-  "@npm//react-18",
   "@npm//rxjs",
   "@npm//styled-components",
   "@npm//tslib",
@@ -100,7 +98,6 @@ webpack_cli(
     },
     "//conditions:default": {
       "NODE_ENV": "development",
-      "REACT_18": "$(REACT_18)",
     },
   })
 )
diff --git a/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js b/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
index eae896c6045e8..b49bf9a1d0b03 100644
--- a/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
+++ b/src/platform/packages/private/kbn-ui-shared-deps-npm/webpack.config.js
@@ -140,10 +140,8 @@ module.exports = (_, argv) => {
         moment: MOMENT_SRC,
         // NOTE: Used to include react profiling on bundles
         // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-        'react-dom$':
-          process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+        'react-dom$': 'react-dom/profiling',
         'scheduler/tracing': 'scheduler/tracing-profiling',
-        react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
       },
       extensions: ['.js', '.ts'],
       mainFields: ['browser', 'module', 'main'],
diff --git a/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel b/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
index dff9969d7320d..23e9b1857dd3c 100644
--- a/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
+++ b/src/platform/packages/private/kbn-ui-shared-deps-src/BUILD.bazel
@@ -58,8 +58,7 @@ webpack_cli(
       "NODE_ENV": "production",
     },
     "//conditions:default": {
-      "NODE_ENV": "development",
-      "REACT_18": "$(REACT_18)",
+      "NODE_ENV": "development"
     },
   }),
   visibility = ["//visibility:public"],
diff --git a/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js b/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
index cb65a782e6ba9..5060b675c6ae6 100644
--- a/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
+++ b/src/platform/packages/private/kbn-ui-shared-deps-src/webpack.config.js
@@ -118,10 +118,8 @@ module.exports = {
       moment: MOMENT_SRC,
       // NOTE: Used to include react profiling on bundles
       // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#webpack-4
-      'react-dom$':
-        process.env.REACT_18 === 'true' ? 'react-dom-18/profiling' : 'react-dom/profiling',
+      'react-dom$': 'react-dom/profiling',
       'scheduler/tracing': 'scheduler/tracing-profiling',
-      react: process.env.REACT_18 === 'true' ? 'react-18' : 'react',
     },
   },
 
diff --git a/src/platform/packages/shared/kbn-test/src/jest/resolver.js b/src/platform/packages/shared/kbn-test/src/jest/resolver.js
index 24a6b0f4d245a..84b7a473cf066 100644
--- a/src/platform/packages/shared/kbn-test/src/jest/resolver.js
+++ b/src/platform/packages/shared/kbn-test/src/jest/resolver.js
@@ -30,8 +30,6 @@ const STATIC_FILE_EXT =
     .split('|')
     .map((e) => `.${e}`);
 
-const IS_REACT_18 = process.env.REACT_18 === 'true';
-
 /**
  * @param {string} str
  * @returns
@@ -83,18 +81,6 @@ module.exports = (request, options) => {
     return APM_AGENT_MOCK;
   }
 
-  // routes tests to the react-18 alias package
-  if (IS_REACT_18) {
-    // routes tests to the react-18 alias package
-    if (/^react?(\/[\s\S]*)?$/.test(request)) {
-      return module.exports(request.replace('react', 'react-18'), options);
-    }
-
-    if (/^react-dom?(\/[\s\S]*)?$/.test(request)) {
-      return module.exports(request.replace('react-dom', 'react-dom-18'), options);
-    }
-  }
-
   const reqExt = Path.extname(request);
   if (reqExt) {
     const pRequest = parseRequestOrExtSuffix(request);
diff --git a/yarn.lock b/yarn.lock
index 9b861282457b3..3c42e920684e4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -28121,13 +28121,6 @@ re2js@0.4.3:
   resolved "https://registry.yarnpkg.com/re2js/-/re2js-0.4.3.tgz#1318cd0c12aa6ed3ba56d5e012311ffbfb2aef35"
   integrity sha512-EuNmh7jurhHEE8Ge/lBo9JuMLb3qf866Xjjfyovw3wPc7+hlqDkZq4LwhrCQMEI+ARWfrKrHozEndzlpNT0WDg==
 
-"react-18@npm:react@~18.2.0", react@~18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
-  dependencies:
-    loose-envify "^1.1.0"
-
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -28171,14 +28164,6 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-"react-dom-18@npm:react-dom@~18.2.0", react-dom@~18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
-  dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
-
 "react-dom@^17.0.0 || ^18.2.0 || ^19.0.0":
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.0.0.tgz#43446f1f01c65a4cd7f7588083e686a6726cfb57"
@@ -28186,6 +28171,14 @@ react-docgen@^5.0.0:
   dependencies:
     scheduler "^0.25.0"
 
+react-dom@~18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+  dependencies:
+    loose-envify "^1.1.0"
+    scheduler "^0.23.0"
+
 react-dropzone@^11.7.1:
   version "11.7.1"
   resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
@@ -28635,6 +28628,13 @@ react-window@^1.8.10:
   resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
   integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
 
+react@~18.2.0:
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+  dependencies:
+    loose-envify "^1.1.0"
+
 read-installed@~4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/read-installed/-/read-installed-4.0.3.tgz#ff9b8b67f187d1e4c29b9feb31f6b223acd19067"

From bccbb933c0e2dea4c4d23c7174bbe0be638db252 Mon Sep 17 00:00:00 2001
From: Sandra G <neptunian@users.noreply.github.com>
Date: Thu, 6 Mar 2025 00:46:02 +0800
Subject: [PATCH 06/12] [Obs AI Assistant] fix flaky test and add back test in
 settings (#213196)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Closes https://github.com/elastic/kibana/issues/191707

Summarize your PR. If it involves visual changes include a screenshot or
gif.

- Fixes flaky test`allows updating of an advanced setting` by making
sure to wait for page refresh
- Adds back test to check for toast on error
https://github.com/elastic/kibana/pull/191531

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Søren Louv-Jansen <sorenlouv@gmail.com>
---
 .../common/ui/index.ts                        |  2 +
 .../settings_security.spec.ts                 | 73 +++++++++++++++----
 2 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts b/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
index d072cc3777a7d..647f7cbcc3051 100644
--- a/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
+++ b/x-pack/test/observability_ai_assistant_functional/common/ui/index.ts
@@ -67,6 +67,8 @@ const pages = {
       'management-settings-editField-observability:aiAssistantSearchConnectorIndexPattern',
     saveButton: 'observabilityAiAssistantManagementBottomBarActionsButton',
     aiAssistantCard: 'aiAssistantSelectionPageObservabilityCard',
+    resetToDefaultLink:
+      'management-settings-resetField-observability:aiAssistantSearchConnectorIndexPattern',
   },
 };
 
diff --git a/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts b/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
index d466abfd552ea..1fd0d9d62fcf9 100644
--- a/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
+++ b/x-pack/test/observability_ai_assistant_functional/tests/feature_controls/settings_security.spec.ts
@@ -8,17 +8,18 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 import { createAndLoginUserWithCustomRole, deleteAndLogoutUser } from './helpers';
+import { interceptRequest } from '../../common/intercept_request';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
-  const browser = getService('browser');
   const PageObjects = getPageObjects(['common', 'error', 'navigationalSearch', 'security']);
   const ui = getService('observabilityAIAssistantUI');
   const testSubjects = getService('testSubjects');
+  const retry = getService('retry');
+  const toasts = getService('toasts');
+  const driver = getService('__webdriver__');
 
-  // Failing: See https://github.com/elastic/kibana/issues/191707
-  describe.skip('ai assistant management privileges', () => {
-    // FLAKY: https://github.com/elastic/kibana/issues/191707
-    describe.skip('all privileges', () => {
+  describe('ai assistant management privileges', () => {
+    describe('all privileges', () => {
       before(async () => {
         await createAndLoginUserWithCustomRole(getPageObjects, getService, {
           // we need all these privileges to view and modify Obs AI Assistant settings view
@@ -60,22 +61,68 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         await testSubjects.existOrFail(ui.pages.settings.settingsPage);
       });
       it('allows updating of an advanced setting', async () => {
-        const testSearchConnectorIndexPattern = 'my-logs-index-pattern';
+        await PageObjects.common.navigateToUrl('obsAIAssistantManagement', '', {
+          ensureCurrentUrl: false,
+          shouldLoginIfPrompted: false,
+          shouldUseHashForSubUrl: false,
+        });
+        const testSearchConnectorIndexPattern = 'my-search-index-pattern';
         const searchConnectorIndexPatternInput = await testSubjects.find(
           ui.pages.settings.searchConnectorIndexPatternInput
         );
+        // make sure the input is empty (default value)
         await searchConnectorIndexPatternInput.clearValue();
         await searchConnectorIndexPatternInput.type(testSearchConnectorIndexPattern);
         const saveButton = await testSubjects.find(ui.pages.settings.saveButton);
         await saveButton.click();
-        await browser.refresh();
-        const searchConnectorIndexPatternInputValue =
-          await searchConnectorIndexPatternInput.getAttribute('value');
-        expect(searchConnectorIndexPatternInputValue).to.be(testSearchConnectorIndexPattern);
-        // reset the value
-        await searchConnectorIndexPatternInput.clearValue();
-        await searchConnectorIndexPatternInput.type('logs-*');
+        // wait for page to refrsh
+        await testSubjects.missingOrFail(ui.pages.settings.searchConnectorIndexPatternInput, {
+          timeout: 2000,
+        });
+        // wait for the new page to fully load
+        await testSubjects.existOrFail(ui.pages.settings.searchConnectorIndexPatternInput, {
+          timeout: 2000,
+        });
+        expect(await searchConnectorIndexPatternInput.getAttribute('value')).to.be(
+          testSearchConnectorIndexPattern
+        );
+        // reset the value back to default
+        const resetToDefaultLink = await testSubjects.find(ui.pages.settings.resetToDefaultLink);
+        await resetToDefaultLink.click();
+
+        expect(await searchConnectorIndexPatternInput.getAttribute('value')).to.be('');
         await saveButton.click();
+        await testSubjects.missingOrFail(ui.pages.settings.searchConnectorIndexPatternInput, {
+          timeout: 2000,
+        });
+        // wait for the new page to fully load
+        await testSubjects.existOrFail(ui.pages.settings.searchConnectorIndexPatternInput, {
+          timeout: 2000,
+        });
+        expect(await searchConnectorIndexPatternInput.getAttribute('value')).to.be('');
+      });
+      it('displays failure toast on failed request', async () => {
+        const searchConnectorIndexPatternInput = await testSubjects.find(
+          ui.pages.settings.searchConnectorIndexPatternInput
+        );
+        await searchConnectorIndexPatternInput.clearValue();
+        await searchConnectorIndexPatternInput.type('test');
+
+        await interceptRequest(
+          driver.driver,
+          '*kibana\\/settings*',
+          (responseFactory) => {
+            return responseFactory.fail();
+          },
+          async () => {
+            await testSubjects.click(ui.pages.settings.saveButton);
+          }
+        );
+
+        await retry.waitFor('Error saving settings toast', async () => {
+          const count = await toasts.getCount();
+          return count > 0;
+        });
       });
     });
     describe('with advancedSettings read privilege', () => {

From 827219b82a637fbf65d2301e9d503f97a82b5063 Mon Sep 17 00:00:00 2001
From: Jordan <51442161+JordanSh@users.noreply.github.com>
Date: Wed, 5 Mar 2025 19:13:35 +0200
Subject: [PATCH 07/12] [Cloud Security] Asset Inventory - Universal Flyout
 Header Boxes, Tags, Fields Components (#211366)

---
 .../src/entity/index.ts                       |   7 +-
 .../components/fields_selector_table.tsx      |   9 +-
 .../hooks/use_dynamic_entity_flyout.test.ts   |  32 +++--
 .../hooks/use_dynamic_entity_flyout.ts        |  70 ++++-----
 .../asset_inventory/pages/all_assets.tsx      |  26 ++--
 .../asset_criticality_selector.tsx            |  18 +--
 .../expandable_badge_group.test.tsx           |  62 ++++++++
 .../components/expandable_badge_group.tsx     |  71 +++++++++
 .../components/fields_table.test.tsx          |  53 +++++++
 .../components/fields_table.tsx               |  85 +++++++++++
 .../components/responsive_data_cards.test.tsx |  33 +++++
 .../components/responsive_data_cards.tsx      |  66 +++++++++
 .../universal_right/content.tsx               |  26 +++-
 .../entity_details/universal_right/header.tsx | 136 +++++++++++++++---
 .../universal_right/header_data_cards.tsx     | 111 ++++++++++++++
 .../entity_details/universal_right/index.tsx  |  13 +-
 .../flyout/shared/components/flyout_title.tsx |   9 +-
 17 files changed, 727 insertions(+), 100 deletions(-)
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.test.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.test.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.test.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.tsx
 create mode 100644 x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header_data_cards.tsx

diff --git a/src/platform/packages/shared/kbn-securitysolution-ecs/src/entity/index.ts b/src/platform/packages/shared/kbn-securitysolution-ecs/src/entity/index.ts
index f9ba173a38c58..ebaf5536a69fc 100644
--- a/src/platform/packages/shared/kbn-securitysolution-ecs/src/entity/index.ts
+++ b/src/platform/packages/shared/kbn-securitysolution-ecs/src/entity/index.ts
@@ -11,6 +11,9 @@
 export interface EntityEcs {
   id: string;
   name: string;
-  type: 'universal' | 'user' | 'host' | 'service';
-  timestamp: Date;
+  type: 'container' | 'user' | 'host' | 'service';
+  tags: string[];
+  labels: Record<string, string>;
+  criticality: 'low_impact' | 'medium_impact' | 'high_impact' | 'extreme_impact' | 'unassigned';
+  category: string;
 }
diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/fields_selector_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/fields_selector_table.tsx
index 65bcb08399a48..fdb67f9cc5ed6 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/fields_selector_table.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/components/fields_selector_table.tsx
@@ -115,7 +115,12 @@ export const FieldsSelectorTable = ({
   };
   const fields = useMemo<Field[]>(
     () =>
-      filterFieldsBySearch(dataView.fields.getAll(), columns, searchQuery, isFilterSelectedEnabled),
+      filterFieldsBySearch(
+        dataView.fields?.getAll(),
+        columns,
+        searchQuery,
+        isFilterSelectedEnabled
+      ),
     [dataView, columns, searchQuery, isFilterSelectedEnabled]
   );
 
@@ -171,7 +176,7 @@ export const FieldsSelectorTable = ({
   ];
 
   const error = useMemo(() => {
-    if (!dataView || dataView.fields.length === 0) {
+    if (!dataView || dataView.fields?.length === 0) {
       return i18n.translate('xpack.securitySolution.assetInventory.allAssets.fieldsModalError', {
         defaultMessage: 'No fields found in the data view',
       });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.test.ts b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.test.ts
index 5dabdbac38e8d..873fb395ff1ef 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.test.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.test.ts
@@ -30,11 +30,18 @@ jest.mock('../../flyout/shared/hooks/use_on_expandable_flyout_close', () => ({
   useOnExpandableFlyoutClose: jest.fn(),
 }));
 
-const entity = {
+const entity: EntityEcs = {
   id: '123',
   name: 'test-entity',
-  type: 'universal',
-  timestamp: new Date(),
+  type: 'container',
+  tags: ['tag1', 'tag2'],
+  labels: { label1: 'value1', label2: 'value2' },
+  criticality: 'high_impact',
+  category: 'test',
+};
+
+const source = {
+  '@timestamp': '2025-10-01T12:00:00.000Z',
 };
 
 describe('useDynamicEntityFlyout', () => {
@@ -66,16 +73,18 @@ describe('useDynamicEntityFlyout', () => {
 
     act(() => {
       result.current.openDynamicFlyout({
-        entity: { ...entity, type: 'universal', name: 'testUniversal' },
+        entity: { ...entity, type: 'container', name: 'testUniversal' },
+        source,
         scopeId: 'scope1',
         contextId: 'context1',
       });
     });
 
+    expect(openFlyoutMock).toHaveBeenCalledTimes(1);
     expect(openFlyoutMock).toHaveBeenCalledWith({
       right: {
         id: UniversalEntityPanelKey,
-        params: { entity: { ...entity, type: 'universal', name: 'testUniversal' } },
+        params: { entity: { ...entity, type: 'container', name: 'testUniversal' }, source },
       },
     });
   });
@@ -88,11 +97,13 @@ describe('useDynamicEntityFlyout', () => {
     act(() => {
       result.current.openDynamicFlyout({
         entity: { ...entity, type: 'user', name: 'testUser' },
+        source,
         scopeId: 'scope1',
         contextId: 'context1',
       });
     });
 
+    expect(openFlyoutMock).toHaveBeenCalledTimes(1);
     expect(openFlyoutMock).toHaveBeenCalledWith({
       right: {
         id: UserPanelKey,
@@ -114,6 +125,7 @@ describe('useDynamicEntityFlyout', () => {
       });
     });
 
+    expect(openFlyoutMock).toHaveBeenCalledTimes(1);
     expect(openFlyoutMock).toHaveBeenCalledWith({
       right: {
         id: HostPanelKey,
@@ -135,6 +147,7 @@ describe('useDynamicEntityFlyout', () => {
       });
     });
 
+    expect(openFlyoutMock).toHaveBeenCalledTimes(1);
     expect(openFlyoutMock).toHaveBeenCalledWith({
       right: {
         id: ServicePanelKey,
@@ -149,7 +162,7 @@ describe('useDynamicEntityFlyout', () => {
     );
 
     act(() => {
-      result.current.openDynamicFlyout({ entity: { type: 'user' } as EntityEcs });
+      result.current.openDynamicFlyout({ entity: { type: 'user' } as EntityEcs, source });
     });
 
     expect(toastsMock.addDanger).toHaveBeenCalledWith(
@@ -161,7 +174,7 @@ describe('useDynamicEntityFlyout', () => {
     expect(onFlyoutCloseMock).toHaveBeenCalled();
 
     act(() => {
-      result.current.openDynamicFlyout({ entity: { type: 'host' } as EntityEcs });
+      result.current.openDynamicFlyout({ entity: { type: 'host' } as EntityEcs, source });
     });
 
     expect(toastsMock.addDanger).toHaveBeenCalledWith(
@@ -173,7 +186,7 @@ describe('useDynamicEntityFlyout', () => {
     expect(onFlyoutCloseMock).toHaveBeenCalled();
 
     act(() => {
-      result.current.openDynamicFlyout({ entity: { type: 'service' } as EntityEcs });
+      result.current.openDynamicFlyout({ entity: { type: 'service' } as EntityEcs, source });
     });
 
     expect(toastsMock.addDanger).toHaveBeenCalledWith(
@@ -183,6 +196,8 @@ describe('useDynamicEntityFlyout', () => {
       })
     );
     expect(onFlyoutCloseMock).toHaveBeenCalled();
+
+    expect(openFlyoutMock).toHaveBeenCalledTimes(0);
   });
 
   it('should close the flyout when closeDynamicFlyout is called', () => {
@@ -195,5 +210,6 @@ describe('useDynamicEntityFlyout', () => {
     });
 
     expect(closeFlyoutMock).toHaveBeenCalled();
+    expect(openFlyoutMock).toHaveBeenCalledTimes(0);
   });
 });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.ts b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.ts
index c0f14b9627ca2..0078c40588bbd 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.ts
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/hooks/use_dynamic_entity_flyout.ts
@@ -14,6 +14,7 @@ import {
 } from '@kbn/cloud-security-posture-common/utils/ui_metrics';
 import { METRIC_TYPE } from '@kbn/analytics';
 import { i18n } from '@kbn/i18n';
+import type { EsHitRecord } from '@kbn/discover-utils';
 import { useKibana } from '../../common/lib/kibana';
 import {
   HostPanelKey,
@@ -25,53 +26,19 @@ import { useOnExpandableFlyoutClose } from '../../flyout/shared/hooks/use_on_exp
 
 interface InventoryFlyoutProps {
   entity: EntityEcs;
+  source?: EsHitRecord['_source'];
   scopeId?: string;
   contextId?: string;
 }
 
-interface SecurityFlyoutPanelsCommonParams {
-  scopeId?: string;
-  contextId?: string;
-  [key: string]: unknown;
-}
-
-type FlyoutParams =
-  | {
-      id: typeof UniversalEntityPanelKey;
-      params: { entity: EntityEcs };
-    }
-  | { id: typeof UserPanelKey; params: { userName: string } & SecurityFlyoutPanelsCommonParams }
-  | { id: typeof HostPanelKey; params: { hostName: string } & SecurityFlyoutPanelsCommonParams }
-  | {
-      id: typeof ServicePanelKey;
-      params: { serviceName: string } & SecurityFlyoutPanelsCommonParams;
-    };
-
-const getFlyoutParamsByEntity = ({
-  entity,
-  scopeId,
-  contextId,
-}: InventoryFlyoutProps): FlyoutParams => {
-  const entitiesFlyoutParams: Record<EntityEcs['type'], FlyoutParams> = {
-    universal: { id: UniversalEntityPanelKey, params: { entity } },
-    user: { id: UserPanelKey, params: { userName: entity.name, scopeId, contextId } },
-    host: { id: HostPanelKey, params: { hostName: entity.name, scopeId, contextId } },
-    service: { id: ServicePanelKey, params: { serviceName: entity.name, scopeId, contextId } },
-  } as const;
-
-  return entitiesFlyoutParams[entity.type];
-};
-
 export const useDynamicEntityFlyout = ({ onFlyoutClose }: { onFlyoutClose: () => void }) => {
   const { openFlyout, closeFlyout } = useExpandableFlyoutApi();
   const { notifications } = useKibana().services;
   useOnExpandableFlyoutClose({ callback: onFlyoutClose });
 
-  const openDynamicFlyout = ({ entity, scopeId, contextId }: InventoryFlyoutProps) => {
-    const entityFlyoutParams = getFlyoutParamsByEntity({ entity, scopeId, contextId });
-
+  const openDynamicFlyout = ({ entity, source, scopeId, contextId }: InventoryFlyoutProps) => {
     // User, Host, and Service entity flyouts rely on entity name to fetch required data
-    if (entity.type !== 'universal' && !entity.name) {
+    if (['user', 'host', 'service'].includes(entity.type) && !entity.name) {
       notifications.toasts.addDanger({
         title: i18n.translate(
           'xpack.securitySolution.assetInventory.openFlyout.missingEntityNameTitle',
@@ -88,14 +55,29 @@ export const useDynamicEntityFlyout = ({ onFlyoutClose }: { onFlyoutClose: () =>
       return;
     }
 
-    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, ASSET_INVENTORY_EXPAND_FLYOUT_SUCCESS);
+    switch (entity.type) {
+      case 'user':
+        openFlyout({
+          right: { id: UserPanelKey, params: { userName: entity.name, scopeId, contextId } },
+        });
+        break;
+      case 'host':
+        openFlyout({
+          right: { id: HostPanelKey, params: { hostName: entity.name, scopeId, contextId } },
+        });
+        break;
+      case 'service':
+        openFlyout({
+          right: { id: ServicePanelKey, params: { serviceName: entity.name, scopeId, contextId } },
+        });
+        break;
 
-    openFlyout({
-      right: {
-        id: entityFlyoutParams.id || UniversalEntityPanelKey,
-        params: entityFlyoutParams.params,
-      },
-    });
+      default:
+        openFlyout({ right: { id: UniversalEntityPanelKey, params: { entity, source } } });
+        break;
+    }
+
+    uiMetricService.trackUiMetric(METRIC_TYPE.CLICK, ASSET_INVENTORY_EXPAND_FLYOUT_SUCCESS);
   };
 
   const closeDynamicFlyout = () => {
diff --git a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/pages/all_assets.tsx b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/pages/all_assets.tsx
index 80641a94a3a27..ab991d6086c68 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/pages/all_assets.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/asset_inventory/pages/all_assets.tsx
@@ -146,12 +146,19 @@ const getDefaultQuery = ({ query, filters }: AssetsBaseURLQuery): URLQuery => ({
 });
 
 // TODO: Asset Inventory - adjust and remove type casting once we have real universal entity data
-const getEntity = (row: DataTableRecord): EntityEcs => {
+const getEntity = (record: DataTableRecord) => {
+  const { _source } = record.raw;
+
+  const entityMock = {
+    tags: ['infrastructure', 'linux', 'admin', 'active'],
+    labels: { Group: 'cloud-sec-dev', Environment: 'Production' },
+    id: 'mock-entity-id',
+    criticality: 'low_impact',
+  } as unknown as EntityEcs;
+
   return {
-    id: (row.flattened['asset.name'] as string) || '',
-    name: (row.flattened['asset.name'] as string) || '',
-    timestamp: row.flattened['@timestamp'] as Date,
-    type: 'universal',
+    entity: { ...(_source?.entity || {}), ...entityMock },
+    source: _source || {},
   };
 };
 
@@ -181,12 +188,13 @@ export const AllAssets = () => {
     onFlyoutClose: () => setExpandedDoc(undefined),
   });
 
-  const onExpandDocClick = (doc?: DataTableRecord | undefined) => {
-    if (doc) {
-      const entity = getEntity(doc);
-      setExpandedDoc(doc); // Table is expecting the same doc ref to highlight the selected row
+  const onExpandDocClick = (record?: DataTableRecord | undefined) => {
+    if (record) {
+      const { entity, source } = getEntity(record);
+      setExpandedDoc(record); // Table is expecting the same record ref to highlight the selected row
       openDynamicFlyout({
         entity,
+        source,
         scopeId: ASSET_INVENTORY_TABLE_ID,
         contextId: ASSET_INVENTORY_TABLE_ID,
       });
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
index 60ecd975697c7..f7561cd75ade9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_selector.tsx
@@ -235,7 +235,7 @@ const AssetCriticalityModal: React.FC<ModalProps> = ({
       <EuiModalBody>
         <EuiSuperSelect
           id={basicSelectId}
-          options={options}
+          options={assetCriticalityOptions}
           valueOfSelected={value}
           onChange={setNewValue}
           aria-label={PICK_ASSET_CRITICALITY}
@@ -280,13 +280,15 @@ const option = (
     <AssetCriticalityBadge criticalityLevel={level} style={{ lineHeight: 'inherit' }} />
   ),
 });
-const options: Array<EuiSuperSelectOption<CriticalityLevelWithUnassigned>> = [
-  option('unassigned'),
-  option('low_impact'),
-  option('medium_impact'),
-  option('high_impact'),
-  option('extreme_impact'),
-];
+
+export const assetCriticalityOptions: Array<EuiSuperSelectOption<CriticalityLevelWithUnassigned>> =
+  [
+    option('unassigned'),
+    option('low_impact'),
+    option('medium_impact'),
+    option('high_impact'),
+    option('extreme_impact'),
+  ];
 
 export const AssetCriticalityAccordion = React.memo(AssetCriticalityAccordionComponent);
 AssetCriticalityAccordion.displayName = 'AssetCriticalityAccordion';
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.test.tsx
new file mode 100644
index 0000000000000..f31fe1ded8913
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.test.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ExpandableBadgeGroup } from './expandable_badge_group';
+
+const badgeProps = [
+  { color: 'hollow', children: 'Badge 1' },
+  { color: 'hollow', children: 'Badge 2' },
+  { color: 'hollow', children: 'Badge 3' },
+  { color: 'hollow', children: 'Badge 4' },
+];
+
+const badgePropsWithElement = [
+  { color: 'hollow', children: <span>{'Badge 1 with element'}</span> },
+  { color: 'hollow', children: <span>{'Badge 2 with element'}</span> },
+  { color: 'hollow', children: <span>{'Badge 3 with element'}</span> },
+  { color: 'hollow', children: <span>{'Badge 4 with element'}</span> },
+];
+
+describe('ExpandableBadgeGroup', () => {
+  it('renders all badges when initialBadgeLimit is not set', () => {
+    render(<ExpandableBadgeGroup badges={badgeProps} />);
+    badgeProps.forEach((badge) => {
+      expect(screen.getByText(badge.children)).toBeInTheDocument();
+    });
+  });
+
+  it('renders limited badges and expand button when initialBadgeLimit is set', () => {
+    render(<ExpandableBadgeGroup badges={badgeProps} initialBadgeLimit={2} />);
+    expect(screen.getByText('Badge 1')).toBeInTheDocument();
+    expect(screen.getByText('Badge 2')).toBeInTheDocument();
+    expect(screen.queryByText('Badge 3')).not.toBeInTheDocument();
+    expect(screen.queryByText('Badge 4')).not.toBeInTheDocument();
+    expect(screen.getByText('+2')).toBeInTheDocument();
+  });
+
+  it('expands to show all badges when expand button is clicked', () => {
+    render(<ExpandableBadgeGroup badges={badgeProps} initialBadgeLimit={2} />);
+    fireEvent.click(screen.getByText('+2'));
+    badgeProps.forEach((badge) => {
+      expect(screen.getByText(badge.children)).toBeInTheDocument();
+    });
+  });
+
+  it('applies maxHeight style when maxHeight is set', () => {
+    const { container } = render(<ExpandableBadgeGroup badges={badgeProps} maxHeight={100} />);
+    expect(container.firstChild).toHaveStyle('max-height: 100px');
+  });
+
+  it('renders badges with children as React elements', () => {
+    render(<ExpandableBadgeGroup badges={badgePropsWithElement} />);
+    badgePropsWithElement.forEach((badge) => {
+      expect(screen.getByText(badge.children.props.children)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.tsx
new file mode 100644
index 0000000000000..839fdf786a61a
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/expandable_badge_group.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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useMemo } from 'react';
+import { EuiBadge, EuiBadgeGroup } from '@elastic/eui';
+import type { EuiBadgeProps } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+interface ExpandableBadgeGroupProps {
+  /** Array of EuiBadges to display */
+  badges: EuiBadgeProps[];
+  /** The initial number of badges to show before expanding. Defaults to 'all' if not set */
+  initialBadgeLimit?: number | 'all';
+  /** The maximum height of the badge group in pixels. If not set the expandable container will not have inner scrolling */
+  maxHeight?: number;
+}
+
+/**
+ * A component that displays a group of badges with a limited initial display and an expansion option.
+ *
+ * The component initially shows a limited number of badges (or all if `initialBadgeLimit` is not set) and provides a "+n" badge to expand and show all badges.
+ * The badge group is scrollable if the badges exceed the `maxHeight`.
+ */
+export const ExpandableBadgeGroup = ({
+  badges,
+  initialBadgeLimit = 'all',
+  maxHeight,
+}: ExpandableBadgeGroupProps) => {
+  const [visibleBadgesCount, setVisibleBadgesCount] = useState<number | 'all'>(initialBadgeLimit);
+
+  // Calculate the number of remaining badges. If 'all' badges are shown, the remaining count is 0.
+  const remainingCount = visibleBadgesCount === 'all' ? 0 : badges.length - visibleBadgesCount;
+  const maxScrollHeight = maxHeight ? `${maxHeight}px` : 'initial';
+
+  const badgeElements = useMemo(
+    () => badges.map((badge, index) => <EuiBadge key={index} {...badge} />),
+    [badges]
+  );
+
+  return (
+    <EuiBadgeGroup
+      gutterSize="s"
+      style={{
+        maxHeight: maxScrollHeight,
+        overflowY: 'auto',
+      }}
+    >
+      {
+        // Show all badges if 'all' is set, otherwise show the first `badgesToShow` badges
+        visibleBadgesCount === 'all' ? badgeElements : badgeElements.slice(0, visibleBadgesCount)
+      }
+      {
+        // Show the expand badge if there are remaining badges to show
+        remainingCount > 0 && visibleBadgesCount !== 'all' && (
+          <EuiBadge
+            color="hollow"
+            onClick={() => setVisibleBadgesCount('all')}
+            onClickAriaLabel={i18n.translate(
+              'xpack.securitySolution.expandableBadgeGroup.expandBadgeAriaLabel',
+              { defaultMessage: 'Expand Remaining Badges' }
+            )}
+          >{`+${remainingCount}`}</EuiBadge>
+        )
+      }
+    </EuiBadgeGroup>
+  );
+};
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.test.tsx
new file mode 100644
index 0000000000000..5753c9a153d15
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.test.tsx
@@ -0,0 +1,53 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { FieldsTable } from './fields_table';
+
+const mockDocument = {
+  field1: 'value1',
+  field2: true,
+  field3: null,
+  field4: {
+    nestedField1: 'nestedValue1',
+    nestedField2: 123,
+  },
+};
+
+describe('FieldsTable', () => {
+  it('renders the table with flattened fields and values', () => {
+    render(<FieldsTable document={mockDocument} />);
+
+    expect(screen.getByText('field1')).toBeInTheDocument();
+    expect(screen.getByText('value1')).toBeInTheDocument();
+    expect(screen.getByText('field2')).toBeInTheDocument();
+    expect(screen.getByText('true')).toBeInTheDocument();
+    expect(screen.getByText('field3')).toBeInTheDocument();
+    expect(screen.getByText('null')).toBeInTheDocument();
+    expect(screen.getByText('field4.nestedField1')).toBeInTheDocument();
+    expect(screen.getByText('nestedValue1')).toBeInTheDocument();
+    expect(screen.getByText('field4.nestedField2')).toBeInTheDocument();
+    expect(screen.getByText('123')).toBeInTheDocument();
+  });
+
+  it('renders undefined values correctly', () => {
+    const documentWithUndefined = { field1: undefined };
+    render(<FieldsTable document={documentWithUndefined} />);
+
+    expect(screen.getByText('field1')).toBeInTheDocument();
+    expect(screen.getByText('undefined')).toBeInTheDocument();
+  });
+
+  it('renders object values correctly', () => {
+    const documentWithObject = { field1: { nestedField: 'nestedValue' } };
+    render(<FieldsTable document={documentWithObject} />);
+
+    expect(screen.getByText('field1.nestedField')).toBeInTheDocument();
+    expect(screen.getByText('nestedValue')).toBeInTheDocument();
+  });
+});
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.tsx
new file mode 100644
index 0000000000000..8653afa2f2d81
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/fields_table.tsx
@@ -0,0 +1,85 @@
+/*
+ * 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 type { EuiInMemoryTableProps } from '@elastic/eui';
+import { EuiCode, EuiCodeBlock, EuiInMemoryTable, EuiText } from '@elastic/eui';
+import React from 'react';
+import { getFlattenedObject } from '@kbn/std';
+import { i18n } from '@kbn/i18n';
+
+interface FlattenedItem {
+  key: string; // flattened dot notation object path for an object;
+  value: unknown;
+}
+
+const getDescriptionDisplay = (value: unknown) => {
+  if (value === undefined) return 'undefined';
+  if (typeof value === 'boolean' || value === null) {
+    return <EuiCode>{JSON.stringify(value)}</EuiCode>;
+  }
+
+  if (typeof value === 'object') {
+    return (
+      <EuiCodeBlock isCopyable={true} overflowHeight={300}>
+        {JSON.stringify(value, null, 2)}
+      </EuiCodeBlock>
+    );
+  }
+
+  return <EuiText size="s">{value as string}</EuiText>;
+};
+
+const search: EuiInMemoryTableProps<FlattenedItem>['search'] = {
+  box: {
+    incremental: true,
+  },
+};
+
+const sorting: EuiInMemoryTableProps<FlattenedItem>['sorting'] = {
+  sort: {
+    field: 'key',
+    direction: 'asc',
+  },
+};
+
+const pagination: EuiInMemoryTableProps<FlattenedItem>['pagination'] = {
+  initialPageSize: 100,
+  showPerPageOptions: false,
+};
+
+const columns: EuiInMemoryTableProps<FlattenedItem>['columns'] = [
+  {
+    field: 'key',
+    name: i18n.translate('xpack.securitySolution.fieldsTable.fieldColumnLabel', {
+      defaultMessage: 'Field',
+    }),
+    width: '25%',
+  },
+  {
+    field: 'value',
+    name: i18n.translate('xpack.securitySolution.fieldsTable.valueColumnLabel', {
+      defaultMessage: 'Value',
+    }),
+    render: (value: unknown) => <div style={{ width: '100%' }}>{getDescriptionDisplay(value)}</div>,
+  },
+];
+
+const getFlattenedItems = (resource: Record<string, unknown>) =>
+  Object.entries(getFlattenedObject(resource)).map(([key, value]) => ({ key, value }));
+
+/**
+ * A component that displays a table of flattened fields and values from a resource object.
+ */
+export const FieldsTable = ({ document }: { document: Record<string, unknown> }) => (
+  <EuiInMemoryTable
+    items={getFlattenedItems(document)}
+    columns={columns}
+    sorting={sorting}
+    search={search}
+    pagination={pagination}
+  />
+);
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.test.tsx
new file mode 100644
index 0000000000000..252b087348199
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.test.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ResponsiveDataCards } from './responsive_data_cards';
+
+const cards = [
+  { title: 'Card 1', description: 'Description 1' },
+  { title: 'Card 2', description: 'Description 2' },
+  { title: 'Card 3', description: 'Description 3' },
+  { title: 'Card 4', description: 'Description 4' },
+];
+
+describe('ResponsiveDataCards', () => {
+  it('renders the correct number of cards', () => {
+    render(<ResponsiveDataCards cards={cards} />);
+    const renderedCards = screen.getAllByTestId('responsive-data-card');
+    expect(renderedCards).toHaveLength(cards.length);
+  });
+
+  it('renders card titles and descriptions correctly', () => {
+    render(<ResponsiveDataCards cards={cards} />);
+    cards.forEach(({ title, description }) => {
+      expect(screen.getByText(title)).toBeInTheDocument();
+      expect(screen.getByText(description)).toBeInTheDocument();
+    });
+  });
+});
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.tsx
new file mode 100644
index 0000000000000..c7c933c75e822
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/components/responsive_data_cards.tsx
@@ -0,0 +1,66 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { css } from '@emotion/react';
+import { EuiCard, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
+import type { EuiCardProps } from '@elastic/eui/src/components/card/card';
+
+interface ResponsiveDataCardsProps {
+  /**
+   * An array of EuiCardProps objects, defining the cards to be displayed.
+   */
+  cards: Array<Pick<EuiCardProps, 'title' | 'description'>>;
+  /**
+   * The width (in pixels) at which the cards should collapse from a row layout to two columns layout.
+   * Defaults to 750.
+   */
+  collapseWidth?: number;
+}
+
+/**
+ * A component that displays a group of data cards in a responsive layout.
+ * Depending on the width of the container, the cards will be displayed in a row layout or a two columns layout.
+ */
+export const ResponsiveDataCards = ({ cards, collapseWidth = 750 }: ResponsiveDataCardsProps) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
+    <EuiFlexGroup
+      css={css`
+        container-type: inline-size;
+      `}
+      gutterSize="s"
+      responsive={false}
+      wrap
+    >
+      {cards.map((card, index) => (
+        <EuiFlexItem
+          key={index}
+          css={css`
+            flex-basis: calc(25% - ${euiTheme.size.s});
+            width: calc(25% - ${euiTheme.size.s});
+
+            @container (max-width: ${collapseWidth}px) {
+              flex: calc(50% - ${euiTheme.size.s});
+              width: calc(50% - ${euiTheme.size.s});
+            }
+          `}
+        >
+          <EuiCard
+            data-test-subj="responsive-data-card"
+            title={card.title}
+            description={card.description}
+            textAlign="left"
+            titleSize="xs"
+            hasBorder
+          />
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
+  );
+};
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/content.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/content.tsx
index 5226ed0379a2e..032f5b0e9842b 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/content.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/content.tsx
@@ -6,13 +6,31 @@
  */
 
 import React from 'react';
-import type { EntityEcs } from '@kbn/securitysolution-ecs/src/entity';
+import type { EsHitRecord } from '@kbn/discover-utils';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { FieldsTable } from './components/fields_table';
+import { ExpandableSection } from '../../document_details/right/components/expandable_section';
 import { FlyoutBody } from '../../shared/components/flyout_body';
 
 interface UniversalEntityFlyoutContentProps {
-  entity: EntityEcs;
+  source: EsHitRecord['_source'];
 }
 
-export const UniversalEntityFlyoutContent = ({ entity }: UniversalEntityFlyoutContentProps) => {
-  return <FlyoutBody>{entity.type}</FlyoutBody>;
+export const UniversalEntityFlyoutContent = ({ source }: UniversalEntityFlyoutContentProps) => {
+  return (
+    <FlyoutBody>
+      <ExpandableSection
+        title={
+          <FormattedMessage
+            id="xpack.securitySolution.universalEntityFlyout.flyoutContent.expandableSection.fieldsLabel"
+            defaultMessage="Fields"
+          />
+        }
+        expanded
+        localStorageKey={'universal_flyout:overview:fields_table'}
+      >
+        <FieldsTable document={source || {}} />
+      </ExpandableSection>
+    </FlyoutBody>
+  );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header.tsx
index 2aa961882d408..4ee8428480144 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header.tsx
@@ -5,34 +5,134 @@
  * 2.0.
  */
 
-import { EuiSpacer, EuiText, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
-import React from 'react';
-
+import React, { useMemo } from 'react';
+import { css } from '@emotion/react';
+import type { IconType } from '@elastic/eui';
+import { EuiSpacer, EuiText, EuiFlexItem, EuiFlexGroup, useEuiTheme } from '@elastic/eui';
 import type { EntityEcs } from '@kbn/securitysolution-ecs/src/entity';
+import type { EntityType } from '../../../../common/entity_analytics/types';
+import { ExpandableBadgeGroup } from './components/expandable_badge_group';
+import { HeaderDataCards } from './header_data_cards';
 import { EntityIconByType } from '../../../entity_analytics/components/entity_store/helpers';
 import { PreferenceFormattedDate } from '../../../common/components/formatted_date';
 import { FlyoutHeader } from '../../shared/components/flyout_header';
 import { FlyoutTitle } from '../../shared/components/flyout_title';
 
+const initialBadgeLimit = 3;
+const maxBadgeContainerHeight = 180;
+
+const HeaderTags = ({ tags, labels }: { tags: EntityEcs['tags']; labels: EntityEcs['labels'] }) => {
+  const { euiTheme } = useEuiTheme();
+
+  const tagBadges = useMemo(
+    () =>
+      tags?.map((tag) => ({
+        color: 'hollow',
+        children: tag,
+      })),
+    [tags]
+  );
+
+  const labelBadges = useMemo(
+    () =>
+      labels &&
+      Object.entries(labels)?.map(([key, value]) => ({
+        color: 'hollow',
+        children: (
+          <>
+            <span
+              css={css`
+                color: ${euiTheme.colors.disabledText};
+                border-right: ${euiTheme.border.thick};
+                padding-right: ${euiTheme.size.xs};
+              `}
+            >
+              {key}
+            </span>
+            <span
+              css={css`
+                padding-left: ${euiTheme.size.xs};
+              `}
+            >
+              {value}
+            </span>
+          </>
+        ),
+      })),
+    [labels, euiTheme.colors.disabledText, euiTheme.border.thick, euiTheme.size.xs]
+  );
+
+  const allBadges = [...(tagBadges || []), ...(labelBadges || [])];
+
+  return (
+    <ExpandableBadgeGroup
+      badges={allBadges}
+      initialBadgeLimit={initialBadgeLimit}
+      maxHeight={maxBadgeContainerHeight}
+    />
+  );
+};
+
 interface UniversalEntityFlyoutHeaderProps {
   entity: EntityEcs;
+  timestamp?: Date;
+}
+
+// TODO: Asset Inventory - move this to a shared location, for now it's here as a mock since we dont have generic entities yet
+enum GenericEntityType {
+  container = 'container',
 }
 
-export const UniversalEntityFlyoutHeader = ({ entity }: UniversalEntityFlyoutHeaderProps) => {
+export const UniversalEntityIconByType: Record<GenericEntityType | EntityType, IconType> = {
+  ...EntityIconByType,
+  container: 'container',
+};
+
+export const UniversalEntityFlyoutHeader = ({
+  entity,
+  timestamp,
+}: UniversalEntityFlyoutHeaderProps) => {
+  const { euiTheme } = useEuiTheme();
+
   return (
-    <FlyoutHeader data-test-subj="service-panel-header">
-      <EuiFlexGroup gutterSize="s" responsive={false} direction="column">
-        <EuiFlexItem grow={false}>
-          <EuiText size="xs" data-test-subj={'service-panel-header-lastSeen'}>
-            <PreferenceFormattedDate value={entity?.timestamp} />
-            <EuiSpacer size="xs" />
-          </EuiText>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          {/* @ts-ignore Fix it once genetric entity is introduce*/}
-          <FlyoutTitle title={entity?.id} iconType={EntityIconByType[entity?.type]} />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </FlyoutHeader>
+    <>
+      <FlyoutHeader>
+        <EuiFlexGroup gutterSize="s" responsive={false} direction="column">
+          {timestamp && (
+            <EuiFlexItem grow={false}>
+              <EuiText size="xs">
+                <PreferenceFormattedDate value={timestamp} />
+                <EuiSpacer size="xs" />
+              </EuiText>
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem grow={false}>
+            <FlyoutTitle
+              title={entity?.name}
+              iconType={UniversalEntityIconByType[entity?.type] || 'globe'}
+              iconColor="primary"
+            />
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </FlyoutHeader>
+      <div
+        css={css`
+          margin: ${euiTheme.size.s};
+        `}
+      >
+        <HeaderDataCards
+          id={entity.id}
+          type={entity.type}
+          category={entity.category}
+          criticality={entity.criticality}
+        />
+        {(entity.tags || entity.labels) && (
+          <>
+            <EuiSpacer size="s" />
+            <HeaderTags tags={entity.tags} labels={entity.labels} />
+          </>
+        )}
+      </div>
+    </>
   );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header_data_cards.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header_data_cards.tsx
new file mode 100644
index 0000000000000..7bc0bc16e6ea6
--- /dev/null
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/header_data_cards.tsx
@@ -0,0 +1,111 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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 the Elastic License
+ * 2.0.
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  EuiButtonIcon,
+  EuiCopy,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSuperSelect,
+  EuiTextTruncate,
+} from '@elastic/eui';
+import { css } from '@emotion/react';
+import { i18n } from '@kbn/i18n';
+import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types';
+import { assetCriticalityOptions } from '../../../entity_analytics/components/asset_criticality/asset_criticality_selector';
+import { ResponsiveDataCards } from './components/responsive_data_cards';
+
+export const HeaderDataCards = ({
+  criticality,
+  id,
+  category,
+  type,
+}: {
+  criticality?: CriticalityLevelWithUnassigned;
+  id: string;
+  category: string;
+  type: string;
+}) => {
+  const [selectValue, setSelectValue] = useState<CriticalityLevelWithUnassigned>(
+    criticality || 'unassigned'
+  );
+
+  const cards = useMemo(
+    () => [
+      {
+        title: i18n.translate(
+          'xpack.securitySolution.universalEntityFlyout.flyoutHeader.headerDataBoxes.criticalityLabel',
+          {
+            defaultMessage: 'Criticality',
+          }
+        ),
+        description: (
+          <div
+            css={css`
+              width: fit-content;
+            `}
+          >
+            <EuiSuperSelect
+              popoverProps={{
+                repositionOnScroll: true,
+                panelMinWidth: 200,
+              }}
+              fullWidth={false}
+              compressed
+              hasDividers
+              options={assetCriticalityOptions}
+              valueOfSelected={selectValue}
+              onChange={(newValue) => setSelectValue(newValue)}
+            />
+          </div>
+        ),
+      },
+      {
+        title: (
+          <EuiFlexGroup justifyContent={'spaceBetween'} wrap={false} responsive={false}>
+            <EuiFlexItem grow={false}>{'ID'}</EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiCopy textToCopy={id}>
+                {(copy) => <EuiButtonIcon onClick={copy} iconType="document" color="text" />}
+              </EuiCopy>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ),
+        description: <EuiTextTruncate text={id} />,
+      },
+      {
+        title: i18n.translate(
+          'xpack.securitySolution.universalEntityFlyout.flyoutHeader.headerDataBoxes.categoryLabel',
+          {
+            defaultMessage: 'Category',
+          }
+        ),
+        description: <EuiTextTruncate text={category || ''} />,
+      },
+      {
+        title: i18n.translate(
+          'xpack.securitySolution.universalEntityFlyout.flyoutHeader.headerDataBoxes.typeLabel',
+          {
+            defaultMessage: 'Type',
+          }
+        ),
+        description: <EuiTextTruncate text={type || ''} />,
+      },
+    ],
+    [selectValue, id, category, type]
+  );
+
+  return <ResponsiveDataCards cards={cards} collapseWidth={750} />;
+};
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/index.tsx
index ed9f1a7074eec..dc6a3a13d1b08 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/universal_right/index.tsx
@@ -13,12 +13,14 @@ import {
 } from '@kbn/cloud-security-posture-common/utils/ui_metrics';
 import { METRIC_TYPE } from '@kbn/analytics';
 import type { EntityEcs } from '@kbn/securitysolution-ecs/src/entity';
+import type { EsHitRecord } from '@kbn/discover-utils';
 import { UniversalEntityFlyoutHeader } from './header';
 import { UniversalEntityFlyoutContent } from './content';
 import { FlyoutNavigation } from '../../shared/components/flyout_navigation';
 
 export interface UniversalEntityPanelProps {
   entity: EntityEcs;
+  source: EsHitRecord['_source'];
   /** this is because FlyoutPanelProps defined params as Record<string, unknown> {@link FlyoutPanelProps#params} */
   [key: string]: unknown;
 }
@@ -28,16 +30,21 @@ export interface UniversalEntityPanelExpandableFlyoutProps extends FlyoutPanelPr
   params: UniversalEntityPanelProps;
 }
 
-export const UniversalEntityPanel = ({ entity }: UniversalEntityPanelProps) => {
+const isDate = (value: unknown): value is Date => value instanceof Date;
+
+export const UniversalEntityPanel = ({ entity, source }: UniversalEntityPanelProps) => {
   useEffect(() => {
     uiMetricService.trackUiMetric(METRIC_TYPE.COUNT, UNIVERSAL_ENTITY_FLYOUT_OPENED);
   }, [entity]);
 
+  const docTimestamp = source?.['@timestamp'];
+  const timestamp = isDate(docTimestamp) ? docTimestamp : undefined;
+
   return (
     <>
       <FlyoutNavigation flyoutIsExpandable={false} />
-      <UniversalEntityFlyoutHeader entity={entity} />
-      <UniversalEntityFlyoutContent entity={entity} />
+      <UniversalEntityFlyoutHeader entity={entity} timestamp={timestamp} />
+      <UniversalEntityFlyoutContent source={source} />
     </>
   );
 };
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx
index 89a62bc2bf6d9..68335828d794c 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/flyout_title.tsx
@@ -28,6 +28,10 @@ export interface FlyoutTitleProps {
    * Optional icon type. If null, no icon is displayed
    */
   iconType?: EuiButtonEmptyProps['iconType'];
+  /**
+   * Optional icon color
+   */
+  iconColor?: EuiButtonEmptyProps['color'];
   /**
    * Optional boolean to indicate if title is a link. If true, a popout icon is appended
    * and the title text is changed to link color
@@ -43,12 +47,13 @@ export interface FlyoutTitleProps {
  * Title component with optional icon to indicate the type of document, can be used for text or a link
  */
 export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
-  ({ title, iconType, isLink = false, 'data-test-subj': dataTestSubj }) => {
+  ({ title, iconType, iconColor, isLink = false, 'data-test-subj': dataTestSubj }) => {
     const { euiTheme } = useEuiTheme();
 
     const titleIcon = useMemo(() => {
       return iconType ? (
         <EuiIcon
+          color={iconColor}
           type={iconType}
           size="m"
           className="eui-alignBaseline"
@@ -58,7 +63,7 @@ export const FlyoutTitle: FC<FlyoutTitleProps> = memo(
           `}
         />
       ) : null;
-    }, [dataTestSubj, iconType, euiTheme.size.xs]);
+    }, [iconType, iconColor, dataTestSubj, euiTheme.size.xs]);
 
     const titleComponent = useMemo(() => {
       return (

From a1c520c49d26c2292d15d148a759d1dc72efc7d1 Mon Sep 17 00:00:00 2001
From: Pete Harverson <pete@elastic.co>
Date: Wed, 5 Mar 2025 17:27:03 +0000
Subject: [PATCH 08/12] [ML] Migrate anomaly explorer components from SCSS to
 Emotion (#212793)

## Summary

Part of: https://github.com/elastic/kibana/issues/140695
Migrates SCSS to emotion for several of the components used across the
Anomaly Explorer and Single Metric Viewer.

Removes the following SCSS files:

```
- x-pack/platform/plugins/shared/m/public/application/components/annotations/annotation_description_list/_index.scss
- x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss
- x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss
- x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss
- x-pack/platform/plugins/shared/ml/public/application/components/detector_description_list/_detector_description_list.scss
- x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_index.scss
- x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
- x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss
```

Components edited:
- Help popover

<img width="759" alt="Screenshot 2025-02-28 at 16 28 27"
src="https://github.com/user-attachments/assets/bc182d45-465b-406c-b122-921576ae8304"
/>

- Annotation description list:

<img width="952" alt="Screenshot 2025-02-28 at 16 29 16"
src="https://github.com/user-attachments/assets/71cae50c-41be-4299-8362-92567b73188e"
/>


- Rule editor detector description list:

<img width="674" alt="Screenshot 2025-02-28 at 16 30 02"
src="https://github.com/user-attachments/assets/f94a6878-3063-488f-85c5-2e6ee77bf1ad"
/>

- Anomalies table entity filters:

<img width="506" alt="Screenshot 2025-02-28 at 16 30 53"
src="https://github.com/user-attachments/assets/f074f175-9310-4a70-97b6-09be44af2ad2"
/>

- Explorer chart label badge and entity filters:

<img width="362" alt="Screenshot 2025-02-28 at 16 31 37"
src="https://github.com/user-attachments/assets/dd46ab81-e115-4e8c-ae00-864c83127c16"
/>

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 .../translations/translations/fr-FR.json      |   2 -
 .../translations/translations/ja-JP.json      |   2 -
 .../translations/translations/zh-CN.json      |   2 -
 .../shared/ml/public/application/_index.scss  |   2 -
 .../__snapshots__/index.test.tsx.snap         |   1 -
 .../annotation_description_list/_index.scss   |   6 -
 .../annotation_description_list/index.tsx     |   1 -
 .../anomalies_table/influencers_cell.js       | 174 ------------------
 .../anomalies_table/influencers_cell.tsx      | 157 ++++++++++++++++
 .../components/entity_cell/_index.scss        |   1 -
 .../components/entity_cell/entity_cell.scss   |  26 ---
 .../components/entity_cell/entity_cell.tsx    | 130 +++++++------
 .../entity_cell/entity_cell_styles.ts         |  38 ++++
 .../components/help_popover/help_popover.scss |   9 -
 .../components/help_popover/help_popover.tsx  |   9 +-
 .../help_popover/help_popover_styles.ts       |  25 +++
 .../influencers_list_styles.ts                |   4 +-
 .../components/rule_editor/_index.scss        |   2 -
 .../components/rule_editor/_rule_editor.scss  |   4 -
 .../detector_description_list.test.js.snap    |   2 -
 .../_detector_description_list.scss           |   4 -
 .../detector_description_list/_index.scss     |   1 -
 .../detector_description_list.js              |   9 +-
 .../select_rule_action/select_rule_action.js  |   2 +-
 .../explorer_chart_label_badge.test.js.snap   |  14 +-
 .../_explorer_chart_label_badge.scss          |   9 -
 .../explorer_chart_label/_index.scss          |   3 +-
 .../entity_filter/_entity_filter.scss         |  17 --
 .../entity_filter/entity_filter.tsx           |   8 +-
 .../entity_filter/entity_filter_styles.ts     |  30 +++
 .../explorer_chart_label_badge.js             |  10 +-
 31 files changed, 352 insertions(+), 352 deletions(-)
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/_index.scss
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js
 create mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss
 create mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss
 create mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_detector_description_list.scss
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_index.scss
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
 delete mode 100644 x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss
 create mode 100644 x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts

diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
index c3379c9acc28d..405a10c8e02e4 100644
--- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json
+++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -25870,10 +25870,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "Masquer les détails",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "Ajouter un filtre",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "Ajouter un filtre",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "et {othersCount} de plus",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "Supprimer le filtre",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "Supprimer le filtre",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "afficher moins",
     "xpack.ml.anomaliesTable.influencersColumnName": "Influencé par",
     "xpack.ml.anomaliesTable.jobIdColumnName": "ID tâche",
     "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Liaison avec Discover impossible ; aucune vue de données n’existe pour le modèle d'index \"{index}\"",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
index 75b7a1012a224..478af1727dea9 100644
--- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json
+++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -25736,10 +25736,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "詳細を非表示",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "フィルターを追加します",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "フィルターを追加します",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "他 {othersCount} 件",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "フィルターを削除",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "フィルターを削除",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "縮小表示",
     "xpack.ml.anomaliesTable.influencersColumnName": "影響因子：",
     "xpack.ml.anomaliesTable.jobIdColumnName": "ジョブID",
     "xpack.ml.anomaliesTable.linksMenu.autoGeneratedDiscoverLinkErrorMessage": "Discoverにリンクできません。インデックスパターン''{index}''のデータビューが存在しません",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
index 1353201e1fa80..0f938d36c0ddd 100644
--- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json
+++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -25300,10 +25300,8 @@
     "xpack.ml.anomaliesTable.hideDetailsAriaLabel": "隐藏详情",
     "xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel": "添加筛选",
     "xpack.ml.anomaliesTable.influencersCell.addFilterTooltip": "添加筛选",
-    "xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText": "及另外 {othersCount} 个",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel": "移除筛选",
     "xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip": "移除筛选",
-    "xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText": "显示更少",
     "xpack.ml.anomaliesTable.influencersColumnName": "影响因素",
     "xpack.ml.anomaliesTable.jobIdColumnName": "作业 ID",
     "xpack.ml.anomaliesTable.linksMenu.configureRulesLabel": "配置作业规则",
diff --git a/x-pack/platform/plugins/shared/ml/public/application/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/_index.scss
index 66b04a8ff0e78..d3babbcc2f267 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/_index.scss
+++ b/x-pack/platform/plugins/shared/ml/public/application/_index.scss
@@ -5,9 +5,7 @@
   @import 'explorer/index'; // SASSTODO: This file needs to be rewritten
 
   // Components
-  @import 'components/annotations/annotation_description_list/index'; // SASSTODO: This file overwrites EUI directly
   @import 'components/anomalies_table/index'; // SASSTODO: This file overwrites EUI directly
-  @import 'components/entity_cell/index';
   @import 'components/job_selector/index';
   @import 'components/rule_editor/index'; // SASSTODO: This file overwrites EUI directly
 
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap
index 98026a92071b9..af099b8be528d 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`AnnotationDescriptionList Initialization with annotation. 1`] = `
 <EuiDescriptionList
-  className="ml-annotation-description-list"
   columnWidths={
     Array [
       3,
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/_index.scss
deleted file mode 100644
index 171e9c20a09c1..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/_index.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// SASSTODO: This is based on the overwrites used in the Filters flyout to match the existing style.
-
-// SASSTODO: Dangerous EUI overwrites
-.ml-annotation-description-list {
-  row-gap: $euiSizeXS;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.tsx
index 20d578c347df1..203014977399a 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/annotations/annotation_description_list/index.tsx
@@ -114,7 +114,6 @@ export const AnnotationDescriptionList = ({ annotation, detectorDescription }: P
   return (
     <EuiDescriptionList
       data-test-subj={'mlAnnotationDescriptionList'}
-      className="ml-annotation-description-list"
       type="column"
       columnWidths={[3, 7]}
       listItems={listItems}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js
deleted file mode 100644
index b77fa308bdd8f..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { each } from 'lodash';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n-react';
-import { i18n } from '@kbn/i18n';
-import { blurButtonOnClick } from '../../util/component_utils';
-
-/*
- * Component for rendering a list of record influencers inside a cell in the anomalies table.
- * Truncates long lists of influencers to the supplied limit, with the full list of influencers
- * expanded or collapsed via 'and x more' / 'show less' links.
- */
-export class InfluencersCell extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      showAll: false,
-    };
-  }
-
-  toggleAllInfluencers() {
-    this.setState({ showAll: !this.state.showAll });
-  }
-
-  renderInfluencers(influencers) {
-    const numberToDisplay = this.state.showAll === false ? this.props.limit : influencers.length;
-    const displayInfluencers = influencers.slice(0, numberToDisplay);
-    const { influencerFilter } = this.props;
-
-    let othersCount = Math.max(influencers.length - numberToDisplay, 0);
-    if (othersCount === 1) {
-      // Display the additional influencer.
-      displayInfluencers.push(influencers[this.props.limit]);
-      othersCount = 0;
-    }
-
-    const displayRows = displayInfluencers.map((influencer, index) => (
-      <div key={index}>
-        {influencer.influencerFieldName}: {influencer.influencerFieldValue}
-        {influencerFilter !== undefined && (
-          <React.Fragment>
-            <EuiToolTip
-              content={
-                <FormattedMessage
-                  id="xpack.ml.anomaliesTable.influencersCell.addFilterTooltip"
-                  defaultMessage="Add filter"
-                />
-              }
-            >
-              <EuiButtonIcon
-                size="s"
-                className="filter-button"
-                onClick={blurButtonOnClick(() => {
-                  influencerFilter(
-                    influencer.influencerFieldName,
-                    influencer.influencerFieldValue,
-                    '+'
-                  );
-                })}
-                iconType="plusInCircle"
-                aria-label={i18n.translate(
-                  'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel',
-                  {
-                    defaultMessage: 'Add filter',
-                  }
-                )}
-              />
-            </EuiToolTip>
-            <EuiToolTip
-              content={
-                <FormattedMessage
-                  id="xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip"
-                  defaultMessage="Remove filter"
-                />
-              }
-            >
-              <EuiButtonIcon
-                size="s"
-                className="filter-button"
-                onClick={blurButtonOnClick(() => {
-                  influencerFilter(
-                    influencer.influencerFieldName,
-                    influencer.influencerFieldValue,
-                    '-'
-                  );
-                })}
-                iconType="minusInCircle"
-                aria-label={i18n.translate(
-                  'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel',
-                  {
-                    defaultMessage: 'Remove filter',
-                  }
-                )}
-              />
-            </EuiToolTip>
-          </React.Fragment>
-        )}
-      </div>
-    ));
-
-    return (
-      <React.Fragment>
-        {displayRows}
-        {this.renderOthers(influencers.length, othersCount)}
-      </React.Fragment>
-    );
-  }
-
-  renderOthers(totalCount, othersCount) {
-    if (othersCount > 0) {
-      return (
-        <div>
-          <EuiLink onClick={() => this.toggleAllInfluencers()}>
-            <FormattedMessage
-              id="xpack.ml.anomaliesTable.influencersCell.moreInfluencersLinkText"
-              defaultMessage="and {othersCount} more"
-              values={{
-                othersCount,
-              }}
-            />
-          </EuiLink>
-        </div>
-      );
-    } else if (totalCount > this.props.limit + 1) {
-      return (
-        <div>
-          <EuiLink onClick={() => this.toggleAllInfluencers()}>
-            <FormattedMessage
-              id="xpack.ml.anomaliesTable.influencersCell.showLessInfluencersLinkText"
-              defaultMessage="show less"
-            />
-          </EuiLink>
-        </div>
-      );
-    }
-  }
-
-  render() {
-    const recordInfluencers = this.props.influencers || [];
-
-    const influencers = [];
-    recordInfluencers.forEach((influencer) => {
-      each(influencer, (influencerFieldValue, influencerFieldName) => {
-        influencers.push({
-          influencerFieldName,
-          influencerFieldValue,
-        });
-      });
-    });
-
-    return (
-      <div>
-        {this.renderInfluencers(influencers)}
-        {this.renderOthers(influencers)}
-      </div>
-    );
-  }
-}
-
-InfluencersCell.propTypes = {
-  influencerFilter: PropTypes.func,
-  influencers: PropTypes.array,
-  limit: PropTypes.number,
-};
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx
new file mode 100644
index 0000000000000..f07d3c5248a87
--- /dev/null
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/anomalies_table/influencers_cell.tsx
@@ -0,0 +1,157 @@
+/*
+ * 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 type { FC } from 'react';
+import React, { useState } from 'react';
+
+import { EuiLink, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n-react';
+import { i18n } from '@kbn/i18n';
+import { useEntityCellStyles } from '../entity_cell/entity_cell_styles';
+import { blurButtonOnClick } from '../../util/component_utils';
+
+type InfluencerCellFilter = (
+  influencerFieldName: string,
+  influencerFieldValue: string,
+  direction: '+' | '-'
+) => void;
+
+interface Influencer {
+  influencerFieldName: string;
+  influencerFieldValue: string;
+}
+
+interface InfluencerCellProps {
+  influencerFilter: InfluencerCellFilter | undefined;
+  influencers: Influencer[] | undefined;
+  limit: number;
+}
+
+/*
+ * Component for rendering a list of record influencers inside a cell in the anomalies table.
+ * Truncates long lists of influencers to the supplied limit, with the full list of influencers
+ * expanded or collapsed via 'and x more' / 'show less' links.
+ */
+export const InfluencersCell: FC<InfluencerCellProps> = ({
+  influencers = [],
+  influencerFilter,
+  limit,
+}) => {
+  const { filterButton } = useEntityCellStyles();
+
+  const [showAllInfluencers, setShowAllInfluencers] = useState(false);
+  const toggleAllInfluencers = () => setShowAllInfluencers((prev) => !prev);
+
+  let numberToDisplay = showAllInfluencers === false ? limit : influencers.length;
+  let othersCount = 0;
+  if (influencers !== undefined) {
+    othersCount = Math.max(influencers.length - numberToDisplay, 0);
+  }
+  if (othersCount === 1) {
+    // Display the additional influencer.
+    numberToDisplay++;
+    othersCount = 0;
+  }
+
+  const displayInfluencers = influencers
+    .reduce<Influencer[]>((acc, influencer) => {
+      const [influencerFieldName, influencerFieldValue] = Object.entries(influencer)[0] ?? [];
+      if (typeof influencerFieldName === 'string' && typeof influencerFieldValue === 'string') {
+        acc.push({
+          influencerFieldName,
+          influencerFieldValue,
+        });
+      }
+      return acc;
+    }, [])
+    .slice(0, numberToDisplay);
+
+  return (
+    <div>
+      {displayInfluencers.map((influencer, index) => (
+        <div key={index}>
+          {influencer.influencerFieldName}: {influencer.influencerFieldValue}
+          {influencerFilter !== undefined && (
+            <>
+              <EuiToolTip
+                content={
+                  <FormattedMessage
+                    id="xpack.ml.anomaliesTable.influencersCell.addFilterTooltip"
+                    defaultMessage="Add filter"
+                  />
+                }
+              >
+                <EuiButtonIcon
+                  size="s"
+                  css={filterButton}
+                  onClick={blurButtonOnClick(() => {
+                    influencerFilter(
+                      influencer.influencerFieldName,
+                      influencer.influencerFieldValue,
+                      '+'
+                    );
+                  })}
+                  iconType="plusInCircle"
+                  aria-label={i18n.translate(
+                    'xpack.ml.anomaliesTable.influencersCell.addFilterAriaLabel',
+                    {
+                      defaultMessage: 'Add filter',
+                    }
+                  )}
+                />
+              </EuiToolTip>
+              <EuiToolTip
+                content={
+                  <FormattedMessage
+                    id="xpack.ml.anomaliesTable.influencersCell.removeFilterTooltip"
+                    defaultMessage="Remove filter"
+                  />
+                }
+              >
+                <EuiButtonIcon
+                  size="s"
+                  css={filterButton}
+                  onClick={blurButtonOnClick(() => {
+                    influencerFilter(
+                      influencer.influencerFieldName,
+                      influencer.influencerFieldValue,
+                      '-'
+                    );
+                  })}
+                  iconType="minusInCircle"
+                  aria-label={i18n.translate(
+                    'xpack.ml.anomaliesTable.influencersCell.removeFilterAriaLabel',
+                    {
+                      defaultMessage: 'Remove filter',
+                    }
+                  )}
+                />
+              </EuiToolTip>
+            </>
+          )}
+        </div>
+      ))}
+      {othersCount > 0 && (
+        <EuiLink onClick={() => toggleAllInfluencers()}>
+          <FormattedMessage
+            id="xpack.ml.anomaliesTable.anomalyDetails.anomalyDescriptionListMoreLinkText"
+            defaultMessage="and {othersCount} more"
+            values={{ othersCount }}
+          />
+        </EuiLink>
+      )}
+      {numberToDisplay > limit + 1 && (
+        <EuiLink onClick={() => toggleAllInfluencers()}>
+          <FormattedMessage
+            id="xpack.ml.anomaliesTable.anomalyDetails.anomalyDescriptionShowLessLinkText"
+            defaultMessage="Show less"
+          />
+        </EuiLink>
+      )}
+    </div>
+  );
+};
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss
deleted file mode 100644
index 04497c63a4642..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'entity_cell';
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss
deleted file mode 100644
index fc9cf14910138..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.field-value-short {
-  @include euiTextTruncate;
-  display: inline-block;
-  vertical-align: bottom;
-}
-
-.field-value-long {
-  overflow-wrap: break-word;
-}
-
-.filter-button {
-  opacity: .5;
-  width: $euiSize;
-  height: $euiSize;
-  -webkit-transform: translateY(-1px);
-  transform: translateY(-1px);
-
-  .euiIcon {
-    width: $euiFontSizeXS;
-    height: $euiFontSizeXS;
-  }
-}
-
-.filter-button:hover {
-  opacity: 1;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx
index 19948cdb074eb..a33c7a1147eb0 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell.tsx
@@ -12,6 +12,7 @@ import { EuiButtonIcon, EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@
 import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import { ML_ENTITY_FIELD_OPERATIONS, MLCATEGORY } from '@kbn/ml-anomaly-utils';
+import { useEntityCellStyles } from './entity_cell_styles';
 import { EMPTY_FIELD_VALUE_LABEL } from '../../timeseriesexplorer/components/entity_control/entity_control';
 import { blurButtonOnClick } from '../../util/component_utils';
 
@@ -28,61 +29,69 @@ interface EntityCellProps {
   wrapText?: boolean;
 }
 
-function getAddFilter({ entityName, entityValue, filter }: EntityCellProps) {
-  if (filter !== undefined) {
-    return (
-      <EuiToolTip
-        content={
-          <FormattedMessage
-            id="xpack.ml.anomaliesTable.entityCell.addFilterTooltip"
-            defaultMessage="Add filter"
-          />
-        }
-      >
-        <EuiButtonIcon
-          size="s"
-          data-test-subj={`mlAnomaliesTableEntityCellAddFilterButton-${entityValue}`}
-          className="filter-button"
-          onClick={blurButtonOnClick(() => {
-            filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.ADD);
-          })}
-          iconType="plusInCircle"
-          aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', {
-            defaultMessage: 'Add filter',
-          })}
-        />
-      </EuiToolTip>
-    );
+const AddFilter: FC<EntityCellProps> = ({ entityName, entityValue, filter }) => {
+  const { filterButton } = useEntityCellStyles();
+
+  if (filter === undefined) {
+    return null;
   }
-}
 
-function getRemoveFilter({ entityName, entityValue, filter }: EntityCellProps) {
-  if (filter !== undefined) {
-    return (
-      <EuiToolTip
-        content={
-          <FormattedMessage
-            id="xpack.ml.anomaliesTable.entityCell.removeFilterTooltip"
-            defaultMessage="Remove filter"
-          />
-        }
-      >
-        <EuiButtonIcon
-          size="s"
-          data-test-subj={`mlAnomaliesTableEntityCellRemoveFilterButton-${entityValue}`}
-          className="filter-button"
-          onClick={blurButtonOnClick(() => {
-            filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.REMOVE);
-          })}
-          iconType="minusInCircle"
-          aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', {
-            defaultMessage: 'Remove filter',
-          })}
+  return (
+    <EuiToolTip
+      content={
+        <FormattedMessage
+          id="xpack.ml.anomaliesTable.entityCell.addFilterTooltip"
+          defaultMessage="Add filter"
         />
-      </EuiToolTip>
-    );
+      }
+    >
+      <EuiButtonIcon
+        size="s"
+        data-test-subj={`mlAnomaliesTableEntityCellAddFilterButton-${entityValue}`}
+        css={filterButton}
+        onClick={blurButtonOnClick(() => {
+          filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.ADD);
+        })}
+        iconType="plusInCircle"
+        aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.addFilterAriaLabel', {
+          defaultMessage: 'Add filter',
+        })}
+      />
+    </EuiToolTip>
+  );
+};
+
+const RemoveFilter: FC<EntityCellProps> = ({ entityName, entityValue, filter }) => {
+  const { filterButton } = useEntityCellStyles();
+
+  if (filter === undefined) {
+    return null;
   }
-}
+
+  return (
+    <EuiToolTip
+      content={
+        <FormattedMessage
+          id="xpack.ml.anomaliesTable.entityCell.removeFilterTooltip"
+          defaultMessage="Remove filter"
+        />
+      }
+    >
+      <EuiButtonIcon
+        size="s"
+        data-test-subj={`mlAnomaliesTableEntityCellRemoveFilterButton-${entityValue}`}
+        css={filterButton}
+        onClick={blurButtonOnClick(() => {
+          filter(entityName, entityValue, ML_ENTITY_FIELD_OPERATIONS.REMOVE);
+        })}
+        iconType="minusInCircle"
+        aria-label={i18n.translate('xpack.ml.anomaliesTable.entityCell.removeFilterAriaLabel', {
+          defaultMessage: 'Remove filter',
+        })}
+      />
+    </EuiToolTip>
+  );
+};
 
 /*
  * Component for rendering an entity, displaying the value
@@ -100,20 +109,21 @@ export const EntityCell: FC<EntityCellProps> = ({
     valueText = `${MLCATEGORY} ${valueText}`;
   }
 
+  const { fieldValueShort, fieldValueLong } = useEntityCellStyles();
   const textStyle = { maxWidth: '100%' };
-  const textWrapperClass = wrapText ? 'field-value-long' : 'field-value-short';
+  const textWrapperCss = wrapText ? fieldValueLong : fieldValueShort;
   const shouldDisplayIcons =
     filter !== undefined && entityName !== undefined && entityValue !== undefined;
 
   if (wrapText === true) {
     return (
       <div>
-        <span className={textWrapperClass}>{valueText}</span>
+        <span css={textWrapperCss}>{valueText}</span>
         {shouldDisplayIcons && (
-          <React.Fragment>
-            {getAddFilter({ entityName, entityValue, filter })}
-            {getRemoveFilter({ entityName, entityValue, filter })}
-          </React.Fragment>
+          <>
+            <AddFilter entityName={entityName} entityValue={entityValue} filter={filter} />
+            <RemoveFilter entityName={entityName} entityValue={entityValue} filter={filter} />
+          </>
         )}
       </div>
     );
@@ -121,7 +131,7 @@ export const EntityCell: FC<EntityCellProps> = ({
     return (
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="none">
         <EuiFlexItem grow={false} style={textStyle}>
-          <EuiText size="xs" className={textWrapperClass}>
+          <EuiText size="xs" css={textWrapperCss}>
             {valueText}
           </EuiText>
         </EuiFlexItem>
@@ -129,10 +139,10 @@ export const EntityCell: FC<EntityCellProps> = ({
           <EuiFlexItem grow={false}>
             <EuiFlexGroup direction="row" alignItems="center" gutterSize="none">
               <EuiFlexItem grow={false}>
-                {getAddFilter({ entityName, entityValue, filter })}
+                <AddFilter entityName={entityName} entityValue={entityValue} filter={filter} />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                {getRemoveFilter({ entityName, entityValue, filter })}
+                <RemoveFilter entityName={entityName} entityValue={entityValue} filter={filter} />
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiFlexItem>
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts
new file mode 100644
index 0000000000000..19bedf04823eb
--- /dev/null
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/entity_cell/entity_cell_styles.ts
@@ -0,0 +1,38 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+import { useEuiTheme, euiTextTruncate } from '@elastic/eui';
+
+export const useEntityCellStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    fieldValueShort: css`
+      ${euiTextTruncate()};
+      display: inline-block;
+      vertical-align: bottom;
+    `,
+    fieldValueLong: css({
+      overflowWrap: 'break-word',
+    }),
+    filterButton: css({
+      opacity: 0.5,
+      width: euiTheme.size.base,
+      height: euiTheme.size.base,
+      transform: 'translateY(-1px)',
+      '&:hover': {
+        opacity: 1,
+      },
+      '.euiIcon': {
+        width: euiTheme.size.m,
+        height: euiTheme.size.m,
+      },
+    }),
+  };
+};
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss
deleted file mode 100644
index 31b54bf5a675f..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.mlHelpPopover__panel {
-  max-width: $euiSize * 30;
-}
-
-.mlHelpPopover__content {
-  max-height: 40vh;
-  padding: $euiSizeS;
-  @include euiYScrollWithShadows;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx
index eccfe901d3c3b..bf374b9e59bd5 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover.tsx
@@ -10,12 +10,11 @@ import React, { useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import type { EuiLinkButtonProps, EuiPopoverProps } from '@elastic/eui';
 import { EuiButtonIcon, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
-import './help_popover.scss';
+import { useHelpPopoverStyles } from './help_popover_styles';
 
 export const HelpPopoverButton: FC<{ onClick: EuiLinkButtonProps['onClick'] }> = ({ onClick }) => {
   return (
     <EuiButtonIcon
-      className="mlHelpPopover__buttonIcon"
       size="s"
       iconType="help"
       aria-label={i18n.translate('xpack.ml.helpPopover.ariaLabel', {
@@ -37,21 +36,21 @@ export const HelpPopover: FC<PropsWithChildren<HelpPopoverProps>> = ({
   title,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const { helpPopoverPanel, helpPopoverContent } = useHelpPopoverStyles();
 
   return (
     <EuiPopover
       anchorPosition={anchorPosition}
       button={<HelpPopoverButton onClick={setIsPopoverOpen.bind(null, !isPopoverOpen)} />}
-      className="mlHelpPopover"
       closePopover={setIsPopoverOpen.bind(null, false)}
       isOpen={isPopoverOpen}
       ownFocus
-      panelClassName="mlHelpPopover__panel"
+      panelProps={{ css: helpPopoverPanel }}
       panelPaddingSize="none"
     >
       {title && <EuiPopoverTitle paddingSize="s">{title}</EuiPopoverTitle>}
 
-      <EuiText className="mlHelpPopover__content eui-scrollBar" size="s" tabIndex={0}>
+      <EuiText css={helpPopoverContent} size="s" tabIndex={0}>
         {children}
       </EuiText>
     </EuiPopover>
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts
new file mode 100644
index 0000000000000..930bdd8bfb420
--- /dev/null
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/help_popover/help_popover_styles.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+import { useEuiTheme, useEuiOverflowScroll } from '@elastic/eui';
+
+export const useHelpPopoverStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    helpPopoverPanel: css({
+      maxWidth: `${euiTheme.base * 30}px`,
+    }),
+    helpPopoverContent: css`
+      ${useEuiOverflowScroll('y', true)};
+      max-height: 40vh;
+      padding: ${euiTheme.size.s};
+    `,
+  };
+};
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts
index e6cfd5b3f66fa..5d70a00fdbbca 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/influencers_list/influencers_list_styles.ts
@@ -14,7 +14,7 @@ import { ML_SEVERITY_COLORS } from '@kbn/ml-anomaly-utils';
 export const useInfluencersListStyles = () => {
   const { euiTheme } = useEuiTheme();
   const euiFontSizeXS = useEuiFontSize('xs').fontSize;
-  const euiFontSizeS = useEuiFontSize('s').fontSize;
+  const euiFontSizeM = useEuiFontSize('m').fontSize;
 
   return {
     influencersList: css({
@@ -23,7 +23,7 @@ export const useInfluencersListStyles = () => {
     fieldLabel: css({
       fontSize: euiFontSizeXS,
       textAlign: 'left',
-      maxHeight: euiFontSizeS,
+      maxHeight: euiFontSizeM,
       maxWidth: 'calc(100% - 102px)',
     }),
     progress: css({
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss
index cff43ee98bc08..75b456083b5b5 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_index.scss
@@ -1,3 +1 @@
 @import 'rule_editor';
-
-@import 'components/detector_description_list/index';
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss
index 41f21fc98a381..e8bf6742db5f7 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/_rule_editor.scss
@@ -2,10 +2,6 @@
 .ml-rule-editor-flyout {
   font-size: $euiFontSizeS;
 
-  .select-rule-action .rule-detector-description-list {
-    padding-left: $euiSize;
-  }
-
   .select-rule-action-panel {
     padding: $euiSizeS 0;
 
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap
index a2dd5d750c068..f0f00cc5136b4 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/__snapshots__/detector_description_list.test.js.snap
@@ -2,7 +2,6 @@
 
 exports[`DetectorDescriptionList render for detector with anomaly values 1`] = `
 <EuiDescriptionList
-  className="rule-detector-description-list"
   columnWidths={
     Array [
       15,
@@ -49,7 +48,6 @@ exports[`DetectorDescriptionList render for detector with anomaly values 1`] = `
 
 exports[`DetectorDescriptionList render for population detector with no anomaly values 1`] = `
 <EuiDescriptionList
-  className="rule-detector-description-list"
   columnWidths={
     Array [
       15,
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_detector_description_list.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_detector_description_list.scss
deleted file mode 100644
index 8fac032cecbca..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_detector_description_list.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// SASSTODO: Dangerous EUI overwrites
-.rule-detector-description-list {
-  row-gap: $euiSizeXS;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_index.scss
deleted file mode 100644
index 2754bc45053dc..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'detector_description_list';
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.js
index f19c915a2d0da..f411e2634b546 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.js
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/components/detector_description_list/detector_description_list.js
@@ -65,14 +65,7 @@ export function DetectorDescriptionList({ job, detector, anomaly }) {
     });
   }
 
-  return (
-    <EuiDescriptionList
-      className="rule-detector-description-list"
-      type="column"
-      columnWidths={[15, 85]}
-      listItems={listItems}
-    />
-  );
+  return <EuiDescriptionList type="column" columnWidths={[15, 85]} listItems={listItems} />;
 }
 DetectorDescriptionList.propTypes = {
   job: PropTypes.object.isRequired,
diff --git a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js
index 7e3944b817778..4b4bb2f2c785e 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js
+++ b/x-pack/platform/plugins/shared/ml/public/application/components/rule_editor/select_rule_action/select_rule_action.js
@@ -50,7 +50,7 @@ export function SelectRuleAction({
   }
 
   return (
-    <div className="select-rule-action">
+    <div>
       {rules.length > 0 && (
         <React.Fragment>
           <DetectorDescriptionList job={job} detector={detector} anomaly={anomaly} />
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
index 55b4dc35063b0..46bee0c3fb3c0 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
+++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/__snapshots__/explorer_chart_label_badge.test.js.snap
@@ -1,12 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ExplorerChartLabelBadge Render entity label badge. 1`] = `
-<span
-  className="ml-explorer-chart-label-badge"
->
+<span>
   <EuiBadge
-    className="ml-reset-font-weight"
     color="hollow"
+    css={
+      Object {
+        "map": undefined,
+        "name": "1l7mgse",
+        "next": undefined,
+        "styles": "font-weight:normal;",
+        "toString": [Function],
+      }
+    }
   >
     nginx.access.remote_ip
      
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
deleted file mode 100644
index b540efd6c77f7..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_explorer_chart_label_badge.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
-  Resets the badge's default strong font-weight so it's possible
-  to put custom emphasis inside the badge only on a part of it.
-  Used in the Explorer Chart label badge to display an entity's
-  field_name as `normal` and field_value as `strong`.
-*/
-.ml-reset-font-weight {
-  font-weight: normal;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss
index d112b834f09ad..43747a513aa61 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss
+++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/_index.scss
@@ -1,2 +1 @@
-@import 'explorer_chart_label';
-@import 'explorer_chart_label_badge';
\ No newline at end of file
+@import 'explorer_chart_label';
\ No newline at end of file
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss
deleted file mode 100644
index 800c33e50689d..0000000000000
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/_entity_filter.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.filter-button {
-  opacity: .5;
-  width: $euiSize;
-  height: $euiSize;
-
-  -webkit-transform: translateY(-1px);
-  transform: translateY(-1px);
-
-  .euiIcon {
-    width: $euiFontSizeXS;
-    height: $euiFontSizeXS;
-  }
-}
-
-.filter-button:hover {
-  opacity: 1;
-}
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx
index e3554dd04b0b4..dc5a505182c9a 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx
+++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter.tsx
@@ -11,8 +11,8 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { i18n } from '@kbn/i18n';
 import type { MlEntityFieldOperation } from '@kbn/ml-anomaly-utils';
 import { ML_ENTITY_FIELD_OPERATIONS } from '@kbn/ml-anomaly-utils';
+import { useEntityFilterStyles } from './entity_filter_styles';
 import { blurButtonOnClick } from '../../../../../util/component_utils';
-import './_entity_filter.scss';
 
 interface EntityFilterProps {
   onFilter: (params: {
@@ -30,6 +30,8 @@ export const EntityFilter: FC<EntityFilterProps> = ({
   influencerFieldValue,
   isEmbeddable,
 }) => {
+  const { filterButton } = useEntityFilterStyles();
+
   return (
     <React.Fragment>
       <EuiToolTip
@@ -42,7 +44,7 @@ export const EntityFilter: FC<EntityFilterProps> = ({
       >
         <EuiButtonIcon
           size="s"
-          className="filter-button"
+          css={filterButton}
           onClick={blurButtonOnClick(() => {
             onFilter({
               influencerFieldName,
@@ -74,7 +76,7 @@ export const EntityFilter: FC<EntityFilterProps> = ({
       >
         <EuiButtonIcon
           size="s"
-          className="filter-button"
+          css={filterButton}
           onClick={blurButtonOnClick(() => {
             onFilter({
               influencerFieldName,
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts
new file mode 100644
index 0000000000000..44232c9ac3b2b
--- /dev/null
+++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/entity_filter/entity_filter_styles.ts
@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { css } from '@emotion/react';
+
+import { useEuiTheme } from '@elastic/eui';
+
+export const useEntityFilterStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    filterButton: css({
+      opacity: 0.5,
+      width: euiTheme.size.base,
+      height: euiTheme.size.base,
+      transform: 'translateY(-1px)',
+      '&:hover': {
+        opacity: 1,
+      },
+      '.euiIcon': {
+        width: euiTheme.size.m,
+        height: euiTheme.size.m,
+      },
+    }),
+  };
+};
diff --git a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
index 3c88ca66ddfad..988b36bf44b46 100644
--- a/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
+++ b/x-pack/platform/plugins/shared/ml/public/application/explorer/explorer_charts/components/explorer_chart_label/explorer_chart_label_badge.js
@@ -9,11 +9,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import { EuiBadge } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 export function ExplorerChartLabelBadge({ entity }) {
+  // Resets the badge's default strong font-weight so it's possible
+  // to put custom emphasis inside the badge only on a part of it.
+  // The entity's field_name will be styled as `normal` and field_value as `strong`.
+  const resetFontWeightCss = css({ fontWeight: 'normal' });
+
   return (
-    <span className="ml-explorer-chart-label-badge">
-      <EuiBadge color="hollow" className="ml-reset-font-weight">
+    <span>
+      <EuiBadge color="hollow" css={resetFontWeightCss}>
         {entity.fieldName} <strong>{entity.fieldValue}</strong>
       </EuiBadge>
     </span>

From 80f4aab305eb90646f418bc704423308d133d7d2 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Wed, 5 Mar 2025 19:40:04 +0100
Subject: [PATCH 09/12] [Synthetics] Fix tls alert data !! (#212758)

### Summary
This PR improves and fixes the TLS alert data handling in the Synthetics
plugin. Key updates include:


### Code changes

1. **Request Body Updates**:
   - Added `agent.name`.
- Changed optional chaining to direct property access for
`ping.monitor.name`, `ping.monitor.id`, and `ping.observer.name`.
   - Added `ping.agent.name`.

2. **Cert Type Adjustments**:
- Added fields: `monitorName`, `monitorId`, `monitorType`, `locationId`,
`locationName`, `@timestamp`, `hostName`.

3. **Observer Codec**:
   - Ensured `name` and `geo.name` are required fields.

4. **Monitor Type and Ping Type**:
   - Added `name` to `MonitorType`.
   - Moved `@timestamp` to required fields in `PingType`.

7. **Message Utils**:
- Adjusted `getCertSummary` and `getTLSAlertDocument` so that we can
properly generate alert document
---
 .../common/requests/get_certs_request_body.ts |  8 +++--
 .../synthetics/common/runtime_types/certs.ts  | 14 ++++----
 .../common/runtime_types/ping/observer.ts     | 36 +++++++++++--------
 .../common/runtime_types/ping/ping.ts         |  4 +--
 .../certificates/certificates_list.test.tsx   |  3 +-
 .../certificates/fingerprint_col.test.tsx     |  4 +--
 .../overview/monitor_detail_flyout.test.tsx   |  9 ++++-
 .../apps/synthetics/lib/alert_types/tls.tsx   |  2 +-
 .../__mocks__/synthetics_store.mock.ts        |  4 +++
 .../tls_rule/message_utils.test.ts            |  1 +
 .../alert_rules/tls_rule/message_utils.ts     | 20 ++++++++---
 .../server/alert_rules/tls_rule/types.ts      | 31 ++++++++++++++++
 .../server/alert_rules/translations.ts        |  3 +-
 13 files changed, 103 insertions(+), 36 deletions(-)
 create mode 100644 x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/types.ts

diff --git a/x-pack/solutions/observability/plugins/synthetics/common/requests/get_certs_request_body.ts b/x-pack/solutions/observability/plugins/synthetics/common/requests/get_certs_request_body.ts
index 93859d66ec685..47c2ebbd6eda5 100644
--- a/x-pack/solutions/observability/plugins/synthetics/common/requests/get_certs_request_body.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/common/requests/get_certs_request_body.ts
@@ -138,6 +138,7 @@ export const getCertsRequestBody = ({
       'monitor.type',
       'url.full',
       'observer.geo.name',
+      'agent.name',
       'tls.server.x509.issuer.common_name',
       'tls.server.x509.subject.common_name',
       'tls.server.hash.sha1',
@@ -206,8 +207,8 @@ export const processCertsResult = (result: CertificatesResults): CertResult => {
       not_after: notAfter,
       not_before: notBefore,
       common_name: commonName,
-      monitorName: ping?.monitor?.name,
-      monitorId: ping?.monitor?.id,
+      monitorName: ping.monitor.name,
+      monitorId: ping.monitor.id,
       serviceName: ping?.service?.name,
       configId: ping.config_id!,
       monitorUrl: ping?.url?.full,
@@ -215,7 +216,8 @@ export const processCertsResult = (result: CertificatesResults): CertResult => {
       tags: ping?.tags,
       '@timestamp': ping['@timestamp'],
       monitorType: ping?.monitor?.type,
-      locationId: ping?.observer?.name,
+      locationId: ping.observer.name,
+      hostName: ping?.agent?.name,
       locationName: ping?.observer?.geo?.name,
       errorMessage: ping?.error?.message,
       errorStackTrace: ping?.error?.stack_trace,
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/certs.ts b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/certs.ts
index 49ac5573294e1..ad4ba35258883 100644
--- a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/certs.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/certs.ts
@@ -35,6 +35,12 @@ export const CertType = t.intersection([
     monitors: t.array(CertMonitorType),
     sha256: t.string,
     configId: t.string,
+    monitorName: t.string,
+    monitorId: t.string,
+    monitorType: t.string,
+    locationId: t.string,
+    locationName: t.string,
+    '@timestamp': t.string,
   }),
   t.partial({
     not_after: t.string,
@@ -42,18 +48,14 @@ export const CertType = t.intersection([
     common_name: t.string,
     issuer: t.string,
     sha1: t.string,
-    monitorName: t.string,
-    monitorId: t.string,
-    monitorType: t.string,
     monitorUrl: t.string,
-    locationId: t.string,
-    locationName: t.string,
-    '@timestamp': t.string,
+    hostName: t.string,
     serviceName: t.string,
     errorMessage: t.string,
     errorStackTrace: t.union([t.string, t.null]),
     labels: t.record(t.string, t.string),
     tags: t.array(t.string),
+    monitorTags: t.array(t.string),
   }),
 ]);
 
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/observer.ts b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/observer.ts
index 67635c9fe9a8b..0529dbd6349f8 100644
--- a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/observer.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/observer.ts
@@ -7,20 +7,28 @@
 
 import * as t from 'io-ts';
 
-export const ObserverCodec = t.partial({
-  hostname: t.string,
-  ip: t.array(t.string),
-  mac: t.array(t.string),
-  name: t.union([t.string, t.undefined]),
-  geo: t.partial({
+export const ObserverCodec = t.intersection([
+  t.type({
     name: t.string,
-    continent_name: t.string,
-    city_name: t.string,
-    country_iso_code: t.string,
-    location: t.union([
-      t.string,
-      t.partial({ lat: t.number, lon: t.number }),
-      t.partial({ lat: t.string, lon: t.string }),
+    geo: t.intersection([
+      t.type({
+        name: t.string,
+      }),
+      t.partial({
+        continent_name: t.string,
+        city_name: t.string,
+        country_iso_code: t.string,
+        location: t.union([
+          t.string,
+          t.partial({ lat: t.number, lon: t.number }),
+          t.partial({ lat: t.string, lon: t.string }),
+        ]),
+      }),
     ]),
   }),
-});
+  t.partial({
+    hostname: t.string,
+    ip: t.array(t.string),
+    mac: t.array(t.string),
+  }),
+]);
diff --git a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/ping.ts b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/ping.ts
index 7234387d8561b..0947098988a53 100644
--- a/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/ping.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/common/runtime_types/ping/ping.ts
@@ -92,6 +92,7 @@ export type Tls = t.TypeOf<typeof TlsType>;
 
 export const MonitorType = t.intersection([
   t.type({
+    name: t.string,
     id: t.string,
     status: t.string,
     type: t.string,
@@ -106,7 +107,6 @@ export const MonitorType = t.intersection([
       us: t.number,
     }),
     ip: t.string,
-    name: t.string,
 
     fleet_managed: t.boolean,
     project: t.type({
@@ -163,9 +163,9 @@ export const PingType = t.intersection([
     monitor: MonitorType,
     docId: t.string,
     observer: ObserverCodec,
+    '@timestamp': t.string,
   }),
   t.partial({
-    '@timestamp': t.string,
     agent: AgentType,
     container: t.partial({
       id: t.string,
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/certificates_list.test.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/certificates_list.test.tsx
index 632bb682a0861..84161734be3e9 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/certificates_list.test.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/certificates_list.test.tsx
@@ -8,6 +8,7 @@
 import React from 'react';
 import { CertificateList, CertSort } from './certificates_list';
 import { render } from '../../utils/testing';
+import { Cert } from '../../../../../common/runtime_types';
 
 describe('CertificateList', () => {
   it('render empty state', () => {
@@ -66,7 +67,7 @@ describe('CertificateList', () => {
               not_before: '2015-04-09T00:00:00.000Z',
               common_name: '*.badssl.com',
               configId: 'uptime-advanced-http-tls',
-            },
+            } as Cert,
           ],
         }}
       />
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/fingerprint_col.test.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/fingerprint_col.test.tsx
index 50a374fd6174a..9968ea76a9832 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/fingerprint_col.test.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/certificates/fingerprint_col.test.tsx
@@ -12,7 +12,7 @@ import { render } from '../../utils/testing';
 import { Cert } from '../../../../../common/runtime_types';
 
 describe('FingerprintCol', () => {
-  const cert: Cert = {
+  const cert = {
     monitors: [{ name: '', id: 'github', url: 'https://github.com/' }],
     not_after: '2020-05-08T00:00:00.000Z',
     not_before: '2018-05-08T00:00:00.000Z',
@@ -21,7 +21,7 @@ describe('FingerprintCol', () => {
     sha256: '3111500c4a66012cdae333ec3fca1c9dde45c954440e7ee413716bff3663c074'.toUpperCase(),
     common_name: 'github.com',
     configId: '123',
-  };
+  } as Cert;
 
   it('renders expected elements for valid props', async () => {
     cert.not_after = moment().add('4', 'months').toISOString();
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx
index 5ff2efebc9a8c..c9ef9b68b19e1 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/monitor_detail_flyout.test.tsx
@@ -39,6 +39,7 @@ describe('Monitor Detail Flyout', () => {
         docId: 'docId',
         timestamp: '2013-03-01 12:54:23',
         monitor: {
+          name: 'test monitor',
           id: 'test-id',
           status: 'up',
           type: 'http',
@@ -52,7 +53,13 @@ describe('Monitor Detail Flyout', () => {
           full: 'https://www.elastic.co',
         },
         tags: ['tag1', 'tag2'],
-        observer: {},
+        observer: {
+          name: 'us-east-1',
+          geo: {
+            name: 'US East',
+          },
+        },
+        '@timestamp': '2013-03-01 12:54:23',
       },
     });
     jest.spyOn(statusByLocation, 'useStatusByLocation').mockReturnValue({
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/lib/alert_types/tls.tsx b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/lib/alert_types/tls.tsx
index 00a08355d431b..6a3297e5689b1 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/lib/alert_types/tls.tsx
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/lib/alert_types/tls.tsx
@@ -50,7 +50,7 @@ export const initTlsAlertType: AlertTypeInitializer = ({
   },
   defaultActionMessage,
   defaultRecoveryMessage,
-  requiresAppContext: true,
+  requiresAppContext: false,
   format: ({ fields }) => ({
     reason: fields[ALERT_REASON] || '',
     link: `/app/synthetics${CERTIFICATES_ROUTE}`,
diff --git a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts
index 02a0e9bb5b15b..06a0f16f82071 100644
--- a/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/utils/testing/__mocks__/synthetics_store.mock.ts
@@ -241,6 +241,7 @@ function getMonitorDetailsMockSlice() {
           full: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
         },
         observer: {
+          name: 'us-central',
           geo: {
             continent_name: 'North America',
             city_name: 'Iowa',
@@ -307,6 +308,7 @@ function getMonitorDetailsMockSlice() {
             full: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
           },
           observer: {
+            name: 'us-central',
             geo: {
               continent_name: 'North America',
               city_name: 'Iowa',
@@ -362,6 +364,7 @@ function getMonitorDetailsMockSlice() {
             full: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
           },
           observer: {
+            name: 'us-central',
             geo: {
               continent_name: 'North America',
               city_name: 'Iowa',
@@ -417,6 +420,7 @@ function getMonitorDetailsMockSlice() {
             full: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
           },
           observer: {
+            name: 'us-central',
             geo: {
               continent_name: 'North America',
               city_name: 'Iowa',
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.test.ts b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.test.ts
index 39fa7b185fb8d..be0ed12925211 100644
--- a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.test.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.test.ts
@@ -16,6 +16,7 @@ describe('setTLSRecoveredAlertsContext', () => {
   const basePath = {
     publicBaseUrl: 'https://localhost:5601',
   } as IBasePath;
+
   const alertState = {
     summary: 'test-summary',
     status: 'has expired',
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.ts b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.ts
index a6a7d82fb3335..e6b6663d60379 100644
--- a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/message_utils.ts
@@ -17,12 +17,14 @@ import { i18n } from '@kbn/i18n';
 import { PublicAlertsClient } from '@kbn/alerting-plugin/server/alerts_client/types';
 import { ObservabilityUptimeAlert } from '@kbn/alerts-as-data-utils';
 import { ALERT_REASON, ALERT_UUID } from '@kbn/rule-data-utils';
+import { MonitorSummaryTLSRule } from './types';
 import { TLSLatestPing } from './tls_rule_executor';
 import { ALERT_DETAILS_URL } from '../action_variables';
 import { Cert } from '../../../common/runtime_types';
 import { tlsTranslations } from '../translations';
 import { MonitorStatusActionGroup } from '../../../common/constants/synthetics_alerts';
 import {
+  AGENT_NAME,
   CERT_COMMON_NAME,
   CERT_HASH_SHA256,
   CERT_ISSUER_NAME,
@@ -76,7 +78,11 @@ const getValidAfter = (notAfter?: string): TLSContent => {
 
 export type CertSummary = ReturnType<typeof getCertSummary>;
 
-export const getCertSummary = (cert: Cert, expirationThreshold: number, ageThreshold: number) => {
+export const getCertSummary = (
+  cert: Cert,
+  expirationThreshold: number,
+  ageThreshold: number
+): MonitorSummaryTLSRule => {
   const isExpiring = new Date(cert.not_after ?? '').valueOf() < expirationThreshold;
   const isAging = new Date(cert.not_before ?? '').valueOf() < ageThreshold;
   let content: TLSContent | null = null;
@@ -103,9 +109,12 @@ export const getCertSummary = (cert: Cert, expirationThreshold: number, ageThres
     monitorUrl: cert.monitorUrl,
     configId: cert.configId,
     monitorTags: cert.tags,
-    errorMessage: cert.errorMessage,
-    errorStackTrace: cert.errorStackTrace,
+    lastErrorMessage: cert.errorMessage,
+    lastErrorStack: cert.errorStackTrace,
     labels: cert.labels,
+    reason: summary,
+    hostName: cert.hostName,
+    checkedAt: cert['@timestamp'],
   };
 };
 
@@ -124,9 +133,10 @@ export const getTLSAlertDocument = (cert: Cert, monitorSummary: CertSummary, uui
   [URL_FULL]: monitorSummary.monitorUrl,
   [OBSERVER_GEO_NAME]: monitorSummary.locationName ? [monitorSummary.locationName] : [],
   [OBSERVER_NAME]: monitorSummary.locationId ? [monitorSummary.locationId] : [],
-  [ERROR_MESSAGE]: monitorSummary.errorMessage,
+  [ERROR_MESSAGE]: monitorSummary.lastErrorMessage,
+  [AGENT_NAME]: monitorSummary.hostName,
   // done to avoid assigning null to the field
-  [ERROR_STACK_TRACE]: monitorSummary.errorStackTrace ? monitorSummary.errorStackTrace : undefined,
+  [ERROR_STACK_TRACE]: monitorSummary.lastErrorStack ? monitorSummary.lastErrorStack : undefined,
   'location.id': monitorSummary.locationId ? [monitorSummary.locationId] : [],
   'location.name': monitorSummary.locationName ? [monitorSummary.locationName] : [],
   labels: cert.labels,
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/types.ts b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/types.ts
new file mode 100644
index 0000000000000..b7db5fec26d45
--- /dev/null
+++ b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/tls_rule/types.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export interface MonitorSummaryTLSRule {
+  reason: string;
+  summary: string;
+  status: string;
+  configId: string;
+  hostName?: string;
+  monitorId: string;
+  checkedAt: string;
+  monitorUrl?: string;
+  locationId: string;
+  monitorType: string;
+  monitorName: string;
+  serviceName?: string;
+  locationName: string;
+  lastErrorMessage?: string;
+  lastErrorStack?: string | null;
+  stateId?: string | null;
+  monitorUrlLabel?: string;
+  sha256: string;
+  commonName: string;
+  issuer: string;
+  monitorTags?: string[];
+  labels?: Record<string, string>;
+}
diff --git a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/translations.ts b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/translations.ts
index 03063f92ee56c..74baaa5e45a0e 100644
--- a/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/translations.ts
+++ b/x-pack/solutions/observability/plugins/synthetics/server/alert_rules/translations.ts
@@ -6,6 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { MonitorSummaryTLSRule } from './tls_rule/types';
 import { MonitorSummaryStatusRule } from './status_rule/types';
 
 export const STATUS_RULE_NAME = i18n.translate('xpack.synthetics.alertRules.monitorStatus', {
@@ -13,7 +14,7 @@ export const STATUS_RULE_NAME = i18n.translate('xpack.synthetics.alertRules.moni
 });
 
 export const commonMonitorStateI18: Array<{
-  name: keyof MonitorSummaryStatusRule;
+  name: keyof MonitorSummaryStatusRule | keyof MonitorSummaryTLSRule;
   description: string;
 }> = [
   {

From c240b035d464d7e8277e10ebfc9bba360f7aa2d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20Haro?=
 <alejandro.haro@elastic.co>
Date: Wed, 5 Mar 2025 20:26:57 +0100
Subject: [PATCH 10/12] [CI tools] Use ES 8.x (#213056)

## Summary

After upgrading the ES client to 9.0
(https://github.com/elastic/kibana/pull/208776), we noticed that the CI
fails to upload the results of the tests to the CI cluster:

```
ERROR ResponseError: media_type_header_exception
      	Caused by:
      		status_exception: Accept version must be either version 8 or 7, but found 9. Accept=application/vnd.elasticsearch+json; compatible-with=9
      	Root causes:
      		media_type_header_exception: Invalid media-type value on headers [Content-Type, Accept]
```

This PR makes sure that the CI client is still using v8.x until we
upgrade that cluster.
---
 package.json                                  |  1 +
 .../report_failures_to_es.ts                  |  2 +-
 .../src/es_client.ts                          |  9 ++--
 renovate.json                                 | 43 +++++++++++++++++++
 .../code_coverage/ingest_coverage/ingest.js   |  2 +-
 .../src/helpers/elasticsearch.ts              |  2 +-
 .../events/persistence/component_templates.ts |  2 +-
 .../report/events/persistence/index.ts        |  2 +-
 .../events/persistence/index_templates.ts     |  2 +-
 .../report/events/persistence/mappings.ts     |  2 +-
 .../sql_search/sql_search_strategy.ts         |  2 +-
 .../server/endpoint/services/actions/mocks.ts |  3 +-
 yarn.lock                                     | 39 ++++++++++-------
 13 files changed, 83 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index e550b9d9b7f32..62e47437cda90 100644
--- a/package.json
+++ b/package.json
@@ -1736,6 +1736,7 @@
     "dependency-check": "^4.1.0",
     "dependency-cruiser": "^16.8.0",
     "ejs": "^3.1.10",
+    "elasticsearch-8.x": "npm:@elastic/elasticsearch@8",
     "enzyme": "^3.11.0",
     "enzyme-to-json": "^3.6.2",
     "eslint": "^8.57.0",
diff --git a/packages/kbn-failed-test-reporter-cli/failed_tests_reporter/report_failures_to_es.ts b/packages/kbn-failed-test-reporter-cli/failed_tests_reporter/report_failures_to_es.ts
index cae3b6377f843..f434f323b5da4 100644
--- a/packages/kbn-failed-test-reporter-cli/failed_tests_reporter/report_failures_to_es.ts
+++ b/packages/kbn-failed-test-reporter-cli/failed_tests_reporter/report_failures_to_es.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { Client, HttpConnection } from '@elastic/elasticsearch';
+import { Client, HttpConnection } from 'elasticsearch-8.x'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import { createFailError } from '@kbn/dev-cli-errors';
 import { ToolingLog } from '@kbn/tooling-log';
 
diff --git a/packages/kbn-performance-testing-dataset-extractor/src/es_client.ts b/packages/kbn-performance-testing-dataset-extractor/src/es_client.ts
index c2ffcd44a8fed..11adf90dcb0a1 100644
--- a/packages/kbn-performance-testing-dataset-extractor/src/es_client.ts
+++ b/packages/kbn-performance-testing-dataset-extractor/src/es_client.ts
@@ -7,9 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { Client, HttpConnection } from '@elastic/elasticsearch';
-import { QueryDslQueryContainer } from '@elastic/elasticsearch/lib/api/types';
-import { SearchRequest, MsearchRequestItem } from '@elastic/elasticsearch/lib/api/types';
+import { Client, HttpConnection } from 'elasticsearch-8.x'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
+import {
+  QueryDslQueryContainer,
+  SearchRequest,
+  MsearchRequestItem,
+} from 'elasticsearch-8.x/lib/api/types'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import { ToolingLog } from '@kbn/tooling-log';
 
 interface ClientOptions {
diff --git a/renovate.json b/renovate.json
index 3791e27775a00..b962443fbfff0 100644
--- a/renovate.json
+++ b/renovate.json
@@ -952,6 +952,48 @@
       ],
       "enabled": true
     },
+    {
+      "groupName": "@elastic/elasticsearch (CI clients)",
+      "matchDepNames": [
+        "elasticsearch-8.x"
+      ],
+      "reviewers": [
+        "team:kibana-operations",
+        "team:appex-qa"
+      ],
+      "allowedVersions": "<9.0.0",
+      "matchBaseBranches": [
+        "main"
+      ],
+      "labels": [
+        "release_note:skip",
+        "backport:prev-minor",
+        "Team:Operations",
+        "Team:QA"
+      ],
+      "enabled": true
+    },
+    {
+      "groupName": "@elastic/elasticsearch",
+      "matchDepNames": [
+        "@elastic/elasticsearch"
+      ],
+      "reviewers": [
+        "team:kibana-operations",
+        "team:kibana-core"
+      ],
+      "allowedVersions": "<9.0.0",
+      "matchBaseBranches": [
+        "8.x"
+      ],
+      "labels": [
+        "release_note:skip",
+        "backport:skip",
+        "Team:Operations",
+        "Team:Core"
+      ],
+      "enabled": true
+    },
     {
       "groupName": "@elastic/elasticsearch",
       "matchDepNames": [
@@ -961,6 +1003,7 @@
         "team:kibana-operations",
         "team:kibana-core"
       ],
+      "allowedVersions": "<8.0.0",
       "matchBaseBranches": [
         "7.17"
       ],
diff --git a/src/dev/code_coverage/ingest_coverage/ingest.js b/src/dev/code_coverage/ingest_coverage/ingest.js
index 09ae98310273b..d758b3952df2a 100644
--- a/src/dev/code_coverage/ingest_coverage/ingest.js
+++ b/src/dev/code_coverage/ingest_coverage/ingest.js
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-const { Client, HttpConnection } = require('@elastic/elasticsearch');
+const { Client, HttpConnection } = require('elasticsearch-8.x'); // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import { RESEARCH_CI_JOB_NAME } from './constants';
 import { whichIndex } from './ingest_helpers';
 import { fromNullable } from './either';
diff --git a/src/platform/packages/private/kbn-scout-reporting/src/helpers/elasticsearch.ts b/src/platform/packages/private/kbn-scout-reporting/src/helpers/elasticsearch.ts
index 7ee1181547afe..38277bebfed79 100644
--- a/src/platform/packages/private/kbn-scout-reporting/src/helpers/elasticsearch.ts
+++ b/src/platform/packages/private/kbn-scout-reporting/src/helpers/elasticsearch.ts
@@ -11,7 +11,7 @@ import {
   Client as ESClient,
   ClientOptions as ESClientOptions,
   HttpConnection,
-} from '@elastic/elasticsearch';
+} from 'elasticsearch-8.x'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import { ToolingLog } from '@kbn/tooling-log';
 import { createFailError } from '@kbn/dev-cli-errors';
 
diff --git a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/component_templates.ts b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/component_templates.ts
index 80ec02402a88d..869461c5b68f2 100644
--- a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/component_templates.ts
+++ b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/component_templates.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { ClusterPutComponentTemplateRequest } from '@elastic/elasticsearch/lib/api/types';
+import { ClusterPutComponentTemplateRequest } from 'elasticsearch-8.x/lib/api/types'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import {
   buildkiteProperties,
   reporterProperties,
diff --git a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index.ts b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index.ts
index 1c8b2d5143e9e..45811817a17c2 100644
--- a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index.ts
+++ b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index.ts
@@ -11,7 +11,7 @@ import fs from 'node:fs';
 import path from 'node:path';
 import readline from 'node:readline';
 import { ToolingLog } from '@kbn/tooling-log';
-import { Client as ESClient } from '@elastic/elasticsearch';
+import { Client as ESClient } from 'elasticsearch-8.x'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import {
   SCOUT_REPORTER_ES_API_KEY,
   SCOUT_REPORTER_ES_URL,
diff --git a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index_templates.ts b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index_templates.ts
index 3ad0a5809009b..6b59d3209a5bf 100644
--- a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index_templates.ts
+++ b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/index_templates.ts
@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { IndicesPutIndexTemplateRequest } from '@elastic/elasticsearch/lib/api/types';
+import { IndicesPutIndexTemplateRequest } from 'elasticsearch-8.x/lib/api/types'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 import { SCOUT_TEST_EVENTS_TEMPLATE_NAME, SCOUT_TEST_EVENTS_INDEX_PATTERN } from '@kbn/scout-info';
 import * as componentTemplates from './component_templates';
 
diff --git a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/mappings.ts b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/mappings.ts
index 539b226048ea2..e2a5c8a660949 100644
--- a/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/mappings.ts
+++ b/src/platform/packages/private/kbn-scout-reporting/src/reporting/report/events/persistence/mappings.ts
@@ -6,7 +6,7 @@
  * your election, the "Elastic License 2.0", the "GNU Affero General Public
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
-import { PropertyName, MappingProperty } from '@elastic/elasticsearch/lib/api/types';
+import { PropertyName, MappingProperty } from 'elasticsearch-8.x/lib/api/types'; // Switch to `@elastic/elasticsearch` when the CI cluster is upgraded.
 
 export const buildkiteProperties: Record<PropertyName, MappingProperty> = {
   branch: {
diff --git a/src/platform/plugins/shared/data/server/search/strategies/sql_search/sql_search_strategy.ts b/src/platform/plugins/shared/data/server/search/strategies/sql_search/sql_search_strategy.ts
index ad03451bf8691..f35a3c74317db 100644
--- a/src/platform/plugins/shared/data/server/search/strategies/sql_search/sql_search_strategy.ts
+++ b/src/platform/plugins/shared/data/server/search/strategies/sql_search/sql_search_strategy.ts
@@ -10,7 +10,7 @@
 import type { IncomingHttpHeaders } from 'http';
 import type { IScopedClusterClient, Logger } from '@kbn/core/server';
 import { catchError, tap } from 'rxjs';
-import type { DiagnosticResult } from '@elastic/transport';
+import type { DiagnosticResult } from '@elastic/elasticsearch';
 import { SqlQueryResponse, type SqlQuerySqlFormat } from '@elastic/elasticsearch/lib/api/types';
 import { getKbnServerError } from '@kbn/kibana-utils-plugin/server';
 import { getKbnSearchError } from '../../report_search_error';
diff --git a/x-pack/solutions/security/plugins/security_solution/server/endpoint/services/actions/mocks.ts b/x-pack/solutions/security/plugins/security_solution/server/endpoint/services/actions/mocks.ts
index aeb29d030bf6c..f86e966e24b5c 100644
--- a/x-pack/solutions/security/plugins/security_solution/server/endpoint/services/actions/mocks.ts
+++ b/x-pack/solutions/security/plugins/security_solution/server/endpoint/services/actions/mocks.ts
@@ -5,11 +5,10 @@
  * 2.0.
  */
 
-import type { estypes } from '@elastic/elasticsearch';
+import type { estypes, TransportRequestOptions } from '@elastic/elasticsearch';
 import type { ElasticsearchClientMock } from '@kbn/core/server/mocks';
 import { AGENT_ACTIONS_RESULTS_INDEX } from '@kbn/fleet-plugin/common';
 import { Readable } from 'stream';
-import type { TransportRequestOptions } from '@elastic/transport';
 import { applyEsClientSearchMock } from '../../mocks/utils.mock';
 import type { HapiReadableStream } from '../../../types';
 import { EndpointActionGenerator } from '../../../../common/endpoint/data_generators/endpoint_action_generator';
diff --git a/yarn.lock b/yarn.lock
index 3c42e920684e4..a9e3f5e3d6726 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2471,18 +2471,18 @@
     tslib "^2.8.1"
     undici "^7.2.3"
 
-"@elastic/transport@^8.3.1":
-  version "8.9.1"
-  resolved "https://registry.yarnpkg.com/@elastic/transport/-/transport-8.9.1.tgz#1acc090ac45903a3d5a8b7269f6ba6410108dc0a"
-  integrity sha512-jasKNQeOb1vNf9aEYg+8zXmetaFjApDTSCC4QTl6aTixvyiRiSLcCiB8P6Q0lY9JIII/BhqNl8WbpFnsKitntw==
+"@elastic/transport@^8.3.1", "@elastic/transport@^8.9.1":
+  version "8.9.4"
+  resolved "https://registry.yarnpkg.com/@elastic/transport/-/transport-8.9.4.tgz#8acdc0b95cd0be8022e4e16ec5a755ab65ac5ea0"
+  integrity sha512-y6kjy5s0MQE3MQx9ItmvQ8th7GlGcZfzZ7ZDvI8bUhaKua2dJk01k9ia/bdJ4dnPpWpOyFTRgkgBZS31ZTLpcg==
   dependencies:
     "@opentelemetry/api" "1.x"
-    debug "^4.3.4"
-    hpagent "^1.0.0"
+    debug "^4.3.7"
+    hpagent "^1.2.0"
     ms "^2.1.3"
-    secure-json-parse "^2.4.0"
-    tslib "^2.4.0"
-    undici "^6.12.0"
+    secure-json-parse "^3.0.1"
+    tslib "^2.8.1"
+    undici "^6.21.1"
 
 "@emotion/babel-plugin-jsx-pragmatic@^0.2.1":
   version "0.2.1"
@@ -18137,6 +18137,15 @@ elastic-apm-node@^4.10.0, elastic-apm-node@^4.11.0:
     stream-chopper "^3.0.1"
     unicode-byte-truncate "^1.0.0"
 
+"elasticsearch-8.x@npm:@elastic/elasticsearch@8":
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/@elastic/elasticsearch/-/elasticsearch-8.17.1.tgz#97baa241f1f7bdd9b9b5c7479c64996e4c54adea"
+  integrity sha512-EaDP4/jfNu0nhnHZjxk9bL9ofKWKX9QUdEJ8QsGa+/KMPBEwD+HMyYXH4FSRlg7YONI0UbdO/mMZobvcEnMFBA==
+  dependencies:
+    "@elastic/transport" "^8.9.1"
+    apache-arrow "^18.0.0"
+    tslib "^2.4.0"
+
 elasticsearch@^16.4.0:
   version "16.7.0"
   resolved "https://registry.yarnpkg.com/elasticsearch/-/elasticsearch-16.7.0.tgz#9055e3f586934d8de5fd407b04050e9d54173333"
@@ -21121,7 +21130,7 @@ hpack.js@^2.1.6:
     readable-stream "^2.0.1"
     wbuf "^1.1.0"
 
-hpagent@^1.0.0, hpagent@^1.2.0:
+hpagent@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/hpagent/-/hpagent-1.2.0.tgz#0ae417895430eb3770c03443456b8d90ca464903"
   integrity sha512-A91dYTeIB6NoXG+PxTQpCCDDnfHsW9kc06Lvpu1TEe9gnd6ZFeiBoRO9JvzEv6xK7EX97/dUE8g/vBMTqTS3CA==
@@ -29916,7 +29925,7 @@ screenfull@^5.0.0:
   resolved "https://registry.yarnpkg.com/screenfull/-/screenfull-5.0.0.tgz#5c2010c0e84fd4157bf852877698f90b8cbe96f6"
   integrity sha512-yShzhaIoE9OtOhWVyBBffA6V98CDCoyHTsp8228blmqYy1Z5bddzE/4FPiJKlr8DVR4VBiiUyfPzIQPIYDkeMA==
 
-secure-json-parse@^2.4.0, secure-json-parse@^2.7.0:
+secure-json-parse@^2.7.0:
   version "2.7.0"
   resolved "https://registry.npmjs.org/secure-json-parse/-/secure-json-parse-2.7.0.tgz"
   integrity sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==
@@ -32576,10 +32585,10 @@ undici@^5.28.5:
   dependencies:
     "@fastify/busboy" "^2.0.0"
 
-undici@^6.12.0:
-  version "6.19.2"
-  resolved "https://registry.yarnpkg.com/undici/-/undici-6.19.2.tgz#231bc5de78d0dafb6260cf454b294576c2f3cd31"
-  integrity sha512-JfjKqIauur3Q6biAtHJ564e3bWa8VvT+7cSiOJHFbX4Erv6CLGDpg8z+Fmg/1OI/47RA+GI2QZaF48SSaLvyBA==
+undici@^6.21.1:
+  version "6.21.1"
+  resolved "https://registry.yarnpkg.com/undici/-/undici-6.21.1.tgz#336025a14162e6837e44ad7b819b35b6c6af0e05"
+  integrity sha512-q/1rj5D0/zayJB2FraXdaWxbhWiNKDvu8naDT2dl1yTlvJp4BLtOcp2a5BvgGNQpYYJzau7tf1WgKv3b+7mqpQ==
 
 undici@^7.2.3:
   version "7.3.0"

From d8be937da0491f7b0c18f1c424489973f9e6840b Mon Sep 17 00:00:00 2001
From: Davis McPhee <davis.mcphee@elastic.co>
Date: Wed, 5 Mar 2025 16:15:17 -0400
Subject: [PATCH 11/12] Improve `ReportingPageObject.getReportURL` error
 handling (#212684)

## Summary

We've been experiencing some flakiness with serverless reporting
functional tests (e.g. [this
one](https://buildkite.com/elastic/appex-qa-serverless-kibana-ftr-tests/builds/4446#019547ec-baca-445b-ad04-c591d45c26ab)).
We suspect it's timeout related, but it's hard to know for sure because
the error handling code also throws an error when
`[data-test-errorText]` isn't found, obscuring the original error.

This PR updates `ReportingPageObject.getReportURL` to check for
`[data-test-errorText]` before attempting to select it, and ensures the
original error is surfaced even when not found.

### Checklist

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

Co-authored-by: Tim Sullivan <tsullivan@users.noreply.github.com>
---
 x-pack/test/functional/page_objects/reporting_page.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/x-pack/test/functional/page_objects/reporting_page.ts b/x-pack/test/functional/page_objects/reporting_page.ts
index 5cdc37efd5e6b..aa73e9cbc4ec2 100644
--- a/x-pack/test/functional/page_objects/reporting_page.ts
+++ b/x-pack/test/functional/page_objects/reporting_page.ts
@@ -50,10 +50,12 @@ export class ReportingPageObject extends FtrService {
 
       return url;
     } catch (err) {
-      const errorTextEl = await this.find.byCssSelector('[data-test-errorText]');
-      const errorText = await errorTextEl.getAttribute('data-test-errorText');
-      const newError = new Error(`Test report failed: ${errorText}: ${err}`);
-      throw newError;
+      let errorText = 'Unknown error';
+      if (await this.find.existsByCssSelector('[data-test-errorText]')) {
+        const errorTextEl = await this.find.byCssSelector('[data-test-errorText]');
+        errorText = (await errorTextEl.getAttribute('data-test-errorText')) ?? errorText;
+      }
+      throw new Error(`Test report failed: ${errorText}: ${err}`, { cause: err });
     }
   }
 

From e9f852ecc3fca4ff8b0049da350ecabf69b803ab Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Wed, 5 Mar 2025 21:18:10 +0100
Subject: [PATCH 12/12] [Unified search] Change codeowners to presentation team
 (#212855)

## Summary

Unified Search belongs to presentations team so I'm changing the
codeowners entry. There was a [previous
attempt](https://github.com/elastic/kibana/pull/208381/files) of doing
the same thing, but the auto-commit kicked in and reverted the change
for unified_search plugin, since we forgot to add the entry
in`kibana.jsonc`.
---
 .github/CODEOWNERS                                      | 2 +-
 src/platform/plugins/shared/unified_search/kibana.jsonc | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index afb07a34d3bc2..3ec7fcdc1cc2c 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -700,7 +700,7 @@ src/platform/plugins/shared/ui_actions @elastic/appex-sharedux
 src/platform/plugins/shared/ui_actions_enhanced @elastic/appex-sharedux
 src/platform/plugins/shared/unified_doc_viewer @elastic/kibana-data-discovery
 src/platform/plugins/shared/unified_histogram @elastic/kibana-data-discovery
-src/platform/plugins/shared/unified_search @elastic/kibana-visualizations
+src/platform/plugins/shared/unified_search @elastic/kibana-presentation
 src/platform/plugins/shared/usage_collection @elastic/kibana-core
 src/platform/plugins/shared/vis_types/timeseries @elastic/kibana-visualizations
 src/platform/plugins/shared/visualizations @elastic/kibana-visualizations
diff --git a/src/platform/plugins/shared/unified_search/kibana.jsonc b/src/platform/plugins/shared/unified_search/kibana.jsonc
index b3e71c12af28a..5d62b77f56333 100644
--- a/src/platform/plugins/shared/unified_search/kibana.jsonc
+++ b/src/platform/plugins/shared/unified_search/kibana.jsonc
@@ -2,7 +2,7 @@
   "type": "plugin",
   "id": "@kbn/unified-search-plugin",
   "owner": [
-    "@elastic/kibana-visualizations"
+    "@elastic/kibana-presentation"
   ],
   "group": "platform",
   "visibility": "shared",