Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8.x] [Security Solution][Data Quality Dashboard]: migrate styled-component… (#205559) #206370

Merged
merged 1 commit into from
Jan 12, 2025

Conversation

kapral18
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

elastic#205559)

…s to Emotion

Addresses elastic#205449

This PR migrates `ecs_data_quality_dashboard` package from
`styled-components` to `emotion`. In the process we also convert the
`kbn/ui-theme` json tokens to `euiTheme` counterparts.

Additionally we decorate root `babel-jest`
[transform](https://github.com/kapral18/kibana/blob/211d4a6889f314eb11761b0bc65f7f93d3b55ffd/packages/kbn-test/src/jest/transforms/babel.js)
locally in `security_solution/public/overview` and
`ecs_data_quality_dashboard` package folder to include
`@emotion/babel-preset-css-prop`.

The reason for local `babel-jest` transforms is that root `babel-jest`
transform doesn't include `@emotion/babel-preset-css-prop` which is
necessary for proper compilation of emotion css prop in tests. Without
it there is a warning

![image](https://github.com/user-attachments/assets/c75b9827-a731-469c-a762-ff04f86cd80e)
appearing in every test that tests a component that uses css prop with
theme function passed into it. Other use cases seem to be compiling fine
without this babel preset. But theme callback is a valid way of using
emotion so we shouldn't avoid using it just because it's not added
properly to the test compilation step. Hence I am adding it locally to
`ecs_data_quality_dashboard` package and
`security_solution/public/overview`.

---------

Co-authored-by: kibanamachine <[email protected]>
(cherry picked from commit 72980e1)

# Conflicts:
#	x-pack/solutions/security/packages/ecs_data_quality_dashboard/impl/data_quality_panel/mock/test_providers/test_providers.tsx
#	x-pack/solutions/security/packages/ecs_data_quality_dashboard/tsconfig.json
@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
securitySolution 6520 6519 -1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
securitySolution 19.1MB 19.1MB -1.7KB
Unknown metric groups

ESLint disabled line counts

id before after diff
@kbn/ecs-data-quality-dashboard 8 11 +3
securitySolution 570 573 +3
total +6

Total ESLint disabled count

id before after diff
@kbn/ecs-data-quality-dashboard 8 11 +3
securitySolution 653 656 +3
total +6

@kapral18 kapral18 removed the request for review from KDKHD January 11, 2025 11:13
@kapral18 kapral18 merged commit 910130e into elastic:8.x Jan 12, 2025
11 checks passed
@kapral18 kapral18 deleted the backport/8.x/pr-205559 branch January 12, 2025 20:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants