From 9e1df20a3d12886353dc638ffcbb0ce9585d4dae Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 15 Jul 2020 15:54:31 -0600
Subject: [PATCH 1/4] Add file mode to the repository browser file rows

---
 .../javascripts/repository/components/table/index.vue       | 1 +
 app/assets/javascripts/repository/components/table/row.vue  | 6 ++++++
 app/assets/javascripts/vue_shared/components/file_icon.vue  | 5 +++++
 app/assets/javascripts/vue_shared/constants.js              | 2 ++
 4 files changed, 14 insertions(+)

diff --git a/app/assets/javascripts/repository/components/table/index.vue b/app/assets/javascripts/repository/components/table/index.vue
index c1f350dccd6aa6..5e0ad7acdfd000 100644
--- a/app/assets/javascripts/repository/components/table/index.vue
+++ b/app/assets/javascripts/repository/components/table/index.vue
@@ -97,6 +97,7 @@ export default {
               :path="entry.flatPath"
               :type="entry.type"
               :url="entry.webUrl"
+              :mode="entry.mode"
               :submodule-tree-url="entry.treeUrl"
               :lfs-oid="entry.lfsOid"
               :loading-path="loadingPath"
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index d53630163359b4..615e329f4154b4 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -66,6 +66,11 @@ export default {
       type: String,
       required: true,
     },
+    mode: {
+      type: String,
+      required: false,
+      default: '',
+    },
     type: {
       type: String,
       required: true,
@@ -140,6 +145,7 @@ export default {
       >
         <file-icon
           :file-name="fullPath"
+          :file-mode="mode"
           :folder="isFolder"
           :submodule="isSubmodule"
           :loading="path === loadingPath"
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index b084ebdf774c6b..ac55a296d15753 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -24,6 +24,11 @@ export default {
       type: String,
       required: true,
     },
+    fileMode: {
+      type: Number,
+      required: false,
+      default: -1
+    },
 
     folder: {
       type: Boolean,
diff --git a/app/assets/javascripts/vue_shared/constants.js b/app/assets/javascripts/vue_shared/constants.js
index 63ce421271768d..235beb1f22df08 100644
--- a/app/assets/javascripts/vue_shared/constants.js
+++ b/app/assets/javascripts/vue_shared/constants.js
@@ -6,6 +6,8 @@ const INTERVALS = {
   day: 'day',
 };
 
+export const FILE_SYMLINK_MODE = '120000';
+
 export const timeRanges = [
   {
     label: __('30 minutes'),
-- 
GitLab


From aa52dc148f12b57f0b1fd5d27c24131f051fcd9e Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 15 Jul 2020 15:54:43 -0600
Subject: [PATCH 2/4] Display a symlink icon for repository file symlinks

---
 .../vue_shared/components/file_icon.vue       | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index ac55a296d15753..7484486d6b40c5 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -1,6 +1,7 @@
 <script>
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import getIconForFile from './file_icon/file_icon_map';
+import { FILE_SYMLINK_MODE } from '../constants';
 
 /* This is a re-usable vue component for rendering a svg sprite
     icon
@@ -25,9 +26,9 @@ export default {
       required: true,
     },
     fileMode: {
-      type: Number,
+      type: String,
       required: false,
-      default: -1
+      default: '',
     },
 
     folder: {
@@ -65,8 +66,12 @@ export default {
     },
   },
   computed: {
+    isSymlink() {
+      return this.fileMode === FILE_SYMLINK_MODE;
+    },
     spriteHref() {
       const iconName = this.submodule ? 'folder-git' : getIconForFile(this.fileName) || 'file';
+
       return `${gon.sprite_file_icons}#${iconName}`;
     },
     folderIconName() {
@@ -80,13 +85,11 @@ export default {
 </script>
 <template>
   <span>
-    <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
-      <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" />
+    <gl-loading-icon v-if="loading" :inline="true" />
+    <gl-icon v-else-if="isSymlink" name="symlink" :size="size" />
+    <svg v-else-if="!folder" :class="[iconSizeClass, cssClasses]">
+      <use v-bind="{ 'xlink:href': spriteHref }" />
+    </svg>
+    <gl-icon v-else :name="folderIconName" :size="size" class="folder-icon" />
   </span>
 </template>
-- 
GitLab


From 8bd09ba8d0a4d0ed183049dadac901677267a37e Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 15 Jul 2020 16:10:47 -0600
Subject: [PATCH 3/4] Test showing repository symlink files

The basic premise of these tests is: pass along the additional
symlink file mode and make sure it always works correctly
---
 .../blob_header_filepath_spec.js.snap         |  1 +
 .../table/__snapshots__/row_spec.js.snap      | 55 +++++++++++++++++++
 .../repository/components/table/index_spec.js | 15 ++++-
 .../repository/components/table/row_spec.js   | 16 ++++++
 .../vue_shared/components/file_icon_spec.js   | 27 ++++++---
 5 files changed, 105 insertions(+), 9 deletions(-)

diff --git a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
index 005b2c5da1c4a0..0f5b3cd3f5ee38 100644
--- a/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
+++ b/spec/frontend/blob/components/__snapshots__/blob_header_filepath_spec.js.snap
@@ -8,6 +8,7 @@ exports[`Blob Header Filepath rendering matches the snapshot 1`] = `
   <file-icon-stub
     aria-hidden="true"
     cssclasses="mr-2"
+    filemode=""
     filename="foo/bar/dummy.md"
     size="18"
   />
diff --git a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
index 97597ed806366a..ac60fc4917d96e 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -1,5 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Repository table row component renders a symlink table row 1`] = `
+<tr
+  class="tree-item"
+>
+  <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"
+    >
+      <file-icon-stub
+        class="mr-1 position-relative text-secondary"
+        cssclasses="position-relative file-icon"
+        filemode="120000"
+        filename="test"
+        size="16"
+      />
+      <span
+        class="position-relative"
+      >
+        test
+      </span>
+    </a>
+     
+    <!---->
+     
+    <!---->
+     
+    <!---->
+  </td>
+   
+  <td
+    class="d-none d-sm-table-cell tree-commit cursor-default"
+  >
+    <gl-skeleton-loading-stub
+      class="h-auto"
+      lines="1"
+    />
+  </td>
+   
+  <td
+    class="tree-time-ago text-right cursor-default"
+  >
+    <gl-skeleton-loading-stub
+      class="ml-auto h-auto w-50"
+      lines="1"
+    />
+  </td>
+</tr>
+`;
+
 exports[`Repository table row component renders table row 1`] = `
 <tr
   class="tree-item"
@@ -15,6 +68,7 @@ exports[`Repository table row component renders table row 1`] = `
       <file-icon-stub
         class="mr-1 position-relative text-secondary"
         cssclasses="position-relative file-icon"
+        filemode=""
         filename="test"
         size="16"
       />
@@ -67,6 +121,7 @@ exports[`Repository table row component renders table row for path with special
       <file-icon-stub
         class="mr-1 position-relative text-secondary"
         cssclasses="position-relative file-icon"
+        filemode=""
         filename="test"
         size="16"
       />
diff --git a/spec/frontend/repository/components/table/index_spec.js b/spec/frontend/repository/components/table/index_spec.js
index 9db90839b29c1c..ed50f292b8c82f 100644
--- a/spec/frontend/repository/components/table/index_spec.js
+++ b/spec/frontend/repository/components/table/index_spec.js
@@ -23,6 +23,15 @@ const MOCK_BLOBS = [
     type: 'blob',
     webUrl: 'http://test.com',
   },
+  {
+    id: '125abc',
+    sha: '125abc',
+    flatPath: 'blob3',
+    name: 'blob3.md',
+    type: 'blob',
+    webUrl: 'http://test.com',
+    mode: '120000',
+  },
 ];
 
 function factory({ path, isLoading = false, entries = {} }) {
@@ -74,7 +83,9 @@ describe('Repository table component', () => {
       },
     });
 
-    expect(vm.find(TableRow).exists()).toBe(true);
-    expect(vm.findAll(TableRow).length).toBe(2);
+    const rows = vm.findAll(TableRow);
+
+    expect(rows.length).toEqual(3);
+    expect(rows.at(2).attributes().mode).toEqual('120000');
   });
 });
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 800a7e586a8405..767b117c798e32 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -2,6 +2,7 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import { GlBadge, GlLink, GlIcon } from '@gitlab/ui';
 import TableRow from '~/repository/components/table/row.vue';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
+import { FILE_SYMLINK_MODE } from '~/vue_shared/constants';
 
 let vm;
 let $router;
@@ -48,6 +49,21 @@ describe('Repository table row component', () => {
     });
   });
 
+  it('renders a symlink table row', () => {
+    factory({
+      id: '1',
+      sha: '123',
+      path: 'test',
+      type: 'blob',
+      currentPath: '/',
+      mode: FILE_SYMLINK_MODE,
+    });
+
+    return vm.vm.$nextTick().then(() => {
+      expect(vm.element).toMatchSnapshot();
+    });
+  });
+
   it('renders table row for path with special character', () => {
     factory({
       id: '1',
diff --git a/spec/frontend/vue_shared/components/file_icon_spec.js b/spec/frontend/vue_shared/components/file_icon_spec.js
index 5a385eee60c454..adf0da21f9f054 100644
--- a/spec/frontend/vue_shared/components/file_icon_spec.js
+++ b/spec/frontend/vue_shared/components/file_icon_spec.js
@@ -1,12 +1,14 @@
 import { shallowMount } from '@vue/test-utils';
 import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
 import FileIcon from '~/vue_shared/components/file_icon.vue';
+import { FILE_SYMLINK_MODE } from '~/vue_shared/constants';
 
 describe('File Icon component', () => {
   let wrapper;
-  const findIcon = () => wrapper.find('svg');
+  const findSvgIcon = () => wrapper.find('svg');
+  const findGlIcon = () => wrapper.find(GlIcon);
   const getIconName = () =>
-    findIcon()
+    findSvgIcon()
       .find('use')
       .element.getAttribute('xlink:href')
       .replace(`${gon.sprite_file_icons}#`, '');
@@ -27,7 +29,7 @@ describe('File Icon component', () => {
     });
 
     expect(wrapper.element.tagName).toEqual('SPAN');
-    expect(findIcon().exists()).toBeDefined();
+    expect(findSvgIcon().exists()).toBeDefined();
   });
 
   it.each`
@@ -46,8 +48,8 @@ describe('File Icon component', () => {
       folder: true,
     });
 
-    expect(findIcon().exists()).toBe(false);
-    expect(wrapper.find(GlIcon).classes()).toContain('folder-icon');
+    expect(findSvgIcon().exists()).toBe(false);
+    expect(findGlIcon().classes()).toContain('folder-icon');
   });
 
   it('should render a loading icon', () => {
@@ -66,8 +68,19 @@ describe('File Icon component', () => {
       cssClasses: 'extraclasses',
       size,
     });
+    const classes = findSvgIcon().classes();
 
-    expect(findIcon().classes()).toContain(`s${size}`);
-    expect(findIcon().classes()).toContain('extraclasses');
+    expect(classes).toContain(`s${size}`);
+    expect(classes).toContain('extraclasses');
+  });
+
+  it('should render a symlink icon', () => {
+    createComponent({
+      fileName: 'anything',
+      fileMode: FILE_SYMLINK_MODE,
+    });
+
+    expect(findSvgIcon().exists()).toBe(false);
+    expect(findGlIcon().attributes('name')).toBe('symlink');
   });
 });
-- 
GitLab


From fb70ac687ff071efcfb2ca79e3715035a63ae7e2 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Fri, 10 Jul 2020 01:19:22 -0600
Subject: [PATCH 4/4] Add changelog for symlink icon

---
 changelogs/unreleased/symlink-icon-ui.yml | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 changelogs/unreleased/symlink-icon-ui.yml

diff --git a/changelogs/unreleased/symlink-icon-ui.yml b/changelogs/unreleased/symlink-icon-ui.yml
new file mode 100644
index 00000000000000..6a907bec6cb192
--- /dev/null
+++ b/changelogs/unreleased/symlink-icon-ui.yml
@@ -0,0 +1,5 @@
+---
+title: Show symlink icon in repository browser
+merge_request: 36524
+author:
+type: fixed
-- 
GitLab