Merge branch 'ide-rename-files' into 'master'

Enable renaming files & folders in the Web IDE

Closes #44845

See merge request gitlab-org/gitlab-ce!20835

3 files changed, 47 insertions, 20 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/index.vue b/app/assets/javascripts/ide/components/new_dropdown/index.vue
index 8eddfa5e455..f02fd6cf7ea 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/index.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/index.vue
@@ -4,6 +4,7 @@ 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';
 
 export default {
   components: {
@@ -56,6 +57,7 @@ export default {
       this.dropdownOpen = !this.dropdownOpen;
     },
   },
+  modalTypes,
 };
 </script>
 
@@ -74,7 +76,7 @@ export default {
         @click.stop="openDropdown()"
       >
         <icon
-          name="hamburger"
+          name="ellipsis_v"
         />
         <icon
           name="arrow-down"
@@ -106,13 +108,22 @@ export default {
               class="d-flex"
               icon="folder-new"
               icon-classes="mr-2"
-              @click="createNewItem('tree')"
+              @click="createNewItem($options.modalTypes.tree)"
             />
           </li>
           <li class="divider"></li>
         </template>
         <li>
           <item-button
+            :label="__('Rename')"
+            class="d-flex"
+            icon="pencil"
+            icon-classes="mr-2"
+            @click="createNewItem($options.modalTypes.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..e500ef0e1b5 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -2,6 +2,7 @@
 import { __ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
+import { modalTypes } from '../../constants';
 
 export default {
   components: {
@@ -13,42 +14,58 @@ export default {
     };
   },
   computed: {
-    ...mapState(['newEntryModal']),
+    ...mapState(['entryModal']),
     entryName: {
       get() {
-        return this.name || (this.newEntryModal.path !== '' ? `${this.newEntryModal.path}/` : '');
+        if (this.entryModal.type === modalTypes.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 === modalTypes.tree) {
         return __('Create new directory');
+      } else if (this.entryModal.type === modalTypes.rename) {
+        return this.entryModal.entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create new file');
     },
     buttonLabel() {
-      if (this.newEntryModal.type === 'tree') {
+      if (this.entryModal.type === modalTypes.tree) {
         return __('Create directory');
+      } else if (this.entryModal.type === modalTypes.rename) {
+        return this.entryModal.entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create file');
     },
   },
   methods: {
-    ...mapActions(['createTempEntry']),
-    createEntryInStore() {
-      this.createTempEntry({
-        name: this.name,
-        type: this.newEntryModal.type,
-      });
+    ...mapActions(['createTempEntry', 'renameEntry']),
+    submitForm() {
+      if (this.entryModal.type === modalTypes.rename) {
+        this.renameEntry({
+          path: this.entryModal.entry.path,
+          name: this.entryName,
+        });
+      } else {
+        this.createTempEntry({
+          name: this.name,
+          type: this.entryModal.type,
+        });
+      }
     },
     focusInput() {
-      setTimeout(() => {
-        this.$refs.fieldName.focus();
-      });
+      this.$refs.fieldName.focus();
+    },
+    closedModal() {
+      this.name = '';
     },
   },
 };
@@ -60,8 +77,9 @@ export default {
     :header-title-text="modalTitle"
     :footer-primary-button-text="buttonLabel"
     footer-primary-button-variant="success"
-    @submit="createEntryInStore"
+    @submit="submitForm"
     @open="focusInput"
+    @closed="closedModal"
   >
     <div
       class="form-group row"
diff --git a/app/assets/javascripts/ide/components/repo_file.vue b/app/assets/javascripts/ide/components/repo_file.vue
index eb4a927fe0d..dbdf0be2809 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;
     },
@@ -194,7 +193,7 @@ export default {
               data-container="body"
               data-placement="right"
               name="file-modified"
-              css-classes="prepend-left-5 multi-file-modified"
+              css-classes="prepend-left-5 ide-file-modified"
             />
           </span>
           <changed-file-icon
@@ -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"