Fix broken icon + prevent page reload

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

@@ -13,10 +13,6 @@
         required: false,
         default: () => ([]),
       },
-      link: {
-        type: String,
-        required: true,
-      },
     },
     computed: {
       sastText() {
@@ -36,7 +32,7 @@
         return s__('ciReport|no security vulnerabilities');
       },
       statusIcon() {
-        if (this.unresolvedIssues) {
+        if (this.unresolvedIssues.length) {
           return {
             group: 'warning',
             icon: 'status_warning',
@@ -69,13 +65,13 @@
       class="prepend-left-10 flex flex-align-self-center"
     >
       {{ sastText }}
-      <a
-        :href="link"
-        class="prepend-left-5"
+      <button
+        type="button"
+        class="btn-link btn-blank prepend-left-5"
         @click="openTab"
       >
         {{ sastLink }}
-      </a>
+      </button>
     </span>
   </div>
 </template>

app/assets/javascripts/pipelines/pipeline_details_bundle.js

@@ -89,9 +89,11 @@ document.addEventListener('DOMContentLoaded', () => {
     mediator.fetchSastReport(endpoint, blobPath)
       .then(() => {
         // update the badge
-        const badge = document.querySelector('.js-sast-counter');
-        badge.textContent = mediator.store.state.securityReports.sast.newIssues.length;
-        badge.classList.remove('hidden');
+        if (mediator.store.state.securityReports.sast.newIssues.length) {
+          const badge = document.querySelector('.js-sast-counter');
+          badge.textContent = mediator.store.state.securityReports.sast.newIssues.length;
+          badge.classList.remove('hidden');
+        }
       })
       .catch(() => {
         Flash(__('Something went wrong while fetching SAST.'));
@@ -113,7 +115,6 @@ document.addEventListener('DOMContentLoaded', () => {
         return createElement('sast-summary-widget', {
           props: {
             unresolvedIssues: this.mediator.store.state.securityReports.sast.newIssues,
-            link: sastSummary.dataset.tabPath,
           },
         });
       },

spec/javascripts/pipelines/security_reports/sast_report_summary_widget_spec.js

@@ -19,26 +19,24 @@ describe('SAST report summary widget', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
         unresolvedIssues: parsedSastIssuesHead,
-        link: 'group/project/pipelines/2/security',
       });
     });
 
-    it('renders summary text with link for the security tab', () => {
+    it('renders summary text with warning icon', () => {
       expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('SAST degraded on 2 security vulnerabilities');
-      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('group/project/pipelines/2/security');
+      expect(vm.$el.querySelector('span').classList).toContain('ci-status-icon-warning');
     });
   });
 
   describe('without vulnerabilities', () => {
     beforeEach(() => {
       vm = mountComponent(Component, {
-        link: 'group/project/pipelines/2/security',
       });
     });
 
-    it('render summary text with link for the security tab', () => {
+    it('render summary text with success icon', () => {
       expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('SAST detected no security vulnerabilities');
-      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual('group/project/pipelines/2/security');
+      expect(vm.$el.querySelector('span').classList).toContain('ci-status-icon-success');
     });
   });
 });