Eui Refresh (#204007)

## Summary This PR covers required updates for EUI refresh: [#11228](elastic/security-team#11228) The updates should only cover Entity Owned components. ### Severity Colors Blocked Severity colors are on hold until the security severity color palette is finalised. Once agreed, a shared hook will be updated across all of security, replacing the current RISK_SEVERITY_COLOUR mapping. The previous severity colors hook was reverted in preparation for this change. Updates for EA will be tracked accordingly. See https://elastic.slack.com/archives/C0851RDCWPP/p1736954935896329 for more details elastic/security-team#11516 #206276 --- ### Testing Running Kibana with the Borealis theme In order to run Kibana with Borealis, you'll need to do the following: 1. Set the following in kibana.dev.yml: u`iSettings.experimental.themeSwitcherEnabled: true` 2. Run Kibana with the following environment variable set: `KBN_OPTIMIZER_THEMES="borealislight,borealisdark,v8light,v8dark" yarn start` 3. This will expose a toggle under **Stack Management > Advanced Settings > Theme version**, which you can use to toggle between Amsterdam and Borealis. --- More details about each section #199715 #### Borealis Updates Light & Dark Theme ### Screenshots Google Docs for easy read - same screenshots below https://docs.google.com/document/d/1tKPoqCPbccX94cqgPyHKBdr9_K3kmqveQGkcGo_Q8k4/edit?usp=sharing --- ## Light Theme ### Entity Store ![entityStore](https://github.com/user-attachments/assets/94c03a9a-f6d2-4cf7-836b-ae3b3c310cdb) ![EntityStoreStatus](https://github.com/user-attachments/assets/46d45ad4-73aa-4fb7-b2ab-0b6525016ef5) ### Risk Score ![RiskScore](https://github.com/user-attachments/assets/63f1eca3-46f5-4f21-9cef-7b3b6c0724fd) ### Dashboard and Flyout ![Dashboard2](https://github.com/user-attachments/assets/5901db26-81b9-46bc-a3f4-4de7770babbc) ![RiskLevels](https://github.com/user-attachments/assets/5273c891-232f-4c6f-892f-c1979c2f8c23) ![FlyoutRiskScore](https://github.com/user-attachments/assets/1f0ebd6d-82d5-4356-907a-89bc1a04f483) ![FlyoutAssetCriticalityColors](https://github.com/user-attachments/assets/cca34be8-f3f8-4a5b-8698-1227d80edcc0) ## Dark Theme ### Entity Store ![DarkEntityStore](https://github.com/user-attachments/assets/48a12285-e57c-4da1-9376-489b4d9d2853) ![DarkEntityStoreStatus](https://github.com/user-attachments/assets/9a48e492-c28a-4dd0-876d-e34dcfefe49d) ### Risk Score ![DarkRiskScore](https://github.com/user-attachments/assets/becab00e-996d-4485-94fa-bf9bee337aaa) ### Dashboard and Flyout ![DarkDashboard](https://github.com/user-attachments/assets/72522716-0c29-4935-ba0c-f9fcea8ff94a) ![DarkRiskScore](https://github.com/user-attachments/assets/83ae74c8-3e16-49c5-9c05-9b666e146b1b) ![DarkFlyoutRiskScore](https://github.com/user-attachments/assets/2d97c992-ca08-4f97-9338-e59805084a36) ![DarkFlyoutAssetCriticalityColors](https://github.com/user-attachments/assets/197a8990-282f-4b01-bab5-e0b2b1518217) --------- Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Mark Hopkin <[email protected]>
elastic · Jan 27, 2025 · 4ecf32b · 4ecf32b
1 parent 91268e8
commit 4ecf32b
Show file tree

Hide file tree

Showing 16 changed files with 109 additions and 80 deletions.
diff --git a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/common/utils.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiLightVars } from '@kbn/ui-theme';
 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';
@@ -18,8 +17,12 @@ 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]: euiLightVars.euiColorMediumShade,
+  [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,

diff --git a/...solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx b/...solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
@@ -10,6 +10,7 @@ import { euiLightVars } from '@kbn/ui-theme';
 import { CRITICALITY_LEVEL_TITLE } from './translations';
 import type { CriticalityLevelWithUnassigned } from '../../../../common/entity_analytics/asset_criticality/types';
 
+// below will be updated with new severity color palette & shared security wide severity colors hook creation
 export const CRITICALITY_LEVEL_COLOR: Record<CriticalityLevelWithUnassigned, string> = {
   extreme_impact: '#E7664C',
   high_impact: '#DA8B45',

diff --git a/...tity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx b/...tity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx
@@ -13,15 +13,17 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
+
 import { css } from '@emotion/css';
 import React from 'react';
 import { FormattedMessage, useI18n } from '@kbn/i18n-react';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { useAssetCriticalityEntityTypes } from '../../../hooks/use_enabled_entity_types';
 import { EntityTypeToIdentifierField } from '../../../../../common/entity_analytics/types';
+
 import {
   CRITICALITY_CSV_MAX_SIZE_BYTES,
   ValidCriticalityLevels,
@@ -37,19 +39,20 @@ interface AssetCriticalityFilePickerStepProps {
 
 const sampleCSVContent = `user,user-001,low_impact\nuser,user-002,medium_impact\nhost,host-001,extreme_impact`;
 
-const listStyle = css`
-  list-style-type: disc;
-  margin-bottom: ${euiThemeVars.euiSizeL};
-  margin-left: ${euiThemeVars.euiSizeL};
-  line-height: ${euiThemeVars.euiLineHeight};
-`;
-
 export const AssetCriticalityFilePickerStep: React.FC<AssetCriticalityFilePickerStepProps> =
   React.memo(({ onFileChange, errorMessage, isLoading }) => {
     const i18n = useI18n();
 
     const formatBytes = useFormatBytes();
     const { euiTheme } = useEuiTheme();
+
+    const listStyle = css`
+      list-style-type: disc;
+      margin-bottom: ${euiTheme.size.l};
+      margin-left: ${euiTheme.size.l};
+      line-height: ${useEuiFontSize('s').lineHeight};
+    `;
+
     const entityTypes = useAssetCriticalityEntityTypes();
     const i18nOrList = (items: string[]) =>
       i18n

diff --git a/...ntity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx b/...ntity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx
@@ -100,7 +100,7 @@ export const AssetCriticalityValidationStep: React.FC<AssetCriticalityValidation
               language="CSV"
               isVirtualized
               css={css`
-                border: 1px solid ${euiTheme.colors.success};
+                border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.accentSecondary};
               `}
             >
               {validLines.text}

diff --git a/...y/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx b/...y/plugins/security_solution/public/entity_analytics/components/risk_information/index.tsx
@@ -144,7 +144,7 @@ export const RiskInformationFlyout = ({ handleOnClose }: { handleOnClose: () =>
               label={BETA}
               size="s"
               css={css`
-                color: ${euiTheme.colors.text};
+                color: ${euiTheme.colors.textParagraph};
                 margin-top: ${euiTheme.size.xxs};
               `}
             />

diff --git a/...ins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx b/...ins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx
@@ -21,12 +21,6 @@ import type { RiskSeverity } from '../../../../common/search_strategy';
 
 const DONUT_HEIGHT = 120;
 
-const fillColor: FillColor = (dataName) => {
-  return Object.hasOwn(RISK_SEVERITY_COLOUR, dataName)
-    ? RISK_SEVERITY_COLOUR[dataName as RiskSeverity]
-    : emptyDonutColor;
-};
-
 const DonutContainer = styled(EuiFlexItem)`
   padding-right: ${({ theme }) => theme.eui.euiSizeXXL};
   padding-left: ${({ theme }) => theme.eui.euiSizeM};
@@ -42,7 +36,13 @@ interface RiskScoreDonutChartProps {
 
 export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps) => {
   const [donutChartData, legendItems, total] = useRiskDonutChartData(severityCount);
-
+  // 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
+  const fillColorValue: FillColor = (dataName) => {
+    return Object.hasOwn(RISK_SEVERITY_COLOUR, dataName)
+      ? RISK_SEVERITY_COLOUR[dataName as RiskSeverity]
+      : emptyDonutColor;
+  };
   return (
     <EuiFlexGroup responsive={false} data-test-subj="risk-score-donut-chart">
       <StyledLegendItems grow={false}>
@@ -51,7 +51,7 @@ export const RiskScoreDonutChart = ({ severityCount }: RiskScoreDonutChartProps)
       <DonutContainer grow={false} className="eui-textCenter">
         <DonutChart
           data={donutChartData ?? null}
-          fillColor={fillColor}
+          fillColor={fillColorValue}
           height={DONUT_HEIGHT}
           label={i18n.translate(
             'xpack.securitySolution.entityAnalytics.riskScore.donut_chart.totalLabel',

diff --git a/...on/public/entity_analytics/components/risk_score_donut_chart/use_risk_donut_chart_data.ts b/...on/public/entity_analytics/components/risk_score_donut_chart/use_risk_donut_chart_data.ts
@@ -19,7 +19,8 @@ export const useRiskDonutChartData = (
 ): [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) => ({
         key: status,

diff --git a/...security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx b/...security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx
@@ -19,7 +19,6 @@ import {
 } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { euiThemeVars } from '@kbn/ui-theme';
 import dateMath from '@kbn/datemath';
 import { i18n } from '@kbn/i18n';
 import { capitalize } from 'lodash/fp';
@@ -71,7 +70,6 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
   const riskData = data && data.length > 0 ? data[0] : undefined;
   const entityData = getEntityData<T>(entityType, riskData);
   const { euiTheme } = useEuiTheme();
-
   const lensAttributes = useMemo(() => {
     const entityName = entityData?.name ?? '';
     const fieldName = EntityTypeToIdentifierField[entityType];
@@ -81,9 +79,10 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
       query: `${fieldName}: ${entityName}`,
       spaceId: 'default',
       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]);
-
   const xsFontSize = useEuiFontSize('xxs').fontSize;
   const rows = useMemo(() => getItems(entityData), [entityData]);
 
@@ -247,7 +246,7 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
                   css={css`
                     position: absolute;
                     right: 0;
-                    top: -${euiThemeVars.euiSize};
+                    top: -${euiTheme.size.base};
                   `}
                 >
                   <InspectButton

diff --git a/...ugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx b/...ugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx
@@ -13,7 +13,6 @@ import { TestProviders } from '../../../../common/mock';
 import type { EuiHealthProps } from '@elastic/eui';
 import { EuiHealth } from '@elastic/eui';
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import { RiskSeverity } from '../../../../../common/search_strategy';
 import { RiskScoreLevel } from '.';
 import { SEVERITY_COLOR } from '../../../../overview/components/detection_response/utils';
@@ -36,10 +35,9 @@ describe('RiskScore', () => {
     );
 
     expect(container).toHaveTextContent(RiskSeverity.Critical);
-
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
       expect.objectContaining({ color: SEVERITY_COLOR.critical }),
-      context
+      {}
     );
   });
 
@@ -98,7 +96,8 @@ describe('RiskScore', () => {
     expect(container).toHaveTextContent(RiskSeverity.Unknown);
 
     expect(EuiHealth as jest.Mock).toHaveBeenLastCalledWith(
-      expect.objectContaining({ color: euiThemeVars.euiColorMediumShade }),
+      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
       context
     );
   });

diff --git a/...ty/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx b/...ty/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx
@@ -7,31 +7,33 @@
 
 import React from 'react';
 
-import { EuiHealth, EuiTextColor, transparentize } from '@elastic/eui';
+import { EuiHealth, EuiTextColor, useEuiTheme } from '@elastic/eui';
 
 import styled, { css } from 'styled-components';
-import { euiLightVars } from '@kbn/ui-theme';
 
 import { RISK_SEVERITY_COLOUR } from '../../../common/utils';
 import { HoverPopover } from '../../../../common/components/hover_popover';
 import type { RiskSeverity } from '../../../../../common/search_strategy';
 
-const RiskBadge = styled.div<{ $severity: RiskSeverity; $hideBackgroundColor: boolean }>`
-  ${({ theme, $severity, $hideBackgroundColor }) => css`
+const RiskBadge = styled.div<{
+  $severity: RiskSeverity;
+  $hideBackgroundColor: boolean;
+}>`
+  ${({ theme, color, $severity, $hideBackgroundColor }) => css`
     width: fit-content;
     padding-right: ${theme.eui.euiSizeS};
     padding-left: ${theme.eui.euiSizeXS};
 
     ${($severity === 'Critical' || $severity === 'High') &&
     !$hideBackgroundColor &&
     css`
-      background-color: ${transparentize(theme.eui.euiColorDanger, 0.2)};
+      background-color: ${color};
       border-radius: 999px; // pill shaped
     `};
   `}
 `;
 const TooltipContainer = styled.div`
-  padding: ${({ theme }) => theme.eui.euiSizeS};
+  padding: ${({ theme }) => theme.euiSizeS};
 `;
 
 export const RiskScoreLevel: React.FC<{
@@ -68,18 +70,23 @@ const RiskScoreBadge: React.FC<{
   severity: RiskSeverity;
   hideBackgroundColor?: boolean;
   ['data-test-subj']?: string;
-}> = React.memo(({ severity, hideBackgroundColor = false, 'data-test-subj': dataTestSubj }) => (
-  <RiskBadge
-    color={euiLightVars.euiColorDanger}
-    $severity={severity}
-    $hideBackgroundColor={hideBackgroundColor}
-    data-test-subj={dataTestSubj ?? 'risk-score'}
-  >
-    <EuiTextColor color="default">
-      <EuiHealth className="eui-alignMiddle" color={RISK_SEVERITY_COLOUR[severity]}>
-        {severity}
-      </EuiHealth>
-    </EuiTextColor>
-  </RiskBadge>
-));
+}> = 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}
+      $severity={severity}
+      $hideBackgroundColor={hideBackgroundColor}
+      data-test-subj={dataTestSubj ?? 'risk-score'}
+    >
+      <EuiTextColor color="default">
+        <EuiHealth className="eui-alignMiddle" color={RISK_SEVERITY_COLOUR[severity]}>
+          {severity}
+        </EuiHealth>
+      </EuiTextColor>
+    </RiskBadge>
+  );
+});
 RiskScoreBadge.displayName = 'RiskScoreBadge';
diff --git a/...plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx b/...plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx
@@ -14,24 +14,28 @@ import type { SeverityCount } from './types';
 
 export const SeverityBadges: React.FC<{
   severityCount: SeverityCount;
-}> = React.memo(({ severityCount }) => (
-  <EuiFlexGroup
-    justifyContent="spaceBetween"
-    gutterSize="m"
-    data-test-subj="risk-score-severity-badges"
-  >
-    <EuiFlexItem grow={false} />
-    <EuiFlexItem grow={false}>
-      <EuiFlexGroup gutterSize="m">
-        {(Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).map((status) => (
-          <EuiFlexItem key={status} grow={false}>
-            <SeverityBadge status={status} count={severityCount[status] || 0} />
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-));
+}> = 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"
+      gutterSize="m"
+      data-test-subj="risk-score-severity-badges"
+    >
+      <EuiFlexItem grow={false} />
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup gutterSize="m">
+          {(Object.keys(RISK_SEVERITY_COLOUR) as RiskSeverity[]).map((status) => (
+            <EuiFlexItem key={status} grow={false}>
+              <SeverityBadge status={status} count={severityCount[status] || 0} />
+            </EuiFlexItem>
+          ))}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});
 
 SeverityBadges.displayName = 'SeverityBadges';
 

diff --git a/...ty/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx b/...ty/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx
@@ -31,6 +31,8 @@ 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(

diff --git a/...ion/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap b/...ion/public/entity_analytics/lens_attributes/__snapshots__/risk_score_summary.test.ts.snap
diff --git a/...gins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts b/...gins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts
@@ -74,6 +74,7 @@ describe('getRiskScoreSummaryAttributes', () => {
             spaceId: 'default',
             riskEntity: EntityType.user,
           }),
+
           applyGlobalQueriesAndFilters: false,
         }),
       { wrapper }