From c4e8a3dee440151b84415b4aab74b421f636878c Mon Sep 17 00:00:00 2001 From: Sergi Massaneda Date: Fri, 11 Oct 2024 21:00:26 +0200 Subject: [PATCH] [Security Solution] Onboarding redesign (#192247) ## Summary Issue: https://github.com/elastic/kibana/issues/189487?reload=1?reload=1 This PR is the final implementation of the Onboarding page redesign. It has been developed in collaboration with @angorayc and @agusruidiazgd, using this branch as a feature branch. It already includes 2 smaller PRs that have already been reviewed and approved by the @elastic/security-threat-hunting-explore team: - https://github.com/semd/kibana/pull/8 - https://github.com/semd/kibana/pull/9 ### Changes - Onboarding page architecture refactor ([issue](https://github.com/elastic/kibana/issues/174766)) - Fixes https://github.com/elastic/kibana/issues/183765 (from [this Meta issue](https://github.com/elastic/kibana/issues/183760)) --- - The progress bar has been removed progress bar --- - Card styles updated: - Icons updated to custom SVGs to have the correct color - Icon with circle background - Card internal content border removed | Old | New | | - | - | |Old styles|New styles| --- - Completed card styles updated: - Icon with green circle background | Old | New | | - | - | |Old styles complete|New styles complete| --- - Improved "Add data with integrations" card | Old | New | | - | - | |old integrations card|new integrations card| --- - New "Configure AI assistant" card in a new "Discover Elastic AI" group https://github.com/user-attachments/assets/39bd0dd4-88ba-47df-a77b-6b9b2a185cef --------- Co-authored-by: Elastic Machine Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Angela Chuang Co-authored-by: Agustina Nahir Ruidiaz (cherry picked from commit d39c75a837e705637adc329887bc3b30ad90e79c) --- .../security_solution/common/constants.ts | 7 +- .../public/app/app_routes.tsx | 9 +- .../onboarding/onboarding_page_service.ts | 55 --- .../security_solution/public/app_links.ts | 6 +- .../centered_loading_spinner.tsx | 30 ++ .../index.ts} | 2 +- .../empty_prompt/empty_prompt.test.tsx | 4 +- .../components/empty_prompt/empty_prompt.tsx | 8 +- .../components/landing_page/index.test.tsx | 26 -- .../common/components/landing_page/index.tsx | 17 - .../onboarding/__mocks__/product_switch.tsx | 15 - .../onboarding/__mocks__/storage.ts | 17 - .../onboarding/__mocks__/toggle_panel.tsx | 15 - .../landing_page/onboarding/badge.ts | 37 -- .../landing_page/onboarding/badges.test.ts | 19 - .../onboarding/card_item.test.tsx | 59 --- .../landing_page/onboarding/card_item.tsx | 113 ----- .../onboarding/card_step/__mocks__/index.tsx | 11 - .../content/add_integration_image.tsx | 26 -- .../card_step/content/content_wrapper.tsx | 22 - .../content/create_project_step_image.tsx | 19 - .../content/data_ingestion_hub_video.tsx | 77 ---- .../card_step/content/enable_rule_image.tsx | 19 - .../content/overview_video_description.tsx | 18 - .../card_step/content/video.test.tsx | 84 ---- .../onboarding/card_step/content/video.tsx | 89 ---- .../card_step/content/view_alerts_image.tsx | 19 - .../content/view_dashboard_image.tsx | 24 -- .../onboarding/card_step/helpers.test.ts | 57 --- .../onboarding/card_step/helpers.ts | 48 --- .../onboarding/card_step/index.test.tsx | 130 ------ .../onboarding/card_step/index.tsx | 175 -------- .../card_step/step_content.test.tsx | 55 --- .../onboarding/card_step/step_content.tsx | 99 ----- .../landing_page/onboarding/configs.ts | 39 -- .../context/__mocks__/step_context.tsx | 25 -- .../onboarding/context/step_context.tsx | 43 -- .../data_ingestion_hub_header/cards/card.tsx | 60 --- .../cards/header_cards.tsx | 64 --- .../cards/link_card/link_card.tsx | 43 -- .../cards/video_card/video_card.tsx | 75 ---- .../cards/video_card/video_modal.styles.ts | 29 -- .../cards/video_card/video_modal.test.tsx | 43 -- .../cards/video_card/video_modal.tsx | 80 ---- .../data_ingestion_hub_header/index.styles.ts | 68 --- .../data_ingestion_hub_header/index.test.tsx | 122 ------ .../data_ingestion_hub_header/index.tsx | 83 ---- .../data_ingestion_hub_header/translations.ts | 100 ----- .../landing_page/onboarding/footer/footer.ts | 56 --- .../landing_page/onboarding/footer/index.tsx | 42 -- .../onboarding/footer/translations.ts | 92 ----- .../landing_page/onboarding/helpers.test.ts | 344 ---------------- .../landing_page/onboarding/helpers.ts | 258 ------------ .../hooks/__mocks__/use_available_steps.ts | 24 -- .../hooks/__mocks__/use_product_types.ts | 11 - .../onboarding/hooks/use_available_steps.ts | 13 - .../hooks/use_check_step_completed.test.tsx | 86 ---- .../hooks/use_check_step_completed.tsx | 84 ---- .../onboarding/hooks/use_product_types.ts | 14 - .../hooks/use_project_features_url.ts | 14 - .../onboarding/hooks/use_projects_url.ts | 14 - .../onboarding/hooks/use_scroll.ts | 42 -- .../hooks/use_setup_sections.test.tsx | 70 ---- .../onboarding/hooks/use_setup_sections.tsx | 138 ------- .../hooks/use_toggle_panel.test.tsx | 389 ------------------ .../onboarding/hooks/use_toggle_panel.tsx | 269 ------------ .../onboarding/hooks/use_users_url.ts | 14 - .../images/connect_to_existing_sources.png | Bin 51948 -> 0 bytes .../onboarding/images/create_projects.png | Bin 81777 -> 0 bytes .../images/enable_prebuilt_rules.png | Bin 57083 -> 0 bytes .../landing_page/onboarding/images/launch.png | Bin 70261 -> 0 bytes .../onboarding/images/overview_video.svg | 10 - .../onboarding/images/view_alerts.png | Bin 52021 -> 0 bytes .../landing_page/onboarding/index.tsx | 18 - .../onboarding/onboarding.test.tsx | 140 ------- .../landing_page/onboarding/onboarding.tsx | 129 ------ .../onboarding_with_settings.test.tsx | 43 -- .../onboarding/onboarding_with_settings.tsx | 42 -- .../onboarding/product_switch.test.tsx | 74 ---- .../onboarding/product_switch.tsx | 80 ---- .../landing_page/onboarding/progress_bar.tsx | 46 --- .../landing_page/onboarding/reducer.test.ts | 242 ----------- .../landing_page/onboarding/reducer.tsx | 170 -------- .../landing_page/onboarding/sections.tsx | 151 ------- .../__mocks__/add_integration_callout.tsx | 11 - .../step_links/add_elastic_rules_button.tsx | 53 --- .../step_links/add_integration_buttons.tsx | 194 --------- .../step_links/add_integration_callout.tsx | 85 ---- .../onboarding/step_links/alerts_link.tsx | 65 --- .../step_links/dashboard_button.tsx | 63 --- .../step_links/manage_projects_button.tsx | 42 -- .../onboarding/step_links/translations.ts | 61 --- .../onboarding/step_links/types.ts | 43 -- .../landing_page/onboarding/storage.test.ts | 344 ---------------- .../landing_page/onboarding/storage.ts | 194 --------- .../styles/add_integrations_callout.styles.ts | 49 --- .../onboarding/styles/card_item.styles.ts | 32 -- .../onboarding/styles/card_step.styles.ts | 95 ----- .../onboarding/styles/current_plan.styles.ts | 40 -- .../onboarding/styles/footer.styles.ts | 53 --- .../onboarding/styles/onboarding.styles.ts | 40 -- .../onboarding/styles/step_content.styles.ts | 92 ----- .../styles/welcome_header.styles.ts | 62 --- .../onboarding/toggle_panel.test.tsx | 70 ---- .../landing_page/onboarding/toggle_panel.tsx | 72 ---- .../landing_page/onboarding/translations.ts | 290 ------------- .../landing_page/onboarding/types.ts | 231 ----------- .../welcome_header/current_plan.test.tsx | 95 ----- .../welcome_header/current_plan.tsx | 80 ---- .../current_plan_badge.test.tsx | 29 -- .../welcome_header/current_plan_badge.tsx | 31 -- .../onboarding/welcome_header/index.test.tsx | 96 ----- .../onboarding/welcome_header/index.tsx | 64 --- .../onboarding/welcome_header/translations.ts | 21 - .../security_route_page_wrapper/index.tsx | 46 ++- .../components/with_lazy_hook/index.tsx | 25 ++ .../public/common/constants.ts | 2 +- .../lib/telemetry/events/onboarding/types.ts | 5 +- .../plugins/security_solution/public/index.ts | 9 - .../public/lazy_sub_plugins.tsx | 2 + .../plugins/security_solution/public/mocks.ts | 8 +- .../__mocks__/onboarding_context.tsx | 28 ++ .../__mocks__/onboarding_context_mocks.ts | 16 + .../onboarding/components/onboarding.tsx | 56 +++ .../components/onboarding_banner/index.ts | 8 + .../onboarding_banner/onboarding_banner.tsx | 27 ++ .../components/onboarding_body/body_config.ts | 36 ++ .../cards/alerts/alerts_card.test.tsx | 57 +++ .../cards/alerts/alerts_card.tsx | 82 ++++ .../cards/alerts/images/alerts.png | Bin 0 -> 67523 bytes .../cards/alerts/images/alerts_icon.png | Bin 0 -> 3283 bytes .../onboarding_body/cards/alerts/index.ts | 25 ++ .../cards/alerts/translations.ts | 44 ++ .../cards/assistant/assistant_card.tsx | 77 ++++ .../assistant/assistant_check_complete.ts | 42 ++ .../assistant/connectors/connector_cards.tsx | 83 ++++ .../assistant/connectors/connector_setup.tsx | 147 +++++++ .../connectors/create_connector_popover.tsx | 48 +++ .../connectors/hooks/use_load_action_types.ts | 17 + .../cards/assistant}/constants.ts | 2 +- .../onboarding_body/cards/assistant/index.ts | 28 ++ .../cards/assistant/translations.ts | 44 ++ .../onboarding_body/cards/assistant/types.ts | 12 + .../attack_discover_card.test.tsx | 57 +++ .../attack_discovery_card.tsx | 86 ++++ .../images/attack_discovery.png} | Bin .../images/attack_discovery_icon.png | Bin 0 -> 4124 bytes .../cards/attack_discovery/index.ts | 25 ++ .../cards/attack_discovery/translations.ts | 44 ++ .../cards/common/card_callout.styles.ts} | 21 +- .../cards/common/card_callout.tsx | 46 +++ .../common/card_content_image_panel.styles.ts | 28 ++ .../cards/common/card_content_image_panel.tsx | 30 ++ .../cards/common/card_content_panel.tsx | 32 ++ .../cards/common/card_link_button.tsx | 34 ++ .../cards/dashboards/dashboards_card.test.tsx | 76 ++++ .../cards/dashboards/dashboards_card.tsx | 90 ++++ .../cards/dashboards/images/dashboards.png | Bin 0 -> 49520 bytes .../dashboards/images/dashboards_icon.png | Bin 0 -> 1397 bytes .../onboarding_body/cards/dashboards/index.ts | 26 ++ .../cards/dashboards/translations.ts | 41 ++ .../__mocks__/integration_card_grid_tabs.tsx} | 2 +- .../__mocks__/package_list_grid.tsx} | 3 +- .../__mocks__/agent_required_callout.tsx | 10 + .../__mocks__/agentless_available_callout.tsx | 10 + .../callouts/__mocks__/endpoint_callout.tsx} | 3 +- .../installed_integrations_callout.tsx} | 4 +- .../integration_card_top_callout.tsx | 11 + .../manage_integrations_callout.tsx} | 4 +- .../callouts/agent_required_callout.test.tsx | 33 ++ .../callouts/agent_required_callout.tsx | 57 +++ .../agentless_available_callout.test.tsx | 65 +++ .../callouts/agentless_available_callout.tsx | 74 ++++ .../callouts/endpoint_callout.tsx | 68 +++ .../installed_integrations_callout.test.tsx | 39 ++ .../installed_integrations_callout.tsx | 32 ++ .../integration_card_top_callout.test.tsx | 81 ++++ .../callouts/integration_card_top_callout.tsx | 53 +++ .../manage_integrations_callout.test.tsx | 48 +++ .../callouts/manage_integrations_callout.tsx | 63 +++ .../cards/integrations/constants.ts | 26 ++ .../integrations/images/integrations_icon.png | Bin 0 -> 1729 bytes .../cards/integrations/index.ts | 32 ++ .../integration_card_grid_tabs.test.tsx | 169 ++++++++ .../integration_card_grid_tabs.tsx | 207 ++++++++++ .../integrations/integration_tabs_configs.ts | 83 ++++ .../integrations/integrations_card.test.tsx | 31 ++ .../cards/integrations/integrations_card.tsx | 35 ++ .../integrations_check_complete.test.ts | 106 +++++ .../integrations_check_complete.ts | 68 +++ .../cards/integrations/types.ts | 32 ++ .../use_integration_card_list.test.ts | 76 ++++ .../integrations/use_integration_card_list.ts | 133 ++++++ .../cards/rules/images/rules.png | Bin 0 -> 71094 bytes .../cards/rules/images/rules_icon.png | Bin 0 -> 1251 bytes .../onboarding_body/cards/rules/index.ts | 27 ++ .../cards/rules/rules_card.test.tsx | 57 +++ .../cards/rules/rules_card.tsx | 77 ++++ .../cards/rules/rules_check_complete.ts} | 34 +- .../cards/rules/translations.ts | 44 ++ .../hooks/use_body_config.test.ts | 117 ++++++ .../onboarding_body/hooks/use_body_config.ts | 55 +++ .../hooks/use_completed_cards.test.ts | 217 ++++++++++ .../hooks/use_completed_cards.ts | 144 +++++++ .../hooks/use_expanded_card.test.ts | 170 ++++++++ .../hooks/use_expanded_card.ts | 83 ++++ .../components/onboarding_body/index.ts} | 2 +- .../onboarding_body/onboarding_body.test.tsx | 139 +++++++ .../onboarding_body/onboarding_body.tsx | 92 +++++ .../onboarding_body/onboarding_card_group.tsx | 24 ++ .../onboarding_card_panel.styles.ts | 67 +++ .../onboarding_card_panel.test.tsx | 97 +++++ .../onboarding_body/onboarding_card_panel.tsx | 111 +++++ .../onboarding_body/translations.ts | 21 + .../components/onboarding_context.tsx | 62 +++ .../onboarding_footer/footer_items.ts | 81 ++++ .../onboarding_footer}/images/demo.png | Bin .../images/documentation.png | Bin .../onboarding_footer}/images/forum.png | Bin .../onboarding_footer}/images/labs.png | Bin .../components/onboarding_footer/index.ts | 8 + .../onboarding_footer.styles.ts} | 22 +- .../onboarding_footer/onboarding_footer.tsx | 37 ++ .../cards/common/link_card.styles.ts} | 31 +- .../cards/common/link_card.test.tsx} | 24 +- .../cards/common/link_card.tsx | 62 +++ .../cards/demo_card/demo_card.tsx | 26 ++ .../cards/demo_card/images/demo_card.png} | Bin .../demo_card/images/demo_card_dark.png} | Bin .../cards/demo_card/index.ts | 8 + .../cards/demo_card/translations.ts | 29 ++ .../teammates_card/images/teammates_card.png} | Bin .../images/teammates_card_dark.png} | Bin .../cards/teammates_card/index.ts | 8 + .../cards/teammates_card/teammates_card.tsx | 30 ++ .../cards/teammates_card/translations.ts | 29 ++ .../cards/video_card/images/video_card.png} | Bin .../video_card/images/video_card_dark.png} | Bin .../cards/video_card/index.ts | 8 + .../cards/video_card/translations.ts | 58 +++ .../cards/video_card/video_card.tsx | 37 ++ .../cards/video_card/video_modal.tsx | 83 ++++ .../images/header_rocket.png} | Bin .../images/header_rocket_dark.png} | Bin .../components/onboarding_header/index.ts | 8 + .../onboarding_header.styles.ts | 22 + .../onboarding_header/onboarding_header.tsx | 79 ++++ .../onboarding_header/translations.ts | 28 ++ .../public/onboarding/constants.ts | 16 + .../hooks/use_onboarding_service.ts | 10 + .../onboarding/hooks/use_stored_state.ts | 70 ++++ .../public/onboarding/index.ts | 19 + .../public/onboarding/jest.config.js | 19 + .../public/onboarding/links.ts | 27 ++ .../public/onboarding/routes.tsx | 18 + .../public/onboarding/service/index.ts | 8 + .../onboarding/service/onboarding_service.ts | 38 ++ .../public/onboarding/types.ts | 122 ++++++ .../public/overview/links.ts | 25 +- .../public/overview/pages/landing.test.tsx | 31 -- .../public/overview/pages/landing.tsx | 32 -- .../public/overview/routes.tsx | 14 - .../security_solution/public/plugin.tsx | 2 + .../public/plugin_contract.ts | 10 +- .../plugins/security_solution/public/types.ts | 9 +- .../public/onboarding/onboarding.ts | 27 +- .../public/onboarding/onboarding.ts | 23 +- .../public/plugin.ts | 12 +- .../translations/translations/fr-FR.json | 54 --- .../translations/translations/ja-JP.json | 54 --- .../translations/translations/zh-CN.json | 54 --- .../functional/services/svl_sec_navigation.ts | 2 +- 272 files changed, 5949 insertions(+), 8476 deletions(-) delete mode 100644 x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx rename x-pack/plugins/security_solution/public/common/components/{landing_page/onboarding/hooks/__mocks__/use_project_features_url.ts => centered_loading_spinner/index.ts} (77%) delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/add_integration_image.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/create_project_step_image.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/enable_rule_image.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/overview_video_description.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/video.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_alerts_image.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/view_dashboard_image.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.test.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/helpers.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/step_content.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/configs.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/__mocks__/step_context.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/context/step_context.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/header_cards.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/link_card/link_card.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_card.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/index.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/index.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/translations.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/footer.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/footer/translations.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.test.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/helpers.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_available_steps.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_product_types.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_available_steps.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_check_step_completed.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_product_types.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_project_features_url.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_projects_url.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_scroll.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_setup_sections.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_toggle_panel.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_users_url.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/connect_to_existing_sources.png delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/create_projects.png delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/enable_prebuilt_rules.png delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/launch.png delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/overview_video.svg delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/view_alerts.png delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/onboarding_with_settings.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/product_switch.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/progress_bar.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.test.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/reducer.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/sections.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/__mocks__/add_integration_callout.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_elastic_rules_button.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_buttons.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/add_integration_callout.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/alerts_link.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/dashboard_button.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/manage_projects_button.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/translations.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/step_links/types.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/storage.test.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/storage.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/add_integrations_callout.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_item.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/card_step.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/current_plan.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/footer.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/onboarding.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/step_content.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/styles/welcome_header.styles.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/toggle_panel.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/translations.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/types.ts delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/current_plan.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/current_plan.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/current_plan_badge.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/current_plan_badge.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/index.tsx delete mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/welcome_header/translations.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/with_lazy_hook/index.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/__mocks__/onboarding_context.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/__mocks__/onboarding_context_mocks.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_banner/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_banner/onboarding_banner.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/body_config.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/alerts_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/images/alerts_icon.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/alerts/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/assistant_check_complete.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/connectors/connector_cards.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/connectors/connector_setup.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/connectors/create_connector_popover.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/connectors/hooks/use_load_action_types.ts rename x-pack/plugins/security_solution/public/{common/components/empty_prompt => onboarding/components/onboarding_body/cards/assistant}/constants.ts (76%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/assistant/types.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/attack_discover_card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/attack_discovery_card.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/analyze_data_using_dashboards.png => onboarding/components/onboarding_body/cards/attack_discovery/images/attack_discovery.png} (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/images/attack_discovery_icon.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/attack_discovery/translations.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/styles/progress_bar.style.ts => onboarding/components/onboarding_body/cards/common/card_callout.styles.ts} (52%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_image_panel.styles.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_image_panel.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_content_panel.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/card_link_button.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/dashboards_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/images/dashboards_icon.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/dashboards/translations.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/card_step/content/__mocks__/content_wrapper.tsx => onboarding/components/onboarding_body/cards/integrations/__mocks__/integration_card_grid_tabs.tsx} (74%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/__mocks__/onboarding.tsx => onboarding/components/onboarding_body/cards/integrations/__mocks__/package_list_grid.tsx} (78%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/agent_required_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/agentless_available_callout.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/__mocks__/index.tsx => onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/endpoint_callout.tsx} (76%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/__mocks__/onboarding_with_settings.tsx => onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/installed_integrations_callout.tsx} (72%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/integration_card_top_callout.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/__mocks__/index.tsx => onboarding/components/onboarding_body/cards/integrations/callouts/__mocks__/manage_integrations_callout.tsx} (71%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/agent_required_callout.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/agent_required_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/agentless_available_callout.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/agentless_available_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/endpoint_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/installed_integrations_callout.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/installed_integrations_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/integration_card_top_callout.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/integration_card_top_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/manage_integrations_callout.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/callouts/manage_integrations_callout.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/constants.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/images/integrations_icon.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integration_card_grid_tabs.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integration_card_grid_tabs.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integration_tabs_configs.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integrations_card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integrations_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integrations_check_complete.test.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/integrations_check_complete.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/types.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/use_integration_card_list.test.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/integrations/use_integration_card_list.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/images/rules_icon.png create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/rules_card.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/apis/index.ts => onboarding/components/onboarding_body/cards/rules/rules_check_complete.ts} (50%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/cards/rules/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.test.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_completed_cards.test.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_completed_cards.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_expanded_card.test.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_expanded_card.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/hooks/__mocks__/use_projects_url.ts => onboarding/components/onboarding_body/index.ts} (79%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_group.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.styles.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.test.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_card_panel.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_body/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_context.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_footer/footer_items.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding => onboarding/components/onboarding_footer}/images/demo.png (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding => onboarding/components/onboarding_footer}/images/documentation.png (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding => onboarding/components/onboarding_footer}/images/forum.png (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding => onboarding/components/onboarding_footer}/images/labs.png (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_footer/index.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/styles/current_plan_badge.styles.ts => onboarding/components/onboarding_footer/onboarding_footer.styles.ts} (51%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_footer/onboarding_footer.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.styles.ts => onboarding/components/onboarding_header/cards/common/link_card.styles.ts} (66%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.test.tsx => onboarding/components/onboarding_header/cards/common/link_card.test.tsx} (71%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/demo_card.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/data_ingestion_hub_demo.png => onboarding/components/onboarding_header/cards/demo_card/images/demo_card.png} (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/dark_data_ingestion_hub_demo.png => onboarding/components/onboarding_header/cards/demo_card/images/demo_card_dark.png} (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/translations.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/data_ingestion_hub_teammates.png => onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card.png} (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/dark_data_ingestion_hub_teammates.png => onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card_dark.png} (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/teammates_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/translations.ts rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/data_ingestion_hub_video.png => onboarding/components/onboarding_header/cards/video_card/images/video_card.png} (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/dark_data_ingestion_hub_video.png => onboarding/components/onboarding_header/cards/video_card/images/video_card_dark.png} (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_card.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_modal.tsx rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/rocket.png => onboarding/components/onboarding_header/images/header_rocket.png} (100%) rename x-pack/plugins/security_solution/public/{common/components/landing_page/onboarding/images/dark_rocket.png => onboarding/components/onboarding_header/images/header_rocket_dark.png} (100%) create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.styles.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/onboarding_header.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/components/onboarding_header/translations.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/constants.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/hooks/use_onboarding_service.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/hooks/use_stored_state.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/jest.config.js create mode 100644 x-pack/plugins/security_solution/public/onboarding/links.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/routes.tsx create mode 100644 x-pack/plugins/security_solution/public/onboarding/service/index.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/service/onboarding_service.ts create mode 100644 x-pack/plugins/security_solution/public/onboarding/types.ts delete mode 100644 x-pack/plugins/security_solution/public/overview/pages/landing.test.tsx delete mode 100644 x-pack/plugins/security_solution/public/overview/pages/landing.tsx diff --git a/x-pack/plugins/security_solution/common/constants.ts b/x-pack/plugins/security_solution/common/constants.ts index f947369112033..35f2b8ae177c0 100644 --- a/x-pack/plugins/security_solution/common/constants.ts +++ b/x-pack/plugins/security_solution/common/constants.ts @@ -27,8 +27,9 @@ export const APP_NAME = 'Security' as const; export const APP_ICON = 'securityAnalyticsApp' as const; export const APP_ICON_SOLUTION = 'logoSecurity' as const; export const APP_PATH = `/app/security` as const; -export const ADD_DATA_PATH = `/app/integrations/browse/security`; -export const ADD_THREAT_INTELLIGENCE_DATA_PATH = `/app/integrations/browse/threat_intel`; +export const APP_INTEGRATIONS_PATH = `/app/integrations` as const; +export const ADD_DATA_PATH = `${APP_INTEGRATIONS_PATH}/browse/security`; +export const ADD_THREAT_INTELLIGENCE_DATA_PATH = `${APP_INTEGRATIONS_PATH}/browse/threat_intel`; export const DEFAULT_BYTES_FORMAT = 'format:bytes:defaultPattern' as const; export const DEFAULT_DATE_FORMAT = 'dateFormat' as const; export const DEFAULT_DATE_FORMAT_TZ = 'dateFormat:tz' as const; @@ -85,7 +86,7 @@ export const MANAGE_PATH = '/manage' as const; export const TIMELINES_PATH = '/timelines' as const; export const CASES_PATH = '/cases' as const; export const OVERVIEW_PATH = '/overview' as const; -export const LANDING_PATH = '/get_started' as const; +export const ONBOARDING_PATH = '/get_started' as const; export const DATA_QUALITY_PATH = '/data_quality' as const; export const DETECTION_RESPONSE_PATH = '/detection_response' as const; export const DETECTIONS_PATH = '/detections' as const; diff --git a/x-pack/plugins/security_solution/public/app/app_routes.tsx b/x-pack/plugins/security_solution/public/app/app_routes.tsx index 07a17b4f0f00b..4b3913bfb4d3c 100644 --- a/x-pack/plugins/security_solution/public/app/app_routes.tsx +++ b/x-pack/plugins/security_solution/public/app/app_routes.tsx @@ -10,7 +10,12 @@ import type { RouteProps } from 'react-router-dom'; import { Redirect } from 'react-router-dom'; import { Routes, Route } from '@kbn/shared-ux-router'; import type { Capabilities } from '@kbn/core/public'; -import { CASES_FEATURE_ID, CASES_PATH, LANDING_PATH, SERVER_APP_ID } from '../../common/constants'; +import { + CASES_FEATURE_ID, + CASES_PATH, + ONBOARDING_PATH, + SERVER_APP_ID, +} from '../../common/constants'; import { NotFoundPage } from './404'; import type { StartServices } from '../types'; @@ -33,7 +38,7 @@ AppRoutes.displayName = 'AppRoutes'; export const RedirectRoute = React.memo<{ capabilities: Capabilities }>(({ capabilities }) => { if (capabilities[SERVER_APP_ID].show === true) { - return ; + return ; } if (capabilities[CASES_FEATURE_ID].read_cases === true) { return ; 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 deleted file mode 100644 index 16448b92d3a4f..0000000000000 --- a/x-pack/plugins/security_solution/public/app/components/onboarding/onboarding_page_service.ts +++ /dev/null @@ -1,55 +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 { Observable } from 'rxjs'; -import { BehaviorSubject } from 'rxjs'; -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; - private projectsUrlSubject$: BehaviorSubject; - private usersUrlSubject$: BehaviorSubject; - private projectFeaturesUrlSubject$: BehaviorSubject; - private availableStepsSubject$: BehaviorSubject; - - public productTypes$: Observable; - public projectsUrl$: Observable; - public usersUrl$: Observable; - public projectFeaturesUrl$: Observable; - public availableSteps$: Observable; - - constructor() { - this.productTypesSubject$ = new BehaviorSubject(undefined); - this.projectsUrlSubject$ = new BehaviorSubject(undefined); - this.usersUrlSubject$ = new BehaviorSubject(undefined); - this.projectFeaturesUrlSubject$ = new BehaviorSubject(undefined); - this.availableStepsSubject$ = new BehaviorSubject([]); - - this.productTypes$ = this.productTypesSubject$.asObservable(); - this.projectsUrl$ = this.projectsUrlSubject$.asObservable(); - this.usersUrl$ = this.usersUrlSubject$.asObservable(); - this.projectFeaturesUrl$ = this.projectFeaturesUrlSubject$.asObservable(); - this.availableSteps$ = this.availableStepsSubject$.asObservable(); - } - - setProductTypes(productTypes: SecurityProductTypes) { - this.productTypesSubject$.next(productTypes); - } - setProjectFeaturesUrl(projectFeaturesUrl: string | undefined) { - this.projectFeaturesUrlSubject$.next(projectFeaturesUrl); - } - setUsersUrl(userUrl: string | undefined) { - this.usersUrlSubject$.next(userUrl); - } - setProjectsUrl(projectsUrl: string | undefined) { - this.projectsUrlSubject$.next(projectsUrl); - } - setAvailableSteps(availableSteps: StepId[]) { - this.availableStepsSubject$.next(availableSteps); - } -} diff --git a/x-pack/plugins/security_solution/public/app_links.ts b/x-pack/plugins/security_solution/public/app_links.ts index 334209b744580..481b58949ed24 100644 --- a/x-pack/plugins/security_solution/public/app_links.ts +++ b/x-pack/plugins/security_solution/public/app_links.ts @@ -16,7 +16,7 @@ import { links as timelinesLinks } from './timelines/links'; import { links as casesLinks } from './cases/links'; import { links as managementLinks, getManagementFilteredLinks } from './management/links'; import { exploreLinks } from './explore/links'; -import { gettingStartedLinks } from './overview/links'; +import { onboardingLinks } from './onboarding/links'; import { findingsLinks } from './cloud_security_posture/links'; import type { StartPlugins } from './types'; import { dashboardsLinks } from './dashboards/links'; @@ -34,7 +34,7 @@ export const appLinks: AppLinkItems = Object.freeze([ indicatorsLinks, exploreLinks, rulesLinks, - gettingStartedLinks, + onboardingLinks, managementLinks, notesLink, ]); @@ -55,7 +55,7 @@ export const getFilteredLinks = async ( indicatorsLinks, exploreLinks, rulesLinks, - gettingStartedLinks, + onboardingLinks, managementFilteredLinks, notesLink, ]); diff --git a/x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx b/x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx new file mode 100644 index 0000000000000..9e12d785bf32a --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/centered_loading_spinner.tsx @@ -0,0 +1,30 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { useMemo } from 'react'; +import { EuiLoadingSpinner, useEuiTheme, type EuiLoadingSpinnerProps } from '@elastic/eui'; + +interface CenteredLoadingSpinnerProps extends EuiLoadingSpinnerProps { + topOffset?: string; +} + +export const CenteredLoadingSpinner = React.memo( + ({ topOffset, ...euiLoadingSpinnerProps }) => { + const { euiTheme } = useEuiTheme(); + const style = useMemo( + () => ({ + display: 'flex', + margin: `${euiTheme.size.xl} auto`, + ...(topOffset && { marginTop: topOffset }), + }), + [topOffset, euiTheme] + ); + + return ; + } +); +CenteredLoadingSpinner.displayName = 'CenteredLoadingSpinner'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_project_features_url.ts b/x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/index.ts similarity index 77% rename from x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_project_features_url.ts rename to x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/index.ts index dc08286e35d25..2d263a0773cc7 100644 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/__mocks__/use_project_features_url.ts +++ b/x-pack/plugins/security_solution/public/common/components/centered_loading_spinner/index.ts @@ -5,4 +5,4 @@ * 2.0. */ -export const useProjectFeaturesUrl = jest.fn(() => 'mocked_user_name'); +export { CenteredLoadingSpinner } from './centered_loading_spinner'; diff --git a/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.test.tsx b/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.test.tsx index c64d61d2bd226..d3982d005ba89 100644 --- a/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.test.tsx +++ b/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.test.tsx @@ -10,7 +10,7 @@ import { fireEvent, render } from '@testing-library/react'; import { EmptyPromptComponent } from './empty_prompt'; import { SecurityPageName } from '../../../../common'; import { useNavigateTo } from '../../lib/kibana'; -import { AddIntegrationsSteps } from '../landing_page/onboarding/types'; +import { OnboardingCardId } from '../../../onboarding/constants'; const mockNavigateTo = jest.fn(); const mockUseNavigateTo = useNavigateTo as jest.Mock; @@ -37,7 +37,7 @@ describe('EmptyPromptComponent component', () => { fireEvent.click(link); expect(mockNavigateTo).toBeCalledWith({ deepLinkId: SecurityPageName.landing, - path: `#${AddIntegrationsSteps.connectToDataSources}`, + path: `#${OnboardingCardId.integrations}`, }); }); }); diff --git a/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx b/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx index 6b36f64d27ea4..4cf9bcbb4d774 100644 --- a/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx +++ b/x-pack/plugins/security_solution/public/common/components/empty_prompt/empty_prompt.tsx @@ -16,6 +16,7 @@ import { type EuiThemeComputed, } from '@elastic/eui'; import { css } from '@emotion/react'; +import { OnboardingCardId } from '../../../onboarding/constants'; import { SecurityPageName } from '../../../../common'; import * as i18n from './translations'; @@ -23,8 +24,7 @@ import endpointSvg from './images/endpoint1.svg'; import cloudSvg from './images/cloud1.svg'; import siemSvg from './images/siem1.svg'; import { useNavigateTo } from '../../lib/kibana'; -import { VIDEO_SOURCE } from './constants'; -import { AddIntegrationsSteps } from '../landing_page/onboarding/types'; +import { ONBOARDING_VIDEO_SOURCE } from '../../constants'; const imgUrls = { cloud: cloudSvg, @@ -75,7 +75,7 @@ export const EmptyPromptComponent = memo(() => { const navigateToAddIntegrations = useCallback(() => { navigateTo({ deepLinkId: SecurityPageName.landing, - path: `#${AddIntegrationsSteps.connectToDataSources}`, + path: `#${OnboardingCardId.integrations}`, }); }, [navigateTo]); @@ -115,7 +115,7 @@ export const EmptyPromptComponent = memo(() => { referrerPolicy="no-referrer" sandbox="allow-scripts allow-same-origin" scrolling="no" - src={VIDEO_SOURCE} + src={ONBOARDING_VIDEO_SOURCE} title={i18n.SIEM_HEADER} width="100%" /> 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 deleted file mode 100644 index 25097cddbd1cc..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.test.tsx +++ /dev/null @@ -1,26 +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 { LandingPageComponent } from '.'; - -jest.mock('../../../sourcerer/containers', () => ({ - useSourcererDataView: jest.fn().mockReturnValue({ indicesExist: false }), -})); -jest.mock('./onboarding'); - -describe('LandingPageComponent', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('renders the onboarding component', () => { - const { queryByTestId } = render(); - - expect(queryByTestId('onboarding-with-settings')).toBeInTheDocument(); - }); -}); 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 deleted file mode 100644 index 669b7497a8403..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/index.tsx +++ /dev/null @@ -1,17 +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 } from 'react'; -import { useSourcererDataView } from '../../../sourcerer/containers'; -import { Onboarding } from './onboarding'; - -export const LandingPageComponent = memo(() => { - const { indicesExist } = useSourcererDataView(); - return ; -}); - -LandingPageComponent.displayName = 'LandingPageComponent'; diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx deleted file mode 100644 index 8b98ffe3cf6ea..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/product_switch.tsx +++ /dev/null @@ -1,15 +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 { PropsWithChildren } from 'react'; -import React from 'react'; - -export const ProductSwitch = jest - .fn() - .mockImplementation(({ children }: PropsWithChildren) => ( -
{children}
- )); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts deleted file mode 100644 index e02a83572a17f..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/storage.ts +++ /dev/null @@ -1,17 +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. - */ - -export const mockGetAllFinishedStepsFromStorage = jest.fn(() => ({})); -export const mockGetFinishedStepsFromStorageByCardId = jest.fn(() => []); -export const mockGetActiveProductsFromStorage = jest.fn(() => []); -export const mockToggleActiveProductsInStorage = jest.fn(); -export const mockResetAllExpandedCardStepsToStorage = jest.fn(); -export const mockAddFinishedStepToStorage = jest.fn(); -export const mockRemoveFinishedStepFromStorage = jest.fn(); -export const mockAddExpandedCardStepToStorage = jest.fn(); -export const mockRemoveExpandedCardStepFromStorage = jest.fn(); -export const mockGetAllExpandedCardStepsFromStorage = jest.fn(() => ({})); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx deleted file mode 100644 index e297e119dfffe..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/__mocks__/toggle_panel.tsx +++ /dev/null @@ -1,15 +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 { PropsWithChildren } from 'react'; -import React from 'react'; - -export const TogglePanel = jest - .fn() - .mockImplementation(({ children }: PropsWithChildren) => ( -
{children}
- )); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts deleted file mode 100644 index 2cd0e0a20a7f8..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badge.ts +++ /dev/null @@ -1,37 +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 { ProductLine } from './configs'; -import { PRODUCT_BADGE_ANALYTICS, PRODUCT_BADGE_CLOUD, PRODUCT_BADGE_EDR } from './translations'; -import type { Badge } from './types'; -import { BadgeId } from './types'; - -export const analyticsBadge: Badge = { - id: BadgeId.analytics, - name: PRODUCT_BADGE_ANALYTICS, -}; - -export const cloudBadge: Badge = { - id: BadgeId.cloud, - name: PRODUCT_BADGE_CLOUD, -}; - -export const edrBadge: Badge = { - id: BadgeId.edr, - name: PRODUCT_BADGE_EDR, -}; - -const productBadges: Record = { - [ProductLine.security]: analyticsBadge, - [ProductLine.cloud]: cloudBadge, - [ProductLine.endpoint]: edrBadge, -}; - -export const getProductBadges = (productLineRequired?: ProductLine[] | undefined): Badge[] => - (productLineRequired ?? [ProductLine.security, ProductLine.cloud, ProductLine.endpoint]).map( - (product) => productBadges[product] - ); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts deleted file mode 100644 index 6921389d67149..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/badges.test.ts +++ /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 { analyticsBadge, cloudBadge, edrBadge, getProductBadges } from './badge'; -import { ProductLine } from './configs'; - -describe('getProductBadges', () => { - test('should return all badges if no productLineRequired is passed', () => { - expect(getProductBadges()).toEqual([analyticsBadge, cloudBadge, edrBadge]); - }); - - test('should return only the badges for the productLineRequired passed', () => { - expect(getProductBadges([ProductLine.cloud])).toEqual([cloudBadge]); - }); -}); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx deleted file mode 100644 index c0730847c5e43..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.test.tsx +++ /dev/null @@ -1,59 +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 { CardItem } from './card_item'; -import type { ExpandedCardSteps, StepId } from './types'; - -import { SectionId, ViewDashboardSteps, AddAndValidateYourDataCardsId } from './types'; -jest.mock('./card_step'); - -describe('CardItemComponent', () => { - const finishedSteps = new Set([]) as Set; - const onStepClicked = jest.fn(); - const toggleTaskCompleteStatus = jest.fn(); - const expandedCardSteps = { - [AddAndValidateYourDataCardsId.viewDashboards]: { - isExpanded: false, - expandedSteps: [] as StepId[], - }, - } as ExpandedCardSteps; - - it('should render card', () => { - const { getByTestId } = render( - - ); - - const cardTitle = getByTestId(AddAndValidateYourDataCardsId.viewDashboards); - expect(cardTitle).toBeInTheDocument(); - }); - - it('should not render card when no active steps', () => { - const { queryByText } = render( - - ); - - const cardTitle = queryByText('Introduction'); - expect(cardTitle).not.toBeInTheDocument(); - }); -}); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx deleted file mode 100644 index e7dbdfd4e318a..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_item.tsx +++ /dev/null @@ -1,113 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiFlexGroup, EuiFlexItem, EuiPanel } from '@elastic/eui'; - -import React, { useMemo, useCallback } from 'react'; - -import classnames from 'classnames'; -import type { - CardId, - ExpandedCardSteps, - ToggleTaskCompleteStatus, - OnStepClicked, - SectionId, - StepId, -} from './types'; -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; - expandedCardSteps: ExpandedCardSteps; - finishedSteps: Set; - toggleTaskCompleteStatus: ToggleTaskCompleteStatus; - onStepClicked: OnStepClicked; - sectionId: SectionId; -}> = ({ - activeStepIds, - cardId, - expandedCardSteps, - finishedSteps, - toggleTaskCompleteStatus, - onStepClicked, - sectionId, -}) => { - const isExpandedCard = expandedCardSteps[cardId].isExpanded; - - const cardItem = useMemo(() => getCard({ cardId, sectionId }), [cardId, sectionId]); - const expandedSteps = useMemo( - () => new Set(expandedCardSteps[cardId]?.expandedSteps ?? []), - [cardId, expandedCardSteps] - ); - const cardItemPanelStyle = useCardItemStyles(); - - const cardClassNames = classnames( - 'card-item', - { - 'card-expanded': isExpandedCard, - }, - cardItemPanelStyle - ); - - const getCardStep = useCallback( - (stepId: StepId) => cardItem?.steps?.find((step) => step.id === stepId), - [cardItem?.steps] - ); - const steps = useMemo( - () => - activeStepIds?.reduce((acc, stepId) => { - const step = getCardStep(stepId); - if (step && cardItem) { - acc.push( - - ); - } - return acc; - }, []), - [ - activeStepIds, - cardItem, - expandedSteps, - finishedSteps, - getCardStep, - onStepClicked, - sectionId, - toggleTaskCompleteStatus, - ] - ); - - return cardItem && activeStepIds ? ( - - - {steps} - - - ) : null; -}; - -CardItemComponent.displayName = 'CardItemComponent'; -export const CardItem = React.memo(CardItemComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx deleted file mode 100644 index 73198936a1e79..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/__mocks__/index.tsx +++ /dev/null @@ -1,11 +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'; - -export const CardStep = jest - .fn() - .mockReturnValue(({ title }: { title: string }) =>
{title}
); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/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 deleted file mode 100644 index b9917c40e4056..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/add_integration_image.tsx +++ /dev/null @@ -1,26 +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 connectToDataSources from '../../images/connect_to_existing_sources.png'; -import { ADD_INTEGRATIONS_IMAGE_TITLE } from '../../translations'; -import { ContentWrapper } from './content_wrapper'; - -const AddIntegrationsImageComponent = () => { - return ( - - {ADD_INTEGRATIONS_IMAGE_TITLE} - - ); -}; - -export const AddIntegrationsImage = React.memo(AddIntegrationsImageComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx deleted file mode 100644 index 7f67817d71d42..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/content_wrapper.tsx +++ /dev/null @@ -1,22 +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 classnames from 'classnames'; -import React from 'react'; -import { useStepContentStyles } from '../../styles/step_content.styles'; - -const ContentWrapperComponent: React.FC<{ children: React.ReactElement; shadow?: boolean }> = ({ - children, - shadow = true, -}) => { - const { getRightContentStyles } = useStepContentStyles(); - const rightContentStyles = getRightContentStyles({ shadow }); - const rightPanelContentClassNames = classnames('right-panel-content', rightContentStyles); - return
{children}
; -}; - -export const ContentWrapper = React.memo(ContentWrapperComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/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 deleted file mode 100644 index 268863033f9e8..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/create_project_step_image.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 from 'react'; -import createProjects from '../../images/create_projects.png'; -import { CREATE_PROJECT_TITLE } from '../../translations'; -import { ContentWrapper } from './content_wrapper'; - -const CreateProjectImageComponent = () => ( - - {CREATE_PROJECT_TITLE} - -); - -export const CreateProjectImage = React.memo(CreateProjectImageComponent); diff --git a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx deleted file mode 100644 index 181d4a797ebbc..0000000000000 --- a/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx +++ /dev/null @@ -1,77 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import { EuiFlexGroup, EuiFlexItem, EuiIcon, useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/react'; -import React, { useCallback } from 'react'; -import { INGESTION_HUB_VIDEO_SOURCE } from '../../../../../constants'; -import { WATCH_VIDEO_BUTTON_TITLE } from '../../translations'; - -const VIDEO_CONTENT_HEIGHT = 309; - -const DataIngestionHubVideoComponent: React.FC = () => { - const ref = React.useRef(null); - const [isVideoPlaying, setIsVideoPlaying] = React.useState(false); - const { euiTheme } = useEuiTheme(); - - const onVideoClicked = useCallback(() => { - setIsVideoPlaying(true); - }, []); - - return ( -
-
- {isVideoPlaying && ( - - - - - - )} - {!isVideoPlaying && ( -