Add simple dropdown component and change severity filter to use it

What does this MR do and why?

This MR adds simple_dropdown.vue and updates severity_filter.vue to use it. There are a bunch of vulnerability report filters that repeat the same boilerplate code, and simple_dropdown.vue refactors them into a reusable component.

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 #383346 (closed)

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

 <script>
-import { GlDropdown } from '@gitlab/ui';
-import { xor } from 'lodash';
 import { s__ } from '~/locale';
 import { SEVERITY_LEVELS } from 'ee/security_dashboard/store/constants';
-import DropdownButtonText from './dropdown_button_text.vue';
-import QuerystringSync from './querystring_sync.vue';
-import FilterItem from './filter_item.vue';
+import SimpleDropdown from './simple_dropdown.vue';
 import { ALL_ID } from './constants';
 
 // For backwards compatibility with existing bookmarks, the ID needs to be capitalized.
-export const DROPDOWN_OPTIONS = Object.entries(SEVERITY_LEVELS).map(([id, text]) => ({
+const SEVERITY_OPTIONS = Object.entries(SEVERITY_LEVELS).map(([id, text]) => ({
   id: id.toUpperCase(),
   text,
 }));
-const VALID_IDS = DROPDOWN_OPTIONS.map(({ id }) => id);
+
+const DROPDOWN_OPTIONS = [
+  { id: ALL_ID, text: s__('SecurityReports|All severities') },
+  ...SEVERITY_OPTIONS,
+];
 
 export default {
-  components: { GlDropdown, DropdownButtonText, QuerystringSync, FilterItem },
+  components: { SimpleDropdown },
   data: () => ({
     selected: [],
   }),
-  computed: {
-    selectedItemTexts() {
-      const options = DROPDOWN_OPTIONS.filter(({ id }) => this.selected.includes(id));
-      // Return the text for selected items, or all items if nothing is selected.
-      return options.length ? options.map(({ text }) => text) : [this.$options.i18n.allItemsText];
-    },
-  },
   watch: {
     selected() {
       this.$emit('filter-changed', { severity: this.selected });
     },
   },
-  methods: {
-    deselectAll() {
-      this.selected = [];
-    },
-    toggleSelected(id) {
-      this.selected = xor(this.selected, [id]);
-    },
-    setSelected(ids) {
-      this.selected = ids.filter((id) => VALID_IDS.includes(id));
-    },
-  },
   i18n: {
     label: s__('SecurityReports|Severity'),
-    allItemsText: s__('SecurityReports|All severities'),
   },
   DROPDOWN_OPTIONS,
-  ALL_ID,
 };
 </script>
 
 <template>
-  <div>
-    <querystring-sync querystring-key="severity" :value="selected" @input="setSelected" />
-    <label class="gl-mb-2">{{ $options.i18n.label }}</label>
-    <gl-dropdown :header-text="$options.i18n.label" block toggle-class="gl-mb-0">
-      <template #button-text>
-        <dropdown-button-text
-          :items="selectedItemTexts"
-          data-qa-selector="filter_severity_dropdown"
-        />
-      </template>
-      <filter-item
-        :is-checked="!selected.length"
-        :text="$options.i18n.allItemsText"
-        :data-testid="$options.ALL_ID"
-        @click="deselectAll"
-      />
-      <filter-item
-        v-for="{ id, text } in $options.DROPDOWN_OPTIONS"
-        :key="id"
-        :data-testid="id"
-        :is-checked="selected.includes(id)"
-        :text="text"
-        @click="toggleSelected(id)"
-      />
-    </gl-dropdown>
-  </div>
+  <simple-dropdown
+    :label="$options.i18n.label"
+    :options="$options.DROPDOWN_OPTIONS"
+    :selected-ids.sync="selected"
+    querystring-key="severity"
+  />
 </template>

[Daniel Tian]

SeverityFilter has now been reduced down to just a SimpleDropdown. It passes down the dropdown options to render and will emit the filter-changed event when the selected IDs change, but everything else is handled by SimpleDropdown.