From 8043e57a2accb08c3ef7ad20063824728d4152ab Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Fri, 11 Oct 2024 16:46:45 +0200 Subject: [PATCH 1/3] Add a callout (UI copy is NOT final) --- .../pages/rule_management/index.tsx | 2 + .../new_features_blog_post_callout/index.tsx | 72 +++++++++++++++++++ .../translations.ts | 29 ++++++++ 3 files changed, 103 insertions(+) create mode 100644 x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx create mode 100644 x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx index 7033785b20052..6e21b1fc2f2cb 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx @@ -22,6 +22,7 @@ import { SpyRoute } from '../../../../common/utils/route/spy_routes'; import { MissingPrivilegesCallOut } from '../../../../detections/components/callouts/missing_privileges_callout'; import { MlJobCompatibilityCallout } from '../../../../detections/components/callouts/ml_job_compatibility_callout'; import { NeedAdminForUpdateRulesCallOut } from '../../../../detections/components/callouts/need_admin_for_update_callout'; +import { NewFeaturesBlogPostCallout } from '../../../../detections/components/callouts/new_features_blog_post_callout'; import { AddElasticRulesButton } from '../../../../detections/components/rules/pre_packaged_rules/add_elastic_rules_button'; import { ValueListsFlyout } from '../../../../detections/components/value_lists_management_flyout'; import { useUserData } from '../../../../detections/components/user_info'; @@ -173,6 +174,7 @@ const RulesPageComponent: React.FC = () => { kibanaServices={kibanaServices} categories={[DEFAULT_APP_CATEGORIES.security.id]} /> + diff --git a/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx b/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx new file mode 100644 index 0000000000000..4de11868c2e8b --- /dev/null +++ b/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx @@ -0,0 +1,72 @@ +/* + * 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 { css } from '@emotion/css'; +import avcBannerBackground from '@kbn/avc-banner/src/avc_banner_background.svg'; +import { EuiSpacer, EuiButton, EuiCallOut, useEuiTheme } from '@elastic/eui'; +import { type CallOutMessage } from '../../../../common/components/callouts'; +import { useCallOutStorage } from '../../../../common/components/callouts/use_callout_storage'; +import * as i18n from './translations'; + +const BLOG_POST_URL = 'https://www.elastic.co/blog/elastic-security-detection-engineering'; + +const calloutMessage: CallOutMessage = { + type: 'success', + id: 'new-features-blog-post', + title: i18n.NEW_FEATURES_BLOG_POST_CALLOUT_TITLE, + description: , +}; + +export function NewFeaturesBlogPostCallout() { + const { euiTheme } = useEuiTheme(); + + const { isVisible, dismiss } = useCallOutStorage([calloutMessage], 'detections'); + + const calloutStyles = css({ + paddingLeft: `${euiTheme.size.xl}`, + backgroundImage: `url(${avcBannerBackground})`, + backgroundRepeat: 'no-repeat', + backgroundPositionX: 'right', + backgroundPositionY: 'bottom', + }); + + const handleDismiss = useCallback(() => { + dismiss(calloutMessage); + }, [dismiss]); + + if (!isVisible(calloutMessage)) { + return null; + } + + return ( + <> + + {calloutMessage.description} + + + + ); +} + +function Description() { + return ( + <> + {i18n.NEW_FEATURES_BLOG_POST_CALLOUT_DESCRIPTION} + + + {i18n.NEW_FEATURES_BLOG_POST_CALLOUT_BUTTON_LABEL} + + + ); +} diff --git a/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts b/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts new file mode 100644 index 0000000000000..02565911649e2 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts @@ -0,0 +1,29 @@ +/* + * 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 NEW_FEATURES_BLOG_POST_CALLOUT_TITLE = i18n.translate( + 'xpack.securitySolution.detectionEngine.newFeaturesBlogPostCallout.calloutTitle', + { + defaultMessage: `Discover the power of Elastic's detection capabilities and unlock its potential`, + } +); + +export const NEW_FEATURES_BLOG_POST_CALLOUT_DESCRIPTION = i18n.translate( + 'xpack.securitySolution.detectionEngine.newFeaturesBlogPostCallout.calloutDescription', + { + defaultMessage: 'Discover new and existing detection capabilities of Elastic Security', + } +); + +export const NEW_FEATURES_BLOG_POST_CALLOUT_BUTTON_LABEL = i18n.translate( + 'xpack.securitySolution.detectionEngine.newFeaturesBlogPostCallout.calloutButtonLabel', + { + defaultMessage: 'Read the blog', + } +); From 815382d7d2d90218bdad21e3041e7d43214fac0d Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Mon, 14 Oct 2024 12:57:43 +0200 Subject: [PATCH 2/3] Make callout ID and component name more specific --- .../rule_management_ui/pages/rule_management/index.tsx | 4 ++-- .../index.tsx | 4 ++-- .../translations.ts | 0 3 files changed, 4 insertions(+), 4 deletions(-) rename x-pack/plugins/security_solution/public/detections/components/callouts/{new_features_blog_post_callout => blog_post_detection_engineering_callout}/index.tsx (94%) rename x-pack/plugins/security_solution/public/detections/components/callouts/{new_features_blog_post_callout => blog_post_detection_engineering_callout}/translations.ts (100%) diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx index 6e21b1fc2f2cb..afdc0e5ff276a 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management_ui/pages/rule_management/index.tsx @@ -22,7 +22,7 @@ import { SpyRoute } from '../../../../common/utils/route/spy_routes'; import { MissingPrivilegesCallOut } from '../../../../detections/components/callouts/missing_privileges_callout'; import { MlJobCompatibilityCallout } from '../../../../detections/components/callouts/ml_job_compatibility_callout'; import { NeedAdminForUpdateRulesCallOut } from '../../../../detections/components/callouts/need_admin_for_update_callout'; -import { NewFeaturesBlogPostCallout } from '../../../../detections/components/callouts/new_features_blog_post_callout'; +import { BlogPostDetectionEngineeringCallout } from '../../../../detections/components/callouts/blog_post_detection_engineering_callout'; import { AddElasticRulesButton } from '../../../../detections/components/rules/pre_packaged_rules/add_elastic_rules_button'; import { ValueListsFlyout } from '../../../../detections/components/value_lists_management_flyout'; import { useUserData } from '../../../../detections/components/user_info'; @@ -174,7 +174,7 @@ const RulesPageComponent: React.FC = () => { kibanaServices={kibanaServices} categories={[DEFAULT_APP_CATEGORIES.security.id]} /> - + diff --git a/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx b/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/index.tsx similarity index 94% rename from x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx rename to x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/index.tsx index 4de11868c2e8b..ec5595f86bb19 100644 --- a/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/index.tsx @@ -17,12 +17,12 @@ const BLOG_POST_URL = 'https://www.elastic.co/blog/elastic-security-detection-en const calloutMessage: CallOutMessage = { type: 'success', - id: 'new-features-blog-post', + id: 'blog-post-elastic-security-detection-engineering', title: i18n.NEW_FEATURES_BLOG_POST_CALLOUT_TITLE, description: , }; -export function NewFeaturesBlogPostCallout() { +export function BlogPostDetectionEngineeringCallout() { const { euiTheme } = useEuiTheme(); const { isVisible, dismiss } = useCallOutStorage([calloutMessage], 'detections'); diff --git a/x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts b/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts similarity index 100% rename from x-pack/plugins/security_solution/public/detections/components/callouts/new_features_blog_post_callout/translations.ts rename to x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts From 2f1e9c98f7091390707589d52401c681c0b4037c Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Mon, 14 Oct 2024 21:25:49 +0200 Subject: [PATCH 3/3] Update x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts Co-authored-by: Joe Peeples --- .../blog_post_detection_engineering_callout/translations.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts b/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts index 02565911649e2..17b79200db7a3 100644 --- a/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts +++ b/x-pack/plugins/security_solution/public/detections/components/callouts/blog_post_detection_engineering_callout/translations.ts @@ -10,14 +10,14 @@ import { i18n } from '@kbn/i18n'; export const NEW_FEATURES_BLOG_POST_CALLOUT_TITLE = i18n.translate( 'xpack.securitySolution.detectionEngine.newFeaturesBlogPostCallout.calloutTitle', { - defaultMessage: `Discover the power of Elastic's detection capabilities and unlock its potential`, + defaultMessage: `Discover the power of Elastic's threat detection!`, } ); export const NEW_FEATURES_BLOG_POST_CALLOUT_DESCRIPTION = i18n.translate( 'xpack.securitySolution.detectionEngine.newFeaturesBlogPostCallout.calloutDescription', { - defaultMessage: 'Discover new and existing detection capabilities of Elastic Security', + defaultMessage: 'Learn about new and existing detection capabilities of Elastic Security.', } );