Pull files for repository tree from GraphQL API

1 files changed, 16 insertions, 4 deletions

diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 0ad0fdbd605..9a264bef87e 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -6,7 +6,11 @@ export default {
   mixins: [getRefMixin],
   props: {
     id: {
-      type: Number,
+      type: String,
+      required: true,
+    },
+    currentPath: {
+      type: String,
       required: true,
     },
     path: {
@@ -26,7 +30,7 @@ export default {
       return `fa-${getIconName(this.type, this.path)}`;
     },
     isFolder() {
-      return this.type === 'folder';
+      return this.type === 'tree';
     },
     isSubmodule() {
       return this.type === 'commit';
@@ -34,6 +38,12 @@ export default {
     linkComponent() {
       return this.isFolder ? 'router-link' : 'a';
     },
+    fullPath() {
+      return this.path.replace(new RegExp(`^${this.currentPath}/`), '');
+    },
+    shortSha() {
+      return this.id.slice(0, 8);
+    },
   },
   methods: {
     openRow() {
@@ -49,9 +59,11 @@ export default {
   <tr v-once :class="`file_${id}`" class="tree-item" @click="openRow">
     <td class="tree-item-file-name">
       <i :aria-label="type" role="img" :class="iconName" class="fa fa-fw"></i>
-      <component :is="linkComponent" :to="routerLinkTo" class="str-truncated">{{ path }}</component>
+      <component :is="linkComponent" :to="routerLinkTo" class="str-truncated">
+        {{ fullPath }}
+      </component>
       <template v-if="isSubmodule">
-        @ <a href="#" class="commit-sha">{{ id }}</a>
+        @ <a href="#" class="commit-sha">{{ shortSha }}</a>
       </template>
     </td>
     <td class="d-none d-sm-table-cell tree-commit"></td>