Wrap file paths in vulnerability details modal (!10606) · Merge requests · GitLab.org / GitLab

Paul Gascou-Vaillancourt requested to merge 10450-fix-file-path-overflow into master Apr 04, 2019

What does this MR do?

In some cases, vulnerability details come with very long file paths that overflow out of the details modal:

This can be prevented by using gitlab-ui's FriendlyWrap component:

How to test

You can force the modal to display some long file path by modifying vulnerability_details.vue with this patch (courtesy of @pslaughter):

Show patch

diff --git a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue
index 9c82695a830..aaf6e7eb372 100644
--- a/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue
+++ b/ee/app/assets/javascripts/vue_shared/security_reports/components/vulnerability_details.vue
@@ -16,6 +16,19 @@ export default {
       required: true,
     },
   },
+  computed: {
+    realDetails() {
+      const { details } = this;
+
+      return details.file && {
+        ...details,
+        ['file']: {
+          ...details.file,
+          value: 'db-cross-site-scripting/src/main/java/org/owasp/webgoat/plugin/db_cross_site/UpdateProfileDBCrossSiteScripting.java',
+        },
+      };
+    },
+  },
   methods: {
     hasMoreValues(index, values) {
       return index < values.length - 1;
@@ -41,7 +54,7 @@ export default {
 
 <template>
   <div class="border-white mb-0 px-3">
-    <div v-for="(field, key, index) in details" :key="index" class="d-flex my-2">
+    <div v-for="(field, key, index) in realDetails" :key="index" class="d-flex my-2">
       <label class="col-2 text-right font-weight-bold pl-0">{{ field.text }}:</label>
       <div class="col-10 pl-0 text-secondary">
         <div v-if="hasInstances(field, key)" class="info-well">