Migrate GlDropdown to GlListbox in severity filter

What does this MR do and why?

Uses GlListbox instead of GlDropdown within the severity filter UI component, which is used on security reports pages.

Screenshots or screen recordings

Screenshots

before	after

Recordings

before	after
Screen Recording 2023-05-12 at 9.15.43 am.mov	Screen Recording 2023-05-12 at 9.16.18 am.mov

How to set up and validate locally

TODO

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.

Related to #409701 (closed)

ee/app/assets/javascripts/security_dashboard/components/shared/filters/severity_filter.vue

@@ -22,6 +22,7 @@ export const FILTER_ITEMS = [
   ...SEVERITY_LEVEL_ITEMS,
 ];
 
+//
 const VALID_IDS = SEVERITY_LEVEL_ITEMS.map(({ id }) => id);
 
 export default {
@@ -31,39 +32,31 @@ export default {
   }),
   computed: {
     toggleText() {
-      return getSelectedOptionsText(this.listboxItems[0].options, this.selectedIds);
-    },
-    listboxItems() {
-      const optionsGroup = {
-        text: this.$options.i18n.label,
-        options: FILTER_ITEMS,
-      };
-      return [optionsGroup];
+      return getSelectedOptionsText(FILTER_ITEMS, this.selectedIds);
     },
   },
   watch: {
     selectedIds: {
-      handler(selection = [], prevSelection = []) {
-        const lastSelectedId = selection.at(-1);
-        const prevLastSelectedId = prevSelection.at(-1);
-
-        if (!prevSelection.length || lastSelectedId === prevLastSelectedId) {
-          return;
-        }
-
-        const shouldSelectAll = lastSelectedId === ALL_ID || selection.length === 0;
-        this.selectedIds = shouldSelectAll
-          ? [ALL_ID]
-          : selection.filter((id) => VALID_IDS.includes(id));
-
-        this.$emit('filter-changed', { severity: shouldSelectAll ? [] : this.selectedIds });
+      handler() {
+        this.$emit('filter-changed', {
+          severity: this.selectedIds.filter((value) => value !== ALL_ID),
+        });
       },
     },
   },
+  methods: {
+    updateSelected(selected) {
+      if (!selected.length || selected.at(-1) === ALL_ID) {
+        this.selectedIds = [ALL_ID];
+      } else {
+        this.selectedIds = selected.filter((value) => value !== ALL_ID);
+      }
+    },
+  },
   i18n: {
     label: s__('SecurityReports|Severity'),
-    allItemsText: s__('SecurityReports|All severities'),
   },
+  FILTER_ITEMS,
   VALID_IDS,
 };
 </script>
@@ -71,22 +64,21 @@ export default {
 <template>
   <div>
     <querystring-sync
-      v-model="selectedIds"
+      :value="selectedIds"
       querystring-key="severity"
       :valid-values="$options.VALID_IDS"
+      @input="updateSelected"
     />
     <label class="gl-mb-2">{{ $options.i18n.label }}</label>
     <gl-collapsible-listbox
-      v-model="selectedIds"
-      :items="listboxItems"
+      :header-text="$options.i18n.label"
+      :items="$options.FILTER_ITEMS"
+      :selected="selectedIds"
       :toggle-text="toggleText"
       multiple
       block
       toggle-class="gl-mb-0"
-    >
-      <template #list-item="{ item }">
-        <span :data-testid="item.id">{{ item.text }}</span>
-      </template>
-    </gl-collapsible-listbox>
+      @select="updateSelected"
+    />
   </div>
 </template>