Update DAST Modal Download Handling

This commit will remove the download button
from the Dast Modal and add the download
link to the Banner which is
advertising to Download the DAST-Report

ee/app/assets/javascripts/vue_shared/security_reports/components/dast_modal.vue

 <script>
-import { GlModal, GlIcon, GlSprintf, GlTruncate } from '@gitlab/ui';
+import { GlModal, GlIcon, GlSprintf, GlTruncate, GlLink } from '@gitlab/ui';
 import { n__, __ } from '~/locale';
 
 export default {
-  components: { GlModal, GlIcon, GlSprintf, GlTruncate },
+  components: { GlModal, GlIcon, GlSprintf, GlTruncate, GlLink },
   props: {
     scannedUrls: {
       required: true,
@@ -33,29 +33,11 @@ export default {
       // show only 15 scanned urls
       return this.scannedUrls.slice(0, 15);
     },
-    downloadButton() {
-      const buttonAttrs = {
-        text: __('Download as CSV'),
-        attributes: {
-          variant: 'success',
-          class: 'gl-button btn-success-secondary',
-          href: this.downloadLink,
-          download: '',
-          'data-testid': 'download-button',
-        },
-      };
-      return this.downloadLink ? buttonAttrs : null;
-    },
   },
 };
 </script>
 <template>
-  <gl-modal
-    :title="title"
-    title-tag="h5"
-    v-bind="$options.modal"
-    :action-secondary="downloadButton"
-  >
+  <gl-modal :title="title" title-tag="h5" v-bind="$options.modal">
     <!-- heading -->
     <div class="row gl-text-gray-400">
       <div class="col-1">{{ __('Method') }}</div>
@@ -80,9 +62,16 @@ export default {
       <b class="gl-vertical-align-middle">
         <gl-sprintf
           :message="
-            __('To view all %{scannedResourcesCount} scanned URLs, please download the CSV file')
+            __(
+              'To view all %{scannedResourcesCount} scanned URLs, %{linkStart}please download the CSV file%{linkEnd}',
+            )
           "
         >
+          <template #link="{ content }">
+            <gl-link download :href="downloadLink" data-testid="download-link">
+              {{ content }}
+            </gl-link>
+          </template>
           <template #scannedResourcesCount>
             {{ scannedResourcesCount }}
           </template>

ee/changelogs/unreleased/DAST-modal-ux-improvement.yml

+---
+title: Enhance User-Experience on Dast-report Download Button
+merge_request: 46681
+author:
+type: changed

ee/spec/frontend/vue_shared/security_reports/components/dast_modal_spec.js

 import { shallowMount } from '@vue/test-utils';
 import Component from 'ee/vue_shared/security_reports/components/dast_modal.vue';
-import { GlModal } from '@gitlab/ui';
+import { GlModal, GlSprintf } from '@gitlab/ui';
 
 describe('DAST Modal', () => {
   let wrapper;
@@ -11,7 +11,7 @@ describe('DAST Modal', () => {
     downloadLink: 'https://gitlab.com',
   };
 
-  const findDownloadButton = () => wrapper.find('[data-testid="download-button"]');
+  const findDownloadLink = () => wrapper.find('[data-testid="download-link"]');
 
   const createWrapper = propsData => {
     wrapper = shallowMount(Component, {
@@ -21,6 +21,7 @@ describe('DAST Modal', () => {
       },
       stubs: {
         GlModal,
+        GlSprintf,
       },
     });
   };
@@ -34,9 +35,12 @@ describe('DAST Modal', () => {
   });
 
   it('has the download button with required attrs', () => {
-    expect(findDownloadButton().exists()).toBe(true);
-    expect(findDownloadButton().attributes('href')).toBe(defaultProps.downloadLink);
-    expect(findDownloadButton().attributes('download')).toBeDefined();
+    const downloadLink = findDownloadLink();
+
+    expect(downloadLink.attributes()).toMatchObject({
+      href: defaultProps.downloadLink,
+      download: expect.anything(),
+    });
   });
 
   it('should contain the dynamic title', () => {
@@ -46,7 +50,7 @@ describe('DAST Modal', () => {
 
   it('should not show download button when link is not present', () => {
     createWrapper({ downloadLink: '' });
-    expect(findDownloadButton().exists()).toBe(false);
+    expect(findDownloadLink().exists()).toBe(false);
   });
 
   it('scanned urls should be limited to 15', () => {

locale/gitlab.pot

@@ -9709,9 +9709,6 @@ msgstr ""
 msgid "Download as"
 msgstr ""
 
-msgid "Download as CSV"
-msgstr ""
-
 msgid "Download codes"
 msgstr ""
 
@@ -28270,7 +28267,7 @@ msgstr ""
 msgid "To use Gitpod you must first enable the feature in the integrations section of your %{user_prefs}."
 msgstr ""
 
-msgid "To view all %{scannedResourcesCount} scanned URLs, please download the CSV file"
+msgid "To view all %{scannedResourcesCount} scanned URLs, %{linkStart}please download the CSV file%{linkEnd}"
 msgstr ""
 
 msgid "To view instance-level analytics, ask an admin to turn on %{docLinkStart}usage ping%{docLinkEnd}."