From a2511acd9f587b8ba31d84b14c2fbb79299f64fd Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 16 Jan 2024 03:00:40 +0800 Subject: [PATCH 01/22] init --- .../get_started/__mocks__/product_switch.tsx | 0 .../get_started/__mocks__/storage.ts | 0 .../get_started/__mocks__/toggle_panel.tsx | 0 .../landing_page}/get_started/apis/index.ts | 4 +- .../landing_page}/get_started/badge.ts | 0 .../landing_page}/get_started/badges.test.ts | 0 .../get_started/card_item.test.tsx | 0 .../landing_page}/get_started/card_item.tsx | 9 +- .../get_started/card_step/__mocks__/index.tsx | 0 .../content/__mocks__/content_wrapper.tsx | 0 .../content/add_integration_image.tsx | 0 .../card_step/content/content_wrapper.tsx | 0 .../content/create_project_step_image.tsx | 0 .../card_step/content/enable_rule_image.tsx | 0 .../content/overview_video_description.tsx | 0 .../card_step/content/video.test.tsx | 0 .../get_started/card_step/content/video.tsx | 2 +- .../card_step/content/view_alerts_image.tsx | 0 .../content/view_dashboard_image.tsx | 0 .../get_started/card_step/helpers.test.ts | 0 .../get_started/card_step/helpers.ts | 2 +- .../get_started/card_step/index.test.tsx | 0 .../get_started/card_step/index.tsx | 61 +++++++-- .../card_step/step_content.test.tsx | 0 .../get_started/card_step/step_content.tsx | 29 ++++- .../landing_page/get_started/configs.ts | 45 +++++++ .../context/__mocks__/step_context.tsx | 0 .../get_started/context/step_context.tsx | 0 .../get_started/footer/footer.ts | 0 .../get_started/footer/index.tsx | 31 ++++- .../get_started/footer/translations.ts | 0 .../get_started/get_started.test.tsx | 0 .../landing_page}/get_started/get_started.tsx | 17 ++- .../landing_page}/get_started/helpers.test.ts | 25 +++- .../landing_page}/get_started/helpers.ts | 23 +++- .../hooks/use_check_step_completed.test.tsx | 0 .../hooks/use_check_step_completed.tsx | 2 +- .../get_started/hooks/use_scroll.ts | 0 .../hooks/use_setup_sections.test.tsx | 0 .../get_started/hooks/use_setup_sections.tsx | 2 +- .../hooks/use_toggle_panel.test.tsx | 6 +- .../get_started/hooks/use_toggle_panel.tsx | 36 ++++- .../get_started/hooks/use_user_name.ts | 27 ++++ .../images/analyze_data_using_dashboards.png | Bin .../images/connect_to_existing_sources.png | Bin .../get_started/images/create_projects.png | Bin .../landing_page}/get_started/images/demo.png | Bin .../get_started/images/documentation.png | Bin .../images/enable_prebuilt_rules.png | Bin .../get_started/images/forum.png | Bin .../landing_page}/get_started/images/labs.png | Bin .../get_started/images/launch.png | Bin .../get_started/images/overview_video.svg | 0 .../get_started/images/view_alerts.png | Bin .../landing_page}/get_started/index.tsx | 10 +- .../landing_page}/get_started/lazy.tsx | 0 .../get_started/product_switch.test.tsx | 0 .../get_started/product_switch.tsx | 2 +- .../get_started/progress_bar.tsx | 19 ++- .../landing_page}/get_started/reducer.test.ts | 19 ++- .../landing_page}/get_started/reducer.tsx | 27 +++- .../landing_page}/get_started/sections.tsx | 0 .../step_links/add_elastic_rules_button.tsx | 0 .../step_links/add_integration_button.tsx | 5 +- .../step_links/add_integration_callout.tsx | 23 +++- .../get_started/step_links/alerts_link.tsx | 0 .../step_links/dashboard_button.tsx | 0 .../step_links/manage_projects_button.tsx | 15 +-- .../get_started/step_links/translations.ts | 0 .../get_started/step_links/types.ts | 0 .../landing_page}/get_started/storage.test.ts | 0 .../landing_page}/get_started/storage.ts | 4 +- .../styles/add_integrations_callout.styles.ts | 7 +- .../get_started/styles/card_item.styles.ts | 3 +- .../get_started/styles/card_step.styles.ts | 15 +-- .../get_started/styles/footer.styles.ts | 9 +- .../get_started/styles/progress_bar.style.ts | 3 +- .../get_started/styles/step_content.styles.ts | 13 +- .../styles/welcome_header.styles.ts | 14 +- .../get_started/toggle_panel.test.tsx | 0 .../get_started/toggle_panel.tsx | 2 +- .../landing_page}/get_started/translations.ts | 0 .../landing_page}/get_started/types.ts | 13 +- .../get_started/welcome_header/index.tsx | 123 ++++++++++++++++++ .../product_tier_badge.test.tsx | 0 .../welcome_header/product_tier_badge.tsx | 4 +- .../welcome_header/translations.ts | 4 +- .../common/components/landing_page/index.tsx | 5 +- .../public/common/lib/local_storage/index.ts | 10 ++ .../plugins/security_solution/public/index.ts | 9 ++ .../public/plugin_contract.ts | 27 ++++ .../plugins/security_solution/public/types.ts | 10 ++ .../security_solution_ess/public/plugin.ts | 18 ++- .../security_solution_serverless/kibana.jsonc | 1 - .../get_started/welcome_header/index.tsx | 94 ------------- .../public/plugin.ts | 23 +++- 96 files changed, 615 insertions(+), 237 deletions(-) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/__mocks__/product_switch.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/__mocks__/storage.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/__mocks__/toggle_panel.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/apis/index.ts (79%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/badge.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/badges.test.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_item.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_item.tsx (95%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/__mocks__/index.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/__mocks__/content_wrapper.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/add_integration_image.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/content_wrapper.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/create_project_step_image.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/enable_rule_image.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/overview_video_description.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/video.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/video.tsx (98%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/view_alerts_image.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/content/view_dashboard_image.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/helpers.test.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/helpers.ts (92%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/index.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/index.tsx (79%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/step_content.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/card_step/step_content.tsx (80%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/context/__mocks__/step_context.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/context/step_context.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/footer/footer.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/footer/index.tsx (67%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/footer/translations.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/get_started.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/get_started.tsx (87%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/helpers.test.ts (94%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/helpers.ts (91%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_check_step_completed.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_check_step_completed.tsx (97%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_scroll.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_setup_sections.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_setup_sections.tsx (99%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_toggle_panel.test.tsx (98%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/hooks/use_toggle_panel.tsx (89%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/analyze_data_using_dashboards.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/connect_to_existing_sources.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/create_projects.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/demo.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/documentation.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/enable_prebuilt_rules.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/forum.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/labs.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/launch.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/overview_video.svg (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/images/view_alerts.png (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/index.tsx (62%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/lazy.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/product_switch.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/product_switch.tsx (98%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/progress_bar.tsx (75%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/reducer.test.ts (93%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/reducer.tsx (86%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/sections.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/add_elastic_rules_button.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/add_integration_button.tsx (90%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/add_integration_callout.tsx (78%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/alerts_link.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/dashboard_button.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/manage_projects_button.tsx (73%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/translations.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/step_links/types.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/storage.test.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/storage.ts (98%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/add_integrations_callout.styles.ts (91%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/card_item.styles.ts (94%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/card_step.styles.ts (90%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/footer.styles.ts (91%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/progress_bar.style.ts (91%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/step_content.styles.ts (91%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/styles/welcome_header.styles.ts (88%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/toggle_panel.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/toggle_panel.tsx (97%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/translations.ts (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/types.ts (93%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/welcome_header/product_tier_badge.test.tsx (100%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/welcome_header/product_tier_badge.tsx (92%) rename x-pack/plugins/{security_solution_serverless/public => security_solution/public/common/components/landing_page}/get_started/welcome_header/translations.ts (74%) create mode 100644 x-pack/plugins/security_solution/public/common/lib/local_storage/index.ts delete mode 100644 x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/index.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/product_switch.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/product_switch.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/product_switch.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/storage.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/storage.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/storage.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/storage.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/toggle_panel.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/__mocks__/toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/toggle_panel.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/apis/index.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/apis/index.ts similarity index 79% rename from x-pack/plugins/security_solution_serverless/public/get_started/apis/index.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/apis/index.ts index 0b515154f178f..7149d1ecf6c72 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/apis/index.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/apis/index.ts @@ -5,9 +5,9 @@ * 2.0. */ -import type { FetchRulesResponse } from '@kbn/security-solution-plugin/public'; -import { DETECTION_ENGINE_RULES_URL_FIND } from '@kbn/security-solution-plugin/common'; import type { HttpSetup } from '@kbn/core/public'; +import { DETECTION_ENGINE_RULES_URL_FIND } from '../../../../../../common/constants'; +import type { FetchRulesResponse } from '../../../../../detection_engine/rule_management/logic/types'; export const fetchRuleManagementFilters = async ({ http, diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/badge.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/badge.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/badges.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/badges.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_item.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_item.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.tsx similarity index 95% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_item.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.tsx index 535b01523c607..7cef0b3945fc9 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/card_item.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.tsx @@ -6,7 +6,10 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; + import React, { useMemo, useCallback } from 'react'; +import { css } from '@emotion/css'; + import classnames from 'classnames'; import type { CardId, @@ -20,6 +23,8 @@ import { getCard } from './helpers'; import { CardStep } from './card_step'; import { useCardItemStyles } from './styles/card_item.styles'; +export const SHADOW_ANIMATION_DURATION = 350; + const CardItemComponent: React.FC<{ activeStepIds: StepId[] | undefined; cardId: CardId; @@ -91,7 +96,9 @@ const CardItemComponent: React.FC<{ className={cardClassNames} hasBorder paddingSize="none" - css={cardItemPanelStyle} + css={css` + ${cardItemPanelStyle} + `} borderRadius="none" data-test-subj={cardId} > diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/__mocks__/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/__mocks__/index.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/__mocks__/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/__mocks__/index.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/__mocks__/content_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/__mocks__/content_wrapper.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/__mocks__/content_wrapper.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/__mocks__/content_wrapper.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/add_integration_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/add_integration_image.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/add_integration_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/add_integration_image.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/content_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/content_wrapper.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/content_wrapper.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/content_wrapper.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/create_project_step_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/create_project_step_image.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/create_project_step_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/create_project_step_image.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/enable_rule_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/enable_rule_image.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/enable_rule_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/enable_rule_image.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/overview_video_description.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/overview_video_description.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/overview_video_description.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/overview_video_description.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/video.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/video.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/video.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx similarity index 98% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/video.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx index 42c2b36ec96f6..89020a9179f3a 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/video.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx @@ -6,7 +6,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiIcon, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import React, { useCallback, useMemo } from 'react'; import { useStepContext } from '../../context/step_context'; import { WATCH_VIDEO_BUTTON_TITLE } from '../../translations'; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/view_alerts_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_alerts_image.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/view_alerts_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_alerts_image.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/view_dashboard_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_dashboard_image.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/content/view_dashboard_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_dashboard_image.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.test.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/helpers.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.test.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.ts similarity index 92% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/helpers.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.ts index 64d419b7d4c32..369cda7d65140 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.ts @@ -7,8 +7,8 @@ import type { MutableRefObject } from 'react'; import type { HttpSetup } from '@kbn/core/public'; -import { ENABLED_FIELD } from '@kbn/security-solution-plugin/common'; import { fetchRuleManagementFilters } from '../apis'; +import { ENABLED_FIELD } from '../../../../../../common/detection_engine/rule_management/rule_fields'; export const autoCheckPrebuildRuleStepCompleted = async ({ abortSignal, diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/index.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.tsx similarity index 79% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.tsx index 5513bb967aa8b..a4f264ca7ee90 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.tsx @@ -14,6 +14,7 @@ import { EuiButtonIcon, } from '@elastic/eui'; import React, { useCallback } from 'react'; +import { css } from '@emotion/css'; import classnames from 'classnames'; import { useNavigateTo, SecurityPageName } from '@kbn/security-solution-navigation'; @@ -120,23 +121,63 @@ const CardStepComponent: React.FC<{ paddingSize="none" className={panelClassNames} id={stepId} - css={stepPanelStyles} + css={css` + ${stepPanelStyles} + `} > - - - + + + {icon && } - - + + {title} - +
{isDone && ( - + {ALL_DONE_TEXT} )} @@ -147,7 +188,9 @@ const CardStepComponent: React.FC<{ iconType={isExpandedStep ? 'arrowUp' : 'arrowDown'} aria-label={isExpandedStep ? COLLAPSE_STEP_BUTTON_LABEL : EXPAND_STEP_BUTTON_LABEL} size="xs" - css={toggleButtonStyles} + css={css` + ${toggleButtonStyles} + `} isDisabled={!hasStepContent} />
diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/step_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/step_content.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/step_content.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.tsx similarity index 80% rename from x-pack/plugins/security_solution_serverless/public/get_started/card_step/step_content.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.tsx index 5fe1747fa0a2d..61782c04eeff4 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/card_step/step_content.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.tsx @@ -7,6 +7,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui'; import React from 'react'; +import { css } from '@emotion/react'; + import { useCheckStepCompleted } from '../hooks/use_check_step_completed'; import { useStepContentStyles } from '../styles/step_content.styles'; import type { @@ -55,20 +57,30 @@ const StepContentComponent = ({ {step.description && ( - + {step.description.map((desc, index) => (
{desc}
@@ -81,10 +93,17 @@ const StepContentComponent = ({ grow={false} data-test-subj="split-panel" className="right-panel" - css={rightPanelStyles} + css={css` + ${rightPanelStyles} + `} > {splitPanel && ( -
+
{splitPanel}
)} diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts new file mode 100644 index 0000000000000..3e696e3b1f986 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts @@ -0,0 +1,45 @@ +/* + * 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 { schema, type TypeOf } from '@kbn/config-schema'; + +export enum ProductLine { + security = 'security', + endpoint = 'endpoint', + cloud = 'cloud', +} + +export enum ProductTier { + essentials = 'essentials', + complete = 'complete', +} + +export const productLineSchema = schema.oneOf([ + schema.literal(ProductLine.security), + schema.literal(ProductLine.endpoint), + schema.literal(ProductLine.cloud), +]); + +export type SecurityProductLine = TypeOf; + +export const productTierSchema = schema.oneOf([ + schema.literal(ProductTier.essentials), + schema.literal(ProductTier.complete), +]); +export type SecurityProductTier = TypeOf; + +export const productTypeSchema = schema.object({ + product_line: productLineSchema, + product_tier: productTierSchema, +}); +export type SecurityProductType = TypeOf; + +export const productTypesSchema = schema.arrayOf(productTypeSchema, { + defaultValue: [], +}); +export type SecurityProductTypes = TypeOf; + +export const ALL_PRODUCT_LINES = Object.values(ProductLine); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/step_context.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/context/__mocks__/step_context.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/step_context.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/context/step_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/step_context.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/context/step_context.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/step_context.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/footer.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/footer.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/footer/footer.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/footer.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/index.tsx similarity index 67% rename from x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/index.tsx index d2eabe9364c40..997444fb7cd5b 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/footer/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/index.tsx @@ -7,6 +7,8 @@ import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiSpacer } from '@elastic/eui'; import React, { useMemo } from 'react'; +import { css } from '@emotion/css'; + import { useFooterStyles } from '../styles/footer.styles'; import { getFooter } from './footer'; @@ -18,16 +20,37 @@ const FooterComponent = () => { alignItems="center" justifyContent="spaceBetween" gutterSize="none" - css={wrapperStyle} + css={css` + ${wrapperStyle} + `} > {footer.map((item) => ( {item.title} -

{item.title}

-

{item.description}

+

+ {item.title} +

+

+ {item.description} +

- + {item.link.title} diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/footer/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/footer/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/get_started.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/get_started.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx similarity index 87% rename from x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx index 06ab6dd4991bc..089d9e475af78 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/get_started.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx @@ -8,26 +8,31 @@ import { useEuiTheme } from '@elastic/eui'; import React from 'react'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; +import useObservable from 'react-use/lib/useObservable'; + import { TogglePanel } from './toggle_panel'; -import type { SecurityProductTypes } from '../../common/config'; import { useTogglePanel } from './hooks/use_toggle_panel'; -import { ProductLine } from '../../common/product'; 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'; +import type { SecurityProductTypes } from './configs'; +import { ProductLine } from './configs'; +import { useKibana } from '../../../lib/kibana'; export interface GetStartedProps { indicesExist?: boolean; - productTypes: SecurityProductTypes; + productTypes?: SecurityProductTypes; } export const GetStartedComponent: React.FC = ({ productTypes, indicesExist }) => { const { euiTheme } = useEuiTheme(); + const { availableSteps$ } = useKibana().services; + const getStartedSteps = useObservable(availableSteps$); const { onStepClicked, toggleTaskCompleteStatus, @@ -39,8 +44,8 @@ export const GetStartedComponent: React.FC = ({ productTypes, i totalStepsLeft, expandedCardSteps, }, - } = useTogglePanel({ productTypes }); - const productTier = productTypes.find( + } = useTogglePanel({ productTypes, getStartedSteps }); + const productTier = productTypes?.find( (product) => product.product_line === ProductLine.security )?.product_tier; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts similarity index 94% rename from x-pack/plugins/security_solution_serverless/public/get_started/helpers.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts index e48eab5b0fe8b..d8a190c15df66 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts @@ -28,8 +28,18 @@ import { } from './types'; import * as sectionsConfigs from './sections'; -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; const mockSections = jest.spyOn(sectionsConfigs, 'getSections'); + +const getStartedSteps = [ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, +]; + describe('getCardTimeInMinutes', () => { it('should calculate the total time in minutes for a card correctly', () => { const card = { @@ -131,7 +141,7 @@ describe('setupActiveSections', () => { it('should set up active steps based on active products', () => { const finishedSteps = {} as unknown as Record>; const activeProducts = new Set([ProductLine.cloud]); - const { activeSections } = setupActiveSections(finishedSteps, activeProducts); + const { activeSections } = setupActiveSections(finishedSteps, activeProducts, getStartedSteps); expect( getCard(QuickStartSectionCardsId.createFirstProject, SectionId.quickStart, activeSections) @@ -184,7 +194,7 @@ describe('setupActiveSections', () => { } as unknown as Record>; const activeProducts = new Set([ProductLine.security]); - const { activeSections } = setupActiveSections(finishedSteps, activeProducts); + const { activeSections } = setupActiveSections(finishedSteps, activeProducts, getStartedSteps); expect( getCard(QuickStartSectionCardsId.createFirstProject, SectionId.quickStart, activeSections) @@ -201,7 +211,7 @@ describe('setupActiveSections', () => { const activeProducts: Set = new Set(); - const activeSections = setupActiveSections(finishedSteps, activeProducts); + const activeSections = setupActiveSections(finishedSteps, activeProducts, getStartedSteps); expect(activeSections).toEqual({ activeSections: null, @@ -222,9 +232,9 @@ describe('setupActiveSections', () => { CreateProjectSteps.createFirstProject, ]), } as unknown as Record>; - const activeProducts = new Set([ProductLine.security]); + const activeProducts: Set = new Set(); - const activeSections = setupActiveSections(finishedSteps, activeProducts); + const activeSections = setupActiveSections(finishedSteps, activeProducts, getStartedSteps); expect(activeSections).toEqual({ activeSections: {}, @@ -273,6 +283,7 @@ describe('updateActiveSections', () => { activeSections: testActiveSections, cardId, finishedSteps, + getStartedSteps, sectionId, }); @@ -302,6 +313,7 @@ describe('updateActiveSections', () => { const updatedSections = updateActiveSections({ activeProducts, finishedSteps, + getStartedSteps, activeSections: null, sectionId, cardId, @@ -322,6 +334,7 @@ describe('updateActiveSections', () => { const updatedSections = updateActiveSections({ activeProducts, finishedSteps, + getStartedSteps, activeSections, sectionId, cardId, diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts similarity index 91% rename from x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts index e1c1719f35493..dc75adf712f9b 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts @@ -5,7 +5,7 @@ * 2.0. */ -import type { ProductLine } from '../../common/product'; +import type { ProductLine } from './configs'; import { getSections } from './sections'; import type { ActiveCard, @@ -42,8 +42,12 @@ export const isStepActive = (step: Step, activeProducts: Set) => !step.productLineRequired || step.productLineRequired?.some((condition) => activeProducts.has(condition)); -export const getActiveSteps = (steps: Step[] | undefined, activeProducts: Set) => - steps?.filter((step) => isStepActive(step, activeProducts)); +export const getActiveSteps = ( + steps: Step[] | undefined, + activeProducts: Set, + getStartedSteps: StepId[] | undefined +) => + steps?.filter((step) => getStartedSteps?.includes(step.id) && isStepActive(step, activeProducts)); const getfinishedActiveSteps = ( finishedStepIds: StepId[] | undefined, @@ -101,27 +105,30 @@ export const getStepsByActiveProduct = ({ activeProducts, cardId, sectionId, + getStartedSteps, }: { activeProducts: Set; cardId: CardId; sectionId: SectionId; + getStartedSteps: StepId[] | undefined; }) => { const card = getCard({ cardId, sectionId }); - const steps = getActiveSteps(card?.steps, activeProducts); + const steps = getActiveSteps(card?.steps, activeProducts, getStartedSteps); return steps; }; export const setupActiveSections = ( finishedSteps: Record>, - activeProducts: Set + activeProducts: Set, + getStartedSteps: StepId[] | undefined ) => activeProducts.size > 0 ? getSections().reduce( (acc, section) => { const activeCards = section.cards?.reduce((accCards, card) => { - const activeSteps = getActiveSteps(card.steps, activeProducts); + const activeSteps = getActiveSteps(card.steps, activeProducts, getStartedSteps); const activeStepIds = activeSteps?.map(({ id }) => id); const stepsDone: Set = getfinishedActiveSteps( finishedSteps[card.id] ? [...finishedSteps[card.id]] : undefined, @@ -156,12 +163,14 @@ export const updateActiveSections = ({ activeSections, cardId, finishedSteps, + getStartedSteps, sectionId, }: { activeProducts: Set; activeSections: ActiveSections | null; cardId: CardId; finishedSteps: Record>; + getStartedSteps: StepId[] | undefined; sectionId: SectionId; }): { activeSections: ActiveSections | null; @@ -175,7 +184,7 @@ export const updateActiveSections = ({ return { activeSections, totalActiveSteps: null, totalStepsLeft: null }; } - const steps = getStepsByActiveProduct({ activeProducts, cardId, sectionId }); + const steps = getStepsByActiveProduct({ activeProducts, cardId, sectionId, getStartedSteps }); const activeStepIds = activeCard.activeStepIds; const stepsDone: Set = getfinishedActiveSteps( 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/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.tsx similarity index 97% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.tsx index 8170b758812d7..05cb6825ab3a4 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_check_step_completed.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.tsx @@ -6,7 +6,7 @@ */ import { useEffect, useRef } from 'react'; -import { useKibana } from '../../common/services'; +import { useKibana } from '../../../../lib/kibana'; import type { StepId, CardId, diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_scroll.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_scroll.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_scroll.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_scroll.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.tsx similarity index 99% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.tsx index b1f5bedcc2779..295d6565a4cf1 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_setup_sections.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.tsx @@ -8,7 +8,7 @@ import type { EuiThemeComputed } from '@elastic/eui'; import { EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; import React, { useCallback } from 'react'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import type { ActiveSections, CardId, diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx similarity index 98% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx index 7126f58106a98..d4001844829ef 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx @@ -7,8 +7,7 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { useTogglePanel } from './use_toggle_panel'; import { getStartedStorage } from '../storage'; -import { ProductLine } from '../../../common/product'; -import type { SecurityProductTypes } from '../../../common/config'; + import { QuickStartSectionCardsId, SectionId, @@ -21,9 +20,10 @@ import { ViewAlertsSteps, EnablePrebuiltRulesSteps, } from '../types'; +import type { SecurityProductTypes } from '../configs'; +import { ProductLine } from '../configs'; jest.mock('../storage'); -jest.mock('../../common/services'); jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockReturnValue({ hash: '' }), })); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx similarity index 89% rename from x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx index e2a0dbf72cc69..1664dce6f51ad 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/hooks/use_toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx @@ -7,10 +7,10 @@ import { useCallback, useEffect, useMemo, useReducer } from 'react'; import { useLocation } from 'react-router-dom'; -import { SecurityPageName } from '@kbn/security-solution-plugin/common'; import { useNavigateTo } from '@kbn/security-solution-navigation'; -import { ProductLine } from '../../../common/product'; -import type { SecurityProductTypes } from '../../../common/config'; + +import { SecurityPageName } from '../../../../../../common'; + import { getStartedStorage } from '../storage'; import { getActiveSectionsInitialStates, @@ -25,9 +25,12 @@ import type { OnStepClicked, Step, Switch, + StepId, } from '../types'; import { GetStartedPageActions } from '../types'; import { findCardSectionByStepId } from '../helpers'; +import type { SecurityProductTypes } from '../configs'; +import { ALL_PRODUCT_LINES, ProductLine } from '../configs'; const syncExpandedCardStepsToStorageFromURL = (maybeStepId: string) => { const { matchedCard, matchedStep } = findCardSectionByStepId(maybeStepId); @@ -62,7 +65,13 @@ const syncExpandedCardStepsFromStorageToURL = ( } }; -export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProductTypes }) => { +export const useTogglePanel = ({ + productTypes, + getStartedSteps, +}: { + productTypes?: SecurityProductTypes; + getStartedSteps: StepId[] | undefined; +}) => { const { navigateTo } = useNavigateTo(); const { hash: detailName } = useLocation(); @@ -91,8 +100,9 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct }); return activeProductsFromStorage.size > 0 ? activeProductsFromStorage - : new Set(productTypes.map(({ product_line: productLine }) => ProductLine[productLine])) ?? - new Set([ProductLine.security, ProductLine.endpoint, ProductLine.cloud]); + : productTypes && productTypes.length > 0 + ? new Set(productTypes.map(({ product_line: productLine }) => ProductLine[productLine])) + : new Set(ALL_PRODUCT_LINES); }, [getActiveProductsFromStorage, productTypes]); const { @@ -104,8 +114,9 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct getActiveSectionsInitialStates({ activeProducts: activeProductsInitialStates, finishedSteps: finishedStepsInitialStates, + getStartedSteps, }), - [activeProductsInitialStates, finishedStepsInitialStates] + [activeProductsInitialStates, finishedStepsInitialStates, getStartedSteps] ); const expandedCardsInitialStates: ExpandedCardSteps = useMemo(() => { @@ -144,8 +155,19 @@ export const useTogglePanel = ({ productTypes }: { productTypes: SecurityProduct finishedSteps: finishedStepsInitialStates, totalActiveSteps: totalActiveStepsInitialStates, totalStepsLeft: totalStepsLeftInitialStates, + getStartedSteps: getStartedSteps ?? [], }); + useEffect(() => { + if (!getStartedSteps) { + return; + } + dispatch({ + type: GetStartedPageActions.UpdateGetStartedSteps, + payload: { getStartedSteps }, + }); + }, [getStartedSteps]); + const toggleTaskCompleteStatus: ToggleTaskCompleteStatus = useCallback( ({ stepId, cardId, sectionId, undo }) => { dispatch({ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts new file mode 100644 index 0000000000000..efe81cf1ed2b1 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts @@ -0,0 +1,27 @@ +/* + * 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 { useKibana } from '../../../../lib/kibana'; + +export const useUserName = () => { + const [userName, setUserName] = useState(); + const { + services: { + security: { authc }, + }, + } = useKibana(); + useEffect(() => { + const getUser = async () => { + const { username } = await authc.getCurrentUser(); + setUserName(username); + }; + + getUser(); + }); + + return userName; +}; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/analyze_data_using_dashboards.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/analyze_data_using_dashboards.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/analyze_data_using_dashboards.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/analyze_data_using_dashboards.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/connect_to_existing_sources.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/connect_to_existing_sources.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/connect_to_existing_sources.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/connect_to_existing_sources.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/create_projects.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/create_projects.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/create_projects.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/create_projects.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/demo.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/demo.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/demo.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/demo.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/documentation.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/documentation.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/documentation.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/documentation.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/enable_prebuilt_rules.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/enable_prebuilt_rules.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/enable_prebuilt_rules.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/enable_prebuilt_rules.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/forum.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/forum.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/forum.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/forum.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/labs.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/labs.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/labs.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/labs.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/launch.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/launch.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/launch.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/launch.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/overview_video.svg b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/overview_video.svg similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/overview_video.svg rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/overview_video.svg diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/images/view_alerts.png b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/view_alerts.png similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/images/view_alerts.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/view_alerts.png diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx similarity index 62% rename from x-pack/plugins/security_solution_serverless/public/get_started/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx index ccdbd19158b18..51e1dde83f46b 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx @@ -7,18 +7,12 @@ import React from 'react'; -import { ServicesProvider, type Services } from '../common/services'; +import type { SecurityProductTypes } from './configs'; import { GetStarted } from './lazy'; -import type { SecurityProductTypes } from '../../common/config'; export const getSecurityGetStartedComponent = ( - services: Services, productTypes: SecurityProductTypes ): React.ComponentType<{ indicesExist?: boolean }> => function GetStartedComponent({ indicesExist }: { indicesExist?: boolean }) { - return ( - - - - ); + return ; }; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/lazy.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/lazy.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/product_switch.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/product_switch.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx similarity index 98% rename from x-pack/plugins/security_solution_serverless/public/get_started/product_switch.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx index 62f58caaacd6d..0058b2a83ce4d 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/product_switch.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx @@ -6,7 +6,7 @@ */ import { EuiPanel, EuiSwitch, EuiText, EuiTitle, type EuiThemeComputed } from '@elastic/eui'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import React, { useMemo } from 'react'; import { ProductLine } from '../../common/product'; import * as i18n from './translations'; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/progress_bar.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/progress_bar.tsx similarity index 75% rename from x-pack/plugins/security_solution_serverless/public/get_started/progress_bar.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/progress_bar.tsx index e886aca4ff50d..85d0d629ee712 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/progress_bar.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/progress_bar.tsx @@ -7,10 +7,11 @@ import { EuiFlexGroup, EuiFlexItem, EuiProgress, EuiSpacer } from '@elastic/eui'; import React from 'react'; -import type { ProductTier } from '../../common/product'; +import { css } from '@emotion/css'; import { PROGRESS_TRACKER_LABEL } from './translations'; import { useProgressBarStyles } from './styles/progress_bar.style'; +import type { ProductTier } from './configs'; const ProgressComponent: React.FC<{ productTier: ProductTier | undefined; @@ -31,11 +32,23 @@ 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/reducer.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts similarity index 93% rename from x-pack/plugins/security_solution_serverless/public/get_started/reducer.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts index 4d71a5c9ebf99..15a7d24e8e9de 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/reducer.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; import { setupActiveSections } from './helpers'; import { reducer, @@ -33,6 +33,14 @@ import { ViewAlertsSteps, ViewDashboardSteps, } from './types'; +const getStartedSteps = [ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, +]; describe('reducer', () => { it('should toggle section correctly', () => { @@ -44,7 +52,8 @@ describe('reducer', () => { } as Record>; const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( finishedSteps, - activeProducts + activeProducts, + [OverviewSteps.getToKnowElasticSecurity] ); const initialState = { activeProducts: new Set([ProductLine.security]), @@ -53,6 +62,7 @@ describe('reducer', () => { totalStepsLeft, totalActiveSteps, expandedCardSteps: {} as ExpandedCardSteps, + getStartedSteps, }; const action: ToggleProductAction = { @@ -75,7 +85,8 @@ describe('reducer', () => { } as Record>; const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( finishedSteps, - activeProducts + activeProducts, + [OverviewSteps.getToKnowElasticSecurity] ); const initialState = { activeProducts: new Set([ProductLine.security]), @@ -84,6 +95,7 @@ describe('reducer', () => { totalStepsLeft, totalActiveSteps, expandedCardSteps: {} as ExpandedCardSteps, + getStartedSteps, }; const action: AddFinishedStepAction = { @@ -189,6 +201,7 @@ describe('getActiveSectionsInitialStates', () => { } = getActiveSectionsInitialStates({ activeProducts, finishedSteps, + getStartedSteps, }); expect(initialStates).toEqual({ diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/reducer.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx similarity index 86% rename from x-pack/plugins/security_solution_serverless/public/get_started/reducer.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx index 3d8cf2c7fa26e..e7edaffdf8dad 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/reducer.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx @@ -5,12 +5,28 @@ * 2.0. */ -import type { ProductLine } from '../../common/product'; +import type { ProductLine } from './configs'; import { setupActiveSections, updateActiveSections } from './helpers'; import type { ExpandedCardSteps, ReducerActions } from './types'; import { type CardId, type StepId, type TogglePanelReducer, GetStartedPageActions } from './types'; export const reducer = (state: TogglePanelReducer, action: ReducerActions): TogglePanelReducer => { + if (action.type === GetStartedPageActions.UpdateGetStartedSteps) { + const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( + state.finishedSteps, + state.activeProducts, + action.payload.getStartedSteps + ); + + return { + ...state, + getStartedSteps: action.payload.getStartedSteps, + activeSections, + totalStepsLeft, + totalActiveSteps, + }; + } + if (action.type === GetStartedPageActions.ToggleProduct) { const activeProducts = new Set([...state.activeProducts]); @@ -22,7 +38,8 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( state.finishedSteps, - activeProducts + activeProducts, + state.getStartedSteps ); return { @@ -50,6 +67,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg cardId: action.payload.cardId, finishedSteps, sectionId: action.payload.sectionId, + getStartedSteps: state.getStartedSteps, }); return { @@ -77,6 +95,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg cardId: action.payload.cardId, finishedSteps, sectionId: action.payload.sectionId, + getStartedSteps: state.getStartedSteps, }); return { @@ -159,7 +178,9 @@ export const getActiveProductsInitialStates = ({ export const getActiveSectionsInitialStates = ({ activeProducts, finishedSteps, + getStartedSteps, }: { activeProducts: Set; finishedSteps: Record>; -}) => setupActiveSections(finishedSteps, activeProducts); + getStartedSteps: StepId[] | undefined; +}) => setupActiveSections(finishedSteps, activeProducts, getStartedSteps); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/sections.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/sections.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/sections.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_elastic_rules_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_elastic_rules_button.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_elastic_rules_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_elastic_rules_button.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx similarity index 90% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx index 59cb197cc276f..49424831c3f66 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx @@ -8,7 +8,10 @@ import { FormattedMessage } from '@kbn/i18n-react'; import React from 'react'; import { LinkButton } from '@kbn/security-solution-navigation/links'; -import { ExternalPageName } from '../../navigation/links/constants'; + +enum ExternalPageName { + integrationsSecurity = 'integrations:/browse/security', +} const AddIntegrationButtonComponent: React.FC = () => ( diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx similarity index 78% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx index 5d5a707986d81..5c90f0042bfa4 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/add_integration_callout.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx @@ -7,9 +7,9 @@ import React, { useCallback } from 'react'; import { FormattedMessage } from '@kbn/i18n-react'; import { EuiCallOut, EuiIcon, EuiLink, useEuiTheme } from '@elastic/eui'; +import { css } from '@emotion/css'; -import { SecurityPageName } from '@kbn/security-solution-plugin/common'; -import { useNavigateTo } from '@kbn/security-solution-navigation'; +import { SecurityPageName, useNavigateTo } from '@kbn/security-solution-navigation'; import { useAddIntegrationsCalloutStyles } from '../styles/add_integrations_callout.styles'; import { ADD_INTEGRATIONS_STEP } from './translations'; @@ -45,9 +45,20 @@ const AddIntegrationsCalloutComponent = ({ stepName }: { stepName?: string }) => defaultMessage="To {stepName} add integrations first {addIntegration}" values={{ addIntegration: ( - + {ADD_INTEGRATIONS_STEP} - + ), stepName: stepName ?? ( @@ -62,7 +73,9 @@ const AddIntegrationsCalloutComponent = ({ stepName }: { stepName?: string }) => } size="s" - css={calloutWrapperStyles} + css={css` + ${calloutWrapperStyles} + `} /> ); }; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/alerts_link.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/alerts_link.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/alerts_link.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/alerts_link.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/dashboard_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/dashboard_button.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/dashboard_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/dashboard_button.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/manage_projects_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx similarity index 73% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/manage_projects_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx index da282df1f5764..d5c042f343b52 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/manage_projects_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx @@ -7,26 +7,25 @@ import React from 'react'; import { EuiIcon, EuiButton } from '@elastic/eui'; -import { getCloudUrl } from '../../navigation/links/util'; +import { useObservable } from 'react-use'; import { MANAGE_PROJECTS } from './translations'; -import { useKibana } from '../../common/services'; +import { useKibana } from '../../../../lib/kibana'; const ManageProjectsButtonComponent = () => { - const { cloud } = useKibana().services; - - const href = getCloudUrl('projects', cloud); - return ( + const { projectsUrl$ } = useKibana().services; + const projectsUrl = useObservable(projectsUrl$); + return projectsUrl ? ( {MANAGE_PROJECTS} - ); + ) : null; }; export const ManageProjectsButton = React.memo(ManageProjectsButtonComponent); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/step_links/types.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/types.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/step_links/types.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/types.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/storage.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/storage.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/storage.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts similarity index 98% rename from x-pack/plugins/security_solution_serverless/public/get_started/storage.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts index 661dab3a504b8..ead8b746b919e 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/storage.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts @@ -5,7 +5,6 @@ * 2.0. */ -import type { ProductLine } from '../../common/product'; import type { CardId, StepId } from './types'; import { @@ -14,9 +13,10 @@ import { GetStartedWithAlertsCardsId, } from './types'; -import { storage } from '../common/lib/storage'; import { defaultFinishedSteps, isDefaultFinishedCardStep } from './helpers'; import { getSections } from './sections'; +import { storage } from '../../../lib/local_storage'; +import type { ProductLine } from './configs'; export const ACTIVE_PRODUCTS_STORAGE_KEY = 'securitySolution.getStarted.activeProducts'; export const FINISHED_STEPS_STORAGE_KEY = 'securitySolution.getStarted.finishedSteps'; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/add_integrations_callout.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/add_integrations_callout.styles.ts similarity index 91% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/add_integrations_callout.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/add_integrations_callout.styles.ts index b4bb194acd65d..3b6671f60aa10 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/add_integrations_callout.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/add_integrations_callout.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiBackgroundColor, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; import { useMemo } from 'react'; export const useAddIntegrationsCalloutStyles = () => { @@ -15,21 +14,21 @@ export const useAddIntegrationsCalloutStyles = () => { const customStyles = useMemo( () => ({ - calloutWrapperStyles: css` + calloutWrapperStyles: ` border-radius: ${euiTheme.border.radius.medium}; border: 1px solid ${euiTheme.colors.lightShade}; padding: ${euiTheme.size.xs} ${euiTheme.size.m}; background-color: ${backgroundColor}; margin-top: ${euiTheme.size.base}; `, - calloutTitleStyles: css` + calloutTitleStyles: ` color: ${euiTheme.colors.title}; font-size: ${euiTheme.size.m}; font-weight: ${euiTheme.font.weight.regular}; line-height: ${euiTheme.base * 1.25}px; margin-left: ${euiTheme.size.xs}; `, - calloutAnchorStyles: css` + calloutAnchorStyles: ` margin-left: ${euiTheme.size.s}; `, }), diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/card_item.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_item.styles.ts similarity index 94% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/card_item.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_item.styles.ts index aadf1010db9f7..8a9f1cac90c69 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/card_item.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_item.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiShadow, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; export const SHADOW_ANIMATION_DURATION = 350; @@ -14,7 +13,7 @@ export const useCardItemStyles = () => { const { euiTheme } = useEuiTheme(); const shadow = useEuiShadow('l'); - return css` + return ` &.card-item { padding: ${euiTheme.size.base}; border-radius: ${euiTheme.size.s}; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/card_step.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_step.styles.ts similarity index 90% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/card_step.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_step.styles.ts index 482207f067110..eac19e2bc27db 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/card_step.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_step.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiBackgroundColor, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; import { useMemo } from 'react'; export const HEIGHT_ANIMATION_DURATION = 250; @@ -17,7 +16,7 @@ export const useCardStepStyles = () => { const customStyles = useMemo( () => ({ - stepPanelStyles: css` + stepPanelStyles: ` .stepContentWrapper { display: grid; grid-template-rows: 1fr; @@ -32,14 +31,14 @@ export const useCardStepStyles = () => { overflow: hidden; } `, - getStepGroundStyles: ({ hasStepContent }: { hasStepContent: boolean }) => css` + getStepGroundStyles: ({ hasStepContent }: { hasStepContent: boolean }) => ` cursor: ${hasStepContent ? 'pointer' : 'default'}; gap: ${euiTheme.size.base}; `, - stepItemStyles: css` + stepItemStyles: ` align-self: center; `, - stepIconStyles: css` + stepIconStyles: ` &.step-icon { border-radius: 50%; width: ${euiTheme.size.xxxl}; @@ -52,7 +51,7 @@ export const useCardStepStyles = () => { background-color: ${completeStepBackgroundColor}; } `, - stepTitleStyles: css` + stepTitleStyles: ` &.step-title { padding-right: ${euiTheme.size.m}; line-height: ${euiTheme.size.xxxl}; @@ -61,13 +60,13 @@ export const useCardStepStyles = () => { vertical-align: middle; } `, - allDoneTextStyles: css` + allDoneTextStyles: ` &.all-done-badge { background-color: ${completeStepBackgroundColor}; color: ${euiTheme.colors.successText}; } `, - toggleButtonStyles: css` + toggleButtonStyles: ` &.toggle-button { margin-left: ${euiTheme.base * 0.375}px; } diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/footer.styles.ts similarity index 91% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/footer.styles.ts index 2b2d8ef144610..e8c34db34e8c1 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/footer.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/footer.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; import { useMemo } from 'react'; export const useFooterStyles = () => { @@ -14,23 +13,23 @@ export const useFooterStyles = () => { const footerStyles = useMemo( () => ({ - wrapperStyle: css` + wrapperStyle: ` padding: ${euiTheme.size.xl} ${euiTheme.size.l} ${euiTheme.base * 4.5}px; gap: ${euiTheme.base * 3.75}px; `, - titleStyle: css` + titleStyle: ` font-size: ${euiTheme.base * 0.875}px; font-weight: ${euiTheme.font.weight.semiBold}; line-height: ${euiTheme.size.l}; color: ${euiTheme.colors.title}; `, - descriptionStyle: css` + descriptionStyle: ` font-size: 12.25px; font-weight: ${euiTheme.font.weight.regular}; line-height: ${euiTheme.base * 1.25}px; color: ${euiTheme.colors.darkestShade}; `, - linkStyle: css` + linkStyle: ` font-size: ${euiTheme.size.m}; font-weight: ${euiTheme.font.weight.medium}; line-height: ${euiTheme.size.base}; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/progress_bar.style.ts similarity index 91% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/progress_bar.style.ts index f776acfcfb848..43704bacc067e 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/progress_bar.style.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/progress_bar.style.ts @@ -6,14 +6,13 @@ */ 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` + textStyle: ` font-size: 10.5px; font-weight: ${euiTheme.font.weight.bold}; text-transform: uppercase; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/step_content.styles.ts similarity index 91% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/step_content.styles.ts index 0d08ab62fccc9..cb6517870de64 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/step_content.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/step_content.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiShadow, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; import { useMemo } from 'react'; export const LEFT_CONTENT_PANEL_WIDTH = 486; @@ -20,7 +19,7 @@ export const useStepContentStyles = () => { const customStyles = useMemo( () => ({ - stepContentGroupStyles: css` + stepContentGroupStyles: ` &.step-content-group { justify-content: space-between; margin-top: ${euiTheme.size.l}; @@ -31,13 +30,13 @@ export const useStepContentStyles = () => { border-radius: ${euiTheme.border.radius.medium}; } `, - leftContentStyles: css` + leftContentStyles: ` &.left-panel { padding: 0 0 0 ${euiTheme.size.s}; width: ${LEFT_CONTENT_PANEL_WIDTH}px; } `, - descriptionStyles: css` + descriptionStyles: ` &.step-content-description { margin-bottom: 0px; margin-block-end: 0px !important; @@ -48,19 +47,19 @@ export const useStepContentStyles = () => { } } `, - rightPanelStyles: css` + rightPanelStyles: ` &.right-panel { padding: 0 6px 0 ${euiTheme.size.l}; width: ${RIGHT_CONTENT_PANEL_WIDTH}px; } `, - rightPanelContentStyles: css` + rightPanelContentStyles: ` &.right-panel-wrapper { height: ${RIGHT_CONTENT_HEIGHT}px; width: ${RIGHT_CONTENT_WIDTH}px; } `, - getRightContentStyles: ({ shadow }: { shadow: boolean }) => css` + getRightContentStyles: ({ shadow }: { shadow: boolean }) => ` &.right-panel-content { height: 100%; width: 100%; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/welcome_header.styles.ts similarity index 88% rename from x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/welcome_header.styles.ts index 4a38df398c3eb..d96ac1fbda87d 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/styles/welcome_header.styles.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/welcome_header.styles.ts @@ -6,7 +6,6 @@ */ import { useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; import { useMemo } from 'react'; import launch from '../images/launch.png'; @@ -15,39 +14,38 @@ export const useWelcomeHeaderStyles = () => { const welcomeHeaderStyles = useMemo(() => { return { - headerStyles: css` - background-image: url(${launch}); + headerStyles: `background-image: url(${launch}); background-size: 40%; background-repeat: no-repeat; background-position-x: right; background-position-y: center; padding: ${euiTheme.base * 0.625}px 0; `, - headerTitleStyles: css` + headerTitleStyles: ` padding-bottom: ${euiTheme.size.s}; font-size: ${euiTheme.base}px; color: ${euiTheme.colors.darkShade}; font-weight: ${euiTheme.font.weight.bold}; line-height: ${euiTheme.size.l}; `, - headerSubtitleStyles: css` + headerSubtitleStyles: ` font-size: ${euiTheme.base * 2.125}px; color: ${euiTheme.colors.title}; font-weight: ${euiTheme.font.weight.bold}; `, - headerDescriptionStyles: css` + headerDescriptionStyles: ` font-size: ${euiTheme.base}px; color: ${euiTheme.colors.subduedText}; line-height: ${euiTheme.size.l}; font-weight: ${euiTheme.font.weight.regular}; `, - currentPlanWrapperStyles: css` + currentPlanWrapperStyles: ` background-color: ${euiTheme.colors.lightestShade}; border-radius: 56px; padding: ${euiTheme.size.xs} ${euiTheme.size.s} ${euiTheme.size.xs} ${euiTheme.size.m}; height: ${euiTheme.size.xl}; `, - currentPlanTextStyles: css` + currentPlanTextStyles: ` font-size: ${euiTheme.size.m}; font-weight: ${euiTheme.font.weight.bold}; padding-right: ${euiTheme.size.xs}; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx similarity index 97% rename from x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx index c0d2d94023921..e2035194423ab 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx @@ -8,7 +8,7 @@ import React from 'react'; import { EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; +import { css } from '@emotion/css'; import * as i18n from './translations'; import { useSetUpSections } from './hooks/use_setup_sections'; diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/types.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts similarity index 93% rename from x-pack/plugins/security_solution_serverless/public/get_started/types.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts index 30504913e8aff..c7378773a03a7 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts @@ -9,8 +9,7 @@ import type { EuiIconProps } from '@elastic/eui'; import type React from 'react'; import type { MutableRefObject } from 'react'; import type { HttpSetup } from '@kbn/core/public'; - -import type { ProductLine } from '../../common/product'; +import type { ProductLine } from './configs'; export interface Section { cards: Card[]; @@ -148,6 +147,7 @@ export interface TogglePanelReducer { finishedSteps: Record>; totalActiveSteps: number | null; totalStepsLeft: number | null; + getStartedSteps: StepId[] | undefined; } export interface ToggleProductAction { @@ -170,11 +170,17 @@ export interface ToggleStepAction { payload: { stepId: StepId; cardId: CardId; isStepExpanded?: boolean }; } +export interface UpdateGetStartedStepsAction { + type: GetStartedPageActions.UpdateGetStartedSteps; + payload: { getStartedSteps: StepId[] }; +} + export type ReducerActions = | ToggleProductAction | AddFinishedStepAction | RemoveFinishedStepAction - | ToggleStepAction; + | ToggleStepAction + | UpdateGetStartedStepsAction; export interface Switch { id: ProductLine; @@ -186,6 +192,7 @@ export enum GetStartedPageActions { RemoveFinishedStep = 'removeFinishedStep', ToggleProduct = 'toggleProduct', ToggleExpandedStep = 'toggleExpandedStep', + UpdateGetStartedSteps = 'updateGetStartedSteps', } export type OnStepClicked = ({ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx new file mode 100644 index 0000000000000..2a06db62767e2 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx @@ -0,0 +1,123 @@ +/* + * 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 { + EuiButtonIcon, + EuiFlexGroup, + EuiFlexItem, + EuiSpacer, + EuiTitle, + useEuiTheme, +} from '@elastic/eui'; +import React from 'react'; +import { css } from '@emotion/react'; +import useObservable from 'react-use/lib/useObservable'; + +import { useUserName } from '../hooks/use_user_name'; + +import { + GET_STARTED_PAGE_TITLE, + GET_STARTED_PAGE_SUBTITLE, + GET_STARTED_PAGE_DESCRIPTION, + CURRENT_PLAN_LABEL, +} from '../translations'; +import { CONTENT_WIDTH } from '../helpers'; +import { ProductTierBadge } from './product_tier_badge'; +import { useWelcomeHeaderStyles } from '../styles/welcome_header.styles'; +import type { ProductTier } from '../configs'; +import { useKibana } from '../../../../lib/kibana'; + +const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ productTier }) => { + const { euiTheme } = useEuiTheme(); + const userName = useUserName(); + const { projectFeaturesUrl$ } = useKibana().services; + const projectFeaturesUrl = useObservable(projectFeaturesUrl$); + const { + headerStyles, + headerTitleStyles, + headerSubtitleStyles, + headerDescriptionStyles, + currentPlanWrapperStyles, + currentPlanTextStyles, + } = useWelcomeHeaderStyles(); + + return ( + + + {userName && ( + + {GET_STARTED_PAGE_TITLE(userName)} + + )} + + + {GET_STARTED_PAGE_SUBTITLE} + + + + {GET_STARTED_PAGE_DESCRIPTION} + + {productTier && projectFeaturesUrl && ( + <> + +
+
+ {CURRENT_PLAN_LABEL} + + + +
+
+ + )} + + + ); +}; + +export const WelcomeHeader = React.memo(WelcomeHeaderComponent); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/product_tier_badge.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx similarity index 100% rename from x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/product_tier_badge.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/product_tier_badge.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.tsx similarity index 92% rename from x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/product_tier_badge.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.tsx index 559db32d83cf5..a0df046d89406 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/product_tier_badge.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.tsx @@ -7,9 +7,9 @@ import React from 'react'; import { EuiBadge, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; -import { ProductTier } from '../../../common/product'; +import { css } from '@emotion/css'; import { PRODUCT_TIER_ESSENTIAL, PRODUCT_TIER_COMPLETE } from './translations'; +import { ProductTier } from '../configs'; const ProductTierBadgeComponent = ({ productTier }: { productTier: ProductTier | undefined }) => { const { euiTheme } = useEuiTheme(); diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts similarity index 74% rename from x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts index bef05ca52e9df..aba7cf0902f6c 100644 --- a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts @@ -7,14 +7,14 @@ import { i18n } from '@kbn/i18n'; export const PRODUCT_TIER_ESSENTIAL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.essential', + 'xpack.securitySolution.getStarted.welcomePanel.productTier.essential', { defaultMessage: `Essential`, } ); export const PRODUCT_TIER_COMPLETE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.complete', + 'xpack.securitySolution.getStarted.welcomePanel.productTier.complete', { defaultMessage: `Complete`, } diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx index d013fdd715918..c79cbd340a45d 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx @@ -7,12 +7,11 @@ import React, { memo } from 'react'; import { useSourcererDataView } from '../../containers/sourcerer'; -import { useContractComponents } from '../../hooks/use_contract_component'; +import GetStarted from './get_started/get_started'; export const LandingPageComponent = memo(() => { - const { GetStarted } = useContractComponents(); const { indicesExist } = useSourcererDataView(); - return GetStarted ? : null; + return ; }); LandingPageComponent.displayName = 'LandingPageComponent'; diff --git a/x-pack/plugins/security_solution/public/common/lib/local_storage/index.ts b/x-pack/plugins/security_solution/public/common/lib/local_storage/index.ts new file mode 100644 index 0000000000000..f315bea6a3d9a --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/lib/local_storage/index.ts @@ -0,0 +1,10 @@ +/* + * 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 { Storage } from '@kbn/kibana-utils-plugin/public'; + +export const storage = new Storage(localStorage); diff --git a/x-pack/plugins/security_solution/public/index.ts b/x-pack/plugins/security_solution/public/index.ts index 92fcf14ace691..a857177513482 100644 --- a/x-pack/plugins/security_solution/public/index.ts +++ b/x-pack/plugins/security_solution/public/index.ts @@ -16,3 +16,12 @@ export const plugin = (context: PluginInitializerContext): Plugin => new Plugin( export type { PluginSetup, PluginStart }; export { Plugin }; + +export { + CreateProjectSteps, + OverviewSteps, + AddIntegrationsSteps, + ViewDashboardSteps, + EnablePrebuiltRulesSteps, + ViewAlertsSteps, +} from './common/components/landing_page/get_started/types'; diff --git a/x-pack/plugins/security_solution/public/plugin_contract.ts b/x-pack/plugins/security_solution/public/plugin_contract.ts index f7e109c94af84..572289fe2bfe5 100644 --- a/x-pack/plugins/security_solution/public/plugin_contract.ts +++ b/x-pack/plugins/security_solution/public/plugin_contract.ts @@ -15,6 +15,8 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import { navLinks$ } from './common/links/nav_links'; import { breadcrumbsNav$ } from './common/breadcrumbs'; import { ContractComponentsService } from './contract_components'; +import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; +import type { StepId } from './common/components/landing_page/get_started/types'; export class PluginContract { public componentsService: ContractComponentsService; @@ -22,9 +24,18 @@ export class PluginContract { public extraRoutes$: BehaviorSubject; public appLinksSwitcher: AppLinksSwitcher; public deepLinksFormatter?: DeepLinksFormatter; + public productTypes$: BehaviorSubject; + public projectsUrl$: BehaviorSubject; + public projectFeaturesUrl$: BehaviorSubject; + public availableSteps$: BehaviorSubject; constructor(private readonly experimentalFeatures: ExperimentalFeatures) { this.extraRoutes$ = new BehaviorSubject([]); + this.productTypes$ = new BehaviorSubject(undefined); + this.projectsUrl$ = new BehaviorSubject(undefined); + this.projectFeaturesUrl$ = new BehaviorSubject(undefined); + this.availableSteps$ = new BehaviorSubject([]); + this.componentsService = new ContractComponentsService(); this.upsellingService = new UpsellingService(); this.appLinksSwitcher = (appLinks) => appLinks; @@ -33,6 +44,10 @@ export class PluginContract { public getStartServices(): ContractStartServices { return { extraRoutes$: this.extraRoutes$.asObservable(), + productTypes$: this.productTypes$.asObservable(), + projectsUrl$: this.projectsUrl$.asObservable(), + projectFeaturesUrl$: this.projectFeaturesUrl$.asObservable(), + availableSteps$: this.availableSteps$.asObservable(), getComponents$: this.componentsService.getComponents$.bind(this.componentsService), upselling: this.upsellingService, }; @@ -53,6 +68,18 @@ export class PluginContract { public getStartContract(): PluginStart { return { + setProductTypes: (productTypes) => { + this.productTypes$.next(productTypes); + }, + setProjectFeaturesUrl: (projectFeaturesUrl) => { + this.projectFeaturesUrl$.next(projectFeaturesUrl); + }, + setProjectsUrl: (projectsUrl) => { + this.projectsUrl$.next(projectsUrl); + }, + setAvailableSteps: (availableSteps) => { + this.availableSteps$.next(availableSteps); + }, getNavLinks$: () => navLinks$, setExtraRoutes: (extraRoutes) => this.extraRoutes$.next(extraRoutes), setComponents: (components) => { diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index 16a75ce105262..f74c5dd85e7bf 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -83,6 +83,8 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import type { DeepLinksFormatter } from './common/links/deep_links'; import type { SetComponents, GetComponents$ } from './contract_components'; import type { ConfigSettings } from '../common/config_settings'; +import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; +import type { StepId } from './common/components/landing_page/get_started/types'; export interface SetupPlugins { cloud?: CloudSetup; @@ -147,6 +149,10 @@ export interface StartPluginsDependencies extends StartPlugins { export interface ContractStartServices { extraRoutes$: Observable; + productTypes$: Observable; + projectFeaturesUrl$?: Observable; + projectsUrl$?: Observable; + availableSteps$: Observable; getComponents$: GetComponents$; upselling: UpsellingService; } @@ -185,6 +191,10 @@ export interface PluginSetup { export interface PluginStart { getNavLinks$: () => Observable; setExtraRoutes: (extraRoutes: RouteProps[]) => void; + setAvailableSteps: (availableSteps: StepId[]) => void; + setProductTypes: (productTypes: SecurityProductTypes) => void; + setProjectFeaturesUrl: (projectFeaturesUrl: string | undefined) => void; + setProjectsUrl: (projectsUrl: string | undefined) => void; setComponents: SetComponents; getBreadcrumbsNav$: () => Observable; getUpselling: () => UpsellingService; diff --git a/x-pack/plugins/security_solution_ess/public/plugin.ts b/x-pack/plugins/security_solution_ess/public/plugin.ts index 68b902a95dc84..5f0da666b1171 100644 --- a/x-pack/plugins/security_solution_ess/public/plugin.ts +++ b/x-pack/plugins/security_solution_ess/public/plugin.ts @@ -6,9 +6,15 @@ */ import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public'; +import { + AddIntegrationsSteps, + EnablePrebuiltRulesSteps, + OverviewSteps, + ViewAlertsSteps, + ViewDashboardSteps, +} from '@kbn/security-solution-plugin/public'; import { subscribeBreadcrumbs } from './breadcrumbs'; import { createServices } from './common/services'; -import { getSecurityGetStartedComponent } from './get_started'; import { registerUpsellings } from './upselling/register_upsellings'; import type { SecuritySolutionEssPluginSetup, @@ -44,9 +50,13 @@ export class SecuritySolutionEssPlugin registerUpsellings(securitySolution.getUpselling(), license, services); }); - securitySolution.setComponents({ - GetStarted: getSecurityGetStartedComponent(services), - }); + securitySolution.setAvailableSteps([ + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, + ]); subscribeBreadcrumbs(services); diff --git a/x-pack/plugins/security_solution_serverless/kibana.jsonc b/x-pack/plugins/security_solution_serverless/kibana.jsonc index 975aaebe45af8..9bbefdf352254 100644 --- a/x-pack/plugins/security_solution_serverless/kibana.jsonc +++ b/x-pack/plugins/security_solution_serverless/kibana.jsonc @@ -26,7 +26,6 @@ "securitySolutionEss" ], "requiredBundles": [ - "kibanaUtils", "usageCollection" ] } diff --git a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/index.tsx b/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/index.tsx deleted file mode 100644 index 93456bc67d5fa..0000000000000 --- a/x-pack/plugins/security_solution_serverless/public/get_started/welcome_header/index.tsx +++ /dev/null @@ -1,94 +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 { - EuiButtonIcon, - EuiFlexGroup, - EuiFlexItem, - EuiSpacer, - EuiTitle, - useEuiTheme, -} from '@elastic/eui'; -import React from 'react'; -import { css } from '@emotion/react'; - -import { useUserName } from '../../common/hooks/use_user_name'; -import { getProjectFeaturesUrl } from '../../navigation/links/util'; - -import { - GET_STARTED_PAGE_TITLE, - GET_STARTED_PAGE_SUBTITLE, - GET_STARTED_PAGE_DESCRIPTION, - CURRENT_PLAN_LABEL, -} from '../translations'; -import { CONTENT_WIDTH } from '../helpers'; -import { ProductTierBadge } from './product_tier_badge'; -import { useKibana } from '../../common/services'; -import type { ProductTier } from '../../../common/product'; -import { useWelcomeHeaderStyles } from '../styles/welcome_header.styles'; - -const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ productTier }) => { - const { euiTheme } = useEuiTheme(); - const userName = useUserName(); - const { cloud } = useKibana().services; - const { - headerStyles, - headerTitleStyles, - headerSubtitleStyles, - headerDescriptionStyles, - currentPlanWrapperStyles, - currentPlanTextStyles, - } = useWelcomeHeaderStyles(); - - return ( - - - {userName && ( - - {GET_STARTED_PAGE_TITLE(userName)} - - )} - - - {GET_STARTED_PAGE_SUBTITLE} - - - - {GET_STARTED_PAGE_DESCRIPTION} - - -
-
- {CURRENT_PLAN_LABEL} - - {productTier && ( - - )} -
-
- - - ); -}; - -export const WelcomeHeader = React.memo(WelcomeHeaderComponent); diff --git a/x-pack/plugins/security_solution_serverless/public/plugin.ts b/x-pack/plugins/security_solution_serverless/public/plugin.ts index 77fcbc19d6e26..abe5ef574a307 100644 --- a/x-pack/plugins/security_solution_serverless/public/plugin.ts +++ b/x-pack/plugins/security_solution_serverless/public/plugin.ts @@ -7,7 +7,14 @@ import type { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public'; -import { getSecurityGetStartedComponent } from './get_started'; +import { + AddIntegrationsSteps, + CreateProjectSteps, + EnablePrebuiltRulesSteps, + OverviewSteps, + ViewAlertsSteps, + ViewDashboardSteps, +} from '@kbn/security-solution-plugin/public'; import { getDashboardsLandingCallout } from './components/dashboards_landing_callout'; import type { SecuritySolutionServerlessPluginSetup, @@ -24,6 +31,7 @@ import { parseExperimentalConfigValue, type ExperimentalFeatures, } from '../common/experimental_features'; +import { getProjectFeaturesUrl } from './navigation/links/util'; export class SecuritySolutionServerlessPlugin implements @@ -69,10 +77,19 @@ export class SecuritySolutionServerlessPlugin registerUpsellings(securitySolution.getUpselling(), productTypes, services); securitySolution.setComponents({ - GetStarted: getSecurityGetStartedComponent(services, productTypes), + // GetStarted: getSecurityGetStartedComponent(services, productTypes), DashboardsLandingCallout: getDashboardsLandingCallout(services), }); - + securitySolution.setProductTypes(productTypes); + securitySolution.setProjectFeaturesUrl(getProjectFeaturesUrl(services.cloud)); + securitySolution.setAvailableSteps([ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, + ]); startNavigation(services); setRoutes(services); From ccdb6483a32a716af8cdf6cb656ae2c3446d4d35 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 16 Jan 2024 19:33:53 +0800 Subject: [PATCH 02/22] getStartedPageService --- .../context/get_started_context.tsx | 42 +++++++++++++ .../landing_page/get_started/get_started.tsx | 14 ++--- .../get_started/get_started_with_context.tsx | 28 +++++++++ .../landing_page/get_started/helpers.ts | 9 ++- .../hooks/use_project_features_url.tsx | 14 +++++ .../get_started/hooks/use_toggle_panel.tsx | 4 +- .../landing_page/get_started/index.tsx | 7 +-- .../landing_page/get_started/lazy.tsx | 6 +- .../landing_page/get_started/storage.ts | 10 +-- .../landing_page/get_started/toggle_panel.tsx | 2 +- .../get_started/welcome_header/index.tsx | 6 +- .../common/components/landing_page/index.tsx | 4 +- .../public/contract_get_started_page.ts | 61 +++++++++++++++++++ .../public/plugin_contract.ts | 8 ++- .../plugins/security_solution/public/types.ts | 3 + .../security_solution_ess/public/plugin.ts | 2 +- .../public/plugin.ts | 9 +-- 17 files changed, 188 insertions(+), 41 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx create mode 100644 x-pack/plugins/security_solution/public/contract_get_started_page.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx new file mode 100644 index 0000000000000..b0fabcbf1864b --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx @@ -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 React from 'react'; +import { useKibana } from '../../../../lib/kibana'; +import type { SecurityProductTypes } from '../configs'; +import type { StepId } from '../types'; + +export interface GetStartedContextType { + productTypes: SecurityProductTypes | undefined; + projectsUrl: string | undefined; + projectFeaturesUrl: string | undefined; + availableSteps: StepId[] | undefined; +} + +const GetStartedContext = React.createContext(null); + +export const GetStartedContextProvider: React.FC = ({ children }) => { + const { productTypes, projectsUrl, projectFeaturesUrl, availableSteps } = + useKibana().services.getStartedPageSettings(); + + const value = { + productTypes, + projectsUrl, + projectFeaturesUrl, + availableSteps, + }; + + return {children}; +}; + +export const useGetStartedContext = () => { + const context = React.useContext(GetStartedContext); + if (!context) { + throw new Error('useGetStartedContext must be used within a GetStartedContextProvider'); + } + return context; +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx index 089d9e475af78..63cb5d6b3ddf4 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx @@ -9,7 +9,6 @@ import { useEuiTheme } from '@elastic/eui'; import React from 'react'; import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template'; import { css } from '@emotion/css'; -import useObservable from 'react-use/lib/useObservable'; import { TogglePanel } from './toggle_panel'; @@ -20,19 +19,17 @@ import { CONTENT_WIDTH } from './helpers'; import { WelcomeHeader } from './welcome_header'; import { Footer } from './footer'; import { useScrollToHash } from './hooks/use_scroll'; -import type { SecurityProductTypes } from './configs'; import { ProductLine } from './configs'; -import { useKibana } from '../../../lib/kibana'; +import { useGetStartedContext } from './context/get_started_context'; export interface GetStartedProps { indicesExist?: boolean; - productTypes?: SecurityProductTypes; } -export const GetStartedComponent: React.FC = ({ productTypes, indicesExist }) => { +export const GetStartedComponent: React.FC = ({ indicesExist }) => { const { euiTheme } = useEuiTheme(); - const { availableSteps$ } = useKibana().services; - const getStartedSteps = useObservable(availableSteps$); + + const { availableSteps: getStartedSteps, productTypes } = useGetStartedContext(); const { onStepClicked, toggleTaskCompleteStatus, @@ -119,6 +116,3 @@ export const GetStartedComponent: React.FC = ({ productTypes, i }; export const GetStarted = React.memo(GetStartedComponent); - -// eslint-disable-next-line import/no-default-export -export default GetStarted; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx new file mode 100644 index 0000000000000..a43c2b6bbfdea --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx @@ -0,0 +1,28 @@ +/* + * 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 { GetStartedContextProvider } from './context/get_started_context'; +import { GetStarted } from './get_started'; + +interface GetStartedContextProviderProps { + indicesExist?: boolean; +} + +const GetStartedWithContextComponent: React.FC = ({ + indicesExist, +}) => { + return ( + + + + ); +}; + +export const GetStartedWithContext = React.memo(GetStartedWithContextComponent); + +// eslint-disable-next-line import/no-default-export +export default GetStartedWithContext; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts index dc75adf712f9b..f396a014d41eb 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts @@ -21,12 +21,15 @@ import { CreateProjectSteps, QuickStartSectionCardsId } from './types'; export const CONTENT_WIDTH = 1150; -export const defaultFinishedSteps: Partial> = { +export const DEFAULT_FINISHED_STEPS: Partial> = { [QuickStartSectionCardsId.createFirstProject]: [CreateProjectSteps.createFirstProject], }; -export const isDefaultFinishedCardStep = (cardId: CardId, stepId: StepId) => - !!defaultFinishedSteps[cardId]?.includes(stepId); +export const isDefaultFinishedCardStep = ( + cardId: CardId, + stepId: StepId, + getStartedSteps: StepId[] +) => !!DEFAULT_FINISHED_STEPS[cardId]?.includes(stepId) && getStartedSteps.includes(stepId); export const getCardTimeInMinutes = (activeSteps: Step[] | undefined, stepsDone: Set) => activeSteps?.reduce( diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx new file mode 100644 index 0000000000000..31e549eb6ab26 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx @@ -0,0 +1,14 @@ +/* + * 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 useObservableState from 'react-use/lib/useObservable'; +import { useKibana } from '../../../../lib/kibana'; + +export const useProjectFeaturesUrl = () => { + const { projectFeaturesUrl$ } = useKibana().services; + return useObservableState(projectFeaturesUrl$); +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx index 1664dce6f51ad..ef8215c472827 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx @@ -177,12 +177,12 @@ export const useTogglePanel = ({ payload: { stepId, cardId, sectionId }, }); if (undo) { - removeFinishedStepFromStorage(cardId, stepId); + removeFinishedStepFromStorage(cardId, stepId, getStartedSteps); } else { addFinishedStepToStorage(cardId, stepId); } }, - [addFinishedStepToStorage, removeFinishedStepFromStorage] + [addFinishedStepToStorage, getStartedSteps, removeFinishedStepFromStorage] ); const onProductSwitchChanged = useCallback( diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx index 51e1dde83f46b..fca080678e40e 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx @@ -7,12 +7,9 @@ import React from 'react'; -import type { SecurityProductTypes } from './configs'; import { GetStarted } from './lazy'; -export const getSecurityGetStartedComponent = ( - productTypes: SecurityProductTypes -): React.ComponentType<{ indicesExist?: boolean }> => +export const getSecurityGetStartedComponent = (): React.ComponentType<{ indicesExist?: boolean }> => function GetStartedComponent({ indicesExist }: { indicesExist?: boolean }) { - return ; + return ; }; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx index d05f6b0ca0583..ae0e96edc62e1 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx @@ -8,12 +8,12 @@ import React, { lazy, Suspense } from 'react'; import { EuiLoadingLogo } from '@elastic/eui'; import type { GetStartedProps } from './get_started'; -const GetStartedLazy = lazy(() => import('./get_started')); +const GetStartedLazy = lazy(() => import('./get_started_with_context')); const centerLogoStyle = { display: 'flex', margin: 'auto' }; -export const GetStarted = ({ productTypes, indicesExist }: GetStartedProps) => ( +export const GetStarted = ({ indicesExist }: GetStartedProps) => ( }> - + ); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts index ead8b746b919e..7830518f31f3a 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.ts @@ -13,7 +13,7 @@ import { GetStartedWithAlertsCardsId, } from './types'; -import { defaultFinishedSteps, isDefaultFinishedCardStep } from './helpers'; +import { DEFAULT_FINISHED_STEPS, isDefaultFinishedCardStep } from './helpers'; import { getSections } from './sections'; import { storage } from '../../../lib/local_storage'; import type { ProductLine } from './configs'; @@ -34,7 +34,7 @@ export const defaultExpandedCards = { export const getStartedStorage = { setDefaultFinishedSteps: (cardId: CardId) => { const allFinishedSteps: Record = storage.get(FINISHED_STEPS_STORAGE_KEY); - const defaultFinishedStepsByCardId = defaultFinishedSteps[cardId]; + const defaultFinishedStepsByCardId = DEFAULT_FINISHED_STEPS[cardId]; const hasDefaultFinishedSteps = defaultFinishedStepsByCardId != null; if (!hasDefaultFinishedSteps) { return; @@ -71,7 +71,7 @@ export const getStartedStorage = { getAllFinishedStepsFromStorage: () => { const allFinishedSteps: Record = storage.get(FINISHED_STEPS_STORAGE_KEY); if (allFinishedSteps == null) { - storage.set(FINISHED_STEPS_STORAGE_KEY, defaultFinishedSteps); + storage.set(FINISHED_STEPS_STORAGE_KEY, DEFAULT_FINISHED_STEPS); } else { getSections().forEach((section) => { section.cards?.forEach((card) => { @@ -90,8 +90,8 @@ export const getStartedStorage = { storage.set(FINISHED_STEPS_STORAGE_KEY, { ...finishedSteps, [cardId]: card }); } }, - removeFinishedStepFromStorage: (cardId: CardId, stepId: StepId) => { - if (isDefaultFinishedCardStep(cardId, stepId)) { + removeFinishedStepFromStorage: (cardId: CardId, stepId: StepId, getStartedSteps: StepId[]) => { + if (isDefaultFinishedCardStep(cardId, stepId, getStartedSteps)) { return; } const finishedSteps = getStartedStorage.getAllFinishedStepsFromStorage(); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx index e2035194423ab..45b18d046a601 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx @@ -14,8 +14,8 @@ import * as i18n from './translations'; import { useSetUpSections } from './hooks/use_setup_sections'; import type { ActiveSections } from './types'; -import type { ProductLine } from '../../common/product'; import { useStepContext } from './context/step_context'; +import type { ProductLine } from './configs'; const TogglePanelComponent: React.FC<{ activeProducts: Set; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx index 2a06db62767e2..624c8624d77e5 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx @@ -15,7 +15,6 @@ import { } from '@elastic/eui'; import React from 'react'; import { css } from '@emotion/react'; -import useObservable from 'react-use/lib/useObservable'; import { useUserName } from '../hooks/use_user_name'; @@ -29,13 +28,12 @@ import { CONTENT_WIDTH } from '../helpers'; import { ProductTierBadge } from './product_tier_badge'; import { useWelcomeHeaderStyles } from '../styles/welcome_header.styles'; import type { ProductTier } from '../configs'; -import { useKibana } from '../../../../lib/kibana'; +import { useGetStartedContext } from '../context/get_started_context'; const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ productTier }) => { const { euiTheme } = useEuiTheme(); const userName = useUserName(); - const { projectFeaturesUrl$ } = useKibana().services; - const projectFeaturesUrl = useObservable(projectFeaturesUrl$); + const { projectFeaturesUrl } = useGetStartedContext(); const { headerStyles, headerTitleStyles, diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx index c79cbd340a45d..ae6d681ffbbac 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx @@ -7,11 +7,11 @@ import React, { memo } from 'react'; import { useSourcererDataView } from '../../containers/sourcerer'; -import GetStarted from './get_started/get_started'; +import { GetStartedWithContext } from './get_started/get_started_with_context'; export const LandingPageComponent = memo(() => { const { indicesExist } = useSourcererDataView(); - return ; + return ; }); LandingPageComponent.displayName = 'LandingPageComponent'; diff --git a/x-pack/plugins/security_solution/public/contract_get_started_page.ts b/x-pack/plugins/security_solution/public/contract_get_started_page.ts new file mode 100644 index 0000000000000..d5297bab834b5 --- /dev/null +++ b/x-pack/plugins/security_solution/public/contract_get_started_page.ts @@ -0,0 +1,61 @@ +/* + * 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 type { Observable } from 'rxjs'; +import { BehaviorSubject } from 'rxjs'; +import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; +import type { StepId } from './common/components/landing_page/get_started/types'; + +export class GetStartedPageService { + private productTypesSubject$: BehaviorSubject; + private projectsUrlSubject$: BehaviorSubject; + private projectFeaturesUrlSubject$: BehaviorSubject; + private availableStepsSubject$: BehaviorSubject; + + public productTypes$: Observable; + public projectsUrl$: Observable; + public projectFeaturesUrl$: Observable; + public availableSteps$: Observable; + + constructor() { + this.productTypesSubject$ = new BehaviorSubject(undefined); + this.projectsUrlSubject$ = new BehaviorSubject(undefined); + this.projectFeaturesUrlSubject$ = new BehaviorSubject(undefined); + this.availableStepsSubject$ = new BehaviorSubject([]); + + this.productTypes$ = this.productTypesSubject$.asObservable(); + this.projectsUrl$ = this.projectsUrlSubject$.asObservable(); + this.projectFeaturesUrl$ = this.projectFeaturesUrlSubject$.asObservable(); + this.availableSteps$ = this.availableStepsSubject$.asObservable(); + } + + getSettings() { + return { + productTypes: this.productTypesSubject$.getValue(), + projectsUrl: this.projectsUrlSubject$.getValue(), + projectFeaturesUrl: this.projectFeaturesUrlSubject$.getValue(), + availableSteps: this.availableStepsSubject$.getValue(), + }; + } + + getProductTypes() { + return this.productTypesSubject$.getValue(); + } + + setProductTypes(productTypes: SecurityProductTypes) { + this.productTypesSubject$.next(productTypes); + } + setProjectFeaturesUrl(projectFeaturesUrl: string | undefined) { + this.projectFeaturesUrlSubject$.next(projectFeaturesUrl); + } + setProjectsUrl(projectsUrl: string | undefined) { + this.projectsUrlSubject$.next(projectsUrl); + } + setAvailableSteps(availableSteps: StepId[]) { + this.availableStepsSubject$.next(availableSteps); + } +} diff --git a/x-pack/plugins/security_solution/public/plugin_contract.ts b/x-pack/plugins/security_solution/public/plugin_contract.ts index 572289fe2bfe5..d6e1c8e965d98 100644 --- a/x-pack/plugins/security_solution/public/plugin_contract.ts +++ b/x-pack/plugins/security_solution/public/plugin_contract.ts @@ -17,10 +17,12 @@ import { breadcrumbsNav$ } from './common/breadcrumbs'; import { ContractComponentsService } from './contract_components'; import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; import type { StepId } from './common/components/landing_page/get_started/types'; +import { GetStartedPageService } from './contract_get_started_page'; export class PluginContract { public componentsService: ContractComponentsService; public upsellingService: UpsellingService; + public getStartedPageService: GetStartedPageService; public extraRoutes$: BehaviorSubject; public appLinksSwitcher: AppLinksSwitcher; public deepLinksFormatter?: DeepLinksFormatter; @@ -35,7 +37,7 @@ export class PluginContract { this.projectsUrl$ = new BehaviorSubject(undefined); this.projectFeaturesUrl$ = new BehaviorSubject(undefined); this.availableSteps$ = new BehaviorSubject([]); - + this.getStartedPageService = new GetStartedPageService(); this.componentsService = new ContractComponentsService(); this.upsellingService = new UpsellingService(); this.appLinksSwitcher = (appLinks) => appLinks; @@ -50,6 +52,9 @@ export class PluginContract { availableSteps$: this.availableSteps$.asObservable(), getComponents$: this.componentsService.getComponents$.bind(this.componentsService), upselling: this.upsellingService, + getStartedPageSettings: this.getStartedPageService.getSettings.bind( + this.getStartedPageService + ), }; } @@ -80,6 +85,7 @@ export class PluginContract { setAvailableSteps: (availableSteps) => { this.availableSteps$.next(availableSteps); }, + setGetStartedPageSettings: this.getStartedPageService, getNavLinks$: () => navLinks$, setExtraRoutes: (extraRoutes) => this.extraRoutes$.next(extraRoutes), setComponents: (components) => { diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index f74c5dd85e7bf..6bc6fe23afe79 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -85,6 +85,7 @@ import type { SetComponents, GetComponents$ } from './contract_components'; import type { ConfigSettings } from '../common/config_settings'; import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; import type { StepId } from './common/components/landing_page/get_started/types'; +import type { GetStartedPageService } from './contract_get_started_page'; export interface SetupPlugins { cloud?: CloudSetup; @@ -155,6 +156,7 @@ export interface ContractStartServices { availableSteps$: Observable; getComponents$: GetComponents$; upselling: UpsellingService; + getStartedPageSettings: GetStartedPageService['getSettings']; } export type StartServices = CoreStart & @@ -198,6 +200,7 @@ export interface PluginStart { setComponents: SetComponents; getBreadcrumbsNav$: () => Observable; getUpselling: () => UpsellingService; + setGetStartedPageSettings: GetStartedPageService; } export interface AppObservableLibs { diff --git a/x-pack/plugins/security_solution_ess/public/plugin.ts b/x-pack/plugins/security_solution_ess/public/plugin.ts index 5f0da666b1171..2d453b8c70ce6 100644 --- a/x-pack/plugins/security_solution_ess/public/plugin.ts +++ b/x-pack/plugins/security_solution_ess/public/plugin.ts @@ -50,7 +50,7 @@ export class SecuritySolutionEssPlugin registerUpsellings(securitySolution.getUpselling(), license, services); }); - securitySolution.setAvailableSteps([ + securitySolution.setGetStartedPageSettings.setAvailableSteps([ OverviewSteps.getToKnowElasticSecurity, AddIntegrationsSteps.connectToDataSources, ViewDashboardSteps.analyzeData, diff --git a/x-pack/plugins/security_solution_serverless/public/plugin.ts b/x-pack/plugins/security_solution_serverless/public/plugin.ts index abe5ef574a307..f893a6c96a49b 100644 --- a/x-pack/plugins/security_solution_serverless/public/plugin.ts +++ b/x-pack/plugins/security_solution_serverless/public/plugin.ts @@ -77,12 +77,13 @@ export class SecuritySolutionServerlessPlugin registerUpsellings(securitySolution.getUpselling(), productTypes, services); securitySolution.setComponents({ - // GetStarted: getSecurityGetStartedComponent(services, productTypes), DashboardsLandingCallout: getDashboardsLandingCallout(services), }); - securitySolution.setProductTypes(productTypes); - securitySolution.setProjectFeaturesUrl(getProjectFeaturesUrl(services.cloud)); - securitySolution.setAvailableSteps([ + securitySolution.setGetStartedPageSettings.setProductTypes(productTypes); + securitySolution.setGetStartedPageSettings.setProjectFeaturesUrl( + getProjectFeaturesUrl(services.cloud) + ); + securitySolution.setGetStartedPageSettings.setAvailableSteps([ CreateProjectSteps.createFirstProject, OverviewSteps.getToKnowElasticSecurity, AddIntegrationsSteps.connectToDataSources, From c2eef035c3b0a798b854d61f58375592b70b2e5f Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Tue, 16 Jan 2024 20:46:53 +0800 Subject: [PATCH 03/22] ess --- .../landing_page/get_started/helpers.ts | 30 +++++++++++-------- 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts index f396a014d41eb..02345ee975aff 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts @@ -142,12 +142,14 @@ export const setupActiveSections = ( acc.totalStepsLeft += stepsLeft; acc.totalActiveSteps += activeStepIds?.length ?? 0; - accCards[card.id] = { - id: card.id, - timeInMins, - stepsLeft, - activeStepIds, - }; + if (activeSteps && activeSteps.length > 0) { + accCards[card.id] = { + id: card.id, + timeInMins, + stepsLeft, + activeStepIds, + }; + } return accCards; }, {} as Record) ?? {}; @@ -202,12 +204,16 @@ export const updateActiveSections = ({ ...activeSections, [sectionId]: { ...activeSections[sectionId], - [cardId]: { - id: cardId, - timeInMins, - stepsLeft, - activeStepIds, - }, + ...(activeStepIds && activeStepIds?.length > 0 + ? { + [cardId]: { + id: cardId, + timeInMins, + stepsLeft, + activeStepIds, + }, + } + : {}), }, }; From 5cd05683f91bc8f445a75b92d626c78118bd40e2 Mon Sep 17 00:00:00 2001 From: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Date: Tue, 16 Jan 2024 13:33:44 +0000 Subject: [PATCH 04/22] [CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix' --- .../landing_page/get_started/card_step/index.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx index 8678714d67af9..b8c5341156210 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx @@ -30,7 +30,7 @@ jest.mock('../apis'); jest.mock('../../common/services'); -jest.mock('@kbn/security-solution-plugin/public', () => ({ +jest.mock('../../../../..', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }), })); From cf49acf3fa7dd84e913f7dda1cf8923ed44029af Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 02:13:16 +0800 Subject: [PATCH 05/22] clean up --- .../__mocks__/get_started_with_context.tsx | 10 ++++++ .../get_started/card_step/content/video.tsx | 2 +- .../context/__mocks__/get_started_context.tsx | 34 +++++++++++++++++++ .../context/get_started_context.tsx | 2 +- .../landing_page/get_started/helpers.test.ts | 2 +- .../landing_page/get_started/helpers.ts | 14 ++++---- .../hooks/use_project_features_url.tsx | 14 -------- .../hooks/use_toggle_panel.test.tsx | 31 +++++++++++------ .../get_started/hooks/use_toggle_panel.tsx | 12 +------ .../landing_page/get_started/reducer.test.ts | 2 +- .../landing_page/get_started/reducer.tsx | 18 +--------- .../landing_page/get_started/types.ts | 11 ++---- .../components/landing_page/index.test.tsx | 9 ++--- 13 files changed, 82 insertions(+), 79 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx new file mode 100644 index 0000000000000..726e3b1e90837 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx @@ -0,0 +1,10 @@ +/* + * 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'; + +export const GetStartedWithContext = () =>
; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx index 89020a9179f3a..42c2b36ec96f6 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx @@ -6,7 +6,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiIcon, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/css'; +import { css } from '@emotion/react'; import React, { useCallback, useMemo } from 'react'; import { useStepContext } from '../../context/step_context'; import { WATCH_VIDEO_BUTTON_TITLE } from '../../translations'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx new file mode 100644 index 0000000000000..100e96b7ef935 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx @@ -0,0 +1,34 @@ +/* + * 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 { ALL_PRODUCT_LINES } from '../../configs'; +import { + AddIntegrationsSteps, + CreateProjectSteps, + EnablePrebuiltRulesSteps, + OverviewSteps, + ViewAlertsSteps, + ViewDashboardSteps, +} from '../../types'; + +export const GetStartedContextProvider = ({ children }: { children: React.ReactElement }) => ( + <>{children} +); + +export const useGetStartedContext = jest.fn(() => ({ + productTypes: ALL_PRODUCT_LINES, + projectsUrl: 'mockProjectsUrl', + projectFeaturesUrl: 'mockProjectFeaturesUrl', + availableSteps: [ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, + ], +})); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx index b0fabcbf1864b..3aa59fbbcf83b 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx @@ -14,7 +14,7 @@ export interface GetStartedContextType { productTypes: SecurityProductTypes | undefined; projectsUrl: string | undefined; projectFeaturesUrl: string | undefined; - availableSteps: StepId[] | undefined; + availableSteps: StepId[]; } const GetStartedContext = React.createContext(null); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts index d8a190c15df66..ae373983d079d 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts @@ -232,7 +232,7 @@ describe('setupActiveSections', () => { CreateProjectSteps.createFirstProject, ]), } as unknown as Record>; - const activeProducts: Set = new Set(); + const activeProducts: Set = new Set([ProductLine.security]); const activeSections = setupActiveSections(finishedSteps, activeProducts, getStartedSteps); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts index 02345ee975aff..410f8d809bfa1 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts @@ -29,7 +29,7 @@ export const isDefaultFinishedCardStep = ( cardId: CardId, stepId: StepId, getStartedSteps: StepId[] -) => !!DEFAULT_FINISHED_STEPS[cardId]?.includes(stepId) && getStartedSteps.includes(stepId); +) => !!DEFAULT_FINISHED_STEPS[cardId]?.includes(stepId) && getStartedSteps?.includes(stepId); export const getCardTimeInMinutes = (activeSteps: Step[] | undefined, stepsDone: Set) => activeSteps?.reduce( @@ -39,7 +39,7 @@ export const getCardTimeInMinutes = (activeSteps: Step[] | undefined, stepsDone: ) ?? 0; export const getCardStepsLeft = (activeSteps: Step[] | undefined, stepsDone: Set) => - (activeSteps?.length ?? 0) - (stepsDone.size ?? 0); + Math.max((activeSteps?.length ?? 0) - (stepsDone.size ?? 0), 0); export const isStepActive = (step: Step, activeProducts: Set) => !step.productLineRequired || @@ -48,9 +48,9 @@ export const isStepActive = (step: Step, activeProducts: Set) => export const getActiveSteps = ( steps: Step[] | undefined, activeProducts: Set, - getStartedSteps: StepId[] | undefined + getStartedSteps: StepId[] ) => - steps?.filter((step) => getStartedSteps?.includes(step.id) && isStepActive(step, activeProducts)); + steps?.filter((step) => getStartedSteps.includes(step.id) && isStepActive(step, activeProducts)); const getfinishedActiveSteps = ( finishedStepIds: StepId[] | undefined, @@ -113,7 +113,7 @@ export const getStepsByActiveProduct = ({ activeProducts: Set; cardId: CardId; sectionId: SectionId; - getStartedSteps: StepId[] | undefined; + getStartedSteps: StepId[]; }) => { const card = getCard({ cardId, sectionId }); const steps = getActiveSteps(card?.steps, activeProducts, getStartedSteps); @@ -124,7 +124,7 @@ export const getStepsByActiveProduct = ({ export const setupActiveSections = ( finishedSteps: Record>, activeProducts: Set, - getStartedSteps: StepId[] | undefined + getStartedSteps: StepId[] ) => activeProducts.size > 0 ? getSections().reduce( @@ -175,7 +175,7 @@ export const updateActiveSections = ({ activeSections: ActiveSections | null; cardId: CardId; finishedSteps: Record>; - getStartedSteps: StepId[] | undefined; + getStartedSteps: StepId[]; sectionId: SectionId; }): { activeSections: ActiveSections | null; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx deleted file mode 100644 index 31e549eb6ab26..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_project_features_url.tsx +++ /dev/null @@ -1,14 +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 useObservableState from 'react-use/lib/useObservable'; -import { useKibana } from '../../../../lib/kibana'; - -export const useProjectFeaturesUrl = () => { - const { projectFeaturesUrl$ } = useKibana().services; - return useObservableState(projectFeaturesUrl$); -}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx index d4001844829ef..22f929c802f32 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx @@ -8,6 +8,7 @@ import { renderHook, act } from '@testing-library/react-hooks'; import { useTogglePanel } from './use_toggle_panel'; import { getStartedStorage } from '../storage'; +import type { StepId } from '../types'; import { QuickStartSectionCardsId, SectionId, @@ -41,6 +42,15 @@ describe('useTogglePanel', () => { { product_line: 'endpoint', product_tier: 'complete' }, ] as SecurityProductTypes; + const getStartedSteps: StepId[] = [ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, + ]; + beforeEach(() => { jest.clearAllMocks(); @@ -59,7 +69,7 @@ describe('useTogglePanel', () => { test('should initialize state with correct initial values - when no active products from local storage', () => { (getStartedStorage.getActiveProductsFromStorage as jest.Mock).mockReturnValue([]); - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { state } = result.current; @@ -119,7 +129,7 @@ describe('useTogglePanel', () => { }); test('should initialize state with correct initial values - when all products active', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { state } = result.current; @@ -184,7 +194,7 @@ describe('useTogglePanel', () => { (getStartedStorage.getActiveProductsFromStorage as jest.Mock).mockReturnValue([ ProductLine.security, ]); - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { state } = result.current; @@ -244,7 +254,7 @@ describe('useTogglePanel', () => { }); test('should reset all the card steps in storage when a step is expanded. (As it allows only one step open at a time)', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { onStepClicked } = result.current; @@ -261,7 +271,7 @@ describe('useTogglePanel', () => { }); test('should add the current step to storage when it is expanded', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { onStepClicked } = result.current; @@ -282,7 +292,7 @@ describe('useTogglePanel', () => { }); test('should remove the current step from storage when it is collapsed', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { onStepClicked } = result.current; @@ -303,7 +313,7 @@ describe('useTogglePanel', () => { }); test('should call addFinishedStepToStorage when toggleTaskCompleteStatus is executed', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { toggleTaskCompleteStatus } = result.current; @@ -323,7 +333,7 @@ describe('useTogglePanel', () => { }); test('should call removeFinishedStepToStorage when toggleTaskCompleteStatus is executed with undo equals to true', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { toggleTaskCompleteStatus } = result.current; @@ -339,12 +349,13 @@ describe('useTogglePanel', () => { expect(getStartedStorage.removeFinishedStepFromStorage).toHaveBeenCalledTimes(1); expect(getStartedStorage.removeFinishedStepFromStorage).toHaveBeenCalledWith( QuickStartSectionCardsId.watchTheOverviewVideo, - OverviewSteps.getToKnowElasticSecurity + OverviewSteps.getToKnowElasticSecurity, + getStartedSteps ); }); test('should call toggleActiveProductsInStorage when onProductSwitchChanged is executed', () => { - const { result } = renderHook(() => useTogglePanel({ productTypes })); + const { result } = renderHook(() => useTogglePanel({ productTypes, getStartedSteps })); const { onProductSwitchChanged } = result.current; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx index ef8215c472827..6a77e7700ff7d 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx @@ -70,7 +70,7 @@ export const useTogglePanel = ({ getStartedSteps, }: { productTypes?: SecurityProductTypes; - getStartedSteps: StepId[] | undefined; + getStartedSteps: StepId[]; }) => { const { navigateTo } = useNavigateTo(); @@ -158,16 +158,6 @@ export const useTogglePanel = ({ getStartedSteps: getStartedSteps ?? [], }); - useEffect(() => { - if (!getStartedSteps) { - return; - } - dispatch({ - type: GetStartedPageActions.UpdateGetStartedSteps, - payload: { getStartedSteps }, - }); - }, [getStartedSteps]); - const toggleTaskCompleteStatus: ToggleTaskCompleteStatus = useCallback( ({ stepId, cardId, sectionId, undo }) => { dispatch({ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts index 15a7d24e8e9de..41ffd2e87d6b7 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts @@ -86,7 +86,7 @@ describe('reducer', () => { const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( finishedSteps, activeProducts, - [OverviewSteps.getToKnowElasticSecurity] + getStartedSteps ); const initialState = { activeProducts: new Set([ProductLine.security]), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx index e7edaffdf8dad..fbca1fe655efa 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx @@ -11,22 +11,6 @@ import type { ExpandedCardSteps, ReducerActions } from './types'; import { type CardId, type StepId, type TogglePanelReducer, GetStartedPageActions } from './types'; export const reducer = (state: TogglePanelReducer, action: ReducerActions): TogglePanelReducer => { - if (action.type === GetStartedPageActions.UpdateGetStartedSteps) { - const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( - state.finishedSteps, - state.activeProducts, - action.payload.getStartedSteps - ); - - return { - ...state, - getStartedSteps: action.payload.getStartedSteps, - activeSections, - totalStepsLeft, - totalActiveSteps, - }; - } - if (action.type === GetStartedPageActions.ToggleProduct) { const activeProducts = new Set([...state.activeProducts]); @@ -182,5 +166,5 @@ export const getActiveSectionsInitialStates = ({ }: { activeProducts: Set; finishedSteps: Record>; - getStartedSteps: StepId[] | undefined; + getStartedSteps: StepId[]; }) => setupActiveSections(finishedSteps, activeProducts, getStartedSteps); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts index c7378773a03a7..ddc6da2aec850 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts @@ -147,7 +147,7 @@ export interface TogglePanelReducer { finishedSteps: Record>; totalActiveSteps: number | null; totalStepsLeft: number | null; - getStartedSteps: StepId[] | undefined; + getStartedSteps: StepId[]; } export interface ToggleProductAction { @@ -170,17 +170,11 @@ export interface ToggleStepAction { payload: { stepId: StepId; cardId: CardId; isStepExpanded?: boolean }; } -export interface UpdateGetStartedStepsAction { - type: GetStartedPageActions.UpdateGetStartedSteps; - payload: { getStartedSteps: StepId[] }; -} - export type ReducerActions = | ToggleProductAction | AddFinishedStepAction | RemoveFinishedStepAction - | ToggleStepAction - | UpdateGetStartedStepsAction; + | ToggleStepAction; export interface Switch { id: ProductLine; @@ -192,7 +186,6 @@ export enum GetStartedPageActions { RemoveFinishedStep = 'removeFinishedStep', ToggleProduct = 'toggleProduct', ToggleExpandedStep = 'toggleExpandedStep', - UpdateGetStartedSteps = 'updateGetStartedSteps', } export type OnStepClicked = ({ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx index 359cb39ee001b..e184c9e69fff1 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx @@ -8,13 +8,10 @@ import React from 'react'; import { render } from '@testing-library/react'; import { LandingPageComponent } from '.'; -const mockUseContractComponents = jest.fn(() => ({})); -jest.mock('../../hooks/use_contract_component', () => ({ - useContractComponents: () => mockUseContractComponents(), -})); jest.mock('../../containers/sourcerer', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }), })); +jest.mock('./get_started/get_started_with_context'); describe('LandingPageComponent', () => { beforeEach(() => { @@ -22,10 +19,8 @@ describe('LandingPageComponent', () => { }); it('renders the get started component', () => { - const GetStarted = () =>
; - mockUseContractComponents.mockReturnValue({ GetStarted }); const { queryByTestId } = render(); - expect(queryByTestId('get-started-mock')).toBeInTheDocument(); + expect(queryByTestId('get-started-with-context')).toBeInTheDocument(); }); }); From 6dfffb29f81452b63030bd3a420cb88c558c0135 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 03:01:54 +0800 Subject: [PATCH 06/22] update unit tests --- .../landing_page/get_started/badge.ts | 2 +- .../landing_page/get_started/badges.test.ts | 2 +- .../card_step/content/video.test.tsx | 1 + .../get_started/card_step/index.test.tsx | 6 +-- .../card_step/step_content.test.tsx | 2 +- .../context/__mocks__/get_started_context.tsx | 7 +++- .../get_started/get_started.test.tsx | 16 ++------ .../hooks/__mocks__/use_user_name.ts | 8 ++++ .../hooks/use_check_step_completed.test.tsx | 13 +----- .../get_started/product_switch.test.tsx | 2 +- .../get_started/product_switch.tsx | 2 +- .../landing_page/get_started/storage.test.ts | 40 ++++++++++++++----- .../get_started/toggle_panel.test.tsx | 3 +- .../product_tier_badge.test.tsx | 2 +- .../lib/local_storage/__mocks__/index.ts | 26 ++++++++++++ 15 files changed, 83 insertions(+), 49 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts create mode 100644 x-pack/plugins/security_solution/public/common/lib/local_storage/__mocks__/index.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts index 1743259fd7eaa..2cd0e0a20a7f8 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; import { PRODUCT_BADGE_ANALYTICS, PRODUCT_BADGE_CLOUD, PRODUCT_BADGE_EDR } from './translations'; import type { Badge } from './types'; import { BadgeId } from './types'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts index 95d7934a65027..6921389d67149 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts @@ -5,8 +5,8 @@ * 2.0. */ -import { ProductLine } from '../../common/product'; import { analyticsBadge, cloudBadge, edrBadge, getProductBadges } from './badge'; +import { ProductLine } from './configs'; describe('getProductBadges', () => { test('should return all badges if no productLineRequired is passed', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx index a02c89399ac99..ff891e1f1dd70 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx @@ -28,6 +28,7 @@ jest.mock('@elastic/eui', () => ({ EuiFlexItem: ({ children }: { children: React.ReactElement }) =>
{children}
, EuiIcon: () => , useEuiTheme: () => ({ euiTheme: { colors: { fullShade: '#000', emptyShade: '#fff' } } }), + EuiCodeBlock: () => , })); describe('Video Component', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx index b8c5341156210..e4e4ad875261c 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx @@ -28,11 +28,7 @@ jest.mock('./step_content', () => ({ jest.mock('../context/step_context'); jest.mock('../apis'); -jest.mock('../../common/services'); - -jest.mock('../../../../..', () => ({ - useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }), -})); +jest.mock('../../../../lib/kibana'); jest.mock('@kbn/security-solution-navigation', () => ({ useNavigateTo: jest.fn().mockReturnValue({ navigateTo: jest.fn() }), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx index cbaf99f808f4f..2d67c587dce51 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx @@ -11,7 +11,7 @@ import { QuickStartSectionCardsId, SectionId } from '../types'; import { overviewVideoSteps } from '../sections'; jest.mock('../context/step_context'); -jest.mock('../../common/services'); +jest.mock('../../../../lib/kibana'); describe('StepContent', () => { const toggleTaskCompleteStatus = jest.fn(); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx index 100e96b7ef935..a642169587e3e 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx @@ -5,7 +5,6 @@ * 2.0. */ import React from 'react'; -import { ALL_PRODUCT_LINES } from '../../configs'; import { AddIntegrationsSteps, CreateProjectSteps, @@ -20,7 +19,11 @@ export const GetStartedContextProvider = ({ children }: { children: React.ReactE ); export const useGetStartedContext = jest.fn(() => ({ - productTypes: ALL_PRODUCT_LINES, + productTypes: [ + { product_line: 'security', product_tier: 'essentials' }, + { product_line: 'endpoint', product_tier: 'complete' }, + { product_line: 'cloud', product_tier: 'complete' }, + ], projectsUrl: 'mockProjectsUrl', projectFeaturesUrl: 'mockProjectFeaturesUrl', availableSteps: [ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx index d1ff1e675f06f..acc65a9a911a1 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx @@ -7,10 +7,8 @@ import React from 'react'; import { render } from '@testing-library/react'; import { GetStartedComponent } from './get_started'; -import type { SecurityProductTypes } from '../../common/config'; - +jest.mock('./context/get_started_context'); jest.mock('./toggle_panel'); -jest.mock('../common/services'); jest.mock('@elastic/eui', () => { const original = jest.requireActual('@elastic/eui'); return { @@ -30,7 +28,7 @@ jest.mock('@elastic/eui', () => { jest.mock('react-router-dom', () => ({ useLocation: jest.fn().mockReturnValue({ hash: '#watch_the_overview_video' }), })); -jest.mock('../common/hooks/use_user_name'); +jest.mock('./hooks/use_user_name'); jest.mock('@kbn/security-solution-navigation', () => ({ useNavigateTo: jest.fn().mockReturnValue({ navigateTo: jest.fn() }), SecurityPageName: { @@ -38,15 +36,9 @@ jest.mock('@kbn/security-solution-navigation', () => ({ }, })); -const productTypes = [ - { product_line: 'security', product_tier: 'essentials' }, - { product_line: 'endpoint', product_tier: 'complete' }, - { product_line: 'cloud', product_tier: 'complete' }, -] as SecurityProductTypes; - describe('GetStartedComponent', () => { it('should render page title, subtitle, and description', () => { - const { getByText } = render(); + const { getByText } = render(); const pageTitle = getByText('Hi mocked_user_name!'); const subtitle = getByText(`Get started with Security`); @@ -60,7 +52,7 @@ describe('GetStartedComponent', () => { }); it('should render welcomeHeader and TogglePanel', () => { - const { getByTestId } = render(); + const { getByTestId } = render(); const welcomeHeader = getByTestId('welcome-header'); const togglePanel = getByTestId('toggle-panel'); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts new file mode 100644 index 0000000000000..968740c74750f --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts @@ -0,0 +1,8 @@ +/* + * 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. + */ + +export const useUserName = jest.fn().mockReturnValue('mocked_user_name'); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx index efb3cfdd4385e..cf7336a4cdce7 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx @@ -14,18 +14,7 @@ import { SectionId, } from '../types'; -jest.mock('../../common/services', () => ({ - useKibana: () => ({ - services: { - http: {}, - notifications: { - toasts: { - addError: jest.fn(), - }, - }, - }, - }), -})); +jest.mock('../../../../lib/kibana'); describe('useCheckStepCompleted', () => { it('does nothing when autoCheckIfStepCompleted is not provided', () => { diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx index 7f855c206274e..df9d8153a7702 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx @@ -9,7 +9,7 @@ import React from 'react'; import { render, fireEvent } from '@testing-library/react'; import { ProductSwitch } from './product_switch'; import type { EuiThemeComputed } from '@elastic/eui'; -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; describe('ProductSwitch', () => { const onProductSwitchChangedMock = jest.fn(); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx index 0058b2a83ce4d..8b373475ec9f7 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx @@ -8,7 +8,7 @@ import { EuiPanel, EuiSwitch, EuiText, EuiTitle, type EuiThemeComputed } from '@elastic/eui'; import { css } from '@emotion/css'; import React, { useMemo } from 'react'; -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; import * as i18n from './translations'; import type { Switch } from './types'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts index e2eb3c7398740..72cdefef2b5b8 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/storage.test.ts @@ -12,16 +12,34 @@ import { FINISHED_STEPS_STORAGE_KEY, getStartedStorage, } from './storage'; -import { CreateProjectSteps, OverviewSteps, QuickStartSectionCardsId, type StepId } from './types'; -import { storage } from '../common/lib/storage'; -import type { MockStorage } from '../common/lib/__mocks__/storage'; -import { ProductLine } from '../../common/product'; -import { defaultFinishedSteps } from './helpers'; +import { + AddIntegrationsSteps, + CreateProjectSteps, + EnablePrebuiltRulesSteps, + OverviewSteps, + QuickStartSectionCardsId, + ViewAlertsSteps, + ViewDashboardSteps, + type StepId, +} from './types'; +import { DEFAULT_FINISHED_STEPS } from './helpers'; +import type { MockStorage } from '../../../lib/local_storage/__mocks__'; +import { storage } from '../../../lib/local_storage'; +import { ProductLine } from './configs'; -jest.mock('../common/lib/storage'); +jest.mock('../../../lib/local_storage'); describe('useStorage', () => { const mockStorage = storage as unknown as MockStorage; + + const getStartedSteps = [ + CreateProjectSteps.createFirstProject, + OverviewSteps.getToKnowElasticSecurity, + AddIntegrationsSteps.connectToDataSources, + ViewDashboardSteps.analyzeData, + EnablePrebuiltRulesSteps.enablePrebuiltRules, + ViewAlertsSteps.viewAlerts, + ]; beforeEach(() => { // Clear the mocked storage object before each test mockStorage.clearMockStorageData(); @@ -73,7 +91,7 @@ describe('useStorage', () => { }); it('should return all finished steps from storage', () => { - expect(getStartedStorage.getAllFinishedStepsFromStorage()).toEqual(defaultFinishedSteps); + expect(getStartedStorage.getAllFinishedStepsFromStorage()).toEqual(DEFAULT_FINISHED_STEPS); mockStorage.set(FINISHED_STEPS_STORAGE_KEY, { [QuickStartSectionCardsId.createFirstProject]: [ @@ -157,13 +175,14 @@ describe('useStorage', () => { }); mockStorage.set(FINISHED_STEPS_STORAGE_KEY, {}); - expect(getStartedStorage.getAllFinishedStepsFromStorage()).toEqual(defaultFinishedSteps); + expect(getStartedStorage.getAllFinishedStepsFromStorage()).toEqual(DEFAULT_FINISHED_STEPS); }); it('should remove a finished step from storage', () => { getStartedStorage.removeFinishedStepFromStorage( QuickStartSectionCardsId.createFirstProject, - 'step2' as StepId + 'step2' as StepId, + getStartedSteps ); expect(mockStorage.set).toHaveBeenCalledWith(FINISHED_STEPS_STORAGE_KEY, { [QuickStartSectionCardsId.createFirstProject]: [CreateProjectSteps.createFirstProject], @@ -180,7 +199,8 @@ describe('useStorage', () => { getStartedStorage.removeFinishedStepFromStorage( QuickStartSectionCardsId.createFirstProject, - CreateProjectSteps.createFirstProject + CreateProjectSteps.createFirstProject, + getStartedSteps ); expect(mockStorage.get(FINISHED_STEPS_STORAGE_KEY)).toEqual({ [QuickStartSectionCardsId.createFirstProject]: [ diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx index a0f0b1fa88f24..8e1566a38b880 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx @@ -10,8 +10,7 @@ import { TogglePanel } from './toggle_panel'; import { useSetUpSections } from './hooks/use_setup_sections'; import type { ActiveSections } from './types'; import { QuickStartSectionCardsId, SectionId } from './types'; - -import { ProductLine } from '../../common/product'; +import { ProductLine } from './configs'; jest.mock('@elastic/eui', () => ({ ...jest.requireActual('@elastic/eui'), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx index e739d2cb95ea5..ed15685f8cf59 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { ProductTierBadge } from './product_tier_badge'; -import { ProductTier } from '../../../common/product'; +import { ProductTier } from '../configs'; describe('ProductTierBadge', () => { it('renders nothing when productTier is undefined', () => { diff --git a/x-pack/plugins/security_solution/public/common/lib/local_storage/__mocks__/index.ts b/x-pack/plugins/security_solution/public/common/lib/local_storage/__mocks__/index.ts new file mode 100644 index 0000000000000..719d9c054f67d --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/lib/local_storage/__mocks__/index.ts @@ -0,0 +1,26 @@ +/* + * 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. + */ + +export interface MockStorage { + data: Record; + clearMockStorageData: () => void; + get: (key: string) => unknown; + set: (key: string, value: unknown) => void; +} + +const mockStorage: MockStorage = { + data: {}, + clearMockStorageData: () => { + mockStorage.data = {}; + }, + get: jest.fn((key: string) => mockStorage.data[key]), + set: jest.fn((key, value) => { + mockStorage.data[key] = value; + }), +}; + +export const storage = mockStorage; From 2507291d7a3ed7abc552415e2e57db8d84a4f068 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 03:23:20 +0800 Subject: [PATCH 07/22] fix i18n --- .../get_started/footer/translations.ts | 24 +++--- .../step_links/add_integration_button.tsx | 2 +- .../step_links/add_integration_callout.tsx | 4 +- .../get_started/step_links/translations.ts | 23 +++--- .../landing_page/get_started/translations.ts | 76 +++++++++---------- 5 files changed, 63 insertions(+), 66 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts index 9a924181c43f7..06b72d360b0c1 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts @@ -8,84 +8,84 @@ import { i18n } from '@kbn/i18n'; export const FOOTER_DOCUMENTATION_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.documentation.title', + 'xpack.securitySolution.getStarted.footer.documentation.title', { defaultMessage: 'Browse documentation', } ); export const FOOTER_DOCUMENTATION_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.documentation.description', + 'xpack.securitySolution.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', + 'xpack.securitySolution.getStarted.footer.documentation.link.title', { defaultMessage: 'Start reading', } ); export const FOOTER_FORUM_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.forum.title', + 'xpack.securitySolution.getStarted.footer.forum.title', { defaultMessage: 'Explore forum', } ); export const FOOTER_FORUM_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.forum.description', + 'xpack.securitySolution.getStarted.footer.forum.description', { defaultMessage: 'Exchange thoughts about Elastic', } ); export const FOOTER_FORUM_LINK_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.forum.link.title', + 'xpack.securitySolution.getStarted.footer.forum.link.title', { defaultMessage: 'Discuss Forum', } ); export const FOOTER_DEMO_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.demo.title', + 'xpack.securitySolution.getStarted.footer.demo.title', { defaultMessage: 'View demo project', } ); export const FOOTER_DEMO_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.demo.description', + 'xpack.securitySolution.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', + 'xpack.securitySolution.getStarted.footer.demo.link.title', { defaultMessage: 'Explore demo', } ); export const FOOTER_LABS_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.labs.title', + 'xpack.securitySolution.getStarted.footer.labs.title', { defaultMessage: 'Elastic Security Labs', } ); export const FOOTER_LABS_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.labs.description', + 'xpack.securitySolution.getStarted.footer.labs.description', { defaultMessage: 'Insights from security researchers', } ); export const FOOTER_LABS_LINK_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.footer.labs.link.title', + 'xpack.securitySolution.getStarted.footer.labs.link.title', { defaultMessage: 'Learn more', } diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx index 49424831c3f66..6d5812ba8b3ef 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx @@ -16,7 +16,7 @@ enum ExternalPageName { const AddIntegrationButtonComponent: React.FC = () => ( diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx index 5c90f0042bfa4..02804a61e4f0e 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx @@ -41,7 +41,7 @@ const AddIntegrationsCalloutComponent = ({ stepName }: { stepName?: string }) => /> ), stepName: stepName ?? ( ), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts index 5be1d44b11e01..1b4c0510c9cf7 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/translations.ts @@ -8,56 +8,53 @@ import { i18n } from '@kbn/i18n'; export const MANAGE_PROJECTS = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.manageProjects', + 'xpack.securitySolution.getStarted.task.manageProjects', { defaultMessage: 'Manage projects', } ); export const ADD_ELASTIC_RULES = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.addElasticRules', + 'xpack.securitySolution.getStarted.task.addElasticRules', { defaultMessage: 'Add Elastic rules', } ); export const ADD_ELASTIC_RULES_CALLOUT_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.addElasticRules.callout.title', + 'xpack.securitySolution.getStarted.task.addElasticRules.callout.title', { defaultMessage: 'add Elastic rules', } ); export const ADD_INTEGRATIONS_STEP = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.addIntegrationsStep.title', + 'xpack.securitySolution.getStarted.task.addIntegrationsStep.title', { defaultMessage: 'Add integrations step', } ); -export const VIEW_ALERTS = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.viewAlerts', - { - defaultMessage: 'View alerts', - } -); +export const VIEW_ALERTS = i18n.translate('xpack.securitySolution.getStarted.task.viewAlerts', { + defaultMessage: 'View alerts', +}); export const VIEW_ALERTS_CALLOUT_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.viewAlerts.callout.title', + 'xpack.securitySolution.getStarted.task.viewAlerts.callout.title', { defaultMessage: 'view alerts', } ); export const GO_TO_DASHBOARDS = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.goToDashboards', + 'xpack.securitySolution.getStarted.task.goToDashboards', { defaultMessage: 'Go to dashboards', } ); export const VIEW_DASHBOARDS_CALLOUT_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.task.viewDashboards.callout.title', + 'xpack.securitySolution.getStarted.task.viewDashboards.callout.title', { defaultMessage: 'view dashboards', } diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts index 10a589f19020c..ce95a4896da44 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts @@ -8,88 +8,88 @@ import { i18n } from '@kbn/i18n'; export const GET_STARTED_PAGE_TITLE = (userName: string) => - i18n.translate('xpack.securitySolutionServerless.getStarted.Title', { + i18n.translate('xpack.securitySolution.getStarted.Title', { defaultMessage: `Hi {userName}!`, values: { userName }, }); export const GET_STARTED_PAGE_SUBTITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.subTitle', + 'xpack.securitySolution.getStarted.subTitle', { defaultMessage: `Get started with Security`, } ); export const GET_STARTED_PAGE_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.description', + 'xpack.securitySolution.getStarted.description', { defaultMessage: `This area shows you everything you need to know. Feel free to explore all content. You can always come back later at any time.`, } ); export const CURRENT_PLAN_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.currentPlan.label', + 'xpack.securitySolution.getStarted.currentPlan.label', { defaultMessage: 'Current plan:', } ); export const PROGRESS_TRACKER_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.progressTracker.progressBar.label', + 'xpack.securitySolution.getStarted.progressTracker.progressBar.label', { defaultMessage: 'PROGRESS' } ); export const SECTION_1_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.section1.title', + 'xpack.securitySolution.getStarted.togglePanel.section1.title', { defaultMessage: 'Quick start', } ); export const SECTION_2_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.section2.title', + 'xpack.securitySolution.getStarted.togglePanel.section2.title', { defaultMessage: 'Add and validate your data', } ); export const SECTION_3_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.section3.title', + 'xpack.securitySolution.getStarted.togglePanel.section3.title', { defaultMessage: 'Get started with alerts', } ); export const CREATE_PROJECT_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.createProject.title', + 'xpack.securitySolution.getStarted.step.createProject.title', { defaultMessage: 'Create your first project', } ); export const CREATE_PROJECT_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.createProject.description', + 'xpack.securitySolution.getStarted.step.createProject.description', { defaultMessage: `Create Elastic Security project with our fully-managed serverless solutions that automatically manage nodes, shards, data tiers and scaling to maintain the health and performance so you can focus on your data and goals.`, } ); export const WATCH_VIDEO_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.watchVideo.title', + 'xpack.securitySolution.getStarted.step.watchVideo.title', { defaultMessage: 'Watch the overview video', } ); export const WATCH_VIDEO_BUTTON_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.watchVideo.button.title', + 'xpack.securitySolution.getStarted.step.watchVideo.button.title', { defaultMessage: 'Elastic Security', } ); export const WATCH_VIDEO_DESCRIPTION1 = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.watchVideo.description1', + 'xpack.securitySolution.getStarted.step.watchVideo.description1', { defaultMessage: `Elastic Security unifies analytics, EDR, cloud security capabilities, and more into a SaaS solution that helps you improve your organization’s security posture, defend against a wide range of threats, and prevent breaches. `, @@ -97,21 +97,21 @@ export const WATCH_VIDEO_DESCRIPTION1 = i18n.translate( ); export const WATCH_VIDEO_DESCRIPTION2 = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.watchVideo.description2', + 'xpack.securitySolution.getStarted.step.watchVideo.description2', { defaultMessage: `To explore the platform’s core features, watch the video:`, } ); export const ADD_INTEGRATIONS_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.addIntegrations.title', + 'xpack.securitySolution.getStarted.step.addIntegrations.title', { defaultMessage: 'Add integrations', } ); export const ADD_INTEGRATIONS_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.addIntegrations.description', + 'xpack.securitySolution.getStarted.step.addIntegrations.description', { defaultMessage: 'Use third-party integrations to import data from common sources and help you gather relevant information in one place. To find integrations for your use case, search for tools and data providers on the Add integrations page.', @@ -119,21 +119,21 @@ export const ADD_INTEGRATIONS_DESCRIPTION = i18n.translate( ); export const ADD_INTEGRATIONS_IMAGE_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.addIntegrations.image.title', + 'xpack.securitySolution.getStarted.step.addIntegrations.image.title', { defaultMessage: 'Connect to existing data sources', } ); export const VIEW_DASHBOARDS = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.viewDashboards.title', + 'xpack.securitySolution.getStarted.step.viewDashboards.title', { defaultMessage: 'View and analyze your data using dashboards', } ); export const VIEW_DASHBOARDS_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.viewDashboards.description', + 'xpack.securitySolution.getStarted.step.viewDashboards.description', { defaultMessage: 'Use dashboards to visualize data and stay up-to-date with key information. Create your own, or use Elastic’s default dashboards — including alerts, user authentication events, known vulnerabilities, and more.', @@ -141,21 +141,21 @@ export const VIEW_DASHBOARDS_DESCRIPTION = i18n.translate( ); export const VIEW_DASHBOARDS_IMAGE_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.viewDashboards.image.title', + 'xpack.securitySolution.getStarted.step.viewDashboards.image.title', { defaultMessage: 'Analyze data using dashboards', } ); export const ENABLE_RULES = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.enableRules.title', + 'xpack.securitySolution.getStarted.step.enableRules.title', { defaultMessage: 'Enable prebuilt rules', } ); export const ENABLE_RULES_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.enableRules.description', + 'xpack.securitySolution.getStarted.step.enableRules.description', { defaultMessage: 'Elastic Security comes with prebuilt detection rules that run in the background and create alerts when their conditions are met.', @@ -163,14 +163,14 @@ export const ENABLE_RULES_DESCRIPTION = i18n.translate( ); export const VIEW_ALERTS_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.viewAlerts.title', + 'xpack.securitySolution.getStarted.step.viewAlerts.title', { defaultMessage: 'View alerts', } ); export const VIEW_ALERTS_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.step.viewAlerts.description', + 'xpack.securitySolution.getStarted.step.viewAlerts.description', { defaultMessage: 'Visualize, sort, filter, and investigate alerts from across your infrastructure. Examine individual alerts of interest, and discover general patterns in alert volume and severity.', @@ -178,42 +178,42 @@ export const VIEW_ALERTS_DESCRIPTION = i18n.translate( ); export const PRODUCT_BADGE_ANALYTICS = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.analytics', + 'xpack.securitySolution.getStarted.togglePanel.productBadge.analytics', { defaultMessage: 'Analytics', } ); export const PRODUCT_BADGE_CLOUD = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.cloud', + 'xpack.securitySolution.getStarted.togglePanel.productBadge.cloud', { defaultMessage: 'Cloud', } ); export const PRODUCT_BADGE_EDR = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.edr', + 'xpack.securitySolution.getStarted.togglePanel.productBadge.edr', { defaultMessage: 'EDR', } ); export const TOGGLE_PANEL_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStartedProductLabel.title', + 'xpack.securitySolution.getStartedProductLabel.title', { defaultMessage: `Curate your Get Started experience:`, } ); export const ANALYTICS_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.switch.analytics.label', + 'xpack.securitySolution.getStarted.togglePanel.switch.analytics.label', { defaultMessage: 'Analytics', } ); export const CLOUD_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.switch.cloud.label', + 'xpack.securitySolution.getStarted.togglePanel.switch.cloud.label', { defaultMessage: 'Cloud Security', @@ -221,56 +221,56 @@ export const CLOUD_SWITCH_LABEL = i18n.translate( ); export const ENDPOINT_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.switch.endpoint.label', + 'xpack.securitySolution.getStarted.togglePanel.switch.endpoint.label', { defaultMessage: 'Endpoint Security', } ); export const MARK_AS_DONE_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.markAsDoneTitle', + 'xpack.securitySolution.getStarted.togglePanel.markAsDoneTitle', { defaultMessage: 'Mark as done', } ); export const UNDO_MARK_AS_DONE_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.undoMarkAsDoneTitle', + 'xpack.securitySolution.getStarted.togglePanel.undoMarkAsDoneTitle', { defaultMessage: `Undo 'mark as done'`, } ); export const TOGGLE_PANEL_EMPTY_TITLE = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.empty.title', + 'xpack.securitySolution.getStarted.togglePanel.empty.title', { defaultMessage: `Hmm, there doesn't seem to be anything there`, } ); export const TOGGLE_PANEL_EMPTY_DESCRIPTION = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.empty.description', + 'xpack.securitySolution.getStarted.togglePanel.empty.description', { defaultMessage: `Switch on a toggle to continue your curated "Get Started" experience`, } ); export const ALL_DONE_TEXT = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.done.title', + 'xpack.securitySolution.getStarted.togglePanel.done.title', { defaultMessage: 'Step complete', } ); export const COLLAPSE_STEP_BUTTON_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.collapseStepButton.label', + 'xpack.securitySolution.getStarted.togglePanel.collapseStepButton.label', { defaultMessage: 'Collapse', } ); export const EXPAND_STEP_BUTTON_LABEL = i18n.translate( - 'xpack.securitySolutionServerless.getStarted.togglePanel.expandStepButton.label', + 'xpack.securitySolution.getStarted.togglePanel.expandStepButton.label', { defaultMessage: 'Expand', } From 45673812178a9ae5f6ff83e977fab364ced2f424 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 17:11:22 +0800 Subject: [PATCH 08/22] i18n --- .../plugins/translations/translations/fr-FR.json | 16 ---------------- .../plugins/translations/translations/ja-JP.json | 16 ---------------- .../plugins/translations/translations/zh-CN.json | 16 ---------------- 3 files changed, 48 deletions(-) diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 6a1c64ae4f8ab..aad7ec43a693c 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -36516,22 +36516,6 @@ "xpack.securitySolutionServerless.endpointPolicyProtections.badgeText": "Endpoint Essentials", "xpack.securitySolutionServerless.endpointPolicyProtections.cardMessage": "Pour activer les politiques de protection, par exemple contre les malwares, les ransomwares et autres, vous devez au moins ajouter Endpoint Essentials à votre projet. ", "xpack.securitySolutionServerless.endpointPolicyProtections.cardTitle": "Politiques de protection", - "xpack.securitySolutionServerless.getStarted.description": "Configurez votre espace de travail Elastic Security. Utilisez les bascules ci-dessous pour organiser une liste de tâches qui correspond le mieux à votre environnement", - "xpack.securitySolutionServerless.getStarted.subTitle": "Entrons dans le vif du sujet", - "xpack.securitySolutionServerless.getStarted.togglePanel.configure.step3.description2.button": "Ajouter des intégrations", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.description": "Activez une bascule pour poursuivre votre expérience \"Démarrer\" organisée", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.title": "Hmm, on dirait qu’il n’y a rien ici", - "xpack.securitySolutionServerless.getStarted.togglePanel.markAsDoneTitle": "Marquer comme terminé", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.analytics": "Analyse", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.cloud": "Cloud", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.edr": "EDR", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.analytics.label": "Analyse", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.cloud.label": "Sécurité du cloud", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.endpoint.label": "Endpoint Security", - "xpack.securitySolutionServerless.getStarted.togglePanel.undoMarkAsDoneTitle": "Annuler \"Marquer comme terminé\"", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.complete": "Terminé", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.essential": "Essentiel", - "xpack.securitySolutionServerless.getStartedProductLabel.title": "Élaborez votre expérience Démarrer :", "xpack.securitySolutionServerless.nav.projectSettings.title": "Paramètres de projet", "xpack.securitySolutionServerless.nav.solution.title": "Sécurité", "xpack.securitySolutionServerless.navCategories.ml.aiopsLabs.title": "Ateliers AIOps", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index be447f43db5c8..f8122defaebfc 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -36515,22 +36515,6 @@ "xpack.securitySolutionServerless.endpointPolicyProtections.badgeText": "Endpoint Essentials", "xpack.securitySolutionServerless.endpointPolicyProtections.cardMessage": "マルウェアやランサムウェアなどのポリシー保護を有効にするには、少なくともEndpoint Essentialsをプロジェクトに追加する必要があります。", "xpack.securitySolutionServerless.endpointPolicyProtections.cardTitle": "ポリシー保護", - "xpack.securitySolutionServerless.getStarted.description": "Elasticセキュリティワークスペースを設定します。 以下のトグルを使って、環境に最適なタスクリストを作成してください", - "xpack.securitySolutionServerless.getStarted.subTitle": "始めましょう", - "xpack.securitySolutionServerless.getStarted.togglePanel.configure.step3.description2.button": "統合の追加", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.description": "トグルをオンにすると、キュレーションされた「基本操作」エクスペリエンスを続行できます", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.title": "何もないようです", - "xpack.securitySolutionServerless.getStarted.togglePanel.markAsDoneTitle": "完了に設定", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.analytics": "分析", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.cloud": "クラウド", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.edr": "EDR", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.analytics.label": "分析", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.cloud.label": "クラウドセキュリティ", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.endpoint.label": "Endpoint Security", - "xpack.securitySolutionServerless.getStarted.togglePanel.undoMarkAsDoneTitle": "［完了に設定］を元に戻す", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.complete": "完了", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.essential": "基本", - "xpack.securitySolutionServerless.getStartedProductLabel.title": "基本操作エクスペリエンスをキュレーション：", "xpack.securitySolutionServerless.nav.projectSettings.title": "プロジェクト設定", "xpack.securitySolutionServerless.nav.solution.title": "セキュリティ", "xpack.securitySolutionServerless.navCategories.ml.aiopsLabs.title": "Aiops labs", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 0a23b53e0215d..532f8895517c6 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -36497,22 +36497,6 @@ "xpack.securitySolutionServerless.endpointPolicyProtections.badgeText": "Endpoint Essentials", "xpack.securitySolutionServerless.endpointPolicyProtections.cardMessage": "要打开策略防护，如恶意软件、勒索软件和其他防护，必须至少在项目中添加 Endpoint Essentials。", "xpack.securitySolutionServerless.endpointPolicyProtections.cardTitle": "策略防护", - "xpack.securitySolutionServerless.getStarted.description": "设置 Elastic Security 工作区。 使用下面的切换按钮策展最适合您环境的任务列表", - "xpack.securitySolutionServerless.getStarted.subTitle": "开始使用", - "xpack.securitySolutionServerless.getStarted.togglePanel.configure.step3.description2.button": "添加集成", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.description": "打开切换按钮，继续您策展的“开始使用”体验", - "xpack.securitySolutionServerless.getStarted.togglePanel.empty.title": "嗯，那里似乎没有任何内容", - "xpack.securitySolutionServerless.getStarted.togglePanel.markAsDoneTitle": "标记为已完成", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.analytics": "分析", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.cloud": "云", - "xpack.securitySolutionServerless.getStarted.togglePanel.productBadge.edr": "EDR", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.analytics.label": "分析", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.cloud.label": "云安全", - "xpack.securitySolutionServerless.getStarted.togglePanel.switch.endpoint.label": "Endpoint Security", - "xpack.securitySolutionServerless.getStarted.togglePanel.undoMarkAsDoneTitle": "撤消“标记为已完成”", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.complete": "已完成", - "xpack.securitySolutionServerless.getStarted.welcomePanel.productTier.essential": "基本", - "xpack.securitySolutionServerless.getStartedProductLabel.title": "策展您的开始使用体验：", "xpack.securitySolutionServerless.nav.projectSettings.title": "项目设置", "xpack.securitySolutionServerless.nav.solution.title": "安全", "xpack.securitySolutionServerless.navCategories.ml.aiopsLabs.title": "Aiops 实验室", From 3694b8a417f163e6f9fea5cb05c1a3d2a9488def Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 17:41:41 +0800 Subject: [PATCH 09/22] types --- .../step_links/manage_projects_button.tsx | 6 ++--- .../plugins/security_solution/public/mocks.ts | 4 +++ .../public/plugin_contract.ts | 26 ------------------- .../plugins/security_solution/public/types.ts | 10 ------- 4 files changed, 6 insertions(+), 40 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx index d5c042f343b52..00875c995b83b 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx @@ -7,13 +7,11 @@ import React from 'react'; import { EuiIcon, EuiButton } from '@elastic/eui'; -import { useObservable } from 'react-use'; import { MANAGE_PROJECTS } from './translations'; -import { useKibana } from '../../../../lib/kibana'; +import { useGetStartedContext } from '../context/get_started_context'; const ManageProjectsButtonComponent = () => { - const { projectsUrl$ } = useKibana().services; - const projectsUrl = useObservable(projectsUrl$); + const { projectsUrl } = useGetStartedContext(); return projectsUrl ? ( of({})), upselling, + getStartedPageSettings: jest.fn(), }; const setupMock = (): PluginSetup => ({ @@ -35,6 +38,7 @@ const startMock = (): PluginStart => ({ ), setExtraRoutes: jest.fn(), getUpselling: () => upselling, + setGetStartedPageSettings: getStartedPageService, }); export const securitySolutionMock = { diff --git a/x-pack/plugins/security_solution/public/plugin_contract.ts b/x-pack/plugins/security_solution/public/plugin_contract.ts index d6e1c8e965d98..1d4c62c766484 100644 --- a/x-pack/plugins/security_solution/public/plugin_contract.ts +++ b/x-pack/plugins/security_solution/public/plugin_contract.ts @@ -15,8 +15,6 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import { navLinks$ } from './common/links/nav_links'; import { breadcrumbsNav$ } from './common/breadcrumbs'; import { ContractComponentsService } from './contract_components'; -import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; -import type { StepId } from './common/components/landing_page/get_started/types'; import { GetStartedPageService } from './contract_get_started_page'; export class PluginContract { @@ -26,17 +24,9 @@ export class PluginContract { public extraRoutes$: BehaviorSubject; public appLinksSwitcher: AppLinksSwitcher; public deepLinksFormatter?: DeepLinksFormatter; - public productTypes$: BehaviorSubject; - public projectsUrl$: BehaviorSubject; - public projectFeaturesUrl$: BehaviorSubject; - public availableSteps$: BehaviorSubject; constructor(private readonly experimentalFeatures: ExperimentalFeatures) { this.extraRoutes$ = new BehaviorSubject([]); - this.productTypes$ = new BehaviorSubject(undefined); - this.projectsUrl$ = new BehaviorSubject(undefined); - this.projectFeaturesUrl$ = new BehaviorSubject(undefined); - this.availableSteps$ = new BehaviorSubject([]); this.getStartedPageService = new GetStartedPageService(); this.componentsService = new ContractComponentsService(); this.upsellingService = new UpsellingService(); @@ -46,10 +36,6 @@ export class PluginContract { public getStartServices(): ContractStartServices { return { extraRoutes$: this.extraRoutes$.asObservable(), - productTypes$: this.productTypes$.asObservable(), - projectsUrl$: this.projectsUrl$.asObservable(), - projectFeaturesUrl$: this.projectFeaturesUrl$.asObservable(), - availableSteps$: this.availableSteps$.asObservable(), getComponents$: this.componentsService.getComponents$.bind(this.componentsService), upselling: this.upsellingService, getStartedPageSettings: this.getStartedPageService.getSettings.bind( @@ -73,18 +59,6 @@ export class PluginContract { public getStartContract(): PluginStart { return { - setProductTypes: (productTypes) => { - this.productTypes$.next(productTypes); - }, - setProjectFeaturesUrl: (projectFeaturesUrl) => { - this.projectFeaturesUrl$.next(projectFeaturesUrl); - }, - setProjectsUrl: (projectsUrl) => { - this.projectsUrl$.next(projectsUrl); - }, - setAvailableSteps: (availableSteps) => { - this.availableSteps$.next(availableSteps); - }, setGetStartedPageSettings: this.getStartedPageService, getNavLinks$: () => navLinks$, setExtraRoutes: (extraRoutes) => this.extraRoutes$.next(extraRoutes), diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index 6bc6fe23afe79..ff8d0ac3c3c14 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -83,8 +83,6 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import type { DeepLinksFormatter } from './common/links/deep_links'; import type { SetComponents, GetComponents$ } from './contract_components'; import type { ConfigSettings } from '../common/config_settings'; -import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; -import type { StepId } from './common/components/landing_page/get_started/types'; import type { GetStartedPageService } from './contract_get_started_page'; export interface SetupPlugins { @@ -150,10 +148,6 @@ export interface StartPluginsDependencies extends StartPlugins { export interface ContractStartServices { extraRoutes$: Observable; - productTypes$: Observable; - projectFeaturesUrl$?: Observable; - projectsUrl$?: Observable; - availableSteps$: Observable; getComponents$: GetComponents$; upselling: UpsellingService; getStartedPageSettings: GetStartedPageService['getSettings']; @@ -193,10 +187,6 @@ export interface PluginSetup { export interface PluginStart { getNavLinks$: () => Observable; setExtraRoutes: (extraRoutes: RouteProps[]) => void; - setAvailableSteps: (availableSteps: StepId[]) => void; - setProductTypes: (productTypes: SecurityProductTypes) => void; - setProjectFeaturesUrl: (projectFeaturesUrl: string | undefined) => void; - setProjectsUrl: (projectsUrl: string | undefined) => void; setComponents: SetComponents; getBreadcrumbsNav$: () => Observable; getUpselling: () => UpsellingService; From e81f9634b96f2ed5a8c55c7f4a0c2d7de02182b8 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 18:06:23 +0800 Subject: [PATCH 10/22] lazy load --- .../public/common/components/landing_page/index.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx index ae6d681ffbbac..4476b2e90a7b5 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx @@ -5,13 +5,14 @@ * 2.0. */ -import React, { memo } from 'react'; +import React, { memo, useMemo } from 'react'; import { useSourcererDataView } from '../../containers/sourcerer'; -import { GetStartedWithContext } from './get_started/get_started_with_context'; +import { getSecurityGetStartedComponent } from './get_started'; export const LandingPageComponent = memo(() => { const { indicesExist } = useSourcererDataView(); - return ; + const GetStarted = useMemo(() => getSecurityGetStartedComponent(), []); + return ; }); LandingPageComponent.displayName = 'LandingPageComponent'; From ae6df18b9a2e63a848e30bafb245c3d3dcca3015 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Wed, 17 Jan 2024 19:42:55 +0800 Subject: [PATCH 11/22] unit tests --- .../landing_page/get_started/__mocks__/index.tsx | 11 +++++++++++ .../common/components/landing_page/index.test.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx new file mode 100644 index 0000000000000..221ba1f2f5a43 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx @@ -0,0 +1,11 @@ +/* + * 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'; + +export const getSecurityGetStartedComponent = jest + .fn() + .mockReturnValue(() =>
); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx index e184c9e69fff1..b52de525ec846 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx @@ -11,7 +11,7 @@ import { LandingPageComponent } from '.'; jest.mock('../../containers/sourcerer', () => ({ useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }), })); -jest.mock('./get_started/get_started_with_context'); +jest.mock('./get_started'); describe('LandingPageComponent', () => { beforeEach(() => { From 57af4f32caddcb113f89e68e1513ad76331d307f Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Thu, 18 Jan 2024 20:57:28 +0800 Subject: [PATCH 12/22] mv onboarding page service --- .../components/onboarding/onboarding_page_service.ts} | 6 +++--- x-pack/plugins/security_solution/public/mocks.ts | 4 ++-- x-pack/plugins/security_solution/public/plugin_contract.ts | 6 +++--- x-pack/plugins/security_solution/public/types.ts | 6 +++--- 4 files changed, 11 insertions(+), 11 deletions(-) rename x-pack/plugins/security_solution/public/{contract_get_started_page.ts => app/components/onboarding/onboarding_page_service.ts} (90%) diff --git a/x-pack/plugins/security_solution/public/contract_get_started_page.ts b/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts similarity index 90% rename from x-pack/plugins/security_solution/public/contract_get_started_page.ts rename to x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts index d5297bab834b5..af0089047e6df 100644 --- a/x-pack/plugins/security_solution/public/contract_get_started_page.ts +++ b/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts @@ -7,10 +7,10 @@ import type { Observable } from 'rxjs'; import { BehaviorSubject } from 'rxjs'; -import type { SecurityProductTypes } from './common/components/landing_page/get_started/configs'; -import type { StepId } from './common/components/landing_page/get_started/types'; +import type { SecurityProductTypes } from '../../../common/components/landing_page/get_started/configs'; +import type { StepId } from '../../../common/components/landing_page/get_started/types'; -export class GetStartedPageService { +export class OnboardingPageService { private productTypesSubject$: BehaviorSubject; private projectsUrlSubject$: BehaviorSubject; private projectFeaturesUrlSubject$: BehaviorSubject; diff --git a/x-pack/plugins/security_solution/public/mocks.ts b/x-pack/plugins/security_solution/public/mocks.ts index e23b1244a80b9..5530764894561 100644 --- a/x-pack/plugins/security_solution/public/mocks.ts +++ b/x-pack/plugins/security_solution/public/mocks.ts @@ -11,10 +11,10 @@ import type { BreadcrumbsNav } from './common/breadcrumbs'; import type { NavigationLink } from './common/links/types'; import { allowedExperimentalValues } from '../common/experimental_features'; import type { PluginStart, PluginSetup, ContractStartServices } from './types'; -import { GetStartedPageService } from './contract_get_started_page'; +import { OnboardingPageService } from './app/components/onboarding/onboarding_page_service'; const upselling = new UpsellingService(); -const getStartedPageService = new GetStartedPageService(); +const getStartedPageService = new OnboardingPageService(); export const contractStartServicesMock: ContractStartServices = { extraRoutes$: of([]), diff --git a/x-pack/plugins/security_solution/public/plugin_contract.ts b/x-pack/plugins/security_solution/public/plugin_contract.ts index 1d4c62c766484..7fca16c9c6f90 100644 --- a/x-pack/plugins/security_solution/public/plugin_contract.ts +++ b/x-pack/plugins/security_solution/public/plugin_contract.ts @@ -15,19 +15,19 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import { navLinks$ } from './common/links/nav_links'; import { breadcrumbsNav$ } from './common/breadcrumbs'; import { ContractComponentsService } from './contract_components'; -import { GetStartedPageService } from './contract_get_started_page'; +import { OnboardingPageService } from './app/components/onboarding/onboarding_page_service'; export class PluginContract { public componentsService: ContractComponentsService; public upsellingService: UpsellingService; - public getStartedPageService: GetStartedPageService; + public getStartedPageService: OnboardingPageService; public extraRoutes$: BehaviorSubject; public appLinksSwitcher: AppLinksSwitcher; public deepLinksFormatter?: DeepLinksFormatter; constructor(private readonly experimentalFeatures: ExperimentalFeatures) { this.extraRoutes$ = new BehaviorSubject([]); - this.getStartedPageService = new GetStartedPageService(); + this.getStartedPageService = new OnboardingPageService(); this.componentsService = new ContractComponentsService(); this.upsellingService = new UpsellingService(); this.appLinksSwitcher = (appLinks) => appLinks; diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index ff8d0ac3c3c14..1975880a44787 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -83,7 +83,7 @@ import type { ExperimentalFeatures } from '../common/experimental_features'; import type { DeepLinksFormatter } from './common/links/deep_links'; import type { SetComponents, GetComponents$ } from './contract_components'; import type { ConfigSettings } from '../common/config_settings'; -import type { GetStartedPageService } from './contract_get_started_page'; +import type { OnboardingPageService } from './app/components/onboarding/onboarding_page_service'; export interface SetupPlugins { cloud?: CloudSetup; @@ -150,7 +150,7 @@ export interface ContractStartServices { extraRoutes$: Observable; getComponents$: GetComponents$; upselling: UpsellingService; - getStartedPageSettings: GetStartedPageService['getSettings']; + getStartedPageSettings: OnboardingPageService['getSettings']; } export type StartServices = CoreStart & @@ -190,7 +190,7 @@ export interface PluginStart { setComponents: SetComponents; getBreadcrumbsNav$: () => Observable; getUpselling: () => UpsellingService; - setGetStartedPageSettings: GetStartedPageService; + setGetStartedPageSettings: OnboardingPageService; } export interface AppObservableLibs { From 283cb77c7cbcad615cc50383256d025c5db19230 Mon Sep 17 00:00:00 2001 From: Angela Chuang Date: Fri, 19 Jan 2024 06:08:33 +0800 Subject: [PATCH 13/22] rename to onboarding --- .../onboarding/onboarding_page_service.ts | 25 +-- .../landing_page/get_started/configs.ts | 45 ----- .../context/get_started_context.tsx | 42 ---- .../get_started/get_started_with_context.tsx | 28 --- .../get_started/hooks/use_user_name.ts | 27 --- .../landing_page/get_started/lazy.tsx | 19 -- .../common/components/landing_page/index.tsx | 6 +- .../__mocks__/get_started_with_context.tsx | 2 +- .../__mocks__/index.tsx | 2 +- .../__mocks__/product_switch.tsx | 0 .../__mocks__/storage.ts | 2 +- .../__mocks__/toggle_panel.tsx | 0 .../{get_started => onboarding}/apis/index.ts | 0 .../{get_started => onboarding}/badge.ts | 0 .../badges.test.ts | 0 .../card_item.test.tsx | 0 .../{get_started => onboarding}/card_item.tsx | 0 .../card_step/__mocks__/index.tsx | 0 .../content/__mocks__/content_wrapper.tsx | 0 .../content/add_integration_image.tsx | 0 .../card_step/content/content_wrapper.tsx | 0 .../content/create_project_step_image.tsx | 0 .../card_step/content/enable_rule_image.tsx | 0 .../content/overview_video_description.tsx | 0 .../card_step/content/video.test.tsx | 0 .../card_step/content/video.tsx | 0 .../card_step/content/view_alerts_image.tsx | 0 .../content/view_dashboard_image.tsx | 0 .../card_step/helpers.test.ts | 0 .../card_step/helpers.ts | 0 .../card_step/index.test.tsx | 0 .../card_step/index.tsx | 0 .../card_step/step_content.test.tsx | 0 .../card_step/step_content.tsx | 0 .../landing_page/onboarding/configs.ts | 91 +++++++++ .../context/__mocks__/step_context.tsx | 0 .../context/step_context.tsx | 0 .../footer/footer.ts | 0 .../footer/index.tsx | 0 .../footer/translations.ts | 24 +-- .../helpers.test.ts | 0 .../{get_started => onboarding}/helpers.ts | 24 +-- .../hooks/__mocks__/use_user_name.ts | 0 .../onboarding/hooks/use_available_steps.ts | 13 ++ .../hooks/use_check_step_completed.test.tsx | 0 .../hooks/use_check_step_completed.tsx | 0 .../onboarding/hooks/use_product_types.ts | 14 ++ .../hooks/use_project_features_url.ts | 14 ++ .../onboarding/hooks/use_projects_url.ts | 14 ++ .../hooks/use_scroll.ts | 0 .../hooks/use_setup_sections.test.tsx | 0 .../hooks/use_setup_sections.tsx | 0 .../hooks/use_toggle_panel.test.tsx | 0 .../hooks/use_toggle_panel.tsx | 39 ++-- .../images/analyze_data_using_dashboards.png | Bin .../images/connect_to_existing_sources.png | Bin .../images/create_projects.png | Bin .../images/demo.png | Bin .../images/documentation.png | Bin .../images/enable_prebuilt_rules.png | Bin .../images/forum.png | Bin .../images/labs.png | Bin .../images/launch.png | Bin .../images/overview_video.svg | 0 .../images/view_alerts.png | Bin .../{get_started => onboarding}/index.tsx | 8 +- .../landing_page/onboarding}/lazy.tsx | 6 +- .../onboarding.test.tsx} | 8 +- .../onboarding.tsx} | 19 +- .../onboarding/onboarding_with_settings.tsx | 33 ++++ .../product_switch.test.tsx | 0 .../product_switch.tsx | 0 .../progress_bar.tsx | 0 .../reducer.test.ts | 0 .../{get_started => onboarding}/reducer.tsx | 22 +-- .../{get_started => onboarding}/sections.tsx | 0 .../step_links/add_elastic_rules_button.tsx | 0 .../step_links/add_integration_button.tsx | 2 +- .../step_links/add_integration_callout.tsx | 4 +- .../step_links/alerts_link.tsx | 0 .../step_links/dashboard_button.tsx | 0 .../step_links/manage_projects_button.tsx | 4 +- .../step_links/translations.ts | 16 +- .../step_links/types.ts | 0 .../storage.test.ts | 0 .../{get_started => onboarding}/storage.ts | 18 +- .../styles/add_integrations_callout.styles.ts | 0 .../styles/card_item.styles.ts | 0 .../styles/card_step.styles.ts | 0 .../styles/footer.styles.ts | 0 .../styles/progress_bar.style.ts | 0 .../styles/step_content.styles.ts | 0 .../styles/welcome_header.styles.ts | 0 .../toggle_panel.test.tsx | 0 .../toggle_panel.tsx | 0 .../translations.ts | 76 ++++---- .../{get_started => onboarding}/types.ts | 12 +- .../welcome_header/index.tsx | 13 +- .../product_tier_badge.test.tsx | 0 .../welcome_header/product_tier_badge.tsx | 0 .../welcome_header/translations.ts | 4 +- .../plugins/security_solution/public/index.ts | 2 +- .../plugins/security_solution/public/mocks.ts | 2 +- .../public/plugin_contract.ts | 10 +- .../plugins/security_solution/public/types.ts | 4 +- .../public/get_started/images/cloud1.svg | 85 -------- .../public/get_started/images/endpoint1.svg | 20 -- .../public/get_started/images/siem1.svg | 20 -- .../public/get_started/index.tsx | 13 -- .../public/get_started/landing_cards.test.tsx | 47 ----- .../public/get_started/landing_cards.tsx | 181 ------------------ .../public/get_started/translations.tsx | 88 --------- .../public/onboarding/index.ts | 8 + .../public/onboarding/onboarding.ts | 27 +++ .../security_solution_ess/public/plugin.ts | 16 +- .../public/onboarding/index.ts | 8 + .../public/onboarding/onboarding.ts} | 24 +-- .../public/plugin.ts | 27 +-- .../translations/translations/fr-FR.json | 12 -- .../translations/translations/ja-JP.json | 12 -- .../translations/translations/zh-CN.json | 12 -- 121 files changed, 422 insertions(+), 872 deletions(-) delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/__mocks__/get_started_with_context.tsx (82%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/__mocks__/index.tsx (87%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/__mocks__/product_switch.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/__mocks__/storage.ts (95%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/__mocks__/toggle_panel.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/apis/index.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/badge.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/badges.test.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_item.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_item.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/__mocks__/index.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/__mocks__/content_wrapper.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/add_integration_image.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/content_wrapper.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/create_project_step_image.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/enable_rule_image.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/overview_video_description.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/video.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/video.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/view_alerts_image.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/content/view_dashboard_image.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/helpers.test.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/helpers.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/index.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/index.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/step_content.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/card_step/step_content.tsx (100%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/configs.ts rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/context/__mocks__/step_context.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/context/step_context.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/footer/footer.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/footer/index.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/footer/translations.ts (69%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/helpers.test.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/helpers.ts (93%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/__mocks__/use_user_name.ts (100%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_available_steps.ts rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_check_step_completed.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_check_step_completed.tsx (100%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_product_types.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_project_features_url.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_projects_url.ts rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_scroll.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_setup_sections.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_setup_sections.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_toggle_panel.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/hooks/use_toggle_panel.tsx (88%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/analyze_data_using_dashboards.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/connect_to_existing_sources.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/create_projects.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/demo.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/documentation.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/enable_prebuilt_rules.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/forum.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/labs.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/launch.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/overview_video.svg (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/images/view_alerts.png (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/index.tsx (54%) rename x-pack/plugins/{security_solution_ess/public/get_started => security_solution/public/common/components/landing_page/onboarding}/lazy.tsx (72%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started/get_started.test.tsx => onboarding/onboarding.test.tsx} (89%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started/get_started.tsx => onboarding/onboarding.tsx} (88%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.tsx rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/product_switch.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/product_switch.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/progress_bar.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/reducer.test.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/reducer.tsx (88%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/sections.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/add_elastic_rules_button.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/add_integration_button.tsx (92%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/add_integration_callout.tsx (95%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/alerts_link.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/dashboard_button.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/manage_projects_button.tsx (86%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/translations.ts (71%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/step_links/types.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/storage.test.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/storage.ts (91%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/add_integrations_callout.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/card_item.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/card_step.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/footer.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/progress_bar.style.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/step_content.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/styles/welcome_header.styles.ts (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/toggle_panel.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/toggle_panel.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/translations.ts (71%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/types.ts (95%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/welcome_header/index.tsx (90%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/welcome_header/product_tier_badge.test.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/welcome_header/product_tier_badge.tsx (100%) rename x-pack/plugins/security_solution/public/common/components/landing_page/{get_started => onboarding}/welcome_header/translations.ts (79%) delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/images/cloud1.svg delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/images/endpoint1.svg delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/images/siem1.svg delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/index.tsx delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/landing_cards.test.tsx delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/landing_cards.tsx delete mode 100644 x-pack/plugins/security_solution_ess/public/get_started/translations.tsx create mode 100644 x-pack/plugins/security_solution_ess/public/onboarding/index.ts create mode 100644 x-pack/plugins/security_solution_ess/public/onboarding/onboarding.ts create mode 100644 x-pack/plugins/security_solution_serverless/public/onboarding/index.ts rename x-pack/plugins/{security_solution/public/common/components/landing_page/get_started/context/__mocks__/get_started_context.tsx => security_solution_serverless/public/onboarding/onboarding.ts} (54%) diff --git a/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts b/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts index af0089047e6df..13b1a66a566f2 100644 --- a/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts +++ b/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts @@ -7,8 +7,8 @@ import type { Observable } from 'rxjs'; import { BehaviorSubject } from 'rxjs'; -import type { SecurityProductTypes } from '../../../common/components/landing_page/get_started/configs'; -import type { StepId } from '../../../common/components/landing_page/get_started/types'; +import type { SecurityProductTypes } from '../../../common/components/landing_page/onboarding/configs'; +import type { StepId } from '../../../common/components/landing_page/onboarding/types'; export class OnboardingPageService { private productTypesSubject$: BehaviorSubject; @@ -33,17 +33,20 @@ export class OnboardingPageService { this.availableSteps$ = this.availableStepsSubject$.asObservable(); } - getSettings() { - return { - productTypes: this.productTypesSubject$.getValue(), - projectsUrl: this.projectsUrlSubject$.getValue(), - projectFeaturesUrl: this.projectFeaturesUrlSubject$.getValue(), - availableSteps: this.availableStepsSubject$.getValue(), - }; + getProductTypesObservable() { + return this.productTypesSubject$.asObservable(); } - getProductTypes() { - return this.productTypesSubject$.getValue(); + getProjectsUrlObservable() { + return this.projectsUrl$; + } + + getProjectFeaturesUrlObservable() { + return this.projectFeaturesUrl$; + } + + getAvailableStepsObservable() { + return this.availableStepsSubject$.asObservable(); } setProductTypes(productTypes: SecurityProductTypes) { diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts deleted file mode 100644 index 3e696e3b1f986..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/configs.ts +++ /dev/null @@ -1,45 +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 { schema, type TypeOf } from '@kbn/config-schema'; - -export enum ProductLine { - security = 'security', - endpoint = 'endpoint', - cloud = 'cloud', -} - -export enum ProductTier { - essentials = 'essentials', - complete = 'complete', -} - -export const productLineSchema = schema.oneOf([ - schema.literal(ProductLine.security), - schema.literal(ProductLine.endpoint), - schema.literal(ProductLine.cloud), -]); - -export type SecurityProductLine = TypeOf; - -export const productTierSchema = schema.oneOf([ - schema.literal(ProductTier.essentials), - schema.literal(ProductTier.complete), -]); -export type SecurityProductTier = TypeOf; - -export const productTypeSchema = schema.object({ - product_line: productLineSchema, - product_tier: productTierSchema, -}); -export type SecurityProductType = TypeOf; - -export const productTypesSchema = schema.arrayOf(productTypeSchema, { - defaultValue: [], -}); -export type SecurityProductTypes = TypeOf; - -export const ALL_PRODUCT_LINES = Object.values(ProductLine); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx deleted file mode 100644 index 3aa59fbbcf83b..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/get_started_context.tsx +++ /dev/null @@ -1,42 +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 React from 'react'; -import { useKibana } from '../../../../lib/kibana'; -import type { SecurityProductTypes } from '../configs'; -import type { StepId } from '../types'; - -export interface GetStartedContextType { - productTypes: SecurityProductTypes | undefined; - projectsUrl: string | undefined; - projectFeaturesUrl: string | undefined; - availableSteps: StepId[]; -} - -const GetStartedContext = React.createContext(null); - -export const GetStartedContextProvider: React.FC = ({ children }) => { - const { productTypes, projectsUrl, projectFeaturesUrl, availableSteps } = - useKibana().services.getStartedPageSettings(); - - const value = { - productTypes, - projectsUrl, - projectFeaturesUrl, - availableSteps, - }; - - return {children}; -}; - -export const useGetStartedContext = () => { - const context = React.useContext(GetStartedContext); - if (!context) { - throw new Error('useGetStartedContext must be used within a GetStartedContextProvider'); - } - return context; -}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx deleted file mode 100644 index a43c2b6bbfdea..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started_with_context.tsx +++ /dev/null @@ -1,28 +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 React from 'react'; -import { GetStartedContextProvider } from './context/get_started_context'; -import { GetStarted } from './get_started'; - -interface GetStartedContextProviderProps { - indicesExist?: boolean; -} - -const GetStartedWithContextComponent: React.FC = ({ - indicesExist, -}) => { - return ( - - - - ); -}; - -export const GetStartedWithContext = React.memo(GetStartedWithContextComponent); - -// eslint-disable-next-line import/no-default-export -export default GetStartedWithContext; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts deleted file mode 100644 index efe81cf1ed2b1..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_user_name.ts +++ /dev/null @@ -1,27 +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 { useEffect, useState } from 'react'; -import { useKibana } from '../../../../lib/kibana'; - -export const useUserName = () => { - const [userName, setUserName] = useState(); - const { - services: { - security: { authc }, - }, - } = useKibana(); - useEffect(() => { - const getUser = async () => { - const { username } = await authc.getCurrentUser(); - setUserName(username); - }; - - getUser(); - }); - - return userName; -}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx deleted file mode 100644 index ae0e96edc62e1..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/lazy.tsx +++ /dev/null @@ -1,19 +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 React, { lazy, Suspense } from 'react'; -import { EuiLoadingLogo } from '@elastic/eui'; -import type { GetStartedProps } from './get_started'; - -const GetStartedLazy = lazy(() => import('./get_started_with_context')); - -const centerLogoStyle = { display: 'flex', margin: 'auto' }; - -export const GetStarted = ({ indicesExist }: GetStartedProps) => ( - }> - - -); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx index 4476b2e90a7b5..e631ff53f6a51 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx @@ -7,12 +7,12 @@ import React, { memo, useMemo } from 'react'; import { useSourcererDataView } from '../../containers/sourcerer'; -import { getSecurityGetStartedComponent } from './get_started'; +import { getOnboardingComponent } from './onboarding'; export const LandingPageComponent = memo(() => { const { indicesExist } = useSourcererDataView(); - const GetStarted = useMemo(() => getSecurityGetStartedComponent(), []); - return ; + const OnBoarding = useMemo(() => getOnboardingComponent(), []); + return ; }); LandingPageComponent.displayName = 'LandingPageComponent'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/get_started_with_context.tsx similarity index 82% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/get_started_with_context.tsx index 726e3b1e90837..acb5d995e9025 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/get_started_with_context.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/get_started_with_context.tsx @@ -7,4 +7,4 @@ import React from 'react'; -export const GetStartedWithContext = () =>
; +export const OnboardingWithContext = () =>
; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/index.tsx similarity index 87% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/index.tsx index 221ba1f2f5a43..d800c2617c943 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/index.tsx @@ -6,6 +6,6 @@ */ import React from 'react'; -export const getSecurityGetStartedComponent = jest +export const getOnboardingComponent = jest .fn() .mockReturnValue(() =>
); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/product_switch.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/storage.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts similarity index 95% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/storage.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts index 48e43b8fb49df..87503ddc0b779 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/storage.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts @@ -5,7 +5,7 @@ * 2.0. */ -export const getStartedStorage = { +export const onboardingStorage = { getAllFinishedStepsFromStorage: jest.fn(() => ({})), getFinishedStepsFromStorageByCardId: jest.fn(() => []), getActiveProductsFromStorage: jest.fn(() => []), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/__mocks__/toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/apis/index.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/apis/index.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/apis/index.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/apis/index.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badge.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/badges.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_item.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/__mocks__/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/__mocks__/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/__mocks__/content_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/__mocks__/content_wrapper.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/__mocks__/content_wrapper.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/__mocks__/content_wrapper.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/add_integration_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/add_integration_image.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/add_integration_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/add_integration_image.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/content_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/content_wrapper.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/create_project_step_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/create_project_step_image.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/create_project_step_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/create_project_step_image.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/enable_rule_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/enable_rule_image.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/enable_rule_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/enable_rule_image.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/overview_video_description.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/overview_video_description.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/overview_video_description.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/overview_video_description.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/video.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_alerts_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_alerts_image.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_alerts_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_alerts_image.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_dashboard_image.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_dashboard_image.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/content/view_dashboard_image.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_dashboard_image.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.test.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.test.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/helpers.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/card_step/step_content.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/configs.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/configs.ts new file mode 100644 index 0000000000000..7d5fec9e116f1 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/configs.ts @@ -0,0 +1,91 @@ +/* + * 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 { schema, type TypeOf } from '@kbn/config-schema'; + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export enum ProductLine { + security = 'security', + endpoint = 'endpoint', + cloud = 'cloud', +} +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export enum ProductTier { + essentials = 'essentials', + complete = 'complete', +} +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export const productLineSchema = schema.oneOf([ + schema.literal(ProductLine.security), + schema.literal(ProductLine.endpoint), + schema.literal(ProductLine.cloud), +]); + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export type SecurityProductLine = TypeOf; + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export const productTierSchema = schema.oneOf([ + schema.literal(ProductTier.essentials), + schema.literal(ProductTier.complete), +]); + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export type SecurityProductTier = TypeOf; + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export const productTypeSchema = schema.object({ + product_line: productLineSchema, + product_tier: productTierSchema, +}); + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export type SecurityProductType = TypeOf; + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export const productTypesSchema = schema.arrayOf(productTypeSchema, { + defaultValue: [], +}); + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export type SecurityProductTypes = TypeOf; + +/** + * We do not want serverless code in this plugin. Please Do Not Reuse. + * This is temporary, will be deleted when issue-174766 is resolved. + */ +export const ALL_PRODUCT_LINES = Object.values(ProductLine); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/step_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/__mocks__/step_context.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/__mocks__/step_context.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/__mocks__/step_context.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/step_context.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/step_context.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/context/step_context.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/step_context.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/footer.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/footer.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/footer.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/footer.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/translations.ts similarity index 69% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/translations.ts index 06b72d360b0c1..4bb41d883e785 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/footer/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/translations.ts @@ -8,84 +8,84 @@ import { i18n } from '@kbn/i18n'; export const FOOTER_DOCUMENTATION_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.documentation.title', + 'xpack.securitySolution.onboarding.footer.documentation.title', { defaultMessage: 'Browse documentation', } ); export const FOOTER_DOCUMENTATION_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.footer.documentation.description', + 'xpack.securitySolution.onboarding.footer.documentation.description', { defaultMessage: 'In-depth guides on all Elastic features', } ); export const FOOTER_DOCUMENTATION_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.documentation.link.title', + 'xpack.securitySolution.onboarding.footer.documentation.link.title', { defaultMessage: 'Start reading', } ); export const FOOTER_FORUM_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.forum.title', + 'xpack.securitySolution.onboarding.footer.forum.title', { defaultMessage: 'Explore forum', } ); export const FOOTER_FORUM_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.footer.forum.description', + 'xpack.securitySolution.onboarding.footer.forum.description', { defaultMessage: 'Exchange thoughts about Elastic', } ); export const FOOTER_FORUM_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.forum.link.title', + 'xpack.securitySolution.onboarding.footer.forum.link.title', { defaultMessage: 'Discuss Forum', } ); export const FOOTER_DEMO_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.demo.title', + 'xpack.securitySolution.onboarding.footer.demo.title', { defaultMessage: 'View demo project', } ); export const FOOTER_DEMO_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.footer.demo.description', + 'xpack.securitySolution.onboarding.footer.demo.description', { defaultMessage: 'Discover Elastic using sample data', } ); export const FOOTER_DEMO_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.demo.link.title', + 'xpack.securitySolution.onboarding.footer.demo.link.title', { defaultMessage: 'Explore demo', } ); export const FOOTER_LABS_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.labs.title', + 'xpack.securitySolution.onboarding.footer.labs.title', { defaultMessage: 'Elastic Security Labs', } ); export const FOOTER_LABS_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.footer.labs.description', + 'xpack.securitySolution.onboarding.footer.labs.description', { defaultMessage: 'Insights from security researchers', } ); export const FOOTER_LABS_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.footer.labs.link.title', + 'xpack.securitySolution.onboarding.footer.labs.link.title', { defaultMessage: 'Learn more', } diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.test.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.test.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.ts similarity index 93% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.ts index 410f8d809bfa1..6bf7ff9cced91 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/helpers.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.ts @@ -28,8 +28,8 @@ export const DEFAULT_FINISHED_STEPS: Partial> = { export const isDefaultFinishedCardStep = ( cardId: CardId, stepId: StepId, - getStartedSteps: StepId[] -) => !!DEFAULT_FINISHED_STEPS[cardId]?.includes(stepId) && getStartedSteps?.includes(stepId); + onboardingSteps: StepId[] +) => !!DEFAULT_FINISHED_STEPS[cardId]?.includes(stepId) && onboardingSteps?.includes(stepId); export const getCardTimeInMinutes = (activeSteps: Step[] | undefined, stepsDone: Set) => activeSteps?.reduce( @@ -48,9 +48,9 @@ export const isStepActive = (step: Step, activeProducts: Set) => export const getActiveSteps = ( steps: Step[] | undefined, activeProducts: Set, - getStartedSteps: StepId[] + onboardingSteps: StepId[] ) => - steps?.filter((step) => getStartedSteps.includes(step.id) && isStepActive(step, activeProducts)); + steps?.filter((step) => onboardingSteps.includes(step.id) && isStepActive(step, activeProducts)); const getfinishedActiveSteps = ( finishedStepIds: StepId[] | undefined, @@ -108,15 +108,15 @@ export const getStepsByActiveProduct = ({ activeProducts, cardId, sectionId, - getStartedSteps, + onboardingSteps, }: { activeProducts: Set; cardId: CardId; sectionId: SectionId; - getStartedSteps: StepId[]; + onboardingSteps: StepId[]; }) => { const card = getCard({ cardId, sectionId }); - const steps = getActiveSteps(card?.steps, activeProducts, getStartedSteps); + const steps = getActiveSteps(card?.steps, activeProducts, onboardingSteps); return steps; }; @@ -124,14 +124,14 @@ export const getStepsByActiveProduct = ({ export const setupActiveSections = ( finishedSteps: Record>, activeProducts: Set, - getStartedSteps: StepId[] + onboardingSteps: StepId[] ) => activeProducts.size > 0 ? getSections().reduce( (acc, section) => { const activeCards = section.cards?.reduce((accCards, card) => { - const activeSteps = getActiveSteps(card.steps, activeProducts, getStartedSteps); + const activeSteps = getActiveSteps(card.steps, activeProducts, onboardingSteps); const activeStepIds = activeSteps?.map(({ id }) => id); const stepsDone: Set = getfinishedActiveSteps( finishedSteps[card.id] ? [...finishedSteps[card.id]] : undefined, @@ -168,14 +168,14 @@ export const updateActiveSections = ({ activeSections, cardId, finishedSteps, - getStartedSteps, + onboardingSteps, sectionId, }: { activeProducts: Set; activeSections: ActiveSections | null; cardId: CardId; finishedSteps: Record>; - getStartedSteps: StepId[]; + onboardingSteps: StepId[]; sectionId: SectionId; }): { activeSections: ActiveSections | null; @@ -189,7 +189,7 @@ export const updateActiveSections = ({ return { activeSections, totalActiveSteps: null, totalStepsLeft: null }; } - const steps = getStepsByActiveProduct({ activeProducts, cardId, sectionId, getStartedSteps }); + const steps = getStepsByActiveProduct({ activeProducts, cardId, sectionId, onboardingSteps }); const activeStepIds = activeCard.activeStepIds; const stepsDone: Set = getfinishedActiveSteps( diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_user_name.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/__mocks__/use_user_name.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_user_name.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_available_steps.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_available_steps.ts new file mode 100644 index 0000000000000..2229914cf4e8a --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_available_steps.ts @@ -0,0 +1,13 @@ +/* + * 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 { useObservable } from 'react-use'; +import { useKibana } from '../../../../lib/kibana'; + +export const useAvailableSteps = () => { + const availableSteps$ = useKibana().services.onboarding.getAvailableStepsObservable(); + return useObservable(availableSteps$); +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_check_step_completed.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_product_types.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_product_types.ts new file mode 100644 index 0000000000000..dda575c3b789f --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_product_types.ts @@ -0,0 +1,14 @@ +/* + * 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 { useObservable } from 'react-use'; +import { useKibana } from '../../../../lib/kibana'; + +export const useProductTypes = () => { + const { productTypes$ } = useKibana().services.onboarding; + return useObservable(productTypes$, undefined); +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_project_features_url.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_project_features_url.ts new file mode 100644 index 0000000000000..c65eea5cca031 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_project_features_url.ts @@ -0,0 +1,14 @@ +/* + * 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 { useObservable } from 'react-use'; +import { useKibana } from '../../../../lib/kibana'; + +export const useProjectFeaturesUrl = () => { + const { projectFeaturesUrl$ } = useKibana().services.onboarding; + return useObservable(projectFeaturesUrl$, undefined); +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_projects_url.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_projects_url.ts new file mode 100644 index 0000000000000..9fc8f4f06ea02 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_projects_url.ts @@ -0,0 +1,14 @@ +/* + * 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 { useObservable } from 'react-use'; +import { useKibana } from '../../../../lib/kibana'; + +export const useProjectsUrl = () => { + const { projectsUrl$ } = useKibana().services.onboarding; + return useObservable(projectsUrl$, undefined); +}; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_scroll.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_scroll.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_scroll.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_scroll.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_setup_sections.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.tsx similarity index 88% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.tsx index 6a77e7700ff7d..81d4b6557239b 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/hooks/use_toggle_panel.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.tsx @@ -11,7 +11,7 @@ import { useNavigateTo } from '@kbn/security-solution-navigation'; import { SecurityPageName } from '../../../../../../common'; -import { getStartedStorage } from '../storage'; +import { onboardingStorage } from '../storage'; import { getActiveSectionsInitialStates, getActiveProductsInitialStates, @@ -27,7 +27,7 @@ import type { Switch, StepId, } from '../types'; -import { GetStartedPageActions } from '../types'; +import { OnboardingActions } from '../types'; import { findCardSectionByStepId } from '../helpers'; import type { SecurityProductTypes } from '../configs'; import { ALL_PRODUCT_LINES, ProductLine } from '../configs'; @@ -37,8 +37,8 @@ const syncExpandedCardStepsToStorageFromURL = (maybeStepId: string) => { const hasStepContent = matchedStep && matchedStep.description; if (matchedCard && matchedStep && hasStepContent) { - getStartedStorage.resetAllExpandedCardStepsToStorage(); - getStartedStorage.addExpandedCardStepToStorage(matchedCard.id, matchedStep.id); + onboardingStorage.resetAllExpandedCardStepsToStorage(); + onboardingStorage.addExpandedCardStepToStorage(matchedCard.id, matchedStep.id); } }; @@ -67,10 +67,10 @@ const syncExpandedCardStepsFromStorageToURL = ( export const useTogglePanel = ({ productTypes, - getStartedSteps, + onboardingSteps, }: { productTypes?: SecurityProductTypes; - getStartedSteps: StepId[]; + onboardingSteps: StepId[]; }) => { const { navigateTo } = useNavigateTo(); @@ -87,7 +87,7 @@ export const useTogglePanel = ({ removeExpandedCardStepFromStorage, resetAllExpandedCardStepsToStorage, getAllExpandedCardStepsFromStorage, - } = getStartedStorage; + } = onboardingStorage; const finishedStepsInitialStates = useMemo( () => getFinishedStepsInitialStates({ finishedSteps: getAllFinishedStepsFromStorage() }), @@ -114,9 +114,9 @@ export const useTogglePanel = ({ getActiveSectionsInitialStates({ activeProducts: activeProductsInitialStates, finishedSteps: finishedStepsInitialStates, - getStartedSteps, + onboardingSteps, }), - [activeProductsInitialStates, finishedStepsInitialStates, getStartedSteps] + [activeProductsInitialStates, finishedStepsInitialStates, onboardingSteps] ); const expandedCardsInitialStates: ExpandedCardSteps = useMemo(() => { @@ -130,7 +130,7 @@ export const useTogglePanel = ({ const onStepClicked: OnStepClicked = useCallback( ({ stepId, cardId, isExpanded }) => { dispatch({ - type: GetStartedPageActions.ToggleExpandedStep, + type: OnboardingActions.ToggleExpandedStep, payload: { stepId, cardId, isStepExpanded: isExpanded }, }); if (isExpanded) { @@ -155,29 +155,27 @@ export const useTogglePanel = ({ finishedSteps: finishedStepsInitialStates, totalActiveSteps: totalActiveStepsInitialStates, totalStepsLeft: totalStepsLeftInitialStates, - getStartedSteps: getStartedSteps ?? [], + onboardingSteps, }); const toggleTaskCompleteStatus: ToggleTaskCompleteStatus = useCallback( ({ stepId, cardId, sectionId, undo }) => { dispatch({ - type: undo - ? GetStartedPageActions.RemoveFinishedStep - : GetStartedPageActions.AddFinishedStep, + type: undo ? OnboardingActions.RemoveFinishedStep : OnboardingActions.AddFinishedStep, payload: { stepId, cardId, sectionId }, }); if (undo) { - removeFinishedStepFromStorage(cardId, stepId, getStartedSteps); + removeFinishedStepFromStorage(cardId, stepId, state.onboardingSteps); } else { addFinishedStepToStorage(cardId, stepId); } }, - [addFinishedStepToStorage, getStartedSteps, removeFinishedStepFromStorage] + [addFinishedStepToStorage, removeFinishedStepFromStorage, state.onboardingSteps] ); const onProductSwitchChanged = useCallback( (section: Switch) => { - dispatch({ type: GetStartedPageActions.ToggleProduct, payload: { section: section.id } }); + dispatch({ type: OnboardingActions.ToggleProduct, payload: { section: section.id } }); toggleActiveProductsInStorage(section.id); }, [toggleActiveProductsInStorage] @@ -242,5 +240,10 @@ export const useTogglePanel = ({ } }, [navigateTo, onStepClicked, state.expandedCardSteps, stepIdFromHash]); - return { state, onStepClicked, toggleTaskCompleteStatus, onProductSwitchChanged }; + return { + state, + onStepClicked, + toggleTaskCompleteStatus, + onProductSwitchChanged, + }; }; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/analyze_data_using_dashboards.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/analyze_data_using_dashboards.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/analyze_data_using_dashboards.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/analyze_data_using_dashboards.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/connect_to_existing_sources.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/connect_to_existing_sources.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/connect_to_existing_sources.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/connect_to_existing_sources.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/create_projects.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/create_projects.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/create_projects.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/create_projects.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/demo.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/demo.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/demo.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/demo.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/documentation.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/documentation.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/documentation.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/documentation.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/enable_prebuilt_rules.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/enable_prebuilt_rules.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/enable_prebuilt_rules.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/enable_prebuilt_rules.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/forum.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/forum.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/forum.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/forum.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/labs.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/labs.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/labs.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/labs.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/launch.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/launch.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/launch.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/launch.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/overview_video.svg b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/overview_video.svg similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/overview_video.svg rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/overview_video.svg diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/view_alerts.png b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/view_alerts.png similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/images/view_alerts.png rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/view_alerts.png diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/index.tsx similarity index 54% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/index.tsx index fca080678e40e..819f8f9167660 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/index.tsx @@ -7,9 +7,9 @@ import React from 'react'; -import { GetStarted } from './lazy'; +import { Onboarding } from './lazy'; -export const getSecurityGetStartedComponent = (): React.ComponentType<{ indicesExist?: boolean }> => - function GetStartedComponent({ indicesExist }: { indicesExist?: boolean }) { - return ; +export const getOnboardingComponent = (): React.ComponentType<{ indicesExist?: boolean }> => + function OnBoardingComponent({ indicesExist }: { indicesExist?: boolean }) { + return ; }; diff --git a/x-pack/plugins/security_solution_ess/public/get_started/lazy.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/lazy.tsx similarity index 72% rename from x-pack/plugins/security_solution_ess/public/get_started/lazy.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/lazy.tsx index 484a6b5913dd5..45001a2d9ce0d 100644 --- a/x-pack/plugins/security_solution_ess/public/get_started/lazy.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/lazy.tsx @@ -7,12 +7,12 @@ import React, { lazy, Suspense } from 'react'; import { EuiLoadingLogo } from '@elastic/eui'; -const LandingCardsLazy = lazy(() => import('./landing_cards')); +const OnboardingLazy = lazy(() => import('./onboarding_with_settings')); const centerLogoStyle = { display: 'flex', margin: 'auto' }; -export const GetStarted = () => ( +export const Onboarding = ({ indicesExist }: { indicesExist?: boolean }) => ( }> - + ); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.test.tsx similarity index 89% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.test.tsx index acc65a9a911a1..5975da56f2413 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.test.tsx @@ -6,7 +6,7 @@ */ import React from 'react'; import { render } from '@testing-library/react'; -import { GetStartedComponent } from './get_started'; +import { OnboardingComponent } from './onboarding'; jest.mock('./context/get_started_context'); jest.mock('./toggle_panel'); jest.mock('@elastic/eui', () => { @@ -36,9 +36,9 @@ jest.mock('@kbn/security-solution-navigation', () => ({ }, })); -describe('GetStartedComponent', () => { +describe('OnboardingComponent', () => { it('should render page title, subtitle, and description', () => { - const { getByText } = render(); + const { getByText } = render(); const pageTitle = getByText('Hi mocked_user_name!'); const subtitle = getByText(`Get started with Security`); @@ -52,7 +52,7 @@ describe('GetStartedComponent', () => { }); it('should render welcomeHeader and TogglePanel', () => { - const { getByTestId } = render(); + const { getByTestId } = render(); const welcomeHeader = getByTestId('welcome-header'); const togglePanel = getByTestId('toggle-panel'); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.tsx similarity index 88% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.tsx index 63cb5d6b3ddf4..469c4f1febbb5 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/get_started.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.tsx @@ -19,17 +19,24 @@ import { CONTENT_WIDTH } from './helpers'; import { WelcomeHeader } from './welcome_header'; import { Footer } from './footer'; import { useScrollToHash } from './hooks/use_scroll'; +import type { SecurityProductTypes } from './configs'; import { ProductLine } from './configs'; -import { useGetStartedContext } from './context/get_started_context'; -export interface GetStartedProps { +import type { StepId } from './types'; + +interface OnboardingProps { indicesExist?: boolean; + productTypes: SecurityProductTypes | undefined; + onboardingSteps: StepId[]; } -export const GetStartedComponent: React.FC = ({ indicesExist }) => { +export const OnboardingComponent: React.FC = ({ + indicesExist, + productTypes, + onboardingSteps, +}) => { const { euiTheme } = useEuiTheme(); - const { availableSteps: getStartedSteps, productTypes } = useGetStartedContext(); const { onStepClicked, toggleTaskCompleteStatus, @@ -41,7 +48,7 @@ export const GetStartedComponent: React.FC = ({ indicesExist }) totalStepsLeft, expandedCardSteps, }, - } = useTogglePanel({ productTypes, getStartedSteps }); + } = useTogglePanel({ productTypes, onboardingSteps }); const productTier = productTypes?.find( (product) => product.product_line === ProductLine.security )?.product_tier; @@ -115,4 +122,4 @@ export const GetStartedComponent: React.FC = ({ indicesExist }) ); }; -export const GetStarted = React.memo(GetStartedComponent); +export const Onboarding = React.memo(OnboardingComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.tsx new file mode 100644 index 0000000000000..c84339b2ebfb6 --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.tsx @@ -0,0 +1,33 @@ +/* + * 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 { useAvailableSteps } from './hooks/use_available_steps'; +import { useProductTypes } from './hooks/use_product_types'; +import { Onboarding } from './onboarding'; + +export const OnboardingWithSettingsComponent: React.FC<{ indicesExist?: boolean }> = ({ + indicesExist, +}) => { + const productTypes = useProductTypes(); + const onboardingSteps = useAvailableSteps(); + + if (!onboardingSteps) { + return null; + } + + return ( + + ); +}; + +// eslint-disable-next-line import/no-default-export +export default OnboardingWithSettingsComponent; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/product_switch.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/progress_bar.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/progress_bar.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/progress_bar.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/progress_bar.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.test.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.test.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.test.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.tsx similarity index 88% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.tsx index fbca1fe655efa..11423a8d92ba8 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/reducer.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.tsx @@ -8,10 +8,10 @@ import type { ProductLine } from './configs'; import { setupActiveSections, updateActiveSections } from './helpers'; import type { ExpandedCardSteps, ReducerActions } from './types'; -import { type CardId, type StepId, type TogglePanelReducer, GetStartedPageActions } from './types'; +import { type CardId, type StepId, type TogglePanelReducer, OnboardingActions } from './types'; export const reducer = (state: TogglePanelReducer, action: ReducerActions): TogglePanelReducer => { - if (action.type === GetStartedPageActions.ToggleProduct) { + if (action.type === OnboardingActions.ToggleProduct) { const activeProducts = new Set([...state.activeProducts]); if (activeProducts.has(action.payload.section)) { @@ -23,7 +23,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg const { activeSections, totalStepsLeft, totalActiveSteps } = setupActiveSections( state.finishedSteps, activeProducts, - state.getStartedSteps + state.onboardingSteps ); return { @@ -35,7 +35,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg }; } - if (action.type === GetStartedPageActions.AddFinishedStep) { + if (action.type === OnboardingActions.AddFinishedStep) { const finishedSteps = { ...state.finishedSteps, [action.payload.cardId]: state.finishedSteps[action.payload.cardId] @@ -51,7 +51,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg cardId: action.payload.cardId, finishedSteps, sectionId: action.payload.sectionId, - getStartedSteps: state.getStartedSteps, + onboardingSteps: state.onboardingSteps, }); return { @@ -63,7 +63,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg }; } - if (action.type === GetStartedPageActions.RemoveFinishedStep) { + if (action.type === OnboardingActions.RemoveFinishedStep) { const finishedSteps = { ...state.finishedSteps, [action.payload.cardId]: state.finishedSteps[action.payload.cardId] @@ -79,7 +79,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg cardId: action.payload.cardId, finishedSteps, sectionId: action.payload.sectionId, - getStartedSteps: state.getStartedSteps, + onboardingSteps: state.onboardingSteps, }); return { @@ -92,7 +92,7 @@ export const reducer = (state: TogglePanelReducer, action: ReducerActions): Togg } if ( - action.type === GetStartedPageActions.ToggleExpandedStep && + action.type === OnboardingActions.ToggleExpandedStep && action.payload.isStepExpanded != null ) { // It allows Only One step open at a time @@ -162,9 +162,9 @@ export const getActiveProductsInitialStates = ({ export const getActiveSectionsInitialStates = ({ activeProducts, finishedSteps, - getStartedSteps, + onboardingSteps, }: { activeProducts: Set; finishedSteps: Record>; - getStartedSteps: StepId[]; -}) => setupActiveSections(finishedSteps, activeProducts, getStartedSteps); + onboardingSteps: StepId[]; +}) => setupActiveSections(finishedSteps, activeProducts, onboardingSteps); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/sections.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/sections.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/sections.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/sections.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_elastic_rules_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_elastic_rules_button.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_elastic_rules_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_elastic_rules_button.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_button.tsx similarity index 92% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_button.tsx index 6d5812ba8b3ef..443f11920fd4d 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_button.tsx @@ -16,7 +16,7 @@ enum ExternalPageName { const AddIntegrationButtonComponent: React.FC = () => ( diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_callout.tsx similarity index 95% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_callout.tsx index 02804a61e4f0e..8179760b17966 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/add_integration_callout.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_callout.tsx @@ -41,7 +41,7 @@ const AddIntegrationsCalloutComponent = ({ stepName }: { stepName?: string }) => /> ), stepName: stepName ?? ( ), diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/alerts_link.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/alerts_link.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/alerts_link.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/alerts_link.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/dashboard_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/dashboard_button.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/dashboard_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/dashboard_button.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/manage_projects_button.tsx similarity index 86% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/manage_projects_button.tsx index 00875c995b83b..2bcc76f5e6aab 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/step_links/manage_projects_button.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/manage_projects_button.tsx @@ -8,10 +8,10 @@ import React from 'react'; import { EuiIcon, EuiButton } from '@elastic/eui'; import { MANAGE_PROJECTS } from './translations'; -import { useGetStartedContext } from '../context/get_started_context'; +import { useProjectsUrl } from '../hooks/use_projects_url'; const ManageProjectsButtonComponent = () => { - const { projectsUrl } = useGetStartedContext(); + const projectsUrl = useProjectsUrl(); return projectsUrl ? ( { const allFinishedSteps: Record = storage.get(FINISHED_STEPS_STORAGE_KEY); const defaultFinishedStepsByCardId = DEFAULT_FINISHED_STEPS[cardId]; @@ -64,7 +64,7 @@ export const getStartedStorage = { return activeProducts; }, getFinishedStepsFromStorageByCardId: (cardId: CardId) => { - const finishedSteps = getStartedStorage.getAllFinishedStepsFromStorage(); + const finishedSteps = onboardingStorage.getAllFinishedStepsFromStorage(); const steps: StepId[] = finishedSteps[cardId] ?? []; return steps; }, @@ -75,7 +75,7 @@ export const getStartedStorage = { } else { getSections().forEach((section) => { section.cards?.forEach((card) => { - getStartedStorage.setDefaultFinishedSteps(card.id); + onboardingStorage.setDefaultFinishedSteps(card.id); }); }); } @@ -83,18 +83,18 @@ export const getStartedStorage = { }, addFinishedStepToStorage: (cardId: CardId, stepId: StepId) => { - const finishedSteps = getStartedStorage.getAllFinishedStepsFromStorage(); + const finishedSteps = onboardingStorage.getAllFinishedStepsFromStorage(); const card: StepId[] = finishedSteps[cardId] ?? []; if (card.indexOf(stepId) < 0) { card.push(stepId); storage.set(FINISHED_STEPS_STORAGE_KEY, { ...finishedSteps, [cardId]: card }); } }, - removeFinishedStepFromStorage: (cardId: CardId, stepId: StepId, getStartedSteps: StepId[]) => { - if (isDefaultFinishedCardStep(cardId, stepId, getStartedSteps)) { + removeFinishedStepFromStorage: (cardId: CardId, stepId: StepId, onboardingSteps: StepId[]) => { + if (isDefaultFinishedCardStep(cardId, stepId, onboardingSteps)) { return; } - const finishedSteps = getStartedStorage.getAllFinishedStepsFromStorage(); + const finishedSteps = onboardingStorage.getAllFinishedStepsFromStorage(); const steps: StepId[] = finishedSteps[cardId] ?? []; const index = steps.indexOf(stepId); if (index >= 0) { @@ -111,7 +111,7 @@ export const getStartedStorage = { }, resetAllExpandedCardStepsToStorage: () => { const activeCards: Record = - getStartedStorage.getAllExpandedCardStepsFromStorage(); + onboardingStorage.getAllExpandedCardStepsFromStorage(); storage.set( EXPANDED_CARDS_STORAGE_KEY, @@ -123,7 +123,7 @@ export const getStartedStorage = { }, addExpandedCardStepToStorage: (cardId: CardId, stepId: StepId) => { const activeCards: Record = - getStartedStorage.getAllExpandedCardStepsFromStorage(); + onboardingStorage.getAllExpandedCardStepsFromStorage(); const card = activeCards[cardId] ? { expandedSteps: [stepId], diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/add_integrations_callout.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/add_integrations_callout.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/add_integrations_callout.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/add_integrations_callout.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_item.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_item.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_item.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_item.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_step.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_step.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/card_step.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_step.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/footer.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/footer.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/footer.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/footer.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/progress_bar.style.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/progress_bar.style.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/progress_bar.style.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/progress_bar.style.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/step_content.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/step_content.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/welcome_header.styles.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/welcome_header.styles.ts similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/styles/welcome_header.styles.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/welcome_header.styles.ts diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/toggle_panel.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts similarity index 71% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts index ce95a4896da44..721c5300e9adc 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts @@ -8,88 +8,88 @@ import { i18n } from '@kbn/i18n'; export const GET_STARTED_PAGE_TITLE = (userName: string) => - i18n.translate('xpack.securitySolution.getStarted.Title', { + i18n.translate('xpack.securitySolution.onboarding.Title', { defaultMessage: `Hi {userName}!`, values: { userName }, }); export const GET_STARTED_PAGE_SUBTITLE = i18n.translate( - 'xpack.securitySolution.getStarted.subTitle', + 'xpack.securitySolution.onboarding.subTitle', { defaultMessage: `Get started with Security`, } ); export const GET_STARTED_PAGE_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.description', + 'xpack.securitySolution.onboarding.description', { defaultMessage: `This area shows you everything you need to know. Feel free to explore all content. You can always come back later at any time.`, } ); export const CURRENT_PLAN_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.currentPlan.label', + 'xpack.securitySolution.onboarding.currentPlan.label', { defaultMessage: 'Current plan:', } ); export const PROGRESS_TRACKER_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.progressTracker.progressBar.label', + 'xpack.securitySolution.onboarding.progressTracker.progressBar.label', { defaultMessage: 'PROGRESS' } ); export const SECTION_1_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.section1.title', + 'xpack.securitySolution.onboarding.togglePanel.section1.title', { defaultMessage: 'Quick start', } ); export const SECTION_2_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.section2.title', + 'xpack.securitySolution.onboarding.togglePanel.section2.title', { defaultMessage: 'Add and validate your data', } ); export const SECTION_3_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.section3.title', + 'xpack.securitySolution.onboarding.togglePanel.section3.title', { defaultMessage: 'Get started with alerts', } ); export const CREATE_PROJECT_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.createProject.title', + 'xpack.securitySolution.onboarding.step.createProject.title', { defaultMessage: 'Create your first project', } ); export const CREATE_PROJECT_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.step.createProject.description', + 'xpack.securitySolution.onboarding.step.createProject.description', { defaultMessage: `Create Elastic Security project with our fully-managed serverless solutions that automatically manage nodes, shards, data tiers and scaling to maintain the health and performance so you can focus on your data and goals.`, } ); export const WATCH_VIDEO_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.watchVideo.title', + 'xpack.securitySolution.onboarding.step.watchVideo.title', { defaultMessage: 'Watch the overview video', } ); export const WATCH_VIDEO_BUTTON_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.watchVideo.button.title', + 'xpack.securitySolution.onboarding.step.watchVideo.button.title', { defaultMessage: 'Elastic Security', } ); export const WATCH_VIDEO_DESCRIPTION1 = i18n.translate( - 'xpack.securitySolution.getStarted.step.watchVideo.description1', + 'xpack.securitySolution.onboarding.step.watchVideo.description1', { defaultMessage: `Elastic Security unifies analytics, EDR, cloud security capabilities, and more into a SaaS solution that helps you improve your organization’s security posture, defend against a wide range of threats, and prevent breaches. `, @@ -97,21 +97,21 @@ export const WATCH_VIDEO_DESCRIPTION1 = i18n.translate( ); export const WATCH_VIDEO_DESCRIPTION2 = i18n.translate( - 'xpack.securitySolution.getStarted.step.watchVideo.description2', + 'xpack.securitySolution.onboarding.step.watchVideo.description2', { defaultMessage: `To explore the platform’s core features, watch the video:`, } ); export const ADD_INTEGRATIONS_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.addIntegrations.title', + 'xpack.securitySolution.onboarding.step.addIntegrations.title', { defaultMessage: 'Add integrations', } ); export const ADD_INTEGRATIONS_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.step.addIntegrations.description', + 'xpack.securitySolution.onboarding.step.addIntegrations.description', { defaultMessage: 'Use third-party integrations to import data from common sources and help you gather relevant information in one place. To find integrations for your use case, search for tools and data providers on the Add integrations page.', @@ -119,21 +119,21 @@ export const ADD_INTEGRATIONS_DESCRIPTION = i18n.translate( ); export const ADD_INTEGRATIONS_IMAGE_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.addIntegrations.image.title', + 'xpack.securitySolution.onboarding.step.addIntegrations.image.title', { defaultMessage: 'Connect to existing data sources', } ); export const VIEW_DASHBOARDS = i18n.translate( - 'xpack.securitySolution.getStarted.step.viewDashboards.title', + 'xpack.securitySolution.onboarding.step.viewDashboards.title', { defaultMessage: 'View and analyze your data using dashboards', } ); export const VIEW_DASHBOARDS_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.step.viewDashboards.description', + 'xpack.securitySolution.onboarding.step.viewDashboards.description', { defaultMessage: 'Use dashboards to visualize data and stay up-to-date with key information. Create your own, or use Elastic’s default dashboards — including alerts, user authentication events, known vulnerabilities, and more.', @@ -141,21 +141,21 @@ export const VIEW_DASHBOARDS_DESCRIPTION = i18n.translate( ); export const VIEW_DASHBOARDS_IMAGE_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.viewDashboards.image.title', + 'xpack.securitySolution.onboarding.step.viewDashboards.image.title', { defaultMessage: 'Analyze data using dashboards', } ); export const ENABLE_RULES = i18n.translate( - 'xpack.securitySolution.getStarted.step.enableRules.title', + 'xpack.securitySolution.onboarding.step.enableRules.title', { defaultMessage: 'Enable prebuilt rules', } ); export const ENABLE_RULES_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.step.enableRules.description', + 'xpack.securitySolution.onboarding.step.enableRules.description', { defaultMessage: 'Elastic Security comes with prebuilt detection rules that run in the background and create alerts when their conditions are met.', @@ -163,14 +163,14 @@ export const ENABLE_RULES_DESCRIPTION = i18n.translate( ); export const VIEW_ALERTS_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.step.viewAlerts.title', + 'xpack.securitySolution.onboarding.step.viewAlerts.title', { defaultMessage: 'View alerts', } ); export const VIEW_ALERTS_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.step.viewAlerts.description', + 'xpack.securitySolution.onboarding.step.viewAlerts.description', { defaultMessage: 'Visualize, sort, filter, and investigate alerts from across your infrastructure. Examine individual alerts of interest, and discover general patterns in alert volume and severity.', @@ -178,42 +178,42 @@ export const VIEW_ALERTS_DESCRIPTION = i18n.translate( ); export const PRODUCT_BADGE_ANALYTICS = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.productBadge.analytics', + 'xpack.securitySolution.onboarding.togglePanel.productBadge.analytics', { defaultMessage: 'Analytics', } ); export const PRODUCT_BADGE_CLOUD = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.productBadge.cloud', + 'xpack.securitySolution.onboarding.togglePanel.productBadge.cloud', { defaultMessage: 'Cloud', } ); export const PRODUCT_BADGE_EDR = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.productBadge.edr', + 'xpack.securitySolution.onboarding.togglePanel.productBadge.edr', { defaultMessage: 'EDR', } ); export const TOGGLE_PANEL_TITLE = i18n.translate( - 'xpack.securitySolution.getStartedProductLabel.title', + 'xpack.securitySolution.onboardingProductLabel.title', { defaultMessage: `Curate your Get Started experience:`, } ); export const ANALYTICS_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.switch.analytics.label', + 'xpack.securitySolution.onboarding.togglePanel.switch.analytics.label', { defaultMessage: 'Analytics', } ); export const CLOUD_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.switch.cloud.label', + 'xpack.securitySolution.onboarding.togglePanel.switch.cloud.label', { defaultMessage: 'Cloud Security', @@ -221,56 +221,56 @@ export const CLOUD_SWITCH_LABEL = i18n.translate( ); export const ENDPOINT_SWITCH_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.switch.endpoint.label', + 'xpack.securitySolution.onboarding.togglePanel.switch.endpoint.label', { defaultMessage: 'Endpoint Security', } ); export const MARK_AS_DONE_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.markAsDoneTitle', + 'xpack.securitySolution.onboarding.togglePanel.markAsDoneTitle', { defaultMessage: 'Mark as done', } ); export const UNDO_MARK_AS_DONE_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.undoMarkAsDoneTitle', + 'xpack.securitySolution.onboarding.togglePanel.undoMarkAsDoneTitle', { defaultMessage: `Undo 'mark as done'`, } ); export const TOGGLE_PANEL_EMPTY_TITLE = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.empty.title', + 'xpack.securitySolution.onboarding.togglePanel.empty.title', { defaultMessage: `Hmm, there doesn't seem to be anything there`, } ); export const TOGGLE_PANEL_EMPTY_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.empty.description', + 'xpack.securitySolution.onboarding.togglePanel.empty.description', { defaultMessage: `Switch on a toggle to continue your curated "Get Started" experience`, } ); export const ALL_DONE_TEXT = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.done.title', + 'xpack.securitySolution.onboarding.togglePanel.done.title', { defaultMessage: 'Step complete', } ); export const COLLAPSE_STEP_BUTTON_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.collapseStepButton.label', + 'xpack.securitySolution.onboarding.togglePanel.collapseStepButton.label', { defaultMessage: 'Collapse', } ); export const EXPAND_STEP_BUTTON_LABEL = i18n.translate( - 'xpack.securitySolution.getStarted.togglePanel.expandStepButton.label', + 'xpack.securitySolution.onboarding.togglePanel.expandStepButton.label', { defaultMessage: 'Expand', } diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/types.ts similarity index 95% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/types.ts index ddc6da2aec850..15f938113e76f 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/types.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/types.ts @@ -147,26 +147,26 @@ export interface TogglePanelReducer { finishedSteps: Record>; totalActiveSteps: number | null; totalStepsLeft: number | null; - getStartedSteps: StepId[]; + onboardingSteps: StepId[]; } export interface ToggleProductAction { - type: GetStartedPageActions.ToggleProduct; + type: OnboardingActions.ToggleProduct; payload: { section: ProductLine }; } export interface AddFinishedStepAction { - type: GetStartedPageActions.AddFinishedStep; + type: OnboardingActions.AddFinishedStep; payload: { stepId: StepId; cardId: CardId; sectionId: SectionId }; } export interface RemoveFinishedStepAction { - type: GetStartedPageActions.RemoveFinishedStep; + type: OnboardingActions.RemoveFinishedStep; payload: { stepId: StepId; cardId: CardId; sectionId: SectionId }; } export interface ToggleStepAction { - type: GetStartedPageActions.ToggleExpandedStep; + type: OnboardingActions.ToggleExpandedStep; payload: { stepId: StepId; cardId: CardId; isStepExpanded?: boolean }; } @@ -181,7 +181,7 @@ export interface Switch { label: string; } -export enum GetStartedPageActions { +export enum OnboardingActions { AddFinishedStep = 'addFinishedStep', RemoveFinishedStep = 'removeFinishedStep', ToggleProduct = 'toggleProduct', diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx similarity index 90% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx index 624c8624d77e5..7570f94f7f0e2 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/index.tsx +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx @@ -16,8 +16,6 @@ import { import React from 'react'; import { css } from '@emotion/react'; -import { useUserName } from '../hooks/use_user_name'; - import { GET_STARTED_PAGE_TITLE, GET_STARTED_PAGE_SUBTITLE, @@ -28,12 +26,13 @@ import { CONTENT_WIDTH } from '../helpers'; import { ProductTierBadge } from './product_tier_badge'; import { useWelcomeHeaderStyles } from '../styles/welcome_header.styles'; import type { ProductTier } from '../configs'; -import { useGetStartedContext } from '../context/get_started_context'; +import { useProjectFeaturesUrl } from '../hooks/use_project_features_url'; +import { useCurrentUser } from '../../../../lib/kibana'; const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ productTier }) => { const { euiTheme } = useEuiTheme(); - const userName = useUserName(); - const { projectFeaturesUrl } = useGetStartedContext(); + const userName = useCurrentUser(); + const projectFeaturesUrl = useProjectFeaturesUrl(); const { headerStyles, headerTitleStyles, @@ -56,14 +55,14 @@ const WelcomeHeaderComponent: React.FC<{ productTier?: ProductTier }> = ({ produ width: ${CONTENT_WIDTH / 2}px; `} > - {userName && ( + {userName?.username && ( - {GET_STARTED_PAGE_TITLE(userName)} + {GET_STARTED_PAGE_TITLE(userName.username)} )} diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/product_tier_badge.test.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.test.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/product_tier_badge.test.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/product_tier_badge.tsx similarity index 100% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/product_tier_badge.tsx rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/product_tier_badge.tsx diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/translations.ts similarity index 79% rename from x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts rename to x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/translations.ts index aba7cf0902f6c..3406f5670b99a 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/get_started/welcome_header/translations.ts +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/translations.ts @@ -7,14 +7,14 @@ import { i18n } from '@kbn/i18n'; export const PRODUCT_TIER_ESSENTIAL = i18n.translate( - 'xpack.securitySolution.getStarted.welcomePanel.productTier.essential', + 'xpack.securitySolution.onboarding.welcomePanel.productTier.essential', { defaultMessage: `Essential`, } ); export const PRODUCT_TIER_COMPLETE = i18n.translate( - 'xpack.securitySolution.getStarted.welcomePanel.productTier.complete', + 'xpack.securitySolution.onboarding.welcomePanel.productTier.complete', { defaultMessage: `Complete`, } diff --git a/x-pack/plugins/security_solution/public/index.ts b/x-pack/plugins/security_solution/public/index.ts index a857177513482..61c56ad5a36c5 100644 --- a/x-pack/plugins/security_solution/public/index.ts +++ b/x-pack/plugins/security_solution/public/index.ts @@ -24,4 +24,4 @@ export { ViewDashboardSteps, EnablePrebuiltRulesSteps, ViewAlertsSteps, -} from './common/components/landing_page/get_started/types'; +} from './common/components/landing_page/onboarding/types'; diff --git a/x-pack/plugins/security_solution/public/mocks.ts b/x-pack/plugins/security_solution/public/mocks.ts index 5530764894561..61b458fcd87f5 100644 --- a/x-pack/plugins/security_solution/public/mocks.ts +++ b/x-pack/plugins/security_solution/public/mocks.ts @@ -38,7 +38,7 @@ const startMock = (): PluginStart => ({ ), setExtraRoutes: jest.fn(), getUpselling: () => upselling, - setGetStartedPageSettings: getStartedPageService, + setOnboardingPageSettings: getStartedPageService, }); export const securitySolutionMock = { diff --git a/x-pack/plugins/security_solution/public/plugin_contract.ts b/x-pack/plugins/security_solution/public/plugin_contract.ts index 7fca16c9c6f90..4b4ba256a81ea 100644 --- a/x-pack/plugins/security_solution/public/plugin_contract.ts +++ b/x-pack/plugins/security_solution/public/plugin_contract.ts @@ -20,14 +20,14 @@ import { OnboardingPageService } from './app/components/onboarding/onboarding_pa export class PluginContract { public componentsService: ContractComponentsService; public upsellingService: UpsellingService; - public getStartedPageService: OnboardingPageService; + public onboardingPageService: OnboardingPageService; public extraRoutes$: BehaviorSubject; public appLinksSwitcher: AppLinksSwitcher; public deepLinksFormatter?: DeepLinksFormatter; constructor(private readonly experimentalFeatures: ExperimentalFeatures) { this.extraRoutes$ = new BehaviorSubject([]); - this.getStartedPageService = new OnboardingPageService(); + this.onboardingPageService = new OnboardingPageService(); this.componentsService = new ContractComponentsService(); this.upsellingService = new UpsellingService(); this.appLinksSwitcher = (appLinks) => appLinks; @@ -38,9 +38,7 @@ export class PluginContract { extraRoutes$: this.extraRoutes$.asObservable(), getComponents$: this.componentsService.getComponents$.bind(this.componentsService), upselling: this.upsellingService, - getStartedPageSettings: this.getStartedPageService.getSettings.bind( - this.getStartedPageService - ), + onboarding: this.onboardingPageService, }; } @@ -59,7 +57,7 @@ export class PluginContract { public getStartContract(): PluginStart { return { - setGetStartedPageSettings: this.getStartedPageService, + setOnboardingPageSettings: this.onboardingPageService, getNavLinks$: () => navLinks$, setExtraRoutes: (extraRoutes) => this.extraRoutes$.next(extraRoutes), setComponents: (components) => { diff --git a/x-pack/plugins/security_solution/public/types.ts b/x-pack/plugins/security_solution/public/types.ts index 1975880a44787..bcfeba0b6d985 100644 --- a/x-pack/plugins/security_solution/public/types.ts +++ b/x-pack/plugins/security_solution/public/types.ts @@ -150,7 +150,7 @@ export interface ContractStartServices { extraRoutes$: Observable; getComponents$: GetComponents$; upselling: UpsellingService; - getStartedPageSettings: OnboardingPageService['getSettings']; + onboarding: OnboardingPageService; } export type StartServices = CoreStart & @@ -190,7 +190,7 @@ export interface PluginStart { setComponents: SetComponents; getBreadcrumbsNav$: () => Observable; getUpselling: () => UpsellingService; - setGetStartedPageSettings: OnboardingPageService; + setOnboardingPageSettings: OnboardingPageService; } export interface AppObservableLibs { diff --git a/x-pack/plugins/security_solution_ess/public/get_started/images/cloud1.svg b/x-pack/plugins/security_solution_ess/public/get_started/images/cloud1.svg deleted file mode 100644 index 2dc50321505ae..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/images/cloud1.svg +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/x-pack/plugins/security_solution_ess/public/get_started/images/endpoint1.svg b/x-pack/plugins/security_solution_ess/public/get_started/images/endpoint1.svg deleted file mode 100644 index bbbb1cd59182c..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/images/endpoint1.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/x-pack/plugins/security_solution_ess/public/get_started/images/siem1.svg b/x-pack/plugins/security_solution_ess/public/get_started/images/siem1.svg deleted file mode 100644 index 3d1d43bc47ac3..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/images/siem1.svg +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - - - - - - - - - - diff --git a/x-pack/plugins/security_solution_ess/public/get_started/index.tsx b/x-pack/plugins/security_solution_ess/public/get_started/index.tsx deleted file mode 100644 index 4b512fe2b9884..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/index.tsx +++ /dev/null @@ -1,13 +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 type React from 'react'; - -import { withServicesProvider, type Services } from '../common/services'; -import { GetStarted } from './lazy'; - -export const getSecurityGetStartedComponent = (services: Services): React.ComponentType => - withServicesProvider(GetStarted, services); diff --git a/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.test.tsx b/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.test.tsx deleted file mode 100644 index 153d279a6a06e..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.test.tsx +++ /dev/null @@ -1,47 +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 React from 'react'; -import { render } from '@testing-library/react'; -import { LandingCards } from './landing_cards'; -import { ADD_DATA_PATH } from '@kbn/security-solution-plugin/common'; -import { useVariation } from '../common/hooks/use_variation'; - -jest.mock('../common/hooks/use_variation'); -jest.mock('../common/services'); - -describe('LandingCards component', () => { - beforeEach(() => { - (useVariation as jest.Mock).mockReset(); - }); - - it('has add data links', () => { - const { getAllByText } = render(); - expect(getAllByText('Add security integrations')).toHaveLength(2); - }); - - describe.each(['header', 'footer'])('URLs at the %s', (place) => { - it('points to the default Add data URL', () => { - const { queryByTestId } = render(); - const link = queryByTestId(`add-integrations-${place}`); - expect(link?.getAttribute('href')).toBe(ADD_DATA_PATH); - }); - - it('points to the resolved Add data URL by useVariation', () => { - const customResolvedUrl = '/test/url'; - (useVariation as jest.Mock).mockImplementationOnce( - (cloudExperiments, featureFlagName, defaultValue, setter) => { - setter(customResolvedUrl); - } - ); - - const { queryByTestId } = render(); - const link = queryByTestId(`add-integrations-${place}`); - expect(link?.getAttribute('href')).toBe(customResolvedUrl); - }); - }); -}); diff --git a/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.tsx b/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.tsx deleted file mode 100644 index 91e3c2c5f1fc8..0000000000000 --- a/x-pack/plugins/security_solution_ess/public/get_started/landing_cards.tsx +++ /dev/null @@ -1,181 +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 React, { memo, useMemo, useState } from 'react'; -import { - EuiButton, - EuiCard, - EuiFlexGroup, - EuiFlexItem, - EuiPageHeader, - useEuiTheme, - type EuiThemeComputed, -} from '@elastic/eui'; -import { css } from '@emotion/react'; -import { ADD_DATA_PATH } from '@kbn/security-solution-plugin/common'; -import { useVariation } from '../common/hooks/use_variation'; -import * as i18n from './translations'; -import endpointSvg from './images/endpoint1.svg'; -import cloudSvg from './images/cloud1.svg'; -import siemSvg from './images/siem1.svg'; -import { useKibana } from '../common/services'; - -const imgUrls = { - cloud: cloudSvg, - siem: siemSvg, - endpoint: endpointSvg, -}; - -const headerCardStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } -`; - -const pageHeaderStyles = css` - h1 { - font-size: 18px; - } -`; - -const getFlexItemStyles = (euiTheme: EuiThemeComputed) => css` - background: ${euiTheme.colors.lightestShade}; - padding: 20px; -`; - -const cardStyles = css` - img { - margin-top: 20px; - max-width: 400px; - } -`; - -const footerStyles = css` - span.euiTitle { - font-size: 36px; - line-height: 100%; - } - max-width: 600px; - display: block; - margin: 20px auto 0; -`; - -export const LandingCards = memo(() => { - const { - http: { - basePath: { prepend }, - }, - cloudExperiments, - } = useKibana().services; - - const { euiTheme } = useEuiTheme(); - const [addIntegrationsUrl, setAddIntegrationsUrl] = useState(ADD_DATA_PATH); - useVariation( - cloudExperiments, - 'security-solutions.add-integrations-url', - ADD_DATA_PATH, - setAddIntegrationsUrl - ); - - const href = useMemo(() => prepend(addIntegrationsUrl), [prepend, addIntegrationsUrl]); - - return ( - - - - - - - {i18n.SIEM_CTA} - - } - css={headerCardStyles} - /> - - -