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.

Sign up for GitHub

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

Jump to bottom

[Security Solution] ES|QL Query bar's tooltip is rendered in wrong place #203305

Closed
Tracked by #201502
maximpn opened this issue Dec 6, 2024 · 3 comments · Fixed by #204780
Closed
Tracked by #201502

[Security Solution] ES|QL Query bar's tooltip is rendered in wrong place #203305

maximpn opened this issue Dec 6, 2024 · 3 comments · Fixed by #204780
Assignees
@nikitaindik
Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.

Comments

@maximpn
Copy link
Contributor

maximpn commented Dec 6, 2024 •
edited by nikitaindik
Loading

PR: #204780
Related to: #202206

Summary

ES|QL Query bar's auto-suggetion and information tooltips are rendered in wrong place for ES|QL Query edit component in Upgrade Rule flyout.

Steps to reproduce:

  • Open Upgrade Rule flyout for a rule with ES|QL field update
  • Try to edit the ES|QL query

Expected behavior: Tooltip appears at the cursor the way it does in rule creation/editing forms.

Actual behavior: Tooltip appears outside the ES|QL Query edit component.

Screenshots:

Image
@maximpn maximpn added 8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team labels Dec 6, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detection-rule-management (Team:Detection Rule Management)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-detections-response (Team:Detections and Resp)

@elasticmachine
Copy link
Contributor

Pinging @elastic/security-solution (Team: SecuritySolution)

@maximpn maximpn mentioned this issue Dec 6, 2024
Open
@nikitaindik nikitaindik mentioned this issue Dec 18, 2024
Merged
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Dec 18, 2024
@nikitaindik
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
fe1f37b 
…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="Scherm­afbeelding 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="Scherm­afbeelding 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)
JoseLuisGJ pushed a commit to JoseLuisGJ/kibana that referenced this issue Dec 19, 2024
@nikitaindik @JoseLuisGJ
[Security Solution] Rule Upgrade: Fix ES|QL autosuggest tooltip displ…
0fe3cf5 
…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="Scherm­afbeelding 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="Scherm­afbeelding 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
Assignees

@nikitaindik nikitaindik

Labels
8.18 candidate bug Fixes for quality problems that affect the customer experience Feature:Prebuilt Detection Rules Security Solution Prebuilt Detection Rules area impact:medium Addressing this issue will have a medium level of impact on the quality/strength of our product. Team:Detection Rule Management Security Detection Rule Management Team Team:Detections and Resp Security Detection Response Team Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc.
Projects
None yet
Milestone
No milestone
3 participants
@maximpn @elasticmachine @nikitaindik