Merge branch '331401-implement-filtering-functionality' into 'master'

Make filters work for pipeline dashboard

See merge request gitlab-org/gitlab!67750

ee/app/assets/javascripts/security_dashboard/components/pipeline/pipeline_findings.vue

@@ -50,9 +50,16 @@ export default {
       query: findingsQuery,
       variables() {
         return {
+          ...this.filters,
           pipelineId: this.pipeline.iid,
           fullPath: this.projectFullPath,
           first: VULNERABILITIES_PER_PAGE,
+          // Two issues here:
+          // 1. Severity filter, unlike vulnerabilities, need to be lower case.
+          // 2. Empty array returns an empty result, therefore we need to pass undefined in that case.
+          severity: this.filters?.severity?.length
+            ? this.filters.severity.map((s) => s.toLowerCase())
+            : undefined,
         };
       },
       update: ({ project }) =>

ee/app/assets/javascripts/security_dashboard/graphql/queries/pipeline_findings.query.graphql

@@ -9,6 +9,7 @@ query pipelineFindings(
   $severity: [String!]
   $reportType: [String!]
   $scanner: [String!]
+  $state: [VulnerabilityState!]
 ) {
   project(fullPath: $fullPath) {
     pipeline(iid: $pipelineId) {
@@ -18,6 +19,7 @@ query pipelineFindings(
         severity: $severity
         reportType: $reportType
         scanner: $scanner
+        state: $state
       ) {
         nodes {
           uuid

ee/app/assets/javascripts/security_dashboard/pipeline_init.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import { parseBoolean } from '~/lib/utils/common_utils';
 import PipelineSecurityDashboard from './components/pipeline/pipeline_security_dashboard.vue';
 import apolloProvider from './graphql/provider';
+import createRouter from './router';
 import createDashboardStore from './store';
 import { DASHBOARD_TYPES } from './store/constants';
 import { LOADING_VULNERABILITIES_ERROR_CODES } from './store/modules/vulnerabilities/constants';
@@ -38,6 +39,7 @@ export default () => {
   return new Vue({
     el,
     apolloProvider,
+    router: createRouter(),
     store: createDashboardStore({
       dashboardType: DASHBOARD_TYPES.PIPELINE,
     }),