Add a compliance branch filter component

What does this MR do and why?

This MR adds a compliance report branch dropdown filter for #358413 (closed).

Note that this is not used yet! It will be integrated with the compliance report #358414 (closed) once the backend is complete.

Screenshots or screen recordings

How to set up and validate locally

If you'd like to show and click through the dropdown on the compliance report then you can follow these steps:

1. Checkout this branch.
2. Apply this patch file filter.patch:

Click to expand

diff --git a/ee/app/assets/javascripts/compliance_dashboard/components/violations/filter.vue b/ee/app/assets/javascripts/compliance_dashboard/components/violations/filter.vue
index b8a386421d9..7e76c61f34a 100644
--- a/ee/app/assets/javascripts/compliance_dashboard/components/violations/filter.vue
+++ b/ee/app/assets/javascripts/compliance_dashboard/components/violations/filter.vue
@@ -8,11 +8,13 @@ import { __ } from '~/locale';
 import { CURRENT_DATE } from 'ee/audit_events/constants';
 import getGroupProjects from '../../graphql/violation_group_projects.query.graphql';
 import { convertProjectIdsToGraphQl } from '../../utils';
+import BranchDropdownFilter from './branch_dropdown_filter.vue';
 
 export default {
   components: {
     GlDaterangePicker,
     ProjectsDropdownFilter,
+    BranchDropdownFilter,
   },
   props: {
     groupPath: {
@@ -82,6 +84,7 @@ export default {
     },
   },
   projectFilterLabel: __('Projects'),
+  branchFilterLabel: __('Branches'),
   defaultMaxDate: CURRENT_DATE,
   projectsFilterParams: {
     first: 50,
@@ -112,6 +115,13 @@ export default {
       />
     </div>
 
+    <div class="gl-display-flex gl-flex-direction-column gl-mb-5 gl-md-pr-5">
+      <label data-testid="dropdown-label" class="gl-line-height-normal">{{
+        $options.branchFilterLabel
+      }}</label>
+      <branch-dropdown-filter class="compliance-filter-dropdown-input" />
+    </div>
+
     <gl-daterange-picker
       class="gl-display-flex gl-w-full gl-mb-5"
       data-testid="violations-date-range-picker"

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.