Click file row in repository Vue app to view file

3 files changed, 34 insertions, 1 deletions

diff --git a/app/assets/javascripts/repository/components/table/row.vue b/app/assets/javascripts/repository/components/table/row.vue
index e24a5e2c447..4519f82fc93 100644
--- a/app/assets/javascripts/repository/components/table/row.vue
+++ b/app/assets/javascripts/repository/components/table/row.vue
@@ -1,5 +1,6 @@
 <script>
 import { GlBadge } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
 import { getIconName } from '../../utils/icon';
 import getRefMixin from '../../mixins/get_ref';
 
@@ -63,6 +64,8 @@ export default {
     openRow() {
       if (this.isFolder) {
         this.$router.push(this.routerLinkTo);
+      } else {
+        visitUrl(this.url);
       }
     },
   },
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 86bfde1a28c..1f06d693411 100644
--- a/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
+++ b/spec/frontend/repository/components/table/__snapshots__/row_spec.js.snap
@@ -15,6 +15,7 @@ exports[`Repository table row component renders table row 1`] = `
      
     <a
       class="str-truncated"
+      href="https://test.com"
     >
       
       test
diff --git a/spec/frontend/repository/components/table/row_spec.js b/spec/frontend/repository/components/table/row_spec.js
index 90a502966ad..5a345ddeacd 100644
--- a/spec/frontend/repository/components/table/row_spec.js
+++ b/spec/frontend/repository/components/table/row_spec.js
@@ -1,7 +1,10 @@
 import { shallowMount, RouterLinkStub } from '@vue/test-utils';
 import { GlBadge } from '@gitlab/ui';
+import { visitUrl } from '~/lib/utils/url_utility';
 import TableRow from '~/repository/components/table/row.vue';
 
+jest.mock('~/lib/utils/url_utility');
+
 let vm;
 let $router;
 
@@ -11,7 +14,10 @@ function factory(propsData = {}) {
   };
 
   vm = shallowMount(TableRow, {
-    propsData,
+    propsData: {
+      ...propsData,
+      url: `https://test.com`,
+    },
     mocks: {
       $router,
     },
@@ -26,6 +32,7 @@ function factory(propsData = {}) {
 describe('Repository table row component', () => {
   afterEach(() => {
     vm.destroy();
+    jest.clearAllMocks();
   });
 
   it('renders table row', () => {
@@ -77,6 +84,28 @@ describe('Repository table row component', () => {
     }
   });
 
+  it.each`
+    type        | pushes
+    ${'tree'}   | ${true}
+    ${'file'}   | ${false}
+    ${'commit'} | ${false}
+  `('calls visitUrl if $type is not tree', ({ type, pushes }) => {
+    factory({
+      id: '1',
+      path: 'test',
+      type,
+      currentPath: '/',
+    });
+
+    vm.trigger('click');
+
+    if (pushes) {
+      expect(visitUrl).not.toHaveBeenCalled();
+    } else {
+      expect(visitUrl).toHaveBeenCalledWith('https://test.com');
+    }
+  });
+
   it('renders commit ID for submodule', () => {
     factory({
       id: '1',