Full list of vulnerabilities

app/assets/javascripts/vue_shared/components/reports/issues_list.vue

@@ -33,27 +33,12 @@ export default {
       required: false,
       default: () => [],
     },
-    allIssues: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     component: {
       type: String,
       required: false,
       default: '',
     },
   },
-  data() {
-    return {
-      isFullReportVisible: false,
-    };
-  },
-  methods: {
-    openFullReport() {
-      this.isFullReportVisible = true;
-    },
-  },
 };
 </script>
 <template>
@@ -67,14 +52,6 @@ export default {
       class="js-mr-code-new-issues"
     />
-    <issues-block
-      v-if="isFullReportVisible"
-      :component="component"
-      :issues="allIssues"
-      :status="$options.failed"
-      class="js-mr-code-all-issues"
-    />
-
     <issues-block
       v-if="neutralIssues.length"
       :component="component"
@@ -90,14 +67,5 @@ export default {
       :status="$options.success"
       class="js-mr-code-resolved-issues"
     />
-
-    <button
-      v-if="allIssues.length && !isFullReportVisible"
-      type="button"
-      class="btn-link btn-blank prepend-left-10 js-expand-full-list break-link"
-      @click="openFullReport"
-    >
-      {{ s__("ciReport|Show complete code vulnerabilities report") }}
-    </button>
   </div>
 </template>

app/assets/javascripts/vue_shared/components/reports/report_section.vue

@@ -59,11 +59,6 @@ export default {
       required: false,
       default: () => [],
     },
-    allIssues: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
     infoText: {
       type: [String, Boolean],
       required: false,
@@ -142,18 +137,10 @@ export default {
 </script>
 <template>
   <section class="media-section">
-    <div
-      class="media"
-    >
-      <status-icon
-        :status="statusIconName"
-      />
-      <div
-        class="media-body space-children d-flex flex-align-self-center"
-      >
-        <span
-          class="js-code-text code-text"
-        >
+    <div class="media">
+      <status-icon :status="statusIconName" />
+      <div class="media-body space-children d-flex flex-align-self-center">
+        <span class="js-code-text code-text">
           {{ headerText }}
           <popover
@@ -163,10 +150,12 @@ export default {
           />
         </span>
+        <slot name="actionButtons"></slot>
+
         <button
           v-if="isCollapsible"
           type="button"
-          class="js-collapse-btn btn bt-default float-right btn-sm"
+          class="js-collapse-btn btn float-right btn-sm"
           @click="toggleCollapsed"
         >
           {{ collapseText }}
@@ -184,7 +173,6 @@ export default {
           :unresolved-issues="unresolvedIssues"
           :resolved-issues="resolvedIssues"
           :neutral-issues="neutralIssues"
-          :all-issues="allIssues"
           :component="component"
         />
       </slot>

changelogs/unreleased/full-list-of-vulnerabilities-5239.yml

+---
+title: Removes "show all" on reports and adds an actionButtons slot
+merge_request: 20855
+author:
+type: changed

locale/gitlab.pot

@@ -8,8 +8,6 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-07-10 16:02-0700\n"
-"PO-Revision-Date: 2018-07-10 16:02-0700\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -6007,9 +6005,6 @@ msgstr ""
 msgid "branch name"
 msgstr ""
-msgid "ciReport|Show complete code vulnerabilities report"
-msgstr ""
-
 msgid "command line instructions"
 msgstr ""

spec/javascripts/helpers/vue_mount_component_helper.js

@@ -15,4 +15,14 @@ export const mountComponentWithStore = (Component, { el, props, store }) =>
     propsData: props || {},
   }).$mount(el);
+export const mountComponentWithSlots = (Component, { props, slots }) => {
+  const component = new Component({
+    propsData: props || {},
+  });
+
+  component.$slots = slots;
+
+  return component.$mount();
+};
+
 export default mountComponent;

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

 import Vue from 'vue';
 import reportSection from '~/vue_shared/components/reports/report_section.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent, { mountComponentWithSlots } from 'spec/helpers/vue_mount_component_helper';
 describe('Report section', () => {
   let vm;
@@ -171,4 +171,27 @@ describe('Report section', () => {
       expect(vm.$el.textContent.trim()).toEqual('Failed to load codeclimate report');
     });
   });
+
+  describe('with action buttons passed to the slot', () => {
+    beforeEach(() => {
+      vm = mountComponentWithSlots(ReportSection, {
+        props: {
+          status: 'SUCCESS',
+          successText: 'success',
+          hasIssues: true,
+        },
+        slots: {
+          actionButtons: ['Action!'],
+        },
+      });
+    });
+
+    it('should render the passed button', () => {
+      expect(vm.$el.textContent.trim()).toContain('Action!');
+    });
+
+    it('should still render the expand/collapse button', () => {
+      expect(vm.$el.querySelector('.js-collapse-btn').textContent.trim()).toEqual('Expand');
+    });
+  });
 });