Merge branch 'jj-ramirez/secure-btn-fix' into 'master'

Replacing View Full Report button with GitLab UI

Closes #229363

See merge request gitlab-org/gitlab!37236

changelogs/unreleased/jj-ramirez-secure-btn-fix.yml

+---
+title: Replacing View Full Report button with GitLab UI
+merge_request: 37236
+author:
+type: changed

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

@@ -7,12 +7,11 @@ import ReportSection from '~/reports/components/report_section.vue';
 import SummaryRow from '~/reports/components/summary_row.vue';
 import Tracking from '~/tracking';
 import GroupedIssuesList from '~/reports/components/grouped_issues_list.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 import IssueModal from './components/modal.vue';
 import DastModal from './components/dast_modal.vue';
 import securityReportsMixin from './mixins/security_report_mixin';
 import createStore from './store';
-import { GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
 import { mrStates } from '~/mr_popover/constants';
 import { trackMrSecurityReportDetails } from 'ee/vue_shared/security_reports/store/constants';
 import { fetchPolicies } from '~/lib/graphql';
@@ -27,10 +26,10 @@ export default {
     SummaryRow,
     SecuritySummary,
     IssueModal,
-    Icon,
     GlSprintf,
     GlLink,
     DastModal,
+    GlButton,
   },
   directives: {
     'gl-modal': GlModalDirective,
@@ -368,12 +367,14 @@ export default {
     </template>
 
     <template v-if="pipelinePath" #actionButtons>
-      <div>
-        <a :href="securityTab" target="_blank" class="btn btn-default btn-sm float-right gl-mr-3">
-          <span>{{ s__('ciReport|View full report') }}</span>
-          <icon :size="16" name="external-link" />
-        </a>
-      </div>
+      <gl-button
+        :href="securityTab"
+        target="_blank"
+        icon="external-link"
+        class="gl-mr-3 report-btn"
+      >
+        {{ s__('ciReport|View full report') }}
+      </gl-button>
     </template>
 
     <template v-if="isMRActive && isBaseSecurityReportOutOfDate" #subHeading>

ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -355,7 +355,14 @@ describe('Grouped security reports app', () => {
     });
 
     it('should calculate the security tab path', () => {
-      expect(wrapper.vm.securityTab).toEqual(`${pipelinePath}/security`);
+      const button = wrapper.find('.report-btn');
+      expect(button.attributes('target')).toBe('_blank');
+      expect(button.attributes('href')).toBe(`${pipelinePath}/security`);
+    });
+
+    it('should render view full report button', () => {
+      const button = wrapper.find('.report-btn');
+      expect(button.exists()).toBe(true);
     });
   });