Add list mode to file browser in diffs

This adds toggle buttons to switch between file & tree list.
For file list, it renders the truncated paths with the ellipsis
at the start of the path.

When focusing the input, it hides the toggle buttons.
On blur, the buttons get shown again.

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

1 files changed, 7 insertions, 1 deletions

diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 36a345130c0..7c34d776c7f 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -34,6 +34,11 @@ export default {
       required: false,
       default: false,
     },
+    displayTextKey: {
+      type: String,
+      required: false,
+      default: 'name',
+    },
   },
   data() {
     return {
@@ -156,7 +161,7 @@ export default {
             :size="16"
             class="append-right-5"
           />
-          {{ file.name }}
+          {{ file[displayTextKey] }}
         </span>
         <component
           :is="extraComponent"
@@ -175,6 +180,7 @@ export default {
         :hide-extra-on-tree="hideExtraOnTree"
         :extra-component="extraComponent"
         :show-changed-icon="showChangedIcon"
+        :display-text-key="displayTextKey"
         @toggleTreeOpen="toggleTreeOpen"
         @clickFile="clickedFile"
       />