Merge branch 'DAST-modal-ux-improvement' into 'master'

Dast modal UX improvement

See merge request gitlab-org/gitlab!46681

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

@@ -9699,9 +9699,6 @@ msgstr ""
 msgid "Download as"
 msgstr ""
 
-msgid "Download as CSV"
-msgstr ""
-
 msgid "Download codes"
 msgstr ""
 
@@ -28278,7 +28275,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}."