[ci skip] Move common components into a shared location

Rename common components
Break CSS into a new file
Update tests

app/assets/stylesheets/pages/merge_requests.scss

@@ -783,57 +783,3 @@
   font-size: 22px;
   margin: 0 10px 0 0;
 }
-
-.mr-widget-code-quality {
-  .code-quality-container {
-    border-top: 1px solid $gray-darker;
-    padding: $gl-padding-top;
-    background-color: $gray-light;
-    margin: $gl-padding -16px -16px;
-
-    .mr-widget-code-quality-info {
-      padding-left: 10px;
-    }
-
-    .mr-widget-dast-code {
-      margin-left: 26px;
-    }
-
-    .mr-widget-code-quality-list {
-      list-style: none;
-      padding: 0 1px;
-      margin: 0;
-      line-height: $code_line_height;
-
-      .btn-open-modal {
-        padding: 0 5px 4px;
-      }
-
-      .mr-widget-code-quality-list-item {
-        display: flex;
-      }
-
-      .mr-widget-code-quality-list-item-modal {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      .failed .mr-widget-code-quality-icon {
-        color: $red-500;
-      }
-
-      .success .mr-widget-code-quality-icon {
-        color: $green-500;
-      }
-
-      .neutral .mr-widget-code-quality-icon {
-        color: $theme-gray-700;
-      }
-
-      .mr-widget-code-quality-icon {
-        margin: -5px 4px 0 0;
-        fill: currentColor;
-      }
-    }
-  }
-}

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

@@ -2,14 +2,14 @@ import { n__, s__, __, sprintf } from '~/locale';
 import CEWidgetOptions from '~/vue_merge_request_widget/mr_widget_options';
 import WidgetApprovals from './components/approvals/mr_widget_approvals';
 import GeoSecondaryNode from './components/states/mr_widget_secondary_geo_node';
-import collapsibleSection from './components/mr_widget_report_collapsible_section.vue';
+import CollapsibleSection from '../vue_shared/components/security_reports/report_collapsible_section.vue';
 
 export default {
   extends: CEWidgetOptions,
   components: {
     'mr-widget-approvals': WidgetApprovals,
     'mr-widget-geo-secondary-node': GeoSecondaryNode,
-    collapsibleSection,
+    CollapsibleSection,
   },
   data() {
     return {

ee/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue → ee/app/assets/javascripts/vue_shared/components/security_reports/report_collapsible_section.vue

 <script>
   import { __ } from '~/locale';
-  import statusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
-  import loadingIcon from '~/vue_shared/components/loading_icon.vue';
-  import issuesBlock from './mr_widget_report_issues.vue';
+  import StatusIcon from '~/vue_merge_request_widget/components/mr_widget_status_icon.vue';
+  import LoadingIcon from '~/vue_shared/components/loading_icon.vue';
+  import IssuesBlock from './report_issues.vue';
 
   export default {
-    name: 'MRWidgetCodeQualityCollapsible',
+    name: 'ReportCollapsibleSection',
     components: {
-      issuesBlock,
-      loadingIcon,
-      statusIcon,
+      IssuesBlock,
+      LoadingIcon,
+      StatusIcon,
     },
     props: {
       // security | codequality | performance | docker
@@ -37,22 +37,22 @@
       unresolvedIssues: {
         type: Array,
         required: false,
-        default: () => [],
+        default: () => ([]),
       },
       resolvedIssues: {
         type: Array,
         required: false,
-        default: () => [],
+        default: () => ([]),
       },
       neutralIssues: {
         type: Array,
         required: false,
-        default: () => [],
+        default: () => ([]),
       },
       allIssues: {
         type: Array,
         required: false,
-        default: () => [],
+        default: () => ([]),
       },
       infoText: {
         type: [String, Boolean],

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

 <script>
   import { s__ } from '~/locale';
-  import icon from '~/vue_shared/components/icon.vue';
-  import modal from './mr_widget_dast_modal.vue';
+  import Icon from '~/vue_shared/components/icon.vue';
+  import Modal from './dast_modal.vue';
 
   const modalDefaultData = {
     modalId: 'modal-mrwidget-issue',
@@ -12,10 +12,10 @@
   };
 
   export default {
-    name: 'MrWidgetReportIssues',
+    name: 'ReportIssues',
     components: {
-      modal,
-      icon,
+      Modal,
+      Icon,
     },
     props: {
       issues: {

ee/app/assets/stylesheets/pages/security_reports.scss

+.mr-widget-code-quality {
+  .code-quality-container {
+    border-top: 1px solid $gray-darker;
+    padding: $gl-padding-top;
+    background-color: $gray-light;
+    margin: $gl-padding -16px -16px;
+
+    .mr-widget-code-quality-info {
+      padding-left: 10px;
+    }
+
+    .mr-widget-dast-code {
+      margin-left: 26px;
+    }
+
+    .mr-widget-code-quality-list {
+      list-style: none;
+      padding: 0 1px;
+      margin: 0;
+      line-height: $code_line_height;
+
+      .btn-open-modal {
+        padding: 0 5px 4px;
+      }
+
+      .mr-widget-code-quality-list-item {
+        display: flex;
+      }
+
+      .mr-widget-code-quality-list-item-modal {
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .failed .mr-widget-code-quality-icon {
+        color: $red-500;
+      }
+
+      .success .mr-widget-code-quality-icon {
+        color: $green-500;
+      }
+
+      .neutral .mr-widget-code-quality-icon {
+        color: $theme-gray-700;
+      }
+
+      .mr-widget-code-quality-icon {
+        margin: -5px 4px 0 0;
+        fill: currentColor;
+      }
+    }
+  }
+}

spec/javascripts/vue_mr_widget/components/mr_widget_dast_modal_spec.js → spec/javascripts/vue_shared/components/security_reports/dast_modal_spec.js

 import Vue from 'vue';
-import modal from 'ee/vue_merge_request_widget/components/mr_widget_dast_modal.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import modal from 'ee/vue_shared/components/security_reports/dast_modal.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 
 describe('mr widget modal', () => {
   let vm;

spec/javascripts/vue_mr_widget/components/mr_widget_report_collapsible_section_spec.js → spec/javascripts/vue_shared/components/security_reports/report_collapsible_section_spec.js

 import Vue from 'vue';
-import mrWidgetCodeQuality from 'ee/vue_merge_request_widget/components/mr_widget_report_collapsible_section.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
-import { codequalityParsedIssues } from '../mock_data';
+import reportCollapsibleSection from 'ee/vue_shared/components/security_reports/report_collapsible_section.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+import { codequalityParsedIssues } from '../../../vue_mr_widget/mock_data';
 
-describe('Merge Request collapsible section', () => {
+describe('Report Collapsible section', () => {
   let vm;
-  let MRWidgetCodeQuality;
+  let ReportCollapsibleSection;
 
   beforeEach(() => {
-    MRWidgetCodeQuality = Vue.extend(mrWidgetCodeQuality);
+    ReportCollapsibleSection = Vue.extend(reportCollapsibleSection);
   });
 
   afterEach(() => {
@@ -17,7 +17,7 @@ describe('Merge Request collapsible section', () => {
 
   describe('when it is loading', () => {
     it('should render loading indicator', () => {
-      vm = mountComponent(MRWidgetCodeQuality, {
+      vm = mountComponent(ReportCollapsibleSection, {
         type: 'codequality',
         status: 'loading',
         loadingText: 'Loading codeclimate report',
@@ -30,7 +30,7 @@ describe('Merge Request collapsible section', () => {
 
   describe('with success status', () => {
     it('should render provided data', () => {
-      vm = mountComponent(MRWidgetCodeQuality, {
+      vm = mountComponent(ReportCollapsibleSection, {
         type: 'codequality',
         status: 'success',
         loadingText: 'Loading codeclimate report',
@@ -50,7 +50,7 @@ describe('Merge Request collapsible section', () => {
 
     describe('toggleCollapsed', () => {
       it('toggles issues', (done) => {
-        vm = mountComponent(MRWidgetCodeQuality, {
+        vm = mountComponent(ReportCollapsibleSection, {
           type: 'codequality',
           status: 'success',
           loadingText: 'Loading codeclimate report',
@@ -88,7 +88,7 @@ describe('Merge Request collapsible section', () => {
 
   describe('with failed request', () => {
     it('should render error indicator', () => {
-      vm = mountComponent(MRWidgetCodeQuality, {
+      vm = mountComponent(ReportCollapsibleSection, {
         type: 'codequality',
         status: 'error',
         loadingText: 'Loading codeclimate report',
@@ -101,7 +101,7 @@ describe('Merge Request collapsible section', () => {
 
   describe('With full report', () => {
     beforeEach(() => {
-      vm = mountComponent(MRWidgetCodeQuality, {
+      vm = mountComponent(ReportCollapsibleSection, {
         status: 'success',
         successText: 'SAST improved on 1 security vulnerability and degraded on 1 security vulnerability',
         type: 'security',

spec/javascripts/vue_mr_widget/components/mr_widget_report_issues_spec.js → spec/javascripts/vue_shared/components/security_reports/report_issues_spec.js

 import Vue from 'vue';
-import mrWidgetCodeQualityIssues from 'ee/vue_merge_request_widget/components/mr_widget_report_issues.vue';
-import mountComponent from '../../helpers/vue_mount_component_helper';
+import reportIssues from 'ee/vue_shared/components/security_reports/report_issues.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
 import {
   securityParsedIssues,
   codequalityParsedIssues,
   dockerReportParsed,
   parsedDast,
-} from '../mock_data';
+} from '../../../vue_mr_widget/mock_data';
 
-describe('merge request report issues', () => {
+describe('Report issues', () => {
   let vm;
-  let MRWidgetCodeQualityIssues;
+  let ReportIssues;
 
   beforeEach(() => {
-    MRWidgetCodeQualityIssues = Vue.extend(mrWidgetCodeQualityIssues);
+    ReportIssues = Vue.extend(reportIssues);
   });
 
   afterEach(() => {
@@ -23,7 +23,7 @@ describe('merge request report issues', () => {
   describe('for codequality issues', () => {
     describe('resolved issues', () => {
       beforeEach(() => {
-        vm = mountComponent(MRWidgetCodeQualityIssues, {
+        vm = mountComponent(ReportIssues, {
           issues: codequalityParsedIssues,
           type: 'codequality',
           status: 'success',
@@ -44,7 +44,7 @@ describe('merge request report issues', () => {
 
     describe('unresolved issues', () => {
       beforeEach(() => {
-        vm = mountComponent(MRWidgetCodeQualityIssues, {
+        vm = mountComponent(ReportIssues, {
           issues: codequalityParsedIssues,
           type: 'codequality',
           status: 'failed',
@@ -63,7 +63,7 @@ describe('merge request report issues', () => {
 
   describe('for security issues', () => {
     beforeEach(() => {
-      vm = mountComponent(MRWidgetCodeQualityIssues, {
+      vm = mountComponent(ReportIssues, {
         issues: securityParsedIssues,
         type: 'security',
         status: 'failed',
@@ -82,7 +82,7 @@ describe('merge request report issues', () => {
 
   describe('with location', () => {
     it('should render location', () => {
-      vm = mountComponent(MRWidgetCodeQualityIssues, {
+      vm = mountComponent(ReportIssues, {
         issues: securityParsedIssues,
         type: 'security',
         status: 'failed',
@@ -95,7 +95,7 @@ describe('merge request report issues', () => {
 
   describe('without location', () => {
     it('should not render location', () => {
-      vm = mountComponent(MRWidgetCodeQualityIssues, {
+      vm = mountComponent(ReportIssues, {
         issues: [{
           name: 'foo',
         }],
@@ -110,7 +110,7 @@ describe('merge request report issues', () => {
 
   describe('for docker issues', () => {
     beforeEach(() => {
-      vm = mountComponent(MRWidgetCodeQualityIssues, {
+      vm = mountComponent(ReportIssues, {
         issues: dockerReportParsed.unapproved,
         type: 'docker',
         status: 'failed',
@@ -145,7 +145,7 @@ describe('merge request report issues', () => {
 
   describe('for dast issues', () => {
     beforeEach(() => {
-      vm = mountComponent(MRWidgetCodeQualityIssues, {
+      vm = mountComponent(ReportIssues, {
         issues: parsedDast,
         type: 'dast',
         status: 'failed',