Changed the way renaming works

In WebIDE, when re-naming an entry, instead of creating a new one,
update the existing one storing original values for eventual discarding.

After committing a re-named entry, remove the temporary parameters.

Handling files with spaces in path

Swap original entry with the re-named one in the state.openFiles if the
original entry has been opened

Mark re-named file with a 'renamed-' key

Fixed re-naming folders in WebIDE

Preserve changes to a re-named file

Changes and rename are marked as one entry in the "Commit" view

app/assets/javascripts/ide/components/commit_sidebar/editor_header.vue

@@ -43,7 +43,12 @@ export default {
 <template>
   <div class="d-flex ide-commit-editor-header align-items-center">
     <file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
-    <strong class="mr-2"> {{ activeFile.path }} </strong>
+    <strong class="mr-2">
+      <template v-if="activeFile.prevPath && activeFile.prevPath !== activeFile.path">
+        {{ activeFile.prevPath }} &#x2192;
+      </template>
+      {{ activeFile.path }}
+    </strong>
     <changed-file-icon :file="activeFile" :is-centered="false" />
     <div class="ml-auto">
       <button

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -110,6 +110,9 @@ export default {
     >
       <span class="multi-file-commit-list-file-path d-flex align-items-center">
         <file-icon :file-name="file.name" class="append-right-8" />
+        <template v-if="file.prevName && file.prevName !== file.name">
+          {{ file.prevName }} &#x2192;
+        </template>
         {{ file.name }}
       </span>
       <div class="ml-auto d-flex align-items-center">

app/assets/javascripts/ide/components/file_row_extra.vue

@@ -34,6 +34,9 @@ export default {
       'getUnstagedFilesCountForPath',
       'getStagedFilesCountForPath',
     ]),
+    isTree() {
+      return this.file.type === 'tree';
+    },
     folderUnstagedCount() {
       return this.getUnstagedFilesCountForPath(this.file.path);
     },
@@ -58,10 +61,13 @@ export default {
       });
     },
     showTreeChangesCount() {
-      return this.file.type === 'tree' && this.changesCount > 0 && !this.file.opened;
+      return this.isTree && this.changesCount > 0 && !this.file.opened;
+    },
+    isModified() {
+      return this.file.changed || this.file.tempFile || this.file.staged || this.file.prevPath;
     },
     showChangedFileIcon() {
-      return this.file.changed || this.file.tempFile || this.file.staged;
+      return !this.isTree && this.isModified;
     },
   },
 };

app/assets/javascripts/ide/components/ide_tree_list.vue

@@ -30,9 +30,6 @@ export default {
     showLoading() {
       return !this.currentTree || this.currentTree.loading;
     },
-    actualTreeList() {
-      return this.currentTree.tree.filter(entry => !entry.moved);
-    },
   },
   mounted() {
     this.updateViewer(this.viewerType);
@@ -57,9 +54,9 @@ export default {
         <slot name="header"></slot>
       </header>
       <div class="ide-tree-body h-100">
-        <template v-if="actualTreeList.length">
+        <template v-if="currentTree.tree.length">
           <file-row
-            v-for="file in actualTreeList"
+            v-for="file in currentTree.tree"
             :key="file.key"
             :file="file"
             :level="0"

app/assets/javascripts/ide/components/new_dropdown/modal.vue

@@ -91,7 +91,6 @@ export default {
               this.renameEntry({
                 path: this.entryModal.entry.path,
                 name: entryName,
-                entryPath: null,
                 parentPath,
               }),
             )

app/assets/javascripts/ide/components/repo_editor.vue

@@ -155,15 +155,7 @@ export default {
 
       this.editor.clearEditor();
 
-      this.getFileData({
-        path: this.file.path,
-        makeFileActive: false,
-      })
-        .then(() =>
-          this.getRawFileData({
-            path: this.file.path,
-          }),
-        )
+      this.fetchFileData()
         .then(() => {
           this.createEditorInstance();
         })
@@ -179,6 +171,20 @@ export default {
           throw err;
         });
     },
+    fetchFileData() {
+      if (this.file.tempFile) {
+        return Promise.resolve();
+      }
+
+      return this.getFileData({
+        path: this.file.path,
+        makeFileActive: false,
+      }).then(() =>
+        this.getRawFileData({
+          path: this.file.path,
+        }),
+      );
+    },
     createEditorInstance() {
       this.editor.dispose();
 

app/assets/javascripts/ide/lib/files.js

 import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
-import { decorateData, sortTree } from '../stores/utils';
-
-export const escapeFileUrl = fileUrl => encodeURIComponent(fileUrl).replace(/%2F/g, '/');
+import { decorateData, sortTree, escapeFileUrl } from '../stores/utils';
 
 export const splitParent = path => {
   const idx = path.lastIndexOf('/');

app/assets/javascripts/ide/stores/actions.js

@@ -9,6 +9,7 @@ import { decorateFiles } from '../lib/files';
 import { stageKeys } from '../constants';
 import service from '../services';
 import router from '../ide_router';
+import eventHub from '../eventhub';
 
 export const redirectToUrl = (self, url) => visitUrl(url);
 
@@ -171,8 +172,10 @@ export const setCurrentBranchId = ({ commit }, currentBranchId) => {
 export const updateTempFlagForEntry = ({ commit, dispatch, state }, { file, tempFile }) => {
   commit(types.UPDATE_TEMP_FLAG, { path: file.path, tempFile });
 
-  if (file.parentPath) {
-    dispatch('updateTempFlagForEntry', { file: state.entries[file.parentPath], tempFile });
+  const parent = file.parentPath && state.entries[file.parentPath];
+
+  if (parent) {
+    dispatch('updateTempFlagForEntry', { file: parent, tempFile });
   }
 };
 
@@ -199,51 +202,71 @@ export const openNewEntryModal = ({ commit }, { type, path = '' }) => {
 
 export const deleteEntry = ({ commit, dispatch, state }, path) => {
   const entry = state.entries[path];
-
+  const { prevPath, prevName, prevParentPath } = entry;
+  const isTree = entry.type === 'tree';
+
+  if (prevPath) {
+    dispatch('renameEntry', {
+      path,
+      name: prevName,
+      parentPath: prevParentPath,
+    });
+    dispatch('deleteEntry', prevPath);
+    return;
+  }
   if (state.unusedSeal) dispatch('burstUnusedSeal');
   if (entry.opened) dispatch('closeFile', entry);
 
-  if (entry.type === 'tree') {
+  if (isTree) {
     entry.tree.forEach(f => dispatch('deleteEntry', f.path));
   }
 
   commit(types.DELETE_ENTRY, path);
-  dispatch('stageChange', path);
+
+  // Only stage if we're not a directory or a new file
+  if (!isTree && !entry.tempFile) {
+    dispatch('stageChange', path);
+  }
 
   dispatch('triggerFilesChange');
 };
 
 export const resetOpenFiles = ({ commit }) => commit(types.RESET_OPEN_FILES);
 
-export const renameEntry = (
-  { dispatch, commit, state },
-  { path, name, entryPath = null, parentPath },
-) => {
-  const entry = state.entries[entryPath || path];
+export const renameEntry = ({ dispatch, commit, state }, { path, name, parentPath }) => {
+  const entry = state.entries[path];
+  const newPath = parentPath ? `${parentPath}/${name}` : name;
 
-  commit(types.RENAME_ENTRY, { path, name, entryPath, parentPath });
+  commit(types.RENAME_ENTRY, { path, name, parentPath });
 
   if (entry.type === 'tree') {
-    const slashedParentPath = parentPath ? `${parentPath}/` : '';
-    const targetEntry = entryPath ? entryPath.split('/').pop() : name;
-    const newParentPath = `${slashedParentPath}${targetEntry}`;
-
-    state.entries[entryPath || path].tree.forEach(f => {
+    state.entries[newPath].tree.forEach(f => {
       dispatch('renameEntry', {
-        path,
-        name,
-        entryPath: f.path,
-        parentPath: newParentPath,
+        path: f.path,
+        name: f.name,
+        parentPath: newPath,
       });
     });
   } else {
-    const newPath = parentPath ? `${parentPath}/${name}` : name;
     const newEntry = state.entries[newPath];
-    commit(types.TOGGLE_FILE_CHANGED, { file: newEntry, changed: true });
+    const isRevert = newPath === entry.prevPath;
+    const isReset = isRevert && !newEntry.changed && !newEntry.tempFile;
+    const isInChanges = state.changedFiles
+      .concat(state.stagedFiles)
+      .some(({ key }) => key === newEntry.key);
+
+    if (isReset) {
+      commit(types.REMOVE_FILE_FROM_STAGED_AND_CHANGED, newEntry);
+    } else if (!isInChanges) {
+      commit(types.ADD_FILE_TO_CHANGED, newPath);
+    }
+
+    if (!newEntry.tempFile) {
+      eventHub.$emit(`editor.update.model.dispose.${entry.key}`);
+    }
 
-    if (entry.opened) {
+    if (newEntry.opened) {
       router.push(`/project${newEntry.url}`);
-      commit(types.TOGGLE_FILE_OPEN, entry.path);
     }
   }
 

app/assets/javascripts/ide/stores/actions/file.js

@@ -5,7 +5,7 @@ import eventHub from '../../eventhub';
 import service from '../../services';
 import * as types from '../mutation_types';
 import router from '../../ide_router';
-import { setPageTitle } from '../utils';
+import { setPageTitle, replaceFileUrl } from '../utils';
 import { viewerTypes, stageKeys } from '../../constants';
 
 export const closeFile = ({ commit, state, dispatch }, file) => {
@@ -67,7 +67,7 @@ export const getFileData = (
 
   commit(types.TOGGLE_LOADING, { entry: file });
 
-  const url = file.prevPath ? file.url.replace(file.path, file.prevPath) : file.url;
+  const url = file.prevPath ? replaceFileUrl(file.url, file.path, file.prevPath) : file.url;
 
   return service
     .getFileData(joinPaths(gon.relative_url_root || '', url.replace('/-/', '/')))
@@ -186,11 +186,6 @@ export const discardFileChanges = ({ dispatch, state, commit, getters }, path) =
     dispatch('restoreTree', file.parentPath);
   }
 
-  if (file.movedPath) {
-    commit(types.DISCARD_FILE_CHANGES, file.movedPath);
-    commit(types.REMOVE_FILE_FROM_CHANGED, file.movedPath);
-  }
-
   commit(types.DISCARD_FILE_CHANGES, path);
   commit(types.REMOVE_FILE_FROM_CHANGED, path);
 

app/assets/javascripts/ide/stores/actions/project.js

@@ -92,13 +92,27 @@ export const showEmptyState = ({ commit, state }, { projectId, branchId }) => {
   });
 };
 
-export const openBranch = ({ dispatch, state, getters }, { projectId, branchId, basePath }) => {
-  dispatch('setCurrentBranchId', branchId);
+export const loadFile = ({ dispatch, state }, { basePath }) => {
+  if (basePath) {
+    const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
+    const treeEntryKey = Object.keys(state.entries).find(
+      key => key === path && !state.entries[key].pending,
+    );
+    const treeEntry = state.entries[treeEntryKey];
 
-  if (getters.emptyRepo) {
-    return dispatch('showEmptyState', { projectId, branchId });
+    if (treeEntry) {
+      dispatch('handleTreeEntryAction', treeEntry);
+    } else {
+      dispatch('createTempEntry', {
+        name: path,
+        type: 'blob',
+      });
+    }
   }
-  return dispatch('getBranchData', {
+};
+
+export const loadBranch = ({ dispatch }, { projectId, branchId }) =>
+  dispatch('getBranchData', {
     projectId,
     branchId,
   })
@@ -107,42 +121,38 @@ export const openBranch = ({ dispatch, state, getters }, { projectId, branchId,
         projectId,
         branchId,
       });
-      dispatch('getFiles', {
+      return dispatch('getFiles', {
         projectId,
         branchId,
-      })
-        .then(() => {
-          if (basePath) {
-            const path = basePath.slice(-1) === '/' ? basePath.slice(0, -1) : basePath;
-            const treeEntryKey = Object.keys(state.entries).find(
-              key => key === path && !state.entries[key].pending,
-            );
-            const treeEntry = state.entries[treeEntryKey];
-
-            if (treeEntry) {
-              dispatch('handleTreeEntryAction', treeEntry);
-            } else {
-              dispatch('createTempEntry', {
-                name: path,
-                type: 'blob',
-              });
-            }
-          }
-        })
-        .catch(
-          () =>
-            new Error(
-              sprintf(
-                __('An error occurred whilst getting files for - %{branchId}'),
-                {
-                  branchId: `<strong>${_.escape(projectId)}/${_.escape(branchId)}</strong>`,
-                },
-                false,
-              ),
-            ),
-        );
+      });
     })
     .catch(() => {
       dispatch('showBranchNotFoundError', branchId);
+      return Promise.reject();
     });
+
+export const openBranch = ({ dispatch, state, getters }, { projectId, branchId, basePath }) => {
+  const currentProject = state.projects[projectId];
+  if (getters.emptyRepo) {
+    return dispatch('showEmptyState', { projectId, branchId });
+  }
+  if (!currentProject || !currentProject.branches[branchId]) {
+    dispatch('setCurrentBranchId', branchId);
+
+    return dispatch('loadBranch', { projectId, branchId })
+      .then(() => dispatch('loadFile', { basePath }))
+      .catch(
+        () =>
+          new Error(
+            sprintf(
+              __('An error occurred whilst getting files for - %{branchId}'),
+              {
+                branchId: `<strong>${_.escape(projectId)}/${_.escape(branchId)}</strong>`,
+              },
+              false,
+            ),
+          ),
+      );
+  }
+  return Promise.resolve(dispatch('loadFile', { basePath }));
 };

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -154,8 +154,6 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState, roo
         .then(() => {
           commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
 
-          commit(rootTypes.CLEAR_REPLACED_FILES, null, { root: true });
-
           setTimeout(() => {
             commit(rootTypes.SET_LAST_COMMIT_MSG, '', { root: true });
           }, 5000);

app/assets/javascripts/ide/stores/mutation_types.js

@@ -59,8 +59,7 @@ export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 export const CLEAR_STAGED_CHANGES = 'CLEAR_STAGED_CHANGES';
 export const STAGE_CHANGE = 'STAGE_CHANGE';
 export const UNSTAGE_CHANGE = 'UNSTAGE_CHANGE';
-
-export const CLEAR_REPLACED_FILES = 'CLEAR_REPLACED_FILES';
+export const REMOVE_FILE_FROM_STAGED_AND_CHANGED = 'REMOVE_FILE_FROM_STAGED_AND_CHANGED';
 
 export const UPDATE_FILE_AFTER_COMMIT = 'UPDATE_FILE_AFTER_COMMIT';
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
@@ -79,5 +78,6 @@ export const SET_ERROR_MESSAGE = 'SET_ERROR_MESSAGE';
 export const OPEN_NEW_ENTRY_MODAL = 'OPEN_NEW_ENTRY_MODAL';
 export const DELETE_ENTRY = 'DELETE_ENTRY';
 export const RENAME_ENTRY = 'RENAME_ENTRY';
+export const REVERT_RENAME_ENTRY = 'REVERT_RENAME_ENTRY';
 
 export const RESTORE_TREE = 'RESTORE_TREE';

app/assets/javascripts/ide/stores/mutations.js

@@ -5,7 +5,14 @@ import mergeRequestMutation from './mutations/merge_request';
 import fileMutations from './mutations/file';
 import treeMutations from './mutations/tree';
 import branchMutations from './mutations/branch';
-import { sortTree } from './utils';
+import {
+  sortTree,
+  replaceFileUrl,
+  swapInParentTreeWithSorting,
+  updateFileCollections,
+  removeFromParentTree,
+  pathsAreEqual,
+} from './utils';
 
 export default {
   [types.SET_INITIAL_DATA](state, data) {
@@ -56,11 +63,6 @@ export default {
       stagedFiles: [],
     });
   },
-  [types.CLEAR_REPLACED_FILES](state) {
-    Object.assign(state, {
-      replacedFiles: [],
-    });
-  },
   [types.SET_ENTRIES](state, entries) {
     Object.assign(state, {
       entries,
@@ -157,9 +159,14 @@ export default {
       changed: Boolean(changedFile),
       staged: false,
       replaces: false,
-      prevPath: '',
-      moved: false,
       lastCommitSha: lastCommit.commit.id,
+
+      prevId: undefined,
+      prevPath: undefined,
+      prevName: undefined,
+      prevUrl: undefined,
+      prevKey: undefined,
+      prevParentPath: undefined,
     });
 
     if (prevPath) {
@@ -209,7 +216,9 @@ export default {
 
     entry.deleted = true;
 
-    parent.tree = parent.tree.filter(f => f.path !== entry.path);
+    if (parent) {
+      parent.tree = parent.tree.filter(f => f.path !== entry.path);
+    }
 
     if (entry.type === 'blob') {
       if (tempFile) {
@@ -219,51 +228,61 @@ export default {
       }
     }
   },
-  [types.RENAME_ENTRY](state, { path, name, entryPath = null, parentPath }) {
-    const oldEntry = state.entries[entryPath || path];
-    const slashedParentPath = parentPath ? `${parentPath}/` : '';
-    const newPath = entryPath
-      ? `${slashedParentPath}${oldEntry.name}`
-      : `${slashedParentPath}${name}`;
+  [types.RENAME_ENTRY](state, { path, name, parentPath }) {
+    const oldEntry = state.entries[path];
+    const newPath = parentPath ? `${parentPath}/${name}` : name;
+    const isRevert = newPath === oldEntry.prevPath;
 
-    Vue.set(state.entries, newPath, {
+    const newUrl = replaceFileUrl(oldEntry.url, oldEntry.path, newPath);
+
+    const newKey = oldEntry.key.replace(new RegExp(oldEntry.path, 'g'), newPath);
+
+    const baseProps = {
       ...oldEntry,
+      name,
       id: newPath,
-      key: `${newPath}-${oldEntry.type}-${oldEntry.path}`,
       path: newPath,
-      name: entryPath ? oldEntry.name : name,
-      tempFile: true,
-      prevPath: oldEntry.tempFile ? null : oldEntry.path,
-      url: oldEntry.url.replace(new RegExp(`${oldEntry.path}/?$`), newPath),
-      tree: [],
-      raw: '',
-      opened: false,
-      parentPath,
-    });
+      url: newUrl,
+      key: newKey,
+      parentPath: parentPath || '',
+    };
 
-    oldEntry.moved = true;
-    oldEntry.movedPath = newPath;
+    const prevProps =
+      oldEntry.tempFile || isRevert
+        ? {
+            prevId: undefined,
+            prevPath: undefined,
+            prevName: undefined,
+            prevUrl: undefined,
+            prevKey: undefined,
+            prevParentPath: undefined,
+          }
+        : {
+            prevId: oldEntry.prevId || oldEntry.id,
+            prevPath: oldEntry.prevPath || oldEntry.path,
+            prevName: oldEntry.prevName || oldEntry.name,
+            prevUrl: oldEntry.prevUrl || oldEntry.url,
+            prevKey: oldEntry.prevKey || oldEntry.key,
+            prevParentPath: oldEntry.prevParentPath || oldEntry.parentPath,
+          };
 
-    const parent = parentPath
-      ? state.entries[parentPath]
-      : state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
-    const newEntry = state.entries[newPath];
-
-    parent.tree = sortTree(parent.tree.concat(newEntry));
+    Vue.set(state.entries, newPath, {
+      ...baseProps,
+      ...prevProps,
+    });
 
-    if (newEntry.type === 'blob') {
-      state.changedFiles = state.changedFiles.concat(newEntry);
+    if (pathsAreEqual(oldEntry.parentPath, parentPath)) {
+      swapInParentTreeWithSorting(state, oldEntry.key, newPath, parentPath);
+    } else {
+      removeFromParentTree(state, oldEntry.key, oldEntry.parentPath);
+      swapInParentTreeWithSorting(state, oldEntry.key, newPath, parentPath);
     }
 
-    if (oldEntry.tempFile) {
-      const filterMethod = f => f.path !== oldEntry.path;
-
-      state.openFiles = state.openFiles.filter(filterMethod);
-      state.changedFiles = state.changedFiles.filter(filterMethod);
-      parent.tree = parent.tree.filter(filterMethod);
-
-      Vue.delete(state.entries, oldEntry.path);
+    if (oldEntry.type === 'blob') {
+      updateFileCollections(state, oldEntry.key, newPath);
     }
+
+    Vue.delete(state.entries, oldEntry.path);
   },
 
   ...projectMutations,

app/assets/javascripts/ide/stores/mutations/file.js

@@ -138,8 +138,6 @@ export default {
       content: stagedFile ? stagedFile.content : state.entries[path].raw,
       changed: false,
       deleted: false,
-      moved: false,
-      movedPath: '',
     });
 
     if (deleted) {
@@ -179,11 +177,6 @@ export default {
     });
 
     if (stagedFile) {
-      Object.assign(state, {
-        replacedFiles: state.replacedFiles.concat({
-          ...stagedFile,
-        }),
-      });
       Object.assign(stagedFile, {
         ...state.entries[path],
       });
@@ -252,4 +245,15 @@ export default {
       openFiles: state.openFiles.filter(f => f.key !== file.key),
     });
   },
+  [types.REMOVE_FILE_FROM_STAGED_AND_CHANGED](state, file) {
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.key !== file.key),
+      stagedFiles: state.stagedFiles.filter(f => f.key !== file.key),
+    });
+
+    Object.assign(state.entries[file.path], {
+      changed: false,
+      staged: false,
+    });
+  },
 };

app/assets/javascripts/ide/stores/state.js

@@ -6,7 +6,6 @@ export default () => ({
   currentMergeRequestId: '',
   changedFiles: [],
   stagedFiles: [],
-  replacedFiles: [],
   endpoints: {},
   lastCommitMsg: '',
   lastCommitPath: '',

app/assets/javascripts/ide/stores/utils.js

@@ -50,9 +50,7 @@ export const dataStructure = () => ({
   lastOpenedAt: 0,
   mrChange: null,
   deleted: false,
-  prevPath: '',
-  movedPath: '',
-  moved: false,
+  prevPath: undefined,
 });
 
 export const decorateData = entity => {
@@ -129,7 +127,7 @@ export const commitActionForFile = file => {
 
 export const getCommitFiles = stagedFiles =>
   stagedFiles.reduce((acc, file) => {
-    if (file.moved || file.type === 'tree') return acc;
+    if (file.type === 'tree') return acc;
 
     return acc.concat({
       ...file,
@@ -148,9 +146,9 @@ export const createCommitPayload = ({
   commit_message: state.commitMessage || getters.preBuiltCommitMessage,
   actions: getCommitFiles(rootState.stagedFiles).map(f => ({
     action: commitActionForFile(f),
-    file_path: f.moved ? f.movedPath : f.path,
-    previous_path: f.prevPath === '' ? undefined : f.prevPath,
-    content: f.prevPath ? null : f.content || undefined,
+    file_path: f.path,
+    previous_path: f.prevPath || undefined,
+    content: f.prevPath && !f.changed ? null : f.content || undefined,
     encoding: f.base64 ? 'base64' : 'text',
     last_commit_id:
       newBranch || f.deleted || f.prevPath || f.replaces ? undefined : f.lastCommitSha,
@@ -213,3 +211,61 @@ export const mergeTrees = (fromTree, toTree) => {
 
   return toTree;
 };
+
+export const escapeFileUrl = fileUrl => encodeURIComponent(fileUrl).replace(/%2F/g, '/');
+
+export const replaceFileUrl = (url, oldPath, newPath) => {
+  // Add `/-/` so that we don't accidentally replace project path
+  const result = url.replace(`/-/${escapeFileUrl(oldPath)}`, `/-/${escapeFileUrl(newPath)}`);
+
+  return result;
+};
+
+export const swapInStateArray = (state, arr, key, entryPath) =>
+  Object.assign(state, {
+    [arr]: state[arr].map(f => (f.key === key ? state.entries[entryPath] : f)),
+  });
+
+export const getEntryOrRoot = (state, path) =>
+  path ? state.entries[path] : state.trees[`${state.currentProjectId}/${state.currentBranchId}`];
+
+export const swapInParentTreeWithSorting = (state, oldKey, newPath, parentPath) => {
+  if (!newPath) {
+    return;
+  }
+
+  const parent = getEntryOrRoot(state, parentPath);
+
+  if (parent) {
+    const tree = parent.tree
+      // filter out old entry && new entry
+      .filter(({ key, path }) => key !== oldKey && path !== newPath)
+      // concat new entry
+      .concat(state.entries[newPath]);
+
+    parent.tree = sortTree(tree);
+  }
+};
+
+export const removeFromParentTree = (state, oldKey, parentPath) => {
+  const parent = getEntryOrRoot(state, parentPath);
+
+  if (parent) {
+    parent.tree = sortTree(parent.tree.filter(({ key }) => key !== oldKey));
+  }
+};
+
+export const updateFileCollections = (state, key, entryPath) => {
+  ['openFiles', 'changedFiles', 'stagedFiles'].forEach(fileCollection => {
+    swapInStateArray(state, fileCollection, key, entryPath);
+  });
+};
+
+export const cleanTrailingSlash = path => path.replace(/\/$/, '');
+
+export const pathsAreEqual = (a, b) => {
+  const cleanA = a ? cleanTrailingSlash(a) : '';
+  const cleanB = b ? cleanTrailingSlash(b) : '';
+
+  return cleanA === cleanB;
+};

app/assets/javascripts/vue_shared/components/changed_file_icon.vue

@@ -70,7 +70,13 @@ export default {
       return undefined;
     },
     showIcon() {
-      return this.file.changed || this.file.tempFile || this.file.staged || this.file.deleted;
+      return (
+        this.file.changed ||
+        this.file.tempFile ||
+        this.file.staged ||
+        this.file.deleted ||
+        this.file.prevPath
+      );
     },
   },
 };

app/assets/javascripts/vue_shared/components/file_row.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <template>
-  <div v-if="!file.moved">
+  <div>
     <file-header v-if="file.isHeader" :path="file.path" />
     <div
       v-else

ee/changelogs/unreleased/66293-webide-renaming.yml

+---
+title: Fixed renaming changed files
+merge_request: 16539
+author:
+type: fixed

spec/frontend/ide/lib/files_spec.js

 import { viewerInformationForPath } from '~/vue_shared/components/content_viewer/lib/viewer_utils';
-import { decorateFiles, splitParent, escapeFileUrl } from '~/ide/lib/files';
-import { decorateData } from '~/ide/stores/utils';
+import { decorateFiles, splitParent } from '~/ide/lib/files';
+import { decorateData, escapeFileUrl } from '~/ide/stores/utils';
 
 const TEST_BRANCH_ID = 'lorem-ipsum';
 const TEST_PROJECT_ID = 10;

spec/javascripts/ide/components/commit_sidebar/list_item_spec.js

@@ -2,12 +2,14 @@ import Vue from 'vue';
 import store from '~/ide/stores';
 import listItem from '~/ide/components/commit_sidebar/list_item.vue';
 import router from '~/ide/ide_router';
+import { trimText } from 'spec/helpers/text_helper';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { file, resetStore } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list item', () => {
   let vm;
   let f;
+  let findPathEl;
 
   beforeEach(() => {
     const Component = Vue.extend(listItem);
@@ -21,6 +23,8 @@ describe('Multi-file editor commit sidebar list item', () => {
       actionComponent: 'stage-button',
       activeFileKey: `staged-${f.key}`,
     }).$mount();
+
+    findPathEl = vm.$el.querySelector('.multi-file-commit-list-path');
   });
 
   afterEach(() => {
@@ -29,15 +33,39 @@ describe('Multi-file editor commit sidebar list item', () => {
     resetStore(store);
   });
 
+  const findPathText = () => trimText(findPathEl.textContent);
+
   it('renders file path', () => {
-    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent).toContain(f.path);
+    expect(findPathText()).toContain(f.path);
+  });
+
+  it('correctly renders renamed entries', done => {
+    Vue.set(vm.file, 'prevName', 'Old name');
+
+    vm.$nextTick()
+      .then(() => {
+        expect(findPathText()).toEqual(`Old name → ${f.name}`);
+      })
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('correctly renders entry, the name of which did not change after rename (as within a folder)', done => {
+    Vue.set(vm.file, 'prevName', f.name);
+
+    vm.$nextTick()
+      .then(() => {
+        expect(findPathText()).toEqual(f.name);
+      })
+      .then(done)
+      .catch(done.fail);
   });
 
   it('opens a closed file in the editor when clicking the file path', done => {
     spyOn(vm, 'openPendingTab').and.callThrough();
     spyOn(router, 'push');
 
-    vm.$el.querySelector('.multi-file-commit-list-path').click();
+    findPathEl.click();
 
     setTimeout(() => {
       expect(vm.openPendingTab).toHaveBeenCalled();
@@ -52,7 +80,7 @@ describe('Multi-file editor commit sidebar list item', () => {
     spyOn(vm, 'updateViewer').and.callThrough();
     spyOn(router, 'push');
 
-    vm.$el.querySelector('.multi-file-commit-list-path').click();
+    findPathEl.click();
 
     setTimeout(() => {
       expect(vm.updateViewer).toHaveBeenCalledWith('diff');

spec/javascripts/ide/components/file_row_extra_spec.js

@@ -139,6 +139,27 @@ describe('IDE extra file row component', () => {
         done();
       });
     });
+
+    it('shows when file is renamed', done => {
+      vm.file.prevPath = 'original-file';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon')).not.toBe(null);
+
+        done();
+      });
+    });
+
+    it('hides when file is renamed', done => {
+      vm.file.prevPath = 'original-file';
+      vm.file.type = 'tree';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.querySelector('.file-changed-icon')).toBe(null);
+
+        done();
+      });
+    });
   });
 
   describe('merge request icon', () => {

spec/javascripts/ide/components/ide_tree_list_spec.js

@@ -58,20 +58,6 @@ describe('IDE tree list', () => {
     it('renders list of files', () => {
       expect(vm.$el.textContent).toContain('fileName');
     });
-
-    it('does not render moved entries', done => {
-      const tree = [file('moved entry'), file('normal entry')];
-      tree[0].moved = true;
-      store.state.trees['abcproject/master'].tree = tree;
-      const container = vm.$el.querySelector('.ide-tree-body');
-
-      vm.$nextTick(() => {
-        expect(container.children.length).toBe(1);
-        expect(vm.$el.textContent).not.toContain('moved entry');
-        expect(vm.$el.textContent).toContain('normal entry');
-        done();
-      });
-    });
   });
 
   describe('empty-branch state', () => {

spec/javascripts/ide/components/repo_editor_spec.js

@@ -410,10 +410,23 @@ describe('RepoEditor', () => {
 
   describe('initEditor', () => {
     beforeEach(() => {
+      vm.file.tempFile = false;
       spyOn(vm.editor, 'createInstance');
       spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true);
     });
 
+    it('does not fetch file information for temp entries', done => {
+      vm.file.tempFile = true;
+
+      vm.initEditor();
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.getFileData).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
     it('is being initialised for files without content even if shouldHideEditor is `true`', done => {
       vm.file.content = '';
       vm.file.raw = '';
@@ -429,16 +442,13 @@ describe('RepoEditor', () => {
     });
 
     it('does not initialize editor for files already with content', done => {
-      expect(vm.getFileData.calls.count()).toEqual(1);
-      expect(vm.getRawFileData.calls.count()).toEqual(1);
-
       vm.file.content = 'foo';
 
       vm.initEditor();
       vm.$nextTick()
         .then(() => {
-          expect(vm.getFileData.calls.count()).toEqual(1);
-          expect(vm.getRawFileData.calls.count()).toEqual(1);
+          expect(vm.getFileData).not.toHaveBeenCalled();
+          expect(vm.getRawFileData).not.toHaveBeenCalled();
           expect(vm.editor.createInstance).not.toHaveBeenCalled();
         })
         .then(done)
@@ -446,23 +456,56 @@ describe('RepoEditor', () => {
     });
   });
 
-  it('calls removePendingTab when old file is pending', done => {
-    spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true);
-    spyOn(vm, 'removePendingTab');
+  describe('updates on file changes', () => {
+    beforeEach(() => {
+      spyOn(vm, 'initEditor');
+    });
 
-    vm.file.pending = true;
+    it('calls removePendingTab when old file is pending', done => {
+      spyOnProperty(vm, 'shouldHideEditor').and.returnValue(true);
+      spyOn(vm, 'removePendingTab');
 
-    vm.$nextTick()
-      .then(() => {
-        vm.file = file('testing');
-        vm.file.content = 'foo'; // need to prevent full cycle of initEditor
+      vm.file.pending = true;
+
+      vm.$nextTick()
+        .then(() => {
+          vm.file = file('testing');
+          vm.file.content = 'foo'; // need to prevent full cycle of initEditor
 
-        return vm.$nextTick();
-      })
-      .then(() => {
-        expect(vm.removePendingTab).toHaveBeenCalled();
-      })
-      .then(done)
-      .catch(done.fail);
+          return vm.$nextTick();
+        })
+        .then(() => {
+          expect(vm.removePendingTab).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not call initEditor if the file did not change', done => {
+      Vue.set(vm, 'file', vm.file);
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.initEditor).not.toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls initEditor when file key is changed', done => {
+      expect(vm.initEditor).not.toHaveBeenCalled();
+
+      Vue.set(vm, 'file', {
+        ...vm.file,
+        key: 'new',
+      });
+
+      vm.$nextTick()
+        .then(() => {
+          expect(vm.initEditor).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
   });
 });

spec/javascripts/ide/stores/actions/project_spec.js

@@ -6,8 +6,10 @@ import {
   createNewBranchFromDefault,
   showEmptyState,
   openBranch,
+  loadFile,
+  loadBranch,
 } from '~/ide/stores/actions';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import service from '~/ide/services';
 import api from '~/api';
 import router from '~/ide/ide_router';
@@ -16,8 +18,10 @@ import testAction from '../../../helpers/vuex_action_helper';
 
 describe('IDE store project actions', () => {
   let mock;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
     mock = new MockAdapter(axios);
 
     store.state.projects['abc/def'] = {
@@ -231,28 +235,139 @@ describe('IDE store project actions', () => {
     });
   });
 
+  describe('loadFile', () => {
+    beforeEach(() => {
+      Object.assign(store.state, {
+        entries: {
+          foo: { pending: false },
+          'foo/bar-pending': { pending: true },
+          'foo/bar': { pending: false },
+        },
+      });
+      spyOn(store, 'dispatch');
+    });
+
+    it('does nothing, if basePath is not given', () => {
+      loadFile(store, { basePath: undefined });
+
+      expect(store.dispatch).not.toHaveBeenCalled();
+    });
+
+    it('handles tree entry action, if basePath is given and the entry is not pending', () => {
+      loadFile(store, { basePath: 'foo/bar/' });
+
+      expect(store.dispatch).toHaveBeenCalledWith(
+        'handleTreeEntryAction',
+        store.state.entries['foo/bar'],
+      );
+    });
+
+    it('does not handle tree entry action, if entry is pending', () => {
+      loadFile(store, { basePath: 'foo/bar-pending/' });
+
+      expect(store.dispatch).not.toHaveBeenCalledWith('handleTreeEntryAction', jasmine.anything());
+    });
+
+    it('creates a new temp file supplied via URL if the file does not exist yet', () => {
+      loadFile(store, { basePath: 'not-existent.md' });
+
+      expect(store.dispatch.calls.count()).toBe(1);
+
+      expect(store.dispatch).not.toHaveBeenCalledWith('handleTreeEntryAction', jasmine.anything());
+
+      expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
+        name: 'not-existent.md',
+        type: 'blob',
+      });
+    });
+  });
+
+  describe('loadBranch', () => {
+    const projectId = 'abc/def';
+    const branchId = '123-lorem';
+
+    it('fetches branch data', done => {
+      spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
+
+      loadBranch(store, { projectId, branchId })
+        .then(() => {
+          expect(store.dispatch.calls.allArgs()).toEqual([
+            ['getBranchData', { projectId, branchId }],
+            ['getMergeRequestsForBranch', { projectId, branchId }],
+            ['getFiles', { projectId, branchId }],
+          ]);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('shows an error if branch can not be fetched', done => {
+      spyOn(store, 'dispatch').and.returnValue(Promise.reject());
+
+      loadBranch(store, { projectId, branchId })
+        .then(done.fail)
+        .catch(() => {
+          expect(store.dispatch.calls.allArgs()).toEqual([
+            ['getBranchData', { projectId, branchId }],
+            ['showBranchNotFoundError', branchId],
+          ]);
+          done();
+        });
+    });
+  });
+
   describe('openBranch', () => {
+    const projectId = 'abc/def';
+    const branchId = '123-lorem';
+
     const branch = {
-      projectId: 'abc/def',
-      branchId: '123-lorem',
+      projectId,
+      branchId,
     };
 
     beforeEach(() => {
-      store.state.entries = {
-        foo: { pending: false },
-        'foo/bar-pending': { pending: true },
-        'foo/bar': { pending: false },
-      };
+      Object.assign(store.state, {
+        entries: {
+          foo: { pending: false },
+          'foo/bar-pending': { pending: true },
+          'foo/bar': { pending: false },
+        },
+      });
+    });
+
+    it('loads file right away if the branch has already been fetched', done => {
+      spyOn(store, 'dispatch');
+
+      Object.assign(store.state, {
+        projects: {
+          [projectId]: {
+            branches: {
+              [branchId]: { foo: 'bar' },
+            },
+          },
+        },
+      });
+
+      openBranch(store, branch)
+        .then(() => {
+          expect(store.dispatch.calls.allArgs()).toEqual([['loadFile', { basePath: undefined }]]);
+        })
+        .then(done)
+        .catch(done.fail);
     });
 
     describe('empty repo', () => {
       beforeEach(() => {
         spyOn(store, 'dispatch').and.returnValue(Promise.resolve());
 
-        store.state.currentProjectId = 'abc/def';
-        store.state.projects['abc/def'] = {
-          empty_repo: true,
-        };
+        Object.assign(store.state, {
+          currentProjectId: 'abc/def',
+          projects: {
+            'abc/def': {
+              empty_repo: true,
+            },
+          },
+        });
       });
 
       afterEach(() => {
@@ -262,10 +377,7 @@ describe('IDE store project actions', () => {
       it('dispatches showEmptyState action right away', done => {
         openBranch(store, branch)
           .then(() => {
-            expect(store.dispatch.calls.allArgs()).toEqual([
-              ['setCurrentBranchId', branch.branchId],
-              ['showEmptyState', branch],
-            ]);
+            expect(store.dispatch.calls.allArgs()).toEqual([['showEmptyState', branch]]);
             done();
           })
           .catch(done.fail);
@@ -281,56 +393,14 @@ describe('IDE store project actions', () => {
         openBranch(store, branch)
           .then(() => {
             expect(store.dispatch.calls.allArgs()).toEqual([
-              ['setCurrentBranchId', branch.branchId],
-              ['getBranchData', branch],
-              ['getMergeRequestsForBranch', branch],
-              ['getFiles', branch],
+              ['setCurrentBranchId', branchId],
+              ['loadBranch', { projectId, branchId }],
+              ['loadFile', { basePath: undefined }],
             ]);
           })
           .then(done)
           .catch(done.fail);
       });
-
-      it('handles tree entry action, if basePath is given', done => {
-        openBranch(store, { ...branch, basePath: 'foo/bar/' })
-          .then(() => {
-            expect(store.dispatch).toHaveBeenCalledWith(
-              'handleTreeEntryAction',
-              store.state.entries['foo/bar'],
-            );
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-
-      it('does not handle tree entry action, if entry is pending', done => {
-        openBranch(store, { ...branch, basePath: 'foo/bar-pending' })
-          .then(() => {
-            expect(store.dispatch).not.toHaveBeenCalledWith(
-              'handleTreeEntryAction',
-              jasmine.anything(),
-            );
-          })
-          .then(done)
-          .catch(done.fail);
-      });
-
-      it('creates a new file supplied via URL if the file does not exist yet', done => {
-        openBranch(store, { ...branch, basePath: 'not-existent.md' })
-          .then(() => {
-            expect(store.dispatch).not.toHaveBeenCalledWith(
-              'handleTreeEntryAction',
-              jasmine.anything(),
-            );
-
-            expect(store.dispatch).toHaveBeenCalledWith('createTempEntry', {
-              name: 'not-existent.md',
-              type: 'blob',
-            });
-          })
-          .then(done)
-          .catch(done.fail);
-      });
     });
 
     describe('non-existent branch', () => {
@@ -342,9 +412,8 @@ describe('IDE store project actions', () => {
         openBranch(store, branch)
           .then(() => {
             expect(store.dispatch.calls.allArgs()).toEqual([
-              ['setCurrentBranchId', branch.branchId],
-              ['getBranchData', branch],
-              ['showBranchNotFoundError', branch.branchId],
+              ['setCurrentBranchId', branchId],
+              ['loadBranch', { projectId, branchId }],
             ]);
           })
           .then(done)

spec/javascripts/ide/stores/modules/commit/actions_spec.js

 import rootActions from '~/ide/stores/actions';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import service from '~/ide/services';
 import router from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
@@ -11,6 +11,7 @@ import { resetStore, file } from 'spec/ide/helpers';
 import testAction from '../../../../helpers/vuex_action_helper';
 
 const TEST_COMMIT_SHA = '123456789';
+const store = createStore();
 
 describe('IDE commit module actions', () => {
   beforeEach(() => {
@@ -59,7 +60,9 @@ describe('IDE commit module actions', () => {
     });
 
     it('sets shouldCreateMR to true if "Create new MR" option is visible', done => {
-      store.state.shouldHideNewMrOption = false;
+      Object.assign(store.state, {
+        shouldHideNewMrOption: false,
+      });
 
       testAction(
         actions.updateCommitAction,
@@ -78,7 +81,9 @@ describe('IDE commit module actions', () => {
     });
 
     it('sets shouldCreateMR to false if "Create new MR" option is hidden', done => {
-      store.state.shouldHideNewMrOption = true;
+      Object.assign(store.state, {
+        shouldHideNewMrOption: true,
+      });
 
       testAction(
         actions.updateCommitAction,
@@ -172,24 +177,31 @@ describe('IDE commit module actions', () => {
         content: 'file content',
       });
 
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'master';
-      store.state.projects.abcproject = {
-        web_url: 'web_url',
-        branches: {
-          master: {
-            workingReference: '',
-            commit: {
-              short_id: TEST_COMMIT_SHA,
+      Object.assign(store.state, {
+        currentProjectId: 'abcproject',
+        currentBranchId: 'master',
+        projects: {
+          abcproject: {
+            web_url: 'web_url',
+            branches: {
+              master: {
+                workingReference: '',
+                commit: {
+                  short_id: TEST_COMMIT_SHA,
+                },
+              },
             },
           },
         },
-      };
-      store.state.stagedFiles.push(f, {
-        ...file('changedFile2'),
-        changed: true,
+        stagedFiles: [
+          f,
+          {
+            ...file('changedFile2'),
+            changed: true,
+          },
+        ],
+        openFiles: store.state.stagedFiles,
       });
-      store.state.openFiles = store.state.stagedFiles;
 
       store.state.stagedFiles.forEach(stagedFile => {
         store.state.entries[stagedFile.path] = stagedFile;
@@ -275,40 +287,40 @@ describe('IDE commit module actions', () => {
 
       document.body.innerHTML += '<div class="flash-container"></div>';
 
-      store.state.currentProjectId = 'abcproject';
-      store.state.currentBranchId = 'master';
-      store.state.projects.abcproject = {
-        web_url: 'webUrl',
-        branches: {
-          master: {
-            workingReference: '1',
-            commit: {
-              id: TEST_COMMIT_SHA,
-            },
-          },
-        },
-      };
-
       const f = {
         ...file('changed'),
         type: 'blob',
         active: true,
         lastCommitSha: TEST_COMMIT_SHA,
       };
-      store.state.stagedFiles.push(f);
-      store.state.changedFiles = [
-        {
-          ...f,
-        },
-      ];
-      store.state.openFiles = store.state.changedFiles;
 
-      store.state.openFiles.forEach(localF => {
-        store.state.entries[localF.path] = localF;
+      Object.assign(store.state, {
+        stagedFiles: [f],
+        changedFiles: [f],
+        openFiles: [f],
+        currentProjectId: 'abcproject',
+        currentBranchId: 'master',
+        projects: {
+          abcproject: {
+            web_url: 'webUrl',
+            branches: {
+              master: {
+                workingReference: '1',
+                commit: {
+                  id: TEST_COMMIT_SHA,
+                },
+              },
+            },
+          },
+        },
       });
 
       store.state.commit.commitAction = '2';
       store.state.commit.commitMessage = 'testing 123';
+
+      store.state.openFiles.forEach(localF => {
+        store.state.entries[localF.path] = localF;
+      });
     });
 
     afterEach(() => {

spec/javascripts/ide/stores/mutations/file_spec.js

@@ -356,16 +356,16 @@ describe('IDE store file mutations', () => {
   });
 
   describe('STAGE_CHANGE', () => {
-    it('adds file into stagedFiles array', () => {
+    beforeEach(() => {
       mutations.STAGE_CHANGE(localState, localFile.path);
+    });
 
+    it('adds file into stagedFiles array', () => {
       expect(localState.stagedFiles.length).toBe(1);
       expect(localState.stagedFiles[0]).toEqual(localFile);
     });
 
     it('updates stagedFile if it is already staged', () => {
-      mutations.STAGE_CHANGE(localState, localFile.path);
-
       localFile.raw = 'testing 123';
 
       mutations.STAGE_CHANGE(localState, localFile.path);
@@ -373,19 +373,6 @@ describe('IDE store file mutations', () => {
       expect(localState.stagedFiles.length).toBe(1);
       expect(localState.stagedFiles[0].raw).toEqual('testing 123');
     });
-
-    it('adds already-staged file to `replacedFiles`', () => {
-      localFile.raw = 'already-staged';
-
-      mutations.STAGE_CHANGE(localState, localFile.path);
-
-      localFile.raw = 'testing 123';
-
-      mutations.STAGE_CHANGE(localState, localFile.path);
-
-      expect(localState.replacedFiles.length).toBe(1);
-      expect(localState.replacedFiles[0].raw).toEqual('already-staged');
-    });
   });
 
   describe('UNSTAGE_CHANGE', () => {

spec/javascripts/ide/stores/utils_spec.js

@@ -237,31 +237,6 @@ describe('Multi-file store utils', () => {
   });
 
   describe('getCommitFiles', () => {
-    it('returns list of files excluding moved files', () => {
-      const files = [
-        {
-          path: 'a',
-          type: 'blob',
-          deleted: true,
-        },
-        {
-          path: 'c',
-          type: 'blob',
-          moved: true,
-        },
-      ];
-
-      const flattendFiles = utils.getCommitFiles(files);
-
-      expect(flattendFiles).toEqual([
-        {
-          path: 'a',
-          type: 'blob',
-          deleted: true,
-        },
-      ]);
-    });
-
     it('filters out folders from the list', () => {
       const files = [
         {
@@ -422,4 +397,204 @@ describe('Multi-file store utils', () => {
       expect(res[1].tree[0].opened).toEqual(true);
     });
   });
+
+  describe('escapeFileUrl', () => {
+    it('encodes URL excluding the slashes', () => {
+      expect(utils.escapeFileUrl('/foo-bar/file.md')).toBe('/foo-bar/file.md');
+      expect(utils.escapeFileUrl('foo bar/file.md')).toBe('foo%20bar/file.md');
+      expect(utils.escapeFileUrl('foo/bar/file.md')).toBe('foo/bar/file.md');
+    });
+  });
+
+  describe('swapInStateArray', () => {
+    let localState;
+
+    beforeEach(() => {
+      localState = [];
+    });
+
+    it('swaps existing entry with a new one', () => {
+      const file1 = {
+        ...file('old'),
+        key: 'foo',
+      };
+      const file2 = file('new');
+      const arr = [file1];
+
+      Object.assign(localState, {
+        dummyArray: arr,
+        entries: {
+          new: file2,
+        },
+      });
+
+      utils.swapInStateArray(localState, 'dummyArray', 'foo', 'new');
+
+      expect(localState.dummyArray.length).toBe(1);
+      expect(localState.dummyArray[0]).toBe(file2);
+    });
+
+    it('does not add an item if it does not exist yet in array', () => {
+      const file1 = file('file');
+      Object.assign(localState, {
+        dummyArray: [],
+        entries: {
+          file: file1,
+        },
+      });
+
+      utils.swapInStateArray(localState, 'dummyArray', 'foo', 'file');
+
+      expect(localState.dummyArray.length).toBe(0);
+    });
+  });
+
+  describe('swapInParentTreeWithSorting', () => {
+    let localState;
+    let branchInfo;
+    const currentProjectId = '123-foo';
+    const currentBranchId = 'master';
+
+    beforeEach(() => {
+      localState = {
+        currentBranchId,
+        currentProjectId,
+        trees: {
+          [`${currentProjectId}/${currentBranchId}`]: {
+            tree: [],
+          },
+        },
+        entries: {
+          oldPath: file('oldPath', 'oldPath', 'blob'),
+          newPath: file('newPath', 'newPath', 'blob'),
+          parentPath: file('parentPath', 'parentPath', 'tree'),
+        },
+      };
+      branchInfo = localState.trees[`${currentProjectId}/${currentBranchId}`];
+    });
+
+    it('does not change tree if newPath is not supplied', () => {
+      branchInfo.tree = [localState.entries.oldPath];
+
+      utils.swapInParentTreeWithSorting(localState, 'oldPath', undefined, undefined);
+
+      expect(branchInfo.tree).toEqual([localState.entries.oldPath]);
+    });
+
+    describe('oldPath to replace is not defined: simple addition to tree', () => {
+      it('adds to tree on the state if there is no parent for the entry', () => {
+        expect(branchInfo.tree.length).toBe(0);
+
+        utils.swapInParentTreeWithSorting(localState, undefined, 'oldPath', undefined);
+
+        expect(branchInfo.tree.length).toBe(1);
+        expect(branchInfo.tree[0].name).toBe('oldPath');
+
+        utils.swapInParentTreeWithSorting(localState, undefined, 'newPath', undefined);
+
+        expect(branchInfo.tree.length).toBe(2);
+        expect(branchInfo.tree).toEqual([
+          jasmine.objectContaining({ name: 'newPath' }),
+          jasmine.objectContaining({ name: 'oldPath' }),
+        ]);
+      });
+
+      it('adds to parent tree if it is supplied', () => {
+        utils.swapInParentTreeWithSorting(localState, undefined, 'newPath', 'parentPath');
+
+        expect(localState.entries.parentPath.tree.length).toBe(1);
+        expect(localState.entries.parentPath.tree).toEqual([
+          jasmine.objectContaining({ name: 'newPath' }),
+        ]);
+
+        localState.entries.parentPath.tree = [localState.entries.oldPath];
+
+        utils.swapInParentTreeWithSorting(localState, undefined, 'newPath', 'parentPath');
+
+        expect(localState.entries.parentPath.tree.length).toBe(2);
+        expect(localState.entries.parentPath.tree).toEqual([
+          jasmine.objectContaining({ name: 'newPath' }),
+          jasmine.objectContaining({ name: 'oldPath' }),
+        ]);
+      });
+    });
+
+    describe('swapping of the items', () => {
+      it('swaps entries if both paths are supplied', () => {
+        branchInfo.tree = [localState.entries.oldPath];
+
+        utils.swapInParentTreeWithSorting(localState, localState.entries.oldPath.key, 'newPath');
+
+        expect(branchInfo.tree).toEqual([jasmine.objectContaining({ name: 'newPath' })]);
+
+        utils.swapInParentTreeWithSorting(localState, localState.entries.newPath.key, 'oldPath');
+
+        expect(branchInfo.tree).toEqual([jasmine.objectContaining({ name: 'oldPath' })]);
+      });
+
+      it('sorts tree after swapping the entries', () => {
+        const alpha = file('alpha', 'alpha', 'blob');
+        const beta = file('beta', 'beta', 'blob');
+        const gamma = file('gamma', 'gamma', 'blob');
+        const theta = file('theta', 'theta', 'blob');
+        localState.entries = { alpha, beta, gamma, theta };
+
+        branchInfo.tree = [alpha, beta, gamma];
+
+        utils.swapInParentTreeWithSorting(localState, alpha.key, 'theta');
+
+        expect(branchInfo.tree).toEqual([
+          jasmine.objectContaining({ name: 'beta' }),
+          jasmine.objectContaining({ name: 'gamma' }),
+          jasmine.objectContaining({ name: 'theta' }),
+        ]);
+
+        utils.swapInParentTreeWithSorting(localState, gamma.key, 'alpha');
+
+        expect(branchInfo.tree).toEqual([
+          jasmine.objectContaining({ name: 'alpha' }),
+          jasmine.objectContaining({ name: 'beta' }),
+          jasmine.objectContaining({ name: 'theta' }),
+        ]);
+
+        utils.swapInParentTreeWithSorting(localState, beta.key, 'gamma');
+
+        expect(branchInfo.tree).toEqual([
+          jasmine.objectContaining({ name: 'alpha' }),
+          jasmine.objectContaining({ name: 'gamma' }),
+          jasmine.objectContaining({ name: 'theta' }),
+        ]);
+      });
+    });
+  });
+
+  describe('cleanTrailingSlash', () => {
+    [
+      { input: '', output: '' },
+      { input: 'abc', output: 'abc' },
+      { input: 'abc/', output: 'abc' },
+      { input: 'abc/def', output: 'abc/def' },
+      { input: 'abc/def/', output: 'abc/def' },
+    ].forEach(({ input, output }) => {
+      it(`cleans trailing slash from string "${input}"`, () => {
+        expect(utils.cleanTrailingSlash(input)).toEqual(output);
+      });
+    });
+  });
+
+  describe('pathsAreEqual', () => {
+    [
+      { args: ['abc', 'abc'], output: true },
+      { args: ['abc', 'def'], output: false },
+      { args: ['abc/', 'abc'], output: true },
+      { args: ['abc/abc', 'abc'], output: false },
+      { args: ['/', ''], output: true },
+      { args: ['', '/'], output: true },
+      { args: [false, '/'], output: true },
+    ].forEach(({ args, output }) => {
+      it(`cleans and tests equality (${JSON.stringify(args)})`, () => {
+        expect(utils.pathsAreEqual(...args)).toEqual(output);
+      });
+    });
+  });
 });

spec/javascripts/vue_shared/components/file_row_spec.js

@@ -90,19 +90,6 @@ describe('File row component', () => {
     expect(vm.$el.querySelector('.js-file-row-header')).not.toBe(null);
   });
 
-  it('is not rendered for `moved` entries in subfolders', () => {
-    createComponent({
-      file: {
-        path: 't5',
-        moved: true,
-        tree: [],
-      },
-      level: 2,
-    });
-
-    expect(vm.$el.nodeType).not.toEqual(1);
-  });
-
   describe('new dropdown', () => {
     beforeEach(() => {
       createComponent({