[Controls] Wildcard Search for Options List #157157
Assignees
Labels
Feature:Input Control
Input controls visualization
impact:high
Addressing this issue will have a high level of impact on the quality/strength of our product.
loe:large
Large Level of Effort
regression
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
Comments
ThomThomson
added
regression
Feature:Input Control
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
ThomThomson
changed the title
Heenawter
changed the title
7 tasks
Heenawter
added a commit
that referenced
this issue
Jun 6, 2023
Closes #157157 Closes #152921 ## Summary The primary goal of this PR is to introduce an option for wildcard ("contains") searching to the options list control: https://github.com/elastic/kibana/assets/8698078/6847d0c5-014a-4322-8e59-308bc3ca27aa ### New Flyout Design However, since this required adding a radio group to the custom options list settings in the create/edit control flyout, I also made some changes to the flyout design in order to better accommodate this (we were previously using `EuiSwitch` components for the control-type-specific settings, which did not work in this case because I wanted to be able to add a tooltip to describe each search type): | Before | After | |--------|-------| |  |  | Note in the above GIFs that, since I was using an `EuiRadioGroup` for the search technique setting, I decided it made more sense + was more consistent for the "Allow multiple selections in dropdown" to also be converted to a radio group rather than a switch. The "Ignore timeout for results" setting is the only one that remained a switch in the new design: | Before | After | |--------|-------| |  |  | ### `EuiSwitch` with Tooltip Bug As part of this redesign, I also fixed a very quick bug where, because the old `SwitchWithTooltip` was defined **inside** the larger `OptionsListEditorOptions` component, any state update on `OptionsListEditorOptions` would cause `SwitchWithTooltip` to **also** be re-rendered - this caused the "slide" animation to be interrupted on click: | Before | After | |--------|-------| |  |  | ### Title Bug Fix And, since I was making so many changes to the flyout code as part of refactoring the code (including the design changes above), I also fixed a bug with control titles where things weren't getting set properly. To test this, consider taking the following steps: 1. Create a new options list control, keeping the default title 2. Edit that options list control and change it to a range slider control by selecting a number field 3. Notice that... - Before this PR, the title gets completely cleared: <br> - After this PR, the default title gets updated to the range slider field name: <br> 4. Delete that range slider control and create a new control, keeping the default title once again (options list or range slider, the type doesn't matter). 5. Edit the control and change the field to a different field **of the same type** (i.e. if your control from step 4 was an options list control, select a field that keeps it as an options list control). Before saving your changes, notice that the "default title" in the `Label` input gets updated to the new field title:<br> <img width="450" src="https://github.com/elastic/kibana/assets/8698078/0fabe2e3-7f83-4f2a-87e6-33253652972d"/><br> 6. After saving, notice that... - Before this PR, the title doesn't actually get updated to the new default title: <br> - After this PR, the title gets updated as expected: <br> ### Flaky Test Runner [test/functional/apps/dashboard_elements/controls/options_list/options_list_suggestions.ts](https://buildkite.com/elastic/kibana-flaky-test-suite-runner/builds/2343): <img src="https://github.com/elastic/kibana/assets/8698078/f2ed9d65-adcf-47af-bb00-ee11837c406b"/> ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Problem
The Legacy Input Controls used a terms include query with a wildcard. This allowed the legacy controls to search for terms using any part of the string. Instead, the new controls use a prefix query.
This blocks us from fully deprecating the legacy input controls, because we cannot remove this functionality.
How to reproduce
metricbeatinmessage.keywordin the example below, and see that no options are available.metricbeatinmessage.keywordin the example below, and see that options are available.Potential Solutions
To fix this, we will likely need to introduce a switch into the options list config called
wildcard searchor something similar. With the wildcard settingon, we could either:The text was updated successfully, but these errors were encountered: