Merge branch '205399-add-tooltip-to-file-tree-state' into 'master'

Add tooltip to file tree

Closes #205399

See merge request gitlab-org/gitlab!27158

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

@@ -35,6 +35,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" />
   </file-row>
 </template>

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';
+import { __ } from '~/locale';
 
 export default {
   components: {
@@ -49,9 +49,17 @@ export default {
       return `${this.changedIcon} float-left d-block`;
     },
     tooltipTitle() {
-      if (!this.showTooltip || !this.file.changed) return undefined;
+      if (!this.showTooltip) {
+        return undefined;
+      } else if (this.file.deleted) {
+        return __('Deleted');
+      } else if (this.file.tempFile) {
+        return __('Added');
+      } else if (this.file.changed) {
+        return __('Modified');
+      }
 
-      return this.file.tempFile ? __('Added') : __('Modified');
+      return undefined;
     },
     showIcon() {
       return (

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

@@ -44,12 +44,14 @@ describe('Diff File Row component', () => {
       level: 4,
       file: {},
       hideFileStats: false,
+      showTooltip: true,
     });
 
     expect(wrapper.find(ChangedFileIcon).props()).toEqual(
       expect.objectContaining({
         file: {},
         size: 16,
+        showTooltip: true,
       }),
     );
   });

spec/frontend/vue_shared/components/changed_file_icon_spec.js

@@ -5,6 +5,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 const changedFile = () => ({ changed: true });
 const stagedFile = () => ({ changed: true, staged: true });
 const newFile = () => ({ changed: true, tempFile: true });
+const deletedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: true });
 const unchangedFile = () => ({ changed: false, tempFile: false, staged: false, deleted: false });
 
 describe('Changed file icon', () => {
@@ -58,6 +59,7 @@ describe('Changed file icon', () => {
     ${changedFile()} | ${'file-modified'}       | ${'Modified'} | ${'with file changed'}
     ${stagedFile()}  | ${'file-modified-solid'} | ${'Modified'} | ${'with file staged'}
     ${newFile()}     | ${'file-addition'}       | ${'Added'}    | ${'with file new'}
+    ${deletedFile()} | ${'file-deletion'}       | ${'Deleted'}  | ${'with file deleted'}
   `('$desc', ({ file, iconName, tooltipText }) => {
     beforeEach(() => {
       factory({ file });