github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)

Browse source 
## 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.
This commit is contained in:
Philippe Oberti 2025-01-08 17:00:28 +01:00 • committed by GitHub
parent 3fd987caa8
commit a8e1bf46a3
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 14 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/host_entity_overview.tsx
View file

@ -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';

2
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/right/components/user_entity_overview.tsx
View file

@ -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';

2
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/insight_distribution_bar.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useMemo } from 'react';
import { css } from '@emotion/css';
import { css } from '@emotion/react';
import {
EuiFlexGroup,
EuiFlexItem,

2
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/misconfiguration_insight.tsx
View file

@ -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 {

2
x-pack/solutions/security/plugins/security_solution/public/flyout/document_details/shared/components/vulnerabilities_insight.tsx
View file

@ -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';

14
x-pack/solutions/security/plugins/security_solution/public/flyout/shared/components/expandable_panel.tsx
View file

@ -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,
]
);