Merge branch 'add_autocomplete_for_labels' into 'master'

Add GFM autocomplete for labels

Closes #14637 

See merge request !4013

4 files changed, 30 insertions, 0 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 043eb5a0d1f..f020476c072 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -67,6 +67,7 @@ v 8.9.0 (unreleased)
   - Use downcased path to container repository as this is expected path by Docker
   - Projects pending deletion will render a 404 page
   - Measure queue duration between gitlab-workhorse and Rails
+  - Added Gfm autocomplete for labels
   - Make Omniauth providers specs to not modify global configuration
   - Make authentication service for Container Registry to be compatible with < Docker 1.11
   - Add Application Setting to configure Container Registry token expire delay (default 5min)
diff --git a/app/assets/javascripts/gfm_auto_complete.js.coffee b/app/assets/javascripts/gfm_auto_complete.js.coffee
index 76c3083232b..190bb38504c 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.coffee
+++ b/app/assets/javascripts/gfm_auto_complete.js.coffee
@@ -15,6 +15,9 @@ GitLab.GfmAutoComplete =
   Members:
     template: '<li>${username} <small>${title}</small></li>'
 
+  Labels:
+    template: '<li><span class="dropdown-label-box" style="background: ${color}"></span> ${title}</li>'
+
   # Issues and MergeRequests
   Issues:
     template: '<li><small>${id}</small> ${title}</li>'
@@ -176,6 +179,25 @@ GitLab.GfmAutoComplete =
             title:  sanitize(m.title)
             search: "#{m.iid} #{m.title}"
 
+    @input.atwho
+      at: '~'
+      alias: 'labels'
+      searchKey: 'search'
+      displayTpl: @Labels.template
+      insertTpl: '${atwho-at}${title}'
+      callbacks:
+        beforeSave: (merges) ->
+          sanitizeLabelTitle = (title)->
+            if /\w+\s+\w+/g.test(title)
+              "\"#{sanitize(title)}\""
+            else
+              sanitize(title)
+
+          $.map merges, (m) ->
+            title: sanitizeLabelTitle(m.title)
+            color: m.color
+            search: "#{m.title}"
+
   destroyAtWho: ->
     @input.atwho('destroy')
 
@@ -195,6 +217,8 @@ GitLab.GfmAutoComplete =
     @input.atwho 'load', 'mergerequests', data.mergerequests
     # load emojis
     @input.atwho 'load', ':', data.emojis
+    # load labels
+    @input.atwho 'load', '~', data.labels
 
     # This trigger at.js again
     # otherwise we would be stuck with loading until the user types
diff --git a/app/controllers/projects_controller.rb b/app/controllers/projects_controller.rb
index a6479c42d94..482c11cf23c 100644
--- a/app/controllers/projects_controller.rb
+++ b/app/controllers/projects_controller.rb
@@ -143,6 +143,7 @@ class ProjectsController < Projects::ApplicationController
       issues: autocomplete.issues,
       milestones: autocomplete.milestones,
       mergerequests: autocomplete.merge_requests,
+      labels: autocomplete.labels,
       members: participants
     }
 
diff --git a/app/services/projects/autocomplete_service.rb b/app/services/projects/autocomplete_service.rb
index eb73948006e..23b6668e0d1 100644
--- a/app/services/projects/autocomplete_service.rb
+++ b/app/services/projects/autocomplete_service.rb
@@ -11,5 +11,9 @@ module Projects
     def merge_requests
       @project.merge_requests.opened.select([:iid, :title])
     end
+
+    def labels
+      @project.labels.select([:title, :color])
+    end
   end
 end