Merge branch...

Merge branch '8892-vulnerabilities-with-long-titles-overflow-in-group-level-security-dashboard-ee' into 'master'

Fix overflowing titles in vulnerability dashboard

Closes #8892

See merge request gitlab-org/gitlab-ee!9271

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

@@ -62,10 +62,13 @@ export default {
       role="row"
     >
       <div class="table-section section-10" role="rowheader">{{ s__('Reports|Severity') }}</div>
-      <div class="table-section section-60" role="rowheader">
+      <div class="table-section flex-grow-1" role="rowheader">
         {{ s__('Reports|Vulnerability') }}
       </div>
-      <div class="table-section section-30" role="rowheader">{{ s__('Reports|Confidence') }}</div>
+      <div class="table-section section-10 ml-md-2" role="rowheader">
+        {{ s__('Reports|Confidence') }}
+      </div>
+      <div class="table-section section-20" role="rowheader"></div>
     </div>
 
     <div class="flash-container">
@@ -80,11 +83,11 @@ export default {
       </div>
     </div>
 
-    <div v-if="isLoadingVulnerabilities">
+    <template v-if="isLoadingVulnerabilities">
       <security-dashboard-table-row v-for="n in 10" :key="n" :is-loading="true" />
-    </div>
+    </template>
 
-    <div v-else>
+    <template v-else>
       <security-dashboard-table-row
         v-for="vulnerability in vulnerabilities"
         :key="vulnerability.id"
@@ -104,7 +107,7 @@ export default {
         :page-info="pageInfo"
         class="justify-content-center prepend-top-default"
       />
-    </div>
+    </template>
   </div>
 </template>
 
@@ -113,4 +116,9 @@ export default {
   background-color: #fafafa;
   font-size: 14px;
 }
+
+.vulnerabilities-row .table-section,
+.vulnerabilities-row-header .table-section {
+  min-width: 120px;
+}
 </style>

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

@@ -66,21 +66,21 @@ export default {
       <div class="table-mobile-content"><severity-badge :severity="severity" /></div>
     </div>
 
-    <div class="table-section section-60">
+    <div class="table-section flex-grow-1">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Vulnerability') }}</div>
-      <div class="table-mobile-content">
+      <div class="table-mobile-content vulnerability-info">
         <gl-skeleton-loading v-if="isLoading" class="mt-2 js-skeleton-loader" :lines="2" />
-        <div v-else>
+        <template v-else>
           <gl-button
-            class="btn js-vulnerability-info"
+            class="vulnerability-title d-inline"
             variant="blank"
             @click="openModal({ vulnerability })"
             >{{ vulnerability.name }}</gl-button
           >
-          <span v-show="isDismissed" class="prepend-left-8 vertical-align-middle">DISMISSED</span>
+          <span v-show="isDismissed" class="vertical-align-middle">DISMISSED</span>
           <vulnerability-issue-link
             v-if="hasIssue"
-            class="prepend-left-8"
+            class="text-nowrap"
             :issue="vulnerability.issue_feedback"
             :project-name="vulnerability.project.name"
           />
@@ -88,18 +88,18 @@ export default {
           <span v-if="projectFullName" class="vulnerability-namespace">
             {{ projectFullName }}
           </span>
-        </div>
+        </template>
       </div>
     </div>
 
-    <div class="table-section section-10">
+    <div class="table-section section-10 ml-md-2">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Confidence') }}</div>
       <div class="table-mobile-content text-capitalize">{{ confidence }}</div>
     </div>
 
     <div class="table-section section-20">
       <div class="table-mobile-header" role="rowheader">{{ s__('Reports|Actions') }}</div>
-      <div class="table-mobile-content action-buttons">
+      <div class="table-mobile-content action-buttons d-flex justify-content-end">
         <vulnerability-action-buttons
           :vulnerability="vulnerability"
           :can-create-issue="canCreateIssue"
@@ -113,6 +113,10 @@ export default {
 
 <style scoped>
 @media (min-width: 768px) {
+  .vulnerabilities-row:last-child {
+    border-bottom: 1px solid transparent;
+  }
+
   .vulnerabilities-row:hover,
   .vulnerabilities-row:focus {
     background: #f6fafd;
@@ -123,8 +127,6 @@ export default {
 
   .vulnerabilities-row .action-buttons {
     opacity: 0;
-    padding-right: 1em;
-    text-align: right;
   }
 
   .vulnerabilities-row:hover .action-buttons,
@@ -133,8 +135,14 @@ export default {
   }
 }
 
-.vulnerabilities-row .table-section {
+.vulnerability-info {
+  white-space: normal;
+}
+
+.vulnerability-title {
+  text-align: inherit;
   white-space: normal;
+  line-height: inherit;
 }
 
 .vulnerability-namespace {

ee/changelogs/unreleased/8892-vulnerabilities-with-long-titles-overflow-in-group-level-security-dashboard-ee.yml

+---
+title: 'Group security dashboard: Fix overflow for Vulnerabilities with long titles'
+merge_request: 9271
+author:
+type: fixed

ee/spec/javascripts/security_dashboard/components/security_dashboard_table_row_spec.js

@@ -79,7 +79,7 @@ describe('Security Dashboard Table Row', () => {
       it('should fire the openModal action when clicked', () => {
         spyOn(vm.$store, 'dispatch');
 
-        vm.$el.querySelector('.js-vulnerability-info').click();
+        vm.$el.querySelector('.vulnerability-title').click();
 
         expect(vm.$store.dispatch).toHaveBeenCalledWith('vulnerabilities/openModal', {
           vulnerability,