Added file tree to merge request diffs

This file tree displays all the diff files in a tree like format
Each file is taken and converted into a tree with folders
Each folder can be toggled open & closed
Clicking a file will scroll to the diff file & highlight with a glow affect

Searching the tree list will search only files & return a list of the
files without any folders

Each file row contains an icon to show changed, new file or deleted
Each row will also contain the added & removed lines count

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/14249

15 files changed, 461 insertions, 135 deletions

diff --git a/spec/features/merge_request/user_comments_on_diff_spec.rb b/spec/features/merge_request/user_comments_on_diff_spec.rb
index 441b080bee5..00cf368e8c9 100644
--- a/spec/features/merge_request/user_comments_on_diff_spec.rb
+++ b/spec/features/merge_request/user_comments_on_diff_spec.rb
@@ -28,7 +28,7 @@ describe 'User comments on a diff', :js do
             click_button('Comment')
           end
 
-          page.within('.files > div:nth-child(3)') do
+          page.within('.diff-files-holder > div:nth-child(3)') do
             expect(page).to have_content('Line is wrong')
 
             find('.js-btn-vue-toggle-comments').click
@@ -49,7 +49,7 @@ describe 'User comments on a diff', :js do
 
           wait_for_requests
 
-          page.within('.files > div:nth-child(2) .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(2) .note-body > .note-text') do
             expect(page).to have_content('Line is correct')
           end
 
@@ -63,7 +63,7 @@ describe 'User comments on a diff', :js do
           wait_for_requests
 
           # Hide the comment.
-          page.within('.files > div:nth-child(3)') do
+          page.within('.diff-files-holder > div:nth-child(3)') do
             find('.js-btn-vue-toggle-comments').click
 
             expect(page).not_to have_content('Line is wrong')
@@ -71,21 +71,21 @@ describe 'User comments on a diff', :js do
 
           # At this moment a user should see only one comment.
           # The other one should be hidden.
-          page.within('.files > div:nth-child(2) .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(2) .note-body > .note-text') do
             expect(page).to have_content('Line is correct')
           end
 
           # Show the comment.
-          page.within('.files > div:nth-child(3)') do
+          page.within('.diff-files-holder > div:nth-child(3)') do
             find('.js-btn-vue-toggle-comments').click
           end
 
           # Now both the comments should be shown.
-          page.within('.files > div:nth-child(3) .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(3) .note-body > .note-text') do
             expect(page).to have_content('Line is wrong')
           end
 
-          page.within('.files > div:nth-child(2) .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(2) .note-body > .note-text') do
             expect(page).to have_content('Line is correct')
           end
 
@@ -95,11 +95,11 @@ describe 'User comments on a diff', :js do
 
           wait_for_requests
 
-          page.within('.files > div:nth-child(3) .parallel .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(3) .parallel .note-body > .note-text') do
             expect(page).to have_content('Line is wrong')
           end
 
-          page.within('.files > div:nth-child(2) .parallel .note-body > .note-text') do
+          page.within('.diff-files-holder > div:nth-child(2) .parallel .note-body > .note-text') do
             expect(page).to have_content('Line is correct')
           end
         end
diff --git a/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb b/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
index 428eb414274..d3da8cc6752 100644
--- a/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
+++ b/spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb
@@ -81,6 +81,8 @@ describe 'Merge request > User sees avatars on diff notes', :js do
         visit diffs_project_merge_request_path(project, merge_request, view: view)
 
         wait_for_requests
+
+        find('.js-toggle-tree-list').click
       end
 
       it 'shows note avatar' do
diff --git a/spec/features/merge_request/user_sees_versions_spec.rb b/spec/features/merge_request/user_sees_versions_spec.rb
index f42b4dcbb47..92db4f44098 100644
--- a/spec/features/merge_request/user_sees_versions_spec.rb
+++ b/spec/features/merge_request/user_sees_versions_spec.rb
@@ -110,7 +110,8 @@ describe 'Merge request > User sees versions', :js do
         diff_id: merge_request_diff3.id,
         start_sha: '6f6d7e7ed97bb5f0054f2b1df789b39ca89b6ff9'
       )
-      expect(page).to have_content '4 changed files with 15 additions and 6 deletions'
+      expect(page).to have_content '4 changed files'
+      expect(page).to have_content '15 additions 6 deletions'
       expect(page).to have_content 'Not all comments are displayed'
 
       position = Gitlab::Diff::Position.new(
@@ -131,7 +132,8 @@ describe 'Merge request > User sees versions', :js do
     end
 
     it 'show diff between new and old version' do
-      expect(page).to have_content '4 changed files with 15 additions and 6 deletions'
+      expect(page).to have_content '4 changed files'
+      expect(page).to have_content '15 additions 6 deletions'
     end
 
     it 'returns to latest version when "Show latest version" button is clicked' do
@@ -158,7 +160,7 @@ describe 'Merge request > User sees versions', :js do
 
     it 'has 0 chages between versions' do
       page.within '.mr-version-compare-dropdown' do
-        expect(find('.dropdown-toggle')).to have_content 'version 1'
+        expect(find('.dropdown-menu-toggle')).to have_content 'version 1'
       end
 
       page.within '.mr-version-dropdown' do
@@ -179,7 +181,7 @@ describe 'Merge request > User sees versions', :js do
 
     it 'sets the compared versions to be the same' do
       page.within '.mr-version-compare-dropdown' do
-        expect(find('.dropdown-toggle')).to have_content 'version 2'
+        expect(find('.dropdown-menu-toggle')).to have_content 'version 2'
       end
 
       page.within '.mr-version-dropdown' do
diff --git a/spec/features/merge_request/user_views_diffs_spec.rb b/spec/features/merge_request/user_views_diffs_spec.rb
index b1bfe9e5de3..7f95a1282f9 100644
--- a/spec/features/merge_request/user_views_diffs_spec.rb
+++ b/spec/features/merge_request/user_views_diffs_spec.rb
@@ -10,6 +10,8 @@ describe 'User views diffs', :js do
     visit(diffs_project_merge_request_path(project, merge_request))
 
     wait_for_requests
+
+    find('.js-toggle-tree-list').click
   end
 
   shared_examples 'unfold diffs' do
diff --git a/spec/javascripts/diffs/components/app_spec.js b/spec/javascripts/diffs/components/app_spec.js
index cf7d8df5405..a3a714678af 100644
--- a/spec/javascripts/diffs/components/app_spec.js
+++ b/spec/javascripts/diffs/components/app_spec.js
@@ -44,7 +44,8 @@ describe('diffs/components/app', () => {
   it('shows comments message, with commit', done => {
     vm.$store.state.diffs.commit = getDiffWithCommit().commit;
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
         expect(vm.$el).toContainText('Only comments from the following commit are shown below');
         expect(vm.$el).toContainElement('.blob-commit-info');
@@ -55,10 +56,14 @@ describe('diffs/components/app', () => {
 
   it('shows comments message, with old mergeRequestDiff', done => {
     vm.$store.state.diffs.mergeRequestDiff = { latest: false };
+    vm.$store.state.diffs.targetBranch = 'master';
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
-        expect(vm.$el).toContainText("Not all comments are displayed because you're viewing an old version of the diff.");
+        expect(vm.$el).toContainText(
+          "Not all comments are displayed because you're viewing an old version of the diff.",
+        );
       })
       .then(done)
       .catch(done.fail);
@@ -67,9 +72,12 @@ describe('diffs/components/app', () => {
   it('shows comments message, with startVersion', done => {
     vm.$store.state.diffs.startVersion = 'test';
 
-    vm.$nextTick()
+    vm
+      .$nextTick()
       .then(() => {
-        expect(vm.$el).toContainText("Not all comments are displayed because you're comparing two versions of the diff.");
+        expect(vm.$el).toContainText(
+          "Not all comments are displayed because you're comparing two versions of the diff.",
+        );
       })
       .then(done)
       .catch(done.fail);
diff --git a/spec/javascripts/diffs/components/changed_files_spec.js b/spec/javascripts/diffs/components/changed_files_spec.js
deleted file mode 100644
index 7f21273a991..00000000000
--- a/spec/javascripts/diffs/components/changed_files_spec.js
+++ /dev/null
@@ -1,105 +0,0 @@
-import Vue from 'vue';
-import Vuex from 'vuex';
-import { mountComponentWithStore } from 'spec/helpers';
-import diffsModule from '~/diffs/store/modules';
-import changedFiles from '~/diffs/components/changed_files.vue';
-
-describe('ChangedFiles', () => {
-  const Component = Vue.extend(changedFiles);
-  const store = new Vuex.Store({
-    modules: {
-      diffs: diffsModule(),
-    },
-  });
-
-  let vm;
-
-  beforeEach(() => {
-    setFixtures(`
-      <div id="dummy-element"></div>
-      <div class="js-tabs-affix"></div>
-    `);
-
-    const props = {
-      diffFiles: [
-        {
-          addedLines: 10,
-          removedLines: 20,
-          blob: {
-            path: 'some/code.txt',
-          },
-          filePath: 'some/code.txt',
-        },
-      ],
-    };
-
-    vm = mountComponentWithStore(Component, { props, store });
-  });
-
-  describe('with single file added', () => {
-    it('shows files changes', () => {
-      expect(vm.$el).toContainText('1 changed file');
-    });
-
-    it('shows file additions and deletions', () => {
-      expect(vm.$el).toContainText('10 additions');
-      expect(vm.$el).toContainText('20 deletions');
-    });
-  });
-
-  describe('diff view mode buttons', () => {
-    let inlineButton;
-    let parallelButton;
-
-    beforeEach(() => {
-      inlineButton = vm.$el.querySelector('.js-inline-diff-button');
-      parallelButton = vm.$el.querySelector('.js-parallel-diff-button');
-    });
-
-    it('should have Inline and Side-by-side buttons', () => {
-      expect(inlineButton).toBeDefined();
-      expect(parallelButton).toBeDefined();
-    });
-
-    it('should add active class to Inline button', done => {
-      vm.$store.state.diffs.diffViewType = 'inline';
-
-      vm.$nextTick(() => {
-        expect(inlineButton.classList.contains('active')).toEqual(true);
-        expect(parallelButton.classList.contains('active')).toEqual(false);
-
-        done();
-      });
-    });
-
-    it('should toggle active state of buttons when diff view type changed', done => {
-      vm.$store.state.diffs.diffViewType = 'parallel';
-
-      vm.$nextTick(() => {
-        expect(inlineButton.classList.contains('active')).toEqual(false);
-        expect(parallelButton.classList.contains('active')).toEqual(true);
-
-        done();
-      });
-    });
-
-    describe('clicking them', () => {
-      it('should toggle the diff view type', done => {
-        parallelButton.click();
-
-        vm.$nextTick(() => {
-          expect(inlineButton.classList.contains('active')).toEqual(false);
-          expect(parallelButton.classList.contains('active')).toEqual(true);
-
-          inlineButton.click();
-
-          vm.$nextTick(() => {
-            expect(inlineButton.classList.contains('active')).toEqual(true);
-            expect(parallelButton.classList.contains('active')).toEqual(false);
-            done();
-          });
-        });
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/diffs/components/file_row_stats_spec.js b/spec/javascripts/diffs/components/file_row_stats_spec.js
new file mode 100644
index 00000000000..a8a7f3f1d82
--- /dev/null
+++ b/spec/javascripts/diffs/components/file_row_stats_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import FileRowStats from '~/diffs/components/file_row_stats.vue';
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Diff file row stats', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(FileRowStats);
+  });
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      file: {
+        addedLines: 20,
+        removedLines: 10,
+      },
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders added lines count', () => {
+    expect(vm.$el.querySelector('.cgreen').textContent).toContain('+20');
+  });
+
+  it('renders removed lines count', () => {
+    expect(vm.$el.querySelector('.cred').textContent).toContain('-10');
+  });
+});
diff --git a/spec/javascripts/diffs/components/tree_list_spec.js b/spec/javascripts/diffs/components/tree_list_spec.js
new file mode 100644
index 00000000000..08e25d2004e
--- /dev/null
+++ b/spec/javascripts/diffs/components/tree_list_spec.js
@@ -0,0 +1,120 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import TreeList from '~/diffs/components/tree_list.vue';
+import createStore from '~/diffs/store/modules';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+
+describe('Diffs tree list component', () => {
+  let Component;
+  let vm;
+
+  beforeAll(() => {
+    Component = Vue.extend(TreeList);
+  });
+
+  beforeEach(() => {
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store({
+      modules: {
+        diffs: createStore(),
+      },
+    });
+
+    // Setup initial state
+    store.state.diffs.addedLines = 10;
+    store.state.diffs.removedLines = 20;
+    store.state.diffs.diffFiles.push('test');
+
+    vm = mountComponentWithStore(Component, { store });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders diff stats', () => {
+    expect(vm.$el.textContent).toContain('1 changed file');
+    expect(vm.$el.textContent).toContain('10 additions');
+    expect(vm.$el.textContent).toContain('20 deletions');
+  });
+
+  it('renders empty text', () => {
+    expect(vm.$el.textContent).toContain('No files found');
+  });
+
+  describe('with files', () => {
+    beforeEach(done => {
+      Object.assign(vm.$store.state.diffs.treeEntries, {
+        'index.js': {
+          addedLines: 0,
+          changed: true,
+          deleted: false,
+          fileHash: 'test',
+          key: 'index.js',
+          name: 'index.js',
+          path: 'index.js',
+          removedLines: 0,
+          tempFile: true,
+          type: 'blob',
+        },
+        app: {
+          key: 'app',
+          path: 'app',
+          name: 'app',
+          type: 'tree',
+          tree: [],
+        },
+      });
+      vm.$store.state.diffs.tree = [
+        vm.$store.state.diffs.treeEntries['index.js'],
+        vm.$store.state.diffs.treeEntries.app,
+      ];
+
+      vm.$nextTick(done);
+    });
+
+    it('renders tree', () => {
+      expect(vm.$el.querySelectorAll('.file-row').length).toBe(2);
+      expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js');
+      expect(vm.$el.querySelectorAll('.file-row')[1].textContent).toContain('app');
+    });
+
+    it('filters tree list to blobs matching search', done => {
+      vm.search = 'index';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelectorAll('.file-row').length).toBe(1);
+        expect(vm.$el.querySelectorAll('.file-row')[0].textContent).toContain('index.js');
+
+        done();
+      });
+    });
+
+    it('calls toggleTreeOpen when clicking folder', () => {
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelectorAll('.file-row')[1].click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/toggleTreeOpen', 'app');
+    });
+
+    it('calls scrollToFile when clicking blob', () => {
+      spyOn(vm.$store, 'dispatch').and.stub();
+
+      vm.$el.querySelector('.file-row').click();
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('diffs/scrollToFile', 'index.js');
+    });
+  });
+
+  describe('clearSearch', () => {
+    it('resets search', () => {
+      vm.search = 'test';
+
+      vm.$el.querySelector('.tree-list-clear-icon').click();
+
+      expect(vm.search).toBe('');
+    });
+  });
+});
diff --git a/spec/javascripts/diffs/store/actions_spec.js b/spec/javascripts/diffs/store/actions_spec.js
index 05b39bad6ea..aacad7a479b 100644
--- a/spec/javascripts/diffs/store/actions_spec.js
+++ b/spec/javascripts/diffs/store/actions_spec.js
@@ -22,6 +22,9 @@ import actions, {
   expandAllFiles,
   toggleFileDiscussions,
   saveDiffDiscussion,
+  toggleTreeOpen,
+  scrollToFile,
+  toggleShowTreeList,
 } from '~/diffs/store/actions';
 import * as types from '~/diffs/store/mutation_types';
 import { reduceDiscussionsToLineCodes } from '~/notes/stores/utils';
@@ -608,4 +611,88 @@ describe('DiffsStoreActions', () => {
         .catch(done.fail);
     });
   });
+
+  describe('toggleTreeOpen', () => {
+    it('commits TOGGLE_FOLDER_OPEN', done => {
+      testAction(
+        toggleTreeOpen,
+        'path',
+        {},
+        [{ type: types.TOGGLE_FOLDER_OPEN, payload: 'path' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('scrollToFile', () => {
+    let commit;
+
+    beforeEach(() => {
+      commit = jasmine.createSpy();
+      jasmine.clock().install();
+    });
+
+    afterEach(() => {
+      jasmine.clock().uninstall();
+    });
+
+    it('updates location hash', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      expect(document.location.hash).toBe('#test');
+    });
+
+    it('commits UPDATE_CURRENT_DIFF_FILE_ID', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      expect(commit).toHaveBeenCalledWith(types.UPDATE_CURRENT_DIFF_FILE_ID, 'test');
+    });
+
+    it('resets currentDiffId after timeout', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            fileHash: 'test',
+          },
+        },
+      };
+
+      scrollToFile({ state, commit }, 'path');
+
+      jasmine.clock().tick(1000);
+
+      expect(commit.calls.argsFor(1)).toEqual([types.UPDATE_CURRENT_DIFF_FILE_ID, '']);
+    });
+  });
+
+  describe('toggleShowTreeList', () => {
+    it('commits toggle', done => {
+      testAction(toggleShowTreeList, null, {}, [{ type: types.TOGGLE_SHOW_TREE_LIST }], [], done);
+    });
+
+    it('updates localStorage', () => {
+      spyOn(localStorage, 'setItem');
+
+      toggleShowTreeList({ commit() {}, state: { showTreeList: true } });
+
+      expect(localStorage.setItem).toHaveBeenCalledWith('mr_tree_show', true);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/getters_spec.js b/spec/javascripts/diffs/store/getters_spec.js
index 4747e437c4e..cfeaaec6980 100644
--- a/spec/javascripts/diffs/store/getters_spec.js
+++ b/spec/javascripts/diffs/store/getters_spec.js
@@ -291,4 +291,31 @@ describe('Diffs Module Getters', () => {
       expect(getters.getDiffFileByHash(localState)('123')).toBeUndefined();
     });
   });
+
+  describe('allBlobs', () => {
+    it('returns an array of blobs', () => {
+      localState.treeEntries = {
+        file: {
+          type: 'blob',
+        },
+        tree: {
+          type: 'tree',
+        },
+      };
+
+      expect(getters.allBlobs(localState)).toEqual([
+        {
+          type: 'blob',
+        },
+      ]);
+    });
+  });
+
+  describe('diffFilesLength', () => {
+    it('returns length of diff files', () => {
+      localState.diffFiles.push('test', 'test 2');
+
+      expect(getters.diffFilesLength(localState)).toBe(2);
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/mutations_spec.js b/spec/javascripts/diffs/store/mutations_spec.js
index 9a5d8dfbd15..cc8d5dc4bac 100644
--- a/spec/javascripts/diffs/store/mutations_spec.js
+++ b/spec/javascripts/diffs/store/mutations_spec.js
@@ -1,3 +1,4 @@
+import createState from '~/diffs/store/modules/diff_state';
 import mutations from '~/diffs/store/mutations';
 import * as types from '~/diffs/store/mutation_types';
 import { INLINE_DIFF_VIEW_TYPE } from '~/diffs/constants';
@@ -356,4 +357,44 @@ describe('DiffsStoreMutations', () => {
       expect(state.diffFiles[0].highlightedDiffLines[0].discussions.length).toEqual(0);
     });
   });
+
+  describe('TOGGLE_FOLDER_OPEN', () => {
+    it('toggles entry opened prop', () => {
+      const state = {
+        treeEntries: {
+          path: {
+            opened: false,
+          },
+        },
+      };
+
+      mutations[types.TOGGLE_FOLDER_OPEN](state, 'path');
+
+      expect(state.treeEntries.path.opened).toBe(true);
+    });
+  });
+
+  describe('TOGGLE_SHOW_TREE_LIST', () => {
+    it('toggles showTreeList', () => {
+      const state = createState();
+
+      mutations[types.TOGGLE_SHOW_TREE_LIST](state);
+
+      expect(state.showTreeList).toBe(false, 'Failed to toggle showTreeList to false');
+
+      mutations[types.TOGGLE_SHOW_TREE_LIST](state);
+
+      expect(state.showTreeList).toBe(true, 'Failed to toggle showTreeList to true');
+    });
+  });
+
+  describe('UPDATE_CURRENT_DIFF_FILE_ID', () => {
+    it('updates currentDiffFileId', () => {
+      const state = createState();
+
+      mutations[types.UPDATE_CURRENT_DIFF_FILE_ID](state, 'somefileid');
+
+      expect(state.currentDiffFileId).toBe('somefileid');
+    });
+  });
 });
diff --git a/spec/javascripts/diffs/store/utils_spec.js b/spec/javascripts/diffs/store/utils_spec.js
index 897cd1483aa..e660f94c72e 100644
--- a/spec/javascripts/diffs/store/utils_spec.js
+++ b/spec/javascripts/diffs/store/utils_spec.js
@@ -421,4 +421,113 @@ describe('DiffsStoreUtils', () => {
       ).toBe(false);
     });
   });
+
+  describe('generateTreeList', () => {
+    let files;
+
+    beforeAll(() => {
+      files = [
+        {
+          newPath: 'app/index.js',
+          deletedFile: false,
+          newFile: false,
+          removedLines: 10,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+        {
+          newPath: 'app/test/index.js',
+          deletedFile: false,
+          newFile: true,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+        {
+          newPath: 'package.json',
+          deletedFile: true,
+          newFile: false,
+          removedLines: 0,
+          addedLines: 0,
+          fileHash: 'test',
+        },
+      ];
+    });
+
+    it('creates a tree of files', () => {
+      const { tree } = utils.generateTreeList(files);
+
+      expect(tree).toEqual([
+        {
+          key: 'app',
+          path: 'app',
+          name: 'app',
+          type: 'tree',
+          tree: [
+            {
+              addedLines: 0,
+              changed: true,
+              deleted: false,
+              fileHash: 'test',
+              key: 'app/index.js',
+              name: 'index.js',
+              path: 'app/index.js',
+              removedLines: 10,
+              tempFile: false,
+              type: 'blob',
+              tree: [],
+            },
+            {
+              key: 'app/test',
+              path: 'app/test',
+              name: 'test',
+              type: 'tree',
+              opened: true,
+              tree: [
+                {
+                  addedLines: 0,
+                  changed: true,
+                  deleted: false,
+                  fileHash: 'test',
+                  key: 'app/test/index.js',
+                  name: 'index.js',
+                  path: 'app/test/index.js',
+                  removedLines: 0,
+                  tempFile: true,
+                  type: 'blob',
+                  tree: [],
+                },
+              ],
+            },
+          ],
+          opened: true,
+        },
+        {
+          key: 'package.json',
+          path: 'package.json',
+          name: 'package.json',
+          type: 'blob',
+          changed: true,
+          tempFile: false,
+          deleted: true,
+          fileHash: 'test',
+          addedLines: 0,
+          removedLines: 0,
+          tree: [],
+        },
+      ]);
+    });
+
+    it('creates flat list of blobs & folders', () => {
+      const { treeEntries } = utils.generateTreeList(files);
+
+      expect(Object.keys(treeEntries)).toEqual([
+        'app',
+        'app/index.js',
+        'app/test',
+        'app/test/index.js',
+        'package.json',
+      ]);
+    });
+  });
 });
diff --git a/spec/javascripts/ide/components/file_row_extra_spec.js b/spec/javascripts/ide/components/file_row_extra_spec.js
index 60dabe28045..c93a939ad71 100644
--- a/spec/javascripts/ide/components/file_row_extra_spec.js
+++ b/spec/javascripts/ide/components/file_row_extra_spec.js
@@ -107,14 +107,14 @@ describe('IDE extra file row component', () => {
 
   describe('changes file icon', () => {
     it('hides when file is not changed', () => {
-      expect(vm.$el.querySelector('.ide-file-changed-icon')).toBe(null);
+      expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
     });
 
     it('shows when file is changed', done => {
       vm.file.changed = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         done();
       });
@@ -124,7 +124,7 @@ describe('IDE extra file row component', () => {
       vm.file.staged = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         done();
       });
@@ -134,7 +134,7 @@ describe('IDE extra file row component', () => {
       vm.file.tempFile = true;
 
       vm.$nextTick(() => {
-        expect(vm.$el.querySelector('.ide-file-changed-icon')).not.toBe(null);
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
 
         done();
       });
diff --git a/spec/javascripts/ide/components/repo_tab_spec.js b/spec/javascripts/ide/components/repo_tab_spec.js
index 278a0753322..3b52f279bf2 100644
--- a/spec/javascripts/ide/components/repo_tab_spec.js
+++ b/spec/javascripts/ide/components/repo_tab_spec.js
@@ -93,13 +93,13 @@ describe('RepoTab', () => {
 
     Vue.nextTick()
       .then(() => {
-        expect(vm.$el.querySelector('.ide-file-modified')).toBeNull();
+        expect(vm.$el.querySelector('.file-modified')).toBeNull();
 
         vm.$el.dispatchEvent(new Event('mouseout'));
       })
       .then(Vue.nextTick)
       .then(() => {
-        expect(vm.$el.querySelector('.ide-file-modified')).not.toBeNull();
+        expect(vm.$el.querySelector('.file-modified')).not.toBeNull();
 
         done();
       })
diff --git a/spec/javascripts/ide/components/changed_file_icon_spec.js b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
index 7308219f705..5b1038840c7 100644
--- a/spec/javascripts/ide/components/changed_file_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/changed_file_icon_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
-import changedFileIcon from '~/ide/components/changed_file_icon.vue';
+import changedFileIcon from '~/vue_shared/components/changed_file_icon.vue';
 import createComponent from 'spec/helpers/vue_mount_component_helper';
 
-describe('IDE changed file icon', () => {
+describe('Changed file icon', () => {
   let vm;
 
   beforeEach(() => {
@@ -33,14 +33,14 @@ describe('IDE changed file icon', () => {
   });
 
   describe('changedIconClass', () => {
-    it('includes ide-file-modified when not a temp file', () => {
-      expect(vm.changedIconClass).toContain('ide-file-modified');
+    it('includes file-modified when not a temp file', () => {
+      expect(vm.changedIconClass).toContain('file-modified');
     });
 
-    it('includes ide-file-addition when a temp file', () => {
+    it('includes file-addition when a temp file', () => {
       vm.file.tempFile = true;
 
-      expect(vm.changedIconClass).toContain('ide-file-addition');
+      expect(vm.changedIconClass).toContain('file-addition');
     });
   });
 });