Show list of stream audit event types in UI

What does this MR do and why?

Relates to #413581 (closed)

This MR displays available audit event types coming from backend (HAML injected) in a GlCollapsibleListbox in the event filtering section of a streaming destination.

Before, each event type had to be created via the API and could only be unchecked via the UI later.

Some notes:

• The list of events is quite long, in next iterations, the listbox will handle grouping by category and searching.
• The event types don't have any label supplied, so it was decided that we would use sentence case; "add_gpg_key" becomes "Add gpg key"

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

audit-events-filter-listbox

How to set up and validate locally

Make sure you have an EE license

1. Go to any group
2. Go to "Secure" > "Audit events"
3. Click "Streams" tab
4. Create a new streaming destination by clicking "Add streaming destination"
5. Provide a "Destination URL"
6. Validate you see the "Filter by stream event" accordion and click it
7. Validate you see a dropdown with a placeholder "Select events", click it
8. Validate you can see a long list of event types and these are selectable
9. Validate that if you select some it updates the text of the dropdown button with a comma-separated list of the event type names
10. Validate that clicking "Unselect all", actually unselects all event types
11. Validate that clicking "Select all" selects all event types (button is only shown if no event types are selected)
12. Select some event types and click "Add"
13. Validate that the editor is closed and a new streaming destination is added
14. Validate that if you edit that new destination and go to event type dropdown the same events are selected from before.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

ee/spec/frontend/audit_events/components/stream/stream_filters_spec.js

-import { GlFormCheckboxTree } from '@gitlab/ui';
+import { GlCollapsibleListbox } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import StreamFilters from 'ee/audit_events/components/stream/stream_filters.vue';
 import { AUDIT_STREAMS_FILTERING } from 'ee/audit_events/constants';
-import { mockExternalDestinations, mockFiltersOptions } from '../../mock_data';
+import {
+  mockExternalDestinations,
+  mockAuditEventDefinitions,
+  mockStreamFiltersOptions,
+} from '../../mock_data';
 
 describe('StreamWithFilters', () => {
   let wrapper;
 
-  const createComponent = () => {
+  const createComponent = (props) => {
     wrapper = shallowMount(StreamFilters, {
       propsData: {
-        filterOptions: mockFiltersOptions,
-        filterSelected: mockExternalDestinations[1].eventTypeFilters,
+        value: mockExternalDestinations[1].eventTypeFilters,
+        ...props,
+      },
+      provide: {
+        auditEventDefinitions: mockAuditEventDefinitions,
       },
     });
   };
 
-  const findFilterCheckboxTree = () => wrapper.findComponent(GlFormCheckboxTree);
+  const findCollapsibleListbox = () => wrapper.findComponent(GlCollapsibleListbox);
 
   beforeEach(() => {
     createComponent();
   });
 
-  it('should render correctly', () => {
-    const options = mockFiltersOptions.map((value) => ({ value }));
-    expect(findFilterCheckboxTree().props()).toStrictEqual({
-      hideToggleAll: false,
-      label: 'Checkbox tree',
-      options,
-      labelSrOnly: true,
-      value: mockExternalDestinations[1].eventTypeFilters,
-      selectAllLabel: AUDIT_STREAMS_FILTERING.SELECT_ALL,
-      unselectAllLabel: AUDIT_STREAMS_FILTERING.UNSELECT_ALL,
+  it('renders correctly', () => {
+    expect(findCollapsibleListbox().props()).toMatchObject({
+      items: mockStreamFiltersOptions,
+      selected: mockExternalDestinations[1].eventTypeFilters,
+      showSelectAllButtonLabel: AUDIT_STREAMS_FILTERING.SELECT_ALL,
+      resetButtonLabel: AUDIT_STREAMS_FILTERING.UNSELECT_ALL,
+      headerText: AUDIT_STREAMS_FILTERING.SELECT_EVENTS,
+      multiple: true,
+      toggleClass: 'gl-max-w-full',
+    });
+    expect(findCollapsibleListbox().classes('gl-max-w-full')).toBe(true);
+  });
+
+  describe('toggleText', () => {
+    it('is a placeholder when no events are selected', () => {
+      createComponent({ value: [] });
+
+      expect(findCollapsibleListbox().props('toggleText')).toBe(
+        AUDIT_STREAMS_FILTERING.SELECT_EVENTS,
+      );
+    });
+
+    it('is humanized event when 1 event is selected', () => {
+      createComponent({ value: ['repository_download_operation'] });
+
+      expect(findCollapsibleListbox().props('toggleText')).toBe('Repository download operation');
+    });
+
+    it('is comma-separated list of humanized events when multiple events are selected', () => {
+      createComponent({ value: ['repository_download_operation', 'update_merge_approval_rule'] });
+
+      expect(findCollapsibleListbox().props('toggleText')).toBe(
+        'Repository download operation, Update merge approval rule',
+      );
     });
   });
 
-  it('should emit `updateFilters` event', () => {
-    findFilterCheckboxTree().vm.$emit('change', mockExternalDestinations[1].eventTypeFilters);
+  describe('events', () => {
+    it('emits `input` event when selecting event', () => {
+      findCollapsibleListbox().vm.$emit('select', mockExternalDestinations[1].eventTypeFilters);
+
+      expect(wrapper.emitted('input')).toStrictEqual([
+        [mockExternalDestinations[1].eventTypeFilters],
+      ]);
+    });
+
+    it('emits `input` with empty array when unselecting all', () => {
+      findCollapsibleListbox().vm.$emit('reset');
 
-    expect(wrapper.emitted('updateFilters')).toStrictEqual([
-      [mockExternalDestinations[1].eventTypeFilters],
-    ]);
+      expect(wrapper.emitted('input')).toEqual([[[]]]);
+    });
+
+    it('emits `input` with all events when selecting all', () => {
+      findCollapsibleListbox().vm.$emit('select-all');
+
+      expect(wrapper.emitted('input')).toEqual([[Object.keys(mockAuditEventDefinitions)]]);
+    });
   });
 });