Merge branch '24525-ide-renaming-issue' into 'master'

Fix error renaming files using web IDE

See merge request gitlab-org/gitlab!30969

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

@@ -11,32 +11,20 @@ export default {
   },
   data() {
     return {
-      name: '',
-      type: modalTypes.blob,
+      entryName: '',
+      modalType: modalTypes.blob,
       path: '',
     };
   },
   computed: {
     ...mapState(['entries']),
     ...mapGetters('fileTemplates', ['templateTypes']),
-    entryName: {
-      get() {
-        if (this.type === modalTypes.rename) {
-          return this.name || this.path;
-        }
-
-        return this.name || (this.path ? `${this.path}/` : '');
-      },
-      set(val) {
-        this.name = val.trim();
-      },
-    },
     modalTitle() {
       const entry = this.entries[this.path];
 
-      if (this.type === modalTypes.tree) {
+      if (this.modalType === modalTypes.tree) {
         return __('Create new directory');
-      } else if (this.type === modalTypes.rename) {
+      } else if (this.modalType === modalTypes.rename) {
         return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
@@ -45,16 +33,16 @@ export default {
     buttonLabel() {
       const entry = this.entries[this.path];
 
-      if (this.type === modalTypes.tree) {
+      if (this.modalType === modalTypes.tree) {
         return __('Create directory');
-      } else if (this.type === modalTypes.rename) {
+      } else if (this.modalType === modalTypes.rename) {
         return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create file');
     },
     isCreatingNewFile() {
-      return this.type === modalTypes.blob;
+      return this.modalType === modalTypes.blob;
     },
     placeholder() {
       return this.isCreatingNewFile ? 'dir/file_name' : 'dir/';
@@ -63,8 +51,8 @@ export default {
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
     submitForm() {
-      if (this.type === modalTypes.rename) {
-        if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
+      if (this.modalType === modalTypes.rename) {
+        if (!this.entries[this.entryName]?.deleted) {
           flash(
             sprintf(s__('The name "%{name}" is already taken in this directory.'), {
               name: this.entryName,
@@ -77,32 +65,32 @@ export default {
           );
         } else {
           let parentPath = this.entryName.split('/');
-          const entryName = parentPath.pop();
+          const name = parentPath.pop();
           parentPath = parentPath.join('/');
 
           this.renameEntry({
             path: this.path,
-            name: entryName,
+            name,
             parentPath,
           });
         }
       } else {
         this.createTempEntry({
-          name: this.name,
-          type: this.type,
+          name: this.entryName,
+          type: this.modalType,
         });
       }
     },
     createFromTemplate(template) {
       this.createTempEntry({
         name: template.name,
-        type: this.type,
+        type: this.modalType,
       });
 
       this.$refs.modal.toggle();
     },
     focusInput() {
-      const name = this.entries[this.entryName] ? this.entries[this.entryName].name : null;
+      const name = this.entries[this.entryName]?.name;
       const inputValue = this.$refs.fieldName.value;
 
       this.$refs.fieldName.focus();
@@ -112,19 +100,24 @@ export default {
       }
     },
     resetData() {
-      this.name = '';
+      this.entryName = '';
       this.path = '';
-      this.type = modalTypes.blob;
+      this.modalType = modalTypes.blob;
     },
     open(type = modalTypes.blob, path = '') {
-      this.type = type;
+      this.modalType = type;
       this.path = path;
+
+      if (this.modalType === modalTypes.rename) {
+        this.entryName = path;
+      } else {
+        this.entryName = path ? `${path}/` : '';
+      }
+
       this.$refs.modal.show();
 
       // wait for modal to show first
-      this.$nextTick(() => {
-        this.focusInput();
-      });
+      this.$nextTick(() => this.focusInput());
     },
     close() {
       this.$refs.modal.hide();
@@ -150,7 +143,7 @@ export default {
       <div class="col-sm-10">
         <input
           ref="fieldName"
-          v-model="entryName"
+          v-model.trim="entryName"
           type="text"
           class="form-control qa-full-file-path"
           :placeholder="placeholder"

changelogs/unreleased/24525-ide-renaming-issue.yml

+---
+title: Fix error renaming files using web IDE
+merge_request: 30969
+author:
+type: fixed

spec/frontend/ide/components/new_dropdown/modal_spec.js

@@ -91,22 +91,31 @@ describe('new file modal component', () => {
         expect(vm.entryName).toBe('test-path');
       });
 
-      it('updated name', () => {
-        vm.name = 'index.js';
+      it('does not reset entryName to its old value if empty', () => {
+        vm.entryName = 'hello';
+        vm.entryName = '';
 
-        expect(vm.entryName).toBe('index.js');
+        expect(vm.entryName).toBe('');
+      });
+    });
+
+    describe('open', () => {
+      it('sets entryName to path provided if modalType is rename', () => {
+        vm.open('rename', 'test-path');
+
+        expect(vm.entryName).toBe('test-path');
       });
 
-      it('removes leading/trailing spaces when found in the new name', () => {
-        vm.entryName = ' index.js ';
+      it("appends '/' to the path if modalType isn't rename", () => {
+        vm.open('blob', 'test-path');
 
-        expect(vm.entryName).toBe('index.js');
+        expect(vm.entryName).toBe('test-path/');
       });
 
-      it('does not remove internal spaces in the file name', () => {
-        vm.entryName = ' In Praise of Idleness.txt ';
+      it('leaves entryName blank if no path is provided', () => {
+        vm.open('blob');
 
-        expect(vm.entryName).toBe('In Praise of Idleness.txt');
+        expect(vm.entryName).toBe('');
       });
     });
   });