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/filter_dropdown.vue

+<script>
+import { GlDropdown } from '@gitlab/ui';
+import DropdownButtonText from './dropdown_button_text.vue';
+
+export default {
+  components: { GlDropdown, DropdownButtonText },
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    selectedTexts: {
+      type: Array,
+      required: true,
+    },
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    qaSelector() {
+      return `filter_${this.label.toLowerCase().replace(' ', '_')}_dropdown`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <label class="gl-mb-2">{{ label }}</label>
+    <gl-dropdown
+      :header-text="label"
+      :loading="loading"
+      block
+      toggle-class="gl-mb-0"
+      @show="$emit('show')"
+    >
+      <template #button-text>
+        <dropdown-button-text :items="selectedTexts" :data-qa-selector="qaSelector" />
+      </template>
+
+      <template #header>
+        <slot name="header"></slot>
+      </template>
+
+      <template #highlighted-items>
+        <slot name="highlighted-items"></slot>
+      </template>
+
+      <slot></slot>
+    </gl-dropdown>
+  </div>
+</template>