Update tooltip text and reduce the number of versions picker options

elastic · Dec 6, 2024 · 963fb56 · 963fb56
1 parent 764ade7
commit 963fb56
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 39 deletions.
diff --git a/...ule_management/components/rule_details/three_way_diff/comparison_side/comparison_side.tsx b/...ule_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<FieldName extends keyof DiffableAllFields>({
   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 (
     <>
       <SideHeader>
         <EuiFlexGroup direction="row" alignItems="center">
-          <EuiTitle size="xxs">
-            <h3>
-              {i18n.TITLE}
-              <ComparisonSideHelpInfo />
-            </h3>
-          </EuiTitle>
-          <VersionsPicker
-            hasBaseVersion={fieldThreeWayDiff.has_base_version}
-            selectedVersions={selectedVersions}
-            onChange={setSelectedVersions}
-          />
+          <EuiFlexItem>
+            <EuiTitle size="xxs">
+              <h3>
+                {i18n.TITLE}
+                <ComparisonSideHelpInfo shouldShowBaseVersion={shouldShowBaseVersion} />
+              </h3>
+            </EuiTitle>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <VersionsPicker
+              shouldShowBaseVersion={shouldShowBaseVersion}
+              selectedVersions={selectedVersions}
+              onChange={setSelectedVersions}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
       </SideHeader>
       <SubfieldChanges fieldName={fieldName} subfieldChanges={subfieldChanges} />

diff --git a/...ment/components/rule_details/three_way_diff/comparison_side/comparison_side_help_info.tsx b/...ment/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 {
       <EuiText style={{ width: POPOVER_WIDTH }} size="s">
         <FormattedMessage
           id="xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.upgradeHelpText"
-          defaultMessage="{title} shows field's JSON diff between prebuilt rule field versions affecting the rule update process. {versions}"
+          defaultMessage="The {title} lets you compare the values of a field across different versions of a rule: {versions} The differences are shown as JSON, highlighting additions, deletions, and modifications. Use this view to review and understand changes across versions."
           values={{
             title: <strong>{TITLE}</strong>,
             versions: (
               <>
                 <br />
                 <ul>
-                  <li>
-                    <strong>{BASE_VERSION}</strong> {'-'} {BASE_VERSION_EXPLANATION}
-                  </li>
+                  {shouldShowBaseVersion && (
+                    <li>
+                      <strong>{BASE_VERSION}</strong> {'-'} {BASE_VERSION_EXPLANATION}
+                    </li>
+                  )}
                   <li>
                     <strong>{CURRENT_VERSION}</strong> {'-'} {CURRENT_VERSION_EXPLANATION}
                   </li>
@@ -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 = (
   <FormattedMessage
     id="xpack.securitySolution.detectionEngine.rules.upgradeRules.currentVersionExplanation"
-    defaultMessage="current version including modification made after prebuilt rule installation. With lack of modifications it matches with {base}."
-    values={{
-      base: <strong>{BASE_VERSION}</strong>,
-    }}
+    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 = (
+  <FormattedMessage
+    id="xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.finalVersionExplanation"
+    defaultMessage="field value that will be saved once you click {updateButtonLabel}. You can edit this value in the {finalUpdateSectionLabel} section."
+    values={{
+      updateButtonLabel: <i>{UPDATE_BUTTON_LABEL}</i>,
+      finalUpdateSectionLabel: <i>{FINAL_UPDATE}</i>,
+    }}
+  />
 );
diff --git a/...omponents/rule_details/three_way_diff/comparison_side/versions_picker/versions_picker.tsx b/...omponents/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/...ule_management/components/rule_details/three_way_diff/final_side/final_side_help_info.tsx b/...ule_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 {
       <EuiText style={{ width: POPOVER_WIDTH }} size="s">
         <FormattedMessage
           id="xpack.securitySolution.detectionEngine.rules.upgradeRules.upgradeHelpText"
-          defaultMessage="Choose field values used in the upgraded rule. "
+          defaultMessage="The Final Update section lets you preview and edit the final value of a field. This is the value the rule will have after you click {updateButtonLabel}."
+          values={{
+            updateButtonLabel: <i>{UPDATE_BUTTON_LABEL}</i>,
+          }}
         />
       </EuiText>
     </EuiPopover>