Remove unused store mutations and state

This modifies the modal component to use the new `vulnerability-details`
component, and removes now-unused store mutations and state.

This also:

- moves the `modal.data.project` store state to `modal.project`
- removes an unused `project_id` field from the modal, since it was
  guaranteed to always be `undefined`, and was not consumed by any child
  component

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/mutations.js

@@ -75,57 +75,12 @@ export default {
   },
   [types.SET_MODAL_DATA](state, payload) {
     const { vulnerability } = payload;
-    const { location } = vulnerability;
 
     Vue.set(state.modal, 'title', vulnerability.name);
-    Vue.set(state.modal.data.description, 'value', vulnerability.description);
-    Vue.set(
-      state.modal.data.project,
-      'value',
-      vulnerability.project && vulnerability.project.full_name,
-    );
-    Vue.set(
-      state.modal.data.project,
-      'url',
-      vulnerability.project && vulnerability.project.full_path,
-    );
-
-    Vue.set(
-      state.modal.data.identifiers,
-      'value',
-      vulnerability.identifiers.length && vulnerability.identifiers,
-    );
-
-    if (location) {
-      const {
-        file,
-        start_line: startLine,
-        end_line: endLine,
-        image,
-        operating_system: namespace,
-        class: className,
-      } = location;
-      const fileLocation = getFileLocation(location);
 
-      let lineSuffix = '';
+    Vue.set(state.modal.project, 'value', vulnerability.project && vulnerability.project.full_name);
+    Vue.set(state.modal.project, 'url', vulnerability.project && vulnerability.project.full_path);
 
-      if (startLine) {
-        lineSuffix += `:${startLine}`;
-        if (endLine && startLine !== endLine) {
-          lineSuffix += `-${endLine}`;
-        }
-      }
-
-      Vue.set(state.modal.data.className, 'value', className);
-      Vue.set(state.modal.data.file, 'value', file ? `${file}${lineSuffix}` : null);
-      Vue.set(state.modal.data.image, 'value', image);
-      Vue.set(state.modal.data.namespace, 'value', namespace);
-      Vue.set(state.modal.data.url, 'value', fileLocation);
-      Vue.set(state.modal.data.url, 'url', fileLocation);
-    }
-
-    Vue.set(state.modal.data.severity, 'value', vulnerability.severity);
-    Vue.set(state.modal.data.reportType, 'value', vulnerability.report_type);
     Vue.set(state.modal, 'vulnerability', vulnerability);
     Vue.set(
       state.modal.vulnerability,
@@ -143,18 +98,6 @@ export default {
     Vue.set(state.modal.vulnerability, 'isDismissed', Boolean(vulnerability.dismissal_feedback));
     Vue.set(state.modal, 'error', null);
     Vue.set(state.modal, 'isCommentingOnDismissal', false);
-
-    if (vulnerability.instances && vulnerability.instances.length) {
-      Vue.set(state.modal.data.instances, 'value', vulnerability.instances);
-    } else {
-      Vue.set(state.modal.data.instances, 'value', null);
-    }
-
-    if (vulnerability.links && vulnerability.links.length) {
-      Vue.set(state.modal.data.links, 'value', vulnerability.links);
-    } else {
-      Vue.set(state.modal.data.links, 'value', null);
-    }
   },
   [types.REQUEST_CREATE_ISSUE](state) {
     state.isCreatingIssue = true;

ee/app/assets/javascripts/security_dashboard/store/modules/vulnerabilities/state.js

@@ -21,24 +21,8 @@ export default () => ({
   activeVulnerability: null,
   sourceBranch: null,
   modal: {
-    data: {
-      description: { text: s__('Vulnerability|Description') },
-      project: {
-        text: s__('Vulnerability|Project'),
-        isLink: true,
-      },
-      url: { text: __('URL'), isLink: true },
-      file: { text: s__('Vulnerability|File') },
-      identifiers: { text: s__('Vulnerability|Identifiers') },
-      severity: { text: s__('Vulnerability|Severity') },
-      reportType: { text: s__('Vulnerability|Report Type') },
-      className: { text: s__('Vulnerability|Class') },
-      image: { text: s__('Vulnerability|Image') },
-      namespace: { text: s__('Vulnerability|Namespace') },
-      links: { text: s__('Vulnerability|Links') },
-      instances: { text: s__('Vulnerability|Instances') },
-    },
     vulnerability: {},
+    project: {},
     isCreatingNewIssue: false,
     isCreatingMergeRequest: false,
     isDismissingVulnerability: false,

ee/app/assets/javascripts/vue_shared/security_reports/components/modal.vue

@@ -86,7 +86,7 @@ export default {
       );
     },
     project() {
-      return this.modal.data.project;
+      return this.modal.project;
     },
     solution() {
       return this.vulnerability && this.vulnerability.solution;
@@ -153,7 +153,6 @@ export default {
       } = gon;
 
       return {
-        project_id: this.project ? this.project.id : null,
         author: {
           id: current_user_id,
           name: current_user_fullname,

ee/app/assets/javascripts/vue_shared/security_reports/store/mutations.js

@@ -134,36 +134,8 @@ export default {
 
   [types.SET_ISSUE_MODAL_DATA](state, payload) {
     const { issue, status } = payload;
-    const fileLocation = getFileLocation(issue.location);
 
     Vue.set(state.modal, 'title', issue.title);
-    Vue.set(state.modal.data.description, 'value', issue.description);
-    Vue.set(state.modal.data.file, 'value', issue.location && issue.location.file);
-    Vue.set(state.modal.data.file, 'url', issue.urlPath);
-    Vue.set(state.modal.data.className, 'value', issue.location && issue.location.class);
-    Vue.set(state.modal.data.methodName, 'value', issue.location && issue.location.method);
-    Vue.set(state.modal.data.image, 'value', issue.location && issue.location.image);
-    Vue.set(state.modal.data.namespace, 'value', issue.location && issue.location.operating_system);
-    Vue.set(state.modal.data.url, 'value', fileLocation);
-    Vue.set(state.modal.data.url, 'url', fileLocation);
-
-    if (issue.identifiers && issue.identifiers.length > 0) {
-      Vue.set(state.modal.data.identifiers, 'value', issue.identifiers);
-    } else {
-      // Force a null value for identifiers to avoid showing an empty array
-      Vue.set(state.modal.data.identifiers, 'value', null);
-    }
-
-    Vue.set(state.modal.data.severity, 'value', issue.severity);
-
-    if (issue.links && issue.links.length > 0) {
-      Vue.set(state.modal.data.links, 'value', issue.links);
-    } else {
-      // Force a null value for links to avoid showing an empty array
-      Vue.set(state.modal.data.links, 'value', null);
-    }
-
-    Vue.set(state.modal.data.instances, 'value', issue.instances);
     Vue.set(state.modal, 'vulnerability', issue);
     Vue.set(state.modal, 'isResolved', status === 'success');
 

ee/app/assets/javascripts/vue_shared/security_reports/store/state.js

@@ -67,66 +67,6 @@ export default () => ({
   modal: {
     title: null,
 
-    // Dynamic data rendered for each issue
-    data: {
-      description: {
-        value: null,
-        text: s__('ciReport|Description'),
-        isLink: false,
-      },
-      url: {
-        value: null,
-        url: null,
-        text: __('URL'),
-        isLink: true,
-      },
-      file: {
-        value: null,
-        url: null,
-        text: s__('ciReport|File'),
-        isLink: true,
-      },
-      identifiers: {
-        value: [],
-        text: s__('ciReport|Identifiers'),
-        isLink: false,
-      },
-      severity: {
-        value: null,
-        text: s__('ciReport|Severity'),
-        isLink: false,
-      },
-      className: {
-        value: null,
-        text: s__('ciReport|Class'),
-        isLink: false,
-      },
-      methodName: {
-        value: null,
-        text: s__('ciReport|Method'),
-        isLink: false,
-      },
-      image: {
-        value: null,
-        text: s__('ciReport|Image'),
-        isLink: false,
-      },
-      namespace: {
-        value: null,
-        text: s__('ciReport|Namespace'),
-        isLink: false,
-      },
-      links: {
-        value: [],
-        text: s__('ciReport|Links'),
-        isLink: false,
-      },
-      instances: {
-        value: [],
-        text: s__('ciReport|Instances'),
-        isLink: false,
-      },
-    },
     learnMoreUrl: null,
 
     vulnerability: {

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

@@ -286,8 +286,10 @@ describe('Security Reports modal', () => {
         modal: createState().modal,
       };
       propsData.modal.vulnerability.blob_path = blobPath;
-      propsData.modal.data.namespace.value = namespaceValue;
-      propsData.modal.data.file.value = fileValue;
+      propsData.modal.vulnerability.location = {
+        file: fileValue,
+        operating_system: namespaceValue,
+      };
       mountComponent({ propsData }, mount);
     });
 
@@ -295,23 +297,8 @@ describe('Security Reports modal', () => {
       const vulnerabilityDetails = wrapper.find('.js-vulnerability-details');
 
       expect(vulnerabilityDetails.exists()).toBe(true);
-      expect(vulnerabilityDetails.text()).toContain('foobar');
-    });
-
-    it('computes valued fields properly', () => {
-      expect(wrapper.vm.valuedFields).toMatchObject({
-        file: {
-          value: fileValue,
-          url: blobPath,
-          isLink: true,
-          text: 'File',
-        },
-        namespace: {
-          value: namespaceValue,
-          text: 'Namespace',
-          isLink: false,
-        },
-      });
+      expect(vulnerabilityDetails.text()).toContain(namespaceValue);
+      expect(vulnerabilityDetails.text()).toContain(fileValue);
     });
   });
 

ee/spec/frontend/vue_shared/security_reports/store/mutations_spec.js

@@ -97,51 +97,12 @@ describe('security reports mutations', () => {
 
   describe('SET_ISSUE_MODAL_DATA', () => {
     it('has default data', () => {
-      expect(stateCopy.modal.data.description.value).toEqual(null);
-      expect(stateCopy.modal.data.description.text).toEqual('Description');
-      expect(stateCopy.modal.data.description.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.identifiers.value).toEqual([]);
-      expect(stateCopy.modal.data.identifiers.text).toEqual('Identifiers');
-      expect(stateCopy.modal.data.identifiers.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.file.value).toEqual(null);
-      expect(stateCopy.modal.data.file.text).toEqual('File');
-      expect(stateCopy.modal.data.file.isLink).toEqual(true);
-
-      expect(stateCopy.modal.data.className.value).toEqual(null);
-      expect(stateCopy.modal.data.className.text).toEqual('Class');
-      expect(stateCopy.modal.data.className.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.methodName.value).toEqual(null);
-      expect(stateCopy.modal.data.methodName.text).toEqual('Method');
-      expect(stateCopy.modal.data.methodName.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.namespace.value).toEqual(null);
-      expect(stateCopy.modal.data.namespace.text).toEqual('Namespace');
-      expect(stateCopy.modal.data.namespace.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.severity.value).toEqual(null);
-      expect(stateCopy.modal.data.severity.text).toEqual('Severity');
-      expect(stateCopy.modal.data.severity.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.links.value).toEqual([]);
-      expect(stateCopy.modal.data.links.text).toEqual('Links');
-      expect(stateCopy.modal.data.links.isLink).toEqual(false);
-
-      expect(stateCopy.modal.data.instances.value).toEqual([]);
-      expect(stateCopy.modal.data.instances.text).toEqual('Instances');
-      expect(stateCopy.modal.data.instances.isLink).toEqual(false);
-
       expect(stateCopy.modal.vulnerability.isDismissed).toEqual(false);
       expect(stateCopy.modal.vulnerability.hasIssue).toEqual(false);
 
       expect(stateCopy.modal.isCreatingNewIssue).toEqual(false);
       expect(stateCopy.modal.isDismissingVulnerability).toEqual(false);
 
-      expect(stateCopy.modal.data.url.value).toEqual(null);
-      expect(stateCopy.modal.data.url.url).toEqual(null);
-
       expect(stateCopy.modal.title).toEqual(null);
       expect(stateCopy.modal.learnMoreUrl).toEqual(null);
       expect(stateCopy.modal.error).toEqual(null);
@@ -194,23 +155,6 @@ describe('security reports mutations', () => {
       mutations[types.SET_ISSUE_MODAL_DATA](stateCopy, { issue, status });
 
       expect(stateCopy.modal.title).toEqual(issue.title);
-      expect(stateCopy.modal.data.description.value).toEqual(issue.description);
-      expect(stateCopy.modal.data.file.value).toEqual(issue.location.file);
-      expect(stateCopy.modal.data.file.url).toEqual(issue.urlPath);
-      expect(stateCopy.modal.data.className.value).toEqual(issue.location.class);
-      expect(stateCopy.modal.data.methodName.value).toEqual(issue.location.method);
-      expect(stateCopy.modal.data.namespace.value).toEqual(issue.location.operating_system);
-      expect(stateCopy.modal.data.image.value).toEqual(issue.location.image);
-      expect(stateCopy.modal.data.identifiers.value).toEqual(issue.identifiers);
-      expect(stateCopy.modal.data.severity.value).toEqual(issue.severity);
-      expect(stateCopy.modal.data.links.value).toEqual(issue.links);
-      expect(stateCopy.modal.data.instances.value).toEqual(issue.instances);
-      expect(stateCopy.modal.data.url.value).toEqual(
-        `${issue.location.hostname}${issue.location.path}`,
-      );
-      expect(stateCopy.modal.data.url.url).toEqual(
-        `${issue.location.hostname}${issue.location.path}`,
-      );
       expect(stateCopy.modal.vulnerability).toEqual(issue);
       expect(stateCopy.modal.isResolved).toEqual(true);
     });

ee/spec/javascripts/security_dashboard/store/vulnerabilities/mutations_spec.js

@@ -244,65 +244,14 @@ describe('vulnerabilities module mutations', () => {
         expect(state.modal.title).toEqual(vulnerability.name);
       });
 
-      it('should set the modal description', () => {
-        expect(state.modal.data.description.value).toEqual(vulnerability.description);
-      });
-
       it('should set the modal project', () => {
-        expect(state.modal.data.project.value).toEqual(vulnerability.project.full_name);
-        expect(state.modal.data.project.url).toEqual(vulnerability.project.full_path);
-      });
-
-      it('should set the modal file', () => {
-        expect(state.modal.data.file.value).toEqual(
-          `${vulnerability.location.file}:${vulnerability.location.start_line}`,
-        );
-      });
-
-      it('should set the modal className', () => {
-        expect(state.modal.data.className.value).toEqual(vulnerability.location.class);
-      });
-
-      it('should set the modal image', () => {
-        expect(state.modal.data.image.value).toEqual(vulnerability.location.image);
-      });
-
-      it('should set the modal namespace', () => {
-        expect(state.modal.data.namespace.value).toEqual(vulnerability.location.operating_system);
-      });
-
-      it('should set the modal identifiers', () => {
-        expect(state.modal.data.identifiers.value).toEqual(vulnerability.identifiers);
-      });
-
-      it('should set the modal severity', () => {
-        expect(state.modal.data.severity.value).toEqual(vulnerability.severity);
-      });
-
-      it('should set the modal class', () => {
-        expect(state.modal.data.className.value).toEqual(vulnerability.location.class);
-      });
-
-      it('should set the modal links', () => {
-        expect(state.modal.data.links.value).toEqual(vulnerability.links);
-      });
-
-      it('should set the modal instances', () => {
-        expect(state.modal.data.instances.value).toEqual(vulnerability.instances);
+        expect(state.modal.project.value).toEqual(vulnerability.project.full_name);
+        expect(state.modal.project.url).toEqual(vulnerability.project.full_path);
       });
 
       it('should set the modal vulnerability', () => {
         expect(state.modal.vulnerability).toEqual(vulnerability);
       });
-
-      it('should set the modal URL', () => {
-        const { url } = state.modal.data;
-        const { hostname, path } = vulnerability.location;
-        const expected = `${hostname}${path}`;
-
-        expect(url.value).toEqual(expected);
-        expect(url.url).toEqual(expected);
-      });
     });
 
     describe('with irregular data', () => {
@@ -343,27 +292,6 @@ describe('vulnerabilities module mutations', () => {
 
         expect(state.modal.vulnerability.hasIssue).toEqual(false);
       });
-
-      it('should nullify the modal links', () => {
-        const payload = { vulnerability: { ...vulnerability, links: [] } };
-        mutations[types.SET_MODAL_DATA](state, payload);
-
-        expect(state.modal.data.links.value).toEqual(null);
-      });
-
-      it('should nullify the instances', () => {
-        const payload = { vulnerability: { ...vulnerability, instances: [] } };
-        mutations[types.SET_MODAL_DATA](state, payload);
-
-        expect(state.modal.data.instances.value).toEqual(null);
-      });
-
-      it('should nullify the file value', () => {
-        const payload = { vulnerability: { ...vulnerability, location: {} } };
-        mutations[types.SET_MODAL_DATA](state, payload);
-
-        expect(state.modal.data.file.value).toEqual(null);
-      });
     });
   });