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

[8.8] [Security Solution] Fix incorrectly applied emotion styles (#157935) (#158058)

Browse source 
# Backport

This will backport the following commits from `main` to `8.8`:
- [[Security Solution] Fix incorrectly applied emotion styles
(#157935)](https://github.com/elastic/kibana/pull/157935)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Maxim
Palenov","email":"maxim.palenov@elastic.co"},"sourceCommit":{"committedDate":"2023-05-18T07:54:40Z","message":"[Security
Solution] Fix incorrectly applied emotion styles
(#157935)\n\n**Resolves:**
https://github.com/elastic/kibana/issues/156820\r\n\r\n##
Summary\r\n\r\nThis PR fixes improperly applied styles via emotion on
the rule details page.\r\n\r\n*Before:*\r\n\r\n<img width=\"2267\"
alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432092-1a102af4-e746-4c32-ba17-6d17f76df6d2.png\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432072-da6efa55-0953-4abc-a5b5-c27be2b103ee.png\">\r\n\r\n*After:*\r\n\r\n<img
width=\"2267\" alt=\"image\"
src=\"4431eda1-0a69-403a-ad93-51658d0dbeff\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"06647825-9b1f-4cd8-a60a-2c8988acbd9b\">\r\n\r\n\r\n##
Details\r\n\r\nRecent investigation has revealed emotion css styles
aren't applied correctly on production while the problem isn't
noticeable locally. This is caused by simultaneously using
**styled-components** and **emotion** in Security Solution plugin.
Further research lead to a way to fix it\r\n\r\n1. import `css` utility
function from `@emotion/css` instead of `@emotion/react`\r\n2. apply
styles using `className` instead of `css`\r\n\r\nLike in the code
below\r\n\r\n```ts\r\nimport { css } from
'@emotion/css';\r\n\r\n...\r\n\r\n<div className={css`\r\n padding-left:
200px;\r\n`}>\r\n
TEST\r\n</div>\r\n\r\n...\r\n```","sha":"8cf6d034e3a22370b73cf66ae893f8d7ff6b158d","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:fix","Team:Detections
and Resp","Team: SecuritySolution","Feature:Rule
Details","backport:prev-minor","ci:cloud-deploy","v8.9.0","Team:Detection
Engine"],"number":157935,"url":"https://github.com/elastic/kibana/pull/157935","mergeCommit":{"message":"[Security
Solution] Fix incorrectly applied emotion styles
(#157935)\n\n**Resolves:**
https://github.com/elastic/kibana/issues/156820\r\n\r\n##
Summary\r\n\r\nThis PR fixes improperly applied styles via emotion on
the rule details page.\r\n\r\n*Before:*\r\n\r\n<img width=\"2267\"
alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432092-1a102af4-e746-4c32-ba17-6d17f76df6d2.png\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432072-da6efa55-0953-4abc-a5b5-c27be2b103ee.png\">\r\n\r\n*After:*\r\n\r\n<img
width=\"2267\" alt=\"image\"
src=\"4431eda1-0a69-403a-ad93-51658d0dbeff\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"06647825-9b1f-4cd8-a60a-2c8988acbd9b\">\r\n\r\n\r\n##
Details\r\n\r\nRecent investigation has revealed emotion css styles
aren't applied correctly on production while the problem isn't
noticeable locally. This is caused by simultaneously using
**styled-components** and **emotion** in Security Solution plugin.
Further research lead to a way to fix it\r\n\r\n1. import `css` utility
function from `@emotion/css` instead of `@emotion/react`\r\n2. apply
styles using `className` instead of `css`\r\n\r\nLike in the code
below\r\n\r\n```ts\r\nimport { css } from
'@emotion/css';\r\n\r\n...\r\n\r\n<div className={css`\r\n padding-left:
200px;\r\n`}>\r\n
TEST\r\n</div>\r\n\r\n...\r\n```","sha":"8cf6d034e3a22370b73cf66ae893f8d7ff6b158d"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/157935","number":157935,"mergeCommit":{"message":"[Security
Solution] Fix incorrectly applied emotion styles
(#157935)\n\n**Resolves:**
https://github.com/elastic/kibana/issues/156820\r\n\r\n##
Summary\r\n\r\nThis PR fixes improperly applied styles via emotion on
the rule details page.\r\n\r\n*Before:*\r\n\r\n<img width=\"2267\"
alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432092-1a102af4-e746-4c32-ba17-6d17f76df6d2.png\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"https://user-images.githubusercontent.com/92328789/236432072-da6efa55-0953-4abc-a5b5-c27be2b103ee.png\">\r\n\r\n*After:*\r\n\r\n<img
width=\"2267\" alt=\"image\"
src=\"4431eda1-0a69-403a-ad93-51658d0dbeff\">\r\n\r\n<img
width=\"2236\" alt=\"image\"
src=\"06647825-9b1f-4cd8-a60a-2c8988acbd9b\">\r\n\r\n\r\n##
Details\r\n\r\nRecent investigation has revealed emotion css styles
aren't applied correctly on production while the problem isn't
noticeable locally. This is caused by simultaneously using
**styled-components** and **emotion** in Security Solution plugin.
Further research lead to a way to fix it\r\n\r\n1. import `css` utility
function from `@emotion/css` instead of `@emotion/react`\r\n2. apply
styles using `className` instead of `css`\r\n\r\nLike in the code
below\r\n\r\n```ts\r\nimport { css } from
'@emotion/css';\r\n\r\n...\r\n\r\n<div className={css`\r\n padding-left:
200px;\r\n`}>\r\n
TEST\r\n</div>\r\n\r\n...\r\n```","sha":"8cf6d034e3a22370b73cf66ae893f8d7ff6b158d"}}]}]
BACKPORT-->

Co-authored-by: Maxim Palenov <maxim.palenov@elastic.co>
This commit is contained in:
Kibana Machine 2023-05-23 05:00:09 -04:00 • committed by GitHub
parent 97b27d818c
commit e687aef540
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

26
x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/index.tsx
View file

@ -20,7 +20,7 @@ import { isEmpty } from 'lodash';
import type { PropsWithChildren } from 'react';
import React, { memo, useCallback, useMemo, useState } from 'react';
import { css } from '@emotion/react';
import { css } from '@emotion/css';
import { HeaderSection } from '../../../../common/components/header_section';
import { MarkdownRenderer } from '../../../../common/components/markdown_editor';
import type {
@ -81,8 +81,8 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
return (
<EuiPanel
hasBorder
css={css`
position: 'relative';
className={css`
position: relative;
`}
>
{loading && (
@ -92,7 +92,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
</>
)}
{stepData != null && stepDataDetails != null && (
<EuiFlexGroup gutterSize="xs" direction="column" css={fullHeight}>
<EuiFlexGroup gutterSize="xs" direction="column" className={fullHeight}>
<EuiFlexItem grow={false} key="header">
<HeaderSection title={i18n.ABOUT_TEXT}>
{toggleOptions.length > 0 && (
@ -112,7 +112,7 @@ const StepAboutRuleToggleDetailsComponent: React.FC<StepPanelProps> = ({
{selectedToggleOption === 'details' && (
<EuiResizeObserver data-test-subj="stepAboutDetailsContent" onResize={onResize}>
{(resizeRef) => (
<div ref={resizeRef} css={fullHeight}>
<div ref={resizeRef} className={fullHeight}>
<VerticalOverflowContainer maxHeight={120}>
<VerticalOverflowContent maxHeight={120}>
<EuiText
@ -175,10 +175,10 @@ function VerticalOverflowContainer({
}: PropsWithChildren<VerticalOverflowContainerProps>): JSX.Element {
return (
<div
css={css`
max-height: ${maxHeight};
overflow-y: 'hidden';
word-break: 'break-word';
className={css`
max-height: ${maxHeight}px;
overflow-y: hidden;
word-break: break-word;
`}
data-test-subj={dataTestSubject}
>
@ -193,15 +193,13 @@ interface VerticalOverflowContentProps {
function VerticalOverflowContent({
maxHeight,
children,
}: PropsWithChildren<VerticalOverflowContentProps>): JSX.Element {
return (
<div
className="eui-yScroll"
css={css`
max-height: ${maxHeight};
`}
className={`eui-yScroll ${css`
max-height: ${maxHeight}px;
`}`}
>
{children}
</div>

2
x-pack/plugins/security_solution/public/detections/components/rules/step_about_rule_details/styles.ts
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { css } from '@emotion/react';
import { css } from '@emotion/css';
export const fullHeight = css`
height: 100%;