1 files changed, 14 insertions, 4 deletions
diff --git a/app/assets/javascripts/ide/components/ide_tree.vue b/app/assets/javascripts/ide/components/ide_tree.vue
index 598f3a1dac6..647f4d4be85 100644
--- a/app/assets/javascripts/ide/components/ide_tree.vue
+++ b/app/assets/javascripts/ide/components/ide_tree.vue
@@ -1,14 +1,17 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
+import { modalTypes } from '../constants';
 import IdeTreeList from './ide_tree_list.vue';
 import Upload from './new_dropdown/upload.vue';
 import NewEntryButton from './new_dropdown/button.vue';
+import NewModal from './new_dropdown/modal.vue';
 
 export default {
   components: {
     Upload,
     IdeTreeList,
     NewEntryButton,
+    NewModal,
   },
   computed: {
     ...mapState(['currentBranchId']),
@@ -26,14 +29,20 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['updateViewer', 'openNewEntryModal', 'createTempEntry', 'resetOpenFiles']),
+    ...mapActions(['updateViewer', 'createTempEntry', 'resetOpenFiles']),
+    createNewFile() {
+      this.$refs.newModal.open(modalTypes.blob);
+    },
+    createNewFolder() {
+      this.$refs.newModal.open(modalTypes.tree);
+    },
   },
 };
 </script>
 
 <template>
   <ide-tree-list viewer-type="editor">
-    <template slot="header">
+    <template #header>
       {{ __('Edit') }}
       <div class="ide-tree-actions ml-auto d-flex">
         <new-entry-button
@@ -41,7 +50,7 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0 mr-3 qa-new-file"
           icon="doc-new"
-          @click="openNewEntryModal({ type: 'blob' })"
+          @click="createNewFile()"
         />
         <upload
           :show-label="false"
@@ -54,9 +63,10 @@ export default {
           :show-label="false"
           class="d-flex border-0 p-0"
           icon="folder-new"
-          @click="openNewEntryModal({ type: 'tree' })"
+          @click="createNewFolder()"
         />
       </div>
+      <new-modal ref="newModal" />
     </template>
   </ide-tree-list>
 </template>