From 233da453329e81370c55224d0611b201f67c78fa Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 9 Jan 2025 04:56:31 +1100 Subject: [PATCH] [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)](https://github.com/elastic/kibana/pull/205664) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Philippe Oberti --- .../right/components/host_entity_overview.tsx | 2 +- .../right/components/user_entity_overview.tsx | 2 +- .../shared/components/insight_distribution_bar.tsx | 2 +- .../shared/components/misconfiguration_insight.tsx | 2 +- .../shared/components/vulnerabilities_insight.tsx | 2 +- .../flyout/shared/components/expandable_panel.tsx | 14 +++++++++----- 6 files changed, 14 insertions(+), 10 deletions(-) diff --git a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx index eb1ca093fbb03..3b47aeaa412e6 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx +++ b/x-pack/solutions/security/plugins/security_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/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx index 22f889a61c54e..658eca81219d4 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx +++ b/x-pack/solutions/security/plugins/security_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/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx index 083738e6766bc..fd6ed66e9b78b 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx +++ b/x-pack/solutions/security/plugins/security_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/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx index 6ccada3134f9b..74374fe23c6bf 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx +++ b/x-pack/solutions/security/plugins/security_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/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx index 8991124a77e24..125e7e9985edb 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx +++ b/x-pack/solutions/security/plugins/security_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/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx b/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx index 88318ee2f2cfc..813aa6ad74e8e 100644 --- a/x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx +++ b/x-pack/solutions/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> = ); const { euiTheme } = useEuiTheme(); + const xsFontSize = useEuiFontSize('xs').fontSize; const headerLeftSection = useMemo( () => ( @@ -159,8 +161,8 @@ export const ExpandablePanel: FC> = > = ), [ + 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, ] );