Enable renaming files & folders in the Web IDE

Closes #44845

5 files changed, 28 insertions, 10 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 440e480d596..87c3512777f 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -111,6 +111,15 @@ export default {
         </template>
         <li>
           <item-button
+            :label="__('Rename')"
+            class="d-flex"
+            icon="pencil"
+            icon-classes="mr-2"
+            @click="createNewItem('rename')"
+          />
+        </li>
+        <li>
+          <item-button
             :label="__('Delete')"
             class="d-flex"
             icon="remove"
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 833c4b027df..a32c7cb534c 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/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() {
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index eb4a927fe0d..36e7cbf93b5 100644
--- a/app/assets/javascripts/ide/components/repo_file.vue
+++ b/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"
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index 799c2f51e8d..cd8beb3f3f6 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/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) {
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 0f32a267469..2371b201f8c 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -26,8 +26,9 @@ export default () => ({
   rightPane: null,
   links: {},
   errorMessage: null,
-  newEntryModal: {
+  entryModal: {
     type: '',
     path: '',
+    entry: {},
   },
 });