[8.x] [Security Solution] Reduce dropdown options and improve tooltip…

… texts in Rule Upgrade flyout (#203222) (#204314) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Reduce dropdown options and improve tooltip texts in Rule Upgrade flyout (#203222)](#203222)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Nikita Indik <nikita.indik@elastic.co>
elastic · Dec 14, 2024 · fc96e41 · fc96e41
1 parent 3ef2eec
commit fc96e41
Show file tree

Hide file tree

Showing 13 changed files with 365 additions and 165 deletions.
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
@@ -9,14 +9,10 @@ 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 { i18n } from '@kbn/i18n';
 import { TITLE } from './translations';
-import {
-  BASE_VERSION,
-  CURRENT_VERSION,
-  FINAL_VERSION,
-  TARGET_VERSION,
-} from './versions_picker/translations';
+import type { VersionsPickerOptionEnum } from './versions_picker/versions_picker';
+import { useFieldUpgradeContext } from '../rule_upgrade/field_upgrade_context';
+import { getOptionDetails } from './utils';
 
 /**
  * Theme doesn't expose width variables. Using provided size variables will require
@@ -27,9 +23,18 @@ import {
  */
 const POPOVER_WIDTH = 320;
 
-export function ComparisonSideHelpInfo(): JSX.Element {
+interface ComparisonSideHelpInfoProps {
+  options: VersionsPickerOptionEnum[];
+}
+
+export function ComparisonSideHelpInfo({ options }: ComparisonSideHelpInfoProps): JSX.Element {
   const [isPopoverOpen, togglePopover] = useToggle(false);
 
+  const { hasResolvedValueDifferentFromSuggested } = useFieldUpgradeContext();
+  const optionsWithDescriptions = options.map((option) =>
+    getOptionDetails(option, hasResolvedValueDifferentFromSuggested)
+  );
+
   const button = (
     <EuiButtonIcon
       iconType="questionInCircle"
@@ -43,25 +48,20 @@ 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} Differences are shown as JSON, with red lines showing what was removed, green lines showing additions, and bold text highlighting changes. Use {title} to review and understand changes across versions."
           values={{
             title: <strong>{TITLE}</strong>,
             versions: (
               <>
                 <br />
                 <ul>
-                  <li>
-                    <strong>{BASE_VERSION}</strong> {'-'} {BASE_VERSION_EXPLANATION}
-                  </li>
-                  <li>
-                    <strong>{CURRENT_VERSION}</strong> {'-'} {CURRENT_VERSION_EXPLANATION}
-                  </li>
-                  <li>
-                    <strong>{TARGET_VERSION}</strong> {'-'} {TARGET_VERSION_EXPLANATION}
-                  </li>
-                  <li>
-                    <strong>{FINAL_VERSION}</strong> {'-'} {FINAL_VERSION_EXPLANATION}
-                  </li>
+                  {optionsWithDescriptions.map(
+                    ({ title: displayName, description: explanation }) => (
+                      <li>
+                        <strong>{displayName}</strong> {'-'} {explanation}
+                      </li>
+                    )
+                  )}
                 </ul>
               </>
             ),
@@ -71,35 +71,3 @@ export function ComparisonSideHelpInfo(): JSX.Element {
     </EuiPopover>
   );
 }
-
-const BASE_VERSION_EXPLANATION = i18n.translate(
-  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.baseVersionExplanation',
-  {
-    defaultMessage: 'version originally installed from Elastic prebuilt rules package',
-  }
-);
-
-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>,
-    }}
-  />
-);
-
-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',
-  }
-);
-
-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.',
-  }
-);
diff --git a/...nagement/components/rule_details/three_way_diff/comparison_side/field_comparison_side.tsx b/...nagement/components/rule_details/three_way_diff/comparison_side/field_comparison_side.tsx
@@ -5,35 +5,56 @@
  * 2.0.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 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 { isEqual } from 'lodash';
+import usePrevious from 'react-use/lib/usePrevious';
+import { VersionsPicker, VersionsPickerOptionEnum } from './versions_picker/versions_picker';
 import { FieldUpgradeSideHeader } from '../field_upgrade_side_header';
 import { useFieldUpgradeContext } from '../rule_upgrade/field_upgrade_context';
-import { pickFieldValueForVersion } from './utils';
+import {
+  getComparisonOptionsForDiffOutcome,
+  getVersionsForComparison,
+  pickFieldValueForVersion,
+} from './utils';
 import { getSubfieldChanges } from './get_subfield_changes';
 import { SubfieldChanges } from './subfield_changes';
 import { ComparisonSideHelpInfo } from './comparison_side_help_info';
 import * as i18n from './translations';
 
 export function FieldComparisonSide(): JSX.Element {
-  const { fieldName, fieldDiff, finalDiffableRule } = useFieldUpgradeContext();
+  const { fieldName, fieldDiff, finalDiffableRule, hasResolvedValueDifferentFromSuggested } =
+    useFieldUpgradeContext();
   const resolvedValue = finalDiffableRule[fieldName];
 
-  const [selectedVersions, setSelectedVersions] = useState<SelectedVersions>(
-    SelectedVersions.CurrentFinal
+  const options = getComparisonOptionsForDiffOutcome(
+    fieldDiff.diff_outcome,
+    fieldDiff.conflict,
+    hasResolvedValueDifferentFromSuggested
   );
+  const [selectedOption, setSelectedOption] = useState<VersionsPickerOptionEnum>(options[0]);
 
-  const [oldVersionType, newVersionType] = selectedVersions.split('_') as [Version, Version];
+  const [oldVersionType, newVersionType] = getVersionsForComparison(
+    selectedOption,
+    fieldDiff.has_base_version
+  );
 
   const oldFieldValue = pickFieldValueForVersion(oldVersionType, fieldDiff, resolvedValue);
-
   const newFieldValue = pickFieldValueForVersion(newVersionType, fieldDiff, resolvedValue);
 
   const subfieldChanges = getSubfieldChanges(fieldName, oldFieldValue, newFieldValue);
 
+  /* Change selected option to "My changes" if user has modified resolved value */
+  const prevResolvedValue = usePrevious(resolvedValue);
+  useEffect(() => {
+    if (
+      selectedOption !== VersionsPickerOptionEnum.MyChanges &&
+      !isEqual(prevResolvedValue, resolvedValue)
+    ) {
+      setSelectedOption(VersionsPickerOptionEnum.MyChanges);
+    }
+  }, [hasResolvedValueDifferentFromSuggested, selectedOption, prevResolvedValue, resolvedValue]);
+
   return (
     <>
       <FieldUpgradeSideHeader>
@@ -42,15 +63,16 @@ export function FieldComparisonSide(): JSX.Element {
             <EuiTitle size="xxs">
               <h3>
                 {i18n.TITLE}
-                <ComparisonSideHelpInfo />
+                <ComparisonSideHelpInfo options={options} />
               </h3>
             </EuiTitle>
           </EuiFlexItem>
           <EuiFlexItem>
             <VersionsPicker
-              hasBaseVersion={fieldDiff.has_base_version}
-              selectedVersions={selectedVersions}
-              onChange={setSelectedVersions}
+              options={options}
+              selectedOption={selectedOption}
+              onChange={setSelectedOption}
+              hasResolvedValueDifferentFromSuggested={hasResolvedValueDifferentFromSuggested}
             />
           </EuiFlexItem>
         </EuiFlexGroup>

diff --git a/...ne/rule_management/components/rule_details/three_way_diff/comparison_side/translations.ts b/...ne/rule_management/components/rule_details/three_way_diff/comparison_side/translations.ts
@@ -6,6 +6,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
+import { FINAL_UPDATE } from '../field_final_side/components/translations';
 
 export const TITLE = i18n.translate(
   'xpack.securitySolution.detectionEngine.rules.upgradeRules.comparisonSide.title',
@@ -20,3 +21,75 @@ export const NO_CHANGES = i18n.translate(
     defaultMessage: 'No changes',
   }
 );
+
+export const UPDATE_FROM_ELASTIC_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.updateFromElasticTitle',
+  {
+    defaultMessage: 'Update from Elastic',
+  }
+);
+
+export const UPDATE_FROM_ELASTIC_EXPLANATION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.updateFromElasticExplanation',
+  {
+    defaultMessage: 'view the changes in Elastic’s latest update',
+  }
+);
+
+export const MY_CHANGES_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesTitle',
+  {
+    defaultMessage: 'My changes',
+  }
+);
+
+export const MY_CHANGES_EXPLANATION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesExplanation',
+  {
+    defaultMessage: `view what you have changed in your installed rule and in the {finalUpdateSectionLabel} section`,
+    values: {
+      finalUpdateSectionLabel: FINAL_UPDATE,
+    },
+  }
+);
+
+export const MY_CHANGES_IN_RULE_UPGRADE_WORKFLOW_EXPLANATION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myChangesFinalUpdateOnlyExplanation',
+  {
+    defaultMessage: `view the changes you made in the {finalUpdateSectionLabel} section`,
+    values: {
+      finalUpdateSectionLabel: FINAL_UPDATE,
+    },
+  }
+);
+
+export const MERGED_CHANGES_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.mergedChangesTitle',
+  {
+    defaultMessage: 'My changes merged with Elastic’s',
+  }
+);
+
+export const MERGED_CHANGES_EXPLANATION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.mergedChangesExplanation',
+  {
+    defaultMessage: 'view an update suggestion that combines your changes with Elastic’s',
+  }
+);
+
+export const MY_ORIGINAL_CHANGES_TITLE = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myOriginalChangesTitle',
+  {
+    defaultMessage: 'My original changes',
+  }
+);
+
+export const MY_ORIGINAL_CHANGES_EXPLANATION = i18n.translate(
+  'xpack.securitySolution.detectionEngine.rules.upgradeRules.versions.myCustomizationExplanation',
+  {
+    defaultMessage: `view what you have changed in your installed rule. Doesn’t include changes made in the {finalUpdateSectionLabel} section.`,
+    values: {
+      finalUpdateSectionLabel: FINAL_UPDATE,
+    },
+  }
+);