From 138d034d9fa656ed18bd31d344033d5831818092 Mon Sep 17 00:00:00 2001
From: Nikita Indik <nikita.indik@elastic.co>
Date: Thu, 16 Jan 2025 10:31:18 +0100
Subject: [PATCH] [Security Solution] Display versions in Rule Upgrade flyout
 (#206636)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

**Resolves: https://github.com/elastic/kibana/issues/188065**

## Summary
This PR adds current and target version info in the header of the Rule
Upgrade flyout.

## Screenshots
**Before**
<img width="975" alt="Scherm­afbeelding 2025-01-14 om 17 44 37"
src="https://github.com/user-attachments/assets/d831ffdb-a96f-40cc-8f46-1ae8d9d6e2cf"
/>

**After**
<img width="975" alt="Scherm­afbeelding 2025-01-14 om 17 43 58"
src="https://github.com/user-attachments/assets/91ebff9a-a10a-4d65-b696-42b6756bbacf"
/>

Work started on: 14-Jan-2025
---
 .../rule_upgrade/rule_upgrade.tsx               |  2 ++
 .../rule_upgrade/rule_upgrade_info_bar.tsx      | 12 ++++++++++--
 .../rule_upgrade/translations.tsx               | 17 +++++++++++++----
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade.tsx
index 73746f3c48211..8aa6c74752a2b 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade.tsx
@@ -42,6 +42,8 @@ export const RuleUpgrade = memo(function RuleUpgrade({
         totalNumOfFields={totalNumOfFields}
         numOfFieldsWithUpdates={numOfFieldsWithUpdates}
         numOfConflicts={numOfSolvableConflicts + numOfNonSolvableConflicts}
+        currentVersionNumber={ruleUpgradeState.current_rule.version}
+        targetVersionNumber={ruleUpgradeState.target_rule.version}
       />
       <EuiSpacer size="s" />
       <RuleUpgradeCallout
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade_info_bar.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade_info_bar.tsx
index 3520734b2b257..00ee00fea189b 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade_info_bar.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade_info_bar.tsx
@@ -18,24 +18,32 @@ interface RuleUpgradeInfoBarProps {
   totalNumOfFields: number;
   numOfFieldsWithUpdates: number;
   numOfConflicts: number;
+  currentVersionNumber: number;
+  targetVersionNumber: number;
 }
 
 export function RuleUpgradeInfoBar({
   totalNumOfFields,
   numOfFieldsWithUpdates,
   numOfConflicts,
+  currentVersionNumber,
+  targetVersionNumber,
 }: RuleUpgradeInfoBarProps): JSX.Element {
   return (
     <UtilityBar>
       <UtilityBarSection>
         <UtilityBarGroup>
           <UtilityBarText dataTestSubj="showingRules">
-            {i18n.TOTAL_NUM_OF_FIELDS(totalNumOfFields)}
+            {i18n.VERSION_UPDATE_INFO(
+              numOfFieldsWithUpdates,
+              currentVersionNumber,
+              targetVersionNumber
+            )}
           </UtilityBarText>
         </UtilityBarGroup>
         <UtilityBarGroup>
           <UtilityBarText dataTestSubj="showingRules">
-            {i18n.NUM_OF_FIELDS_WITH_UPDATES(numOfFieldsWithUpdates)}
+            {i18n.TOTAL_NUM_OF_FIELDS(totalNumOfFields)}
           </UtilityBarText>
         </UtilityBarGroup>
         <UtilityBarGroup>
diff --git a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/translations.tsx b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/translations.tsx
index a54ced917de54..04b398bf408e9 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/translations.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/detection_engine/rule_management/components/rule_details/three_way_diff/rule_upgrade/translations.tsx
@@ -19,11 +19,20 @@ export const TOTAL_NUM_OF_FIELDS = (count: number) => (
   />
 );
 
-export const NUM_OF_FIELDS_WITH_UPDATES = (count: number) => (
+export const VERSION_UPDATE_INFO = (
+  numOfFieldsWithUpdates: number,
+  currentVersionNumber: number,
+  targetVersionNumber: number
+) => (
   <FormattedMessage
-    id="xpack.securitySolution.detectionEngine.rules.upgradeRules.diffTab.numOfFieldsWithUpdates"
-    defaultMessage="{countValue} {count, plural, one {field} other {fields}} in Elastic update"
-    values={{ countValue: <strong>{count}</strong>, count }}
+    id="xpack.securitySolution.detectionEngine.rules.upgradeRules.diffTab.versionUpdateInfo"
+    defaultMessage="{numOfFieldsWithUpdatesValue} {numOfFieldsWithUpdates, plural, one {field} other {fields}} changed in Elastic update from version {currentVersionNumber} to {targetVersionNumber}"
+    values={{
+      numOfFieldsWithUpdatesValue: <strong>{numOfFieldsWithUpdates}</strong>,
+      numOfFieldsWithUpdates,
+      currentVersionNumber,
+      targetVersionNumber,
+    }}
   />
 );