Create "Tool" filter with individual scanners

What does this MR do and why?

This MR is part of the epic to introduce a new "Tool" filter that has individual scanners. To keep the MR small, it is broken down into the following functionality:

MR	Changes
This MR	Create the new "Tool" component with selection working and setting the query string
!132104 (merged)	Add filtering capabilities
!132105 (merged)	Introduce the new "Tool" filter with the FF

Screenshots or screen recordings

Note: for screenshot demo purposes, I removed the CSS max height restriction:

🚨 Note: filtering does NOT work yet, that will be introduced in the next MR

🚨 Note 2: The "All (reportType)" seems odd for only one scanner; unfortunately that's the current limitation of gl-listbox. But we will improve on this iteratively (discussion) 👣

How to set up and validate locally

Note: Apply this patch to use the new "Tool" filter > use-tool-with-scanner-filter.patch

diff --git a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue
index a1f2a2a6b2f4..284ea6598af4 100644
--- a/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue
+++ b/ee/app/assets/javascripts/security_dashboard/components/shared/vulnerability_report/vulnerability_filters.vue
@@ -5,7 +5,8 @@ import ProjectFilter from '../filters/project_filter.vue';
 import ClusterFilter from '../filters/cluster_filter.vue';
 import ImageFilter from '../filters/image_filter.vue';
 import ToolFilter from '../filters/tool_filter.vue';
-import ToolWithVendorFilter from '../filters/tool_with_vendor_filter.vue';
+// import ToolWithVendorFilter from '../filters/tool_with_vendor_filter.vue';
+import ToolWithScannerFilter from '../filters/tool_with_scanner_filter.vue';
 import SeverityFilter from '../filters/severity_filter.vue';
 import StatusWithDismissalFilter from '../filters/status_with_dismissal_filter.vue';
 import { FILTERS } from './constants';
@@ -37,7 +38,7 @@ export default {
         case FILTERS.STATUS:
           return StatusWithDismissalFilter;
         case FILTERS.TOOL_VENDOR:
-          return ToolWithVendorFilter;
+          return ToolWithScannerFilter;
         case FILTERS.TOOL_SIMPLE:
           return ToolFilter;
         case FILTERS.TOOL_PIPELINE:

1. In order to run a pipeline to generate a Vulnerability report, you'll need an EE license.
2. Fork https://gitlab.com/gitlab-examples/security/security-reports/
3. Run a pipeline against the default branch. It will generate vulnerabilities.
4. Go to the project vulnerability report page
5. Ensure the "Tool" filter has the correct UI

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