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.

Closes #16555

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>"

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