+
{splitPanel}
)}
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/video.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/card_step/video.tsx
deleted file mode 100644
index e2e04e2fa63c7..0000000000000
--- a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/video.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-/*
- * 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 { EuiFlexGroup, EuiFlexItem, EuiIcon, useEuiTheme } from '@elastic/eui';
-import { css } from '@emotion/react';
-import React, { useCallback, useMemo } from 'react';
-import { useStepContext } from '../context/step_context';
-import { WATCH_VIDEO_BUTTON_TITLE } from '../translations';
-import { OverviewSteps, QuickStartSectionCardsId, SectionId } from '../types';
-
-const VideoComponent: React.FC = () => {
- const { toggleTaskCompleteStatus, finishedSteps } = useStepContext();
- const ref = React.useRef
(null);
- const [isVideoPlaying, setIsVideoPlaying] = React.useState(false);
- const { euiTheme } = useEuiTheme();
- const cardId = QuickStartSectionCardsId.watchTheOverviewVideo;
- const isFinishedStep = useMemo(
- () => finishedSteps[cardId]?.has(OverviewSteps.getToKnowElasticSecurity),
- [finishedSteps, cardId]
- );
-
- const onVideoClicked = useCallback(() => {
- toggleTaskCompleteStatus({
- stepId: OverviewSteps.getToKnowElasticSecurity,
- cardId: QuickStartSectionCardsId.watchTheOverviewVideo,
- sectionId: SectionId.quickStart,
- undo: false,
- });
- setIsVideoPlaying(true);
- }, [toggleTaskCompleteStatus]);
-
- return (
-
- {!isVideoPlaying && !isFinishedStep && (
-
-
-
-
-
- )}
- {(isVideoPlaying || isFinishedStep) && (
-
- )}
-
- );
-};
-
-export const Video = React.memo(VideoComponent);
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx
index 986d36c542094..07cb6fa3d5961 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx
@@ -9,19 +9,17 @@ import React from 'react';
import { defaultExpandedCards } from '../../storage';
import { CreateProjectSteps, QuickStartSectionCardsId } from '../../types';
+export const mockOnStepClicked = jest.fn();
+export const mockToggleTaskCompleteStatus = jest.fn();
export const StepContextProvider = ({ children }: { children: React.ReactElement }) => (
<>{children}
);
-export const useStepContext = () => {
- return {
- expandedCardSteps: defaultExpandedCards,
- finishedSteps: {
- [QuickStartSectionCardsId.createFirstProject]: new Set([
- CreateProjectSteps.createFirstProject,
- ]),
- },
- onStepClicked: jest.fn(),
- toggleTaskCompleteStatus: jest.fn(),
- };
-};
+export const useStepContext = jest.fn(() => ({
+ expandedCardSteps: defaultExpandedCards,
+ finishedSteps: {
+ [QuickStartSectionCardsId.createFirstProject]: new Set([CreateProjectSteps.createFirstProject]),
+ },
+ onStepClicked: mockOnStepClicked,
+ toggleTaskCompleteStatus: mockToggleTaskCompleteStatus,
+}));
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/footer.ts b/x-pack/plugins/security_solution_serverless/public/get_started/footer/footer.ts
new file mode 100644
index 0000000000000..419cd62c1e860
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/footer/footer.ts
@@ -0,0 +1,56 @@
+/*
+ * 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 documentation from '../images/documentation.png';
+import forum from '../images/forum.png';
+import demo from '../images/demo.png';
+import labs from '../images/labs.png';
+import * as i18n from './translations';
+
+const footer = [
+ {
+ icon: documentation,
+ key: 'documentation',
+ title: i18n.FOOTER_DOCUMENTATION_TITLE,
+ description: i18n.FOOTER_DOCUMENTATION_DESCRIPTION,
+ link: {
+ title: i18n.FOOTER_DOCUMENTATION_LINK_TITLE,
+ href: 'https://docs.elastic.co/integrations/elastic-security-intro',
+ },
+ },
+ {
+ icon: forum,
+ key: 'forum',
+ title: i18n.FOOTER_FORUM_TITLE,
+ description: i18n.FOOTER_FORUM_DESCRIPTION,
+ link: {
+ title: i18n.FOOTER_FORUM_LINK_TITLE,
+ href: 'https://discuss.elastic.co/c/security/83',
+ },
+ },
+ {
+ icon: demo,
+ key: 'demo',
+ title: i18n.FOOTER_DEMO_TITLE,
+ description: i18n.FOOTER_DEMO_DESCRIPTION,
+ link: {
+ title: i18n.FOOTER_DEMO_LINK_TITLE,
+ href: 'https://www.elastic.co/demo-gallery?solutions=security&features=null',
+ },
+ },
+ {
+ icon: labs,
+ key: 'labs',
+ title: i18n.FOOTER_LABS_TITLE,
+ description: i18n.FOOTER_LABS_DESCRIPTION,
+ link: {
+ title: i18n.FOOTER_LABS_LINK_TITLE,
+ href: 'https://www.elastic.co/security-labs',
+ },
+ },
+];
+
+export const getFooter = () => footer;
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx
new file mode 100644
index 0000000000000..d2eabe9364c40
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx
@@ -0,0 +1,39 @@
+/*
+ * 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 { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { useFooterStyles } from '../styles/footer.styles';
+import { getFooter } from './footer';
+
+const FooterComponent = () => {
+ const { wrapperStyle, titleStyle, descriptionStyle, linkStyle } = useFooterStyles();
+ const footer = useMemo(() => getFooter(), []);
+ return (
+
+ {footer.map((item) => (
+
+ 
+
+ {item.title}
+ {item.description}
+
+
+ {item.link.title}
+
+
+ ))}
+
+ );
+};
+
+export const Footer = React.memo(FooterComponent);
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/translations.ts b/x-pack/plugins/security_solution_serverless/public/get_started/footer/translations.ts
new file mode 100644
index 0000000000000..9a924181c43f7
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/footer/translations.ts
@@ -0,0 +1,92 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+
+export const FOOTER_DOCUMENTATION_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.documentation.title',
+ {
+ defaultMessage: 'Browse documentation',
+ }
+);
+
+export const FOOTER_DOCUMENTATION_DESCRIPTION = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.documentation.description',
+ {
+ defaultMessage: 'In-depth guides on all Elastic features',
+ }
+);
+
+export const FOOTER_DOCUMENTATION_LINK_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.documentation.link.title',
+ {
+ defaultMessage: 'Start reading',
+ }
+);
+
+export const FOOTER_FORUM_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.forum.title',
+ {
+ defaultMessage: 'Explore forum',
+ }
+);
+
+export const FOOTER_FORUM_DESCRIPTION = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.forum.description',
+ {
+ defaultMessage: 'Exchange thoughts about Elastic',
+ }
+);
+
+export const FOOTER_FORUM_LINK_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.forum.link.title',
+ {
+ defaultMessage: 'Discuss Forum',
+ }
+);
+
+export const FOOTER_DEMO_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.demo.title',
+ {
+ defaultMessage: 'View demo project',
+ }
+);
+
+export const FOOTER_DEMO_DESCRIPTION = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.demo.description',
+ {
+ defaultMessage: 'Discover Elastic using sample data',
+ }
+);
+
+export const FOOTER_DEMO_LINK_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.demo.link.title',
+ {
+ defaultMessage: 'Explore demo',
+ }
+);
+
+export const FOOTER_LABS_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.labs.title',
+ {
+ defaultMessage: 'Elastic Security Labs',
+ }
+);
+
+export const FOOTER_LABS_DESCRIPTION = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.labs.description',
+ {
+ defaultMessage: 'Insights from security researchers',
+ }
+);
+
+export const FOOTER_LABS_LINK_TITLE = i18n.translate(
+ 'xpack.securitySolutionServerless.getStarted.footer.labs.link.title',
+ {
+ defaultMessage: 'Learn more',
+ }
+);
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx
index 0322eb95e6db7..06ab6dd4991bc 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx
@@ -18,6 +18,8 @@ import { Progress } from './progress_bar';
import { StepContextProvider } from './context/step_context';
import { CONTENT_WIDTH } from './helpers';
import { WelcomeHeader } from './welcome_header';
+import { Footer } from './footer';
+import { useScrollToHash } from './hooks/use_scroll';
export interface GetStartedProps {
indicesExist?: boolean;
@@ -42,6 +44,8 @@ export const GetStartedComponent: React.FC = ({ productTypes, i
(product) => product.product_line === ProductLine.security
)?.product_tier;
+ useScrollToHash();
+
return (
= ({ productTypes, i
restrictWidth={CONTENT_WIDTH}
paddingSize="none"
css={css`
- padding: 0 ${euiTheme.size.xxl} ${euiTheme.base * 3.5}px;
+ padding: 0 ${euiTheme.size.xxl} ${euiTheme.size.xxxl};
background-color: ${euiTheme.colors.lightestShade};
`}
>
@@ -102,6 +106,9 @@ export const GetStartedComponent: React.FC = ({ productTypes, i
+
+
+
);
};
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts b/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts
index 43979ce82d418..e1c1719f35493 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts
@@ -7,7 +7,16 @@
import type { ProductLine } from '../../common/product';
import { getSections } from './sections';
-import type { ActiveCard, ActiveSections, Card, CardId, SectionId, Step, StepId } from './types';
+import type {
+ ActiveCard,
+ ActiveSections,
+ Card,
+ CardId,
+ Section,
+ SectionId,
+ Step,
+ StepId,
+} from './types';
import { CreateProjectSteps, QuickStartSectionCardsId } from './types';
export const CONTENT_WIDTH = 1150;
@@ -53,14 +62,30 @@ const getfinishedActiveSteps = (
return new Set(finishedActiveSteps);
};
-export const findCardByStepId = (
+export const findCardSectionByStepId = (
stepId: string
-): { matchedCard: Card | null; matchedStep: Step | null } => {
+): { matchedCard: Card | null; matchedStep: Step | null; matchedSection: Section | null } => {
const cards = getSections().flatMap((s) => s.cards);
- const matchedStep: Step | null = null;
- const matchedCard = cards.find((c) => !!c.steps?.find((step) => stepId === step.id)) ?? null;
+ let matchedStep: Step | null = null;
+
+ const matchedCard =
+ cards.find(
+ (c) =>
+ !!c.steps?.find((step) => {
+ if (stepId === step.id) {
+ matchedStep = step;
+ return true;
+ } else {
+ return false;
+ }
+ })
+ ) ?? null;
+
+ const matchedSection = matchedCard
+ ? getSections().find((s) => s.cards?.includes(matchedCard)) ?? null
+ : null;
- return { matchedCard, matchedStep };
+ return { matchedCard, matchedStep, matchedSection };
};
export const getCard = ({ cardId, sectionId }: { cardId: CardId; sectionId: SectionId }) => {
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.test.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.test.tsx
new file mode 100644
index 0000000000000..efb3cfdd4385e
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.test.tsx
@@ -0,0 +1,69 @@
+/*
+ * 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 { renderHook } from '@testing-library/react-hooks';
+import { useCheckStepCompleted } from './use_check_step_completed';
+import {
+ EnablePrebuiltRulesSteps,
+ GetStartedWithAlertsCardsId,
+ OverviewSteps,
+ QuickStartSectionCardsId,
+ SectionId,
+} from '../types';
+
+jest.mock('../../common/services', () => ({
+ useKibana: () => ({
+ services: {
+ http: {},
+ notifications: {
+ toasts: {
+ addError: jest.fn(),
+ },
+ },
+ },
+ }),
+}));
+
+describe('useCheckStepCompleted', () => {
+ it('does nothing when autoCheckIfStepCompleted is not provided', () => {
+ const { result } = renderHook(() =>
+ useCheckStepCompleted({
+ indicesExist: true,
+ stepId: OverviewSteps.getToKnowElasticSecurity,
+ cardId: QuickStartSectionCardsId.watchTheOverviewVideo,
+ sectionId: SectionId.quickStart,
+ toggleTaskCompleteStatus: jest.fn(),
+ })
+ );
+ expect(result.current).toBeUndefined();
+ });
+
+ it('calls autoCheckIfStepCompleted and toggleTaskCompleteStatus', async () => {
+ const mockAutoCheck = jest.fn().mockResolvedValue(true);
+ const mockToggleTask = jest.fn();
+
+ const { waitFor } = renderHook(() =>
+ useCheckStepCompleted({
+ autoCheckIfStepCompleted: mockAutoCheck,
+ cardId: GetStartedWithAlertsCardsId.enablePrebuiltRules,
+ indicesExist: true,
+ sectionId: SectionId.getStartedWithAlerts,
+ stepId: EnablePrebuiltRulesSteps.enablePrebuiltRules,
+ toggleTaskCompleteStatus: mockToggleTask,
+ })
+ );
+
+ await waitFor(() => {
+ expect(mockAutoCheck).toHaveBeenCalled();
+ expect(mockToggleTask).toHaveBeenCalledWith({
+ sectionId: SectionId.getStartedWithAlerts,
+ stepId: EnablePrebuiltRulesSteps.enablePrebuiltRules,
+ cardId: GetStartedWithAlertsCardsId.enablePrebuiltRules,
+ undo: false,
+ });
+ });
+ });
+});
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_scroll.ts b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_scroll.ts
new file mode 100644
index 0000000000000..879957ea6a9e4
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_scroll.ts
@@ -0,0 +1,42 @@
+/*
+ * 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 { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { HEIGHT_ANIMATION_DURATION } from '../styles/card_step.styles';
+
+const HEADER_OFFSET = 40;
+
+export const useScrollToHash = () => {
+ const location = useLocation();
+
+ const [documentReadyState, setReadyState] = useState(document.readyState);
+ useEffect(() => {
+ const readyStateListener = () => setReadyState(document.readyState);
+ document.addEventListener('readystatechange', readyStateListener);
+ return () => document.removeEventListener('readystatechange', readyStateListener);
+ }, []);
+
+ useEffect(() => {
+ if (documentReadyState !== 'complete') return; // Wait for page to finish loading before scrolling
+
+ const hash = location.hash.split('?')[0].replace('#', '');
+ const element = hash ? document.getElementById(hash) : null;
+
+ if (element) {
+ // Wait for transition to complete before scrolling
+ setTimeout(() => {
+ element.focus({ preventScroll: true }); // Scrolling already handled below
+
+ window.scrollTo({
+ top: element.offsetTop - HEADER_OFFSET,
+ behavior: 'smooth',
+ });
+ }, HEIGHT_ANIMATION_DURATION);
+ }
+ }, [location.hash, documentReadyState]);
+};
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx
index e3520c843f958..91359d6db6b1b 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx
@@ -11,8 +11,6 @@ import { useSetUpSections } from './use_setup_sections';
import type { ActiveSections, CardId, ExpandedCardSteps, StepId } from '../types';
import { CreateProjectSteps, QuickStartSectionCardsId, SectionId } from '../types';
-import { ProductLine } from '../../../common/product';
-
const mockEuiTheme: EuiThemeComputed = {
size: {
l: '16px',
@@ -44,7 +42,6 @@ describe('useSetUpSections', () => {
} as ActiveSections;
const sections = result.current.setUpSections({
- activeProducts: new Set([ProductLine.security]),
activeSections,
expandedCardSteps: {} as ExpandedCardSteps,
onStepClicked,
@@ -62,7 +59,6 @@ describe('useSetUpSections', () => {
const sections = result.current.setUpSections({
activeSections,
- activeProducts: new Set([ProductLine.security]),
expandedCardSteps: {} as ExpandedCardSteps,
onStepClicked,
toggleTaskCompleteStatus,
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx
index cf01a8115b9e0..b1f5bedcc2779 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx
@@ -21,12 +21,10 @@ import type {
import { CardItem } from '../card_item';
import { getSections } from '../sections';
-import type { ProductLine } from '../../../common/product';
export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) => {
const setUpCards = useCallback(
({
- activeProducts,
activeSections,
expandedCardSteps,
finishedSteps,
@@ -34,7 +32,6 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
onStepClicked,
sectionId,
}: {
- activeProducts: Set;
activeSections: ActiveSections | null;
expandedCardSteps: ExpandedCardSteps;
finishedSteps: Record>;
@@ -65,14 +62,12 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
const setUpSections = useCallback(
({
- activeProducts,
activeSections,
expandedCardSteps,
finishedSteps,
toggleTaskCompleteStatus,
onStepClicked,
}: {
- activeProducts: Set;
activeSections: ActiveSections | null;
expandedCardSteps: ExpandedCardSteps;
finishedSteps: Record>;
@@ -81,7 +76,6 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
}) =>
getSections().reduce((acc, currentSection) => {
const cardNodes = setUpCards({
- activeProducts,
activeSections,
expandedCardSteps,
finishedSteps,
@@ -117,10 +111,10 @@ export const useSetUpSections = ({ euiTheme }: { euiTheme: EuiThemeComputed }) =
{cardNodes}
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx
index cd22c5e0cedfa..e2a0dbf72cc69 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx
@@ -27,10 +27,10 @@ import type {
Switch,
} from '../types';
import { GetStartedPageActions } from '../types';
-import { findCardByStepId } from '../helpers';
+import { findCardSectionByStepId } from '../helpers';
const syncExpandedCardStepsToStorageFromURL = (maybeStepId: string) => {
- const { matchedCard, matchedStep } = findCardByStepId(maybeStepId);
+ const { matchedCard, matchedStep } = findCardSectionByStepId(maybeStepId);
const hasStepContent = matchedStep && matchedStep.description;
if (matchedCard && matchedStep && hasStepContent) {
@@ -54,7 +54,9 @@ const syncExpandedCardStepsFromStorageToURL = (
);
if (expandedCardStep?.expandedSteps[0]) {
- const { matchedCard, matchedStep } = findCardByStepId(expandedCardStep?.expandedSteps[0]);
+ const { matchedCard, matchedStep } = findCardSectionByStepId(
+ expandedCardStep?.expandedSteps[0]
+ );
callback?.({ matchedCard, matchedStep });
}
@@ -114,28 +116,6 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct
return getAllExpandedCardStepsFromStorage();
}, [getAllExpandedCardStepsFromStorage, stepIdFromHash]);
- useEffect(() => {
- syncExpandedCardStepsFromStorageToURL(
- expandedCardsInitialStates,
- ({ matchedStep }: { matchedStep: Step | null }) => {
- if (!matchedStep) return;
- navigateTo({
- deepLinkId: SecurityPageName.landing,
- path: `#${matchedStep.id}`,
- });
- }
- );
- }, [expandedCardsInitialStates, getAllExpandedCardStepsFromStorage, navigateTo]);
-
- const [state, dispatch] = useReducer(reducer, {
- activeProducts: activeProductsInitialStates,
- activeSections: activeSectionsInitialStates,
- expandedCardSteps: expandedCardsInitialStates,
- finishedSteps: finishedStepsInitialStates,
- totalActiveSteps: totalActiveStepsInitialStates,
- totalStepsLeft: totalStepsLeftInitialStates,
- });
-
const onStepClicked: OnStepClicked = useCallback(
({ stepId, cardId, isExpanded }) => {
dispatch({
@@ -157,6 +137,15 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct
]
);
+ const [state, dispatch] = useReducer(reducer, {
+ activeProducts: activeProductsInitialStates,
+ activeSections: activeSectionsInitialStates,
+ expandedCardSteps: expandedCardsInitialStates,
+ finishedSteps: finishedStepsInitialStates,
+ totalActiveSteps: totalActiveStepsInitialStates,
+ totalStepsLeft: totalStepsLeftInitialStates,
+ });
+
const toggleTaskCompleteStatus: ToggleTaskCompleteStatus = useCallback(
({ stepId, cardId, sectionId, undo }) => {
dispatch({
@@ -182,5 +171,64 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct
[toggleActiveProductsInStorage]
);
+ useEffect(() => {
+ /** Handle landing on the page without hash
+ ** e.g.: https://localhost:5601/app/security/get_started
+ ** If there is no expanded card step in storage, do nothing.
+ ** If there is expanded card step in storage, sync it to the url.
+ **/
+ if (!stepIdFromHash) {
+ // If all steps are collapsed, do nothing
+ if (Object.values(state.expandedCardSteps).every((c) => !c.isExpanded)) {
+ return;
+ }
+
+ syncExpandedCardStepsFromStorageToURL(
+ expandedCardsInitialStates,
+ ({ matchedStep }: { matchedStep: Step | null }) => {
+ if (!matchedStep) return;
+ navigateTo({
+ deepLinkId: SecurityPageName.landing,
+ path: `#${matchedStep.id}`,
+ });
+ }
+ );
+ }
+ }, [
+ expandedCardsInitialStates,
+ getAllExpandedCardStepsFromStorage,
+ navigateTo,
+ state.expandedCardSteps,
+ stepIdFromHash,
+ ]);
+
+ useEffect(() => {
+ /** Handle hash change and expand the target step.
+ ** e.g.: https://localhost:5601/app/security/get_started#create_your_first_project
+ **/
+ if (stepIdFromHash) {
+ const { matchedCard, matchedStep, matchedSection } = findCardSectionByStepId(stepIdFromHash);
+ const hasStepContent = matchedStep && matchedStep.description;
+ if (hasStepContent && matchedCard && matchedStep && matchedSection) {
+ // If the step is already expanded, do nothing
+ if (state.expandedCardSteps[matchedCard.id]?.expandedSteps.includes(matchedStep.id)) {
+ return;
+ }
+ // Toggle step and sync the expanded card step to storage & reducer
+ onStepClicked({
+ stepId: matchedStep.id,
+ cardId: matchedCard.id,
+ sectionId: matchedSection.id,
+ isExpanded: true,
+ });
+
+ navigateTo({
+ deepLinkId: SecurityPageName.landing,
+ path: `#${matchedStep.id}`,
+ });
+ }
+ }
+ }, [navigateTo, onStepClicked, state.expandedCardSteps, stepIdFromHash]);
+
return { state, onStepClicked, toggleTaskCompleteStatus, onProductSwitchChanged };
};
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/demo.png b/x-pack/plugins/security_solution_serverless/public/get_started/images/demo.png
new file mode 100644
index 0000000000000000000000000000000000000000..b04bac15e09f0213371a4e554383fae51c67cac5
GIT binary patch
literal 6642
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
literal 0
HcmV?d00001
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/documentation.png b/x-pack/plugins/security_solution_serverless/public/get_started/images/documentation.png
new file mode 100644
index 0000000000000000000000000000000000000000..2027ac603eda1bdd782f9a33ee0f4ec55ef1a117
GIT binary patch
literal 7046
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
literal 0
HcmV?d00001
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/forum.png b/x-pack/plugins/security_solution_serverless/public/get_started/images/forum.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2e748c542923700722d8bb6dc268149b38c2842
GIT binary patch
literal 9139
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
literal 0
HcmV?d00001
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/labs.png b/x-pack/plugins/security_solution_serverless/public/get_started/images/labs.png
new file mode 100644
index 0000000000000000000000000000000000000000..736f18d80228660d27d10e18de515ecc16cc6c42
GIT binary patch
literal 9628
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≪Xzx_!|lE7GiZ^{VlX}`V@Q_MK8AdidXxK(8g;^3LA=?DCiasvHufxF=`<=1Nix?0;
zTg>oa3GqH9y0Dm|!tq5?PA}6U=VOzf*(LT5+vk%`)$ub6boL*9Nu?S8B}X@!kqoEr
z)UT!}wIeC|zXsOu$u5;=U)pI&0ECwc`nYquDuSV=r_-5dcyK&IEdb!ee`!fcK1;cl&LZt?Kid%$1t2XuJ!E
z2Wrz{_X8|zSDPjEFz@D@;661-vqhFZ{`;m_OxVuZqE43w!|e42>HT6+RDGa+O+zKs
zRGDZVX$F=-3{#9R0iQv|mS*yF>_6V1=_6-7&t=2{^a>XgR?@@2
zvvpr|i+Ht!f!dFby?36T{mK!VKEF_Rw@}PdMHoa<@&Pm*AVAvv@GkMb9g;!ry$9|V
zF>O68*Lf6>1hQ~=J@zMe(qo_dD6J+~d?q%hV&m@5J%fjG(ssXux
zSgOfRjl#A=Rl}owi{ora_PcBrS`B#sKjgN8Z+!cwH2(52T1}Xy`lQ$A9Y2(#8#wrt
z=jhoVy;k@8ty>1@mOa~Pc=r$$_YPJnMIg9f&tgRK1X3(BV=sL7HM;P0^PAiXx!Ngq
z_Hj4=}mNj-j(8VaMDcyYK#;;_pTz
zBi(rKfid4U_u4DB(7o5+RCy1xGXC>-=(*=#tNVK**44Omt+rBvc=kuH)_jK1|L;8dVap`B03;U@3x{r=rS~6z^33z{TYx?eEIOBdurm^ZjkFlUn0Up*E&_lj!#ps0ZrTJ`-TMfT8fuA
zemnMF?M=Ab1Bok;GG+Sp<8Qqynuh+qzj<~5_ahHXkPG9yX@Bi;$T
zq<8Bj19i7Y;E!Yqh&-}v<(na~C{}3vlVt+LDaBCbST_V2HH1)|sO5gOaf$HKEw!Hb
z*(RZ1yWl|KNq5%D3%*h%o5Yi*yRWLf;@)en9B#NzilRbISBe)lK(13o*K4esZSzqB
zAa_V>EWuva-V1`^SPiA(2mEa7dpce(RJEsy-r2a1`1fK1*5hm)OBj^R+Q-x)7Ph)d
zs;fS-#J5te^fzJca;^0>M|uIMX4O>g@w>fmf_tf|ooJRA*cpt|$NG|@TLb`6SkXsL
zI7eduiW#!&vfi^2rG)#Puy%X6`6M(i^U^38(hk^bKIlg^OSCkhR;X&zc#^t=v*&8n
zS6`xe=4WqYb43-ykphY601?utn8FUrCzB6$p(wvQ*x%It*2B_r_g1{ey&n?h(mz_B
zF|ASQ0215O1$g~<#FWi&c_3O*nJD(lxlrf;LAV5|giYS$nA?lV>8LZeIx!8z`jOsV
z!%Ao*o}d=dGQp@Bb9wI}oRB(%m-OZUOhY6}#(1TWcP`2I!{oP%q+RzsY&r^iRaL(jE?*P+58_m#;WXP|ugz
z{m~PdtXP~4sFG;5)6E>L+ryiLdR|LNr>YgZ>qOg&S`4QW6C^zAwFAPI2V<9s_!vzE
z(qWn_TNx~1S1cmtE4hLBOOXbPm4n=mw5Xb=Jba3+TL!2Tm}cP7cF6@gTD4?zD*iMz
z$%XbBmuM0CYN>yEfM=
zso~eBa0BEHH>eW%MOPYo+a>vj-~0k~6MqmNqT8ZL`gLKB&XlvXXs%?fq)i48R>Aw;
zg+~#v#Ddrlg;Sj;Gdvu)b_)L8A{S`QrEG$kbml=m;-PM=LER0U)^l`0&-1HDi^hsq
zEhTh!s9zKi{5H4w1)_sx4gryhMa|eR$#AG(b30Yb)yM2I@El@8F<)4%cApOltWd~!
zCov>;m5d3jf*+vB#72 = ({ productTier, totalActiveSteps, totalStepsLeft }) => {
const stepsDone =
totalActiveSteps != null && totalStepsLeft != null ? totalActiveSteps - totalStepsLeft : null;
- const { euiTheme } = useEuiTheme();
+ const { textStyle } = useProgressBarStyles();
return (
@@ -31,19 +31,11 @@ const ProgressComponent: React.FC<{
size="m"
label={
-
- {PROGRESS_TRACKER_LABEL}
-
+ {PROGRESS_TRACKER_LABEL}
}
- valueText={<>{`${stepsDone}/${totalActiveSteps}`}}
+ valueText={{`${stepsDone}/${totalActiveSteps}`}}
/>
)}
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx
index 0aabaa57e68a8..eac88e91e6681 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx
@@ -4,11 +4,8 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
-import type { MutableRefObject } from 'react';
import React from 'react';
-import type { HttpSetup } from '@kbn/core/public';
-import { ENABLED_FIELD } from '@kbn/security-solution-plugin/common';
import type { Step, StepId } from './types';
import {
SectionId,
@@ -27,18 +24,21 @@ import * as i18n from './translations';
import { AddIntegrationButton } from './step_links/add_integration_button';
import { AlertsButton } from './step_links/alerts_link';
-import connectToDataSources from './images/connect_to_existing_sources.png';
-import enablePrebuiltRules from './images/enable_prebuilt_rules.png';
-import createProjects from './images/create_projects.png';
-import viewAlerts from './images/view_alerts.png';
-import analyzeDataUsingDashboards from './images/analyze_data_using_dashboards.png';
import { AddElasticRulesButton } from './step_links/add_elastic_rules_button';
import { DashboardButton } from './step_links/dashboard_button';
import overviewVideo from './images/overview_video.svg';
-import { Video } from './card_step/video';
-import { fetchRuleManagementFilters } from './apis';
-import { OverviewVideoDescription } from './card_step/overview_video_description';
+import { Video } from './card_step/content/video';
+import { OverviewVideoDescription } from './card_step/content/overview_video_description';
import { ManageProjectsButton } from './step_links/manage_projects_button';
+import { EnableRuleImage } from './card_step/content/enable_rule_image';
+import {
+ autoCheckAddIntegrationsStepCompleted,
+ autoCheckPrebuildRuleStepCompleted,
+} from './card_step/helpers';
+import { ViewDashboardImage } from './card_step/content/view_dashboard_image';
+import { AddIntegrationsImage } from './card_step/content/add_integration_image';
+import { CreateProjectImage } from './card_step/content/create_project_step_image';
+import { ViewAlertsImage } from './card_step/content/view_alerts_image';
export const createProjectSteps = [
{
@@ -46,9 +46,7 @@ export const createProjectSteps = [
title: i18n.CREATE_PROJECT_TITLE,
icon: { type: 'addDataApp', size: 'xl' as const },
description: [i18n.CREATE_PROJECT_DESCRIPTION, ],
- splitPanel: (
- 
- ),
+ splitPanel: ,
},
];
export const overviewVideoSteps = [
@@ -67,16 +65,8 @@ export const addIntegrationsSteps: Array],
- splitPanel: (
- 
- ),
- autoCheckIfStepCompleted: async ({ indicesExist }: { indicesExist: boolean }) =>
- Promise.resolve(indicesExist),
+ splitPanel: ,
+ autoCheckIfStepCompleted: autoCheckAddIntegrationsStepCompleted,
},
];
@@ -86,14 +76,7 @@ export const viewDashboardSteps = [
icon: { type: 'dashboardApp', size: 'xl' as const },
title: i18n.VIEW_DASHBOARDS,
description: [i18n.VIEW_DASHBOARDS_DESCRIPTION, ],
- splitPanel: (
- 
- ),
+ splitPanel: ,
},
];
@@ -103,40 +86,8 @@ export const enablePrebuildRuleSteps: Array],
- splitPanel: (
- 
- ),
- autoCheckIfStepCompleted: async ({
- abortSignal,
- kibanaServicesHttp,
- onError,
- }: {
- abortSignal: MutableRefObject;
- kibanaServicesHttp: HttpSetup;
- onError?: (e: Error) => void;
- }) => {
- // Check if there are any rules installed and enabled
- try {
- const data = await fetchRuleManagementFilters({
- http: kibanaServicesHttp,
- signal: abortSignal.current.signal,
- query: {
- page: 1,
- per_page: 20,
- sort_field: 'enabled',
- sort_order: 'desc',
- filter: `${ENABLED_FIELD}: true`,
- },
- });
- return data?.total > 0;
- } catch (e) {
- if (!abortSignal.current.signal.aborted) {
- onError?.(e);
- }
-
- return false;
- }
- },
+ splitPanel: ,
+ autoCheckIfStepCompleted: autoCheckPrebuildRuleStepCompleted,
},
];
@@ -146,7 +97,7 @@ export const viewAlertSteps = [
title: i18n.VIEW_ALERTS_TITLE,
id: ViewAlertsSteps.viewAlerts,
description: [i18n.VIEW_ALERTS_DESCRIPTION, ],
- splitPanel: 
,
+ splitPanel: ,
},
];
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx
index b41779fe2b31f..5d5a707986d81 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx
@@ -6,37 +6,27 @@
*/
import React, { useCallback } from 'react';
import { FormattedMessage } from '@kbn/i18n-react';
-import { EuiCallOut, EuiIcon, useEuiTheme } from '@elastic/eui';
-import { LinkAnchor } from '@kbn/security-solution-navigation/links';
+import { EuiCallOut, EuiIcon, EuiLink, useEuiTheme } from '@elastic/eui';
import { SecurityPageName } from '@kbn/security-solution-plugin/common';
import { useNavigateTo } from '@kbn/security-solution-navigation';
import { useAddIntegrationsCalloutStyles } from '../styles/add_integrations_callout.styles';
import { ADD_INTEGRATIONS_STEP } from './translations';
-import { AddAndValidateYourDataCardsId, AddIntegrationsSteps, SectionId } from '../types';
-import { useStepContext } from '../context/step_context';
+import { AddIntegrationsSteps } from '../types';
const AddIntegrationsCalloutComponent = ({ stepName }: { stepName?: string }) => {
const { calloutWrapperStyles, calloutTitleStyles, calloutAnchorStyles } =
useAddIntegrationsCalloutStyles();
const { euiTheme } = useEuiTheme();
const { navigateTo } = useNavigateTo();
- const { onStepClicked } = useStepContext();
const toggleStep = useCallback(() => {
- onStepClicked({
- stepId: AddIntegrationsSteps.connectToDataSources,
- cardId: AddAndValidateYourDataCardsId.addIntegrations,
- sectionId: SectionId.addAndValidateYourData,
- isExpanded: true,
- });
-
navigateTo({
deepLinkId: SecurityPageName.landing,
path: `#${AddIntegrationsSteps.connectToDataSources}`,
});
- }, [navigateTo, onStepClicked]);
+ }, [navigateTo]);
return (
defaultMessage="To {stepName} add integrations first {addIntegration}"
values={{
addIntegration: (
-
+
{ADD_INTEGRATIONS_STEP}
-
+
),
stepName: stepName ?? (
{
const { euiTheme } = useEuiTheme();
const shadow = useEuiShadow('l');
- const iconHoveredBackgroundColor = useEuiBackgroundColor('success');
return css`
&.card-item {
padding: ${euiTheme.size.base};
- margin-bottom: ${euiTheme.size.xs};
border-radius: ${euiTheme.size.s};
border: 1px solid ${euiTheme.colors.lightShade};
box-sizing: content-box;
@@ -27,10 +25,6 @@ export const useCardItemStyles = () => {
&.card-expanded {
${shadow};
transition: box-shadow ${SHADOW_ANIMATION_DURATION}ms ease-out;
-
- .step-icon {
- background-color: ${iconHoveredBackgroundColor};
- }
}
&.card-expanded {
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts b/x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts
new file mode 100644
index 0000000000000..2b2d8ef144610
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+
+export const useFooterStyles = () => {
+ const { euiTheme } = useEuiTheme();
+
+ const footerStyles = useMemo(
+ () => ({
+ wrapperStyle: css`
+ padding: ${euiTheme.size.xl} ${euiTheme.size.l} ${euiTheme.base * 4.5}px;
+ gap: ${euiTheme.base * 3.75}px;
+ `,
+ titleStyle: css`
+ font-size: ${euiTheme.base * 0.875}px;
+ font-weight: ${euiTheme.font.weight.semiBold};
+ line-height: ${euiTheme.size.l};
+ color: ${euiTheme.colors.title};
+ `,
+ descriptionStyle: css`
+ font-size: 12.25px;
+ font-weight: ${euiTheme.font.weight.regular};
+ line-height: ${euiTheme.base * 1.25}px;
+ color: ${euiTheme.colors.darkestShade};
+ `,
+ linkStyle: css`
+ font-size: ${euiTheme.size.m};
+ font-weight: ${euiTheme.font.weight.medium};
+ line-height: ${euiTheme.size.base};
+ `,
+ }),
+ [
+ euiTheme.base,
+ euiTheme.colors.darkestShade,
+ euiTheme.colors.title,
+ euiTheme.font.weight.medium,
+ euiTheme.font.weight.regular,
+ euiTheme.font.weight.semiBold,
+ euiTheme.size.base,
+ euiTheme.size.l,
+ euiTheme.size.m,
+ euiTheme.size.xl,
+ ]
+ );
+ return footerStyles;
+};
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts b/x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts
new file mode 100644
index 0000000000000..f776acfcfb848
--- /dev/null
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts
@@ -0,0 +1,25 @@
+/*
+ * 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 { useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useMemo } from 'react';
+
+export const useProgressBarStyles = () => {
+ const { euiTheme } = useEuiTheme();
+ const progressBarStyles = useMemo(
+ () => ({
+ textStyle: css`
+ font-size: 10.5px;
+ font-weight: ${euiTheme.font.weight.bold};
+ text-transform: uppercase;
+ `,
+ }),
+ [euiTheme.font.weight.bold]
+ );
+ return progressBarStyles;
+};
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts b/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts
index 06342f3356dfb..0d08ab62fccc9 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts
@@ -55,12 +55,19 @@ export const useStepContentStyles = () => {
}
`,
rightPanelContentStyles: css`
- &.right-content-panel {
+ &.right-panel-wrapper {
height: ${RIGHT_CONTENT_HEIGHT}px;
width: ${RIGHT_CONTENT_WIDTH}px;
- border-radius: ${euiTheme.border.radius.medium};
+ }
+ `,
+ getRightContentStyles: ({ shadow }: { shadow: boolean }) => css`
+ &.right-panel-content {
+ height: 100%;
+ width: 100%;
+ position: relative;
overflow: hidden;
- ${imageShadow};
+ ${shadow ? imageShadow : ''}
+ border-radius: ${euiTheme.border.radius.medium};
}
`,
}),
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts b/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts
index 726e38aa8b5db..4a38df398c3eb 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts
@@ -31,7 +31,7 @@ export const useWelcomeHeaderStyles = () => {
line-height: ${euiTheme.size.l};
`,
headerSubtitleStyles: css`
- font-size: ${euiTheme.size.l};
+ font-size: ${euiTheme.base * 2.125}px;
color: ${euiTheme.colors.title};
font-weight: ${euiTheme.font.weight.bold};
`,
@@ -44,7 +44,7 @@ export const useWelcomeHeaderStyles = () => {
currentPlanWrapperStyles: css`
background-color: ${euiTheme.colors.lightestShade};
border-radius: 56px;
- padding: ${euiTheme.size.xs} ${euiTheme.size.xs} ${euiTheme.size.xs} ${euiTheme.size.s};
+ padding: ${euiTheme.size.xs} ${euiTheme.size.s} ${euiTheme.size.xs} ${euiTheme.size.m};
height: ${euiTheme.size.xl};
`,
currentPlanTextStyles: css`
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx
index 18c8f34ea5a36..c0d2d94023921 100644
--- a/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx
+++ b/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx
@@ -28,7 +28,6 @@ const TogglePanelComponent: React.FC<{
const { setUpSections } = useSetUpSections({ euiTheme });
const sectionNodes = setUpSections({
- activeProducts,
activeSections,
expandedCardSteps,
finishedSteps,