From 6483996dc179a2f35c09294f84b32edb9fb4fbc5 Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Mon, 9 Sep 2024 10:54:01 +0200 Subject: [PATCH] Add components for `name`, `description` and `tags` --- .../rule_details/rule_about_section.tsx | 2 +- .../final_readonly/field_readonly.tsx | 9 +++++ .../description/description.stories.tsx | 39 +++++++++++++++++++ .../fields/description/description.tsx | 36 +++++++++++++++++ .../fields/name/name.stories.tsx | 38 ++++++++++++++++++ .../final_readonly/fields/name/name.tsx | 36 +++++++++++++++++ .../fields/tags/tags.stories.tsx | 38 ++++++++++++++++++ .../final_readonly/fields/tags/tags.tsx | 29 ++++++++++++++ 8 files changed, 226 insertions(+), 1 deletion(-) create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.stories.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.stories.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.stories.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.tsx diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx index c7c9ec3ca732d..1d2e93df8e7f7 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/rule_about_section.tsx @@ -256,7 +256,7 @@ interface TagsProps { tags: string[]; } -const Tags = ({ tags }: TagsProps) => ( +export const Tags = ({ tags }: TagsProps) => ( ); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/field_readonly.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/field_readonly.tsx index f3d436ad7a26a..117c3e0991e4f 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/field_readonly.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/field_readonly.tsx @@ -21,6 +21,9 @@ import { ThreatReadOnly } from './fields/threat/threat'; import { ThreatIndexReadOnly } from './fields/threat_index/threat_index'; import { ThreatIndicatorPathReadOnly } from './fields/threat_indicator_path/threat_indicator_path'; import { ThreatQueryReadOnly } from './fields/threat_query/threat_query'; +import { NameReadOnly } from './fields/name/name'; +import { TagsReadOnly } from './fields/tags/tags'; +import { DescriptionReadOnly } from './fields/description/description'; interface FieldReadOnlyProps { fieldName: keyof DiffableAllFields; @@ -31,6 +34,8 @@ export function FieldReadOnly({ fieldName, finalDiffableRule }: FieldReadOnlyPro switch (fieldName) { case 'data_source': return ; + case 'description': + return ; case 'eql_query': return ( ); + case 'name': + return ; case 'related_integrations': return ( @@ -64,6 +71,8 @@ export function FieldReadOnly({ fieldName, finalDiffableRule }: FieldReadOnlyPro return ; case 'severity_mapping': return ; + case 'tags': + return ; case 'threat': return ; case 'threat_index': diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.stories.tsx new file mode 100644 index 0000000000000..8eb713c812757 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.stories.tsx @@ -0,0 +1,39 @@ +/* + * 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 type { Story } from '@storybook/react'; +import { DescriptionReadOnly } from './description'; +import { FieldReadOnly } from '../../field_readonly'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; + +export default { + component: DescriptionReadOnly, + title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/description', +}; + +interface TemplateProps { + finalDiffableRule: Partial; +} + +const Template: Story = (args) => { + return ( + + ); +}; + +export const Default = Template.bind({}); + +Default.args = { + finalDiffableRule: { + description: + "Identifies the occurrence of a security alert from the Google Workspace alerts center. Google Workspace's security alert center provides an overview of actionable alerts that may be affecting an organization's domain. An alert is a warning of a potential security issue that Google has detected.", + }, +}; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.tsx new file mode 100644 index 0000000000000..34ff5b3013b1d --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/description/description.tsx @@ -0,0 +1,36 @@ +/* + * 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 { EuiDescriptionList } from '@elastic/eui'; +import * as ruleDetailsI18n from '../../../../translations'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; + +interface RuleDescriptionProps { + description: DiffableAllFields['name']; +} + +function RuleDescription({ description }: RuleDescriptionProps) { + return <>{description}; +} + +interface DescriptionReadOnlyProps { + description: DiffableAllFields['description']; +} + +export function DescriptionReadOnly({ description }: DescriptionReadOnlyProps) { + return ( + , + }, + ]} + /> + ); +} diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.stories.tsx new file mode 100644 index 0000000000000..cf0983cd9b6b6 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.stories.tsx @@ -0,0 +1,38 @@ +/* + * 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 type { Story } from '@storybook/react'; +import { NameReadOnly } from './name'; +import { FieldReadOnly } from '../../field_readonly'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; + +export default { + component: NameReadOnly, + title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/name', +}; + +interface TemplateProps { + finalDiffableRule: Partial; +} + +const Template: Story = (args) => { + return ( + + ); +}; + +export const Default = Template.bind({}); + +Default.args = { + finalDiffableRule: { + name: 'Forwarded Google Workspace Security Alert', + }, +}; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.tsx new file mode 100644 index 0000000000000..65743470629ea --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/name/name.tsx @@ -0,0 +1,36 @@ +/* + * 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 { EuiDescriptionList } from '@elastic/eui'; +import * as ruleDetailsI18n from '../../../../translations'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; + +interface RuleNameProps { + name: DiffableAllFields['name']; +} + +function RuleName({ name }: RuleNameProps) { + return <>{name}; +} + +interface NameReadOnlyProps { + name: DiffableAllFields['name']; +} + +export function NameReadOnly({ name }: NameReadOnlyProps) { + return ( + , + }, + ]} + /> + ); +} diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.stories.tsx new file mode 100644 index 0000000000000..19160cca2794e --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.stories.tsx @@ -0,0 +1,38 @@ +/* + * 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 type { Story } from '@storybook/react'; +import { TagsReadOnly } from './tags'; +import { FieldReadOnly } from '../../field_readonly'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; + +export default { + component: TagsReadOnly, + title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/tags', +}; + +interface TemplateProps { + finalDiffableRule: Partial; +} + +const Template: Story = (args) => { + return ( + + ); +}; + +export const Default = Template.bind({}); + +Default.args = { + finalDiffableRule: { + tags: ['Elastic', 'Cloud', 'Google Workspace', 'Log Auditing', 'Threat Detection'], + }, +}; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.tsx new file mode 100644 index 0000000000000..31ef04d6309fc --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/tags/tags.tsx @@ -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 React from 'react'; +import { EuiDescriptionList } from '@elastic/eui'; +import * as ruleDetailsI18n from '../../../../translations'; +import type { DiffableAllFields } from '../../../../../../../../../common/api/detection_engine'; +import { Tags } from '../../../../rule_about_section'; + +interface TagsReadOnlyProps { + tags: DiffableAllFields['tags']; +} + +export function TagsReadOnly({ tags }: TagsReadOnlyProps) { + return ( + , + }, + ]} + /> + ); +}