[Security Solution] Onboarding redesign (#192247)

## Summary

Issue: #189487

This PR is the final implementation of the Onboarding page redesign.

It has been developed in collaboration with @angorayc and
@agusruidiazgd, using this branch as a feature branch.
It already includes 2 smaller PRs that have already been reviewed and
approved by the @elastic/security-threat-hunting-explore team:
- semd#8
- semd#9

### Changes
- Onboarding page architecture refactor
([issue](#174766))
- Fixes #183765 (from [this Meta
issue](#183760))

---

- The progress bar has been removed
<img width="903" alt="progress bar"
src="https://github.com/user-attachments/assets/f16f3b6d-609f-4178-b83e-3b2106ba56ea">

---

- Card styles updated:
  - Icons updated to custom SVGs to have the correct color
  - Icon with circle background
  - Card internal content border removed

| Old | New |
| - | - |
|<img width="1172" alt="Old styles"
src="https://github.com/user-attachments/assets/5a75cd84-a30d-4621-88e3-17d837165016">|<img
width="1172" alt="New styles"
src="https://github.com/user-attachments/assets/8059bcbc-2f3d-4c7e-ba4f-041a58b51372">|

---

- Completed card styles updated:
  - Icon with green circle background

| Old | New |
| - | - |
|<img width="1172" alt="Old styles complete"
src="https://github.com/user-attachments/assets/3258c7be-4ffe-4d25-9cdb-d4fce66ce451">|<img
width="1172" alt="New styles complete"
src="https://github.com/user-attachments/assets/7dac6ec0-d78d-4881-ae84-3b46562c6d7d">|

---

- Improved "Add data with integrations" card

| Old | New |
| - | - |
|<img width="1174" alt="old integrations card"
src="https://github.com/user-attachments/assets/3c65c4f5-004b-4619-aa92-26ec0656a8e5">|<img
width="1174" alt="new integrations card"
src="https://github.com/user-attachments/assets/634e5249-b169-4c93-865e-b82453db90bf">|

---

- New "Configure AI assistant" card in a new "Discover Elastic AI" group


https://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef

---------

Co-authored-by: Elastic Machine <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Angela Chuang <[email protected]>
Co-authored-by: Agustina Nahir Ruidiaz <[email protected]>

x-pack/plugins/security_solution/common/constants.ts

@@ -27,8 +27,9 @@ export const APP_NAME = 'Security' as const;
 export const APP_ICON = 'securityAnalyticsApp' as const;
 export const APP_ICON_SOLUTION = 'logoSecurity' as const;
 export const APP_PATH = `/app/security` as const;
-export const ADD_DATA_PATH = `/app/integrations/browse/security`;
-export const ADD_THREAT_INTELLIGENCE_DATA_PATH = `/app/integrations/browse/threat_intel`;
+export const APP_INTEGRATIONS_PATH = `/app/integrations` as const;
+export const ADD_DATA_PATH = `${APP_INTEGRATIONS_PATH}/browse/security`;
+export const ADD_THREAT_INTELLIGENCE_DATA_PATH = `${APP_INTEGRATIONS_PATH}/browse/threat_intel`;
 export const DEFAULT_BYTES_FORMAT = 'format:bytes:defaultPattern' as const;
 export const DEFAULT_DATE_FORMAT = 'dateFormat' as const;
 export const DEFAULT_DATE_FORMAT_TZ = 'dateFormat:tz' as const;
@@ -85,7 +86,7 @@ export const MANAGE_PATH = '/manage' as const;
 export const TIMELINES_PATH = '/timelines' as const;
 export const CASES_PATH = '/cases' as const;
 export const OVERVIEW_PATH = '/overview' as const;
-export const LANDING_PATH = '/get_started' as const;
+export const ONBOARDING_PATH = '/get_started' as const;
 export const DATA_QUALITY_PATH = '/data_quality' as const;
 export const DETECTION_RESPONSE_PATH = '/detection_response' as const;
 export const DETECTIONS_PATH = '/detections' as const;

x-pack/plugins/security_solution/public/app/app_routes.tsx

@@ -10,7 +10,12 @@ import type { RouteProps } from 'react-router-dom';
 import { Redirect } from 'react-router-dom';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import type { Capabilities } from '@kbn/core/public';
-import { CASES_FEATURE_ID, CASES_PATH, LANDING_PATH, SERVER_APP_ID } from '../../common/constants';
+import {
+  CASES_FEATURE_ID,
+  CASES_PATH,
+  ONBOARDING_PATH,
+  SERVER_APP_ID,
+} from '../../common/constants';
 import { NotFoundPage } from './404';
 import type { StartServices } from '../types';
 
@@ -33,7 +38,7 @@ AppRoutes.displayName = 'AppRoutes';
 
 export const RedirectRoute = React.memo<{ capabilities: Capabilities }>(({ capabilities }) => {
   if (capabilities[SERVER_APP_ID].show === true) {
-    return <Redirect to={LANDING_PATH} />;
+    return <Redirect to={ONBOARDING_PATH} />;
   }
   if (capabilities[CASES_FEATURE_ID].read_cases === true) {
     return <Redirect to={CASES_PATH} />;

x-pack/plugins/security_solution/public/app_links.ts

@@ -16,7 +16,7 @@ import { links as timelinesLinks } from './timelines/links';
 import { links as casesLinks } from './cases/links';
 import { links as managementLinks, getManagementFilteredLinks } from './management/links';
 import { exploreLinks } from './explore/links';
-import { gettingStartedLinks } from './overview/links';
+import { onboardingLinks } from './onboarding/links';
 import { findingsLinks } from './cloud_security_posture/links';
 import type { StartPlugins } from './types';
 import { dashboardsLinks } from './dashboards/links';
@@ -34,7 +34,7 @@ export const appLinks: AppLinkItems = Object.freeze([
   indicatorsLinks,
   exploreLinks,
   rulesLinks,
-  gettingStartedLinks,
+  onboardingLinks,
   managementLinks,
   notesLink,
 ]);
@@ -55,7 +55,7 @@ export const getFilteredLinks = async (
     indicatorsLinks,
     exploreLinks,
     rulesLinks,
-    gettingStartedLinks,
+    onboardingLinks,
     managementFilteredLinks,
     notesLink,
   ]);

x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx

@@ -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 React, { useMemo } from 'react';
+import { EuiLoadingSpinner, useEuiTheme, type EuiLoadingSpinnerProps } from '@elastic/eui';
+
+interface CenteredLoadingSpinnerProps extends EuiLoadingSpinnerProps {
+  topOffset?: string;
+}
+
+export const CenteredLoadingSpinner = React.memo<CenteredLoadingSpinnerProps>(
+  ({ topOffset, ...euiLoadingSpinnerProps }) => {
+    const { euiTheme } = useEuiTheme();
+    const style = useMemo(
+      () => ({
+        display: 'flex',
+        margin: `${euiTheme.size.xl} auto`,
+        ...(topOffset && { marginTop: topOffset }),
+      }),
+      [topOffset, euiTheme]
+    );
+
+    return <EuiLoadingSpinner {...euiLoadingSpinnerProps} style={style} />;
+  }
+);
+CenteredLoadingSpinner.displayName = 'CenteredLoadingSpinner';

x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_project_features_url.ts → x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/index.ts

@@ -5,4 +5,4 @@
  * 2.0.
  */
 
-export const useProjectFeaturesUrl = jest.fn(() => 'mocked_user_name');
+export { CenteredLoadingSpinner } from './centered_loading_spinner';

x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.test.tsx

@@ -10,7 +10,7 @@ import { fireEvent, render } from '@testing-library/react';
 import { EmptyPromptComponent } from './empty_prompt';
 import { SecurityPageName } from '../../../../common';
 import { useNavigateTo } from '../../lib/kibana';
-import { AddIntegrationsSteps } from '../landing_page/onboarding/types';
+import { OnboardingCardId } from '../../../onboarding/constants';
 
 const mockNavigateTo = jest.fn();
 const mockUseNavigateTo = useNavigateTo as jest.Mock;
@@ -37,7 +37,7 @@ describe('EmptyPromptComponent component', () => {
       fireEvent.click(link);
       expect(mockNavigateTo).toBeCalledWith({
         deepLinkId: SecurityPageName.landing,
-        path: `#${AddIntegrationsSteps.connectToDataSources}`,
+        path: `#${OnboardingCardId.integrations}`,
       });
     });
   });

x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx

@@ -16,15 +16,15 @@ import {
   type EuiThemeComputed,
 } from '@elastic/eui';
 import { css } from '@emotion/react';
+import { OnboardingCardId } from '../../../onboarding/constants';
 import { SecurityPageName } from '../../../../common';
 
 import * as i18n from './translations';
 import endpointSvg from './images/endpoint1.svg';
 import cloudSvg from './images/cloud1.svg';
 import siemSvg from './images/siem1.svg';
 import { useNavigateTo } from '../../lib/kibana';
-import { VIDEO_SOURCE } from './constants';
-import { AddIntegrationsSteps } from '../landing_page/onboarding/types';
+import { ONBOARDING_VIDEO_SOURCE } from '../../constants';
 
 const imgUrls = {
   cloud: cloudSvg,
@@ -75,7 +75,7 @@ export const EmptyPromptComponent = memo(() => {
   const navigateToAddIntegrations = useCallback(() => {
     navigateTo({
       deepLinkId: SecurityPageName.landing,
-      path: `#${AddIntegrationsSteps.connectToDataSources}`,
+      path: `#${OnboardingCardId.integrations}`,
     });
   }, [navigateTo]);
 
@@ -115,7 +115,7 @@ export const EmptyPromptComponent = memo(() => {
               referrerPolicy="no-referrer"
               sandbox="allow-scripts allow-same-origin"
               scrolling="no"
-              src={VIDEO_SOURCE}
+              src={ONBOARDING_VIDEO_SOURCE}
               title={i18n.SIEM_HEADER}
               width="100%"
             />