16 files changed, 219 insertions, 51 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 cc1042c92b8..4b8e687f3d4 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 3946e861976..7160fa71ce5 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/issuable.js b/app/assets/javascripts/issuable.js
index f27f1bad1f7..d0305c6c6a1 100644
--- a/app/assets/javascripts/issuable.js
+++ b/app/assets/javascripts/issuable.js
@@ -5,13 +5,10 @@
 
   this.Issuable = {
     init: function() {
-      if (!issuable_created) {
-        issuable_created = true;
-        Issuable.initTemplates();
-        Issuable.initSearch();
-        Issuable.initChecks();
-        return Issuable.initLabelFilterRemove();
-      }
+      Issuable.initTemplates();
+      Issuable.initSearch();
+      Issuable.initChecks();
+      return Issuable.initLabelFilterRemove();
     },
     initTemplates: function() {
       return Issuable.labelRow = _.template('<% _.each(labels, function(label){ %> <span class="label-row btn-group" role="group" aria-label="<%- label.title %>" style="color: <%- label.text_color %>;"> <a href="#" class="btn btn-transparent has-tooltip" style="background-color: <%- label.color %>;" title="<%- label.description %>" data-container="body"> <%- label.title %> </a> <button type="button" class="btn btn-transparent label-remove js-label-filter-remove" style="background-color: <%- label.color %>;" data-label="<%- label.title %>"> <i class="fa fa-times"></i> </button> </span> <% }); %>');
diff --git a/app/assets/javascripts/protected_branch_create.js.es6 b/app/assets/javascripts/protected_branch_create.js.es6
index 00e20a03b04..2efca2414dc 100644
--- a/app/assets/javascripts/protected_branch_create.js.es6
+++ b/app/assets/javascripts/protected_branch_create.js.es6
@@ -44,8 +44,8 @@
 
       // Enable submit button
       const $branchInput = this.$wrap.find('input[name="protected_branch[name]"]');
-      const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_level_attributes][access_level]"]');
-      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_level_attributes][access_level]"]');
+      const $allowedToMergeInput = this.$wrap.find('input[name="protected_branch[merge_access_levels_attributes][0][access_level]"]');
+      const $allowedToPushInput = this.$wrap.find('input[name="protected_branch[push_access_levels_attributes][0][access_level]"]');
 
       if ($branchInput.val() && $allowedToMergeInput.val() && $allowedToPushInput.val()){
         this.$form.find('input[type="submit"]').removeAttr('disabled');
diff --git a/app/assets/javascripts/protected_branch_edit.js.es6 b/app/assets/javascripts/protected_branch_edit.js.es6
index 8d42e268ebc..a59fcbfa082 100644
--- a/app/assets/javascripts/protected_branch_edit.js.es6
+++ b/app/assets/javascripts/protected_branch_edit.js.es6
@@ -39,12 +39,14 @@
           _method: 'PATCH',
           id: this.$wrap.data('banchId'),
           protected_branch: {
-            merge_access_level_attributes: {
+            merge_access_levels_attributes: [{
+              id: this.$allowedToMergeDropdown.data('access-level-id'),
               access_level: $allowedToMergeInput.val()
-            },
-            push_access_level_attributes: {
+            }],
+            push_access_levels_attributes: [{
+              id: this.$allowedToPushDropdown.data('access-level-id'),
               access_level: $allowedToPushInput.val()
-            }
+            }]
           }
         },
         success: () => {
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/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 473530cf094..f1fe1697d30 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -164,6 +164,10 @@
     @include btn-outline($white-light, $orange-normal, $orange-normal, $orange-light, $white-light, $orange-light);
   }
 
+  &.btn-spam {
+    @include btn-outline($white-light, $red-normal, $red-normal, $red-light, $white-light, $red-light);
+  }
+
   &.btn-danger,
   &.btn-remove,
   &.btn-red {
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/framework/highlight.scss b/app/assets/stylesheets/framework/highlight.scss
index 7cf4d4fba42..07c8874bf03 100644
--- a/app/assets/stylesheets/framework/highlight.scss
+++ b/app/assets/stylesheets/framework/highlight.scss
@@ -6,11 +6,11 @@
   table-layout: fixed;
 
   pre {
-    padding: 10px;
+    padding: 10px 0;
     border: none;
     border-radius: 0;
     font-family: $monospace_font;
-    font-size: $code_font_size !important;
+    font-size: $code_font_size;
     line-height: $code_line_height !important;
     margin: 0;
     overflow: auto;
@@ -20,13 +20,20 @@
     border-left: 1px solid;
 
     code {
+      display: inline-block;
+      min-width: 100%;
       font-family: $monospace_font;
-      white-space: pre;
+      white-space: normal;
       word-wrap: normal;
       padding: 0;
 
       .line {
-        display: inline-block;
+        display: block;
+        width: 100%;
+        min-height: 19px;
+        padding-left: 10px;
+        padding-right: 10px;
+        white-space: pre;
       }
     }
   }
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/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 0a661e529f0..b4636269518 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -69,6 +69,10 @@
 
     &.ci-success {
       color: $gl-success;
+
+      a.environment {
+        color: inherit;
+      }
     }
 
     &.ci-success_with_warnings {
@@ -126,7 +130,6 @@
       &.has-conflicts .fa-exclamation-triangle {
         color: $gl-warning;
       }
-
     }
 
     p:last-child {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index cf9aa02600d..27dc2b2a1fa 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -99,7 +99,7 @@
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 15px;
-    max-width: 480px;
+    max-width: 700px;
 
     > p {
       margin-bottom: 0;
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index cf16d070cfe..0340526a53a 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -20,10 +20,43 @@
   }
 }
 
-.todo {
+.todos-list > .todo {
+  // workaround because we cannot use border-colapse
+  border-top: 1px solid transparent;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-flex-direction: row;
+  flex-direction: row;
+
   &:hover {
+    background-color: $row-hover;
+    border-color: $row-hover-border;
     cursor: pointer;
   }
+
+  // overwrite border style of .content-list
+  &:last-child {
+    border-bottom: 1px solid transparent;
+
+    &:hover {
+      border-color: $row-hover-border;
+    }
+  }
+
+  .todo-actions {
+    display: -webkit-flex;
+    display: flex;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-flex-direction: column;
+    flex-direction: column;
+    margin-left: 10px;
+  }
+
+  .todo-item {
+    -webkit-flex: auto;
+    flex: auto;
+  }
 }
 
 .todo-item {
@@ -43,8 +76,6 @@
   }
 
   .todo-body {
-    margin-right: 174px;
-
     .todo-note {
       word-wrap: break-word;
 
@@ -90,6 +121,12 @@
 }
 
 @media (max-width: $screen-xs-max) {
+  .todo {
+    .avatar {
+      display: none;
+    }
+  }
+
   .todo-item {
     .todo-title {
       white-space: normal;
@@ -98,10 +135,6 @@
       margin-bottom: 10px;
     }
 
-    .avatar {
-      display: none;
-    }
-
     .todo-body {
       margin: 0;
       border-left: 2px solid #ddd;