Add filtered search to group issue dashboard

6 files changed, 243 insertions, 5 deletions

diff --git a/spec/features/groups/issues_spec.rb b/spec/features/groups/issues_spec.rb
index 449a99a2c7b..cdf7aceb13c 100644
--- a/spec/features/groups/issues_spec.rb
+++ b/spec/features/groups/issues_spec.rb
@@ -1,6 +1,8 @@
 require 'spec_helper'
 
 feature 'Group issues page' do
+  include FilteredSearchHelpers
+
   let(:path) { issues_group_path(group) }
   let(:issuable) { create(:issue, project: project, title: "this is my created issuable")}
 
@@ -31,12 +33,10 @@ feature 'Group issues page' do
     let(:path) { issues_group_path(group) }
 
     it 'filters by only group users' do
-      click_button('Assignee')
-
-      wait_for_requests
+      filtered_search.set('assignee:')
 
-      expect(find('.dropdown-menu-assignee')).to have_link(user.name)
-      expect(find('.dropdown-menu-assignee')).not_to have_link(user2.name)
+      expect(find('#js-dropdown-assignee .filter-dropdown')).to have_content(user.name)
+      expect(find('#js-dropdown-assignee .filter-dropdown')).not_to have_content(user2.name)
     end
   end
 end
diff --git a/spec/helpers/search_helper_spec.rb b/spec/helpers/search_helper_spec.rb
index b7e547dc1f5..4dab21440a6 100644
--- a/spec/helpers/search_helper_spec.rb
+++ b/spec/helpers/search_helper_spec.rb
@@ -68,4 +68,38 @@ describe SearchHelper do
       end
     end
   end
+
+  describe 'search_filter_input_options' do
+    context 'project' do
+      before do
+        @project = create(:project, :repository)
+      end
+
+      it 'includes id with type' do
+        expect(search_filter_input_options('type')[:id]).to eq('filtered-search-type')
+      end
+
+      it 'includes project-id' do
+        expect(search_filter_input_options('')[:data]['project-id']).to eq(@project.id)
+      end
+
+      it 'includes project base-endpoint' do
+        expect(search_filter_input_options('')[:data]['base-endpoint']).to eq(project_path(@project))
+      end
+    end
+
+    context 'group' do
+      before do
+        @group = create(:group, name: 'group')
+      end
+
+      it 'does not includes project-id' do
+        expect(search_filter_input_options('')[:data]['project-id']).to eq(nil)
+      end
+
+      it 'includes group base-endpoint' do
+        expect(search_filter_input_options('')[:data]['base-endpoint']).to eq("/groups#{group_path(@group)}")
+      end
+    end
+  end
 end
diff --git a/spec/javascripts/droplab/plugins/ajax_spec.js b/spec/javascripts/droplab/plugins/ajax_spec.js
new file mode 100644
index 00000000000..085f25764fe
--- /dev/null
+++ b/spec/javascripts/droplab/plugins/ajax_spec.js
@@ -0,0 +1,36 @@
+import AjaxCache from '~/lib/utils/ajax_cache';
+import Ajax from '~/droplab/plugins/ajax';
+
+describe('Ajax', () => {
+  describe('preprocessing', () => {
+    const config = {};
+
+    describe('is not configured', () => {
+      it('passes the data through', () => {
+        const data = ['data'];
+        expect(Ajax.preprocessing(config, data)).toEqual(data);
+      });
+    });
+
+    describe('is configured', () => {
+      const processedArray = ['processed'];
+
+      beforeEach(() => {
+        config.preprocessing = () => processedArray;
+        spyOn(config, 'preprocessing').and.callFake(() => processedArray);
+      });
+
+      it('calls preprocessing', () => {
+        Ajax.preprocessing(config, []);
+        expect(config.preprocessing.calls.count()).toBe(1);
+      });
+
+      it('overrides AjaxCache', () => {
+        spyOn(AjaxCache, 'override').and.callFake((endpoint, results) => expect(results).toEqual(processedArray));
+
+        Ajax.preprocessing(config, []);
+        expect(AjaxCache.override.calls.count()).toBe(1);
+      });
+    });
+  });
+});
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';
diff --git a/spec/javascripts/lib/utils/ajax_cache_spec.js b/spec/javascripts/lib/utils/ajax_cache_spec.js
index 2c946802dcd..49971bd91e2 100644
--- a/spec/javascripts/lib/utils/ajax_cache_spec.js
+++ b/spec/javascripts/lib/utils/ajax_cache_spec.js
@@ -77,6 +77,15 @@ describe('AjaxCache', () => {
     });
   });
 
+  describe('override', () => {
+    it('overrides existing cache', () => {
+      AjaxCache.internalStorage.endpoint = 'existing-endpoint';
+      AjaxCache.override('endpoint', 'new-endpoint');
+
+      expect(AjaxCache.internalStorage.endpoint).toEqual('new-endpoint');
+    });
+  });
+
   describe('retrieve', () => {
     let ajaxSpy;