Add latest changes from gitlab-org/gitlab@13-0-stable-ee

1 files changed, 61 insertions, 51 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index bf3d736ddf3..4766a2fe6ae 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,61 +1,49 @@
 <script>
-import $ from 'jquery';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import flash from '~/flash';
 import { __, sprintf, s__ } from '~/locale';
-import DeprecatedModal2 from '~/vue_shared/components/deprecated_modal_2.vue';
+import { GlModal } from '@gitlab/ui';
 import { modalTypes } from '../../constants';
+import { trimPathComponents } from '../../utils';
 
 export default {
   components: {
-    GlModal: DeprecatedModal2,
+    GlModal,
   },
   data() {
     return {
-      name: '',
+      entryName: '',
+      modalType: modalTypes.blob,
+      path: '',
     };
   },
   computed: {
-    ...mapState(['entries', 'entryModal']),
+    ...mapState(['entries']),
     ...mapGetters('fileTemplates', ['templateTypes']),
-    entryName: {
-      get() {
-        const entryPath = this.entryModal.entry.path;
-
-        if (this.entryModal.type === modalTypes.rename) {
-          return this.name || entryPath;
-        }
-
-        return this.name || (entryPath ? `${entryPath}/` : '');
-      },
-      set(val) {
-        this.name = val.trim();
-      },
-    },
     modalTitle() {
-      if (this.entryModal.type === modalTypes.tree) {
+      const entry = this.entries[this.path];
+
+      if (this.modalType === modalTypes.tree) {
         return __('Create new directory');
-      } else if (this.entryModal.type === modalTypes.rename) {
-        return this.entryModal.entry.type === modalTypes.tree
-          ? __('Rename folder')
-          : __('Rename file');
+      } else if (this.modalType === modalTypes.rename) {
+        return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create new file');
     },
     buttonLabel() {
-      if (this.entryModal.type === modalTypes.tree) {
+      const entry = this.entries[this.path];
+
+      if (this.modalType === modalTypes.tree) {
         return __('Create directory');
-      } else if (this.entryModal.type === modalTypes.rename) {
-        return this.entryModal.entry.type === modalTypes.tree
-          ? __('Rename folder')
-          : __('Rename file');
+      } else if (this.modalType === modalTypes.rename) {
+        return entry.type === modalTypes.tree ? __('Rename folder') : __('Rename file');
       }
 
       return __('Create file');
     },
     isCreatingNewFile() {
-      return this.entryModal.type === 'blob';
+      return this.modalType === modalTypes.blob;
     },
     placeholder() {
       return this.isCreatingNewFile ? 'dir/file_name' : 'dir/';
@@ -64,7 +52,9 @@ export default {
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
     submitForm() {
-      if (this.entryModal.type === modalTypes.rename) {
+      this.entryName = trimPathComponents(this.entryName);
+
+      if (this.modalType === modalTypes.rename) {
         if (this.entries[this.entryName] && !this.entries[this.entryName].deleted) {
           flash(
             sprintf(s__('The name "%{name}" is already taken in this directory.'), {
@@ -78,32 +68,32 @@ export default {
           );
         } else {
           let parentPath = this.entryName.split('/');
-          const entryName = parentPath.pop();
+          const name = parentPath.pop();
           parentPath = parentPath.join('/');
 
           this.renameEntry({
-            path: this.entryModal.entry.path,
-            name: entryName,
+            path: this.path,
+            name,
             parentPath,
           });
         }
       } else {
         this.createTempEntry({
-          name: this.name,
-          type: this.entryModal.type,
+          name: this.entryName,
+          type: this.modalType,
         });
       }
     },
     createFromTemplate(template) {
       this.createTempEntry({
         name: template.name,
-        type: this.entryModal.type,
+        type: this.modalType,
       });
 
-      $('#ide-new-entry').modal('toggle');
+      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,8 +102,28 @@ export default {
         this.$refs.fieldName.setSelectionRange(inputValue.indexOf(name), inputValue.length);
       }
     },
-    closedModal() {
-      this.name = '';
+    resetData() {
+      this.entryName = '';
+      this.path = '';
+      this.modalType = modalTypes.blob;
+    },
+    open(type = modalTypes.blob, path = '') {
+      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());
+    },
+    close() {
+      this.$refs.modal.hide();
     },
   },
 };
@@ -121,22 +131,22 @@ export default {
 
 <template>
   <gl-modal
-    id="ide-new-entry"
-    class="qa-new-file-modal"
-    :header-title-text="modalTitle"
-    :footer-primary-button-text="buttonLabel"
-    footer-primary-button-variant="success"
-    modal-size="lg"
-    @submit="submitForm"
-    @open="focusInput"
-    @closed="closedModal"
+    ref="modal"
+    modal-id="ide-new-entry"
+    modal-class="qa-new-file-modal"
+    :title="modalTitle"
+    :ok-title="buttonLabel"
+    ok-variant="success"
+    size="lg"
+    @ok="submitForm"
+    @hide="resetData"
   >
     <div class="form-group row">
       <label class="label-bold col-form-label col-sm-2"> {{ __('Name') }} </label>
       <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"