[8.x] [Security Solution][Alert Details] - fix some UI issues related…

… to emotion/css vs emotion/react (#205664) (#205928) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)](#205664)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Philippe Oberti <[email protected]>
elastic · Jan 8, 2025 · 233da45 · 233da45
1 parent 1429560
commit 233da45
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 10 deletions.
diff --git a/...ecurity_solution/public/flyout/document_details/right/components/host_entity_overview.tsx b/...ecurity_solution/public/flyout/document_details/right/components/host_entity_overview.tsx
@@ -15,7 +15,7 @@ import {
   useEuiFontSize,
   EuiSkeletonText,
 } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { getOr } from 'lodash/fp';
 import { i18n } from '@kbn/i18n';
 import { HOST_NAME_FIELD_NAME } from '../../../../timelines/components/timeline/body/renderers/constants';

diff --git a/...ecurity_solution/public/flyout/document_details/right/components/user_entity_overview.tsx b/...ecurity_solution/public/flyout/document_details/right/components/user_entity_overview.tsx
@@ -15,7 +15,7 @@ import {
   useEuiFontSize,
   EuiSkeletonText,
 } from '@elastic/eui';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { getOr } from 'lodash/fp';
 import { i18n } from '@kbn/i18n';
 import { useDocumentDetailsContext } from '../../shared/context';

diff --git a/...ty_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx b/...ty_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import {
   EuiFlexGroup,
   EuiFlexItem,

diff --git a/...ty_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx b/...ty_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx
@@ -8,7 +8,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { useMisconfigurationPreview } from '@kbn/cloud-security-posture/src/hooks/use_misconfiguration_preview';
 import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import {

diff --git a/...ity_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx b/...ity_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx
@@ -8,7 +8,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { EuiFlexItem, type EuiFlexGroupProps, useEuiTheme } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n-react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import { useVulnerabilitiesPreview } from '@kbn/cloud-security-posture/src/hooks/use_vulnerabilities_preview';
 import { buildGenericEntityFlyoutPreviewQuery } from '@kbn/cloud-security-posture-common';
 import { getVulnerabilityStats, hasVulnerabilitiesData } from '@kbn/cloud-security-posture';

diff --git a/...s/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx b/...s/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx
@@ -20,6 +20,7 @@ import {
   useEuiTheme,
   EuiToolTip,
   EuiSkeletonText,
+  useEuiFontSize,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import type { EuiPanelProps, IconType } from '@elastic/eui';
@@ -126,6 +127,7 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
   );
 
   const { euiTheme } = useEuiTheme();
+  const xsFontSize = useEuiFontSize('xs').fontSize;
 
   const headerLeftSection = useMemo(
     () => (
@@ -159,8 +161,8 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
               <EuiToolTip content={link?.tooltip}>
                 <EuiLink
                   css={css`
-                    font-size: 12px;
-                    font-weight: 700;
+                    font-size: ${xsFontSize};
+                    font-weight: ${euiTheme.font.weight.bold};
                   `}
                   data-test-subj={`${dataTestSubj}TitleLink`}
                   onClick={link?.callback}
@@ -178,15 +180,17 @@ export const ExpandablePanel: FC<PropsWithChildren<ExpandablePanelPanelProps>> =
       </EuiFlexItem>
     ),
     [
+      euiTheme.size.xl,
+      euiTheme.size.s,
+      euiTheme.font.weight.bold,
       dataTestSubj,
       expandable,
       children,
       toggleIcon,
-      link?.callback,
       iconType,
-      euiTheme.size.s,
-      euiTheme.size.xl,
+      link?.callback,
       link?.tooltip,
+      xsFontSize,
       title,
     ]
   );