Add headers to files in the tree list on merge requests

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/54807

1 files changed, 10 insertions, 34 deletions

diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 9e713673678..4c884c55a30 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -1,11 +1,13 @@
 <script>
 import Icon from '~/vue_shared/components/icon.vue';
+import FileHeader from '~/vue_shared/components/file_row_header.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 
 export default {
   name: 'FileRow',
   components: {
+    FileHeader,
     FileIcon,
     Icon,
     ChangedFileIcon,
@@ -34,21 +36,10 @@ export default {
       required: false,
       default: false,
     },
-    displayTextKey: {
-      type: String,
-      required: false,
-      default: 'name',
-    },
-    shouldTruncateStart: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
   },
   data() {
     return {
       mouseOver: false,
-      truncateStart: 0,
     };
   },
   computed: {
@@ -60,7 +51,7 @@ export default {
     },
     levelIndentation() {
       return {
-        marginLeft: `${this.level * 16}px`,
+        marginLeft: this.level ? `${this.level * 16}px` : null,
       };
     },
     fileClass() {
@@ -71,14 +62,8 @@ 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)}`;
+    childFilesLevel() {
+      return this.file.isHeader ? 0 : this.level + 1;
     },
   },
   watch: {
@@ -92,15 +77,6 @@ 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) {
@@ -156,7 +132,9 @@ export default {
 
 <template>
   <div>
+    <file-header v-if="file.isHeader" :path="file.path" />
     <div
+      v-else
       :class="fileClass"
       class="file-row"
       role="button"
@@ -175,7 +153,7 @@ export default {
             :size="16"
           />
           <changed-file-icon v-else :file="file" :size="16" class="append-right-5" />
-          {{ outputText }}
+          {{ file.name }}
         </span>
         <component
           :is="extraComponent"
@@ -185,17 +163,15 @@ export default {
         />
       </div>
     </div>
-    <template v-if="file.opened">
+    <template v-if="file.opened || file.isHeader">
       <file-row
         v-for="childFile in file.tree"
         :key="childFile.key"
         :file="childFile"
-        :level="level + 1"
+        :level="childFilesLevel"
         :hide-extra-on-tree="hideExtraOnTree"
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
-        :display-text-key="displayTextKey"
-        :should-truncate-start="shouldTruncateStart"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />