Update Risk severity color map to EUI Borealis

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts

@@ -5,8 +5,8 @@
  * 2.0.
  */
 
+import { euiThemeVars } from '@kbn/ui-theme'; // eslint-disable-line @elastic/eui/no-restricted-eui-imports
 import { RiskSeverity } from '../../../common/search_strategy';
-import { SEVERITY_COLOR } from '../../overview/components/detection_response/utils';
 export { RISK_LEVEL_RANGES as RISK_SCORE_RANGES } from '../../../common/entity_analytics/risk_engine';
 
 export const SEVERITY_UI_SORT_ORDER = [
@@ -17,16 +17,16 @@ export const SEVERITY_UI_SORT_ORDER = [
   RiskSeverity.Critical,
 ];
 
-// Migration to tokens from EUI during the Borealis theme migration is blocked until new severity palette is agreed upon.
-// We keep using hardcoded colors until security severity palette is ready https://github.com/elastic/kibana/issues/203387
-// TODO: Borealis migration - move from hardcoded values to severity palette, which should instead use shared hook across security:
-// https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
-export const RISK_SEVERITY_COLOUR: { [k in RiskSeverity]: string } = {
-  [RiskSeverity.Unknown]: '#aaa', // euiThemeVars no longer in use. Hard coded temporarily, see above.
-  [RiskSeverity.Low]: SEVERITY_COLOR.low,
-  [RiskSeverity.Moderate]: SEVERITY_COLOR.medium,
-  [RiskSeverity.High]: SEVERITY_COLOR.high,
-  [RiskSeverity.Critical]: SEVERITY_COLOR.critical,
+/*
+ * Map Risk severity to EUI severity color pattern as per spec:
+ * https://eui.elastic.co/docs/patterns/severity/index.html#use-cases
+ */
+export const RISK_SEVERITY_COLOUR = {
+  [RiskSeverity.Unknown]: euiThemeVars.euiColorSeverityUnknown,
+  [RiskSeverity.Low]: euiThemeVars.euiColorSeverityNeutral,
+  [RiskSeverity.Moderate]: euiThemeVars.euiColorSeverityWarning,
+  [RiskSeverity.High]: euiThemeVars.euiColorSeverityRisk,
+  [RiskSeverity.Critical]: euiThemeVars.euiColorSeverityDanger,
 };
 
 type SnakeToCamelCaseString<S extends string> = S extends `${infer T}_${infer U}`

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/use_risk_donut_chart_data.ts

@@ -6,27 +6,23 @@
  */
 import { sum } from 'lodash/fp';
 import { useMemo } from 'react';
-import { RISK_SEVERITY_COLOUR } from '../../common/utils';
+import { RISK_SEVERITY_COLOUR, SEVERITY_UI_SORT_ORDER } from '../../common/utils';
 import type { LegendItem } from '../../../common/components/charts/legend_item';
 import type { SeverityCount } from '../severity/types';
 import type { DonutChartProps } from '../../../common/components/charts/donutchart';
-import type { RiskSeverity } from '../../../../common/search_strategy';
 
 const legendField = 'kibana.alert.severity';
 
 export const useRiskDonutChartData = (
   severityCount: SeverityCount
 ): [DonutChartProps['data'], LegendItem[], number] => {
   const [donutChartData, legendItems, total] = useMemo(() => {
-    const severities = Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[];
-    // TODO: Borealis theme migration, when severity palette agreed, update RISK_SEVERITY_COLOUR to use shared hook from security colors:
-    // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
     return [
-      severities.map((status) => ({
+      SEVERITY_UI_SORT_ORDER.map((status) => ({
         key: status,
         value: severityCount[status],
       })),
-      severities.map((status) => ({
+      SEVERITY_UI_SORT_ORDER.map((status) => ({
         color: RISK_SEVERITY_COLOUR[status],
         field: legendField,
         value: status,

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/use_risk_score_fill_color.test.tsx

@@ -8,7 +8,7 @@
 import { renderHook } from '@testing-library/react';
 import { useRiskScoreFillColor } from './use_risk_score_fill_color';
 import { emptyDonutColor } from '../../../common/components/charts/donutchart_empty';
-import { SEVERITY_UI_SORT_ORDER } from '../../common';
+import { SEVERITY_UI_SORT_ORDER, RISK_SEVERITY_COLOUR } from '../../common';
 import { TestProviders } from '../../../common/mock';
 
 describe('useRiskScoreFillColor', () => {
@@ -17,15 +17,7 @@ describe('useRiskScoreFillColor', () => {
 
     const colors = SEVERITY_UI_SORT_ORDER.map((severity) => result.current(severity));
 
-    expect(colors).toMatchInlineSnapshot(`
-      Array [
-        "#aaa",
-        "#54B399",
-        "#D6BF57",
-        "#DA8B45",
-        "#E7664C",
-      ]
-    `);
+    expect(colors).toStrictEqual(Object.values(RISK_SEVERITY_COLOUR));
   });
 
   it('returns the empty donut color for an invalid risk severity', () => {

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/use_risk_score_fill_color.tsx

@@ -10,8 +10,6 @@ import { emptyDonutColor } from '../../../common/components/charts/donutchart_em
 import { RISK_SEVERITY_COLOUR } from '../../common';
 import type { RiskSeverity } from '../../../../common/search_strategy';
 
-// TODO: Borealis theme migration, when severity palette agreed, update RISK_SEVERITY_COLOUR to use shared hook from security colors:
-// https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
 export const useRiskScoreFillColor = () =>
   useCallback(
     (dataName: string) =>

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx

@@ -81,8 +81,6 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
       query: `${fieldName}: ${entityName}`,
       spaceId,
       riskEntity: entityType,
-      // TODO: add in riskColors when severity palette agreed on.
-      // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
     });
   }, [entityData?.name, entityData?.risk?.calculated_level, entityType, spaceId]);
   const xsFontSize = useEuiFontSize('xxs').fontSize;

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx

@@ -7,6 +7,7 @@
 
 import { render, renderHook } from '@testing-library/react';
 import React from 'react';
+import { euiThemeVars } from '@kbn/ui-theme'; // eslint-disable-line @elastic/eui/no-restricted-eui-imports
 
 import { TestProviders } from '../../../../common/mock';
 
@@ -15,7 +16,6 @@ import { EuiHealth, useEuiTheme } from '@elastic/eui';
 
 import { RiskSeverity } from '../../../../../common/search_strategy';
 import { RiskScoreLevel } from '.';
-import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
 
 jest.mock('@elastic/eui', () => {
   const original = jest.requireActual('@elastic/eui');
@@ -36,7 +36,7 @@ describe('RiskScore', () => {
 
     expect(container).toHaveTextContent(RiskSeverity.Critical);
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.critical }),
+      expect.objectContaining({ color: euiThemeVars.euiColorSeverityDanger }),
       {}
     );
   });
@@ -51,7 +51,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.High);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.high }),
+      expect.objectContaining({ color: euiThemeVars.euiColorSeverityRisk }),
       context
     );
   });
@@ -66,7 +66,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Moderate);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.medium }),
+      expect.objectContaining({ color: euiThemeVars.euiColorSeverityWarning }),
       context
     );
   });
@@ -81,7 +81,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Low);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: SEVERITY_COLOR.low }),
+      expect.objectContaining({ color: euiThemeVars.euiColorSeverityNeutral }),
       context
     );
   });
@@ -96,8 +96,7 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Unknown);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: '#aaa' }), // TODO: update with new severity palette agreement.
-      // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
+      expect.objectContaining({ color: euiThemeVars.euiColorSeverityUnknown }),
       context
     );
   });

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx

@@ -74,8 +74,6 @@ const RiskScoreBadge: React.FC<{
   ['data-test-subj']?: string;
 }> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => {
   const { euiTheme } = useEuiTheme();
-  // TODO: use riskSeverity hook when palette agreed.
-  // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
   return (
     <RiskBadge
       color={euiTheme.colors.backgroundBaseDanger}

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx

@@ -7,16 +7,14 @@
 
 import { EuiFlexGroup, EuiNotificationBadge, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import { RISK_SEVERITY_COLOUR } from '../../common/utils';
+import { SEVERITY_UI_SORT_ORDER } from '../../common/utils';
 import type { RiskSeverity } from '../../../../common/search_strategy';
 import { RiskScoreLevel } from './common';
 import type { SeverityCount } from './types';
 
 export const SeverityBadges: React.FC<{
   severityCount: SeverityCount;
 }> = React.memo(({ severityCount }) => {
-  // TODO: use riskSeverity hook when palette agreed.
-  // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
   return (
     <EuiFlexGroup
       justifyContent="spaceBetween"
@@ -26,7 +24,7 @@ export const SeverityBadges: React.FC<{
       <EuiFlexItem grow={false} />
       <EuiFlexItem grow={false}>
         <EuiFlexGroup gutterSize="m">
-          {(Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).map((status) => (
+          {SEVERITY_UI_SORT_ORDER.map((status) => (
             <EuiFlexItem key={status} grow={false}>
               <SeverityBadge status={status} count={severityCount[status] || 0} />
             </EuiFlexItem>

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx

@@ -9,7 +9,7 @@ import styled from '@emotion/styled';
 import { EuiColorPaletteDisplay } from '@elastic/eui';
 import React, { useMemo } from 'react';
 
-import { RISK_SEVERITY_COLOUR } from '../../common/utils';
+import { RISK_SEVERITY_COLOUR, SEVERITY_UI_SORT_ORDER } from '../../common/utils';
 import type { RiskSeverity } from '../../../../common/search_strategy';
 import type { SeverityCount } from './types';
 
@@ -31,22 +31,17 @@ type PalletteArray = PalletteObject[];
 export const SeverityBar: React.FC<{
   severityCount: SeverityCount;
 }> = ({ severityCount }) => {
-  // TODO: use riskSeverity hook when palette agreed.
-  // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
   const palette = useMemo(
     () =>
-      (Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).reduce(
-        (acc: PalletteArray, status: RiskSeverity) => {
-          const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
-          const newEntry: PalletteObject = {
-            stop: previousStop + (severityCount[status] || 0),
-            color: RISK_SEVERITY_COLOUR[status],
-          };
-          acc.push(newEntry);
-          return acc;
-        },
-        [] as PalletteArray
-      ),
+      SEVERITY_UI_SORT_ORDER.reduce((acc: PalletteArray, status: RiskSeverity) => {
+        const previousStop = acc.length > 0 ? acc[acc.length - 1].stop : 0;
+        const newEntry: PalletteObject = {
+          stop: previousStop + (severityCount[status] || 0),
+          color: RISK_SEVERITY_COLOUR[status],
+        };
+        acc.push(newEntry);
+        return acc;
+      }, [] as PalletteArray),
     [severityCount]
   );
   return (

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts

@@ -18,15 +18,11 @@ interface GetRiskScoreSummaryAttributesProps {
   query?: string;
   spaceId?: string;
   severity?: RiskSeverity;
-  // TODO: add riskColors in when severityPalette available
-  // riskColors: { [k in RiskSeverity]: string };
   riskEntity: EntityType;
 }
 
 export const getRiskScoreSummaryAttributes: (
   props: GetRiskScoreSummaryAttributesProps
-  // TODO: may need to pass riskColors in props, here, when severity palette agreed and hook created
-  // https://github.com/elastic/security-team/issues/11516 hook - https://github.com/elastic/kibana/pull/206276
 ) => LensAttributes = ({ spaceId, query, severity, riskEntity }) => {
   const layerIds = [`layer-id1-${uuidv4()}`, `layer-id2-${uuidv4()}`];
   const internalReferenceId = `internal-reference-id-${uuidv4()}`;