[Controls] Allow wildcard searching in options list

[Heenawter]

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:

Screen.Recording.2023-05-29.at.8.41.46.AM.mov

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:
     
     
   • After this PR, the default title gets updated to the range slider field name:
     
     
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:
   
   
   
6. After saving, notice that...
   • Before this PR, the title doesn't actually get updated to the new default title:
     
     
   • After this PR, the title gets updated as expected:
     
     

Flaky Test Runner

test/functional/apps/dashboard_elements/controls/options_list/options_list_suggestions.ts:

Checklist

• Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
• Unit or functional tests were updated or added to match the most common scenarios
• Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
• Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
• This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)
• This was checked for cross-browser compatibility

For maintainers

• This was checked for breaking API changes and was labeled appropriately

[jsanz]

Very nice additions and fixes @Heenawter 👏, the new flyout makes much more sense, I love it.

One question: would it make sense to somehow indicate in the main interface which search option is enabled? I'm thinking in final users that likely can't access the editing UI. Not a strong opinion either way because the behaviour is quite self-explanatory anyways. What do you think?

[florent-leborgne]

Hi! Copy LGTM, I left a few very minor copy suggestions on behalf of @elastic/ux-writers.
I've been wondering one thing though: since it's possible to choose between "starts with" and "contains", would it make sense to show which mode is enabled on the search field itself?

[florent-leborgne]

Hi! Copy LGTM, I left a few very minor copy suggestions on behalf of @elastic/ux-writers.

[Heenawter]

@florent-leborgne I've been wondering one thing though: since it's possible to choose between "starts with" and "contains", would it make sense to show which mode is enabled on the search field itself?

@jsanz would it make sense to somehow indicate in the main interface which search option is enabled? I'm thinking in final users that likely can't access the editing UI.

These are very, very good points. @andreadelrio, any idea how we might indicate which search method is being used in the UI? I looked at potentially using an icon, but I couldn't find any that feel like a good fit...

Changing the placeholder for the search box seems like a good route, but I'm not really sure what would make the most sense for that - would "Search for a value by prefix" and "Search for a value by substring" be clear to a less technical end user? Or could it maybe be changed to something as simple as "Starts with" versus "Contains" - would that be clear enough that it is performing a search with these different techniques? @florent-leborgne Your input would probably be helpful here 🤔

[florent-leborgne]

@Heenawter, the placeholder for the search box sounds good to me.

After years of using Jira at different companies, I got used to the way they do it

So what you suggested sounds kind of natural to me: "Starts with" and "Contains". Not a fan of ellipsis in search fields but this is one case where it wouldn't bug me too much as those sound like starting a sentence "Starts with..." - "Contains..." No strong opinion here.

[Heenawter]

@florent-leborgne Yes, I think I like changing the placeholder to "Starts with..." or"Contains..." depending on the search technique - it feels pretty natural to me :)

Screen.Recording.2023-06-02.at.9.57.06.AM.mov

@andreadelrio @jsanz @ThomThomson Thoughts on this?

[ThomThomson]

Oh yes the Starts with and Contains idea looks great, and is a great way to communicate the search strategy! Excellent suggestion @jsanz and good idea for the placement @Heenawter @florent-leborgne!

[andreadelrio]

@florent-leborgne Yes, I think I like changing the placeholder to "Starts with..." or"Contains..." depending on the search technique - it feels pretty natural to me :)

Screen.Recording.2023-06-02.at.9.57.06.AM.mov
@andreadelrio @jsanz @ThomThomson Thoughts on this?

I think this works great! and it's an existing pattern in other apps.

[jsanz]

@andreadelrio @jsanz @ThomThomson Thoughts on this?

Very neat, compact, and totally "out of the way", nice!! 💯

[ThomThomson]

This is looking very clean. In addition to fixing the title bug, you've also fixed the issue where canceling out of the control form would give you a warning even if you had no changes. Nice!

Excellent functional and jest test additions. Tested this locally (thanks for fixing the expand width bug so quickly) and by looking through the code and everything LGTM! Left a couple small nits.

[kibana-ci]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 1da2197

Failed CI Steps

• FTR Configs #36

Test Failures

• [job] [logs] FTR Configs #36 / discover discover field visualize button should visualize correctly text based language queries in Lens

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
controls	297	299	+2

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
controls	188.9KB	190.9KB	+2.0KB

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
controls	14	15	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
controls	33.0KB	36.8KB	+3.8KB

Unknown metric groups

API count

id	before	after	diff
controls	304	306	+2

ESLint disabled line counts

id	before	after	diff
enterpriseSearch	19	21	+2
securitySolution	414	418	+4
total			+6

Total ESLint disabled count

id	before	after	diff
enterpriseSearch	20	22	+2
securitySolution	498	502	+4
total			+6

History

• 💚 Build #132667 succeeded 7f0aeab
• 💛 Build #132577 was flaky 1a6cde8
• 💚 Build #132257 succeeded cf5b2e0
• 💔 Build #132251 failed 6e3247f
• 💔 Build #132180 failed 79297e7
• 💛 Build #131936 was flaky c692463

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream