Render folder lock icon in table rows

When a folder is locked this renders the lock icon next
to the folder name

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

 <script>
-import { GlBadge, GlLink, GlSkeletonLoading } from '@gitlab/ui';
+import { GlBadge, GlLink, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
 import { visitUrl } 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 getRefMixin from '../../mixins/get_ref';
 import getCommit from '../../queries/getCommit.query.graphql';
@@ -12,6 +13,10 @@ export default {
     GlLink,
     GlSkeletonLoading,
     TimeagoTooltip,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
   },
   apollo: {
     commit: {
@@ -95,6 +100,9 @@ export default {
     shortSha() {
       return this.id.slice(0, 8);
     },
+    hasLockLabel() {
+      return this.commit && this.commit.lockLabel;
+    },
   },
   methods: {
     openRow(e) {
@@ -122,6 +130,14 @@ export default {
       <template v-if="isSubmodule">
         @ <gl-link :href="submoduleTreeUrl" class="commit-sha">{{ shortSha }}</gl-link>
       </template>
+      <icon
+        v-if="hasLockLabel"
+        v-gl-tooltip
+        :title="commit.lockLabel"
+        name="lock"
+        :size="12"
+        class="ml-2 vertical-align-middle"
+      />
     </td>
     <td class="d-none d-sm-table-cell tree-commit">
       <gl-link

app/assets/javascripts/repository/log_tree.js

@@ -14,6 +14,7 @@ export function normalizeData(data) {
     commitPath: d.commit_path,
     fileName: d.file_name,
     type: d.type,
+    lockLabel: d.lock_label,
     __typename: 'LogTreeCommit',
   }));
 }

app/assets/javascripts/repository/queries/getCommit.query.graphql

@@ -6,5 +6,6 @@ query getCommit($fileName: String!, $type: String!, $path: String!) {
     commitPath
     fileName
     type
+    lockLabel
   }
 }

app/assets/javascripts/repository/queries/getCommits.query.graphql

@@ -6,5 +6,6 @@ query getCommits {
     commitPath
     fileName
     type
+    lockLabel
   }
 }

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

@@ -25,6 +25,8 @@ exports[`Repository table row component renders table row 1`] = `
     <!---->
      
     <!---->
+     
+    <!---->
   </td>
    
   <td

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

@@ -2,6 +2,7 @@ import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import { GlBadge, GlLink } from '@gitlab/ui';
 import { visitUrl } from '~/lib/utils/url_utility';
 import TableRow from '~/repository/components/table/row.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 
 jest.mock('~/lib/utils/url_utility');
 
@@ -156,4 +157,17 @@ describe('Repository table row component', () => {
     expect(vm.find('a').attributes('href')).toEqual('https://test.com');
     expect(vm.find(GlLink).attributes('href')).toEqual('https://test.com/commit');
   });
+
+  it('renders lock icon', () => {
+    factory({
+      id: '1',
+      path: 'test',
+      type: 'tree',
+      currentPath: '/',
+    });
+
+    vm.setData({ commit: { lockLabel: 'Locked by Root', committedDate: '2019-01-01' } });
+
+    expect(vm.find(Icon).exists()).toBe(true);
+  });
 });