Enable renaming files & folders in the Web IDE

Closes #44845

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

@@ -109,6 +109,15 @@ export default {
           </li>
           <li class="divider"></li>
         </template>
+        <li>
+          <item-button
+            :label="__('Rename')"
+            class="d-flex"
+            icon="pencil"
+            icon-classes="mr-2"
+            @click="createNewItem('rename')"
+          />
+        </li>
         <li>
           <item-button
             :label="__('Delete')"

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

@@ -13,24 +13,30 @@ export default {
     };
   },
   computed: {
-    ...mapState(['newEntryModal']),
+    ...mapState(['entryModal']),
     entryName: {
       get() {
-        return this.name || (this.newEntryModal.path !== '' ? `${this.newEntryModal.path}/` : '');
+        if (this.entryModal.type === 'rename') return this.name || this.entryModal.entry.name;
+
+        return this.name || (this.entryModal.path !== '' ? `${this.entryModal.path}/` : '');
       },
       set(val) {
         this.name = val;
       },
     },
     modalTitle() {
-      if (this.newEntryModal.type === 'tree') {
+      if (this.entryModal.type === 'rename') return __('Rename');
+
+      if (this.entryModal.type === 'tree') {
         return __('Create new directory');
       }
 
       return __('Create new file');
     },
     buttonLabel() {
-      if (this.newEntryModal.type === 'tree') {
+      if (this.entryModal.type === 'rename') return __('Update');
+
+      if (this.entryModal.type === 'tree') {
         return __('Create directory');
       }
 
@@ -42,7 +48,7 @@ export default {
     createEntryInStore() {
       this.createTempEntry({
         name: this.name,
-        type: this.newEntryModal.type,
+        type: this.entryModal.type,
       });
     },
     focusInput() {

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

@@ -134,8 +134,7 @@ export default {
         .replace(/[/]$/g, '');
 
       // - strip ending "/"
-      const filePath = this.file.path
-        .replace(/[/]$/g, '');
+      const filePath = this.file.path.replace(/[/]$/g, '');
 
       return filePath === routePath;
     },
@@ -208,7 +207,6 @@ export default {
         </span>
         <new-dropdown
           :type="file.type"
-          :branch="file.branchId"
           :path="file.path"
           :mouse-over="mouseOver"
           class="float-right prepend-left-8"

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

@@ -169,7 +169,11 @@ export default {
   },
   [types.OPEN_NEW_ENTRY_MODAL](state, { type, path }) {
     Object.assign(state, {
-      newEntryModal: { type, path },
+      entryModal: {
+        type,
+        path,
+        entry: { ...state.entries[path] },
+      },
     });
   },
   [types.DELETE_ENTRY](state, path) {

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

@@ -26,8 +26,9 @@ export default () => ({
   rightPane: null,
   links: {},
   errorMessage: null,
-  newEntryModal: {
+  entryModal: {
     type: '',
     path: '',
+    entry: {},
   },
 });

changelogs/unreleased/ide-rename-files.yml

+---
+title: Enable renaming files and folders in Web IDE
+merge_request:
+author:
+type: added

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

@@ -15,7 +15,7 @@ describe('new file modal component', () => {
     describe(type, () => {
       beforeEach(() => {
         const store = createStore();
-        store.state.newEntryModal = {
+        store.state.entryModal = {
           type,
           path: '',
         };
@@ -55,4 +55,36 @@ describe('new file modal component', () => {
       });
     });
   });
+
+  describe('rename entry', () => {
+    beforeEach(() => {
+      const store = createStore();
+      store.state.entryModal = {
+        type: 'rename',
+        path: '',
+        entry: {
+          name: 'test',
+        },
+      };
+
+      vm = createComponentWithStore(Component, store).$mount();
+    });
+
+    it('renders title and button for renaming', () => {
+      expect(vm.$el.querySelector('.modal-title').textContent.trim()).toBe('Rename');
+      expect(vm.$el.querySelector('.btn-success').textContent.trim()).toBe('Update');
+    });
+
+    describe('entryName', () => {
+      it('returns entries name', () => {
+        expect(vm.entryName).toBe('test');
+      });
+
+      it('updated name', () => {
+        vm.name = 'index.js';
+
+        expect(vm.entryName).toBe('index.js');
+      });
+    });
+  });
 });