Add proper tooltips with expanded paths

This adds tooltips with the expanded paths to
display when the file row component is shown
and the paths are abbreviated to ellipsis.

Adds a simple test to check that the tooltip
is present.

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

@@ -39,6 +39,10 @@ export default {
         'is-open': this.file.opened,
       };
     },
+    textForTitle() {
+      // don't output a title if we don't have the expanded path
+      return this.file?.tree?.length ? this.file.tree[0].parentPath : false;
+    },
   },
   watch: {
     'file.active': function fileActiveWatch(active) {
@@ -106,7 +110,7 @@ export default {
   <div
     v-else
     :class="fileClass"
-    :title="file.name"
+    :title="textForTitle"
     class="file-row"
     role="button"
     @click="clickFile"

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

@@ -19,7 +19,7 @@ export default {
 </script>
 
 <template>
-  <div class="file-row-header bg-white sticky-top p-2 js-file-row-header">
+  <div class="file-row-header bg-white sticky-top p-2 js-file-row-header" :title="path">
     <span class="bold">{{ truncatedPath }}</span>
   </div>
 </template>

changelogs/unreleased/andr3-fix-file-tree-tooltips.yml

+---
+title: Add tooltips with full path to file headers on file tree
+merge_request: 27437
+author:
+type: fixed

spec/frontend/vue_shared/components/__snapshots__/file_row_header_spec.js.snap

@@ -3,6 +3,7 @@
 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"
+  title="app/assets/javascripts/merge_requests/widget/diffs/notes"
 >
   <span
     class="bold"
@@ -15,6 +16,7 @@ exports[`File row header component adds multiple ellipsises after 40 characters
 exports[`File row header component renders file path 1`] = `
 <div
   class="file-row-header bg-white sticky-top p-2 js-file-row-header"
+  title="app/assets"
 >
   <span
     class="bold"
@@ -27,6 +29,7 @@ exports[`File row header component renders file path 1`] = `
 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"
+  title="app/assets/javascripts/merge_requests"
 >
   <span
     class="bold"

spec/frontend/vue_shared/components/file_row_spec.js

@@ -33,6 +33,35 @@ describe('File row component', () => {
     expect(name.text().trim()).toEqual(fileName);
   });
 
+  it('renders the full path as title', () => {
+    const filePath = 'path/to/file/with a very long folder name/';
+    const fileName = 'foo.txt';
+
+    createComponent({
+      file: {
+        name: fileName,
+        isHeader: false,
+        tree: [
+          {
+            parentPath: filePath,
+          },
+        ],
+      },
+      level: 1,
+    });
+
+    expect(wrapper.element.title.trim()).toEqual('path/to/file/with a very long folder name/');
+  });
+
+  it('does not render a title attribute if no tree present', () => {
+    createComponent({
+      file: file('f1.txt'),
+      level: 0,
+    });
+
+    expect(wrapper.element.title.trim()).toEqual('');
+  });
+
   it('emits toggleTreeOpen on click', () => {
     const fileName = 't3';
     createComponent({