Fixed mutation for root

- fixed test spec
- added warning only if file is deleted

4 files changed, 73 insertions, 23 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index d7a7b1b4d78..593a9162a06 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -1,7 +1,6 @@
 <script>
 import { mapActions } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
-import newModal from './modal.vue';
 import upload from './upload.vue';
 import ItemButton from './button.vue';
 import { modalTypes } from '../../constants';
@@ -9,7 +8,6 @@ import { modalTypes } from '../../constants';
 export default {
   components: {
     icon,
-    newModal,
     upload,
     ItemButton,
   },
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index c9c4e9e86f8..ba6bbdfef4b 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,6 +1,7 @@
 <script>
 import $ from 'jquery';
-import { __ } from '~/locale';
+import flash from '~/flash';
+import { __, sprintf, s__ } from '~/locale';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { modalTypes } from '../../constants';
@@ -15,15 +16,17 @@ export default {
     };
   },
   computed: {
-    ...mapState(['entryModal']),
+    ...mapState(['entries', 'entryModal']),
     ...mapGetters('fileTemplates', ['templateTypes']),
     entryName: {
       get() {
+        const entryPath = this.entryModal.entry.path;
+
         if (this.entryModal.type === modalTypes.rename) {
-          return this.name || this.entryModal.entry.name;
+          return this.name || entryPath;
         }
 
-        return this.name || (this.entryModal.path !== '' ? `${this.entryModal.path}/` : '');
+        return this.name || (entryPath ? `${entryPath}/` : '');
       },
       set(val) {
         this.name = val;
@@ -62,10 +65,40 @@ export default {
     ...mapActions(['createTempEntry', 'renameEntry']),
     submitForm() {
       if (this.entryModal.type === modalTypes.rename) {
-        this.renameEntry({
-          path: this.entryModal.entry.path,
-          name: this.entryName,
-        });
+        if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
+          flash(
+            sprintf(s__('The name %{entryName} is already taken in this directory.'), {
+              entryName: this.entryName,
+            }),
+            'alert',
+            document,
+            null,
+            false,
+            true,
+          );
+        } else {
+          let parentPath = this.entryName.split('/');
+          const entryName = parentPath.pop();
+          parentPath = parentPath.join('/');
+
+          const createPromise =
+            parentPath && !this.entries[parentPath]
+              ? this.createTempEntry({ name: parentPath, type: 'tree' })
+              : Promise.resolve();
+
+          createPromise
+            .then(() =>
+              this.renameEntry({
+                path: this.entryModal.entry.path,
+                name: entryName,
+                entryPath: null,
+                parentPath,
+              }),
+            )
+            .catch(() =>
+              flash(__('Error creating a new path'), 'alert', document, null, false, true),
+            );
+        }
       } else {
         this.createTempEntry({
           name: this.name,
@@ -82,7 +115,14 @@ export default {
       $('#ide-new-entry').modal('toggle');
     },
     focusInput() {
+      const name = this.entries[this.entryName] ? this.entries[this.entryName].name : null;
+      const inputValue = this.$refs.fieldName.value;
+
       this.$refs.fieldName.focus();
+
+      if (name) {
+        this.$refs.fieldName.setSelectionRange(inputValue.indexOf(name), inputValue.length);
+      }
     },
     closedModal() {
       this.name = '';
diff --git a/app/assets/javascripts/ide/stores/actions.js b/app/assets/javascripts/ide/stores/actions.js
index e10a132ab4b..95d91e08757 100644
--- a/app/assets/javascripts/ide/stores/actions.js
+++ b/app/assets/javascripts/ide/stores/actions.js
@@ -215,15 +215,27 @@ export const deleteEntry = ({ commit, dispatch, state }, path) => {
 
 export const resetOpenFiles = ({ commit }) => commit(types.RESET_OPEN_FILES);
 
-export const renameEntry = ({ dispatch, commit, state }, { path, name, entryPath = null }) => {
+export const renameEntry = (
+  { dispatch, commit, state },
+  { path, name, entryPath = null, parentPath },
+) => {
   const entry = state.entries[entryPath || path];
 
-  commit(types.RENAME_ENTRY, { path, name, entryPath });
+  commit(types.RENAME_ENTRY, { path, name, entryPath, parentPath });
 
   if (entry.type === 'tree') {
-    state.entries[entryPath || path].tree.forEach(f =>
-      dispatch('renameEntry', { path, name, entryPath: f.path }),
-    );
+    const slashedParentPath = parentPath ? `${parentPath}/` : '';
+    const targetEntry = entryPath ? entryPath.split('/').pop() : name;
+    const newParentPath = `${slashedParentPath}${targetEntry}`;
+
+    state.entries[entryPath || path].tree.forEach(f => {
+      dispatch('renameEntry', {
+        path,
+        name,
+        entryPath: f.path,
+        parentPath: newParentPath,
+      });
+    });
   }
 
   if (!entryPath && !entry.tempFile) {
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 78cdfda74f0..9b9f4b21f1c 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -206,19 +206,17 @@ export default {
       }
     }
   },
-  [types.RENAME_ENTRY](state, { path, name, entryPath = null }) {
+  [types.RENAME_ENTRY](state, { path, name, entryPath = null, parentPath }) {
     const oldEntry = state.entries[entryPath || path];
-    const nameRegex =
-      !entryPath && oldEntry.type === 'blob'
-        ? new RegExp(`${oldEntry.name}$`)
-        : new RegExp(`^${path}`);
-    const newPath = oldEntry.path.replace(nameRegex, name);
-    const parentPath = oldEntry.parentPath ? oldEntry.parentPath.replace(nameRegex, name) : '';
+    const slashedParentPath = parentPath ? `${parentPath}/` : '';
+    const newPath = entryPath
+      ? `${slashedParentPath}${oldEntry.name}`
+      : `${slashedParentPath}${name}`;
 
     state.entries[newPath] = {
       ...oldEntry,
       id: newPath,
-      key: `${name}-${oldEntry.type}-${oldEntry.id}`,
+      key: `${newPath}-${oldEntry.type}-${oldEntry.id}`,
       path: newPath,
       name: entryPath ? oldEntry.name : name,
       tempFile: true,
@@ -228,6 +226,7 @@ export default {
       parentPath,
       raw: '',
     };
+
     oldEntry.moved = true;
     oldEntry.movedPath = newPath;
 
@@ -256,6 +255,7 @@ export default {
       Vue.delete(state.entries, oldEntry.path);
     }
   },
+
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,