[Controls] Options List Redux & Selection Management

[ThomThomson]

fixes #113489

Summary

This PR is a follow-up to #114371 which adds redux toolkit integration to the Options list control.

Additionally, this PR provides a couple user-facing changes

Options List "show selections only" mode

Options List clear all button

Removed Jumpy Loading
On each keystroke, when the typeahead would trigger, the loading indicator would show instead of the available options.
The loading indicator now shows over top of the available options, keeping the same size. This should reduce jumpiness when typing.

Confirm on delete Control

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[ThomThomson]

@elasticmachine merge upstream

[poffdeluxe]

Not necessarily a thing to change but when do we wanna switch from IndexPattern stuff to DataView stuff? Is it just a 1-1 conversion?

[ThomThomson]

I've switched over to the DataView format during the dashboard integration PR. #115477 is temporarily open to check for CI failures, you can take a look at the diff there!

[poffdeluxe]

Code LGTM and works great!

[andreadelrio]

Looking good, just a couple of prop additions to some of the flex groups so that they behave better on smaller screens. End result:

[andreadelrio]

You'll also need to add responsive={false} to the flex group inside EuiFlyoutFooters.

[ThomThomson]

Added the flex group changes, good call, It looks a lot better in small sizes now!

[andreadelrio]

@ryankeairns I tested how a subdued panel would look like for the empty state, like we discussed. The subdued color is actually the same background color as Kibana so there's no contrast which isn't something bad per se. What do you think?

[andreadelrio]

Approving now as we will have a follow-up PR to continue refining the design side of this.

[ThomThomson]

@andreadelrio @ryankeairns, I do like the design of the panel without a background color. In the dashboard implementation PR, I was also experimenting with removing the background by setting its color to transparent, and removing the drop shadow - as I think it adds a bit too much noise, and each individual control already has a panel. Additionally, without the background, I found that controls can line up much better with the dashboard panels without a panel wrapping them all.

The problem that @andreadelrio found with this approach is that when dragging a control, not having a background could make it look like the controls can be dragged anywhere, when the drop zone is only the top. I am not sure how we can solve this, but I think if we go the route of removing the background in some cases, it should be removed in all cases.

[ThomThomson]

@elasticmachine merge upstream

[ryankeairns]

LGTM. I like the background-color-while-dragging design that Andrea shared during the sync. Also, +1 to more polish after merging / viewing in the full context of Kibana.

[kibanamachine]

💚 Build Succeeded

• continuous-integration/kibana-ci/pull-request
• Commit: 9500653
• Storybooks Preview
• Documentation Changes

Metrics [docs]

Unknown metric groups

References to deprecated APIs

id	before	after	diff
presentationUtil	4	74	+70

History

• 💔 Build #163336 failed 3ed97a1
• 💔 Build #163074 failed 6bb1629
• 💔 Build #163071 failed bb710b5
• 💚 Build #162873 succeeded cb2cb9a
• 💔 Build #162772 failed f6602c6

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