14 files changed, 739 insertions, 189 deletions

diff --git a/app/assets/javascripts/repo/stores/actions.js b/app/assets/javascripts/repo/stores/actions.js
new file mode 100644
index 00000000000..ca2f2a5ce7a
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions.js
@@ -0,0 +1,129 @@
+import Vue from 'vue';
+import flash from '../../flash';
+import service from '../services';
+import * as types from './mutation_types';
+
+export const redirectToUrl = url => gl.utils.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 }, { payload, newMr }) =>
+  service.commit(state.project.id, payload)
+  .then((data) => {
+    const { branch } = payload;
+    if (!data.short_id) {
+      flash(data.message);
+      return;
+    }
+
+    flash(`Your changes have been committed. Commit ${data.short_id} with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`, 'notice');
+
+    if (newMr) {
+      redirectToUrl(`${state.endpoints.newMergeRequestUrl}${branch}`);
+    } else {
+      commit(types.SET_COMMIT_REF, data.id);
+      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
new file mode 100644
index 00000000000..b81a70dfd1e
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/branch.js
@@ -0,0 +1,20 @@
+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 = ({ rootState, commit }, branch) => service.createBranch(
+  rootState.project.id,
+  {
+    branch,
+    ref: rootState.currentBranch,
+  },
+).then(res => res.json())
+.then((data) => {
+  const branchName = data.name;
+  const url = location.href.replace(rootState.currentBranch, branchName);
+
+  pushState(url);
+
+  commit(types.SET_CURRENT_BRANCH, branchName);
+});
diff --git a/app/assets/javascripts/repo/stores/actions/file.js b/app/assets/javascripts/repo/stores/actions/file.js
new file mode 100644
index 00000000000..afbe0b78a82
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/file.js
@@ -0,0 +1,108 @@
+import { normalizeHeaders } from '../../../lib/utils/common_utils';
+import flash from '../../../flash';
+import service from '../../services';
+import * as types from '../mutation_types';
+import {
+  findEntry,
+  pushState,
+  setPageTitle,
+  createTemp,
+  findIndexOfFile,
+} from '../utils';
+
+export const closeFile = ({ commit, state, dispatch }, { file, force = false }) => {
+  if ((file.changed || file.tempFile) && !force) return;
+
+  const indexOfClosedFile = findIndexOfFile(state.openFiles, file);
+  const fileWasActive = file.active;
+
+  commit(types.TOGGLE_FILE_OPEN, file);
+  commit(types.SET_FILE_ACTIVE, { file, active: false });
+
+  if (state.openFiles.length > 0 && fileWasActive) {
+    const nextIndexToOpen = indexOfClosedFile === 0 ? 0 : indexOfClosedFile - 1;
+    const nextFileToOpen = state.openFiles[nextIndexToOpen];
+
+    dispatch('setFileActive', nextFileToOpen);
+  } else if (!state.openFiles.length) {
+    pushState(file.parentTreeUrl);
+  }
+};
+
+export const setFileActive = ({ commit, state, getters, dispatch }, file) => {
+  const currentActiveFile = getters.activeFile;
+
+  if (file.active) return;
+
+  if (currentActiveFile) {
+    commit(types.SET_FILE_ACTIVE, { file: currentActiveFile, active: false });
+  }
+
+  commit(types.SET_FILE_ACTIVE, { file, active: true });
+  dispatch('scrollToTab');
+
+  // reset hash for line highlighting
+  location.hash = '';
+};
+
+export const getFileData = ({ state, commit, dispatch }, file) => {
+  commit(types.TOGGLE_LOADING, file);
+
+  service.getFileData(file.url)
+    .then((res) => {
+      const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']);
+
+      setPageTitle(pageTitle);
+
+      return res.json();
+    })
+    .then((data) => {
+      commit(types.SET_FILE_DATA, { data, file });
+      commit(types.TOGGLE_FILE_OPEN, file);
+      dispatch('setFileActive', file);
+      commit(types.TOGGLE_LOADING, file);
+
+      pushState(file.url);
+    })
+    .catch(() => {
+      commit(types.TOGGLE_LOADING, file);
+      flash('Error loading file data. Please try again.');
+    });
+};
+
+export const getRawFileData = ({ commit, dispatch }, file) => service.getRawFileData(file)
+  .then((raw) => {
+    commit(types.SET_FILE_RAW_DATA, { file, raw });
+  })
+  .catch(() => flash('Error loading file content. Please try again.'));
+
+export const changeFileContent = ({ commit }, { file, content }) => {
+  commit(types.UPDATE_FILE_CONTENT, { file, content });
+};
+
+export const createTempFile = ({ state, commit, dispatch }, { tree, name, content = '', base64 = '' }) => {
+  const file = createTemp({
+    name: name.replace(`${state.path}/`, ''),
+    path: tree.path,
+    type: 'blob',
+    level: tree.level !== undefined ? tree.level + 1 : 0,
+    changed: true,
+    content,
+    base64,
+  });
+
+  if (findEntry(tree, 'blob', file.name)) return flash(`The name "${file.name}" is already taken in this directory.`);
+
+  commit(types.CREATE_TMP_FILE, {
+    parent: tree,
+    file,
+  });
+  commit(types.TOGGLE_FILE_OPEN, file);
+  dispatch('setFileActive', file);
+
+  if (!state.editMode && !file.base64) {
+    dispatch('toggleEditMode', true);
+  }
+
+  return Promise.resolve(file);
+};
diff --git a/app/assets/javascripts/repo/stores/actions/tree.js b/app/assets/javascripts/repo/stores/actions/tree.js
new file mode 100644
index 00000000000..129743c66c2
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/actions/tree.js
@@ -0,0 +1,110 @@
+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,
+} from '../utils';
+
+export const getTreeData = (
+  { commit, state },
+  { 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) => {
+      if (!state.isInitialRoot) {
+        commit(types.SET_ROOT, data.path === '/');
+      }
+
+      commit(types.SET_DIRECTORY_DATA, { data, tree });
+      commit(types.SET_PARENT_TREE_URL, data.parent_tree_url);
+      commit(types.TOGGLE_LOADING, 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);
+    commit(types.SET_DIRECTORY_DATA, { 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);
+
+    gl.utils.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',
+    });
+  }
+};
diff --git a/app/assets/javascripts/repo/stores/getters.js b/app/assets/javascripts/repo/stores/getters.js
new file mode 100644
index 00000000000..1ed05ac6e35
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/getters.js
@@ -0,0 +1,36 @@
+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);
+};
diff --git a/app/assets/javascripts/repo/stores/index.js b/app/assets/javascripts/repo/stores/index.js
new file mode 100644
index 00000000000..6ac9bfd8189
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import state from './state';
+import * as actions from './actions';
+import * as getters from './getters';
+import mutations from './mutations';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: state(),
+  actions,
+  mutations,
+  getters,
+});
diff --git a/app/assets/javascripts/repo/stores/mutation_types.js b/app/assets/javascripts/repo/stores/mutation_types.js
new file mode 100644
index 00000000000..4722a7dd0df
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutation_types.js
@@ -0,0 +1,28 @@
+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';
+
+// 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';
+
+// File mutation types
+export const SET_FILE_DATA = 'SET_FILE_DATA';
+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 DISCARD_FILE_CHANGES = 'DISCARD_FILE_CHANGES';
+export const CREATE_TMP_FILE = 'CREATE_TMP_FILE';
+
+// Viewer mutation types
+export const SET_PREVIEW_MODE = 'SET_PREVIEW_MODE';
+export const SET_EDIT_MODE = 'SET_EDIT_MODE';
+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/repo/stores/mutations.js
new file mode 100644
index 00000000000..2f9b038322b
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations.js
@@ -0,0 +1,54 @@
+import * as types from './mutation_types';
+import fileMutations from './mutations/file';
+import treeMutations from './mutations/tree';
+import branchMutations from './mutations/branch';
+
+export default {
+  [types.SET_INITIAL_DATA](state, data) {
+    Object.assign(state, data);
+  },
+  [types.SET_PREVIEW_MODE](state) {
+    Object.assign(state, {
+      currentBlobView: 'repo-preview',
+    });
+  },
+  [types.SET_EDIT_MODE](state) {
+    Object.assign(state, {
+      currentBlobView: 'repo-editor',
+    });
+  },
+  [types.TOGGLE_LOADING](state, entry) {
+    Object.assign(entry, {
+      loading: !entry.loading,
+    });
+  },
+  [types.TOGGLE_EDIT_MODE](state) {
+    Object.assign(state, {
+      editMode: !state.editMode,
+    });
+  },
+  [types.TOGGLE_DISCARD_POPUP](state, discardPopupOpen) {
+    Object.assign(state, {
+      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) {
+    Object.assign(state, {
+      previousUrl,
+    });
+  },
+  ...fileMutations,
+  ...treeMutations,
+  ...branchMutations,
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/branch.js b/app/assets/javascripts/repo/stores/mutations/branch.js
new file mode 100644
index 00000000000..d8229e8a620
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/branch.js
@@ -0,0 +1,9 @@
+import * as types from '../mutation_types';
+
+export default {
+  [types.SET_CURRENT_BRANCH](state, currentBranch) {
+    Object.assign(state, {
+      currentBranch,
+    });
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/file.js b/app/assets/javascripts/repo/stores/mutations/file.js
new file mode 100644
index 00000000000..f9ba80b9dc2
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/file.js
@@ -0,0 +1,54 @@
+import * as types from '../mutation_types';
+import { findIndexOfFile } from '../utils';
+
+export default {
+  [types.SET_FILE_ACTIVE](state, { file, active }) {
+    Object.assign(file, {
+      active,
+    });
+  },
+  [types.TOGGLE_FILE_OPEN](state, file) {
+    Object.assign(file, {
+      opened: !file.opened,
+    });
+
+    if (file.opened) {
+      state.openFiles.push(file);
+    } else {
+      state.openFiles.splice(findIndexOfFile(state.openFiles, file), 1);
+    }
+  },
+  [types.SET_FILE_DATA](state, { data, file }) {
+    Object.assign(file, {
+      blamePath: data.blame_path,
+      commitsPath: data.commits_path,
+      permalink: data.permalink,
+      rawPath: data.raw_path,
+      binary: data.binary,
+      html: data.html,
+      renderError: data.render_error,
+    });
+  },
+  [types.SET_FILE_RAW_DATA](state, { file, raw }) {
+    Object.assign(file, {
+      raw,
+    });
+  },
+  [types.UPDATE_FILE_CONTENT](state, { file, content }) {
+    const changed = content !== file.raw;
+
+    Object.assign(file, {
+      content,
+      changed,
+    });
+  },
+  [types.DISCARD_FILE_CHANGES](state, file) {
+    Object.assign(file, {
+      content: '',
+      changed: false,
+    });
+  },
+  [types.CREATE_TMP_FILE](state, { file, parent }) {
+    parent.tree.push(file);
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/mutations/tree.js b/app/assets/javascripts/repo/stores/mutations/tree.js
new file mode 100644
index 00000000000..52be2673107
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/mutations/tree.js
@@ -0,0 +1,45 @@
+import * as types from '../mutation_types';
+import * as utils from '../utils';
+
+export default {
+  [types.TOGGLE_TREE_OPEN](state, tree) {
+    Object.assign(tree, {
+      opened: !tree.opened,
+    });
+  },
+  [types.SET_DIRECTORY_DATA](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;
+
+    Object.assign(tree, {
+      tree: [
+        ...data.trees.map(t => utils.decorateData({
+          ...t,
+          type: 'tree',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+        ...data.submodules.map(m => utils.decorateData({
+          ...m,
+          type: 'submodule',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+        ...data.blobs.map(b => utils.decorateData({
+          ...b,
+          type: 'blob',
+          parentTreeUrl,
+          level,
+        }, state.project.url)),
+      ],
+    });
+  },
+  [types.SET_PARENT_TREE_URL](state, url) {
+    Object.assign(state, {
+      parentTreeUrl: url,
+    });
+  },
+  [types.CREATE_TMP_TREE](state, { parent, tmpEntry }) {
+    parent.tree.push(tmpEntry);
+  },
+};
diff --git a/app/assets/javascripts/repo/stores/repo_store.js b/app/assets/javascripts/repo/stores/repo_store.js
deleted file mode 100644
index 38df1e3e0d2..00000000000
--- a/app/assets/javascripts/repo/stores/repo_store.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import Helper from '../helpers/repo_helper';
-import Service from '../services/repo_service';
-
-const RepoStore = {
-  monacoLoading: false,
-  service: '',
-  canCommit: false,
-  onTopOfBranch: false,
-  editMode: false,
-  isRoot: null,
-  isInitialRoot: null,
-  prevURL: '',
-  projectId: '',
-  projectName: '',
-  projectUrl: '',
-  branchUrl: '',
-  blobRaw: '',
-  currentBlobView: 'repo-preview',
-  openedFiles: [],
-  submitCommitsLoading: false,
-  dialog: {
-    open: false,
-    title: '',
-    status: false,
-  },
-  showNewBranchDialog: false,
-  activeFile: Helper.getDefaultActiveFile(),
-  activeFileIndex: 0,
-  activeLine: -1,
-  activeFileLabel: 'Raw',
-  files: [],
-  isCommitable: false,
-  binary: false,
-  currentBranch: '',
-  startNewMR: false,
-  currentHash: '',
-  currentShortHash: '',
-  customBranchURL: '',
-  newMrTemplateUrl: '',
-  branchChanged: false,
-  commitMessage: '',
-  path: '',
-  loading: {
-    tree: false,
-    blob: false,
-  },
-
-  setBranchHash() {
-    return Service.getBranch()
-      .then((data) => {
-        if (RepoStore.currentHash !== '' && data.commit.id !== RepoStore.currentHash) {
-          RepoStore.branchChanged = true;
-        }
-        RepoStore.currentHash = data.commit.id;
-        RepoStore.currentShortHash = data.commit.short_id;
-      });
-  },
-
-  // mutations
-  checkIsCommitable() {
-    RepoStore.isCommitable = RepoStore.onTopOfBranch && RepoStore.canCommit;
-  },
-
-  toggleRawPreview() {
-    RepoStore.activeFile.raw = !RepoStore.activeFile.raw;
-    RepoStore.activeFileLabel = RepoStore.activeFile.raw ? 'Display rendered file' : 'Display source';
-  },
-
-  setActiveFiles(file) {
-    if (RepoStore.isActiveFile(file)) return;
-    RepoStore.openedFiles = RepoStore.openedFiles
-      .map((openedFile, i) => RepoStore.setFileActivity(file, openedFile, i));
-
-    RepoStore.setActiveToRaw();
-
-    if (file.binary) {
-      RepoStore.blobRaw = file.base64;
-    } else if (file.newContent || file.plain) {
-      RepoStore.blobRaw = file.newContent || file.plain;
-    } else {
-      Service.getRaw(file)
-        .then((rawResponse) => {
-          RepoStore.blobRaw = rawResponse.data;
-          Helper.findOpenedFileFromActive().plain = rawResponse.data;
-        }).catch(Helper.loadingError);
-    }
-
-    if (!file.loading && !file.tempFile) {
-      Helper.updateHistoryEntry(file.url, file.pageTitle || file.name);
-    }
-    RepoStore.binary = file.binary;
-    RepoStore.setActiveLine(-1);
-  },
-
-  setFileActivity(file, openedFile, i) {
-    const activeFile = openedFile;
-    activeFile.active = file.id === activeFile.id;
-
-    if (activeFile.active) RepoStore.setActiveFile(activeFile, i);
-
-    return activeFile;
-  },
-
-  setActiveFile(activeFile, i) {
-    RepoStore.activeFile = Object.assign({}, Helper.getDefaultActiveFile(), activeFile);
-    RepoStore.activeFileIndex = i;
-  },
-
-  setActiveLine(activeLine) {
-    if (!isNaN(activeLine)) RepoStore.activeLine = activeLine;
-  },
-
-  setActiveToRaw() {
-    RepoStore.activeFile.raw = false;
-    // can't get vue to listen to raw for some reason so RepoStore for now.
-    RepoStore.activeFileLabel = 'Display source';
-  },
-
-  removeFromOpenedFiles(file) {
-    if (file.type === 'tree') return;
-    let foundIndex;
-    RepoStore.openedFiles = RepoStore.openedFiles.filter((openedFile, i) => {
-      if (openedFile.path === file.path) foundIndex = i;
-      return openedFile.path !== file.path;
-    });
-
-    // remove the file from the sidebar if it is a tempFile
-    if (file.tempFile) {
-      RepoStore.files = RepoStore.files.filter(f => !(f.tempFile && f.path === file.path));
-    }
-
-    // now activate the right tab based on what you closed.
-    if (RepoStore.openedFiles.length === 0) {
-      RepoStore.activeFile = {};
-      return;
-    }
-
-    if (RepoStore.openedFiles.length === 1 || foundIndex === 0) {
-      RepoStore.setActiveFiles(RepoStore.openedFiles[0]);
-      return;
-    }
-
-    if (foundIndex && foundIndex > 0) {
-      RepoStore.setActiveFiles(RepoStore.openedFiles[foundIndex - 1]);
-    }
-  },
-
-  addToOpenedFiles(file) {
-    const openFile = file;
-
-    const openedFilesAlreadyExists = RepoStore.openedFiles
-      .some(openedFile => openedFile.path === openFile.path);
-
-    if (openedFilesAlreadyExists) return;
-
-    openFile.changed = false;
-    openFile.active = true;
-    RepoStore.openedFiles.push(openFile);
-  },
-
-  setActiveFileContents(contents) {
-    if (!RepoStore.editMode) return;
-    const currentFile = RepoStore.openedFiles[RepoStore.activeFileIndex];
-    RepoStore.activeFile.newContent = contents;
-    RepoStore.activeFile.changed = RepoStore.activeFile.plain !== RepoStore.activeFile.newContent;
-    currentFile.changed = RepoStore.activeFile.changed;
-    currentFile.newContent = contents;
-  },
-
-  toggleBlobView() {
-    RepoStore.currentBlobView = RepoStore.isPreviewView() ? 'repo-editor' : 'repo-preview';
-  },
-
-  setViewToPreview() {
-    RepoStore.currentBlobView = 'repo-preview';
-  },
-
-  // getters
-
-  isActiveFile(file) {
-    return file && file.id === RepoStore.activeFile.id;
-  },
-
-  isPreviewView() {
-    return RepoStore.currentBlobView === 'repo-preview';
-  },
-};
-
-export default RepoStore;
diff --git a/app/assets/javascripts/repo/stores/state.js b/app/assets/javascripts/repo/stores/state.js
new file mode 100644
index 00000000000..aab74754f02
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/state.js
@@ -0,0 +1,23 @@
+export default () => ({
+  canCommit: false,
+  currentBranch: '',
+  currentBlobView: 'repo-preview',
+  currentRef: '',
+  discardPopupOpen: false,
+  editMode: false,
+  endpoints: {},
+  isRoot: false,
+  isInitialRoot: false,
+  loading: false,
+  onTopOfBranch: false,
+  openFiles: [],
+  path: '',
+  project: {
+    id: 0,
+    name: '',
+    url: '',
+  },
+  parentTreeUrl: '',
+  previousUrl: '',
+  tree: [],
+});
diff --git a/app/assets/javascripts/repo/stores/utils.js b/app/assets/javascripts/repo/stores/utils.js
new file mode 100644
index 00000000000..797c2b1e5b9
--- /dev/null
+++ b/app/assets/javascripts/repo/stores/utils.js
@@ -0,0 +1,108 @@
+export const dataStructure = () => ({
+  id: '',
+  type: '',
+  name: '',
+  url: '',
+  path: '',
+  level: 0,
+  tempFile: false,
+  icon: '',
+  tree: [],
+  loading: false,
+  opened: false,
+  active: false,
+  changed: false,
+  lastCommit: {},
+  tree_url: '',
+  blamePath: '',
+  commitsPath: '',
+  permalink: '',
+  rawPath: '',
+  binary: false,
+  html: '',
+  raw: '',
+  content: '',
+  parentTreeUrl: '',
+  renderError: false,
+  base64: false,
+});
+
+export const decorateData = (entity, projectUrl = '') => {
+  const {
+    id,
+    type,
+    url,
+    name,
+    icon,
+    last_commit,
+    tree_url,
+    path,
+    renderError,
+    content = '',
+    tempFile = false,
+    active = false,
+    opened = false,
+    changed = false,
+    parentTreeUrl = '',
+    level = 0,
+    base64 = false,
+  } = entity;
+
+  return {
+    ...dataStructure(),
+    id,
+    type,
+    name,
+    url,
+    tree_url,
+    path,
+    level,
+    tempFile,
+    icon: `fa-${icon}`,
+    opened,
+    active,
+    parentTreeUrl,
+    changed,
+    renderError,
+    content,
+    base64,
+    // eslint-disable-next-line camelcase
+    lastCommit: last_commit ? {
+      url: `${projectUrl}/commit/${last_commit.id}`,
+      message: last_commit.message,
+      updatedAt: last_commit.committed_date,
+    } : {},
+  };
+};
+
+export const findEntry = (state, type, name) => state.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 }) => {
+  const treePath = path ? `${path}/${name}` : name;
+
+  return decorateData({
+    id: new Date().getTime().toString(),
+    name,
+    type,
+    tempFile: true,
+    path: treePath,
+    icon: type === 'tree' ? 'folder' : 'file-text-o',
+    changed,
+    content,
+    parentTreeUrl: '',
+    level,
+    base64,
+    renderError: base64,
+  });
+};