Add visual indication of selected language in query bar #30899
Conversation
Bargs
added
Feature:Query Bar
|
Pinging @elastic/kibana-app |
💔 Build Failed |
|
@lukasolson good point, I made the padding a little smaller |
|
@Bargs I think we can remove that container around the language selector and add it directly as an append={<QueryLanguageSwitcher
language={this.state.query.language}
onSelectLanguage={this.onSelectLanguage}
/>}This way, the actual input will always size correctly depending on the size of the language switcher button.
|
There was a problem hiding this comment.
Functionality looks good, and I think having the active syntax showing is fine. Only thing I'd touch up along with this is the text, otherwise "KQL" without context doesn't have meaning. These features are also no longer new, so it should just state what the toggle does. @gchaps can you provide text for this popover to Matt please. I'd suggest something like:
Use the Kibana Query Language (KQL) syntax to enable autocomplete suggestions. If disabled, Kibana will use Lucene syntax without suggestions.
SWITCH Turn on autocomplete
Otherwise tested and approved once the text is changed.
💔 Build Failed |
|
Here's a recommendation for the text: Use the Kibana query language (KQL) to get suggestions as you type. If you disable KQL, Kibana uses Lucene, which doesn't offer suggestions. |
💔 Build Failed |
💔 Build Failed |
|
Opened PR to add the append attribute to EuiFieldText's TS definition elastic/eui#1567 |
|
I have a few suggestions:
|
|
@gchaps made those updates, but I realized one other change we'll need to make. Autocomplete only works with a basic license and above. OSS users still get the other benefits of KQL (scripted field support, simplified syntax) but they don't get autocomplete, so the the current message will probably be quite confusing to OSS users. How do you think we could resolve that?
|
💔 Build Failed |
|
@Bargs Here is a suggestion: The Kibana query language (KQL) offers a simplified query syntax and support for scripted fields. KQL also provides autocomplete if you have a Basic license or above. If you turn off KQL, Kibana uses Lucene. (Hopefully that's not too long.) Also, I noticed that the toggles on the Advanced settings page are set up like this and was wondering if we might do the same here. Its a little more clear about what's being turned on and off:
So in this case: Kibana query language |
Bargs
force-pushed
the
languageIndicator
branch
from
fa77e01
to
d11f779
Compare
|
@gchaps let me know what you think
|
💔 Build Failed |
|
The text looks good to me. I think its easier to understand what the toggle does when it says On & Off, but I'll defer to @snide's comment. |
|
Ok so just so I'm sure I understand, @snide you want me to change it back to this?
|
|
I was good with what you had. Mergable. |
the padding manually
This reverts commit 8042b09
Bargs
force-pushed
the
languageIndicator
branch
from
d11f779
to
e715d2a
Compare
💔 Build Failed |
💔 Build Failed |
Bargs
force-pushed
the
languageIndicator
branch
from
04302cb
to
1f8b920
Compare
💚 Build Succeeded |
💚 Build Succeeded |
* Add visual indication of selected language to the query bar * update test snapshots * Reduce padding a little to fit smaller text * Pass options button to input's append prop so we don't have to manage the padding manually * Revert "Reduce padding a little to fit smaller text" This reverts commit 8042b09 * Update popover text * delete options button translation key * Update tests * Review feedback * Review feedback * remove unused vars * remove unused translation
* Add visual indication of selected language to the query bar * update test snapshots * Reduce padding a little to fit smaller text * Pass options button to input's append prop so we don't have to manage the padding manually * Revert "Reduce padding a little to fit smaller text" This reverts commit 8042b09 * Update popover text * delete options button translation key * Update tests * Review feedback * Review feedback * remove unused vars * remove unused translation
) * Add visual indication of selected language to the query bar * update test snapshots * Reduce padding a little to fit smaller text * Pass options button to input's append prop so we don't have to manage the padding manually * Revert "Reduce padding a little to fit smaller text" This reverts commit 8042b09 * Update popover text * delete options button translation key * Update tests * Review feedback * Review feedback * remove unused vars * remove unused translation
* Add visual indication of selected language to the query bar * update test snapshots * Reduce padding a little to fit smaller text * Pass options button to input's append prop so we don't have to manage the padding manually * Revert "Reduce padding a little to fit smaller text" This reverts commit 8042b09 * Update popover text * delete options button translation key * Update tests * Review feedback * Review feedback * remove unused vars * remove unused translation
) * Add visual indication of selected language to the query bar * update test snapshots * Reduce padding a little to fit smaller text * Pass options button to input's append prop so we don't have to manage the padding manually * Revert "Reduce padding a little to fit smaller text" This reverts commit 8042b09 * Update popover text * delete options button translation key * Update tests * Review feedback * Review feedback * remove unused vars * remove unused translation
Summary
Fixes #30277
Checklist
Use
strikethroughsto remove checklist items you don't feel are applicable to this PR.- [ ] This was checked for cross-browser compatibility, including a check against IE11- [ ] Documentation was added for features that require explanation or tutorials- [ ] This was checked for keyboard-only and screenreader accessibilityFor maintainers
- [ ] This was checked for breaking API changes and was labeled appropriately- [ ] This includes a feature addition or change that requires a release note and was labeled appropriately