### Problem to solve In https://gitlab.com/gitlab-org/gitlab/-/issues/344846+ the ~frontend is being added to display a simple list of available filter options that it fetches from https://gitlab.com/gitlab-org/gitlab/-/issues/344845+. This list could be difficult to parse due to the length and similar names. ### Proposal It would be a nice quality of life improvement if the user could search for the filter they want to apply. - The search would limit which options render based on if they match the input. ### Design **Note: Implement with GlCollapsibleListbox instead of the current GlFormCheckboxTree because the listbox combines multiple selection, grouping, and searching in 1 component.** | Full page example | changes in this issue | | ------ | ------ | |  |  | ### Implementation [GlCollapsibleListbox search documentation](https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-new-dropdowns-listbox--docs#search) * In stream_filters.vue, add new data property `searchTerm` and set this based on the `search` event of the GlCollapsibleListbox * set `searchable` property on the GlCollapsibleListbox * Filter items passed to GlCollapsibleListbox based on this `searchTerm` * Update spec with tests for search ### Verification steps * Go to https://gitlab.com/groups/issue-reproduce/-/audit_events?tab=streams * Expand the stream destination * Select "Stream by filter event" * Select "Select events" dropdown * Verify that if no search term is provided, all audit event types are listed * Verify that searching for audit event type properly filters the list * Verify that the filtering is case-insensitive, by e.g. searching for `"GPG"`. It should still show "Add gpg key" and "Remove gpg key" events