[Security Solution][Explore] Migrate from styled-components in shared (…

…elastic#210311) Addresses elastic#206436 - Replace styled-components with @emotion/react and @emotion/styled across multiple components - Remove `@kbn/ui-theme` instances - Update test cases to use @emotion/jest matchers for toHaveStyleRule to work properly - Adjust styles to use `css` from `@emotion/react` - Remove unused imports and updated snapshots https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
kapral18 · Feb 13, 2025 · 4b4c5ce · 4b4c5ce
1 parent cf0f338
commit 4b4c5ce
Show file tree

Hide file tree

Showing 41 changed files with 433 additions and 461 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/...solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx b/...solutions/security/plugins/security_solution/public/common/components/charts/barchart.tsx
@@ -13,7 +13,7 @@ import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/
 import { getOr, get, isNumber } from 'lodash/fp';
 import deepmerge from 'deepmerge';
 import { v4 as uuidv4 } from 'uuid';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import deepEqual from 'fast-deep-equal';
 
 import { escapeDataProviderId } from '../drag_and_drop/helpers';

diff --git a/...security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx b/...security/plugins/security_solution/public/common/components/charts/chart_place_holder.tsx
@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { EuiFlexItem, EuiText, EuiFlexGroup } from '@elastic/eui';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import type { ChartSeriesData } from './common';
 import { checkIfAllValuesAreZero } from './common';
 import * as i18n from './translation';

diff --git a/...utions/security/plugins/security_solution/public/common/components/charts/common.test.tsx b/...utions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
@@ -5,9 +5,12 @@
  * 2.0.
  */
 
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import React from 'react';
 import { renderHook } from '@testing-library/react';
+import { matchers } from '@emotion/jest';
+
+expect.extend(matchers);
 
 import { useDarkMode } from '../../lib/kibana';
 import type { ChartSeriesData } from './common';
@@ -25,12 +28,12 @@ jest.mock('../../lib/kibana');
 
 describe('WrappedByAutoSizer', () => {
   it('should render correct default height', () => {
-    const wrapper = shallow(<WrappedByAutoSizer />);
+    const wrapper = mount(<WrappedByAutoSizer />);
     expect(wrapper).toHaveStyleRule('height', defaultChartHeight);
   });
 
   it('should render correct given height', () => {
-    const wrapper = shallow(<WrappedByAutoSizer height="100px" />);
+    const wrapper = mount(<WrappedByAutoSizer height="100px" />);
     expect(wrapper).toHaveStyleRule('height', '100px');
   });
 });

diff --git a/...k/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx b/...k/solutions/security/plugins/security_solution/public/common/components/charts/common.tsx
@@ -20,7 +20,7 @@ import type {
 import { LEGACY_DARK_THEME, LEGACY_LIGHT_THEME, Position } from '@elastic/charts';
 import { EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 
 import { useDarkMode } from '../../lib/kibana';
 

diff --git a/...lutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx b/...lutions/security/plugins/security_solution/public/common/components/charts/donutchart.tsx
@@ -5,11 +5,11 @@
  * 2.0.
  */
 
-import type { EuiFlexGroupProps } from '@elastic/eui';
 import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip, useEuiTheme } from '@elastic/eui';
 import React, { useCallback, useMemo } from 'react';
 
 import type { Datum, NodeColorAccessor, PartialTheme, ElementClickListener } from '@elastic/charts';
+import type { SerializedStyles } from '@emotion/react';
 import {
   Chart,
   Partition,
@@ -18,10 +18,9 @@ import {
   defaultPartitionValueFormatter,
 } from '@elastic/charts';
 import { isEmpty } from 'lodash';
-import type { FlattenSimpleInterpolation } from 'styled-components';
-import styled from 'styled-components';
 
 import { i18n } from '@kbn/i18n';
+import { css } from '@emotion/react';
 import { useThemes } from './common';
 import { DraggableLegend } from './draggable_legend';
 import type { LegendItem } from './draggable_legend_item';
@@ -63,36 +62,34 @@ export interface DonutChartWrapperProps {
   children?: React.ReactElement;
   dataExists: boolean;
   donutTextWrapperClassName?: string;
-  donutTextWrapperStyles?: FlattenSimpleInterpolation;
+  donutTextWrapperStyles?: SerializedStyles;
   isChartEmbeddablesEnabled?: boolean;
   label?: React.ReactElement | string;
   title: React.ReactElement | string | number | null;
 }
 
-/* Make this position absolute in order to overlap the text onto the donut */
-export const DonutTextWrapper = styled(EuiFlexGroup)<
-  EuiFlexGroupProps & {
-    $dataExists?: boolean;
-    $donutTextWrapperStyles?: FlattenSimpleInterpolation;
-    $isChartEmbeddablesEnabled?: boolean;
-    className?: string;
-  }
->`
-  top: ${({ $isChartEmbeddablesEnabled, $dataExists }) =>
-    $isChartEmbeddablesEnabled && !$dataExists ? `66%` : `34%;`};
-  width: 100%;
-  max-width: 77px;
-  position: absolute;
-  z-index: 1;
-
-  ${({ className, $donutTextWrapperStyles }) =>
-    className && $donutTextWrapperStyles ? `&.${className} {${$donutTextWrapperStyles}}` : ''}
-`;
-
-export const StyledEuiFlexItem = styled(EuiFlexItem)`
-  position: relative;
-  align-items: center;
-`;
+const getStyles = (
+  dataExists: boolean,
+  isChartEmbeddablesEnabled?: boolean,
+  donutTextWrapperStyles?: SerializedStyles,
+  className?: string
+) => {
+  return {
+    donutTextWrapper: css`
+      top: ${isChartEmbeddablesEnabled && !dataExists ? '66%' : '34%'};
+      width: 100%;
+      max-width: 77px;
+      position: absolute; // Make this position absolute in order to overlap the text onto the donut
+      z-index: 1;
+
+      ${className && donutTextWrapperStyles ? `&.${className} {${donutTextWrapperStyles}}` : ''}
+    `,
+    flexItem: css`
+      position: relative;
+      align-items: center;
+    `,
+  };
+};
 
 const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   children,
@@ -104,6 +101,12 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
   title,
 }) => {
   const { euiTheme } = useEuiTheme();
+  const styles = getStyles(
+    dataExists,
+    isChartEmbeddablesEnabled,
+    donutTextWrapperStyles,
+    donutTextWrapperClassName
+  );
   const emptyLabelStyle = useMemo(
     () => ({
       color: euiTheme.colors.textSubdued,
@@ -120,11 +123,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
       gutterSize="l"
       data-test-subj="donut-chart"
     >
-      <StyledEuiFlexItem grow={isChartEmbeddablesEnabled}>
-        <DonutTextWrapper
-          $dataExists={dataExists}
-          $donutTextWrapperStyles={donutTextWrapperStyles}
-          $isChartEmbeddablesEnabled={isChartEmbeddablesEnabled}
+      <EuiFlexItem css={styles.flexItem} grow={isChartEmbeddablesEnabled}>
+        <EuiFlexGroup
+          css={styles.donutTextWrapper}
           alignItems="center"
           className={donutTextWrapperClassName}
           direction="column"
@@ -145,9 +146,9 @@ const DonutChartWrapperComponent: React.FC<DonutChartWrapperProps> = ({
               </EuiToolTip>
             </EuiFlexItem>
           )}
-        </DonutTextWrapper>
+        </EuiFlexGroup>
         {children}
-      </StyledEuiFlexItem>
+      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };