[9.0] [Siem Migrations] Translated Rules Upsell Page (#212777) (#213253)

# Backport This will backport the following commits from `main` to `9.0`: - [[Siem Migrations] Translated Rules Upsell Page (#212777)](#212777)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Jatin Kathuria <jatin.kathuria@elastic.co>
elastic · Mar 5, 2025 · 9bb526a · 9bb526a
1 parent f62e695
commit 9bb526a
Show file tree

Hide file tree

Showing 15 changed files with 239 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...plugins/security_solution_ess/public/upselling/pages/siem_migrations_translated_rules.tsx b/...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/...ions/security/plugins/security_solution_ess/public/upselling/register_upsellings.test.tsx b/...ions/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/...solutions/security/plugins/security_solution_ess/public/upselling/register_upsellings.tsx b/...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
@@ -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/...lutions/security/plugins/security_solution_serverless/public/upselling/lazy_upselling.tsx b/...lutions/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/.../security_solution_serverless/public/upselling/pages/siem_migrations_translated_rules.tsx b/.../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/.../solutions/security/plugins/security_solution_serverless/public/upselling/translations.ts b/.../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/...k/solutions/security/plugins/security_solution_serverless/public/upselling/upsellings.tsx b/...k/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
@@ -46,6 +46,6 @@
     "@kbn/logging",
     "@kbn/automatic-import-plugin",
     "@kbn/cloud-security-posture-common",
-    "@kbn/dev-utils"
+    "@kbn/dev-utils",
   ]
 }