[8.x] [Security Solution] Onboarding redesign (#192247)

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%"
             />