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

…s to Emotion Addresses #205449 - Replaced styled-components with Emotion for styling components - Updated all styled-components imports to Emotion - Refactored styles using Emotion's `css` and `useEuiTheme` hooks - Ensured all components are using Emotion's `css` prop for styling - Updated tsconfig to include Emotion types and configuration - Removed ecs_data_quality_dashboard package from packages/kbn-babel-preset/styled_components_files.js so that emotion is properly compiled - Added emotion babel preset to packages/kbn-test/src/jest/transforms/babel.js so that css prop is compiled correctly in tests as well
elastic · Jan 4, 2025 · b91c385 · b91c385
1 parent ff6adff
commit b91c385
Show file tree

Hide file tree

Showing 52 changed files with 737 additions and 571 deletions.
diff --git a/packages/kbn-babel-preset/styled_components_files.js b/packages/kbn-babel-preset/styled_components_files.js
@@ -25,7 +25,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]synthetics[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]uptime[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]observability[\/\\]plugins[\/\\]ux[\/\\]/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]packages[\/\\]ecs_data_quality_dashboard[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]lists[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]timelines[\/\\]/,

diff --git a/packages/kbn-test/src/jest/transforms/babel.js b/packages/kbn-test/src/jest/transforms/babel.js
@@ -21,5 +21,11 @@ module.exports = babelJest.default.createTransformer({
         },
       },
     ],
+    [
+      require.resolve('@emotion/babel-preset-css-prop'),
+      {
+        labelFormat: '[filename]--[local]',
+      },
+    ],
   ],
 });
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}

diff --git a/..._dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx b/..._dashboard/impl/data_quality_panel/data_quality_details/indices_details/pattern/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiSpacer, useGeneratedHtmlId } from '@elastic/eui';
+import { EuiAccordion, EuiSpacer, useGeneratedHtmlId } from '@elastic/eui';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { ErrorEmptyPrompt } from './error_empty_prompt';
@@ -21,7 +21,7 @@ import type { PatternRollup, SelectedIndex, SortConfig } from '../../../types';
 import { useIlmExplain } from './hooks/use_ilm_explain';
 import { useStats } from './hooks/use_stats';
 import { useDataQualityContext } from '../../../data_quality_context';
-import { PatternAccordion, PatternAccordionChildren } from './styles';
+import { patternAccordionChildrenCss, patternAccordionCss } from './styles';
 import { IndexCheckFlyout } from './index_check_flyout';
 import { useResultsRollupContext } from '../../../contexts/results_rollup_context';
 import { useIndicesCheckContext } from '../../../contexts/indices_check_context';
@@ -318,7 +318,8 @@ const PatternComponent: React.FC<Props> = ({
   return (
     <div data-test-subj={`${pattern}PatternPanel`}>
       <HistoricalResultsContext.Provider value={historicalResultsContextValue}>
-        <PatternAccordion
+        <EuiAccordion
+          css={patternAccordionCss}
           id={patternComponentAccordionId}
           forceState={isAccordionOpen ? 'open' : 'closed'}
           onToggle={handleAccordionToggle}
@@ -337,7 +338,7 @@ const PatternComponent: React.FC<Props> = ({
             />
           }
         >
-          <PatternAccordionChildren>
+          <div css={patternAccordionChildrenCss}>
             {!loading && pattern.includes(':') && (
               <>
                 <RemoteClustersCallout />
@@ -404,8 +405,8 @@ const PatternComponent: React.FC<Props> = ({
                 />
               </div>
             )}
-          </PatternAccordionChildren>
-        </PatternAccordion>
+          </div>
+        </EuiAccordion>
         {isFlyoutVisible ? (
           <IndexCheckFlyout
             pattern={pattern}
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,5 +21,11 @@ module.exports = babelJest.default.createTransformer({ @@
             },
           },
         ],
+        [
+          require.resolve('@emotion/babel-preset-css-prop'),
+          {
+            labelFormat: '[filename]--[local]',
+          },
+        ],
       ],
     });