[8.x] Eui Refresh (#204007) (#210908)

# Backport This will backport the following commits from `main` to `8.x`: - [Eui Refresh (#204007)](https://github.com/elastic/kibana/pull/204007)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport)  Co-authored-by: Charlotte Alexandra Wilson <CAWilson94@users.noreply.github.com>
2025-04-24 09:48:58 -04:00 · 2025-02-12 21:16:13 +01:00 · 2025-02-12 21:16:13 +01:00 · 456068b1a4
commit 456068b1a4
parent af1341dc4f
15 changed files with 108 additions and 79 deletions
--- 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,
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality/asset_criticality_badge.tsx
+++ b/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',
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/file_picker_step.tsx
+++ b/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, {
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/asset_criticality_file_uploader/components/validation_step.tsx
+++ b/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}
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/index.tsx
+++ b/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',
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_score_donut_chart/use_risk_donut_chart_data.ts
+++ b/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,
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/risk_summary_flyout/risk_summary.tsx
+++ b/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
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.test.tsx
+++ b/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
    );
  });
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/common/index.tsx
@ -7,17 +7,19 @@

 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};
@ -25,13 +27,13 @@ const RiskBadge = styled.div<{ $severity: RiskSeverity; $hideBackgroundColor: bo
    ${($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';
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_badges.tsx
+++ b/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';

--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/components/severity/severity_bar.tsx
+++ b/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(
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/snapshots/risk_score_summary.test.ts.snap
+++ b/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/snapshots/risk_score_summary.test.ts.snap
@ -113,7 +113,7 @@ Object {
        "params": Object {
          "colorStops": Array [
            Object {
-              "color": "#98a2b3",
+              "color": "#aaa",
              "stop": 0,
            },
            Object {
@ -144,7 +144,7 @@ Object {
          "steps": 3,
          "stops": Array [
            Object {
-              "color": "#98a2b3",
+              "color": "#aaa",
              "stop": 20,
            },
            Object {
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.test.ts
+++ b/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 }
--- a/x-pack/solutions/security/plugins/security_solution/public/entity_analytics/lens_attributes/risk_score_summary.ts
+++ b/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: '',
--- a/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx
+++ b/x-pack/solutions/security/plugins/security_solution/public/flyout/entity_details/user_right/utils/columns.tsx
@ -7,26 +7,31 @@

 import { css } from '@emotion/react';
 import React from 'react';
-import { euiThemeVars } from '@kbn/ui-theme';
-import type { EuiBasicTableColumn } from '@elastic/eui';
+import { useEuiTheme, type EuiBasicTableColumn } from '@elastic/eui';
 import { DefaultFieldRenderer } from '../../../../timelines/components/field_renderers/default_renderer';
 import type { ManagedUsersTableColumns, ManagedUserTable } from '../types';
 import * as i18n from '../translations';
 import { defaultToEmptyTag } from '../../../../common/components/empty_value';

-const fieldColumn: EuiBasicTableColumn<ManagedUserTable> = {
-  name: i18n.FIELD_COLUMN_TITLE,
-  field: 'label',
-  render: (label: string, { field }) => (
+const FieldColumn: React.FC<{ label: string; field: string }> = ({ label, field }) => {
+  const { euiTheme } = useEuiTheme();
+
+  return (
    <span
      css={css`
-        font-weight: ${euiThemeVars.euiFontWeightMedium};
-        color: ${euiThemeVars.euiTitleColor};
+        font-weight: ${euiTheme.font.weight.medium};
+        color: ${euiTheme.colors.textHeading};
      `}
    >
      {label ?? field}
    </span>
-  ),
+  );
+};
+
+const fieldColumn: EuiBasicTableColumn<ManagedUserTable> = {
+  name: i18n.FIELD_COLUMN_TITLE,
+  field: 'label',
+  render: (label: string, { field }) => <FieldColumn label={label} field={field ?? ''} />,
 };

 export const getManagedUserTableColumns = (contextID: string): ManagedUsersTableColumns => [