Open in new tab "Learn more about" links for security scanning popovers

ee/app/assets/javascripts/vue_shared/security_reports/mixins/security_report_mixin.js

 import { sprintf, s__ } from '~/locale';
 
+// Securely open external links in a new tab.
+function getLinkStartTag(url) {
+  return `<a href="${url}" target="_blank" rel="noopener noreferrer">`;
+}
+
+// Add in the external link icon at the end of every link.
+const linkEndTag = '<i class="fa fa-external-link" aria-hidden="true"></i></a>';
+
 export default {
   computed: {
     sastPopover() {
@@ -10,8 +18,8 @@ export default {
         content: sprintf(
           s__('ciReport|%{linkStartTag}Learn more about SAST %{linkEndTag}'),
           {
-            linkStartTag: `<a href="${this.sastHelpPath}">`,
-            linkEndTag: '</a>',
+            linkStartTag: getLinkStartTag(this.sastHelpPath),
+            linkEndTag,
           },
           false,
         ),
@@ -25,8 +33,8 @@ export default {
         content: sprintf(
           s__('ciReport|%{linkStartTag}Learn more about Container Scanning %{linkEndTag}'),
           {
-            linkStartTag: `<a href="${this.sastContainerHelpPath}">`,
-            linkEndTag: '</a>',
+            linkStartTag: getLinkStartTag(this.sastContainerHelpPath),
+            linkEndTag,
           },
           false,
         ),
@@ -40,8 +48,8 @@ export default {
         content: sprintf(
           s__('ciReport|%{linkStartTag}Learn more about DAST %{linkEndTag}'),
           {
-            linkStartTag: `<a href="${this.dastHelpPath}">`,
-            linkEndTag: '</a>',
+            linkStartTag: getLinkStartTag(this.dastHelpPath),
+            linkEndTag,
           },
           false,
         ),
@@ -55,8 +63,8 @@ export default {
         content: sprintf(
           s__('ciReport|%{linkStartTag}Learn more about Dependency Scanning %{linkEndTag}'),
           {
-            linkStartTag: `<a href="${this.dependencyScanningHelpPath}">`,
-            linkEndTag: '</a>',
+            linkStartTag: getLinkStartTag(this.dependencyScanningHelpPath),
+            linkEndTag,
           },
           false,
         ),

ee/changelogs/unreleased/13333-secure-open-help-links-in-new-tab.yml

+---
+title: Make "Learn more about" links for security scanning popovers on merge request
+  page open in new tab
+merge_request: 13333
+author: Daniel Tian
+type: changed

ee/spec/frontend/vue_shared/security_reports/mixins/security_report_mixin_spec.js

+import { shallowMount } from '@vue/test-utils';
+import mixin from 'ee/vue_shared/security_reports/mixins/security_report_mixin';
+
+describe('securityReportMixin', () => {
+  it.each`
+    key                     | link
+    ${'sast'}               | ${'http://fake.url/sast/help/path'}
+    ${'sastContainer'}      | ${'http://fake.url/sast/container/help/path'}
+    ${'dast'}               | ${'http://fake.url/dast/help/path'}
+    ${'dependencyScanning'} | ${'http://fake.url/dependency/scanning/help/path'}
+  `('generates correct external link with icon', ({ key, link }) => {
+    // Create a fake component for the mixin with the mock help path data value.
+    const component = {
+      render() {},
+      data: () => ({ [`${key}HelpPath`]: link }), // 'key' -> 'keyHelpPath'
+      mixins: [mixin],
+    };
+
+    // Mount the component so that the mixin's computed properties are evaluated.
+    const { vm } = shallowMount(component);
+
+    // Get the link that the mixin generated.
+    const mixinLink = vm[`${key}Popover`].content; // 'key' -> 'keyPopover'
+
+    // Check that for each link, the expected strings exist.
+    expect(mixinLink).toContain(`href="${link}`);
+    expect(mixinLink).toContain('target="_blank"');
+    expect(mixinLink).toContain('rel="noopener noreferrer"');
+    expect(mixinLink).toContain('<i class="fa fa-external-link" aria-hidden="true"></i>');
+  });
+});