[APM] UI filters: Design enhancements

[formgeist]

Blocked by: #72778

Summary

Related design issue #45503

➡️ Marvel prototype

Suggested changes to the current implementation

• Changed from the EuiPopover to using the EuiForm checkbox for the immediate selection of filter values per filter.
• Option to "show more" which adds another 10 values to the values list (if available).
• Show helpful suggestion to use query bar for specific values when values list is expanded
• Option to expand/collapse the filters
• Collapsed filters will show a count badge of selected values
• It's proposed that i.e. the host filter is expanded, while container ID and pods are collapsed. This is a simple measure to save height on the panel itself.

Collapsed filters show selected values count in a badge

Show helpful suggestion to use the query bar for specific values

[elasticmachine]

Pinging @elastic/apm-ui (Team:apm)

[formgeist]

As part of this redesign implementation, we'd also like to explore a way to show/hide the entire filters sidebar in order to provide an option for the users who don't want to see it or want to disable it temporarily. #50143

[sorenlouv]

Not happening in 7.7. Moving to backlog

[sorenlouv]

@formgeist We've received feedback that the transaction type selector (dropdown) is easy to miss because all the transaction types are not immediately visible. If we convert it to a radio button component, and use your new design it would resolve that issue.

[formgeist]

@elastic/apm-ui I've updated the issue description with a new mock of changing the Transaction type selector to a radio button group instead of a link list as previously proposed. Since we've also kicked off a discovery/exploration (#72778) into enhancing the filters experience, but have yet to figure out what that entails, I would propose at the very least, we separate the issue of changing the current transaction type picker from a dropdown list to radio buttons to follow the proposed design above. Thoughts?

->

[formgeist]

I've chosen to separate out the issue of changing the Transaction type selector from a dropdown to a radio button form group (#75427) which is more pressing than the other UI filter improvements at this time. I'll suggest that we move this entire UI improvements issue back in the backlog and wait for the exploration to conclude.