List 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 ability to display audit event filters was added to the UI. Now we want to display a simple list of available filter options that it fetches from Create a API for listing the available audit ev... (#412049 - closed).

Proposal

List out the available filter options returned form API.

The name of the audit event type should be the name but then transformed from snack case to sentence case. e.g.: "add_gpg_key" to "Add gpg key"

Design

Note: Implemented with GlCollapsibleListbox instead of the current GlFormCheckboxTree because the listbox combines multiple selection, grouping, and searching in 1 component.

Implementation

• Remove group event filters from audit_events_stream.vue and other components where it's passed to
  • Note: This convenience method takes a set of the eventTypeFilters of all current destinations and stores them in groupEventFilters in audit_events_stream.vue
• get list of available event type filters in from init_audit_events.js from dataset and provide to AuditEventsApp
  • inject event filters in stream_filters.vue and map the response in a way that we have labels which are the sentence case of the snack case name property
  • put the GlFormCheckboxTree in stream_filters.vue in a scrolling container (best effort to half-cut last item #413581 (comment 1418023692))
  • implemented with GlCollapsibleListbox instead of GlFormCheckboxTree
• Update audit_events_stream_spec.js, stream_destination_editor_spec.js, and stream_filters_spec.js accordingly
• Update documentation at https://docs.gitlab.com/ee/administration/audit_event_streaming.html to indicate that filters can be fully managed via UI