Search for streamed audit event filter options in the UI to allow for easy filtering
Problem to solve
In Screen to allow management of streamed audit ev... (#344846 - closed) the frontend is being added to display a simple list of available filter options that it fetches from API to allow streamed audit events to be filter... (#344845 - closed). 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
- In stream_filters.vue, add new data property
searchTerm
and set this based on thesearch
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
Edited by Lorenz van Herwaarden