Improve CSS scroll and DRY the show all button

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

@@ -34,16 +34,21 @@ export default {
       required: false,
       default: () => [],
     },
-    isFullReportVisible: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
     type: {
       type: String,
       required: true,
     },
   },
+  data() {
+    return {
+      isFullReportVisible: false,
+    };
+  },
+  methods: {
+    openFullReport() {
+      this.isFullReportVisible = true;
+    },
+  },
 };
 </script>
 <template>
@@ -81,5 +86,14 @@ export default {
       status="success"
       :issues="resolvedIssues"
     />
+
+    <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>

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

@@ -78,7 +78,6 @@ export default {
     return {
       collapseText: __('Expand'),
       isCollapsed: true,
-      isFullReportVisible: false,
     };
   },
 
@@ -125,9 +124,6 @@ export default {
       const text = this.isCollapsed ? __('Expand') : __('Collapse');
       this.collapseText = text;
     },
-    openFullReport() {
-      this.isFullReportVisible = true;
-    },
   },
 };
 </script>
@@ -182,17 +178,7 @@ export default {
           :resolved-issues="resolvedIssues"
           :all-issues="allIssues"
           :type="type"
-          :is-full-report-visible="isFullReportVisible"
         />
-
-        <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>
       </slot>
     </div>
   </section>

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

@@ -207,17 +207,7 @@
           :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">
@@ -236,17 +226,7 @@
           :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">

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

 .split-report-section {
   border-bottom: 1px solid $gray-darker;
 
-  .report-block-list {
+  .report-block-container {
     max-height: 500px;
     overflow: auto;
   }

spec/javascripts/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -213,8 +213,8 @@ describe('Grouped security reports app', () => {
 
     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();
+        expect(vm.$el.querySelector('js-sast-issue-list .js-expand-full-list')).not.toBeNull();
+        vm.$el.querySelector('.js-sast-issue-list .js-expand-full-list').click();
 
         vm
           .$nextTick()
@@ -230,8 +230,8 @@ describe('Grouped security reports app', () => {
 
     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();
+        expect(vm.$el.querySelector('js-dss-issue-list .js-expand-full-list')).not.toBeNull();
+        vm.$el.querySelector('js-dss-issue-list .js-expand-full-list').click();
 
         vm
           .$nextTick()