[Security Solution] Display versions in Rule Upgrade flyout (elastic#…

…206636) **Resolves: elastic#188065 ## Summary This PR adds current and target version info in the header of the Rule Upgrade flyout. ## Screenshots **Before** <img width="975" alt="Schermafbeelding 2025-01-14 om 17 44 37" src="https://github.com/user-attachments/assets/d831ffdb-a96f-40cc-8f46-1ae8d9d6e2cf" /> **After** <img width="975" alt="Schermafbeelding 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
crespocarlos · Jan 16, 2025 · 138d034 · 138d034
1 parent 0926703
commit 138d034
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 6 deletions.
diff --git a/...gine/rule_management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade.tsx b/...gine/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/..._management/components/rule_details/three_way_diff/rule_upgrade/rule_upgrade_info_bar.tsx b/..._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/...gine/rule_management/components/rule_details/three_way_diff/rule_upgrade/translations.tsx b/...gine/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,
+    }}
   />
 );