[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react #205664
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…otion/css vs emotion/react
PhilippeOberti
added
release_note:skip
|
Pinging @elastic/security-threat-hunting-investigations (Team:Threat Hunting:Investigations) |
💚 Build Succeeded
Metrics [docs]Async chunks
History
|
christineweng
approved these changes
Jan 8, 2025
|
Starting backport for target branches: 8.x |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jan 8, 2025
…otion/css vs emotion/react (elastic#205664) ## Summary This recent [PR](elastic#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 | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | In a follow work, we need to remove completely all the `styled_components` we have. (cherry picked from commit a8e1bf4)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
kibanamachine
added a commit
that referenced
this pull request
Jan 8, 2025
… to emotion/css vs emotion/react (#205664) (#205928) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)](#205664) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Philippe Oberti","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-01-08T16:00:28Z","message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Threat Hunting:Investigations","backport:version","v8.18.0"],"title":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react","number":205664,"url":"https://github.com/elastic/kibana/pull/205664","mergeCommit":{"message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/205664","number":205664,"mergeCommit":{"message":"[Security Solution][Alert Details] - fix some UI issues related to emotion/css vs emotion/react (#205664)\n\n## Summary\r\n\r\nThis recent [PR](#205011) slightly\r\nbroke the UI in a couple of small places in the alert details flyout.\r\nStrangely, I did review the PR by pulling down the branch, but only\r\nlooked at the places that were impacted by the files modified. The\r\ncouple of places where the UI broke were completely different...\r\nMy guess it is is related to the fact that in those place we were still\r\nusing `@emotion/css` and this might not play nice with some\r\n`styled_components`...\r\n\r\nUpdating those places to use `@emotion/react` fixed the issues!\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\n| Before fix | After fix |\r\n| ------------- | ------------- |\r\n|\r\n\r\n|\r\n\r\n|\r\n\r\nIn a follow work, we need to remove completely all the\r\n`styled_components` we have.","sha":"a8e1bf46a3dc111e37caf19b19897081ed2a8078"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Philippe Oberti <[email protected]>
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Jan 13, 2025
…otion/css vs emotion/react (elastic#205664) ## Summary This recent [PR](elastic#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 | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | | Before fix | After fix | | ------------- | ------------- | |  |  | In a follow work, we need to remove completely all the `styled_components` we have.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
This recent PR 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/cssand this might not play nice with somestyled_components...Updating those places to use
@emotion/reactfixed the issues!In a follow work, we need to remove completely all the
styled_componentswe have.