From 756cd63a83044e2aefe41e183fff38acf387d597 Mon Sep 17 00:00:00 2001 From: Agustina Nahir Ruidiaz <61565784+agusruidiazgd@users.noreply.github.com> Date: Thu, 12 Sep 2024 09:38:32 +0200 Subject: [PATCH] [Security Solution] Data ingestion hub header cards (#190696) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This PR is one of the tasks on the issue [#189487](https://github.com/elastic/kibana/issues/189487). I've created this PR that contains the new cards that will be placed in the new header under the new **Data Ingestion Hub**. Cards: Screenshot 2024-09-02 at 14 32 55 Screenshot 2024-09-02 at 14 42 13 **Summary:** - Card 1: On click `Watch video` → Open modal with current Get Started video. - Card 2: On click `Add users` → `ESS: http://localhost:5601/app/management/security/users` `serverless: https://cloud.elastic.co/account/members`. - Card 3: On click `Explore Demo` → navigate to `https://www.elastic.co/demo-gallery/security-overview` Behavior of each card: https://github.com/user-attachments/assets/fabdb807-5442-42c9-84c7-6bbc0084e7a1 ** UPDATE: @paulewing I've removed the feature flag and render directly the new header, also I've removed the card that renders the same video we are showing on the new header (first card). Screenshot 2024-09-09 at 10 11 10 ### Checklist Delete any items that are not applicable to this PR. - [X] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios --------- Co-authored-by: Elastic Machine Co-authored-by: Angela Chuang <6295984+angorayc@users.noreply.github.com> --- .../onboarding/onboarding_page_service.ts | 7 ++ .../onboarding/card_item.test.tsx | 16 +-- .../content/data_ingestion_hub_video.tsx | 77 ++++++++++++++ .../card_step/step_content.test.tsx | 47 ++++---- .../cards/card.styles.ts | 56 ++++++++++ .../cards/card.test.tsx | 42 ++++++++ .../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 ++++++++++++++ .../index.styles.ts} | 0 .../data_ingestion_hub_header/index.test.tsx | 53 +++++++++- .../data_ingestion_hub_header/index.tsx | 79 ++++++++------ .../data_ingestion_hub_header/translations.ts | 100 ++++++++++++++++++ .../landing_page/onboarding/helpers.test.ts | 5 - .../hooks/use_toggle_panel.test.tsx | 19 ---- .../onboarding/hooks/use_users_url.ts | 14 +++ .../images/dark_data_ingestion_hub_demo.png | Bin 0 -> 9548 bytes .../dark_data_ingestion_hub_teammates.png | Bin 0 -> 10901 bytes .../images/dark_data_ingestion_hub_video.png | Bin 0 -> 5298 bytes .../images/data_ingestion_hub_demo.png | Bin 0 -> 6826 bytes .../images/data_ingestion_hub_teammates.png | Bin 0 -> 10464 bytes .../images/data_ingestion_hub_video.png | Bin 0 -> 6645 bytes .../onboarding/onboarding.test.tsx | 28 +---- .../landing_page/onboarding/onboarding.tsx | 22 +--- .../landing_page/onboarding/reducer.test.ts | 17 +-- .../landing_page/onboarding/sections.tsx | 4 - .../public/common/constants.ts | 2 + .../public/onboarding/onboarding.ts | 9 +- .../public/plugin.ts | 3 + .../functional/services/svl_sec_navigation.ts | 2 +- 34 files changed, 846 insertions(+), 150 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.styles.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.test.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/card.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/header_cards.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/link_card/link_card.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_card.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.styles.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.test.tsx create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/cards/video_card/video_modal.tsx rename x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/{styles/data_ingestion_hub_header.styles.ts => data_ingestion_hub_header/index.styles.ts} (100%) create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/data_ingestion_hub_header/translations.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/hooks/use_users_url.ts create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/dark_data_ingestion_hub_demo.png create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/dark_data_ingestion_hub_teammates.png create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/dark_data_ingestion_hub_video.png create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/data_ingestion_hub_demo.png create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/data_ingestion_hub_teammates.png create mode 100644 x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/images/data_ingestion_hub_video.png 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 ea5beab4608d2..16448b92d3a4f 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 @@ -13,22 +13,26 @@ import type { StepId } from '../../../common/components/landing_page/onboarding/ 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(); } @@ -39,6 +43,9 @@ export class OnboardingPageService { setProjectFeaturesUrl(projectFeaturesUrl: string | undefined) { this.projectFeaturesUrlSubject$.next(projectFeaturesUrl); } + setUsersUrl(userUrl: string | undefined) { + this.usersUrlSubject$.next(userUrl); + } setProjectsUrl(projectsUrl: string | undefined) { this.projectsUrlSubject$.next(projectsUrl); } 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 index 91417dc8e3ddf..c0730847c5e43 100644 --- 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 @@ -9,7 +9,7 @@ import { render } from '@testing-library/react'; import { CardItem } from './card_item'; import type { ExpandedCardSteps, StepId } from './types'; -import { QuickStartSectionCardsId, SectionId, OverviewSteps } from './types'; +import { SectionId, ViewDashboardSteps, AddAndValidateYourDataCardsId } from './types'; jest.mock('./card_step'); describe('CardItemComponent', () => { @@ -17,7 +17,7 @@ describe('CardItemComponent', () => { const onStepClicked = jest.fn(); const toggleTaskCompleteStatus = jest.fn(); const expandedCardSteps = { - [QuickStartSectionCardsId.watchTheOverviewVideo]: { + [AddAndValidateYourDataCardsId.viewDashboards]: { isExpanded: false, expandedSteps: [] as StepId[], }, @@ -26,17 +26,17 @@ describe('CardItemComponent', () => { it('should render card', () => { const { getByTestId } = render( ); - const cardTitle = getByTestId(QuickStartSectionCardsId.watchTheOverviewVideo); + const cardTitle = getByTestId(AddAndValidateYourDataCardsId.viewDashboards); expect(cardTitle).toBeInTheDocument(); }); @@ -44,12 +44,12 @@ describe('CardItemComponent', () => { const { queryByText } = render( ); 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 new file mode 100644 index 0000000000000..181d4a797ebbc --- /dev/null +++ b/x-pack/plugins/security_solution/public/common/components/landing_page/onboarding/card_step/content/data_ingestion_hub_video.tsx @@ -0,0 +1,77 @@ +/* + * 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 && ( +