diff --git a/src/platform/packages/shared/deeplinks/security/deep_links.ts b/src/platform/packages/shared/deeplinks/security/deep_links.ts index dd18c50add694..0cc59583018c3 100644 --- a/src/platform/packages/shared/deeplinks/security/deep_links.ts +++ b/src/platform/packages/shared/deeplinks/security/deep_links.ts @@ -79,6 +79,7 @@ export enum SecurityPageName { siemMigrationsLanding = 'siem_migrations', siemMigrationsRules = 'siem_migrations-rules', siemMigrationsDashboards = 'siem_migrations-dashboards', + siemMigrationsManage = 'siem_migrations-manage', /* * Warning: Computed values are not permitted in an enum with string valued members * All threat intelligence page names must match `TIPageId` in x-pack/solutions/security/plugins/threat_intelligence/public/common/navigation/types.ts diff --git a/x-pack/platform/plugins/private/translations/translations/de-DE.json b/x-pack/platform/plugins/private/translations/translations/de-DE.json index 6efd5f2a390fd..774159b4ba255 100644 --- a/x-pack/platform/plugins/private/translations/translations/de-DE.json +++ b/x-pack/platform/plugins/private/translations/translations/de-DE.json @@ -36763,19 +36763,6 @@ "xpack.securitySolution.onboarding.footer.labs.description": "Einblicke von Sicherheitsforschern", "xpack.securitySolution.onboarding.footer.labs.link.title": "Weitere Informationen", "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs", - "xpack.securitySolution.onboarding.header.card.demo.description": "Entdecken Sie die Demo, keine Einrichtung erforderlich!", - "xpack.securitySolution.onboarding.header.card.demo.link.title": "Demo erkunden", - "xpack.securitySolution.onboarding.header.card.demo.title": "Elastic Security in Aktion erleben", - "xpack.securitySolution.onboarding.header.card.teammates.description": "Erhöhen Sie die Zusammenarbeit in Ihrer Organisation", - "xpack.securitySolution.onboarding.header.card.teammates.link.title": "Nutzer hinzufügen", - "xpack.securitySolution.onboarding.header.card.teammates.title": "Teammitglieder hinzufügen", - "xpack.securitySolution.onboarding.header.card.video.description": "Machen Sie sich mit Elastic Security vertraut", - "xpack.securitySolution.onboarding.header.card.video.link.title": "Video ansehen", - "xpack.securitySolution.onboarding.header.card.video.title": "Sehen Sie sich das 2-minütige Überblicksvideo an", - "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "Schließen", - "xpack.securitySolution.onboarding.header.card.videoModal.description": "Wir freuen uns, Sie beim Schutz der Daten Ihres Unternehmens zu unterstützen. Hier ist eine Vorschau der Schritte, die Sie zur Einrichtung ausführen sollten.", - "xpack.securitySolution.onboarding.header.card.videoModal.title": "Willkommen bei Elastic Security!", - "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security", "xpack.securitySolution.onboarding.integrationsCard.agent.link": "hier", "xpack.securitySolution.onboarding.integrationsCard.agent.text": "Für eine oder mehrere Ihrer Integrationen wird Elastic Agent benötigt. Elastic Agent hinzufügen", "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {Integrationen}} hinzugefügt", diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json index 3515848aa5f58..430b4692b094d 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -37146,19 +37146,6 @@ "xpack.securitySolution.onboarding.footer.labs.description": "Points de vue des chercheurs en sécurité", "xpack.securitySolution.onboarding.footer.labs.link.title": "En savoir plus", "xpack.securitySolution.onboarding.footer.labs.title": "Ateliers Elastic Security", - "xpack.securitySolution.onboarding.header.card.demo.description": "Explorez la démonstration, aucune configuration requise !", - "xpack.securitySolution.onboarding.header.card.demo.link.title": "Explorer la démonstration", - "xpack.securitySolution.onboarding.header.card.demo.title": "Découvrez Elastic Security en action", - "xpack.securitySolution.onboarding.header.card.teammates.description": "Augmentez la collaboration au sein de votre organisation", - "xpack.securitySolution.onboarding.header.card.teammates.link.title": "Ajouter des utilisateurs", - "xpack.securitySolution.onboarding.header.card.teammates.title": "Ajouter des coéquipiers", - "xpack.securitySolution.onboarding.header.card.video.description": "Familiarisez-vous avec Elastic Security", - "xpack.securitySolution.onboarding.header.card.video.link.title": "Regarder la vidéo", - "xpack.securitySolution.onboarding.header.card.video.title": "Regardez la vidéo d'aperçu de 2 minutes", - "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "Fermer", - "xpack.securitySolution.onboarding.header.card.videoModal.description": "Nous sommes ravis de vous aider à protéger les données de votre organisation. Voici un aperçu des différentes étapes à suivre pour la configuration.", - "xpack.securitySolution.onboarding.header.card.videoModal.title": "Bienvenue dans Elastic Security !", - "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security", "xpack.securitySolution.onboarding.integrationsCard.agent.link": "ici", "xpack.securitySolution.onboarding.integrationsCard.agent.text": "Elastic Agent est requis pour une ou plusieurs de vos intégrations. Ajouter Elastic Agent", "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {intégrations}} ajoutées", diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json index b4cf601d0d373..99bbc4ae2c64a 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -37205,19 +37205,6 @@ "xpack.securitySolution.onboarding.footer.labs.description": "セキュリティ研究者によるインサイト", "xpack.securitySolution.onboarding.footer.labs.link.title": "詳しくはこちら", "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs", - "xpack.securitySolution.onboarding.header.card.demo.description": "デモを探索してください。設定は不要です！", - "xpack.securitySolution.onboarding.header.card.demo.link.title": "デモの探索", - "xpack.securitySolution.onboarding.header.card.demo.title": "Elastic Securityの活用事例を見る", - "xpack.securitySolution.onboarding.header.card.teammates.description": "組織全体でコラボレーションを強化", - "xpack.securitySolution.onboarding.header.card.teammates.link.title": "ユーザーを追加", - "xpack.securitySolution.onboarding.header.card.teammates.title": "チームメイトを追加", - "xpack.securitySolution.onboarding.header.card.video.description": "Elastic Securityを使い始める", - "xpack.securitySolution.onboarding.header.card.video.link.title": "動画を見る", - "xpack.securitySolution.onboarding.header.card.video.title": "2分間の概要動画を見る", - "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "閉じる", - "xpack.securitySolution.onboarding.header.card.videoModal.description": "Elasticが組織のデータ保護をサポートします。以下は、設定する手順のプレビューです。", - "xpack.securitySolution.onboarding.header.card.videoModal.title": "Elastic Securityへようこそ！", - "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elasticセキュリティ", "xpack.securitySolution.onboarding.integrationsCard.agent.link": "こちら", "xpack.securitySolution.onboarding.integrationsCard.agent.text": "1つ以上の統合には、Elasticエージェントが必要です。Elasticエージェントの追加", "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "{count} {count, plural, one {integration} other {個の統合}}が追加されました", diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json index e445ee58b041b..6fbb84d0b9dd7 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -37185,19 +37185,6 @@ "xpack.securitySolution.onboarding.footer.labs.description": "安全研究员的见解", "xpack.securitySolution.onboarding.footer.labs.link.title": "了解详情", "xpack.securitySolution.onboarding.footer.labs.title": "Elastic Security Labs", - "xpack.securitySolution.onboarding.header.card.demo.description": "浏览演示，而无需设置！", - "xpack.securitySolution.onboarding.header.card.demo.link.title": "浏览演示", - "xpack.securitySolution.onboarding.header.card.demo.title": "查看 Elastic Security 的实际应用", - "xpack.securitySolution.onboarding.header.card.teammates.description": "加强跨组织协作", - "xpack.securitySolution.onboarding.header.card.teammates.link.title": "添加用户", - "xpack.securitySolution.onboarding.header.card.teammates.title": "添加队友", - "xpack.securitySolution.onboarding.header.card.video.description": "开始了解 Elastic Security", - "xpack.securitySolution.onboarding.header.card.video.link.title": "观看视频", - "xpack.securitySolution.onboarding.header.card.video.title": "观看 2 分钟概览视频", - "xpack.securitySolution.onboarding.header.card.videoModal.buttonClose": "关闭", - "xpack.securitySolution.onboarding.header.card.videoModal.description": "我们很高兴为您提供支持，帮助保护您组织的数据。此处提供了您完成设置所需执行步骤的预览。", - "xpack.securitySolution.onboarding.header.card.videoModal.title": "欢迎使用 Elastic Security！", - "xpack.securitySolution.onboarding.header.card.videoModal.viewTitle": "Elastic Security", "xpack.securitySolution.onboarding.integrationsCard.agent.link": "此处", "xpack.securitySolution.onboarding.integrationsCard.agent.text": "您的一个或多个集成需要 Elastic 代理。添加 Elastic 代理", "xpack.securitySolution.onboarding.integrationsCard.badge.completeText": "已添加 {count} 个{count, plural, one {集成} other {集成}}", diff --git a/x-pack/solutions/security/plugins/security_solution/common/constants.ts b/x-pack/solutions/security/plugins/security_solution/common/constants.ts index e7b09e7f7d0ea..b89dd470028bf 100644 --- a/x-pack/solutions/security/plugins/security_solution/common/constants.ts +++ b/x-pack/solutions/security/plugins/security_solution/common/constants.ts @@ -172,6 +172,7 @@ export const APP_RESPONSE_ACTIONS_HISTORY_PATH = export const APP_SCRIPT_LIBRARY_PATH = `${APP_PATH}${SCRIPT_LIBRARY_PATH}` as const; export const NOTES_PATH = `${MANAGEMENT_PATH}/notes` as const; export const SIEM_MIGRATIONS_PATH = '/siem_migrations' as const; +export const SIEM_MIGRATIONS_MANAGE_PATH = `${SIEM_MIGRATIONS_PATH}/manage` as const; export const SIEM_MIGRATIONS_LANDING_PATH = `${SIEM_MIGRATIONS_PATH}/landing` as const; export const SIEM_MIGRATIONS_RULES_PATH = `${SIEM_MIGRATIONS_PATH}/rules` as const; export const SIEM_MIGRATIONS_DASHBOARDS_PATH = `${SIEM_MIGRATIONS_PATH}/dashboards` as const; diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon.svg b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon.svg new file mode 100644 index 0000000000000..ba5943e2e9821 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon_dark.svg b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon_dark.svg new file mode 100644 index 0000000000000..7340eda29a35f --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/icon_dark.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/index.tsx b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/index.tsx new file mode 100644 index 0000000000000..3f667f539a9e3 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/common/icons/agent/index.tsx @@ -0,0 +1,19 @@ +/* + * 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 { EuiIcon, type EuiIconProps } from '@elastic/eui'; +import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme'; +import IconSVG from './icon.svg'; +import IconDarkSVG from './icon_dark.svg'; + +export const IconAgent = React.memo>((props) => { + const isDark = useKibanaIsDarkMode(); + const Icon = isDark ? IconDarkSVG : IconSVG; + + return ; +}); +IconAgent.displayName = 'IconAgent'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/hooks/use_topic_id.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/hooks/use_topic_id.ts index 6c56ddb41eed1..00d8780e40806 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/hooks/use_topic_id.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/hooks/use_topic_id.ts @@ -13,7 +13,10 @@ import type { OnboardingRouteParams } from '../../types'; * Hook that returns the topic id from the URL, or the default topic id if none is present * This is the Single Source of Truth for the topic id */ -export const useTopicId = (): OnboardingTopicId => { - const { topicId = OnboardingTopicId.default } = useParams(); - return topicId; +export const useTopicId = (topicId?: OnboardingTopicId): OnboardingTopicId => { + const { topicId: urlTopicId = OnboardingTopicId.default } = useParams(); + if (topicId) { + return topicId; + } + return urlTopicId; }; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.test.tsx index dc0654b401e7d..aa42fc6aa57b5 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.test.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.test.tsx @@ -19,6 +19,9 @@ jest.mock('../../../../../hooks/use_onboarding_service', () => ({ jest.mock('./agentless_available_callout'); jest.mock('./active_integrations_callout'); jest.mock('./endpoint_callout'); +jest.mock('./migrations_callout', () => ({ + MigrationsCallout: () => null, +})); describe('IntegrationCardTopCallout', () => { beforeEach(() => { diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.tsx index a58c8507cd4ff..07bbd43a31daf 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/integration_card_top_callout.tsx @@ -6,6 +6,7 @@ */ import React from 'react'; +import { EuiSpacer } from '@elastic/eui'; import useObservable from 'react-use/lib/useObservable'; import { useOnboardingService } from '../../../../../hooks/use_onboarding_service'; @@ -13,6 +14,7 @@ import { AgentlessAvailableCallout } from './agentless_available_callout'; import { ActiveIntegrationsCallout } from './active_integrations_callout'; import { EndpointCallout } from './endpoint_callout'; import { IntegrationTabId } from '../../../../../../../common/lib/integrations/types'; +import { MigrationsCallout } from './migrations_callout'; export const IntegrationCardTopCallout = React.memo<{ activeIntegrationsCount: number; @@ -32,12 +34,12 @@ export const IntegrationCardTopCallout = React.memo<{ const showEndpointCallout = activeIntegrationsCount === 0 && selectedTabId === IntegrationTabId.endpoint; - if (!showAgentlessCallout && !showEndpointCallout && !showActiveCallout) { - return null; - } + const showAnyLegacyCallout = showAgentlessCallout || showEndpointCallout || showActiveCallout; return ( <> + + {showAnyLegacyCallout && } {showEndpointCallout && } {showAgentlessCallout && } {showActiveCallout && ( diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/migrations_callout.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/migrations_callout.tsx new file mode 100644 index 0000000000000..ea71210960405 --- /dev/null +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/cards/common/integrations/callouts/migrations_callout.tsx @@ -0,0 +1,58 @@ +/* + * 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, useCallback } from 'react'; +import { FormattedMessage } from '@kbn/i18n-react'; +import { EuiPanel, EuiButton, EuiFlexItem, EuiFlexGroup } from '@elastic/eui'; +import { SecurityPageName, useNavigateTo } from '@kbn/security-solution-navigation'; +import { IconAgent } from '../../../../../../../common/icons/agent'; +import { useGetSecuritySolutionUrl } from '../../../../../../../common/components/link_to'; + +export const MigrationsCallout = memo(() => { + const { navigateTo } = useNavigateTo(); + const getSecuritySolutionUrl = useGetSecuritySolutionUrl(); + const href = useMemo( + () => getSecuritySolutionUrl({ deepLinkId: SecurityPageName.siemMigrationsManage }), + [getSecuritySolutionUrl] + ); + const onClick = useCallback( + (e: React.SyntheticEvent) => { + e.preventDefault(); + navigateTo({ deepLinkId: SecurityPageName.siemMigrationsManage }); + }, + [navigateTo] + ); + + return ( + + + + + + + {' '} + + + + + + + + + + ); +}); + +MigrationsCallout.displayName = 'MigrationsCallout'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts index 0d6a26a3439d6..262ef7d5cc9cc 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/hooks/use_body_config.ts @@ -8,14 +8,15 @@ import { useMemo } from 'react'; import { useOnboardingContext } from '../../onboarding_context'; import { useTopicId } from '../../hooks/use_topic_id'; +import type { OnboardingTopicId } from '../../../constants'; import type { OnboardingGroupConfig } from '../../../types'; /** * Hook that returns the body config for the selected topic */ -export const useBodyConfig = (): OnboardingGroupConfig[] => { - const topicId = useTopicId(); +export const useBodyConfig = (topicIdOverride?: OnboardingTopicId): OnboardingGroupConfig[] => { const { config } = useOnboardingContext(); + const topicId = useTopicId(topicIdOverride); const topicBodyConfig = useMemo(() => { let bodyConfig: OnboardingGroupConfig[] = []; const topicConfig = config.get(topicId); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx index 8f759b31c8e67..e0ce3cd069d80 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx +++ b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_body/onboarding_body.tsx @@ -8,7 +8,7 @@ import React, { Suspense, useCallback } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; import { CenteredLoadingSpinner } from '../../../common/components/centered_loading_spinner'; -import type { OnboardingCardId } from '../../constants'; +import type { OnboardingCardId, OnboardingTopicId } from '../../constants'; import { useBodyConfig } from './hooks/use_body_config'; import { OnboardingCardGroup } from './onboarding_card_group'; import { OnboardingCardPanel } from './onboarding_card_panel'; @@ -16,8 +16,8 @@ import { useExpandedCard } from './hooks/use_expanded_card'; import { useCompletedCards } from './hooks/use_completed_cards'; import type { IsCardAvailable } from '../../types'; -export const OnboardingBody = React.memo(() => { - const bodyConfig = useBodyConfig(); +export const OnboardingBody = React.memo<{ topicId?: OnboardingTopicId }>(({ topicId }) => { + const bodyConfig = useBodyConfig(topicId); const { expandedCardId, setExpandedCardId } = useExpandedCard(); const { isCardComplete, setCardComplete, getCardCheckCompleteResult, checkCardComplete } = useCompletedCards(bodyConfig); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts deleted file mode 100644 index 4e028bb13a105..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.styles.ts +++ /dev/null @@ -1,50 +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 { useEuiTheme } from '@elastic/eui'; -import { css } from '@emotion/css'; - -import { useKibanaIsDarkMode } from '@kbn/react-kibana-context-theme'; - -export const useCardStyles = () => { - const { euiTheme } = useEuiTheme(); - const isDarkMode = useKibanaIsDarkMode(); - - return css` - min-width: 315px; - /* We needed to add the "headerCard" class to make it take priority over the default EUI card styles */ - .headerCardLink { - color: ${euiTheme.colors.textPrimary}; - font-weight: ${euiTheme.font.weight.semiBold}; - } - - &.headerCard:hover { - *:not(.headerCardLink) { - text-decoration: none; - } - .headerCardLink, - .headerCardLink * { - text-decoration: underline; - text-decoration-color: ${euiTheme.colors.textPrimary}; - color: ${euiTheme.colors.textPrimary}; - } - } - - .headerCardTitle { - font-weight: ${euiTheme.font.weight.semiBold}; - font-size: 1rem; - } - - ${isDarkMode - ? ` - background-color: ${euiTheme.colors.backgroundBasePlain}; - box-shadow: none; - border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.borderBasePlain}; - ` - : ''} - `; -}; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.test.tsx deleted file mode 100644 index a121d9ba41e3f..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.test.tsx +++ /dev/null @@ -1,68 +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 { LinkCard } from './link_card'; -import { OnboardingHeaderCardId, TELEMETRY_HEADER_CARD } from '../../constants'; -import { mockReportLinkClick } from '../../../__mocks__/mocks'; - -jest.mock('../../../lib/telemetry'); -jest.mock('../../../onboarding_context'); - -describe('DataIngestionHubHeaderCardComponent', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - - it('should render the title, description, and icon', () => { - const { getByTestId, getByText } = render( - - ); - - expect(getByText('Mock Title')).toBeInTheDocument(); - expect(getByText('Mock Description')).toBeInTheDocument(); - expect(getByTestId('data-ingestion-header-card-icon')).toHaveAttribute('src', 'mockIcon.png'); - }); - - it('should track the link card click', () => { - const { getByTestId } = render( - - ); - - getByTestId('headerCardLink').click(); - expect(mockReportLinkClick).toHaveBeenCalledWith( - `${TELEMETRY_HEADER_CARD}_${OnboardingHeaderCardId.demo}` - ); - }); - - it('should apply dark mode styles when color mode is DARK', () => { - const { container } = render( - - ); - const cardElement = container.querySelector('.euiCard'); - expect(cardElement).toHaveStyle('background-color:rgb(255, 255, 255)'); - }); -}); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.tsx deleted file mode 100644 index b1fad9f1da7ee..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/common/link_card.tsx +++ /dev/null @@ -1,92 +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, { useCallback } from 'react'; -import { - EuiCard, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiImage, - EuiSpacer, - EuiText, - useGeneratedHtmlId, -} from '@elastic/eui'; -import classNames from 'classnames'; -import { useCardStyles } from './link_card.styles'; -import type { OnboardingHeaderCardId } from '../../constants'; -import { TELEMETRY_HEADER_CARD } from '../../constants'; -import { useOnboardingContext } from '../../../onboarding_context'; - -interface LinkCardProps { - id: OnboardingHeaderCardId; - icon: string; - title: string; - description: string; - linkText: string; - onClick?: () => void; - href?: string; - target?: string; -} - -export const LinkCard: React.FC = React.memo( - ({ id, icon, title, description, onClick, href, target, linkText }) => { - const cardStyles = useCardStyles(); - const cardClassName = classNames(cardStyles, 'headerCard'); - const { - telemetry: { reportLinkClick }, - } = useOnboardingContext(); - const onClickWithReport = useCallback(() => { - reportLinkClick?.(`${TELEMETRY_HEADER_CARD}_${id}`); - onClick?.(); - }, [id, onClick, reportLinkClick]); - - const panelTitleId = useGeneratedHtmlId(); - - return ( - - } - title={ - - {title} - - } - description={{description}} - > - - - - - {linkText} - - - {target === '_blank' && ( - - - - )} - - - ); - } -); - -LinkCard.displayName = 'LinkCard'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/demo_card.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/demo_card.tsx deleted file mode 100644 index 9daf13527108d..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/demo_card.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 { LinkCard } from '../common/link_card'; -import demoImage from './images/demo_card.png'; -import darkDemoImage from './images/demo_card_dark.png'; -import * as i18n from './translations'; -import { OnboardingHeaderCardId } from '../../constants'; - -export const DemoCard = React.memo<{ isDarkMode: boolean }>(({ isDarkMode }) => { - return ( - - ); -}); -DemoCard.displayName = 'DemoCard'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card.png deleted file mode 100644 index 825aa84564d86..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card_dark.png deleted file mode 100644 index 9fba407a811b8..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/images/demo_card_dark.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/index.ts deleted file mode 100644 index 78dea5ca094c8..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/index.ts +++ /dev/null @@ -1,8 +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 { DemoCard } from './demo_card'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/translations.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/translations.ts deleted file mode 100644 index 3082a1c197ee3..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/demo_card/translations.ts +++ /dev/null @@ -1,29 +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 { i18n } from '@kbn/i18n'; - -export const ONBOARDING_HEADER_DEMO_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.demo.title', - { - defaultMessage: 'See Elastic Security in action', - } -); - -export const ONBOARDING_HEADER_DEMO_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.demo.description', - { - defaultMessage: 'Explore the demo, no setup required!', - } -); - -export const ONBOARDING_HEADER_DEMO_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.demo.link.title', - { - defaultMessage: 'Explore Demo', - } -); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card.png deleted file mode 100644 index 47d5b6431a6a4..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card_dark.png deleted file mode 100644 index f58f80c6b2577..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/images/teammates_card_dark.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/index.ts deleted file mode 100644 index dde87215dbddb..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/index.ts +++ /dev/null @@ -1,8 +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 { TeammatesCard } from './teammates_card'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/teammates_card.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/teammates_card.tsx deleted file mode 100644 index 0a425acd0a93f..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/teammates_card.tsx +++ /dev/null @@ -1,32 +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 useObservable from 'react-use/lib/useObservable'; -import { OnboardingHeaderCardId } from '../../constants'; -import { useOnboardingService } from '../../../hooks/use_onboarding_service'; -import { LinkCard } from '../common/link_card'; -import teammatesImage from './images/teammates_card.png'; -import darkTeammatesImage from './images/teammates_card_dark.png'; -import * as i18n from './translations'; - -export const TeammatesCard = React.memo<{ isDarkMode: boolean }>(({ isDarkMode }) => { - const { usersUrl$ } = useOnboardingService(); - const usersUrl = useObservable(usersUrl$, undefined); - return ( - - ); -}); -TeammatesCard.displayName = 'TeammatesCard'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/translations.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/translations.ts deleted file mode 100644 index 721807721c254..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/teammates_card/translations.ts +++ /dev/null @@ -1,29 +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 { i18n } from '@kbn/i18n'; - -export const ONBOARDING_HEADER_TEAMMATES_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.teammates.title', - { - defaultMessage: 'Add teammates', - } -); - -export const ONBOARDING_HEADER_TEAMMATES_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.teammates.description', - { - defaultMessage: 'Increase collaboration across your org', - } -); - -export const ONBOARDING_HEADER_TEAMMATES_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.teammates.link.title', - { - defaultMessage: 'Add users', - } -); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card.png deleted file mode 100644 index b2fa70927ebbe..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card_dark.png b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card_dark.png deleted file mode 100644 index 65b7c8d15ad73..0000000000000 Binary files a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/images/video_card_dark.png and /dev/null differ diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/index.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/index.ts deleted file mode 100644 index aa3018a3b032e..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/index.ts +++ /dev/null @@ -1,8 +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 { VideoCard } from './video_card'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/translations.ts b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/translations.ts deleted file mode 100644 index 373f587fe84a7..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/translations.ts +++ /dev/null @@ -1,58 +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 { i18n } from '@kbn/i18n'; - -export const ONBOARDING_HEADER_VIDEO_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.video.title', - { - defaultMessage: 'Watch 2 minute overview video', - } -); - -export const ONBOARDING_HEADER_VIDEO_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.video.description', - { - defaultMessage: 'Get acquainted with Elastic Security', - } -); - -export const ONBOARDING_HEADER_VIDEO_LINK_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.video.link.title', - { - defaultMessage: 'Watch video', - } -); - -export const ONBOARDING_HEADER_VIDEO_MODAL_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.videoModal.title', - { - defaultMessage: 'Welcome to Elastic Security!', - } -); - -export const ONBOARDING_HEADER_VIDEO_MODAL_DESCRIPTION = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.videoModal.description', - { - defaultMessage: - "We're excited to support you in protecting your organization's data. Here's a preview of the steps you'll take to set up.", - } -); - -export const ONBOARDING_HEADER_VIDEO_MODAL_BUTTON_CLOSE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.videoModal.buttonClose', - { - defaultMessage: 'Close', - } -); - -export const ONBOARDING_HEADER_VIDEO_MODAL_VIDEO_TITLE = i18n.translate( - 'xpack.securitySolution.onboarding.header.card.videoModal.viewTitle', - { - defaultMessage: 'Elastic Security', - } -); diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_card.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_card.tsx deleted file mode 100644 index 15a8950aed277..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_card.tsx +++ /dev/null @@ -1,40 +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, { useCallback, useState } from 'react'; -import { OnboardingHeaderCardId } from '../../constants'; -import { OnboardingHeaderVideoModal } from './video_modal'; -import * as i18n from './translations'; -import videoImage from './images/video_card.png'; -import darkVideoImage from './images/video_card_dark.png'; -import { LinkCard } from '../common/link_card'; - -export const VideoCard = React.memo<{ isDarkMode: boolean }>(({ isDarkMode }) => { - const [isModalVisible, setIsModalVisible] = useState(false); - - const closeVideoModal = useCallback(() => { - setIsModalVisible(false); - }, []); - const showVideoModal = useCallback(() => { - setIsModalVisible(true); - }, []); - - return ( - <> - - {isModalVisible && } - - ); -}); -VideoCard.displayName = 'VideoCard'; diff --git a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_modal.tsx b/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_modal.tsx deleted file mode 100644 index 41186988c5e88..0000000000000 --- a/x-pack/solutions/security/plugins/security_solution/public/onboarding/components/onboarding_header/cards/video_card/video_modal.tsx +++ /dev/null @@ -1,83 +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 { - EuiButton, - EuiFlexGroup, - EuiFlexItem, - EuiModal, - EuiModalBody, - EuiModalFooter, - EuiModalHeaderTitle, - EuiText, - useGeneratedHtmlId, -} from '@elastic/eui'; -import { css } from '@emotion/css'; -import { ONBOARDING_VIDEO_SOURCE } from '../../../../../common/constants'; -import * as i18n from './translations'; - -// Not ideal, but we could not find any other way to remove the padding from the modal body -const modalStyles = css` - .euiModalBody__overflow { - overflow: hidden; - padding: 0px; - mask-image: none; - } -`; - -interface OnboardingHeaderVideoModalProps { - onClose: () => void; -} - -export const OnboardingHeaderVideoModal = React.memo( - ({ onClose }) => { - const modalTitle = useGeneratedHtmlId(); - - return ( - - -