Resolve "Decouple multi-file editor from file list"

21 files changed, 352 insertions, 152 deletions

diff --git a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
index f750061a6a1..c4d3866c922 100644
--- a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
+++ b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import listCollapsed from '~/repo/components/commit_sidebar/list_collapsed.vue';
+import store from '~/ide/stores';
+import listCollapsed from '~/ide/components/commit_sidebar/list_collapsed.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
 import { file } from '../../helpers';
 
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
index 18c9b46fcd9..fc7c9ae9dd7 100644
--- a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
@@ -1,5 +1,5 @@
 import Vue from 'vue';
-import listItem from '~/repo/components/commit_sidebar/list_item.vue';
+import listItem from '~/ide/components/commit_sidebar/list_item.vue';
 import mountComponent from '../../../helpers/vue_mount_component_helper';
 import { file } from '../../helpers';
 
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_spec.js
index df7e3c5de21..cb5240ad118 100644
--- a/spec/javascripts/repo/components/commit_sidebar/list_spec.js
+++ b/spec/javascripts/repo/components/commit_sidebar/list_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import commitSidebarList from '~/repo/components/commit_sidebar/list.vue';
+import store from '~/ide/stores';
+import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
 import { file } from '../../helpers';
 
@@ -13,8 +13,11 @@ describe('Multi-file editor commit sidebar list', () => {
     vm = createComponentWithStore(Component, store, {
       title: 'Staged',
       fileList: [],
-      collapsed: false,
-    }).$mount();
+    });
+
+    vm.$store.state.rightPanelCollapsed = false;
+
+    vm.$mount();
   });
 
   afterEach(() => {
@@ -43,30 +46,14 @@ describe('Multi-file editor commit sidebar list', () => {
 
   describe('collapsed', () => {
     beforeEach((done) => {
-      vm.collapsed = true;
+      vm.$store.state.rightPanelCollapsed = true;
 
       Vue.nextTick(done);
     });
 
-    it('adds collapsed class', () => {
-      expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
-    });
-
     it('hides list', () => {
       expect(vm.$el.querySelector('.list-unstyled')).toBeNull();
       expect(vm.$el.querySelector('.help-block')).toBeNull();
     });
-
-    it('hides collapse button', () => {
-      expect(vm.$el.querySelector('.multi-file-commit-panel-collapse-btn')).toBeNull();
-    });
-  });
-
-  it('clicking toggle collapse button emits toggle event', () => {
-    spyOn(vm, '$emit');
-
-    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
-
-    expect(vm.$emit).toHaveBeenCalledWith('toggleCollapsed');
   });
 });
diff --git a/spec/javascripts/repo/components/ide_context_bar_spec.js b/spec/javascripts/repo/components/ide_context_bar_spec.js
new file mode 100644
index 00000000000..3f8f37d2343
--- /dev/null
+++ b/spec/javascripts/repo/components/ide_context_bar_spec.js
@@ -0,0 +1,49 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import ideContextBar from '~/ide/components/ide_context_bar.vue';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+
+describe('Multi-file editor right context bar', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(ideContextBar);
+
+    vm = createComponentWithStore(Component, store);
+
+    vm.$store.state.rightPanelCollapsed = false;
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('collapsed', () => {
+    beforeEach((done) => {
+      vm.$store.state.rightPanelCollapsed = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('adds collapsed class', () => {
+      expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
+    });
+
+    it('shows correct icon', () => {
+      expect(vm.currentIcon).toBe('angle-double-left');
+    });
+  });
+
+  it('clicking toggle collapse button collapses the bar', () => {
+    spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
+
+    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+    expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
+      side: 'right',
+      collapsed: true,
+    });
+  });
+});
diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/ide_repo_tree_spec.js
index df7cf8aabbb..b6f70f585cd 100644
--- a/spec/javascripts/repo/components/repo_sidebar_spec.js
+++ b/spec/javascripts/repo/components/ide_repo_tree_spec.js
@@ -1,20 +1,26 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoSidebar from '~/repo/components/repo_sidebar.vue';
+import store from '~/ide/stores';
+import ideRepoTree from '~/ide/components/ide_repo_tree.vue';
 import { file, resetStore } from '../helpers';
 
-describe('RepoSidebar', () => {
+describe('IdeRepoTree', () => {
   let vm;
 
   beforeEach(() => {
-    const RepoSidebar = Vue.extend(repoSidebar);
+    const IdeRepoTree = Vue.extend(ideRepoTree);
 
-    vm = new RepoSidebar({
+    vm = new IdeRepoTree({
       store,
+      propsData: {
+        treeId: 'abcproject/mybranch',
+      },
     });
 
+    vm.$store.state.currentBranch = 'master';
     vm.$store.state.isRoot = true;
-    vm.$store.state.tree.push(file());
+    vm.$store.state.trees['abcproject/mybranch'] = {
+      tree: [file()],
+    };
 
     vm.$mount();
   });
@@ -26,13 +32,9 @@ describe('RepoSidebar', () => {
   });
 
   it('renders a sidebar', () => {
-    const thead = vm.$el.querySelector('thead');
     const tbody = vm.$el.querySelector('tbody');
 
     expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
-    expect(thead.querySelector('.name').textContent.trim()).toEqual('Name');
-    expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
-    expect(thead.querySelector('.last-update').textContent.trim()).toEqual('Last update');
     expect(tbody.querySelector('.repo-file-options')).toBeFalsy();
     expect(tbody.querySelector('.prev-directory')).toBeFalsy();
     expect(tbody.querySelector('.loading-file')).toBeFalsy();
@@ -40,7 +42,6 @@ describe('RepoSidebar', () => {
   });
 
   it('renders 5 loading files if tree is loading', (done) => {
-    vm.$store.state.tree = [];
     vm.$store.state.loading = true;
 
     Vue.nextTick(() => {
diff --git a/spec/javascripts/repo/components/ide_side_bar_spec.js b/spec/javascripts/repo/components/ide_side_bar_spec.js
new file mode 100644
index 00000000000..30e45169205
--- /dev/null
+++ b/spec/javascripts/repo/components/ide_side_bar_spec.js
@@ -0,0 +1,43 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import ideSidebar from '~/ide/components/ide_side_bar.vue';
+import { resetStore } from '../helpers';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
+
+describe('IdeSidebar', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(ideSidebar);
+
+    vm = createComponentWithStore(Component, store).$mount();
+
+    vm.$store.state.leftPanelCollapsed = false;
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('renders a sidebar', () => {
+    expect(vm.$el.querySelector('.multi-file-commit-panel-inner')).not.toBeNull();
+  });
+
+  describe('collapsed', () => {
+    beforeEach((done) => {
+      vm.$store.state.leftPanelCollapsed = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('adds collapsed class', () => {
+      expect(vm.$el.classList).toContain('is-collapsed');
+    });
+
+    it('shows correct icon', () => {
+      expect(vm.currentIcon).toBe('angle-double-right');
+    });
+  });
+});
diff --git a/spec/javascripts/repo/components/repo_spec.js b/spec/javascripts/repo/components/ide_spec.js
index b32d2c13af8..20b8dc25dcb 100644
--- a/spec/javascripts/repo/components/repo_spec.js
+++ b/spec/javascripts/repo/components/ide_spec.js
@@ -1,14 +1,14 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repo from '~/repo/components/repo.vue';
+import store from '~/ide/stores';
+import ide from '~/ide/components/ide.vue';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { file, resetStore } from '../helpers';
 
-describe('repo component', () => {
+describe('ide component', () => {
   let vm;
 
   beforeEach(() => {
-    const Component = Vue.extend(repo);
+    const Component = Vue.extend(ide);
 
     vm = createComponentWithStore(Component, store).$mount();
   });
@@ -24,7 +24,9 @@ describe('repo component', () => {
   });
 
   it('renders panel right when files are open', (done) => {
-    vm.$store.state.tree.push(file());
+    vm.$store.state.trees['abcproject/mybranch'] = {
+      tree: [file()],
+    };
 
     Vue.nextTick(() => {
       expect(vm.$el.querySelector('.panel-right')).toBeNull();
diff --git a/spec/javascripts/repo/components/new_branch_form_spec.js b/spec/javascripts/repo/components/new_branch_form_spec.js
index 9a705a1f0ed..cd1d073ec18 100644
--- a/spec/javascripts/repo/components/new_branch_form_spec.js
+++ b/spec/javascripts/repo/components/new_branch_form_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import newBranchForm from '~/repo/components/new_branch_form.vue';
+import store from '~/ide/stores';
+import newBranchForm from '~/ide/components/new_branch_form.vue';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { resetStore } from '../helpers';
 
diff --git a/spec/javascripts/repo/components/new_dropdown/index_spec.js b/spec/javascripts/repo/components/new_dropdown/index_spec.js
index 93b10fc1fee..b001c1655b4 100644
--- a/spec/javascripts/repo/components/new_dropdown/index_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/index_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import newDropdown from '~/repo/components/new_dropdown/index.vue';
+import store from '~/ide/stores';
+import newDropdown from '~/ide/components/new_dropdown/index.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
 import { resetStore } from '../../helpers';
 
@@ -10,8 +10,12 @@ describe('new dropdown component', () => {
   beforeEach(() => {
     const component = Vue.extend(newDropdown);
 
-    vm = createComponentWithStore(component, store);
+    vm = createComponentWithStore(component, store, {
+      branch: 'master',
+      path: '',
+    });
 
+    vm.$store.state.currentProjectId = 'abcproject';
     vm.$store.state.path = '';
 
     vm.$mount();
@@ -23,9 +27,10 @@ describe('new dropdown component', () => {
     resetStore(vm.$store);
   });
 
-  it('renders new file and new directory links', () => {
+  it('renders new file, upload and new directory links', () => {
     expect(vm.$el.querySelectorAll('a')[0].textContent.trim()).toBe('New file');
-    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('New directory');
+    expect(vm.$el.querySelectorAll('a')[1].textContent.trim()).toBe('Upload file');
+    expect(vm.$el.querySelectorAll('a')[2].textContent.trim()).toBe('New directory');
   });
 
   describe('createNewItem', () => {
@@ -36,7 +41,7 @@ describe('new dropdown component', () => {
     });
 
     it('sets modalType to tree when new directory is clicked', () => {
-      vm.$el.querySelectorAll('a')[1].click();
+      vm.$el.querySelectorAll('a')[2].click();
 
       expect(vm.modalType).toBe('tree');
     });
diff --git a/spec/javascripts/repo/components/new_dropdown/modal_spec.js b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
index 1ff7590ec79..233cca06ed0 100644
--- a/spec/javascripts/repo/components/new_dropdown/modal_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/modal_spec.js
@@ -1,12 +1,42 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import modal from '~/repo/components/new_dropdown/modal.vue';
+import store from '~/ide/stores';
+import service from '~/ide/services';
+import modal from '~/ide/components/new_dropdown/modal.vue';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
 import { file, resetStore } from '../../helpers';
 
 describe('new file modal component', () => {
   const Component = Vue.extend(modal);
   let vm;
+  let projectTree;
+
+  beforeEach(() => {
+    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
+      data: {
+        id: '123',
+      },
+    }));
+
+    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
+      commit: {
+        id: '123branch',
+      },
+    }));
+
+    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
+      headers: {
+        'page-title': 'test',
+      },
+      json: () => Promise.resolve({
+        last_commit_path: 'last_commit_path',
+        parent_tree_url: 'parent_tree_url',
+        path: '/',
+        trees: [{ name: 'tree' }],
+        blobs: [{ name: 'blob' }],
+        submodules: [{ name: 'submodule' }],
+      }),
+    }));
+  });
 
   afterEach(() => {
     vm.$destroy();
@@ -17,12 +47,26 @@ describe('new file modal component', () => {
   ['tree', 'blob'].forEach((type) => {
     describe(type, () => {
       beforeEach(() => {
+        store.state.projects.abcproject = {
+          web_url: '',
+        };
+        store.state.trees = [];
+        store.state.trees['abcproject/mybranch'] = {
+          tree: [],
+        };
+        projectTree = store.state.trees['abcproject/mybranch'];
+        store.state.currentProjectId = 'abcproject';
+
         vm = createComponentWithStore(Component, store, {
           type,
+          branchId: 'master',
           path: '',
-        }).$mount();
+          parent: projectTree,
+        });
 
         vm.entryName = 'testing';
+
+        vm.$mount();
       });
 
       it(`sets modal title as ${type}`, () => {
@@ -50,6 +94,9 @@ describe('new file modal component', () => {
           vm.createEntryInStore();
 
           expect(vm.createTempEntry).toHaveBeenCalledWith({
+            projectId: 'abcproject',
+            branchId: 'master',
+            parent: projectTree,
             name: 'testing',
             type,
           });
@@ -76,31 +123,18 @@ describe('new file modal component', () => {
         });
 
         it('opens newly created file', (done) => {
-          vm.createEntryInStore();
-
-          setTimeout(() => {
-            expect(vm.$store.state.openFiles.length).toBe(1);
-            expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep');
-
-            done();
-          });
-        });
-
-        it(`creates ${type} in the current stores path`, (done) => {
-          vm.$store.state.path = 'app';
-
-          vm.createEntryInStore();
-
-          setTimeout(() => {
-            expect(vm.$store.state.tree[0].path).toBe('app/testing');
-            expect(vm.$store.state.tree[0].name).toBe('testing');
+          if (type === 'blob') {
+            vm.createEntryInStore();
 
-            if (type === 'tree') {
-              expect(vm.$store.state.tree[0].tree.length).toBe(1);
-            }
+            setTimeout(() => {
+              expect(vm.$store.state.openFiles.length).toBe(1);
+              expect(vm.$store.state.openFiles[0].name).toBe(type === 'blob' ? 'testing' : '.gitkeep');
 
+              done();
+            });
+          } else {
             done();
-          });
+          }
         });
 
         if (type === 'blob') {
@@ -108,25 +142,27 @@ describe('new file modal component', () => {
             vm.createEntryInStore();
 
             setTimeout(() => {
-              expect(vm.$store.state.tree.length).toBe(1);
-              expect(vm.$store.state.tree[0].name).toBe('testing');
-              expect(vm.$store.state.tree[0].type).toBe('blob');
-              expect(vm.$store.state.tree[0].tempFile).toBeTruthy();
+              const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+              expect(baseTree.length).toBe(1);
+              expect(baseTree[0].name).toBe('testing');
+              expect(baseTree[0].type).toBe('blob');
+              expect(baseTree[0].tempFile).toBeTruthy();
 
               done();
             });
           });
 
           it('does not create temp file when file already exists', (done) => {
-            vm.$store.state.tree.push(file('testing', '1', type));
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            baseTree.push(file('testing', '1', type));
 
             vm.createEntryInStore();
 
             setTimeout(() => {
-              expect(vm.$store.state.tree.length).toBe(1);
-              expect(vm.$store.state.tree[0].name).toBe('testing');
-              expect(vm.$store.state.tree[0].type).toBe('blob');
-              expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
+              expect(baseTree.length).toBe(1);
+              expect(baseTree[0].name).toBe('testing');
+              expect(baseTree[0].type).toBe('blob');
+              expect(baseTree[0].tempFile).toBeFalsy();
 
               done();
             });
@@ -135,48 +171,47 @@ describe('new file modal component', () => {
           it('creates new tree', () => {
             vm.createEntryInStore();
 
-            expect(vm.$store.state.tree.length).toBe(1);
-            expect(vm.$store.state.tree[0].name).toBe('testing');
-            expect(vm.$store.state.tree[0].type).toBe('tree');
-            expect(vm.$store.state.tree[0].tempFile).toBeTruthy();
-            expect(vm.$store.state.tree[0].tree.length).toBe(1);
-            expect(vm.$store.state.tree[0].tree[0].name).toBe('.gitkeep');
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('testing');
+            expect(baseTree[0].type).toBe('tree');
+            expect(baseTree[0].tempFile).toBeTruthy();
           });
 
           it('creates multiple trees when entryName has slashes', () => {
             vm.entryName = 'app/test';
             vm.createEntryInStore();
 
-            expect(vm.$store.state.tree.length).toBe(1);
-            expect(vm.$store.state.tree[0].name).toBe('app');
-            expect(vm.$store.state.tree[0].tree[0].name).toBe('test');
-            expect(vm.$store.state.tree[0].tree[0].tree[0].name).toBe('.gitkeep');
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('app');
           });
 
           it('creates tree in existing tree', () => {
-            vm.$store.state.tree.push(file('app', '1', 'tree'));
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            baseTree.push(file('app', '1', 'tree'));
 
             vm.entryName = 'app/test';
             vm.createEntryInStore();
 
-            expect(vm.$store.state.tree.length).toBe(1);
-            expect(vm.$store.state.tree[0].name).toBe('app');
-            expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
-            expect(vm.$store.state.tree[0].tree[0].tempFile).toBeTruthy();
-            expect(vm.$store.state.tree[0].tree[0].name).toBe('test');
-            expect(vm.$store.state.tree[0].tree[0].tree[0].name).toBe('.gitkeep');
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('app');
+            expect(baseTree[0].tempFile).toBeFalsy();
+            expect(baseTree[0].tree[0].tempFile).toBeTruthy();
+            expect(baseTree[0].tree[0].name).toBe('test');
           });
 
           it('does not create new tree when already exists', () => {
-            vm.$store.state.tree.push(file('app', '1', 'tree'));
+            const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+            baseTree.push(file('app', '1', 'tree'));
 
             vm.entryName = 'app';
             vm.createEntryInStore();
 
-            expect(vm.$store.state.tree.length).toBe(1);
-            expect(vm.$store.state.tree[0].name).toBe('app');
-            expect(vm.$store.state.tree[0].tempFile).toBeFalsy();
-            expect(vm.$store.state.tree[0].tree.length).toBe(0);
+            expect(baseTree.length).toBe(1);
+            expect(baseTree[0].name).toBe('app');
+            expect(baseTree[0].tempFile).toBeFalsy();
+            expect(baseTree[0].tree.length).toBe(0);
           });
         }
       });
@@ -188,6 +223,8 @@ describe('new file modal component', () => {
 
     vm = createComponentWithStore(Component, store, {
       type: 'tree',
+      projectId: 'abcproject',
+      branchId: 'master',
       path: '',
     }).$mount('.js-test');
 
diff --git a/spec/javascripts/repo/components/new_dropdown/upload_spec.js b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
index bf7893029b1..788c08e5279 100644
--- a/spec/javascripts/repo/components/new_dropdown/upload_spec.js
+++ b/spec/javascripts/repo/components/new_dropdown/upload_spec.js
@@ -1,19 +1,61 @@
 import Vue from 'vue';
-import upload from '~/repo/components/new_dropdown/upload.vue';
-import store from '~/repo/stores';
+import upload from '~/ide/components/new_dropdown/upload.vue';
+import store from '~/ide/stores';
+import service from '~/ide/services';
 import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
 import { resetStore } from '../../helpers';
 
 describe('new dropdown upload', () => {
   let vm;
+  let projectTree;
 
   beforeEach(() => {
+    spyOn(service, 'getProjectData').and.returnValue(Promise.resolve({
+      data: {
+        id: '123',
+      },
+    }));
+
+    spyOn(service, 'getBranchData').and.returnValue(Promise.resolve({
+      commit: {
+        id: '123branch',
+      },
+    }));
+
+    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
+      headers: {
+        'page-title': 'test',
+      },
+      json: () => Promise.resolve({
+        last_commit_path: 'last_commit_path',
+        parent_tree_url: 'parent_tree_url',
+        path: '/',
+        trees: [{ name: 'tree' }],
+        blobs: [{ name: 'blob' }],
+        submodules: [{ name: 'submodule' }],
+      }),
+    }));
+
     const Component = Vue.extend(upload);
 
+    store.state.projects.abcproject = {
+      web_url: '',
+    };
+    store.state.currentProjectId = 'abcproject';
+    store.state.trees = [];
+    store.state.trees['abcproject/mybranch'] = {
+      tree: [],
+    };
+    projectTree = store.state.trees['abcproject/mybranch'];
+
     vm = createComponentWithStore(Component, store, {
+      branchId: 'master',
       path: '',
+      parent: projectTree,
     });
 
+    vm.entryName = 'testing';
+
     vm.$mount();
   });
 
@@ -65,23 +107,33 @@ describe('new dropdown upload', () => {
       vm.createFile(target, file, true);
 
       vm.$nextTick(() => {
-        expect(vm.$store.state.tree.length).toBe(1);
-        expect(vm.$store.state.tree[0].name).toBe(file.name);
-        expect(vm.$store.state.tree[0].content).toBe(target.result);
+        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+        expect(baseTree.length).toBe(1);
+        expect(baseTree[0].name).toBe(file.name);
+        expect(baseTree[0].content).toBe(target.result);
 
         done();
       });
     });
 
     it('creates new file in path', (done) => {
-      vm.$store.state.path = 'testing';
+      const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+      const tree = {
+        type: 'tree',
+        name: 'testing',
+        path: 'testing',
+        tree: [],
+      };
+      baseTree.push(tree);
+
+      vm.parent = tree;
       vm.createFile(target, file, true);
 
       vm.$nextTick(() => {
-        expect(vm.$store.state.tree.length).toBe(1);
-        expect(vm.$store.state.tree[0].name).toBe(file.name);
-        expect(vm.$store.state.tree[0].content).toBe(target.result);
-        expect(vm.$store.state.tree[0].path).toBe(`testing/${file.name}`);
+        expect(baseTree.length).toBe(1);
+        expect(baseTree[0].tree[0].name).toBe(file.name);
+        expect(baseTree[0].tree[0].content).toBe(target.result);
+        expect(baseTree[0].tree[0].path).toBe(`testing/${file.name}`);
 
         done();
       });
@@ -91,10 +143,11 @@ describe('new dropdown upload', () => {
       vm.createFile(binaryTarget, file, false);
 
       vm.$nextTick(() => {
-        expect(vm.$store.state.tree.length).toBe(1);
-        expect(vm.$store.state.tree[0].name).toBe(file.name);
-        expect(vm.$store.state.tree[0].content).toBe(binaryTarget.result.split('base64,')[1]);
-        expect(vm.$store.state.tree[0].base64).toBe(true);
+        const baseTree = vm.$store.state.trees['abcproject/mybranch'].tree;
+        expect(baseTree.length).toBe(1);
+        expect(baseTree[0].name).toBe(file.name);
+        expect(baseTree[0].content).toBe(binaryTarget.result.split('base64,')[1]);
+        expect(baseTree[0].base64).toBe(true);
 
         done();
       });
diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js
index 72712e058e5..cd93fb3ccbf 100644
--- a/spec/javascripts/repo/components/repo_commit_section_spec.js
+++ b/spec/javascripts/repo/components/repo_commit_section_spec.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
 import * as urlUtils from '~/lib/utils/url_utility';
-import store from '~/repo/stores';
-import service from '~/repo/services';
-import repoCommitSection from '~/repo/components/repo_commit_section.vue';
+import store from '~/ide/stores';
+import service from '~/ide/services';
+import repoCommitSection from '~/ide/components/repo_commit_section.vue';
 import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper';
 import { file, resetStore } from '../helpers';
 
@@ -16,6 +16,18 @@ describe('RepoCommitSection', () => {
       store,
     }).$mount();
 
+    comp.$store.state.currentProjectId = 'abcproject';
+    comp.$store.state.currentBranchId = 'master';
+    comp.$store.state.projects.abcproject = {
+      web_url: '',
+      branches: {
+        master: {
+          workingReference: '1',
+        },
+      },
+    };
+
+    comp.$store.state.rightPanelCollapsed = false;
     comp.$store.state.currentBranch = 'master';
     comp.$store.state.openFiles = [file(), file()];
     comp.$store.state.openFiles.forEach(f => Object.assign(f, {
@@ -29,7 +41,19 @@ describe('RepoCommitSection', () => {
   beforeEach((done) => {
     vm = createComponent();
 
-    vm.collapsed = false;
+    spyOn(service, 'getTreeData').and.returnValue(Promise.resolve({
+      headers: {
+        'page-title': 'test',
+      },
+      json: () => Promise.resolve({
+        last_commit_path: 'last_commit_path',
+        parent_tree_url: 'parent_tree_url',
+        path: '/',
+        trees: [{ name: 'tree' }],
+        blobs: [{ name: 'blob' }],
+        submodules: [{ name: 'submodule' }],
+      }),
+    }));
 
     Vue.nextTick(done);
   });
@@ -45,7 +69,6 @@ describe('RepoCommitSection', () => {
     const submitCommit = vm.$el.querySelector('form .btn');
 
     expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
-    expect(vm.$el.querySelector('.multi-file-commit-panel-section header').textContent.trim()).toEqual('Staged');
     expect(changedFileElements.length).toEqual(2);
 
     changedFileElements.forEach((changedFile, i) => {
diff --git a/spec/javascripts/repo/components/repo_edit_button_spec.js b/spec/javascripts/repo/components/repo_edit_button_spec.js
index 44018464b35..2895b794506 100644
--- a/spec/javascripts/repo/components/repo_edit_button_spec.js
+++ b/spec/javascripts/repo/components/repo_edit_button_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoEditButton from '~/repo/components/repo_edit_button.vue';
+import store from '~/ide/stores';
+import repoEditButton from '~/ide/components/repo_edit_button.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoEditButton', () => {
@@ -32,7 +32,7 @@ describe('RepoEditButton', () => {
     vm.$mount();
 
     expect(vm.$el.querySelector('.btn')).not.toBeNull();
-    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
+    expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
   });
 
   it('renders edit button with cancel text', () => {
@@ -50,7 +50,7 @@ describe('RepoEditButton', () => {
     vm.$el.querySelector('.btn').click();
 
     vm.$nextTick(() => {
-      expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Cancel edit');
+      expect(vm.$el.querySelector('.btn').textContent.trim()).toBe('Edit');
 
       done();
     });
diff --git a/spec/javascripts/repo/components/repo_editor_spec.js b/spec/javascripts/repo/components/repo_editor_spec.js
index 81158cad639..e7b2ed08acd 100644
--- a/spec/javascripts/repo/components/repo_editor_spec.js
+++ b/spec/javascripts/repo/components/repo_editor_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoEditor from '~/repo/components/repo_editor.vue';
-import monacoLoader from '~/repo/monaco_loader';
+import store from '~/ide/stores';
+import repoEditor from '~/ide/components/repo_editor.vue';
+import monacoLoader from '~/ide/monaco_loader';
 import { file, resetStore } from '../helpers';
 
 describe('RepoEditor', () => {
diff --git a/spec/javascripts/repo/components/repo_file_buttons_spec.js b/spec/javascripts/repo/components/repo_file_buttons_spec.js
index d6e255e4810..115569a9117 100644
--- a/spec/javascripts/repo/components/repo_file_buttons_spec.js
+++ b/spec/javascripts/repo/components/repo_file_buttons_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoFileButtons from '~/repo/components/repo_file_buttons.vue';
+import store from '~/ide/stores';
+import repoFileButtons from '~/ide/components/repo_file_buttons.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoFileButtons', () => {
diff --git a/spec/javascripts/repo/components/repo_file_spec.js b/spec/javascripts/repo/components/repo_file_spec.js
index bf9181fb09c..e8b370f97b4 100644
--- a/spec/javascripts/repo/components/repo_file_spec.js
+++ b/spec/javascripts/repo/components/repo_file_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoFile from '~/repo/components/repo_file.vue';
+import store from '~/ide/stores';
+import repoFile from '~/ide/components/repo_file.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoFile', () => {
@@ -35,11 +35,10 @@ describe('RepoFile', () => {
     const fileIcon = vm.$el.querySelector('.file-icon');
 
     expect(vm.$el.querySelector(`.${vm.file.icon}`).style.marginLeft).toEqual('0px');
-    expect(name.href).toMatch(`/${vm.file.url}`);
+    expect(name.href).toMatch('');
     expect(name.textContent.trim()).toEqual(vm.file.name);
     expect(fileIcon.classList.contains(vm.file.icon)).toBeTruthy();
     expect(fileIcon.style.marginLeft).toEqual(`${vm.file.level * 10}px`);
-    expect(vm.$el.querySelectorAll('.animation-container').length).toBe(2);
   });
 
   it('does render if hasFiles is true and is loading tree', () => {
@@ -75,16 +74,16 @@ describe('RepoFile', () => {
     });
   });
 
-  it('fires clickedTreeRow when the link is clicked', () => {
+  it('fires clickFile when the link is clicked', () => {
     vm = createComponent({
       file: file(),
     });
 
-    spyOn(vm, 'clickedTreeRow');
+    spyOn(vm, 'clickFile');
 
     vm.$el.click();
 
-    expect(vm.clickedTreeRow).toHaveBeenCalledWith(vm.file);
+    expect(vm.clickFile).toHaveBeenCalledWith(vm.file);
   });
 
   describe('submodule', () => {
diff --git a/spec/javascripts/repo/components/repo_loading_file_spec.js b/spec/javascripts/repo/components/repo_loading_file_spec.js
index 031f2a9c0b2..18366fb89bc 100644
--- a/spec/javascripts/repo/components/repo_loading_file_spec.js
+++ b/spec/javascripts/repo/components/repo_loading_file_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoLoadingFile from '~/repo/components/repo_loading_file.vue';
+import store from '~/ide/stores';
+import repoLoadingFile from '~/ide/components/repo_loading_file.vue';
 import { resetStore } from '../helpers';
 
 describe('RepoLoadingFile', () => {
@@ -48,6 +48,7 @@ describe('RepoLoadingFile', () => {
 
   it('renders 1 column of animated LoC if isMini', (done) => {
     vm = createComponent();
+    vm.$store.state.leftPanelCollapsed = true;
     vm.$store.state.openFiles.push('test');
 
     vm.$nextTick(() => {
diff --git a/spec/javascripts/repo/components/repo_prev_directory_spec.js b/spec/javascripts/repo/components/repo_prev_directory_spec.js
index 7f82ae36a64..ff26cab2262 100644
--- a/spec/javascripts/repo/components/repo_prev_directory_spec.js
+++ b/spec/javascripts/repo/components/repo_prev_directory_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoPrevDirectory from '~/repo/components/repo_prev_directory.vue';
+import store from '~/ide/stores';
+import repoPrevDirectory from '~/ide/components/repo_prev_directory.vue';
 import { resetStore } from '../helpers';
 
 describe('RepoPrevDirectory', () => {
diff --git a/spec/javascripts/repo/components/repo_preview_spec.js b/spec/javascripts/repo/components/repo_preview_spec.js
index 8d1a87494cf..e90837e4cb2 100644
--- a/spec/javascripts/repo/components/repo_preview_spec.js
+++ b/spec/javascripts/repo/components/repo_preview_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoPreview from '~/repo/components/repo_preview.vue';
+import store from '~/ide/stores';
+import repoPreview from '~/ide/components/repo_preview.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoPreview', () => {
diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js
index 7d2174196c9..507bca983df 100644
--- a/spec/javascripts/repo/components/repo_tab_spec.js
+++ b/spec/javascripts/repo/components/repo_tab_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoTab from '~/repo/components/repo_tab.vue';
+import store from '~/ide/stores';
+import repoTab from '~/ide/components/repo_tab.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoTab', () => {
@@ -31,16 +31,16 @@ describe('RepoTab', () => {
     expect(name.textContent.trim()).toEqual(vm.tab.name);
   });
 
-  it('calls setFileActive when clicking tab', () => {
+  it('fires clickFile when the link is clicked', () => {
     vm = createComponent({
       tab: file(),
     });
 
-    spyOn(vm, 'setFileActive');
+    spyOn(vm, 'clickFile');
 
     vm.$el.click();
 
-    expect(vm.setFileActive).toHaveBeenCalledWith(vm.tab);
+    expect(vm.clickFile).toHaveBeenCalledWith(vm.tab);
   });
 
   it('calls closeFile when clicking close button', () => {
diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js
index 1fb2242c051..0beaf643793 100644
--- a/spec/javascripts/repo/components/repo_tabs_spec.js
+++ b/spec/javascripts/repo/components/repo_tabs_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import repoTabs from '~/repo/components/repo_tabs.vue';
+import store from '~/ide/stores';
+import repoTabs from '~/ide/components/repo_tabs.vue';
 import { file, resetStore } from '../helpers';
 
 describe('RepoTabs', () => {