fixed some bugs around with the template dropdowns

app/assets/javascripts/ide/stores/actions.js

@@ -206,6 +206,7 @@ export const resetOpenFiles = ({ commit }) => commit(types.RESET_OPEN_FILES);
 
 export const renameEntry = ({ dispatch, commit, state }, { path, name, entryPath = null }) => {
   const entry = state.entries[entryPath || path];
+
   commit(types.RENAME_ENTRY, { path, name, entryPath });
 
   if (entry.type === 'tree') {
@@ -214,7 +215,7 @@ export const renameEntry = ({ dispatch, commit, state }, { path, name, entryPath
     );
   }
 
-  if (!entryPath) {
+  if (!entryPath && !entry.tempFile) {
     dispatch('deleteEntry', path);
   }
 };

app/assets/javascripts/ide/stores/mutations.js

@@ -1,3 +1,4 @@
+import Vue from 'vue';
 import * as types from './mutation_types';
 import projectMutations from './mutations/project';
 import mergeRequestMutation from './mutations/merge_request';
@@ -226,7 +227,7 @@ export default {
       path: newPath,
       name: entryPath ? oldEntry.name : name,
       tempFile: true,
-      prevPath: oldEntry.path,
+      prevPath: oldEntry.tempFile ? null : oldEntry.path,
       url: oldEntry.url.replace(new RegExp(`${oldEntry.path}/?$`), newPath),
       tree: [],
       parentPath,
@@ -249,6 +250,16 @@ export default {
     if (state.entries[newPath].opened) {
       state.openFiles.push(state.entries[newPath]);
     }
+
+    if (oldEntry.tempFile) {
+      const filterMethod = f => f.path !== oldEntry.path;
+
+      state.openFiles = state.openFiles.filter(filterMethod);
+      state.changedFiles = state.changedFiles.filter(filterMethod);
+      parent.tree = parent.tree.filter(filterMethod);
+
+      Vue.delete(state.entries, oldEntry.path);
+    }
   },
   ...projectMutations,
   ...mergeRequestMutation,

app/assets/javascripts/ide/stores/mutations/file.js

@@ -55,7 +55,7 @@ export default {
       f => f.path === file.path && f.pending && !(f.tempFile && !f.prevPath),
     );
 
-    if (file.tempFile) {
+    if (file.tempFile && file.content === '') {
       Object.assign(state.entries[file.path], {
         content: raw,
       });

app/assets/stylesheets/page_bundles/ide.scss

@@ -1451,4 +1451,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
   .dropdown {
     min-width: 180px;
   }
+
+  .dropdown-menu {
+    max-height: 222px;
+    overflow: hidden;
+  }
 }

spec/javascripts/ide/components/file_templates/bar_spec.js

@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import { createStore } from '~/ide/stores';
 import Bar from '~/ide/components/file_templates/bar.vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore, file } from '../../helpers';
 
 describe('IDE file templates bar component', () => {
@@ -21,7 +21,7 @@ describe('IDE file templates bar component', () => {
       active: true,
     });
 
-    vm = createComponentWithStore(Component, store).$mount();
+    vm = mountComponentWithStore(Component, { store });
   });
 
   afterEach(() => {
@@ -35,7 +35,7 @@ describe('IDE file templates bar component', () => {
     });
 
     it('calls setSelectedTemplateType when clicking item', () => {
-      spyOn(vm, 'setSelectedTemplateType');
+      spyOn(vm, 'setSelectedTemplateType').and.stub();
 
       vm.$el.querySelector('.dropdown-content button').click();
 
@@ -66,7 +66,7 @@ describe('IDE file templates bar component', () => {
     });
 
     it('calls fetchTemplate on click', () => {
-      spyOn(vm, 'fetchTemplate');
+      spyOn(vm, 'fetchTemplate').and.stub();
 
       vm.$el
         .querySelectorAll('.dropdown-content')[1]
@@ -90,7 +90,7 @@ describe('IDE file templates bar component', () => {
   });
 
   it('calls undoFileTemplate when clicking undo button', () => {
-    spyOn(vm, 'undoFileTemplate');
+    spyOn(vm, 'undoFileTemplate').and.stub();
 
     vm.$el.querySelector('.btn-default').click();
 

spec/javascripts/ide/components/file_templates/dropdown_spec.js

@@ -32,7 +32,7 @@ describe('IDE file templates dropdown component', () => {
     });
 
     it('calls async store method on Bootstrap dropdown event', () => {
-      spyOn(vm, 'fetchTemplateTypes');
+      spyOn(vm, 'fetchTemplateTypes').and.stub();
 
       $(vm.$el).trigger('show.bs.dropdown');
 
@@ -91,7 +91,7 @@ describe('IDE file templates dropdown component', () => {
     });
 
     it('calls clickItem on click', done => {
-      spyOn(vm, 'clickItem');
+      spyOn(vm, 'clickItem').and.stub();
 
       vm.$store.state.fileTemplates.templates = [
         {
@@ -158,7 +158,7 @@ describe('IDE file templates dropdown component', () => {
     });
 
     it('calls clickItem on click', done => {
-      spyOn(vm, 'clickItem');
+      spyOn(vm, 'clickItem').and.stub();
 
       vm.$nextTick(() => {
         vm.$el.querySelector('.dropdown-content button').click();