[Lens] [ES|QL] Lens ES|QL flyout "Apply and close" button's UX improvement by awahab07 · Pull Request #247625 · elastic/kibana

awahab07 · 2025-12-30T13:58:47Z

Fixes #243080
Fixes #243770

Summary

To address the UX quirks mentioned the the parent issues, the PR:

Integrates syntax validation in Lens ES|QL editor to disable "Apply and close" button on Lens ES|QL panel configuration flyout when syntax errors are present
Shows contextual tooltip messages explaining why the button is disabled ~~Shows the error help text if updated query hasn't been run, while disabling "Apply and close" button.~~

ES|QL flyout form validation behavior

The "Apply and close" button is now disabled when:

~~ES|QL query has syntax errors (detected client-side)~~ (Now, query needs to be run first in order to let flyout know if there are syntax errors).
ES|QL query has been changed but not yet run
ES|QL query has errors after execution

Video

The following video demonstrates how the fix addresses the issues mentioned in the parent issues:

243770-Lens-ESQL-ApplyNClose-Button-Behavior-1920x1080.mov

Update 01: Help text instead of tooltips.

Update 02: No help text either.

Update 03: Only a single tooltip.

- Add client-side ES|QL syntax error detection using Parser.parseErrors() - Disable 'Apply and close' button when: - ES|QL query has syntax errors - ES|QL query has been changed but not yet run - ES|QL query has runtime errors after execution - Show contextual tooltip messages explaining why button is disabled - Remove isNewPanel bypass so new panels are also validated - Add getESQLQuerySyntaxErrors() utility to kbn-esql-utils package

…ns-Apply-and-clse-button-UX-Improvements

elasticmachine · 2025-12-30T13:58:52Z

Pinging @elastic/kibana-visualizations (Team:Visualizations)

…d behavior via test.

…ns-Apply-and-clse-button-UX-Improvements

stratoula · 2026-01-02T08:43:10Z

I am not sure about this tbh. The query needs to run first. If it doesnt run then the apply and close will save the previous run query.

Checking the query (if it is valid or not) while the user hasn't run it yet and disabling the apply button is a bit confusing with the current UX. I think we need to discuss it first befiore we decide on how to improve the experience here.

CC @markov00 @teresaalvarezsoler @gvnmagni

awahab07 · 2026-01-02T14:21:24Z

Thanks for having a look at this @stratoula. Yes, would be great if we come up with an agreed upon UX.

I am not sure about this tbh. The query needs to run first. If it doesnt run then the apply and close will save the previous run query.

If you mean "apply and close should save the previous run query" This behavior is described as a bug in #243770 (see point 1.)

stratoula · 2026-01-05T07:34:24Z

Thanks for having a look at this @stratoula. Yes, would be great if we come up with an agreed upon UX.

I am not sure about this tbh. The query needs to run first. If it doesnt run then the apply and close will save the previous run query.

If you mean "apply and close should save the previous run query" This behavior is described as a bug in #243770 (see point 1.)

Hey, thanks for replying. No I don't mean that. I just dont get why we check for the query syntax validation when we are already prompting the users to run the query first. If they run it and has syntax errors it will error out and you cover this already

awahab07 · 2026-01-05T11:36:28Z

@stratoula

I just dont get why we check for the query syntax validation when we are already prompting the users to run the query first.

The @kibana/esql-editor checks the syntax errors itself and marks the editor as invalid. But it doesn't expose that information, so we've to mirror that (done in this PR) and check syntax errors in the flyout, to keep flyout form's validation state in-sync with the editor. And a syntactically valid query may still have runtime errors, so running the query is also necessary.

However your comment does highlight that we could simplify the flow. One idea is to just have a help text under the editor instead of tooltips on the "Apply and close" button (while the "Apply and close" button will stay disabled until query is run and is successful).

For example:

Would be great to see what folks think about this.

…ns-Apply-and-clse-button-UX-Improvements

awahab07 · 2026-01-05T15:02:32Z

Update 01: Simplified UX around unrun ES|QL query - only help text under the editor and no tooltips

Apply-and-close-UX-simplification.mov

stratoula · 2026-01-05T15:10:15Z

@awahab07 thanks, yes I want to simplify the logic and ensure that we really improve the UX here.

I don't understand why we need to check for the syntax validation as we already have using the server side validation. Is it really necessary? (the server side contains both the syntax and server side errors). This getESQLQuerySyntaxErrors is it really necessary? In my mind it is not (also we have another api to validate the query)
I am not sure about the design and specifically this new red warning. I think we will need a design help here. cc @gvnmagni

awahab07 · 2026-01-05T15:44:29Z

@stratoula

I don't understand why we need to check for the syntax validation as we already have using the server side validation. Is it really necessary? (the server side contains both the syntax and server side errors). This getESQLQuerySyntaxErrors is it really necessary? In my mind it is not (also we have another api to validate the query)

We may not need it if we can come up with a UX where it's not necessary.

The server side validation does return all sort of errors, but only when query is submitted. Kibana ES|QL editor also validates client side for syntax errors as user types, which the flyout doesn't know about.

Just to explain with the current approach, without validating client side, the flyout would keep hinting "Run the query' although there are syntax errors. Note that, no server call has been issues yet to run the ES|QL query.

With `getESQLQuerySyntaxErrors`	Without `getESQLQuerySyntaxErrors`

If we don't need to show any sort of hint for invalid/pending query to the user, we definitely don't need getESQLQuerySyntaxErrors. Would be looking forward to the design input.

stratoula · 2026-01-06T06:49:00Z

If we don't need to show any sort of hint for invalid/pending query to the user, we definitely don't need getESQLQuerySyntaxErrors. Would be looking forward to the design input.

yeah the editor is already doing this, I dont think we need to duplicate the experience here.

- Disable Apply button when query is pending submission or has errors - Remove isNewPanel bypass so new panels are also validated - Remove getESQLQuerySyntaxErrors (client-side syntax validation) - Remove help text and tooltip from Apply button - Button is simply disabled without additional messaging

awahab07 · 2026-01-06T22:42:14Z

Update 02 : No help text either

Following the feedback, now there's no help text either. Hopefully, the green ▶︎ Run query button would be enough of an indication that the "Apply and close" button is disabled because the ES|QL query hasn't been run. Would be great to have some design input on this though.

Apply-and-close-no-unrun-indication.mov

…hanges

…ns-Apply-and-clse-button-UX-Improvements # Conflicts: # x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx

awahab07 · 2026-01-08T10:49:44Z

I've also noticed a minor quirk (also present on main), that for a saved Discover session with ES|QL viz, changing chart type at first doesn't enable "Apply and close" button.

Apply-and-close-button-disabled-at-first-when-changing-chart.mov

A separate issue should be created if it`s worth fixing.

Update: This has been fixed, see.

teresaalvarezsoler · 2026-01-08T12:26:44Z

Thanks @awahab07, this looks good to me. As a nice to have, when the "Apply and Close" button is disable because the user has to run the query first, can we show a tooltip when hovering the disabled button that says "Run the query before saving"?

teresaalvarezsoler

Works very well! If we can add the tooltip when the button is disabled, that would be great.

awahab07 · 2026-01-08T15:54:06Z

As a nice to have, when the "Apply and Close" button is disable because the user has to run the query first, can we show a tooltip when hovering the disabled button that says "Run the query before saving"?

Yes, this is a good idea. I'll implement that.

…ns-Apply-and-clse-button-UX-Improvements

… is disabled due to pending query.

…d ES|QL Discover Session would not enable "Apply and close" button and apply the changed suggestion even when user clicks "Cancel" button.

awahab07 · 2026-01-13T19:14:19Z

The tooltip on the "Apply and close" button when the button is disabled due to an unrun/pending ES|QL query, has been added back.

Run-ESQL-query-tooltip-when-button-is-disabled.mov

awahab07 · 2026-01-13T19:16:53Z

Note that the issue mentioned in comment above has been fixed in the same PR as it was making an e2e test fail.

The bug:

Treemap-to-Pie-chart-Discover-saved-ESQL-session-before.mov

After the fix:

Treemap-to-Pie-chart-Discover-saved-ESQL-session-after.mov

awahab07 · 2026-01-13T22:44:41Z

@elasticmachine merge upstream

…n-UX-Improvements

stratoula

This looks exactly what I had in mind and is not very complex. I havent checked the code but from the functionality perspective this seems right! Thank you a lot for applying my feedback

jughosta

Data Discovery changes LGTM

markov00

Please just wait for our eng review

awahab07 · 2026-01-20T15:08:02Z

@elasticmachine merge upstream

…n-UX-Improvements

awahab07 · 2026-01-27T09:05:54Z

@elasticmachine merge upstream

…n-UX-Improvements

awahab07 · 2026-01-28T14:14:08Z

@elasticmachine merge upstream

…n-UX-Improvements

markov00

Tested locally, LGTM

…ns-Apply-and-clse-button-UX-Improvements

elasticmachine · 2026-02-04T18:30:30Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 5c0873c

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #35 / "before all" hook in "{root}"
[job] [logs] FTR Configs #123 / "before all" hook in "{root}"

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
`discover`	1.6MB	1.6MB	-146.0B
`lens`	2.0MB	2.0MB	+810.0B
total			+664.0B

History

💔 Build #389769 failed 757e2fa
💔 Build #386311 failed deba360
💚 Build #383823 succeeded 98315ac
💛 Build #381191 was flaky bcdedba
💔 Build #381127 failed c267cb4

awahab07 added 2 commits December 29, 2025 18:03

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

cdfacad

…ns-Apply-and-clse-button-UX-Improvements

awahab07 requested review from a team as code owners December 30, 2025 13:58

awahab07 added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Dec 30, 2025

awahab07 and others added 4 commits December 30, 2025 16:00

Handle thrown errors in getESQLQuerySyntaxErrors. Highlight the varie…

01d6adb

…d behavior via test.

Remove backtick test.

2c1f5d8

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

db451cc

…ns-Apply-and-clse-button-UX-Improvements

Changes from node scripts/notice

de95b04

awahab07 added 2 commits January 5, 2026 14:49

Simplify UX, show help text instead when query hasn't been run.

05393f3

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

d6bf994

…ns-Apply-and-clse-button-UX-Improvements

awahab07 added 2 commits January 6, 2026 18:59

Merge origin/main into current branch.

f1a2c82

awahab07 added 2 commits January 7, 2026 00:00

Restore query_parsing_helpers.test.ts from main to avoid whitespace c…

c6a31db

…hanges

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

b83716c

…ns-Apply-and-clse-button-UX-Improvements # Conflicts: # x-pack/platform/plugins/shared/lens/public/app_plugin/shared/edit_on_the_fly/lens_configuration_flyout.tsx

teresaalvarezsoler approved these changes Jan 8, 2026

View reviewed changes

awahab07 added 3 commits January 13, 2026 17:37

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

bcf5d6b

…ns-Apply-and-clse-button-UX-Improvements

"Run ES|QL query ..." tooltip on 'Apply and close' button when button…

221c925

… is disabled due to pending query.

Fix issue where changing the chart type from Treemap to Pie on a save…

c267cb4

…d ES|QL Discover Session would not enable "Apply and close" button and apply the changed suggestion even when user clicks "Cancel" button.

awahab07 requested a review from a team as a code owner January 13, 2026 19:09

Merge branch 'main' into 243080_243770_ESQL_Lens-Apply-and-clse-butto…

bcdedba

…n-UX-Improvements

stratoula approved these changes Jan 14, 2026

View reviewed changes

jughosta approved these changes Jan 14, 2026

View reviewed changes

markov00 requested changes Jan 14, 2026

View reviewed changes

Merge branch 'main' into 243080_243770_ESQL_Lens-Apply-and-clse-butto…

98315ac

…n-UX-Improvements

Merge branch 'main' into 243080_243770_ESQL_Lens-Apply-and-clse-butto…

deba360

…n-UX-Improvements

Merge branch 'main' into 243080_243770_ESQL_Lens-Apply-and-clse-butto…

e145073

…n-UX-Improvements

markov00 approved these changes Jan 29, 2026

View reviewed changes

awahab07 added 3 commits February 4, 2026 12:02

Merge origin/main into current branch.

85e7d5a

Fix import

757e2fa

Merge remote-tracking branch 'origin/main' into 243080_243770_ESQL_Le…

5c0873c

…ns-Apply-and-clse-button-UX-Improvements

awahab07 enabled auto-merge (squash) February 4, 2026 15:40

awahab07 merged commit f0d9c77 into elastic:main Feb 4, 2026
16 checks passed

kibanamachine added the v9.4.0 label Feb 4, 2026

Conversation

awahab07 commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

ES|QL flyout form validation behavior

Video

Uh oh!

elasticmachine commented Dec 30, 2025

Uh oh!

stratoula commented Jan 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awahab07 commented Jan 2, 2026

Uh oh!

stratoula commented Jan 5, 2026

Uh oh!

awahab07 commented Jan 5, 2026

Uh oh!

awahab07 commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

stratoula commented Jan 5, 2026

Uh oh!

awahab07 commented Jan 5, 2026

Uh oh!

stratoula commented Jan 6, 2026

Uh oh!

awahab07 commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awahab07 commented Jan 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

teresaalvarezsoler commented Jan 8, 2026

Uh oh!

teresaalvarezsoler left a comment

Choose a reason for hiding this comment

Uh oh!

awahab07 commented Jan 8, 2026

Uh oh!

awahab07 commented Jan 13, 2026

Uh oh!

awahab07 commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

awahab07 commented Jan 13, 2026

Uh oh!

stratoula left a comment

Choose a reason for hiding this comment

Uh oh!

jughosta left a comment

Choose a reason for hiding this comment

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

awahab07 commented Jan 20, 2026

Uh oh!

awahab07 commented Jan 27, 2026

Uh oh!

awahab07 commented Jan 28, 2026

Uh oh!

markov00 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Feb 4, 2026

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

awahab07 commented Dec 30, 2025 •

edited

Loading

stratoula commented Jan 2, 2026 •

edited

Loading

awahab07 commented Jan 5, 2026 •

edited

Loading

awahab07 commented Jan 6, 2026 •

edited

Loading

awahab07 commented Jan 8, 2026 •

edited

Loading

awahab07 commented Jan 13, 2026 •

edited

Loading