[Security Solution][THI] remove usages of EUI json tokens (#210482)

## Summary This PR is probably the final PR that makes the changes to support EUI Borealis. It focuses on removing all the usage of EUI Json tokens. You will notice different approaches while removing the tokens: - for some cases, the changes were done using `css from '@emotions/react'` as the components using the tokens were already using `euiTheme` or adding it was straightforward and required the minimal amount of changes - for some cases, where the css changes were pretty involved, a hook was created to be able to import the styles and apply them in the components - finally for other cases, esepcially if the styled components were extracted in a different file and were used within many others, I decided to create reusable components. This allowed to not change all the files impacted and limit the number of files modified in this PR. Feel free to comment on any of the approaches and suggest better options! #201889 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
elastic · Feb 11, 2025 · 161ce34 · 161ce34
1 parent 6df8159
commit 161ce34
Show file tree

Hide file tree

Showing 13 changed files with 203 additions and 158 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/x-pack/solutions/security/packages/data_table/components/data_table/helpers.test.tsx b/x-pack/solutions/security/packages/data_table/components/data_table/helpers.test.tsx
@@ -5,15 +5,14 @@
  * 2.0.
  */
 
+import type { EuiTheme } from '@kbn/kibana-react-plugin/common';
 import type { ColumnHeaderOptions } from '../../common/types';
 import {
+  addBuildingBlockStyle,
   hasCellActions,
   mapSortDirectionToDirection,
   mapSortingColumns,
-  addBuildingBlockStyle,
 } from './helpers';
-
-import { euiThemeVars } from '@kbn/ui-theme';
 import { mockDnsEvent } from '../../mock/mock_timeline_data';
 
 describe('helpers', () => {
@@ -178,7 +177,7 @@ describe('helpers', () => {
   });
 
   describe('addBuildingBlockStyle', () => {
-    const THEME = { eui: euiThemeVars, darkMode: false };
+    const THEME = { eui: { euiColorHighlight: 'euiColorHighlight' }, darkMode: false } as EuiTheme;
 
     test('it calls `setCellProps` with background color when event is a building block', () => {
       const mockedSetCellProps = jest.fn();
@@ -191,12 +190,12 @@ describe('helpers', () => {
 
       expect(mockedSetCellProps).toBeCalledWith({
         style: {
-          backgroundColor: euiThemeVars.euiColorHighlight,
+          backgroundColor: 'euiColorHighlight',
         },
       });
     });
 
-    test('it call `setCellProps` reseting the background color when event is not a building block', () => {
+    test('it call `setCellProps` resetting the background color when event is not a building block', () => {
       const mockedSetCellProps = jest.fn();
 
       addBuildingBlockStyle(mockDnsEvent, THEME, mockedSetCellProps);

diff --git a/...ons/security/plugins/security_solution/public/common/components/header_actions/helpers.ts b/...ons/security/plugins/security_solution/public/common/components/header_actions/helpers.ts
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { TimelineEventsType } from '../../../../common/types';
 
 /**
@@ -22,8 +21,7 @@ import type { TimelineEventsType } from '../../../../common/types';
  *    `EuiButtonIcon` has a `margin-left: -4px`, which is subtracted from the
  *    `width`
  */
-export const DEFAULT_ACTION_BUTTON_WIDTH =
-  parseInt(euiThemeVars.euiSizeXL, 10) - parseInt(euiThemeVars.euiSizeXS, 10); // px
+export const DEFAULT_ACTION_BUTTON_WIDTH = 28; // px
 
 export const isAlert = (eventType: TimelineEventsType | Omit<TimelineEventsType, 'all'>): boolean =>
   eventType === 'signal';
@@ -46,7 +44,7 @@ export const getActionsColumnWidth = (actionButtonCount: number): number => {
   // `EuiDataGridRowCell` applies additional `padding-left` and
   // `padding-right`, which must be added to the content width to prevent the
   // content from being partially hidden due to the space occupied by padding:
-  const leftRightCellPadding = parseInt(euiThemeVars.euiDataGridCellPaddingM, 10) * 2; // parseInt ignores the trailing `px`, e.g. `6px`
+  const leftRightCellPadding = 12;
 
   return contentWidth + leftRightCellPadding;
 };
diff --git a/...ty/plugins/security_solution/public/flyout/document_details/alert_reason/alert_reason.tsx b/...ty/plugins/security_solution/public/flyout/document_details/alert_reason/alert_reason.tsx
@@ -6,27 +6,20 @@
  */
 
 import React, { useMemo } from 'react';
-import { EuiPanel, EuiSpacer, EuiTitle } from '@elastic/eui';
-import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiPanel, EuiSpacer, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ALERT_REASON_BODY_TEST_ID } from './test_ids';
 import { useAlertReasonPanelContext } from './context';
 import { getRowRenderer } from '../../../timelines/components/timeline/body/renderers/get_row_renderer';
 import { defaultRowRenderers } from '../../../timelines/components/timeline/body/renderers';
 import { FlyoutError } from '../../shared/components/flyout_error';
 
-const ReasonContainerWrapper = styled.div`
-  overflow-x: auto;
-  padding-block: ${euiThemeVars.euiSizeS};
-`;
-
-const ReasonContainer = styled.div``;
-
 /**
  * Alert reason renderer on a preview panel on top of the right section of expandable flyout
  */
 export const AlertReason: React.FC = () => {
+  const { euiTheme } = useEuiTheme();
   const { dataAsNestedObject, scopeId } = useAlertReasonPanelContext();
 
   const renderer = useMemo(
@@ -65,9 +58,14 @@ export const AlertReason: React.FC = () => {
         </h6>
       </EuiTitle>
       <EuiSpacer size="m" />
-      <ReasonContainerWrapper>
-        <ReasonContainer className={'eui-displayInlineBlock'}>{rowRenderer}</ReasonContainer>
-      </ReasonContainerWrapper>
+      <div
+        css={css`
+          overflow-x: auto;
+          padding-block: ${euiTheme.size.s};
+        `}
+      >
+        <div className={'eui-displayInlineBlock'}>{rowRenderer}</div>
+      </div>
     </EuiPanel>
   );
 };

diff --git a/...gins/security_solution/public/flyout/document_details/right/components/event_renderer.tsx b/...gins/security_solution/public/flyout/document_details/right/components/event_renderer.tsx
@@ -7,25 +7,18 @@
 
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
-import { EuiFlexItem, EuiTitle } from '@elastic/eui';
-import styled from '@emotion/styled';
-import { euiThemeVars } from '@kbn/ui-theme';
+import { EuiFlexItem, EuiTitle, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { getRowRenderer } from '../../../../timelines/components/timeline/body/renderers/get_row_renderer';
 import { defaultRowRenderers } from '../../../../timelines/components/timeline/body/renderers';
 import { useDocumentDetailsContext } from '../../shared/context';
 import { EVENT_RENDERER_TEST_ID } from './test_ids';
 
-const ReasonPreviewContainerWrapper = styled.div`
-  overflow-x: auto;
-  padding-block: ${euiThemeVars.euiSizeS};
-`;
-
-const ReasonPreviewContainer = styled.div``;
-
 /**
  * Event renderer of an event document
  */
 export const EventRenderer: FC = () => {
+  const { euiTheme } = useEuiTheme();
   const { dataAsNestedObject, scopeId } = useDocumentDetailsContext();
 
   const renderer = useMemo(
@@ -52,11 +45,14 @@ export const EventRenderer: FC = () => {
       <EuiTitle size="xxs">
         <h5>{'Event renderer'}</h5>
       </EuiTitle>
-      <ReasonPreviewContainerWrapper>
-        <ReasonPreviewContainer className={'eui-displayInlineBlock'}>
-          {rowRenderer}
-        </ReasonPreviewContainer>
-      </ReasonPreviewContainerWrapper>
+      <div
+        css={css`
+          overflow-x: auto;
+          padding-block: ${euiTheme.size.s};
+        `}
+      >
+        <div className={'eui-displayInlineBlock'}>{rowRenderer}</div>
+      </div>
     </EuiFlexItem>
   );
 };

diff --git a/x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_colors.ts b/x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_colors.ts
@@ -5,17 +5,15 @@
  * 2.0.
  */
 
-import { darkMode, euiThemeVars } from '@kbn/ui-theme';
+import { useEuiTheme } from '@elastic/eui';
 import { useMemo } from 'react';
 
 type ResolverColorNames =
-  | 'copyableFieldBackground'
   | 'descriptionText'
   | 'full'
   | 'graphControls'
   | 'graphControlsBackground'
   | 'graphControlsBorderColor'
-  | 'linkColor'
   | 'resolverBackground'
   | 'resolverEdge'
   | 'resolverEdgeText'
@@ -29,22 +27,24 @@ type ColorMap = Record<ResolverColorNames, string>;
  * Get access to Kibana-theme based colors.
  */
 export function useColors(): ColorMap {
-  return useMemo(() => {
-    return {
-      copyableFieldBackground: euiThemeVars.euiColorLightShade,
-      descriptionText: euiThemeVars.euiTextColor,
-      full: euiThemeVars.euiColorFullShade,
-      graphControls: euiThemeVars.euiColorDarkestShade,
-      graphControlsBackground: euiThemeVars.euiColorEmptyShade,
-      graphControlsBorderColor: euiThemeVars.euiColorLightShade,
-      processBackingFill: `${euiThemeVars.euiColorPrimary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
-      resolverBackground: euiThemeVars.euiColorEmptyShade,
-      resolverEdge: darkMode ? euiThemeVars.euiColorLightShade : euiThemeVars.euiColorLightestShade,
-      resolverBreadcrumbBackground: euiThemeVars.euiColorLightestShade,
-      resolverEdgeText: darkMode ? euiThemeVars.euiColorFullShade : euiThemeVars.euiColorDarkShade,
-      triggerBackingFill: `${euiThemeVars.euiColorDanger}${darkMode ? '1F' : '0F'}`,
-      pillStroke: euiThemeVars.euiColorLightShade,
-      linkColor: euiThemeVars.euiLinkColor,
-    };
-  }, []);
+  const { euiTheme, colorMode } = useEuiTheme();
+  const darkMode = useMemo(() => colorMode === 'DARK', [colorMode]);
+
+  return useMemo(
+    () => ({
+      descriptionText: euiTheme.colors.textParagraph,
+      full: euiTheme.colors.fullShade,
+      graphControls: euiTheme.colors.darkestShade,
+      graphControlsBackground: euiTheme.colors.emptyShade,
+      graphControlsBorderColor: euiTheme.colors.lightShade,
+      processBackingFill: `${euiTheme.colors.primary}${darkMode ? '1F' : '0F'}`, // Add opacity 0F = 6% , 1F = 12%
+      resolverBackground: euiTheme.colors.emptyShade,
+      resolverEdge: darkMode ? euiTheme.colors.lightShade : euiTheme.colors.lightestShade,
+      resolverBreadcrumbBackground: euiTheme.colors.lightestShade,
+      resolverEdgeText: darkMode ? euiTheme.colors.fullShade : euiTheme.colors.darkShade,
+      triggerBackingFill: `${euiTheme.colors.danger}${darkMode ? '1F' : '0F'}`,
+      pillStroke: euiTheme.colors.lightShade,
+    }),
+    [darkMode, euiTheme]
+  );
 }
diff --git a/x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_cube_assets.ts b/x-pack/solutions/security/plugins/security_solution/public/resolver/view/use_cube_assets.ts
@@ -6,11 +6,10 @@
  */
 
 import { i18n } from '@kbn/i18n';
-
-import { euiThemeVars } from '@kbn/ui-theme';
 import type { EuiButtonColor } from '@elastic/eui';
+import { useEuiTheme } from '@elastic/eui';
 import { useMemo } from 'react';
-import type { ResolverProcessType, NodeDataStatus } from '../types';
+import type { NodeDataStatus, ResolverProcessType } from '../types';
 import { useSymbolIDs } from './use_symbol_ids';
 import { useColors } from './use_colors';
 
@@ -22,6 +21,8 @@ export function useCubeAssets(
   cubeType: NodeDataStatus,
   isProcessTrigger: boolean
 ): NodeStyleConfig {
+  const { euiTheme } = useEuiTheme();
+
   const SymbolIds = useSymbolIDs({ id });
   const colorMap = useColors();
 
@@ -36,7 +37,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: true,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       loadingCube: {
         backingFill: colorMap.processBackingFill,
@@ -47,7 +48,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       errorCube: {
         backingFill: colorMap.processBackingFill,
@@ -58,7 +59,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       runningTriggerCube: {
         backingFill: colorMap.triggerBackingFill,
@@ -69,7 +70,7 @@ export function useCubeAssets(
         }),
         isLabelFilled: true,
         labelButtonFill: 'danger',
-        strokeColor: euiThemeVars.euiColorDanger,
+        strokeColor: euiTheme.colors.danger,
       },
       terminatedProcessCube: {
         backingFill: colorMap.processBackingFill,
@@ -83,7 +84,7 @@ export function useCubeAssets(
         ),
         isLabelFilled: false,
         labelButtonFill: 'primary',
-        strokeColor: euiThemeVars.euiColorPrimary,
+        strokeColor: euiTheme.colors.primary,
       },
       terminatedTriggerCube: {
         backingFill: colorMap.triggerBackingFill,
@@ -97,10 +98,10 @@ export function useCubeAssets(
         ),
         isLabelFilled: false,
         labelButtonFill: 'danger',
-        strokeColor: euiThemeVars.euiColorDanger,
+        strokeColor: euiTheme.colors.danger,
       },
     }),
-    [SymbolIds, colorMap]
+    [SymbolIds, colorMap, euiTheme]
   );
 
   if (cubeType === 'terminated') {
@@ -132,6 +133,7 @@ const processTypeToCube: Record<ResolverProcessType, keyof NodeStyleMap> = {
   processError: 'errorCube',
   unknownEvent: 'runningProcessCube',
 };
+
 interface NodeStyleMap {
   runningProcessCube: NodeStyleConfig;
   runningTriggerCube: NodeStyleConfig;
@@ -140,6 +142,7 @@ interface NodeStyleMap {
   loadingCube: NodeStyleConfig;
   errorCube: NodeStyleConfig;
 }
+
 interface NodeStyleConfig {
   backingFill: string;
   cubeSymbol: string;