Merge branch 'issue_18656' into 'master'

Load issue templates from repository

part of #18656 


## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- [x] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [x] API support added
- Tests
  - [x] Added for this feature/bug
  - [x] All builds are passing
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

See merge request !4981

12 files changed, 223 insertions, 35 deletions

diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js
index 49c2ac0dac3..84b292e59c6 100644
--- a/app/assets/javascripts/api.js
+++ b/app/assets/javascripts/api.js
@@ -9,10 +9,11 @@
     licensePath: "/api/:version/licenses/:key",
     gitignorePath: "/api/:version/gitignores/:key",
     gitlabCiYmlPath: "/api/:version/gitlab_ci_ymls/:key",
+    issuableTemplatePath: "/:namespace_path/:project_path/templates/:type/:key",
+
     group: function(group_id, callback) {
-      var url;
-      url = Api.buildUrl(Api.groupPath);
-      url = url.replace(':id', group_id);
+      var url = Api.buildUrl(Api.groupPath)
+        .replace(':id', group_id);
       return $.ajax({
         url: url,
         data: {
@@ -24,8 +25,7 @@
       });
     },
     groups: function(query, skip_ldap, callback) {
-      var url;
-      url = Api.buildUrl(Api.groupsPath);
+      var url = Api.buildUrl(Api.groupsPath);
       return $.ajax({
         url: url,
         data: {
@@ -39,8 +39,7 @@
       });
     },
     namespaces: function(query, callback) {
-      var url;
-      url = Api.buildUrl(Api.namespacesPath);
+      var url = Api.buildUrl(Api.namespacesPath);
       return $.ajax({
         url: url,
         data: {
@@ -54,8 +53,7 @@
       });
     },
     projects: function(query, order, callback) {
-      var url;
-      url = Api.buildUrl(Api.projectsPath);
+      var url = Api.buildUrl(Api.projectsPath);
       return $.ajax({
         url: url,
         data: {
@@ -70,9 +68,8 @@
       });
     },
     newLabel: function(project_id, data, callback) {
-      var url;
-      url = Api.buildUrl(Api.labelsPath);
-      url = url.replace(':id', project_id);
+      var url = Api.buildUrl(Api.labelsPath)
+        .replace(':id', project_id);
       data.private_token = gon.api_token;
       return $.ajax({
         url: url,
@@ -86,9 +83,8 @@
       });
     },
     groupProjects: function(group_id, query, callback) {
-      var url;
-      url = Api.buildUrl(Api.groupProjectsPath);
-      url = url.replace(':id', group_id);
+      var url = Api.buildUrl(Api.groupProjectsPath)
+        .replace(':id', group_id);
       return $.ajax({
         url: url,
         data: {
@@ -102,8 +98,8 @@
       });
     },
     licenseText: function(key, data, callback) {
-      var url;
-      url = Api.buildUrl(Api.licensePath).replace(':key', key);
+      var url = Api.buildUrl(Api.licensePath)
+        .replace(':key', key);
       return $.ajax({
         url: url,
         data: data
@@ -112,19 +108,32 @@
       });
     },
     gitignoreText: function(key, callback) {
-      var url;
-      url = Api.buildUrl(Api.gitignorePath).replace(':key', key);
+      var url = Api.buildUrl(Api.gitignorePath)
+        .replace(':key', key);
       return $.get(url, function(gitignore) {
         return callback(gitignore);
       });
     },
     gitlabCiYml: function(key, callback) {
-      var url;
-      url = Api.buildUrl(Api.gitlabCiYmlPath).replace(':key', key);
+      var url = Api.buildUrl(Api.gitlabCiYmlPath)
+        .replace(':key', key);
       return $.get(url, function(file) {
         return callback(file);
       });
     },
+    issueTemplate: function(namespacePath, projectPath, key, type, callback) {
+      var url = Api.buildUrl(Api.issuableTemplatePath)
+        .replace(':key', key)
+        .replace(':type', type)
+        .replace(':project_path', projectPath)
+        .replace(':namespace_path', namespacePath);
+      $.ajax({
+        url: url,
+        dataType: 'json'
+      }).done(function(file) {
+        callback(null, file);
+      }).error(callback);
+    },
     buildUrl: function(url) {
       if (gon.relative_url_root != null) {
         url = gon.relative_url_root + url;
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 4cc5af76e47..a122fa2d637 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -41,6 +41,7 @@
 /*= require date.format */
 /*= require_directory ./behaviors */
 /*= require_directory ./blob */
+/*= require_directory ./templates */
 /*= require_directory ./commit */
 /*= require_directory ./extensions */
 /*= require_directory ./lib/utils */
diff --git a/app/assets/javascripts/blob/template_selector.js b/app/assets/javascripts/blob/template_selector.js
index 2cf0a6631b8..b0a37ef0e0a 100644
--- a/app/assets/javascripts/blob/template_selector.js
+++ b/app/assets/javascripts/blob/template_selector.js
@@ -9,6 +9,7 @@
       }
       this.onClick = bind(this.onClick, this);
       this.dropdown = opts.dropdown, this.data = opts.data, this.pattern = opts.pattern, this.wrapper = opts.wrapper, this.editor = opts.editor, this.fileEndpoint = opts.fileEndpoint, this.$input = (ref = opts.$input) != null ? ref : $('#file_name');
+      this.dropdownIcon = $('.fa-chevron-down', this.dropdown);
       this.buildDropdown();
       this.bindEvents();
       this.onFilenameUpdate();
@@ -60,11 +61,26 @@
       return this.requestFile(item);
     };
 
-    TemplateSelector.prototype.requestFile = function(item) {};
+    TemplateSelector.prototype.requestFile = function(item) {
+      // This `requestFile` method is an abstract method that should
+      // be added by all subclasses.
+    };
 
-    TemplateSelector.prototype.requestFileSuccess = function(file) {
+    TemplateSelector.prototype.requestFileSuccess = function(file, skipFocus) {
       this.editor.setValue(file.content, 1);
-      return this.editor.focus();
+      if (!skipFocus) this.editor.focus();
+    };
+
+    TemplateSelector.prototype.startLoadingSpinner = function() {
+      this.dropdownIcon
+        .addClass('fa-spinner fa-spin')
+        .removeClass('fa-chevron-down');
+    };
+
+    TemplateSelector.prototype.stopLoadingSpinner = function() {
+      this.dropdownIcon
+        .addClass('fa-chevron-down')
+        .removeClass('fa-spinner fa-spin');
     };
 
     return TemplateSelector;
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index 12a34a276d3..1163edd8547 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -55,6 +55,7 @@
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.issue-form'));
           new IssuableForm($('.issue-form'));
+          new IssuableTemplateSelectors();
           break;
         case 'projects:merge_requests:new':
         case 'projects:merge_requests:edit':
@@ -62,6 +63,7 @@
           shortcut_handler = new ShortcutsNavigation();
           new GLForm($('.merge-request-form'));
           new IssuableForm($('.merge-request-form'));
+          new IssuableTemplateSelectors();
           break;
         case 'projects:tags:new':
           new ZenMode();
diff --git a/app/assets/javascripts/templates/issuable_template_selector.js.es6 b/app/assets/javascripts/templates/issuable_template_selector.js.es6
new file mode 100644
index 00000000000..c32ddf80219
--- /dev/null
+++ b/app/assets/javascripts/templates/issuable_template_selector.js.es6
@@ -0,0 +1,51 @@
+/*= require ../blob/template_selector */
+
+((global) => {
+  class IssuableTemplateSelector extends TemplateSelector {
+    constructor(...args) {
+      super(...args);
+      this.projectPath = this.dropdown.data('project-path');
+      this.namespacePath = this.dropdown.data('namespace-path');
+      this.issuableType = this.wrapper.data('issuable-type');
+      this.titleInput = $(`#${this.issuableType}_title`);
+
+      let initialQuery = {
+        name: this.dropdown.data('selected')
+      };
+
+      if (initialQuery.name) this.requestFile(initialQuery);
+
+      $('.reset-template', this.dropdown.parent()).on('click', () => {
+        if (this.currentTemplate) this.setInputValueToTemplateContent();
+      });
+    }
+
+    requestFile(query) {
+      this.startLoadingSpinner();
+      Api.issueTemplate(this.namespacePath, this.projectPath, query.name, this.issuableType, (err, currentTemplate) => {
+        this.currentTemplate = currentTemplate;
+        if (err) return; // Error handled by global AJAX error handler
+        this.stopLoadingSpinner();
+        this.setInputValueToTemplateContent();
+      });
+      return;
+    }
+
+    setInputValueToTemplateContent() {
+      // `this.requestFileSuccess` sets the value of the description input field
+      // to the content of the template selected.
+      if (this.titleInput.val() === '') {
+        // If the title has not yet been set, focus the title input and
+        // skip focusing the description input by setting `true` as the 2nd
+        // argument to `requestFileSuccess`.
+        this.requestFileSuccess(this.currentTemplate, true);
+        this.titleInput.focus();
+      } else {
+        this.requestFileSuccess(this.currentTemplate);
+      }
+      return;
+    }
+  }
+
+  global.IssuableTemplateSelector = IssuableTemplateSelector;
+})(window);
diff --git a/app/assets/javascripts/templates/issuable_template_selectors.js.es6 b/app/assets/javascripts/templates/issuable_template_selectors.js.es6
new file mode 100644
index 00000000000..bd8cdde033e
--- /dev/null
+++ b/app/assets/javascripts/templates/issuable_template_selectors.js.es6
@@ -0,0 +1,29 @@
+((global) => {
+  class IssuableTemplateSelectors {
+    constructor(opts = {}) {
+      this.$dropdowns = opts.$dropdowns || $('.js-issuable-selector');
+      this.editor = opts.editor || this.initEditor();
+
+      this.$dropdowns.each((i, dropdown) => {
+        let $dropdown = $(dropdown);
+        new IssuableTemplateSelector({
+          pattern: /(\.md)/,
+          data: $dropdown.data('data'),
+          wrapper: $dropdown.closest('.js-issuable-selector-wrap'),
+          dropdown: $dropdown,
+          editor: this.editor
+        });
+      });
+    }
+
+    initEditor() {
+      let editor = $('.markdown-area');
+      // Proxy ace-editor's .setValue to jQuery's .val
+      editor.setValue = editor.val;
+      editor.getValue = editor.val;
+      return editor;
+    }
+  }
+
+  global.IssuableTemplateSelectors = IssuableTemplateSelectors;
+})(window);
diff --git a/app/assets/stylesheets/framework/dropdowns.scss b/app/assets/stylesheets/framework/dropdowns.scss
index e8eafa15899..f1635a53763 100644
--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -56,9 +56,13 @@
     position: absolute;
     top: 50%;
     right: 6px;
-    margin-top: -4px;
+    margin-top: -6px;
     color: $dropdown-toggle-icon-color;
     font-size: 10px;
+    &.fa-spinner {
+      font-size: 16px;
+      margin-top: -8px;
+    }
   }
 
   &:hover, {
@@ -406,6 +410,7 @@
   font-size: 14px;
 
   a {
+    cursor: pointer;
     padding-left: 10px;
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7a50bc9c832..46c4a11aa2e 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -395,3 +395,12 @@
   display: inline-block;
   line-height: 18px;
 }
+
+.js-issuable-selector-wrap {
+  .js-issuable-selector {
+    width: 100%;
+  }
+  @media (max-width: $screen-sm-max) {
+    margin-bottom: $gl-padding;
+  }
+}
diff --git a/app/controllers/projects/templates_controller.rb b/app/controllers/projects/templates_controller.rb
new file mode 100644
index 00000000000..694b468c8d3
--- /dev/null
+++ b/app/controllers/projects/templates_controller.rb
@@ -0,0 +1,19 @@
+class Projects::TemplatesController < Projects::ApplicationController
+  before_action :authenticate_user!, :get_template_class
+
+  def show
+    template = @template_type.find(params[:key], project)
+
+    respond_to do |format|
+      format.json { render json: template.to_json }
+    end
+  end
+
+  private
+
+  def get_template_class
+    template_types = { issue: Gitlab::Template::IssueTemplate, merge_request: Gitlab::Template::MergeRequestTemplate }.with_indifferent_access
+    @template_type = template_types[params[:template_type]]
+    render json: [], status: 404 unless @template_type
+  end
+end
diff --git a/app/helpers/blob_helper.rb b/app/helpers/blob_helper.rb
index 8932b94c599..9ea03720c1e 100644
--- a/app/helpers/blob_helper.rb
+++ b/app/helpers/blob_helper.rb
@@ -179,17 +179,42 @@ module BlobHelper
     }
   end
 
+  def selected_template(issuable)
+    templates = issuable_templates(issuable)
+    params[:issuable_template] if templates.include?(params[:issuable_template])
+  end
+
+  def can_add_template?(issuable)
+    names = issuable_templates(issuable)
+    names.empty? && can?(current_user, :push_code, @project) && !@project.private?
+  end
+
+  def merge_request_template_names
+    @merge_request_templates ||= Gitlab::Template::MergeRequestTemplate.dropdown_names(ref_project)
+  end
+
+  def issue_template_names
+    @issue_templates ||= Gitlab::Template::IssueTemplate.dropdown_names(ref_project)
+  end
+
+  def issuable_templates(issuable)
+    @issuable_templates ||=
+      if issuable.is_a?(Issue)
+        issue_template_names
+      elsif issuable.is_a?(MergeRequest)
+        merge_request_template_names
+      end
+  end
+
+  def ref_project
+    @ref_project ||= @target_project || @project
+  end
+
   def gitignore_names
-    @gitignore_names ||=
-      Gitlab::Template::Gitignore.categories.keys.map do |k|
-        [k, Gitlab::Template::Gitignore.by_category(k).map { |t| { name: t.name } }]
-      end.to_h
+    @gitignore_names ||= Gitlab::Template::GitignoreTemplate.dropdown_names
   end
 
   def gitlab_ci_ymls
-    @gitlab_ci_ymls ||=
-      Gitlab::Template::GitlabCiYml.categories.keys.map do |k|
-        [k, Gitlab::Template::GitlabCiYml.by_category(k).map { |t| { name: t.name } }]
-      end.to_h
+    @gitlab_ci_ymls ||= Gitlab::Template::GitlabCiYmlTemplate.dropdown_names
   end
 end
diff --git a/app/views/shared/issuable/_filter.html.haml b/app/views/shared/issuable/_filter.html.haml
index ee1a54d9f34..4f8ea7e7cef 100644
--- a/app/views/shared/issuable/_filter.html.haml
+++ b/app/views/shared/issuable/_filter.html.haml
@@ -55,7 +55,7 @@
           .filter-item.inline
             = dropdown_tag("Milestone", options: { title: "Assign milestone", toggle_class: 'js-milestone-select js-extra-options js-filter-submit js-filter-bulk-update', filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone", placeholder: "Search milestones", data: { show_no: true, field_name: "update[milestone_id]", project_id: @project.id, milestones: namespace_project_milestones_path(@project.namespace, @project, :json), use_id: true } })
           .filter-item.inline.labels-filter
-            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], show_create: false, show_footer: false, extra_options: false, filter_submit: false, show_footer: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
+            = render "shared/issuable/label_dropdown", classes: ['js-filter-bulk-update', 'js-multiselect'], show_create: false, show_footer: false, extra_options: false, filter_submit: false, data_options: { persist_when_hide: "true", field_name: "update[label_ids][]", show_no: false, show_any: false, use_id: true }
           .filter-item.inline
             = dropdown_tag("Subscription", options: { toggle_class: "js-subscription-event", title: "Change subscription", dropdown_class: "dropdown-menu-selectable", data: { field_name: "update[subscription_event]" } } ) do
               %ul
diff --git a/app/views/shared/issuable/_form.html.haml b/app/views/shared/issuable/_form.html.haml
index 25b29ccf70d..404e9b9f0e0 100644
--- a/app/views/shared/issuable/_form.html.haml
+++ b/app/views/shared/issuable/_form.html.haml
@@ -2,7 +2,22 @@
 
 .form-group
   = f.label :title, class: 'control-label'
-  .col-sm-10
+
+  - issuable_template_names = issuable_templates(issuable)
+
+  - if issuable_template_names.any?
+    .col-sm-3.col-lg-2
+      .js-issuable-selector-wrap{ data: { issuable_type: issuable.class.to_s.underscore.downcase } }
+        - title = selected_template(issuable) || "Choose a template"
+
+        = dropdown_tag(title, options: { toggle_class: 'js-issuable-selector',
+          title: title, filter: true, placeholder: 'Filter', footer_content: true,
+          data: { data: issuable_template_names, field_name: 'issuable_template', selected: selected_template(issuable), project_path: @project.path, namespace_path: @project.namespace.path } } ) do
+          %ul.dropdown-footer-list
+            %li
+              %a.reset-template
+                Reset template
+  %div{ class: issuable_template_names.any? ? 'col-sm-7 col-lg-8' : 'col-sm-10' }
     = f.text_field :title, maxlength: 255, autofocus: true, autocomplete: 'off',
         class: 'form-control pad', required: true
 
@@ -23,6 +38,13 @@
           to prevent a
           %strong Work In Progress
           merge request from being merged before it's ready.
+
+    - if can_add_template?(issuable)
+      %p.help-block
+        Add
+        = link_to "issuable templates", help_page_path('workflow/description_templates')
+        to help your contributors communicate effectively!
+
 .form-group.detail-page-description
   = f.label :description, 'Description', class: 'control-label'
   .col-sm-10