Add filtered search to group issue dashboard

2 files changed, 159 insertions, 0 deletions

diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js
index f55726379f3..244f170ab7a 100644
--- a/spec/javascripts/filtered_search/dropdown_utils_spec.js
+++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js
@@ -191,6 +191,102 @@ describe('Dropdown Utils', () => {
     });
   });
 
+  describe('mergeDuplicateLabels', () => {
+    const dataMap = {
+      label: {
+        title: 'label',
+        color: '#FFFFFF',
+      },
+    };
+
+    it('should add label to dataMap if it is not a duplicate', () => {
+      const newLabel = {
+        title: 'new-label',
+        color: '#000000',
+      };
+
+      const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, newLabel);
+      expect(updated[newLabel.title]).toEqual(newLabel);
+    });
+
+    it('should merge colors if label is a duplicate', () => {
+      const duplicate = {
+        title: 'label',
+        color: '#000000',
+      };
+
+      const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, duplicate);
+      expect(updated.label.multipleColors).toEqual([dataMap.label.color, duplicate.color]);
+    });
+  });
+
+  describe('duplicateLabelColor', () => {
+    it('should linear-gradient 2 colors', () => {
+      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']);
+      expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 50%, #000000 50%, #000000 100%)');
+    });
+
+    it('should linear-gradient 3 colors', () => {
+      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333']);
+      expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 33%, #000000 33%, #000000 66%, #333333 66%, #333333 100%)');
+    });
+
+    it('should linear-gradient 4 colors', () => {
+      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD']);
+      expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 25%, #000000 25%, #000000 50%, #333333 50%, #333333 75%, #DDDDDD 75%, #DDDDDD 100%)');
+    });
+
+    it('should not linear-gradient more than 4 colors', () => {
+      const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD', '#EEEEEE']);
+      expect(gradient.indexOf('#EEEEEE') === -1).toEqual(true);
+    });
+  });
+
+  describe('duplicateLabelPreprocessing', () => {
+    it('should set preprocessed to true', () => {
+      const results = gl.DropdownUtils.duplicateLabelPreprocessing([]);
+      expect(results.preprocessed).toEqual(true);
+    });
+
+    it('should not mutate existing data if there are no duplicates', () => {
+      const data = [{
+        title: 'label1',
+        color: '#FFFFFF',
+      }, {
+        title: 'label2',
+        color: '#000000',
+      }];
+      const results = gl.DropdownUtils.duplicateLabelPreprocessing(data);
+
+      expect(results.length).toEqual(2);
+      expect(results[0]).toEqual(data[0]);
+      expect(results[1]).toEqual(data[1]);
+    });
+
+    describe('duplicate labels', () => {
+      const data = [{
+        title: 'label',
+        color: '#FFFFFF',
+      }, {
+        title: 'label',
+        color: '#000000',
+      }];
+      const results = gl.DropdownUtils.duplicateLabelPreprocessing(data);
+
+      it('should merge duplicate labels', () => {
+        expect(results.length).toEqual(1);
+      });
+
+      it('should convert multiple colored labels into linear-gradient', () => {
+        expect(results[0].color).toEqual(gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']));
+      });
+
+      it('should set multiple colored label text color to black', () => {
+        expect(results[0].text_color).toEqual('#000000');
+      });
+    });
+  });
+
   describe('setDataValueIfSelected', () => {
     beforeEach(() => {
       spyOn(gl.FilteredSearchDropdownManager, 'addWordToInput')
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
index fa4343ffbc8..67166802c70 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -797,6 +797,69 @@ describe('Filtered Search Visual Tokens', () => {
     });
   });
 
+  describe('setTokenStyle', () => {
+    let originalTextColor;
+
+    beforeEach(() => {
+      originalTextColor = bugLabelToken.style.color;
+    });
+
+    it('should set backgroundColor', () => {
+      const originalBackgroundColor = bugLabelToken.style.backgroundColor;
+      const token = subject.setTokenStyle(bugLabelToken, 'blue', 'white');
+      expect(token.style.backgroundColor).toEqual('blue');
+      expect(token.style.backgroundColor).not.toEqual(originalBackgroundColor);
+    });
+
+    it('should not set backgroundColor when it is a linear-gradient', () => {
+      const token = subject.setTokenStyle(bugLabelToken, 'linear-gradient(135deg, red, blue)', 'white');
+      expect(token.style.backgroundColor).toEqual(bugLabelToken.style.backgroundColor);
+    });
+
+    it('should set textColor', () => {
+      const token = subject.setTokenStyle(bugLabelToken, 'white', 'black');
+      expect(token.style.color).toEqual('black');
+      expect(token.style.color).not.toEqual(originalTextColor);
+    });
+
+    it('should add inverted class when textColor is #FFFFFF', () => {
+      const token = subject.setTokenStyle(bugLabelToken, 'black', '#FFFFFF');
+      expect(token.style.color).toEqual('rgb(255, 255, 255)');
+      expect(token.style.color).not.toEqual(originalTextColor);
+      expect(token.querySelector('.remove-token').classList.contains('inverted')).toEqual(true);
+    });
+  });
+
+  describe('preprocessLabel', () => {
+    const endpoint = 'endpoint';
+
+    it('does not preprocess more than once', () => {
+      let labels = [];
+
+      spyOn(gl.DropdownUtils, 'duplicateLabelPreprocessing').and.callFake(() => []);
+
+      labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+      gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+
+      expect(gl.DropdownUtils.duplicateLabelPreprocessing.calls.count()).toEqual(1);
+    });
+
+    describe('not preprocessed before', () => {
+      it('returns preprocessed labels', () => {
+        let labels = [];
+        expect(labels.preprocessed).not.toEqual(true);
+        labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels);
+        expect(labels.preprocessed).toEqual(true);
+      });
+
+      it('overrides AjaxCache with preprocessed results', () => {
+        spyOn(AjaxCache, 'override').and.callFake(() => {});
+        gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, []);
+        expect(AjaxCache.override.calls.count()).toEqual(1);
+      });
+    });
+  });
+
   describe('updateLabelTokenColor', () => {
     const jsonFixtureName = 'labels/project_labels.json';
     const dummyEndpoint = '/dummy/endpoint';