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

[Security Solution][Explore] Migrate from styled-components in shared #210311

Merged

Conversation

kapral18
Copy link
Contributor

@kapral18 kapral18 commented Feb 10, 2025

Addresses #206436

  • Replace styled-components with @emotion/react and @emotion/styled across multiple components
  • Remove @kbn/ui-theme instances
  • Update test cases to use @emotion/jest matchers for toHaveStyleRule to work properly
  • Adjust styles to use css from @emotion/react
  • Remove unused imports and updated snapshots
Screen.Recording.Feb.10.2025.mp4

@kapral18 kapral18 self-assigned this Feb 10, 2025
@kapral18 kapral18 requested review from a team as code owners February 10, 2025 08:06
@kapral18 kapral18 added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 Team:Threat Hunting Security Solution Threat Hunting Team Team:Threat Hunting:Explore backport:version Backport to applied version labels v8.18.0 v9.1.0 v8.19.0 labels Feb 10, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting (Team:Threat Hunting)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-threat-hunting-explore (Team:Threat Hunting:Explore)

@kapral18 kapral18 force-pushed the chore/explore/206436-migrate-to-emotion branch from d8bdf28 to c8176da Compare February 10, 2025 11:16
@kapral18 kapral18 requested a review from a team as a code owner February 10, 2025 11:16
Copy link
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM for the Threat Hunting Investigations team

@kapral18 kapral18 force-pushed the chore/explore/206436-migrate-to-emotion branch from c8176da to e1f6adf Compare February 13, 2025 11:52
Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule
  to work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots
@kapral18 kapral18 force-pushed the chore/explore/206436-migrate-to-emotion branch from e1f6adf to 435427b Compare February 13, 2025 13:48
@elasticmachine
Copy link
Contributor

elasticmachine commented Feb 13, 2025

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #34 / discover/esql discover esql view sorting should sort correctly

Metrics [docs]

Async chunks

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

id before after diff
securitySolution 22.3MB 19.1MB -3.2MB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
securitySolution 92.1KB 92.1KB +11.0B
Unknown metric groups

ESLint disabled line counts

id before after diff
securitySolution 577 576 -1

Total ESLint disabled count

id before after diff
securitySolution 660 659 -1

History

cc @kapral18

@kapral18 kapral18 merged commit 4b4c5ce into elastic:main Feb 13, 2025
9 checks passed
@kapral18 kapral18 deleted the chore/explore/206436-migrate-to-emotion branch February 13, 2025 16:14
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.18, 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13312107803

@kibanamachine
Copy link
Contributor

💔 All backports failed

Status Branch Result
8.18 Backport failed because of merge conflicts
8.x Backport failed because of merge conflicts
9.0 Backport failed because of merge conflicts

You might need to backport the following PRs to 9.0:
- Upgrade EUI to v99.2.0-borealis.0 (#209690)
- [Defend Workflows][Eui Visual Refresh] Removed transparentize usage in responder (#208457)

Manual backport

To create the backport manually run:

node scripts/backport --pr 210311

Questions ?

Please refer to the Backport tool documentation

kapral18 added a commit to kapral18/kibana that referenced this pull request Feb 14, 2025
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
kapral18 added a commit to kapral18/kibana that referenced this pull request Feb 14, 2025
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
@kapral18
Copy link
Contributor Author

💚 All backports created successfully

Status Branch Result
9.0
8.x
8.18

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kapral18 added a commit to kapral18/kibana that referenced this pull request Feb 14, 2025
…elastic#210311)

Addresses elastic#206436

- Replace styled-components with @emotion/react and @emotion/styled
across multiple components
- Remove `@kbn/ui-theme` instances
- Update test cases to use @emotion/jest matchers for toHaveStyleRule to
work properly
- Adjust styles to use `css` from `@emotion/react`
- Remove unused imports and updated snapshots

https://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7
(cherry picked from commit 4b4c5ce)

# Conflicts:
#	packages/kbn-babel-preset/styled_components_files.js
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend.tsx
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/draggable_legend_item.tsx
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
#	x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
kapral18 added a commit that referenced this pull request Feb 14, 2025
…shared (#210311) (#211224)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kapral18 added a commit that referenced this pull request Feb 14, 2025
… shared (#210311) (#211226)

# Backport

This will backport the following commits from `main` to `8.18`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
kapral18 added a commit that referenced this pull request Feb 14, 2025
…shared (#210311) (#211221)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Security Solution][Explore] Migrate from styled-components in shared
(#210311)](#210311)

<!--- Backport version: 9.6.4 -->

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

<!--BACKPORT [{"author":{"name":"Karen
Grigoryan","email":"karen.grigoryan@elastic.co"},"sourceCommit":{"committedDate":"2025-02-13T16:14:34Z","message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat
Hunting","Team:Threat Hunting:Explore","backport:version","v8.18.0","EUI
Visual Refresh","v9.1.0","v8.19.0"],"title":"[Security
Solution][Explore] Migrate from styled-components in
shared","number":210311,"url":"https://github.com/elastic/kibana/pull/210311","mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/210311","number":210311,"mergeCommit":{"message":"[Security
Solution][Explore] Migrate from styled-components in shared
(#210311)\n\nAddresses #206436\r\n\r\n- Replace styled-components with
@emotion/react and @emotion/styled\r\nacross multiple components\r\n-
Remove `@kbn/ui-theme` instances\r\n- Update test cases to use
@emotion/jest matchers for toHaveStyleRule to\r\nwork properly\r\n-
Adjust styles to use `css` from `@emotion/react`\r\n- Remove unused
imports and updated
snapshots\r\n\r\n\r\nhttps://github.com/user-attachments/assets/48b9ab41-23fd-4c00-ace9-c0cbe58c91f7","sha":"4b4c5ce491aa6539867c3de789ff604880a7fc2e"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:version Backport to applied version labels EUI Visual Refresh release_note:skip Skip the PR/issue when compiling release notes Team:Threat Hunting:Explore Team:Threat Hunting Security Solution Threat Hunting Team v8.18.0 v8.19.0 v9.0.0 v9.1.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants