Merge branch '40040-decouple-multi-file-editor-from-file-list' into 'master'

Resolve "Decouple multi-file editor from file list"

Closes #40040 and #40032

See merge request gitlab-org/gitlab-ce!15430

136 files changed, 2867 insertions, 1734 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index d963101028a..21d8c790e90 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import axios from './lib/utils/axios_utils';
 
 const Api = {
   groupsPath: '/api/:version/groups.json',
@@ -6,6 +7,7 @@ const Api = {
   namespacesPath: '/api/:version/namespaces.json',
   groupProjectsPath: '/api/:version/groups/:id/projects.json',
   projectsPath: '/api/:version/projects.json',
+  projectPath: '/api/:version/projects/:id',
   projectLabelsPath: '/:namespace_path/:project_path/labels',
   groupLabelsPath: '/groups/:namespace_path/labels',
   licensePath: '/api/:version/templates/licenses/:key',
@@ -76,6 +78,14 @@ const Api = {
       .done(projects => callback(projects));
   },
 
+  // Return single project
+  project(projectPath) {
+    const url = Api.buildUrl(Api.projectPath)
+            .replace(':id', encodeURIComponent(projectPath));
+
+    return axios.get(url);
+  },
+
   newLabel(namespacePath, projectPath, data, callback) {
     let url;
 
@@ -115,7 +125,7 @@ const Api = {
   commitMultiple(id, data) {
     // see https://docs.gitlab.com/ce/api/commits.html#create-a-commit-with-multiple-files-and-actions
     const url = Api.buildUrl(Api.commitPath)
-      .replace(':id', id);
+      .replace(':id', encodeURIComponent(id));
     return this.wrapAjaxCall({
       url,
       type: 'POST',
@@ -127,7 +137,7 @@ const Api = {
 
   branchSingle(id, branch) {
     const url = Api.buildUrl(Api.branchSinglePath)
-      .replace(':id', id)
+      .replace(':id', encodeURIComponent(id))
       .replace(':branch', branch);
 
     return this.wrapAjaxCall({
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 62867c56214..07df3c216b1 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -73,7 +73,6 @@ import initLegacyFilters from './init_legacy_filters';
 import initIssuableSidebar from './init_issuable_sidebar';
 import initProjectVisibilitySelector from './project_visibility';
 import GpgBadges from './gpg_badges';
-import UserFeatureHelper from './helpers/user_feature_helper';
 import initChangesDropdown from './init_changes_dropdown';
 import NewGroupChild from './groups/new_group_child';
 import AbuseReports from './abuse_reports';
@@ -447,9 +446,6 @@ import Activities from './activities';
           break;
         case 'projects:tree:show':
           shortcut_handler = new ShortcutsNavigation();
-
-          if (UserFeatureHelper.isNewRepoEnabled()) break;
-
           new TreeView();
           new BlobViewer();
           new NewCommitForm($('.js-create-dir-form'));
@@ -468,7 +464,6 @@ import Activities from './activities';
           shortcut_handler = true;
           break;
         case 'projects:blob:show':
-          if (UserFeatureHelper.isNewRepoEnabled()) break;
           new BlobViewer();
           initBlob();
           break;
diff --git a/app/assets/javascripts/fly_out_nav.js b/app/assets/javascripts/fly_out_nav.js
index 6110d961609..abb04d77f8f 100644
--- a/app/assets/javascripts/fly_out_nav.js
+++ b/app/assets/javascripts/fly_out_nav.js
@@ -161,13 +161,16 @@ export default () => {
 
   const items = [...sidebar.querySelectorAll('.sidebar-top-level-items > li')];
 
-  sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
-    clearTimeout(timeoutId);
-
-    timeoutId = setTimeout(() => {
-      if (currentOpenMenu) hideMenu(currentOpenMenu);
-    }, getHideSubItemsInterval());
-  });
+  const topItems = sidebar.querySelector('.sidebar-top-level-items');
+  if (topItems) {
+    sidebar.querySelector('.sidebar-top-level-items').addEventListener('mouseleave', () => {
+      clearTimeout(timeoutId);
+
+      timeoutId = setTimeout(() => {
+        if (currentOpenMenu) hideMenu(currentOpenMenu);
+      }, getHideSubItemsInterval());
+    });
+  }
 
   headerHeight = document.querySelector('.nav-sidebar').offsetTop;
 
diff --git a/app/assets/javascripts/helpers/user_feature_helper.js b/app/assets/javascripts/helpers/user_feature_helper.js
deleted file mode 100644
index 638118a5204..00000000000
--- a/app/assets/javascripts/helpers/user_feature_helper.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Cookies from 'js-cookie';
-
-export default {
-  isNewRepoEnabled() {
-    return Cookies.get('new_repo') === 'true';
-  },
-};
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
new file mode 100644
index 00000000000..704dff981df
--- /dev/null
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -0,0 +1,66 @@
+<script>
+  import { mapState } from 'vuex';
+  import icon from '../../../vue_shared/components/icon.vue';
+  import listItem from './list_item.vue';
+  import listCollapsed from './list_collapsed.vue';
+
+  export default {
+    components: {
+      icon,
+      listItem,
+      listCollapsed,
+    },
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      fileList: {
+        type: Array,
+        required: true,
+      },
+    },
+    computed: {
+      ...mapState([
+        'currentProjectId',
+        'currentBranchId',
+        'rightPanelCollapsed',
+      ]),
+    },
+    methods: {
+      toggleCollapsed() {
+        this.$emit('toggleCollapsed');
+      },
+    },
+
+  };
+</script>
+
+<template>
+  <div class="multi-file-commit-list">
+    <list-collapsed
+      v-if="rightPanelCollapsed"
+    />
+    <template v-else>
+      <ul
+        v-if="fileList.length"
+        class="list-unstyled append-bottom-0"
+      >
+        <li
+          v-for="file in fileList"
+          :key="file.key"
+        >
+          <list-item
+            :file="file"
+          />
+        </li>
+      </ul>
+      <div
+        v-else
+        class="help-block prepend-top-0"
+      >
+        No changes
+      </div>
+    </template>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 6a0262f271b..6a0262f271b 100644
--- a/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 742f746e02f..742f746e02f 100644
--- a/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
new file mode 100644
index 00000000000..7f29a355eca
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -0,0 +1,73 @@
+<script>
+import { mapState, mapGetters } from 'vuex';
+import ideSidebar from './ide_side_bar.vue';
+import ideContextbar from './ide_context_bar.vue';
+import repoTabs from './repo_tabs.vue';
+import repoFileButtons from './repo_file_buttons.vue';
+import ideStatusBar from './ide_status_bar.vue';
+import repoPreview from './repo_preview.vue';
+import repoEditor from './repo_editor.vue';
+
+export default {
+  computed: {
+    ...mapState([
+      'currentBlobView',
+      'selectedFile',
+    ]),
+    ...mapGetters([
+      'changedFiles',
+      'activeFile',
+    ]),
+  },
+  components: {
+    ideSidebar,
+    ideContextbar,
+    repoTabs,
+    repoFileButtons,
+    ideStatusBar,
+    repoEditor,
+    repoPreview,
+  },
+  mounted() {
+    const returnValue = 'Are you sure you want to lose unsaved changes?';
+    window.onbeforeunload = (e) => {
+      if (!this.changedFiles.length) return undefined;
+
+      Object.assign(e, {
+        returnValue,
+      });
+      return returnValue;
+    };
+  },
+};
+</script>
+
+<template>
+  <div 
+    class="ide-view"
+  >
+    <ide-sidebar/>
+    <div
+      class="multi-file-edit-pane"
+    >
+      <template
+        v-if="activeFile">
+        <repo-tabs/>
+        <component
+          class="multi-file-edit-pane-content"
+          :is="currentBlobView"
+        />
+        <repo-file-buttons/>
+        <ide-status-bar
+          :file="selectedFile"/>
+      </template>
+      <template
+        v-else>
+        <div class="ide-empty-state">
+          <h2 class="clgray">Welcome to the GitLab IDE</h2>
+        </div>
+      </template>
+    </div>
+    <ide-contextbar/>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_context_bar.vue b/app/assets/javascripts/ide/components/ide_context_bar.vue
new file mode 100644
index 00000000000..5a08718e386
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_context_bar.vue
@@ -0,0 +1,75 @@
+<script>
+import { mapGetters, mapState, mapActions } from 'vuex';
+import repoCommitSection from './repo_commit_section.vue';
+import icon from '../../vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    repoCommitSection,
+    icon,
+  },
+  computed: {
+    ...mapState([
+      'rightPanelCollapsed',
+    ]),
+    ...mapGetters([
+      'changedFiles',
+    ]),
+    currentIcon() {
+      return this.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
+    },
+  },
+  methods: {
+    ...mapActions([
+      'setPanelCollapsedStatus',
+    ]),
+    toggleCollapsed() {
+      this.setPanelCollapsedStatus({
+        side: 'right',
+        collapsed: !this.rightPanelCollapsed,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel"
+    :class="{
+      'is-collapsed': rightPanelCollapsed,
+    }"
+  >
+    <div 
+      class="multi-file-commit-panel-section">
+      <header
+        class="multi-file-commit-panel-header"
+        :class="{
+            'is-collapsed': rightPanelCollapsed,
+          }"
+        >
+        <div
+          class="multi-file-commit-panel-header-title"
+          v-if="!rightPanelCollapsed">
+          <icon
+            name="list-bulleted"
+            :size="18"
+          />
+          Staged
+        </div>
+        <button
+          type="button"
+          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+          @click="toggleCollapsed"
+        >
+          <icon
+            :name="currentIcon"
+            :size="18"
+          />
+        </button>
+      </header>
+      <repo-commit-section 
+        class=""/>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_project_branches_tree.vue b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
new file mode 100644
index 00000000000..bd3a521ff43
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_project_branches_tree.vue
@@ -0,0 +1,47 @@
+<script>
+import repoTree from './ide_repo_tree.vue';
+import icon from '../../vue_shared/components/icon.vue';
+import newDropdown from './new_dropdown/index.vue';
+
+export default {
+  components: {
+    repoTree,
+    icon,
+    newDropdown,
+  },
+  props: {
+    projectId: {
+      type: String,
+      required: true,
+    },
+    branch: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="branch-container">
+    <div class="branch-header">
+      <div class="branch-header-title">
+        <icon
+          name="branch"
+          :size="12">
+        </icon>
+        {{ branch.name }}
+      </div>
+      <div class="branch-header-btns">
+        <new-dropdown
+          :project-id="projectId"
+          :branch="branch.name"
+          path=""/>
+      </div>
+    </div>
+    <div>
+      <repo-tree
+        :treeId="branch.treeId"/>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_project_tree.vue b/app/assets/javascripts/ide/components/ide_project_tree.vue
new file mode 100644
index 00000000000..61daba6d176
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_project_tree.vue
@@ -0,0 +1,47 @@
+<script>
+import branchesTree from './ide_project_branches_tree.vue';
+import projectAvatarImage from '../../vue_shared/components/project_avatar/image.vue';
+
+export default {
+  components: {
+    branchesTree,
+    projectAvatarImage,
+  },
+  props: {
+    project: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="projects-sidebar">
+    <div class="context-header">
+      <a 
+        :title="project.name" 
+        :href="project.web_url">
+        <div class="avatar-container s40 project-avatar">
+          <project-avatar-image
+            class="avatar-container project-avatar"
+            :link-href="project.path"
+            :img-src="project.avatar_url"
+            :img-alt="project.name"
+            :img-size="40"
+            />
+        </div>
+        <div class="sidebar-context-title">
+          {{ project.name }}
+        </div>
+      </a>
+    </div>
+    <div class="multi-file-commit-panel-inner-scroll">
+      <branches-tree
+        v-for="(branch, index) in project.branches"
+        :key="branch.name"
+        :project-id="project.path_with_namespace"
+        :branch="branch"/>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_repo_tree.vue b/app/assets/javascripts/ide/components/ide_repo_tree.vue
new file mode 100644
index 00000000000..b6b089e6b25
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_repo_tree.vue
@@ -0,0 +1,66 @@
+<script>
+import { mapState } from 'vuex';
+import RepoPreviousDirectory from './repo_prev_directory.vue';
+import RepoFile from './repo_file.vue';
+import RepoLoadingFile from './repo_loading_file.vue';
+import { treeList } from '../stores/utils';
+
+export default {
+  components: {
+    'repo-previous-directory': RepoPreviousDirectory,
+    'repo-file': RepoFile,
+    'repo-loading-file': RepoLoadingFile,
+  },
+  props: {
+    treeId: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'loading',
+      'isRoot',
+    ]),
+    ...mapState({
+      projectName(state) {
+        return state.project.name;
+      },
+    }),
+    fetchedList() {
+      return treeList(this.$store.state, this.treeId);
+    },
+    hasPreviousDirectory() {
+      return !this.isRoot && this.fetchedList.length;
+    },
+    showLoading() {
+      return this.loading;
+    },
+  },
+};
+</script>
+
+<template>
+<div>
+  <div class="ide-file-list">
+    <table class="table">
+      <tbody
+        v-if="treeId">
+        <repo-previous-directory
+          v-if="hasPreviousDirectory"
+        />
+        <repo-loading-file
+          v-if="showLoading"
+          v-for="n in 5"
+          :key="n"
+        />
+        <repo-file
+          v-for="file in fetchedList"
+          :key="file.key"
+          :file="file"
+        />
+      </tbody>
+    </table>
+  </div>
+</div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
new file mode 100644
index 00000000000..535398d98c2
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -0,0 +1,62 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import projectTree from './ide_project_tree.vue';
+import icon from '../../vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    projectTree,
+    icon,
+  },
+  computed: {
+    ...mapState([
+      'projects',
+      'leftPanelCollapsed',
+    ]),
+    currentIcon() {
+      return this.leftPanelCollapsed ? 'angle-double-right' : 'angle-double-left';
+    },
+  },
+  methods: {
+    ...mapActions([
+      'setPanelCollapsedStatus',
+    ]),
+    toggleCollapsed() {
+      this.setPanelCollapsedStatus({
+        side: 'left',
+        collapsed: !this.leftPanelCollapsed,
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+      class="multi-file-commit-panel"
+      :class="{
+        'is-collapsed': leftPanelCollapsed,
+      }"
+    >
+    <div class="multi-file-commit-panel-inner">
+      <project-tree
+        v-for="(project, index) in projects"
+        :key="project.id"
+        :project="project"/>
+    </div>
+    <button
+      type="button"
+      class="btn btn-transparent left-collapse-btn"
+      @click="toggleCollapsed"
+    >
+      <icon
+        :name="currentIcon"
+        :size="18"
+      />
+      <span
+        v-if="!leftPanelCollapsed"
+        class="collapse-text"
+      >Collapse sidebar</span>
+    </button>
+  </div>
+</template>
diff --git a/app/assets/javascripts/ide/components/ide_status_bar.vue b/app/assets/javascripts/ide/components/ide_status_bar.vue
new file mode 100644
index 00000000000..a24abadd936
--- /dev/null
+++ b/app/assets/javascripts/ide/components/ide_status_bar.vue
@@ -0,0 +1,71 @@
+<script>
+import { mapState } from 'vuex';
+import icon from '../../vue_shared/components/icon.vue';
+import tooltip from '../../vue_shared/directives/tooltip';
+import timeAgoMixin from '../../vue_shared/mixins/timeago';
+
+export default {
+  props: {
+    file: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    icon,
+  },
+  directives: {
+    tooltip,
+  },
+  mixins: [
+    timeAgoMixin,
+  ],
+  computed: {
+    ...mapState([
+      'selectedFile',
+    ]),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="ide-status-bar">
+    <div>
+      <icon
+        name="branch"
+        :size="12">
+      </icon>
+      {{ selectedFile.branchId }}
+    </div>
+    <div>
+      <div
+        v-if="selectedFile.lastCommit && selectedFile.lastCommit.id">
+        Last commit:
+        <a
+          v-tooltip
+          :title="selectedFile.lastCommit.message"
+          :href="selectedFile.lastCommit.url">
+          {{ timeFormated(selectedFile.lastCommit.updatedAt) }} by 
+          {{ selectedFile.lastCommit.author }}
+        </a>
+      </div>      
+    </div>
+    <div
+      class="text-right">
+      {{ selectedFile.name }}
+    </div>
+    <div 
+      class="text-right">
+      {{ selectedFile.eol }}
+    </div>
+    <div 
+      class="text-right">
+      {{ file.editorRow }}:{{ file.editorColumn }}
+    </div>
+    <div 
+      class="text-right">
+      {{ selectedFile.fileLanguage }}
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/new_branch_form.vue b/app/assets/javascripts/ide/components/new_branch_form.vue
index ba7090e4a9d..2119d373d31 100644
--- a/app/assets/javascripts/repo/components/new_branch_form.vue
+++ b/app/assets/javascripts/ide/components/new_branch_form.vue
@@ -44,7 +44,7 @@
             this.branchName = '';
 
             if (this.dropdownText) {
-              this.dropdownText.textContent = this.currentBranch;
+              this.dropdownText.textContent = this.currentBranchId;
             }
 
             this.toggleDropdown();
diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
new file mode 100644
index 00000000000..6e67e99a70f
--- /dev/null
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -0,0 +1,101 @@
+<script>
+  import newModal from './modal.vue';
+  import upload from './upload.vue';
+  import icon from '../../../vue_shared/components/icon.vue';
+
+  export default {
+    props: {
+      branch: {
+        type: String,
+        required: true,
+      },
+      path: {
+        type: String,
+        required: true,
+      },
+      parent: {
+        type: Object,
+        default: null,
+      },
+    },
+    components: {
+      icon,
+      newModal,
+      upload,
+    },
+    data() {
+      return {
+        openModal: false,
+        modalType: '',
+      };
+    },
+    methods: {
+      createNewItem(type) {
+        this.modalType = type;
+        this.toggleModalOpen();
+      },
+      toggleModalOpen() {
+        this.openModal = !this.openModal;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="repo-new-btn pull-right">
+    <div class="dropdown">
+      <button
+        type="button"
+        class="btn btn-sm btn-default dropdown-toggle add-to-tree"
+        data-toggle="dropdown"
+        aria-label="Create new file or directory"
+      >
+        <icon
+          name="plus"
+          :size="12"
+          css-classes="pull-left"
+        />
+        <icon
+          name="arrow-down"
+          :size="12"
+          css-classes="pull-left"
+        />
+      </button>
+      <ul class="dropdown-menu dropdown-menu-right">
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.prevent="createNewItem('blob')"
+          >
+            {{ __('New file') }}
+          </a>
+        </li>
+        <li>
+          <upload
+            :branch-id="branch"
+            :path="path"
+            :parent="parent"
+          />
+        </li>
+        <li>
+          <a
+            href="#"
+            role="button"
+            @click.prevent="createNewItem('tree')"
+          >
+            {{ __('New directory') }}
+          </a>
+        </li>
+      </ul>
+    </div>
+    <new-modal
+      v-if="openModal"
+      :type="modalType"
+      :branch-id="branch"
+      :path="path"
+      :parent="parent"
+      @toggle="toggleModalOpen"
+    />
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index c191af7dec3..a0650d37690 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,10 +1,18 @@
 <script>
-  import { mapActions } from 'vuex';
+  import { mapActions, mapState } from 'vuex';
   import { __ } from '../../../locale';
   import modal from '../../../vue_shared/components/modal.vue';
 
   export default {
     props: {
+      branchId: {
+        type: String,
+        required: true,
+      },
+      parent: {
+        type: Object,
+        default: null,
+      },
       type: {
         type: String,
         required: true,
@@ -28,6 +36,9 @@
       ]),
       createEntryInStore() {
         this.createTempEntry({
+          projectId: this.currentProjectId,
+          branchId: this.branchId,
+          parent: this.parent,
           name: this.entryName.replace(new RegExp(`^${this.path}/`), ''),
           type: this.type,
         });
@@ -39,6 +50,9 @@
       },
     },
     computed: {
+      ...mapState([
+        'currentProjectId',
+      ]),
       modalTitle() {
         if (this.type === 'tree') {
           return __('Create new directory');
diff --git a/app/assets/javascripts/repo/components/new_dropdown/upload.vue b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
index 14ad32f4ae0..2a2f2a241fc 100644
--- a/app/assets/javascripts/repo/components/new_dropdown/upload.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/upload.vue
@@ -1,12 +1,22 @@
 <script>
-  import { mapActions } from 'vuex';
+  import { mapActions, mapState } from 'vuex';
 
   export default {
     props: {
-      path: {
+      branchId: {
         type: String,
         required: true,
       },
+      parent: {
+        type: Object,
+        default: null,
+      },
+    },
+    computed: {
+      ...mapState([
+        'trees',
+        'currentProjectId',
+      ]),
     },
     methods: {
       ...mapActions([
@@ -22,6 +32,9 @@
 
         this.createTempEntry({
           name,
+          projectId: this.currentProjectId,
+          branchId: this.branchId,
+          parent: this.parent,
           type: 'blob',
           content: result,
           base64: !isText,
@@ -42,6 +55,9 @@
       openFile() {
         Array.from(this.$refs.fileUpload.files).forEach(file => this.readFile(file));
       },
+      startFileUpload() {
+        this.$refs.fileUpload.click();
+      },
     },
     mounted() {
       this.$refs.fileUpload.addEventListener('change', this.openFile);
@@ -53,16 +69,19 @@
 </script>
 
 <template>
-  <label
-    role="button"
-    class="menu-item"
-  >
-    {{ __('Upload file') }}
+  <div>
+    <a
+      href="#"
+      role="button"
+      @click.prevent="startFileUpload"
+    >
+      {{ __('Upload file') }}
+    </a>
     <input
       id="file-upload"
       type="file"
       class="hidden"
       ref="fileUpload"
     />
-  </label>
+  </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 4e0178072cb..470db2c9650 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -20,12 +20,13 @@ export default {
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
-      collapsed: true,
     };
   },
   computed: {
     ...mapState([
-      'currentBranch',
+      'currentProjectId',
+      'currentBranchId',
+      'rightPanelCollapsed',
     ]),
     ...mapGetters([
       'changedFiles',
@@ -42,12 +43,13 @@ export default {
       'checkCommitStatus',
       'commitChanges',
       'getTreeData',
+      'setPanelCollapsedStatus',
     ]),
     makeCommit(newBranch = false) {
       const createNewBranch = newBranch || this.startNewMR;
 
       const payload = {
-        branch: createNewBranch ? `${this.currentBranch}-${new Date().getTime().toString()}` : this.currentBranch,
+        branch: createNewBranch ? `${this.currentBranchId}-${new Date().getTime().toString()}` : this.currentBranchId,
         commit_message: this.commitMessage,
         actions: this.changedFiles.map(f => ({
           action: f.tempFile ? 'create' : 'update',
@@ -55,7 +57,7 @@ export default {
           content: f.content,
           encoding: f.base64 ? 'base64' : 'text',
         })),
-        start_branch: createNewBranch ? this.currentBranch : undefined,
+        start_branch: createNewBranch ? this.currentBranchId : undefined,
       };
 
       this.showNewBranchModal = false;
@@ -64,7 +66,12 @@ export default {
       this.commitChanges({ payload, newMr: this.startNewMR })
         .then(() => {
           this.submitCommitsLoading = false;
-          this.getTreeData();
+          this.$store.dispatch('getTreeData', {
+            projectId: this.currentProjectId,
+            branch: this.currentBranchId,
+            endpoint: `/tree/${this.currentBranchId}`,
+            force: true,
+          });
         })
         .catch(() => {
           this.submitCommitsLoading = false;
@@ -86,19 +93,17 @@ export default {
         });
     },
     toggleCollapsed() {
-      this.collapsed = !this.collapsed;
+      this.setPanelCollapsedStatus({
+        side: 'right',
+        collapsed: !this.rightPanelCollapsed,
+      });
     },
   },
 };
 </script>
 
 <template>
-<div
-  class="multi-file-commit-panel"
-  :class="{
-    'is-collapsed': collapsed,
-  }"
->
+<div class="multi-file-commit-panel-section">
   <modal
     v-if="showNewBranchModal"
     :primary-button-label="__('Create new branch')"
@@ -108,28 +113,16 @@ export default {
     @toggle="showNewBranchModal = false"
     @submit="makeCommit(true)"
   />
-  <button
-    v-if="collapsed"
-    type="button"
-    class="btn btn-transparent multi-file-commit-panel-collapse-btn is-collapsed prepend-top-10 append-bottom-10"
-    @click="toggleCollapsed"
-  >
-    <i
-      aria-hidden="true"
-      class="fa fa-angle-double-left"
-    >
-    </i>
-  </button>
   <commit-files-list
     title="Staged"
     :file-list="changedFiles"
-    :collapsed="collapsed"
+    :collapsed="rightPanelCollapsed"
     @toggleCollapsed="toggleCollapsed"
   />
   <form
     class="form-horizontal multi-file-commit-form"
     @submit.prevent="tryCommit"
-    v-if="!collapsed"
+    v-if="!rightPanelCollapsed"
   >
     <div class="multi-file-commit-fieldset">
       <textarea
diff --git a/app/assets/javascripts/repo/components/repo_edit_button.vue b/app/assets/javascripts/ide/components/repo_edit_button.vue
index 37bd9003e96..37bd9003e96 100644
--- a/app/assets/javascripts/repo/components/repo_edit_button.vue
+++ b/app/assets/javascripts/ide/components/repo_edit_button.vue
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index f37cbd1e961..221be4b9074 100644
--- a/app/assets/javascripts/repo/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -1,6 +1,6 @@
 <script>
 /* global monaco */
-import { mapGetters, mapActions } from 'vuex';
+import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '../../flash';
 import monacoLoader from '../monaco_loader';
 import Editor from '../lib/editor';
@@ -24,6 +24,9 @@ export default {
     ...mapActions([
       'getRawFileData',
       'changeFileContent',
+      'setFileLanguage',
+      'setEditorPosition',
+      'setFileEOL',
     ]),
     initMonaco() {
       if (this.shouldHideEditor) return;
@@ -43,12 +46,36 @@ export default {
       const model = this.editor.createModel(this.activeFile);
 
       this.editor.attachModel(model);
+
       model.onChange((m) => {
         this.changeFileContent({
           file: this.activeFile,
           content: m.getValue(),
         });
       });
+
+      // Handle Cursor Position
+      this.editor.onPositionChange((instance, e) => {
+        this.setEditorPosition({
+          editorRow: e.position.lineNumber,
+          editorColumn: e.position.column,
+        });
+      });
+
+      this.editor.setPosition({
+        lineNumber: this.activeFile.editorRow,
+        column: this.activeFile.editorColumn,
+      });
+
+      // Handle File Language
+      this.setFileLanguage({
+        fileLanguage: model.language,
+      });
+
+      // Get File eol
+      this.setFileEOL({
+        eol: model.eol,
+      });
     },
   },
   watch: {
@@ -57,12 +84,22 @@ export default {
         this.initMonaco();
       }
     },
+    leftPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
+    rightPanelCollapsed() {
+      this.editor.updateDimensions();
+    },
   },
   computed: {
     ...mapGetters([
       'activeFile',
       'activeFileExtension',
     ]),
+    ...mapState([
+      'leftPanelCollapsed',
+      'rightPanelCollapsed',
+    ]),
     shouldHideEditor() {
       return this.activeFile.binary && !this.activeFile.raw;
     },
@@ -76,13 +113,14 @@ export default {
     class="blob-viewer-container blob-editor-container"
   >
     <div
-      v-show="shouldHideEditor"
+      v-if="shouldHideEditor"
       v-html="activeFile.html"
     >
     </div>
     <div
       v-show="!shouldHideEditor"
       ref="editor"
+      class="multi-file-editor-holder"
     >
     </div>
   </div>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index 75787ad6103..09ca11531b1 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/ide/components/repo_file.vue
@@ -1,7 +1,8 @@
 <script>
-  import { mapActions, mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import timeAgoMixin from '../../vue_shared/mixins/timeago';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
+  import newDropdown from './new_dropdown/index.vue';
 
   export default {
     mixins: [
@@ -9,20 +10,22 @@
     ],
     components: {
       skeletonLoadingContainer,
+      newDropdown,
     },
     props: {
       file: {
         type: Object,
         required: true,
       },
+      showExtraColumns: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
-      ...mapGetters([
-        'isCollapsed',
+      ...mapState([
+        'leftPanelCollapsed',
       ]),
-      isSubmodule() {
-        return this.file.type === 'submodule';
-      },
       fileIcon() {
         return {
           'fa-spinner fa-spin': this.file.loading,
@@ -30,6 +33,12 @@
           'fa-folder-open': !this.file.loading && this.file.opened,
         };
       },
+      isSubmodule() {
+        return this.file.type === 'submodule';
+      },
+      isTree() {
+        return this.file.type === 'tree';
+      },
       levelIndentation() {
         return {
           marginLeft: `${this.file.level * 16}px`,
@@ -39,13 +48,39 @@
         return this.file.id.substr(0, 8);
       },
       submoduleColSpan() {
-        return !this.isCollapsed && this.isSubmodule ? 3 : 1;
+        return !this.leftPanelCollapsed && this.isSubmodule ? 3 : 1;
+      },
+      fileClass() {
+        if (this.file.type === 'blob') {
+          if (this.file.active) {
+            return 'file-open file-active';
+          }
+          return this.file.opened ? 'file-open' : '';
+        }
+        return '';
+      },
+      changedClass() {
+        return {
+          'fa-circle unsaved-icon': this.file.changed || this.file.tempFile,
+        };
       },
     },
     methods: {
-      ...mapActions([
-        'clickedTreeRow',
-      ]),
+      clickFile(row) {
+        // Manual Action if a tree is selected/opened
+        if (this.file.type === 'tree' && this.$router.currentRoute.path === `/project${row.url}`) {
+          this.$store.dispatch('toggleTreeOpen', {
+            endpoint: this.file.url,
+            tree: this.file,
+          });
+        }
+        this.$router.push(`/project${row.url}`);
+      },
+    },
+    updated() {
+      if (this.file.type === 'blob' && this.file.active) {
+        this.$el.scrollIntoView();
+      }
     },
   };
 </script>
@@ -53,7 +88,8 @@
 <template>
   <tr
     class="file"
-    @click.prevent="clickedTreeRow(file)">
+    :class="fileClass"
+    @click="clickFile(file)">
     <td
       class="multi-file-table-name"
       :colspan="submoduleColSpan"
@@ -66,11 +102,23 @@
       >
       </i>
       <a
-        :href="file.url"
         class="repo-file-name"
       >
         {{ file.name }}
       </a>
+      <new-dropdown
+        v-if="isTree"
+        :project-id="file.projectId"
+        :branch="file.branchId"
+        :path="file.path"
+        :parent="file"/>
+      <i
+        class="fa"
+        v-if="changedClass"
+        :class="changedClass"
+        aria-hidden="true"
+      >
+      </i>
       <template v-if="isSubmodule && file.id">
         @
         <span class="commit-sha">
@@ -84,7 +132,7 @@
       </template>
     </td>
 
-    <template v-if="!isCollapsed && !isSubmodule">
+    <template v-if="showExtraColumns && !isSubmodule">
       <td class="multi-file-table-col-commit-message hidden-sm hidden-xs">
         <a
           v-if="file.lastCommit.message"
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/ide/components/repo_file_buttons.vue
index 34f0d51819a..34f0d51819a 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/ide/components/repo_file_buttons.vue
diff --git a/app/assets/javascripts/repo/components/repo_loading_file.vue b/app/assets/javascripts/ide/components/repo_loading_file.vue
index 8fa637d771f..7eb840c7608 100644
--- a/app/assets/javascripts/repo/components/repo_loading_file.vue
+++ b/app/assets/javascripts/ide/components/repo_loading_file.vue
@@ -1,5 +1,5 @@
 <script>
-  import { mapGetters } from 'vuex';
+  import { mapState } from 'vuex';
   import skeletonLoadingContainer from '../../vue_shared/components/skeleton_loading_container.vue';
 
   export default {
@@ -7,8 +7,8 @@
       skeletonLoadingContainer,
     },
     computed: {
-      ...mapGetters([
-        'isCollapsed',
+      ...mapState([
+        'leftPanelCollapsed',
       ]),
     },
   };
@@ -24,7 +24,7 @@
         :small="true"
       />
     </td>
-    <template v-if="!isCollapsed">
+    <template v-if="!leftPanelCollapsed">
       <td
         class="hidden-sm hidden-xs">
         <skeleton-loading-container
diff --git a/app/assets/javascripts/repo/components/repo_prev_directory.vue b/app/assets/javascripts/ide/components/repo_prev_directory.vue
index a2b305bbd05..7cd359ea4ed 100644
--- a/app/assets/javascripts/repo/components/repo_prev_directory.vue
+++ b/app/assets/javascripts/ide/components/repo_prev_directory.vue
@@ -1,16 +1,14 @@
 <script>
-  import { mapGetters, mapState, mapActions } from 'vuex';
+  import { mapState, mapActions } from 'vuex';
 
   export default {
     computed: {
       ...mapState([
         'parentTreeUrl',
-      ]),
-      ...mapGetters([
-        'isCollapsed',
+        'leftPanelCollapsed',
       ]),
       colSpanCondition() {
-        return this.isCollapsed ? undefined : 3;
+        return this.leftPanelCollapsed ? undefined : 3;
       },
     },
     methods: {
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/ide/components/repo_preview.vue
index 3d1e0297bd5..3d1e0297bd5 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/ide/components/repo_preview.vue
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/ide/components/repo_tab.vue
index fb29a60df66..5bd63ac9ec5 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/ide/components/repo_tab.vue
@@ -27,16 +27,18 @@ export default {
 
   methods: {
     ...mapActions([
-      'setFileActive',
       'closeFile',
     ]),
+    clickFile(tab) {
+      this.$router.push(`/project${tab.url}`);
+    },
   },
 };
 </script>
 
 <template>
   <li
-    @click="setFileActive(tab)"
+    @click="clickFile(tab)"
   >
     <button
       type="button"
diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/ide/components/repo_tabs.vue
index ab0bef4f0ac..ab0bef4f0ac 100644
--- a/app/assets/javascripts/repo/components/repo_tabs.vue
+++ b/app/assets/javascripts/ide/components/repo_tabs.vue
diff --git a/app/assets/javascripts/ide/ide_router.js b/app/assets/javascripts/ide/ide_router.js
new file mode 100644
index 00000000000..a9cbf8e370f
--- /dev/null
+++ b/app/assets/javascripts/ide/ide_router.js
@@ -0,0 +1,101 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import store from './stores';
+import flash from '../flash';
+import {
+  getTreeEntry,
+} from './stores/utils';
+
+Vue.use(VueRouter);
+
+/**
+ * Routes below /-/ide/:
+
+/project/h5bp/html5-boilerplate/blob/master
+/project/h5bp/html5-boilerplate/blob/master/app/js/test.js
+
+/project/h5bp/html5-boilerplate/mr/123
+/project/h5bp/html5-boilerplate/mr/123/app/js/test.js
+
+/workspace/123
+/workspace/project/h5bp/html5-boilerplate/blob/my-special-branch
+/workspace/project/h5bp/html5-boilerplate/mr/123
+
+/ = /workspace
+
+/settings
+*/
+
+// Unfortunately Vue Router doesn't work without at least a fake component
+// If you do only data handling
+const EmptyRouterComponent = {
+  render(createElement) {
+    return createElement('div');
+  },
+};
+
+const router = new VueRouter({
+  mode: 'history',
+  base: `${gon.relative_url_root}/-/ide/`,
+  routes: [
+    {
+      path: '/project/:namespace/:project',
+      component: EmptyRouterComponent,
+      children: [
+        {
+          path: ':targetmode/:branch/*',
+          component: EmptyRouterComponent,
+        },
+        {
+          path: 'mr/:mrid',
+          component: EmptyRouterComponent,
+        },
+      ],
+    },
+  ],
+});
+
+router.beforeEach((to, from, next) => {
+  if (to.params.namespace && to.params.project) {
+    store.dispatch('getProjectData', {
+      namespace: to.params.namespace,
+      projectId: to.params.project,
+    })
+    .then(() => {
+      const fullProjectId = `${to.params.namespace}/${to.params.project}`;
+
+      if (to.params.branch) {
+        store.dispatch('getBranchData', {
+          projectId: fullProjectId,
+          branchId: to.params.branch,
+        });
+
+        store.dispatch('getTreeData', {
+          projectId: fullProjectId,
+          branch: to.params.branch,
+          endpoint: `/tree/${to.params.branch}`,
+        })
+        .then(() => {
+          if (to.params[0]) {
+            const treeEntry = getTreeEntry(store, `${to.params.namespace}/${to.params.project}/${to.params.branch}`, to.params[0]);
+            if (treeEntry) {
+              store.dispatch('handleTreeEntryAction', treeEntry);
+            }
+          }
+        })
+        .catch((e) => {
+          flash('Error while loading the branch files. Please try again.');
+          throw e;
+        });
+      }
+    })
+    .catch((e) => {
+      flash('Error while loading the project data. Please try again.');
+      throw e;
+    });
+  }
+
+  next();
+});
+
+export default router;
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
new file mode 100644
index 00000000000..a96bd339f51
--- /dev/null
+++ b/app/assets/javascripts/ide/index.js
@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import { mapActions } from 'vuex';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
+import ide from './components/ide.vue';
+
+import store from './stores';
+import router from './ide_router';
+import Translate from '../vue_shared/translate';
+import ContextualSidebar from '../contextual_sidebar';
+
+function initIde(el) {
+  if (!el) return null;
+
+  return new Vue({
+    el,
+    store,
+    router,
+    components: {
+      ide,
+    },
+    methods: {
+      ...mapActions([
+        'setInitialData',
+      ]),
+    },
+    created() {
+      const data = el.dataset;
+
+      this.setInitialData({
+        endpoints: {
+          rootEndpoint: data.url,
+          newMergeRequestUrl: data.newMergeRequestUrl,
+          rootUrl: data.rootUrl,
+        },
+        canCommit: convertPermissionToBoolean(data.canCommit),
+        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
+        path: data.currentPath,
+        isRoot: convertPermissionToBoolean(data.root),
+        isInitialRoot: convertPermissionToBoolean(data.root),
+      });
+    },
+    render(createElement) {
+      return createElement('ide');
+    },
+  });
+}
+
+const ideElement = document.getElementById('ide');
+
+Vue.use(Translate);
+
+initIde(ideElement);
+
+const contextualSidebar = new ContextualSidebar();
+contextualSidebar.bindEvents();
diff --git a/app/assets/javascripts/repo/lib/common/disposable.js b/app/assets/javascripts/ide/lib/common/disposable.js
index 84b29bdb600..84b29bdb600 100644
--- a/app/assets/javascripts/repo/lib/common/disposable.js
+++ b/app/assets/javascripts/ide/lib/common/disposable.js
diff --git a/app/assets/javascripts/repo/lib/common/model.js b/app/assets/javascripts/ide/lib/common/model.js
index 23c4811e6c0..14d9fe4771e 100644
--- a/app/assets/javascripts/repo/lib/common/model.js
+++ b/app/assets/javascripts/ide/lib/common/model.js
@@ -28,6 +28,14 @@ export default class Model {
     return this.model.uri.toString();
   }
 
+  get language() {
+    return this.model.getModeId();
+  }
+
+  get eol() {
+    return this.model.getEOL() === '\n' ? 'LF' : 'CRLF';
+  }
+
   get path() {
     return this.file.path;
   }
diff --git a/app/assets/javascripts/repo/lib/common/model_manager.js b/app/assets/javascripts/ide/lib/common/model_manager.js
index fd462252795..fd462252795 100644
--- a/app/assets/javascripts/repo/lib/common/model_manager.js
+++ b/app/assets/javascripts/ide/lib/common/model_manager.js
diff --git a/app/assets/javascripts/repo/lib/decorations/controller.js b/app/assets/javascripts/ide/lib/decorations/controller.js
index 0954b7973c4..0954b7973c4 100644
--- a/app/assets/javascripts/repo/lib/decorations/controller.js
+++ b/app/assets/javascripts/ide/lib/decorations/controller.js
diff --git a/app/assets/javascripts/repo/lib/diff/controller.js b/app/assets/javascripts/ide/lib/diff/controller.js
index dc0b1c95e59..dc0b1c95e59 100644
--- a/app/assets/javascripts/repo/lib/diff/controller.js
+++ b/app/assets/javascripts/ide/lib/diff/controller.js
diff --git a/app/assets/javascripts/repo/lib/diff/diff.js b/app/assets/javascripts/ide/lib/diff/diff.js
index 0e37f5c4704..0e37f5c4704 100644
--- a/app/assets/javascripts/repo/lib/diff/diff.js
+++ b/app/assets/javascripts/ide/lib/diff/diff.js
diff --git a/app/assets/javascripts/repo/lib/diff/diff_worker.js b/app/assets/javascripts/ide/lib/diff/diff_worker.js
index e74c4046330..e74c4046330 100644
--- a/app/assets/javascripts/repo/lib/diff/diff_worker.js
+++ b/app/assets/javascripts/ide/lib/diff/diff_worker.js
diff --git a/app/assets/javascripts/repo/lib/editor.js b/app/assets/javascripts/ide/lib/editor.js
index db499444402..51e202b9348 100644
--- a/app/assets/javascripts/repo/lib/editor.js
+++ b/app/assets/javascripts/ide/lib/editor.js
@@ -22,6 +22,11 @@ export default class Editor {
       this.modelManager = new ModelManager(this.monaco),
       this.decorationsController = new DecorationsController(this),
     );
+
+    this.debouncedUpdate = _.debounce(() => {
+      this.updateDimensions();
+    }, 200);
+    window.addEventListener('resize', this.debouncedUpdate, false);
   }
 
   createInstance(domElement) {
@@ -32,6 +37,9 @@ export default class Editor {
           readOnly: false,
           contextmenu: true,
           scrollBeyondLastLine: false,
+          minimap: {
+            enabled: false,
+          },
         }),
         this.dirtyDiffController = new DirtyDiffController(
           this.modelManager, this.decorationsController,
@@ -70,10 +78,32 @@ export default class Editor {
 
   dispose() {
     this.disposable.dispose();
+    window.removeEventListener('resize', this.debouncedUpdate);
 
     // dispose main monaco instance
     if (this.instance) {
       this.instance = null;
     }
   }
+
+  updateDimensions() {
+    this.instance.layout();
+  }
+
+  setPosition({ lineNumber, column }) {
+    this.instance.revealPositionInCenter({
+      lineNumber,
+      column,
+    });
+    this.instance.setPosition({
+      lineNumber,
+      column,
+    });
+  }
+
+  onPositionChange(cb) {
+    this.disposable.add(
+      this.instance.onDidChangeCursorPosition(e => cb(this.instance, e)),
+    );
+  }
 }
diff --git a/app/assets/javascripts/repo/lib/editor_options.js b/app/assets/javascripts/ide/lib/editor_options.js
index 701affc466e..701affc466e 100644
--- a/app/assets/javascripts/repo/lib/editor_options.js
+++ b/app/assets/javascripts/ide/lib/editor_options.js
diff --git a/app/assets/javascripts/repo/monaco_loader.js b/app/assets/javascripts/ide/monaco_loader.js
index af83a1ec0b4..af83a1ec0b4 100644
--- a/app/assets/javascripts/repo/monaco_loader.js
+++ b/app/assets/javascripts/ide/monaco_loader.js
diff --git a/app/assets/javascripts/repo/services/index.js b/app/assets/javascripts/ide/services/index.js
index 994d325e991..1fb24e93f2e 100644
--- a/app/assets/javascripts/repo/services/index.js
+++ b/app/assets/javascripts/ide/services/index.js
@@ -23,8 +23,11 @@ export default {
     return Vue.http.get(file.rawPath, { params: { format: 'json' } })
       .then(res => res.text());
   },
-  getBranchData(projectId, currentBranch) {
-    return Api.branchSingle(projectId, currentBranch);
+  getProjectData(namespace, project) {
+    return Api.project(`${namespace}/${project}`);
+  },
+  getBranchData(projectId, currentBranchId) {
+    return Api.branchSingle(projectId, currentBranchId);
   },
   createBranch(projectId, payload) {
     const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId);
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
new file mode 100644
index 00000000000..c01046c8c76
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -0,0 +1,179 @@
+import Vue from 'vue';
+import { visitUrl } from '../../lib/utils/url_utility';
+import flash from '../../flash';
+import service from '../services';
+import * as types from './mutation_types';
+
+export const redirectToUrl = (_, url) => visitUrl(url);
+
+export const setInitialData = ({ commit }, data) =>
+  commit(types.SET_INITIAL_DATA, data);
+
+export const closeDiscardPopup = ({ commit }) =>
+  commit(types.TOGGLE_DISCARD_POPUP, false);
+
+export const discardAllChanges = ({ commit, getters, dispatch }) => {
+  const changedFiles = getters.changedFiles;
+
+  changedFiles.forEach((file) => {
+    commit(types.DISCARD_FILE_CHANGES, file);
+
+    if (file.tempFile) {
+      dispatch('closeFile', { file, force: true });
+    }
+  });
+};
+
+export const closeAllFiles = ({ state, dispatch }) => {
+  state.openFiles.forEach(file => dispatch('closeFile', { file }));
+};
+
+export const toggleEditMode = (
+  { state, commit, getters, dispatch },
+  force = false,
+) => {
+  const changedFiles = getters.changedFiles;
+
+  if (changedFiles.length && !force) {
+    commit(types.TOGGLE_DISCARD_POPUP, true);
+  } else {
+    commit(types.TOGGLE_EDIT_MODE);
+    commit(types.TOGGLE_DISCARD_POPUP, false);
+    dispatch('toggleBlobView');
+
+    if (!state.editMode) {
+      dispatch('discardAllChanges');
+    }
+  }
+};
+
+export const toggleBlobView = ({ commit, state }) => {
+  if (state.editMode) {
+    commit(types.SET_EDIT_MODE);
+  } else {
+    commit(types.SET_PREVIEW_MODE);
+  }
+};
+
+export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
+  if (side === 'left') {
+    commit(types.SET_LEFT_PANEL_COLLAPSED, collapsed);
+  } else {
+    commit(types.SET_RIGHT_PANEL_COLLAPSED, collapsed);
+  }
+};
+
+export const checkCommitStatus = ({ state }) =>
+  service
+    .getBranchData(state.currentProjectId, state.currentBranchId)
+    .then((data) => {
+      const { id } = data.commit;
+      const selectedBranch =
+        state.projects[state.currentProjectId].branches[state.currentBranchId];
+
+      if (selectedBranch.workingReference !== id) {
+        return true;
+      }
+
+      return false;
+    })
+    .catch(() => flash('Error checking branch data. Please try again.'));
+
+export const commitChanges = (
+  { commit, state, dispatch, getters },
+  { payload, newMr },
+) =>
+  service
+    .commit(state.currentProjectId, payload)
+    .then((data) => {
+      const { branch } = payload;
+      if (!data.short_id) {
+        flash(data.message);
+        return;
+      }
+
+      const selectedProject = state.projects[state.currentProjectId];
+      const lastCommit = {
+        commit_path: `${selectedProject.web_url}/commit/${data.id}`,
+        commit: {
+          message: data.message,
+          authored_date: data.committed_date,
+        },
+      };
+
+      flash(
+        `Your changes have been committed. Commit ${data.short_id} with ${
+          data.stats.additions
+        } additions, ${data.stats.deletions} deletions.`,
+        'notice',
+      );
+
+      if (newMr) {
+        dispatch(
+          'redirectToUrl',
+          `${
+            selectedProject.web_url
+          }/merge_requests/new?merge_request%5Bsource_branch%5D=${branch}`,
+        );
+      } else {
+        commit(types.SET_BRANCH_WORKING_REFERENCE, {
+          projectId: state.currentProjectId,
+          branchId: state.currentBranchId,
+          reference: data.id,
+        });
+
+        getters.changedFiles.forEach((entry) => {
+          commit(types.SET_LAST_COMMIT_DATA, {
+            entry,
+            lastCommit,
+          });
+        });
+
+        dispatch('discardAllChanges');
+        dispatch('closeAllFiles');
+
+        window.scrollTo(0, 0);
+      }
+    })
+    .catch(() => flash('Error committing changes. Please try again.'));
+
+export const createTempEntry = (
+  { state, dispatch },
+  { projectId, branchId, parent, name, type, content = '', base64 = false },
+) => {
+  const selectedParent = parent || state.trees[`${projectId}/${branchId}`];
+  if (type === 'tree') {
+    dispatch('createTempTree', {
+      projectId,
+      branchId,
+      parent: selectedParent,
+      name,
+    });
+  } else if (type === 'blob') {
+    dispatch('createTempFile', {
+      projectId,
+      branchId,
+      parent: selectedParent,
+      name,
+      base64,
+      content,
+    });
+  }
+};
+
+export const scrollToTab = () => {
+  Vue.nextTick(() => {
+    const tabs = document.getElementById('tabs');
+
+    if (tabs) {
+      const tabEl = tabs.querySelector('.active .repo-tab');
+
+      tabEl.focus();
+    }
+  });
+};
+
+export * from './actions/tree';
+export * from './actions/file';
+export * from './actions/project';
+export * from './actions/branch';
diff --git a/app/assets/javascripts/ide/stores/actions/branch.js b/app/assets/javascripts/ide/stores/actions/branch.js
new file mode 100644
index 00000000000..32bdf7fec22
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/actions/branch.js
@@ -0,0 +1,43 @@
+import service from '../../services';
+import flash from '../../../flash';
+import * as types from '../mutation_types';
+
+export const getBranchData = (
+  { commit, state, dispatch },
+  { projectId, branchId, force = false } = {},
+) => new Promise((resolve, reject) => {
+  if ((typeof state.projects[`${projectId}`] === 'undefined' ||
+        !state.projects[`${projectId}`].branches[branchId])
+        || force) {
+    service.getBranchData(`${projectId}`, branchId)
+      .then((data) => {
+        const { id } = data.commit;
+        commit(types.SET_BRANCH, { projectPath: `${projectId}`, branchName: branchId, branch: data });
+        commit(types.SET_BRANCH_WORKING_REFERENCE, { projectId, branchId, reference: id });
+        resolve(data);
+      })
+      .catch(() => {
+        flash('Error loading branch data. Please try again.');
+        reject(new Error(`Branch not loaded - ${projectId}/${branchId}`));
+      });
+  } else {
+    resolve(state.projects[`${projectId}`].branches[branchId]);
+  }
+});
+
+export const createNewBranch = ({ state, commit }, branch) => service.createBranch(
+  state.currentProjectId,
+  {
+    branch,
+    ref: state.currentBranchId,
+  },
+)
+.then(res => res.json())
+.then((data) => {
+  const branchName = data.name;
+  const url = location.href.replace(state.currentBranchId, branchName);
+
+  if (this.$router) this.$router.push(url);
+
+  commit(types.SET_CURRENT_BRANCH, branchName);
+});
diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 5bae4fa826a..0f27d5bf1c3 100644
--- a/app/assets/javascripts/repo/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -2,9 +2,9 @@ import { normalizeHeaders } from '../../../lib/utils/common_utils';
 import flash from '../../../flash';
 import service from '../../services';
 import * as types from '../mutation_types';
+import router from '../../ide_router';
 import {
   findEntry,
-  pushState,
   setPageTitle,
   createTemp,
   findIndexOfFile,
@@ -25,7 +25,7 @@ export const closeFile = ({ commit, state, dispatch }, { file, force = false })
 
     dispatch('setFileActive', nextFileToOpen);
   } else if (!state.openFiles.length) {
-    pushState(file.parentTreeUrl);
+    router.push(`/project/${file.projectId}/tree/${file.branchId}/`);
   }
 
   dispatch('getLastCommitData');
@@ -45,6 +45,9 @@ export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
 
   // reset hash for line highlighting
   location.hash = '';
+
+  commit(types.SET_CURRENT_PROJECT, file.projectId);
+  commit(types.SET_CURRENT_BRANCH, file.branchId);
 };
 
 export const getFileData = ({ state, commit, dispatch }, file) => {
@@ -63,8 +66,6 @@ export const getFileData = ({ state, commit, dispatch }, file) => {
       commit(types.TOGGLE_FILE_OPEN, file);
       dispatch('setFileActive', file);
       commit(types.TOGGLE_LOADING, file);
-
-      pushState(file.url);
     })
     .catch(() => {
       commit(types.TOGGLE_LOADING, file);
@@ -82,21 +83,39 @@ export const changeFileContent = ({ commit }, { file, content }) => {
   commit(types.UPDATE_FILE_CONTENT, { file, content });
 };
 
-export const createTempFile = ({ state, commit, dispatch }, { tree, name, content = '', base64 = '' }) => {
+export const setFileLanguage = ({ state, commit }, { fileLanguage }) => {
+  commit(types.SET_FILE_LANGUAGE, { file: state.selectedFile, fileLanguage });
+};
+
+export const setFileEOL = ({ state, commit }, { eol }) => {
+  commit(types.SET_FILE_EOL, { file: state.selectedFile, eol });
+};
+
+export const setEditorPosition = ({ state, commit }, { editorRow, editorColumn }) => {
+  commit(types.SET_FILE_POSITION, { file: state.selectedFile, editorRow, editorColumn });
+};
+
+export const createTempFile = ({ state, commit, dispatch }, { projectId, branchId, parent, name, content = '', base64 = '' }) => {
+  const path = parent.path !== undefined ? parent.path : '';
+  // We need to do the replacement otherwise the web_url + file.url duplicate
+  const newUrl = `/${projectId}/blob/${branchId}/${path}${path ? '/' : ''}${name}`;
   const file = createTemp({
-    name: name.replace(`${state.path}/`, ''),
-    path: tree.path,
+    projectId,
+    branchId,
+    name: name.replace(`${path}/`, ''),
+    path,
     type: 'blob',
-    level: tree.level !== undefined ? tree.level + 1 : 0,
+    level: parent.level !== undefined ? parent.level + 1 : 0,
     changed: true,
     content,
     base64,
+    url: newUrl,
   });
 
-  if (findEntry(tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
+  if (findEntry(parent.tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
 
   commit(types.CREATE_TMP_FILE, {
-    parent: tree,
+    parent,
     file,
   });
   commit(types.TOGGLE_FILE_OPEN, file);
@@ -106,5 +125,7 @@ export const createTempFile = ({ state, commit, dispatch }, { tree, name, conten
     dispatch('toggleEditMode', true);
   }
 
+  router.push(`/project${file.url}`);
+
   return Promise.resolve(file);
 };
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
new file mode 100644
index 00000000000..75e332090cb
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -0,0 +1,25 @@
+import service from '../../services';
+import flash from '../../../flash';
+import * as types from '../mutation_types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const getProjectData = (
+  { commit, state, dispatch },
+  { namespace, projectId, force = false } = {},
+) => new Promise((resolve, reject) => {
+  if (!state.projects[`${namespace}/${projectId}`] || force) {
+    service.getProjectData(namespace, projectId)
+    .then(res => res.data)
+    .then((data) => {
+      commit(types.SET_PROJECT, { projectPath: `${namespace}/${projectId}`, project: data });
+      if (!state.currentProjectId) commit(types.SET_CURRENT_PROJECT, `${namespace}/${projectId}`);
+      resolve(data);
+    })
+    .catch(() => {
+      flash('Error loading project data. Please try again.');
+      reject(new Error(`Project not loaded ${namespace}/${projectId}`));
+    });
+  } else {
+    resolve(state.projects[`${namespace}/${projectId}`]);
+  }
+});
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
new file mode 100644
index 00000000000..25909400a75
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -0,0 +1,188 @@
+import { visitUrl } from '../../../lib/utils/url_utility';
+import { normalizeHeaders } from '../../../lib/utils/common_utils';
+import flash from '../../../flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+import router from '../../ide_router';
+import {
+  setPageTitle,
+  findEntry,
+  createTemp,
+  createOrMergeEntry,
+} from '../utils';
+
+export const getTreeData = (
+  { commit, state, dispatch },
+  { endpoint, tree = null, projectId, branch, force = false } = {},
+) => new Promise((resolve, reject) => {
+  // We already have the base tree so we resolve immediately
+  if (!tree && state.trees[`${projectId}/${branch}`] && !force) {
+    resolve();
+  } else {
+    if (tree) commit(types.TOGGLE_LOADING, tree);
+    const selectedProject = state.projects[projectId];
+    // We are merging the web_url that we got on the project info with the endpoint
+    // we got on the tree entry, as both contain the projectId, we replace it in the tree endpoint
+    const completeEndpoint = selectedProject.web_url + (endpoint).replace(projectId, '');
+    if (completeEndpoint && (!tree || !tree.tempFile)) {
+      service.getTreeData(completeEndpoint)
+      .then((res) => {
+        const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+        setPageTitle(pageTitle);
+
+        return res.json();
+      })
+      .then((data) => {
+        if (!state.isInitialRoot) {
+          commit(types.SET_ROOT, data.path === '/');
+        }
+
+        dispatch('updateDirectoryData', { data, tree, projectId, branch });
+        const selectedTree = tree || state.trees[`${projectId}/${branch}`];
+
+        commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
+        commit(types.SET_LAST_COMMIT_URL, { tree: selectedTree, url: data.last_commit_path });
+        if (tree) commit(types.TOGGLE_LOADING, selectedTree);
+
+        const prevLastCommitPath = selectedTree.lastCommitPath;
+        if (prevLastCommitPath !== null) {
+          dispatch('getLastCommitData', selectedTree);
+        }
+        resolve(data);
+      })
+      .catch((e) => {
+        flash('Error loading tree data. Please try again.');
+        if (tree) commit(types.TOGGLE_LOADING, tree);
+        reject(e);
+      });
+    } else {
+      resolve();
+    }
+  }
+});
+
+export const toggleTreeOpen = ({ commit, dispatch }, { endpoint, tree }) => {
+  if (tree.opened) {
+    // send empty data to clear the tree
+    const data = { trees: [], blobs: [], submodules: [] };
+
+    dispatch('updateDirectoryData', { data, tree, projectId: tree.projectId, branchId: tree.branchId });
+  } else {
+    dispatch('getTreeData', { endpoint, tree, projectId: tree.projectId, branch: tree.branchId });
+  }
+
+  commit(types.TOGGLE_TREE_OPEN, tree);
+};
+
+export const handleTreeEntryAction = ({ commit, dispatch }, row) => {
+  if (row.type === 'tree') {
+    dispatch('toggleTreeOpen', {
+      endpoint: row.url,
+      tree: row,
+    });
+  } else if (row.type === 'submodule') {
+    commit(types.TOGGLE_LOADING, row);
+    visitUrl(row.url);
+  } else if (row.type === 'blob' && row.opened) {
+    dispatch('setFileActive', row);
+  } else {
+    dispatch('getFileData', row);
+  }
+};
+
+export const createTempTree = (
+  { state, commit, dispatch },
+  { projectId, branchId, parent, name },
+) => {
+  let selectedTree = parent;
+  const dirNames = name.replace(new RegExp(`^${state.path}/`), '').split('/');
+
+  dirNames.forEach((dirName) => {
+    const foundEntry = findEntry(selectedTree.tree, 'tree', dirName);
+
+    if (!foundEntry) {
+      const path = selectedTree.path !== undefined ? selectedTree.path : '';
+      const tmpEntry = createTemp({
+        projectId,
+        branchId,
+        name: dirName,
+        path,
+        type: 'tree',
+        level: selectedTree.level !== undefined ? selectedTree.level + 1 : 0,
+        tree: [],
+        url: `/${projectId}/blob/${branchId}/${path}${path ? '/' : ''}${dirName}`,
+      });
+
+      commit(types.CREATE_TMP_TREE, {
+        parent: selectedTree,
+        tmpEntry,
+      });
+      commit(types.TOGGLE_TREE_OPEN, tmpEntry);
+
+      router.push(`/project${tmpEntry.url}`);
+
+      selectedTree = tmpEntry;
+    } else {
+      selectedTree = foundEntry;
+    }
+  });
+};
+
+export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
+  if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return;
+
+  service.getTreeLastCommit(tree.lastCommitPath)
+    .then((res) => {
+      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
+
+      commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
+
+      return res.json();
+    })
+    .then((data) => {
+      data.forEach((lastCommit) => {
+        const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name);
+
+        if (entry) {
+          commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
+        }
+      });
+
+      dispatch('getLastCommitData', tree);
+    })
+    .catch(() => flash('Error fetching log data.'));
+};
+
+export const updateDirectoryData = (
+  { commit, state },
+  { data, tree, projectId, branch },
+) => {
+  if (!tree) {
+    const existingTree = state.trees[`${projectId}/${branch}`];
+    if (!existingTree) {
+      commit(types.CREATE_TREE, { treePath: `${projectId}/${branch}` });
+    }
+  }
+
+  const selectedTree = tree || state.trees[`${projectId}/${branch}`];
+  const level = selectedTree.level !== undefined ? selectedTree.level + 1 : 0;
+  const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl;
+  const createEntry = (entry, type) => createOrMergeEntry({
+    tree: selectedTree,
+    projectId: `${projectId}`,
+    branchId: branch,
+    entry,
+    level,
+    type,
+    parentTreeUrl,
+  });
+
+  const formattedData = [
+    ...data.trees.map(t => createEntry(t, 'tree')),
+    ...data.submodules.map(m => createEntry(m, 'submodule')),
+    ...data.blobs.map(b => createEntry(b, 'blob')),
+  ];
+
+  commit(types.SET_DIRECTORY_DATA, { tree: selectedTree, data: formattedData });
+};
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
new file mode 100644
index 00000000000..6b51ccff817
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -0,0 +1,19 @@
+export const changedFiles = state => state.openFiles.filter(file => file.changed);
+
+export const activeFile = state => state.openFiles.find(file => file.active) || null;
+
+export const activeFileExtension = (state) => {
+  const file = activeFile(state);
+  return file ? `.${file.path.split('.').pop()}` : '';
+};
+
+export const canEditFile = (state) => {
+  const currentActiveFile = activeFile(state);
+
+  return state.canCommit &&
+         (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
+};
+
+export const addedFiles = state => changedFiles(state).filter(f => f.tempFile);
+
+export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile);
diff --git a/app/assets/javascripts/repo/stores/index.js b/app/assets/javascripts/ide/stores/index.js
index 6ac9bfd8189..6ac9bfd8189 100644
--- a/app/assets/javascripts/repo/stores/index.js
+++ b/app/assets/javascripts/ide/stores/index.js
diff --git a/app/assets/javascripts/repo/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index bc3390f1506..4e3c10972ba 100644
--- a/app/assets/javascripts/repo/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -1,16 +1,27 @@
 export const SET_INITIAL_DATA = 'SET_INITIAL_DATA';
 export const TOGGLE_LOADING = 'TOGGLE_LOADING';
-export const SET_COMMIT_REF = 'SET_COMMIT_REF';
 export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
 export const SET_ROOT = 'SET_ROOT';
-export const SET_PREVIOUS_URL = 'SET_PREVIOUS_URL';
 export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
+export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
+export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
+
+// Project Mutation Types
+export const SET_PROJECT = 'SET_PROJECT';
+export const SET_CURRENT_PROJECT = 'SET_CURRENT_PROJECT';
+export const TOGGLE_PROJECT_OPEN = 'TOGGLE_PROJECT_OPEN';
+
+// Branch Mutation Types
+export const SET_BRANCH = 'SET_BRANCH';
+export const SET_BRANCH_WORKING_REFERENCE = 'SET_BRANCH_WORKING_REFERENCE';
+export const TOGGLE_BRANCH_OPEN = 'TOGGLE_BRANCH_OPEN';
 
 // Tree mutation types
 export const SET_DIRECTORY_DATA = 'SET_DIRECTORY_DATA';
 export const TOGGLE_TREE_OPEN = 'TOGGLE_TREE_OPEN';
 export const CREATE_TMP_TREE = 'CREATE_TMP_TREE';
 export const SET_LAST_COMMIT_URL = 'SET_LAST_COMMIT_URL';
+export const CREATE_TREE = 'CREATE_TREE';
 
 // File mutation types
 export const SET_FILE_DATA = 'SET_FILE_DATA';
@@ -18,6 +29,9 @@ export const TOGGLE_FILE_OPEN = 'TOGGLE_FILE_OPEN';
 export const SET_FILE_ACTIVE = 'SET_FILE_ACTIVE';
 export const SET_FILE_RAW_DATA = 'SET_FILE_RAW_DATA';
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
+export const SET_FILE_LANGUAGE = 'SET_FILE_LANGUAGE';
+export const SET_FILE_POSITION = 'SET_FILE_POSITION';
+export const SET_FILE_EOL = 'SET_FILE_EOL';
 export const DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
 export const CREATE_TMP_FILE = 'CREATE_TMP_FILE';
 
@@ -28,3 +42,4 @@ export const TOGGLE_EDIT_MODE = 'TOGGLE_EDIT_MODE';
 export const TOGGLE_DISCARD_POPUP = 'TOGGLE_DISCARD_POPUP';
 
 export const SET_CURRENT_BRANCH = 'SET_CURRENT_BRANCH';
+
diff --git a/app/assets/javascripts/repo/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index ae2ba5bedf7..2fed9019cb6 100644
--- a/app/assets/javascripts/repo/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -1,4 +1,5 @@
 import * as types from './mutation_types';
+import projectMutations from './mutations/project';
 import fileMutations from './mutations/file';
 import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
@@ -32,29 +33,32 @@ export default {
       discardPopupOpen,
     });
   },
-  [types.SET_COMMIT_REF](state, ref) {
-    Object.assign(state, {
-      currentRef: ref,
-    });
-  },
   [types.SET_ROOT](state, isRoot) {
     Object.assign(state, {
       isRoot,
       isInitialRoot: isRoot,
     });
   },
-  [types.SET_PREVIOUS_URL](state, previousUrl) {
+  [types.SET_LEFT_PANEL_COLLAPSED](state, collapsed) {
+    Object.assign(state, {
+      leftPanelCollapsed: collapsed,
+    });
+  },
+  [types.SET_RIGHT_PANEL_COLLAPSED](state, collapsed) {
     Object.assign(state, {
-      previousUrl,
+      rightPanelCollapsed: collapsed,
     });
   },
   [types.SET_LAST_COMMIT_DATA](state, { entry, lastCommit }) {
     Object.assign(entry.lastCommit, {
+      id: lastCommit.commit.id,
       url: lastCommit.commit_path,
       message: lastCommit.commit.message,
+      author: lastCommit.commit.author_name,
       updatedAt: lastCommit.commit.authored_date,
     });
   },
+  ...projectMutations,
   ...fileMutations,
   ...treeMutations,
   ...branchMutations,
diff --git a/app/assets/javascripts/ide/stores/mutations/branch.js b/app/assets/javascripts/ide/stores/mutations/branch.js
new file mode 100644
index 00000000000..04b9582c5bb
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/mutations/branch.js
@@ -0,0 +1,28 @@
+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_BRANCH](state, currentBranchId) {
+    Object.assign(state, {
+      currentBranchId,
+    });
+  },
+  [types.SET_BRANCH](state, { projectPath, branchName, branch }) {
+    // Add client side properties
+    Object.assign(branch, {
+      treeId: `${projectPath}/${branchName}`,
+      active: true,
+      workingReference: '',
+    });
+
+    Object.assign(state.projects[projectPath], {
+      branches: {
+        [branchName]: branch,
+      },
+    });
+  },
+  [types.SET_BRANCH_WORKING_REFERENCE](state, { projectId, branchId, reference }) {
+    Object.assign(state.projects[projectId].branches[branchId], {
+      workingReference: reference,
+    });
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index f9ba80b9dc2..5f3655b0092 100644
--- a/app/assets/javascripts/repo/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -6,6 +6,10 @@ export default {
     Object.assign(file, {
       active,
     });
+
+    Object.assign(state, {
+      selectedFile: file,
+    });
   },
   [types.TOGGLE_FILE_OPEN](state, file) {
     Object.assign(file, {
@@ -42,6 +46,22 @@ export default {
       changed,
     });
   },
+  [types.SET_FILE_LANGUAGE](state, { file, fileLanguage }) {
+    Object.assign(file, {
+      fileLanguage,
+    });
+  },
+  [types.SET_FILE_EOL](state, { file, eol }) {
+    Object.assign(file, {
+      eol,
+    });
+  },
+  [types.SET_FILE_POSITION](state, { file, editorRow, editorColumn }) {
+    Object.assign(file, {
+      editorRow,
+      editorColumn,
+    });
+  },
   [types.DISCARD_FILE_CHANGES](state, file) {
     Object.assign(file, {
       content: '',
diff --git a/app/assets/javascripts/ide/stores/mutations/project.js b/app/assets/javascripts/ide/stores/mutations/project.js
new file mode 100644
index 00000000000..2816562a919
--- /dev/null
+++ b/app/assets/javascripts/ide/stores/mutations/project.js
@@ -0,0 +1,23 @@
+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_PROJECT](state, currentProjectId) {
+    Object.assign(state, {
+      currentProjectId,
+    });
+  },
+  [types.SET_PROJECT](state, { projectPath, project }) {
+    // Add client side properties
+    Object.assign(project, {
+      tree: [],
+      branches: {},
+      active: true,
+    });
+
+    Object.assign(state, {
+      projects: Object.assign({}, state.projects, {
+        [projectPath]: project,
+      }),
+    });
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/tree.js b/app/assets/javascripts/ide/stores/mutations/tree.js
index 130221c9fda..4fe438ab465 100644
--- a/app/assets/javascripts/repo/stores/mutations/tree.js
+++ b/app/assets/javascripts/ide/stores/mutations/tree.js
@@ -6,6 +6,15 @@ export default {
       opened: !tree.opened,
     });
   },
+  [types.CREATE_TREE](state, { treePath }) {
+    Object.assign(state, {
+      trees: Object.assign({}, state.trees, {
+        [treePath]: {
+          tree: [],
+        },
+      }),
+    });
+  },
   [types.SET_DIRECTORY_DATA](state, { data, tree }) {
     Object.assign(tree, {
       tree: data,
diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 0068834831e..539e382830f 100644
--- a/app/assets/javascripts/repo/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -1,10 +1,10 @@
 export default () => ({
   canCommit: false,
-  currentBranch: '',
-  currentBlobView: 'repo-preview',
-  currentRef: '',
+  currentProjectId: '',
+  currentBranchId: '',
+  currentBlobView: 'repo-editor',
   discardPopupOpen: false,
-  editMode: false,
+  editMode: true,
   endpoints: {},
   isRoot: false,
   isInitialRoot: false,
@@ -12,13 +12,11 @@ export default () => ({
   loading: false,
   onTopOfBranch: false,
   openFiles: [],
+  selectedFile: null,
   path: '',
-  project: {
-    id: 0,
-    name: '',
-    url: '',
-  },
   parentTreeUrl: '',
-  previousUrl: '',
-  tree: [],
+  trees: {},
+  projects: {},
+  leftPanelCollapsed: false,
+  rightPanelCollapsed: true,
 });
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/ide/stores/utils.js
index fae1f4439a9..29e3ab5d040 100644
--- a/app/assets/javascripts/repo/stores/utils.js
+++ b/app/assets/javascripts/ide/stores/utils.js
@@ -2,6 +2,8 @@ export const dataStructure = () => ({
   id: '',
   key: '',
   type: '',
+  projectId: '',
+  branchId: '',
   name: '',
   url: '',
   path: '',
@@ -15,9 +17,11 @@ export const dataStructure = () => ({
   changed: false,
   lastCommitPath: '',
   lastCommit: {
+    id: '',
     url: '',
     message: '',
     updatedAt: '',
+    author: '',
   },
   tree_url: '',
   blamePath: '',
@@ -31,11 +35,17 @@ export const dataStructure = () => ({
   parentTreeUrl: '',
   renderError: false,
   base64: false,
+  editorRow: 1,
+  editorColumn: 1,
+  fileLanguage: '',
+  eol: '',
 });
 
 export const decorateData = (entity) => {
   const {
     id,
+    projectId,
+    branchId,
     type,
     url,
     name,
@@ -56,6 +66,8 @@ export const decorateData = (entity) => {
   return {
     ...dataStructure(),
     id,
+    projectId,
+    branchId,
     key: `${name}-${type}-${id}`,
     type,
     name,
@@ -75,24 +87,51 @@ export const decorateData = (entity) => {
   };
 };
 
-export const findEntry = (state, type, name) => state.tree.find(
+/*
+  Takes the multi-dimensional tree and returns a flattened array.
+  This allows for the table to recursively render the table rows but keeps the data
+  structure nested to make it easier to add new files/directories.
+*/
+export const treeList = (state, treeId) => {
+  const baseTree = state.trees[treeId];
+  if (baseTree) {
+    const mapTree = arr => (!arr.tree || !arr.tree.length ?
+                            [] : _.map(arr.tree, a => [a, mapTree(a)]));
+
+    return _.chain(baseTree.tree)
+      .map(arr => [arr, mapTree(arr)])
+      .flatten()
+      .value();
+  }
+  return [];
+};
+
+export const getTree = state => (namespace, projectId, branch) => state.trees[`${namespace}/${projectId}/${branch}`];
+
+export const getTreeEntry = (store, treeId, path) => {
+  const fileList = treeList(store.state, treeId);
+  return fileList ? fileList.find(file => file.path === path) : null;
+};
+
+export const findEntry = (tree, type, name) => tree.find(
   f => f.type === type && f.name === name,
 );
+
 export const findIndexOfFile = (state, file) => state.findIndex(f => f.path === file.path);
 
 export const setPageTitle = (title) => {
   document.title = title;
 };
 
-export const pushState = (url) => {
-  history.pushState({ url }, '', url);
-};
-
-export const createTemp = ({ name, path, type, level, changed, content, base64 }) => {
+export const createTemp = ({
+  projectId, branchId, name, path, type, level, changed, content, base64, url,
+}) => {
   const treePath = path ? `${path}/${name}` : name;
 
   return decorateData({
     id: new Date().getTime().toString(),
+    projectId,
+    branchId,
     name,
     type,
     tempFile: true,
@@ -104,11 +143,18 @@ export const createTemp = ({ name, path, type, level, changed, content, base64 }
     level,
     base64,
     renderError: base64,
+    url,
   });
 };
 
-export const createOrMergeEntry = ({ tree, entry, type, parentTreeUrl, level }) => {
-  const found = findEntry(tree, type, entry.name);
+export const createOrMergeEntry = ({ tree,
+                                     projectId,
+                                     branchId,
+                                     entry,
+                                     type,
+                                     parentTreeUrl,
+                                     level }) => {
+  const found = findEntry(tree.tree || tree, type, entry.name);
 
   if (found) {
     return Object.assign({}, found, {
@@ -120,6 +166,8 @@ export const createOrMergeEntry = ({ tree, entry, type, parentTreeUrl, level })
 
   return decorateData({
     ...entry,
+    projectId,
+    branchId,
     type,
     parentTreeUrl,
     level,
diff --git a/app/assets/javascripts/new_commit_form.js b/app/assets/javascripts/new_commit_form.js
index 6e152497d20..a2f0a44863f 100644
--- a/app/assets/javascripts/new_commit_form.js
+++ b/app/assets/javascripts/new_commit_form.js
@@ -6,11 +6,12 @@ export default class NewCommitForm {
     this.branchName = form.find('.js-branch-name');
     this.originalBranch = form.find('.js-original-branch');
     this.createMergeRequest = form.find('.js-create-merge-request');
-    this.createMergeRequestContainer = form.find('.js-create-merge-request-container');
+    this.createMergeRequestContainer = form.find(
+      '.js-create-merge-request-container',
+    );
     this.branchName.keyup(this.renderDestination);
     this.renderDestination();
   }
-
   renderDestination() {
     var different;
     different = this.branchName.val() !== this.originalBranch.val();
@@ -23,6 +24,6 @@ export default class NewCommitForm {
       this.createMergeRequestContainer.hide();
       this.createMergeRequest.prop('checked', false);
     }
-    return this.wasDifferent = different;
+    return (this.wasDifferent = different);
   }
 }
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list.vue b/app/assets/javascripts/repo/components/commit_sidebar/list.vue
deleted file mode 100644
index fb862e7bf01..00000000000
--- a/app/assets/javascripts/repo/components/commit_sidebar/list.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script>
-  import icon from '../../../vue_shared/components/icon.vue';
-  import listItem from './list_item.vue';
-  import listCollapsed from './list_collapsed.vue';
-
-  export default {
-    components: {
-      icon,
-      listItem,
-      listCollapsed,
-    },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      fileList: {
-        type: Array,
-        required: true,
-      },
-      collapsed: {
-        type: Boolean,
-        required: true,
-      },
-    },
-    methods: {
-      toggleCollapsed() {
-        this.$emit('toggleCollapsed');
-      },
-    },
-  };
-</script>
-
-<template>
-  <div class="multi-file-commit-panel-section">
-    <header
-      class="multi-file-commit-panel-header"
-      :class="{
-        'is-collapsed': collapsed,
-      }"
-    >
-      <icon
-        name="list-bulleted"
-        :size="18"
-        css-classes="append-right-default"
-      />
-      <template v-if="!collapsed">
-        {{ title }}
-        <button
-          type="button"
-          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click="toggleCollapsed"
-        >
-          <i
-            aria-hidden="true"
-            class="fa fa-angle-double-right"
-          >
-          </i>
-        </button>
-      </template>
-    </header>
-    <div class="multi-file-commit-list">
-      <list-collapsed
-        v-if="collapsed"
-      />
-      <template v-else>
-        <ul
-          v-if="fileList.length"
-          class="list-unstyled append-bottom-0"
-        >
-          <li
-            v-for="file in fileList"
-            :key="file.key"
-          >
-            <list-item
-              :file="file"
-            />
-          </li>
-        </ul>
-        <div
-          v-else
-          class="help-block prepend-top-0"
-        >
-          No changes
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
diff --git a/app/assets/javascripts/repo/components/new_dropdown/index.vue b/app/assets/javascripts/repo/components/new_dropdown/index.vue
deleted file mode 100644
index 781404cf8ca..00000000000
--- a/app/assets/javascripts/repo/components/new_dropdown/index.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script>
-  import { mapState } from 'vuex';
-  import newModal from './modal.vue';
-  import upload from './upload.vue';
-  import icon from '../../../vue_shared/components/icon.vue';
-
-  export default {
-    components: {
-      icon,
-      newModal,
-      upload,
-    },
-    data() {
-      return {
-        openModal: false,
-        modalType: '',
-      };
-    },
-    computed: {
-      ...mapState([
-        'path',
-      ]),
-    },
-    methods: {
-      createNewItem(type) {
-        this.modalType = type;
-        this.toggleModalOpen();
-      },
-      toggleModalOpen() {
-        this.openModal = !this.openModal;
-      },
-    },
-  };
-</script>
-
-<template>
-  <div>
-    <ul class="breadcrumb repo-breadcrumb">
-      <li class="dropdown">
-        <button
-          type="button"
-          class="btn btn-default dropdown-toggle add-to-tree"
-          data-toggle="dropdown"
-          aria-label="Create new file or directory"
-        >
-          <icon
-            name="plus"
-            css-classes="pull-left"
-          />
-          <icon
-            name="arrow-down"
-            css-classes="pull-left"
-          />
-        </button>
-        <ul class="dropdown-menu">
-          <li>
-            <a
-              href="#"
-              role="button"
-              @click.prevent="createNewItem('blob')"
-            >
-              {{ __('New file') }}
-            </a>
-          </li>
-          <li>
-            <upload
-              :path="path"
-            />
-          </li>
-          <li>
-            <a
-              href="#"
-              role="button"
-              @click.prevent="createNewItem('tree')"
-            >
-              {{ __('New directory') }}
-            </a>
-          </li>
-        </ul>
-      </li>
-    </ul>
-    <new-modal
-      v-if="openModal"
-      :type="modalType"
-      :path="path"
-      @toggle="toggleModalOpen"
-    />
-  </div>
-</template>
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
deleted file mode 100644
index a00e1e9d809..00000000000
--- a/app/assets/javascripts/repo/components/repo.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-import { mapState, mapGetters } from 'vuex';
-import RepoSidebar from './repo_sidebar.vue';
-import RepoCommitSection from './repo_commit_section.vue';
-import RepoTabs from './repo_tabs.vue';
-import RepoFileButtons from './repo_file_buttons.vue';
-import RepoPreview from './repo_preview.vue';
-import repoEditor from './repo_editor.vue';
-
-export default {
-  computed: {
-    ...mapState([
-      'currentBlobView',
-    ]),
-    ...mapGetters([
-      'isCollapsed',
-      'changedFiles',
-    ]),
-  },
-  components: {
-    RepoSidebar,
-    RepoTabs,
-    RepoFileButtons,
-    repoEditor,
-    RepoCommitSection,
-    RepoPreview,
-  },
-  mounted() {
-    const returnValue = 'Are you sure you want to lose unsaved changes?';
-    window.onbeforeunload = (e) => {
-      if (!this.changedFiles.length) return undefined;
-
-      Object.assign(e, {
-        returnValue,
-      });
-      return returnValue;
-    };
-  },
-};
-</script>
-
-<template>
-  <div
-    class="multi-file"
-    :class="{
-      'is-collapsed': isCollapsed
-    }"
-  >
-    <repo-sidebar/>
-    <div
-      v-if="isCollapsed"
-      class="multi-file-edit-pane"
-    >
-      <repo-tabs />
-      <component
-        class="multi-file-edit-pane-content"
-        :is="currentBlobView"
-      />
-      <repo-file-buttons />
-    </div>
-    <repo-commit-section />
-  </div>
-</template>
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
deleted file mode 100644
index 4ea21913129..00000000000
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<script>
-import { mapState, mapGetters, mapActions } from 'vuex';
-import RepoPreviousDirectory from './repo_prev_directory.vue';
-import RepoFile from './repo_file.vue';
-import RepoLoadingFile from './repo_loading_file.vue';
-
-export default {
-  components: {
-    'repo-previous-directory': RepoPreviousDirectory,
-    'repo-file': RepoFile,
-    'repo-loading-file': RepoLoadingFile,
-  },
-  created() {
-    window.addEventListener('popstate', this.popHistoryState);
-  },
-  destroyed() {
-    window.removeEventListener('popstate', this.popHistoryState);
-  },
-  mounted() {
-    this.getTreeData();
-  },
-  computed: {
-    ...mapState([
-      'loading',
-      'isRoot',
-    ]),
-    ...mapState({
-      projectName(state) {
-        return state.project.name;
-      },
-    }),
-    ...mapGetters([
-      'treeList',
-      'isCollapsed',
-    ]),
-  },
-  methods: {
-    ...mapActions([
-      'getTreeData',
-      'popHistoryState',
-    ]),
-  },
-};
-</script>
-
-<template>
-<div class="ide-file-list">
-  <table class="table">
-    <thead>
-      <tr>
-        <th
-          v-if="isCollapsed"
-        >
-        </th>
-        <template v-else>
-          <th class="name multi-file-table-name">
-            Name
-          </th>
-          <th class="hidden-sm hidden-xs last-commit">
-            Last commit
-          </th>
-          <th class="hidden-xs last-update text-right">
-            Last update
-          </th>
-        </template>
-      </tr>
-    </thead>
-    <tbody>
-      <repo-previous-directory
-        v-if="!isRoot && treeList.length"
-      />
-      <repo-loading-file
-        v-if="!treeList.length && loading"
-        v-for="n in 5"
-        :key="n"
-      />
-      <repo-file
-        v-for="file in treeList"
-        :key="file.key"
-        :file="file"
-      />
-    </tbody>
-  </table>
-</div>
-</template>
diff --git a/app/assets/javascripts/repo/index.js b/app/assets/javascripts/repo/index.js
deleted file mode 100644
index b6801af7fcb..00000000000
--- a/app/assets/javascripts/repo/index.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import Vue from 'vue';
-import { mapActions } from 'vuex';
-import { convertPermissionToBoolean } from '../lib/utils/common_utils';
-import Repo from './components/repo.vue';
-import RepoEditButton from './components/repo_edit_button.vue';
-import newBranchForm from './components/new_branch_form.vue';
-import newDropdown from './components/new_dropdown/index.vue';
-import store from './stores';
-import Translate from '../vue_shared/translate';
-
-function initRepo(el) {
-  if (!el) return null;
-
-  return new Vue({
-    el,
-    store,
-    components: {
-      repo: Repo,
-    },
-    methods: {
-      ...mapActions([
-        'setInitialData',
-      ]),
-    },
-    created() {
-      const data = el.dataset;
-
-      this.setInitialData({
-        project: {
-          id: data.projectId,
-          name: data.projectName,
-          url: data.projectUrl,
-        },
-        endpoints: {
-          rootEndpoint: data.url,
-          newMergeRequestUrl: data.newMergeRequestUrl,
-          rootUrl: data.rootUrl,
-        },
-        canCommit: convertPermissionToBoolean(data.canCommit),
-        onTopOfBranch: convertPermissionToBoolean(data.onTopOfBranch),
-        currentRef: data.ref,
-        path: data.currentPath,
-        currentBranch: data.currentBranch,
-        isRoot: convertPermissionToBoolean(data.root),
-        isInitialRoot: convertPermissionToBoolean(data.root),
-      });
-    },
-    render(createElement) {
-      return createElement('repo');
-    },
-  });
-}
-
-function initRepoEditButton(el) {
-  return new Vue({
-    el,
-    store,
-    components: {
-      repoEditButton: RepoEditButton,
-    },
-    render(createElement) {
-      return createElement('repo-edit-button');
-    },
-  });
-}
-
-function initNewDropdown(el) {
-  return new Vue({
-    el,
-    store,
-    components: {
-      newDropdown,
-    },
-    render(createElement) {
-      return createElement('new-dropdown');
-    },
-  });
-}
-
-function initNewBranchForm() {
-  const el = document.querySelector('.js-new-branch-dropdown');
-
-  if (!el) return null;
-
-  return new Vue({
-    el,
-    components: {
-      newBranchForm,
-    },
-    store,
-    render(createElement) {
-      return createElement('new-branch-form');
-    },
-  });
-}
-
-const repo = document.getElementById('repo');
-const editButton = document.querySelector('.editable-mode');
-const newDropdownHolder = document.querySelector('.js-new-dropdown');
-
-Vue.use(Translate);
-
-initRepo(repo);
-initRepoEditButton(editButton);
-initNewBranchForm();
-initNewDropdown(newDropdownHolder);
diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
deleted file mode 100644
index af5dcf054ef..00000000000
--- a/app/assets/javascripts/repo/stores/actions.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import Vue from 'vue';
-import { visitUrl } from '../../lib/utils/url_utility';
-import flash from '../../flash';
-import service from '../services';
-import * as types from './mutation_types';
-
-export const redirectToUrl = (_, url) => visitUrl(url);
-
-export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
-
-export const closeDiscardPopup = ({ commit }) => commit(types.TOGGLE_DISCARD_POPUP, false);
-
-export const discardAllChanges = ({ commit, getters, dispatch }) => {
-  const changedFiles = getters.changedFiles;
-
-  changedFiles.forEach((file) => {
-    commit(types.DISCARD_FILE_CHANGES, file);
-
-    if (file.tempFile) {
-      dispatch('closeFile', { file, force: true });
-    }
-  });
-};
-
-export const closeAllFiles = ({ state, dispatch }) => {
-  state.openFiles.forEach(file => dispatch('closeFile', { file }));
-};
-
-export const toggleEditMode = ({ state, commit, getters, dispatch }, force = false) => {
-  const changedFiles = getters.changedFiles;
-
-  if (changedFiles.length && !force) {
-    commit(types.TOGGLE_DISCARD_POPUP, true);
-  } else {
-    commit(types.TOGGLE_EDIT_MODE);
-    commit(types.TOGGLE_DISCARD_POPUP, false);
-    dispatch('toggleBlobView');
-
-    if (!state.editMode) {
-      dispatch('discardAllChanges');
-    }
-  }
-};
-
-export const toggleBlobView = ({ commit, state }) => {
-  if (state.editMode) {
-    commit(types.SET_EDIT_MODE);
-  } else {
-    commit(types.SET_PREVIEW_MODE);
-  }
-};
-
-export const checkCommitStatus = ({ state }) => service.getBranchData(
-  state.project.id,
-  state.currentBranch,
-)
-  .then((data) => {
-    const { id } = data.commit;
-
-    if (state.currentRef !== id) {
-      return true;
-    }
-
-    return false;
-  })
-  .catch(() => flash('Error checking branch data. Please try again.'));
-
-export const commitChanges = ({ commit, state, dispatch, getters }, { payload, newMr }) =>
-  service.commit(state.project.id, payload)
-  .then((data) => {
-    const { branch } = payload;
-    if (!data.short_id) {
-      flash(data.message);
-      return;
-    }
-
-    const lastCommit = {
-      commit_path: `${state.project.url}/commit/${data.id}`,
-      commit: {
-        message: data.message,
-        authored_date: data.committed_date,
-      },
-    };
-
-    flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
-
-    if (newMr) {
-      dispatch('redirectToUrl', `${state.endpoints.newMergeRequestUrl}${branch}`);
-    } else {
-      commit(types.SET_COMMIT_REF, data.id);
-
-      getters.changedFiles.forEach((entry) => {
-        commit(types.SET_LAST_COMMIT_DATA, {
-          entry,
-          lastCommit,
-        });
-      });
-
-      dispatch('discardAllChanges');
-      dispatch('closeAllFiles');
-      dispatch('toggleEditMode');
-
-      window.scrollTo(0, 0);
-    }
-  })
-  .catch(() => flash('Error committing changes. Please try again.'));
-
-export const createTempEntry = ({ state, dispatch }, { name, type, content = '', base64 = false }) => {
-  if (type === 'tree') {
-    dispatch('createTempTree', name);
-  } else if (type === 'blob') {
-    dispatch('createTempFile', {
-      tree: state,
-      name,
-      base64,
-      content,
-    });
-  }
-};
-
-export const popHistoryState = ({ state, dispatch, getters }) => {
-  const treeList = getters.treeList;
-  const tree = treeList.find(file => file.url === state.previousUrl);
-
-  if (!tree) return;
-
-  if (tree.type === 'tree') {
-    dispatch('toggleTreeOpen', { endpoint: tree.url, tree });
-  }
-};
-
-export const scrollToTab = () => {
-  Vue.nextTick(() => {
-    const tabs = document.getElementById('tabs');
-
-    if (tabs) {
-      const tabEl = tabs.querySelector('.active .repo-tab');
-
-      tabEl.focus();
-    }
-  });
-};
-
-export * from './actions/tree';
-export * from './actions/file';
-export * from './actions/branch';
diff --git a/app/assets/javascripts/repo/stores/actions/branch.js b/app/assets/javascripts/repo/stores/actions/branch.js
deleted file mode 100644
index 61d9a5af3e3..00000000000
--- a/app/assets/javascripts/repo/stores/actions/branch.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import service from '../../services';
-import * as types from '../mutation_types';
-import { pushState } from '../utils';
-
-// eslint-disable-next-line import/prefer-default-export
-export const createNewBranch = ({ state, commit }, branch) => service.createBranch(
-  state.project.id,
-  {
-    branch,
-    ref: state.currentBranch,
-  },
-).then(res => res.json())
-.then((data) => {
-  const branchName = data.name;
-  const url = location.href.replace(state.currentBranch, branchName);
-
-  pushState(url);
-
-  commit(types.SET_CURRENT_BRANCH, branchName);
-});
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
deleted file mode 100644
index 7c251e26bed..00000000000
--- a/app/assets/javascripts/repo/stores/actions/tree.js
+++ /dev/null
@@ -1,163 +0,0 @@
-import { visitUrl } from '../../../lib/utils/url_utility';
-import { normalizeHeaders } from '../../../lib/utils/common_utils';
-import flash from '../../../flash';
-import service from '../../services';
-import * as types from '../mutation_types';
-import {
-  pushState,
-  setPageTitle,
-  findEntry,
-  createTemp,
-  createOrMergeEntry,
-} from '../utils';
-
-export const getTreeData = (
-  { commit, state, dispatch },
-  { endpoint = state.endpoints.rootEndpoint, tree = state } = {},
-) => {
-  commit(types.TOGGLE_LOADING, tree);
-
-  service.getTreeData(endpoint)
-    .then((res) => {
-      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
-
-      setPageTitle(pageTitle);
-
-      return res.json();
-    })
-    .then((data) => {
-      const prevLastCommitPath = tree.lastCommitPath;
-      if (!state.isInitialRoot) {
-        commit(types.SET_ROOT, data.path === '/');
-      }
-
-      dispatch('updateDirectoryData', { data, tree });
-      commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
-      commit(types.SET_LAST_COMMIT_URL, { tree, url: data.last_commit_path });
-      commit(types.TOGGLE_LOADING, tree);
-
-      if (prevLastCommitPath !== null) {
-        dispatch('getLastCommitData', tree);
-      }
-
-      pushState(endpoint);
-    })
-    .catch(() => {
-      flash('Error loading tree data. Please try again.');
-      commit(types.TOGGLE_LOADING, tree);
-    });
-};
-
-export const toggleTreeOpen = ({ commit, dispatch }, { endpoint, tree }) => {
-  if (tree.opened) {
-    // send empty data to clear the tree
-    const data = { trees: [], blobs: [], submodules: [] };
-
-    pushState(tree.parentTreeUrl);
-
-    commit(types.SET_PREVIOUS_URL, tree.parentTreeUrl);
-    dispatch('updateDirectoryData', { data, tree });
-  } else {
-    commit(types.SET_PREVIOUS_URL, endpoint);
-    dispatch('getTreeData', { endpoint, tree });
-  }
-
-  commit(types.TOGGLE_TREE_OPEN, tree);
-};
-
-export const clickedTreeRow = ({ commit, dispatch }, row) => {
-  if (row.type === 'tree') {
-    dispatch('toggleTreeOpen', {
-      endpoint: row.url,
-      tree: row,
-    });
-  } else if (row.type === 'submodule') {
-    commit(types.TOGGLE_LOADING, row);
-
-    visitUrl(row.url);
-  } else if (row.type === 'blob' && row.opened) {
-    dispatch('setFileActive', row);
-  } else {
-    dispatch('getFileData', row);
-  }
-};
-
-export const createTempTree = ({ state, commit, dispatch }, name) => {
-  let tree = state;
-  const dirNames = name.replace(new RegExp(`^${state.path}/`), '').split('/');
-
-  dirNames.forEach((dirName) => {
-    const foundEntry = findEntry(tree, 'tree', dirName);
-
-    if (!foundEntry) {
-      const tmpEntry = createTemp({
-        name: dirName,
-        path: tree.path,
-        type: 'tree',
-        level: tree.level !== undefined ? tree.level + 1 : 0,
-      });
-
-      commit(types.CREATE_TMP_TREE, {
-        parent: tree,
-        tmpEntry,
-      });
-      commit(types.TOGGLE_TREE_OPEN, tmpEntry);
-
-      tree = tmpEntry;
-    } else {
-      tree = foundEntry;
-    }
-  });
-
-  if (tree.tempFile) {
-    dispatch('createTempFile', {
-      tree,
-      name: '.gitkeep',
-    });
-  }
-};
-
-export const getLastCommitData = ({ state, commit, dispatch, getters }, tree = state) => {
-  if (tree.lastCommitPath === null || getters.isCollapsed) return;
-
-  service.getTreeLastCommit(tree.lastCommitPath)
-    .then((res) => {
-      const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null;
-
-      commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath });
-
-      return res.json();
-    })
-    .then((data) => {
-      data.forEach((lastCommit) => {
-        const entry = findEntry(tree, lastCommit.type, lastCommit.file_name);
-
-        if (entry) {
-          commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit });
-        }
-      });
-
-      dispatch('getLastCommitData', tree);
-    })
-    .catch(() => flash('Error fetching log data.'));
-};
-
-export const updateDirectoryData = ({ commit, state }, { data, tree }) => {
-  const level = tree.level !== undefined ? tree.level + 1 : 0;
-  const parentTreeUrl = data.parent_tree_url ? `${data.parent_tree_url}${data.path}` : state.endpoints.rootUrl;
-  const createEntry = (entry, type) => createOrMergeEntry({
-    tree,
-    entry,
-    level,
-    type,
-    parentTreeUrl,
-  });
-
-  const formattedData = [
-    ...data.trees.map(t => createEntry(t, 'tree')),
-    ...data.submodules.map(m => createEntry(m, 'submodule')),
-    ...data.blobs.map(b => createEntry(b, 'blob')),
-  ];
-
-  commit(types.SET_DIRECTORY_DATA, { tree, data: formattedData });
-};
diff --git a/app/assets/javascripts/repo/stores/getters.js b/app/assets/javascripts/repo/stores/getters.js
deleted file mode 100644
index 5ce9f449905..00000000000
--- a/app/assets/javascripts/repo/stores/getters.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import _ from 'underscore';
-
-/*
-  Takes the multi-dimensional tree and returns a flattened array.
-  This allows for the table to recursively render the table rows but keeps the data
-  structure nested to make it easier to add new files/directories.
-*/
-export const treeList = (state) => {
-  const mapTree = arr => (!arr.tree.length ? [] : _.map(arr.tree, a => [a, mapTree(a)]));
-
-  return _.chain(state.tree)
-    .map(arr => [arr, mapTree(arr)])
-    .flatten()
-    .value();
-};
-
-export const changedFiles = state => state.openFiles.filter(file => file.changed);
-
-export const activeFile = state => state.openFiles.find(file => file.active);
-
-export const activeFileExtension = (state) => {
-  const file = activeFile(state);
-  return file ? `.${file.path.split('.').pop()}` : '';
-};
-
-export const isCollapsed = state => !!state.openFiles.length;
-
-export const canEditFile = (state) => {
-  const currentActiveFile = activeFile(state);
-  const openedFiles = state.openFiles;
-
-  return state.canCommit &&
-    state.onTopOfBranch &&
-    openedFiles.length &&
-    (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
-};
-
-export const addedFiles = state => changedFiles(state).filter(f => f.tempFile);
-
-export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile);
diff --git a/app/assets/javascripts/repo/stores/mutations/branch.js b/app/assets/javascripts/repo/stores/mutations/branch.js
deleted file mode 100644
index d8229e8a620..00000000000
--- a/app/assets/javascripts/repo/stores/mutations/branch.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import * as types from '../mutation_types';
-
-export default {
-  [types.SET_CURRENT_BRANCH](state, currentBranch) {
-    Object.assign(state, {
-      currentBranch,
-    });
-  },
-};
diff --git a/app/assets/javascripts/vue_shared/components/project_avatar/image.vue b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
new file mode 100644
index 00000000000..dce23bd65f6
--- /dev/null
+++ b/app/assets/javascripts/vue_shared/components/project_avatar/image.vue
@@ -0,0 +1,103 @@
+<script>
+
+/* This is a re-usable vue component for rendering a project avatar that
+  does not need to link to the project's profile. The image and an optional
+  tooltip can be configured by props passed to this component.
+
+  Sample configuration:
+
+  <project-avatar-image
+    :lazy="true"
+    :img-src="projectAvatarSrc"
+    :img-alt="tooltipText"
+    :tooltip-text="tooltipText"
+    tooltip-placement="top"
+  />
+
+*/
+
+import defaultAvatarUrl from 'images/no_avatar.png';
+import { placeholderImage } from '../../../lazy_loader';
+import tooltip from '../../directives/tooltip';
+
+export default {
+  name: 'ProjectAvatarImage',
+  props: {
+    lazy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    imgSrc: {
+      type: String,
+      required: false,
+      default: defaultAvatarUrl,
+    },
+    cssClasses: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    imgAlt: {
+      type: String,
+      required: false,
+      default: 'project avatar',
+    },
+    size: {
+      type: Number,
+      required: false,
+      default: 20,
+    },
+    tooltipText: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    tooltipPlacement: {
+      type: String,
+      required: false,
+      default: 'top',
+    },
+  },
+  directives: {
+    tooltip,
+  },
+  computed: {
+    // API response sends null when gravatar is disabled and
+    // we provide an empty string when we use it inside project avatar link.
+    // In both cases we should render the defaultAvatarUrl
+    sanitizedSource() {
+      return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
+    },
+    resultantSrcAttribute() {
+      return this.lazy ? placeholderImage : this.sanitizedSource;
+    },
+    tooltipContainer() {
+      return this.tooltipText ? 'body' : null;
+    },
+    avatarSizeClass() {
+      return `s${this.size}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <img
+    v-tooltip
+    class="avatar"
+    :class="{
+      lazy,
+      [avatarSizeClass]: true,
+      [cssClasses]: true
+    }"
+    :src="resultantSrcAttribute"
+    :width="size"
+    :height="size"
+    :alt="imgAlt"
+    :data-src="sanitizedSource"
+    :data-container="tooltipContainer"
+    :data-placement="tooltipPlacement"
+    :title="tooltipText"
+  />
+</template>
diff --git a/app/assets/stylesheets/framework/contextual-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss
index 2e417315ed7..5da06b90113 100644
--- a/app/assets/stylesheets/framework/contextual-sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual-sidebar.scss
@@ -23,7 +23,6 @@
 .context-header {
   position: relative;
   margin-right: 2px;
-  width: $contextual-sidebar-width;
 
   a {
     transition: padding $sidebar-transition-duration;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index b84d6c140be..1d6c7a5c472 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -219,6 +219,7 @@ $gl-input-padding: 10px;
 $gl-vert-padding: 6px;
 $gl-padding-top: 10px;
 $gl-sidebar-padding: 22px;
+$gl-bar-padding: 3px;
 
 /*
  * Misc
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 6eb92c7baee..da3c2d7fa5d 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -22,9 +22,10 @@
   }
 }
 
-.multi-file {
+.ide-view {
   display: flex;
-  height: calc(100vh - 145px);
+  height: calc(100vh - #{$header-height});
+  color: $almost-black;
   border-top: 1px solid $white-dark;
   border-bottom: 1px solid $white-dark;
 
@@ -35,12 +36,47 @@
   }
 }
 
+.with-performance-bar .ide-view {
+  height: calc(100vh - #{$header-height});
+}
+
 .ide-file-list {
   flex: 1;
-  overflow: scroll;
 
   .file {
     cursor: pointer;
+
+    &.file-open {
+      background: $white-normal;
+    }
+
+    .repo-file-name {
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .unsaved-icon {
+      color: $indigo-700;
+      float: right;
+      font-size: smaller;
+      line-height: 20px;
+    }
+
+    .repo-new-btn {
+      display: none;
+      margin-top: -4px;
+      margin-bottom: -4px;
+    }
+
+    &:hover {
+      .repo-new-btn {
+        display: block;
+      }
+
+      .unsaved-icon {
+        display: none;
+      }
+    }
   }
 
   a {
@@ -55,10 +91,9 @@
 
 .multi-file-table-name,
 .multi-file-table-col-commit-message {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  overflow: visible;
   max-width: 0;
+  padding: 6px 12px;
 }
 
 .multi-file-table-name {
@@ -66,6 +101,7 @@
 }
 
 .multi-file-table-col-commit-message {
+  white-space: nowrap;
   width: 50%;
 }
 
@@ -79,7 +115,7 @@
 
 .multi-file-tabs {
   display: flex;
-  overflow: scroll;
+  overflow-x: auto;
   background-color: $white-normal;
   box-shadow: inset 0 -1px $white-dark;
 
@@ -128,9 +164,38 @@
   height: 0;
 }
 
+.blob-editor-container {
+  flex: 1;
+  height: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  .vertical-center {
+    min-height: auto;
+  }
+}
+
+.multi-file-editor-holder {
+  height: 100%;
+}
+
 .multi-file-editor-btn-group {
-  padding: $grid-size;
+  padding: $gl-bar-padding $gl-padding;
   border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+  background: $white-light;
+}
+
+.ide-status-bar {
+  padding: $gl-bar-padding $gl-padding;
+  background: $white-light;
+  display: flex;
+  justify-content: space-between;
+
+  svg {
+    vertical-align: middle;
+  }
 }
 
 // Not great, but this is to deal with our current output
@@ -138,10 +203,6 @@
   height: 100%;
   overflow: scroll;
 
-  .blob-viewer {
-    height: 100%;
-  }
-
   .file-content.code {
     display: flex;
 
@@ -162,18 +223,101 @@
   }
 }
 
+.file-content.blob-no-preview {
+  a {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
 .multi-file-commit-panel {
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 290px;
-  padding: $gl-padding;
+  padding: 0;
   background-color: $gray-light;
   border-left: 1px solid $white-dark;
 
+  .projects-sidebar {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .multi-file-commit-panel-inner {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+
+  .multi-file-commit-panel-inner-scroll {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    overflow: auto;
+  }
+
   &.is-collapsed {
     width: 60px;
-    padding: 0;
+
+    .multi-file-commit-list {
+      padding-top: $gl-padding;
+      overflow: hidden;
+    }
+
+    .multi-file-context-bar-icon {
+      align-items: center;
+
+      svg {
+        float: none;
+        margin: 0;
+      }
+    }
+  }
+
+  .branch-container {
+    border-left: 4px solid $indigo-700;
+    margin-bottom: $gl-bar-padding;
+  }
+
+  .branch-header {
+    background: $white-dark;
+    display: flex;
+  }
+
+  .branch-header-title {
+    flex: 1;
+    padding: $grid-size $gl-padding;
+    color: $indigo-700;
+    font-weight: $gl-font-weight-bold;
+
+    svg {
+      vertical-align: middle;
+    }
+  }
+
+  .branch-header-btns {
+    padding: $gl-vert-padding $gl-padding;
+  }
+
+  .left-collapse-btn {
+    display: none;
+    background: $gray-light;
+    text-align: left;
+    border-top: 1px solid $white-dark;
+
+    svg {
+      vertical-align: middle;
+    }
+  }
+}
+
+.multi-file-context-bar-icon {
+  padding: 10px;
+
+  svg {
+    margin-right: 10px;
+    float: left;
   }
 }
 
@@ -186,9 +330,9 @@
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
-  padding: 0 0 12px;
   margin-bottom: 12px;
   border-bottom: 1px solid $white-dark;
+  padding: $gl-btn-padding 0;
 
   &.is-collapsed {
     border-bottom: 1px solid $white-dark;
@@ -197,23 +341,33 @@
       margin-left: auto;
       margin-right: auto;
     }
+
+    .multi-file-commit-panel-collapse-btn {
+      margin-right: auto;
+      margin-left: auto;
+      border-left: 0;
+    }
   }
 }
 
-.multi-file-commit-panel-collapse-btn {
-  padding-top: 0;
-  padding-bottom: 0;
-  margin-left: auto;
-  font-size: 20px;
+.multi-file-commit-panel-header-title {
+  display: flex;
+  flex: 1;
+  padding: $gl-btn-padding;
 
-  &.is-collapsed {
-    margin-right: auto;
+  svg {
+    margin-right: $gl-btn-padding;
   }
 }
 
+.multi-file-commit-panel-collapse-btn {
+  border-left: 1px solid $white-dark;
+}
+
 .multi-file-commit-list {
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
+  padding: $gl-padding;
 }
 
 .multi-file-commit-list-item {
@@ -244,7 +398,7 @@
 }
 
 .multi-file-commit-form {
-  padding-top: 12px;
+  padding: $gl-padding;
   border-top: 1px solid $white-dark;
 }
 
@@ -295,3 +449,40 @@
     }
   }
 }
+
+.ide-loading {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.ide-empty-state {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+}
+
+.repo-new-btn {
+  .dropdown-toggle svg {
+    margin-top: -2px;
+    margin-bottom: 2px;
+  }
+
+  .dropdown-menu {
+    left: auto;
+    right: 0;
+
+    label {
+      font-weight: $gl-font-weight-normal;
+      padding: 5px 8px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.ide-flash-container.flash-container {
+  margin-top: $header-height;
+  margin-bottom: 0;
+}
diff --git a/app/controllers/ide_controller.rb b/app/controllers/ide_controller.rb
new file mode 100644
index 00000000000..1ff25a45398
--- /dev/null
+++ b/app/controllers/ide_controller.rb
@@ -0,0 +1,6 @@
+class IdeController < ApplicationController
+  layout 'nav_only'
+
+  def index
+  end
+end
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 4754a67450f..d13407a06c8 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -306,7 +306,7 @@ module ApplicationHelper
     cookies["sidebar_collapsed"] == "true"
   end
 
-  def show_new_repo?
+  def show_new_ide?
     cookies["new_repo"] == "true" && body_data_page != 'projects:show'
   end
 
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 556ed233ccf..3c2ee2cb5bc 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -8,7 +8,7 @@ module BlobHelper
     %w(credits changelog news copying copyright license authors)
   end
 
-  def edit_path(project = @project, ref = @ref, path = @path, options = {})
+  def edit_blob_path(project = @project, ref = @ref, path = @path, options = {})
     project_edit_blob_path(project,
                                      tree_join(ref, path),
                                      options[:link_opts])
@@ -26,10 +26,10 @@ module BlobHelper
       button_tag 'Edit', class: "#{common_classes} disabled has-tooltip", title: "You can only edit files when you are on a branch", data: { container: 'body' }
     # This condition applies to anonymous or users who can edit directly
     elsif !current_user || (current_user && can_modify_blob?(blob, project, ref))
-      link_to 'Edit', edit_path(project, ref, path, options), class: "#{common_classes} btn-sm"
+      link_to 'Edit', edit_blob_path(project, ref, path, options), class: "#{common_classes} btn-sm"
     elsif current_user && can?(current_user, :fork_project, project)
       continue_params = {
-        to: edit_path(project, ref, path, options),
+        to: edit_blob_path(project, ref, path, options),
         notice: edit_in_new_fork_notice,
         notice_now: edit_in_new_fork_notice_now
       }
@@ -41,6 +41,43 @@ module BlobHelper
     end
   end
 
+  def ide_edit_path(project = @project, ref = @ref, path = @path, options = {})
+    "#{ide_path}/project#{edit_blob_path(project, ref, path, options)}"
+  end
+
+  def ide_edit_text
+    "#{_('Multi Edit')} <span class='label label-primary'>#{_('Beta')}</span>".html_safe
+  end
+
+  def ide_blob_link(project = @project, ref = @ref, path = @path, options = {})
+    return unless show_new_ide?
+
+    blob = options.delete(:blob)
+    blob ||= project.repository.blob_at(ref, path) rescue nil
+
+    return unless blob && blob.readable_text?
+
+    common_classes = "btn js-edit-ide #{options[:extra_class]}"
+
+    if !on_top_of_branch?(project, ref)
+      button_tag ide_edit_text, class: "#{common_classes} disabled has-tooltip", title: _('You can only edit files when you are on a branch'), data: { container: 'body' }
+    # This condition applies to anonymous or users who can edit directly
+    elsif current_user && can_modify_blob?(blob, project, ref)
+      link_to ide_edit_text, ide_edit_path(project, ref, path, options), class: "#{common_classes} btn-sm"
+    elsif current_user && can?(current_user, :fork_project, project)
+      continue_params = {
+        to: ide_edit_path(project, ref, path, options),
+        notice: edit_in_new_fork_notice,
+        notice_now: edit_in_new_fork_notice_now
+      }
+      fork_path = project_forks_path(project, namespace_key: current_user.namespace.id, continue: continue_params)
+
+      button_tag ide_edit_text,
+        class: common_classes,
+        data: { fork_path: fork_path }
+    end
+  end
+
   def modify_file_link(project = @project, ref = @ref, path = @path, label:, action:, btn_class:, modal_type:)
     return unless current_user
 
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
new file mode 100644
index 00000000000..8368e7a4563
--- /dev/null
+++ b/app/views/ide/index.html.haml
@@ -0,0 +1,12 @@
+- page_title 'IDE'
+
+- content_for :page_specific_javascripts do
+  = webpack_bundle_tag 'common_vue'
+  = webpack_bundle_tag 'ide'
+
+.ide-flash-container.flash-container
+
+#ide.ide-loading
+  .text-center
+    = icon('spinner spin 2x')
+    %h2.clgray= _('IDE Loading ...')
diff --git a/app/views/layouts/nav_only.html.haml b/app/views/layouts/nav_only.html.haml
new file mode 100644
index 00000000000..6fa4b39dc10
--- /dev/null
+++ b/app/views/layouts/nav_only.html.haml
@@ -0,0 +1,13 @@
+!!! 5
+%html{ lang: I18n.locale, class: page_class }
+  = render "layouts/head"
+  %body{ class: "#{user_application_theme} #{@body_class}", data: { page: body_data_page } }
+    = render 'peek/bar'
+    = render "layouts/header/default"
+    = render 'shared/outdated_browser'
+    .mobile-overlay
+    .alert-wrapper
+      = render "layouts/broadcast"
+      = yield :flash_message
+      = render "layouts/flash"
+    = yield
diff --git a/app/views/projects/_files.html.haml b/app/views/projects/_files.html.haml
index 3a7a99462a6..79530e78154 100644
--- a/app/views/projects/_files.html.haml
+++ b/app/views/projects/_files.html.haml
@@ -7,7 +7,7 @@
   .nav-block
     = render 'projects/tree/tree_header', tree: @tree
 
-  - if !show_new_repo? && commit
+  - if commit
     = render 'shared/commit_well', commit: commit, ref: ref, project: project
 
   = render 'projects/tree/tree_content', tree: @tree, content_url: content_url
diff --git a/app/views/projects/blob/_header.html.haml b/app/views/projects/blob/_header.html.haml
index 281363d2e01..2a77dedd9a2 100644
--- a/app/views/projects/blob/_header.html.haml
+++ b/app/views/projects/blob/_header.html.haml
@@ -12,6 +12,7 @@
 
     .btn-group{ role: "group" }<
       = edit_blob_link
+      = ide_blob_link
       - if current_user
         = replace_blob_link
         = delete_blob_link
diff --git a/app/views/projects/blob/show.html.haml b/app/views/projects/blob/show.html.haml
index c4712bf3736..4d358052d43 100644
--- a/app/views/projects/blob/show.html.haml
+++ b/app/views/projects/blob/show.html.haml
@@ -6,21 +6,14 @@
 - content_for :page_specific_javascripts do
   = webpack_bundle_tag 'blob'
 
-  - if show_new_repo?
-    = webpack_bundle_tag 'common_vue'
-    = webpack_bundle_tag 'repo'
-
 = render 'projects/last_push'
 
 %div{ class: container_class }
-  - if show_new_repo?
-    = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_blob_path(@project, @id)
-  - else
-    #tree-holder.tree-holder
-      = render 'blob', blob: @blob
+  #tree-holder.tree-holder
+    = render 'blob', blob: @blob
 
     - if can_modify_blob?(@blob)
       = render 'projects/blob/remove'
 
-      - title = "Replace #{@blob.name}"
-      = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put
+    - title = "Replace #{@blob.name}"
+    = render 'projects/blob/upload', title: title, placeholder: title, button_title: 'Replace file', form_path: project_update_blob_path(@project, @id), method: :put
diff --git a/app/views/projects/tree/_old_tree_content.html.haml b/app/views/projects/tree/_old_tree_content.html.haml
deleted file mode 100644
index 6ea78851b8d..00000000000
--- a/app/views/projects/tree/_old_tree_content.html.haml
+++ /dev/null
@@ -1,24 +0,0 @@
-.tree-content-holder.js-tree-content{ 'data-logs-path': @logs_path }
-  .table-holder
-    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
-      %thead
-        %tr
-          %th= s_('ProjectFileTree|Name')
-          %th.hidden-xs
-            .pull-left= _('Last commit')
-          %th.text-right= _('Last update')
-      - if @path.present?
-        %tr.tree-item
-          %td.tree-item-file-name
-            = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
-          %td
-          %td.hidden-xs
-
-      = render_tree(tree)
-
-  - if tree.readme
-    = render "projects/tree/readme", readme: tree.readme
-
-- if can_edit_tree?
-  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
-  = render 'projects/blob/new_dir'
diff --git a/app/views/projects/tree/_old_tree_header.html.haml b/app/views/projects/tree/_old_tree_header.html.haml
deleted file mode 100644
index 7f636b7e0e8..00000000000
--- a/app/views/projects/tree/_old_tree_header.html.haml
+++ /dev/null
@@ -1,64 +0,0 @@
-- if on_top_of_branch?
-  - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown' }
-- else
-  - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
-
-%ul.breadcrumb.repo-breadcrumb
-  %li
-    = link_to project_tree_path(@project, @ref) do
-      = @project.path
-  - path_breadcrumbs do |title, path|
-    %li
-      = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
-
-  - if current_user
-    %li
-      %a.btn.add-to-tree{ addtotree_toggle_attributes }
-        = sprite_icon('plus', size: 16, css_class: 'pull-left')
-        = sprite_icon('arrow-down', size: 16, css_class: 'pull-left')
-      - if on_top_of_branch?
-        .add-to-tree-dropdown
-          %ul.dropdown-menu
-            - if can_edit_tree?
-              %li
-                = link_to project_new_blob_path(@project, @id) do
-                  #{ _('New file') }
-              %li
-                = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
-                  #{ _('Upload file') }
-              %li
-                = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
-                  #{ _('New directory') }
-            - elsif can?(current_user, :fork_project, @project)
-              %li
-                - continue_params = { to:         project_new_blob_path(@project, @id),
-                                      notice:     edit_in_new_fork_notice,
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  #{ _('New file') }
-              %li
-                - continue_params = { to:         request.fullpath,
-                                      notice:     edit_in_new_fork_notice + " Try to upload a file again.",
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  #{ _('Upload file') }
-              %li
-                - continue_params = { to:         request.fullpath,
-                                      notice:     edit_in_new_fork_notice + " Try to create a new directory again.",
-                                      notice_now: edit_in_new_fork_notice_now }
-                - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
-                                                                                        continue:       continue_params)
-                = link_to fork_path, method: :post do
-                  #{ _('New directory') }
-
-            %li.divider
-            %li
-              = link_to new_project_branch_path(@project) do
-                #{ _('New branch') }
-            %li
-              = link_to new_project_tag_path(@project) do
-                #{ _('New tag') }
diff --git a/app/views/projects/tree/_tree_content.html.haml b/app/views/projects/tree/_tree_content.html.haml
index a4bdd67209d..6ea78851b8d 100644
--- a/app/views/projects/tree/_tree_content.html.haml
+++ b/app/views/projects/tree/_tree_content.html.haml
@@ -1,5 +1,24 @@
-- content_url = local_assigns.fetch(:content_url, nil)
-- if show_new_repo?
-  = render 'shared/repo/repo', project: @project, content_url: content_url
-- else
-  = render 'projects/tree/old_tree_content', tree: tree
+.tree-content-holder.js-tree-content{ 'data-logs-path': @logs_path }
+  .table-holder
+    %table.table#tree-slider{ class: "table_#{@hex_path} tree-table" }
+      %thead
+        %tr
+          %th= s_('ProjectFileTree|Name')
+          %th.hidden-xs
+            .pull-left= _('Last commit')
+          %th.text-right= _('Last update')
+      - if @path.present?
+        %tr.tree-item
+          %td.tree-item-file-name
+            = link_to "..", project_tree_path(@project, up_dir_path), class: 'prepend-left-10'
+          %td
+          %td.hidden-xs
+
+      = render_tree(tree)
+
+  - if tree.readme
+    = render "projects/tree/readme", readme: tree.readme
+
+- if can_edit_tree?
+  = render 'projects/blob/upload', title: _('Upload New File'), placeholder: _('Upload New File'), button_title: _('Upload file'), form_path: project_create_blob_path(@project, @id), method: :post
+  = render 'projects/blob/new_dir'
diff --git a/app/views/projects/tree/_tree_header.html.haml b/app/views/projects/tree/_tree_header.html.haml
index c02f7ee37ed..d1ecef39475 100644
--- a/app/views/projects/tree/_tree_header.html.haml
+++ b/app/views/projects/tree/_tree_header.html.haml
@@ -2,16 +2,78 @@
   .tree-ref-holder
     = render 'shared/ref_switcher', destination: 'tree', path: @path, show_create: true
 
-  - if show_new_repo? && can_push_branch?(@project, @ref)
-    .js-new-dropdown
-  - else
-    = render 'projects/tree/old_tree_header'
+    - if on_top_of_branch?
+      - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown' }
+    - else
+      - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
+
+  %ul.breadcrumb.repo-breadcrumb
+    %li
+      = link_to project_tree_path(@project, @ref) do
+        = @project.path
+    - path_breadcrumbs do |title, path|
+      %li
+        = link_to truncate(title, length: 40), project_tree_path(@project, tree_join(@ref, path))
+
+    - if current_user
+      %li
+        %a.btn.add-to-tree{ addtotree_toggle_attributes }
+          = sprite_icon('plus', size: 16, css_class: 'pull-left')
+          = sprite_icon('arrow-down', size: 16, css_class: 'pull-left')
+        - if on_top_of_branch?
+          .add-to-tree-dropdown
+            %ul.dropdown-menu
+              - if can_edit_tree?
+                %li
+                  = link_to project_new_blob_path(@project, @id) do
+                    #{ _('New file') }
+                %li
+                  = link_to '#modal-upload-blob', { 'data-target' => '#modal-upload-blob', 'data-toggle' => 'modal' } do
+                    #{ _('Upload file') }
+                %li
+                  = link_to '#modal-create-new-dir', { 'data-target' => '#modal-create-new-dir', 'data-toggle' => 'modal' } do
+                    #{ _('New directory') }
+              - elsif can?(current_user, :fork_project, @project)
+                %li
+                  - continue_params = { to:         project_new_blob_path(@project, @id),
+                                        notice:     edit_in_new_fork_notice,
+                                        notice_now: edit_in_new_fork_notice_now }
+                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                          continue:       continue_params)
+                  = link_to fork_path, method: :post do
+                    #{ _('New file') }
+                %li
+                  - continue_params = { to:         request.fullpath,
+                                        notice:     edit_in_new_fork_notice + " Try to upload a file again.",
+                                        notice_now: edit_in_new_fork_notice_now }
+                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                          continue:       continue_params)
+                  = link_to fork_path, method: :post do
+                    #{ _('Upload file') }
+                %li
+                  - continue_params = { to:         request.fullpath,
+                                        notice:     edit_in_new_fork_notice + " Try to create a new directory again.",
+                                        notice_now: edit_in_new_fork_notice_now }
+                  - fork_path = project_forks_path(@project, namespace_key:  current_user.namespace.id,
+                                                                                          continue:       continue_params)
+                  = link_to fork_path, method: :post do
+                    #{ _('New directory') }
+
+              %li.divider
+              %li
+                = link_to new_project_branch_path(@project) do
+                  #{ _('New branch') }
+              %li
+                = link_to new_project_tag_path(@project) do
+                  #{ _('New tag') }
 
 .tree-controls
-  - if show_new_repo?
-    .editable-mode
-  - else
-    = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
+  - if show_new_ide?
+    = succeed " " do
+      = link_to ide_edit_path(@project, @id), class: 'btn btn-default' do
+        = ide_edit_text
+
+  = link_to s_('Commits|History'), project_commits_path(@project, @id), class: 'btn'
 
   = render 'projects/find_file_link'
 
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 64cc70053ef..3b4057e56d0 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -6,11 +6,6 @@
 = content_for :meta_tags do
   = auto_discovery_link_tag(:atom, project_commits_url(@project, @ref, rss_url_options), title: "#{@project.name}:#{@ref} commits")
 
-- if show_new_repo?
-  - content_for :page_specific_javascripts do
-    = webpack_bundle_tag 'common_vue'
-    = webpack_bundle_tag 'repo'
-
-%div{ class: [(container_class unless show_new_repo?), ("limit-container-width" unless fluid_layout)] }
+%div{ class: [(container_class), ("limit-container-width" unless fluid_layout)] }
   = render 'projects/last_push'
   = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
diff --git a/app/views/shared/_ref_switcher.html.haml b/app/views/shared/_ref_switcher.html.haml
index f4a4bfaec54..479bd2cdb38 100644
--- a/app/views/shared/_ref_switcher.html.haml
+++ b/app/views/shared/_ref_switcher.html.haml
@@ -1,6 +1,6 @@
 - show_create = local_assigns.fetch(:show_create, false)
 
-- show_new_branch_form = show_new_repo? && show_create && can?(current_user, :push_code, @project)
+- show_new_branch_form = show_new_ide? && show_create && can?(current_user, :push_code, @project)
 - dropdown_toggle_text = @ref || @project.default_branch
 = form_tag switch_project_refs_path(@project), method: :get, class: "project-refs-form" do
   = hidden_field_tag :destination, destination
diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml
deleted file mode 100644
index 87e8c416194..00000000000
--- a/app/views/shared/repo/_repo.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-- @no_container = true;
-#repo{ data: { root: @path.empty?.to_s,
-               root_url: project_tree_path(project),
-               url: content_url,
-               current_branch: @ref,
-               ref: @commit.id,
-               project_name: project.name,
-               project_url: project_path(project),
-               project_id: project.id,
-               new_merge_request_url: namespace_project_new_merge_request_path(project.namespace, project, merge_request: { source_branch: '' }),
-               can_commit: (!!can_push_branch?(project, @ref)).to_s,
-               on_top_of_branch: (!!on_top_of_branch?(project, @ref)).to_s,
-               current_path: @path } }
diff --git a/changelogs/unreleased/40040-decouple-multi-file-editor-from-file-list.yml b/changelogs/unreleased/40040-decouple-multi-file-editor-from-file-list.yml
new file mode 100644
index 00000000000..e2fade2bfd9
--- /dev/null
+++ b/changelogs/unreleased/40040-decouple-multi-file-editor-from-file-list.yml
@@ -0,0 +1,5 @@
+---
+title: Adds the multi file editor as a new beta feature
+merge_request: 15430
+author: 
+type: feature
diff --git a/config/routes.rb b/config/routes.rb
index 016140e0ede..f162043dd5e 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -43,6 +43,8 @@ Rails.application.routes.draw do
     get 'liveness' => 'health#liveness'
     get 'readiness' => 'health#readiness'
     post 'storage_check' => 'health#storage_check'
+    get 'ide' => 'ide#index'
+    get 'ide/*vueroute' => 'ide#index', format: false
     resources :metrics, only: [:index]
     mount Peek::Railtie => '/peek'
 
diff --git a/config/webpack.config.js b/config/webpack.config.js
index d8797bbf4d3..6daef243991 100644
--- a/config/webpack.config.js
+++ b/config/webpack.config.js
@@ -70,7 +70,7 @@ var config = {
     protected_branches:   './protected_branches',
     protected_tags:       './protected_tags',
     registry_list:        './registry/index.js',
-    repo:                 './repo/index.js',
+    ide:                 './ide/index.js',
     sidebar:              './sidebar/sidebar_bundle.js',
     schedule_form:        './pipeline_schedules/pipeline_schedule_form_bundle.js',
     schedules_index:      './pipeline_schedules/pipeline_schedules_index_bundle.js',
@@ -204,7 +204,7 @@ var config = {
         'pipelines',
         'pipelines_details',
         'registry_list',
-        'repo',
+        'ide',
         'schedule_form',
         'schedules_index',
         'sidebar',
diff --git a/package.json b/package.json
index a5bf2309a0f..aa4e4e79f49 100644
--- a/package.json
+++ b/package.json
@@ -79,6 +79,7 @@
     "vue": "^2.5.8",
     "vue-loader": "^13.5.0",
     "vue-resource": "^1.3.4",
+    "vue-router": "^3.0.1",
     "vue-template-compiler": "^2.5.8",
     "vuex": "^3.0.1",
     "webpack": "^3.5.5",
diff --git a/spec/features/projects/ref_switcher_spec.rb b/spec/features/projects/ref_switcher_spec.rb
deleted file mode 100644
index 33ccbc1a29f..00000000000
--- a/spec/features/projects/ref_switcher_spec.rb
+++ /dev/null
@@ -1,78 +0,0 @@
-require 'rails_helper'
-
-feature 'Ref switcher', :js do
-  let(:user)      { create(:user) }
-  let(:project)   { create(:project, :public, :repository) }
-
-  before do
-    project.team << [user, :master]
-    set_cookie('new_repo', 'true')
-    sign_in(user)
-    visit project_tree_path(project, 'master')
-  end
-
-  it 'allow user to change ref by enter key' do
-    click_button 'master'
-    wait_for_requests
-
-    page.within '.project-refs-form' do
-      input = find('input[type="search"]')
-      input.set 'binary'
-      wait_for_requests
-
-      expect(find('.dropdown-content ul')).to have_selector('li', count: 7)
-
-      page.within '.dropdown-content ul' do
-        input.native.send_keys :enter
-      end
-    end
-
-    expect(page).to have_title 'add-pdf-text-binary'
-  end
-
-  it "user selects ref with special characters" do
-    click_button 'master'
-    wait_for_requests
-
-    page.within '.project-refs-form' do
-      page.fill_in 'Search branches and tags', with: "'test'"
-      click_link "'test'"
-    end
-
-    expect(page).to have_title "'test'"
-  end
-
-  context "create branch" do
-    let(:input) { find('.js-new-branch-name') }
-
-    before do
-      click_button 'master'
-      wait_for_requests
-
-      page.within '.project-refs-form' do
-        find(".dropdown-footer-list a").click
-      end
-    end
-
-    it "shows error message for the invalid branch name" do
-      input.set 'foo bar'
-      click_button('Create')
-      wait_for_requests
-      expect(page).to have_content 'Branch name is invalid'
-    end
-
-    it "should create new branch properly" do
-      input.set 'new-branch-name'
-      click_button('Create')
-      wait_for_requests
-      expect(find('.js-project-refs-dropdown')).to have_content 'new-branch-name'
-    end
-
-    it "should create new branch by Enter key" do
-      input.set 'new-branch-name-2'
-      input.native.send_keys :enter
-      wait_for_requests
-      expect(find('.js-project-refs-dropdown')).to have_content 'new-branch-name-2'
-    end
-  end
-end
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
index 8f06328962e..3f6d16c8acf 100644
--- a/spec/features/projects/tree/create_directory_spec.rb
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -13,6 +13,14 @@ feature 'Multi-file editor new directory', :js do
     visit project_tree_path(project, :master)
 
     wait_for_requests
+
+    click_link('Multi Edit')
+
+    wait_for_requests
+  end
+
+  after do
+    set_cookie('new_repo', 'false')
   end
 
   it 'creates directory in current directory' do
@@ -21,17 +29,29 @@ feature 'Multi-file editor new directory', :js do
     click_link('New directory')
 
     page.within('.modal') do
-      find('.form-control').set('foldername')
+      find('.form-control').set('folder name')
 
       click_button('Create directory')
     end
 
+    find('.add-to-tree').click
+
+    click_link('New file')
+
+    page.within('.modal-dialog') do
+      find('.form-control').set('file name')
+
+      click_button('Create file')
+    end
+
+    wait_for_requests
+
     find('.multi-file-commit-panel-collapse-btn').click
 
-    fill_in('commit-message', with: 'commit message')
+    fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')
 
-    expect(page).to have_selector('td', text: 'commit message')
+    expect(page).to have_content('folder name')
   end
 end
diff --git a/spec/features/projects/tree/create_file_spec.rb b/spec/features/projects/tree/create_file_spec.rb
index bdebc12ef47..ba71eef07f4 100644
--- a/spec/features/projects/tree/create_file_spec.rb
+++ b/spec/features/projects/tree/create_file_spec.rb
@@ -13,6 +13,14 @@ feature 'Multi-file editor new file', :js do
     visit project_tree_path(project, :master)
 
     wait_for_requests
+
+    click_link('Multi Edit')
+
+    wait_for_requests
+  end
+
+  after do
+    set_cookie('new_repo', 'false')
   end
 
   it 'creates file in current directory' do
@@ -21,17 +29,19 @@ feature 'Multi-file editor new file', :js do
     click_link('New file')
 
     page.within('.modal') do
-      find('.form-control').set('filename')
+      find('.form-control').set('file name')
 
       click_button('Create file')
     end
 
+    wait_for_requests
+
     find('.multi-file-commit-panel-collapse-btn').click
 
-    fill_in('commit-message', with: 'commit message')
+    fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')
 
-    expect(page).to have_selector('td', text: 'commit message')
+    expect(page).to have_content('file name')
   end
 end
diff --git a/spec/features/projects/tree/upload_file_spec.rb b/spec/features/projects/tree/upload_file_spec.rb
index d4e57d1ecfa..9fbb1dbd0e8 100644
--- a/spec/features/projects/tree/upload_file_spec.rb
+++ b/spec/features/projects/tree/upload_file_spec.rb
@@ -15,6 +15,14 @@ feature 'Multi-file editor upload file', :js do
     visit project_tree_path(project, :master)
 
     wait_for_requests
+
+    click_link('Multi Edit')
+
+    wait_for_requests
+  end
+
+  after do
+    set_cookie('new_repo', 'false')
   end
 
   it 'uploads text file' do
@@ -41,6 +49,5 @@ feature 'Multi-file editor upload file', :js do
 
     expect(page).to have_selector('.multi-file-tab', text: 'dk.png')
     expect(page).not_to have_selector('.monaco-editor')
-    expect(page).to have_content('The source could not be displayed for this temporary file.')
   end
 end
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', () => {
diff --git a/spec/javascripts/repo/helpers.js b/spec/javascripts/repo/helpers.js
index 820a44992b4..ac43d221198 100644
--- a/spec/javascripts/repo/helpers.js
+++ b/spec/javascripts/repo/helpers.js
@@ -1,5 +1,5 @@
-import { decorateData } from '~/repo/stores/utils';
-import state from '~/repo/stores/state';
+import { decorateData } from '~/ide/stores/utils';
+import state from '~/ide/stores/state';
 
 export const resetStore = (store) => {
   store.replaceState(state());
@@ -12,4 +12,5 @@ export const file = (name = 'name', id = name, type = '') => decorateData({
   url: 'url',
   name,
   path: name,
+  lastCommit: {},
 });
diff --git a/spec/javascripts/repo/lib/common/disposable_spec.js b/spec/javascripts/repo/lib/common/disposable_spec.js
index 62c3913bf4d..af12ca15369 100644
--- a/spec/javascripts/repo/lib/common/disposable_spec.js
+++ b/spec/javascripts/repo/lib/common/disposable_spec.js
@@ -1,4 +1,4 @@
-import Disposable from '~/repo/lib/common/disposable';
+import Disposable from '~/ide/lib/common/disposable';
 
 describe('Multi-file editor library disposable class', () => {
   let instance;
diff --git a/spec/javascripts/repo/lib/common/model_manager_spec.js b/spec/javascripts/repo/lib/common/model_manager_spec.js
index 8c134f178c0..563c2e33834 100644
--- a/spec/javascripts/repo/lib/common/model_manager_spec.js
+++ b/spec/javascripts/repo/lib/common/model_manager_spec.js
@@ -1,6 +1,6 @@
 /* global monaco */
-import monacoLoader from '~/repo/monaco_loader';
-import ModelManager from '~/repo/lib/common/model_manager';
+import monacoLoader from '~/ide/monaco_loader';
+import ModelManager from '~/ide/lib/common/model_manager';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library model manager', () => {
diff --git a/spec/javascripts/repo/lib/common/model_spec.js b/spec/javascripts/repo/lib/common/model_spec.js
index d41ade237ca..878a4a3f3fe 100644
--- a/spec/javascripts/repo/lib/common/model_spec.js
+++ b/spec/javascripts/repo/lib/common/model_spec.js
@@ -1,6 +1,6 @@
 /* global monaco */
-import monacoLoader from '~/repo/monaco_loader';
-import Model from '~/repo/lib/common/model';
+import monacoLoader from '~/ide/monaco_loader';
+import Model from '~/ide/lib/common/model';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library model', () => {
diff --git a/spec/javascripts/repo/lib/decorations/controller_spec.js b/spec/javascripts/repo/lib/decorations/controller_spec.js
index 2e32e8fa0bd..fea12d74dca 100644
--- a/spec/javascripts/repo/lib/decorations/controller_spec.js
+++ b/spec/javascripts/repo/lib/decorations/controller_spec.js
@@ -1,8 +1,8 @@
 /* global monaco */
-import monacoLoader from '~/repo/monaco_loader';
-import editor from '~/repo/lib/editor';
-import DecorationsController from '~/repo/lib/decorations/controller';
-import Model from '~/repo/lib/common/model';
+import monacoLoader from '~/ide/monaco_loader';
+import editor from '~/ide/lib/editor';
+import DecorationsController from '~/ide/lib/decorations/controller';
+import Model from '~/ide/lib/common/model';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library decorations controller', () => {
diff --git a/spec/javascripts/repo/lib/diff/controller_spec.js b/spec/javascripts/repo/lib/diff/controller_spec.js
index ed62e28d3a3..1d55c165260 100644
--- a/spec/javascripts/repo/lib/diff/controller_spec.js
+++ b/spec/javascripts/repo/lib/diff/controller_spec.js
@@ -1,10 +1,10 @@
 /* global monaco */
-import monacoLoader from '~/repo/monaco_loader';
-import editor from '~/repo/lib/editor';
-import ModelManager from '~/repo/lib/common/model_manager';
-import DecorationsController from '~/repo/lib/decorations/controller';
-import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/repo/lib/diff/controller';
-import { computeDiff } from '~/repo/lib/diff/diff';
+import monacoLoader from '~/ide/monaco_loader';
+import editor from '~/ide/lib/editor';
+import ModelManager from '~/ide/lib/common/model_manager';
+import DecorationsController from '~/ide/lib/decorations/controller';
+import DirtyDiffController, { getDiffChangeType, getDecorator } from '~/ide/lib/diff/controller';
+import { computeDiff } from '~/ide/lib/diff/diff';
 import { file } from '../../helpers';
 
 describe('Multi-file editor library dirty diff controller', () => {
diff --git a/spec/javascripts/repo/lib/diff/diff_spec.js b/spec/javascripts/repo/lib/diff/diff_spec.js
index 3269ec5d2c9..57f3ac3d365 100644
--- a/spec/javascripts/repo/lib/diff/diff_spec.js
+++ b/spec/javascripts/repo/lib/diff/diff_spec.js
@@ -1,4 +1,4 @@
-import { computeDiff } from '~/repo/lib/diff/diff';
+import { computeDiff } from '~/ide/lib/diff/diff';
 
 describe('Multi-file editor library diff calculator', () => {
   describe('computeDiff', () => {
diff --git a/spec/javascripts/repo/lib/editor_options_spec.js b/spec/javascripts/repo/lib/editor_options_spec.js
index b4887d063ed..edbf5450dce 100644
--- a/spec/javascripts/repo/lib/editor_options_spec.js
+++ b/spec/javascripts/repo/lib/editor_options_spec.js
@@ -1,4 +1,4 @@
-import editorOptions from '~/repo/lib/editor_options';
+import editorOptions from '~/ide/lib/editor_options';
 
 describe('Multi-file editor library editor options', () => {
   it('returns an array', () => {
diff --git a/spec/javascripts/repo/lib/editor_spec.js b/spec/javascripts/repo/lib/editor_spec.js
index cd32832a232..8d51d48a782 100644
--- a/spec/javascripts/repo/lib/editor_spec.js
+++ b/spec/javascripts/repo/lib/editor_spec.js
@@ -1,6 +1,6 @@
 /* global monaco */
-import monacoLoader from '~/repo/monaco_loader';
-import editor from '~/repo/lib/editor';
+import monacoLoader from '~/ide/monaco_loader';
+import editor from '~/ide/lib/editor';
 import { file } from '../helpers';
 
 describe('Multi-file editor library', () => {
diff --git a/spec/javascripts/repo/monaco_loader_spec.js b/spec/javascripts/repo/monaco_loader_spec.js
index 887a80160fc..b8ac36972aa 100644
--- a/spec/javascripts/repo/monaco_loader_spec.js
+++ b/spec/javascripts/repo/monaco_loader_spec.js
@@ -1,5 +1,5 @@
 import monacoContext from 'monaco-editor/dev/vs/loader';
-import monacoLoader from '~/repo/monaco_loader';
+import monacoLoader from '~/ide/monaco_loader';
 
 describe('MonacoLoader', () => {
   it('calls require.config and exports require', () => {
diff --git a/spec/javascripts/repo/stores/actions/branch_spec.js b/spec/javascripts/repo/stores/actions/branch_spec.js
index af9d6835a67..00d16fd790d 100644
--- a/spec/javascripts/repo/stores/actions/branch_spec.js
+++ b/spec/javascripts/repo/stores/actions/branch_spec.js
@@ -1,5 +1,5 @@
-import store from '~/repo/stores';
-import service from '~/repo/services';
+import store from '~/ide/stores';
+import service from '~/ide/services';
 import { resetStore } from '../../helpers';
 
 describe('Multi-file store branch actions', () => {
@@ -16,19 +16,25 @@ describe('Multi-file store branch actions', () => {
       }));
       spyOn(history, 'pushState');
 
-      store.state.project.id = 2;
-      store.state.currentBranch = 'testing';
+      store.state.currentProjectId = 'abcproject';
+      store.state.currentBranchId = 'testing';
+      store.state.projects.abcproject = {
+        branches: {
+          master: {
+            workingReference: '1',
+          },
+        },
+      };
     });
 
     it('creates new branch', (done) => {
       store.dispatch('createNewBranch', 'master')
         .then(() => {
-          expect(store.state.currentBranch).toBe('testing');
-          expect(service.createBranch).toHaveBeenCalledWith(2, {
+          expect(store.state.currentBranchId).toBe('testing');
+          expect(service.createBranch).toHaveBeenCalledWith('abcproject', {
             branch: 'master',
             ref: 'testing',
           });
-          expect(history.pushState).toHaveBeenCalled();
 
           done();
         })
diff --git a/spec/javascripts/repo/stores/actions/file_spec.js b/spec/javascripts/repo/stores/actions/file_spec.js
index 099c0556e71..8ce01d3bf12 100644
--- a/spec/javascripts/repo/stores/actions/file_spec.js
+++ b/spec/javascripts/repo/stores/actions/file_spec.js
@@ -1,6 +1,6 @@
 import Vue from 'vue';
-import store from '~/repo/stores';
-import service from '~/repo/services';
+import store from '~/ide/stores';
+import service from '~/ide/services';
 import { file, resetStore } from '../../helpers';
 
 describe('Multi-file store file actions', () => {
@@ -24,8 +24,6 @@ describe('Multi-file store file actions', () => {
       localFile.parentTreeUrl = 'parentTreeUrl';
 
       store.state.openFiles.push(localFile);
-
-      spyOn(history, 'pushState');
     });
 
     afterEach(() => {
@@ -82,15 +80,6 @@ describe('Multi-file store file actions', () => {
         }).catch(done.fail);
     });
 
-    it('calls pushState when no open files are left', (done) => {
-      store.dispatch('closeFile', { file: localFile })
-        .then(() => {
-          expect(history.pushState).toHaveBeenCalledWith(jasmine.anything(), '', 'parentTreeUrl');
-
-          done();
-        }).catch(done.fail);
-    });
-
     it('sets next file as active', (done) => {
       const f = file();
       store.state.openFiles.push(f);
@@ -322,8 +311,26 @@ describe('Multi-file store file actions', () => {
   });
 
   describe('createTempFile', () => {
+    let projectTree;
+
     beforeEach(() => {
       document.body.innerHTML += '<div class="flash-container"></div>';
+
+      store.state.currentProjectId = 'abcproject';
+      store.state.currentBranchId = 'master';
+      store.state.projects.abcproject = {
+        branches: {
+          master: {
+            workingReference: '1',
+          },
+        },
+      };
+
+      store.state.trees['abcproject/mybranch'] = {
+        tree: [],
+      };
+
+      projectTree = store.state.trees['abcproject/mybranch'];
     });
 
     afterEach(() => {
@@ -332,11 +339,13 @@ describe('Multi-file store file actions', () => {
 
     it('creates temp file', (done) => {
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then((f) => {
         expect(f.tempFile).toBeTruthy();
-        expect(store.state.tree.length).toBe(1);
+        expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
 
         done();
       }).catch(done.fail);
@@ -344,8 +353,10 @@ describe('Multi-file store file actions', () => {
 
     it('adds tmp file to open files', (done) => {
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then((f) => {
         expect(store.state.openFiles.length).toBe(1);
         expect(store.state.openFiles[0].name).toBe(f.name);
@@ -356,8 +367,10 @@ describe('Multi-file store file actions', () => {
 
     it('sets tmp file as active', (done) => {
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then((f) => {
         expect(f.active).toBeTruthy();
 
@@ -367,8 +380,10 @@ describe('Multi-file store file actions', () => {
 
     it('enters edit mode if file is not base64', (done) => {
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then(() => {
         expect(store.state.editMode).toBeTruthy();
 
@@ -376,24 +391,14 @@ describe('Multi-file store file actions', () => {
       }).catch(done.fail);
     });
 
-    it('does not enter edit mode if file is base64', (done) => {
-      store.dispatch('createTempFile', {
-        tree: store.state,
-        name: 'test',
-        base64: true,
-      }).then(() => {
-        expect(store.state.editMode).toBeFalsy();
-
-        done();
-      }).catch(done.fail);
-    });
-
     it('creates flash message is file already exists', (done) => {
-      store.state.tree.push(file('test', '1', 'blob'));
+      store.state.trees['abcproject/mybranch'].tree.push(file('test', '1', 'blob'));
 
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then(() => {
         expect(document.querySelector('.flash-alert')).not.toBeNull();
 
@@ -402,11 +407,13 @@ describe('Multi-file store file actions', () => {
     });
 
     it('increases level of file', (done) => {
-      store.state.level = 1;
+      store.state.trees['abcproject/mybranch'].level = 1;
 
       store.dispatch('createTempFile', {
-        tree: store.state,
         name: 'test',
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
       }).then((f) => {
         expect(f.level).toBe(2);
 
diff --git a/spec/javascripts/repo/stores/actions/tree_spec.js b/spec/javascripts/repo/stores/actions/tree_spec.js
index 2bbc49d5a9f..65351dbb7d9 100644
--- a/spec/javascripts/repo/stores/actions/tree_spec.js
+++ b/spec/javascripts/repo/stores/actions/tree_spec.js
@@ -1,10 +1,30 @@
 import Vue from 'vue';
-import * as urlUtils from '~/lib/utils/url_utility';
-import store from '~/repo/stores';
-import service from '~/repo/services';
+import store from '~/ide/stores';
+import service from '~/ide/services';
 import { file, resetStore } from '../../helpers';
 
 describe('Multi-file store tree actions', () => {
+  let projectTree;
+
+  const basicCallParameters = {
+    endpoint: 'rootEndpoint',
+    projectId: 'abcproject',
+    branch: 'master',
+  };
+
+  beforeEach(() => {
+    store.state.currentProjectId = 'abcproject';
+    store.state.currentBranchId = 'master';
+    store.state.projects.abcproject = {
+      web_url: '',
+      branches: {
+        master: {
+          workingReference: '1',
+        },
+      },
+    };
+  });
+
   afterEach(() => {
     resetStore(store);
   });
@@ -24,38 +44,32 @@ describe('Multi-file store tree actions', () => {
           submodules: [{ name: 'submodule' }],
         }),
       }));
-      spyOn(history, 'pushState');
-
-      Object.assign(store.state.endpoints, {
-        rootEndpoint: 'rootEndpoint',
-      });
     });
 
     it('calls service getTreeData', (done) => {
-      store.dispatch('getTreeData')
-        .then(() => {
-          expect(service.getTreeData).toHaveBeenCalledWith('rootEndpoint');
+      store.dispatch('getTreeData', basicCallParameters)
+      .then(() => {
+        expect(service.getTreeData).toHaveBeenCalledWith('rootEndpoint');
 
-          done();
-        }).catch(done.fail);
+        done();
+      }).catch(done.fail);
     });
 
     it('adds data into tree', (done) => {
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
-          expect(store.state.tree.length).toBe(3);
-          expect(store.state.tree[0].type).toBe('tree');
-          expect(store.state.tree[1].type).toBe('submodule');
-          expect(store.state.tree[2].type).toBe('blob');
+          projectTree = store.state.trees['abcproject/master'];
+          expect(projectTree.tree.length).toBe(3);
+          expect(projectTree.tree[0].type).toBe('tree');
+          expect(projectTree.tree[1].type).toBe('submodule');
+          expect(projectTree.tree[2].type).toBe('blob');
 
           done();
         }).catch(done.fail);
     });
 
     it('sets parent tree URL', (done) => {
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
           expect(store.state.parentTreeUrl).toBe('parent_tree_url');
 
@@ -64,10 +78,9 @@ describe('Multi-file store tree actions', () => {
     });
 
     it('sets last commit path', (done) => {
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
-          expect(store.state.lastCommitPath).toBe('last_commit_path');
+          expect(store.state.trees['abcproject/master'].lastCommitPath).toBe('last_commit_path');
 
           done();
         }).catch(done.fail);
@@ -76,8 +89,7 @@ describe('Multi-file store tree actions', () => {
     it('sets root if not currently at root', (done) => {
       store.state.isInitialRoot = false;
 
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
           expect(store.state.isInitialRoot).toBeTruthy();
           expect(store.state.isRoot).toBeTruthy();
@@ -87,7 +99,7 @@ describe('Multi-file store tree actions', () => {
     });
 
     it('sets page title', (done) => {
-      store.dispatch('getTreeData')
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
           expect(document.title).toBe('test');
 
@@ -95,40 +107,15 @@ describe('Multi-file store tree actions', () => {
         }).catch(done.fail);
     });
 
-    it('toggles loading', (done) => {
-      store.dispatch('getTreeData')
-        .then(() => {
-          expect(store.state.loading).toBeTruthy();
-
-          return Vue.nextTick();
-        })
-        .then(() => {
-          expect(store.state.loading).toBeFalsy();
-
-          done();
-        }).catch(done.fail);
-    });
-
-    it('calls pushState with endpoint', (done) => {
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
-        .then(() => {
-          expect(history.pushState).toHaveBeenCalledWith(jasmine.anything(), '', 'rootEndpoint');
-
-          done();
-        }).catch(done.fail);
-    });
-
     it('calls getLastCommitData if prevLastCommitPath is not null', (done) => {
       const getLastCommitDataSpy = jasmine.createSpy('getLastCommitData');
       const oldGetLastCommitData = store._actions.getLastCommitData; // eslint-disable-line
       store._actions.getLastCommitData = [getLastCommitDataSpy]; // eslint-disable-line
       store.state.prevLastCommitPath = 'test';
 
-      store.dispatch('getTreeData')
-        .then(Vue.nextTick)
+      store.dispatch('getTreeData', basicCallParameters)
         .then(() => {
-          expect(getLastCommitDataSpy).toHaveBeenCalledWith(store.state);
+          expect(getLastCommitDataSpy).toHaveBeenCalledWith(projectTree);
 
           store._actions.getLastCommitData = oldGetLastCommitData; // eslint-disable-line
 
@@ -149,6 +136,8 @@ describe('Multi-file store tree actions', () => {
       store._actions.getTreeData = [getTreeDataSpy]; // eslint-disable-line
 
       tree = {
+        projectId: 'abcproject',
+        branchId: 'master',
         opened: false,
         tree: [],
       };
@@ -175,10 +164,11 @@ describe('Multi-file store tree actions', () => {
         tree,
       }).then(() => {
         expect(getTreeDataSpy).toHaveBeenCalledWith({
+          projectId: 'abcproject',
+          branch: 'master',
           endpoint: 'test',
           tree,
         });
-        expect(store.state.previousUrl).toBe('test');
 
         done();
       }).catch(done.fail);
@@ -199,155 +189,29 @@ describe('Multi-file store tree actions', () => {
         done();
       }).catch(done.fail);
     });
-
-    it('pushes new state', (done) => {
-      spyOn(history, 'pushState');
-      Object.assign(tree, {
-        opened: true,
-        parentTreeUrl: 'testing',
-      });
-
-      store.dispatch('toggleTreeOpen', {
-        endpoint: 'test',
-        tree,
-      }).then(() => {
-        expect(history.pushState).toHaveBeenCalledWith(jasmine.anything(), '', 'testing');
-
-        done();
-      }).catch(done.fail);
-    });
-  });
-
-  describe('clickedTreeRow', () => {
-    describe('tree', () => {
-      let toggleTreeOpenSpy;
-      let oldToggleTreeOpen;
-
-      beforeEach(() => {
-        toggleTreeOpenSpy = jasmine.createSpy('toggleTreeOpen');
-
-        oldToggleTreeOpen = store._actions.toggleTreeOpen; // eslint-disable-line
-        store._actions.toggleTreeOpen = [toggleTreeOpenSpy]; // eslint-disable-line
-      });
-
-      afterEach(() => {
-        store._actions.toggleTreeOpen = oldToggleTreeOpen; // eslint-disable-line
-      });
-
-      it('opens tree', (done) => {
-        const tree = {
-          url: 'a',
-          type: 'tree',
-        };
-
-        store.dispatch('clickedTreeRow', tree)
-          .then(() => {
-            expect(toggleTreeOpenSpy).toHaveBeenCalledWith({
-              endpoint: tree.url,
-              tree,
-            });
-
-            done();
-          }).catch(done.fail);
-      });
-    });
-
-    describe('submodule', () => {
-      let row;
-
-      beforeEach(() => {
-        spyOn(urlUtils, 'visitUrl');
-
-        row = {
-          url: 'submoduleurl',
-          type: 'submodule',
-          loading: false,
-        };
-      });
-
-      it('toggles loading for row', (done) => {
-        store.dispatch('clickedTreeRow', row)
-          .then(() => {
-            expect(row.loading).toBeTruthy();
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('opens submodule URL', (done) => {
-        store.dispatch('clickedTreeRow', row)
-          .then(() => {
-            expect(urlUtils.visitUrl).toHaveBeenCalledWith('submoduleurl');
-
-            done();
-          }).catch(done.fail);
-      });
-    });
-
-    describe('blob', () => {
-      let row;
-
-      beforeEach(() => {
-        row = {
-          type: 'blob',
-          opened: false,
-        };
-      });
-
-      it('calls getFileData', (done) => {
-        const getFileDataSpy = jasmine.createSpy('getFileData');
-        const oldGetFileData = store._actions.getFileData; // eslint-disable-line
-        store._actions.getFileData = [getFileDataSpy]; // eslint-disable-line
-
-        store.dispatch('clickedTreeRow', row)
-          .then(() => {
-            expect(getFileDataSpy).toHaveBeenCalledWith(row);
-
-            store._actions.getFileData = oldGetFileData; // eslint-disable-line
-
-            done();
-          }).catch(done.fail);
-      });
-
-      it('calls setFileActive when file is opened', (done) => {
-        const setFileActiveSpy = jasmine.createSpy('setFileActive');
-        const oldSetFileActive = store._actions.setFileActive; // eslint-disable-line
-        store._actions.setFileActive = [setFileActiveSpy]; // eslint-disable-line
-
-        row.opened = true;
-
-        store.dispatch('clickedTreeRow', row)
-          .then(() => {
-            expect(setFileActiveSpy).toHaveBeenCalledWith(row);
-
-            store._actions.setFileActive = oldSetFileActive; // eslint-disable-line
-
-            done();
-          }).catch(done.fail);
-      });
-    });
   });
 
   describe('createTempTree', () => {
-    it('creates temp tree', (done) => {
-      store.dispatch('createTempTree', 'test')
-        .then(() => {
-          expect(store.state.tree[0].tempFile).toBeTruthy();
-          expect(store.state.tree[0].name).toBe('test');
-          expect(store.state.tree[0].type).toBe('tree');
-
-          done();
-        }).catch(done.fail);
+    beforeEach(() => {
+      store.state.trees['abcproject/mybranch'] = {
+        tree: [],
+      };
+      projectTree = store.state.trees['abcproject/mybranch'];
     });
 
-    it('creates .gitkeep file in temp tree', (done) => {
-      store.dispatch('createTempTree', 'test')
-        .then(() => {
-          expect(store.state.tree[0].tree[0].tempFile).toBeTruthy();
-          expect(store.state.tree[0].tree[0].name).toBe('.gitkeep');
+    it('creates temp tree', (done) => {
+      store.dispatch('createTempTree', {
+        projectId: store.state.currentProjectId,
+        branchId: store.state.currentBranchId,
+        name: 'test',
+        parent: projectTree,
+      })
+      .then(() => {
+        expect(projectTree.tree[0].name).toBe('test');
+        expect(projectTree.tree[0].type).toBe('tree');
 
-          done();
-        }).catch(done.fail);
+        done();
+      }).catch(done.fail);
     });
 
     it('creates new folder inside another tree', (done) => {
@@ -357,35 +221,46 @@ describe('Multi-file store tree actions', () => {
         tree: [],
       };
 
-      store.state.tree.push(tree);
+      projectTree.tree.push(tree);
 
-      store.dispatch('createTempTree', 'testing/test')
-        .then(() => {
-          expect(store.state.tree[0].name).toBe('testing');
-          expect(store.state.tree[0].tree[0].tempFile).toBeTruthy();
-          expect(store.state.tree[0].tree[0].name).toBe('test');
-          expect(store.state.tree[0].tree[0].type).toBe('tree');
+      store.dispatch('createTempTree', {
+        projectId: store.state.currentProjectId,
+        branchId: store.state.currentBranchId,
+        name: 'testing/test',
+        parent: projectTree,
+      })
+      .then(() => {
+        expect(projectTree.tree[0].name).toBe('testing');
+        expect(projectTree.tree[0].tree[0].tempFile).toBeTruthy();
+        expect(projectTree.tree[0].tree[0].name).toBe('test');
+        expect(projectTree.tree[0].tree[0].type).toBe('tree');
 
-          done();
-        }).catch(done.fail);
+        done();
+      }).catch(done.fail);
     });
 
     it('does not create new tree if already exists', (done) => {
       const tree = {
         type: 'tree',
         name: 'testing',
+        endpoint: 'test',
         tree: [],
       };
 
-      store.state.tree.push(tree);
+      projectTree.tree.push(tree);
 
-      store.dispatch('createTempTree', 'testing/test')
-        .then(() => {
-          expect(store.state.tree[0].name).toBe('testing');
-          expect(store.state.tree[0].tempFile).toBeUndefined();
+      store.dispatch('createTempTree', {
+        projectId: store.state.currentProjectId,
+        branchId: store.state.currentBranchId,
+        name: 'testing/test',
+        parent: projectTree,
+      })
+      .then(() => {
+        expect(projectTree.tree[0].name).toBe('testing');
+        expect(projectTree.tree[0].tempFile).toBeUndefined();
 
-          done();
-        }).catch(done.fail);
+        done();
+      }).catch(done.fail);
     });
   });
 
@@ -405,12 +280,17 @@ describe('Multi-file store tree actions', () => {
         }]),
       }));
 
-      store.state.tree.push(file('testing', '1', 'tree'));
-      store.state.lastCommitPath = 'lastcommitpath';
+      store.state.trees['abcproject/mybranch'] = {
+        tree: [],
+      };
+
+      projectTree = store.state.trees['abcproject/mybranch'];
+      projectTree.tree.push(file('testing', '1', 'tree'));
+      projectTree.lastCommitPath = 'lastcommitpath';
     });
 
     it('calls service with lastCommitPath', (done) => {
-      store.dispatch('getLastCommitData')
+      store.dispatch('getLastCommitData', projectTree)
         .then(() => {
           expect(service.getTreeLastCommit).toHaveBeenCalledWith('lastcommitpath');
 
@@ -419,22 +299,22 @@ describe('Multi-file store tree actions', () => {
     });
 
     it('updates trees last commit data', (done) => {
-      store.dispatch('getLastCommitData')
-        .then(Vue.nextTick)
+      store.dispatch('getLastCommitData', projectTree)
+      .then(Vue.nextTick)
         .then(() => {
-          expect(store.state.tree[0].lastCommit.message).toBe('commit message');
+          expect(projectTree.tree[0].lastCommit.message).toBe('commit message');
 
           done();
         }).catch(done.fail);
     });
 
     it('does not update entry if not found', (done) => {
-      store.state.tree[0].name = 'a';
+      projectTree.tree[0].name = 'a';
 
-      store.dispatch('getLastCommitData')
+      store.dispatch('getLastCommitData', projectTree)
         .then(Vue.nextTick)
         .then(() => {
-          expect(store.state.tree[0].lastCommit.message).not.toBe('commit message');
+          expect(projectTree.tree[0].lastCommit.message).not.toBe('commit message');
 
           done();
         }).catch(done.fail);
diff --git a/spec/javascripts/repo/stores/actions_spec.js b/spec/javascripts/repo/stores/actions_spec.js
index 21d87e46216..0b0d34f072a 100644
--- a/spec/javascripts/repo/stores/actions_spec.js
+++ b/spec/javascripts/repo/stores/actions_spec.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import * as urlUtils from '~/lib/utils/url_utility';
-import store from '~/repo/stores';
-import service from '~/repo/services';
+import store from '~/ide/stores';
+import service from '~/ide/services';
 import { resetStore, file } from '../helpers';
 
 describe('Multi-file store actions', () => {
@@ -110,6 +110,7 @@ describe('Multi-file store actions', () => {
 
     it('can force closed if there are changed files', (done) => {
       store.state.editMode = true;
+
       store.state.openFiles.push(file());
       store.state.openFiles[0].changed = true;
 
@@ -125,7 +126,6 @@ describe('Multi-file store actions', () => {
     it('discards file changes', (done) => {
       const f = file();
       store.state.editMode = true;
-      store.state.tree.push(f);
       store.state.openFiles.push(f);
       f.changed = true;
 
@@ -141,8 +141,6 @@ describe('Multi-file store actions', () => {
 
   describe('toggleBlobView', () => {
     it('sets edit mode view if in edit mode', (done) => {
-      store.state.editMode = true;
-
       store.dispatch('toggleBlobView')
         .then(() => {
           expect(store.state.currentBlobView).toBe('repo-editor');
@@ -153,6 +151,8 @@ describe('Multi-file store actions', () => {
     });
 
     it('sets preview mode view if not in edit mode', (done) => {
+      store.state.editMode = false;
+
       store.dispatch('toggleBlobView')
       .then(() => {
         expect(store.state.currentBlobView).toBe('repo-preview');
@@ -165,9 +165,15 @@ describe('Multi-file store actions', () => {
 
   describe('checkCommitStatus', () => {
     beforeEach(() => {
-      store.state.project.id = 2;
-      store.state.currentBranch = 'master';
-      store.state.currentRef = '1';
+      store.state.currentProjectId = 'abcproject';
+      store.state.currentBranchId = 'master';
+      store.state.projects.abcproject = {
+        branches: {
+          master: {
+            workingReference: '1',
+          },
+        },
+      };
     });
 
     it('calls service', (done) => {
@@ -177,7 +183,7 @@ describe('Multi-file store actions', () => {
 
       store.dispatch('checkCommitStatus')
         .then(() => {
-          expect(service.getBranchData).toHaveBeenCalledWith(2, 'master');
+          expect(service.getBranchData).toHaveBeenCalledWith('abcproject', 'master');
 
           done();
         })
@@ -221,7 +227,17 @@ describe('Multi-file store actions', () => {
 
       document.body.innerHTML += '<div class="flash-container"></div>';
 
-      store.state.project.id = 123;
+      store.state.currentProjectId = 'abcproject';
+      store.state.currentBranchId = 'master';
+      store.state.projects.abcproject = {
+        web_url: 'webUrl',
+        branches: {
+          master: {
+            workingReference: '1',
+          },
+        },
+      };
+
       payload = {
         branch: 'master',
       };
@@ -248,7 +264,7 @@ describe('Multi-file store actions', () => {
       it('calls service', (done) => {
         store.dispatch('commitChanges', { payload, newMr: false })
           .then(() => {
-            expect(service.commit).toHaveBeenCalledWith(123, payload);
+            expect(service.commit).toHaveBeenCalledWith('abcproject', payload);
 
             done();
           }).catch(done.fail);
@@ -284,17 +300,6 @@ describe('Multi-file store actions', () => {
           }).catch(done.fail);
       });
 
-      it('toggles edit mode', (done) => {
-        store.state.editMode = true;
-
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            expect(store.state.editMode).toBeFalsy();
-
-            done();
-          }).catch(done.fail);
-      });
-
       it('closes all files', (done) => {
         store.state.openFiles.push(file());
         store.state.openFiles[0].opened = true;
@@ -317,23 +322,12 @@ describe('Multi-file store actions', () => {
           }).catch(done.fail);
       });
 
-      it('updates commit ref', (done) => {
-        store.dispatch('commitChanges', { payload, newMr: false })
-          .then(() => {
-            expect(store.state.currentRef).toBe('123456');
-
-            done();
-          }).catch(done.fail);
-      });
-
       it('redirects to new merge request page', (done) => {
         spyOn(urlUtils, 'visitUrl');
 
-        store.state.endpoints.newMergeRequestUrl = 'newMergeRequestUrl?branch=';
-
         store.dispatch('commitChanges', { payload, newMr: true })
           .then(() => {
-            expect(urlUtils.visitUrl).toHaveBeenCalledWith('newMergeRequestUrl?branch=master');
+            expect(urlUtils.visitUrl).toHaveBeenCalledWith('webUrl/merge_requests/new?merge_request%5Bsource_branch%5D=master');
 
             done();
           }).catch(done.fail);
@@ -363,15 +357,30 @@ describe('Multi-file store actions', () => {
   });
 
   describe('createTempEntry', () => {
+    beforeEach(() => {
+      store.state.trees['abcproject/mybranch'] = {
+        tree: [],
+      };
+      store.state.projects.abcproject = {
+        web_url: '',
+      };
+    });
+
     it('creates a temp tree', (done) => {
+      const projectTree = store.state.trees['abcproject/mybranch'];
+
       store.dispatch('createTempEntry', {
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
         name: 'test',
         type: 'tree',
       })
       .then(() => {
-        expect(store.state.tree.length).toBe(1);
-        expect(store.state.tree[0].tempFile).toBeTruthy();
-        expect(store.state.tree[0].type).toBe('tree');
+        const baseTree = projectTree.tree;
+        expect(baseTree.length).toBe(1);
+        expect(baseTree[0].tempFile).toBeTruthy();
+        expect(baseTree[0].type).toBe('tree');
 
         done();
       })
@@ -379,14 +388,20 @@ describe('Multi-file store actions', () => {
     });
 
     it('creates temp file', (done) => {
+      const projectTree = store.state.trees['abcproject/mybranch'];
+
       store.dispatch('createTempEntry', {
+        projectId: 'abcproject',
+        branchId: 'mybranch',
+        parent: projectTree,
         name: 'test',
         type: 'blob',
       })
       .then(() => {
-        expect(store.state.tree.length).toBe(1);
-        expect(store.state.tree[0].tempFile).toBeTruthy();
-        expect(store.state.tree[0].type).toBe('blob');
+        const baseTree = projectTree.tree;
+        expect(baseTree.length).toBe(1);
+        expect(baseTree[0].tempFile).toBeTruthy();
+        expect(baseTree[0].type).toBe('blob');
 
         done();
       })
diff --git a/spec/javascripts/repo/stores/getters_spec.js b/spec/javascripts/repo/stores/getters_spec.js
index 952b8ec3a59..d0d5934f29a 100644
--- a/spec/javascripts/repo/stores/getters_spec.js
+++ b/spec/javascripts/repo/stores/getters_spec.js
@@ -1,5 +1,5 @@
-import * as getters from '~/repo/stores/getters';
-import state from '~/repo/stores/state';
+import * as getters from '~/ide/stores/getters';
+import state from '~/ide/stores/state';
 import { file } from '../helpers';
 
 describe('Multi-file store getters', () => {
@@ -9,20 +9,6 @@ describe('Multi-file store getters', () => {
     localState = state();
   });
 
-  describe('treeList', () => {
-    it('returns flat tree list', () => {
-      localState.tree.push(file('1'));
-      localState.tree[0].tree.push(file('2'));
-      localState.tree[0].tree[0].tree.push(file('3'));
-
-      const treeList = getters.treeList(localState);
-
-      expect(treeList.length).toBe(3);
-      expect(treeList[1].name).toBe(localState.tree[0].tree[0].name);
-      expect(treeList[2].name).toBe(localState.tree[0].tree[0].tree[0].name);
-    });
-  });
-
   describe('changedFiles', () => {
     it('returns a list of changed opened files', () => {
       localState.openFiles.push(file());
@@ -49,7 +35,7 @@ describe('Multi-file store getters', () => {
       localState.openFiles.push(file());
       localState.openFiles.push(file('active'));
 
-      expect(getters.activeFile(localState)).toBeUndefined();
+      expect(getters.activeFile(localState)).toBeNull();
     });
   });
 
@@ -67,18 +53,6 @@ describe('Multi-file store getters', () => {
     });
   });
 
-  describe('isCollapsed', () => {
-    it('returns true if state has open files', () => {
-      localState.openFiles.push(file());
-
-      expect(getters.isCollapsed(localState)).toBeTruthy();
-    });
-
-    it('returns false if state has no open files', () => {
-      expect(getters.isCollapsed(localState)).toBeFalsy();
-    });
-  });
-
   describe('canEditFile', () => {
     beforeEach(() => {
       localState.onTopOfBranch = true;
@@ -109,12 +83,6 @@ describe('Multi-file store getters', () => {
 
       expect(getters.canEditFile(localState)).toBeFalsy();
     });
-
-    it('returns false if user can commit but on a branch', () => {
-      localState.onTopOfBranch = false;
-
-      expect(getters.canEditFile(localState)).toBeFalsy();
-    });
   });
 
   describe('modifiedFiles', () => {
diff --git a/spec/javascripts/repo/stores/mutations/branch_spec.js b/spec/javascripts/repo/stores/mutations/branch_spec.js
index 3c06794d5e3..a7167537ef2 100644
--- a/spec/javascripts/repo/stores/mutations/branch_spec.js
+++ b/spec/javascripts/repo/stores/mutations/branch_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/repo/stores/mutations/branch';
-import state from '~/repo/stores/state';
+import mutations from '~/ide/stores/mutations/branch';
+import state from '~/ide/stores/state';
 
 describe('Multi-file store branch mutations', () => {
   let localState;
@@ -12,7 +12,7 @@ describe('Multi-file store branch mutations', () => {
     it('sets currentBranch', () => {
       mutations.SET_CURRENT_BRANCH(localState, 'master');
 
-      expect(localState.currentBranch).toBe('master');
+      expect(localState.currentBranchId).toBe('master');
     });
   });
 });
diff --git a/spec/javascripts/repo/stores/mutations/file_spec.js b/spec/javascripts/repo/stores/mutations/file_spec.js
index 2f2835dde1f..947a60587df 100644
--- a/spec/javascripts/repo/stores/mutations/file_spec.js
+++ b/spec/javascripts/repo/stores/mutations/file_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/repo/stores/mutations/file';
-import state from '~/repo/stores/state';
+import mutations from '~/ide/stores/mutations/file';
+import state from '~/ide/stores/state';
 import { file } from '../../helpers';
 
 describe('Multi-file store file mutations', () => {
diff --git a/spec/javascripts/repo/stores/mutations/tree_spec.js b/spec/javascripts/repo/stores/mutations/tree_spec.js
index 1c76cfed9c8..cf1248ba28b 100644
--- a/spec/javascripts/repo/stores/mutations/tree_spec.js
+++ b/spec/javascripts/repo/stores/mutations/tree_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/repo/stores/mutations/tree';
-import state from '~/repo/stores/state';
+import mutations from '~/ide/stores/mutations/tree';
+import state from '~/ide/stores/state';
 import { file } from '../../helpers';
 
 describe('Multi-file store tree mutations', () => {
diff --git a/spec/javascripts/repo/stores/mutations_spec.js b/spec/javascripts/repo/stores/mutations_spec.js
index d1c9885e01d..5fd8ad94972 100644
--- a/spec/javascripts/repo/stores/mutations_spec.js
+++ b/spec/javascripts/repo/stores/mutations_spec.js
@@ -1,5 +1,5 @@
-import mutations from '~/repo/stores/mutations';
-import state from '~/repo/stores/state';
+import mutations from '~/ide/stores/mutations';
+import state from '~/ide/stores/state';
 import { file } from '../helpers';
 
 describe('Multi-file store mutations', () => {
@@ -65,11 +65,11 @@ describe('Multi-file store mutations', () => {
     it('toggles editMode', () => {
       mutations.TOGGLE_EDIT_MODE(localState);
 
-      expect(localState.editMode).toBeTruthy();
+      expect(localState.editMode).toBeFalsy();
 
       mutations.TOGGLE_EDIT_MODE(localState);
 
-      expect(localState.editMode).toBeFalsy();
+      expect(localState.editMode).toBeTruthy();
     });
   });
 
@@ -85,14 +85,6 @@ describe('Multi-file store mutations', () => {
     });
   });
 
-  describe('SET_COMMIT_REF', () => {
-    it('sets currentRef', () => {
-      mutations.SET_COMMIT_REF(localState, '123');
-
-      expect(localState.currentRef).toBe('123');
-    });
-  });
-
   describe('SET_ROOT', () => {
     it('sets isRoot & initialRoot', () => {
       mutations.SET_ROOT(localState, true);
@@ -107,11 +99,27 @@ describe('Multi-file store mutations', () => {
     });
   });
 
-  describe('SET_PREVIOUS_URL', () => {
-    it('sets previousUrl', () => {
-      mutations.SET_PREVIOUS_URL(localState, 'testing');
+  describe('SET_LEFT_PANEL_COLLAPSED', () => {
+    it('sets left panel collapsed', () => {
+      mutations.SET_LEFT_PANEL_COLLAPSED(localState, true);
+
+      expect(localState.leftPanelCollapsed).toBeTruthy();
+
+      mutations.SET_LEFT_PANEL_COLLAPSED(localState, false);
+
+      expect(localState.leftPanelCollapsed).toBeFalsy();
+    });
+  });
+
+  describe('SET_RIGHT_PANEL_COLLAPSED', () => {
+    it('sets right panel collapsed', () => {
+      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, true);
+
+      expect(localState.rightPanelCollapsed).toBeTruthy();
+
+      mutations.SET_RIGHT_PANEL_COLLAPSED(localState, false);
 
-      expect(localState.previousUrl).toBe('testing');
+      expect(localState.rightPanelCollapsed).toBeFalsy();
     });
   });
 });
diff --git a/spec/javascripts/repo/stores/utils_spec.js b/spec/javascripts/repo/stores/utils_spec.js
index 37287c587d7..89745a2029e 100644
--- a/spec/javascripts/repo/stores/utils_spec.js
+++ b/spec/javascripts/repo/stores/utils_spec.js
@@ -1,4 +1,6 @@
-import * as utils from '~/repo/stores/utils';
+import * as utils from '~/ide/stores/utils';
+import state from '~/ide/stores/state';
+import { file } from '../helpers';
 
 describe('Multi-file store utils', () => {
   describe('setPageTitle', () => {
@@ -9,13 +11,28 @@ describe('Multi-file store utils', () => {
     });
   });
 
-  describe('pushState', () => {
-    it('calls history.pushState', () => {
-      spyOn(history, 'pushState');
+  describe('treeList', () => {
+    let localState;
 
-      utils.pushState('test');
+    beforeEach(() => {
+      localState = state();
+    });
+
+    it('returns flat tree list', () => {
+      localState.trees = [];
+      localState.trees['abcproject/mybranch'] = {
+        tree: [],
+      };
+      const baseTree = localState.trees['abcproject/mybranch'].tree;
+      baseTree.push(file('1'));
+      baseTree[0].tree.push(file('2'));
+      baseTree[0].tree[0].tree.push(file('3'));
+
+      const treeList = utils.treeList(localState, 'abcproject/mybranch');
 
-      expect(history.pushState).toHaveBeenCalledWith({ url: 'test' }, '', 'test');
+      expect(treeList.length).toBe(3);
+      expect(treeList[1].name).toBe(baseTree[0].tree[0].name);
+      expect(treeList[2].name).toBe(baseTree[0].tree[0].tree[0].name);
     });
   });
 
@@ -52,10 +69,10 @@ describe('Multi-file store utils', () => {
   });
 
   describe('findIndexOfFile', () => {
-    let state;
+    let localState;
 
     beforeEach(() => {
-      state = [{
+      localState = [{
         path: '1',
       }, {
         path: '2',
@@ -63,7 +80,7 @@ describe('Multi-file store utils', () => {
     });
 
     it('finds in the index of an entry by path', () => {
-      const index = utils.findIndexOfFile(state, {
+      const index = utils.findIndexOfFile(localState, {
         path: '2',
       });
 
@@ -72,10 +89,10 @@ describe('Multi-file store utils', () => {
   });
 
   describe('findEntry', () => {
-    let state;
+    let localState;
 
     beforeEach(() => {
-      state = {
+      localState = {
         tree: [{
           type: 'tree',
           name: 'test',
@@ -87,14 +104,14 @@ describe('Multi-file store utils', () => {
     });
 
     it('returns an entry found by name', () => {
-      const foundEntry = utils.findEntry(state, 'tree', 'test');
+      const foundEntry = utils.findEntry(localState.tree, 'tree', 'test');
 
       expect(foundEntry.type).toBe('tree');
       expect(foundEntry.name).toBe('test');
     });
 
     it('returns undefined when no entry found', () => {
-      const foundEntry = utils.findEntry(state, 'blob', 'test');
+      const foundEntry = utils.findEntry(localState.tree, 'blob', 'test');
 
       expect(foundEntry).toBeUndefined();
     });
diff --git a/yarn.lock b/yarn.lock
index 55d0d33c9f2..26e2b790f98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6528,6 +6528,10 @@ vue-resource@^1.3.4:
   dependencies:
     got "^7.0.0"
 
+vue-router@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"
+
 vue-style-loader@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-3.0.3.tgz#623658f81506aef9d121cdc113a4f5c9cac32df7"