From 4f08edefbfd96702acbd34c83fedb2168480b565 Mon Sep 17 00:00:00 2001
From: christineweng <18648970+christineweng@users.noreply.github.com>
Date: Mon, 3 Mar 2025 22:16:15 -0600
Subject: [PATCH] [Security Solution][Document Flyout] Fix alert insights color
 order (#212980)

## Summary

Updated order of the insights, following from left to right `Low` to
`Critical`

![image](https://github.com/user-attachments/assets/3b40bca0-4f29-421d-af34-fbacb49486dc)

### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit bac5c30e1cfa7750f93899c9f39d29e39ca7b499)

# Conflicts:
#	x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx
---
 .../shared/components/alert_count_insight.test.tsx   | 12 ++++++------
 .../shared/components/alert_count_insight.tsx        |  9 ++++++++-
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx
index c537276bfce09..80ce26603aceb 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.test.tsx
@@ -153,9 +153,9 @@ describe('AlertCountInsight', () => {
         closed: {
           total: 6,
           severities: [
-            { key: 'high', value: 1, label: 'High' },
             { key: 'low', value: 1, label: 'Low' },
             { key: 'medium', value: 2, label: 'Medium' },
+            { key: 'high', value: 1, label: 'High' },
             { key: 'critical', value: 2, label: 'Critical' },
           ],
         },
@@ -173,10 +173,10 @@ describe('getFormattedAlertStats', () => {
   it('should return alert stats', () => {
     const alertStats = getFormattedAlertStats(mockAlertData, euiTheme);
     expect(alertStats).toEqual([
-      { key: 'High', count: 2, color: '#ff7e62' },
-      { key: 'Low', count: 2, color: '#54b399' },
-      { key: 'Medium', count: 2, color: '#f1d86f' },
-      { key: 'Critical', count: 2, color: '#bd271e' },
+      { key: 'Low', count: 2, color: '#54B399' },
+      { key: 'Medium', count: 2, color: '#D6BF57' },
+      { key: 'High', count: 2, color: '#DA8B45' },
+      { key: 'Critical', count: 2, color: '#E7664C' },
     ]);
   });
 
@@ -186,8 +186,8 @@ describe('getFormattedAlertStats', () => {
         closed: {
           total: 2,
           severities: [
-            { key: 'high', value: 1, label: 'High' },
             { key: 'low', value: 1, label: 'Low' },
+            { key: 'high', value: 1, label: 'High' },
           ],
         },
       },
diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx
index f952f70241967..af4610bde18f4 100644
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/alert_count_insight.tsx
@@ -48,6 +48,8 @@ import {
   EntityDetailsLeftPanelTab,
 } from '../../../entity_details/shared/components/left_panel/left_panel_header';
 
+const ORDER = ['Low', 'Medium', 'High', 'Critical'];
+
 interface AlertCountInsightProps {
   /**
    * The name of the entity to filter the alerts by.
@@ -97,7 +99,12 @@ export const getFormattedAlertStats = (
     key: capitalize(key),
     count,
     color: getSeverityColor(key, euiTheme),
-  }));
+  })).sort((a, b) => {
+    const aIndex = ORDER.indexOf(a.key);
+    const bIndex = ORDER.indexOf(b.key);
+    return aIndex - bIndex;
+  });
+
   return alertStats;
 };