Dynamically truncate the text in the file row

app/assets/javascripts/diffs/components/tree_list.vue

@@ -35,7 +35,7 @@ export default {
         return 'name';
       }
 
-      return 'truncatedPath';
+      return 'path';
     },
   },
   methods: {
@@ -131,6 +131,7 @@ export default {
           :extra-component="$options.FileRowStats"
           :show-changed-icon="true"
           :display-text-key="rowDisplayTextKey"
+          :should-truncate-start="true"
           @toggleTreeOpen="toggleTreeOpen"
           @clickFile="scrollToFile"
         />

app/assets/javascripts/diffs/store/utils.js

@@ -275,18 +275,6 @@ export function isDiscussionApplicableToLine({ discussion, diffPosition, latestD
   return latestDiff && discussion.active && lineCode === discussion.line_code;
 }
 
-export const truncatedName = path => {
-  const maxLength = 30;
-
-  if (path.length > maxLength) {
-    const start = path.length - maxLength;
-    const end = start + maxLength;
-    return `...${path.slice(start, end)}`;
-  }
-
-  return path;
-};
-
 export const generateTreeList = files =>
   files.reduce(
     (acc, file) => {
@@ -302,7 +290,6 @@ export const generateTreeList = files =>
           acc.treeEntries[path] = {
             key: path,
             path,
-            truncatedPath: truncatedName(path),
             name,
             type,
             tree: [],

app/assets/javascripts/vue_shared/components/file_row.vue

@@ -39,10 +39,16 @@ export default {
       required: false,
       default: 'name',
     },
+    shouldTruncateStart: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
       mouseOver: false,
+      truncateStart: 0,
     };
   },
   computed: {
@@ -65,6 +71,13 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    outputText() {
+      const text = this.file[this.displayTextKey];
+
+      if (this.truncateStart === 0) return text;
+
+      return `...${text.substring(this.truncateStart, text.length)}`;
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -77,6 +90,15 @@ export default {
     if (this.hasPathAtCurrentRoute()) {
       this.scrollIntoView(true);
     }
+
+    if (this.shouldTruncateStart) {
+      const { scrollWidth, offsetWidth } = this.$refs.textOutput;
+      const textOverflow = scrollWidth - offsetWidth;
+
+      if (textOverflow > 0) {
+        this.truncateStart = Math.ceil(textOverflow / 5) + 3;
+      }
+    }
   },
   methods: {
     toggleTreeOpen(path) {
@@ -144,6 +166,7 @@ export default {
         class="file-row-name-container"
       >
         <span
+          ref="textOutput"
           :style="levelIndentation"
           class="file-row-name str-truncated"
         >
@@ -161,7 +184,7 @@ export default {
             :size="16"
             class="append-right-5"
           />
-          {{ file[displayTextKey] }}
+          {{ outputText }}
         </span>
         <component
           :is="extraComponent"
@@ -181,6 +204,7 @@ export default {
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
         :display-text-key="displayTextKey"
+        :should-truncate-start="shouldTruncateStart"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />