[8.18] [Siem Migrations] Translated Rules Upsell Page (#212777) (#213443)

# Backport This will backport the following commits from `main` to `8.18`: - [[Siem Migrations] Translated Rules Upsell Page (#212777)](https://github.com/elastic/kibana/pull/212777)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
2025-04-24 01:38:56 -04:00 · 2025-03-11 13:11:30 +01:00 · 2025-03-11 13:11:30 +01:00 · 85089b2030
commit 85089b2030
parent 0834cb6504
15 changed files with 241 additions and 3 deletions
--- 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',
+  }
+);
--- 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();
+  });
+});
--- 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>
+    );
+  }
+);
--- 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',
+  }
+);
--- 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}
--- 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,
--- 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
@ -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',
+        })}
+      />
+    );
+  }
+);
--- 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
    );
--- 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
--- 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.',
+  }
+);
--- 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 }) => ({
--- 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
@ -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}
+      />
+    );
+  }
+);
--- 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.',
+  }
+);
--- 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) ?? '';
--- a/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json
+++ b/x-pack/solutions/security/plugins/security_solution_serverless/tsconfig.json
@ -11,7 +11,9 @@
    "server/**/*.ts",
    "../../../../../typings/**/*"
  ],
-  "exclude": ["target/**/*"],
+  "exclude": [
+    "target/**/*"
+  ],
  "kbn_references": [
    "@kbn/core",
    "@kbn/config-schema",