[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place #204780
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
nikitaindik
added
release_note:skip
|
Pinging @elastic/security-detections-response (Team:Detections and Resp) |
|
Pinging @elastic/security-solution (Team: SecuritySolution) |
|
Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management) |
This was referenced Dec 18, 2024
dplumlee
approved these changes
Dec 18, 2024
There was a problem hiding this comment.
Pulled down and tested, everything lgtm! Thanks @nikitaindik
|
Starting backport for target branches: 8.x https://github.com/elastic/kibana/actions/runs/12398456520 |
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
cc @nikitaindik |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Dec 18, 2024
…aying in the wrong place (elastic#204780) **Resolves: elastic#203305 **Resolves: elastic#202206 ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 20" src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4" /> **Chromium v118 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 36" src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b" /> Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024. (cherry picked from commit 9b09335)
💚 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
Dec 18, 2024
… displaying in the wrong place (#204780) (#204817) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place (#204780)](#204780) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Nikita Indik","email":"nikita.indik@elastic.co"},"sourceCommit":{"committedDate":"2024-12-18T17:46:28Z","message":"[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place (#204780)\n\n**Resolves: https://github.com/elastic/kibana/issues/203305**\n**Resolves: https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having\n`transform: translateZ(0);`, which created a new CSS stacking context\nand affected the positioning of fixed elements. This PR removes the\ntransform to resolve the issue.\n\n## Background\nThe `transform: translateZ(0);` was originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby EUI as a workaround for a Chrome bug that no longer reproduces.\n\n## Testing\nThe fix has been tested on:\n - Brave (Chromium v131, latest)\n- Chromium v118 (version on which the Chrome bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo issues were observed with the flyout in either version.\n\n## Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium v118 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote: The darker backdrop in older Chromium is unrelated to this change.\n\nWork started on 18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57","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:Detections and Resp","Team: SecuritySolution","Feature:Rule Management","Team:Detection Rule Management","Feature:Prebuilt Detection Rules","backport:version","v8.18.0"],"title":"[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place","number":204780,"url":"https://github.com/elastic/kibana/pull/204780","mergeCommit":{"message":"[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place (#204780)\n\n**Resolves: https://github.com/elastic/kibana/issues/203305**\n**Resolves: https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having\n`transform: translateZ(0);`, which created a new CSS stacking context\nand affected the positioning of fixed elements. This PR removes the\ntransform to resolve the issue.\n\n## Background\nThe `transform: translateZ(0);` was originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby EUI as a workaround for a Chrome bug that no longer reproduces.\n\n## Testing\nThe fix has been tested on:\n - Brave (Chromium v131, latest)\n- Chromium v118 (version on which the Chrome bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo issues were observed with the flyout in either version.\n\n## Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium v118 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote: The darker backdrop in older Chromium is unrelated to this change.\n\nWork started on 18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57"}},"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/204780","number":204780,"mergeCommit":{"message":"[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displaying in the wrong place (#204780)\n\n**Resolves: https://github.com/elastic/kibana/issues/203305**\n**Resolves: https://github.com/elastic/kibana/issues/202206**\n\n## Summary\nThis PR fixes the ES|QL autosuggest tooltip displaying incorrectly in\nthe Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having\n`transform: translateZ(0);`, which created a new CSS stacking context\nand affected the positioning of fixed elements. This PR removes the\ntransform to resolve the issue.\n\n## Background\nThe `transform: translateZ(0);` was originally\n[added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122)\nby EUI as a workaround for a Chrome bug that no longer reproduces.\n\n## Testing\nThe fix has been tested on:\n - Brave (Chromium v131, latest)\n- Chromium v118 (version on which the Chrome bug\n[occurred](https://issues.chromium.org/issues/40778541#comment13))\n\nNo issues were observed with the flyout in either version.\n\n## Screenshots\n**Chromium v131 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 20\"\nsrc=\"https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4\"\n/>\n\n**Chromium v118 after fix**\n<img width=\"1392\" alt=\"Schermafbeelding 2024-12-18 om 15 57 36\"\nsrc=\"https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b\"\n/>\n\nNote: The darker backdrop in older Chromium is unrelated to this change.\n\nWork started on 18-Dec-2024.","sha":"9b0933567f1ec8a210fd5c6f4c6c4e0592042c57"}},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Nikita Indik <nikita.indik@elastic.co>
JoseLuisGJ
pushed a commit
to JoseLuisGJ/kibana
that referenced
this pull request
Dec 19, 2024
…aying in the wrong place (elastic#204780) **Resolves: elastic#203305 **Resolves: elastic#202206 ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 20" src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4" /> **Chromium v118 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 36" src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b" /> Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024.
benakansara
pushed a commit
to benakansara/kibana
that referenced
this pull request
Jan 2, 2025
…aying in the wrong place (elastic#204780) **Resolves: elastic#203305 **Resolves: elastic#202206 ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 20" src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4" /> **Chromium v118 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 36" src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b" /> Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024.
CAWilson94
pushed a commit
to CAWilson94/kibana
that referenced
this pull request
Jan 13, 2025
…aying in the wrong place (elastic#204780) **Resolves: elastic#203305 **Resolves: elastic#202206 ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 20" src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4" /> **Chromium v118 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 36" src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b" /> Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024.
viduni94
pushed a commit
to viduni94/kibana
that referenced
this pull request
Jan 23, 2025
…aying in the wrong place (elastic#204780) **Resolves: elastic#203305 **Resolves: elastic#202206 ## Summary This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by `EuiFlyoutBody` having `transform: translateZ(0);`, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue. ## Background The `transform: translateZ(0);` was originally [added](https://github.com/elastic/eui/blob/ffd0cbca4d323ad0b1d5a73c252380d93178e5e7/packages/eui/src/global_styling/mixins/_helpers.ts#L122) by EUI as a workaround for a Chrome bug that no longer reproduces. ## Testing The fix has been tested on: - Brave (Chromium v131, latest) - Chromium v118 (version on which the Chrome bug [occurred](https://issues.chromium.org/issues/40778541#comment13)) No issues were observed with the flyout in either version. ## Screenshots **Chromium v131 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 20" src="https://github.com/user-attachments/assets/d3087341-e5d2-45ca-83a3-70752fc026a4" /> **Chromium v118 after fix** <img width="1392" alt="Schermafbeelding 2024-12-18 om 15 57 36" src="https://github.com/user-attachments/assets/cbcfde0b-e571-4f35-a3cb-e4f35394c59b" /> Note: The darker backdrop in older Chromium is unrelated to this change. Work started on 18-Dec-2024.
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.
Resolves: #203305
Resolves: #202206
Summary
This PR fixes the ES|QL autosuggest tooltip displaying incorrectly in the Rule Upgrade flyout. The issue was caused by
EuiFlyoutBodyhavingtransform: translateZ(0);, which created a new CSS stacking context and affected the positioning of fixed elements. This PR removes the transform to resolve the issue.Background
The
transform: translateZ(0);was originally added by EUI as a workaround for a Chrome bug that no longer reproduces.Testing
The fix has been tested on:
No issues were observed with the flyout in either version.
Screenshots
Chromium v131 after fix
Chromium v118 after fix
Note: The darker backdrop in older Chromium is unrelated to this change.
Work started on 18-Dec-2024.