1 files changed, 63 insertions, 2 deletions
diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js
index ef8fe071012..8d711e3213c 100644
--- a/app/assets/javascripts/filtered_search/dropdown_utils.js
+++ b/app/assets/javascripts/filtered_search/dropdown_utils.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import FilteredSearchContainer from './container';
 
 class DropdownUtils {
@@ -50,6 +51,66 @@ class DropdownUtils {
     return updatedItem;
   }
 
+  static mergeDuplicateLabels(dataMap, newLabel) {
+    const updatedMap = dataMap;
+    const key = newLabel.title;
+
+    const hasKeyProperty = Object.prototype.hasOwnProperty.call(updatedMap, key);
+
+    if (!hasKeyProperty) {
+      updatedMap[key] = newLabel;
+    } else {
+      const existing = updatedMap[key];
+
+      if (!existing.multipleColors) {
+        existing.multipleColors = [existing.color];
+      }
+
+      existing.multipleColors.push(newLabel.color);
+    }
+
+    return updatedMap;
+  }
+
+  static duplicateLabelColor(labelColors) {
+    const colors = labelColors;
+    const spacing = 100 / colors.length;
+
+    // Reduce the colors to 4
+    colors.length = Math.min(colors.length, 4);
+
+    const color = colors.map((c, i) => {
+      const percentFirst = Math.floor(spacing * i);
+      const percentSecond = Math.floor(spacing * (i + 1));
+      return `${c} ${percentFirst}%, ${c} ${percentSecond}%`;
+    }).join(', ');
+
+    return `linear-gradient(${color})`;
+  }
+
+  static duplicateLabelPreprocessing(data) {
+    const results = [];
+    const dataMap = {};
+
+    data.forEach(DropdownUtils.mergeDuplicateLabels.bind(null, dataMap));
+
+    Object.keys(dataMap)
+      .forEach((key) => {
+        const label = dataMap[key];
+
+        if (label.multipleColors) {
+          label.color = DropdownUtils.duplicateLabelColor(label.multipleColors);
+          label.text_color = '#000000';
+        }
+
+        results.push(label);
+      });
+
+    results.preprocessed = true;
+
+    return results;
+  }
+
   static filterHint(config, item) {
     const { input, allowedKeys } = config;
     const updatedItem = item;
@@ -62,11 +123,11 @@ class DropdownUtils {
 
     if (!allowMultiple && itemInExistingTokens) {
       updatedItem.droplab_hidden = true;
-    } else if (!lastKey || searchInput.split('').last() === ' ') {
+    } else if (!lastKey || _.last(searchInput.split('')) === ' ') {
       updatedItem.droplab_hidden = false;
     } else if (lastKey) {
       const split = lastKey.split(':');
-      const tokenName = split[0].split(' ').last();
+      const tokenName = _.last(split[0].split(' '));
 
       const match = updatedItem.hint.indexOf(tokenName.toLowerCase()) === -1;
       updatedItem.droplab_hidden = tokenName ? match : false;