renames file when template type is changed

5 files changed, 39 insertions, 17 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,