Migrate vulnerability state management to GraphQL

- As of today, we're using a POST request to update the vulnerability
state. With these changes, the state change will be managed by
GraphQL.
- Add changelog

ee/app/assets/javascripts/security_dashboard/graphql/mutate_vulnerability_state.js

+import vulnerabilityConfirm from './vulnerability_confirm.mutation.graphql';
+import vulnerabilityDismiss from './vulnerability_dismiss.mutation.graphql';
+import vulnerabilityResolve from './vulnerability_resolve.mutation.graphql';
+import vulnerabilityRevertToDetected from './vulnerability_revert_to_detected.mutation.graphql';
+
+export default {
+  revert: vulnerabilityRevertToDetected,
+  dismiss: vulnerabilityDismiss,
+  confirm: vulnerabilityConfirm,
+  resolve: vulnerabilityResolve,
+};

ee/app/assets/javascripts/security_dashboard/graphql/vulnerability_confirm.mutation.graphql

+mutation($id: VulnerabilityID!) {
+  vulnerabilityConfirm(input: { id: $id }) {
+    errors
+    vulnerability {
+      id
+      state
+      confirmedAt
+    }
+  }
+}

ee/app/assets/javascripts/security_dashboard/graphql/vulnerability_dismiss.mutation.graphql

-mutation($id: ID!, $comment: String!) {
+mutation($id: VulnerabilityID!, $comment: String!) {
   vulnerabilityDismiss(input: { id: $id, comment: $comment }) {
     errors
     vulnerability {
       id
       state
+      dismissedAt
     }
   }
 }

ee/app/assets/javascripts/security_dashboard/graphql/vulnerability_resolve.mutation.graphql

+mutation($id: VulnerabilityID!) {
+  vulnerabilityResolve(input: { id: $id }) {
+    errors
+    vulnerability {
+      id
+      state
+      resolvedAt
+    }
+  }
+}

ee/app/assets/javascripts/security_dashboard/graphql/vulnerability_revert_to_detected.mutation.graphql

+mutation($id: VulnerabilityID!) {
+  vulnerabilityRevertToDetected(input: { id: $id }) {
+    errors
+    vulnerability {
+      id
+      state
+      detectedAt
+    }
+  }
+}

ee/app/assets/javascripts/vulnerabilities/components/header.vue

@@ -3,12 +3,10 @@ import { GlLoadingIcon, GlButton, GlBadge } from '@gitlab/ui';
 import Api from 'ee/api';
 import { CancelToken } from 'axios';
 import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
+import vulnerabilityStateMutations from 'ee/security_dashboard/graphql/mutate_vulnerability_state';
 import axios from '~/lib/utils/axios_utils';
 import download from '~/lib/utils/downloader';
-import {
-  convertObjectPropsToSnakeCase,
-  convertObjectPropsToCamelCase,
-} from '~/lib/utils/common_utils';
+import { convertObjectPropsToSnakeCase } from '~/lib/utils/common_utils';
 import { redirectTo } from '~/lib/utils/url_utility';
 import { deprecatedCreateFlash as createFlash } from '~/flash';
 import { s__ } from '~/locale';
@@ -18,6 +16,8 @@ import VulnerabilityStateDropdown from './vulnerability_state_dropdown.vue';
 import StatusDescription from './status_description.vue';
 import { VULNERABILITY_STATE_OBJECTS, FEEDBACK_TYPES, HEADER_ACTION_BUTTONS } from '../constants';
 
+const gidPrefix = 'gid://gitlab/Vulnerability/';
+
 export default {
   name: 'VulnerabilityHeader',
 
@@ -109,7 +109,9 @@ export default {
       handler(state) {
         const id = this.vulnerability[`${state}ById`];
 
-        if (id === undefined) return; // Don't do anything if there's no ID.
+        if (!id) {
+          return;
+        }
 
         this.isLoadingUser = true;
 
@@ -132,25 +134,39 @@ export default {
       const fn = this[action];
       if (typeof fn === 'function') fn();
     },
-    changeVulnerabilityState(newState) {
+
+    async changeVulnerabilityState({ action, payload }) {
       this.isLoadingVulnerability = true;
 
-      Api.changeVulnerabilityState(this.vulnerability.id, newState)
-        .then(({ data }) => {
-          Object.assign(this.vulnerability, convertObjectPropsToCamelCase(data));
-          this.$emit('vulnerability-state-change');
-        })
-        .catch(() => {
-          createFlash(
-            s__(
-              'VulnerabilityManagement|Something went wrong, could not update vulnerability state.',
-            ),
-          );
-        })
-        .finally(() => {
-          this.isLoadingVulnerability = false;
+      try {
+        const { data } = await this.$apollo.mutate({
+          mutation: vulnerabilityStateMutations[action],
+          variables: { id: `${gidPrefix}${this.vulnerability.id}`, ...payload },
         });
+        const [queryName] = Object.keys(data);
+        const { vulnerability } = data[queryName];
+        vulnerability.id = vulnerability.id.replace(gidPrefix, '');
+        vulnerability.state = vulnerability.state.toLowerCase();
+
+        this.vulnerability = {
+          ...this.vulnerability,
+          ...vulnerability,
+        };
+
+        this.$emit('vulnerability-state-change');
+      } catch (error) {
+        createFlash({
+          error,
+          captureError: true,
+          message: s__(
+            'VulnerabilityManagement|Something went wrong, could not update vulnerability state.',
+          ),
+        });
+      } finally {
+        this.isLoadingVulnerability = false;
+      }
     },
+
     createMergeRequest() {
       this.isProcessingAction = true;
 

ee/app/assets/javascripts/vulnerabilities/components/vulnerability_state_dropdown.vue

@@ -48,7 +48,7 @@ export default {
     },
 
     saveState(selectedState) {
-      this.$emit('change', selectedState.action);
+      this.$emit('change', selectedState);
       this.closeDropdown();
     },
   },

ee/app/assets/javascripts/vulnerabilities/constants.js

@@ -4,6 +4,8 @@ import {
   FEEDBACK_TYPE_MERGE_REQUEST,
 } from '~/vue_shared/security_reports/constants';
 
+const falsePositiveMessage = s__('VulnerabilityManagement|Will not fix or a false-positive');
+
 export const VULNERABILITY_STATE_OBJECTS = {
   detected: {
     action: 'revert',
@@ -16,7 +18,10 @@ export const VULNERABILITY_STATE_OBJECTS = {
     action: 'dismiss',
     state: 'dismissed',
     displayName: s__('Dismiss'),
-    description: s__('VulnerabilityManagement|Will not fix or a false-positive'),
+    description: falsePositiveMessage,
+    payload: {
+      comment: falsePositiveMessage,
+    },
   },
   confirmed: {
     action: 'confirm',

ee/app/assets/javascripts/vulnerabilities/vulnerabilities_init.js

 import Vue from 'vue';
 import App from 'ee/vulnerabilities/components/vulnerability.vue';
+import apolloProvider from 'ee/security_dashboard/graphql/provider';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 
 export default el => {
   if (!el) {
     return null;
   }
+
   const vulnerability = convertObjectPropsToCamelCase(JSON.parse(el.dataset.vulnerability), {
     deep: true,
   });
 
   return new Vue({
     el,
-
+    apolloProvider,
     provide: {
       reportType: vulnerability.reportType,
       newIssueUrl: vulnerability.newIssueUrl,
@@ -21,7 +23,6 @@ export default el => {
       issueTrackingHelpPath: vulnerability.issueTrackingHelpPath,
       permissionsHelpPath: vulnerability.permissionsHelpPath,
     },
-
     render: h =>
       h(App, {
         props: { vulnerability },

ee/changelogs/unreleased/228740-use-graphql-mutations-to-update-state.yml

+---
+title: Migrate vulnerability state management to GraphQL
+merge_request: 50034
+author:
+type: changed