1 files changed, 44 insertions, 5 deletions
diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index 4519f82fc93..c31e7fa71a2 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,12 +1,30 @@
 <script>
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSkeletonLoading } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
+import TimeagoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import { getIconName } from '../../utils/icon';
 import getRefMixin from '../../mixins/get_ref';
+import getCommit from '../../queries/getCommit.query.graphql';
 
 export default {
   components: {
     GlBadge,
+    GlLink,
+    GlSkeletonLoading,
+    TimeagoTooltip,
+  },
+  apollo: {
+    commit: {
+      query: getCommit,
+      variables() {
+        return {
+          fileName: this.name,
+          type: this.type,
+          path: this.currentPath,
+          projectPath: this.projectPath,
+        };
+      },
+    },
   },
   mixins: [getRefMixin],
   props: {
@@ -14,10 +32,18 @@ export default {
       type: String,
       required: true,
     },
+    projectPath: {
+      type: String,
+      required: true,
+    },
     currentPath: {
       type: String,
       required: true,
     },
+    name: {
+      type: String,
+      required: true,
+    },
     path: {
       type: String,
       required: true,
@@ -37,6 +63,11 @@ export default {
       default: null,
     },
   },
+  data() {
+    return {
+      commit: null,
+    };
+  },
   computed: {
     routerLinkTo() {
       return this.isFolder ? { path: `/tree/${this.ref}/${this.path}` } : null;
@@ -73,7 +104,7 @@ export default {
 </script>
 
 <template>
-  <tr v-once :class="`file_${id}`" class="tree-item" @click="openRow">
+  <tr :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" :href="url" class="str-truncated">
@@ -83,10 +114,18 @@ export default {
         LFS
       </gl-badge>
       <template v-if="isSubmodule">
-        @ <a href="#" class="commit-sha">{{ shortSha }}</a>
+        @ <gl-link href="#" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
     </td>
-    <td class="d-none d-sm-table-cell tree-commit"></td>
-    <td class="tree-time-ago text-right"></td>
+    <td class="d-none d-sm-table-cell tree-commit">
+      <gl-link v-if="commit" :href="commit.commitPath" class="str-truncated-100 tree-commit-link">
+        {{ commit.message }}
+      </gl-link>
+      <gl-skeleton-loading v-else :lines="1" class="h-auto" />
+    </td>
+    <td class="tree-time-ago text-right">
+      <timeago-tooltip v-if="commit" :time="commit.committedDate" tooltip-placement="bottom" />
+      <gl-skeleton-loading v-else :lines="1" class="ml-auto h-auto w-50" />
+    </td>
   </tr>
 </template>