Render show all report for sast and dependency scanning when all issues array is filled

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

@@ -89,6 +89,12 @@
     sast: SAST,
     dast: DAST,
     sastContainer: SAST_CONTAINER,
+    data() {
+      return {
+        isSastFullReportVisible: false,
+        isDependencyScanningFullReportVisible: false,
+      };
+    },
     computed: {
       ...mapState(['sast', 'sastContainer', 'dast', 'dependencyScanning', 'summaryCounts']),
       ...mapGetters([
@@ -163,6 +169,12 @@
         'fetchDastReports',
         'fetchDependencyScanningReports',
       ]),
+      openSASTFullReport() {
+        this.isSastFullReportVisible = true;
+      },
+      openDependencyScanningFullReport() {
+        this.isDependencyScanningFullReportVisible = true;
+      },
     },
   };
 </script>
@@ -189,13 +201,23 @@
         />
 
         <issues-list
-          class="report-block-group-list"
-          v-if="sast.newIssues.length"
+          class="js-sast-issue-list report-block-group-list"
+          v-if="sast.newIssues.length || sast.resolvedIssues.length || sast.allIssues.length"
           :unresolved-issues="sast.newIssues"
           :resolved-issues="sast.resolvedIssues"
           :all-issues="sast.allIssues"
           :type="$options.sast"
+          :is-full-report-visible="isSastFullReportVisible"
         />
+
+        <button
+          v-if="sast.allIssues.length && !isSastFullReportVisible"
+          type="button"
+          class="btn-link btn-blank prepend-left-10 js-expand-full-list-sast break-link"
+          @click="openSASTFullReport"
+        >
+          {{ s__("ciReport|Show complete code vulnerabilities report") }}
+        </button>
       </template>
 
       <template v-if="dependencyScanningHeadPath">
@@ -207,13 +229,24 @@
         />
 
         <issues-list
-          class="report-block-group-list"
-          v-if="dependencyScanning.newIssues.length"
+          class="js-dss-issue-list report-block-group-list"
+          v-if="dependencyScanning.newIssues.length ||
+          dependencyScanning.resolvedIssues.length || dependencyScanning.allIssues.length"
           :unresolved-issues="dependencyScanning.newIssues"
           :resolved-issues="dependencyScanning.resolvedIssues"
           :all-issues="dependencyScanning.allIssues"
           :type="$options.sast"
+          :is-full-report-visible="isDependencyScanningFullReportVisible"
         />
+
+        <button
+          v-if="dependencyScanning.allIssues.length && !isDependencyScanningFullReportVisible"
+          type="button"
+          class="btn-link btn-blank prepend-left-10 js-expand-full-list-dss break-link"
+          @click="openDependencyScanningFullReport"
+        >
+          {{ s__("ciReport|Show complete code vulnerabilities report") }}
+        </button>
       </template>
 
       <template v-if="sastContainerHeadPath">
@@ -226,7 +259,7 @@
 
         <issues-list
           class="report-block-group-list"
-          v-if="sastContainer.newIssues.length"
+          v-if="sastContainer.newIssues.length || sastContainer.resolvedIssues.length"
           :unresolved-issues="sastContainer.newIssues"
           :neutral-issues="sastContainer.resolvedIssues"
           :type="$options.sastContainer"
@@ -243,7 +276,7 @@
 
         <issues-list
           class="report-block-group-list"
-          v-if="dast.newIssues.length"
+          v-if="dast.newIssues.length || dast.resolvedIssues.length"
           :unresolved-issues="dast.newIssues"
           :resolved-issues="dast.resolvedIssues"
           :type="$options.dast"

ee/changelogs/unreleased/45340-sast-all-issues.yml

+---
+title: Render show all report for sast and dependency scanning
+merge_request: 5363
+author:
+type: fixed

spec/javascripts/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -11,6 +11,8 @@ import {
   dockerBaseReport,
   dast,
   dastBase,
+  sastHeadAllIssues,
+  sastBaseAllIssues,
 } from './mock_data';
 
 describe('Grouped security reports app', () => {
@@ -72,9 +74,15 @@ describe('Grouped security reports app', () => {
         );
         expect(vm.$el.querySelector('.js-collapse-btn').textContent.trim()).toEqual('Expand');
 
-        expect(removeBreakLine(vm.$el.textContent)).toContain('SAST resulted in error while loading results');
-        expect(removeBreakLine(vm.$el.textContent)).toContain('Dependency scanning resulted in error while loading results');
-        expect(vm.$el.textContent).toContain('Container scanning resulted in error while loading results');
+        expect(removeBreakLine(vm.$el.textContent)).toContain(
+          'SAST resulted in error while loading results',
+        );
+        expect(removeBreakLine(vm.$el.textContent)).toContain(
+          'Dependency scanning resulted in error while loading results',
+        );
+        expect(vm.$el.textContent).toContain(
+          'Container scanning resulted in error while loading results',
+        );
         expect(vm.$el.textContent).toContain('DAST resulted in error while loading results');
         done();
       }, 0);
@@ -161,12 +169,80 @@ describe('Grouped security reports app', () => {
         );
         expect(vm.$el.querySelector('.js-collapse-btn').textContent.trim()).toEqual('Expand');
 
-        expect(removeBreakLine(vm.$el.textContent)).toContain('SAST detected 2 new vulnerabilities and 1 fixed vulnerability');
-        expect(removeBreakLine(vm.$el.textContent)).toContain('Dependency scanning detected 2 new vulnerabilities and 1 fixed vulnerability');
+        expect(removeBreakLine(vm.$el.textContent)).toContain(
+          'SAST detected 2 new vulnerabilities and 1 fixed vulnerability',
+        );
+        expect(removeBreakLine(vm.$el.textContent)).toContain(
+          'Dependency scanning detected 2 new vulnerabilities and 1 fixed vulnerability',
+        );
         expect(vm.$el.textContent).toContain('Container scanning detected 1 new vulnerability');
         expect(vm.$el.textContent).toContain('DAST detected 1 new vulnerability');
         done();
       }, 0);
     });
   });
+
+  describe('with all issues for sast and dependency scanning', () => {
+    beforeEach(() => {
+      mock.onGet('sast_head.json').reply(200, sastHeadAllIssues);
+      mock.onGet('sast_base.json').reply(200, sastBaseAllIssues);
+      mock.onGet('dast_head.json').reply(200, dast);
+      mock.onGet('dast_base.json').reply(200, dastBase);
+      mock.onGet('sast_container_head.json').reply(200, dockerReport);
+      mock.onGet('sast_container_base.json').reply(200, dockerBaseReport);
+      mock.onGet('dss_head.json').reply(200, sastHeadAllIssues);
+      mock.onGet('dss_base.json').reply(200, sastBaseAllIssues);
+
+      vm = mountComponent(Component, {
+        headBlobPath: 'path',
+        baseBlobPath: 'path',
+        sastHeadPath: 'sast_head.json',
+        sastBasePath: 'sast_base.json',
+        dastHeadPath: 'dast_head.json',
+        dastBasePath: 'dast_base.json',
+        sastContainerHeadPath: 'sast_container_head.json',
+        sastContainerBasePath: 'sast_container_base.json',
+        dependencyScanningHeadPath: 'dss_head.json',
+        dependencyScanningBasePath: 'dss_base.json',
+        sastHelpPath: 'path',
+        sastContainerHelpPath: 'path',
+        dastHelpPath: 'path',
+        dependencyScanningHelpPath: 'path',
+      });
+    });
+
+    it('render show all issues button for sast', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-expand-full-list-sast')).not.toBeNull();
+        vm.$el.querySelector('.js-expand-full-list-sast').click();
+
+        vm
+          .$nextTick()
+          .then(() => {
+            expect(vm.$el.querySelector('.js-sast-issue-list').textContent).toContain(
+              sastHeadAllIssues[0].message,
+            );
+          })
+          .then(done)
+          .catch(done.fail);
+      }, 0);
+    });
+
+    it('render show all issues button for dependency scanning', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-expand-full-list-dss')).not.toBeNull();
+        vm.$el.querySelector('.js-expand-full-list-dss').click();
+
+        vm
+          .$nextTick()
+          .then(() => {
+            expect(vm.$el.querySelector('.js-dss-issue-list').textContent).toContain(
+              sastHeadAllIssues[0].message,
+            );
+          })
+          .then(done)
+          .catch(done.fail);
+      }, 0);
+    });
+  });
 });