renames file when template type is changed

8 files changed, 162 insertions, 36 deletions

diff --git a/app/assets/javascripts/ide/components/file_templates/bar.vue b/app/assets/javascripts/ide/components/file_templates/bar.vue
index d9cca3fe1f2..055eeadb3f7 100644
--- a/app/assets/javascripts/ide/components/file_templates/bar.vue
+++ b/app/assets/javascripts/ide/components/file_templates/bar.vue
@@ -47,7 +47,7 @@ export default {
 
 <template>
   <div class="d-flex align-items-center ide-file-templates">
-    <strong class="mr-2">
+    <strong class="append-right-default">
       {{ __('File templates') }}
     </strong>
     <dropdown
@@ -58,7 +58,7 @@ export default {
     />
     <dropdown
       v-if="showTemplatesDropdown"
-      :label="__('Choose a type...')"
+      :label="__('Choose a template...')"
       :async="true"
       :searchable="true"
       :title="__('File templates')"
@@ -66,18 +66,14 @@ export default {
       @click="selecteTemplate"
     />
     <transition name="fade">
-      <div v-show="updateSuccess">
-        <strong class="text-success mr-2">
-          {{ __('Template applied') }}
-        </strong>
-        <button
-          type="button"
-          class="btn btn-default"
-          @click="undoFileTemplate"
-        >
-          {{ __('Undo') }}
-        </button>
-      </div>
+      <button
+        v-show="updateSuccess"
+        type="button"
+        class="btn btn-default"
+        @click="undoFileTemplate"
+      >
+        {{ __('Undo') }}
+      </button>
     </transition>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/modal.vue b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
index 40b035dae17..c6fa5eb3246 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/modal.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/modal.vue
@@ -91,6 +91,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"
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
index a4da2ac5c04..dd53213ed18 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/actions.js
@@ -32,9 +32,23 @@ export const fetchTemplateTypes = ({ dispatch, state }) => {
     .catch(() => dispatch('receiveTemplateTypesError'));
 };
 
-export const setSelectedTemplateType = ({ commit }, type) =>
+export const setSelectedTemplateType = ({ commit, dispatch, rootGetters }, type) => {
   commit(types.SET_SELECTED_TEMPLATE_TYPE, type);
 
+  if (rootGetters.activeFile.prevPath === type.name) {
+    dispatch('discardFileChanges', rootGetters.activeFile.path, { root: true });
+  } else if (rootGetters.activeFile.name !== type.name) {
+    dispatch(
+      'renameEntry',
+      {
+        path: rootGetters.activeFile.path,
+        name: type.name,
+      },
+      { root: true },
+    );
+  }
+};
+
 export const receiveTemplateError = ({ dispatch }, template) => {
   dispatch(
     'setErrorMessage',
@@ -80,6 +94,10 @@ export const undoFileTemplate = ({ dispatch, commit, rootGetters }) => {
   commit(types.SET_UPDATE_SUCCESS, false);
 
   eventHub.$emit(`editor.update.model.new.content.${file.key}`, file.raw);
+
+  if (file.prevPath) {
+    dispatch('discardFileChanges', file.path, { root: true });
+  }
 };
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
diff --git a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
index 38318fd49bf..628babe6a01 100644
--- a/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
+++ b/app/assets/javascripts/ide/stores/modules/file_templates/getters.js
@@ -1,3 +1,5 @@
+import { activityBarViews } from '../../../constants';
+
 export const templateTypes = () => [
   {
     name: '.gitlab-ci.yml',
@@ -17,7 +19,8 @@ export const templateTypes = () => [
   },
 ];
 
-export const showFileTemplatesBar = (_, getters) => name =>
-  getters.templateTypes.find(t => t.name === name);
+export const showFileTemplatesBar = (_, getters, rootState) => name =>
+  getters.templateTypes.find(t => t.name === name) &&
+  rootState.currentActivityView === activityBarViews.edit;
 
 export default () => {};
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index f2bb87ac674..270c7cc4810 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -245,6 +245,10 @@ export default {
     if (newEntry.type === 'blob') {
       state.changedFiles = state.changedFiles.concat(newEntry);
     }
+
+    if (state.entries[newPath].opened) {
+      state.openFiles.push(state.entries[newPath]);
+    }
   },
   ...projectMutations,
   ...mergeRequestMutation,
diff --git a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
index f831a9f0a5d..c29dd9f0d06 100644
--- a/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/file_templates/actions_spec.js
@@ -148,14 +148,66 @@ describe('IDE file templates actions', () => {
   });
 
   describe('setSelectedTemplateType', () => {
-    it('commits SET_SELECTED_TEMPLATE_TYPE', done => {
-      testAction(
-        actions.setSelectedTemplateType,
-        'test',
-        state,
-        [{ type: types.SET_SELECTED_TEMPLATE_TYPE, payload: 'test' }],
-        [],
-        done,
+    it('commits SET_SELECTED_TEMPLATE_TYPE', () => {
+      const commit = jasmine.createSpy('commit');
+      const options = {
+        commit,
+        dispatch() {},
+        rootGetters: {
+          activeFile: {
+            name: 'test',
+            prevPath: '',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(commit).toHaveBeenCalledWith(types.SET_SELECTED_TEMPLATE_TYPE, { name: 'test' });
+    });
+
+    it('dispatches discardFileChanges if prevPath matches templates name', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const options = {
+        commit() {},
+        dispatch,
+        rootGetters: {
+          activeFile: {
+            name: 'test',
+            path: 'test',
+            prevPath: 'test',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(dispatch).toHaveBeenCalledWith('discardFileChanges', 'test', { root: true });
+    });
+
+    it('dispatches renameEntry if file name doesnt match', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const options = {
+        commit() {},
+        dispatch,
+        rootGetters: {
+          activeFile: {
+            name: 'oldtest',
+            path: 'oldtest',
+            prevPath: '',
+          },
+        },
+      };
+
+      actions.setSelectedTemplateType(options, { name: 'test' });
+
+      expect(dispatch).toHaveBeenCalledWith(
+        'renameEntry',
+        {
+          path: 'oldtest',
+          name: 'test',
+        },
+        { root: true },
       );
     });
   });
@@ -332,5 +384,20 @@ describe('IDE file templates actions', () => {
 
       expect(commit).toHaveBeenCalledWith('SET_UPDATE_SUCCESS', false);
     });
+
+    it('dispatches discardFileChanges if file has prevPath', () => {
+      const dispatch = jasmine.createSpy('dispatch');
+      const rootGetters = {
+        activeFile: { path: 'test', prevPath: 'newtest', raw: 'raw content' },
+      };
+
+      actions.undoFileTemplate({ dispatch, commit() {}, rootGetters });
+
+      expect(dispatch.calls.mostRecent().args).toEqual([
+        'discardFileChanges',
+        'test',
+        { root: true },
+      ]);
+    });
   });
 });
diff --git a/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js b/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
index e337c3f331b..17cb457881f 100644
--- a/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
+++ b/spec/javascripts/ide/stores/modules/file_templates/getters_spec.js
@@ -1,3 +1,5 @@
+import createState from '~/ide/stores/state';
+import { activityBarViews } from '~/ide/constants';
 import * as getters from '~/ide/stores/modules/file_templates/getters';
 
 describe('IDE file templates getters', () => {
@@ -8,22 +10,49 @@ describe('IDE file templates getters', () => {
   });
 
   describe('showFileTemplatesBar', () => {
-    it('finds template type by name', () => {
+    let rootState;
+
+    beforeEach(() => {
+      rootState = createState();
+    });
+
+    it('returns true if template is found and currentActivityView is edit', () => {
+      rootState.currentActivityView = activityBarViews.edit;
+
+      expect(
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('LICENSE'),
+      ).toBe(true);
+    });
+
+    it('returns false if template is found and currentActivityView is not edit', () => {
+      rootState.currentActivityView = activityBarViews.commit;
+
       expect(
-        getters.showFileTemplatesBar(null, {
-          templateTypes: getters.templateTypes(),
-        })('LICENSE'),
-      ).toEqual({
-        name: 'LICENSE',
-        key: 'licenses',
-      });
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('LICENSE'),
+      ).toBe(false);
     });
 
     it('returns undefined if not found', () => {
       expect(
-        getters.showFileTemplatesBar(null, {
-          templateTypes: getters.templateTypes(),
-        })('test'),
+        getters.showFileTemplatesBar(
+          null,
+          {
+            templateTypes: getters.templateTypes(),
+          },
+          rootState,
+        )('test'),
       ).toBe(undefined);
     });
   });
diff --git a/spec/javascripts/ide/stores/mutations_spec.js b/spec/javascripts/ide/stores/mutations_spec.js
index 6ce76aaa03b..41dd3d3c67f 100644
--- a/spec/javascripts/ide/stores/mutations_spec.js
+++ b/spec/javascripts/ide/stores/mutations_spec.js
@@ -339,5 +339,13 @@ describe('Multi-file store mutations', () => {
 
       expect(localState.entries.parentPath.tree.length).toBe(1);
     });
+
+    it('adds to openFiles if previously opened', () => {
+      localState.entries.oldPath.opened = true;
+
+      mutations.RENAME_ENTRY(localState, { path: 'oldPath', name: 'newPath' });
+
+      expect(localState.openFiles).toEqual([localState.entries.newPath]);
+    });
   });
 });