[Security Solution] Fix editing in KQL Query Bar #208212
Merged
+65
−28
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
jkelas
added
v9.0.0
v8.18.0
bug
|
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) |
ryankeairns
requested changes
Jan 24, 2025
| min-height: $euiFormControlHeight; | ||
| resize: vertical; |
There was a problem hiding this comment.
I don't believe we want to enable this globally. For starters, it is broken in Discover:
There was a problem hiding this comment.
That does not look good. We can't have Discover break like that.
There was a problem hiding this comment.
Right. That was the latest addition to other changes, an improvmeent to add the user ability to change the textarea size manually. I added it because the panel doesn't shrink when I remove some text and I wasn't able to make it work properly. But that's not necessary. I pushed a commit to remove this change.
There was a problem hiding this comment.
Have you checked why the FTs are failing? There is a bunch of them which is concerning
There was a problem hiding this comment.
I will investigate the issues, thank you @stratoula
There was a problem hiding this comment.
@stratoula I just found a workaround on our side to make this work better. I am leaving only one change on your side, this bubbleSubmitEvent property which solves the issue of inserting new lines.
There was a problem hiding this comment.
Awesome, are the test failures relevant with this change though?
There was a problem hiding this comment.
The test that failed in the previous version of the solution (with changes in kibana visualization only) were relevant, and that's why, after discussion with the team, I withdrew from this idea. We decided to ask your team for implementing this functionality properly, with some attribute that we could set from outside, and in the meantime figure out a workaround, which is what I did in the latest version of the changes.
Now I can see some other tests failing, but these are different than before, in x-pack/platform/plugins/shared/cases/public, which belongs to different team (response-ops)
There was a problem hiding this comment.
Actually there are many more failures. There is a discussion of how to fix this issue in a different way.
jkelas
force-pushed
the
203523_solution_2
branch
from
3cb7065 to
5ea239a
Compare
maximpn
reviewed
Jan 28, 2025
...ck/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx
Outdated
Show resolved
Hide resolved
nickofthyme
approved these changes
Jan 28, 2025
jkelas
force-pushed
the
203523_solution_2
branch
from
bfb6390 to
f5fcbcd
Compare
ryankeairns
requested review from
ryankeairns
and removed request for
ryankeairns
ryankeairns
approved these changes
Jan 29, 2025
Thank you @ryankeairns |
jkelas
force-pushed
the
203523_solution_2
branch
3 times, most recently
from
8e58646 to
643876c
Compare
Files by Code Ownerelastic/kibana-visualizations
elastic/security-detection-engine
elastic/security-detection-rule-management
elastic/security-solution
|
jkelas
force-pushed
the
203523_solution_2
branch
3 times, most recently
from
37aee16 to
cfbd1f8
Compare
rylnd
approved these changes
Feb 18, 2025
nikitaindik
reviewed
Feb 19, 2025
...ck/solutions/security/plugins/security_solution/public/common/components/query_bar/index.tsx
Outdated
Show resolved
Hide resolved
nikitaindik
approved these changes
Feb 19, 2025
There was a problem hiding this comment.
Thanks for the PR, @jkelas! I've tested it locally and can confirm that newlines are getting added on "enter" and query content isn't cut off anymore. Left a comment about code, but overall this LGTM!
jkelas
force-pushed
the
203523_solution_2
branch
2 times, most recently
from
1a872f2 to
059fc52
Compare
jkelas
force-pushed
the
203523_solution_2
branch
from
059fc52 to
7d62199
Compare
|
Starting backport for target branches: 8.18, 8.x, 9.0 https://github.com/elastic/kibana/actions/runs/13416565954 |
💛 Build succeeded, but was flaky
Failed CI StepsTest Failures
Metrics [docs]Async chunks
History
|
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Feb 19, 2025
**Partially resolves: elastic#203523** ## Summary Fixing the issue of KQL query bar edit component not showing properly long multiline KQL queries. The query now isn't fully visible, and it's not possible to navigate with Up/Down keyboard keys. It's also not possible to scroll down, as the component doesn't allow to insert new line symbols. I am fixing the behavior by: - setting the `bubbleSubmitEvent={true}` so that the key press can propagate to higher components and be served properly. This fixes the problem of not allowing to enter new lines. - I am not touching the broken behavior of Up/Down arrow keys, which intercepts the event and instead of moving the cursor, iterates items in the Suggestions panel, which is counterintuitive. Separate issue will be created for the Kibana Visualization team. - I am modifying one css style in Kibana Visualization to set height to and adding a class to set proper alignment of buttons. # BEFORE - Not possible to insert new lines. - Arrow DOWN takes focus to Suggestions Panel, then together with Arrow UP it is used to iterate the suggestions - When textarea grows it gets hidden below the parent's panel https://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9 # AFTER - Possible to insert new lines - Behavior of DOWN / UP Arrows stays the same - When textarea grows the whole panel resizes https://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2 https://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a (cherry picked from commit 8159319)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Feb 19, 2025
**Partially resolves: elastic#203523** ## Summary Fixing the issue of KQL query bar edit component not showing properly long multiline KQL queries. The query now isn't fully visible, and it's not possible to navigate with Up/Down keyboard keys. It's also not possible to scroll down, as the component doesn't allow to insert new line symbols. I am fixing the behavior by: - setting the `bubbleSubmitEvent={true}` so that the key press can propagate to higher components and be served properly. This fixes the problem of not allowing to enter new lines. - I am not touching the broken behavior of Up/Down arrow keys, which intercepts the event and instead of moving the cursor, iterates items in the Suggestions panel, which is counterintuitive. Separate issue will be created for the Kibana Visualization team. - I am modifying one css style in Kibana Visualization to set height to and adding a class to set proper alignment of buttons. # BEFORE - Not possible to insert new lines. - Arrow DOWN takes focus to Suggestions Panel, then together with Arrow UP it is used to iterate the suggestions - When textarea grows it gets hidden below the parent's panel https://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9 # AFTER - Possible to insert new lines - Behavior of DOWN / UP Arrows stays the same - When textarea grows the whole panel resizes https://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2 https://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a (cherry picked from commit 8159319)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Feb 19, 2025
**Partially resolves: elastic#203523** ## Summary Fixing the issue of KQL query bar edit component not showing properly long multiline KQL queries. The query now isn't fully visible, and it's not possible to navigate with Up/Down keyboard keys. It's also not possible to scroll down, as the component doesn't allow to insert new line symbols. I am fixing the behavior by: - setting the `bubbleSubmitEvent={true}` so that the key press can propagate to higher components and be served properly. This fixes the problem of not allowing to enter new lines. - I am not touching the broken behavior of Up/Down arrow keys, which intercepts the event and instead of moving the cursor, iterates items in the Suggestions panel, which is counterintuitive. Separate issue will be created for the Kibana Visualization team. - I am modifying one css style in Kibana Visualization to set height to and adding a class to set proper alignment of buttons. # BEFORE - Not possible to insert new lines. - Arrow DOWN takes focus to Suggestions Panel, then together with Arrow UP it is used to iterate the suggestions - When textarea grows it gets hidden below the parent's panel https://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9 # AFTER - Possible to insert new lines - Behavior of DOWN / UP Arrows stays the same - When textarea grows the whole panel resizes https://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2 https://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a (cherry picked from commit 8159319)
💚 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
Feb 19, 2025
…1805) # Backport This will backport the following commits from `main` to `9.0`: - [[Security Solution] Fix editing in KQL Query Bar (#208212)](#208212) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Jacek Kolezynski","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-19T15:43:10Z","message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Prebuilt Detection Rules","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Security Solution] Fix editing in KQL Query Bar","number":208212,"url":"https://github.com/elastic/kibana/pull/208212","mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},"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/208212","number":208212,"mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Jacek Kolezynski <[email protected]>
kibanamachine
added a commit
that referenced
this pull request
Feb 19, 2025
…1804) # Backport This will backport the following commits from `main` to `8.x`: - [[Security Solution] Fix editing in KQL Query Bar (#208212)](#208212) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Jacek Kolezynski","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-19T15:43:10Z","message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Prebuilt Detection Rules","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Security Solution] Fix editing in KQL Query Bar","number":208212,"url":"https://github.com/elastic/kibana/pull/208212","mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},"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/208212","number":208212,"mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Jacek Kolezynski <[email protected]>
kibanamachine
added a commit
that referenced
this pull request
Feb 19, 2025
…11803) # Backport This will backport the following commits from `main` to `8.18`: - [[Security Solution] Fix editing in KQL Query Bar (#208212)](#208212) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Jacek Kolezynski","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-19T15:43:10Z","message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","Team:Detections and Resp","Team: SecuritySolution","Team:Detection Rule Management","Feature:Prebuilt Detection Rules","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[Security Solution] Fix editing in KQL Query Bar","number":208212,"url":"https://github.com/elastic/kibana/pull/208212","mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},"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/208212","number":208212,"mergeCommit":{"message":"[Security Solution] Fix editing in KQL Query Bar (#208212)\n\n**Partially resolves: #203523**\n\n## Summary\n\nFixing the issue of KQL query bar edit component not showing properly\nlong multiline KQL queries.\n\nThe query now isn't fully visible, and it's not possible to navigate\nwith Up/Down keyboard keys. It's also not possible to scroll down, as\nthe component doesn't allow to insert new line symbols.\n\nI am fixing the behavior by:\n- setting the `bubbleSubmitEvent={true}` so that the key press can\npropagate to higher components and be served properly. This fixes the\nproblem of not allowing to enter new lines.\n- I am not touching the broken behavior of Up/Down arrow keys, which\nintercepts the event and instead of moving the cursor, iterates items in\nthe Suggestions panel, which is counterintuitive. Separate issue will be\ncreated for the Kibana Visualization team.\n- I am modifying one css style in Kibana Visualization to set height to\nand adding a class to set proper alignment of buttons.\n\n# BEFORE\n- Not possible to insert new lines. \n- Arrow DOWN takes focus to Suggestions Panel, then together with Arrow\nUP it is used to iterate the suggestions\n- When textarea grows it gets hidden below the parent's panel\n\n\nhttps://github.com/user-attachments/assets/d97b81e3-7409-4089-865d-89ee702744f9\n\n# AFTER \n- Possible to insert new lines\n- Behavior of DOWN / UP Arrows stays the same \n- When textarea grows the whole panel resizes\n\n\n\nhttps://github.com/user-attachments/assets/3a59923b-0fb1-49e7-b11d-55474f465ca2\n\n\nhttps://github.com/user-attachments/assets/48efd325-1c66-43ca-9936-69ef37b4ee7a","sha":"8159319d75a3563228378a54492cb27919efea18"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Jacek Kolezynski <[email protected]>
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.
Partially resolves: #203523
Summary
Fixing the issue of KQL query bar edit component not showing properly long multiline KQL queries.
The query now isn't fully visible, and it's not possible to navigate with Up/Down keyboard keys. It's also not possible to scroll down, as the component doesn't allow to insert new line symbols.
I am fixing the behavior by:
bubbleSubmitEvent={true}so that the key press can propagate to higher components and be served properly. This fixes the problem of not allowing to enter new lines.BEFORE
Screen.Recording.2025-01-24.at.15.53.10.mov
AFTER
Screen.Recording.2025-02-11.at.11.53.36.mov
Screen.Recording.2025-02-11.at.11.55.03.mov