1 files changed, 42 insertions, 5 deletions

diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index e500ef0e1b5..bcd53ac1ba2 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -1,6 +1,7 @@
 <script>
+import $ from 'jquery';
 import { __ } from '~/locale';
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState, mapGetters } from 'vuex';
 import GlModal from '~/vue_shared/components/gl_modal.vue';
 import { modalTypes } from '../../constants';
 
@@ -15,6 +16,7 @@ export default {
   },
   computed: {
     ...mapState(['entryModal']),
+    ...mapGetters('fileTemplates', ['templateTypes']),
     entryName: {
       get() {
         if (this.entryModal.type === modalTypes.rename) {
@@ -31,7 +33,9 @@ export default {
       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 this.entryModal.entry.type === modalTypes.tree
+          ? __('Rename folder')
+          : __('Rename file');
       }
 
       return __('Create new file');
@@ -40,11 +44,16 @@ export default {
       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 this.entryModal.entry.type === modalTypes.tree
+          ? __('Rename folder')
+          : __('Rename file');
       }
 
       return __('Create file');
     },
+    isCreatingNew() {
+      return this.entryModal.type !== modalTypes.rename;
+    },
   },
   methods: {
     ...mapActions(['createTempEntry', 'renameEntry']),
@@ -61,6 +70,14 @@ export default {
         });
       }
     },
+    createFromTemplate(template) {
+      this.createTempEntry({
+        name: template.name,
+        type: this.entryModal.type,
+      });
+
+      $('#ide-new-entry').modal('toggle');
+    },
     focusInput() {
       this.$refs.fieldName.focus();
     },
@@ -77,6 +94,7 @@ export default {
     :header-title-text="modalTitle"
     :footer-primary-button-text="buttonLabel"
     footer-primary-button-variant="success"
+    modal-size="lg"
     @submit="submitForm"
     @open="focusInput"
     @closed="closedModal"
@@ -84,16 +102,35 @@ export default {
     <div
       class="form-group row"
     >
-      <label class="label-bold col-form-label col-sm-3">
+      <label class="label-bold col-form-label col-sm-2">
         {{ __('Name') }}
       </label>
-      <div class="col-sm-9">
+      <div class="col-sm-10">
         <input
           ref="fieldName"
           v-model="entryName"
           type="text"
           class="form-control"
+          placeholder="/dir/file_name"
         />
+        <ul
+          v-if="isCreatingNew"
+          class="prepend-top-default list-inline"
+        >
+          <li
+            v-for="(template, index) in templateTypes"
+            :key="index"
+            class="list-inline-item"
+          >
+            <button
+              type="button"
+              class="btn btn-missing p-1 pr-2 pl-2"
+              @click="createFromTemplate(template)"
+            >
+              {{ template.name }}
+            </button>
+          </li>
+        </ul>
       </div>
     </div>
   </gl-modal>