Merge branch 'license-compliance-text-overlaps' into 'master'

Handle .Net license scan results

Closes #205592

See merge request gitlab-org/gitlab!31552

ee/app/assets/javascripts/license_compliance/components/licenses_table_row.vue

 <script>
-import { GlLink, GlSkeletonLoading, GlBadge, GlIcon } from '@gitlab/ui';
+import { GlLink, GlSkeletonLoading, GlBadge, GlIcon, GlFriendlyWrap } from '@gitlab/ui';
 import LicenseComponentLinks from './license_component_links.vue';
 import { LICENSE_APPROVAL_CLASSIFICATION } from 'ee/vue_shared/license_compliance/constants';
 
@@ -11,6 +11,7 @@ export default {
     GlSkeletonLoading,
     GlBadge,
     GlIcon,
+    GlFriendlyWrap,
   },
   props: {
     license: {
@@ -28,6 +29,9 @@ export default {
     isDenied() {
       return this.license.classification === LICENSE_APPROVAL_CLASSIFICATION.DENIED;
     },
+    nameIsLink() {
+      return this.license.name.includes('http');
+    },
   },
 };
 </script>
@@ -54,7 +58,14 @@ export default {
           <gl-link v-if="license.url" :href="license.url" target="_blank">{{
             license.name
           }}</gl-link>
-          <template v-else>{{ license.name }}</template>
+
+          <gl-link v-else-if="nameIsLink" :href="license.name" target="_blank">
+            <gl-friendly-wrap :text="license.name" />
+          </gl-link>
+
+          <template v-else>
+            {{ license.name }}
+          </template>
         </div>
       </div>
 

ee/changelogs/unreleased/license-compliance-text-overlaps.yml

+---
+title: Show .Net license scan results as links
+merge_request: 31552
+author:
+type: fixed

ee/spec/frontend/license_compliance/components/licenses_table_row_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLink, GlSkeletonLoading, GlBadge } from '@gitlab/ui';
+import { GlLink, GlSkeletonLoading, GlBadge, GlFriendlyWrap } from '@gitlab/ui';
 import LicenseComponentLinks from 'ee/license_compliance/components/license_component_links.vue';
 import LicensesTableRow from 'ee/license_compliance/components/licenses_table_row.vue';
 import { makeLicense } from './utils';
@@ -17,7 +17,7 @@ describe('LicensesTableRow component', () => {
 
   const findLoading = () => wrapper.find(GlSkeletonLoading);
   const findContent = () => wrapper.find('.js-license-row');
-  const findNameSeciton = () => findContent().find('.section-30');
+  const findNameSection = () => findContent().find('.section-30');
   const findComponentSection = () => findContent().find('.section-70');
 
   beforeEach(() => {
@@ -61,7 +61,7 @@ describe('LicensesTableRow component', () => {
     });
 
     it('shows name', () => {
-      const nameLink = findNameSeciton().find(GlLink);
+      const nameLink = findNameSection().find(GlLink);
 
       expect(nameLink.exists()).toBe(true);
       expect(nameLink.attributes('href')).toEqual(license.url);
@@ -81,6 +81,26 @@ describe('LicensesTableRow component', () => {
     });
   });
 
+  describe('when a license has a url in name field', () => {
+    beforeEach(() => {
+      license.url = null;
+      license.name = 'https://github.com/dotnet/corefx/blob/master/LICENSE.TXT';
+
+      factory({
+        isLoading: false,
+        license,
+      });
+    });
+
+    it('renders the GlFriendlyWrap and GlLink components', () => {
+      const nameSection = findNameSection();
+
+      expect(nameSection.find(GlLink).exists()).toBe(true);
+      expect(nameSection.find(GlFriendlyWrap).exists()).toBe(true);
+      expect(nameSection.find(GlFriendlyWrap).props().text).toBe(license.name);
+    });
+  });
+
   describe('with a license without a url', () => {
     beforeEach(() => {
       license.url = null;
@@ -92,7 +112,7 @@ describe('LicensesTableRow component', () => {
     });
 
     it('does not show url link for name', () => {
-      const nameSection = findNameSeciton();
+      const nameSection = findNameSection();
 
       expect(nameSection.text()).toContain(license.name);
       expect(nameSection.find(GlLink).exists()).toBe(false);