Update dependency list location text

- truncate it if it is too long

Changelog: changed

EE: true

ee/app/assets/javascripts/dependencies/components/dependencies_table.vue

@@ -27,6 +27,10 @@ const tdClass = (value, key, item) => {
     classes.push('text-right');
   }
 
+  if (key === 'location') {
+    classes.push('gl-md-max-w-15p');
+  }
+
   return classes;
 };
 

ee/app/assets/javascripts/dependencies/components/dependency_location.vue

 <script>
-import { GlIcon, GlLink, GlPopover, GlIntersperse } from '@gitlab/ui';
+import { GlIcon, GlIntersperse, GlLink, GlPopover, GlTruncate } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import DependencyPathViewer from './dependency_path_viewer.vue';
 
@@ -10,9 +10,10 @@ export default {
   components: {
     DependencyPathViewer,
     GlIcon,
+    GlIntersperse,
     GlLink,
     GlPopover,
-    GlIntersperse,
+    GlTruncate,
   },
   props: {
     location: {
@@ -50,9 +51,14 @@ export default {
   <gl-intersperse separator=" / " class="gl-text-gray-500">
     <!-- We need to put an extra span to avoid separator between path & top level label -->
     <span>
-      <gl-link :href="location.blob_path">
-        <gl-icon name="doc-text" class="gl-vertical-align-middle!" />
-        {{ location.path }}
+      <gl-link class="gl-display-inline-block gl-lg-display-block!" :href="location.blob_path">
+        <gl-icon name="doc-text" />
+        <gl-truncate
+          class="gl-lg-max-w-80p gl-display-none gl-lg-display-inline-flex"
+          :text="location.path"
+          with-tooltip
+        />
+        <span class="gl-lg-display-none">{{ location.path }}</span>
       </gl-link>
       <span v-if="isTopLevelDependency">{{ s__('Dependencies|(top level)') }}</span>
     </span>

ee/app/assets/stylesheets/pages/threat_management.scss

@@ -2,14 +2,14 @@
   align-items: flex-start;
 }
 
-.gl-md-max-w-30p {
+.gl-md-max-w-15p {
   @media (min-width: $breakpoint-md) {
-    max-width: 30%;
+    max-width: $gl-spacing-scale-15;
   }
 }
 
-.gl-md-w-50p {
-  @media (min-width: $breakpoint-md) {
-    width: 50%;
+.gl-lg-max-w-80p {
+  @media (min-width: $breakpoint-lg) {
+    max-width: 80%;
   }
 }

ee/spec/frontend/dependencies/components/dependencies_table_spec.js

@@ -44,7 +44,7 @@ describe('DependenciesTable component', () => {
 
     const locationLink = locationCell.find(GlLink);
     expect(locationLink.attributes().href).toBe(dependency.location.blob_path);
-    expect(locationLink.text()).toBe(dependency.location.path);
+    expect(locationLink.text()).toContain(dependency.location.path);
 
     const licenseLinks = licenseCell.find(DependencyLicenseLinks);
     expect(licenseLinks.exists()).toBe(true);