Smartly truncate URLs in DAST Modal

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

 <script>
-import { GlModal, GlIcon, GlSprintf } from '@gitlab/ui';
+import { GlModal, GlIcon, GlSprintf, GlTruncate } from '@gitlab/ui';
 import { n__, __ } from '~/locale';
 
 export default {
-  components: { GlModal, GlIcon, GlSprintf },
+  components: { GlModal, GlIcon, GlSprintf, GlTruncate },
   props: {
     scannedUrls: {
       required: true,
@@ -40,7 +40,7 @@ export default {
           variant: 'success',
           class: 'btn-secondary gl-button',
           href: this.downloadLink,
-          download: true,
+          download: '',
           'data-testid': 'download-button',
         },
       };
@@ -56,22 +56,18 @@ export default {
     v-bind="$options.modal"
     :action-secondary="downloadButton"
   >
-    <div class="gl-px-3">
     <!-- heading -->
-      <div class="gl-display-flex gl-text-gray-600">
-        <div class="gl-w-11">{{ __('Method') }}</div>
-        <div class="gl-flex-fill-1">{{ __('URL') }}</div>
+    <div class="row gl-text-gray-600">
+      <div class="col-1">{{ __('Method') }}</div>
+      <div class="col-11">{{ __('URL') }}</div>
     </div>
     <hr class="gl-my-3" />
 
     <!-- rows -->
-      <div v-for="(url, index) in limitedScannedUrls" :key="index" class="gl-display-flex gl-my-2">
-        <div class="gl-w-11">{{ url.requestMethod.toUpperCase() }}</div>
-        <div
-          class="gl-flex-fill-1 gl-overflow-hidden gl-white-space-nowrap gl-text-overflow-ellipsis"
-          data-testid="dast-scanned-url"
-        >
-          {{ url.url }}
+    <div v-for="(url, index) in limitedScannedUrls" :key="index" class="row gl-my-2">
+      <div class="col-1">{{ url.requestMethod.toUpperCase() }}</div>
+      <div class="col-11" data-testid="dast-scanned-url">
+        <gl-truncate :text="url.url" position="middle" />
       </div>
     </div>
 
@@ -93,6 +89,5 @@ export default {
         </gl-sprintf>
       </b>
     </div>
-    </div>
   </gl-modal>
 </template>

ee/changelogs/unreleased/dast-modal-truncation.yml

+---
+title: Smartly truncate URLs in DAST Modal
+merge_request: 37078
+author:
+type: changed