1 files changed, 55 insertions, 3 deletions

diff --git a/app/assets/javascripts/templates/issuable_template_selector.js b/app/assets/javascripts/templates/issuable_template_selector.js
index 78609ce0610..10ad4170930 100644
--- a/app/assets/javascripts/templates/issuable_template_selector.js
+++ b/app/assets/javascripts/templates/issuable_template_selector.js
@@ -8,10 +8,13 @@ import { __ } from '~/locale';
 export default class IssuableTemplateSelector extends TemplateSelector {
   constructor(...args) {
     super(...args);
+
     this.projectPath = this.dropdown.data('projectPath');
     this.namespacePath = this.dropdown.data('namespacePath');
     this.issuableType = this.$dropdownContainer.data('issuableType');
     this.titleInput = $(`#${this.issuableType}_title`);
+    this.templateWarningEl = $('.js-issuable-template-warning');
+    this.warnTemplateOverride = args[0].warnTemplateOverride;
 
     const initialQuery = {
       name: this.dropdown.data('selected'),
@@ -24,14 +27,62 @@ export default class IssuableTemplateSelector extends TemplateSelector {
     });
 
     $('.no-template', this.dropdown.parent()).on('click', () => {
-      this.currentTemplate.content = '';
-      this.setInputValueToTemplateContent();
-      $('.dropdown-toggle-text', this.dropdown).text(__('Choose a template'));
+      this.reset();
+    });
+
+    this.templateWarningEl.find('.js-close-btn').on('click', () => {
+      // Explicitly check against 0 value
+      if (this.previousSelectedIndex !== undefined) {
+        this.dropdown.data('glDropdown').selectRowAtIndex(this.previousSelectedIndex);
+      } else {
+        this.reset();
+      }
+
+      this.templateWarningEl.addClass('hidden');
     });
+
+    this.templateWarningEl.find('.js-override-template').on('click', () => {
+      this.requestFile(this.overridingTemplate);
+      this.setSelectedIndex();
+
+      this.templateWarningEl.addClass('hidden');
+      this.overridingTemplate = null;
+    });
+  }
+
+  reset() {
+    if (this.currentTemplate) {
+      this.currentTemplate.content = '';
+    }
+
+    this.setInputValueToTemplateContent();
+    $('.dropdown-toggle-text', this.dropdown).text(__('Choose a template'));
+    this.previousSelectedIndex = null;
+  }
+
+  setSelectedIndex() {
+    this.previousSelectedIndex = this.dropdown.data('glDropdown').selectedIndex;
+  }
+
+  onDropdownClicked(query) {
+    const content = this.getEditorContent();
+    const isContentUnchanged =
+      content === '' || (this.currentTemplate && content === this.currentTemplate.content);
+
+    if (!this.warnTemplateOverride || isContentUnchanged) {
+      super.onDropdownClicked(query);
+      this.setSelectedIndex();
+
+      return;
+    }
+
+    this.overridingTemplate = query.selectedObj;
+    this.templateWarningEl.removeClass('hidden');
   }
 
   requestFile(query) {
     this.startLoadingSpinner();
+
     Api.issueTemplate(
       this.namespacePath,
       this.projectPath,
@@ -59,6 +110,7 @@ export default class IssuableTemplateSelector extends TemplateSelector {
     } else {
       this.setEditorContent(this.currentTemplate, { skipFocus: false });
     }
+
     return;
   }
 }