From a8e1bf46a3dc111e37caf19b19897081ed2a8078 Mon Sep 17 00:00:00 2001 From: Philippe Oberti Date: Wed, 8 Jan 2025 17:00:28 +0100 Subject: [PATCH] [Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664) ## Summary This recent [PR](https://github.com/elastic/kibana/pull/205011) slightly broke the UI in a couple of small places in the alert details flyout. Strangely, I did review the PR by pulling down the branch, but only looked at the places that were impacted by the files modified. The couple of places where the UI broke were completely different... My guess it is is related to the fact that in those place we were still using `@emotion/css` and this might not play nice with some `styled_components`... Updating those places to use `@emotion/react` fixed the issues! | Before fix | After fix | | ------------- | ------------- | | ![broken-1](https://github.com/user-attachments/assets/839760db-da3c-4031-b4be-18645b37c089) | ![fix-1](https://github.com/user-attachments/assets/cdfae85c-0e63-45be-94dd-5e0f9a698d8a) | | Before fix | After fix | | ------------- | ------------- | | ![broken-2](https://github.com/user-attachments/assets/22588529-5afd-491d-ab00-6e07593fb6f7) | ![fix-2](https://github.com/user-attachments/assets/c078d814-1a33-49dc-aa0d-25dcff555de2) | | Before fix | After fix | | ------------- | ------------- | | ![broken-3](https://github.com/user-attachments/assets/082d306c-8866-4e4f-ab18-db7c649101fe) | ![fix-3](https://github.com/user-attachments/assets/5da76c44-934b-4a2a-a98e-2de34973d02e) | In a follow work, we need to remove completely all the `styled_components` we have. --- .../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, ] );