[8.18] Eui Refresh (#204007)

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,

x-pack/solutions/security/plugins/security_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',

x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx

@@ -13,16 +13,18 @@ import {
   EuiSpacer,
   EuiText,
   EuiTitle,
+  useEuiFontSize,
   useEuiTheme,
 } from '@elastic/eui';
+
 import { css } from '@emotion/css';
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 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,
@@ -38,19 +40,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 { formatListToParts } = 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[]) =>
       formatListToParts(items, {

x-pack/solutions/security/plugins/security_solution/public/entity_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}

x-pack/solutions/security/plugins/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',

x-pack/solutions/security/plugins/security_solution/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,

x-pack/solutions/security/plugins/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 columns = useMemo(() => buildColumns(), []);
@@ -250,7 +249,7 @@ const FlyoutRiskSummaryComponent = <T extends EntityType>({
                   css={css`
                     position: absolute;
                     right: 0;
-                    top: -${euiThemeVars.euiSize};
+                    top: -${euiTheme.size.base};
                   `}
                 >
                   <InspectButton

x-pack/solutions/security/plugins/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
     );
   });

x-pack/solutions/security/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';

x-pack/solutions/security/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';
 

x-pack/solutions/security/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(

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

@@ -73,6 +73,7 @@ describe('getRiskScoreSummaryAttributes', () => {
             spaceId: 'default',
             riskEntity: EntityType.user,
           }),
+
           applyGlobalQueriesAndFilters: false,
         }),
       { wrapper }

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

@@ -8,7 +8,8 @@
 import { v4 as uuidv4 } from 'uuid';
 import type { LensAttributes } from '@kbn/lens-embeddable-utils';
 import capitalize from 'lodash/capitalize';
-import { SEVERITY_UI_SORT_ORDER, RISK_SEVERITY_COLOUR, RISK_SCORE_RANGES } from '../common/utils';
+
+import { SEVERITY_UI_SORT_ORDER, RISK_SCORE_RANGES, RISK_SEVERITY_COLOUR } from '../common/utils';
 import type { EntityType } from '../../../common/entity_analytics/types';
 import type { RiskSeverity } from '../../../common/search_strategy';
 import { EntityTypeToScoreField, RiskScoreFields } from '../../../common/search_strategy';
@@ -17,17 +18,20 @@ 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 = [uuidv4(), uuidv4()];
   const internalReferenceId = uuidv4();
   const columnIds = [uuidv4(), uuidv4(), uuidv4()];
   const sourceField = EntityTypeToScoreField[riskEntity];
-
   return {
     title: 'Risk score summary',
     description: '',