Fixed bug when clicking file link causing user to navigate away

Adds a test for flattenedFiles
Changes the data method to not be an arrow method
Various other review fixes

app/assets/javascripts/repo/components/repo.vue

@@ -11,7 +11,9 @@ import Helper from '../helpers/repo_helper';
 import MonacoLoaderHelper from '../helpers/monaco_loader_helper';
 
 export default {
-  data: () => Store,
+  data() {
+    return Store;
+  },
   mixins: [RepoMixin],
   components: {
     RepoSidebar,

app/assets/javascripts/repo/components/repo_commit_section.vue

@@ -9,7 +9,9 @@ import { visitUrl } from '../../lib/utils/url_utility';
 export default {
   mixins: [RepoMixin],
 
-  data: () => Store,
+  data() {
+    return Store;
+  },
 
   components: {
     PopupDialog,

app/assets/javascripts/repo/components/repo_edit_button.vue

@@ -3,7 +3,9 @@ import Store from '../stores/repo_store';
 import RepoMixin from '../mixins/repo_mixin';
 
 export default {
-  data: () => Store,
+  data() {
+    return Store;
+  },
   mixins: [RepoMixin],
   computed: {
     buttonLabel() {

app/assets/javascripts/repo/components/repo_editor.vue

@@ -5,7 +5,9 @@ import Service from '../services/repo_service';
 import Helper from '../helpers/repo_helper';
 
 const RepoEditor = {
-  data: () => Store,
+  data() {
+    return Store;
+  },
 
   destroyed() {
     if (Helper.monacoInstance) {

app/assets/javascripts/repo/components/repo_file.vue

@@ -31,7 +31,7 @@
     },
     methods: {
       linkClicked(file) {
-        eventHub.$emit('linkclicked', file);
+        eventHub.$emit('fileNameClicked', file);
       },
     },
   };
@@ -40,7 +40,7 @@
 <template>
   <tr
     class="file"
-    @click.stop="linkClicked(file)">
+    @click.prevent="linkClicked(file)">
     <td>
       <i
         class="fa fa-fw file-icon"

app/assets/javascripts/repo/components/repo_file_buttons.vue

@@ -4,7 +4,9 @@ import Helper from '../helpers/repo_helper';
 import RepoMixin from '../mixins/repo_mixin';
 
 const RepoFileButtons = {
-  data: () => Store,
+  data() {
+    return Store;
+  },
 
   mixins: [RepoMixin],
 

app/assets/javascripts/repo/components/repo_preview.vue

@@ -4,7 +4,9 @@
 import Store from '../stores/repo_store';
 
 export default {
-  data: () => Store,
+  data() {
+    return Store;
+  },
   computed: {
     html() {
       return this.activeFile.html;

app/assets/javascripts/repo/components/repo_sidebar.vue

@@ -20,15 +20,17 @@ export default {
     window.addEventListener('popstate', this.checkHistory);
   },
   destroyed() {
-    eventHub.$off('linkclicked', this.fileClicked);
+    eventHub.$off('fileNameClicked', this.fileClicked);
     eventHub.$off('goToPreviousDirectoryClicked', this.goToPreviousDirectoryClicked);
     window.removeEventListener('popstate', this.checkHistory);
   },
   mounted() {
-    eventHub.$on('linkclicked', this.fileClicked);
+    eventHub.$on('fileNameClicked', this.fileClicked);
     eventHub.$on('goToPreviousDirectoryClicked', this.goToPreviousDirectoryClicked);
   },
-  data: () => Store,
+  data() {
+    return Store;
+  },
   computed: {
     flattendFiles() {
       const mapFiles = arr => (!arr.files.length ? [] : _.map(arr.files, a => [a, mapFiles(a)]));

app/assets/javascripts/repo/components/repo_tabs.vue

@@ -8,7 +8,9 @@
     components: {
       'repo-tab': RepoTab,
     },
-    data: () => Store,
+    data() {
+      return Store;
+    },
   };
 </script>
 

app/assets/javascripts/repo/helpers/repo_helper.js

@@ -55,18 +55,20 @@ const RepoHelper = {
   },
 
   setDirectoryOpen(tree, title) {
-    const file = tree;
-    if (!file) return;
+    if (!tree) return;
 
-    file.opened = true;
-    RepoHelper.updateHistoryEntry(file.url, title);
+    Object.assign(tree, {
+      opened: true,
+    });
+
+    RepoHelper.updateHistoryEntry(tree.url, title);
   },
 
   setDirectoryToClosed(entry) {
-    const dir = entry;
-
-    dir.opened = false;
-    dir.files = [];
+    Object.assign(entry, {
+      opened: false,
+      files: [],
+    });
   },
 
   isRenderable() {
@@ -156,7 +158,8 @@ const RepoHelper = {
 
   serializeRepoEntity(type, entity, level = 0) {
     const { url, name, icon, last_commit } = entity;
-    const returnObj = {
+
+    return {
       type,
       name,
       url,
@@ -165,20 +168,13 @@ const RepoHelper = {
       files: [],
       loading: false,
       opened: false,
-    };
-
       // eslint-disable-next-line camelcase
-    if (last_commit) {
-      returnObj.lastCommit = {
+      lastCommit: last_commit ? {
         url: `${Store.projectUrl}/commit/${last_commit.id}`,
         message: last_commit.message,
         updatedAt: last_commit.committed_date,
+      } : {},
     };
-    } else {
-      returnObj.lastCommit = {};
-    }
-
-    return returnObj;
   },
 
   scrollTabsRight() {

app/controllers/projects/tree_controller.rb

@@ -36,7 +36,7 @@ class Projects::TreeController < Projects::ApplicationController
 
       format.json do
         page_title @path.presence || _("Files"), @ref, @project.name_with_namespace
-        response.header['Is-Root'] = @path.empty?
+        response.header['is-root'] = @path.empty?
 
         # n+1: https://gitlab.com/gitlab-org/gitlab-ce/issues/38261
         Gitlab::GitalyClient.allow_n_plus_1_calls do

spec/javascripts/repo/components/repo_sidebar_spec.js

@@ -69,6 +69,19 @@ describe('RepoSidebar', () => {
     expect(vm.$el.querySelector('tbody .prev-directory')).toBeTruthy();
   });
 
+  describe('flattendFiles', () => {
+    it('returns a flattend array of files', () => {
+      const f = file();
+      f.files.push(file('testing 123'));
+      const files = [f, file()];
+      vm = createComponent();
+      vm.files = files;
+
+      expect(vm.flattendFiles.length).toBe(3);
+      expect(vm.flattendFiles[1].name).toBe('testing 123');
+    });
+  });
+
   describe('methods', () => {
     describe('fileClicked', () => {
       it('should fetch data for new file', () => {

spec/javascripts/repo/mock_data.js

 import RepoHelper from '~/repo/helpers/repo_helper';
 
 // eslint-disable-next-line import/prefer-default-export
-export const file = () => RepoHelper.serializeRepoEntity('blob', {
+export const file = (name = 'name') => RepoHelper.serializeRepoEntity('blob', {
   icon: 'icon',
   url: 'url',
-  name: 'name',
+  name,
   last_commit: {
     id: '123',
     message: 'test',