10 files changed, 203 insertions, 166 deletions

diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index dd69e2d6f1f..34e7cc304dd 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -16,21 +16,7 @@ export const redirectToUrl = (self, url) => visitUrl(url);
 export const setInitialData = ({ commit }, data) => commit(types.SET_INITIAL_DATA, data);
 
 export const discardAllChanges = ({ state, commit, dispatch }) => {
-  state.changedFiles.forEach(file => {
-    if (file.tempFile || file.prevPath) dispatch('closeFile', file);
-
-    if (file.tempFile) {
-      dispatch('deleteEntry', file.path);
-    } else if (file.prevPath) {
-      dispatch('renameEntry', {
-        path: file.path,
-        name: file.prevName,
-        parentPath: file.prevParentPath,
-      });
-    } else {
-      commit(types.DISCARD_FILE_CHANGES, file.path);
-    }
-  });
+  state.changedFiles.forEach(file => dispatch('restoreOriginalFile', file.path));
 
   commit(types.REMOVE_ALL_CHANGES_FILES);
 };
@@ -47,79 +33,66 @@ export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
   }
 };
 
-export const toggleRightPanelCollapsed = ({ dispatch, state }, e = undefined) => {
-  if (e) {
-    $(e.currentTarget)
-      .tooltip('hide')
-      .blur();
-  }
-
-  dispatch('setPanelCollapsedStatus', {
-    side: 'right',
-    collapsed: !state.rightPanelCollapsed,
-  });
-};
-
 export const setResizingStatus = ({ commit }, resizing) => {
   commit(types.SET_RESIZING_STATUS, resizing);
 };
 
 export const createTempEntry = (
-  { state, commit, dispatch },
+  { state, commit, dispatch, getters },
   { name, type, content = '', base64 = false, binary = false, rawPath = '' },
-) =>
-  new Promise(resolve => {
-    const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
-
-    if (state.entries[name] && !state.entries[name].deleted) {
-      flash(
-        `The name "${name.split('/').pop()}" is already taken in this directory.`,
-        'alert',
-        document,
-        null,
-        false,
-        true,
-      );
-
-      resolve();
-
-      return null;
-    }
+) => {
+  const fullName = name.slice(-1) !== '/' && type === 'tree' ? `${name}/` : name;
+
+  if (state.entries[name] && !state.entries[name].deleted) {
+    flash(
+      sprintf(__('The name "%{name}" is already taken in this directory.'), {
+        name: name.split('/').pop(),
+      }),
+      'alert',
+      document,
+      null,
+      false,
+      true,
+    );
 
-    const data = decorateFiles({
-      data: [fullName],
-      projectId: state.currentProjectId,
-      branchId: state.currentBranchId,
-      type,
-      tempFile: true,
-      content,
-      base64,
-      binary,
-      rawPath,
-    });
-    const { file, parentPath } = data;
+    return;
+  }
 
-    commit(types.CREATE_TMP_ENTRY, {
-      data,
-      projectId: state.currentProjectId,
-      branchId: state.currentBranchId,
-    });
+  const data = decorateFiles({
+    data: [fullName],
+    projectId: state.currentProjectId,
+    branchId: state.currentBranchId,
+    type,
+    tempFile: true,
+    content,
+    base64,
+    binary,
+    rawPath,
+  });
+  const { file, parentPath } = data;
 
-    if (type === 'blob') {
-      commit(types.TOGGLE_FILE_OPEN, file.path);
-      commit(types.ADD_FILE_TO_CHANGED, file.path);
-      dispatch('setFileActive', file.path);
-      dispatch('triggerFilesChange');
-    }
+  commit(types.CREATE_TMP_ENTRY, {
+    data,
+    projectId: state.currentProjectId,
+    branchId: state.currentBranchId,
+  });
 
-    if (parentPath && !state.entries[parentPath].opened) {
-      commit(types.TOGGLE_TREE_OPEN, parentPath);
-    }
+  if (type === 'blob') {
+    commit(types.TOGGLE_FILE_OPEN, file.path);
 
-    resolve(file);
+    if (gon.features?.stageAllByDefault)
+      commit(types.STAGE_CHANGE, { path: file.path, diffInfo: getters.getDiffInfo(file.path) });
+    else commit(types.ADD_FILE_TO_CHANGED, file.path);
 
-    return null;
-  });
+    dispatch('setFileActive', file.path);
+    dispatch('triggerFilesChange');
+    dispatch('burstUnusedSeal');
+  }
+
+  if (parentPath && !state.entries[parentPath].opened) {
+    commit(types.TOGGLE_TREE_OPEN, parentPath);
+  }
+};
 
 export const scrollToTab = () => {
   Vue.nextTick(() => {
@@ -133,28 +106,40 @@ export const scrollToTab = () => {
   });
 };
 
-export const stageAllChanges = ({ state, commit, dispatch }) => {
+export const stageAllChanges = ({ state, commit, dispatch, getters }) => {
   const openFile = state.openFiles[0];
 
   commit(types.SET_LAST_COMMIT_MSG, '');
 
-  state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path));
+  state.changedFiles.forEach(file =>
+    commit(types.STAGE_CHANGE, { path: file.path, diffInfo: getters.getDiffInfo(file.path) }),
+  );
 
-  dispatch('openPendingTab', {
-    file: state.stagedFiles.find(f => f.path === openFile.path),
-    keyPrefix: stageKeys.staged,
-  });
+  const file = getters.getStagedFile(openFile.path);
+
+  if (file) {
+    dispatch('openPendingTab', {
+      file,
+      keyPrefix: stageKeys.staged,
+    });
+  }
 };
 
-export const unstageAllChanges = ({ state, commit, dispatch }) => {
+export const unstageAllChanges = ({ state, commit, dispatch, getters }) => {
   const openFile = state.openFiles[0];
 
-  state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path));
+  state.stagedFiles.forEach(file =>
+    commit(types.UNSTAGE_CHANGE, { path: file.path, diffInfo: getters.getDiffInfo(file.path) }),
+  );
 
-  dispatch('openPendingTab', {
-    file: state.changedFiles.find(f => f.path === openFile.path),
-    keyPrefix: stageKeys.unstaged,
-  });
+  const file = getters.getChangedFile(openFile.path);
+
+  if (file) {
+    dispatch('openPendingTab', {
+      file,
+      keyPrefix: stageKeys.unstaged,
+    });
+  }
 };
 
 export const updateViewer = ({ commit }, viewer) => {
@@ -212,8 +197,9 @@ export const deleteEntry = ({ commit, dispatch, state }, path) => {
   const entry = state.entries[path];
   const { prevPath, prevName, prevParentPath } = entry;
   const isTree = entry.type === 'tree';
+  const prevEntry = prevPath && state.entries[prevPath];
 
-  if (prevPath) {
+  if (prevPath && (!prevEntry || prevEntry.deleted)) {
     dispatch('renameEntry', {
       path,
       name: prevName,
@@ -222,7 +208,9 @@ export const deleteEntry = ({ commit, dispatch, state }, path) => {
     dispatch('deleteEntry', prevPath);
     return;
   }
-  if (state.unusedSeal) dispatch('burstUnusedSeal');
+
+  dispatch('burstUnusedSeal');
+
   if (entry.opened) dispatch('closeFile', entry);
 
   if (isTree) {
@@ -241,9 +229,14 @@ export const deleteEntry = ({ commit, dispatch, state }, path) => {
 
 export const resetOpenFiles = ({ commit }) => commit(types.RESET_OPEN_FILES);
 
-export const renameEntry = ({ dispatch, commit, state }, { path, name, parentPath }) => {
+export const renameEntry = ({ dispatch, commit, state, getters }, { path, name, parentPath }) => {
   const entry = state.entries[path];
   const newPath = parentPath ? `${parentPath}/${name}` : name;
+  const existingParent = parentPath && state.entries[parentPath];
+
+  if (parentPath && (!existingParent || existingParent.deleted)) {
+    dispatch('createTempEntry', { name: parentPath, type: 'tree' });
+  }
 
   commit(types.RENAME_ENTRY, { path, name, parentPath });
 
@@ -266,7 +259,11 @@ export const renameEntry = ({ dispatch, commit, state }, { path, name, parentPat
     if (isReset) {
       commit(types.REMOVE_FILE_FROM_STAGED_AND_CHANGED, newEntry);
     } else if (!isInChanges) {
-      commit(types.ADD_FILE_TO_CHANGED, newPath);
+      if (gon.features?.stageAllByDefault)
+        commit(types.STAGE_CHANGE, { path: newPath, diffInfo: getters.getDiffInfo(newPath) });
+      else commit(types.ADD_FILE_TO_CHANGED, newPath);
+
+      dispatch('burstUnusedSeal');
     }
 
     if (!newEntry.tempFile) {
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 8864224c19e..70a966afa66 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -61,8 +61,10 @@ export const getFileData = (
   { path, makeFileActive = true, openFile = makeFileActive },
 ) => {
   const file = state.entries[path];
+  const fileDeletedAndReadded = getters.isFileDeletedAndReadded(path);
 
-  if (file.raw || (file.tempFile && !file.prevPath)) return Promise.resolve();
+  if (file.raw || (file.tempFile && !file.prevPath && !fileDeletedAndReadded))
+    return Promise.resolve();
 
   commit(types.TOGGLE_LOADING, { entry: file });
 
@@ -102,11 +104,16 @@ export const setFileMrChange = ({ commit }, { file, mrChange }) => {
 
 export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) => {
   const file = state.entries[path];
+  const stagedFile = state.stagedFiles.find(f => f.path === path);
+
   return new Promise((resolve, reject) => {
+    const fileDeletedAndReadded = getters.isFileDeletedAndReadded(path);
     service
-      .getRawFileData(file)
+      .getRawFileData(fileDeletedAndReadded ? stagedFile : file)
       .then(raw => {
-        if (!(file.tempFile && !file.prevPath)) commit(types.SET_FILE_RAW_DATA, { file, raw });
+        if (!(file.tempFile && !file.prevPath && !fileDeletedAndReadded))
+          commit(types.SET_FILE_RAW_DATA, { file, raw, fileDeletedAndReadded });
+
         if (file.mrChange && file.mrChange.new_file === false) {
           const baseSha =
             (getters.currentMergeRequest && getters.currentMergeRequest.baseCommitSha) || '';
@@ -140,7 +147,7 @@ export const getRawFileData = ({ state, commit, dispatch, getters }, { path }) =
   });
 };
 
-export const changeFileContent = ({ commit, dispatch, state }, { path, content }) => {
+export const changeFileContent = ({ commit, dispatch, state, getters }, { path, content }) => {
   const file = state.entries[path];
   commit(types.UPDATE_FILE_CONTENT, {
     path,
@@ -150,8 +157,10 @@ export const changeFileContent = ({ commit, dispatch, state }, { path, content }
   const indexOfChangedFile = state.changedFiles.findIndex(f => f.path === path);
 
   if (file.changed && indexOfChangedFile === -1) {
-    commit(types.ADD_FILE_TO_CHANGED, path);
-  } else if (!file.changed && indexOfChangedFile !== -1) {
+    if (gon.features?.stageAllByDefault)
+      commit(types.STAGE_CHANGE, { path, diffInfo: getters.getDiffInfo(path) });
+    else commit(types.ADD_FILE_TO_CHANGED, path);
+  } else if (!file.changed && !file.tempFile && indexOfChangedFile !== -1) {
     commit(types.REMOVE_FILE_FROM_CHANGED, path);
   }
 
@@ -184,23 +193,40 @@ export const setFileViewMode = ({ commit }, { file, viewMode }) => {
   commit(types.SET_FILE_VIEWMODE, { file, viewMode });
 };
 
-export const discardFileChanges = ({ dispatch, state, commit, getters }, path) => {
+export const restoreOriginalFile = ({ dispatch, state, commit }, path) => {
   const file = state.entries[path];
+  const isDestructiveDiscard = file.tempFile || file.prevPath;
 
   if (file.deleted && file.parentPath) {
     dispatch('restoreTree', file.parentPath);
   }
 
-  commit(types.DISCARD_FILE_CHANGES, path);
-  commit(types.REMOVE_FILE_FROM_CHANGED, path);
+  if (isDestructiveDiscard) {
+    dispatch('closeFile', file);
+  }
+
+  if (file.tempFile) {
+    dispatch('deleteEntry', file.path);
+  } else {
+    commit(types.DISCARD_FILE_CHANGES, file.path);
+  }
 
   if (file.prevPath) {
-    dispatch('discardFileChanges', file.prevPath);
+    dispatch('renameEntry', {
+      path: file.path,
+      name: file.prevName,
+      parentPath: file.prevParentPath,
+    });
   }
+};
 
-  if (file.tempFile && file.opened) {
-    commit(types.TOGGLE_FILE_OPEN, path);
-  } else if (getters.activeFile && file.path === getters.activeFile.path) {
+export const discardFileChanges = ({ dispatch, state, commit, getters }, path) => {
+  const file = state.entries[path];
+  const isDestructiveDiscard = file.tempFile || file.prevPath;
+
+  dispatch('restoreOriginalFile', path);
+
+  if (!isDestructiveDiscard && file.path === getters.activeFile?.path) {
     dispatch('updateDelayViewerUpdated', true)
       .then(() => {
         router.push(`/project${file.url}`);
@@ -210,24 +236,26 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
       });
   }
 
+  commit(types.REMOVE_FILE_FROM_CHANGED, path);
+
   eventHub.$emit(`editor.update.model.new.content.${file.key}`, file.content);
   eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content);
 };
 
-export const stageChange = ({ commit, state, dispatch }, path) => {
-  const stagedFile = state.stagedFiles.find(f => f.path === path);
-  const openFile = state.openFiles.find(f => f.path === path);
+export const stageChange = ({ commit, dispatch, getters }, path) => {
+  const stagedFile = getters.getStagedFile(path);
+  const openFile = getters.getOpenFile(path);
 
-  commit(types.STAGE_CHANGE, path);
+  commit(types.STAGE_CHANGE, { path, diffInfo: getters.getDiffInfo(path) });
   commit(types.SET_LAST_COMMIT_MSG, '');
 
   if (stagedFile) {
     eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content);
   }
 
-  if (openFile && openFile.active) {
-    const file = state.stagedFiles.find(f => f.path === path);
+  const file = getters.getStagedFile(path);
 
+  if (openFile && openFile.active && file) {
     dispatch('openPendingTab', {
       file,
       keyPrefix: stageKeys.staged,
@@ -235,14 +263,14 @@ export const stageChange = ({ commit, state, dispatch }, path) => {
   }
 };
 
-export const unstageChange = ({ commit, dispatch, state }, path) => {
-  const openFile = state.openFiles.find(f => f.path === path);
+export const unstageChange = ({ commit, dispatch, getters }, path) => {
+  const openFile = getters.getOpenFile(path);
 
-  commit(types.UNSTAGE_CHANGE, path);
+  commit(types.UNSTAGE_CHANGE, { path, diffInfo: getters.getDiffInfo(path) });
 
-  if (openFile && openFile.active) {
-    const file = state.changedFiles.find(f => f.path === path);
+  const file = getters.getChangedFile(path);
 
+  if (openFile && openFile.active && file) {
     dispatch('openPendingTab', {
       file,
       keyPrefix: stageKeys.unstaged,
diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js
index 6790c0fbdaa..806ec38430c 100644
--- a/app/assets/javascripts/ide/stores/actions/merge_request.js
+++ b/app/assets/javascripts/ide/stores/actions/merge_request.js
@@ -141,7 +141,7 @@ export const getMergeRequestVersions = (
   });
 
 export const openMergeRequest = (
-  { dispatch, state },
+  { dispatch, state, getters },
   { projectId, targetProjectId, mergeRequestId } = {},
 ) =>
   dispatch('getMergeRequestData', {
@@ -152,17 +152,18 @@ export const openMergeRequest = (
     .then(mr => {
       dispatch('setCurrentBranchId', mr.source_branch);
 
-      // getFiles needs to be called after getting the branch data
-      // since files are fetched using the last commit sha of the branch
       return dispatch('getBranchData', {
         projectId,
         branchId: mr.source_branch,
-      }).then(() =>
-        dispatch('getFiles', {
+      }).then(() => {
+        const branch = getters.findBranch(projectId, mr.source_branch);
+
+        return dispatch('getFiles', {
           projectId,
           branchId: mr.source_branch,
-        }),
-      );
+          ref: branch.commit.id,
+        });
+      });
     })
     .then(() =>
       dispatch('getMergeRequestVersions', {
diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js
index 20887e7d0ac..e206f9bee9e 100644
--- a/app/assets/javascripts/ide/stores/actions/project.js
+++ b/app/assets/javascripts/ide/stores/actions/project.js
@@ -83,8 +83,11 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => {
   });
 };
 
-export const showEmptyState = ({ commit, state }, { projectId, branchId }) => {
+export const showEmptyState = ({ commit, state, dispatch }, { projectId, branchId }) => {
   const treePath = `${projectId}/${branchId}`;
+
+  dispatch('setCurrentBranchId', branchId);
+
   commit(types.CREATE_TREE, { treePath });
   commit(types.TOGGLE_LOADING, {
     entry: state.trees[treePath],
@@ -111,7 +114,7 @@ export const loadFile = ({ dispatch, state }, { basePath }) => {
   }
 };
 
-export const loadBranch = ({ dispatch }, { projectId, branchId }) =>
+export const loadBranch = ({ dispatch, getters }, { projectId, branchId }) =>
   dispatch('getBranchData', {
     projectId,
     branchId,
@@ -121,9 +124,13 @@ export const loadBranch = ({ dispatch }, { projectId, branchId }) =>
         projectId,
         branchId,
       });
+
+      const branch = getters.findBranch(projectId, branchId);
+
       return dispatch('getFiles', {
         projectId,
         branchId,
+        ref: branch.commit.id,
       });
     })
     .catch(() => {
diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js
index 72cd099c5a5..ba85194b910 100644
--- a/app/assets/javascripts/ide/stores/actions/tree.js
+++ b/app/assets/javascripts/ide/stores/actions/tree.js
@@ -46,19 +46,20 @@ export const setDirectoryData = ({ state, commit }, { projectId, branchId, treeL
   });
 };
 
-export const getFiles = ({ state, commit, dispatch, getters }, { projectId, branchId } = {}) =>
+export const getFiles = ({ state, commit, dispatch }, payload = {}) =>
   new Promise((resolve, reject) => {
+    const { projectId, branchId, ref = branchId } = payload;
+
     if (
       !state.trees[`${projectId}/${branchId}`] ||
       (state.trees[`${projectId}/${branchId}`].tree &&
         state.trees[`${projectId}/${branchId}`].tree.length === 0)
     ) {
       const selectedProject = state.projects[projectId];
-      const selectedBranch = getters.findBranch(projectId, branchId);
 
       commit(types.CREATE_TREE, { treePath: `${projectId}/${branchId}` });
       service
-        .getFiles(selectedProject.web_url, selectedBranch.commit.id)
+        .getFiles(selectedProject.web_url, ref)
         .then(({ data }) => {
           const { entries, treeList } = decorateFiles({
             data,
@@ -77,8 +78,8 @@ export const getFiles = ({ state, commit, dispatch, getters }, { projectId, bran
         .catch(e => {
           dispatch('setErrorMessage', {
             text: __('An error occurred whilst loading all the files.'),
-            action: payload =>
-              dispatch('getFiles', payload).then(() => dispatch('setErrorMessage', null)),
+            action: actionPayload =>
+              dispatch('getFiles', actionPayload).then(() => dispatch('setErrorMessage', null)),
             actionText: __('Please try again'),
             actionPayload: { projectId, branchId },
           });
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index bb8374b4e78..2fc574cd343 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -64,6 +64,7 @@ export const allBlobs = state =>
 
 export const getChangedFile = state => path => state.changedFiles.find(f => f.path === path);
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
+export const getOpenFile = state => path => state.openFiles.find(f => f.path === path);
 
 export const lastOpenedFile = state =>
   [...state.changedFiles, ...state.stagedFiles].sort((a, b) => b.lastOpenedAt - a.lastOpenedAt)[0];
diff --git a/app/assets/javascripts/ide/stores/modules/pane/actions.js b/app/assets/javascripts/ide/stores/modules/pane/actions.js
index 7f5d167a14f..a8fcdf539ec 100644
--- a/app/assets/javascripts/ide/stores/modules/pane/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/pane/actions.js
@@ -1,17 +1,17 @@
 import * as types from './mutation_types';
 
-export const toggleOpen = ({ dispatch, state }, view) => {
+export const toggleOpen = ({ dispatch, state }) => {
   if (state.isOpen) {
     dispatch('close');
   } else {
-    dispatch('open', view);
+    dispatch('open');
   }
 };
 
-export const open = ({ commit }, view) => {
+export const open = ({ state, commit }, view) => {
   commit(types.SET_OPEN, true);
 
-  if (view) {
+  if (view && view.name !== state.currentView) {
     const { name, keepAlive } = view;
 
     commit(types.SET_CURRENT_VIEW, name);
diff --git a/app/assets/javascripts/ide/stores/mutation_types.js b/app/assets/javascripts/ide/stores/mutation_types.js
index f0b4718d025..4dde53a9fdf 100644
--- a/app/assets/javascripts/ide/stores/mutation_types.js
+++ b/app/assets/javascripts/ide/stores/mutation_types.js
@@ -11,7 +11,6 @@ export const SET_LINKS = 'SET_LINKS';
 // 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';
 export const TOGGLE_EMPTY_STATE = 'TOGGLE_EMPTY_STATE';
 
 // Merge Request Mutation Types
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 8caeb2d73b2..313fa1fe029 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -54,27 +54,29 @@ export default {
       }
     });
   },
-  [types.SET_FILE_RAW_DATA](state, { file, raw }) {
+  [types.SET_FILE_RAW_DATA](state, { file, raw, fileDeletedAndReadded = false }) {
     const openPendingFile = state.openFiles.find(
-      f => f.path === file.path && f.pending && !(f.tempFile && !f.prevPath),
+      f =>
+        f.path === file.path && f.pending && !(f.tempFile && !f.prevPath && !fileDeletedAndReadded),
     );
+    const stagedFile = state.stagedFiles.find(f => f.path === file.path);
 
-    if (file.tempFile && file.content === '') {
-      Object.assign(state.entries[file.path], {
-        content: raw,
-      });
+    if (file.tempFile && file.content === '' && !fileDeletedAndReadded) {
+      Object.assign(state.entries[file.path], { content: raw });
+    } else if (fileDeletedAndReadded) {
+      Object.assign(stagedFile, { raw });
     } else {
-      Object.assign(state.entries[file.path], {
-        raw,
-      });
+      Object.assign(state.entries[file.path], { raw });
     }
 
     if (!openPendingFile) return;
 
     if (!openPendingFile.tempFile) {
       openPendingFile.raw = raw;
-    } else if (openPendingFile.tempFile) {
+    } else if (openPendingFile.tempFile && !fileDeletedAndReadded) {
       openPendingFile.content = raw;
+    } else if (fileDeletedAndReadded) {
+      Object.assign(stagedFile, { raw });
     }
   },
   [types.SET_FILE_BASE_RAW_DATA](state, { file, baseRaw }) {
@@ -132,7 +134,7 @@ export default {
   [types.DISCARD_FILE_CHANGES](state, path) {
     const stagedFile = state.stagedFiles.find(f => f.path === path);
     const entry = state.entries[path];
-    const { deleted, prevPath } = entry;
+    const { deleted } = entry;
 
     Object.assign(state.entries[path], {
       content: stagedFile ? stagedFile.content : state.entries[path].raw,
@@ -146,12 +148,6 @@ export default {
         : state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
 
       parent.tree = sortTree(parent.tree.concat(entry));
-    } else if (prevPath) {
-      const parent = entry.parentPath
-        ? state.entries[entry.parentPath]
-        : state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
-
-      parent.tree = parent.tree.filter(f => f.path !== path);
     }
   },
   [types.ADD_FILE_TO_CHANGED](state, path) {
@@ -164,31 +160,32 @@ export default {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
     });
   },
-  [types.STAGE_CHANGE](state, path) {
+  [types.STAGE_CHANGE](state, { path, diffInfo }) {
     const stagedFile = state.stagedFiles.find(f => f.path === path);
 
     Object.assign(state, {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
       entries: Object.assign(state.entries, {
         [path]: Object.assign(state.entries[path], {
-          staged: true,
+          staged: diffInfo.exists,
+          changed: diffInfo.changed,
+          tempFile: diffInfo.tempFile,
+          deleted: diffInfo.deleted,
         }),
       }),
     });
 
     if (stagedFile) {
-      Object.assign(stagedFile, {
-        ...state.entries[path],
-      });
+      Object.assign(stagedFile, { ...state.entries[path] });
     } else {
-      Object.assign(state, {
-        stagedFiles: state.stagedFiles.concat({
-          ...state.entries[path],
-        }),
-      });
+      state.stagedFiles = [...state.stagedFiles, { ...state.entries[path] }];
+    }
+
+    if (!diffInfo.exists) {
+      state.stagedFiles = state.stagedFiles.filter(f => f.path !== path);
     }
   },
-  [types.UNSTAGE_CHANGE](state, path) {
+  [types.UNSTAGE_CHANGE](state, { path, diffInfo }) {
     const changedFile = state.changedFiles.find(f => f.path === path);
     const stagedFile = state.stagedFiles.find(f => f.path === path);
 
@@ -201,9 +198,11 @@ export default {
         changed: true,
       });
 
-      Object.assign(state, {
-        changedFiles: state.changedFiles.concat(state.entries[path]),
-      });
+      state.changedFiles = state.changedFiles.concat(state.entries[path]);
+    }
+
+    if (!diffInfo.exists) {
+      state.changedFiles = state.changedFiles.filter(f => f.path !== path);
     }
 
     Object.assign(state, {
@@ -211,6 +210,9 @@ export default {
       entries: Object.assign(state.entries, {
         [path]: Object.assign(state.entries[path], {
           staged: false,
+          changed: diffInfo.changed,
+          tempFile: diffInfo.tempFile,
+          deleted: diffInfo.deleted,
         }),
       }),
     });
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index d400b9831a9..6488389977c 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -31,4 +31,5 @@ export default () => ({
     entry: {},
   },
   clientsidePreviewEnabled: false,
+  renderWhitespaceInCode: false,
 });