[EuiFilterGroup] Add Search, Loading, and No Results Functionality to EuiFilterGroup - MultiSelect Example in Docs

[breehall]

Summary

Fixes #4165

Updated the EuiFilterGroup - MultiSelect example within the EUI docs to utilize the EuiSelectable component as it has built in features for search and no results.

Implemented the logic to show a loading component while list items are loading, the ability to search list items, and logic to display a "no results" component when the search yields no list items to the EuiFilterGroup - MulitSelect example within the EUI docs.

Below is a short demo of the features added.

EuiFilterGroup MultiSelect Example Demo

Checklist

• [ ] Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs and playground toggles
• [ ] Added documentation
• Checked Code Sandbox works for any docs examples
• [ ] Added or updated jest and cypress tests
• Checked for breaking changes and labeled appropriately
• Checked for accessibility including keyboard-only and screenreader modes
• [ ] A changelog entry exists and is marked appropriately

[thompsongl]

Hey @breehall looks like we worked two issues that should've been merged 🙈

In #5387 I resolved #3735, which has the side effect of adding search, selection, and empty result functionality.

We definitely need to move this example to use EuiSelectable, so it looks like the only additional functionality in your PR is loading state.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5460/

[elizabetdev]

Hi Bree! 👋🏽

I started looking into this PR and noticed that @thompsongl already moved one of the examples to use EuiSelectable in #5387. But from a design perspective, there are a few things that we can improve once that PR is merged.

We've been using the EuiLoadingChart for loading filters. But in our docs we're saying that we should use this loading component to indicate that a visualization is loading: https://elastic.github.io/eui/#/display/loading#chart.

So a better loading indicator would be just the text "Loading filters" or we can use the EuiLoadingContent:

For the "No filters found" IMO the icon doesn't represent anything. So just the text would be enough.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_5460/

[breehall]

Closing this for now until #5387 is merged and completed