Merge branch 'ph/treeFileIcons' into 'master'

Use file icons for repository tree rows

Closes #33806

See merge request gitlab-org/gitlab!28112

app/assets/javascripts/repository/components/table/row.vue

 <script>
 import { escapeRegExp } from 'lodash';
-import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import {
+  GlBadge,
+  GlLink,
+  GlSkeletonLoading,
+  GlTooltipDirective,
+  GlLoadingIcon,
+  GlIcon,
+} from '@gitlab/ui';
 import { escapeFileUrl } from '~/lib/utils/url_utility';
 import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import Icon from '~/vue_shared/components/icon.vue';
-import { getIconName } from '../../utils/icon';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 import getRefMixin from '../../mixins/get_ref';
 import getCommit from '../../queries/getCommit.query.graphql';
 
@@ -14,8 +20,9 @@ export default {
     GlLink,
     GlSkeletonLoading,
     GlLoadingIcon,
+    GlIcon,
     TimeagoTooltip,
-    Icon,
+    FileIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -95,9 +102,6 @@ export default {
         ? { path: `/-/tree/${escape(this.ref)}/${escapeFileUrl(this.path)}` }
         : null;
     },
-    iconName() {
-      return `fa-${getIconName(this.type, this.path)}`;
-    },
     isFolder() {
       return this.type === 'tree';
     },
@@ -123,12 +127,6 @@ export default {
 <template>
   <tr class="tree-item">
     <td class="tree-item-file-name cursor-default position-relative">
-      <gl-loading-icon
-        v-if="path === loadingPath"
-        size="sm"
-        inline
-        class="d-inline-block align-text-bottom fa-fw"
-      />
       <component
         :is="linkComponent"
         ref="link"
@@ -140,27 +138,27 @@ export default {
         class="tree-item-link str-truncated"
         data-qa-selector="file_name_link"
       >
-        <i
-          v-if="path !== loadingPath"
-          :aria-label="type"
-          role="img"
-          :class="iconName"
-          class="fa fa-fw mr-1"
-        ></i
-        ><span class="position-relative">{{ fullPath }}</span>
+        <file-icon
+          :file-name="fullPath"
+          :folder="isFolder"
+          :submodule="isSubmodule"
+          :loading="path === loadingPath"
+          css-classes="position-relative file-icon"
+          class="mr-1 position-relative text-secondary"
+        /><span class="position-relative">{{ fullPath }}</span>
       </component>
       <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
       <gl-badge v-if="lfsOid" variant="default" class="label-lfs ml-1">LFS</gl-badge>
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
-      <icon
+      <gl-icon
         v-if="hasLockLabel"
         v-gl-tooltip
         :title="commit.lockLabel"
         name="lock"
         :size="12"
-        class="ml-2 vertical-align-middle"
+        class="ml-1"
       />
     </td>
     <td class="d-none d-sm-table-cell tree-commit cursor-default">

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

 <script>
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import getIconForFile from './file_icon/file_icon_map';
-import icon from '../../vue_shared/components/icon.vue';
 
 /* This is a re-usable vue component for rendering a svg sprite
     icon
@@ -17,8 +16,8 @@ import icon from '../../vue_shared/components/icon.vue';
   */
 export default {
   components: {
-    icon,
     GlLoadingIcon,
+    GlIcon,
   },
   props: {
     fileName: {
@@ -31,7 +30,11 @@ export default {
       required: false,
       default: false,
     },
-
+    submodule: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     opened: {
       type: Boolean,
       required: false,
@@ -58,7 +61,7 @@ export default {
   },
   computed: {
     spriteHref() {
-      const iconName = getIconForFile(this.fileName) || 'file';
+      const iconName = this.submodule ? 'folder-git' : getIconForFile(this.fileName) || 'file';
       return `${gon.sprite_file_icons}#${iconName}`;
     },
     folderIconName() {
@@ -73,9 +76,12 @@ export default {
 <template>
   <span>
     <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
-      <use v-bind="{ 'xlink:href': spriteHref }" />
-    </svg>
-    <icon v-if="!loading && folder" :name="folderIconName" :size="size" class="folder-icon" />
-    <gl-loading-icon v-if="loading" :inline="true" />
+      <use v-bind="{ 'xlink:href': spriteHref }" /></svg
+    ><gl-icon
+      v-if="!loading && folder"
+      :name="folderIconName"
+      :size="size"
+      class="folder-icon"
+    /><gl-loading-icon v-if="loading" :inline="true" />
   </span>
 </template>

app/assets/stylesheets/pages/tree.scss

@@ -138,6 +138,12 @@
   }
 
   .tree-item {
+    .file-icon,
+    .folder-icon {
+      position: relative;
+      top: 2px;
+    }
+
     .link-container {
       padding: 0;
 

changelogs/unreleased/ph-treeFileIcons.yml

+---
+title: Use rich icons for thw rows on the file tree
+merge_request: 28112
+author:
+type: changed

spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap

@@ -7,17 +7,16 @@ exports[`Repository table row component renders table row 1`] = `
   <td
     class="tree-item-file-name cursor-default position-relative"
   >
-    <!---->
-     
     <a
       class="tree-item-link str-truncated"
       data-qa-selector="file_name_link"
       href="https://test.com"
     >
-      <i
-        aria-label="file"
-        class="fa fa-fw mr-1 fa-file-text-o"
-        role="img"
+      <file-icon-stub
+        class="mr-1 position-relative text-secondary"
+        cssclasses="position-relative file-icon"
+        filename="test"
+        size="16"
       />
       <span
         class="position-relative"
@@ -60,17 +59,16 @@ exports[`Repository table row component renders table row for path with special
   <td
     class="tree-item-file-name cursor-default position-relative"
   >
-    <!---->
-     
     <a
       class="tree-item-link str-truncated"
       data-qa-selector="file_name_link"
       href="https://test.com"
     >
-      <i
-        aria-label="file"
-        class="fa fa-fw mr-1 fa-file-text-o"
-        role="img"
+      <file-icon-stub
+        class="mr-1 position-relative text-secondary"
+        cssclasses="position-relative file-icon"
+        filename="test"
+        size="16"
       />
       <span
         class="position-relative"

spec/frontend/repository/components/table/row_spec.js

 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
-import { GlBadge, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlBadge, GlLink, GlIcon } from '@gitlab/ui';
 import TableRow from '~/repository/components/table/row.vue';
-import Icon from '~/vue_shared/components/icon.vue';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
 
 let vm;
 let $router;
@@ -188,7 +188,8 @@ describe('Repository table row component', () => {
     vm.setData({ commit: { lockLabel: 'Locked by Root', committedDate: '2019-01-01' } });
 
     return vm.vm.$nextTick().then(() => {
-      expect(vm.find(Icon).exists()).toBe(true);
+      expect(vm.find(GlIcon).exists()).toBe(true);
+      expect(vm.find(GlIcon).props('name')).toBe('lock');
     });
   });
 
@@ -202,6 +203,6 @@ describe('Repository table row component', () => {
       loadingPath: 'test',
     });
 
-    expect(vm.find(GlLoadingIcon).exists()).toBe(true);
+    expect(vm.find(FileIcon).props('loading')).toBe(true);
   });
 });

spec/frontend/vue_shared/components/file_icon_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlLoadingIcon } from '@gitlab/ui';
+import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
-import Icon from '~/vue_shared/components/icon.vue';
 
 describe('File Icon component', () => {
   let wrapper;
@@ -48,7 +47,7 @@ describe('File Icon component', () => {
     });
 
     expect(findIcon().exists()).toBe(false);
-    expect(wrapper.find(Icon).classes()).toContain('folder-icon');
+    expect(wrapper.find(GlIcon).classes()).toContain('folder-icon');
   });
 
   it('should render a loading icon', () => {