Add tooltip to file tree

- Move ide tooltip message to ide specific component
- Add tooltip message to passed down to changed_file_icon component
- Create tooltip message for filetree

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

@@ -6,6 +6,7 @@
 import FileRow from '~/vue_shared/components/file_row.vue';
 import FileRowStats from './file_row_stats.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
+import { __ } from '~/locale';
 
 export default {
   name: 'DiffFileRow',
@@ -28,6 +29,19 @@ export default {
     showFileRowStats() {
       return !this.hideFileStats && this.file.type === 'blob';
     },
+    tooltipTitle() {
+      if (!this.file.changed) return undefined;
+
+      if (this.file.deleted) {
+        return __('Deleted');
+      }
+
+      if (this.file.tempFile) {
+        return __('Added');
+      }
+
+      return __('Modified');
+    },
   },
 };
 </script>
@@ -35,6 +49,6 @@ export default {
 <template>
   <file-row :file="file" v-bind="$attrs" v-on="$listeners">
     <file-row-stats v-if="showFileRowStats" :file="file" class="mr-1" />
-    <changed-file-icon :file="file" :size="16" />
+    <changed-file-icon :file="file" :size="16" :show-tooltip="true" :tooltip-title="tooltipTitle" />
   </file-row>
 </template>

app/assets/javascripts/ide/components/file_row_extra.vue

 <script>
 import { mapGetters } from 'vuex';
-import { n__ } from '~/locale';
+import { n__, __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 import Icon from '~/vue_shared/components/icon.vue';
 import ChangedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
@@ -60,6 +60,11 @@ export default {
     showChangedFileIcon() {
       return !this.isTree && this.isModified;
     },
+    tooltipTitle() {
+      if (!this.file.changed) return undefined;
+
+      return this.file.tempFile ? __('Added') : __('Modified');
+    },
   },
 };
 </script>
@@ -84,6 +89,7 @@ export default {
       :file="file"
       :show-tooltip="true"
       :show-staged-icon="false"
+      :tooltip-title="tooltipTitle"
     />
     <new-dropdown
       :type="file.type"

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

 <script>
 import { GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
-import { __ } from '~/locale';
 import { getCommitIconMap } from '~/ide/utils';
 
 export default {
@@ -36,6 +35,11 @@ export default {
       required: false,
       default: true,
     },
+    tooltipTitle: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   computed: {
     changedIcon() {
@@ -48,10 +52,10 @@ export default {
     changedIconClass() {
       return `${this.changedIcon} float-left d-block`;
     },
-    tooltipTitle() {
-      if (!this.showTooltip || !this.file.changed) return undefined;
+    changedTooltipTitle() {
+      if (!this.showTooltip) return undefined;
 
-      return this.file.tempFile ? __('Added') : __('Modified');
+      return this.tooltipTitle;
     },
     showIcon() {
       return (
@@ -69,7 +73,7 @@ export default {
 <template>
   <span
     v-gl-tooltip.right
-    :title="tooltipTitle"
+    :title="changedTooltipTitle"
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >

changelogs/unreleased/205399-add-tooltip-to-file-tree-state.yml

+---
+title: Add tooltip to modification icon in the file tree
+merge_request: 27158
+author:
+type: other

spec/frontend/diffs/components/diff_file_row_spec.js

@@ -39,21 +39,56 @@ describe('Diff File Row component', () => {
     );
   });
 
-  it('renders ChangedFileIcon component', () => {
-    createComponent({
+  describe('ChangedFileIcon component', () => {
+    const fileObject = (file = {}) => {
+      return {
+        changed: true,
+        ...file,
+      };
+    };
+    const componentProps = file => {
+      return {
         level: 4,
-      file: {},
+        file,
         hideFileStats: false,
-    });
+      };
+    };
 
+    it('renders component with showTooltip', () => {
+      const file = fileObject();
+      createComponent(componentProps(file));
       expect(wrapper.find(ChangedFileIcon).props()).toEqual(
         expect.objectContaining({
-        file: {},
+          file,
           size: 16,
+          showTooltip: true,
         }),
       );
     });
 
+    it.each`
+      message      | file          | desc
+      ${'Deleted'} | ${'deleted'}  | ${'shows "Deleted" tooltip if file has been deleted'}
+      ${'Added'}   | ${'tempFile'} | ${'shows "Added" tooltip if file has been added'}
+    `('$desc', ({ message, file }) => {
+      createComponent(
+        componentProps(
+          fileObject({
+            [file]: true,
+          }),
+        ),
+      );
+      expect(wrapper.find(ChangedFileIcon).props('tooltipTitle')).toBe(message);
+    });
+
+    it('shows "Modified" tooltip if file has been modified', () => {
+      const file = fileObject({ deleted: false, tempFile: false });
+
+      createComponent(componentProps(file));
+      expect(wrapper.find(ChangedFileIcon).props('tooltipTitle')).toBe('Modified');
+    });
+  });
+
   describe('FileRowStats components', () => {
     it.each`
       type      | hideFileStats | value    | desc

spec/frontend/vue_shared/components/changed_file_icon_spec.js

@@ -60,7 +60,7 @@ describe('Changed file icon', () => {
     ${newFile()}     | ${'file-addition'}       | ${'Added'}    | ${'with file new'}
   `('$desc', ({ file, iconName, tooltipText }) => {
     beforeEach(() => {
-      factory({ file });
+      factory({ file, tooltipTitle: tooltipText });
     });
 
     it('renders icon', () => {

spec/javascripts/ide/components/file_row_extra_spec.js

@@ -150,6 +150,27 @@ describe('IDE extra file row component', () => {
         done();
       });
     });
+
+    it('shows "Added" tooltip if file has been added', done => {
+      vm.file.changed = true;
+      vm.file.tempFile = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon').getAttribute('title')).toBe('Added');
+
+        done();
+      });
+    });
+
+    it('shows "Modified" tooltip if file has been modified', done => {
+      vm.file.changed = true;
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon').getAttribute('title')).toBe('Modified');
+
+        done();
+      });
+    });
   });
 
   describe('merge request icon', () => {