Add filters to group level

Add the filters component in the Group Level Security Dashboard

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard.vue

 <script>
 import SecurityDashboardLayout from 'ee/security_dashboard/components/security_dashboard_layout.vue';
-import GroupSecurityVulnerabilities from './first_class_group_security_dashboard_vulnerabilities.vue';
+import GroupSecurityVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
+import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 import VulnerabilitySeverity from './vulnerability_severity.vue';
 
 export default {
@@ -8,6 +9,7 @@ export default {
     SecurityDashboardLayout,
     GroupSecurityVulnerabilities,
     VulnerabilitySeverity,
+    Filters,
   },
   props: {
     dashboardDocumentation: {
@@ -27,15 +29,29 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      filters: {},
+    };
+  },
+  methods: {
+    handleFilterChange(filters) {
+      this.filters = filters;
+    },
+  },
 };
 </script>
 
 <template>
   <security-dashboard-layout>
+    <template #header>
+      <filters @filterChange="handleFilterChange" />
+    </template>
     <group-security-vulnerabilities
       :dashboard-documentation="dashboardDocumentation"
       :empty-state-svg-path="emptyStateSvgPath"
       :group-full-path="groupFullPath"
+      :filters="filters"
     />
     <template #aside>
       <vulnerability-severity :endpoint="vulnerableProjectsEndpoint" />

ee/app/assets/javascripts/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue

@@ -26,6 +26,11 @@ export default {
       type: String,
       required: true,
     },
+    filters: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
   },
   data() {
     return {
@@ -41,6 +46,7 @@ export default {
         return {
           fullPath: this.groupFullPath,
           first: VULNERABILITIES_PER_PAGE,
+          ...this.filters,
         };
       },
       update: ({ group }) => group.vulnerabilities.nodes,

ee/app/assets/javascripts/security_dashboard/graphql/group_vulnerabilities.graphql

 #import "~/graphql_shared/fragments/pageInfo.fragment.graphql"
 #import "ee/vulnerabilities/graphql/vulnerability.fragment.graphql"
 
-query group($fullPath: ID!, $after: String, $first: Int) {
+query group(
+  $fullPath: ID!,
+  $after: String,
+  $first: Int,
+  $severity: [VulnerabilitySeverity!]
+  $reportType: [VulnerabilityReportType!]
+  $state: [VulnerabilityState!]
+) {
   group(fullPath: $fullPath) {
-    vulnerabilities(after:$after, first:$first){
+    vulnerabilities(
+      after:$after,
+      first:$first,
+      severity: $severity
+      reportType: $reportType
+      state: $state
+    ){
       nodes{
         ...Vulnerability
       }

ee/spec/frontend/security_dashboard/components/first_class_group_security_dashboard_spec.js

@@ -3,6 +3,7 @@ import SecurityDashboardLayout from 'ee/security_dashboard/components/security_d
 import FirstClassGroupDashboard from 'ee/security_dashboard/components/first_class_group_security_dashboard.vue';
 import FirstClassGroupVulnerabilities from 'ee/security_dashboard/components/first_class_group_security_dashboard_vulnerabilities.vue';
 import VulnerabilitySeverity from 'ee/security_dashboard/components/vulnerability_severity.vue';
+import Filters from 'ee/security_dashboard/components/first_class_vulnerability_filters.vue';
 
 describe('First Class Group Dashboard Component', () => {
   let wrapper;
@@ -14,6 +15,7 @@ describe('First Class Group Dashboard Component', () => {
 
   const findGroupVulnerabilities = () => wrapper.find(FirstClassGroupVulnerabilities);
   const findVulnerabilitySeverity = () => wrapper.find(VulnerabilitySeverity);
+  const findFilters = () => wrapper.find(Filters);
 
   const createWrapper = () => {
     return shallowMount(FirstClassGroupDashboard, {
@@ -42,6 +44,20 @@ describe('First Class Group Dashboard Component', () => {
       dashboardDocumentation,
       emptyStateSvgPath,
       groupFullPath,
+      filters: {},
+    });
+  });
+
+  it('has filters', () => {
+    expect(findFilters().exists()).toBe(true);
+  });
+
+  it('it responds to the filterChange event', () => {
+    const filters = { severity: 'critical' };
+    findFilters().vm.$listeners.filterChange(filters);
+    return wrapper.vm.$nextTick(() => {
+      expect(wrapper.vm.filters).toEqual(filters);
+      expect(findGroupVulnerabilities().props('filters')).toEqual(filters);
     });
   });