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.

app/assets/javascripts/lib/utils/listbox_helpers.js

 import { n__ } from '~/locale';
 
 /**
- * Accepts an array of options and an array of selected option IDs.
+ * Accepts an array of options and an array of selected option IDs
+ * and optionally a placeholder and maximum number of options to show.
  *
  * Returns a string with the text of the selected options:
- * - If no options are selected, returns an empty string.
- * - If one option is selected, returns the text of that option.
- * - If more than one option is selected, returns the text of the first option
+ * - If no options are selected, returns the placeholder or an empty string.
+ * - If less than maxOptionsShown is selected, returns the text of those options comma-separated.
+ * - If more than maxOptionsShown is selected, returns the text of those options comma-separated
  *   followed by the text "+X more", where X is the number of additional selected options
  *
- * @param {Array<{ id: number | string, value: string }>} options
- * @param {Array<{ id: number | string }>} selected
+ * @param {Object} opts
+ * @param {Array<{ id: number | string, value: string }>} opts.options
+ * @param {Array<{ id: number | string }>} opts.selected
+ * @param {String} opts.placeholder - Placeholder when no option is selected
+ * @param {Integer} opts.maxOptionsShown – Max number of options to show
  * @returns {String}
  */
-export const getSelectedOptionsText = (options, selected, placeholder = '') => {
+export const getSelectedOptionsText = ({
+  options,
+  selected,
+  placeholder = '',
+  maxOptionsShown = 1,
+}) => {
   const selectedOptions = options.filter(({ id, value }) => selected.includes(id || value));
 
   if (selectedOptions.length === 0) {
     return placeholder;
   }
 
-  const [firstSelectedOption] = selectedOptions;
-  const { text: firstSelectedOptionText } = firstSelectedOption;
+  const optionTexts = selectedOptions.map((option) => option.text);
 
-  if (selectedOptions.length < 2) {
-    return firstSelectedOptionText;
+  if (selectedOptions.length <= maxOptionsShown) {
+    return optionTexts.join(', ');
   }
 
   // Prevent showing "+-1 more" when the array is empty.
-  const additionalItemsCount = selectedOptions.length - 1;
-  return `${firstSelectedOptionText} ${n__('+%d more', '+%d more', additionalItemsCount)}`;
+  const additionalItemsCount = selectedOptions.length - maxOptionsShown;
+  return `${optionTexts.slice(0, maxOptionsShown).join(', ')} ${n__(
+    '+%d more',
+    '+%d more',
+    additionalItemsCount,
+  )}`;
 };