[Security Solution][Data Quality Dashboard]: migrate styled-component… (

#205559) …s to Emotion Addresses #205449 This PR migrates `ecs_data_quality_dashboard` package from `styled-components` to `emotion`. In the process we also convert the `kbn/ui-theme` json tokens to `euiTheme` counterparts. Additionally we decorate root `babel-jest` [transform](https://github.com/kapral18/kibana/blob/211d4a6889f314eb11761b0bc65f7f93d3b55ffd/packages/kbn-test/src/jest/transforms/babel.js) locally in `security_solution/public/overview` and `ecs_data_quality_dashboard` package folder to include `@emotion/babel-preset-css-prop`. The reason for local `babel-jest` transforms is that root `babel-jest` transform doesn't include `@emotion/babel-preset-css-prop` which is necessary for proper compilation of emotion css prop in tests. Without it there is a warning ![image](https://github.com/user-attachments/assets/c75b9827-a731-469c-a762-ff04f86cd80e) appearing in every test that tests a component that uses css prop with theme function passed into it. Other use cases seem to be compiling fine without this babel preset. But theme callback is a valid way of using emotion so we shouldn't avoid using it just because it's not added properly to the test compilation step. Hence I am adding it locally to `ecs_data_quality_dashboard` package and `security_solution/public/overview`. --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Jan 6, 2025 · 72980e1 · 72980e1
1 parent e04b200
commit 72980e1
Show file tree

Hide file tree

Showing 69 changed files with 1,055 additions and 702 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
diff --git a/packages/kbn-test/jest-preset.js b/packages/kbn-test/jest-preset.js
@@ -98,7 +98,7 @@ module.exports = {
 
   // A map from regular expressions to paths to transformers
   transform: {
-    '^.+\\.(js|tsx?)$': '<rootDir>/packages/kbn-test/src/jest/transforms/babel.js',
+    '^.+\\.(js|tsx?)$': '<rootDir>/packages/kbn-test/src/jest/transforms/babel/index.js',
     '^.+\\.(txt|html)?$': '<rootDir>/packages/kbn-test/src/jest/transforms/raw.js',
     '^.+\\.peggy?$': '<rootDir>/packages/kbn-test/src/jest/transforms/peggy.js',
   },

diff --git a/packages/kbn-test/src/jest/transforms/babel/index.js b/packages/kbn-test/src/jest/transforms/babel/index.js
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the "Elastic License
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+const babelJest = require('babel-jest');
+const transformerConfig = require('./transformer_config');
+
+module.exports = babelJest.default.createTransformer(transformerConfig);
diff --git a/...ges/kbn-test/src/jest/transforms/babel.js → ...st/transforms/babel/transformer_config.js b/...ges/kbn-test/src/jest/transforms/babel.js → ...st/transforms/babel/transformer_config.js
@@ -7,9 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-const babelJest = require('babel-jest');
-
-module.exports = babelJest.default.createTransformer({
+module.exports = {
   presets: [
     [
       require.resolve('@kbn/babel-preset/node_preset'),
@@ -22,4 +20,4 @@ module.exports = babelJest.default.createTransformer({
       },
     ],
   ],
-});
+};
diff --git a/...ages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx b/...ages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/add_to_new_case/index.tsx
@@ -10,7 +10,7 @@ import { EuiIcon, EuiLink } from '@elastic/eui';
 
 import { useDataQualityContext } from '../../data_quality_context';
 import { useAddToNewCase } from './hooks/use_add_to_new_case';
-import { StyledLinkText } from '../styles';
+import { linkTextCss } from '../styles';
 import { ADD_TO_NEW_CASE } from '../../translations';
 
 interface Props {
@@ -42,10 +42,10 @@ const AddToNewCaseActionComponent: React.FC<Props> = ({ markdownComment }) => {
       disabled={addToNewCaseDisabled || disableAll}
       onClick={addToNewCaseContextMenuOnClick}
     >
-      <StyledLinkText>
+      <span css={linkTextCss}>
         <EuiIcon type="listAdd" />
         {ADD_TO_NEW_CASE}
-      </StyledLinkText>
+      </span>
     </EuiLink>
   );
 };

diff --git a/...curity/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx b/...curity/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/chat/index.tsx
@@ -7,7 +7,8 @@
 
 import React, { FC, useCallback } from 'react';
 import { NewChat } from '@kbn/elastic-assistant';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
+import { useEuiTheme } from '@elastic/eui';
 
 import { AssistantIcon } from '@kbn/ai-assistant-icon';
 import {
@@ -19,19 +20,27 @@ import {
 import { useDataQualityContext } from '../../data_quality_context';
 import { ASK_ASSISTANT } from './translations';
 
-const StyledLinkText = styled.span`
-  display: flex;
-  gap: ${({ theme }) => theme.eui.euiSizeXS};
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    linkText: css({
+      display: 'flex',
+      gap: euiTheme.size.xs,
+    }),
+  };
+};
 
 interface Props {
   markdownComment: string;
   indexName: string;
 }
 
 const ChatActionComponent: FC<Props> = ({ indexName, markdownComment }) => {
+  const styles = useStyles();
   const { isAssistantEnabled } = useDataQualityContext();
   const getPromptContext = useCallback(async () => markdownComment, [markdownComment]);
+
   return (
     <NewChat
       asLink={true}
@@ -44,10 +53,10 @@ const ChatActionComponent: FC<Props> = ({ indexName, markdownComment }) => {
       isAssistantEnabled={isAssistantEnabled}
       iconType={null}
     >
-      <StyledLinkText>
+      <span css={styles.linkText}>
         <AssistantIcon />
         {ASK_ASSISTANT}
-      </StyledLinkText>
+      </span>
     </NewChat>
   );
 };

diff --git a/...es/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx b/...es/ecs_data_quality_dashboard/impl/data_quality_panel/actions/copy_to_clipboard/index.tsx
@@ -10,7 +10,7 @@ import { EuiIcon, EuiLink, copyToClipboard } from '@elastic/eui';
 
 import { useDataQualityContext } from '../../data_quality_context';
 import { COPIED_RESULTS_TOAST_TITLE, COPY_TO_CLIPBOARD } from '../../translations';
-import { StyledLinkText } from '../styles';
+import { linkTextCss } from '../styles';
 
 interface Props {
   markdownComment: string;
@@ -33,10 +33,10 @@ const CopyToClipboardActionComponent: React.FC<Props> = ({ markdownComment }) =>
       disabled={ilmPhases.length === 0}
       onClick={onCopy}
     >
-      <StyledLinkText>
+      <span css={linkTextCss}>
         <EuiIcon type="copyClipboard" />
         {COPY_TO_CLIPBOARD}
-      </StyledLinkText>
+      </span>
     </EuiLink>
   );
 };

diff --git a/...s/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx b/...s/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/actions/styles.tsx
@@ -5,9 +5,10 @@
  * 2.0.
  */
 
-import styled from 'styled-components';
+import { UseEuiTheme } from '@elastic/eui';
+import { CSSObject } from '@emotion/react';
 
-export const StyledLinkText = styled.span`
-  display: flex;
-  gap: ${({ theme }) => theme.eui.euiSizeS};
-`;
+export const linkTextCss = ({ euiTheme }: UseEuiTheme): CSSObject => ({
+  display: 'flex',
+  gap: euiTheme.size.s,
+});
diff --git a/..._dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx b/..._dashboard/impl/data_quality_panel/data_quality_details/ilm_phases_empty_prompt/index.tsx
@@ -5,9 +5,9 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiSpacer, EuiText, EuiTitle, useEuiTheme } from '@elastic/eui';
 import React, { useMemo } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import {
   COLD_DESCRIPTION,
@@ -23,16 +23,21 @@ import {
 } from '../../translations';
 import * as i18n from './translations';
 
-const Ul = styled.ul`
-  text-align: left;
-`;
-
-const Li = styled.ul`
-  margin-bottom: ${({ theme }) => theme.eui.euiSizeS};
-  text-align: left;
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+  return {
+    ul: css({
+      textAlign: 'left',
+    }),
+    li: css({
+      marginBottom: euiTheme.size.s,
+      textAlign: 'left',
+    }),
+  };
+};
 
 const IlmPhasesEmptyPromptComponent: React.FC = () => {
+  const styles = useStyles();
   const title = useMemo(() => <h2>{i18n.TITLE}</h2>, []);
   const body = useMemo(() => <p>{i18n.BODY}</p>, []);
   const footer = useMemo(
@@ -44,23 +49,23 @@ const IlmPhasesEmptyPromptComponent: React.FC = () => {
 
         <EuiSpacer size="s" />
 
-        <Ul>
-          <Li>
+        <ul css={styles.ul}>
+          <li css={styles.li}>
             <strong>{HOT}</strong>
             {': '}
             {HOT_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{WARM}</strong>
             {': '}
             {WARM_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{UNMANAGED}</strong>
             {': '}
             {UNMANAGED_DESCRIPTION}
-          </Li>
-        </Ul>
+          </li>
+        </ul>
 
         <EuiSpacer size="m" />
 
@@ -74,21 +79,21 @@ const IlmPhasesEmptyPromptComponent: React.FC = () => {
 
         <EuiSpacer size="s" />
 
-        <Ul>
-          <Li>
+        <ul css={styles.ul}>
+          <li css={styles.li}>
             <strong>{COLD}</strong>
             {': '}
             {COLD_DESCRIPTION}
-          </Li>
-          <Li>
+          </li>
+          <li css={styles.li}>
             <strong>{FROZEN}</strong>
             {': '}
             {FROZEN_DESCRIPTION}
-          </Li>
-        </Ul>
+          </li>
+        </ul>
       </div>
     ),
-    []
+    [styles.li, styles.ul]
   );
 
   return <EuiEmptyPrompt body={body} footer={footer} title={title} />;

diff --git a/..._quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx b/..._quality_dashboard/impl/data_quality_panel/data_quality_details/indices_details/index.tsx
@@ -5,23 +5,28 @@
  * 2.0.
  */
 
-import { EuiFlexItem } from '@elastic/eui';
+import { EuiFlexItem, useEuiTheme } from '@elastic/eui';
 import React, { useState, useCallback, useEffect } from 'react';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { useResultsRollupContext } from '../../contexts/results_rollup_context';
 import { Pattern } from './pattern';
 import { SelectedIndex } from '../../types';
 import { useDataQualityContext } from '../../data_quality_context';
 import { useIsHistoricalResultsTourActive } from './hooks/use_is_historical_results_tour_active';
 
-const StyledPatternWrapperFlexItem = styled(EuiFlexItem)`
-  margin-bottom: ${({ theme }) => theme.eui.euiSize};
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`;
+const useStyles = () => {
+  const { euiTheme } = useEuiTheme();
+
+  return {
+    patternWrapperFlexItem: css({
+      marginBottom: euiTheme.size.base,
+      ':last-child': {
+        marginBottom: 0,
+      },
+    }),
+  };
+};
 
 export interface Props {
   chartSelectedIndex: SelectedIndex | null;
@@ -32,6 +37,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
   chartSelectedIndex,
   setChartSelectedIndex,
 }) => {
+  const styles = useStyles();
   const { patternRollups, patternIndexNames } = useResultsRollupContext();
   const { patterns } = useDataQualityContext();
 
@@ -73,7 +79,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
   return (
     <div data-test-subj="indicesDetails">
       {patterns.map((pattern) => (
-        <StyledPatternWrapperFlexItem grow={false} key={pattern}>
+        <EuiFlexItem css={styles.patternWrapperFlexItem} grow={false} key={pattern}>
           <Pattern
             indexNames={patternIndexNames[pattern]}
             pattern={pattern}
@@ -91,7 +97,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
             // when surrounding accordions get toggled and affect the layout
             {...(pattern === firstOpenNonEmptyPattern && { openPatternsUpdatedAt })}
           />
-        </StyledPatternWrapperFlexItem>
+        </EuiFlexItem>
       ))}
     </div>
   );

diff --git a/...lity_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx b/...lity_panel/data_quality_details/indices_details/pattern/historical_results_tour/index.tsx
@@ -7,7 +7,7 @@
 
 import React, { FC, useEffect, useState } from 'react';
 import { EuiButton, EuiButtonEmpty, EuiText, EuiTourStep } from '@elastic/eui';
-import styled from 'styled-components';
+import { css } from '@emotion/react';
 
 import { HISTORICAL_RESULTS_TOUR_SELECTOR_KEY } from '../constants';
 import { CLOSE, INTRODUCING_DATA_QUALITY_HISTORY, TRY_IT, VIEW_PAST_RESULTS } from './translations';
@@ -20,9 +20,11 @@ export interface Props {
   zIndex?: number;
 }
 
-const StyledText = styled(EuiText)`
-  margin-block-start: -10px;
-`;
+const styles = {
+  text: css({
+    marginBlockStart: '-10px',
+  }),
+};
 
 export const HistoricalResultsTour: FC<Props> = ({
   anchorSelectorValue,
@@ -52,9 +54,9 @@ export const HistoricalResultsTour: FC<Props> = ({
   return (
     <EuiTourStep
       content={
-        <StyledText size="s">
+        <EuiText css={styles.text} size="s">
           <p>{VIEW_PAST_RESULTS}</p>
-        </StyledText>
+        </EuiText>
       }
       data-test-subj="historicalResultsTour"
       isStepOpen={isOpen}