From 6842cde2a9b5be7ad4b3ae5e0dd4b49a916a103f Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Fri, 13 Dec 2024 21:06:40 +0100 Subject: [PATCH] [Security Solution] Display readonly placeholders when field value is empty (#203826) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Partially addresses: https://github.com/elastic/kibana/issues/171520** ## Summary This PR updates readonly components of the Rule Upgrade flyout to display placeholders in cases when a field value is empty. ## Changes - Added placeholders to readonly components in the Rule Upgrade flyout - Simplified Storybook stories to make them more readable and less dependent on flyout context - Added stories that showcase empty states. You can run Storybook with `yarn storybook security_solution`. ## Screenshots **Before / After** Scherm­afbeelding 2024-12-12 om 00 05 56 Work started on 11-Dec-2024 --- .../translations/translations/fr-FR.json | 1 - .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - .../diff_components/translations.ts | 12 +- .../rule_details/rule_about_section.tsx | 17 +- .../empty_field_value_placeholder.tsx | 18 ++ .../empty_field_value_placeholder/index.tsx | 8 + .../translations.ts | 15 ++ .../alert_suppression.stories.tsx | 51 +++-- .../alert_suppression/alert_suppression.tsx | 12 +- .../anomaly_threshold.stories.tsx | 28 +-- .../building_block/building_block.stories.tsx | 30 +-- .../fields/building_block/building_block.tsx | 6 +- .../data_source/data_source.stories.tsx | 63 ++---- .../fields/data_source/data_source.tsx | 12 +- .../description/description.stories.tsx | 31 +-- .../fields/eql_query/eql_query.stories.tsx | 75 +++---- .../fields/esql_query/esql_query.stories.tsx | 37 +--- .../false_positives.stories.tsx | 36 +--- .../false_positives/false_positives.tsx | 11 +- .../history_window_start.stories.tsx | 28 +-- .../investigation_fields.stories.tsx | 36 +--- .../investigation_fields.tsx | 14 +- .../fields/kql_query/kql_query.stories.tsx | 184 ++++++++---------- .../machine_learning_job_id.stories.tsx | 35 +--- .../max_signals/max_signals.stories.tsx | 28 +-- .../fields/name/name.stories.tsx | 25 +-- .../new_terms_fields.stories.tsx | 28 +-- .../fields/note/note.stories.tsx | 29 +-- .../final_readonly/fields/note/note.tsx | 7 +- .../fields/references/references.stories.tsx | 36 +--- .../fields/references/references.tsx | 11 +- .../related_integrations.stories.tsx | 41 ++-- .../related_integrations.tsx | 11 +- .../required_fields.stories.tsx | 36 +--- .../required_fields/required_fields.tsx | 7 +- .../fields/risk_score/risk_score.stories.tsx | 28 +-- .../risk_score_mapping.stories.tsx | 32 +-- .../risk_score_mapping/risk_score_mapping.tsx | 32 ++- .../rule_name_override.stories.tsx | 34 +--- .../rule_name_override/rule_name_override.tsx | 11 +- .../rule_schedule/rule_schedule.stories.tsx | 34 +--- .../fields/setup/setup.stories.tsx | 32 +-- .../final_readonly/fields/setup/setup.tsx | 7 +- .../fields/severity/severity.stories.tsx | 25 +-- .../severity_mapping.stories.tsx | 36 +--- .../severity_mapping/severity_mapping.tsx | 28 ++- .../fields/tags/tags.stories.tsx | 29 +-- .../final_readonly/fields/tags/tags.tsx | 7 +- .../fields/threat/threat.stories.tsx | 33 +--- .../final_readonly/fields/threat/threat.tsx | 7 +- .../threat_index/threat_index.stories.tsx | 28 +-- .../fields/threat_index/threat_index.tsx | 7 +- .../threat_indicator_path.stories.tsx | 28 +-- .../threat_indicator_path.tsx | 11 +- .../threat_mapping/threat_mapping.stories.tsx | 34 +--- .../threat_query/threat_query.stories.tsx | 75 +++---- .../fields/threshold/threshold.stories.tsx | 34 +--- .../timeline_template.stories.tsx | 36 +--- .../timeline_template/timeline_template.tsx | 11 +- .../timestamp_override.stories.tsx | 40 ++-- .../timestamp_override/timestamp_override.tsx | 11 +- .../fields/type/type.stories.tsx | 25 +-- .../three_way_diff_storybook_providers.tsx | 38 +--- .../components/rule_details/translations.ts | 30 ++- 65 files changed, 568 insertions(+), 1236 deletions(-) create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/empty_field_value_placeholder.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/index.tsx create mode 100644 x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/translations.ts 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 a41c595972c54..6c6c7f8516d5a 100644 --- a/x-pack/platform/plugins/private/translations/translations/fr-FR.json +++ b/x-pack/platform/plugins/private/translations/translations/fr-FR.json @@ -39040,7 +39040,6 @@ "xpack.securitySolution.detectionEngine.rules.updatePrebuiltRulesCalloutTitle": "Mises à jour disponibles pour les règles installées. Examinez et mettez à jour dans {link}.", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedRulesAndTimelinesButton": "Mettez à jour {updateRules} {updateRules, plural, =1 {règle prédéfinie} other {règles prédéfinies}} d'Elastic et {updateTimelines} {updateTimelines, plural, =1 {chronologie prédéfinie} other {chronologies prédéfinies}} d'Elastic", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedTimelinesButton": "Mettez à jour {updateTimelines} {updateTimelines, plural, =1 {chronologie prédéfinie} other {chronologies prédéfinies}} d'Elastic", - "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.dataSourceLabel": "Source de données", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.eqlQueryLabel": "Requête EQL", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.esqlQueryLabel": "Requête ESQL", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.kqlQueryLabel": "Requête KQL", 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 a708ca5977b4c..569228e7d4088 100644 --- a/x-pack/platform/plugins/private/translations/translations/ja-JP.json +++ b/x-pack/platform/plugins/private/translations/translations/ja-JP.json @@ -38897,7 +38897,6 @@ "xpack.securitySolution.detectionEngine.rules.updatePrebuiltRulesCalloutTitle": "インストールされたルールの更新が利用可能です。{link}で確認して更新してください。", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedRulesAndTimelinesButton": "{updateRules} Elasticの事前構築済みの{updateRules, plural, other {個のルール}}と{updateTimelines} Elasticの事前構築済みの{updateTimelines, plural, other {個のタイムライン}}を更新", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedTimelinesButton": "{updateTimelines} Elastic事前構築済み{updateTimelines, plural, other {タイムライン}}を更新", - "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.dataSourceLabel": "データソース", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.eqlQueryLabel": "EQL クエリ", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.esqlQueryLabel": "EQLクエリ", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.kqlQueryLabel": "KQLクエリ", 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 595832d57198b..611dbf21d2a4a 100644 --- a/x-pack/platform/plugins/private/translations/translations/zh-CN.json +++ b/x-pack/platform/plugins/private/translations/translations/zh-CN.json @@ -38321,7 +38321,6 @@ "xpack.securitySolution.detectionEngine.rules.updatePrebuiltRulesCalloutTitle": "已安装规则有可用更新。在 {link} 中复查并更新。", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedRulesAndTimelinesButton": "更新 {updateRules} 个 Elastic 预构建{updateRules, plural, other {规则}}及 {updateTimelines} 个 Elastic 预构建{updateTimelines, plural, other {时间线}}", "xpack.securitySolution.detectionEngine.rules.updatePrePackagedTimelinesButton": "更新 {updateTimelines} 个 Elastic 预构建{updateTimelines, plural, other {时间线}}", - "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.dataSourceLabel": "数据源", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.eqlQueryLabel": "EQL 查询", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.esqlQueryLabel": "ESQL 查询", "xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.kqlQueryLabel": "KQL 查询", diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/translations.ts index d8b6503f08a11..f7b25ee24a948 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/translations.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/diff_components/translations.ts @@ -19,18 +19,17 @@ import { THREAT_INDEX_FIELD_LABEL, THREAT_MAPPING_FIELD_LABEL, HISTORY_WINDOW_SIZE_FIELD_LABEL, + DATA_SOURCE_FIELD_LABEL, + ALERT_SUPPRESSION_FIELD_LABEL, + INVESTIGATION_FIELDS_FIELD_LABEL, } from '../translations'; /** * Used when fields have different display names or formats than their corresponding rule object fields */ export const fieldToDisplayNameMap: Record = { - data_source: i18n.translate( - 'xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.dataSourceLabel', - { - defaultMessage: 'Data source', - } - ), + alert_suppression: ALERT_SUPPRESSION_FIELD_LABEL, + data_source: DATA_SOURCE_FIELD_LABEL, note: i18n.translate('xpack.securitySolution.detectionEngine.rules.upgradeRuleFields.noteLabel', { defaultMessage: 'Investigation guide', }), @@ -39,6 +38,7 @@ export const fieldToDisplayNameMap: Record = { references: REFERENCES_FIELD_LABEL, threat_indicator_path: THREAT_INDICATOR_PATH_LABEL, index_patterns: INDEX_FIELD_LABEL, + investigation_fields: INVESTIGATION_FIELDS_FIELD_LABEL, data_view_id: DATA_VIEW_ID_FIELD_LABEL, threat: THREAT_FIELD_LABEL, eql_query: i18n.translate( 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 396811892610b..4dcc15677d24c 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 @@ -26,7 +26,10 @@ import type { } from '@kbn/securitysolution-io-ts-alerting-types'; import { ALERT_RISK_SCORE } from '@kbn/rule-data-utils'; import { requiredOptional } from '@kbn/zod-helpers'; -import type { RuleResponse } from '../../../../../common/api/detection_engine/model/rule_schema'; +import type { + BuildingBlockType, + RuleResponse, +} from '../../../../../common/api/detection_engine/model/rule_schema'; import { SeverityBadge } from '../../../../common/components/severity_badge'; import { defaultToEmptyTag } from '../../../../common/components/empty_value'; import { filterEmptyThreats } from '../../../rule_creation_ui/pages/rule_creation/helpers'; @@ -76,9 +79,15 @@ export const Author = ({ author }: AuthorProps) => ( ); -export const BuildingBlock = () => ( +interface BuildingBlockProps { + type: BuildingBlockType | undefined; +} + +export const BuildingBlock = ({ type }: BuildingBlockProps) => ( - {i18n.BUILDING_BLOCK_FIELD_DESCRIPTION} + {type + ? i18n.BUILDING_BLOCK_ENABLED_FIELD_DESCRIPTION + : i18n.BUILDING_BLOCK_DISABLED_FIELD_DESCRIPTION} ); @@ -294,7 +303,7 @@ const prepareAboutSectionListItems = ( title: ( {i18n.BUILDING_BLOCK_FIELD_LABEL} ), - description: , + description: , }); } diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/empty_field_value_placeholder.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/empty_field_value_placeholder.tsx new file mode 100644 index 0000000000000..4914d1b7226c2 --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/empty_field_value_placeholder.tsx @@ -0,0 +1,18 @@ +/* + * 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 { EuiText } from '@elastic/eui'; +import * as i18n from './translations'; + +export function EmptyFieldValuePlaceholder() { + return ( + + {`<${i18n.EMPTY_FIELD_VALUE_PLACEHOLDER}>`} + + ); +} diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/index.tsx new file mode 100644 index 0000000000000..0777bdb8d906d --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/index.tsx @@ -0,0 +1,8 @@ +/* + * 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 { EmptyFieldValuePlaceholder } from './empty_field_value_placeholder'; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/translations.ts new file mode 100644 index 0000000000000..52486dbefb1de --- /dev/null +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/empty_field_value_placeholder/translations.ts @@ -0,0 +1,15 @@ +/* + * 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 EMPTY_FIELD_VALUE_PLACEHOLDER = i18n.translate( + 'xpack.securitySolution.detectionEngine.rules.upgradeRules.emptyFieldValuePlaceholder', + { + defaultMessage: 'Field value is empty', + } +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.stories.tsx index 9cebd044dad63..8803bab21022d 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.stories.tsx @@ -6,11 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { AlertSuppressionReadOnly } from './alert_suppression'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { @@ -19,29 +15,28 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/alert_suppression', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const OtherRuleTypes = () => ( + + + +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); +export const Threshold = () => ( + + + +); -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - alert_suppression: { - group_by: ['host.name'], - duration: { value: 5, unit: 'm' }, - missing_fields_strategy: 'suppress', - }, - }), -}; +export const EmptyValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.tsx index 8c15347bc6d90..3cbe4018012a1 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/alert_suppression/alert_suppression.tsx @@ -19,6 +19,7 @@ import { SuppressAlertsByField, SuppressAlertsDuration, } from '../../../../rule_definition_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface AlertSuppressionReadOnlyProps { alertSuppression?: AlertSuppression | ThresholdAlertSuppression; @@ -30,7 +31,16 @@ export function AlertSuppressionReadOnly({ ruleType, }: AlertSuppressionReadOnlyProps) { if (!alertSuppression) { - return null; + return ( + , + }, + ]} + /> + ); } const listItems = []; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/anomaly_threshold/anomaly_threshold.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/anomaly_threshold/anomaly_threshold.stories.tsx index 0f7ce369a117d..f52726450ae52 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/anomaly_threshold/anomaly_threshold.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/anomaly_threshold/anomaly_threshold.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { AnomalyThresholdReadOnly } from './anomaly_threshold'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockMachineLearningRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: AnomalyThresholdReadOnly, @@ -19,25 +14,4 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/anomaly_threshold', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockMachineLearningRule({ - anomaly_threshold: 50, - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.stories.tsx index 7112e63a313d8..3f8d7b3c72a6c 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.stories.tsx @@ -6,39 +6,13 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { BuildingBlockReadOnly } from './building_block'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: BuildingBlockReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/building_block', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ; -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - building_block: { - type: 'default', - }, - }), -}; +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.tsx index 7e64c140e6d70..1a161737b6bbb 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/building_block/building_block.tsx @@ -16,16 +16,12 @@ interface BuildingBlockReadOnlyProps { } export function BuildingBlockReadOnly({ buildingBlock }: BuildingBlockReadOnlyProps) { - if (!buildingBlock || !buildingBlock.type) { - return null; - } - return ( , + description: , }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.stories.tsx index 93f71afefb902..129a162ffd574 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.stories.tsx @@ -6,58 +6,35 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; import { dataSourceWithDataView, dataSourceWithIndexPatterns, mockDataView, - mockCustomQueryRule, } from '../../storybook/mocks'; +import { DataSourceReadOnly } from './data_source'; export default { - component: FieldFinalReadOnly, + component: DataSourceReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/data_source', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; - kibanaServicesOverrides?: Record; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const DataSourceWithIndexPatterns = Template.bind({}); - -DataSourceWithIndexPatterns.args = { - finalDiffableRule: mockCustomQueryRule({ - data_source: dataSourceWithIndexPatterns, - }), -}; - -export const DataSourceWithDataView = Template.bind({}); - -DataSourceWithDataView.args = { - finalDiffableRule: mockCustomQueryRule({ - data_source: dataSourceWithDataView, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - get: async () => mockDataView(), +export const DataSourceWithIndexPatterns = () => ( + +); + +export const DataSourceWithDataView = () => ( + mockDataView(), + }, }, - }, - }, -}; + }} + > + + +); + +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.tsx index 2a7bff6ff8b2d..19fc97ae5dee9 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/data_source/data_source.tsx @@ -12,6 +12,7 @@ import type { RuleDataSource } from '../../../../../../../../../common/api/detec import { Index, DataViewId, DataViewIndexPattern } from '../../../../rule_definition_section'; import * as ruleDetailsI18n from '../../../../translations'; import { assertUnreachable } from '../../../../../../../../../common/utility_types'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface DataSourceReadOnlyProps { dataSource?: RuleDataSource; @@ -19,7 +20,16 @@ interface DataSourceReadOnlyProps { export function DataSourceReadOnly({ dataSource }: DataSourceReadOnlyProps) { if (!dataSource) { - return null; + return ( + , + }, + ]} + /> + ); } if (dataSource.type === DataSourceType.index_patterns) { 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 index de7df1f7fbfbf..2ba645fe576f0 100644 --- 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 @@ -6,38 +6,13 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { DescriptionReadOnly } from './description'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: DescriptionReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/description', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - 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.", - }), -}; +export const Default = () => ( + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/eql_query/eql_query.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/eql_query/eql_query.stories.tsx index bad23cba21e2e..4b5210b62dd85 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/eql_query/eql_query.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/eql_query/eql_query.stories.tsx @@ -6,9 +6,6 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; import { EqlQueryReadOnly } from './eql_query'; import { @@ -16,7 +13,6 @@ import { dataSourceWithIndexPatterns, eqlQuery, mockDataView, - mockEqlRule, } from '../../storybook/mocks'; export default { @@ -24,51 +20,30 @@ export default { title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/eql_query', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; - kibanaServicesOverrides?: Record; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const EqlQueryWithIndexPatterns = Template.bind({}); - -EqlQueryWithIndexPatterns.args = { - finalDiffableRule: mockEqlRule({ - eql_query: eqlQuery, - data_source: dataSourceWithIndexPatterns, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - create: async () => mockDataView(), +export const EqlQueryWithIndexPatterns = () => ( + mockDataView(), + }, }, - }, - }, -}; - -export const EqlQueryWithDataView = Template.bind({}); - -EqlQueryWithDataView.args = { - finalDiffableRule: mockEqlRule({ - eql_query: eqlQuery, - data_source: dataSourceWithDataView, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - get: async () => mockDataView(), + }} + > + + +); + +export const EqlQueryWithDataView = () => ( + mockDataView(), + }, }, - }, - }, -}; + }} + > + + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/esql_query/esql_query.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/esql_query/esql_query.stories.tsx index 81b692bfc4e9b..a3cce1fe6b2e3 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/esql_query/esql_query.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/esql_query/esql_query.stories.tsx @@ -6,39 +6,18 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockEsqlRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; +import { EsqlQueryReadOnly } from './esql_query'; export default { - component: FieldFinalReadOnly, + component: EsqlQueryReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/esql_query', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockEsqlRule({ - esql_query: { +export const Default = () => ( + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.stories.tsx index a3f2defba2ec9..8a116e564c543 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.stories.tsx @@ -6,40 +6,20 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { FalsePositivesReadOnly } from './false_positives'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: FalsePositivesReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/false_positives', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - false_positives: [ +export const Default = () => ( + +); + +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.tsx index 7480af5dff4c5..5c51852f1eb4e 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/false_positives/false_positives.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { RuleFalsePositiveArray } from '../../../../../../../../../common/api/detection_engine'; import { FalsePositives } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface FalsePositivesReadOnlyProps { falsePositives: RuleFalsePositiveArray; } export function FalsePositivesReadOnly({ falsePositives }: FalsePositivesReadOnlyProps) { - if (falsePositives.length === 0) { - return null; - } - return ( , + description: falsePositives.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/history_window_start/history_window_start.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/history_window_start/history_window_start.stories.tsx index da87cf2c04eb0..162b5e14bf6f5 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/history_window_start/history_window_start.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/history_window_start/history_window_start.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { HistoryWindowStartReadOnly } from './history_window_start'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockNewTermsRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: HistoryWindowStartReadOnly, @@ -19,25 +14,4 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/history_window_start', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockNewTermsRule({ - history_window_start: 'now-14d', - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.stories.tsx index 400e7fd5ccba9..0c17672d589b4 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { InvestigationFieldsReadOnly } from './investigation_fields'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: InvestigationFieldsReadOnly, @@ -19,27 +14,12 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/investigation_fields', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - investigation_fields: { +export const Default = () => ( + +); + +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.tsx index b567b32ada533..e626f85461550 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/investigation_fields/investigation_fields.tsx @@ -10,6 +10,7 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { InvestigationFields } from '../../../../../../../../../common/api/detection_engine'; import { InvestigationFields as InvestigationFieldsComponent } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface InvestigationFieldsReadOnlyProps { investigationFields?: InvestigationFields; @@ -18,18 +19,17 @@ interface InvestigationFieldsReadOnlyProps { export function InvestigationFieldsReadOnly({ investigationFields, }: InvestigationFieldsReadOnlyProps) { - if (!investigationFields || !investigationFields.field_names.length) { - return null; - } - return ( - ), + description: + investigationFields && investigationFields.field_names.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/kql_query/kql_query.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/kql_query/kql_query.stories.tsx index 500999fea6c4f..1b4b205891cfc 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/kql_query/kql_query.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/kql_query/kql_query.stories.tsx @@ -6,130 +6,114 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; +import { KqlQueryReadOnly } from '.'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; import { dataSourceWithDataView, dataSourceWithIndexPatterns, inlineKqlQuery, mockDataView, - mockCustomQueryRule, savedKqlQuery, savedQueryResponse, - mockSavedQueryRule, } from '../../storybook/mocks'; export default { - component: FieldFinalReadOnly, + component: KqlQueryReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/kql_query', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; - kibanaServicesOverrides?: Record; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const InlineKqlQueryWithIndexPatterns = Template.bind({}); - -InlineKqlQueryWithIndexPatterns.args = { - finalDiffableRule: mockCustomQueryRule({ - kql_query: inlineKqlQuery, - data_source: dataSourceWithIndexPatterns, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - create: async () => mockDataView(), +export const InlineKqlQueryWithIndexPatterns = () => ( + mockDataView(), + }, }, - }, - }, -}; - -export const InlineKqlQueryWithDataView = Template.bind({}); + }} + > + + +); -InlineKqlQueryWithDataView.args = { - finalDiffableRule: mockCustomQueryRule({ - kql_query: inlineKqlQuery, - data_source: dataSourceWithDataView, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - get: async () => mockDataView(), +export const InlineKqlQueryWithDataView = () => ( + mockDataView(), + }, }, - }, - }, -}; - -export const InlineKqlQueryWithoutDataSource = Template.bind({}); + }} + > + + +); /* Filters should still be displayed if no `data_source` is provided. Component would fall back to the default index pattern in such case. */ -InlineKqlQueryWithoutDataSource.args = { - finalDiffableRule: mockCustomQueryRule({ - kql_query: inlineKqlQuery, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - create: async () => mockDataView(), +export const InlineKqlQueryWithoutDataSource = () => ( + mockDataView(), + }, }, - }, - }, -}; - -export const SavedKqlQueryWithIndexPatterns = Template.bind({}); + }} + > + + +); -SavedKqlQueryWithIndexPatterns.args = { - finalDiffableRule: mockSavedQueryRule({ - kql_query: savedKqlQuery, - data_source: dataSourceWithIndexPatterns, - type: 'saved_query', - }), - kibanaServicesOverrides: { - data: { - dataViews: { - create: async () => mockDataView(), +export const SavedKqlQueryWithIndexPatterns = () => ( + mockDataView(), + }, }, - }, - http: { - get: async () => savedQueryResponse, - }, - }, -}; - -export const SavedKqlQueryWithDataView = Template.bind({}); + http: { + get: async () => savedQueryResponse, + }, + }} + > + + +); -SavedKqlQueryWithDataView.args = { - finalDiffableRule: mockSavedQueryRule({ - kql_query: savedKqlQuery, - data_source: dataSourceWithDataView, - type: 'saved_query', - }), - kibanaServicesOverrides: { - data: { - dataViews: { - get: async () => mockDataView(), +export const SavedKqlQueryWithDataView = () => ( + mockDataView(), + }, }, - }, - http: { - get: async () => savedQueryResponse, - }, - }, -}; + http: { + get: async () => savedQueryResponse, + }, + }} + > + + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/machine_learning_job_id/machine_learning_job_id.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/machine_learning_job_id/machine_learning_job_id.stories.tsx index 35d90a26fdfde..dcb7e165b04fb 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/machine_learning_job_id/machine_learning_job_id.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/machine_learning_job_id/machine_learning_job_id.stories.tsx @@ -7,15 +7,11 @@ import React from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import type { Story } from '@storybook/react'; import { MachineLearningJobIdReadOnly } from './machine_learning_job_id'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; import { GET_MODULES_QUERY_KEY } from '../../../../../../../../common/components/ml_popover/hooks/use_fetch_modules_query'; import { GET_RECOGNIZER_QUERY_KEY } from '../../../../../../../../common/components/ml_popover/hooks/use_fetch_recognizer_query'; import { GET_JOBS_SUMMARY_QUERY_KEY } from '../../../../../../../../common/components/ml/hooks/use_fetch_jobs_summary_query'; -import { mockMachineLearningRule } from '../../storybook/mocks'; export default { component: MachineLearningJobIdReadOnly, @@ -58,27 +54,10 @@ function MockMlData({ children }: { children: React.ReactNode }) { return <>{children}; } -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockMachineLearningRule({ - machine_learning_job_id: 'auth_high_count_logon_events', - }), -}; +export const Default = () => ( + + + + + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/max_signals/max_signals.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/max_signals/max_signals.stories.tsx index 6959a5c391649..17d42acc1e650 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/max_signals/max_signals.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/max_signals/max_signals.stories.tsx @@ -6,37 +6,11 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { MaxSignalsReadOnly } from './max_signals'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: MaxSignalsReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/max_signals', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - max_signals: 100, - }), -}; +export const Default = () => ; 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 index 137b34f851a27..7036644c57fb0 100644 --- 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 @@ -6,34 +6,11 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { NameReadOnly } from './name'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: NameReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/name', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - name: 'Forwarded Google Workspace Security Alert', - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/new_terms_fields/new_terms_fields.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/new_terms_fields/new_terms_fields.stories.tsx index 0f870562f2a8b..e04d5a8286183 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/new_terms_fields/new_terms_fields.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/new_terms_fields/new_terms_fields.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { NewTermsFieldsReadOnly } from './new_terms_fields'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockNewTermsRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: NewTermsFieldsReadOnly, @@ -19,25 +14,4 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/new_terms_fields', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockNewTermsRule({ - new_terms_fields: ['user.name', 'source.ip'], - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.stories.tsx index 9492b797689c7..b993a3f1639ed 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.stories.tsx @@ -6,34 +6,17 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { NoteReadOnly } from './note'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: NoteReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/note', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ( + +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - note: '## Triage and analysis\n\n### Investigating Unusual Network Activity\nDetection alerts from this rule indicate the presence of network activity from a Linux process for which network activity is rare and unusual. Here are some possible avenues of investigation:\n- Consider the IP addresses and ports. Are these used by normal but infrequent network workflows? Are they expected or unexpected?\n- If the destination IP address is remote or external, does it associate with an expected domain, organization or geography? Note: avoid interacting directly with suspected malicious IP addresses.\n- Consider the user as identified by the username field. Is this network activity part of an expected workflow for the user who ran the program?\n- Examine the history of execution. If this process only manifested recently, it might be part of a new software package. If it has a consistent cadence (for example if it runs monthly or quarterly), it might be part of a monthly or quarterly business or maintenance process.\n- Examine the process arguments, title and working directory. These may provide indications as to the source of the program or the nature of the tasks it is performing.', - }), -}; +export const EmptyStringValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.tsx index 5f746fb0a78ce..7a6702f906684 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/note/note.tsx @@ -10,22 +10,19 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as i18n from './translations'; import type { InvestigationGuide } from '../../../../../../../../../common/api/detection_engine'; import { MarkdownRenderer } from '../../../../../../../../common/components/markdown_editor'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface NoteReadOnlyProps { note: InvestigationGuide; } export function NoteReadOnly({ note }: NoteReadOnlyProps) { - if (!note) { - return null; - } - return ( , + description: note.trim() ? : , }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.stories.tsx index d4d0d3241a6bf..25fd321e8204b 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.stories.tsx @@ -6,41 +6,21 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { ReferencesReadOnly } from './references'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ReferencesReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/references', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - references: [ +export const Default = () => ( + +); + +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.tsx index d9bb50dcaeb0b..1353ba2c92012 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/references/references.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { RuleReferenceArray } from '../../../../../../../../../common/api/detection_engine'; import { References } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface ReferencesReadOnlyProps { references: RuleReferenceArray; } export function ReferencesReadOnly({ references }: ReferencesReadOnlyProps) { - if (references.length === 0) { - return null; - } - return ( , + description: references.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.stories.tsx index 65f4f50dbfb87..af00990d8d01e 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.stories.tsx @@ -7,12 +7,8 @@ import React from 'react'; import { useQueryClient } from '@tanstack/react-query'; -import type { Story } from '@storybook/react'; -import { RelatedIntegrationsReadOnly } from './related_integrations'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; +import { RelatedIntegrationsReadOnly } from './related_integrations'; export default { component: RelatedIntegrationsReadOnly, @@ -39,27 +35,14 @@ function MockRelatedIntegrationsData({ children }: { children: React.ReactNode } return <>{children}; } -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - related_integrations: [{ package: 'endpoint', version: '^8.2.0' }], - }), -}; +export const Default = () => ( + + + + + +); + +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.tsx index b9a7468072782..9fe4176079247 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/related_integrations/related_integrations.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import { RelatedIntegrationsDescription } from '../../../../../../../../detections/components/rules/related_integrations/integrations_description'; import type { RelatedIntegrationArray } from '../../../../../../../../../common/api/detection_engine'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface RelatedIntegrationsReadOnly { relatedIntegrations: RelatedIntegrationArray; } export function RelatedIntegrationsReadOnly({ relatedIntegrations }: RelatedIntegrationsReadOnly) { - if (!relatedIntegrations.length) { - return null; - } - return ( , + description: relatedIntegrations.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.stories.tsx index b3839c9535612..a4ed34254a211 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.stories.tsx @@ -5,40 +5,20 @@ * 2.0. */ import React from 'react'; -import type { Story } from '@storybook/react'; import { RequiredFieldsReadOnly } from './required_fields'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: RequiredFieldsReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/required_fields', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - required_fields: [ +export const Default = () => ( + +); + +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.tsx index 4d60acc8d5f15..5c6db9ddfd488 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/required_fields/required_fields.tsx @@ -10,6 +10,7 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { RequiredFieldArray } from '../../../../../../../../../common/api/detection_engine'; import { RequiredFields } from '../../../../rule_definition_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface RequiredFieldsReadOnlyProps { requiredFields: RequiredFieldArray; @@ -21,7 +22,11 @@ export function RequiredFieldsReadOnly({ requiredFields }: RequiredFieldsReadOnl listItems={[ { title: ruleDetailsI18n.REQUIRED_FIELDS_FIELD_LABEL, - description: , + description: requiredFields.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score/risk_score.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score/risk_score.stories.tsx index c045000018d07..348a75b563116 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score/risk_score.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score/risk_score.stories.tsx @@ -6,37 +6,11 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { RiskScoreReadOnly } from './risk_score'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: RiskScoreReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/risk_score', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - risk_score: 96, - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.stories.tsx index 4c7bd4cbba9ef..8a9a4de7eda6c 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { RiskScoreMappingReadOnly } from './risk_score_mapping'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: RiskScoreMappingReadOnly, @@ -19,25 +14,10 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/risk_score_mapping', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ( + +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - risk_score_mapping: [{ field: 'event.risk_score', operator: 'equals', value: '' }], - }), -}; +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.tsx index 5581bd588a79e..d1bca5a511e4e 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/risk_score_mapping/risk_score_mapping.tsx @@ -11,20 +11,36 @@ import { EuiDescriptionList } from '@elastic/eui'; import type { RiskScoreMapping } from '../../../../../../../../../common/api/detection_engine'; import * as ruleDetailsI18n from '../../../../translations'; import { RiskScoreMappingItem } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; export interface RiskScoreMappingReadProps { riskScoreMapping: RiskScoreMapping; } export const RiskScoreMappingReadOnly = ({ riskScoreMapping }: RiskScoreMappingReadProps) => { - const listItems = riskScoreMapping - .filter((riskScoreMappingItem) => riskScoreMappingItem.field !== '') - .map((riskScoreMappingItem, index) => ({ - title: index === 0 ? ruleDetailsI18n.RISK_SCORE_MAPPING_FIELD_LABEL : '', - description: ( - - ), - })); + const nonEmptyRiskScoreMappingItems = riskScoreMapping.filter( + (riskScoreMappingItem) => riskScoreMappingItem.field !== '' + ); + + if (nonEmptyRiskScoreMappingItems.length === 0) { + return ( + , + }, + ]} + /> + ); + } + + const listItems = nonEmptyRiskScoreMappingItems.map((riskScoreMappingItem, index) => ({ + title: index === 0 ? ruleDetailsI18n.RISK_SCORE_MAPPING_FIELD_LABEL : '', + description: ( + + ), + })); return ; }; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.stories.tsx index 0552b9e4f6b4f..36167c5c39240 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { RuleNameOverrideReadOnly } from './rule_name_override'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: RuleNameOverrideReadOnly, @@ -19,27 +14,12 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/rule_name_override', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ( + +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); +export const EmptyStringValue = () => ( + +); -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - rule_name_override: { - field_name: 'event.action', - }, - }), -}; +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.tsx index 9090138ab91ee..5cf205c732569 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_name_override/rule_name_override.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { RuleNameOverrideObject } from '../../../../../../../../../common/api/detection_engine'; import { RuleNameOverride } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface RuleNameOverrideReadOnlyProps { ruleNameOverride?: RuleNameOverrideObject; } export function RuleNameOverrideReadOnly({ ruleNameOverride }: RuleNameOverrideReadOnlyProps) { - if (!ruleNameOverride) { - return null; - } - return ( , + description: ruleNameOverride?.field_name ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_schedule/rule_schedule.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_schedule/rule_schedule.stories.tsx index cca1dcb9bc21f..a49735a35b5be 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_schedule/rule_schedule.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/rule_schedule/rule_schedule.stories.tsx @@ -6,40 +6,18 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { RuleScheduleReadOnly } from './rule_schedule'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: RuleScheduleReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/rule_schedule', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - rule_schedule: { +export const Default = () => ( + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.stories.tsx index 14ba62913053e..07b3100f9d7ad 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.stories.tsx @@ -6,35 +6,19 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { SetupReadOnly } from './setup'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: SetupReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/setup', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ( + \nAdministrative Templates >\nWindows PowerShell >\nTurn on PowerShell Script Block Logging (Enable)\n```\n\nSteps to implement the logging policy via registry:\n\n```\nreg add "hklm\\SOFTWARE\\Policies\\Microsoft\\Windows\\PowerShell\\ScriptBlockLogging" /v EnableScriptBlockLogging /t REG_DWORD /d 1\n```' + } + /> +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - setup: - 'The \'PowerShell Script Block Logging\' logging policy must be enabled.\nSteps to implement the logging policy with Advanced Audit Configuration:\n\n```\nComputer Configuration >\nAdministrative Templates >\nWindows PowerShell >\nTurn on PowerShell Script Block Logging (Enable)\n```\n\nSteps to implement the logging policy via registry:\n\n```\nreg add "hklm\\SOFTWARE\\Policies\\Microsoft\\Windows\\PowerShell\\ScriptBlockLogging" /v EnableScriptBlockLogging /t REG_DWORD /d 1\n```', - }), -}; +export const EmptyStringValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.tsx index feeb188da5ae8..52f3bee8988e2 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/setup/setup.tsx @@ -10,22 +10,19 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { SetupGuide } from '../../../../../../../../../common/api/detection_engine'; import { MarkdownRenderer } from '../../../../../../../../common/components/markdown_editor'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface SetupReadOnlyProps { setup: SetupGuide; } export function SetupReadOnly({ setup }: SetupReadOnlyProps) { - if (!setup) { - return null; - } - return ( , + description: setup.trim() ? : , }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity/severity.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity/severity.stories.tsx index 3d6836295aa94..646a04c1344c7 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity/severity.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity/severity.stories.tsx @@ -6,34 +6,11 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { SeverityReadOnly } from './severity'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: SeverityReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/severity', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - severity: 'high', - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.stories.tsx index 4d3825cc7e4dc..cf0ed52c6a8bb 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { SeverityMappingReadOnly } from './severity_mapping'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: SeverityMappingReadOnly, @@ -19,26 +14,9 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/severity_mapping', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - severity_mapping: [ +export const Default = () => ( + +); + +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.tsx index 4d7b478e00f9e..1f69873c2f486 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/severity_mapping/severity_mapping.tsx @@ -10,18 +10,34 @@ import { EuiDescriptionList } from '@elastic/eui'; import type { SeverityMapping } from '../../../../../../../../../common/api/detection_engine'; import * as ruleDetailsI18n from '../../../../translations'; import { SeverityMappingItem } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; export interface SeverityMappingReadOnlyProps { severityMapping: SeverityMapping; } export const SeverityMappingReadOnly = ({ severityMapping }: SeverityMappingReadOnlyProps) => { - const listItems = severityMapping - .filter((severityMappingItem) => severityMappingItem.field !== '') - .map((severityMappingItem, index) => ({ - title: index === 0 ? ruleDetailsI18n.SEVERITY_MAPPING_FIELD_LABEL : '', - description: , - })); + const nonEmptySeverityMappingItems = severityMapping.filter( + (severityMappingItem) => severityMappingItem.field !== '' + ); + + if (nonEmptySeverityMappingItems.length === 0) { + return ( + , + }, + ]} + /> + ); + } + + const listItems = nonEmptySeverityMappingItems.map((severityMappingItem, index) => ({ + title: index === 0 ? ruleDetailsI18n.SEVERITY_MAPPING_FIELD_LABEL : '', + description: , + })); 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 index f93f5ffd2dad0..6d35d9059a62d 100644 --- 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 @@ -6,34 +6,17 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { TagsReadOnly } from './tags'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: TagsReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/tags', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ( + +); -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - tags: ['Elastic', 'Cloud', 'Google Workspace', 'Log Auditing', 'Threat Detection'], - }), -}; +export const EmptyArrayValue = () => ; 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 index 452b6bf2d8b99..6153adf44653a 100644 --- 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 @@ -10,22 +10,19 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { RuleTagArray } from '../../../../../../../../../common/api/detection_engine'; import { Tags } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface TagsReadOnlyProps { tags: RuleTagArray; } export function TagsReadOnly({ tags }: TagsReadOnlyProps) { - if (tags.length === 0) { - return null; - } - return ( , + description: tags.length ? : , }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.stories.tsx index 671dc68e1054f..02a847cd335c9 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.stories.tsx @@ -6,35 +6,16 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreatReadOnly } from './threat'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ThreatReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threat', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - threat: [ +export const Default = () => ( + +); + +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.tsx index ec8ab846f0206..288f815926bbf 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat/threat.tsx @@ -10,22 +10,19 @@ import { EuiDescriptionList } from '@elastic/eui'; import type { Threats } from '@kbn/securitysolution-io-ts-alerting-types'; import * as ruleDetailsI18n from '../../../../translations'; import { Threat } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; export interface ThreatReadOnlyProps { threat: Threats; } export const ThreatReadOnly = ({ threat }: ThreatReadOnlyProps) => { - if (threat.length === 0) { - return null; - } - return ( , + description: threat.length ? : , }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.stories.tsx index 6ab55ca01e335..baf532b0d6ad5 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.stories.tsx @@ -6,37 +6,13 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreatIndexReadOnly } from './threat_index'; -import { mockThreatMatchRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ThreatIndexReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threat_index', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ; -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockThreatMatchRule({ - threat_index: ['logs-ti_*', 'logs-defend_*'], - }), -}; +export const EmptyArrayValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.tsx index 23bb2cdfc8bde..492796ad7e73f 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_index/threat_index.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import { ThreatIndex } from '../../../../rule_definition_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; export interface ThreatIndexReadOnlyProps { threatIndex: string[]; @@ -20,7 +21,11 @@ export const ThreatIndexReadOnly = ({ threatIndex }: ThreatIndexReadOnlyProps) = listItems={[ { title: ruleDetailsI18n.THREAT_INDEX_FIELD_LABEL, - description: , + description: threatIndex.length ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.stories.tsx index 15c547001a27d..02372dc538e55 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreatIndicatorPathReadOnly } from './threat_indicator_path'; -import { mockThreatMatchRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ThreatIndicatorPathReadOnly, @@ -19,25 +14,6 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threat_indicator_path', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} +export const Default = () => ; -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockThreatMatchRule({ - threat_indicator_path: 'threat.indicator', - }), -}; +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.tsx index c05dfbd71e14f..6c22a84d71169 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_indicator_path/threat_indicator_path.tsx @@ -9,6 +9,7 @@ import React from 'react'; import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import { ThreatIndicatorPath } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; export interface ThreatIndicatorPathReadOnlyProps { threatIndicatorPath?: string; @@ -17,16 +18,16 @@ export interface ThreatIndicatorPathReadOnlyProps { export const ThreatIndicatorPathReadOnly = ({ threatIndicatorPath, }: ThreatIndicatorPathReadOnlyProps) => { - if (!threatIndicatorPath) { - return null; - } - return ( , + description: threatIndicatorPath ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_mapping/threat_mapping.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_mapping/threat_mapping.stories.tsx index 587be1b02cba0..42bea4ce552f5 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_mapping/threat_mapping.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_mapping/threat_mapping.stories.tsx @@ -6,38 +6,16 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreatMappingReadOnly } from './threat_mapping'; -import { mockThreatMatchRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ThreatMappingReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threat_mapping', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockThreatMatchRule({ - threat_mapping: [ +export const Default = () => ( + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_query/threat_query.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_query/threat_query.stories.tsx index 46e98bbaa798d..ab2b48457ba2d 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_query/threat_query.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threat_query/threat_query.stories.tsx @@ -6,16 +6,12 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; import { ThreatQueryReadOnly } from './threat_query'; import { dataSourceWithDataView, dataSourceWithIndexPatterns, inlineKqlQuery, mockDataView, - mockThreatMatchRule, } from '../../storybook/mocks'; import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; @@ -24,51 +20,30 @@ export default { title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threat_query', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; - kibanaServicesOverrides?: Record; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const ThreatQueryWithIndexPatterns = Template.bind({}); - -ThreatQueryWithIndexPatterns.args = { - finalDiffableRule: mockThreatMatchRule({ - threat_query: inlineKqlQuery, - data_source: dataSourceWithIndexPatterns, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - create: async () => mockDataView(), +export const ThreatQueryWithIndexPatterns = () => ( + mockDataView(), + }, }, - }, - }, -}; - -export const ThreatQueryWithDataView = Template.bind({}); - -ThreatQueryWithDataView.args = { - finalDiffableRule: mockThreatMatchRule({ - threat_query: inlineKqlQuery, - data_source: dataSourceWithDataView, - }), - kibanaServicesOverrides: { - data: { - dataViews: { - get: async () => mockDataView(), + }} + > + + +); + +export const ThreatQueryWithDataView = () => ( + mockDataView(), + }, }, - }, - }, -}; + }} + > + + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threshold/threshold.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threshold/threshold.stories.tsx index 5270a2af8a635..882a58237e912 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threshold/threshold.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/threshold/threshold.stories.tsx @@ -6,41 +6,19 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { ThresholdReadOnly } from './threshold'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockThresholdRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: ThresholdReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/threshold', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockThresholdRule({ - threshold: { +export const Default = () => ( + +); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.stories.tsx index 582affc9d192e..9ca22b21ce192 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { TimelineTemplateReadOnly } from './timeline_template'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: TimelineTemplateReadOnly, @@ -19,28 +14,13 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/timeline_template', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - timeline_template: { +export const Default = () => ( + +); + +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.tsx index d6cc75cec5843..9514bd95402a5 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timeline_template/timeline_template.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { TimelineTemplateReference } from '../../../../../../../../../common/api/detection_engine'; import { TimelineTitle } from '../../../../rule_definition_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface TimelineTemplateReadOnlyProps { timelineTemplate?: TimelineTemplateReference; } export function TimelineTemplateReadOnly({ timelineTemplate }: TimelineTemplateReadOnlyProps) { - if (!timelineTemplate) { - return null; - } - return ( , + description: timelineTemplate ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.stories.tsx index 3d4c5b00005ad..fe4b8420a1a4e 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.stories.tsx @@ -6,12 +6,7 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { TimestampOverrideReadOnly } from './timestamp_override'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: TimestampOverrideReadOnly, @@ -19,28 +14,17 @@ export default { 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/timestamp_override', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - timestamp_override: { +export const Default = () => ( + +); + +export const EmptyStringValue = () => ( + +); + +export const NoValue = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.tsx index 5d4c6ba3e1d2b..20e6fe53180db 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/timestamp_override/timestamp_override.tsx @@ -10,22 +10,23 @@ import { EuiDescriptionList } from '@elastic/eui'; import * as ruleDetailsI18n from '../../../../translations'; import type { TimestampOverrideObject } from '../../../../../../../../../common/api/detection_engine'; import { TimestampOverride } from '../../../../rule_about_section'; +import { EmptyFieldValuePlaceholder } from '../../empty_field_value_placeholder'; interface TimestampOverrideReadOnlyProps { timestampOverride?: TimestampOverrideObject; } export function TimestampOverrideReadOnly({ timestampOverride }: TimestampOverrideReadOnlyProps) { - if (!timestampOverride) { - return null; - } - return ( , + description: timestampOverride?.field_name ? ( + + ) : ( + + ), }, ]} /> diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/type/type.stories.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/type/type.stories.tsx index c57bdf36ce3a0..0103bff5a0a0e 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/type/type.stories.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/fields/type/type.stories.tsx @@ -6,34 +6,11 @@ */ import React from 'react'; -import type { Story } from '@storybook/react'; import { TypeReadOnly } from './type'; -import { FieldFinalReadOnly } from '../../field_final_readonly'; -import type { DiffableRule } from '../../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from '../../storybook/mocks'; -import { ThreeWayDiffStorybookProviders } from '../../storybook/three_way_diff_storybook_providers'; export default { component: TypeReadOnly, title: 'Rule Management/Prebuilt Rules/Upgrade Flyout/ThreeWayDiff/FieldReadOnly/type', }; -interface TemplateProps { - finalDiffableRule: DiffableRule; -} - -const Template: Story = (args) => { - return ( - - - - ); -}; - -export const Default = Template.bind({}); - -Default.args = { - finalDiffableRule: mockCustomQueryRule({ - type: 'query', - }), -}; +export const Default = () => ; diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/storybook/three_way_diff_storybook_providers.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/storybook/three_way_diff_storybook_providers.tsx index d961f3d23befb..4eb14440c056c 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/storybook/three_way_diff_storybook_providers.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_readonly/storybook/three_way_diff_storybook_providers.tsx @@ -13,15 +13,8 @@ import { Provider as ReduxStoreProvider } from 'react-redux'; import type { CoreStart } from '@kbn/core/public'; import type { UpsellingService } from '@kbn/security-solution-upselling/service'; import { createKibanaReactContext } from '@kbn/kibana-react-plugin/public'; -import type { UpgradeableDiffableFields } from '../../../../../model/prebuilt_rule_upgrade/fields'; import { ReactQueryClientProvider } from '../../../../../../../common/containers/query_client/query_client_provider'; import { UpsellingProvider } from '../../../../../../../common/components/upselling_provider'; -import { FieldUpgradeContextProvider } from '../../rule_upgrade/field_upgrade_context'; -import type { - DiffableRule, - RuleResponse, -} from '../../../../../../../../common/api/detection_engine'; -import { mockCustomQueryRule } from './mocks'; function createKibanaServicesMock(overrides?: Partial) { const baseMock = { @@ -76,55 +69,26 @@ function createMockStore() { return store; } -const setRuleFieldResolvedValueMock = () => {}; - interface StorybookProvidersProps { children: React.ReactNode; kibanaServicesOverrides?: Record; - finalDiffableRule?: DiffableRule; - fieldName: string; } export function ThreeWayDiffStorybookProviders({ children, kibanaServicesOverrides, - finalDiffableRule = mockCustomQueryRule(), - fieldName, }: StorybookProvidersProps) { const kibanaServicesMock = createKibanaServicesMock(kibanaServicesOverrides); const KibanaReactContext = createKibanaReactContext(kibanaServicesMock); const store = createMockStore(); - const ruleUpgradeStateMock = { - id: 'test-id', - rule_id: 'test-id', - current_rule: {} as RuleResponse, - target_rule: {} as RuleResponse, - diff: { - fields: {}, - num_fields_with_updates: 0, - num_fields_with_conflicts: 0, - num_fields_with_non_solvable_conflicts: 0, - }, - revision: 1, - finalRule: finalDiffableRule, - hasUnresolvedConflicts: false, - fieldsUpgradeState: {}, - }; - return ( - - {children} - + {children} diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts index e7f36e2011f3c..c5183626a63a7 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/translations.ts @@ -84,6 +84,13 @@ export const DESCRIPTION_FIELD_LABEL = i18n.translate( } ); +export const ALERT_SUPPRESSION_FIELD_LABEL = i18n.translate( + 'xpack.securitySolution.detectionEngine.ruleDetails.alertSuppressionFieldLabel', + { + defaultMessage: 'Alert suppression', + } +); + export const AUTHOR_FIELD_LABEL = i18n.translate( 'xpack.securitySolution.detectionEngine.ruleDetails.authorFieldLabel', { @@ -98,13 +105,27 @@ export const BUILDING_BLOCK_FIELD_LABEL = i18n.translate( } ); -export const BUILDING_BLOCK_FIELD_DESCRIPTION = i18n.translate( +export const BUILDING_BLOCK_ENABLED_FIELD_DESCRIPTION = i18n.translate( 'xpack.securitySolution.detectionEngine.ruleDetails.buildingBlockFieldDescription', { defaultMessage: 'All generated alerts will be marked as "building block" alerts', } ); +export const BUILDING_BLOCK_DISABLED_FIELD_DESCRIPTION = i18n.translate( + 'xpack.securitySolution.detectionEngine.ruleDetails.buildingBlockDisabledFieldDescription', + { + defaultMessage: 'Will not mark alerts as "building block" alerts', + } +); + +export const DATA_SOURCE_FIELD_LABEL = i18n.translate( + 'xpack.securitySolution.detectionEngine.ruleDetails.dataSourceFieldLabel', + { + defaultMessage: 'Data source', + } +); + export const SEVERITY_FIELD_LABEL = i18n.translate( 'xpack.securitySolution.detectionEngine.ruleDetails.severityFieldLabel', { @@ -168,6 +189,13 @@ export const RULE_NAME_OVERRIDE_FIELD_LABEL = i18n.translate( } ); +export const RULE_NAME_OVERRIDE_DISABLED_FIELD_DESCRIPTION = i18n.translate( + 'xpack.securitySolution.detectionEngine.ruleDetails.ruleNameOverrideDisabledFieldDescription', + { + defaultMessage: 'Rule name will not be overridden', + } +); + export const THREAT_FIELD_LABEL = i18n.translate( 'xpack.securitySolution.detectionEngine.ruleDetails.threatFieldLabel', {