Adjust Button Sizes on Secure MR Widget

This commit solves https://gitlab.com/gitlab-org/gitlab/-/issues/331534/
it adjustes the button size on the DAST and coverage-fuzzing
row on the Secure MR Widget.

Changelog: changed

app/assets/javascripts/vue_shared/security_reports/components/security_report_download_dropdown.vue

 <script>
-import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { GlDropdown, GlDropdownItem, GlTooltipDirective as GlTooltip } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
@@ -8,6 +8,9 @@ export default {
     GlDropdown,
     GlDropdownItem,
   },
+  directives: {
+    GlTooltip,
+  },
   props: {
     artifacts: {
       type: Array,
@@ -31,9 +34,11 @@ export default {
 
 <template>
   <gl-dropdown
-    :text="s__('SecurityReports|Download results')"
+    v-gl-tooltip
+    :title="s__('SecurityReports|Download results')"
     :loading="loading"
     icon="download"
+    size="small"
     right
   >
     <gl-dropdown-item

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

 <script>
-import { GlButton, GlSprintf, GlLink, GlModalDirective } from '@gitlab/ui';
+import {
+  GlButton,
+  GlSprintf,
+  GlLink,
+  GlModalDirective,
+  GlTooltipDirective as GlTooltip,
+} from '@gitlab/ui';
 import { once } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import { componentNames } from 'ee/reports/components/issue_body';
@@ -46,6 +52,7 @@ export default {
   },
   directives: {
     'gl-modal': GlModalDirective,
+    GlTooltip,
   },
   mixins: [securityReportsMixin, vulnerabilityModalMixin()],
   apollo: {
@@ -607,14 +614,16 @@ export default {
               />
             </template>
             <template v-else-if="dastDownloadLink">
-              <gl-link
+              <gl-button
+                v-gl-tooltip
+                :title="s__('SecurityReports|Download scanned resources')"
                 download
+                size="small"
+                icon="download"
                 :href="dastDownloadLink"
                 class="gl-ml-1"
                 data-testid="download-link"
-              >
-                ({{ s__('SecurityReports|Download scanned resources') }})
-              </gl-link>
+              />
             </template>
           </summary-row>
           <grouped-issues-list

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

@@ -627,7 +627,7 @@ describe('Grouped security reports app', () => {
       return waitForMutation(wrapper.vm.$store, types.RECEIVE_DAST_DIFF_SUCCESS).then(() => {
         const findDownloadLink = wrapper.find('[data-testid="download-link"]');
 
-        expect(wrapper.text()).toContain('Download scanned resources');
+        expect(findDownloadLink.vm.$el.querySelector('[data-testid="download-icon"]')).toExist();
         expect(findDownloadLink.exists()).toBe(true);
         expect(findDownloadLink.attributes('href')).toBe('http://test');
       });