[9.0] [ Siem Migrations ] Upsell Siem Migrations Start (#212607) (#21…

…3044) # Backport This will backport the following commits from `main` to `9.0`: - [[ Siem Migrations ] Upsell Siem Migrations Start (#212607)](#212607)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)
elastic · Mar 5, 2025 · 44d6892 · 44d6892
1 parent 6517579
commit 44d6892
Show file tree

Hide file tree

Showing 26 changed files with 612 additions and 22 deletions.
diff --git a/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.test.tsx b/x-pack/solutions/security/packages/upselling/sections/siem_migrations_start.test.tsx
@@ -0,0 +1,44 @@
+/*
+ * 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 { SiemMigrationStartUpsellSection } from './siem_migrations_start';
+
+describe('SiemMigrationStartUpsellSection', () => {
+  it('should render the component with all sections correctly', () => {
+    render(
+      <SiemMigrationStartUpsellSection
+        title="title"
+        upgradeMessage="upgradeMessage"
+        upgradeHref="https://upgrade.Href"
+      />
+    );
+
+    expect(screen.getByTestId('siemMigrationStartUpsellSection')).toBeVisible();
+
+    expect(screen.getByTestId('siemMigrationStartUpsellTitle')).toBeVisible();
+    expect(screen.getByTestId('siemMigrationStartUpsellTitle')).toHaveTextContent('title');
+
+    expect(screen.getByTestId('siemMigrationStartUpsellMessage')).toBeVisible();
+    expect(screen.getByTestId('siemMigrationStartUpsellMessage')).toHaveTextContent(
+      'upgradeMessage'
+    );
+
+    expect(screen.getByTestId('siemMigrationStartUpsellHref')).toBeVisible();
+    expect(screen.getByTestId('siemMigrationStartUpsellHref')).toHaveAttribute(
+      'href',
+      'https://upgrade.Href'
+    );
+  });
+
+  it('should render the component without upgradeHref', () => {
+    render(<SiemMigrationStartUpsellSection title="title" upgradeMessage="upgradeMessage" />);
+
+    expect(screen.queryByTestId('SiemMigrationStartUpsellHref')).not.toBeInTheDocument();
+  });
+});
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
@@ -0,0 +1,52 @@
+/*
+ * 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, EuiCallOut, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
+import React from 'react';
+
+export const SiemMigrationStartUpsellSection = React.memo(function SiemMigrationStartUpsellSection({
+  title,
+  upgradeMessage,
+  upgradeHref,
+}: {
+  title: React.ReactNode;
+  upgradeMessage: React.ReactNode;
+  upgradeHref?: string;
+}) {
+  return (
+    <>
+      <EuiPanel data-test-subj="siemMigrationStartUpsellSection" paddingSize="none" hasBorder>
+        <EuiCallOut
+          data-test-subj="siemMigrationStartUpsellTitle"
+          title={title}
+          color="warning"
+          iconType="lock"
+        >
+          <EuiFlexGroup>
+            <EuiFlexItem grow={true}>
+              <EuiText size="s" data-test-subj="siemMigrationStartUpsellMessage">
+                {upgradeMessage}
+              </EuiText>
+            </EuiFlexItem>
+            {upgradeHref ? (
+              <EuiFlexItem grow={false}>
+                <EuiButton
+                  data-test-subj="siemMigrationStartUpsellHref"
+                  href={upgradeHref}
+                  color="warning"
+                  fill
+                >
+                  {'Manage License'}
+                </EuiButton>
+              </EuiFlexItem>
+            ) : null}
+          </EuiFlexGroup>
+        </EuiCallOut>
+      </EuiPanel>
+    </>
+  );
+});
diff --git a/x-pack/solutions/security/packages/upselling/service/types.ts b/x-pack/solutions/security/packages/upselling/service/types.ts
@@ -20,7 +20,8 @@ export type UpsellingSectionId =
   | 'endpoint_custom_notification'
   | 'cloud_security_posture_integration_installation'
   | 'ruleDetailsEndpointExceptions'
-  | 'automatic_import';
+  | 'automatic_import'
+  | 'siem_migrations_start';
 
 export type UpsellingMessageId =
   | 'investigation_guide'

diff --git a/...y_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx b/...y_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx
@@ -24,7 +24,13 @@ export const CenteredLoadingSpinner = React.memo<CenteredLoadingSpinnerProps>(
       [topOffset, euiTheme]
     );
 
-    return <EuiLoadingSpinner {...euiLoadingSpinnerProps} style={style} />;
+    return (
+      <EuiLoadingSpinner
+        data-test-subj="centeredLoadingSpinner"
+        {...euiLoadingSpinnerProps}
+        style={style}
+      />
+    );
   }
 );
 CenteredLoadingSpinner.displayName = 'CenteredLoadingSpinner';
diff --git a/...olutions/security/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts b/...olutions/security/plugins/security_solution/public/common/lib/kibana/kibana_react.mock.ts
@@ -58,6 +58,7 @@ import { UpsellingService } from '@kbn/security-solution-upselling/service';
 import { calculateBounds } from '@kbn/data-plugin/common';
 import { alertingPluginMock } from '@kbn/alerting-plugin/public/mocks';
 import { createTelemetryServiceMock } from '../telemetry/telemetry_service.mock';
+import { createSiemMigrationsMock } from '../../mock/mock_siem_migrations_service';
 
 const mockUiSettings: Record<string, unknown> = {
   [DEFAULT_TIME_RANGE]: { from: 'now-15m', to: 'now', mode: 'quick' },
@@ -128,6 +129,7 @@ export const createStartServicesMock = (
   const mockSetHeaderActionMenu = jest.fn();
   const timelineDataService = dataPluginMock.createStartContract();
   const alerting = alertingPluginMock.createStartContract();
+  const siemMigrations = createSiemMigrationsMock();
 
   /*
    * Below mocks are needed by unified field list
@@ -258,6 +260,7 @@ export const createStartServicesMock = (
     upselling: new UpsellingService(),
     timelineDataService,
     alerting,
+    siemMigrations,
   } as unknown as StartServices;
 };
 

diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/mock/index.ts b/x-pack/solutions/security/plugins/security_solution/public/common/mock/index.ts
@@ -20,3 +20,4 @@ export * from './timeline_results';
 export * from './utils';
 export * from './create_store';
 export * from './create_react_query_wrapper';
+export * from './mock_siem_migrations_service';
diff --git a/...ons/security/plugins/security_solution/public/common/mock/mock_siem_migrations_service.ts b/...ons/security/plugins/security_solution/public/common/mock/mock_siem_migrations_service.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 { createTelemetryServiceMock } from '../lib/telemetry/telemetry_service.mock';
+
+const createRuleMigrationStorageMock = () => {
+  return {
+    get: jest.fn(),
+    set: jest.fn(),
+    remove: jest.fn(),
+  };
+};
+
+export const createSiemMigrationsMock = () => {
+  return {
+    rules: {
+      getLatestStats$: jest.fn(),
+      getMissingCapabilities: jest.fn(),
+      hasMissingCapabilities: jest.fn(),
+      isAvailable: jest.fn(),
+      startPolling: jest.fn(),
+      createRuleMigration: jest.fn(),
+      upsertMigrationResources: jest.fn(),
+      startRuleMigration: jest.fn(),
+      getRuleMigrationStats: jest.fn(),
+      getRuleMigrationsStats: jest.fn(),
+      getMissingResources: jest.fn(),
+      getIntegrations: jest.fn(),
+      connectorIdStorage: createRuleMigrationStorageMock(),
+      traceOptionsStorage: createRuleMigrationStorageMock(),
+      telemetry: createTelemetryServiceMock(),
+    },
+  };
+};
diff --git a/.../public/onboarding/components/onboarding_body/cards/siem_migrations/ai_connector/index.ts b/.../public/onboarding/components/onboarding_body/cards/siem_migrations/ai_connector/index.ts
@@ -25,5 +25,4 @@ export const aiConnectorCardConfig: OnboardingCardConfig<AIConnectorCardMetadata
       )
   ),
   checkComplete: checkAiConnectorsCardComplete,
-  licenseTypeRequired: 'enterprise',
 };
diff --git a/...blic/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts b/...blic/onboarding/components/onboarding_body/cards/siem_migrations/start_migration/index.ts
@@ -17,7 +17,6 @@ export const startMigrationCardConfig: OnboardingCardConfig<StartMigrationCardMe
   id: OnboardingCardId.siemMigrationsStart,
   title: START_MIGRATION_CARD_TITLE,
   icon: () => getCardIcon(OnboardingCardId.siemMigrationsStart),
-  licenseTypeRequired: 'enterprise',
   Component: React.lazy(
     () =>
       import(

diff --git a/...mponents/onboarding_body/cards/siem_migrations/start_migration/rule_migrations_panels.tsx b/...mponents/onboarding_body/cards/siem_migrations/start_migration/rule_migrations_panels.tsx
@@ -53,7 +53,7 @@ export const RuleMigrationsPanels = React.memo<RuleMigrationsPanelsProps>(
     );
 
     return (
-      <EuiFlexGroup direction="column" gutterSize="m">
+      <EuiFlexGroup data-test-subj="ruleMigrationPanelGroup" direction="column" gutterSize="m">
         <EuiFlexItem grow={false}>
           {!isConnectorsCardComplete && (
             <>
-Original file line number
+Diff line change
@@ Expand Up @@
           )
       ),
       checkComplete: checkAiConnectorsCardComplete,
-      licenseTypeRequired: 'enterprise',
     };