Changes after review

app/assets/javascripts/pipelines/components/security_reports/sast_report_summary_widget.vue

 <script>
-  import { sprintf, n__, __ } from '~/locale';
+  import { sprintf, s__ } from '~/locale';
   import ciIcon from '~/vue_shared/components/ci_icon.vue';
 
   export default {
@@ -20,21 +20,22 @@
     },
     computed: {
       summarySastText() {
+        const text = s__('ciReport|SAST detected %{link}');
+        let link;
+
         if (this.unresolvedIssues.length) {
-          return n__(
-            sprintf('SAST detected %{link}', {
-              link: `<a href=${this.link} class="prepend-left-5">%d security vulnerability</a>`,
-            }, false),
-            sprintf('SAST detected %{link}', {
-              link: `<a href=${this.link} class="prepend-left-5">%d security vulnerabilities</a>`,
-            }, false),
-            this.unresolvedIssues.length,
-          );
+          link = this.unresolvedIssues.length > 1 ?
+            this.getLink(sprintf(
+              s__('ciReport|%{d} security vulnerabilities'),
+              { d: this.unresolvedIssues.length },
+              true,
+            )) :
+            this.getLink(s__('ciReport|1 security vulnerability'));
+        } else {
+          link = this.getLink(s__('ciReport|no security vulnerabilities'));
         }
 
-        return sprintf(__('SAST detected %{link} '), {
-          link: `<a href=${this.link} class="prepend-left-5">no security vulnerabilities</a>`,
-        }, false);
+        return sprintf(text, { link }, false);
       },
       statusIcon() {
         if (this.unresolvedIssues) {
@@ -49,6 +50,11 @@
         };
       },
     },
+    methods: {
+      getLink(text) {
+        return `<a href="${this.link}" class="prepend-left-5">${text}</a>`;
+      },
+    },
   };
 </script>
 <template>

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -60,7 +60,7 @@ document.addEventListener('DOMContentLoaded', () => {
       postAction(action) {
         this.mediator.service.postAction(action.path)
           .then(() => this.mediator.refreshPipeline())
-          .catch(() => Flash('An error occurred while making the request.'));
+          .catch(() => Flash(__('An error occurred while making the request.')));
       },
     },
     render(createElement) {
@@ -89,7 +89,9 @@ document.addEventListener('DOMContentLoaded', () => {
     mediator.fetchSastReport(endpoint, blobPath)
       .then(() => {
         // update the badge
-        document.querySelector('.js-sast-counter').textContent = mediator.store.state.sast.securityReports.newIssues.length;
+        const badge = document.querySelector('.js-sast-counter');
+        badge.textContent = mediator.store.state.sast.securityReports.newIssues.length;
+        badge.classList.remove('hidden');
       })
       .catch(() => {
         Flash(__('Something when wrong while fetching SAST.'));

app/views/projects/pipelines/_info.html.haml

@@ -37,5 +37,4 @@
       = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")
 
     - if sast_artifact
-      .js-sast-summary{ data: { tab_path: sast_tab_path }}
-      
\ No newline at end of file
+      .js-sast-summary{ data: { tab_path: sast_tab_path } }

app/views/projects/pipelines/_with_tabs.html.haml

@@ -21,7 +21,7 @@
       %li.js-security-tab-link
         = link_to security_project_pipeline_path(@project, @pipeline), data: { target: '#js-tab-security', action: 'security', toggle: 'tab' }, class: 'security-tab' do
           = _("Security report")
-          %span.badge.js-sast-counter
+          %span.badge.js-sast-counter.hidden
 
 .tab-content
   #js-tab-pipeline.tab-pane

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

-.report-block {
-  .report-block-container {
+.report-block-container {
   border-top: 1px solid $gray-darker;
   padding: $gl-padding-top;
   background-color: $gray-light;
   margin: $gl-padding #{-$gl-padding} #{-$gl-padding};
-  }
+}
 
-  .report-block-dast-code {
+.report-block-dast-code {
   margin-left: 26px;
-  }
+}
 
-  .report-block-list {
+.report-block-list {
   list-style: none;
   padding: 0 1px;
   margin: 0;
@@ -45,7 +44,6 @@
     margin: -5px 4px 0 0;
     fill: currentColor;
   }
-  }
 }
 
 .pipeline-tab-content {