Merge branch...

Merge branch '341050-long-urls-in-the-evidence-section-of-vulnerability-popup-does-not-wrap' into 'master'

Vulnerability Modal: Fix issue with long URLs

See merge request gitlab-org/gitlab!73713

ee/app/assets/javascripts/vulnerabilities/components/generic_report/types/url.vue

 <script>
-import { GlLink } from '@gitlab/ui';
+import { GlFriendlyWrap, GlLink } from '@gitlab/ui';
 
 export default {
   components: {
     GlLink,
+    GlFriendlyWrap,
   },
   inheritAttrs: false,
   props: {
@@ -12,8 +13,11 @@ export default {
       required: true,
     },
   },
+  wrapSymbols: ['/', '?', '&', '='],
 };
 </script>
 <template>
-  <gl-link :href="href">{{ href }}</gl-link>
+  <gl-link :href="href">
+    <gl-friendly-wrap :text="href" :symbols="$options.wrapSymbols" />
+  </gl-link>
 </template>

ee/app/assets/stylesheets/components/generic_vulnerability_report.scss

@@ -35,7 +35,12 @@
 
   li {
     @include gl-ml-0;
+    @include gl-mb-2;
     @include gl-list-style-none;
+
+    &:last-child {
+      @include gl-mb-0;
+    }
   }
 
   &.generic-report-list-nested li {

ee/spec/frontend/vulnerabilities/generic_report/types/url_spec.js

-import { GlLink } from '@gitlab/ui';
+import { GlFriendlyWrap, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Url from 'ee/vulnerabilities/components/generic_report/types/url.vue';
 
@@ -35,7 +35,8 @@ describe('ee/vulnerabilities/components/generic_report/types/url.vue', () => {
     expect(findLink().attributes('href')).toBe(TEST_DATA.href);
   });
 
-  it('shows the href as the link-text', () => {
-    expect(findLink().text()).toBe(TEST_DATA.href);
+  it('shows the href as the link-text and makes it wrap if needed', () => {
+    // `GlFriendlyWrap` is a functional component, so we have to use `attributes` instead of `props`
+    expect(findLink().findComponent(GlFriendlyWrap).attributes('text')).toBe(TEST_DATA.href);
   });
 });