From 963fb560c8b01b16fd90aa6b182d12d372ccec85 Mon Sep 17 00:00:00 2001 From: Nikita Indik Date: Fri, 6 Dec 2024 16:11:49 +0100 Subject: [PATCH] Update tooltip text and reduce the number of versions picker options --- .../comparison_side/comparison_side.tsx | 46 ++++++++++++------- .../comparison_side_help_info.tsx | 44 +++++++++++------- .../versions_picker/versions_picker.tsx | 8 ++-- .../final_side/final_side_help_info.tsx | 6 ++- 4 files changed, 65 insertions(+), 39 deletions(-) diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx index 11ed266651713..27653b721fa96 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx @@ -6,14 +6,15 @@ */ import React, { useState } from 'react'; -import { EuiFlexGroup, EuiTitle } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiTitle } from '@elastic/eui'; import { VersionsPicker } from './versions_picker/versions_picker'; import type { Version } from './versions_picker/constants'; import { SelectedVersions } from './versions_picker/constants'; import { pickFieldValueForVersion } from './utils'; -import type { - DiffableAllFields, - ThreeWayDiff, +import { + type DiffableAllFields, + type ThreeWayDiff, + ThreeWayDiffOutcome, } from '../../../../../../../common/api/detection_engine'; import { getSubfieldChanges } from './get_subfield_changes'; import { SubfieldChanges } from './subfield_changes'; @@ -39,26 +40,37 @@ export function ComparisonSide({ const [oldVersionType, newVersionType] = selectedVersions.split('_') as [Version, Version]; const oldFieldValue = pickFieldValueForVersion(oldVersionType, fieldThreeWayDiff, resolvedValue); - const newFieldValue = pickFieldValueForVersion(newVersionType, fieldThreeWayDiff, resolvedValue); - const subfieldChanges = getSubfieldChanges(fieldName, oldFieldValue, newFieldValue); + const isBaseVersionDifferentFromCurrent = [ + ThreeWayDiffOutcome.CustomizedValueNoUpdate, + ThreeWayDiffOutcome.CustomizedValueSameUpdate, + ThreeWayDiffOutcome.CustomizedValueCanUpdate, + ].includes(fieldThreeWayDiff.diff_outcome); + + const shouldShowBaseVersion = + fieldThreeWayDiff.has_base_version && isBaseVersionDifferentFromCurrent; + return ( <> - -

- {i18n.TITLE} - -

-
- + + +

+ {i18n.TITLE} + +

+
+
+ + +
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx index 47e5e537f3ab0..0361e62c2c882 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx @@ -17,6 +17,8 @@ import { FINAL_VERSION, TARGET_VERSION, } from './versions_picker/translations'; +import { UPDATE_BUTTON_LABEL } from '../../../../../rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations'; +import { FINAL_UPDATE } from '../final_side/translations'; /** * Theme doesn't expose width variables. Using provided size variables will require @@ -27,7 +29,13 @@ import { */ const POPOVER_WIDTH = 320; -export function ComparisonSideHelpInfo(): JSX.Element { +interface ComparisonSideHelpInfoProps { + shouldShowBaseVersion: boolean; +} + +export function ComparisonSideHelpInfo({ + shouldShowBaseVersion, +}: ComparisonSideHelpInfoProps): JSX.Element { const [isPopoverOpen, togglePopover] = useToggle(false); const button = ( @@ -43,16 +51,18 @@ export function ComparisonSideHelpInfo(): JSX.Element { {TITLE}, versions: ( <>
    -
  • - {BASE_VERSION} {'-'} {BASE_VERSION_EXPLANATION} -
  • + {shouldShowBaseVersion && ( +
  • + {BASE_VERSION} {'-'} {BASE_VERSION_EXPLANATION} +
  • + )}
  • {CURRENT_VERSION} {'-'} {CURRENT_VERSION_EXPLANATION}
  • @@ -75,31 +85,31 @@ export function ComparisonSideHelpInfo(): JSX.Element { const BASE_VERSION_EXPLANATION = i18n.translate( 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.baseVersionExplanation', { - defaultMessage: 'version originally installed from Elastic prebuilt rules package', + defaultMessage: 'the value the field had when the rule was first installed.', } ); const CURRENT_VERSION_EXPLANATION = ( {BASE_VERSION}, - }} + defaultMessage="field value in your currently installed rule." /> ); const TARGET_VERSION_EXPLANATION = i18n.translate( 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.targetVersionExplanation', { - defaultMessage: 'version coming from a new version of Elastic prebuilt rules package', + defaultMessage: 'field value in Elastic’s latest update.', } ); -const FINAL_VERSION_EXPLANATION = i18n.translate( - 'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.finalVersionExplanation', - { - defaultMessage: - 'version used to the update the rule. Initial value is suggested by the diff algorithm.', - } +const FINAL_VERSION_EXPLANATION = ( + {UPDATE_BUTTON_LABEL}, + finalUpdateSectionLabel: {FINAL_UPDATE}, + }} + /> ); diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx index 572e281ff3ae4..814346a38545b 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx @@ -12,19 +12,19 @@ import { BASE_OPTIONS, CURRENT_OPTIONS, TARGET_OPTIONS, SelectedVersions } from import * as i18n from './translations'; interface VersionsPickerProps { - hasBaseVersion: boolean; + shouldShowBaseVersion: boolean; selectedVersions: SelectedVersions; onChange: (pickedVersions: SelectedVersions) => void; } export function VersionsPicker({ - hasBaseVersion, + shouldShowBaseVersion, selectedVersions = SelectedVersions.CurrentFinal, onChange, }: VersionsPickerProps) { const options: EuiSelectOption[] = useMemo( - () => [...CURRENT_OPTIONS, ...TARGET_OPTIONS, ...(hasBaseVersion ? BASE_OPTIONS : [])], - [hasBaseVersion] + () => [...CURRENT_OPTIONS, ...TARGET_OPTIONS, ...(shouldShowBaseVersion ? BASE_OPTIONS : [])], + [shouldShowBaseVersion] ); const handleChange = useCallback( diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_side/final_side_help_info.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_side/final_side_help_info.tsx index 51e0c5097b97d..e4cb0403b4b25 100644 --- a/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_side/final_side_help_info.tsx +++ b/x-pack/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/final_side/final_side_help_info.tsx @@ -9,6 +9,7 @@ import React from 'react'; import useToggle from 'react-use/lib/useToggle'; import { EuiPopover, EuiText, EuiButtonIcon } from '@elastic/eui'; import { FormattedMessage } from '@kbn/i18n-react'; +import { UPDATE_BUTTON_LABEL } from '../../../../../rule_management_ui/components/rules_table/upgrade_prebuilt_rules_table/translations'; /** * Theme doesn't expose width variables. Using provided size variables will require @@ -35,7 +36,10 @@ export function FinalSideHelpInfo(): JSX.Element { {UPDATE_BUTTON_LABEL}, + }} />