Backports security reusable components into CE to use in JUnit report

ee/app/assets/javascripts/vue_shared/security_reports/components/help_popover.vue → app/assets/javascripts/vue_shared/components/reports/help_popover.vue

@@ -5,7 +5,7 @@ import { inserted } from '~/feature_highlight/feature_highlight_helper';
 import { mouseenter, debouncedMouseleave, togglePopover } from '~/shared/popover';
 
 export default {
-  name: 'SecurityReportsHelpPopover',
+  name: 'ReportsHelpPopover',
   components: {
     Icon,
   },

ee/app/assets/javascripts/vue_shared/security_reports/components/issues_list.vue → app/assets/javascripts/vue_shared/components/reports/issues_list.vue

 <script>
-import IssuesBlock from './report_issues.vue';
-import SastContainerInfo from './sast_container_info.vue';
-import { SAST_CONTAINER } from '../store/constants';
+import IssuesBlock from '~/vue_shared/components/reports/report_issues.vue';
+
+import SastContainerInfo from 'ee/vue_shared/security_reports/components/sast_container_info.vue';
+import { SAST_CONTAINER } from 'ee/vue_shared/security_reports//store/constants';
 
 /**
  * Renders block of issues

ee/app/assets/javascripts/vue_shared/security_reports/components/report_issues.vue → app/assets/javascripts/vue_shared/components/reports/report_issues.vue

 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+
 import PerformanceIssue from 'ee/vue_merge_request_widget/components/performance_issue_body.vue';
 import CodequalityIssue from 'ee/vue_merge_request_widget/components/codequality_issue_body.vue';
 import LicenseIssue from 'ee/vue_merge_request_widget/components/license_issue_body.vue';
-import SastIssue from './sast_issue_body.vue';
-import SastContainerIssue from './sast_container_issue_body.vue';
-import DastIssue from './dast_issue_body.vue';
-
-import { SAST, DAST, SAST_CONTAINER } from '../store/constants';
+import SastIssue from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
+import SastContainerIssue from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue';
+import DastIssue from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
+import { SAST, DAST, SAST_CONTAINER } from 'ee/vue_shared/security_reports/store/constants';
 
 export default {
   name: 'ReportIssues',

ee/app/assets/javascripts/vue_shared/security_reports/components/report_section.vue → app/assets/javascripts/vue_shared/components/reports/report_section.vue

@@ -3,7 +3,10 @@ import { __ } from '~/locale';
 import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
 import IssuesList from './issues_list.vue';
 import Popover from './help_popover.vue';
-import { LOADING, ERROR, SUCCESS } from '../store/constants';
+
+const LOADING = 'LOADING';
+const ERROR = 'ERROR';
+const SUCCESS = 'SUCCESS';
 
 export default {
   name: 'ReportSection',

ee/app/assets/javascripts/vue_shared/security_reports/components/summary_row.vue → app/assets/javascripts/vue_shared/components/reports/summary_row.vue

@@ -4,11 +4,15 @@ import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
 import Popover from './help_popover.vue';
 
 /**
- * Renders the summary row for each security report
+ * Renders the summary row for each report
+ *
+ * Used both in MR widget and Pipeline's view for:
+ * - Unit tests reports
+ * - Security reports
  */
 
 export default {
-  name: 'SecuritySummaryRow',
+  name: 'ReportSummaryRow',
   components: {
     CiIcon,
     LoadingIcon,

ee/app/assets/javascripts/vue_merge_request_widget/components/codequality_issue_body.vue

@@ -3,7 +3,7 @@
  * Renders Code quality body text
  * Fixed: [name] in [link]:[line]
  */
-import ReportLink from 'ee/vue_shared/security_reports/components/report_link.vue';
+import ReportLink from '~/vue_shared/components/reports/report_link.vue';
 
 export default {
   name: 'CodequalityIssueBody',

ee/app/assets/javascripts/vue_merge_request_widget/components/performance_issue_body.vue

@@ -3,7 +3,7 @@
  * Renders Perfomance issue body text
  *  [name] :[score] [symbol] [delta] in [link]
  */
-import ReportLink from 'ee/vue_shared/security_reports/components/report_link.vue';
+import ReportLink from '~/vue_shared/components/reports/report_link.vue';
 
 export default {
   name: 'PerformanceIssueBody',

ee/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

 <script>
-import ReportSection from 'ee/vue_shared/security_reports/components/report_section.vue';
+import ReportSection from '~/vue_shared/components/reports/report_section.vue';
 import GroupedSecurityReportsApp from 'ee/vue_shared/security_reports/grouped_security_reports_app.vue';
 import reportsMixin from 'ee/vue_shared/security_reports/mixins/reports_mixin';
 

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

@@ -4,7 +4,7 @@
  * [severity] ([confidence]): [name]
  */
 
-import ModalOpenName from './modal_open_name.vue';
+import ModalOpenName from '~/vue_shared/components/reports/modal_open_name.vue';
 
 export default {
   name: 'SastIssueBody',

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

@@ -3,8 +3,8 @@
  * Renders SAST CONTAINER body text
  * [priority]: [name] in [link]:[line]
  */
-import ReportLink from './report_link.vue';
-import ModalOpenName from './modal_open_name.vue';
+import ReportLink from '~/vue_shared/components/reports/report_link.vue';
+import ModalOpenName from '~/vue_shared/components/reports/modal_open_name.vue';
 
 export default {
   name: 'SastContainerIssueBody',

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

@@ -3,8 +3,8 @@
  * Renders SAST body text
  * [severity] ([confidence]): [name] in [link] : [line]
  */
-import ReportLink from './report_link.vue';
-import ModalOpenName from './modal_open_name.vue';
+import ReportLink from '~/vue_shared/components/reports/report_link.vue';
+import ModalOpenName from '~/vue_shared/components/reports/modal_open_name.vue';
 
 export default {
   name: 'SastIssueBody',

ee/app/assets/javascripts/vue_shared/security_reports/grouped_security_reports_app.vue

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { SAST, DAST, SAST_CONTAINER } from './store/constants';
-import createStore from './store';
-import ReportSection from './components/report_section.vue';
-import SummaryRow from './components/summary_row.vue';
-import IssuesList from './components/issues_list.vue';
+import ReportSection from '~/vue_shared/components/reports/report_section.vue';
+import SummaryRow from '~/vue_shared/components/reports/summary_row.vue';
+import IssuesList from '~/vue_shared/components/reports/issues_list.vue';
 import IssueModal from './components/modal.vue';
+import { SAST, DAST, SAST_CONTAINER } from './store/constants';
 import securityReportsMixin from './mixins/security_report_mixin';
+import createStore from './store';
 
 export default {
   store: createStore(),

ee/app/assets/javascripts/vue_shared/security_reports/split_security_reports_app.vue

@@ -2,8 +2,8 @@
 import { mapActions, mapState } from 'vuex';
 import { s__, sprintf, n__ } from '~/locale';
 import createFlash from '~/flash';
+import ReportSection from '~/vue_shared/components/reports/report_section.vue';
 import { SAST, DAST, SAST_CONTAINER } from './store/constants';
-import ReportSection from './components/report_section.vue';
 import IssueModal from './components/modal.vue';
 import mixin from './mixins/security_report_mixin';
 import reportsMixin from './mixins/reports_mixin';

spec/javascripts/vue_shared/security_reports/components/modal_open_name_spec.js → spec/javascripts/vue_shared/components/reports/modal_open_name_spec.js

 import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/modal_open_name.vue';
-import store from 'ee/vue_shared/security_reports/store';
+import Vuex from 'vuex';
+import component from '~/vue_shared/components/reports/modal_open_name.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { parsedDast } from '../mock_data';
 
 describe('Modal open name', () => {
   const Component = Vue.extend(component);
   let vm;
 
+  const store = new Vuex.Store({
+    actions: {
+      openModal: () => {},
+    },
+    state: {},
+    mutations: {},
+  });
+
   beforeEach(() => {
     vm = mountComponentWithStore(Component, {
       store,
       props: {
-        issue: parsedDast[0],
+        issue: {
+          title: 'Issue',
+        },
         status: 'failed',
       },
     });
@@ -23,7 +32,7 @@ describe('Modal open name', () => {
   });
 
   it('renders the issue name', () => {
-    expect(vm.$el.textContent.trim()).toEqual(parsedDast[0].name);
+    expect(vm.$el.textContent.trim()).toEqual('Issue');
   });
 
   it('calls openModal actions when button is clicked', () => {

spec/javascripts/vue_shared/security_reports/components/report_issues_spec.js → spec/javascripts/vue_shared/components/reports/report_issues_spec.js

 import Vue from 'vue';
-import reportIssues from 'ee/vue_shared/security_reports/components/report_issues.vue';
+import reportIssues from '~/vue_shared/components/reports/report_issues.vue';
 import store from 'ee/vue_shared/security_reports/store';
 import mountComponent, { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import {
@@ -9,7 +9,7 @@ import {
   sastParsedIssues,
   dockerReportParsed,
   parsedDast,
-} from '../mock_data';
+} from 'spec/vue_shared/security_reports/mock_data';
 
 describe('Report issues', () => {
   let vm;

spec/javascripts/vue_shared/security_reports/components/report_link_spec.js → spec/javascripts/vue_shared/components/reports/report_link_spec.js

 import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/report_link.vue';
+import component from '~/vue_shared/components/reports/report_link.vue';
 import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('report link', () => {

spec/javascripts/vue_shared/security_reports/components/report_section_spec.js → spec/javascripts/vue_shared/components/reports/report_section_spec.js

 import Vue from 'vue';
-import reportSection from 'ee/vue_shared/security_reports/components/report_section.vue';
+import reportSection from '~/vue_shared/components/reports/report_section.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { codequalityParsedIssues } from 'spec/vue_mr_widget/mock_data';
 
 describe('Report section', () => {
   let vm;
   const ReportSection = Vue.extend(reportSection);
 
+  const resolvedIssues = [
+    {
+      name: 'Insecure Dependency',
+      fingerprint: 'ca2e59451e98ae60ba2f54e3857c50e5',
+      path: 'Gemfile.lock',
+      line: 12,
+      urlPath: 'foo/Gemfile.lock',
+    },
+  ];
+
   afterEach(() => {
     vm.$destroy();
   });
@@ -19,7 +28,7 @@ describe('Report section', () => {
         loadingText: 'Loading codeclimate report',
         errorText: 'foo',
         successText: 'Code quality improved on 1 point and degraded on 1 point',
-        resolvedIssues: codequalityParsedIssues,
+        resolvedIssues,
         hasIssues: false,
         alwaysOpen: false,
       });
@@ -77,6 +86,7 @@ describe('Report section', () => {
       });
     });
   });
+
   describe('when it is loading', () => {
     it('should render loading indicator', () => {
       vm = mountComponent(ReportSection, {
@@ -99,7 +109,7 @@ describe('Report section', () => {
         loadingText: 'Loading codeclimate report',
         errorText: 'foo',
         successText: 'Code quality improved on 1 point and degraded on 1 point',
-        resolvedIssues: codequalityParsedIssues,
+        resolvedIssues,
         hasIssues: true,
       });
     });
@@ -110,7 +120,7 @@ describe('Report section', () => {
       );
 
       expect(vm.$el.querySelectorAll('.js-mr-code-resolved-issues li').length).toEqual(
-        codequalityParsedIssues.length,
+        resolvedIssues.length,
       );
     });
 

spec/javascripts/vue_shared/security_reports/components/summary_row_spec.js → spec/javascripts/vue_shared/components/reports/summary_row_spec.js

 import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/summary_row.vue';
+import component from '~/vue_shared/components/reports/summary_row.vue';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Summary row', () => {