Automatic Migrations Refactor - Siem Migration onboarding config refactor

x-pack/platform/plugins/private/translations/translations/de-DE.json

@@ -36914,7 +36914,6 @@
     "xpack.securitySolution.onboarding.cardBadge.techPreview": "Technische Vorschau",
     "xpack.securitySolution.onboarding.cardBadge.techPreviewTooltip": "Dieses Feature befindet sich in der technischen Vorschau und kann sich ändern.",
     "xpack.securitySolution.onboarding.cardComplete": "Abgeschlossen",
-    "xpack.securitySolution.onboarding.configure.title": "Konfigurieren",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsButton": "Integrationsschritt hinzufügen",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsText": "Um Dashboards anzuzeigen, müssen Sie zuerst Integrationen hinzufügen.",
     "xpack.securitySolution.onboarding.dashboardsCard.custom.description": "Per Drag-and-Drop zu einer benutzerdefinierten Visualisierung",
@@ -36951,7 +36950,6 @@
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchAgents.errorTitle": "Fehler beim Abrufen von Agentendaten",
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchIntegrations.errorTitle": "Fehler beim Abrufen von Integrationsdaten",
     "xpack.securitySolution.onboarding.integrationsCard.title": "Daten mit Integrationen hinzufügen",
-    "xpack.securitySolution.onboarding.migrate.title": "Regeln migrieren und Daten hinzufügen",
     "xpack.securitySolution.onboarding.rulesCard.addRulesButton": "Elastic-Regeln hinzufügen",
     "xpack.securitySolution.onboarding.rulesCard.calloutIntegrationsButton": "Integrationsschritt hinzufügen",
     "xpack.securitySolution.onboarding.rulesCard.calloutIntegrationsText": "Um Elastic-Regeln hinzuzufügen, fügen Sie zuerst Integrationen hinzu.",

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -37296,7 +37296,6 @@
     "xpack.securitySolution.onboarding.cardBadge.techPreviewTooltip": "Cette fonctionnalité est en version d'évaluation technique. Elle est donc susceptible d'être modifiée.",
     "xpack.securitySolution.onboarding.cardComplete": "Terminé",
     "xpack.securitySolution.onboarding.common.startMigration.connectorMissingText": "Paramétrer le connecteur d'IA",
-    "xpack.securitySolution.onboarding.configure.title": "Configurer",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsButton": "Ajouter des étapes d'intégration",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsText": "Pour afficher les tableaux de bord, ajoutez d'abord des intégrations.",
     "xpack.securitySolution.onboarding.dashboardsCard.custom.description": "Personnalisez votre visualisation grâce à des cliquer-glisser",
@@ -37334,7 +37333,6 @@
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchAgents.errorTitle": "Erreur lors de la récupération des données des agents",
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchIntegrations.errorTitle": "Erreur lors de la récupération des données d'intégration",
     "xpack.securitySolution.onboarding.integrationsCard.title": "Ajouter des données avec des intégrations",
-    "xpack.securitySolution.onboarding.migrate.title": "Migrer les règles et ajouter des données",
     "xpack.securitySolution.onboarding.rules.startMigration.title": "Migrez vos règles SIEM Splunk® vers Elastic",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.button": "Charger les règles",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.description": "Chargez vos règles avant d'importer des données pour identifier les intégrations, les flux de données, et les détails disponibles de toutes vos règles SIEM. Cliquez sur \"Charger les règles\" pour afficher des instructions étape par étape pour l'exportation et le chargement des règles.",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -37355,7 +37355,6 @@
     "xpack.securitySolution.onboarding.cardBadge.techPreviewTooltip": "この機能はテクニカルプレビュー中であるため、変更される可能性があります。",
     "xpack.securitySolution.onboarding.cardComplete": "完了",
     "xpack.securitySolution.onboarding.common.startMigration.connectorMissingText": "AIコネクターを設定",
-    "xpack.securitySolution.onboarding.configure.title": "構成",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsButton": "統合ステップの追加",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsText": "ダッシュボードを表示するには、最初に統合を追加してください。",
     "xpack.securitySolution.onboarding.dashboardsCard.custom.description": "カスタムビジュアライゼーションまでドラッグしてドロップ",
@@ -37393,7 +37392,6 @@
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchAgents.errorTitle": "エージェントデータの取り込みエラー",
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchIntegrations.errorTitle": "統合データの取り込みエラー",
     "xpack.securitySolution.onboarding.integrationsCard.title": "統合によってデータを追加",
-    "xpack.securitySolution.onboarding.migrate.title": "ルールを移行してデータを追加",
     "xpack.securitySolution.onboarding.rules.startMigration.title": "既存のSplunk® SIEMルールをElasticに移行",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.button": "ルールのアップロード",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.description": "データをインポートする前にルールをアップロードし、SIEMルールの統合、データストリーム、利用可能な詳細を特定します。［ルールのアップロード］をクリックすると、ルールのエクスポートとアップロードの手順が段階的に表示されます。",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -37335,7 +37335,6 @@
     "xpack.securitySolution.onboarding.cardBadge.techPreviewTooltip": "此功能处于技术预览状态，可能会进行更改。",
     "xpack.securitySolution.onboarding.cardComplete": "已完成",
     "xpack.securitySolution.onboarding.common.startMigration.connectorMissingText": "设置 AI 连接器",
-    "xpack.securitySolution.onboarding.configure.title": "配置",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsButton": "添加集成步骤",
     "xpack.securitySolution.onboarding.dashboardsCard.calloutIntegrationsText": "要查看仪表板，请先添加集成。",
     "xpack.securitySolution.onboarding.dashboardsCard.custom.description": "拖放以进行定制可视化",
@@ -37373,7 +37372,6 @@
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchAgents.errorTitle": "获取代理数据时出错",
     "xpack.securitySolution.onboarding.integrationsCard.checkComplete.fetchIntegrations.errorTitle": "获取集成数据时出错",
     "xpack.securitySolution.onboarding.integrationsCard.title": "通过集成添加数据",
-    "xpack.securitySolution.onboarding.migrate.title": "迁移规则并添加数据",
     "xpack.securitySolution.onboarding.rules.startMigration.title": "将现有 Splunk® SIEM 规则迁移到 Elastic",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.button": "上传规则",
     "xpack.securitySolution.onboarding.rules.startMigration.upload.description": "在导入数据之前上传规则，以识别集成、数据流和 SIEM 规则的可用详情。单击“上传规则”以查看导出和上传规则的分步说明。",

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/body_config.ts

@@ -14,10 +14,6 @@ import { alertsCardConfig } from './cards/alerts';
 import { assistantCardConfig } from './cards/assistant';
 import { integrationsExternalDetectionsCardConfig } from './cards/integrations_external_detections';
 import { knowledgeSourceCardConfig } from './cards/knowledge_source';
-import { aiConnectorCardConfig } from './cards/siem_migrations/ai_connector';
-import { startRuleMigrationCardConfig } from './cards/siem_migrations/start_migration/rules';
-import { startDashboardMigrationCardConfig } from './cards/siem_migrations/start_migration/dashboards';
-import { siemMigrationIntegrationsCardConfig } from './cards/siem_migrations/integrations';
 
 export const defaultBodyConfig: OnboardingGroupConfig[] = [
   {
@@ -58,22 +54,3 @@ export const defaultExternalDetectionsBodyConfig: OnboardingGroupConfig[] = [
     cards: [assistantCardConfig],
   },
 ];
-
-export const siemMigrationsBodyConfig: OnboardingGroupConfig[] = [
-  {
-    title: i18n.translate('xpack.securitySolution.onboarding.configure.title', {
-      defaultMessage: 'Configure',
-    }),
-    cards: [aiConnectorCardConfig],
-  },
-  {
-    title: i18n.translate('xpack.securitySolution.onboarding.migrate.title', {
-      defaultMessage: 'Migrate rules & dashboards',
-    }),
-    cards: [
-      startRuleMigrationCardConfig,
-      siemMigrationIntegrationsCardConfig,
-      startDashboardMigrationCardConfig,
-    ],
-  },
-];

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.test.ts

@@ -8,10 +8,19 @@
 import { renderHook } from '@testing-library/react';
 import { useBodyConfig } from './use_body_config';
 import { mockOnboardingContext, onboardingContext } from '../../__mocks__/mocks';
-import { OnboardingTopicId } from '../../../constants';
+
+const topicId = 'topic-id';
+const mockUseTopicId = jest.fn(() => topicId);
+jest.mock('../../hooks/use_topic_id', () => ({
+  useTopicId: () => mockUseTopicId(),
+}));
 
 const defaultBodyConfig = [{ title: 'Default Group 1', cards: [] }];
-const config = new Map([[OnboardingTopicId.default, { body: defaultBodyConfig }]]);
+const bodyConfig = [{ title: 'Group 1', cards: [] }];
+const config = new Map([
+  ['default', { body: defaultBodyConfig }],
+  [topicId, { body: bodyConfig }],
+]);
 
 jest.mock('../../onboarding_context');
 
@@ -26,7 +35,7 @@ describe('useBodyConfig', () => {
     });
 
     it('should return an empty array', () => {
-      const { result } = renderHook(() => useBodyConfig(OnboardingTopicId.default));
+      const { result } = renderHook(() => useBodyConfig());
       expect(result.current).toEqual([]);
     });
   });
@@ -37,8 +46,20 @@ describe('useBodyConfig', () => {
     });
 
     it('should return the body config for the selected topic', () => {
-      const { result } = renderHook(() => useBodyConfig(OnboardingTopicId.default));
-      expect(result.current).toEqual(defaultBodyConfig);
+      const { result } = renderHook(() => useBodyConfig());
+      expect(result.current).toEqual(bodyConfig);
+    });
+  });
+
+  describe('when the selected topic does not exist (not expected)', () => {
+    beforeEach(() => {
+      mockUseTopicId.mockReturnValue('non-existent-topic');
+      mockOnboardingContext.mockReturnValue({ ...onboardingContext, config });
+    });
+
+    it('should return the body config for the selected topic', () => {
+      const { result } = renderHook(() => useBodyConfig());
+      expect(result.current).toEqual([]);
     });
   });
 });

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts

@@ -7,13 +7,14 @@
 
 import { useMemo } from 'react';
 import { useOnboardingContext } from '../../onboarding_context';
-import type { OnboardingTopicId } from '../../../constants';
+import { useTopicId } from '../../hooks/use_topic_id';
 import type { OnboardingGroupConfig } from '../../../types';
 
 /**
  * Hook that returns the body config for the selected topic
  */
-export const useBodyConfig = (topicId: OnboardingTopicId): OnboardingGroupConfig[] => {
+export const useBodyConfig = (): OnboardingGroupConfig[] => {
+  const topicId = useTopicId();
   const { config } = useOnboardingContext();
   const topicBodyConfig = useMemo(() => {
     let bodyConfig: OnboardingGroupConfig[] = [];

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.test.tsx

@@ -6,7 +6,6 @@
  */
 import React from 'react';
 import { render, screen, fireEvent, act } from '@testing-library/react';
-import { OnboardingTopicId } from '../../constants';
 import { OnboardingBody } from './onboarding_body';
 import { useBodyConfig } from './hooks/use_body_config';
 import { useExpandedCard } from './hooks/use_expanded_card';
@@ -60,14 +59,14 @@ describe('OnboardingBody Component', () => {
   });
 
   it('should render the OnboardingBody component with the correct content', () => {
-    render(<OnboardingBody topicId={OnboardingTopicId.default} />, { wrapper: TestProviders });
+    render(<OnboardingBody />, { wrapper: TestProviders });
     expect(screen.getByText('Group 1')).toBeInTheDocument();
     expect(screen.getByText('Card 1')).toBeInTheDocument();
   });
 
   describe('when the card is expanded', () => {
     beforeEach(() => {
-      render(<OnboardingBody topicId={OnboardingTopicId.default} />, { wrapper: TestProviders });
+      render(<OnboardingBody />, { wrapper: TestProviders });
       fireEvent.click(screen.getByText('Card 1'));
     });
 
@@ -87,7 +86,7 @@ describe('OnboardingBody Component', () => {
         setExpandedCardId: mockSetExpandedCardId,
       });
 
-      render(<OnboardingBody topicId={OnboardingTopicId.default} />, { wrapper: TestProviders });
+      render(<OnboardingBody />, { wrapper: TestProviders });
 
       fireEvent.click(screen.getByText('Card 1'));
     });
@@ -114,7 +113,7 @@ describe('OnboardingBody Component', () => {
         setExpandedCardId: mockSetExpandedCardId,
       });
 
-      render(<OnboardingBody topicId={OnboardingTopicId.default} />, { wrapper: TestProviders });
+      render(<OnboardingBody />, { wrapper: TestProviders });
       act(() => {
         fireEvent.click(screen.getByText('Card 1'));
       });
@@ -138,7 +137,7 @@ describe('OnboardingBody Component', () => {
         setExpandedCardId: mockSetExpandedCardId,
       });
 
-      render(<OnboardingBody topicId={OnboardingTopicId.default} />, { wrapper: TestProviders });
+      render(<OnboardingBody />, { wrapper: TestProviders });
       act(() => {
         fireEvent.click(screen.getByText('Card 1'));
       });

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx

@@ -8,16 +8,16 @@
 import React, { Suspense, useCallback } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import { CenteredLoadingSpinner } from '../../../common/components/centered_loading_spinner';
-import type { OnboardingCardId, OnboardingTopicId } from '../../constants';
+import type { OnboardingCardId } from '../../constants';
 import { useBodyConfig } from './hooks/use_body_config';
 import { OnboardingCardGroup } from './onboarding_card_group';
 import { OnboardingCardPanel } from './onboarding_card_panel';
 import { useExpandedCard } from './hooks/use_expanded_card';
 import { useCompletedCards } from './hooks/use_completed_cards';
 import type { IsCardAvailable } from '../../types';
 
-export const OnboardingBody = React.memo<{ topicId: OnboardingTopicId }>(({ topicId }) => {
-  const bodyConfig = useBodyConfig(topicId);
+export const OnboardingBody = React.memo(() => {
+  const bodyConfig = useBodyConfig();
   const { expandedCardId, setExpandedCardId } = useExpandedCard();
   const { isCardComplete, setCardComplete, getCardCheckCompleteResult, checkCardComplete } =
     useCompletedCards(bodyConfig);

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.tsx

@@ -10,6 +10,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText, EuiTitle } fro
 
 import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme';
 import { useCurrentUser } from '../../../common/lib/kibana/hooks';
+import { OnboardingHeaderTopicSelector } from './onboarding_header_topic_selector';
 import { useOnboardingHeaderStyles } from './onboarding_header.styles';
 import rocketImage from './images/header_rocket.png';
 import rocketDarkImage from './images/header_rocket_dark.png';
@@ -62,9 +63,9 @@ export const OnboardingHeader = React.memo(() => {
             <span>{filteredHeaderConfig.description}</span>
           </EuiText>
           <EuiSpacer size="m" />
+          <OnboardingHeaderTopicSelector />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiSpacer size="xxl" />
     </>
   );
 });

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header_topic_selector.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, { useMemo } from 'react';
+import { EuiButtonGroup } from '@elastic/eui';
+import type { OnboardingTopicId } from '../../constants';
+import { useOnboardingContext } from '../onboarding_context';
+import { useUrlDetail } from '../hooks/use_url_detail';
+
+export const OnboardingHeaderTopicSelector = React.memo(() => {
+  const { config } = useOnboardingContext();
+  const { topicId, setTopic } = useUrlDetail();
+
+  const selectorOptions = useMemo(
+    () =>
+      [...config.values()].map((topicConfig) => ({
+        id: topicConfig.id,
+        label: topicConfig.title,
+      })),
+    [config]
+  );
+
+  if (selectorOptions.length < 2) {
+    return null;
+  }
+
+  return (
+    <EuiButtonGroup
+      className="onboardingHeaderTopicSelector"
+      buttonSize="compressed"
+      type="single"
+      legend="Topic selector"
+      options={selectorOptions}
+      idSelected={topicId}
+      onChange={(id) => setTopic(id as OnboardingTopicId)}
+      isFullWidth
+    />
+  );
+});
+OnboardingHeaderTopicSelector.displayName = 'OnboardingHeaderTopicSelector';

x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_router.tsx

@@ -37,9 +37,9 @@ export const OnboardingRouter = React.memo(() => {
     <Routes>
       <Route
         path={`${ONBOARDING_PATH}/siem_migrations`}
-        render={() => {
-          return <Redirect to={SIEM_MIGRATIONS_CREATE_PATH} />;
-        }}
+        render={({ location }) => (
+          <Redirect to={{ pathname: SIEM_MIGRATIONS_CREATE_PATH, hash: location.hash }} />
+        )}
       />
       <Route path={`${ONBOARDING_PATH}${topicPathParam}`} exact component={OnboardingRoute} />
       <Route path={`${ONBOARDING_PATH}/*`} render={() => <Redirect to={ONBOARDING_PATH} />} />
@@ -55,14 +55,15 @@ const OnboardingRoute = React.memo<OnboardingRouteProps>(({ match: { params }, l
     pathTopicId: params.topicId || null,
     hashCardId: getCardIdFromHash(location.hash),
   });
+
   if (isLoading) {
     return <CenteredLoadingSpinner />;
   }
 
   return (
     <>
       <OnboardingHeader />
-      <OnboardingBody topicId={OnboardingTopicId.default} />
+      <OnboardingBody />
     </>
   );
 });

x-pack/solutions/security/plugins/security_solution/public/onboarding/config.ts

@@ -15,7 +15,6 @@ import { OnboardingTopicId } from './constants';
 import {
   defaultBodyConfig,
   defaultExternalDetectionsBodyConfig,
-  siemMigrationsBodyConfig,
 } from './components/onboarding_body/body_config';
 import type { TopicConfig } from './types';
 
@@ -37,13 +36,4 @@ export const onboardingConfig: TopicConfig[] = [
     capabilitiesRequired: RULES_UI_EXTERNAL_DETECTIONS_PRIVILEGE,
     body: defaultExternalDetectionsBodyConfig,
   },
-  {
-    id: OnboardingTopicId.siemMigrations,
-    title: i18n.translate('xpack.securitySolution.onboarding.topic.automaticMigration', {
-      defaultMessage: 'Automatic migration',
-    }),
-    body: siemMigrationsBodyConfig,
-    disabledExperimentalFlagRequired: 'siemMigrationsDisabled',
-    capabilitiesRequired: [[`dashboard_v2.show`], [RULES_UI_DETECTIONS_PRIVILEGE]],
-  },
 ];

x-pack/solutions/security/plugins/security_solution/public/siem_migrations/common/components/header_buttons/index.tsx

@@ -79,7 +79,7 @@ export const HeaderButtons: React.FC<HeaderButtonsProps> = React.memo(
         <SecuritySolutionLinkButton
           data-test-subj="addAnotherMigrationButton"
           iconType="plusCircle"
-          deepLinkId={SecurityPageName.landing}
+          deepLinkId={SecurityPageName.siemMigrationsCreate}
           path={`${OnboardingTopicId.siemMigrations}#${onboardingCardId}`}
         >
           {i18n.SIEM_MIGRATIONS_ADD_ANOTHER_MIGRATION_TITLE}