Merge branch '230931-use-gl-truncate' into 'master'

Truncate long file paths

See merge request gitlab-org/gitlab!45254

app/assets/stylesheets/framework/tables.scss

@@ -186,6 +186,7 @@ table {
     .checkbox {
       padding-left: $gl-spacing-scale-4;
       padding-right: 0;
+      width: 1px;
 
       + td,
       + th {
@@ -205,12 +206,20 @@ table {
       width: 10%;
     }
 
+    .description {
+      max-width: 0;
+    }
+
     .identifier {
       width: 16%;
     }
 
     .scanner {
-      width: 15%;
+      width: 10%;
+    }
+
+    .activity {
+      width: 5%;
     }
   }
 }

ee/app/assets/javascripts/security_dashboard/components/vulnerability_list.vue

@@ -4,9 +4,10 @@ import {
   GlFormCheckbox,
   GlLink,
   GlSprintf,
-  GlTable,
+  GlTruncate,
   GlSkeletonLoading,
   GlTooltipDirective,
+  GlTable,
 } from '@gitlab/ui';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 import FiltersProducedNoResults from 'ee/security_dashboard/components/empty_states/filters_produced_no_results.vue';
@@ -35,6 +36,7 @@ export default {
     GlSkeletonLoading,
     GlSprintf,
     GlTable,
+    GlTruncate,
     IssuesBadge,
     LocalStorageSync,
     RemediatedBadge,
@@ -181,7 +183,8 @@ export default {
         {
           key: 'activity',
           label: s__('Vulnerability|Activity'),
-          thClass: 'gl-text-right',
+          thClass: 'gl-text-right activity',
+          tdClass: 'activity',
         },
       ];
 
@@ -373,7 +376,7 @@ export default {
       </template>
 
       <template #cell(severity)="{ item }">
-        <severity-badge class="js-severity gl-white-space-normal!" :severity="item.severity" />
+        <severity-badge class="js-severity" :severity="item.severity" />
       </template>
 
       <template #cell(title)="{ item }">
@@ -399,7 +402,7 @@ export default {
             {{ item.project.nameWithNamespace }}
           </div>
           <div v-if="shouldShowVulnerabilityPath(item)" class="monospace">
-            {{ createLocationString(item.location) }}
+            <gl-truncate :text="createLocationString(item.location)" position="middle" />
           </div>
         </div>
       </template>

ee/changelogs/unreleased/230931-use-gl-truncate.yml

+---
+title: Truncate long file paths
+merge_request: 45254
+author:
+type: changed

ee/spec/frontend/security_dashboard/components/vulnerability_list_spec.js

 import { mount } from '@vue/test-utils';
-import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlTable } from '@gitlab/ui';
+import { GlDeprecatedSkeletonLoading as GlSkeletonLoading, GlTable, GlTruncate } from '@gitlab/ui';
 import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import RemediatedBadge from 'ee/vulnerabilities/components/remediated_badge.vue';
 import IssuesBadge from 'ee/security_dashboard/components/issues_badge.vue';
@@ -54,7 +54,7 @@ describe('Vulnerability list component', () => {
   const findRowVulnerabilityCommentIcon = row => findRow(row).find(VulnerabilityCommentIcon);
   const findDataCell = label => wrapper.find(`[data-testid="${label}"]`);
   const findDataCells = label => wrapper.findAll(`[data-testid="${label}"]`);
-  const findCellText = label => findDataCell(label).text();
+  const findLocationTextWrapper = cell => cell.find(GlTruncate);
   const findFiltersProducedNoResults = () => wrapper.find(FiltersProducedNoResults);
   const findDashboardHasNoVulnerabilities = () => wrapper.find(DashboardHasNoVulnerabilities);
   const findVendorNames = () => wrapper.find(`[data-testid="vulnerability-vendor"]`);
@@ -199,31 +199,37 @@ describe('Vulnerability list component', () => {
 
     it('should display the vulnerability locations for images', () => {
       const { id, project, location } = newVulnerabilities[0];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).toContain(project.nameWithNamespace);
-      expect(cellText).toContain(location.image);
-      expect(cellText).not.toContain('(line: ');
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: location.image,
+        position: 'middle',
+      });
     });
 
     it('should display the vulnerability locations for code', () => {
       const { id, project, location } = newVulnerabilities[1];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).toContain(project.nameWithNamespace);
-      expect(cellText).toContain(location.file);
-      expect(cellText).toContain(`(line: ${location.startLine})`);
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: `${location.file} (line: ${location.startLine})`,
+        position: 'middle',
+      });
     });
 
     it('should display the vulnerability locations for code with no line data', () => {
       const { id, project, location } = newVulnerabilities[2];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).toContain(project.nameWithNamespace);
-      expect(cellText).toContain(location.file);
-      expect(cellText).not.toContain('(line: ');
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: location.file,
+        position: 'middle',
+      });
     });
 
     it('should not display the vulnerability locations for vulnerabilities without a location', () => {
       const { id, project } = newVulnerabilities[4];
-      const cellText = findCellText(`location-${id}`);
+      const cellText = findDataCell(`location-${id}`).text();
       expect(cellText).toEqual(project.nameWithNamespace);
       expect(cellText).not.toContain('(line: ');
     });
@@ -244,9 +250,12 @@ describe('Vulnerability list component', () => {
 
     it('should not display the vulnerability group/project locations for images', () => {
       const { id, project, location } = newVulnerabilities[0];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).not.toContain(project.nameWithNamespace);
-      expect(cellText).toEqual(location.image);
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).not.toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: location.image,
+        position: 'middle',
+      });
     });
 
     it('should display the detected time', () => {
@@ -258,16 +267,22 @@ describe('Vulnerability list component', () => {
 
     it('should display the vulnerability locations for code', () => {
       const { id, project, location } = newVulnerabilities[1];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).not.toContain(project.nameWithNamespace);
-      expect(cellText).toEqual(`${location.file} (line: ${location.startLine})`);
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).not.toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: `${location.file} (line: ${location.startLine})`,
+        position: 'middle',
+      });
     });
 
     it('should not display the vulnerability group/project locations for code with no line data', () => {
       const { id, project, location } = newVulnerabilities[2];
-      const cellText = findCellText(`location-${id}`);
-      expect(cellText).not.toContain(project.nameWithNamespace);
-      expect(cellText).toEqual(location.file);
+      const cell = findDataCell(`location-${id}`);
+      expect(cell.text()).not.toContain(project.nameWithNamespace);
+      expect(findLocationTextWrapper(cell).props()).toEqual({
+        text: location.file,
+        position: 'middle',
+      });
     });
   });