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,43 +56,38 @@ 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>
-      <hr class="gl-my-3" />
+    <!-- heading -->
+    <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>
+    <!-- rows -->
+    <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>
 
-      <!-- banner -->
-      <div
-        v-if="downloadLink"
-        class="gl-display-inline-block gl-bg-gray-50 gl-my-3 gl-pl-3 gl-pr-7 gl-py-5"
-      >
-        <gl-icon name="bulb" class="gl-vertical-align-middle gl-mr-5" />
-        <b class="gl-vertical-align-middle">
-          <gl-sprintf
-            :message="
-              __('To view all %{scannedResourcesCount} scanned URLs, please download the CSV file')
-            "
-          >
-            <template #scannedResourcesCount>
-              {{ scannedResourcesCount }}
-            </template>
-          </gl-sprintf>
-        </b>
-      </div>
+    <!-- banner -->
+    <div
+      v-if="downloadLink"
+      class="gl-display-inline-block gl-bg-gray-50 gl-my-3 gl-pl-3 gl-pr-7 gl-py-5"
+    >
+      <gl-icon name="bulb" class="gl-vertical-align-middle gl-mr-5" />
+      <b class="gl-vertical-align-middle">
+        <gl-sprintf
+          :message="
+            __('To view all %{scannedResourcesCount} scanned URLs, please download the CSV file')
+          "
+        >
+          <template #scannedResourcesCount>
+            {{ scannedResourcesCount }}
+          </template>
+        </gl-sprintf>
+      </b>
     </div>
   </gl-modal>
 </template>

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

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