Add headers to files in the tree list on merge requests

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

1 files changed, 37 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
new file mode 100644
index 00000000000..26eae2d5e61
--- /dev/null
+++ b/spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`File row header component adds multiple ellipsises after 40 characters 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets/javascripts/…/…/diffs/notes
+  </span>
+</div>
+`;
+
+exports[`File row header component renders file path 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets
+  </span>
+</div>
+`;
+
+exports[`File row header component trucates path after 40 characters 1`] = `
+<div
+  class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+>
+  <span
+    class="bold"
+  >
+    app/assets/javascripts/merge_requests
+  </span>
+</div>
+`;