Merge branch 'duplicate-label-dropdown' into 'master'

Removes duplicates from the label dropdown

It concats the duplicate labels into a single label in the dropdown with the color being a gradient of the differnet colors being concatted.

I liked your idea @jschatz1 of using a standard icon color. However, with this i've taken all the duplicated colors & made a little gradient with them so it still half resembles the label colors (this has been limited to 4 or it could get crazy!)

![Screen_Shot_2016-04-28_at_10.35.04](/uploads/41f45f3f92f971e7f38df7a98765cb9d/Screen_Shot_2016-04-28_at_10.35.04.png)

Closes #16555, #14820

See merge request !3963

3 files changed, 68 insertions, 2 deletions

diff --git a/CHANGELOG b/CHANGELOG
index ed151df9e25..5bd897126b2 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -14,6 +14,7 @@ v 8.8.0 (unreleased)
   - Backport GitLab Enterprise support from EE
   - Files over 5MB can only be viewed in their raw form, files over 1MB without highlighting !3718
   - Add support for supressing text diffs using .gitattributes on the default branch (Matt Oakes)
+  - Added multiple colors for labels in dropdowns when dups happen.
 
 v 8.7.2
   - The "New Branch" button is now loaded asynchronously
diff --git a/app/assets/javascripts/labels_select.js.coffee b/app/assets/javascripts/labels_select.js.coffee
index 7d61cd9bf73..995fd768603 100644
--- a/app/assets/javascripts/labels_select.js.coffee
+++ b/app/assets/javascripts/labels_select.js.coffee
@@ -163,6 +163,21 @@ class @LabelsSelect
           $.ajax(
             url: labelUrl
           ).done (data) ->
+            data = _.chain data
+              .groupBy (label) ->
+                label.title
+              .map (label) ->
+                color = _.map label, (dup) ->
+                  dup.color
+
+                return {
+                  id: label[0].id
+                  title: label[0].title
+                  color: color
+                  duplicate: color.length > 1
+                }
+              .value()
+
             if $dropdown.hasClass 'js-extra-options'
               if showNo
                 data.unshift(
@@ -178,6 +193,7 @@ class @LabelsSelect
 
               if data.length > 2
                 data.splice 2, 0, 'divider'
+
             callback data
 
         renderRow: (label) ->
@@ -192,11 +208,31 @@ class @LabelsSelect
           if $dropdown.hasClass('js-multiselect') and removesAll
             selectedClass.push 'dropdown-clear-active'
 
-          color = if label.color? then "<span class='dropdown-label-box' style='background-color: #{label.color}'></span>" else ""
+          if label.duplicate
+            spacing = 100 / label.color.length
+
+            # Reduce the colors to 4
+            label.color = label.color.filter (color, i) ->
+              i < 4
+
+            color = _.map(label.color, (color, i) ->
+              percentFirst = Math.floor(spacing * i)
+              percentSecond = Math.floor(spacing * (i + 1))
+              "#{color} #{percentFirst}%,#{color} #{percentSecond}% "
+            ).join(',')
+            color = "linear-gradient(#{color})"
+          else
+            if label.color?
+              color = label.color[0]
+
+          if color
+            colorEl = "<span class='dropdown-label-box' style='background: #{color}'></span>"
+          else
+            colorEl = ''
 
           "<li>
             <a href='#' class='#{selectedClass.join(' ')}'>
-              #{color}
+              #{colorEl}
               #{_.escape(label.title)}
             </a>
           </li>"
diff --git a/spec/features/dashboard/label_filter_spec.rb b/spec/features/dashboard/label_filter_spec.rb
new file mode 100644
index 00000000000..24e83d44010
--- /dev/null
+++ b/spec/features/dashboard/label_filter_spec.rb
@@ -0,0 +1,29 @@
+require 'spec_helper'
+
+describe 'Dashboard > label filter', feature: true, js: true do
+  let(:user) { create(:user) }
+  let(:project) { create(:project, name: 'test', namespace: user.namespace) }
+  let(:project2) { create(:project, name: 'test2', path: 'test2', namespace: user.namespace) }
+  let(:label) { create(:label, title: 'bug', color: '#ff0000') }
+  let(:label2) { create(:label, title: 'bug') }
+
+  before do
+    project.labels << label
+    project2.labels << label2
+
+    login_as(user)
+    visit issues_dashboard_path
+  end
+
+  context 'duplicate labels' do
+    it 'should remove duplicate labels' do
+      page.within('.labels-filter') do
+        click_button 'Label'
+      end
+
+      page.within('.dropdown-menu-labels') do
+        expect(page).to have_selector('.dropdown-content a', text: 'bug', count: 1)
+      end
+    end
+  end
+end